@fluentui/react-table 9.0.0-alpha.12 → 9.0.0-alpha.14

package/CHANGELOG.json

@@ -2,7 +2,233 @@
   "name": "@fluentui/react-table",
   "entries": [
     {
-      "date": "Thu, 17 Nov 2022 23:02:45 GMT",
+      "date": "Tue, 20 Dec 2022 14:55:53 GMT",
+      "tag": "@fluentui/react-table_v9.0.0-alpha.14",
+      "version": "9.0.0-alpha.14",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-table",
+            "commit": "76054827c6b9ccc7ad73a818952f2d636ffc9e6d",
+            "comment": "fix: Explicit focus outline for TableHeaderCell and TableSelectionCell"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-table",
+            "commit": "67a7284ac5934475134ce72af3965f3f9a223636",
+            "comment": "fix(DataGridSelectionCell): should render `aria-selected` on the cell"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-table",
+            "commit": "622bcbbe42920f53466bed4ad998b67daac3d6d3",
+            "comment": "fix: DataGrid supports keyboard navigation by default"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-table",
+            "commit": "c847712d9293db7028bc01e9ba4204e055ebbfb7",
+            "comment": "feat: Add row focus as unstable feature due to a11y unknowns"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-table",
+            "commit": "b1f470d42273869bc4e10fefff6f08b90640092d",
+            "comment": "fix(DataGridRow): `children` type should only be render function"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-table",
+            "commit": "dc96e9c54ac445396cd5e74812fd2ac1acdd15eb",
+            "comment": "fix: DataGridRow should prevent default on spacebar"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-table",
+            "commit": "b0aab3b9647e55a355e5e1c0d4e4cf7cc7955fdb",
+            "comment": "feat: DataGrid supports custom row Ids"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-table",
+            "commit": "ac32a5c210e34916f6990ebe4449621344ba0839",
+            "comment": "fix(TableHeaderCell): should render `aria-sort=\"none\"` if not sorted"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-aria to v9.3.3",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-avatar to v9.2.9",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-checkbox to v9.0.15",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.3",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-radio to v9.0.14",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-tabster to v9.3.3",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-theme to v9.1.4",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-utilities to v9.3.0",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          }
+        ],
+        "none": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-table",
+            "commit": "81c1239976fbf6dbc3c3c160462eac1b3ddfd0a8",
+            "comment": "docs: Table examples generally navigate with tab"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 05 Dec 2022 18:29:31 GMT",
+      "tag": "@fluentui/react-table_v9.0.0-alpha.13",
+      "version": "9.0.0-alpha.13",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-table",
+            "commit": "dfe430630188bb7e2fe2ddc15b5269fcfd1bf20b",
+            "comment": "fix: TableHeaderCell design fixes"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-table",
+            "commit": "f64a67537afb35cb5007c16160d0a1deb656d875",
+            "comment": "BREAKING(useTable): `onSelectionChange` returns data object"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-table",
+            "commit": "f7d7f82f6b3117ce163c6fee84b03c8774bed95f",
+            "comment": "docs: Update docstrings for props"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-table",
+            "commit": "35de934c73603a2fc9416327ab1cf89283f76c5f",
+            "comment": "fix: Various design fixes to Table components"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-table",
+            "commit": "6f450a1713c40d5429306ab1f6d76bc19e65c295",
+            "comment": "fix: Cell actions should have correct background when row focused within"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-table",
+            "commit": "3ca7917d818ccde26b1dc172241f88a6e8f322b3",
+            "comment": "fix: Table row height is determined by cells"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-table",
+            "commit": "f1a66a851248f1a2140cb387a62c19468afd3365",
+            "comment": "BREAKING: change `smaller` size to `extra-small`"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-table",
+            "commit": "2d9a9f3147deea6d0c0a60747e1074faf47968c3",
+            "comment": "fix(TableCellLayout): Icon sizes in should match design spec"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-table",
+            "commit": "31d2fa0e30649e991925fec10d49ac8fae2dc585",
+            "comment": "feat: `DataGrid` supports row sorting"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-table",
+            "commit": "8811bf9bf2f5d2c6591ffdaa0a4024456f66bfbd",
+            "comment": "BREAKING: rename useTable->useTableFeatures, useSelection->useTableSelection, useSort->useTableSort"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-table",
+            "commit": "6b90a6e90a71bb3ca36a6bc633d0d535ccb717e9",
+            "comment": "feat: DataGrid supports selection"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-avatar to v9.2.8",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-checkbox to v9.0.14",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-radio to v9.0.13",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-tabster to v9.3.2",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-theme to v9.1.3",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          }
+        ],
+        "none": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-table",
+            "commit": "8607e1bc8dbc03f9416f1c24d403f04ca91cd597",
+            "comment": "docs: Improve `DataGrid` docs"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 17 Nov 2022 23:05:47 GMT",
       "tag": "@fluentui/react-table_v9.0.0-alpha.12",
       "version": "9.0.0-alpha.12",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,60 @@
 # Change Log - @fluentui/react-table
 
-This log was last generated on Thu, 17 Nov 2022 23:02:45 GMT and should not be manually modified.
+This log was last generated on Tue, 20 Dec 2022 14:55:53 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.0-alpha.14)
+
+Tue, 20 Dec 2022 14:55:53 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.0.0-alpha.13..@fluentui/react-table_v9.0.0-alpha.14)
+
+### Changes
+
+- fix: Explicit focus outline for TableHeaderCell and TableSelectionCell ([PR #25938](https://github.com/microsoft/fluentui/pull/25938) by lingfangao@hotmail.com)
+- fix(DataGridSelectionCell): should render `aria-selected` on the cell ([PR #25950](https://github.com/microsoft/fluentui/pull/25950) by lingfangao@hotmail.com)
+- fix: DataGrid supports keyboard navigation by default ([PR #25939](https://github.com/microsoft/fluentui/pull/25939) by lingfangao@hotmail.com)
+- feat: Add row focus as unstable feature due to a11y unknowns ([PR #25944](https://github.com/microsoft/fluentui/pull/25944) by lingfangao@hotmail.com)
+- fix(DataGridRow): `children` type should only be render function ([PR #25930](https://github.com/microsoft/fluentui/pull/25930) by lingfangao@hotmail.com)
+- fix: DataGridRow should prevent default on spacebar ([PR #25942](https://github.com/microsoft/fluentui/pull/25942) by lingfangao@hotmail.com)
+- feat: DataGrid supports custom row Ids ([PR #25885](https://github.com/microsoft/fluentui/pull/25885) by lingfangao@hotmail.com)
+- fix(TableHeaderCell): should render `aria-sort="none"` if not sorted ([PR #25921](https://github.com/microsoft/fluentui/pull/25921) by lingfangao@hotmail.com)
+- Bump @fluentui/react-aria to v9.3.3 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-avatar to v9.2.9 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-checkbox to v9.0.15 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.3 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-radio to v9.0.14 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-tabster to v9.3.3 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-theme to v9.1.4 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-utilities to v9.3.0 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+
+## [9.0.0-alpha.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.0-alpha.13)
+
+Mon, 05 Dec 2022 18:29:31 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.0.0-alpha.12..@fluentui/react-table_v9.0.0-alpha.13)
+
+### Changes
+
+- fix: TableHeaderCell design fixes ([PR #25712](https://github.com/microsoft/fluentui/pull/25712) by lingfangao@hotmail.com)
+- BREAKING(useTable): `onSelectionChange` returns data object ([PR #25731](https://github.com/microsoft/fluentui/pull/25731) by lingfangao@hotmail.com)
+- docs: Update docstrings for props ([PR #25787](https://github.com/microsoft/fluentui/pull/25787) by lingfangao@hotmail.com)
+- fix: Various design fixes to Table components ([PR #25715](https://github.com/microsoft/fluentui/pull/25715) by lingfangao@hotmail.com)
+- fix: Cell actions should have correct background when row focused within ([PR #25790](https://github.com/microsoft/fluentui/pull/25790) by lingfangao@hotmail.com)
+- fix: Table row height is determined by cells ([PR #25717](https://github.com/microsoft/fluentui/pull/25717) by lingfangao@hotmail.com)
+- BREAKING: change `smaller` size to `extra-small` ([PR #25713](https://github.com/microsoft/fluentui/pull/25713) by lingfangao@hotmail.com)
+- fix(TableCellLayout): Icon sizes in should match design spec ([PR #25764](https://github.com/microsoft/fluentui/pull/25764) by lingfangao@hotmail.com)
+- feat: `DataGrid` supports row sorting ([PR #25655](https://github.com/microsoft/fluentui/pull/25655) by lingfangao@hotmail.com)
+- BREAKING: rename useTable->useTableFeatures, useSelection->useTableSelection, useSort->useTableSort ([PR #25797](https://github.com/microsoft/fluentui/pull/25797) by lingfangao@hotmail.com)
+- feat: DataGrid supports selection ([PR #25719](https://github.com/microsoft/fluentui/pull/25719) by lingfangao@hotmail.com)
+- Bump @fluentui/react-avatar to v9.2.8 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-checkbox to v9.0.14 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-radio to v9.0.13 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-tabster to v9.3.2 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-theme to v9.1.3 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+
 ## [9.0.0-alpha.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.0-alpha.12)
 
-Thu, 17 Nov 2022 23:02:45 GMT 
+Thu, 17 Nov 2022 23:05:47 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.0.0-alpha.11..@fluentui/react-table_v9.0.0-alpha.12)
 
 ### Changes

package/dist/index.d.ts

@@ -93,9 +93,24 @@ export declare const dataGridClassNames: SlotClassNames<DataGridSlots>;
 export declare type DataGridContextValue = HeadlessTableState<any> & {
     /**
      * How focus navigation will work in the datagrid
-     * @default none
+     * @default cell
      */
     focusMode: FocusMode;
+    /**
+     * Lets child components know if rows selection is enabled
+     * @see selectionMode prop enables row selection on the component
+     */
+    selectableRows: boolean;
+    /**
+     * Enables subtle selection style
+     * @default false
+     */
+    subtleSelection: boolean;
+    /**
+     * Row appearance when selected
+     * @default brand
+     */
+    selectionAppearance: TableRowProps['appearance'];
 };
 
 export declare type DataGridContextValues = TableContextValues & {
@@ -143,7 +158,15 @@ export declare type DataGridHeaderState = TableHeaderState;
 /**
  * DataGrid Props
  */
-export declare type DataGridProps = TableProps & Pick<DataGridContextValue, 'items' | 'columns'> & Pick<Partial<DataGridContextValue>, 'focusMode'>;
+export declare type DataGridProps = TableProps & Pick<DataGridContextValue, 'items' | 'columns' | 'getRowId'> & Pick<Partial<DataGridContextValue>, 'focusMode' | 'subtleSelection' | 'selectionAppearance'> & Pick<UseTableSortOptions, 'sortState' | 'defaultSortState'> & Pick<UseTableSelectionOptions, 'defaultSelectedItems' | 'selectedItems'> & {
+    onSortChange?: (e: React_2.MouseEvent, sortState: SortState) => void;
+    onSelectionChange?: (e: React_2.MouseEvent | React_2.KeyboardEvent, data: OnSelectionChangeData) => void;
+    /**
+     * Enables row selection and sets the selection mode
+     * @default false
+     */
+    selectionMode?: SelectionMode_2;
+};
 
 /**
  * DataGridRow component - TODO: add more docs
@@ -155,16 +178,22 @@ export declare const dataGridRowClassNames: SlotClassNames<DataGridRowSlots>;
 /**
  * DataGridRow Props
  */
-export declare type DataGridRowProps = Omit<TableRowProps, 'children'> & {
+export declare type DataGridRowProps = Omit<TableRowProps, 'children'> & Omit<ComponentProps<DataGridRowSlots>, 'children'> & {
     children: CellRenderFunction;
 };
 
-export declare type DataGridRowSlots = TableRowSlots;
+export declare type DataGridRowSlots = TableRowSlots & {
+    /**
+     * When selection is enabled on the @see DataGrid, all rows
+     * will render the selection cell.
+     */
+    selectionCell?: Slot<typeof TableSelectionCell>;
+};
 
 /**
  * State used in rendering DataGridRow
  */
-export declare type DataGridRowState = TableRowState;
+export declare type DataGridRowState = TableRowState & ComponentState<DataGridRowSlots>;
 
 /**
  * DataGridSelectionCell component - TODO: add more docs
@@ -192,9 +221,9 @@ export declare type DataGridSlots = TableSlots;
  */
 export declare type DataGridState = TableState & {
     tableState: HeadlessTableState<unknown>;
-} & Pick<DataGridContextValue, 'focusMode'>;
+} & Pick<DataGridContextValue, 'focusMode' | 'selectableRows' | 'subtleSelection' | 'selectionAppearance' | 'getRowId'>;
 
-export declare type FocusMode = 'none' | 'cell';
+export declare type FocusMode = 'none' | 'cell' | 'row_unstable';
 
 export declare interface HeadlessTableState<TItem> extends Pick<UseTableOptions<TItem>, 'items' | 'getRowId'> {
     /**
@@ -216,6 +245,10 @@ export declare interface HeadlessTableState<TItem> extends Pick<UseTableOptions<
     columns: ColumnDefinition<TItem>[];
 }
 
+declare interface OnSelectionChangeData {
+    selectedItems: Set<RowId>;
+}
+
 /**
  * Render the final JSX of DataGrid
  */
@@ -403,6 +436,10 @@ declare type TableCellLayoutContextValues = {
  * TableCellLayout Props
  */
 export declare type TableCellLayoutProps = ComponentProps<Partial<TableCellLayoutSlots>> & {
+    /**
+     * Renders design variants of the table cell
+     * @default undefined
+     */
     appearance?: 'primary';
 };
 
@@ -431,7 +468,7 @@ export declare type TableCellLayoutSlots = {
  */
 export declare type TableCellLayoutState = ComponentState<TableCellLayoutSlots> & Pick<TableCellLayoutProps, 'appearance'> & {
     avatarSize: AvatarSizes | undefined;
-};
+} & Pick<TableContextValue, 'size'>;
 
 /**
  * TableCell Props
@@ -445,7 +482,7 @@ export declare type TableCellSlots = {
 /**
  * State used in rendering TableCell
  */
-export declare type TableCellState = ComponentState<TableCellSlots> & Pick<TableContextValue, 'noNativeElements'>;
+export declare type TableCellState = ComponentState<TableCellSlots> & Pick<TableContextValue, 'noNativeElements' | 'size'>;
 
 export declare const tableClassName = "fui-Table";
 
@@ -458,14 +495,16 @@ export declare type TableContextValue = {
      * Affects the sizes of all table subcomponents
      * @default medium
      */
-    size: 'small' | 'smaller' | 'medium';
+    size: 'extra-small' | 'small' | 'medium';
     /**
      * Render all table elements as divs intead of semantic table elements
      * Using divs no longer uses `display: table` layout but `display: flex`
+     * @default false
      */
     noNativeElements: boolean;
     /**
      * Whether the table is sortable
+     * @default false
      */
     sortable: boolean;
 };
@@ -492,6 +531,9 @@ export declare const tableHeaderCellClassNames: SlotClassNames<TableHeaderCellSl
  * TableHeaderCell Props
  */
 export declare type TableHeaderCellProps = ComponentProps<Partial<TableHeaderCellSlots>> & {
+    /**
+     * @default undefined
+     */
     sortDirection?: SortDirection;
 };
 
@@ -546,7 +588,8 @@ export declare const tableRowClassNames: SlotClassNames<TableRowSlots>;
  */
 export declare type TableRowProps = ComponentProps<TableRowSlots> & {
     /**
-     * A table row can have different variants
+     * A table row can have different variants. These appearances are
+     * intended to be used with selection.
      * @default none
      */
     appearance?: 'brand' | 'neutral' | 'none';
@@ -573,16 +616,22 @@ export declare const tableSelectionCellClassNames: SlotClassNames<TableSelection
  */
 export declare type TableSelectionCellProps = ComponentProps<Partial<Omit<TableSelectionCellSlots, 'media'>>> & {
     /**
-     * A table can have two kinds of selection modes
+     * A table can have two kinds of selection modes.
+     * @default checkbox
      */
     type?: 'checkbox' | 'radio';
+    /**
+     * @default false
+     */
     checked?: CheckboxProps['checked'];
     /**
-     * Only visible when checked or the parent row is hovered
+     * Only visible when checked or the parent row is hovered/focused
+     * @default false
      */
     subtle?: boolean;
     /**
      * Completely hides the selection cell visually but takes up the same space
+     * @default false
      */
     hidden?: boolean;
 };
@@ -640,6 +689,7 @@ export declare interface TableSelectionState {
      * Checks if a given rowId is selected
      */
     isRowSelected: (rowId: RowId) => boolean;
+    selectionMode: SelectionMode_2;
 }
 
 export declare type TableSlots = {
@@ -793,46 +843,6 @@ export declare const useDataGridSelectionCellStyles_unstable: (state: DataGridSe
  */
 export declare const useDataGridStyles_unstable: (state: DataGridState) => DataGridState;
 
-export declare function useSelection<TItem>(options: UseSelectionOptions): (tableState: HeadlessTableState<TItem>) => HeadlessTableState<TItem>;
-
-declare interface UseSelectionOptions {
-    /**
-     * Can be multi or single select
-     */
-    selectionMode: SelectionMode_2;
-    /**
-     * Used in uncontrolled mode to set initial selected rows on mount
-     */
-    defaultSelectedItems?: Set<RowId>;
-    /**
-     * Used to control row selection
-     */
-    selectedItems?: Set<RowId>;
-    /**
-     * Called when selection changes
-     */
-    onSelectionChange?: (e: React_2.SyntheticEvent, selectedItems: Set<RowId>) => void;
-}
-
-export declare function useSort<TItem>(options: UseSortOptions): (tableState: HeadlessTableState<TItem>) => HeadlessTableState<TItem>;
-
-declare interface UseSortOptions {
-    /**
-     * Used to control sorting
-     */
-    sortState?: SortState;
-    /**
-     * Used in uncontrolled mode to set initial sort column and direction on mount
-     */
-    defaultSortState?: SortState;
-    /**
-     * Called when sort changes
-     */
-    onSortChange?: (e: React_2.SyntheticEvent, state: SortState) => void;
-}
-
-export declare function useTable<TItem>(options: UseTableOptions<TItem>, plugins?: TableStatePlugin[]): HeadlessTableState<TItem>;
-
 /**
  * Create the state required to render Table.
  *
@@ -910,6 +920,8 @@ 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>;
+
 /**
  * Create the state required to render TableHeader.
  *
@@ -964,6 +976,8 @@ export declare const useTableRow_unstable: (props: TableRowProps, ref: React_2.R
  */
 export declare const useTableRowStyles_unstable: (state: TableRowState) => TableRowState;
 
+export declare function useTableSelection<TItem>(options: UseTableSelectionOptions): (tableState: HeadlessTableState<TItem>) => HeadlessTableState<TItem>;
+
 /**
  * Create the state required to render TableSelectionCell.
  *
@@ -980,6 +994,42 @@ export declare const useTableSelectionCell_unstable: (props: TableSelectionCellP
  */
 export declare const useTableSelectionCellStyles_unstable: (state: TableSelectionCellState) => TableSelectionCellState;
 
+declare interface UseTableSelectionOptions {
+    /**
+     * Can be multi or single select
+     */
+    selectionMode: SelectionMode_2;
+    /**
+     * Used in uncontrolled mode to set initial selected rows on mount
+     */
+    defaultSelectedItems?: Set<RowId>;
+    /**
+     * Used to control row selection
+     */
+    selectedItems?: Set<RowId>;
+    /**
+     * Called when selection changes
+     */
+    onSelectionChange?(e: React_2.SyntheticEvent, data: OnSelectionChangeData): void;
+}
+
+export declare function useTableSort<TItem>(options: UseTableSortOptions): (tableState: HeadlessTableState<TItem>) => HeadlessTableState<TItem>;
+
+declare interface UseTableSortOptions {
+    /**
+     * Used to control sorting
+     */
+    sortState?: SortState;
+    /**
+     * Used in uncontrolled mode to set initial sort column and direction on mount
+     */
+    defaultSortState?: SortState;
+    /**
+     * Called when sort changes
+     */
+    onSortChange?(e: React_2.SyntheticEvent, state: SortState): void;
+}
+
 /**
  * Apply styling to the Table slots based on the state
  */

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 { TableContextValues, TableProps, TableSlots, TableState } from '../Table/Table.types';\nimport { TableState as HeadlessTableState } from '../../hooks';\n\nexport type DataGridSlots = TableSlots;\n\nexport type FocusMode = 'none' | 'cell';\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 none\n   */\n  focusMode: FocusMode;\n};\n\n/**\n * DataGrid Props\n */\nexport type DataGridProps = TableProps &\n  Pick<DataGridContextValue, 'items' | 'columns'> &\n  Pick<Partial<DataGridContextValue>, 'focusMode'>;\n\n/**\n * State used in rendering DataGrid\n */\nexport type DataGridState = TableState & { tableState: HeadlessTableState<unknown> } & Pick<\n    DataGridContextValue,\n    'focusMode'\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  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"]}

package/lib/components/DataGrid/useDataGrid.js

@@ -1,6 +1,6 @@
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { useTable_unstable } from '../Table/useTable';
-import { useTable } from '../../hooks/useTable';
+import { useTableFeatures, useTableSort, useTableSelection } from '../../hooks';
 /**
  * Create the state required to render DataGrid.
  *
@@ -15,25 +15,49 @@ export const useDataGrid_unstable = (props, ref) => {
   const {
     items,
     columns,
-    focusMode = 'none'
+    focusMode = 'cell',
+    selectionMode,
+    onSortChange,
+    onSelectionChange,
+    defaultSortState,
+    sortState,
+    selectedItems,
+    defaultSelectedItems,
+    subtleSelection = false,
+    selectionAppearance = 'brand',
+    getRowId
   } = props;
   const navigable = focusMode !== 'none';
   const keyboardNavAttr = useArrowNavigationGroup({
     axis: 'grid'
   });
-  const tableState = useTable({
+  const tableState = useTableFeatures({
     items,
-    columns
-  }, []);
+    columns,
+    getRowId
+  }, [useTableSort({
+    defaultSortState,
+    sortState,
+    onSortChange
+  }), useTableSelection({
+    defaultSelectedItems,
+    selectedItems,
+    onSelectionChange,
+    selectionMode: selectionMode !== null && selectionMode !== void 0 ? selectionMode : 'multiselect'
+  })]);
   const baseTableState = useTable_unstable({
     role: 'grid',
     as: 'div',
+    noNativeElements: true,
     ...(navigable && keyboardNavAttr),
     ...props
   }, ref);
   return { ...baseTableState,
     focusMode,
-    tableState
+    tableState,
+    selectableRows: !!selectionMode,
+    subtleSelection,
+    selectionAppearance
   };
 };
 //# sourceMappingURL=useDataGrid.js.map