[@types/carbon-components-react] Type updates for 7.5 + DataTable type fixes. (#37773)

* Update FileUploader type.

* Fix DataTable Table types.

* Fix TableHeader sort type.

* Fix DataTable types. Added tests for spread of prop getters to the "default" components.

* Add union translation key type.

* Update minor version to 7.5

* Fix unused file problem.

types/carbon-components-react/carbon-components-react-tests.tsx

@@ -1,5 +1,13 @@
 import * as React from 'react';
-import { DataTable, DataTableHeader, DataTableRow } from 'carbon-components-react';
+import {
+    DataTable,
+    DataTableHeader,
+    DataTableRow,
+    Table,
+    TableBatchActions,
+    TableHeader,
+    TableRow,
+} from 'carbon-components-react';
 
 interface Row1 extends DataTableRow {
     rowProp: string;
@@ -75,13 +83,48 @@ const t2 = (
 );
 
 // No types explicitly set on DataTable props
-const row = { id: '2', someRandomRowProp: 'test' };
+const rowData1 = { id: '2', someRandomRowProp: 'test' };
 const t3 = (
     <DataTable
         headers={[{ key: '1', header: 'Test', someRandomHeaderProp: 'test' }]}
-        rows={[row]}
+        rows={[rowData1]}
         render={data => {
-            let rowProps = data.getRowProps({ row, extra1: 'qwerty', ...row });
+            let rowProps = data.getRowProps({ row: rowData1, extra1: 'qwerty', ...rowData1 });
+            let a = rowProps.extra1;
+            let b = rowProps.someRandomRowProp;
+            return <div />;
+        }}
+    />
+);
+
+const headerData1 = { key: '1', header: 'Test', someRandomHeaderProp: 'test' };
+const t4 = (
+    <DataTable
+        headers={[headerData1]}
+        rows={[rowData1]}
+        render={data => {
+            let table = (<Table {...data.getTableProps()}>Content</Table>);
+            let header = (
+                <TableHeader {...data.getHeaderProps({ header: headerData1, randomAttr: "asdf" })}>
+                    {headerData1.header}
+                </TableHeader>
+            );
+            let header2 = (
+                <TableHeader {...data.getHeaderProps<ExtraStuff>({ header: headerData1, extra1: "test" })}>
+                    {headerData1.header}
+                </TableHeader>
+            );
+            let rowProps = data.getRowProps({ row: rowData1, extra1: 'qwerty', ...rowData1 });
+            let row = (
+                <TableRow {...rowProps}>
+                    Content
+                </TableRow>
+            );
+            let batchActions = (
+                <TableBatchActions {...data.getBatchActionProps({ spellCheck: true, randomAttr: "Asdf" })}>
+                    Content
+                </TableBatchActions>
+            );
             let a = rowProps.extra1;
             let b = rowProps.someRandomRowProp;
             return <div />;

types/carbon-components-react/components/DataTable/DataTable.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { InternationalProps, ShapeOf } from "../../typings/shared";
+import { InternationalProps, ReactAttr, ReactDivAttr, ShapeOf } from '../../typings/shared';
 import { DataTableSortState, DataTableSortStates } from "./state/sorting";
-import Table from "./Table";
+import Table, { TableCarbonProps } from "./Table";
 import TableActionList from "./TableActionList";
 import TableBatchAction from "./TableBatchAction";
 import TableBatchActions from "./TableBatchActions";
@@ -126,34 +126,25 @@ export interface DataTableCustomBatchActionsProps {
 
 // region DataTable
 
-export type DataTableSize = "compact" | "normal" | "short" | "tall";
-export interface DataTableExposedProps {
-    isSortable?: boolean,
-    shouldShowBorder?: boolean,
-    size?: DataTableSize,
-    useStaticWidth?: boolean,
-    useZebraStyles?: boolean,
-}
-
 // Custom Render Props
 export interface DataTableCustomRenderProps<
     R extends DataTableRow = DataTableRow,
     H extends DataTableHeader = DataTableHeader
 > {
     expandRow(rowId: R['id']): void;
-    getBatchActionProps<E extends object = {}>(
+    getBatchActionProps<E extends object = ReactDivAttr>(
         data?: ShapeOf<DataTableCustomBatchActionsData, E>
     ): ShapeOf<DataTableCustomBatchActionsProps, E>;
-    getHeaderProps<E extends object = {}>(
+    getHeaderProps<E extends object = ReactAttr>(
         data: ShapeOf<DataTableCustomHeaderData<H>, E>
     ): ShapeOf<DataTableCustomHeaderProps<H>, E>;
-    getRowProps<E extends object = {}>(
+    getRowProps<E extends object = ReactAttr<HTMLTableRowElement>>(
         data: ShapeOf<DataTableCustomRowData<R>, E>
     ): ShapeOf<DataTableCustomRowProps<R>, E>;
     getSelectionProps<E extends object = {}>(
         data?: ShapeOf<DataTableCustomSelectionData<R>, E>
     ): ShapeOf<DataTableCustomSelectionProps<R>, E> | ShapeOf<DataTableCustomSelectionProps<never>, E>;
-    getTableProps(): DataTableExposedProps;
+    getTableProps(): TableCarbonProps;
     headers: DataTableProps<R, H>['headers'];
     onInputChange(event: React.SyntheticEvent<HTMLInputElement>): void;
     radio?: DataTableProps<R, H>['radio'];
@@ -172,7 +163,7 @@ export type DataTableTranslationKey =
     | "carbon.table.row.select"
     | "carbon.table.row.unselect";
 
-interface DataTableInheritedProps extends InternationalProps<DataTableTranslationKey>, DataTableExposedProps { }
+interface DataTableInheritedProps extends InternationalProps<DataTableTranslationKey>, TableCarbonProps { }
 
 export interface DataTableProps<R extends DataTableRow = DataTableRow, H extends DataTableHeader = DataTableHeader>
     extends DataTableInheritedProps {

types/carbon-components-react/components/DataTable/Table.d.ts

@@ -2,14 +2,18 @@ import * as React from "react";
 
 interface InheritedProps extends React.TableHTMLAttributes<HTMLTableElement> { }
 
-export interface TableProps extends InheritedProps {
+export type DataTableSize = "compact" | "normal" | "short" | "tall";
+
+export interface TableCarbonProps {
     isSortable?: boolean,
     shouldShowBorder?: boolean,
-    size?: "compact" | "normal" | "small" | "tall",
+    size?: DataTableSize,
     useStaticWidth?: boolean,
     useZebraStyles?: boolean,
 }
 
+export interface TableProps extends InheritedProps, TableCarbonProps { }
+
 declare const Table: React.FC<TableProps>;
 
 export default Table;

types/carbon-components-react/components/DataTable/TableHeader.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { InternationalProps, ReactButtonAttr } from "../../typings/shared";
+import { DataTableSortState } from './state/sorting';
 
 export type TableHeaderTranslationKey = "carbon.table.header.icon.description";
 interface InheritedProps extends
@@ -9,11 +10,10 @@ interface InheritedProps extends
     scope?: React.ThHTMLAttributes<any>["scope"],
 }
 
-export type SortDirection = "ascending" | "descending" | "none";
 export interface TableHeaderProps extends InheritedProps {
     isSortable?: boolean,
     isSortHeader?: boolean,
-    sortDirection?: SortDirection,
+    sortDirection?: DataTableSortState,
 }
 
 interface TableHeaderFC extends React.FC<TableHeaderProps> {

types/carbon-components-react/components/FileUploader/FileUploader.d.ts

@@ -7,7 +7,7 @@ interface SharedProps {
     buttonKind?: ButtonKind,
     disabled?: ReactInputAttr["disabled"],
     disableLabelChanges?: boolean,
-    labelText?: string
+    labelText?: React.ReactNode,
     listFiles?: boolean,
     multiple?: boolean,
 }

types/carbon-components-react/index.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for carbon-components-react 7.4
+// Type definitions for carbon-components-react 7.5
 // Project: https://github.com/carbon-design-system/carbon/tree/master/packages/react
 // Definitions by: Kyle Albert <https://github.com/kalbert312>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
@@ -288,3 +288,5 @@ export { _ToggleSkeleton as ToggleSkeleton };
 export { _ToggleSmallSkeleton as ToggleSmallSkeleton };
 export { _IconSkeleton as IconSkeleton };
 export { _DatePickerSkeleton as DatePickerSkeleton };
+
+export * from "./typings/translation";

types/carbon-components-react/typings/translation.d.ts

@@ -0,0 +1,22 @@
+import {
+    DataTableTranslationKey,
+    TableBatchActionsTranslationKey,
+    TableHeaderTranslationKey,
+    TableToolbarTranslationKey,
+} from '../components/DataTable';
+import { ListBoxFieldTranslationKey } from '../components/ListBox/ListBoxField';
+import { ListBoxMenuIconTranslationKey } from '../components/ListBox/ListBoxMenuIcon';
+import { ListBoxSelectionTranslationKey } from '../components/ListBox/ListBoxSelection';
+import { NumberInputTranslationKey } from '../components/NumberInput';
+import { SideNavTranslationKey } from '../components/UIShell/SideNav';
+
+export type CarbonTranslationKey =
+    DataTableTranslationKey
+    | ListBoxFieldTranslationKey
+    | ListBoxMenuIconTranslationKey
+    | ListBoxSelectionTranslationKey
+    | NumberInputTranslationKey
+    | SideNavTranslationKey
+    | TableBatchActionsTranslationKey
+    | TableHeaderTranslationKey
+    | TableToolbarTranslationKey;