BREAKING(DataGrid): render functions need to by typed

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"
+}

packages/react-components/react-data-grid-react-window/etc/react-data-grid-react-window.api.md

@@ -6,22 +6,22 @@
 
 /// <reference types="react" />
 
-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<DataGridBodyProps>;
+export const DataGridBody: ForwardRefComponent<DataGridBodyProps> & (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element);
 
 // @public
-export type DataGridBodyProps = Omit<DataGridBodyProps_2, 'children'> & {
+export type DataGridBodyProps<TItem = unknown> = Omit<DataGridBodyProps_2, 'children'> & {
     itemSize: number;
     height: number;
     width?: string | number;
-    children: RowRenderFunction;
+    children: RowRenderFunction<TItem>;
 };
 
 // @public (undocumented)

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"
   },

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';
@@ -8,11 +8,12 @@ import type { DataGridBodyProps } from './DataGridBody.types';
 /**
  * DataGridBody component
  */
-export const DataGridBody: ForwardRefComponent<DataGridBodyProps> = React.forwardRef((props, ref) => {
+export const DataGridBody: ForwardRefComponent<DataGridBodyProps> &
+  (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element) = React.forwardRef((props, ref) => {
   const state = useDataGridBody_unstable(props, ref);
 
   useDataGridBodyStyles_unstable(state);
   return renderDataGridBody_unstable(state);
-});
+}) as ForwardRefComponent<DataGridBodyProps> & (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element);
 
 DataGridBody.displayName = 'DataGridBody';

packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.types.ts

@@ -4,19 +4,19 @@ import type {
   DataGridBodyProps as DataGridBodyPropsBase,
   DataGridBodySlots as DataGridBodySlotsBase,
   DataGridBodyState as DataGridBodyStateBase,
-} from '@fluentui/react-components/unstable';
+} from '@fluentui/react-table';
 
 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<any>, style: React.CSSProperties) => React.ReactNode;
+export type RowRenderFunction<TItem = unknown> = (
+  row: TableRowData<TItem>,
+  style: React.CSSProperties,
+) => React.ReactNode;
 
 /**
  * DataGridBody Props
  */
-export type DataGridBodyProps = Omit<DataGridBodyPropsBase, 'children'> & {
+export type DataGridBodyProps<TItem = unknown> = Omit<DataGridBodyPropsBase, 'children'> & {
   /**
    * The size of each row
    */
@@ -33,7 +33,7 @@ export type DataGridBodyProps = Omit<DataGridBodyPropsBase, 'children'> & {
   /**
    * Children render function for rows
    */
-  children: RowRenderFunction;
+  children: RowRenderFunction<TItem>;
 };
 
 /**

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

packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBody.ts

@@ -1,6 +1,6 @@
 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, RowRenderFunction } from '@fluentui/react-table';
 
 /**
  * Create the state required to render DataGridBody.
@@ -12,14 +12,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<HTMLElement>): 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 RowRenderFunction;
+  const baseState = useDataGridBodyBase_unstable({ ...props, children: renderRowWithUnknown }, ref);
 
   return {
     ...baseState,
     itemSize,
     height,
-    renderRow: props.children,
+    renderRow: children,
     width,
   };
 };

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

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<any>) => React_2.ReactNode;
+export type CellRenderFunction<TItem = unknown> = (column: TableColumnDefinition<TItem>) => React_2.ReactNode;
 
 // @public
 export function createTableColumn<TItem>(options: CreateTableColumnOptions<TItem>): {
@@ -40,22 +40,22 @@ export interface CreateTableColumnOptions<TItem> extends Partial<TableColumnDefi
 export const DataGrid: ForwardRefComponent<DataGridProps>;
 
 // @public
-export const DataGridBody: ForwardRefComponent<DataGridBodyProps>;
+export const DataGridBody: ForwardRefComponent<DataGridBodyProps> & (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element);
 
 // @public (undocumented)
 export const dataGridBodyClassNames: SlotClassNames<DataGridBodySlots>;
 
 // @public
-export type DataGridBodyProps = Omit<TableBodyProps, 'children'> & {
-    children: RowRenderFunction;
+export type DataGridBodyProps<TItem = unknown> = Omit<TableBodyProps, 'children'> & {
+    children: RowRenderFunction<TItem>;
 };
 
 // @public (undocumented)
 export type DataGridBodySlots = TableBodySlots;
 
 // @public
 export type DataGridBodyState = TableBodyState & {
-    rows: TableRowData<any>[];
+    rows: TableRowData<unknown>[];
     renderRow: RowRenderFunction;
 };
 
@@ -131,14 +131,14 @@ export type DataGridProps = TableProps & Pick<DataGridContextValue, 'items' | 'c
 };
 
 // @public
-export const DataGridRow: ForwardRefComponent<DataGridRowProps>;
+export const DataGridRow: ForwardRefComponent<DataGridRowProps> & (<TItem>(props: DataGridRowProps<TItem>) => JSX.Element);
 
 // @public (undocumented)
 export const dataGridRowClassNames: SlotClassNames<DataGridRowSlots>;
 
 // @public
-export type DataGridRowProps = Omit<TableRowProps, 'children'> & Omit<ComponentProps<DataGridRowSlots>, 'children'> & {
-    children: CellRenderFunction;
+export type DataGridRowProps<TItem = unknown> = Omit<TableRowProps, 'children'> & Omit<ComponentProps<DataGridRowSlots>, 'children'> & {
+    children: CellRenderFunction<TItem>;
 };
 
 // @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<any>, ...rest: any[]) => React_2.ReactNode;
+export type RowRenderFunction<TItem = unknown> = (row: TableRowData<TItem>, ...rest: unknown[]) => React_2.ReactNode;
 
 // @public (undocumented)
 export type SortDirection = 'ascending' | 'descending';

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<DataGridBodyProps> = React.forwardRef((props, ref) => {
+export const DataGridBody: ForwardRefComponent<DataGridBodyProps> &
+  (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element) = React.forwardRef((props, ref) => {
   const state = useDataGridBody_unstable(props, ref);
 
   useDataGridBodyStyles_unstable(state);
   return renderDataGridBody_unstable(state);
-});
+}) as ForwardRefComponent<DataGridBodyProps> & (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element);
 
 DataGridBody.displayName = 'DataGridBody';

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<any>, ...rest: any[]) => React.ReactNode;
+export type RowRenderFunction<TItem = unknown> = (row: TableRowData<TItem>, ...rest: unknown[]) => React.ReactNode;
 
 /**
  * DataGridBody Props
  */
-export type DataGridBodyProps = Omit<TableBodyProps, 'children'> & {
+export type DataGridBodyProps<TItem = unknown> = Omit<TableBodyProps, 'children'> & {
   /**
    * Render function for rows
    */
-  children: RowRenderFunction;
+  children: RowRenderFunction<TItem>;
 };
 
 /**
  * State used in rendering DataGridBody
  */
 export type DataGridBodyState = TableBodyState & {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  rows: TableRowData<any>[];
+  rows: TableRowData<unknown>[];
 
   renderRow: RowRenderFunction;
 };

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<DataGridRowProps> = React.forwardRef((props, ref) => {
+export const DataGridRow: ForwardRefComponent<DataGridRowProps> &
+  (<TItem>(props: DataGridRowProps<TItem>) => JSX.Element) = React.forwardRef((props, ref) => {
   const state = useDataGridRow_unstable(props, ref);
 
   useDataGridRowStyles_unstable(state);
   return renderDataGridRow_unstable(state);
-});
+}) as ForwardRefComponent<DataGridRowProps> & (<TItem>(props: DataGridRowProps<TItem>) => JSX.Element);
 
 DataGridRow.displayName = 'DataGridRow';

packages/react-components/react-table/src/components/DataGridRow/DataGridRow.types.ts

@@ -12,17 +12,14 @@ export type DataGridRowSlots = TableRowSlots & {
   selectionCell?: Slot<typeof TableSelectionCell>;
 };
 
-// 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<any>) => React.ReactNode;
+export type CellRenderFunction<TItem = unknown> = (column: TableColumnDefinition<TItem>) => React.ReactNode;
 
 /**
  * DataGridRow Props
  */
-export type DataGridRowProps = Omit<TableRowProps, 'children'> &
+export type DataGridRowProps<TItem = unknown> = Omit<TableRowProps, 'children'> &
   Omit<ComponentProps<DataGridRowSlots>, 'children'> & {
-    children: CellRenderFunction;
+    children: CellRenderFunction<TItem>;
   };
 
 /**

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,15 +166,13 @@ export const Default = () => {
     >
       <DataGridHeader>
         <DataGridRow selectionCell={{ 'aria-label': 'Select all rows' }}>
-          {({ renderHeaderCell }: TableColumnDefinition<Item>) => (
-            <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
-          )}
+          {({ renderHeaderCell }) => <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>}
         </DataGridRow>
       </DataGridHeader>
-      <DataGridBody>
-        {({ item, rowId }: TableRowData<Item>) => (
-          <DataGridRow key={rowId} selectionCell={{ 'aria-label': 'Select row' }}>
-            {({ renderCell }: TableColumnDefinition<Item>) => <DataGridCell>{renderCell(item)}</DataGridCell>}
+      <DataGridBody<Item>>
+        {({ item, rowId }) => (
+          <DataGridRow<Item> key={rowId} selectionCell={{ 'aria-label': 'Select row' }}>
+            {({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}
           </DataGridRow>
         )}
       </DataGridBody>

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 = () => {
     <DataGrid items={items} columns={columns} selectionMode="multiselect" defaultSelectedItems={defaultSelectedItems}>
       <DataGridHeader>
         <DataGridRow selectionCell={{ 'aria-label': 'Select all rows' }}>
-          {({ renderHeaderCell }: TableColumnDefinition<Item>) => (
-            <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
-          )}
+          {({ renderHeaderCell }) => <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>}
         </DataGridRow>
       </DataGridHeader>
-      <DataGridBody>
-        {({ item, rowId }: TableRowData<Item>) => (
-          <DataGridRow key={rowId} selectionCell={{ 'aria-label': 'Select row' }}>
-            {({ renderCell }: TableColumnDefinition<Item>) => <DataGridCell>{renderCell(item)}</DataGridCell>}
+      <DataGridBody<Item>>
+        {({ item, rowId }) => (
+          <DataGridRow<Item> key={rowId} selectionCell={{ 'aria-label': 'Select row' }}>
+            {({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}
           </DataGridRow>
         )}
       </DataGridBody>

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 = () => {
     >
       <DataGridHeader>
         <DataGridRow selectionCell={{ 'aria-label': 'Select all rows' }}>
-          {({ renderHeaderCell }: TableColumnDefinition<Item>) => (
-            <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
-          )}
+          {({ renderHeaderCell }) => <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>}
         </DataGridRow>
       </DataGridHeader>
-      <DataGridBody>
-        {({ item, rowId }: TableRowData<Item>) => (
-          <DataGridRow key={rowId} selectionCell={{ 'aria-label': 'Select row' }}>
-            {({ renderCell }: TableColumnDefinition<Item>) => <DataGridCell>{renderCell(item)}</DataGridCell>}
+      <DataGridBody<Item>>
+        {({ item, rowId }) => (
+          <DataGridRow<Item> key={rowId} selectionCell={{ 'aria-label': 'Select row' }}>
+            {({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}
           </DataGridRow>
         )}
       </DataGridBody>