From deb513f37554f995ed4b79b3d40745c829ff7213 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Mon, 16 Jan 2023 19:37:57 +0100 Subject: [PATCH 1/4] BREAKING(DataGrid): render functions need to by typed --- .../etc/react-data-grid-react-window.api.md | 6 +++--- .../components/DataGridBody/DataGridBody.tsx | 5 +++-- .../DataGridBody/DataGridBody.types.ts | 12 ++++++------ .../DataGridBody/useDataGridBody.ts | 14 ++++++++++---- .../react-table/etc/react-table.api.md | 18 +++++++++--------- .../components/DataGridBody/DataGridBody.tsx | 5 +++-- .../DataGridBody/DataGridBody.types.ts | 12 ++++-------- .../components/DataGridRow/DataGridRow.tsx | 5 +++-- .../DataGridRow/DataGridRow.types.ts | 9 +++------ .../stories/DataGrid/Default.stories.tsx | 19 +++++++++---------- .../DataGrid/MultipleSelect.stories.tsx | 13 +++++-------- .../MultipleSelectControlled.stories.tsx | 13 +++++-------- .../DataGrid/RowNavigation.stories.tsx | 13 +++++-------- .../DataGrid/SelectionAppearance.stories.tsx | 13 +++++-------- .../stories/DataGrid/SingleSelect.stories.tsx | 13 +++++-------- .../SingleSelectControlled.stories.tsx | 13 +++++-------- .../stories/DataGrid/Sort.stories.tsx | 13 +++++-------- .../DataGrid/SortControlled.stories.tsx | 13 +++++-------- .../DataGrid/SubtleSelection.stories.tsx | 13 +++++-------- .../DataGrid/Virtualization.stories.tsx | 13 +++++-------- 20 files changed, 103 insertions(+), 132 deletions(-) diff --git a/packages/react-components/react-data-grid-react-window/etc/react-data-grid-react-window.api.md b/packages/react-components/react-data-grid-react-window/etc/react-data-grid-react-window.api.md index c9cc0909700b3..406a1a5e17af5 100644 --- a/packages/react-components/react-data-grid-react-window/etc/react-data-grid-react-window.api.md +++ b/packages/react-components/react-data-grid-react-window/etc/react-data-grid-react-window.api.md @@ -14,14 +14,14 @@ import * as React_2 from 'react'; import type { TableRowData } from '@fluentui/react-components/unstable'; // @public -export const DataGridBody: ForwardRefComponent; +export const DataGridBody: ForwardRefComponent & ((props: DataGridBodyProps) => JSX.Element); // @public -export type DataGridBodyProps = Omit & { +export type DataGridBodyProps = Omit & { itemSize: number; height: number; width?: string | number; - children: RowRenderFunction; + children: RowRenderFunction; }; // @public (undocumented) diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.tsx b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.tsx index 2daf505f218c4..e7c0024441d85 100644 --- a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.tsx +++ b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.tsx @@ -8,11 +8,12 @@ import type { DataGridBodyProps } from './DataGridBody.types'; /** * DataGridBody component */ -export const DataGridBody: ForwardRefComponent = React.forwardRef((props, ref) => { +export const DataGridBody: ForwardRefComponent & + ((props: DataGridBodyProps) => JSX.Element) = React.forwardRef((props, ref) => { const state = useDataGridBody_unstable(props, ref); useDataGridBodyStyles_unstable(state); return renderDataGridBody_unstable(state); -}); +}) as ForwardRefComponent & ((props: DataGridBodyProps) => JSX.Element); DataGridBody.displayName = 'DataGridBody'; diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.types.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.types.ts index 8405d38788955..318376ad59253 100644 --- a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.types.ts +++ b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.types.ts @@ -8,15 +8,15 @@ import type { export type DataGridBodySlots = DataGridBodySlotsBase; -// Use any here since we can't know the user types -// The user is responsible for narrowing the type downstream -// eslint-disable-next-line @typescript-eslint/no-explicit-any -export type RowRenderFunction = (row: TableRowData, style: React.CSSProperties) => React.ReactNode; +export type RowRenderFunction = ( + row: TableRowData, + style: React.CSSProperties, +) => React.ReactNode; /** * DataGridBody Props */ -export type DataGridBodyProps = Omit & { +export type DataGridBodyProps = Omit & { /** * The size of each row */ @@ -33,7 +33,7 @@ export type DataGridBodyProps = Omit & { /** * Children render function for rows */ - children: RowRenderFunction; + children: RowRenderFunction; }; /** diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBody.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBody.ts index 88104effe8c6a..6f24550332366 100644 --- a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBody.ts +++ b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBody.ts @@ -1,6 +1,9 @@ import * as React from 'react'; import type { DataGridBodyProps, DataGridBodyState } from './DataGridBody.types'; -import { useDataGridBody_unstable as useDataGridBodyBase_unstable } from '@fluentui/react-components/unstable'; +import { + useDataGridBody_unstable as useDataGridBodyBase_unstable, + TableRowData, +} from '@fluentui/react-components/unstable'; /** * Create the state required to render DataGridBody. @@ -12,14 +15,17 @@ import { useDataGridBody_unstable as useDataGridBodyBase_unstable } from '@fluen * @param ref - reference to root HTMLElement of DataGridBody */ export const useDataGridBody_unstable = (props: DataGridBodyProps, ref: React.Ref): DataGridBodyState => { - const { height, itemSize, width = '100%' } = props; - const baseState = useDataGridBodyBase_unstable(props, ref); + const { height, itemSize, width = '100%', children } = props; + + // cast the row render function to work with unknown args + const renderRowWithUnknown = children as (row: TableRowData, ...rest: unknown[]) => React.ReactNode; + const baseState = useDataGridBodyBase_unstable({ ...props, children: renderRowWithUnknown }, ref); return { ...baseState, itemSize, height, - renderRow: props.children, + renderRow: children, width, }; }; diff --git a/packages/react-components/react-table/etc/react-table.api.md b/packages/react-components/react-table/etc/react-table.api.md index 34d2e649cfc0d..3867e3db98e5e 100644 --- a/packages/react-components/react-table/etc/react-table.api.md +++ b/packages/react-components/react-table/etc/react-table.api.md @@ -20,7 +20,7 @@ import type { Slot } from '@fluentui/react-utilities'; import type { SlotClassNames } from '@fluentui/react-utilities'; // @public (undocumented) -export type CellRenderFunction = (column: TableColumnDefinition) => React_2.ReactNode; +export type CellRenderFunction = (column: TableColumnDefinition) => React_2.ReactNode; // @public export function createTableColumn(options: CreateTableColumnOptions): { @@ -40,14 +40,14 @@ export interface CreateTableColumnOptions extends Partial; // @public -export const DataGridBody: ForwardRefComponent; +export const DataGridBody: ForwardRefComponent & ((props: DataGridBodyProps) => JSX.Element); // @public (undocumented) export const dataGridBodyClassNames: SlotClassNames; // @public -export type DataGridBodyProps = Omit & { - children: RowRenderFunction; +export type DataGridBodyProps = Omit & { + children: RowRenderFunction; }; // @public (undocumented) @@ -55,7 +55,7 @@ export type DataGridBodySlots = TableBodySlots; // @public export type DataGridBodyState = TableBodyState & { - rows: TableRowData[]; + rows: TableRowData[]; renderRow: RowRenderFunction; }; @@ -131,14 +131,14 @@ export type DataGridProps = TableProps & Pick; +export const DataGridRow: ForwardRefComponent & ((props: DataGridRowProps) => JSX.Element); // @public (undocumented) export const dataGridRowClassNames: SlotClassNames; // @public -export type DataGridRowProps = Omit & Omit, 'children'> & { - children: CellRenderFunction; +export type DataGridRowProps = Omit & Omit, 'children'> & { + children: CellRenderFunction; }; // @public (undocumented) @@ -224,7 +224,7 @@ export const renderTableRow_unstable: (state: TableRowState) => JSX.Element; export const renderTableSelectionCell_unstable: (state: TableSelectionCellState) => JSX.Element; // @public (undocumented) -export type RowRenderFunction = (row: TableRowData, ...rest: any[]) => React_2.ReactNode; +export type RowRenderFunction = (row: TableRowData, ...rest: unknown[]) => React_2.ReactNode; // @public (undocumented) export type SortDirection = 'ascending' | 'descending'; diff --git a/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.tsx b/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.tsx index 35b2022006c05..2eb29a856c9a8 100644 --- a/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.tsx +++ b/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.tsx @@ -8,11 +8,12 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities'; /** * DataGridBody component */ -export const DataGridBody: ForwardRefComponent = React.forwardRef((props, ref) => { +export const DataGridBody: ForwardRefComponent & + ((props: DataGridBodyProps) => JSX.Element) = React.forwardRef((props, ref) => { const state = useDataGridBody_unstable(props, ref); useDataGridBodyStyles_unstable(state); return renderDataGridBody_unstable(state); -}); +}) as ForwardRefComponent & ((props: DataGridBodyProps) => JSX.Element); DataGridBody.displayName = 'DataGridBody'; diff --git a/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.types.ts b/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.types.ts index 2999def5ed71e..abd37ed9bbadf 100644 --- a/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.types.ts +++ b/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.types.ts @@ -4,27 +4,23 @@ import type { TableBodySlots, TableBodyProps, TableBodyState } from '../TableBod export type DataGridBodySlots = TableBodySlots; -// Use any here since we can't know the user types -// The user is responsible for narrowing the type downstream -// eslint-disable-next-line @typescript-eslint/no-explicit-any -export type RowRenderFunction = (row: TableRowData, ...rest: any[]) => React.ReactNode; +export type RowRenderFunction = (row: TableRowData, ...rest: unknown[]) => React.ReactNode; /** * DataGridBody Props */ -export type DataGridBodyProps = Omit & { +export type DataGridBodyProps = Omit & { /** * Render function for rows */ - children: RowRenderFunction; + children: RowRenderFunction; }; /** * State used in rendering DataGridBody */ export type DataGridBodyState = TableBodyState & { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - rows: TableRowData[]; + rows: TableRowData[]; renderRow: RowRenderFunction; }; diff --git a/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.tsx b/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.tsx index 688326d3652d7..f1824c47ae9b7 100644 --- a/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.tsx +++ b/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.tsx @@ -8,11 +8,12 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities'; /** * DataGridRow component */ -export const DataGridRow: ForwardRefComponent = React.forwardRef((props, ref) => { +export const DataGridRow: ForwardRefComponent & + ((props: DataGridRowProps) => JSX.Element) = React.forwardRef((props, ref) => { const state = useDataGridRow_unstable(props, ref); useDataGridRowStyles_unstable(state); return renderDataGridRow_unstable(state); -}); +}) as ForwardRefComponent & ((props: DataGridRowProps) => JSX.Element); DataGridRow.displayName = 'DataGridRow'; diff --git a/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.types.ts b/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.types.ts index c06e07be11cf1..fa1191682867c 100644 --- a/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.types.ts +++ b/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.types.ts @@ -12,17 +12,14 @@ export type DataGridRowSlots = TableRowSlots & { selectionCell?: Slot; }; -// Use any here since we can't know the user types -// The user is responsible for narrowing the type downstream -// eslint-disable-next-line @typescript-eslint/no-explicit-any -export type CellRenderFunction = (column: TableColumnDefinition) => React.ReactNode; +export type CellRenderFunction = (column: TableColumnDefinition) => React.ReactNode; /** * DataGridRow Props */ -export type DataGridRowProps = Omit & +export type DataGridRowProps = Omit & Omit, 'children'> & { - children: CellRenderFunction; + children: CellRenderFunction; }; /** diff --git a/packages/react-components/react-table/stories/DataGrid/Default.stories.tsx b/packages/react-components/react-table/stories/DataGrid/Default.stories.tsx index 314d010437545..25b16dddb2f41 100644 --- a/packages/react-components/react-table/stories/DataGrid/Default.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/Default.stories.tsx @@ -18,7 +18,6 @@ import { DataGridHeaderCell, DataGridCell, TableColumnDefinition, - TableRowData, createTableColumn, } from '@fluentui/react-table'; @@ -167,17 +166,17 @@ export const Default = () => { > - {({ renderHeaderCell }: TableColumnDefinition) => ( - {renderHeaderCell()} - )} + {({ renderHeaderCell }) => {renderHeaderCell()}} - - {({ item, rowId }: TableRowData) => ( - - {({ renderCell }: TableColumnDefinition) => {renderCell(item)}} - - )} + > + {({ item, rowId }) => { + return ( + key={rowId} selectionCell={{ 'aria-label': 'Select row' }}> + {({ renderCell }) => {renderCell(item)}} + + ); + }} ); diff --git a/packages/react-components/react-table/stories/DataGrid/MultipleSelect.stories.tsx b/packages/react-components/react-table/stories/DataGrid/MultipleSelect.stories.tsx index 630e22c06d728..eef93799f815e 100644 --- a/packages/react-components/react-table/stories/DataGrid/MultipleSelect.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/MultipleSelect.stories.tsx @@ -18,7 +18,6 @@ import { DataGridHeaderCell, DataGridCell, TableColumnDefinition, - TableRowData, createTableColumn, } from '@fluentui/react-table'; @@ -162,15 +161,13 @@ export const MultipleSelect = () => { - {({ renderHeaderCell }: TableColumnDefinition) => ( - {renderHeaderCell()} - )} + {({ renderHeaderCell }) => {renderHeaderCell()}} - - {({ item, rowId }: TableRowData) => ( - - {({ renderCell }: TableColumnDefinition) => {renderCell(item)}} + > + {({ item, rowId }) => ( + key={rowId} selectionCell={{ 'aria-label': 'Select row' }}> + {({ renderCell }) => {renderCell(item)}} )} diff --git a/packages/react-components/react-table/stories/DataGrid/MultipleSelectControlled.stories.tsx b/packages/react-components/react-table/stories/DataGrid/MultipleSelectControlled.stories.tsx index 02a2e76ad2519..a323563d30560 100644 --- a/packages/react-components/react-table/stories/DataGrid/MultipleSelectControlled.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/MultipleSelectControlled.stories.tsx @@ -18,7 +18,6 @@ import { DataGridHeaderCell, DataGridCell, TableColumnDefinition, - TableRowData, createTableColumn, TableRowId, DataGridProps, @@ -175,15 +174,13 @@ export const MultipleSelectControlled = () => { > - {({ renderHeaderCell }: TableColumnDefinition) => ( - {renderHeaderCell()} - )} + {({ renderHeaderCell }) => {renderHeaderCell()}} - - {({ item, rowId }: TableRowData) => ( - - {({ renderCell }: TableColumnDefinition) => {renderCell(item)}} + > + {({ item, rowId }) => ( + key={rowId} selectionCell={{ 'aria-label': 'Select row' }}> + {({ renderCell }) => {renderCell(item)}} )} diff --git a/packages/react-components/react-table/stories/DataGrid/RowNavigation.stories.tsx b/packages/react-components/react-table/stories/DataGrid/RowNavigation.stories.tsx index 3798075ba470b..95a61a2564bb6 100644 --- a/packages/react-components/react-table/stories/DataGrid/RowNavigation.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/RowNavigation.stories.tsx @@ -18,7 +18,6 @@ import { DataGridHeaderCell, DataGridCell, TableColumnDefinition, - TableRowData, createTableColumn, } from '@fluentui/react-table'; @@ -160,15 +159,13 @@ export const RowNavigation = () => { - {({ renderHeaderCell }: TableColumnDefinition) => ( - {renderHeaderCell()} - )} + {({ renderHeaderCell }) => {renderHeaderCell()}} - - {({ item, rowId }: TableRowData) => ( - - {({ renderCell }: TableColumnDefinition) => {renderCell(item)}} + > + {({ item, rowId }) => ( + key={rowId}> + {({ renderCell }) => {renderCell(item)}} )} diff --git a/packages/react-components/react-table/stories/DataGrid/SelectionAppearance.stories.tsx b/packages/react-components/react-table/stories/DataGrid/SelectionAppearance.stories.tsx index c5bc42e9f9131..660515e6a7ea0 100644 --- a/packages/react-components/react-table/stories/DataGrid/SelectionAppearance.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/SelectionAppearance.stories.tsx @@ -18,7 +18,6 @@ import { DataGridHeaderCell, DataGridCell, TableColumnDefinition, - TableRowData, createTableColumn, } from '@fluentui/react-table'; @@ -168,15 +167,13 @@ export const SelectionAppearance = () => { > - {({ renderHeaderCell }: TableColumnDefinition) => ( - {renderHeaderCell()} - )} + {({ renderHeaderCell }) => {renderHeaderCell()}} - - {({ item, rowId }: TableRowData) => ( - - {({ renderCell }: TableColumnDefinition) => {renderCell(item)}} + > + {({ item, rowId }) => ( + key={rowId} selectionCell={{ 'aria-label': 'Select row' }}> + {({ renderCell }) => {renderCell(item)}} )} diff --git a/packages/react-components/react-table/stories/DataGrid/SingleSelect.stories.tsx b/packages/react-components/react-table/stories/DataGrid/SingleSelect.stories.tsx index b9af98dd98fc3..70ff6b8e33069 100644 --- a/packages/react-components/react-table/stories/DataGrid/SingleSelect.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/SingleSelect.stories.tsx @@ -18,7 +18,6 @@ import { DataGridHeaderCell, DataGridCell, TableColumnDefinition, - TableRowData, createTableColumn, } from '@fluentui/react-table'; @@ -162,15 +161,13 @@ export const SingleSelect = () => { - {({ renderHeaderCell }: TableColumnDefinition) => ( - {renderHeaderCell()} - )} + {({ renderHeaderCell }) => {renderHeaderCell()}} - - {({ item, rowId }: TableRowData) => ( - - {({ renderCell }: TableColumnDefinition) => {renderCell(item)}} + > + {({ item, rowId }) => ( + key={rowId} selectionCell={{ 'aria-label': 'Select row' }}> + {({ renderCell }) => {renderCell(item)}} )} diff --git a/packages/react-components/react-table/stories/DataGrid/SingleSelectControlled.stories.tsx b/packages/react-components/react-table/stories/DataGrid/SingleSelectControlled.stories.tsx index 738de527d97f8..fbcf584f692a0 100644 --- a/packages/react-components/react-table/stories/DataGrid/SingleSelectControlled.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/SingleSelectControlled.stories.tsx @@ -18,7 +18,6 @@ import { DataGridHeaderCell, DataGridCell, TableColumnDefinition, - TableRowData, createTableColumn, TableRowId, DataGridProps, @@ -175,15 +174,13 @@ export const SingleSelectControlled = () => { > - {({ renderHeaderCell }: TableColumnDefinition) => ( - {renderHeaderCell()} - )} + {({ renderHeaderCell }) => {renderHeaderCell()}} - - {({ item, rowId }: TableRowData) => ( - - {({ renderCell }: TableColumnDefinition) => {renderCell(item)}} + > + {({ item, rowId }) => ( + key={rowId} selectionCell={{ 'aria-label': 'Select row' }}> + {({ renderCell }) => {renderCell(item)}} )} diff --git a/packages/react-components/react-table/stories/DataGrid/Sort.stories.tsx b/packages/react-components/react-table/stories/DataGrid/Sort.stories.tsx index b3d0e0986154d..b0f76f29139a2 100644 --- a/packages/react-components/react-table/stories/DataGrid/Sort.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/Sort.stories.tsx @@ -18,7 +18,6 @@ import { DataGridHeaderCell, DataGridCell, TableColumnDefinition, - TableRowData, createTableColumn, } from '@fluentui/react-table'; import { SortState } from '../../src/hooks/types'; @@ -163,15 +162,13 @@ export const Sort = () => { - {({ renderHeaderCell }: TableColumnDefinition) => ( - {renderHeaderCell()} - )} + {({ renderHeaderCell }) => {renderHeaderCell()}} - - {({ item, rowId }: TableRowData) => ( - - {({ renderCell }: TableColumnDefinition) => {renderCell(item)}} + > + {({ item, rowId }) => ( + key={rowId}> + {({ renderCell }) => {renderCell(item)}} )} diff --git a/packages/react-components/react-table/stories/DataGrid/SortControlled.stories.tsx b/packages/react-components/react-table/stories/DataGrid/SortControlled.stories.tsx index 2c32274f1802f..d9ce53f21b738 100644 --- a/packages/react-components/react-table/stories/DataGrid/SortControlled.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/SortControlled.stories.tsx @@ -18,7 +18,6 @@ import { DataGridHeaderCell, DataGridCell, TableColumnDefinition, - TableRowData, createTableColumn, DataGridProps, } from '@fluentui/react-table'; @@ -167,15 +166,13 @@ export const SortControlled = () => { - {({ renderHeaderCell }: TableColumnDefinition) => ( - {renderHeaderCell()} - )} + {({ renderHeaderCell }) => {renderHeaderCell()}} - - {({ item, rowId }: TableRowData) => ( - - {({ renderCell }: TableColumnDefinition) => {renderCell(item)}} + > + {({ item, rowId }) => ( + key={rowId}> + {({ renderCell }) => {renderCell(item)}} )} diff --git a/packages/react-components/react-table/stories/DataGrid/SubtleSelection.stories.tsx b/packages/react-components/react-table/stories/DataGrid/SubtleSelection.stories.tsx index f83797ea151d4..bd59445610ba5 100644 --- a/packages/react-components/react-table/stories/DataGrid/SubtleSelection.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/SubtleSelection.stories.tsx @@ -18,7 +18,6 @@ import { DataGridHeaderCell, DataGridCell, TableColumnDefinition, - TableRowData, createTableColumn, } from '@fluentui/react-table'; @@ -168,15 +167,13 @@ export const SubtleSelection = () => { > - {({ renderHeaderCell }: TableColumnDefinition) => ( - {renderHeaderCell()} - )} + {({ renderHeaderCell }) => {renderHeaderCell()}} - - {({ item, rowId }: TableRowData) => ( - - {({ renderCell }: TableColumnDefinition) => {renderCell(item)}} + > + {({ item, rowId }) => ( + key={rowId} selectionCell={{ 'aria-label': 'Select row' }}> + {({ renderCell }) => {renderCell(item)}} )} diff --git a/packages/react-components/react-table/stories/DataGrid/Virtualization.stories.tsx b/packages/react-components/react-table/stories/DataGrid/Virtualization.stories.tsx index b8f4a74383c4f..428b41b6e5e2f 100644 --- a/packages/react-components/react-table/stories/DataGrid/Virtualization.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/Virtualization.stories.tsx @@ -16,7 +16,6 @@ import { DataGridHeaderCell, DataGridCell, TableColumnDefinition, - TableRowData, createTableColumn, TableCellLayout, } from '@fluentui/react-components/unstable'; @@ -164,15 +163,13 @@ export const Virtualization = () => { - {({ renderHeaderCell }: TableColumnDefinition) => ( - {renderHeaderCell()} - )} + {({ renderHeaderCell }) => {renderHeaderCell()}} - - {({ item, rowId }: TableRowData, style) => ( - - {({ renderCell }: TableColumnDefinition) => {renderCell(item)}} + itemSize={50} height={400}> + {({ item, rowId }, style) => ( + key={rowId} style={style}> + {({ renderCell }) => {renderCell(item)}} )} From 50be66d60d74d22935dd90213c7a3d4b49599ffb Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Mon, 16 Jan 2023 19:46:50 +0100 Subject: [PATCH 2/4] changefile --- ...i-react-table-de6b4151-670a-4292-8e84-bd8a4e72f175.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-table-de6b4151-670a-4292-8e84-bd8a4e72f175.json diff --git a/change/@fluentui-react-table-de6b4151-670a-4292-8e84-bd8a4e72f175.json b/change/@fluentui-react-table-de6b4151-670a-4292-8e84-bd8a4e72f175.json new file mode 100644 index 0000000000000..88c7027de200b --- /dev/null +++ b/change/@fluentui-react-table-de6b4151-670a-4292-8e84-bd8a4e72f175.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "BREAKING(DataGrid): render functions need to by typed", + "packageName": "@fluentui/react-table", + "email": "lingfangao@hotmail.com", + "dependentChangeType": "patch" +} From edcb3c79db235f3ce12a7c39a4d69f66cfce30fe Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Tue, 17 Jan 2023 11:48:53 +0100 Subject: [PATCH 3/4] fix dependencies --- .../etc/react-data-grid-react-window.api.md | 10 +++++----- .../react-data-grid-react-window/package.json | 2 ++ .../src/components/DataGridBody/DataGridBody.tsx | 2 +- .../src/components/DataGridBody/DataGridBody.types.ts | 2 +- .../src/components/DataGridBody/renderDataGridBody.tsx | 4 ++-- .../src/components/DataGridBody/useDataGridBody.ts | 7 ++----- .../components/DataGridBody/useDataGridBodyStyles.ts | 2 +- 7 files changed, 14 insertions(+), 15 deletions(-) diff --git a/packages/react-components/react-data-grid-react-window/etc/react-data-grid-react-window.api.md b/packages/react-components/react-data-grid-react-window/etc/react-data-grid-react-window.api.md index 406a1a5e17af5..00b194abd2edc 100644 --- a/packages/react-components/react-data-grid-react-window/etc/react-data-grid-react-window.api.md +++ b/packages/react-components/react-data-grid-react-window/etc/react-data-grid-react-window.api.md @@ -6,12 +6,12 @@ /// -import type { DataGridBodyProps as DataGridBodyProps_2 } from '@fluentui/react-components/unstable'; -import type { DataGridBodySlots as DataGridBodySlots_2 } from '@fluentui/react-components/unstable'; -import type { DataGridBodyState as DataGridBodyState_2 } from '@fluentui/react-components/unstable'; -import type { ForwardRefComponent } from '@fluentui/react-components'; +import type { DataGridBodyProps as DataGridBodyProps_2 } from '@fluentui/react-table'; +import type { DataGridBodySlots as DataGridBodySlots_2 } from '@fluentui/react-table'; +import type { DataGridBodyState as DataGridBodyState_2 } from '@fluentui/react-table'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; import * as React_2 from 'react'; -import type { TableRowData } from '@fluentui/react-components/unstable'; +import type { TableRowData } from '@fluentui/react-table'; // @public export const DataGridBody: ForwardRefComponent & ((props: DataGridBodyProps) => JSX.Element); diff --git a/packages/react-components/react-data-grid-react-window/package.json b/packages/react-components/react-data-grid-react-window/package.json index 52b4f3ba76c7d..85c85b1a3c2eb 100644 --- a/packages/react-components/react-data-grid-react-window/package.json +++ b/packages/react-components/react-data-grid-react-window/package.json @@ -32,6 +32,8 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { + "@fluentui/react-table": "9.0.0-alpha.19", + "@fluentui/react-utilities": "^9.4.0", "react-window": "^1.8.6", "tslib": "^2.1.0" }, diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.tsx b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.tsx index e7c0024441d85..754782dcc6881 100644 --- a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.tsx +++ b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import type { ForwardRefComponent } from '@fluentui/react-components'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useDataGridBodyStyles_unstable } from './useDataGridBodyStyles'; import { useDataGridBody_unstable } from './useDataGridBody'; import { renderDataGridBody_unstable } from './renderDataGridBody'; diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.types.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.types.ts index 318376ad59253..227cdb7c96488 100644 --- a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.types.ts +++ b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.types.ts @@ -4,7 +4,7 @@ import type { DataGridBodyProps as DataGridBodyPropsBase, DataGridBodySlots as DataGridBodySlotsBase, DataGridBodyState as DataGridBodyStateBase, -} from '@fluentui/react-components/unstable'; +} from '@fluentui/react-table'; export type DataGridBodySlots = DataGridBodySlotsBase; diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/renderDataGridBody.tsx b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/renderDataGridBody.tsx index 1eb32a9d2e82a..bb0b233768b6c 100644 --- a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/renderDataGridBody.tsx +++ b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/renderDataGridBody.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import type { DataGridBodyState, DataGridBodySlots } from './DataGridBody.types'; import { FixedSizeList as List, ListChildComponentProps } from 'react-window'; -import { getSlots } from '@fluentui/react-components'; -import { TableRowData, TableRowIdContextProvider } from '@fluentui/react-components/unstable'; +import { getSlots } from '@fluentui/react-utilities'; +import { TableRowData, TableRowIdContextProvider } from '@fluentui/react-table'; /** * Render the final JSX of DataGridVirtualizedBody diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBody.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBody.ts index 6f24550332366..5f945f12f5b79 100644 --- a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBody.ts +++ b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBody.ts @@ -1,9 +1,6 @@ import * as React from 'react'; import type { DataGridBodyProps, DataGridBodyState } from './DataGridBody.types'; -import { - useDataGridBody_unstable as useDataGridBodyBase_unstable, - TableRowData, -} from '@fluentui/react-components/unstable'; +import { useDataGridBody_unstable as useDataGridBodyBase_unstable, RowRenderFunction } from '@fluentui/react-table'; /** * Create the state required to render DataGridBody. @@ -18,7 +15,7 @@ export const useDataGridBody_unstable = (props: DataGridBodyProps, ref: React.Re const { height, itemSize, width = '100%', children } = props; // cast the row render function to work with unknown args - const renderRowWithUnknown = children as (row: TableRowData, ...rest: unknown[]) => React.ReactNode; + const renderRowWithUnknown = children as RowRenderFunction; const baseState = useDataGridBodyBase_unstable({ ...props, children: renderRowWithUnknown }, ref); return { diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBodyStyles.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBodyStyles.ts index 17dad476c4122..3624babfbb5c8 100644 --- a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBodyStyles.ts +++ b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBodyStyles.ts @@ -1,5 +1,5 @@ import type { DataGridBodyState } from './DataGridBody.types'; -import { useDataGridBodyStyles_unstable as useDataGridBodyStylesBase_unstable } from '@fluentui/react-components/unstable'; +import { useDataGridBodyStyles_unstable as useDataGridBodyStylesBase_unstable } from '@fluentui/react-table'; /** * Apply styling to the DataGridBody slots based on the state From f17ce0a672b8de5ccd0aa584d9a64ceb4359c34d Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Tue, 17 Jan 2023 11:51:02 +0100 Subject: [PATCH 4/4] update story --- .../react-table/stories/DataGrid/Default.stories.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/react-components/react-table/stories/DataGrid/Default.stories.tsx b/packages/react-components/react-table/stories/DataGrid/Default.stories.tsx index 25b16dddb2f41..0d03c64e5b274 100644 --- a/packages/react-components/react-table/stories/DataGrid/Default.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/Default.stories.tsx @@ -170,13 +170,11 @@ export const Default = () => { > - {({ item, rowId }) => { - return ( - key={rowId} selectionCell={{ 'aria-label': 'Select row' }}> - {({ renderCell }) => {renderCell(item)}} - - ); - }} + {({ item, rowId }) => ( + key={rowId} selectionCell={{ 'aria-label': 'Select row' }}> + {({ renderCell }) => {renderCell(item)}} + + )} );