[Bug]: DataTable multiple prop type inconsistencies between DataTable and its own sub-components

[rwibm]

Package

@carbon/react

Browser

No response

Package version

1.52.0

React version

18.2.63

Description

According to TypeScript the props returned by the getHeaderProps function on data tables has a different onClick event handler type to the one expected by the header component.

Using the example from the storybook gives the following typescript error:

error TS2322: Type '{ children: ReactNode; isSortable: boolean | undefined; isSortHeader: boolean; key: string; onClick: (e: MouseEvent) => void; sortDirection: DataTableSortState; }' is not assignable to type 'TableHeaderProps'.
  Types of property 'onClick' are incompatible.
    Type '(e: MouseEvent) => void' is not assignable to type 'MouseEventHandler<HTMLButtonElement>'.

LINE: <TableHeader {...getHeaderProps({ header, isSortable: true })}>

EDIT:

This also appears to affect other parts of the DataTable components, I am now getting errors for the ToolBarSearch component onChange event handler having the wrong type when passing in the onInputChange prop from the render function directly.

 error TS2322: Type '(e: ChangeEvent<HTMLInputElement>, defaultValue?: string | undefined) => void' is not assignable to type '(event: "" | ChangeEvent<HTMLInputElement>, value?: string | undefined) => void'.
  Types of parameters 'e' and 'event' are incompatible.
    Type '"" | ChangeEvent<HTMLInputElement>' is not assignable to type 'ChangeEvent<HTMLInputElement>'.
      Type 'string' is not assignable to type 'ChangeEvent<HTMLInputElement>'.

LINE: <TableToolbarSearch onChange={onInputChange} />

Weirdly, the search bar error does not appear on stackblitz, it knows the signatures are different, but doesn't show any errors. But it also thinks that "'DataTable' cannot be used as a JSX component.", so I'm not sure if my example is working correctly on there, but "tsc" locally gives the above error.

EDIT2:

This also affects the TableExpandRow component too, the isExpanded props don't match.

 error TS2322: Type '{ children: (Element | Element[])[]; ariaLabel: string; "aria-label": string; disabled: boolean | undefined; isExpanded?: boolean | undefined; isSelected?: boolean | undefined; key: string; onExpand: (e: MouseEvent) => void; }' is not assignable to type 'TableExpandRowProps'.
  Types of property 'isExpanded' are incompatible.
    Type 'boolean | undefined' is not assignable to type 'boolean'.
      Type 'undefined' is not assignable to type 'boolean'.

LINE: <TableExpandRow {...getRowProps({ row })}>

Reproduction/example

https://stackblitz.com/edit/react-ts-dxtfrs?file=App.tsx

Steps to reproduce

Simply try to use the getHeaderProps as shown in the storybook/documentation and TS will give errors without manually re-casting the props.

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

IBM Internal

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[rwibm]

Apologies, this is very closely related to a previous issue I reported last year, and the ongoing TypeScript support rollout.

Update here: #13091 (comment)

Closing as unnecessary, details moved to: #14831

See the following for details:
#12513
#14569