@fluentui/react-table 9.0.0-alpha.19 → 9.0.0-alpha.20

package/CHANGELOG.json

@@ -2,7 +2,34 @@
   "name": "@fluentui/react-table",
   "entries": [
     {
-      "date": "Mon, 16 Jan 2023 08:35:24 GMT",
+      "date": "Tue, 17 Jan 2023 12:22:15 GMT",
+      "tag": "@fluentui/react-table_v9.0.0-alpha.20",
+      "version": "9.0.0-alpha.20",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-table",
+            "commit": "0d265cf542add3b4895e3ba764bbb22be7843f45",
+            "comment": "BREAKING: API naming changes"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-table",
+            "commit": "08ccb46dd03a8871c1234008a5a543cd53f579a9",
+            "comment": "BREAKING(DataGrid): render functions need to by typed"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-avatar to v9.2.14",
+            "commit": "08ccb46dd03a8871c1234008a5a543cd53f579a9"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 16 Jan 2023 08:38:48 GMT",
       "tag": "@fluentui/react-table_v9.0.0-alpha.19",
       "version": "9.0.0-alpha.19",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,23 @@
 # Change Log - @fluentui/react-table
 
-This log was last generated on Mon, 16 Jan 2023 08:35:24 GMT and should not be manually modified.
+This log was last generated on Tue, 17 Jan 2023 12:22:15 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.20](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.0-alpha.20)
+
+Tue, 17 Jan 2023 12:22:15 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.0.0-alpha.19..@fluentui/react-table_v9.0.0-alpha.20)
+
+### Changes
+
+- BREAKING: API naming changes ([PR #26304](https://github.com/microsoft/fluentui/pull/26304) by lingfangao@hotmail.com)
+- BREAKING(DataGrid): render functions need to by typed ([PR #26371](https://github.com/microsoft/fluentui/pull/26371) by lingfangao@hotmail.com)
+- Bump @fluentui/react-avatar to v9.2.14 ([PR #26371](https://github.com/microsoft/fluentui/pull/26371) by beachball)
+
 ## [9.0.0-alpha.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.0-alpha.19)
 
-Mon, 16 Jan 2023 08:35:24 GMT 
+Mon, 16 Jan 2023 08:38:48 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.0.0-alpha.18..@fluentui/react-table_v9.0.0-alpha.19)
 
 ### Changes

package/dist/index.d.ts

@@ -13,31 +13,22 @@ import { ReactNode } from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
-export declare type CellRenderFunction = (column: ColumnDefinition<any>) => React_2.ReactNode;
-
-export declare interface ColumnDefinition<TItem> {
-    columnId: ColumnId;
-    compare: (a: TItem, b: TItem) => number;
-    renderHeaderCell: () => React_2.ReactNode;
-    renderCell: (item: TItem) => React_2.ReactNode;
-}
-
-export declare type ColumnId = string | number;
+export declare type CellRenderFunction<TItem = unknown> = (column: TableColumnDefinition<TItem>) => React_2.ReactNode;
 
 /**
  * Helper function to create column definition with defaults
  * @param options - column definition options
  * @returns - column definition with defaults
  */
-export declare function createColumn<TItem>(options: CreateColumnOptions<TItem>): {
-    columnId: ColumnId;
+export declare function createTableColumn<TItem>(options: CreateTableColumnOptions<TItem>): {
+    columnId: TableColumnId;
     renderCell: (item: TItem) => ReactNode;
     renderHeaderCell: () => ReactNode;
     compare: (a: TItem, b: TItem) => number;
 };
 
-export declare interface CreateColumnOptions<TItem> extends Partial<ColumnDefinition<TItem>> {
-    columnId: ColumnId;
+export declare interface CreateTableColumnOptions<TItem> extends Partial<TableColumnDefinition<TItem>> {
+    columnId: TableColumnId;
 }
 
 /**
@@ -48,18 +39,18 @@ export declare const DataGrid: ForwardRefComponent<DataGridProps>;
 /**
  * DataGridBody component
  */
-export declare const DataGridBody: ForwardRefComponent<DataGridBodyProps>;
+export declare const DataGridBody: ForwardRefComponent<DataGridBodyProps> & (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element);
 
 export declare const dataGridBodyClassNames: SlotClassNames<DataGridBodySlots>;
 
 /**
  * DataGridBody Props
  */
-export declare type DataGridBodyProps = Omit<TableBodyProps, 'children'> & {
+export declare type DataGridBodyProps<TItem = unknown> = Omit<TableBodyProps, 'children'> & {
     /**
      * Render function for rows
      */
-    children: RowRenderFunction;
+    children: RowRenderFunction<TItem>;
 };
 
 export declare type DataGridBodySlots = TableBodySlots;
@@ -68,7 +59,7 @@ export declare type DataGridBodySlots = TableBodySlots;
  * State used in rendering DataGridBody
  */
 export declare type DataGridBodyState = TableBodyState & {
-    rows: RowState<any>[];
+    rows: TableRowData<unknown>[];
     renderRow: RowRenderFunction;
 };
 
@@ -93,12 +84,12 @@ export declare type DataGridCellState = TableCellState;
 
 export declare const dataGridClassNames: SlotClassNames<DataGridSlots>;
 
-export declare type DataGridContextValue = HeadlessTableState<any> & {
+export declare type DataGridContextValue = TableFeaturesState<any> & {
     /**
      * How focus navigation will work in the datagrid
      * @default cell
      */
-    focusMode: FocusMode;
+    focusMode: DataGridFocusMode;
     /**
      * Lets child components know if rows selection is enabled
      * @see selectionMode prop enables row selection on the component
@@ -120,6 +111,8 @@ export declare type DataGridContextValues = TableContextValues & {
     dataGrid: DataGridContextValue;
 };
 
+export declare type DataGridFocusMode = 'none' | 'cell' | 'row_unstable';
+
 /**
  * DataGridHeader component
  */
@@ -174,15 +167,15 @@ export declare type DataGridProps = TableProps & Pick<DataGridContextValue, 'ite
 /**
  * DataGridRow component
  */
-export declare const DataGridRow: ForwardRefComponent<DataGridRowProps>;
+export declare const DataGridRow: ForwardRefComponent<DataGridRowProps> & (<TItem>(props: DataGridRowProps<TItem>) => JSX.Element);
 
 export declare const dataGridRowClassNames: SlotClassNames<DataGridRowSlots>;
 
 /**
  * DataGridRow Props
  */
-export declare type DataGridRowProps = Omit<TableRowProps, 'children'> & Omit<ComponentProps<DataGridRowSlots>, 'children'> & {
-    children: CellRenderFunction;
+export declare type DataGridRowProps<TItem = unknown> = Omit<TableRowProps, 'children'> & Omit<ComponentProps<DataGridRowSlots>, 'children'> & {
+    children: CellRenderFunction<TItem>;
 };
 
 export declare type DataGridRowSlots = TableRowSlots & {
@@ -198,7 +191,7 @@ export declare type DataGridRowSlots = TableRowSlots & {
  */
 export declare type DataGridRowState = TableRowState & ComponentState<DataGridRowSlots> & {
     renderCell: CellRenderFunction;
-    columnDefs: ColumnDefinition<any>[];
+    columnDefs: TableColumnDefinition<any>[];
 };
 
 /**
@@ -226,33 +219,11 @@ export declare type DataGridSlots = TableSlots;
  * State used in rendering DataGrid
  */
 export declare type DataGridState = TableState & {
-    tableState: HeadlessTableState<unknown>;
+    tableState: TableFeaturesState<unknown>;
 } & Pick<DataGridContextValue, 'focusMode' | 'selectableRows' | 'subtleSelection' | 'selectionAppearance' | 'getRowId'>;
 
-export declare type FocusMode = 'none' | 'cell' | 'row_unstable';
-
-export declare interface HeadlessTableState<TItem> extends Pick<UseTableOptions<TItem>, 'items' | 'getRowId'> {
-    /**
-     * The row data for rendering
-     * @param rowEnhancer - Enhances the row with extra user data
-     */
-    getRows: <TRowState extends RowState<TItem> = RowState<TItem>>(rowEnhancer?: RowEnhancer<TItem, TRowState>) => TRowState[];
-    /**
-     * State and actions to manage row selection
-     */
-    selection: TableSelectionState;
-    /**
-     * State and actions to manage row sorting
-     */
-    sort: TableSortState<TItem>;
-    /**
-     * Table columns
-     */
-    columns: ColumnDefinition<TItem>[];
-}
-
 declare interface OnSelectionChangeData {
-    selectedItems: Set<RowId>;
+    selectedItems: Set<TableRowId>;
 }
 
 /**
@@ -335,31 +306,16 @@ export declare const renderTableRow_unstable: (state: TableRowState) => JSX.Elem
  */
 export declare const renderTableSelectionCell_unstable: (state: TableSelectionCellState) => JSX.Element;
 
-declare type RowEnhancer<TItem, TRowState extends RowState<TItem> = RowState<TItem>> = (row: RowState<TItem>) => TRowState;
+declare type RowEnhancer<TItem, TRowState extends TableRowData<TItem> = TableRowData<TItem>> = (row: TableRowData<TItem>) => TRowState;
 
-export declare type RowId = string | number;
-
-export declare const RowIdContextProvider: React_2.Provider<RowId | undefined>;
-
-export declare type RowRenderFunction = (row: RowState<any>, ...rest: any[]) => React_2.ReactNode;
-
-export declare interface RowState<TItem> {
-    /**
-     * User provided data
-     */
-    item: TItem;
-    /**
-     * The row id, defaults to index position in the collection
-     */
-    rowId: RowId;
-}
+export declare type RowRenderFunction<TItem = unknown> = (row: TableRowData<TItem>, ...rest: unknown[]) => React_2.ReactNode;
 
 declare type SelectionMode_2 = 'single' | 'multiselect';
 
 export declare type SortDirection = 'ascending' | 'descending';
 
 declare interface SortState {
-    sortColumn: ColumnId | undefined;
+    sortColumn: TableColumnId | undefined;
     sortDirection: SortDirection;
 }
 
@@ -496,6 +452,15 @@ export declare const tableClassName = "fui-Table";
 
 export declare const tableClassNames: SlotClassNames<TableSlots>;
 
+export declare interface TableColumnDefinition<TItem> {
+    columnId: TableColumnId;
+    compare: (a: TItem, b: TItem) => number;
+    renderHeaderCell: () => React_2.ReactNode;
+    renderCell: (item: TItem) => React_2.ReactNode;
+}
+
+export declare type TableColumnId = string | number;
+
 export declare const TableContextProvider: React_2.Provider<TableContextValue | undefined>;
 
 export declare type TableContextValue = {
@@ -521,6 +486,28 @@ export declare type TableContextValues = {
     table: TableContextValue;
 };
 
+export declare type TableFeaturePlugin = <TItem>(tableState: TableFeaturesState<TItem>) => TableFeaturesState<TItem>;
+
+export declare interface TableFeaturesState<TItem> extends Pick<UseTableFeaturesOptions<TItem>, 'items' | 'getRowId'> {
+    /**
+     * The row data for rendering
+     * @param rowEnhancer - Enhances the row with extra user data
+     */
+    getRows: <TRowState extends TableRowData<TItem> = TableRowData<TItem>>(rowEnhancer?: RowEnhancer<TItem, TRowState>) => TRowState[];
+    /**
+     * State and actions to manage row selection
+     */
+    selection: TableSelectionState;
+    /**
+     * State and actions to manage row sorting
+     */
+    sort: TableSortState<TItem>;
+    /**
+     * Table columns
+     */
+    columns: TableColumnDefinition<TItem>[];
+}
+
 /**
  * TableHeader component
  */
@@ -591,6 +578,21 @@ export declare const tableRowClassName = "fui-TableRow";
 
 export declare const tableRowClassNames: SlotClassNames<TableRowSlots>;
 
+export declare interface TableRowData<TItem> {
+    /**
+     * User provided data
+     */
+    item: TItem;
+    /**
+     * The row id, defaults to index position in the collection
+     */
+    rowId: TableRowId;
+}
+
+export declare type TableRowId = string | number;
+
+export declare const TableRowIdContextProvider: React_2.Provider<TableRowId | undefined>;
+
 /**
  * TableRow Props
  */
@@ -670,11 +672,11 @@ export declare interface TableSelectionState {
     /**
      * Selects single row
      */
-    selectRow: (e: React_2.SyntheticEvent, rowId: RowId) => void;
+    selectRow: (e: React_2.SyntheticEvent, rowId: TableRowId) => void;
     /**
      * De-selects single row
      */
-    deselectRow: (e: React_2.SyntheticEvent, rowId: RowId) => void;
+    deselectRow: (e: React_2.SyntheticEvent, rowId: TableRowId) => void;
     /**
      * Toggle selection of all rows
      */
@@ -682,11 +684,11 @@ export declare interface TableSelectionState {
     /**
      * Toggle selection of single row
      */
-    toggleRow: (e: React_2.SyntheticEvent, rowId: RowId) => void;
+    toggleRow: (e: React_2.SyntheticEvent, rowId: TableRowId) => void;
     /**
      * Collection of row ids corresponding to selected rows
      */
-    selectedRows: Set<RowId>;
+    selectedRows: Set<TableRowId>;
     /**
      * Whether all rows are selected
      */
@@ -698,7 +700,7 @@ export declare interface TableSelectionState {
     /**
      * Checks if a given rowId is selected
      */
-    isRowSelected: (rowId: RowId) => boolean;
+    isRowSelected: (rowId: TableRowId) => boolean;
     selectionMode: SelectionMode_2;
 }
 
@@ -714,24 +716,24 @@ export declare interface TableSortState<TItem> {
     /**
      * Column id of the currently sorted column
      */
-    sortColumn: ColumnId | undefined;
+    sortColumn: TableColumnId | undefined;
     /**
      * Set the sort direction for the specified column
      */
-    setColumnSort: (event: React_2.SyntheticEvent, columnId: ColumnId, sortDirection: SortDirection) => void;
+    setColumnSort: (event: React_2.SyntheticEvent, columnId: TableColumnId, sortDirection: SortDirection) => void;
     /**
      * Toggles the sort direction for specified column
      */
-    toggleColumnSort: (event: React_2.SyntheticEvent, columnId: ColumnId) => void;
+    toggleColumnSort: (event: React_2.SyntheticEvent, columnId: TableColumnId) => void;
     /**
      * Returns the sort direction if a column is sorted,
      * returns undefined if the column is not sorted
      */
-    getSortDirection: (columnId: ColumnId) => SortDirection | undefined;
+    getSortDirection: (columnId: TableColumnId) => SortDirection | undefined;
     /**
      * Sorts rows and returns a **shallow** copy of original items
      */
-    sort: <TRowState extends RowState<TItem>>(rows: TRowState[]) => TRowState[];
+    sort: <TRowState extends TableRowData<TItem>>(rows: TRowState[]) => TRowState[];
 }
 
 /**
@@ -739,8 +741,6 @@ export declare interface TableSortState<TItem> {
  */
 export declare type TableState = ComponentState<TableSlots> & Pick<Required<TableProps>, 'size' | 'noNativeElements'> & TableContextValue;
 
-export declare type TableStatePlugin = <TItem>(tableState: HeadlessTableState<TItem>) => HeadlessTableState<TItem>;
-
 /**
  * Create the state required to render DataGrid.
  *
@@ -853,8 +853,6 @@ export declare const useDataGridSelectionCellStyles_unstable: (state: DataGridSe
  */
 export declare const useDataGridStyles_unstable: (state: DataGridState) => DataGridState;
 
-export declare const useRowIdContext: () => RowId;
-
 /**
  * Create the state required to render Table.
  *
@@ -932,7 +930,13 @@ export declare const useTableCellStyles_unstable: (state: TableCellState) => Tab
 
 export declare const useTableContext: () => TableContextValue;
 
-export declare function useTableFeatures<TItem>(options: UseTableOptions<TItem>, plugins?: TableStatePlugin[]): HeadlessTableState<TItem>;
+export declare function useTableFeatures<TItem>(options: UseTableFeaturesOptions<TItem>, plugins?: TableFeaturePlugin[]): TableFeaturesState<TItem>;
+
+export declare interface UseTableFeaturesOptions<TItem> {
+    columns: TableColumnDefinition<TItem>[];
+    items: TItem[];
+    getRowId?: (item: TItem) => TableRowId;
+}
 
 /**
  * Create the state required to render TableHeader.
@@ -966,12 +970,6 @@ export declare const useTableHeaderCellStyles_unstable: (state: TableHeaderCellS
  */
 export declare const useTableHeaderStyles_unstable: (state: TableHeaderState) => TableHeaderState;
 
-export declare interface UseTableOptions<TItem> {
-    columns: ColumnDefinition<TItem>[];
-    items: TItem[];
-    getRowId?: (item: TItem) => RowId;
-}
-
 /**
  * Create the state required to render TableRow.
  *
@@ -983,12 +981,14 @@ export declare interface UseTableOptions<TItem> {
  */
 export declare const useTableRow_unstable: (props: TableRowProps, ref: React_2.Ref<HTMLElement>) => TableRowState;
 
+export declare const useTableRowIdContext: () => TableRowId;
+
 /**
  * Apply styling to the TableRow slots based on the state
  */
 export declare const useTableRowStyles_unstable: (state: TableRowState) => TableRowState;
 
-export declare function useTableSelection<TItem>(options: UseTableSelectionOptions): (tableState: HeadlessTableState<TItem>) => HeadlessTableState<TItem>;
+export declare function useTableSelection<TItem>(options: UseTableSelectionOptions): (tableState: TableFeaturesState<TItem>) => TableFeaturesState<TItem>;
 
 /**
  * Create the state required to render TableSelectionCell.
@@ -1014,18 +1014,18 @@ declare interface UseTableSelectionOptions {
     /**
      * Used in uncontrolled mode to set initial selected rows on mount
      */
-    defaultSelectedItems?: Set<RowId>;
+    defaultSelectedItems?: Set<TableRowId>;
     /**
      * Used to control row selection
      */
-    selectedItems?: Set<RowId>;
+    selectedItems?: Set<TableRowId>;
     /**
      * Called when selection changes
      */
     onSelectionChange?(e: React_2.SyntheticEvent, data: OnSelectionChangeData): void;
 }
 
-export declare function useTableSort<TItem>(options: UseTableSortOptions): (tableState: HeadlessTableState<TItem>) => HeadlessTableState<TItem>;
+export declare function useTableSort<TItem>(options: UseTableSortOptions): (tableState: TableFeaturesState<TItem>) => TableFeaturesState<TItem>;
 
 declare interface UseTableSortOptions {
     /**

package/lib/components/DataGrid/DataGrid.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGrid/DataGrid.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { TableContextValues, TableProps, TableSlots, TableState } from '../Table/Table.types';\nimport type {\n  SortState,\n  TableState as HeadlessTableState,\n  UseTableSortOptions,\n  SelectionMode,\n  UseTableSelectionOptions,\n  OnSelectionChangeData,\n} from '../../hooks';\nimport { TableRowProps } from '../TableRow/TableRow.types';\n\nexport type DataGridSlots = TableSlots;\n\nexport type FocusMode = 'none' | 'cell' | 'row_unstable';\n\nexport type DataGridContextValues = TableContextValues & {\n  dataGrid: DataGridContextValue;\n};\n\n// Use any here since we can't know the user types\n// The user is responsible for narrowing the type downstream\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type DataGridContextValue = HeadlessTableState<any> & {\n  /**\n   * How focus navigation will work in the datagrid\n   * @default cell\n   */\n  focusMode: FocusMode;\n\n  /**\n   * Lets child components know if rows selection is enabled\n   * @see selectionMode prop enables row selection on the component\n   */\n  selectableRows: boolean;\n\n  /**\n   * Enables subtle selection style\n   * @default false\n   */\n  subtleSelection: boolean;\n\n  /**\n   * Row appearance when selected\n   * @default brand\n   */\n  selectionAppearance: TableRowProps['appearance'];\n};\n\n/**\n * DataGrid Props\n */\nexport type DataGridProps = TableProps &\n  Pick<DataGridContextValue, 'items' | 'columns' | 'getRowId'> &\n  Pick<Partial<DataGridContextValue>, 'focusMode' | 'subtleSelection' | 'selectionAppearance'> &\n  Pick<UseTableSortOptions, 'sortState' | 'defaultSortState'> &\n  Pick<UseTableSelectionOptions, 'defaultSelectedItems' | 'selectedItems'> & {\n    onSortChange?: (e: React.MouseEvent, sortState: SortState) => void;\n    onSelectionChange?: (e: React.MouseEvent | React.KeyboardEvent, data: OnSelectionChangeData) => void;\n    /**\n     * Enables row selection and sets the selection mode\n     * @default false\n     */\n    selectionMode?: SelectionMode;\n  };\n\n/**\n * State used in rendering DataGrid\n */\nexport type DataGridState = TableState & { tableState: HeadlessTableState<unknown> } & Pick<\n    DataGridContextValue,\n    'focusMode' | 'selectableRows' | 'subtleSelection' | 'selectionAppearance' | 'getRowId'\n  >;\n"]}
+{"version":3,"file":"DataGrid.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGrid/DataGrid.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { TableContextValues, TableProps, TableSlots, TableState } from '../Table/Table.types';\nimport type {\n  SortState,\n  TableFeaturesState,\n  UseTableSortOptions,\n  SelectionMode,\n  UseTableSelectionOptions,\n  OnSelectionChangeData,\n} from '../../hooks';\nimport { TableRowProps } from '../TableRow/TableRow.types';\n\nexport type DataGridSlots = TableSlots;\n\nexport type DataGridFocusMode = 'none' | 'cell' | 'row_unstable';\n\nexport type DataGridContextValues = TableContextValues & {\n  dataGrid: DataGridContextValue;\n};\n\n// Use any here since we can't know the user types\n// The user is responsible for narrowing the type downstream\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type DataGridContextValue = TableFeaturesState<any> & {\n  /**\n   * How focus navigation will work in the datagrid\n   * @default cell\n   */\n  focusMode: DataGridFocusMode;\n\n  /**\n   * Lets child components know if rows selection is enabled\n   * @see selectionMode prop enables row selection on the component\n   */\n  selectableRows: boolean;\n\n  /**\n   * Enables subtle selection style\n   * @default false\n   */\n  subtleSelection: boolean;\n\n  /**\n   * Row appearance when selected\n   * @default brand\n   */\n  selectionAppearance: TableRowProps['appearance'];\n};\n\n/**\n * DataGrid Props\n */\nexport type DataGridProps = TableProps &\n  Pick<DataGridContextValue, 'items' | 'columns' | 'getRowId'> &\n  Pick<Partial<DataGridContextValue>, 'focusMode' | 'subtleSelection' | 'selectionAppearance'> &\n  Pick<UseTableSortOptions, 'sortState' | 'defaultSortState'> &\n  Pick<UseTableSelectionOptions, 'defaultSelectedItems' | 'selectedItems'> & {\n    onSortChange?: (e: React.MouseEvent, sortState: SortState) => void;\n    onSelectionChange?: (e: React.MouseEvent | React.KeyboardEvent, data: OnSelectionChangeData) => void;\n    /**\n     * Enables row selection and sets the selection mode\n     * @default false\n     */\n    selectionMode?: SelectionMode;\n  };\n\n/**\n * State used in rendering DataGrid\n */\nexport type DataGridState = TableState & { tableState: TableFeaturesState<unknown> } & Pick<\n    DataGridContextValue,\n    'focusMode' | 'selectableRows' | 'subtleSelection' | 'selectionAppearance' | 'getRowId'\n  >;\n"]}

package/lib/components/DataGridBody/DataGridBody.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,wBAAwB,QAAQ,mBAAmB;AAC5D,SAASC,2BAA2B,QAAQ,sBAAsB;AAClE,SAASC,8BAA8B,QAAQ,yBAAyB;AAIxE;;;AAGA,OAAO,MAAMC,YAAY,gBAA2CJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAClG,MAAMC,KAAK,GAAGP,wBAAwB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAElDJ,8BAA8B,CAACK,KAAK,CAAC;EACrC,OAAON,2BAA2B,CAACM,KAAK,CAAC;AAC3C,CAAC,CAAC;AAEFJ,YAAY,CAACK,WAAW,GAAG,cAAc","names":["React","useDataGridBody_unstable","renderDataGridBody_unstable","useDataGridBodyStyles_unstable","DataGridBody","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridBody/DataGridBody.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDataGridBody_unstable } from './useDataGridBody';\nimport { renderDataGridBody_unstable } from './renderDataGridBody';\nimport { useDataGridBodyStyles_unstable } from './useDataGridBodyStyles';\nimport type { DataGridBodyProps } from './DataGridBody.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * DataGridBody component\n */\nexport const DataGridBody: ForwardRefComponent<DataGridBodyProps> = React.forwardRef((props, ref) => {\n  const state = useDataGridBody_unstable(props, ref);\n\n  useDataGridBodyStyles_unstable(state);\n  return renderDataGridBody_unstable(state);\n});\n\nDataGridBody.displayName = 'DataGridBody';\n"]}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,wBAAwB,QAAQ,mBAAmB;AAC5D,SAASC,2BAA2B,QAAQ,sBAAsB;AAClE,SAASC,8BAA8B,QAAQ,yBAAyB;AAIxE;;;AAGA,OAAO,MAAMC,YAAY,gBACqCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC5F,MAAMC,KAAK,GAAGP,wBAAwB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAElDJ,8BAA8B,CAACK,KAAK,CAAC;EACrC,OAAON,2BAA2B,CAACM,KAAK,CAAC;AAC3C,CAAC,CAAuG;AAExGJ,YAAY,CAACK,WAAW,GAAG,cAAc","names":["React","useDataGridBody_unstable","renderDataGridBody_unstable","useDataGridBodyStyles_unstable","DataGridBody","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridBody/DataGridBody.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDataGridBody_unstable } from './useDataGridBody';\nimport { renderDataGridBody_unstable } from './renderDataGridBody';\nimport { useDataGridBodyStyles_unstable } from './useDataGridBodyStyles';\nimport type { DataGridBodyProps } from './DataGridBody.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * DataGridBody component\n */\nexport const DataGridBody: ForwardRefComponent<DataGridBodyProps> &\n  (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element) = React.forwardRef((props, ref) => {\n  const state = useDataGridBody_unstable(props, ref);\n\n  useDataGridBodyStyles_unstable(state);\n  return renderDataGridBody_unstable(state);\n}) as ForwardRefComponent<DataGridBodyProps> & (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element);\n\nDataGridBody.displayName = 'DataGridBody';\n"]}

package/lib/components/DataGridBody/DataGridBody.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridBody.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridBody/DataGridBody.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { RowState } from '../../hooks';\nimport type { TableBodySlots, TableBodyProps, TableBodyState } from '../TableBody/TableBody.types';\n\nexport type DataGridBodySlots = TableBodySlots;\n\n// Use any here since we can't know the user types\n// The user is responsible for narrowing the type downstream\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type RowRenderFunction = (row: RowState<any>, ...rest: any[]) => React.ReactNode;\n\n/**\n * DataGridBody Props\n */\nexport type DataGridBodyProps = Omit<TableBodyProps, 'children'> & {\n  /**\n   * Render function for rows\n   */\n  children: RowRenderFunction;\n};\n\n/**\n * State used in rendering DataGridBody\n */\nexport type DataGridBodyState = TableBodyState & {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  rows: RowState<any>[];\n\n  renderRow: RowRenderFunction;\n};\n"]}
+{"version":3,"file":"DataGridBody.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridBody/DataGridBody.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { TableRowData } from '../../hooks';\nimport type { TableBodySlots, TableBodyProps, TableBodyState } from '../TableBody/TableBody.types';\n\nexport type DataGridBodySlots = TableBodySlots;\n\nexport type RowRenderFunction<TItem = unknown> = (row: TableRowData<TItem>, ...rest: unknown[]) => React.ReactNode;\n\n/**\n * DataGridBody Props\n */\nexport type DataGridBodyProps<TItem = unknown> = Omit<TableBodyProps, 'children'> & {\n  /**\n   * Render function for rows\n   */\n  children: RowRenderFunction<TItem>;\n};\n\n/**\n * State used in rendering DataGridBody\n */\nexport type DataGridBodyState = TableBodyState & {\n  rows: TableRowData<unknown>[];\n\n  renderRow: RowRenderFunction;\n};\n"]}

package/lib/components/DataGridBody/renderDataGridBody.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
-import { RowIdContextProvider } from '../../contexts/rowIdContext';
+import { TableRowIdContextProvider } from '../../contexts/rowIdContext';
 /**
  * Render the final JSX of DataGridBody
  */
@@ -11,7 +11,7 @@ export const renderDataGridBody_unstable = state => {
   } = getSlots(state);
   return /*#__PURE__*/React.createElement(slots.root, {
     ...slotProps.root
-  }, state.rows.map(row => /*#__PURE__*/React.createElement(RowIdContextProvider, {
+  }, state.rows.map(row => /*#__PURE__*/React.createElement(TableRowIdContextProvider, {
     key: row.rowId,
     value: row.rowId
   }, state.renderRow(row))));

package/lib/components/DataGridBody/renderDataGridBody.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAEpD,SAASC,oBAAoB,QAAQ,6BAA6B;AAElE;;;AAGA,OAAO,MAAMC,2BAA2B,GAAIC,KAAwB,IAAI;EACtE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGL,QAAQ,CAAoBG,KAAK,CAAC;EAE/D,oBACEJ,oBAACK,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,GAC3BH,KAAK,CAACI,IAAI,CAACC,GAAG,CAACC,GAAG,iBACjBV,oBAACE,oBAAoB;IAACS,GAAG,EAAED,GAAG,CAACE,KAAK;IAAEC,KAAK,EAAEH,GAAG,CAACE;EAAK,GACnDR,KAAK,CAACU,SAAS,CAACJ,GAAG,CAAC,CAExB,CAAC,CACS;AAEjB,CAAC","names":["React","getSlots","RowIdContextProvider","renderDataGridBody_unstable","state","slots","slotProps","root","rows","map","row","key","rowId","value","renderRow"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridBody/renderDataGridBody.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DataGridBodyState, DataGridBodySlots } from './DataGridBody.types';\nimport { RowIdContextProvider } from '../../contexts/rowIdContext';\n\n/**\n * Render the final JSX of DataGridBody\n */\nexport const renderDataGridBody_unstable = (state: DataGridBodyState) => {\n  const { slots, slotProps } = getSlots<DataGridBodySlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {state.rows.map(row => (\n        <RowIdContextProvider key={row.rowId} value={row.rowId}>\n          {state.renderRow(row)}\n        </RowIdContextProvider>\n      ))}\n    </slots.root>\n  );\n};\n"]}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAEpD,SAASC,yBAAyB,QAAQ,6BAA6B;AAEvE;;;AAGA,OAAO,MAAMC,2BAA2B,GAAIC,KAAwB,IAAI;EACtE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGL,QAAQ,CAAoBG,KAAK,CAAC;EAE/D,oBACEJ,oBAACK,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,GAC3BH,KAAK,CAACI,IAAI,CAACC,GAAG,CAACC,GAAG,iBACjBV,oBAACE,yBAAyB;IAACS,GAAG,EAAED,GAAG,CAACE,KAAK;IAAEC,KAAK,EAAEH,GAAG,CAACE;EAAK,GACxDR,KAAK,CAACU,SAAS,CAACJ,GAAG,CAAC,CAExB,CAAC,CACS;AAEjB,CAAC","names":["React","getSlots","TableRowIdContextProvider","renderDataGridBody_unstable","state","slots","slotProps","root","rows","map","row","key","rowId","value","renderRow"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridBody/renderDataGridBody.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DataGridBodyState, DataGridBodySlots } from './DataGridBody.types';\nimport { TableRowIdContextProvider } from '../../contexts/rowIdContext';\n\n/**\n * Render the final JSX of DataGridBody\n */\nexport const renderDataGridBody_unstable = (state: DataGridBodyState) => {\n  const { slots, slotProps } = getSlots<DataGridBodySlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {state.rows.map(row => (\n        <TableRowIdContextProvider key={row.rowId} value={row.rowId}>\n          {state.renderRow(row)}\n        </TableRowIdContextProvider>\n      ))}\n    </slots.root>\n  );\n};\n"]}

package/lib/components/DataGridRow/DataGridRow.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,6BAA6B,QAAQ,wBAAwB;AAItE;;;AAGA,OAAO,MAAMC,WAAW,gBAA0CJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGP,uBAAuB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEjDJ,6BAA6B,CAACK,KAAK,CAAC;EACpC,OAAON,0BAA0B,CAACM,KAAK,CAAC;AAC1C,CAAC,CAAC;AAEFJ,WAAW,CAACK,WAAW,GAAG,aAAa","names":["React","useDataGridRow_unstable","renderDataGridRow_unstable","useDataGridRowStyles_unstable","DataGridRow","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridRow/DataGridRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDataGridRow_unstable } from './useDataGridRow';\nimport { renderDataGridRow_unstable } from './renderDataGridRow';\nimport { useDataGridRowStyles_unstable } from './useDataGridRowStyles';\nimport type { DataGridRowProps } from './DataGridRow.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * DataGridRow component\n */\nexport const DataGridRow: ForwardRefComponent<DataGridRowProps> = React.forwardRef((props, ref) => {\n  const state = useDataGridRow_unstable(props, ref);\n\n  useDataGridRowStyles_unstable(state);\n  return renderDataGridRow_unstable(state);\n});\n\nDataGridRow.displayName = 'DataGridRow';\n"]}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,6BAA6B,QAAQ,wBAAwB;AAItE;;;AAGA,OAAO,MAAMC,WAAW,gBACqCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC3F,MAAMC,KAAK,GAAGP,uBAAuB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEjDJ,6BAA6B,CAACK,KAAK,CAAC;EACpC,OAAON,0BAA0B,CAACM,KAAK,CAAC;AAC1C,CAAC,CAAqG;AAEtGJ,WAAW,CAACK,WAAW,GAAG,aAAa","names":["React","useDataGridRow_unstable","renderDataGridRow_unstable","useDataGridRowStyles_unstable","DataGridRow","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridRow/DataGridRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDataGridRow_unstable } from './useDataGridRow';\nimport { renderDataGridRow_unstable } from './renderDataGridRow';\nimport { useDataGridRowStyles_unstable } from './useDataGridRowStyles';\nimport type { DataGridRowProps } from './DataGridRow.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * DataGridRow component\n */\nexport const DataGridRow: ForwardRefComponent<DataGridRowProps> &\n  (<TItem>(props: DataGridRowProps<TItem>) => JSX.Element) = React.forwardRef((props, ref) => {\n  const state = useDataGridRow_unstable(props, ref);\n\n  useDataGridRowStyles_unstable(state);\n  return renderDataGridRow_unstable(state);\n}) as ForwardRefComponent<DataGridRowProps> & (<TItem>(props: DataGridRowProps<TItem>) => JSX.Element);\n\nDataGridRow.displayName = 'DataGridRow';\n"]}

package/lib/components/DataGridRow/DataGridRow.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridRow.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridRow/DataGridRow.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { Slot, ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { ColumnDefinition } from '../../hooks';\nimport type { TableRowProps, TableRowSlots, TableRowState } from '../TableRow/TableRow.types';\nimport type { TableSelectionCell } from '../TableSelectionCell/TableSelectionCell';\n\nexport type DataGridRowSlots = TableRowSlots & {\n  /**\n   * When selection is enabled on the @see DataGrid, all rows\n   * will render the selection cell.\n   */\n  selectionCell?: Slot<typeof TableSelectionCell>;\n};\n\n// Use any here since we can't know the user types\n// The user is responsible for narrowing the type downstream\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type CellRenderFunction = (column: ColumnDefinition<any>) => React.ReactNode;\n\n/**\n * DataGridRow Props\n */\nexport type DataGridRowProps = Omit<TableRowProps, 'children'> &\n  Omit<ComponentProps<DataGridRowSlots>, 'children'> & {\n    children: CellRenderFunction;\n  };\n\n/**\n * State used in rendering DataGridRow\n */\nexport type DataGridRowState = TableRowState &\n  ComponentState<DataGridRowSlots> & {\n    renderCell: CellRenderFunction;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    columnDefs: ColumnDefinition<any>[];\n  };\n"]}
+{"version":3,"file":"DataGridRow.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridRow/DataGridRow.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { Slot, ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { TableColumnDefinition } from '../../hooks';\nimport type { TableRowProps, TableRowSlots, TableRowState } from '../TableRow/TableRow.types';\nimport type { TableSelectionCell } from '../TableSelectionCell/TableSelectionCell';\n\nexport type DataGridRowSlots = TableRowSlots & {\n  /**\n   * When selection is enabled on the @see DataGrid, all rows\n   * will render the selection cell.\n   */\n  selectionCell?: Slot<typeof TableSelectionCell>;\n};\n\nexport type CellRenderFunction<TItem = unknown> = (column: TableColumnDefinition<TItem>) => React.ReactNode;\n\n/**\n * DataGridRow Props\n */\nexport type DataGridRowProps<TItem = unknown> = Omit<TableRowProps, 'children'> &\n  Omit<ComponentProps<DataGridRowSlots>, 'children'> & {\n    children: CellRenderFunction<TItem>;\n  };\n\n/**\n * State used in rendering DataGridRow\n */\nexport type DataGridRowState = TableRowState &\n  ComponentState<DataGridRowSlots> & {\n    renderCell: CellRenderFunction;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    columnDefs: TableColumnDefinition<any>[];\n  };\n"]}

package/lib/components/DataGridRow/useDataGridRow.js

@@ -3,7 +3,7 @@ import { Space } from '@fluentui/keyboard-keys';
 import { useTableRow_unstable } from '../TableRow/useTableRow';
 import { useDataGridContext_unstable } from '../../contexts/dataGridContext';
 import { DataGridSelectionCell } from '../DataGridSelectionCell/DataGridSelectionCell';
-import { useRowIdContext } from '../../contexts/rowIdContext';
+import { useTableRowIdContext } from '../../contexts/rowIdContext';
 import { useIsInTableHeader } from '../../contexts/tableHeaderContext';
 /**
  * Create the state required to render DataGridRow.
@@ -15,7 +15,7 @@ import { useIsInTableHeader } from '../../contexts/tableHeaderContext';
  * @param ref - reference to root HTMLElement of DataGridRow
  */
 export const useDataGridRow_unstable = (props, ref) => {
-  const rowId = useRowIdContext();
+  const rowId = useTableRowIdContext();
   const isHeader = useIsInTableHeader();
   const columnDefs = useDataGridContext_unstable(ctx => ctx.columns);
   const selectable = useDataGridContext_unstable(ctx => ctx.selectableRows);

package/lib/components/DataGridRow/useDataGridRow.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AACA,SAASA,wBAAwB,EAAEC,gBAAgB,EAAEC,gBAAgB,QAAQ,2BAA2B;AACxG,SAASC,KAAK,QAAQ,yBAAyB;AAE/C,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,2BAA2B,QAAQ,gCAAgC;AAC5E,SAASC,qBAAqB,QAAQ,gDAAgD;AACtF,SAASC,eAAe,QAAQ,6BAA6B;AAC7D,SAASC,kBAAkB,QAAQ,mCAAmC;AAEtE;;;;;;;;;AASA,OAAO,MAAMC,uBAAuB,GAAG,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;EAChH,MAAMC,KAAK,GAAGL,eAAe,EAAE;EAC/B,MAAMM,QAAQ,GAAGL,kBAAkB,EAAE;EACrC,MAAMM,UAAU,GAAGT,2BAA2B,CAACU,GAAG,IAAIA,GAAG,CAACC,OAAO,CAAC;EAClE,MAAMC,UAAU,GAAGZ,2BAA2B,CAACU,GAAG,IAAIA,GAAG,CAACG,cAAc,CAAC;EACzE,MAAMC,QAAQ,GAAGd,2BAA2B,CAACU,GAAG,IAAIA,GAAG,CAACK,SAAS,CAACC,aAAa,CAACT,KAAK,CAAC,CAAC;EACvF,MAAMU,QAAQ,GAAGjB,2BAA2B,CAACU,GAAG,IAAIA,GAAG,CAACQ,SAAS,KAAK,cAAc,CAAC;EACrF,MAAMC,UAAU,GAAGnB,2BAA2B,CAACU,GAAG,IAAG;IACnD,IAAI,CAACF,QAAQ,IAAII,UAAU,IAAIF,GAAG,CAACK,SAAS,CAACC,aAAa,CAACT,KAAK,CAAC,EAAE;MACjE,OAAOG,GAAG,CAACU,mBAAmB;;IAGhC,OAAO,MAAM;EACf,CAAC,CAAC;EACF,MAAMC,SAAS,GAAGrB,2BAA2B,CAACU,GAAG,IAAIA,GAAG,CAACK,SAAS,CAACM,SAAS,CAAC;EAE7E,MAAMC,OAAO,GAAG1B,gBAAgB,CAAE2B,CAAwC,IAAI;;IAC5E,IAAIX,UAAU,IAAI,CAACJ,QAAQ,EAAE;MAC3Ba,SAAS,CAACE,CAAC,EAAEhB,KAAK,CAAC;;IAGrB,WAAK,CAACe,OAAO,+CAAbjB,KAAK,EAAWkB,CAAC,CAAC;EACpB,CAAC,CAAC;EAEF,MAAMC,SAAS,GAAG5B,gBAAgB,CAAE2B,CAA2C,IAAI;;IACjF,IAAIX,UAAU,IAAI,CAACJ,QAAQ,IAAIe,CAAC,CAACE,GAAG,KAAK3B,KAAK,IAAI,CAACH,wBAAwB,CAAC4B,CAAC,CAACG,MAAqB,CAAC,EAAE;MACpG;MACAH,CAAC,CAACI,cAAc,EAAE;MAClBN,SAAS,CAACE,CAAC,EAAEhB,KAAK,CAAC;;IAGrB,WAAK,CAACiB,SAAS,+CAAfnB,KAAK,EAAakB,CAAC,CAAC;EACtB,CAAC,CAAC;EAEF,MAAMK,SAAS,GAAG7B,oBAAoB,CACpC;IACEoB,UAAU;IACV,eAAe,EAAEP,UAAU,GAAGE,QAAQ,GAAGe,SAAS;IAClD,GAAGxB,KAAK;IACRiB,OAAO;IACPE,SAAS;IACTM,QAAQ,EAAE,IAAI;IACdC,EAAE,EAAE,KAAK;IACTC,QAAQ,EAAEf,QAAQ,IAAI,CAACT,QAAQ,GAAG,CAAC,GAAGqB;GACvC,EACDvB,GAAG,CACJ;EAED,OAAO;IACL,GAAGsB,SAAS;IACZK,UAAU,EAAE;MACV,GAAGL,SAAS,CAACK,UAAU;MACvBC,aAAa,EAAEjC;KAChB;IACDiC,aAAa,EAAErC,gBAAgB,CAACQ,KAAK,CAAC6B,aAAa,EAAE;MAAEC,QAAQ,EAAEvB;IAAU,CAAE,CAAC;IAC9EwB,UAAU,EAAE/B,KAAK,CAACyB,QAAQ;IAC1BrB;GACD;AACH,CAAC","names":["isInteractiveHTMLElement","useEventCallback","resolveShorthand","Space","useTableRow_unstable","useDataGridContext_unstable","DataGridSelectionCell","useRowIdContext","useIsInTableHeader","useDataGridRow_unstable","props","ref","rowId","isHeader","columnDefs","ctx","columns","selectable","selectableRows","selected","selection","isRowSelected","tabbable","focusMode","appearance","selectionAppearance","toggleRow","onClick","e","onKeyDown","key","target","preventDefault","baseState","undefined","children","as","tabIndex","components","selectionCell","required","renderCell"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridRow/useDataGridRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isInteractiveHTMLElement, useEventCallback, resolveShorthand } from '@fluentui/react-utilities';\nimport { Space } from '@fluentui/keyboard-keys';\nimport type { DataGridRowProps, DataGridRowState } from './DataGridRow.types';\nimport { useTableRow_unstable } from '../TableRow/useTableRow';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { DataGridSelectionCell } from '../DataGridSelectionCell/DataGridSelectionCell';\nimport { useRowIdContext } from '../../contexts/rowIdContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\n/**\n * Create the state required to render DataGridRow.\n *\n * The returned state can be modified with hooks such as useDataGridRowStyles_unstable,\n * before being passed to renderDataGridRow_unstable.\n *\n * @param props - props from this instance of DataGridRow\n * @param ref - reference to root HTMLElement of DataGridRow\n */\nexport const useDataGridRow_unstable = (props: DataGridRowProps, ref: React.Ref<HTMLElement>): DataGridRowState => {\n  const rowId = useRowIdContext();\n  const isHeader = useIsInTableHeader();\n  const columnDefs = useDataGridContext_unstable(ctx => ctx.columns);\n  const selectable = useDataGridContext_unstable(ctx => ctx.selectableRows);\n  const selected = useDataGridContext_unstable(ctx => ctx.selection.isRowSelected(rowId));\n  const tabbable = useDataGridContext_unstable(ctx => ctx.focusMode === 'row_unstable');\n  const appearance = useDataGridContext_unstable(ctx => {\n    if (!isHeader && selectable && ctx.selection.isRowSelected(rowId)) {\n      return ctx.selectionAppearance;\n    }\n\n    return 'none';\n  });\n  const toggleRow = useDataGridContext_unstable(ctx => ctx.selection.toggleRow);\n\n  const onClick = useEventCallback((e: React.MouseEvent<HTMLTableRowElement>) => {\n    if (selectable && !isHeader) {\n      toggleRow(e, rowId);\n    }\n\n    props.onClick?.(e);\n  });\n\n  const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLTableRowElement>) => {\n    if (selectable && !isHeader && e.key === Space && !isInteractiveHTMLElement(e.target as HTMLElement)) {\n      // stop scrolling\n      e.preventDefault();\n      toggleRow(e, rowId);\n    }\n\n    props.onKeyDown?.(e);\n  });\n\n  const baseState = useTableRow_unstable(\n    {\n      appearance,\n      'aria-selected': selectable ? selected : undefined,\n      ...props,\n      onClick,\n      onKeyDown,\n      children: null,\n      as: 'div',\n      tabIndex: tabbable && !isHeader ? 0 : undefined,\n    },\n    ref,\n  );\n\n  return {\n    ...baseState,\n    components: {\n      ...baseState.components,\n      selectionCell: DataGridSelectionCell,\n    },\n    selectionCell: resolveShorthand(props.selectionCell, { required: selectable }),\n    renderCell: props.children,\n    columnDefs,\n  };\n};\n"]}
+{"version":3,"mappings":"AACA,SAASA,wBAAwB,EAAEC,gBAAgB,EAAEC,gBAAgB,QAAQ,2BAA2B;AACxG,SAASC,KAAK,QAAQ,yBAAyB;AAE/C,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,2BAA2B,QAAQ,gCAAgC;AAC5E,SAASC,qBAAqB,QAAQ,gDAAgD;AACtF,SAASC,oBAAoB,QAAQ,6BAA6B;AAClE,SAASC,kBAAkB,QAAQ,mCAAmC;AAEtE;;;;;;;;;AASA,OAAO,MAAMC,uBAAuB,GAAG,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;EAChH,MAAMC,KAAK,GAAGL,oBAAoB,EAAE;EACpC,MAAMM,QAAQ,GAAGL,kBAAkB,EAAE;EACrC,MAAMM,UAAU,GAAGT,2BAA2B,CAACU,GAAG,IAAIA,GAAG,CAACC,OAAO,CAAC;EAClE,MAAMC,UAAU,GAAGZ,2BAA2B,CAACU,GAAG,IAAIA,GAAG,CAACG,cAAc,CAAC;EACzE,MAAMC,QAAQ,GAAGd,2BAA2B,CAACU,GAAG,IAAIA,GAAG,CAACK,SAAS,CAACC,aAAa,CAACT,KAAK,CAAC,CAAC;EACvF,MAAMU,QAAQ,GAAGjB,2BAA2B,CAACU,GAAG,IAAIA,GAAG,CAACQ,SAAS,KAAK,cAAc,CAAC;EACrF,MAAMC,UAAU,GAAGnB,2BAA2B,CAACU,GAAG,IAAG;IACnD,IAAI,CAACF,QAAQ,IAAII,UAAU,IAAIF,GAAG,CAACK,SAAS,CAACC,aAAa,CAACT,KAAK,CAAC,EAAE;MACjE,OAAOG,GAAG,CAACU,mBAAmB;;IAGhC,OAAO,MAAM;EACf,CAAC,CAAC;EACF,MAAMC,SAAS,GAAGrB,2BAA2B,CAACU,GAAG,IAAIA,GAAG,CAACK,SAAS,CAACM,SAAS,CAAC;EAE7E,MAAMC,OAAO,GAAG1B,gBAAgB,CAAE2B,CAAwC,IAAI;;IAC5E,IAAIX,UAAU,IAAI,CAACJ,QAAQ,EAAE;MAC3Ba,SAAS,CAACE,CAAC,EAAEhB,KAAK,CAAC;;IAGrB,WAAK,CAACe,OAAO,+CAAbjB,KAAK,EAAWkB,CAAC,CAAC;EACpB,CAAC,CAAC;EAEF,MAAMC,SAAS,GAAG5B,gBAAgB,CAAE2B,CAA2C,IAAI;;IACjF,IAAIX,UAAU,IAAI,CAACJ,QAAQ,IAAIe,CAAC,CAACE,GAAG,KAAK3B,KAAK,IAAI,CAACH,wBAAwB,CAAC4B,CAAC,CAACG,MAAqB,CAAC,EAAE;MACpG;MACAH,CAAC,CAACI,cAAc,EAAE;MAClBN,SAAS,CAACE,CAAC,EAAEhB,KAAK,CAAC;;IAGrB,WAAK,CAACiB,SAAS,+CAAfnB,KAAK,EAAakB,CAAC,CAAC;EACtB,CAAC,CAAC;EAEF,MAAMK,SAAS,GAAG7B,oBAAoB,CACpC;IACEoB,UAAU;IACV,eAAe,EAAEP,UAAU,GAAGE,QAAQ,GAAGe,SAAS;IAClD,GAAGxB,KAAK;IACRiB,OAAO;IACPE,SAAS;IACTM,QAAQ,EAAE,IAAI;IACdC,EAAE,EAAE,KAAK;IACTC,QAAQ,EAAEf,QAAQ,IAAI,CAACT,QAAQ,GAAG,CAAC,GAAGqB;GACvC,EACDvB,GAAG,CACJ;EAED,OAAO;IACL,GAAGsB,SAAS;IACZK,UAAU,EAAE;MACV,GAAGL,SAAS,CAACK,UAAU;MACvBC,aAAa,EAAEjC;KAChB;IACDiC,aAAa,EAAErC,gBAAgB,CAACQ,KAAK,CAAC6B,aAAa,EAAE;MAAEC,QAAQ,EAAEvB;IAAU,CAAE,CAAC;IAC9EwB,UAAU,EAAE/B,KAAK,CAACyB,QAAQ;IAC1BrB;GACD;AACH,CAAC","names":["isInteractiveHTMLElement","useEventCallback","resolveShorthand","Space","useTableRow_unstable","useDataGridContext_unstable","DataGridSelectionCell","useTableRowIdContext","useIsInTableHeader","useDataGridRow_unstable","props","ref","rowId","isHeader","columnDefs","ctx","columns","selectable","selectableRows","selected","selection","isRowSelected","tabbable","focusMode","appearance","selectionAppearance","toggleRow","onClick","e","onKeyDown","key","target","preventDefault","baseState","undefined","children","as","tabIndex","components","selectionCell","required","renderCell"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridRow/useDataGridRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isInteractiveHTMLElement, useEventCallback, resolveShorthand } from '@fluentui/react-utilities';\nimport { Space } from '@fluentui/keyboard-keys';\nimport type { DataGridRowProps, DataGridRowState } from './DataGridRow.types';\nimport { useTableRow_unstable } from '../TableRow/useTableRow';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { DataGridSelectionCell } from '../DataGridSelectionCell/DataGridSelectionCell';\nimport { useTableRowIdContext } from '../../contexts/rowIdContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\n/**\n * Create the state required to render DataGridRow.\n *\n * The returned state can be modified with hooks such as useDataGridRowStyles_unstable,\n * before being passed to renderDataGridRow_unstable.\n *\n * @param props - props from this instance of DataGridRow\n * @param ref - reference to root HTMLElement of DataGridRow\n */\nexport const useDataGridRow_unstable = (props: DataGridRowProps, ref: React.Ref<HTMLElement>): DataGridRowState => {\n  const rowId = useTableRowIdContext();\n  const isHeader = useIsInTableHeader();\n  const columnDefs = useDataGridContext_unstable(ctx => ctx.columns);\n  const selectable = useDataGridContext_unstable(ctx => ctx.selectableRows);\n  const selected = useDataGridContext_unstable(ctx => ctx.selection.isRowSelected(rowId));\n  const tabbable = useDataGridContext_unstable(ctx => ctx.focusMode === 'row_unstable');\n  const appearance = useDataGridContext_unstable(ctx => {\n    if (!isHeader && selectable && ctx.selection.isRowSelected(rowId)) {\n      return ctx.selectionAppearance;\n    }\n\n    return 'none';\n  });\n  const toggleRow = useDataGridContext_unstable(ctx => ctx.selection.toggleRow);\n\n  const onClick = useEventCallback((e: React.MouseEvent<HTMLTableRowElement>) => {\n    if (selectable && !isHeader) {\n      toggleRow(e, rowId);\n    }\n\n    props.onClick?.(e);\n  });\n\n  const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLTableRowElement>) => {\n    if (selectable && !isHeader && e.key === Space && !isInteractiveHTMLElement(e.target as HTMLElement)) {\n      // stop scrolling\n      e.preventDefault();\n      toggleRow(e, rowId);\n    }\n\n    props.onKeyDown?.(e);\n  });\n\n  const baseState = useTableRow_unstable(\n    {\n      appearance,\n      'aria-selected': selectable ? selected : undefined,\n      ...props,\n      onClick,\n      onKeyDown,\n      children: null,\n      as: 'div',\n      tabIndex: tabbable && !isHeader ? 0 : undefined,\n    },\n    ref,\n  );\n\n  return {\n    ...baseState,\n    components: {\n      ...baseState.components,\n      selectionCell: DataGridSelectionCell,\n    },\n    selectionCell: resolveShorthand(props.selectionCell, { required: selectable }),\n    renderCell: props.children,\n    columnDefs,\n  };\n};\n"]}

package/lib/components/DataGridSelectionCell/useDataGridSelectionCell.js

@@ -1,6 +1,6 @@
 import { useEventCallback } from '@fluentui/react-utilities';
 import { useDataGridContext_unstable } from '../../contexts/dataGridContext';
-import { useRowIdContext } from '../../contexts/rowIdContext';
+import { useTableRowIdContext } from '../../contexts/rowIdContext';
 import { useIsInTableHeader } from '../../contexts/tableHeaderContext';
 import { useTableSelectionCell_unstable } from '../TableSelectionCell/useTableSelectionCell';
 /**
@@ -14,7 +14,7 @@ import { useTableSelectionCell_unstable } from '../TableSelectionCell/useTableSe
  */
 export const useDataGridSelectionCell_unstable = (props, ref) => {
   const isHeader = useIsInTableHeader();
-  const rowId = useRowIdContext();
+  const rowId = useTableRowIdContext();
   const subtle = useDataGridContext_unstable(ctx => ctx.subtleSelection);
   const checked = useDataGridContext_unstable(ctx => {
     if (isHeader && ctx.selection.selectionMode === 'multiselect') {