refactor: omit HTMLAttributes from grid column types

src/GridColumn.tsx

@@ -11,8 +11,17 @@ import { useSimpleRenderer } from './renderers/useSimpleRenderer.js';
 
 export * from './generated/GridColumn.js';
 
+// Properties from HTMLAttributes that are omitted from all GridColumn types
+export type OmittedGridColumnHTMLAttributes<TItem> = Omit<
+  React.HTMLAttributes<GridColumnElement<TItem>>,
+  'hidden' | 'id' | 'className' | 'dangerouslySetInnerHTML' | 'slot' | 'children' | 'title'
+>;
+
 export type GridColumnProps<TItem> = Partial<
-  Omit<_GridColumnProps<TItem>, 'children' | 'footerRenderer' | 'headerRenderer' | 'renderer'>
+  Omit<
+    _GridColumnProps<TItem>,
+    'children' | 'footerRenderer' | 'headerRenderer' | 'renderer' | keyof OmittedGridColumnHTMLAttributes<TItem>
+  >
 > &
   Readonly<{
     children?: ComponentType<GridBodyReactRendererProps<TItem>> | null;

src/GridColumnGroup.tsx

@@ -5,10 +5,13 @@ import {
   type GridColumnGroupProps as _GridColumnGroupProps,
 } from './generated/GridColumnGroup.js';
 import { useSimpleRenderer, type ReactSimpleRendererProps } from './renderers/useSimpleRenderer.js';
+import type { OmittedGridColumnHTMLAttributes } from './GridColumn.js';
 
 export * from './generated/GridColumnGroup.js';
 
-export type GridColumnGroupProps = Partial<Omit<_GridColumnGroupProps, 'footerRenderer' | 'headerRenderer'>> &
+export type GridColumnGroupProps = Partial<
+  Omit<_GridColumnGroupProps, 'footerRenderer' | 'headerRenderer' | keyof OmittedGridColumnHTMLAttributes<any>>
+> &
   Readonly<{
     footerRenderer?: ComponentType<ReactSimpleRendererProps<GridColumnGroupElement>> | null;
     headerRenderer?: ComponentType<ReactSimpleRendererProps<GridColumnGroupElement>> | null;

src/GridFilterColumn.tsx

@@ -8,6 +8,7 @@ import {
 import type { GridBodyReactRendererProps, GridEdgeReactRendererProps } from './renderers/grid.js';
 import { useModelRenderer } from './renderers/useModelRenderer.js';
 import { useSimpleRenderer } from './renderers/useSimpleRenderer.js';
+import type { OmittedGridColumnHTMLAttributes } from './GridColumn.js';
 
 export * from './generated/GridFilterColumn.js';
 
@@ -16,7 +17,10 @@ export * from './generated/GridFilterColumn.js';
  * `headerRenderer` is not allowed for `vaadin-grid-filter-column`.
  */
 export type GridFilterColumnProps<TItem> = Partial<
-  Omit<_GridFilterColumnProps<TItem>, 'children' | 'footerRenderer' | 'headerRenderer' | 'renderer'>
+  Omit<
+    _GridFilterColumnProps<TItem>,
+    'children' | 'footerRenderer' | 'headerRenderer' | 'renderer' | keyof OmittedGridColumnHTMLAttributes<TItem>
+  >
 > &
   Readonly<{
     children?: ComponentType<GridBodyReactRendererProps<TItem>> | null;

src/GridProEditColumn.tsx

@@ -8,13 +8,19 @@ import {
 import type { GridBodyReactRendererProps, GridEdgeReactRendererProps } from './renderers/grid.js';
 import { useModelRenderer } from './renderers/useModelRenderer.js';
 import { useSimpleRenderer } from './renderers/useSimpleRenderer.js';
+import type { OmittedGridColumnHTMLAttributes } from './GridColumn.js';
 
 export * from './generated/GridProEditColumn.js';
 
 export type GridProEditColumnProps<TItem> = Partial<
   Omit<
     _GridProEditColumnProps<TItem>,
-    'children' | 'editModeRenderer' | 'footerRenderer' | 'headerRenderer' | 'renderer'
+    | 'children'
+    | 'editModeRenderer'
+    | 'footerRenderer'
+    | 'headerRenderer'
+    | 'renderer'
+    | keyof OmittedGridColumnHTMLAttributes<TItem>
   >
 > &
   Readonly<{

src/GridSelectionColumn.tsx

@@ -8,11 +8,15 @@ import {
 import type { GridBodyReactRendererProps, GridEdgeReactRendererProps } from './renderers/grid.js';
 import { useModelRenderer } from './renderers/useModelRenderer.js';
 import { useSimpleRenderer } from './renderers/useSimpleRenderer.js';
+import type { OmittedGridColumnHTMLAttributes } from './GridColumn.js';
 
 export * from './generated/GridSelectionColumn.js';
 
 export type GridSelectionColumnProps<TItem> = Partial<
-  Omit<_GridSelectionColumnProps<TItem>, 'children' | 'footerRenderer' | 'headerRenderer' | 'renderer'>
+  Omit<
+    _GridSelectionColumnProps<TItem>,
+    'children' | 'footerRenderer' | 'headerRenderer' | 'renderer' | keyof OmittedGridColumnHTMLAttributes<TItem>
+  >
 > &
   Readonly<{
     children?: ComponentType<GridBodyReactRendererProps<TItem>> | null;

src/GridSortColumn.tsx

@@ -8,14 +8,18 @@ import {
 import type { GridBodyReactRendererProps, GridEdgeReactRendererProps } from './renderers/grid.js';
 import { useModelRenderer } from './renderers/useModelRenderer.js';
 import { useSimpleRenderer } from './renderers/useSimpleRenderer.js';
+import type { OmittedGridColumnHTMLAttributes } from './GridColumn.js';
 
 export * from './generated/GridSortColumn.js';
 
 /*
  * The `headerRenderer` is not allowed for `vaadin-grid-sort-column`.
  */
 export type GridSortColumnProps<TItem> = Partial<
-  Omit<_GridSortColumnProps<TItem>, 'children' | 'footerRenderer' | 'headerRenderer' | 'renderer'>
+  Omit<
+    _GridSortColumnProps<TItem>,
+    'children' | 'footerRenderer' | 'headerRenderer' | 'renderer' | keyof OmittedGridColumnHTMLAttributes<TItem>
+  >
 > &
   Readonly<{
     children?: ComponentType<GridBodyReactRendererProps<TItem>> | null;

src/GridTreeColumn.ts

@@ -1 +1,20 @@
+import type { ReactElement, RefAttributes } from 'react';
+import type { OmittedGridColumnHTMLAttributes } from './GridColumn.js';
+import {
+  GridTreeColumnElement,
+  GridTreeColumn as _GridTreeColumn,
+  type GridTreeColumnProps as _GridTreeColumnProps,
+} from './generated/GridTreeColumn.js';
+
 export * from './generated/GridTreeColumn.js';
+
+export type GridTreeColumnProps<TItem> = Partial<
+  Omit<
+    _GridTreeColumnProps<TItem>,
+    'children' | 'footerRenderer' | 'headerRenderer' | 'renderer' | keyof OmittedGridColumnHTMLAttributes<TItem>
+  >
+>;
+
+export const GridTreeColumn = _GridTreeColumn as <TItem>(
+  props: GridTreeColumnProps<TItem> & RefAttributes<GridTreeColumnElement>,
+) => ReactElement | null;

test/typings/api.ts

@@ -1,7 +1,13 @@
-import React, { type HTMLAttributes, type RefAttributes } from 'react';
+import React, { type ComponentType, type DOMAttributes, type HTMLAttributes, type RefAttributes } from 'react';
 import { TextField, TextFieldElement } from '../../TextField.js';
 import type { LitElement } from 'lit';
 import { GridColumn, GridColumnElement } from '../../GridColumn.js';
+import { GridTreeColumn } from '../../GridTreeColumn.js';
+import { GridSortColumn } from '../../GridSortColumn.js';
+import { GridFilterColumn } from '../../GridFilterColumn.js';
+import { GridSelectionColumn } from '../../GridSelectionColumn.js';
+import { GridProEditColumn } from '../../GridProEditColumn.js';
+import { GridColumnGroup, GridColumnGroupElement } from '../../GridColumnGroup.js';
 import { Dialog, DialogElement } from '../../Dialog.js';
 import { DatePicker, DatePickerElement } from '../../DatePicker.js';
 import { LoginOverlay, LoginOverlayElement } from '../../LoginOverlay.js';
@@ -52,11 +58,58 @@ assertOmitted<LitElement, TextFieldProps>('removeController');
 const gridColumnProps = React.createElement(GridColumn, {}).props;
 type GridColumnProps = typeof gridColumnProps;
 assertType<GridColumnElement['hidden'] | undefined>(gridColumnProps.hidden);
-
+assertType<GridColumnElement['autoWidth'] | undefined>(gridColumnProps.autoWidth);
+assertType<HTMLAttributes<GridColumnElement>['id']>(gridColumnProps.id);
+assertType<RefAttributes<GridColumnElement>['ref']>(gridColumnProps.ref);
+assertType<HTMLAttributes<GridColumnElement>['className']>(gridColumnProps.className);
+assertType<HTMLAttributes<GridColumnElement>['dangerouslySetInnerHTML']>(gridColumnProps.dangerouslySetInnerHTML);
+assertType<HTMLAttributes<GridColumnElement>['slot']>(gridColumnProps.slot);
+assertType<HTMLAttributes<GridColumnElement>['title']>(gridColumnProps.title);
+assertType<ComponentType<Readonly<any>> | undefined | null>(gridColumnProps.children);
+
+// Some omitted HTMLElement properties
 assertOmitted<HTMLElement, GridColumnProps>('append');
 assertOmitted<HTMLElement, GridColumnProps>('prepend');
 assertOmitted<HTMLElement, GridColumnProps>('ariaLabel');
 
+const gridColumnGroupProps = React.createElement(GridColumnGroup, {}).props;
+
+assertType<DOMAttributes<GridColumnGroupElement>['children'] | undefined>(gridColumnGroupProps.children);
+
+assertOmitted<GridColumnProps, GridColumnGroupElement>('renderer');
+
+const gridTreeColumnProps = React.createElement(GridTreeColumn, {}).props;
+type GridTreeColumnProps = typeof gridTreeColumnProps;
+
+assertType<string | null | undefined>(gridTreeColumnProps.path);
+
+assertOmitted<GridColumnProps, GridTreeColumnProps>('renderer');
+assertOmitted<GridColumnProps, GridTreeColumnProps>('headerRenderer');
+assertOmitted<GridColumnProps, GridTreeColumnProps>('footerRenderer');
+assertOmitted<GridColumnProps, GridTreeColumnProps>('children');
+
+const gridSortColumnProps = React.createElement(GridSortColumn, {}).props;
+const gridFilterColumnProps = React.createElement(GridFilterColumn, {}).props;
+const gridSelectionColumnProps = React.createElement(GridSelectionColumn, {}).props;
+const gridProEditColumnProps = React.createElement(GridProEditColumn, {}).props;
+
+type AllColumnsProps = typeof gridColumnGroupProps &
+  typeof gridColumnProps &
+  typeof gridTreeColumnProps &
+  typeof gridSortColumnProps &
+  typeof gridFilterColumnProps &
+  typeof gridSelectionColumnProps &
+  typeof gridProEditColumnProps;
+
+// Some omitted HTMLAttributes properties
+assertOmitted<HTMLAttributes<GridColumnElement>, AllColumnsProps>('style');
+assertOmitted<HTMLAttributes<GridColumnElement>, AllColumnsProps>('aria-label');
+assertOmitted<HTMLAttributes<GridColumnElement>, AllColumnsProps>('contentEditable');
+assertOmitted<HTMLAttributes<GridColumnElement>, AllColumnsProps>('translate');
+assertOmitted<HTMLAttributes<GridColumnElement>, AllColumnsProps>('draggable');
+assertOmitted<HTMLAttributes<GridColumnElement>, AllColumnsProps>('role');
+assertOmitted<HTMLAttributes<GridColumnElement>, AllColumnsProps>('onClick');
+
 const dialogProps = React.createElement(Dialog, {}).props;
 type DialogProps = typeof dialogProps;