@fluentui/react-table 9.4.4 → 9.5.0

package/CHANGELOG.json

@@ -2,7 +2,46 @@
   "name": "@fluentui/react-table",
   "entries": [
     {
-      "date": "Mon, 03 Jul 2023 11:54:01 GMT",
+      "date": "Mon, 03 Jul 2023 13:32:38 GMT",
+      "tag": "@fluentui/react-table_v9.5.0",
+      "version": "9.5.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "lingfan.gao@microsoft.com",
+            "package": "@fluentui/react-table",
+            "commit": "d2c95969c67521ea1df57e1339f8743b09b68772",
+            "comment": "feat: Implement composite navigation for Table and DataGrid"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-avatar to v9.5.11",
+            "commit": "d2c95969c67521ea1df57e1339f8743b09b68772"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-checkbox to v9.1.23",
+            "commit": "d2c95969c67521ea1df57e1339f8743b09b68772"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-radio to v9.1.23",
+            "commit": "d2c95969c67521ea1df57e1339f8743b09b68772"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-tabster to v9.10.0",
+            "commit": "d2c95969c67521ea1df57e1339f8743b09b68772"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 03 Jul 2023 11:57:14 GMT",
       "tag": "@fluentui/react-table_v9.4.4",
       "version": "9.4.4",
       "comments": {
@@ -11,55 +50,55 @@
             "author": "beachball",
             "package": "@fluentui/react-table",
             "comment": "Bump @fluentui/react-aria to v9.3.26",
-            "commit": "e7a838bfd1ce4b077d265295fcbef8dc2177e724"
+            "commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-table",
             "comment": "Bump @fluentui/react-avatar to v9.5.10",
-            "commit": "e7a838bfd1ce4b077d265295fcbef8dc2177e724"
+            "commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-table",
             "comment": "Bump @fluentui/react-checkbox to v9.1.22",
-            "commit": "e7a838bfd1ce4b077d265295fcbef8dc2177e724"
+            "commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-table",
             "comment": "Bump @fluentui/react-context-selector to v9.1.26",
-            "commit": "e7a838bfd1ce4b077d265295fcbef8dc2177e724"
+            "commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-table",
             "comment": "Bump @fluentui/react-radio to v9.1.22",
-            "commit": "e7a838bfd1ce4b077d265295fcbef8dc2177e724"
+            "commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-table",
             "comment": "Bump @fluentui/react-shared-contexts to v9.6.0",
-            "commit": "e7a838bfd1ce4b077d265295fcbef8dc2177e724"
+            "commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-table",
             "comment": "Bump @fluentui/react-tabster to v9.9.2",
-            "commit": "e7a838bfd1ce4b077d265295fcbef8dc2177e724"
+            "commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-table",
             "comment": "Bump @fluentui/react-utilities to v9.10.1",
-            "commit": "e7a838bfd1ce4b077d265295fcbef8dc2177e724"
+            "commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-table",
             "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.10",
-            "commit": "e7a838bfd1ce4b077d265295fcbef8dc2177e724"
+            "commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,25 +1,38 @@
 # Change Log - @fluentui/react-table
 
-This log was last generated on Mon, 03 Jul 2023 11:54:01 GMT and should not be manually modified.
+This log was last generated on Mon, 03 Jul 2023 13:32:38 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.5.0)
+
+Mon, 03 Jul 2023 13:32:38 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.4.4..@fluentui/react-table_v9.5.0)
+
+### Minor changes
+
+- feat: Implement composite navigation for Table and DataGrid ([PR #28394](https://github.com/microsoft/fluentui/pull/28394) by lingfan.gao@microsoft.com)
+- Bump @fluentui/react-avatar to v9.5.11 ([PR #28394](https://github.com/microsoft/fluentui/pull/28394) by beachball)
+- Bump @fluentui/react-checkbox to v9.1.23 ([PR #28394](https://github.com/microsoft/fluentui/pull/28394) by beachball)
+- Bump @fluentui/react-radio to v9.1.23 ([PR #28394](https://github.com/microsoft/fluentui/pull/28394) by beachball)
+- Bump @fluentui/react-tabster to v9.10.0 ([PR #28394](https://github.com/microsoft/fluentui/pull/28394) by beachball)
+
 ## [9.4.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.4.4)
 
-Mon, 03 Jul 2023 11:54:01 GMT 
+Mon, 03 Jul 2023 11:57:14 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.4.3..@fluentui/react-table_v9.4.4)
 
 ### Patches
 
-- Bump @fluentui/react-aria to v9.3.26 ([PR #28399](https://github.com/microsoft/fluentui/pull/28399) by beachball)
-- Bump @fluentui/react-avatar to v9.5.10 ([PR #28399](https://github.com/microsoft/fluentui/pull/28399) by beachball)
-- Bump @fluentui/react-checkbox to v9.1.22 ([PR #28399](https://github.com/microsoft/fluentui/pull/28399) by beachball)
-- Bump @fluentui/react-context-selector to v9.1.26 ([PR #28399](https://github.com/microsoft/fluentui/pull/28399) by beachball)
-- Bump @fluentui/react-radio to v9.1.22 ([PR #28399](https://github.com/microsoft/fluentui/pull/28399) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.6.0 ([PR #28399](https://github.com/microsoft/fluentui/pull/28399) by beachball)
-- Bump @fluentui/react-tabster to v9.9.2 ([PR #28399](https://github.com/microsoft/fluentui/pull/28399) by beachball)
-- Bump @fluentui/react-utilities to v9.10.1 ([PR #28399](https://github.com/microsoft/fluentui/pull/28399) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.10 ([PR #28399](https://github.com/microsoft/fluentui/pull/28399) by beachball)
+- Bump @fluentui/react-aria to v9.3.26 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
+- Bump @fluentui/react-avatar to v9.5.10 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
+- Bump @fluentui/react-checkbox to v9.1.22 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.26 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
+- Bump @fluentui/react-radio to v9.1.22 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.6.0 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
+- Bump @fluentui/react-tabster to v9.9.2 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
+- Bump @fluentui/react-utilities to v9.10.1 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.10 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
 
 ## [9.4.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.4.3)
 

package/dist/index.d.ts

@@ -14,6 +14,7 @@ import { SelectionHookParams } from '@fluentui/react-utilities';
 import { SelectionMode as SelectionMode_2 } from '@fluentui/react-utilities';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
+import { TabsterDOMAttribute } from '@fluentui/react-tabster';
 
 export declare type CellRenderFunction<TItem = unknown> = (column: TableColumnDefinition<TItem>, dataGridContextValue: DataGridContextValue) => React_2.ReactNode;
 
@@ -129,13 +130,14 @@ export declare type DataGridContextValue = TableFeaturesState<any> & {
      * Enables column resizing
      */
     resizableColumns?: boolean;
+    compositeRowTabsterAttribute: TabsterDOMAttribute;
 };
 
 export declare type DataGridContextValues = TableContextValues & {
     dataGrid: DataGridContextValue;
 };
 
-export declare type DataGridFocusMode = 'none' | 'cell' | 'row_unstable';
+export declare type DataGridFocusMode = 'none' | 'cell' | 'row_unstable' | 'composite';
 
 /**
  * DataGridHeader component
@@ -262,7 +264,7 @@ export declare type DataGridSlots = TableSlots;
  */
 export declare type DataGridState = TableState & {
     tableState: TableFeaturesState<unknown>;
-} & Pick<DataGridContextValue, 'focusMode' | 'selectableRows' | 'subtleSelection' | 'selectionAppearance' | 'getRowId' | 'resizableColumns'>;
+} & Pick<DataGridContextValue, 'focusMode' | 'selectableRows' | 'subtleSelection' | 'selectionAppearance' | 'getRowId' | 'resizableColumns' | 'compositeRowTabsterAttribute'>;
 
 declare type EnableKeyboardModeOnChangeCallback = (columnId: TableColumnId, isKeyboardMode: boolean) => void;
 
@@ -1041,6 +1043,12 @@ declare type UseTableColumnSizingParams = {
     containerWidthOffset?: number;
 };
 
+export declare function useTableCompositeNavigation(): {
+    onTableKeyDown: React_2.KeyboardEventHandler;
+    tableTabsterAttribute: TabsterDOMAttribute;
+    tableRowTabsterAttribute: TabsterDOMAttribute;
+};
+
 export declare const useTableContext: () => TableContextValue;
 
 export declare function useTableFeatures<TItem>(options: UseTableFeaturesOptions<TItem>, plugins?: TableFeaturePlugin[]): TableFeaturesState<TItem>;

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

@@ -1 +1 @@
-{"version":3,"sources":["DataGrid.types.ts"],"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  OnSelectionChangeData,\n  TableColumnSizingOptions,\n  TableColumnId,\n} from '../../hooks';\nimport { TableRowProps } from '../TableRow/TableRow.types';\nimport { SelectionHookParams, SelectionMode } from '@fluentui/react-utilities';\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   * Enables column resizing\n   */\n  resizableColumns?: boolean;\n};\n\n/**\n * DataGrid Props\n */\nexport type DataGridProps = TableProps &\n  Pick<DataGridContextValue, 'items' | 'columns' | 'getRowId'> &\n  Pick<Partial<DataGridContextValue>, 'focusMode' | 'subtleSelection' | 'selectionAppearance' | 'resizableColumns'> &\n  Pick<UseTableSortOptions, 'sortState' | 'defaultSortState'> &\n  Pick<SelectionHookParams, '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     * Options for column resizing\n     */\n    columnSizingOptions?: TableColumnSizingOptions;\n    /**\n     * A callback triggered when a column is resized.\n     */\n    onColumnResize?: (\n      e: KeyboardEvent | TouchEvent | MouseEvent | undefined,\n      data: { columnId: TableColumnId; width: number },\n    ) => void;\n    /**\n     * For column resizing. Allows for a container size to be adjusted by a number of pixels, to make\n     * sure the columns don't overflow the table.\n     * By default, this value is calculated internally based on other props, but can be overriden.\n     */\n    containerWidthOffset?: number;\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' | 'resizableColumns'\n  >;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["DataGrid.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { SelectionHookParams, SelectionMode } from '@fluentui/react-utilities';\nimport { TabsterDOMAttribute } from '@fluentui/react-tabster';\nimport type { TableContextValues, TableProps, TableSlots, TableState } from '../Table/Table.types';\nimport type {\n  SortState,\n  TableFeaturesState,\n  UseTableSortOptions,\n  OnSelectionChangeData,\n  TableColumnSizingOptions,\n  TableColumnId,\n} from '../../hooks';\nimport { TableRowProps } from '../TableRow/TableRow.types';\n\nexport type DataGridSlots = TableSlots;\n\nexport type DataGridFocusMode = 'none' | 'cell' | 'row_unstable' | 'composite';\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   * Enables column resizing\n   */\n  resizableColumns?: boolean;\n\n  compositeRowTabsterAttribute: TabsterDOMAttribute;\n};\n\n/**\n * DataGrid Props\n */\nexport type DataGridProps = TableProps &\n  Pick<DataGridContextValue, 'items' | 'columns' | 'getRowId'> &\n  Pick<Partial<DataGridContextValue>, 'focusMode' | 'subtleSelection' | 'selectionAppearance' | 'resizableColumns'> &\n  Pick<UseTableSortOptions, 'sortState' | 'defaultSortState'> &\n  Pick<SelectionHookParams, '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     * Options for column resizing\n     */\n    columnSizingOptions?: TableColumnSizingOptions;\n    /**\n     * A callback triggered when a column is resized.\n     */\n    onColumnResize?: (\n      e: KeyboardEvent | TouchEvent | MouseEvent | undefined,\n      data: { columnId: TableColumnId; width: number },\n    ) => void;\n    /**\n     * For column resizing. Allows for a container size to be adjusted by a number of pixels, to make\n     * sure the columns don't overflow the table.\n     * By default, this value is calculated internally based on other props, but can be overriden.\n     */\n    containerWidthOffset?: number;\n  };\n\n/**\n * State used in rendering DataGrid\n */\nexport type DataGridState = TableState & { tableState: TableFeaturesState<unknown> } & Pick<\n    DataGridContextValue,\n    | 'focusMode'\n    | 'selectableRows'\n    | 'subtleSelection'\n    | 'selectionAppearance'\n    | 'getRowId'\n    | 'resizableColumns'\n    | 'compositeRowTabsterAttribute'\n  >;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/DataGrid/useDataGrid.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';
 import { useTable_unstable } from '../Table/useTable';
-import { useTableFeatures, useTableSort, useTableSelection, useTableColumnSizing_unstable } from '../../hooks';
-import { CELL_WIDTH } from '../TableSelectionCell';
 import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
 import { End, Home } from '@fluentui/keyboard-keys';
+import { useTableFeatures, useTableSort, useTableSelection, useTableColumnSizing_unstable, useTableCompositeNavigation } from '../../hooks';
+import { CELL_WIDTH } from '../TableSelectionCell';
 /**
  * Create the state required to render DataGrid.
  *
@@ -16,10 +16,10 @@ import { End, Home } from '@fluentui/keyboard-keys';
  */ export const useDataGrid_unstable = (props, ref)=>{
     const { items , columns , focusMode ='cell' , selectionMode , onSortChange , onSelectionChange , defaultSortState , sortState , selectedItems , defaultSelectedItems , subtleSelection =false , selectionAppearance ='brand' , getRowId , resizableColumns , columnSizingOptions , onColumnResize , containerWidthOffset  } = props;
     const widthOffset = containerWidthOffset !== null && containerWidthOffset !== void 0 ? containerWidthOffset : selectionMode ? -CELL_WIDTH : 0;
-    const navigable = focusMode !== 'none';
-    const keyboardNavAttr = useArrowNavigationGroup({
+    const gridTabsterAttribute = useArrowNavigationGroup({
         axis: 'grid'
     });
+    const { onTableKeyDown: onCompositeKeyDown , tableTabsterAttribute: compositeTabsterAttribute , tableRowTabsterAttribute: compositeRowTabsterAttribute  } = useTableCompositeNavigation();
     const tableState = useTableFeatures({
         items,
         columns,
@@ -49,6 +49,8 @@ import { End, Home } from '@fluentui/keyboard-keys';
     const onKeyDown = useEventCallback((e)=>{
         var _props_onKeyDown;
         (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, e);
+        focusMode === 'composite' && onCompositeKeyDown(e);
+        // handle ctrl+home and ctrl+end
         if (!innerRef.current || !e.ctrlKey || e.defaultPrevented) {
             return;
         }
@@ -72,7 +74,8 @@ import { End, Home } from '@fluentui/keyboard-keys';
         role: 'grid',
         as: 'div',
         noNativeElements: true,
-        ...navigable && keyboardNavAttr,
+        ...focusMode === 'cell' && gridTabsterAttribute,
+        ...focusMode === 'composite' && compositeTabsterAttribute,
         ...props,
         onKeyDown
     }, useMergedRefs(ref, tableState.tableRef, innerRef));
@@ -83,6 +86,7 @@ import { End, Home } from '@fluentui/keyboard-keys';
         selectableRows: !!selectionMode,
         subtleSelection,
         selectionAppearance,
-        resizableColumns
+        resizableColumns,
+        compositeRowTabsterAttribute
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useDataGrid.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport type { DataGridProps, DataGridState } from './DataGrid.types';\nimport { useTable_unstable } from '../Table/useTable';\nimport { useTableFeatures, useTableSort, useTableSelection, useTableColumnSizing_unstable } from '../../hooks';\nimport { CELL_WIDTH } from '../TableSelectionCell';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { End, Home } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render DataGrid.\n *\n * The returned state can be modified with hooks such as useDataGridStyles_unstable,\n * before being passed to renderDataGrid_unstable.\n *\n * @param props - props from this instance of DataGrid\n * @param ref - reference to root HTMLElement of DataGrid\n */\nexport const useDataGrid_unstable = (props: DataGridProps, ref: React.Ref<HTMLElement>): DataGridState => {\n  const {\n    items,\n    columns,\n    focusMode = 'cell',\n    selectionMode,\n    onSortChange,\n    onSelectionChange,\n    defaultSortState,\n    sortState,\n    selectedItems,\n    defaultSelectedItems,\n    subtleSelection = false,\n    selectionAppearance = 'brand',\n    getRowId,\n    resizableColumns,\n    columnSizingOptions,\n    onColumnResize,\n    containerWidthOffset,\n  } = props;\n\n  const widthOffset = containerWidthOffset ?? (selectionMode ? -CELL_WIDTH : 0);\n\n  const navigable = focusMode !== 'none';\n  const keyboardNavAttr = useArrowNavigationGroup({\n    axis: 'grid',\n  });\n\n  const tableState = useTableFeatures({ items, columns, getRowId }, [\n    useTableSort({\n      defaultSortState,\n      sortState,\n      onSortChange,\n    }),\n    useTableSelection({\n      defaultSelectedItems,\n      selectedItems,\n      onSelectionChange,\n      selectionMode: selectionMode ?? 'multiselect',\n    }),\n    useTableColumnSizing_unstable({\n      onColumnResize,\n      columnSizingOptions,\n      // The selection cell is not part of the columns, therefore its width needs to be subtracted\n      // from the container to make sure the columns don't overflow the table.\n      containerWidthOffset: widthOffset,\n    }),\n  ]);\n\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const { findFirstFocusable, findLastFocusable } = useFocusFinders();\n  const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLTableElement>) => {\n    props.onKeyDown?.(e);\n    if (!innerRef.current || !e.ctrlKey || e.defaultPrevented) {\n      return;\n    }\n\n    if (e.key === Home) {\n      const firstRow = innerRef.current.querySelector('[role=\"row\"]') as HTMLElement | null;\n      if (firstRow) {\n        findFirstFocusable(firstRow)?.focus();\n      }\n    }\n\n    if (e.key === End) {\n      const rows = innerRef.current.querySelectorAll('[role=\"row\"]');\n      if (rows.length) {\n        const lastRow = rows.item(rows.length - 1);\n        findLastFocusable(lastRow as HTMLElement)?.focus();\n      }\n    }\n  });\n\n  const baseTableState = useTable_unstable(\n    {\n      role: 'grid',\n      as: 'div',\n      noNativeElements: true,\n      ...(navigable && keyboardNavAttr),\n      ...props,\n      onKeyDown,\n    },\n    useMergedRefs(ref, tableState.tableRef, innerRef),\n  );\n\n  return {\n    ...baseTableState,\n    focusMode,\n    tableState,\n    selectableRows: !!selectionMode,\n    subtleSelection,\n    selectionAppearance,\n    resizableColumns,\n  };\n};\n"],"names":["React","useArrowNavigationGroup","useFocusFinders","useTable_unstable","useTableFeatures","useTableSort","useTableSelection","useTableColumnSizing_unstable","CELL_WIDTH","useEventCallback","useMergedRefs","End","Home","useDataGrid_unstable","props","ref","items","columns","focusMode","selectionMode","onSortChange","onSelectionChange","defaultSortState","sortState","selectedItems","defaultSelectedItems","subtleSelection","selectionAppearance","getRowId","resizableColumns","columnSizingOptions","onColumnResize","containerWidthOffset","widthOffset","navigable","keyboardNavAttr","axis","tableState","innerRef","useRef","findFirstFocusable","findLastFocusable","onKeyDown","e","current","ctrlKey","defaultPrevented","key","firstRow","querySelector","focus","rows","querySelectorAll","length","lastRow","item","baseTableState","role","as","noNativeElements","tableRef","selectableRows"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,EAAEC,eAAe,QAAQ,0BAA0B;AAEnF,SAASC,iBAAiB,QAAQ,oBAAoB;AACtD,SAASC,gBAAgB,EAAEC,YAAY,EAAEC,iBAAiB,EAAEC,6BAA6B,QAAQ,cAAc;AAC/G,SAASC,UAAU,QAAQ,wBAAwB;AACnD,SAASC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAC5E,SAASC,GAAG,EAAEC,IAAI,QAAQ,0BAA0B;AAEpD;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC,MAA+C;IACxG,MAAM,EACJC,MAAK,EACLC,QAAO,EACPC,WAAY,OAAM,EAClBC,cAAa,EACbC,aAAY,EACZC,kBAAiB,EACjBC,iBAAgB,EAChBC,UAAS,EACTC,cAAa,EACbC,qBAAoB,EACpBC,iBAAkB,KAAK,CAAA,EACvBC,qBAAsB,QAAO,EAC7BC,SAAQ,EACRC,iBAAgB,EAChBC,oBAAmB,EACnBC,eAAc,EACdC,qBAAoB,EACrB,GAAGlB;IAEJ,MAAMmB,cAAcD,iCAAAA,kCAAAA,uBAAyBb,gBAAgB,CAACX,aAAa,CAAC,AAAC;IAE7E,MAAM0B,YAAYhB,cAAc;IAChC,MAAMiB,kBAAkBlC,wBAAwB;QAC9CmC,MAAM;IACR;IAEA,MAAMC,aAAajC,iBAAiB;QAAEY;QAAOC;QAASW;IAAS,GAAG;QAChEvB,aAAa;YACXiB;YACAC;YACAH;QACF;QACAd,kBAAkB;YAChBmB;YACAD;YACAH;YACAF,eAAeA,0BAAAA,2BAAAA,gBAAiB,aAAa;QAC/C;QACAZ,8BAA8B;YAC5BwB;YACAD;YACA,4FAA4F;YAC5F,wEAAwE;YACxEE,sBAAsBC;QACxB;KACD;IAED,MAAMK,WAAWtC,MAAMuC,MAAM,CAAiB,IAAI;IAClD,MAAM,EAAEC,mBAAkB,EAAEC,kBAAiB,EAAE,GAAGvC;IAClD,MAAMwC,YAAYjC,iBAAiB,CAACkC,IAA6C;YAC/E7B;QAAAA,CAAAA,mBAAAA,MAAM4B,SAAS,cAAf5B,8BAAAA,KAAAA,IAAAA,iBAAAA,KAAAA,OAAkB6B;QAClB,IAAI,CAACL,SAASM,OAAO,IAAI,CAACD,EAAEE,OAAO,IAAIF,EAAEG,gBAAgB,EAAE;YACzD;QACF,CAAC;QAED,IAAIH,EAAEI,GAAG,KAAKnC,MAAM;YAClB,MAAMoC,WAAWV,SAASM,OAAO,CAACK,aAAa,CAAC;YAChD,IAAID,UAAU;oBACZR;gBAAAA,CAAAA,sBAAAA,mBAAmBQ,uBAAnBR,iCAAAA,KAAAA,IAAAA,oBAA8BU;YAChC,CAAC;QACH,CAAC;QAED,IAAIP,EAAEI,GAAG,KAAKpC,KAAK;YACjB,MAAMwC,OAAOb,SAASM,OAAO,CAACQ,gBAAgB,CAAC;YAC/C,IAAID,KAAKE,MAAM,EAAE;oBAEfZ;gBADA,MAAMa,UAAUH,KAAKI,IAAI,CAACJ,KAAKE,MAAM,GAAG;gBACxCZ,CAAAA,qBAAAA,kBAAkBa,sBAAlBb,gCAAAA,KAAAA,IAAAA,mBAA2CS;YAC7C,CAAC;QACH,CAAC;IACH;IAEA,MAAMM,iBAAiBrD,kBACrB;QACEsD,MAAM;QACNC,IAAI;QACJC,kBAAkB,IAAI;QACtB,GAAIzB,aAAaC,eAAe;QAChC,GAAGrB,KAAK;QACR4B;IACF,GACAhC,cAAcK,KAAKsB,WAAWuB,QAAQ,EAAEtB;IAG1C,OAAO;QACL,GAAGkB,cAAc;QACjBtC;QACAmB;QACAwB,gBAAgB,CAAC,CAAC1C;QAClBO;QACAC;QACAE;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDataGrid.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport type { DataGridProps, DataGridState } from './DataGrid.types';\nimport { useTable_unstable } from '../Table/useTable';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { End, Home } from '@fluentui/keyboard-keys';\nimport {\n  useTableFeatures,\n  useTableSort,\n  useTableSelection,\n  useTableColumnSizing_unstable,\n  useTableCompositeNavigation,\n} from '../../hooks';\nimport { CELL_WIDTH } from '../TableSelectionCell';\n\n/**\n * Create the state required to render DataGrid.\n *\n * The returned state can be modified with hooks such as useDataGridStyles_unstable,\n * before being passed to renderDataGrid_unstable.\n *\n * @param props - props from this instance of DataGrid\n * @param ref - reference to root HTMLElement of DataGrid\n */\nexport const useDataGrid_unstable = (props: DataGridProps, ref: React.Ref<HTMLElement>): DataGridState => {\n  const {\n    items,\n    columns,\n    focusMode = 'cell',\n    selectionMode,\n    onSortChange,\n    onSelectionChange,\n    defaultSortState,\n    sortState,\n    selectedItems,\n    defaultSelectedItems,\n    subtleSelection = false,\n    selectionAppearance = 'brand',\n    getRowId,\n    resizableColumns,\n    columnSizingOptions,\n    onColumnResize,\n    containerWidthOffset,\n  } = props;\n\n  const widthOffset = containerWidthOffset ?? (selectionMode ? -CELL_WIDTH : 0);\n\n  const gridTabsterAttribute = useArrowNavigationGroup({\n    axis: 'grid',\n  });\n\n  const {\n    onTableKeyDown: onCompositeKeyDown,\n    tableTabsterAttribute: compositeTabsterAttribute,\n    tableRowTabsterAttribute: compositeRowTabsterAttribute,\n  } = useTableCompositeNavigation();\n\n  const tableState = useTableFeatures({ items, columns, getRowId }, [\n    useTableSort({\n      defaultSortState,\n      sortState,\n      onSortChange,\n    }),\n    useTableSelection({\n      defaultSelectedItems,\n      selectedItems,\n      onSelectionChange,\n      selectionMode: selectionMode ?? 'multiselect',\n    }),\n    useTableColumnSizing_unstable({\n      onColumnResize,\n      columnSizingOptions,\n      // The selection cell is not part of the columns, therefore its width needs to be subtracted\n      // from the container to make sure the columns don't overflow the table.\n      containerWidthOffset: widthOffset,\n    }),\n  ]);\n\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const { findFirstFocusable, findLastFocusable } = useFocusFinders();\n  const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLTableElement>) => {\n    props.onKeyDown?.(e);\n    focusMode === 'composite' && onCompositeKeyDown(e);\n\n    // handle ctrl+home and ctrl+end\n    if (!innerRef.current || !e.ctrlKey || e.defaultPrevented) {\n      return;\n    }\n\n    if (e.key === Home) {\n      const firstRow = innerRef.current.querySelector('[role=\"row\"]') as HTMLElement | null;\n      if (firstRow) {\n        findFirstFocusable(firstRow)?.focus();\n      }\n    }\n\n    if (e.key === End) {\n      const rows = innerRef.current.querySelectorAll('[role=\"row\"]');\n      if (rows.length) {\n        const lastRow = rows.item(rows.length - 1);\n        findLastFocusable(lastRow as HTMLElement)?.focus();\n      }\n    }\n  });\n\n  const baseTableState = useTable_unstable(\n    {\n      role: 'grid',\n      as: 'div',\n      noNativeElements: true,\n      ...(focusMode === 'cell' && gridTabsterAttribute),\n      ...(focusMode === 'composite' && compositeTabsterAttribute),\n      ...props,\n      onKeyDown,\n    },\n    useMergedRefs(ref, tableState.tableRef, innerRef),\n  );\n\n  return {\n    ...baseTableState,\n    focusMode,\n    tableState,\n    selectableRows: !!selectionMode,\n    subtleSelection,\n    selectionAppearance,\n    resizableColumns,\n    compositeRowTabsterAttribute,\n  };\n};\n"],"names":["React","useArrowNavigationGroup","useFocusFinders","useTable_unstable","useEventCallback","useMergedRefs","End","Home","useTableFeatures","useTableSort","useTableSelection","useTableColumnSizing_unstable","useTableCompositeNavigation","CELL_WIDTH","useDataGrid_unstable","props","ref","items","columns","focusMode","selectionMode","onSortChange","onSelectionChange","defaultSortState","sortState","selectedItems","defaultSelectedItems","subtleSelection","selectionAppearance","getRowId","resizableColumns","columnSizingOptions","onColumnResize","containerWidthOffset","widthOffset","gridTabsterAttribute","axis","onTableKeyDown","onCompositeKeyDown","tableTabsterAttribute","compositeTabsterAttribute","tableRowTabsterAttribute","compositeRowTabsterAttribute","tableState","innerRef","useRef","findFirstFocusable","findLastFocusable","onKeyDown","e","current","ctrlKey","defaultPrevented","key","firstRow","querySelector","focus","rows","querySelectorAll","length","lastRow","item","baseTableState","role","as","noNativeElements","tableRef","selectableRows"],"mappings":"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"}

package/lib/components/DataGrid/useDataGridContextValues.js

@@ -1,15 +1,17 @@
 import { useTableContextValues_unstable } from '../Table/useTableContextValues';
 export function useDataGridContextValues_unstable(state) {
     const tableContextValues = useTableContextValues_unstable(state);
+    const { tableState , focusMode , selectableRows , subtleSelection , selectionAppearance , resizableColumns , compositeRowTabsterAttribute  } = state;
     return {
         ...tableContextValues,
         dataGrid: {
-            ...state.tableState,
-            focusMode: state.focusMode,
-            selectableRows: state.selectableRows,
-            subtleSelection: state.subtleSelection,
-            selectionAppearance: state.selectionAppearance,
-            resizableColumns: state.resizableColumns
+            ...tableState,
+            focusMode,
+            selectableRows,
+            subtleSelection,
+            selectionAppearance,
+            resizableColumns,
+            compositeRowTabsterAttribute
         }
     };
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["useDataGridContextValues.ts"],"sourcesContent":["import { useTableContextValues_unstable } from '../Table/useTableContextValues';\nimport { DataGridContextValues, DataGridState } from './DataGrid.types';\n\nexport function useDataGridContextValues_unstable(state: DataGridState): DataGridContextValues {\n  const tableContextValues = useTableContextValues_unstable(state);\n  return {\n    ...tableContextValues,\n    dataGrid: {\n      ...state.tableState,\n      focusMode: state.focusMode,\n      selectableRows: state.selectableRows,\n      subtleSelection: state.subtleSelection,\n      selectionAppearance: state.selectionAppearance,\n      resizableColumns: state.resizableColumns,\n    },\n  };\n}\n"],"names":["useTableContextValues_unstable","useDataGridContextValues_unstable","state","tableContextValues","dataGrid","tableState","focusMode","selectableRows","subtleSelection","selectionAppearance","resizableColumns"],"mappings":"AAAA,SAASA,8BAA8B,QAAQ,iCAAiC;AAGhF,OAAO,SAASC,kCAAkCC,KAAoB,EAAyB;IAC7F,MAAMC,qBAAqBH,+BAA+BE;IAC1D,OAAO;QACL,GAAGC,kBAAkB;QACrBC,UAAU;YACR,GAAGF,MAAMG,UAAU;YACnBC,WAAWJ,MAAMI,SAAS;YAC1BC,gBAAgBL,MAAMK,cAAc;YACpCC,iBAAiBN,MAAMM,eAAe;YACtCC,qBAAqBP,MAAMO,mBAAmB;YAC9CC,kBAAkBR,MAAMQ,gBAAgB;QAC1C;IACF;AACF,CAAC"}
+{"version":3,"sources":["useDataGridContextValues.ts"],"sourcesContent":["import { useTableContextValues_unstable } from '../Table/useTableContextValues';\nimport { DataGridContextValues, DataGridState } from './DataGrid.types';\n\nexport function useDataGridContextValues_unstable(state: DataGridState): DataGridContextValues {\n  const tableContextValues = useTableContextValues_unstable(state);\n  const {\n    tableState,\n    focusMode,\n    selectableRows,\n    subtleSelection,\n    selectionAppearance,\n    resizableColumns,\n    compositeRowTabsterAttribute,\n  } = state;\n  return {\n    ...tableContextValues,\n    dataGrid: {\n      ...tableState,\n      focusMode,\n      selectableRows,\n      subtleSelection,\n      selectionAppearance,\n      resizableColumns,\n      compositeRowTabsterAttribute,\n    },\n  };\n}\n"],"names":["useTableContextValues_unstable","useDataGridContextValues_unstable","state","tableContextValues","tableState","focusMode","selectableRows","subtleSelection","selectionAppearance","resizableColumns","compositeRowTabsterAttribute","dataGrid"],"mappings":"AAAA,SAASA,8BAA8B,QAAQ,iCAAiC;AAGhF,OAAO,SAASC,kCAAkCC,KAAoB,EAAyB;IAC7F,MAAMC,qBAAqBH,+BAA+BE;IAC1D,MAAM,EACJE,WAAU,EACVC,UAAS,EACTC,eAAc,EACdC,gBAAe,EACfC,oBAAmB,EACnBC,iBAAgB,EAChBC,6BAA4B,EAC7B,GAAGR;IACJ,OAAO;QACL,GAAGC,kBAAkB;QACrBQ,UAAU;YACR,GAAGP,UAAU;YACbC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF;IACF;AACF,CAAC"}

package/lib/components/DataGridCell/useDataGridCell.js

@@ -14,7 +14,7 @@ import { useColumnIdContext } from '../../contexts/columnIdContext';
  */ export const useDataGridCell_unstable = (props, ref)=>{
     const { focusMode  } = props;
     const columnId = useColumnIdContext();
-    const tabbable = useDataGridContext_unstable((ctx)=>ctx.focusMode === 'cell');
+    const tabbable = useDataGridContext_unstable((ctx)=>ctx.focusMode === 'cell' || ctx.focusMode === 'composite');
     const resizableColumns = useDataGridContext_unstable((ctx)=>ctx.resizableColumns);
     const columnSizing = useDataGridContext_unstable((ctx)=>ctx.columnSizing_unstable);
     const focusableGroupAttr = useFocusableGroup({

package/lib/components/DataGridCell/useDataGridCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDataGridCell.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport type { DataGridCellProps, DataGridCellState } from './DataGridCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useColumnIdContext } from '../../contexts/columnIdContext';\n\n/**\n * Create the state required to render DataGridCell.\n *\n * The returned state can be modified with hooks such as useDataGridCellStyles_unstable,\n * before being passed to renderDataGridCell_unstable.\n *\n * @param props - props from this instance of DataGridCell\n * @param ref - reference to root HTMLElement of DataGridCell\n */\nexport const useDataGridCell_unstable = (props: DataGridCellProps, ref: React.Ref<HTMLElement>): DataGridCellState => {\n  const { focusMode } = props;\n  const columnId = useColumnIdContext();\n  const tabbable = useDataGridContext_unstable(ctx => ctx.focusMode === 'cell');\n  const resizableColumns = useDataGridContext_unstable(ctx => ctx.resizableColumns);\n  const columnSizing = useDataGridContext_unstable(ctx => ctx.columnSizing_unstable);\n  const focusableGroupAttr = useFocusableGroup({ tabBehavior: 'limited-trap-focus' });\n  return useTableCell_unstable(\n    {\n      as: 'div',\n      role: 'gridcell',\n      ...(focusMode && focusableGroupAttr),\n      tabIndex: tabbable ? 0 : undefined,\n      ...(resizableColumns ? columnSizing.getTableCellProps(columnId) : {}),\n      ...props,\n    },\n    ref,\n  );\n};\n"],"names":["React","useFocusableGroup","useTableCell_unstable","useDataGridContext_unstable","useColumnIdContext","useDataGridCell_unstable","props","ref","focusMode","columnId","tabbable","ctx","resizableColumns","columnSizing","columnSizing_unstable","focusableGroupAttr","tabBehavior","as","role","tabIndex","undefined","getTableCellProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,0BAA0B;AAE5D,SAASC,qBAAqB,QAAQ,4BAA4B;AAClE,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC,MAAmD;IACpH,MAAM,EAAEC,UAAS,EAAE,GAAGF;IACtB,MAAMG,WAAWL;IACjB,MAAMM,WAAWP,4BAA4BQ,CAAAA,MAAOA,IAAIH,SAAS,KAAK;IACtE,MAAMI,mBAAmBT,4BAA4BQ,CAAAA,MAAOA,IAAIC,gBAAgB;IAChF,MAAMC,eAAeV,4BAA4BQ,CAAAA,MAAOA,IAAIG,qBAAqB;IACjF,MAAMC,qBAAqBd,kBAAkB;QAAEe,aAAa;IAAqB;IACjF,OAAOd,sBACL;QACEe,IAAI;QACJC,MAAM;QACN,GAAIV,aAAaO,kBAAkB;QACnCI,UAAUT,WAAW,IAAIU,SAAS;QAClC,GAAIR,mBAAmBC,aAAaQ,iBAAiB,CAACZ,YAAY,CAAC,CAAC;QACpE,GAAGH,KAAK;IACV,GACAC;AAEJ,EAAE"}
+{"version":3,"sources":["useDataGridCell.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport type { DataGridCellProps, DataGridCellState } from './DataGridCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useColumnIdContext } from '../../contexts/columnIdContext';\n\n/**\n * Create the state required to render DataGridCell.\n *\n * The returned state can be modified with hooks such as useDataGridCellStyles_unstable,\n * before being passed to renderDataGridCell_unstable.\n *\n * @param props - props from this instance of DataGridCell\n * @param ref - reference to root HTMLElement of DataGridCell\n */\nexport const useDataGridCell_unstable = (props: DataGridCellProps, ref: React.Ref<HTMLElement>): DataGridCellState => {\n  const { focusMode } = props;\n  const columnId = useColumnIdContext();\n  const tabbable = useDataGridContext_unstable(ctx => ctx.focusMode === 'cell' || ctx.focusMode === 'composite');\n  const resizableColumns = useDataGridContext_unstable(ctx => ctx.resizableColumns);\n  const columnSizing = useDataGridContext_unstable(ctx => ctx.columnSizing_unstable);\n  const focusableGroupAttr = useFocusableGroup({ tabBehavior: 'limited-trap-focus' });\n  return useTableCell_unstable(\n    {\n      as: 'div',\n      role: 'gridcell',\n      ...(focusMode && focusableGroupAttr),\n      tabIndex: tabbable ? 0 : undefined,\n      ...(resizableColumns ? columnSizing.getTableCellProps(columnId) : {}),\n      ...props,\n    },\n    ref,\n  );\n};\n"],"names":["React","useFocusableGroup","useTableCell_unstable","useDataGridContext_unstable","useColumnIdContext","useDataGridCell_unstable","props","ref","focusMode","columnId","tabbable","ctx","resizableColumns","columnSizing","columnSizing_unstable","focusableGroupAttr","tabBehavior","as","role","tabIndex","undefined","getTableCellProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,0BAA0B;AAE5D,SAASC,qBAAqB,QAAQ,4BAA4B;AAClE,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC,MAAmD;IACpH,MAAM,EAAEC,UAAS,EAAE,GAAGF;IACtB,MAAMG,WAAWL;IACjB,MAAMM,WAAWP,4BAA4BQ,CAAAA,MAAOA,IAAIH,SAAS,KAAK,UAAUG,IAAIH,SAAS,KAAK;IAClG,MAAMI,mBAAmBT,4BAA4BQ,CAAAA,MAAOA,IAAIC,gBAAgB;IAChF,MAAMC,eAAeV,4BAA4BQ,CAAAA,MAAOA,IAAIG,qBAAqB;IACjF,MAAMC,qBAAqBd,kBAAkB;QAAEe,aAAa;IAAqB;IACjF,OAAOd,sBACL;QACEe,IAAI;QACJC,MAAM;QACN,GAAIV,aAAaO,kBAAkB;QACnCI,UAAUT,WAAW,IAAIU,SAAS;QAClC,GAAIR,mBAAmBC,aAAaQ,iBAAiB,CAACZ,YAAY,CAAC,CAAC;QACpE,GAAGH,KAAK;IACV,GACAC;AAEJ,EAAE"}

package/lib/components/DataGridRow/useDataGridRow.js

@@ -20,7 +20,9 @@ import { useIsInTableHeader } from '../../contexts/tableHeaderContext';
     const columnDefs = useDataGridContext_unstable((ctx)=>ctx.columns);
     const selectable = useDataGridContext_unstable((ctx)=>ctx.selectableRows);
     const selected = useDataGridContext_unstable((ctx)=>ctx.selection.isRowSelected(rowId));
-    const tabbable = useDataGridContext_unstable((ctx)=>ctx.focusMode === 'row_unstable');
+    const focusMode = useDataGridContext_unstable((ctx)=>ctx.focusMode);
+    const compositeRowTabsterAttribute = useDataGridContext_unstable((ctx)=>ctx.compositeRowTabsterAttribute);
+    const tabbable = focusMode === 'row_unstable' || focusMode === 'composite';
     const appearance = useDataGridContext_unstable((ctx)=>{
         if (!isHeader && selectable && ctx.selection.isRowSelected(rowId)) {
             return ctx.selectionAppearance;
@@ -48,12 +50,13 @@ import { useIsInTableHeader } from '../../contexts/tableHeaderContext';
     const baseState = useTableRow_unstable({
         appearance,
         'aria-selected': selectable ? selected : undefined,
+        tabIndex: tabbable && !isHeader ? 0 : undefined,
+        ...focusMode === 'composite' && !isHeader && compositeRowTabsterAttribute,
         ...props,
         onClick,
         onKeyDown,
         children: null,
-        as: 'div',
-        tabIndex: tabbable && !isHeader ? 0 : undefined
+        as: 'div'
     }, ref);
     return {
         ...baseState,

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

@@ -1 +1 @@
-{"version":3,"sources":["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  const dataGridContextValue = useDataGridContext_unstable(ctx => ctx);\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    dataGridContextValue,\n  };\n};\n"],"names":["React","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","dataGridContextValue","onClick","e","onKeyDown","key","target","preventDefault","baseState","undefined","children","as","tabIndex","components","selectionCell","required","renderCell"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,gBAAgB,QAAQ,4BAA4B;AACzG,SAASC,KAAK,QAAQ,0BAA0B;AAEhD,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,qBAAqB,QAAQ,iDAAiD;AACvF,SAASC,oBAAoB,QAAQ,8BAA8B;AACnE,SAASC,kBAAkB,QAAQ,oCAAoC;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC,MAAkD;IACjH,MAAMC,QAAQL;IACd,MAAMM,WAAWL;IACjB,MAAMM,aAAaT,4BAA4BU,CAAAA,MAAOA,IAAIC,OAAO;IACjE,MAAMC,aAAaZ,4BAA4BU,CAAAA,MAAOA,IAAIG,cAAc;IACxE,MAAMC,WAAWd,4BAA4BU,CAAAA,MAAOA,IAAIK,SAAS,CAACC,aAAa,CAACT;IAChF,MAAMU,WAAWjB,4BAA4BU,CAAAA,MAAOA,IAAIQ,SAAS,KAAK;IACtE,MAAMC,aAAanB,4BAA4BU,CAAAA,MAAO;QACpD,IAAI,CAACF,YAAYI,cAAcF,IAAIK,SAAS,CAACC,aAAa,CAACT,QAAQ;YACjE,OAAOG,IAAIU,mBAAmB;QAChC,CAAC;QAED,OAAO;IACT;IACA,MAAMC,YAAYrB,4BAA4BU,CAAAA,MAAOA,IAAIK,SAAS,CAACM,SAAS;IAC5E,MAAMC,uBAAuBtB,4BAA4BU,CAAAA,MAAOA;IAEhE,MAAMa,UAAU3B,iBAAiB,CAAC4B,IAA6C;YAK7EnB;QAJA,IAAIO,cAAc,CAACJ,UAAU;YAC3Ba,UAAUG,GAAGjB;QACf,CAAC;QAEDF,CAAAA,iBAAAA,MAAMkB,OAAO,cAAblB,4BAAAA,KAAAA,IAAAA,eAAAA,KAAAA,OAAgBmB;IAClB;IAEA,MAAMC,YAAY7B,iBAAiB,CAAC4B,IAAgD;YAOlFnB;QANA,IAAIO,cAAc,CAACJ,YAAYgB,EAAEE,GAAG,KAAK5B,SAAS,CAACH,yBAAyB6B,EAAEG,MAAM,GAAkB;YACpG,iBAAiB;YACjBH,EAAEI,cAAc;YAChBP,UAAUG,GAAGjB;QACf,CAAC;QAEDF,CAAAA,mBAAAA,MAAMoB,SAAS,cAAfpB,8BAAAA,KAAAA,IAAAA,iBAAAA,KAAAA,OAAkBmB;IACpB;IAEA,MAAMK,YAAY9B,qBAChB;QACEoB;QACA,iBAAiBP,aAAaE,WAAWgB,SAAS;QAClD,GAAGzB,KAAK;QACRkB;QACAE;QACAM,UAAU,IAAI;QACdC,IAAI;QACJC,UAAUhB,YAAY,CAACT,WAAW,IAAIsB,SAAS;IACjD,GACAxB;IAGF,OAAO;QACL,GAAGuB,SAAS;QACZK,YAAY;YACV,GAAGL,UAAUK,UAAU;YACvBC,eAAelC;QACjB;QACAkC,eAAetC,iBAAiBQ,MAAM8B,aAAa,EAAE;YAAEC,UAAUxB;QAAW;QAC5EyB,YAAYhC,MAAM0B,QAAQ;QAC1BtB;QACAa;IACF;AACF,EAAE"}
+{"version":3,"sources":["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 focusMode = useDataGridContext_unstable(ctx => ctx.focusMode);\n  const compositeRowTabsterAttribute = useDataGridContext_unstable(ctx => ctx.compositeRowTabsterAttribute);\n  const tabbable = focusMode === 'row_unstable' || focusMode === 'composite';\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  const dataGridContextValue = useDataGridContext_unstable(ctx => ctx);\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      tabIndex: tabbable && !isHeader ? 0 : undefined,\n      ...(focusMode === 'composite' && !isHeader && compositeRowTabsterAttribute),\n      ...props,\n      onClick,\n      onKeyDown,\n      children: null,\n      as: 'div',\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    dataGridContextValue,\n  };\n};\n"],"names":["React","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","focusMode","compositeRowTabsterAttribute","tabbable","appearance","selectionAppearance","toggleRow","dataGridContextValue","onClick","e","onKeyDown","key","target","preventDefault","baseState","undefined","tabIndex","children","as","components","selectionCell","required","renderCell"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,gBAAgB,QAAQ,4BAA4B;AACzG,SAASC,KAAK,QAAQ,0BAA0B;AAEhD,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,qBAAqB,QAAQ,iDAAiD;AACvF,SAASC,oBAAoB,QAAQ,8BAA8B;AACnE,SAASC,kBAAkB,QAAQ,oCAAoC;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC,MAAkD;IACjH,MAAMC,QAAQL;IACd,MAAMM,WAAWL;IACjB,MAAMM,aAAaT,4BAA4BU,CAAAA,MAAOA,IAAIC,OAAO;IACjE,MAAMC,aAAaZ,4BAA4BU,CAAAA,MAAOA,IAAIG,cAAc;IACxE,MAAMC,WAAWd,4BAA4BU,CAAAA,MAAOA,IAAIK,SAAS,CAACC,aAAa,CAACT;IAChF,MAAMU,YAAYjB,4BAA4BU,CAAAA,MAAOA,IAAIO,SAAS;IAClE,MAAMC,+BAA+BlB,4BAA4BU,CAAAA,MAAOA,IAAIQ,4BAA4B;IACxG,MAAMC,WAAWF,cAAc,kBAAkBA,cAAc;IAC/D,MAAMG,aAAapB,4BAA4BU,CAAAA,MAAO;QACpD,IAAI,CAACF,YAAYI,cAAcF,IAAIK,SAAS,CAACC,aAAa,CAACT,QAAQ;YACjE,OAAOG,IAAIW,mBAAmB;QAChC,CAAC;QAED,OAAO;IACT;IACA,MAAMC,YAAYtB,4BAA4BU,CAAAA,MAAOA,IAAIK,SAAS,CAACO,SAAS;IAC5E,MAAMC,uBAAuBvB,4BAA4BU,CAAAA,MAAOA;IAEhE,MAAMc,UAAU5B,iBAAiB,CAAC6B,IAA6C;YAK7EpB;QAJA,IAAIO,cAAc,CAACJ,UAAU;YAC3Bc,UAAUG,GAAGlB;QACf,CAAC;QAEDF,CAAAA,iBAAAA,MAAMmB,OAAO,cAAbnB,4BAAAA,KAAAA,IAAAA,eAAAA,KAAAA,OAAgBoB;IAClB;IAEA,MAAMC,YAAY9B,iBAAiB,CAAC6B,IAAgD;YAOlFpB;QANA,IAAIO,cAAc,CAACJ,YAAYiB,EAAEE,GAAG,KAAK7B,SAAS,CAACH,yBAAyB8B,EAAEG,MAAM,GAAkB;YACpG,iBAAiB;YACjBH,EAAEI,cAAc;YAChBP,UAAUG,GAAGlB;QACf,CAAC;QAEDF,CAAAA,mBAAAA,MAAMqB,SAAS,cAAfrB,8BAAAA,KAAAA,IAAAA,iBAAAA,KAAAA,OAAkBoB;IACpB;IAEA,MAAMK,YAAY/B,qBAChB;QACEqB;QACA,iBAAiBR,aAAaE,WAAWiB,SAAS;QAClDC,UAAUb,YAAY,CAACX,WAAW,IAAIuB,SAAS;QAC/C,GAAId,cAAc,eAAe,CAACT,YAAYU,4BAA4B;QAC1E,GAAGb,KAAK;QACRmB;QACAE;QACAO,UAAU,IAAI;QACdC,IAAI;IACN,GACA5B;IAGF,OAAO;QACL,GAAGwB,SAAS;QACZK,YAAY;YACV,GAAGL,UAAUK,UAAU;YACvBC,eAAenC;QACjB;QACAmC,eAAevC,iBAAiBQ,MAAM+B,aAAa,EAAE;YAAEC,UAAUzB;QAAW;QAC5E0B,YAAYjC,MAAM4B,QAAQ;QAC1BxB;QACAc;IACF;AACF,EAAE"}

package/lib/contexts/dataGridContext.js

@@ -6,7 +6,8 @@ const dataGridContextDefaultValue = {
     subtleSelection: false,
     selectableRows: false,
     selectionAppearance: 'brand',
-    focusMode: 'none'
+    focusMode: 'none',
+    compositeRowTabsterAttribute: {}
 };
 export const DataGridContextProvider = dataGridContext.Provider;
 export const useDataGridContext_unstable = (selector)=>useContextSelector(dataGridContext, (ctx = dataGridContextDefaultValue)=>selector(ctx));

package/lib/contexts/dataGridContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["dataGridContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport { DataGridContextValue } from '../components/DataGrid/DataGrid.types';\nimport { defaultTableState } from '../hooks';\n\nconst dataGridContext = createContext<DataGridContextValue | undefined>(undefined);\n\nconst dataGridContextDefaultValue: DataGridContextValue = {\n  ...defaultTableState,\n  subtleSelection: false,\n  selectableRows: false,\n  selectionAppearance: 'brand',\n  focusMode: 'none',\n};\n\nexport const DataGridContextProvider = dataGridContext.Provider;\n\nexport const useDataGridContext_unstable = <T>(selector: ContextSelector<DataGridContextValue, T>) =>\n  useContextSelector(dataGridContext, (ctx = dataGridContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","defaultTableState","dataGridContext","undefined","dataGridContextDefaultValue","subtleSelection","selectableRows","selectionAppearance","focusMode","DataGridContextProvider","Provider","useDataGridContext_unstable","selector","ctx"],"mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAGrF,SAASC,iBAAiB,QAAQ,WAAW;AAE7C,MAAMC,kBAAkBH,cAAgDI;AAExE,MAAMC,8BAAoD;IACxD,GAAGH,iBAAiB;IACpBI,iBAAiB,KAAK;IACtBC,gBAAgB,KAAK;IACrBC,qBAAqB;IACrBC,WAAW;AACb;AAEA,OAAO,MAAMC,0BAA0BP,gBAAgBQ,QAAQ,CAAC;AAEhE,OAAO,MAAMC,8BAA8B,CAAIC,WAC7CZ,mBAAmBE,iBAAiB,CAACW,MAAMT,2BAA2B,GAAKQ,SAASC,MAAM"}
+{"version":3,"sources":["dataGridContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport { TabsterDOMAttribute } from '@fluentui/react-tabster';\nimport { DataGridContextValue } from '../components/DataGrid/DataGrid.types';\nimport { defaultTableState } from '../hooks';\n\nconst dataGridContext = createContext<DataGridContextValue | undefined>(undefined);\n\nconst dataGridContextDefaultValue: DataGridContextValue = {\n  ...defaultTableState,\n  subtleSelection: false,\n  selectableRows: false,\n  selectionAppearance: 'brand',\n  focusMode: 'none',\n  compositeRowTabsterAttribute: {} as TabsterDOMAttribute,\n};\n\nexport const DataGridContextProvider = dataGridContext.Provider;\n\nexport const useDataGridContext_unstable = <T>(selector: ContextSelector<DataGridContextValue, T>) =>\n  useContextSelector(dataGridContext, (ctx = dataGridContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","defaultTableState","dataGridContext","undefined","dataGridContextDefaultValue","subtleSelection","selectableRows","selectionAppearance","focusMode","compositeRowTabsterAttribute","DataGridContextProvider","Provider","useDataGridContext_unstable","selector","ctx"],"mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,SAASC,iBAAiB,QAAQ,WAAW;AAE7C,MAAMC,kBAAkBH,cAAgDI;AAExE,MAAMC,8BAAoD;IACxD,GAAGH,iBAAiB;IACpBI,iBAAiB,KAAK;IACtBC,gBAAgB,KAAK;IACrBC,qBAAqB;IACrBC,WAAW;IACXC,8BAA8B,CAAC;AACjC;AAEA,OAAO,MAAMC,0BAA0BR,gBAAgBS,QAAQ,CAAC;AAEhE,OAAO,MAAMC,8BAA8B,CAAIC,WAC7Cb,mBAAmBE,iBAAiB,CAACY,MAAMV,2BAA2B,GAAKS,SAASC,MAAM"}

package/lib/hooks/index.js

@@ -4,3 +4,4 @@ export * from './useTableSort';
 export * from './useTableSelection';
 export * from './createColumn';
 export * from './useTableColumnSizing';
+export * from './useTableCompositeNavigation';

package/lib/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './types';\nexport * from './useTableFeatures';\nexport * from './useTableSort';\nexport * from './useTableSelection';\nexport * from './createColumn';\nexport * from './useTableColumnSizing';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,qBAAqB;AACnC,cAAc,iBAAiB;AAC/B,cAAc,sBAAsB;AACpC,cAAc,iBAAiB;AAC/B,cAAc,yBAAyB"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './types';\nexport * from './useTableFeatures';\nexport * from './useTableSort';\nexport * from './useTableSelection';\nexport * from './createColumn';\nexport * from './useTableColumnSizing';\nexport * from './useTableCompositeNavigation';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,qBAAqB;AACnC,cAAc,iBAAiB;AAC/B,cAAc,sBAAsB;AACpC,cAAc,iBAAiB;AAC/B,cAAc,yBAAyB;AACvC,cAAc,gCAAgC"}

package/lib/hooks/useTableCompositeNavigation.js

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { ArrowDown, ArrowRight, Escape, keyCodes, ArrowUp } from '@fluentui/keyboard-keys';
+import { useArrowNavigationGroup, useFocusableGroup, useMergedTabsterAttributes_unstable, useFocusFinders } from '@fluentui/react-tabster';
+import { isHTMLElement } from '@fluentui/react-utilities';
+export function useTableCompositeNavigation() {
+    const horizontalAttr = useArrowNavigationGroup({
+        axis: 'horizontal'
+    });
+    const gridAttr = useArrowNavigationGroup({
+        axis: 'grid'
+    });
+    const groupperAttr = useFocusableGroup({
+        tabBehavior: 'limited-trap-focus'
+    });
+    const { findFirstFocusable  } = useFocusFinders();
+    const { targetDocument  } = useFluent();
+    const rowAttr = useMergedTabsterAttributes_unstable(horizontalAttr, groupperAttr);
+    const onKeyDown = React.useCallback((e)=>{
+        if (!targetDocument) {
+            return;
+        }
+        const activeElement = targetDocument.activeElement;
+        if (!activeElement || !e.currentTarget.contains(activeElement)) {
+            return;
+        }
+        const activeElementRole = activeElement.getAttribute('role');
+        // Enter groupper when in row focus mode to navigate cells
+        if (e.key === ArrowRight && activeElementRole === 'row' && isHTMLElement(activeElement)) {
+            var _findFirstFocusable;
+            (_findFirstFocusable = findFirstFocusable(activeElement)) === null || _findFirstFocusable === void 0 ? void 0 : _findFirstFocusable.focus();
+        }
+        if (activeElementRole === 'row') {
+            return;
+        }
+        const isInCell = (()=>{
+            let cur = isHTMLElement(activeElement) ? activeElement : null;
+            while(cur){
+                const curRole = cur.getAttribute('role');
+                if (curRole === 'cell' || curRole === 'gridcell') {
+                    return true;
+                }
+                cur = cur.parentElement;
+            }
+            return false;
+        })();
+        // Escape groupper focus trap before arrow down
+        if ((e.key === ArrowDown || e.key === ArrowUp) && isInCell) {
+            activeElement.dispatchEvent(new KeyboardEvent('keydown', {
+                key: Escape,
+                keyCode: keyCodes.Escape
+            }));
+            // Tabster uses keycodes
+            // eslint-disable-next-line deprecation/deprecation
+            activeElement.dispatchEvent(new KeyboardEvent('keydown', {
+                key: e.key,
+                keyCode: e.keyCode
+            }));
+        }
+    }, [
+        targetDocument,
+        findFirstFocusable
+    ]);
+    return {
+        onTableKeyDown: onKeyDown,
+        tableTabsterAttribute: gridAttr,
+        tableRowTabsterAttribute: rowAttr
+    };
+}

package/lib/hooks/useTableCompositeNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useTableCompositeNavigation.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { ArrowDown, ArrowRight, Escape, keyCodes, ArrowUp } from '@fluentui/keyboard-keys';\nimport {\n  useArrowNavigationGroup,\n  useFocusableGroup,\n  useMergedTabsterAttributes_unstable,\n  TabsterDOMAttribute,\n  useFocusFinders,\n} from '@fluentui/react-tabster';\nimport { isHTMLElement } from '@fluentui/react-utilities';\n\nexport function useTableCompositeNavigation(): {\n  onTableKeyDown: React.KeyboardEventHandler;\n  tableTabsterAttribute: TabsterDOMAttribute;\n  tableRowTabsterAttribute: TabsterDOMAttribute;\n} {\n  const horizontalAttr = useArrowNavigationGroup({ axis: 'horizontal' });\n  const gridAttr = useArrowNavigationGroup({ axis: 'grid' });\n  const groupperAttr = useFocusableGroup({ tabBehavior: 'limited-trap-focus' });\n  const { findFirstFocusable } = useFocusFinders();\n  const { targetDocument } = useFluent();\n\n  const rowAttr = useMergedTabsterAttributes_unstable(horizontalAttr, groupperAttr);\n\n  const onKeyDown: React.KeyboardEventHandler = React.useCallback(\n    e => {\n      if (!targetDocument) {\n        return;\n      }\n\n      const activeElement = targetDocument.activeElement;\n      if (!activeElement || !e.currentTarget.contains(activeElement)) {\n        return;\n      }\n      const activeElementRole = activeElement.getAttribute('role');\n\n      // Enter groupper when in row focus mode to navigate cells\n      if (e.key === ArrowRight && activeElementRole === 'row' && isHTMLElement(activeElement)) {\n        findFirstFocusable(activeElement)?.focus();\n      }\n\n      if (activeElementRole === 'row') {\n        return;\n      }\n\n      const isInCell = (() => {\n        let cur = isHTMLElement(activeElement) ? activeElement : null;\n        while (cur) {\n          const curRole = cur.getAttribute('role');\n          if (curRole === 'cell' || curRole === 'gridcell') {\n            return true;\n          }\n\n          cur = cur.parentElement;\n        }\n\n        return false;\n      })();\n\n      // Escape groupper focus trap before arrow down\n      if ((e.key === ArrowDown || e.key === ArrowUp) && isInCell) {\n        activeElement.dispatchEvent(new KeyboardEvent('keydown', { key: Escape, keyCode: keyCodes.Escape }));\n        // Tabster uses keycodes\n        // eslint-disable-next-line deprecation/deprecation\n        activeElement.dispatchEvent(new KeyboardEvent('keydown', { key: e.key, keyCode: e.keyCode }));\n      }\n    },\n    [targetDocument, findFirstFocusable],\n  );\n\n  return {\n    onTableKeyDown: onKeyDown,\n    tableTabsterAttribute: gridAttr,\n    tableRowTabsterAttribute: rowAttr,\n  };\n}\n"],"names":["React","useFluent_unstable","useFluent","ArrowDown","ArrowRight","Escape","keyCodes","ArrowUp","useArrowNavigationGroup","useFocusableGroup","useMergedTabsterAttributes_unstable","useFocusFinders","isHTMLElement","useTableCompositeNavigation","horizontalAttr","axis","gridAttr","groupperAttr","tabBehavior","findFirstFocusable","targetDocument","rowAttr","onKeyDown","useCallback","e","activeElement","currentTarget","contains","activeElementRole","getAttribute","key","focus","isInCell","cur","curRole","parentElement","dispatchEvent","KeyboardEvent","keyCode","onTableKeyDown","tableTabsterAttribute","tableRowTabsterAttribute"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,SAAS,EAAEC,UAAU,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,OAAO,QAAQ,0BAA0B;AAC3F,SACEC,uBAAuB,EACvBC,iBAAiB,EACjBC,mCAAmC,EAEnCC,eAAe,QACV,0BAA0B;AACjC,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,OAAO,SAASC,8BAId;IACA,MAAMC,iBAAiBN,wBAAwB;QAAEO,MAAM;IAAa;IACpE,MAAMC,WAAWR,wBAAwB;QAAEO,MAAM;IAAO;IACxD,MAAME,eAAeR,kBAAkB;QAAES,aAAa;IAAqB;IAC3E,MAAM,EAAEC,mBAAkB,EAAE,GAAGR;IAC/B,MAAM,EAAES,eAAc,EAAE,GAAGlB;IAE3B,MAAMmB,UAAUX,oCAAoCI,gBAAgBG;IAEpE,MAAMK,YAAwCtB,MAAMuB,WAAW,CAC7DC,CAAAA,IAAK;QACH,IAAI,CAACJ,gBAAgB;YACnB;QACF,CAAC;QAED,MAAMK,gBAAgBL,eAAeK,aAAa;QAClD,IAAI,CAACA,iBAAiB,CAACD,EAAEE,aAAa,CAACC,QAAQ,CAACF,gBAAgB;YAC9D;QACF,CAAC;QACD,MAAMG,oBAAoBH,cAAcI,YAAY,CAAC;QAErD,0DAA0D;QAC1D,IAAIL,EAAEM,GAAG,KAAK1B,cAAcwB,sBAAsB,SAAShB,cAAca,gBAAgB;gBACvFN;YAAAA,CAAAA,sBAAAA,mBAAmBM,4BAAnBN,iCAAAA,KAAAA,IAAAA,oBAAmCY;QACrC,CAAC;QAED,IAAIH,sBAAsB,OAAO;YAC/B;QACF,CAAC;QAED,MAAMI,WAAW,AAAC,CAAA,IAAM;YACtB,IAAIC,MAAMrB,cAAca,iBAAiBA,gBAAgB,IAAI;YAC7D,MAAOQ,IAAK;gBACV,MAAMC,UAAUD,IAAIJ,YAAY,CAAC;gBACjC,IAAIK,YAAY,UAAUA,YAAY,YAAY;oBAChD,OAAO,IAAI;gBACb,CAAC;gBAEDD,MAAMA,IAAIE,aAAa;YACzB;YAEA,OAAO,KAAK;QACd,CAAA;QAEA,+CAA+C;QAC/C,IAAI,AAACX,CAAAA,EAAEM,GAAG,KAAK3B,aAAaqB,EAAEM,GAAG,KAAKvB,OAAM,KAAMyB,UAAU;YAC1DP,cAAcW,aAAa,CAAC,IAAIC,cAAc,WAAW;gBAAEP,KAAKzB;gBAAQiC,SAAShC,SAASD,MAAM;YAAC;YACjG,wBAAwB;YACxB,mDAAmD;YACnDoB,cAAcW,aAAa,CAAC,IAAIC,cAAc,WAAW;gBAAEP,KAAKN,EAAEM,GAAG;gBAAEQ,SAASd,EAAEc,OAAO;YAAC;QAC5F,CAAC;IACH,GACA;QAAClB;QAAgBD;KAAmB;IAGtC,OAAO;QACLoB,gBAAgBjB;QAChBkB,uBAAuBxB;QACvByB,0BAA0BpB;IAC5B;AACF,CAAC"}

package/lib/index.js

@@ -1,4 +1,4 @@
-export { useTableFeatures, useTableSelection, useTableSort, createTableColumn, useTableColumnSizing_unstable } from './hooks';
+export { useTableFeatures, useTableSelection, useTableSort, createTableColumn, useTableColumnSizing_unstable, useTableCompositeNavigation } from './hooks';
 export { TableCell, tableCellClassNames, tableCellClassName, useTableCellStyles_unstable, useTableCell_unstable, renderTableCell_unstable } from './TableCell';
 export { TableRow, tableRowClassNames, tableRowClassName, useTableRowStyles_unstable, useTableRow_unstable, renderTableRow_unstable } from './TableRow';
 export { TableBody, tableBodyClassName, tableBodyClassNames, useTableBodyStyles_unstable, useTableBody_unstable, renderTableBody_unstable } from './TableBody';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n  useTableFeatures,\n  useTableSelection,\n  useTableSort,\n  createTableColumn,\n  useTableColumnSizing_unstable,\n} from './hooks';\n\nexport type {\n  CreateTableColumnOptions,\n  UseTableFeaturesOptions,\n  TableColumnDefinition,\n  TableColumnId,\n  TableFeaturesState,\n  TableRowData,\n  TableRowId,\n  TableSelectionState,\n  TableSortState,\n  TableFeaturePlugin,\n  TableColumnSizingOptions,\n} from './hooks';\n\nexport {\n  TableCell,\n  tableCellClassNames,\n  tableCellClassName,\n  useTableCellStyles_unstable,\n  useTableCell_unstable,\n  renderTableCell_unstable,\n} from './TableCell';\nexport type { TableCellProps, TableCellState, TableCellSlots } from './TableCell';\n\nexport {\n  TableRow,\n  tableRowClassNames,\n  tableRowClassName,\n  useTableRowStyles_unstable,\n  useTableRow_unstable,\n  renderTableRow_unstable,\n} from './TableRow';\nexport type { TableRowProps, TableRowState, TableRowSlots } from './TableRow';\n\nexport {\n  TableBody,\n  tableBodyClassName,\n  tableBodyClassNames,\n  useTableBodyStyles_unstable,\n  useTableBody_unstable,\n  renderTableBody_unstable,\n} from './TableBody';\nexport type { TableBodyProps, TableBodyState, TableBodySlots } from './TableBody';\n\nexport {\n  Table,\n  tableClassName,\n  tableClassNames,\n  useTableStyles_unstable,\n  useTable_unstable,\n  renderTable_unstable,\n} from './Table';\nexport type { TableProps, TableSlots, TableState, TableContextValue, TableContextValues, SortDirection } from './Table';\n\nexport {\n  TableHeader,\n  tableHeaderClassNames,\n  tableHeaderClassName,\n  useTableHeaderStyles_unstable,\n  useTableHeader_unstable,\n  renderTableHeader_unstable,\n} from './TableHeader';\nexport type { TableHeaderProps, TableHeaderSlots, TableHeaderState } from './TableHeader';\n\nexport {\n  TableHeaderCell,\n  tableHeaderCellClassName,\n  tableHeaderCellClassNames,\n  useTableHeaderCellStyles_unstable,\n  useTableHeaderCell_unstable,\n  renderTableHeaderCell_unstable,\n} from './TableHeaderCell';\nexport type { TableHeaderCellProps, TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell';\n\nexport {\n  TableResizeHandle,\n  tableResizeHandleClassNames,\n  useTableResizeHandleStyles_unstable,\n  useTableResizeHandle_unstable,\n  renderTableResizeHandle_unstable,\n} from './TableResizeHandle';\nexport type { TableResizeHandleProps, TableResizeHandleSlots, TableResizeHandleState } from './TableResizeHandle';\n\nexport { TableContextProvider, useTableContext } from './contexts/tableContext';\nexport { useTableRowIdContext, TableRowIdContextProvider } from './contexts/rowIdContext';\nexport {\n  TableSelectionCell,\n  useTableSelectionCellStyles_unstable,\n  useTableSelectionCell_unstable,\n  renderTableSelectionCell_unstable,\n  tableSelectionCellClassNames,\n  CELL_WIDTH as TABLE_SELECTION_CELL_WIDTH,\n} from './TableSelectionCell';\n\nexport type { TableSelectionCellProps, TableSelectionCellState, TableSelectionCellSlots } from './TableSelectionCell';\nexport {\n  TableCellActions,\n  tableCellActionsClassNames,\n  useTableCellActionsStyles_unstable,\n  useTableCellActions_unstable,\n  renderTableCellActions_unstable,\n} from './TableCellActions';\n\nexport type { TableCellActionsProps, TableCellActionsSlots, TableCellActionsState } from './TableCellActions';\nexport {\n  TableCellLayout,\n  tableCellLayoutClassNames,\n  useTableCellLayoutStyles_unstable,\n  useTableCellLayout_unstable,\n  renderTableCellLayout_unstable,\n} from './TableCellLayout';\nexport type { TableCellLayoutProps, TableCellLayoutSlots, TableCellLayoutState } from './TableCellLayout';\n\nexport {\n  DataGridCell,\n  dataGridCellClassNames,\n  useDataGridCellStyles_unstable,\n  useDataGridCell_unstable,\n  renderDataGridCell_unstable,\n} from './DataGridCell';\nexport type { DataGridCellProps, DataGridCellState, DataGridCellSlots } from './DataGridCell';\n\nexport {\n  DataGridRow,\n  dataGridRowClassNames,\n  useDataGridRowStyles_unstable,\n  useDataGridRow_unstable,\n  renderDataGridRow_unstable,\n} from './DataGridRow';\nexport type { DataGridRowProps, DataGridRowState, DataGridRowSlots, CellRenderFunction } from './DataGridRow';\n\nexport {\n  DataGridBody,\n  dataGridBodyClassNames,\n  useDataGridBodyStyles_unstable,\n  useDataGridBody_unstable,\n  renderDataGridBody_unstable,\n} from './DataGridBody';\nexport type { DataGridBodyProps, DataGridBodyState, DataGridBodySlots, RowRenderFunction } from './DataGridBody';\n\nexport {\n  DataGrid,\n  dataGridClassNames,\n  useDataGridStyles_unstable,\n  useDataGrid_unstable,\n  renderDataGrid_unstable,\n  useDataGridContextValues_unstable,\n} from './DataGrid';\nexport type {\n  DataGridProps,\n  DataGridSlots,\n  DataGridState,\n  DataGridContextValues,\n  DataGridContextValue,\n  DataGridFocusMode,\n} from './DataGrid';\n\nexport {\n  DataGridHeader,\n  dataGridHeaderClassNames,\n  useDataGridHeaderStyles_unstable,\n  useDataGridHeader_unstable,\n  renderDataGridHeader_unstable,\n} from './DataGridHeader';\nexport type { DataGridHeaderProps, DataGridHeaderSlots, DataGridHeaderState } from './DataGridHeader';\n\nexport {\n  DataGridHeaderCell,\n  dataGridHeaderCellClassNames,\n  useDataGridHeaderCellStyles_unstable,\n  useDataGridHeaderCell_unstable,\n  renderDataGridHeaderCell_unstable,\n} from './DataGridHeaderCell';\nexport type { DataGridHeaderCellProps, DataGridHeaderCellSlots, DataGridHeaderCellState } from './DataGridHeaderCell';\n\nexport {\n  DataGridSelectionCell,\n  useDataGridSelectionCellStyles_unstable,\n  useDataGridSelectionCell_unstable,\n  renderDataGridSelectionCell_unstable,\n  dataGridSelectionCellClassNames,\n} from './DataGridSelectionCell';\n\nexport type {\n  DataGridSelectionCellProps,\n  DataGridSelectionCellState,\n  DataGridSelectionCellSlots,\n} from './DataGridSelectionCell';\n"],"names":["useTableFeatures","useTableSelection","useTableSort","createTableColumn","useTableColumnSizing_unstable","TableCell","tableCellClassNames","tableCellClassName","useTableCellStyles_unstable","useTableCell_unstable","renderTableCell_unstable","TableRow","tableRowClassNames","tableRowClassName","useTableRowStyles_unstable","useTableRow_unstable","renderTableRow_unstable","TableBody","tableBodyClassName","tableBodyClassNames","useTableBodyStyles_unstable","useTableBody_unstable","renderTableBody_unstable","Table","tableClassName","tableClassNames","useTableStyles_unstable","useTable_unstable","renderTable_unstable","TableHeader","tableHeaderClassNames","tableHeaderClassName","useTableHeaderStyles_unstable","useTableHeader_unstable","renderTableHeader_unstable","TableHeaderCell","tableHeaderCellClassName","tableHeaderCellClassNames","useTableHeaderCellStyles_unstable","useTableHeaderCell_unstable","renderTableHeaderCell_unstable","TableResizeHandle","tableResizeHandleClassNames","useTableResizeHandleStyles_unstable","useTableResizeHandle_unstable","renderTableResizeHandle_unstable","TableContextProvider","useTableContext","useTableRowIdContext","TableRowIdContextProvider","TableSelectionCell","useTableSelectionCellStyles_unstable","useTableSelectionCell_unstable","renderTableSelectionCell_unstable","tableSelectionCellClassNames","CELL_WIDTH","TABLE_SELECTION_CELL_WIDTH","TableCellActions","tableCellActionsClassNames","useTableCellActionsStyles_unstable","useTableCellActions_unstable","renderTableCellActions_unstable","TableCellLayout","tableCellLayoutClassNames","useTableCellLayoutStyles_unstable","useTableCellLayout_unstable","renderTableCellLayout_unstable","DataGridCell","dataGridCellClassNames","useDataGridCellStyles_unstable","useDataGridCell_unstable","renderDataGridCell_unstable","DataGridRow","dataGridRowClassNames","useDataGridRowStyles_unstable","useDataGridRow_unstable","renderDataGridRow_unstable","DataGridBody","dataGridBodyClassNames","useDataGridBodyStyles_unstable","useDataGridBody_unstable","renderDataGridBody_unstable","DataGrid","dataGridClassNames","useDataGridStyles_unstable","useDataGrid_unstable","renderDataGrid_unstable","useDataGridContextValues_unstable","DataGridHeader","dataGridHeaderClassNames","useDataGridHeaderStyles_unstable","useDataGridHeader_unstable","renderDataGridHeader_unstable","DataGridHeaderCell","dataGridHeaderCellClassNames","useDataGridHeaderCellStyles_unstable","useDataGridHeaderCell_unstable","renderDataGridHeaderCell_unstable","DataGridSelectionCell","useDataGridSelectionCellStyles_unstable","useDataGridSelectionCell_unstable","renderDataGridSelectionCell_unstable","dataGridSelectionCellClassNames"],"mappings":"AAAA,SACEA,gBAAgB,EAChBC,iBAAiB,EACjBC,YAAY,EACZC,iBAAiB,EACjBC,6BAA6B,QACxB,UAAU;AAgBjB,SACEC,SAAS,EACTC,mBAAmB,EACnBC,kBAAkB,EAClBC,2BAA2B,EAC3BC,qBAAqB,EACrBC,wBAAwB,QACnB,cAAc;AAGrB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,iBAAiB,EACjBC,0BAA0B,EAC1BC,oBAAoB,EACpBC,uBAAuB,QAClB,aAAa;AAGpB,SACEC,SAAS,EACTC,kBAAkB,EAClBC,mBAAmB,EACnBC,2BAA2B,EAC3BC,qBAAqB,EACrBC,wBAAwB,QACnB,cAAc;AAGrB,SACEC,KAAK,EACLC,cAAc,EACdC,eAAe,EACfC,uBAAuB,EACvBC,iBAAiB,EACjBC,oBAAoB,QACf,UAAU;AAGjB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,oBAAoB,EACpBC,6BAA6B,EAC7BC,uBAAuB,EACvBC,0BAA0B,QACrB,gBAAgB;AAGvB,SACEC,eAAe,EACfC,wBAAwB,EACxBC,yBAAyB,EACzBC,iCAAiC,EACjCC,2BAA2B,EAC3BC,8BAA8B,QACzB,oBAAoB;AAG3B,SACEC,iBAAiB,EACjBC,2BAA2B,EAC3BC,mCAAmC,EACnCC,6BAA6B,EAC7BC,gCAAgC,QAC3B,sBAAsB;AAG7B,SAASC,oBAAoB,EAAEC,eAAe,QAAQ,0BAA0B;AAChF,SAASC,oBAAoB,EAAEC,yBAAyB,QAAQ,0BAA0B;AAC1F,SACEC,kBAAkB,EAClBC,oCAAoC,EACpCC,8BAA8B,EAC9BC,iCAAiC,EACjCC,4BAA4B,EAC5BC,cAAcC,0BAA0B,QACnC,uBAAuB;AAG9B,SACEC,gBAAgB,EAChBC,0BAA0B,EAC1BC,kCAAkC,EAClCC,4BAA4B,EAC5BC,+BAA+B,QAC1B,qBAAqB;AAG5B,SACEC,eAAe,EACfC,yBAAyB,EACzBC,iCAAiC,EACjCC,2BAA2B,EAC3BC,8BAA8B,QACzB,oBAAoB;AAG3B,SACEC,YAAY,EACZC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,EACxBC,2BAA2B,QACtB,iBAAiB;AAGxB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,6BAA6B,EAC7BC,uBAAuB,EACvBC,0BAA0B,QACrB,gBAAgB;AAGvB,SACEC,YAAY,EACZC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,EACxBC,2BAA2B,QACtB,iBAAiB;AAGxB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,0BAA0B,EAC1BC,oBAAoB,EACpBC,uBAAuB,EACvBC,iCAAiC,QAC5B,aAAa;AAUpB,SACEC,cAAc,EACdC,wBAAwB,EACxBC,gCAAgC,EAChCC,0BAA0B,EAC1BC,6BAA6B,QACxB,mBAAmB;AAG1B,SACEC,kBAAkB,EAClBC,4BAA4B,EAC5BC,oCAAoC,EACpCC,8BAA8B,EAC9BC,iCAAiC,QAC5B,uBAAuB;AAG9B,SACEC,qBAAqB,EACrBC,uCAAuC,EACvCC,iCAAiC,EACjCC,oCAAoC,EACpCC,+BAA+B,QAC1B,0BAA0B"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n  useTableFeatures,\n  useTableSelection,\n  useTableSort,\n  createTableColumn,\n  useTableColumnSizing_unstable,\n  useTableCompositeNavigation,\n} from './hooks';\n\nexport type {\n  CreateTableColumnOptions,\n  UseTableFeaturesOptions,\n  TableColumnDefinition,\n  TableColumnId,\n  TableFeaturesState,\n  TableRowData,\n  TableRowId,\n  TableSelectionState,\n  TableSortState,\n  TableFeaturePlugin,\n  TableColumnSizingOptions,\n} from './hooks';\n\nexport {\n  TableCell,\n  tableCellClassNames,\n  tableCellClassName,\n  useTableCellStyles_unstable,\n  useTableCell_unstable,\n  renderTableCell_unstable,\n} from './TableCell';\nexport type { TableCellProps, TableCellState, TableCellSlots } from './TableCell';\n\nexport {\n  TableRow,\n  tableRowClassNames,\n  tableRowClassName,\n  useTableRowStyles_unstable,\n  useTableRow_unstable,\n  renderTableRow_unstable,\n} from './TableRow';\nexport type { TableRowProps, TableRowState, TableRowSlots } from './TableRow';\n\nexport {\n  TableBody,\n  tableBodyClassName,\n  tableBodyClassNames,\n  useTableBodyStyles_unstable,\n  useTableBody_unstable,\n  renderTableBody_unstable,\n} from './TableBody';\nexport type { TableBodyProps, TableBodyState, TableBodySlots } from './TableBody';\n\nexport {\n  Table,\n  tableClassName,\n  tableClassNames,\n  useTableStyles_unstable,\n  useTable_unstable,\n  renderTable_unstable,\n} from './Table';\nexport type { TableProps, TableSlots, TableState, TableContextValue, TableContextValues, SortDirection } from './Table';\n\nexport {\n  TableHeader,\n  tableHeaderClassNames,\n  tableHeaderClassName,\n  useTableHeaderStyles_unstable,\n  useTableHeader_unstable,\n  renderTableHeader_unstable,\n} from './TableHeader';\nexport type { TableHeaderProps, TableHeaderSlots, TableHeaderState } from './TableHeader';\n\nexport {\n  TableHeaderCell,\n  tableHeaderCellClassName,\n  tableHeaderCellClassNames,\n  useTableHeaderCellStyles_unstable,\n  useTableHeaderCell_unstable,\n  renderTableHeaderCell_unstable,\n} from './TableHeaderCell';\nexport type { TableHeaderCellProps, TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell';\n\nexport {\n  TableResizeHandle,\n  tableResizeHandleClassNames,\n  useTableResizeHandleStyles_unstable,\n  useTableResizeHandle_unstable,\n  renderTableResizeHandle_unstable,\n} from './TableResizeHandle';\nexport type { TableResizeHandleProps, TableResizeHandleSlots, TableResizeHandleState } from './TableResizeHandle';\n\nexport { TableContextProvider, useTableContext } from './contexts/tableContext';\nexport { useTableRowIdContext, TableRowIdContextProvider } from './contexts/rowIdContext';\nexport {\n  TableSelectionCell,\n  useTableSelectionCellStyles_unstable,\n  useTableSelectionCell_unstable,\n  renderTableSelectionCell_unstable,\n  tableSelectionCellClassNames,\n  CELL_WIDTH as TABLE_SELECTION_CELL_WIDTH,\n} from './TableSelectionCell';\n\nexport type { TableSelectionCellProps, TableSelectionCellState, TableSelectionCellSlots } from './TableSelectionCell';\nexport {\n  TableCellActions,\n  tableCellActionsClassNames,\n  useTableCellActionsStyles_unstable,\n  useTableCellActions_unstable,\n  renderTableCellActions_unstable,\n} from './TableCellActions';\n\nexport type { TableCellActionsProps, TableCellActionsSlots, TableCellActionsState } from './TableCellActions';\nexport {\n  TableCellLayout,\n  tableCellLayoutClassNames,\n  useTableCellLayoutStyles_unstable,\n  useTableCellLayout_unstable,\n  renderTableCellLayout_unstable,\n} from './TableCellLayout';\nexport type { TableCellLayoutProps, TableCellLayoutSlots, TableCellLayoutState } from './TableCellLayout';\n\nexport {\n  DataGridCell,\n  dataGridCellClassNames,\n  useDataGridCellStyles_unstable,\n  useDataGridCell_unstable,\n  renderDataGridCell_unstable,\n} from './DataGridCell';\nexport type { DataGridCellProps, DataGridCellState, DataGridCellSlots } from './DataGridCell';\n\nexport {\n  DataGridRow,\n  dataGridRowClassNames,\n  useDataGridRowStyles_unstable,\n  useDataGridRow_unstable,\n  renderDataGridRow_unstable,\n} from './DataGridRow';\nexport type { DataGridRowProps, DataGridRowState, DataGridRowSlots, CellRenderFunction } from './DataGridRow';\n\nexport {\n  DataGridBody,\n  dataGridBodyClassNames,\n  useDataGridBodyStyles_unstable,\n  useDataGridBody_unstable,\n  renderDataGridBody_unstable,\n} from './DataGridBody';\nexport type { DataGridBodyProps, DataGridBodyState, DataGridBodySlots, RowRenderFunction } from './DataGridBody';\n\nexport {\n  DataGrid,\n  dataGridClassNames,\n  useDataGridStyles_unstable,\n  useDataGrid_unstable,\n  renderDataGrid_unstable,\n  useDataGridContextValues_unstable,\n} from './DataGrid';\nexport type {\n  DataGridProps,\n  DataGridSlots,\n  DataGridState,\n  DataGridContextValues,\n  DataGridContextValue,\n  DataGridFocusMode,\n} from './DataGrid';\n\nexport {\n  DataGridHeader,\n  dataGridHeaderClassNames,\n  useDataGridHeaderStyles_unstable,\n  useDataGridHeader_unstable,\n  renderDataGridHeader_unstable,\n} from './DataGridHeader';\nexport type { DataGridHeaderProps, DataGridHeaderSlots, DataGridHeaderState } from './DataGridHeader';\n\nexport {\n  DataGridHeaderCell,\n  dataGridHeaderCellClassNames,\n  useDataGridHeaderCellStyles_unstable,\n  useDataGridHeaderCell_unstable,\n  renderDataGridHeaderCell_unstable,\n} from './DataGridHeaderCell';\nexport type { DataGridHeaderCellProps, DataGridHeaderCellSlots, DataGridHeaderCellState } from './DataGridHeaderCell';\n\nexport {\n  DataGridSelectionCell,\n  useDataGridSelectionCellStyles_unstable,\n  useDataGridSelectionCell_unstable,\n  renderDataGridSelectionCell_unstable,\n  dataGridSelectionCellClassNames,\n} from './DataGridSelectionCell';\n\nexport type {\n  DataGridSelectionCellProps,\n  DataGridSelectionCellState,\n  DataGridSelectionCellSlots,\n} from './DataGridSelectionCell';\n"],"names":["useTableFeatures","useTableSelection","useTableSort","createTableColumn","useTableColumnSizing_unstable","useTableCompositeNavigation","TableCell","tableCellClassNames","tableCellClassName","useTableCellStyles_unstable","useTableCell_unstable","renderTableCell_unstable","TableRow","tableRowClassNames","tableRowClassName","useTableRowStyles_unstable","useTableRow_unstable","renderTableRow_unstable","TableBody","tableBodyClassName","tableBodyClassNames","useTableBodyStyles_unstable","useTableBody_unstable","renderTableBody_unstable","Table","tableClassName","tableClassNames","useTableStyles_unstable","useTable_unstable","renderTable_unstable","TableHeader","tableHeaderClassNames","tableHeaderClassName","useTableHeaderStyles_unstable","useTableHeader_unstable","renderTableHeader_unstable","TableHeaderCell","tableHeaderCellClassName","tableHeaderCellClassNames","useTableHeaderCellStyles_unstable","useTableHeaderCell_unstable","renderTableHeaderCell_unstable","TableResizeHandle","tableResizeHandleClassNames","useTableResizeHandleStyles_unstable","useTableResizeHandle_unstable","renderTableResizeHandle_unstable","TableContextProvider","useTableContext","useTableRowIdContext","TableRowIdContextProvider","TableSelectionCell","useTableSelectionCellStyles_unstable","useTableSelectionCell_unstable","renderTableSelectionCell_unstable","tableSelectionCellClassNames","CELL_WIDTH","TABLE_SELECTION_CELL_WIDTH","TableCellActions","tableCellActionsClassNames","useTableCellActionsStyles_unstable","useTableCellActions_unstable","renderTableCellActions_unstable","TableCellLayout","tableCellLayoutClassNames","useTableCellLayoutStyles_unstable","useTableCellLayout_unstable","renderTableCellLayout_unstable","DataGridCell","dataGridCellClassNames","useDataGridCellStyles_unstable","useDataGridCell_unstable","renderDataGridCell_unstable","DataGridRow","dataGridRowClassNames","useDataGridRowStyles_unstable","useDataGridRow_unstable","renderDataGridRow_unstable","DataGridBody","dataGridBodyClassNames","useDataGridBodyStyles_unstable","useDataGridBody_unstable","renderDataGridBody_unstable","DataGrid","dataGridClassNames","useDataGridStyles_unstable","useDataGrid_unstable","renderDataGrid_unstable","useDataGridContextValues_unstable","DataGridHeader","dataGridHeaderClassNames","useDataGridHeaderStyles_unstable","useDataGridHeader_unstable","renderDataGridHeader_unstable","DataGridHeaderCell","dataGridHeaderCellClassNames","useDataGridHeaderCellStyles_unstable","useDataGridHeaderCell_unstable","renderDataGridHeaderCell_unstable","DataGridSelectionCell","useDataGridSelectionCellStyles_unstable","useDataGridSelectionCell_unstable","renderDataGridSelectionCell_unstable","dataGridSelectionCellClassNames"],"mappings":"AAAA,SACEA,gBAAgB,EAChBC,iBAAiB,EACjBC,YAAY,EACZC,iBAAiB,EACjBC,6BAA6B,EAC7BC,2BAA2B,QACtB,UAAU;AAgBjB,SACEC,SAAS,EACTC,mBAAmB,EACnBC,kBAAkB,EAClBC,2BAA2B,EAC3BC,qBAAqB,EACrBC,wBAAwB,QACnB,cAAc;AAGrB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,iBAAiB,EACjBC,0BAA0B,EAC1BC,oBAAoB,EACpBC,uBAAuB,QAClB,aAAa;AAGpB,SACEC,SAAS,EACTC,kBAAkB,EAClBC,mBAAmB,EACnBC,2BAA2B,EAC3BC,qBAAqB,EACrBC,wBAAwB,QACnB,cAAc;AAGrB,SACEC,KAAK,EACLC,cAAc,EACdC,eAAe,EACfC,uBAAuB,EACvBC,iBAAiB,EACjBC,oBAAoB,QACf,UAAU;AAGjB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,oBAAoB,EACpBC,6BAA6B,EAC7BC,uBAAuB,EACvBC,0BAA0B,QACrB,gBAAgB;AAGvB,SACEC,eAAe,EACfC,wBAAwB,EACxBC,yBAAyB,EACzBC,iCAAiC,EACjCC,2BAA2B,EAC3BC,8BAA8B,QACzB,oBAAoB;AAG3B,SACEC,iBAAiB,EACjBC,2BAA2B,EAC3BC,mCAAmC,EACnCC,6BAA6B,EAC7BC,gCAAgC,QAC3B,sBAAsB;AAG7B,SAASC,oBAAoB,EAAEC,eAAe,QAAQ,0BAA0B;AAChF,SAASC,oBAAoB,EAAEC,yBAAyB,QAAQ,0BAA0B;AAC1F,SACEC,kBAAkB,EAClBC,oCAAoC,EACpCC,8BAA8B,EAC9BC,iCAAiC,EACjCC,4BAA4B,EAC5BC,cAAcC,0BAA0B,QACnC,uBAAuB;AAG9B,SACEC,gBAAgB,EAChBC,0BAA0B,EAC1BC,kCAAkC,EAClCC,4BAA4B,EAC5BC,+BAA+B,QAC1B,qBAAqB;AAG5B,SACEC,eAAe,EACfC,yBAAyB,EACzBC,iCAAiC,EACjCC,2BAA2B,EAC3BC,8BAA8B,QACzB,oBAAoB;AAG3B,SACEC,YAAY,EACZC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,EACxBC,2BAA2B,QACtB,iBAAiB;AAGxB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,6BAA6B,EAC7BC,uBAAuB,EACvBC,0BAA0B,QACrB,gBAAgB;AAGvB,SACEC,YAAY,EACZC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,EACxBC,2BAA2B,QACtB,iBAAiB;AAGxB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,0BAA0B,EAC1BC,oBAAoB,EACpBC,uBAAuB,EACvBC,iCAAiC,QAC5B,aAAa;AAUpB,SACEC,cAAc,EACdC,wBAAwB,EACxBC,gCAAgC,EAChCC,0BAA0B,EAC1BC,6BAA6B,QACxB,mBAAmB;AAG1B,SACEC,kBAAkB,EAClBC,4BAA4B,EAC5BC,oCAAoC,EACpCC,8BAA8B,EAC9BC,iCAAiC,QAC5B,uBAAuB;AAG9B,SACEC,qBAAqB,EACrBC,uCAAuC,EACvCC,iCAAiC,EACjCC,oCAAoC,EACpCC,+BAA+B,QAC1B,0BAA0B"}

package/lib-commonjs/components/DataGrid/useDataGrid.js

@@ -10,17 +10,17 @@ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildc
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _reactTabster = require("@fluentui/react-tabster");
 const _useTable = require("../Table/useTable");
-const _hooks = require("../../hooks");
-const _tableSelectionCell = require("../TableSelectionCell");
 const _reactUtilities = require("@fluentui/react-utilities");
 const _keyboardKeys = require("@fluentui/keyboard-keys");
+const _hooks = require("../../hooks");
+const _tableSelectionCell = require("../TableSelectionCell");
 const useDataGrid_unstable = (props, ref)=>{
     const { items , columns , focusMode ='cell' , selectionMode , onSortChange , onSelectionChange , defaultSortState , sortState , selectedItems , defaultSelectedItems , subtleSelection =false , selectionAppearance ='brand' , getRowId , resizableColumns , columnSizingOptions , onColumnResize , containerWidthOffset  } = props;
     const widthOffset = containerWidthOffset !== null && containerWidthOffset !== void 0 ? containerWidthOffset : selectionMode ? -_tableSelectionCell.CELL_WIDTH : 0;
-    const navigable = focusMode !== 'none';
-    const keyboardNavAttr = (0, _reactTabster.useArrowNavigationGroup)({
+    const gridTabsterAttribute = (0, _reactTabster.useArrowNavigationGroup)({
         axis: 'grid'
     });
+    const { onTableKeyDown: onCompositeKeyDown , tableTabsterAttribute: compositeTabsterAttribute , tableRowTabsterAttribute: compositeRowTabsterAttribute  } = (0, _hooks.useTableCompositeNavigation)();
     const tableState = (0, _hooks.useTableFeatures)({
         items,
         columns,
@@ -50,6 +50,8 @@ const useDataGrid_unstable = (props, ref)=>{
     const onKeyDown = (0, _reactUtilities.useEventCallback)((e)=>{
         var _props_onKeyDown;
         (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, e);
+        focusMode === 'composite' && onCompositeKeyDown(e);
+        // handle ctrl+home and ctrl+end
         if (!innerRef.current || !e.ctrlKey || e.defaultPrevented) {
             return;
         }
@@ -73,7 +75,8 @@ const useDataGrid_unstable = (props, ref)=>{
         role: 'grid',
         as: 'div',
         noNativeElements: true,
-        ...navigable && keyboardNavAttr,
+        ...focusMode === 'cell' && gridTabsterAttribute,
+        ...focusMode === 'composite' && compositeTabsterAttribute,
         ...props,
         onKeyDown
     }, (0, _reactUtilities.useMergedRefs)(ref, tableState.tableRef, innerRef));
@@ -84,6 +87,7 @@ const useDataGrid_unstable = (props, ref)=>{
         selectableRows: !!selectionMode,
         subtleSelection,
         selectionAppearance,
-        resizableColumns
+        resizableColumns,
+        compositeRowTabsterAttribute
     };
 };

package/lib-commonjs/components/DataGrid/useDataGrid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDataGrid.js"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useTable_unstable } from '../Table/useTable';\nimport { useTableFeatures, useTableSort, useTableSelection, useTableColumnSizing_unstable } from '../../hooks';\nimport { CELL_WIDTH } from '../TableSelectionCell';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { End, Home } from '@fluentui/keyboard-keys';\n/**\n * Create the state required to render DataGrid.\n *\n * The returned state can be modified with hooks such as useDataGridStyles_unstable,\n * before being passed to renderDataGrid_unstable.\n *\n * @param props - props from this instance of DataGrid\n * @param ref - reference to root HTMLElement of DataGrid\n */ export const useDataGrid_unstable = (props, ref)=>{\n    const { items , columns , focusMode ='cell' , selectionMode , onSortChange , onSelectionChange , defaultSortState , sortState , selectedItems , defaultSelectedItems , subtleSelection =false , selectionAppearance ='brand' , getRowId , resizableColumns , columnSizingOptions , onColumnResize , containerWidthOffset  } = props;\n    const widthOffset = containerWidthOffset !== null && containerWidthOffset !== void 0 ? containerWidthOffset : selectionMode ? -CELL_WIDTH : 0;\n    const navigable = focusMode !== 'none';\n    const keyboardNavAttr = useArrowNavigationGroup({\n        axis: 'grid'\n    });\n    const tableState = useTableFeatures({\n        items,\n        columns,\n        getRowId\n    }, [\n        useTableSort({\n            defaultSortState,\n            sortState,\n            onSortChange\n        }),\n        useTableSelection({\n            defaultSelectedItems,\n            selectedItems,\n            onSelectionChange,\n            selectionMode: selectionMode !== null && selectionMode !== void 0 ? selectionMode : 'multiselect'\n        }),\n        useTableColumnSizing_unstable({\n            onColumnResize,\n            columnSizingOptions,\n            // The selection cell is not part of the columns, therefore its width needs to be subtracted\n            // from the container to make sure the columns don't overflow the table.\n            containerWidthOffset: widthOffset\n        })\n    ]);\n    const innerRef = React.useRef(null);\n    const { findFirstFocusable , findLastFocusable  } = useFocusFinders();\n    const onKeyDown = useEventCallback((e)=>{\n        var _props_onKeyDown;\n        (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, e);\n        if (!innerRef.current || !e.ctrlKey || e.defaultPrevented) {\n            return;\n        }\n        if (e.key === Home) {\n            const firstRow = innerRef.current.querySelector('[role=\"row\"]');\n            if (firstRow) {\n                var _findFirstFocusable;\n                (_findFirstFocusable = findFirstFocusable(firstRow)) === null || _findFirstFocusable === void 0 ? void 0 : _findFirstFocusable.focus();\n            }\n        }\n        if (e.key === End) {\n            const rows = innerRef.current.querySelectorAll('[role=\"row\"]');\n            if (rows.length) {\n                var _findLastFocusable;\n                const lastRow = rows.item(rows.length - 1);\n                (_findLastFocusable = findLastFocusable(lastRow)) === null || _findLastFocusable === void 0 ? void 0 : _findLastFocusable.focus();\n            }\n        }\n    });\n    const baseTableState = useTable_unstable({\n        role: 'grid',\n        as: 'div',\n        noNativeElements: true,\n        ...navigable && keyboardNavAttr,\n        ...props,\n        onKeyDown\n    }, useMergedRefs(ref, tableState.tableRef, innerRef));\n    return {\n        ...baseTableState,\n        focusMode,\n        tableState,\n        selectableRows: !!selectionMode,\n        subtleSelection,\n        selectionAppearance,\n        resizableColumns\n    };\n};\n"],"names":["useDataGrid_unstable","props","ref","items","columns","focusMode","selectionMode","onSortChange","onSelectionChange","defaultSortState","sortState","selectedItems","defaultSelectedItems","subtleSelection","selectionAppearance","getRowId","resizableColumns","columnSizingOptions","onColumnResize","containerWidthOffset","widthOffset","CELL_WIDTH","navigable","keyboardNavAttr","useArrowNavigationGroup","axis","tableState","useTableFeatures","useTableSort","useTableSelection","useTableColumnSizing_unstable","innerRef","React","useRef","findFirstFocusable","findLastFocusable","useFocusFinders","onKeyDown","useEventCallback","e","_props_onKeyDown","call","current","ctrlKey","defaultPrevented","key","Home","firstRow","querySelector","_findFirstFocusable","focus","End","rows","querySelectorAll","length","_findLastFocusable","lastRow","item","baseTableState","useTable_unstable","role","as","noNativeElements","useMergedRefs","tableRef","selectableRows"],"mappings":"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"}
+{"version":3,"sources":["useDataGrid.js"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useTable_unstable } from '../Table/useTable';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { End, Home } from '@fluentui/keyboard-keys';\nimport { useTableFeatures, useTableSort, useTableSelection, useTableColumnSizing_unstable, useTableCompositeNavigation } from '../../hooks';\nimport { CELL_WIDTH } from '../TableSelectionCell';\n/**\n * Create the state required to render DataGrid.\n *\n * The returned state can be modified with hooks such as useDataGridStyles_unstable,\n * before being passed to renderDataGrid_unstable.\n *\n * @param props - props from this instance of DataGrid\n * @param ref - reference to root HTMLElement of DataGrid\n */ export const useDataGrid_unstable = (props, ref)=>{\n    const { items , columns , focusMode ='cell' , selectionMode , onSortChange , onSelectionChange , defaultSortState , sortState , selectedItems , defaultSelectedItems , subtleSelection =false , selectionAppearance ='brand' , getRowId , resizableColumns , columnSizingOptions , onColumnResize , containerWidthOffset  } = props;\n    const widthOffset = containerWidthOffset !== null && containerWidthOffset !== void 0 ? containerWidthOffset : selectionMode ? -CELL_WIDTH : 0;\n    const gridTabsterAttribute = useArrowNavigationGroup({\n        axis: 'grid'\n    });\n    const { onTableKeyDown: onCompositeKeyDown , tableTabsterAttribute: compositeTabsterAttribute , tableRowTabsterAttribute: compositeRowTabsterAttribute  } = useTableCompositeNavigation();\n    const tableState = useTableFeatures({\n        items,\n        columns,\n        getRowId\n    }, [\n        useTableSort({\n            defaultSortState,\n            sortState,\n            onSortChange\n        }),\n        useTableSelection({\n            defaultSelectedItems,\n            selectedItems,\n            onSelectionChange,\n            selectionMode: selectionMode !== null && selectionMode !== void 0 ? selectionMode : 'multiselect'\n        }),\n        useTableColumnSizing_unstable({\n            onColumnResize,\n            columnSizingOptions,\n            // The selection cell is not part of the columns, therefore its width needs to be subtracted\n            // from the container to make sure the columns don't overflow the table.\n            containerWidthOffset: widthOffset\n        })\n    ]);\n    const innerRef = React.useRef(null);\n    const { findFirstFocusable , findLastFocusable  } = useFocusFinders();\n    const onKeyDown = useEventCallback((e)=>{\n        var _props_onKeyDown;\n        (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, e);\n        focusMode === 'composite' && onCompositeKeyDown(e);\n        // handle ctrl+home and ctrl+end\n        if (!innerRef.current || !e.ctrlKey || e.defaultPrevented) {\n            return;\n        }\n        if (e.key === Home) {\n            const firstRow = innerRef.current.querySelector('[role=\"row\"]');\n            if (firstRow) {\n                var _findFirstFocusable;\n                (_findFirstFocusable = findFirstFocusable(firstRow)) === null || _findFirstFocusable === void 0 ? void 0 : _findFirstFocusable.focus();\n            }\n        }\n        if (e.key === End) {\n            const rows = innerRef.current.querySelectorAll('[role=\"row\"]');\n            if (rows.length) {\n                var _findLastFocusable;\n                const lastRow = rows.item(rows.length - 1);\n                (_findLastFocusable = findLastFocusable(lastRow)) === null || _findLastFocusable === void 0 ? void 0 : _findLastFocusable.focus();\n            }\n        }\n    });\n    const baseTableState = useTable_unstable({\n        role: 'grid',\n        as: 'div',\n        noNativeElements: true,\n        ...focusMode === 'cell' && gridTabsterAttribute,\n        ...focusMode === 'composite' && compositeTabsterAttribute,\n        ...props,\n        onKeyDown\n    }, useMergedRefs(ref, tableState.tableRef, innerRef));\n    return {\n        ...baseTableState,\n        focusMode,\n        tableState,\n        selectableRows: !!selectionMode,\n        subtleSelection,\n        selectionAppearance,\n        resizableColumns,\n        compositeRowTabsterAttribute\n    };\n};\n"],"names":["useDataGrid_unstable","props","ref","items","columns","focusMode","selectionMode","onSortChange","onSelectionChange","defaultSortState","sortState","selectedItems","defaultSelectedItems","subtleSelection","selectionAppearance","getRowId","resizableColumns","columnSizingOptions","onColumnResize","containerWidthOffset","widthOffset","CELL_WIDTH","gridTabsterAttribute","useArrowNavigationGroup","axis","onTableKeyDown","onCompositeKeyDown","tableTabsterAttribute","compositeTabsterAttribute","tableRowTabsterAttribute","compositeRowTabsterAttribute","useTableCompositeNavigation","tableState","useTableFeatures","useTableSort","useTableSelection","useTableColumnSizing_unstable","innerRef","React","useRef","findFirstFocusable","findLastFocusable","useFocusFinders","onKeyDown","useEventCallback","e","_props_onKeyDown","call","current","ctrlKey","defaultPrevented","key","Home","firstRow","querySelector","_findFirstFocusable","focus","End","rows","querySelectorAll","length","_findLastFocusable","lastRow","item","baseTableState","useTable_unstable","role","as","noNativeElements","useMergedRefs","tableRef","selectableRows"],"mappings":"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"}

package/lib-commonjs/components/DataGrid/useDataGridContextValues.js

@@ -9,15 +9,17 @@ Object.defineProperty(exports, "useDataGridContextValues_unstable", {
 const _useTableContextValues = require("../Table/useTableContextValues");
 function useDataGridContextValues_unstable(state) {
     const tableContextValues = (0, _useTableContextValues.useTableContextValues_unstable)(state);
+    const { tableState , focusMode , selectableRows , subtleSelection , selectionAppearance , resizableColumns , compositeRowTabsterAttribute  } = state;
     return {
         ...tableContextValues,
         dataGrid: {
-            ...state.tableState,
-            focusMode: state.focusMode,
-            selectableRows: state.selectableRows,
-            subtleSelection: state.subtleSelection,
-            selectionAppearance: state.selectionAppearance,
-            resizableColumns: state.resizableColumns
+            ...tableState,
+            focusMode,
+            selectableRows,
+            subtleSelection,
+            selectionAppearance,
+            resizableColumns,
+            compositeRowTabsterAttribute
         }
     };
 }

package/lib-commonjs/components/DataGrid/useDataGridContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDataGridContextValues.js"],"sourcesContent":["import { useTableContextValues_unstable } from '../Table/useTableContextValues';\nexport function useDataGridContextValues_unstable(state) {\n    const tableContextValues = useTableContextValues_unstable(state);\n    return {\n        ...tableContextValues,\n        dataGrid: {\n            ...state.tableState,\n            focusMode: state.focusMode,\n            selectableRows: state.selectableRows,\n            subtleSelection: state.subtleSelection,\n            selectionAppearance: state.selectionAppearance,\n            resizableColumns: state.resizableColumns\n        }\n    };\n}\n"],"names":["useDataGridContextValues_unstable","state","tableContextValues","useTableContextValues_unstable","dataGrid","tableState","focusMode","selectableRows","subtleSelection","selectionAppearance","resizableColumns"],"mappings":";;;;+BACgBA;;aAAAA;;uCAD+B;AACxC,SAASA,kCAAkCC,KAAK,EAAE;IACrD,MAAMC,qBAAqBC,IAAAA,qDAA8B,EAACF;IAC1D,OAAO;QACH,GAAGC,kBAAkB;QACrBE,UAAU;YACN,GAAGH,MAAMI,UAAU;YACnBC,WAAWL,MAAMK,SAAS;YAC1BC,gBAAgBN,MAAMM,cAAc;YACpCC,iBAAiBP,MAAMO,eAAe;YACtCC,qBAAqBR,MAAMQ,mBAAmB;YAC9CC,kBAAkBT,MAAMS,gBAAgB;QAC5C;IACJ;AACJ"}
+{"version":3,"sources":["useDataGridContextValues.js"],"sourcesContent":["import { useTableContextValues_unstable } from '../Table/useTableContextValues';\nexport function useDataGridContextValues_unstable(state) {\n    const tableContextValues = useTableContextValues_unstable(state);\n    const { tableState , focusMode , selectableRows , subtleSelection , selectionAppearance , resizableColumns , compositeRowTabsterAttribute  } = state;\n    return {\n        ...tableContextValues,\n        dataGrid: {\n            ...tableState,\n            focusMode,\n            selectableRows,\n            subtleSelection,\n            selectionAppearance,\n            resizableColumns,\n            compositeRowTabsterAttribute\n        }\n    };\n}\n"],"names":["useDataGridContextValues_unstable","state","tableContextValues","useTableContextValues_unstable","tableState","focusMode","selectableRows","subtleSelection","selectionAppearance","resizableColumns","compositeRowTabsterAttribute","dataGrid"],"mappings":";;;;+BACgBA;;aAAAA;;uCAD+B;AACxC,SAASA,kCAAkCC,KAAK,EAAE;IACrD,MAAMC,qBAAqBC,IAAAA,qDAA8B,EAACF;IAC1D,MAAM,EAAEG,WAAU,EAAGC,UAAS,EAAGC,eAAc,EAAGC,gBAAe,EAAGC,oBAAmB,EAAGC,iBAAgB,EAAGC,6BAA4B,EAAG,GAAGT;IAC/I,OAAO;QACH,GAAGC,kBAAkB;QACrBS,UAAU;YACN,GAAGP,UAAU;YACbC;YACAC;YACAC;YACAC;YACAC;YACAC;QACJ;IACJ;AACJ"}

package/lib-commonjs/components/DataGridCell/useDataGridCell.js

@@ -15,7 +15,7 @@ const _columnIdContext = require("../../contexts/columnIdContext");
 const useDataGridCell_unstable = (props, ref)=>{
     const { focusMode  } = props;
     const columnId = (0, _columnIdContext.useColumnIdContext)();
-    const tabbable = (0, _dataGridContext.useDataGridContext_unstable)((ctx)=>ctx.focusMode === 'cell');
+    const tabbable = (0, _dataGridContext.useDataGridContext_unstable)((ctx)=>ctx.focusMode === 'cell' || ctx.focusMode === 'composite');
     const resizableColumns = (0, _dataGridContext.useDataGridContext_unstable)((ctx)=>ctx.resizableColumns);
     const columnSizing = (0, _dataGridContext.useDataGridContext_unstable)((ctx)=>ctx.columnSizing_unstable);
     const focusableGroupAttr = (0, _reactTabster.useFocusableGroup)({

package/lib-commonjs/components/DataGridCell/useDataGridCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDataGridCell.js"],"sourcesContent":["import * as React from 'react';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useColumnIdContext } from '../../contexts/columnIdContext';\n/**\n * Create the state required to render DataGridCell.\n *\n * The returned state can be modified with hooks such as useDataGridCellStyles_unstable,\n * before being passed to renderDataGridCell_unstable.\n *\n * @param props - props from this instance of DataGridCell\n * @param ref - reference to root HTMLElement of DataGridCell\n */ export const useDataGridCell_unstable = (props, ref)=>{\n    const { focusMode  } = props;\n    const columnId = useColumnIdContext();\n    const tabbable = useDataGridContext_unstable((ctx)=>ctx.focusMode === 'cell');\n    const resizableColumns = useDataGridContext_unstable((ctx)=>ctx.resizableColumns);\n    const columnSizing = useDataGridContext_unstable((ctx)=>ctx.columnSizing_unstable);\n    const focusableGroupAttr = useFocusableGroup({\n        tabBehavior: 'limited-trap-focus'\n    });\n    return useTableCell_unstable({\n        as: 'div',\n        role: 'gridcell',\n        ...focusMode && focusableGroupAttr,\n        tabIndex: tabbable ? 0 : undefined,\n        ...resizableColumns ? columnSizing.getTableCellProps(columnId) : {},\n        ...props\n    }, ref);\n};\n"],"names":["useDataGridCell_unstable","props","ref","focusMode","columnId","useColumnIdContext","tabbable","useDataGridContext_unstable","ctx","resizableColumns","columnSizing","columnSizing_unstable","focusableGroupAttr","useFocusableGroup","tabBehavior","useTableCell_unstable","as","role","tabIndex","undefined","getTableCellProps"],"mappings":";;;;+BAaiBA;;aAAAA;;;6DAbM;8BACW;8BACI;iCACM;iCACT;AASxB,MAAMA,2BAA2B,CAACC,OAAOC,MAAM;IACtD,MAAM,EAAEC,UAAS,EAAG,GAAGF;IACvB,MAAMG,WAAWC,IAAAA,mCAAkB;IACnC,MAAMC,WAAWC,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIL,SAAS,KAAK;IACtE,MAAMM,mBAAmBF,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIC,gBAAgB;IAChF,MAAMC,eAAeH,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIG,qBAAqB;IACjF,MAAMC,qBAAqBC,IAAAA,+BAAiB,EAAC;QACzCC,aAAa;IACjB;IACA,OAAOC,IAAAA,mCAAqB,EAAC;QACzBC,IAAI;QACJC,MAAM;QACN,GAAGd,aAAaS,kBAAkB;QAClCM,UAAUZ,WAAW,IAAIa,SAAS;QAClC,GAAGV,mBAAmBC,aAAaU,iBAAiB,CAAChB,YAAY,CAAC,CAAC;QACnE,GAAGH,KAAK;IACZ,GAAGC;AACP"}
+{"version":3,"sources":["useDataGridCell.js"],"sourcesContent":["import * as React from 'react';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useColumnIdContext } from '../../contexts/columnIdContext';\n/**\n * Create the state required to render DataGridCell.\n *\n * The returned state can be modified with hooks such as useDataGridCellStyles_unstable,\n * before being passed to renderDataGridCell_unstable.\n *\n * @param props - props from this instance of DataGridCell\n * @param ref - reference to root HTMLElement of DataGridCell\n */ export const useDataGridCell_unstable = (props, ref)=>{\n    const { focusMode  } = props;\n    const columnId = useColumnIdContext();\n    const tabbable = useDataGridContext_unstable((ctx)=>ctx.focusMode === 'cell' || ctx.focusMode === 'composite');\n    const resizableColumns = useDataGridContext_unstable((ctx)=>ctx.resizableColumns);\n    const columnSizing = useDataGridContext_unstable((ctx)=>ctx.columnSizing_unstable);\n    const focusableGroupAttr = useFocusableGroup({\n        tabBehavior: 'limited-trap-focus'\n    });\n    return useTableCell_unstable({\n        as: 'div',\n        role: 'gridcell',\n        ...focusMode && focusableGroupAttr,\n        tabIndex: tabbable ? 0 : undefined,\n        ...resizableColumns ? columnSizing.getTableCellProps(columnId) : {},\n        ...props\n    }, ref);\n};\n"],"names":["useDataGridCell_unstable","props","ref","focusMode","columnId","useColumnIdContext","tabbable","useDataGridContext_unstable","ctx","resizableColumns","columnSizing","columnSizing_unstable","focusableGroupAttr","useFocusableGroup","tabBehavior","useTableCell_unstable","as","role","tabIndex","undefined","getTableCellProps"],"mappings":";;;;+BAaiBA;;aAAAA;;;6DAbM;8BACW;8BACI;iCACM;iCACT;AASxB,MAAMA,2BAA2B,CAACC,OAAOC,MAAM;IACtD,MAAM,EAAEC,UAAS,EAAG,GAAGF;IACvB,MAAMG,WAAWC,IAAAA,mCAAkB;IACnC,MAAMC,WAAWC,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIL,SAAS,KAAK,UAAUK,IAAIL,SAAS,KAAK;IAClG,MAAMM,mBAAmBF,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIC,gBAAgB;IAChF,MAAMC,eAAeH,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIG,qBAAqB;IACjF,MAAMC,qBAAqBC,IAAAA,+BAAiB,EAAC;QACzCC,aAAa;IACjB;IACA,OAAOC,IAAAA,mCAAqB,EAAC;QACzBC,IAAI;QACJC,MAAM;QACN,GAAGd,aAAaS,kBAAkB;QAClCM,UAAUZ,WAAW,IAAIa,SAAS;QAClC,GAAGV,mBAAmBC,aAAaU,iBAAiB,CAAChB,YAAY,CAAC,CAAC;QACnE,GAAGH,KAAK;IACZ,GAAGC;AACP"}

package/lib-commonjs/components/DataGridRow/useDataGridRow.js

@@ -21,7 +21,9 @@ const useDataGridRow_unstable = (props, ref)=>{
     const columnDefs = (0, _dataGridContext.useDataGridContext_unstable)((ctx)=>ctx.columns);
     const selectable = (0, _dataGridContext.useDataGridContext_unstable)((ctx)=>ctx.selectableRows);
     const selected = (0, _dataGridContext.useDataGridContext_unstable)((ctx)=>ctx.selection.isRowSelected(rowId));
-    const tabbable = (0, _dataGridContext.useDataGridContext_unstable)((ctx)=>ctx.focusMode === 'row_unstable');
+    const focusMode = (0, _dataGridContext.useDataGridContext_unstable)((ctx)=>ctx.focusMode);
+    const compositeRowTabsterAttribute = (0, _dataGridContext.useDataGridContext_unstable)((ctx)=>ctx.compositeRowTabsterAttribute);
+    const tabbable = focusMode === 'row_unstable' || focusMode === 'composite';
     const appearance = (0, _dataGridContext.useDataGridContext_unstable)((ctx)=>{
         if (!isHeader && selectable && ctx.selection.isRowSelected(rowId)) {
             return ctx.selectionAppearance;
@@ -49,12 +51,13 @@ const useDataGridRow_unstable = (props, ref)=>{
     const baseState = (0, _useTableRow.useTableRow_unstable)({
         appearance,
         'aria-selected': selectable ? selected : undefined,
+        tabIndex: tabbable && !isHeader ? 0 : undefined,
+        ...focusMode === 'composite' && !isHeader && compositeRowTabsterAttribute,
         ...props,
         onClick,
         onKeyDown,
         children: null,
-        as: 'div',
-        tabIndex: tabbable && !isHeader ? 0 : undefined
+        as: 'div'
     }, ref);
     return {
         ...baseState,

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

@@ -1 +1 @@
-{"version":3,"sources":["useDataGridRow.js"],"sourcesContent":["import * as React from 'react';\nimport { isInteractiveHTMLElement, useEventCallback, resolveShorthand } from '@fluentui/react-utilities';\nimport { Space } from '@fluentui/keyboard-keys';\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 * 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 */ export const useDataGridRow_unstable = (props, ref)=>{\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        return 'none';\n    });\n    const toggleRow = useDataGridContext_unstable((ctx)=>ctx.selection.toggleRow);\n    const dataGridContextValue = useDataGridContext_unstable((ctx)=>ctx);\n    const onClick = useEventCallback((e)=>{\n        var _props_onClick;\n        if (selectable && !isHeader) {\n            toggleRow(e, rowId);\n        }\n        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, e);\n    });\n    const onKeyDown = useEventCallback((e)=>{\n        var _props_onKeyDown;\n        if (selectable && !isHeader && e.key === Space && !isInteractiveHTMLElement(e.target)) {\n            // stop scrolling\n            e.preventDefault();\n            toggleRow(e, rowId);\n        }\n        (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, e);\n    });\n    const baseState = useTableRow_unstable({\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    }, ref);\n    return {\n        ...baseState,\n        components: {\n            ...baseState.components,\n            selectionCell: DataGridSelectionCell\n        },\n        selectionCell: resolveShorthand(props.selectionCell, {\n            required: selectable\n        }),\n        renderCell: props.children,\n        columnDefs,\n        dataGridContextValue\n    };\n};\n"],"names":["useDataGridRow_unstable","props","ref","rowId","useTableRowIdContext","isHeader","useIsInTableHeader","columnDefs","useDataGridContext_unstable","ctx","columns","selectable","selectableRows","selected","selection","isRowSelected","tabbable","focusMode","appearance","selectionAppearance","toggleRow","dataGridContextValue","onClick","useEventCallback","e","_props_onClick","call","onKeyDown","_props_onKeyDown","key","Space","isInteractiveHTMLElement","target","preventDefault","baseState","useTableRow_unstable","undefined","children","as","tabIndex","components","selectionCell","DataGridSelectionCell","resolveShorthand","required","renderCell"],"mappings":";;;;+BAgBiBA;;aAAAA;;;6DAhBM;gCACsD;8BACvD;6BACe;iCACO;uCACN;8BACD;oCACF;AASxB,MAAMA,0BAA0B,CAACC,OAAOC,MAAM;IACrD,MAAMC,QAAQC,IAAAA,kCAAoB;IAClC,MAAMC,WAAWC,IAAAA,sCAAkB;IACnC,MAAMC,aAAaC,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIC,OAAO;IACjE,MAAMC,aAAaH,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIG,cAAc;IACxE,MAAMC,WAAWL,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIK,SAAS,CAACC,aAAa,CAACZ;IAChF,MAAMa,WAAWR,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIQ,SAAS,KAAK;IACtE,MAAMC,aAAaV,IAAAA,4CAA2B,EAAC,CAACC,MAAM;QAClD,IAAI,CAACJ,YAAYM,cAAcF,IAAIK,SAAS,CAACC,aAAa,CAACZ,QAAQ;YAC/D,OAAOM,IAAIU,mBAAmB;QAClC,CAAC;QACD,OAAO;IACX;IACA,MAAMC,YAAYZ,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIK,SAAS,CAACM,SAAS;IAC5E,MAAMC,uBAAuBb,IAAAA,4CAA2B,EAAC,CAACC,MAAMA;IAChE,MAAMa,UAAUC,IAAAA,gCAAgB,EAAC,CAACC,IAAI;QAClC,IAAIC;QACJ,IAAId,cAAc,CAACN,UAAU;YACzBe,UAAUI,GAAGrB;QACjB,CAAC;QACAsB,CAAAA,iBAAiBxB,MAAMqB,OAAO,AAAD,MAAO,IAAI,IAAIG,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeC,IAAI,CAACzB,OAAOuB,EAAE;IACnH;IACA,MAAMG,YAAYJ,IAAAA,gCAAgB,EAAC,CAACC,IAAI;QACpC,IAAII;QACJ,IAAIjB,cAAc,CAACN,YAAYmB,EAAEK,GAAG,KAAKC,mBAAK,IAAI,CAACC,IAAAA,wCAAwB,EAACP,EAAEQ,MAAM,GAAG;YACnF,iBAAiB;YACjBR,EAAES,cAAc;YAChBb,UAAUI,GAAGrB;QACjB,CAAC;QACAyB,CAAAA,mBAAmB3B,MAAM0B,SAAS,AAAD,MAAO,IAAI,IAAIC,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBF,IAAI,CAACzB,OAAOuB,EAAE;IAC3H;IACA,MAAMU,YAAYC,IAAAA,iCAAoB,EAAC;QACnCjB;QACA,iBAAiBP,aAAaE,WAAWuB,SAAS;QAClD,GAAGnC,KAAK;QACRqB;QACAK;QACAU,UAAU,IAAI;QACdC,IAAI;QACJC,UAAUvB,YAAY,CAACX,WAAW,IAAI+B,SAAS;IACnD,GAAGlC;IACH,OAAO;QACH,GAAGgC,SAAS;QACZM,YAAY;YACR,GAAGN,UAAUM,UAAU;YACvBC,eAAeC,4CAAqB;QACxC;QACAD,eAAeE,IAAAA,gCAAgB,EAAC1C,MAAMwC,aAAa,EAAE;YACjDG,UAAUjC;QACd;QACAkC,YAAY5C,MAAMoC,QAAQ;QAC1B9B;QACAc;IACJ;AACJ"}
+{"version":3,"sources":["useDataGridRow.js"],"sourcesContent":["import * as React from 'react';\nimport { isInteractiveHTMLElement, useEventCallback, resolveShorthand } from '@fluentui/react-utilities';\nimport { Space } from '@fluentui/keyboard-keys';\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 * 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 */ export const useDataGridRow_unstable = (props, ref)=>{\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 focusMode = useDataGridContext_unstable((ctx)=>ctx.focusMode);\n    const compositeRowTabsterAttribute = useDataGridContext_unstable((ctx)=>ctx.compositeRowTabsterAttribute);\n    const tabbable = focusMode === 'row_unstable' || focusMode === 'composite';\n    const appearance = useDataGridContext_unstable((ctx)=>{\n        if (!isHeader && selectable && ctx.selection.isRowSelected(rowId)) {\n            return ctx.selectionAppearance;\n        }\n        return 'none';\n    });\n    const toggleRow = useDataGridContext_unstable((ctx)=>ctx.selection.toggleRow);\n    const dataGridContextValue = useDataGridContext_unstable((ctx)=>ctx);\n    const onClick = useEventCallback((e)=>{\n        var _props_onClick;\n        if (selectable && !isHeader) {\n            toggleRow(e, rowId);\n        }\n        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, e);\n    });\n    const onKeyDown = useEventCallback((e)=>{\n        var _props_onKeyDown;\n        if (selectable && !isHeader && e.key === Space && !isInteractiveHTMLElement(e.target)) {\n            // stop scrolling\n            e.preventDefault();\n            toggleRow(e, rowId);\n        }\n        (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, e);\n    });\n    const baseState = useTableRow_unstable({\n        appearance,\n        'aria-selected': selectable ? selected : undefined,\n        tabIndex: tabbable && !isHeader ? 0 : undefined,\n        ...focusMode === 'composite' && !isHeader && compositeRowTabsterAttribute,\n        ...props,\n        onClick,\n        onKeyDown,\n        children: null,\n        as: 'div'\n    }, ref);\n    return {\n        ...baseState,\n        components: {\n            ...baseState.components,\n            selectionCell: DataGridSelectionCell\n        },\n        selectionCell: resolveShorthand(props.selectionCell, {\n            required: selectable\n        }),\n        renderCell: props.children,\n        columnDefs,\n        dataGridContextValue\n    };\n};\n"],"names":["useDataGridRow_unstable","props","ref","rowId","useTableRowIdContext","isHeader","useIsInTableHeader","columnDefs","useDataGridContext_unstable","ctx","columns","selectable","selectableRows","selected","selection","isRowSelected","focusMode","compositeRowTabsterAttribute","tabbable","appearance","selectionAppearance","toggleRow","dataGridContextValue","onClick","useEventCallback","e","_props_onClick","call","onKeyDown","_props_onKeyDown","key","Space","isInteractiveHTMLElement","target","preventDefault","baseState","useTableRow_unstable","undefined","tabIndex","children","as","components","selectionCell","DataGridSelectionCell","resolveShorthand","required","renderCell"],"mappings":";;;;+BAgBiBA;;aAAAA;;;6DAhBM;gCACsD;8BACvD;6BACe;iCACO;uCACN;8BACD;oCACF;AASxB,MAAMA,0BAA0B,CAACC,OAAOC,MAAM;IACrD,MAAMC,QAAQC,IAAAA,kCAAoB;IAClC,MAAMC,WAAWC,IAAAA,sCAAkB;IACnC,MAAMC,aAAaC,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIC,OAAO;IACjE,MAAMC,aAAaH,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIG,cAAc;IACxE,MAAMC,WAAWL,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIK,SAAS,CAACC,aAAa,CAACZ;IAChF,MAAMa,YAAYR,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIO,SAAS;IAClE,MAAMC,+BAA+BT,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIQ,4BAA4B;IACxG,MAAMC,WAAWF,cAAc,kBAAkBA,cAAc;IAC/D,MAAMG,aAAaX,IAAAA,4CAA2B,EAAC,CAACC,MAAM;QAClD,IAAI,CAACJ,YAAYM,cAAcF,IAAIK,SAAS,CAACC,aAAa,CAACZ,QAAQ;YAC/D,OAAOM,IAAIW,mBAAmB;QAClC,CAAC;QACD,OAAO;IACX;IACA,MAAMC,YAAYb,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIK,SAAS,CAACO,SAAS;IAC5E,MAAMC,uBAAuBd,IAAAA,4CAA2B,EAAC,CAACC,MAAMA;IAChE,MAAMc,UAAUC,IAAAA,gCAAgB,EAAC,CAACC,IAAI;QAClC,IAAIC;QACJ,IAAIf,cAAc,CAACN,UAAU;YACzBgB,UAAUI,GAAGtB;QACjB,CAAC;QACAuB,CAAAA,iBAAiBzB,MAAMsB,OAAO,AAAD,MAAO,IAAI,IAAIG,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeC,IAAI,CAAC1B,OAAOwB,EAAE;IACnH;IACA,MAAMG,YAAYJ,IAAAA,gCAAgB,EAAC,CAACC,IAAI;QACpC,IAAII;QACJ,IAAIlB,cAAc,CAACN,YAAYoB,EAAEK,GAAG,KAAKC,mBAAK,IAAI,CAACC,IAAAA,wCAAwB,EAACP,EAAEQ,MAAM,GAAG;YACnF,iBAAiB;YACjBR,EAAES,cAAc;YAChBb,UAAUI,GAAGtB;QACjB,CAAC;QACA0B,CAAAA,mBAAmB5B,MAAM2B,SAAS,AAAD,MAAO,IAAI,IAAIC,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBF,IAAI,CAAC1B,OAAOwB,EAAE;IAC3H;IACA,MAAMU,YAAYC,IAAAA,iCAAoB,EAAC;QACnCjB;QACA,iBAAiBR,aAAaE,WAAWwB,SAAS;QAClDC,UAAUpB,YAAY,CAACb,WAAW,IAAIgC,SAAS;QAC/C,GAAGrB,cAAc,eAAe,CAACX,YAAYY,4BAA4B;QACzE,GAAGhB,KAAK;QACRsB;QACAK;QACAW,UAAU,IAAI;QACdC,IAAI;IACR,GAAGtC;IACH,OAAO;QACH,GAAGiC,SAAS;QACZM,YAAY;YACR,GAAGN,UAAUM,UAAU;YACvBC,eAAeC,4CAAqB;QACxC;QACAD,eAAeE,IAAAA,gCAAgB,EAAC3C,MAAMyC,aAAa,EAAE;YACjDG,UAAUlC;QACd;QACAmC,YAAY7C,MAAMsC,QAAQ;QAC1BhC;QACAe;IACJ;AACJ"}

package/lib-commonjs/contexts/dataGridContext.js

@@ -20,7 +20,8 @@ const dataGridContextDefaultValue = {
     subtleSelection: false,
     selectableRows: false,
     selectionAppearance: 'brand',
-    focusMode: 'none'
+    focusMode: 'none',
+    compositeRowTabsterAttribute: {}
 };
 const DataGridContextProvider = dataGridContext.Provider;
 const useDataGridContext_unstable = (selector)=>(0, _reactContextSelector.useContextSelector)(dataGridContext, (ctx = dataGridContextDefaultValue)=>selector(ctx));

package/lib-commonjs/contexts/dataGridContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["dataGridContext.js"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { defaultTableState } from '../hooks';\nconst dataGridContext = createContext(undefined);\nconst dataGridContextDefaultValue = {\n    ...defaultTableState,\n    subtleSelection: false,\n    selectableRows: false,\n    selectionAppearance: 'brand',\n    focusMode: 'none'\n};\nexport const DataGridContextProvider = dataGridContext.Provider;\nexport const useDataGridContext_unstable = (selector)=>useContextSelector(dataGridContext, (ctx = dataGridContextDefaultValue)=>selector(ctx));\n"],"names":["DataGridContextProvider","useDataGridContext_unstable","dataGridContext","createContext","undefined","dataGridContextDefaultValue","defaultTableState","subtleSelection","selectableRows","selectionAppearance","focusMode","Provider","selector","useContextSelector","ctx"],"mappings":";;;;;;;;;;;IAUaA,uBAAuB,MAAvBA;IACAC,2BAA2B,MAA3BA;;sCAXqC;uBAChB;AAClC,MAAMC,kBAAkBC,IAAAA,mCAAa,EAACC;AACtC,MAAMC,8BAA8B;IAChC,GAAGC,wBAAiB;IACpBC,iBAAiB,KAAK;IACtBC,gBAAgB,KAAK;IACrBC,qBAAqB;IACrBC,WAAW;AACf;AACO,MAAMV,0BAA0BE,gBAAgBS,QAAQ;AACxD,MAAMV,8BAA8B,CAACW,WAAWC,IAAAA,wCAAkB,EAACX,iBAAiB,CAACY,MAAMT,2BAA2B,GAAGO,SAASE"}
+{"version":3,"sources":["dataGridContext.js"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { defaultTableState } from '../hooks';\nconst dataGridContext = createContext(undefined);\nconst dataGridContextDefaultValue = {\n    ...defaultTableState,\n    subtleSelection: false,\n    selectableRows: false,\n    selectionAppearance: 'brand',\n    focusMode: 'none',\n    compositeRowTabsterAttribute: {}\n};\nexport const DataGridContextProvider = dataGridContext.Provider;\nexport const useDataGridContext_unstable = (selector)=>useContextSelector(dataGridContext, (ctx = dataGridContextDefaultValue)=>selector(ctx));\n"],"names":["DataGridContextProvider","useDataGridContext_unstable","dataGridContext","createContext","undefined","dataGridContextDefaultValue","defaultTableState","subtleSelection","selectableRows","selectionAppearance","focusMode","compositeRowTabsterAttribute","Provider","selector","useContextSelector","ctx"],"mappings":";;;;;;;;;;;IAWaA,uBAAuB,MAAvBA;IACAC,2BAA2B,MAA3BA;;sCAZqC;uBAChB;AAClC,MAAMC,kBAAkBC,IAAAA,mCAAa,EAACC;AACtC,MAAMC,8BAA8B;IAChC,GAAGC,wBAAiB;IACpBC,iBAAiB,KAAK;IACtBC,gBAAgB,KAAK;IACrBC,qBAAqB;IACrBC,WAAW;IACXC,8BAA8B,CAAC;AACnC;AACO,MAAMX,0BAA0BE,gBAAgBU,QAAQ;AACxD,MAAMX,8BAA8B,CAACY,WAAWC,IAAAA,wCAAkB,EAACZ,iBAAiB,CAACa,MAAMV,2BAA2B,GAAGQ,SAASE"}

package/lib-commonjs/hooks/index.js

@@ -9,3 +9,4 @@ _exportStar(require("./useTableSort"), exports);
 _exportStar(require("./useTableSelection"), exports);
 _exportStar(require("./createColumn"), exports);
 _exportStar(require("./useTableColumnSizing"), exports);
+_exportStar(require("./useTableCompositeNavigation"), exports);

package/lib-commonjs/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export * from './types';\nexport * from './useTableFeatures';\nexport * from './useTableSort';\nexport * from './useTableSelection';\nexport * from './createColumn';\nexport * from './useTableColumnSizing';\n"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;oBACA"}
+{"version":3,"sources":["index.js"],"sourcesContent":["export * from './types';\nexport * from './useTableFeatures';\nexport * from './useTableSort';\nexport * from './useTableSelection';\nexport * from './createColumn';\nexport * from './useTableColumnSizing';\nexport * from './useTableCompositeNavigation';\n"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA"}

package/lib-commonjs/hooks/useTableCompositeNavigation.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useTableCompositeNavigation", {
+    enumerable: true,
+    get: ()=>useTableCompositeNavigation
+});
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _reactSharedContexts = require("@fluentui/react-shared-contexts");
+const _keyboardKeys = require("@fluentui/keyboard-keys");
+const _reactTabster = require("@fluentui/react-tabster");
+const _reactUtilities = require("@fluentui/react-utilities");
+function useTableCompositeNavigation() {
+    const horizontalAttr = (0, _reactTabster.useArrowNavigationGroup)({
+        axis: 'horizontal'
+    });
+    const gridAttr = (0, _reactTabster.useArrowNavigationGroup)({
+        axis: 'grid'
+    });
+    const groupperAttr = (0, _reactTabster.useFocusableGroup)({
+        tabBehavior: 'limited-trap-focus'
+    });
+    const { findFirstFocusable  } = (0, _reactTabster.useFocusFinders)();
+    const { targetDocument  } = (0, _reactSharedContexts.useFluent_unstable)();
+    const rowAttr = (0, _reactTabster.useMergedTabsterAttributes_unstable)(horizontalAttr, groupperAttr);
+    const onKeyDown = _react.useCallback((e)=>{
+        if (!targetDocument) {
+            return;
+        }
+        const activeElement = targetDocument.activeElement;
+        if (!activeElement || !e.currentTarget.contains(activeElement)) {
+            return;
+        }
+        const activeElementRole = activeElement.getAttribute('role');
+        // Enter groupper when in row focus mode to navigate cells
+        if (e.key === _keyboardKeys.ArrowRight && activeElementRole === 'row' && (0, _reactUtilities.isHTMLElement)(activeElement)) {
+            var _findFirstFocusable;
+            (_findFirstFocusable = findFirstFocusable(activeElement)) === null || _findFirstFocusable === void 0 ? void 0 : _findFirstFocusable.focus();
+        }
+        if (activeElementRole === 'row') {
+            return;
+        }
+        const isInCell = (()=>{
+            let cur = (0, _reactUtilities.isHTMLElement)(activeElement) ? activeElement : null;
+            while(cur){
+                const curRole = cur.getAttribute('role');
+                if (curRole === 'cell' || curRole === 'gridcell') {
+                    return true;
+                }
+                cur = cur.parentElement;
+            }
+            return false;
+        })();
+        // Escape groupper focus trap before arrow down
+        if ((e.key === _keyboardKeys.ArrowDown || e.key === _keyboardKeys.ArrowUp) && isInCell) {
+            activeElement.dispatchEvent(new KeyboardEvent('keydown', {
+                key: _keyboardKeys.Escape,
+                keyCode: _keyboardKeys.keyCodes.Escape
+            }));
+            // Tabster uses keycodes
+            // eslint-disable-next-line deprecation/deprecation
+            activeElement.dispatchEvent(new KeyboardEvent('keydown', {
+                key: e.key,
+                keyCode: e.keyCode
+            }));
+        }
+    }, [
+        targetDocument,
+        findFirstFocusable
+    ]);
+    return {
+        onTableKeyDown: onKeyDown,
+        tableTabsterAttribute: gridAttr,
+        tableRowTabsterAttribute: rowAttr
+    };
+}

package/lib-commonjs/hooks/useTableCompositeNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useTableCompositeNavigation.js"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { ArrowDown, ArrowRight, Escape, keyCodes, ArrowUp } from '@fluentui/keyboard-keys';\nimport { useArrowNavigationGroup, useFocusableGroup, useMergedTabsterAttributes_unstable, useFocusFinders } from '@fluentui/react-tabster';\nimport { isHTMLElement } from '@fluentui/react-utilities';\nexport function useTableCompositeNavigation() {\n    const horizontalAttr = useArrowNavigationGroup({\n        axis: 'horizontal'\n    });\n    const gridAttr = useArrowNavigationGroup({\n        axis: 'grid'\n    });\n    const groupperAttr = useFocusableGroup({\n        tabBehavior: 'limited-trap-focus'\n    });\n    const { findFirstFocusable  } = useFocusFinders();\n    const { targetDocument  } = useFluent();\n    const rowAttr = useMergedTabsterAttributes_unstable(horizontalAttr, groupperAttr);\n    const onKeyDown = React.useCallback((e)=>{\n        if (!targetDocument) {\n            return;\n        }\n        const activeElement = targetDocument.activeElement;\n        if (!activeElement || !e.currentTarget.contains(activeElement)) {\n            return;\n        }\n        const activeElementRole = activeElement.getAttribute('role');\n        // Enter groupper when in row focus mode to navigate cells\n        if (e.key === ArrowRight && activeElementRole === 'row' && isHTMLElement(activeElement)) {\n            var _findFirstFocusable;\n            (_findFirstFocusable = findFirstFocusable(activeElement)) === null || _findFirstFocusable === void 0 ? void 0 : _findFirstFocusable.focus();\n        }\n        if (activeElementRole === 'row') {\n            return;\n        }\n        const isInCell = (()=>{\n            let cur = isHTMLElement(activeElement) ? activeElement : null;\n            while(cur){\n                const curRole = cur.getAttribute('role');\n                if (curRole === 'cell' || curRole === 'gridcell') {\n                    return true;\n                }\n                cur = cur.parentElement;\n            }\n            return false;\n        })();\n        // Escape groupper focus trap before arrow down\n        if ((e.key === ArrowDown || e.key === ArrowUp) && isInCell) {\n            activeElement.dispatchEvent(new KeyboardEvent('keydown', {\n                key: Escape,\n                keyCode: keyCodes.Escape\n            }));\n            // Tabster uses keycodes\n            // eslint-disable-next-line deprecation/deprecation\n            activeElement.dispatchEvent(new KeyboardEvent('keydown', {\n                key: e.key,\n                keyCode: e.keyCode\n            }));\n        }\n    }, [\n        targetDocument,\n        findFirstFocusable\n    ]);\n    return {\n        onTableKeyDown: onKeyDown,\n        tableTabsterAttribute: gridAttr,\n        tableRowTabsterAttribute: rowAttr\n    };\n}\n"],"names":["useTableCompositeNavigation","horizontalAttr","useArrowNavigationGroup","axis","gridAttr","groupperAttr","useFocusableGroup","tabBehavior","findFirstFocusable","useFocusFinders","targetDocument","useFluent","rowAttr","useMergedTabsterAttributes_unstable","onKeyDown","React","useCallback","e","activeElement","currentTarget","contains","activeElementRole","getAttribute","key","ArrowRight","isHTMLElement","_findFirstFocusable","focus","isInCell","cur","curRole","parentElement","ArrowDown","ArrowUp","dispatchEvent","KeyboardEvent","Escape","keyCode","keyCodes","onTableKeyDown","tableTabsterAttribute","tableRowTabsterAttribute"],"mappings":";;;;+BAKgBA;;aAAAA;;;6DALO;qCACyB;8BACiB;8BACgD;gCACnF;AACvB,SAASA,8BAA8B;IAC1C,MAAMC,iBAAiBC,IAAAA,qCAAuB,EAAC;QAC3CC,MAAM;IACV;IACA,MAAMC,WAAWF,IAAAA,qCAAuB,EAAC;QACrCC,MAAM;IACV;IACA,MAAME,eAAeC,IAAAA,+BAAiB,EAAC;QACnCC,aAAa;IACjB;IACA,MAAM,EAAEC,mBAAkB,EAAG,GAAGC,IAAAA,6BAAe;IAC/C,MAAM,EAAEC,eAAc,EAAG,GAAGC,IAAAA,uCAAS;IACrC,MAAMC,UAAUC,IAAAA,iDAAmC,EAACZ,gBAAgBI;IACpE,MAAMS,YAAYC,OAAMC,WAAW,CAAC,CAACC,IAAI;QACrC,IAAI,CAACP,gBAAgB;YACjB;QACJ,CAAC;QACD,MAAMQ,gBAAgBR,eAAeQ,aAAa;QAClD,IAAI,CAACA,iBAAiB,CAACD,EAAEE,aAAa,CAACC,QAAQ,CAACF,gBAAgB;YAC5D;QACJ,CAAC;QACD,MAAMG,oBAAoBH,cAAcI,YAAY,CAAC;QACrD,0DAA0D;QAC1D,IAAIL,EAAEM,GAAG,KAAKC,wBAAU,IAAIH,sBAAsB,SAASI,IAAAA,6BAAa,EAACP,gBAAgB;YACrF,IAAIQ;YACHA,CAAAA,sBAAsBlB,mBAAmBU,cAAa,MAAO,IAAI,IAAIQ,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBC,KAAK,EAAE;QAC/I,CAAC;QACD,IAAIN,sBAAsB,OAAO;YAC7B;QACJ,CAAC;QACD,MAAMO,WAAW,AAAC,CAAA,IAAI;YAClB,IAAIC,MAAMJ,IAAAA,6BAAa,EAACP,iBAAiBA,gBAAgB,IAAI;YAC7D,MAAMW,IAAI;gBACN,MAAMC,UAAUD,IAAIP,YAAY,CAAC;gBACjC,IAAIQ,YAAY,UAAUA,YAAY,YAAY;oBAC9C,OAAO,IAAI;gBACf,CAAC;gBACDD,MAAMA,IAAIE,aAAa;YAC3B;YACA,OAAO,KAAK;QAChB,CAAA;QACA,+CAA+C;QAC/C,IAAI,AAACd,CAAAA,EAAEM,GAAG,KAAKS,uBAAS,IAAIf,EAAEM,GAAG,KAAKU,qBAAO,AAAD,KAAML,UAAU;YACxDV,cAAcgB,aAAa,CAAC,IAAIC,cAAc,WAAW;gBACrDZ,KAAKa,oBAAM;gBACXC,SAASC,sBAAQ,CAACF,MAAM;YAC5B;YACA,wBAAwB;YACxB,mDAAmD;YACnDlB,cAAcgB,aAAa,CAAC,IAAIC,cAAc,WAAW;gBACrDZ,KAAKN,EAAEM,GAAG;gBACVc,SAASpB,EAAEoB,OAAO;YACtB;QACJ,CAAC;IACL,GAAG;QACC3B;QACAF;KACH;IACD,OAAO;QACH+B,gBAAgBzB;QAChB0B,uBAAuBpC;QACvBqC,0BAA0B7B;IAC9B;AACJ"}

package/lib-commonjs/index.js

@@ -14,6 +14,7 @@ _export(exports, {
     useTableSort: ()=>_hooks.useTableSort,
     createTableColumn: ()=>_hooks.createTableColumn,
     useTableColumnSizing_unstable: ()=>_hooks.useTableColumnSizing_unstable,
+    useTableCompositeNavigation: ()=>_hooks.useTableCompositeNavigation,
     TableCell: ()=>_tableCell.TableCell,
     tableCellClassNames: ()=>_tableCell.tableCellClassNames,
     tableCellClassName: ()=>_tableCell.tableCellClassName,

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export { useTableFeatures, useTableSelection, useTableSort, createTableColumn, useTableColumnSizing_unstable } from './hooks';\nexport { TableCell, tableCellClassNames, tableCellClassName, useTableCellStyles_unstable, useTableCell_unstable, renderTableCell_unstable } from './TableCell';\nexport { TableRow, tableRowClassNames, tableRowClassName, useTableRowStyles_unstable, useTableRow_unstable, renderTableRow_unstable } from './TableRow';\nexport { TableBody, tableBodyClassName, tableBodyClassNames, useTableBodyStyles_unstable, useTableBody_unstable, renderTableBody_unstable } from './TableBody';\nexport { Table, tableClassName, tableClassNames, useTableStyles_unstable, useTable_unstable, renderTable_unstable } from './Table';\nexport { TableHeader, tableHeaderClassNames, tableHeaderClassName, useTableHeaderStyles_unstable, useTableHeader_unstable, renderTableHeader_unstable } from './TableHeader';\nexport { TableHeaderCell, tableHeaderCellClassName, tableHeaderCellClassNames, useTableHeaderCellStyles_unstable, useTableHeaderCell_unstable, renderTableHeaderCell_unstable } from './TableHeaderCell';\nexport { TableResizeHandle, tableResizeHandleClassNames, useTableResizeHandleStyles_unstable, useTableResizeHandle_unstable, renderTableResizeHandle_unstable } from './TableResizeHandle';\nexport { TableContextProvider, useTableContext } from './contexts/tableContext';\nexport { useTableRowIdContext, TableRowIdContextProvider } from './contexts/rowIdContext';\nexport { TableSelectionCell, useTableSelectionCellStyles_unstable, useTableSelectionCell_unstable, renderTableSelectionCell_unstable, tableSelectionCellClassNames, CELL_WIDTH as TABLE_SELECTION_CELL_WIDTH } from './TableSelectionCell';\nexport { TableCellActions, tableCellActionsClassNames, useTableCellActionsStyles_unstable, useTableCellActions_unstable, renderTableCellActions_unstable } from './TableCellActions';\nexport { TableCellLayout, tableCellLayoutClassNames, useTableCellLayoutStyles_unstable, useTableCellLayout_unstable, renderTableCellLayout_unstable } from './TableCellLayout';\nexport { DataGridCell, dataGridCellClassNames, useDataGridCellStyles_unstable, useDataGridCell_unstable, renderDataGridCell_unstable } from './DataGridCell';\nexport { DataGridRow, dataGridRowClassNames, useDataGridRowStyles_unstable, useDataGridRow_unstable, renderDataGridRow_unstable } from './DataGridRow';\nexport { DataGridBody, dataGridBodyClassNames, useDataGridBodyStyles_unstable, useDataGridBody_unstable, renderDataGridBody_unstable } from './DataGridBody';\nexport { DataGrid, dataGridClassNames, useDataGridStyles_unstable, useDataGrid_unstable, renderDataGrid_unstable, useDataGridContextValues_unstable } from './DataGrid';\nexport { DataGridHeader, dataGridHeaderClassNames, useDataGridHeaderStyles_unstable, useDataGridHeader_unstable, renderDataGridHeader_unstable } from './DataGridHeader';\nexport { DataGridHeaderCell, dataGridHeaderCellClassNames, useDataGridHeaderCellStyles_unstable, useDataGridHeaderCell_unstable, renderDataGridHeaderCell_unstable } from './DataGridHeaderCell';\nexport { DataGridSelectionCell, useDataGridSelectionCellStyles_unstable, useDataGridSelectionCell_unstable, renderDataGridSelectionCell_unstable, dataGridSelectionCellClassNames } from './DataGridSelectionCell';\n"],"names":["useTableFeatures","useTableSelection","useTableSort","createTableColumn","useTableColumnSizing_unstable","TableCell","tableCellClassNames","tableCellClassName","useTableCellStyles_unstable","useTableCell_unstable","renderTableCell_unstable","TableRow","tableRowClassNames","tableRowClassName","useTableRowStyles_unstable","useTableRow_unstable","renderTableRow_unstable","TableBody","tableBodyClassName","tableBodyClassNames","useTableBodyStyles_unstable","useTableBody_unstable","renderTableBody_unstable","Table","tableClassName","tableClassNames","useTableStyles_unstable","useTable_unstable","renderTable_unstable","TableHeader","tableHeaderClassNames","tableHeaderClassName","useTableHeaderStyles_unstable","useTableHeader_unstable","renderTableHeader_unstable","TableHeaderCell","tableHeaderCellClassName","tableHeaderCellClassNames","useTableHeaderCellStyles_unstable","useTableHeaderCell_unstable","renderTableHeaderCell_unstable","TableResizeHandle","tableResizeHandleClassNames","useTableResizeHandleStyles_unstable","useTableResizeHandle_unstable","renderTableResizeHandle_unstable","TableContextProvider","useTableContext","useTableRowIdContext","TableRowIdContextProvider","TableSelectionCell","useTableSelectionCellStyles_unstable","useTableSelectionCell_unstable","renderTableSelectionCell_unstable","tableSelectionCellClassNames","TABLE_SELECTION_CELL_WIDTH","CELL_WIDTH","TableCellActions","tableCellActionsClassNames","useTableCellActionsStyles_unstable","useTableCellActions_unstable","renderTableCellActions_unstable","TableCellLayout","tableCellLayoutClassNames","useTableCellLayoutStyles_unstable","useTableCellLayout_unstable","renderTableCellLayout_unstable","DataGridCell","dataGridCellClassNames","useDataGridCellStyles_unstable","useDataGridCell_unstable","renderDataGridCell_unstable","DataGridRow","dataGridRowClassNames","useDataGridRowStyles_unstable","useDataGridRow_unstable","renderDataGridRow_unstable","DataGridBody","dataGridBodyClassNames","useDataGridBodyStyles_unstable","useDataGridBody_unstable","renderDataGridBody_unstable","DataGrid","dataGridClassNames","useDataGridStyles_unstable","useDataGrid_unstable","renderDataGrid_unstable","useDataGridContextValues_unstable","DataGridHeader","dataGridHeaderClassNames","useDataGridHeaderStyles_unstable","useDataGridHeader_unstable","renderDataGridHeader_unstable","DataGridHeaderCell","dataGridHeaderCellClassNames","useDataGridHeaderCellStyles_unstable","useDataGridHeaderCell_unstable","renderDataGridHeaderCell_unstable","DataGridSelectionCell","useDataGridSelectionCellStyles_unstable","useDataGridSelectionCell_unstable","renderDataGridSelectionCell_unstable","dataGridSelectionCellClassNames"],"mappings":"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"}
+{"version":3,"sources":["index.js"],"sourcesContent":["export { useTableFeatures, useTableSelection, useTableSort, createTableColumn, useTableColumnSizing_unstable, useTableCompositeNavigation } from './hooks';\nexport { TableCell, tableCellClassNames, tableCellClassName, useTableCellStyles_unstable, useTableCell_unstable, renderTableCell_unstable } from './TableCell';\nexport { TableRow, tableRowClassNames, tableRowClassName, useTableRowStyles_unstable, useTableRow_unstable, renderTableRow_unstable } from './TableRow';\nexport { TableBody, tableBodyClassName, tableBodyClassNames, useTableBodyStyles_unstable, useTableBody_unstable, renderTableBody_unstable } from './TableBody';\nexport { Table, tableClassName, tableClassNames, useTableStyles_unstable, useTable_unstable, renderTable_unstable } from './Table';\nexport { TableHeader, tableHeaderClassNames, tableHeaderClassName, useTableHeaderStyles_unstable, useTableHeader_unstable, renderTableHeader_unstable } from './TableHeader';\nexport { TableHeaderCell, tableHeaderCellClassName, tableHeaderCellClassNames, useTableHeaderCellStyles_unstable, useTableHeaderCell_unstable, renderTableHeaderCell_unstable } from './TableHeaderCell';\nexport { TableResizeHandle, tableResizeHandleClassNames, useTableResizeHandleStyles_unstable, useTableResizeHandle_unstable, renderTableResizeHandle_unstable } from './TableResizeHandle';\nexport { TableContextProvider, useTableContext } from './contexts/tableContext';\nexport { useTableRowIdContext, TableRowIdContextProvider } from './contexts/rowIdContext';\nexport { TableSelectionCell, useTableSelectionCellStyles_unstable, useTableSelectionCell_unstable, renderTableSelectionCell_unstable, tableSelectionCellClassNames, CELL_WIDTH as TABLE_SELECTION_CELL_WIDTH } from './TableSelectionCell';\nexport { TableCellActions, tableCellActionsClassNames, useTableCellActionsStyles_unstable, useTableCellActions_unstable, renderTableCellActions_unstable } from './TableCellActions';\nexport { TableCellLayout, tableCellLayoutClassNames, useTableCellLayoutStyles_unstable, useTableCellLayout_unstable, renderTableCellLayout_unstable } from './TableCellLayout';\nexport { DataGridCell, dataGridCellClassNames, useDataGridCellStyles_unstable, useDataGridCell_unstable, renderDataGridCell_unstable } from './DataGridCell';\nexport { DataGridRow, dataGridRowClassNames, useDataGridRowStyles_unstable, useDataGridRow_unstable, renderDataGridRow_unstable } from './DataGridRow';\nexport { DataGridBody, dataGridBodyClassNames, useDataGridBodyStyles_unstable, useDataGridBody_unstable, renderDataGridBody_unstable } from './DataGridBody';\nexport { DataGrid, dataGridClassNames, useDataGridStyles_unstable, useDataGrid_unstable, renderDataGrid_unstable, useDataGridContextValues_unstable } from './DataGrid';\nexport { DataGridHeader, dataGridHeaderClassNames, useDataGridHeaderStyles_unstable, useDataGridHeader_unstable, renderDataGridHeader_unstable } from './DataGridHeader';\nexport { DataGridHeaderCell, dataGridHeaderCellClassNames, useDataGridHeaderCellStyles_unstable, useDataGridHeaderCell_unstable, renderDataGridHeaderCell_unstable } from './DataGridHeaderCell';\nexport { DataGridSelectionCell, useDataGridSelectionCellStyles_unstable, useDataGridSelectionCell_unstable, renderDataGridSelectionCell_unstable, dataGridSelectionCellClassNames } from './DataGridSelectionCell';\n"],"names":["useTableFeatures","useTableSelection","useTableSort","createTableColumn","useTableColumnSizing_unstable","useTableCompositeNavigation","TableCell","tableCellClassNames","tableCellClassName","useTableCellStyles_unstable","useTableCell_unstable","renderTableCell_unstable","TableRow","tableRowClassNames","tableRowClassName","useTableRowStyles_unstable","useTableRow_unstable","renderTableRow_unstable","TableBody","tableBodyClassName","tableBodyClassNames","useTableBodyStyles_unstable","useTableBody_unstable","renderTableBody_unstable","Table","tableClassName","tableClassNames","useTableStyles_unstable","useTable_unstable","renderTable_unstable","TableHeader","tableHeaderClassNames","tableHeaderClassName","useTableHeaderStyles_unstable","useTableHeader_unstable","renderTableHeader_unstable","TableHeaderCell","tableHeaderCellClassName","tableHeaderCellClassNames","useTableHeaderCellStyles_unstable","useTableHeaderCell_unstable","renderTableHeaderCell_unstable","TableResizeHandle","tableResizeHandleClassNames","useTableResizeHandleStyles_unstable","useTableResizeHandle_unstable","renderTableResizeHandle_unstable","TableContextProvider","useTableContext","useTableRowIdContext","TableRowIdContextProvider","TableSelectionCell","useTableSelectionCellStyles_unstable","useTableSelectionCell_unstable","renderTableSelectionCell_unstable","tableSelectionCellClassNames","TABLE_SELECTION_CELL_WIDTH","CELL_WIDTH","TableCellActions","tableCellActionsClassNames","useTableCellActionsStyles_unstable","useTableCellActions_unstable","renderTableCellActions_unstable","TableCellLayout","tableCellLayoutClassNames","useTableCellLayoutStyles_unstable","useTableCellLayout_unstable","renderTableCellLayout_unstable","DataGridCell","dataGridCellClassNames","useDataGridCellStyles_unstable","useDataGridCell_unstable","renderDataGridCell_unstable","DataGridRow","dataGridRowClassNames","useDataGridRowStyles_unstable","useDataGridRow_unstable","renderDataGridRow_unstable","DataGridBody","dataGridBodyClassNames","useDataGridBodyStyles_unstable","useDataGridBody_unstable","renderDataGridBody_unstable","DataGrid","dataGridClassNames","useDataGridStyles_unstable","useDataGrid_unstable","renderDataGrid_unstable","useDataGridContextValues_unstable","DataGridHeader","dataGridHeaderClassNames","useDataGridHeaderStyles_unstable","useDataGridHeader_unstable","renderDataGridHeader_unstable","DataGridHeaderCell","dataGridHeaderCellClassNames","useDataGridHeaderCellStyles_unstable","useDataGridHeaderCell_unstable","renderDataGridHeaderCell_unstable","DataGridSelectionCell","useDataGridSelectionCellStyles_unstable","useDataGridSelectionCell_unstable","renderDataGridSelectionCell_unstable","dataGridSelectionCellClassNames"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-table",
-  "version": "9.4.4",
+  "version": "9.5.0",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -37,13 +37,13 @@
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.3",
     "@fluentui/react-aria": "^9.3.26",
-    "@fluentui/react-avatar": "^9.5.10",
-    "@fluentui/react-checkbox": "^9.1.22",
+    "@fluentui/react-avatar": "^9.5.11",
+    "@fluentui/react-checkbox": "^9.1.23",
     "@fluentui/react-context-selector": "^9.1.26",
     "@fluentui/react-icons": "^2.0.203",
-    "@fluentui/react-radio": "^9.1.22",
+    "@fluentui/react-radio": "^9.1.23",
     "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.9.2",
+    "@fluentui/react-tabster": "^9.10.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.10",