diff --git a/types/carbon-components-react/carbon-components-react-tests.tsx b/types/carbon-components-react/carbon-components-react-tests.tsx index e40ebdecf8..e2414e170d 100644 --- a/types/carbon-components-react/carbon-components-react-tests.tsx +++ b/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 = ( { - 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
; + }} + /> +); + +const headerData1 = { key: '1', header: 'Test', someRandomHeaderProp: 'test' }; +const t4 = ( + { + let table = (Content
); + let header = ( + + {headerData1.header} + + ); + let header2 = ( + ({ header: headerData1, extra1: "test" })}> + {headerData1.header} + + ); + let rowProps = data.getRowProps({ row: rowData1, extra1: 'qwerty', ...rowData1 }); + let row = ( + + Content + + ); + let batchActions = ( + + Content + + ); let a = rowProps.extra1; let b = rowProps.someRandomRowProp; return
; diff --git a/types/carbon-components-react/components/DataTable/DataTable.d.ts b/types/carbon-components-react/components/DataTable/DataTable.d.ts index 938874f3f5..bf4f348fac 100644 --- a/types/carbon-components-react/components/DataTable/DataTable.d.ts +++ b/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( + getBatchActionProps( data?: ShapeOf ): ShapeOf; - getHeaderProps( + getHeaderProps( data: ShapeOf, E> ): ShapeOf, E>; - getRowProps( + getRowProps>( data: ShapeOf, E> ): ShapeOf, E>; getSelectionProps( data?: ShapeOf, E> ): ShapeOf, E> | ShapeOf, E>; - getTableProps(): DataTableExposedProps; + getTableProps(): TableCarbonProps; headers: DataTableProps['headers']; onInputChange(event: React.SyntheticEvent): void; radio?: DataTableProps['radio']; @@ -172,7 +163,7 @@ export type DataTableTranslationKey = | "carbon.table.row.select" | "carbon.table.row.unselect"; -interface DataTableInheritedProps extends InternationalProps, DataTableExposedProps { } +interface DataTableInheritedProps extends InternationalProps, TableCarbonProps { } export interface DataTableProps extends DataTableInheritedProps { diff --git a/types/carbon-components-react/components/DataTable/Table.d.ts b/types/carbon-components-react/components/DataTable/Table.d.ts index aaa1acbe1f..67570b44f0 100644 --- a/types/carbon-components-react/components/DataTable/Table.d.ts +++ b/types/carbon-components-react/components/DataTable/Table.d.ts @@ -2,14 +2,18 @@ import * as React from "react"; interface InheritedProps extends React.TableHTMLAttributes { } -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; export default Table; diff --git a/types/carbon-components-react/components/DataTable/TableHeader.d.ts b/types/carbon-components-react/components/DataTable/TableHeader.d.ts index fbca899a50..5b3f498ac0 100644 --- a/types/carbon-components-react/components/DataTable/TableHeader.d.ts +++ b/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["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 { diff --git a/types/carbon-components-react/components/FileUploader/FileUploader.d.ts b/types/carbon-components-react/components/FileUploader/FileUploader.d.ts index 3f31e53697..3137a35934 100644 --- a/types/carbon-components-react/components/FileUploader/FileUploader.d.ts +++ b/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, } diff --git a/types/carbon-components-react/index.d.ts b/types/carbon-components-react/index.d.ts index e17e68600c..2fec34da4c 100644 --- a/types/carbon-components-react/index.d.ts +++ b/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 // 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"; diff --git a/types/carbon-components-react/typings/translation.d.ts b/types/carbon-components-react/typings/translation.d.ts new file mode 100644 index 0000000000..511f45d030 --- /dev/null +++ b/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;