@fluentui/react-table 9.1.1 → 9.2.0

package/CHANGELOG.json

@@ -2,7 +2,109 @@
   "name": "@fluentui/react-table",
   "entries": [
     {
-      "date": "Fri, 10 Mar 2023 07:11:11 GMT",
+      "date": "Wed, 15 Mar 2023 10:17:03 GMT",
+      "tag": "@fluentui/react-table_v9.2.0",
+      "version": "9.2.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "jirivyhnalek@microsoft.com",
+            "package": "@fluentui/react-table",
+            "commit": "55230fb45b3e30941ee9f4005cf3ada071a4f626",
+            "comment": "Added support for keyboard navigation in Table/DataGrid"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-avatar to v9.4.3",
+            "commit": "5da01b4766ae6d81befb7bcd588d9cf8d969e1e2"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-checkbox to v9.1.3",
+            "commit": "5da01b4766ae6d81befb7bcd588d9cf8d969e1e2"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-radio to v9.1.3",
+            "commit": "5da01b4766ae6d81befb7bcd588d9cf8d969e1e2"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.3.1",
+            "commit": "5da01b4766ae6d81befb7bcd588d9cf8d969e1e2"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-tabster to v9.5.7",
+            "commit": "5da01b4766ae6d81befb7bcd588d9cf8d969e1e2"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-theme to v9.1.6",
+            "commit": "5da01b4766ae6d81befb7bcd588d9cf8d969e1e2"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 13 Mar 2023 08:58:26 GMT",
+      "tag": "@fluentui/react-table_v9.1.2",
+      "version": "9.1.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-aria to v9.3.13",
+            "commit": "edf96a6b5d6f13843ada1400480e347b84384b8e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-avatar to v9.4.2",
+            "commit": "edf96a6b5d6f13843ada1400480e347b84384b8e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-checkbox to v9.1.2",
+            "commit": "edf96a6b5d6f13843ada1400480e347b84384b8e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.13",
+            "commit": "edf96a6b5d6f13843ada1400480e347b84384b8e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-radio to v9.1.2",
+            "commit": "edf96a6b5d6f13843ada1400480e347b84384b8e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-tabster to v9.5.6",
+            "commit": "edf96a6b5d6f13843ada1400480e347b84384b8e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-utilities to v9.7.0",
+            "commit": "edf96a6b5d6f13843ada1400480e347b84384b8e"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 10 Mar 2023 07:14:01 GMT",
       "tag": "@fluentui/react-table_v9.1.1",
       "version": "9.1.1",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,42 @@
 # Change Log - @fluentui/react-table
 
-This log was last generated on Fri, 10 Mar 2023 07:11:11 GMT and should not be manually modified.
+This log was last generated on Wed, 15 Mar 2023 10:17:03 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.2.0)
+
+Wed, 15 Mar 2023 10:17:03 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.1.2..@fluentui/react-table_v9.2.0)
+
+### Minor changes
+
+- Added support for keyboard navigation in Table/DataGrid ([PR #26956](https://github.com/microsoft/fluentui/pull/26956) by jirivyhnalek@microsoft.com)
+- Bump @fluentui/react-avatar to v9.4.3 ([PR #27213](https://github.com/microsoft/fluentui/pull/27213) by beachball)
+- Bump @fluentui/react-checkbox to v9.1.3 ([PR #27213](https://github.com/microsoft/fluentui/pull/27213) by beachball)
+- Bump @fluentui/react-radio to v9.1.3 ([PR #27213](https://github.com/microsoft/fluentui/pull/27213) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.3.1 ([PR #27213](https://github.com/microsoft/fluentui/pull/27213) by beachball)
+- Bump @fluentui/react-tabster to v9.5.7 ([PR #27213](https://github.com/microsoft/fluentui/pull/27213) by beachball)
+- Bump @fluentui/react-theme to v9.1.6 ([PR #27213](https://github.com/microsoft/fluentui/pull/27213) by beachball)
+
+## [9.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.1.2)
+
+Mon, 13 Mar 2023 08:58:26 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.1.1..@fluentui/react-table_v9.1.2)
+
+### Patches
+
+- Bump @fluentui/react-aria to v9.3.13 ([PR #27161](https://github.com/microsoft/fluentui/pull/27161) by beachball)
+- Bump @fluentui/react-avatar to v9.4.2 ([PR #27161](https://github.com/microsoft/fluentui/pull/27161) by beachball)
+- Bump @fluentui/react-checkbox to v9.1.2 ([PR #27161](https://github.com/microsoft/fluentui/pull/27161) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.13 ([PR #27161](https://github.com/microsoft/fluentui/pull/27161) by beachball)
+- Bump @fluentui/react-radio to v9.1.2 ([PR #27161](https://github.com/microsoft/fluentui/pull/27161) by beachball)
+- Bump @fluentui/react-tabster to v9.5.6 ([PR #27161](https://github.com/microsoft/fluentui/pull/27161) by beachball)
+- Bump @fluentui/react-utilities to v9.7.0 ([PR #27161](https://github.com/microsoft/fluentui/pull/27161) by beachball)
+
 ## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.1.1)
 
-Fri, 10 Mar 2023 07:11:11 GMT 
+Fri, 10 Mar 2023 07:14:01 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.1.0..@fluentui/react-table_v9.1.1)
 
 ### Patches

package/dist/index.d.ts

@@ -13,7 +13,7 @@ import { ReactNode } from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
-export declare type CellRenderFunction<TItem = unknown> = (column: TableColumnDefinition<TItem>) => React_2.ReactNode;
+export declare type CellRenderFunction<TItem = unknown> = (column: TableColumnDefinition<TItem>, dataGridContextValue: DataGridContextValue) => React_2.ReactNode;
 
 declare type ColumnSizingTableCellProps = Pick<TableHeaderCellProps, 'style'>;
 
@@ -185,7 +185,7 @@ export declare type DataGridProps = TableProps & Pick<DataGridContextValue, 'ite
     /**
      * A callback triggered when a column is resized.
      */
-    onColumnResize?: (e: TouchEvent | MouseEvent | undefined, data: {
+    onColumnResize?: (e: KeyboardEvent | TouchEvent | MouseEvent | undefined, data: {
         columnId: TableColumnId;
         width: number;
     }) => void;
@@ -219,6 +219,7 @@ export declare type DataGridRowSlots = TableRowSlots & {
 export declare type DataGridRowState = TableRowState & ComponentState<DataGridRowSlots> & {
     renderCell: CellRenderFunction;
     columnDefs: TableColumnDefinition<any>[];
+    dataGridContextValue: DataGridContextValue;
 };
 
 /**
@@ -249,6 +250,8 @@ export declare type DataGridState = TableState & {
     tableState: TableFeaturesState<unknown>;
 } & Pick<DataGridContextValue, 'focusMode' | 'selectableRows' | 'subtleSelection' | 'selectionAppearance' | 'getRowId' | 'resizableColumns'>;
 
+declare type EnableKeyboardModeOnChangeCallback = (columnId: TableColumnId, isKeyboardMode: boolean) => void;
+
 declare interface OnSelectionChangeData {
     selectedItems: Set<TableRowId>;
 }
@@ -507,6 +510,7 @@ declare interface TableColumnSizingState {
     getColumnWidths: () => ColumnWidthState[];
     getTableHeaderCellProps: (columnId: TableColumnId) => ColumnSizingTableHeaderCellProps;
     getTableCellProps: (columnId: TableColumnId) => ColumnSizingTableCellProps;
+    enableKeyboardMode: (columnId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) => (e: React_2.MouseEvent | React_2.TouchEvent) => void;
 }
 
 export declare const TableContextProvider: React_2.Provider<TableContextValue | undefined>;
@@ -1016,7 +1020,7 @@ export declare function useTableColumnSizing_unstable<TItem>(params?: UseTableCo
 
 declare type UseTableColumnSizingParams = {
     columnSizingOptions?: TableColumnSizingOptions;
-    onColumnResize?: (e: TouchEvent | MouseEvent | undefined, data: {
+    onColumnResize?: (e: KeyboardEvent | TouchEvent | MouseEvent | undefined, data: {
         columnId: TableColumnId;
         width: number;
     }) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGrid/DataGrid.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { TableContextValues, TableProps, TableSlots, TableState } from '../Table/Table.types';\nimport type {\n  SortState,\n  TableFeaturesState,\n  UseTableSortOptions,\n  SelectionMode,\n  UseTableSelectionOptions,\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';\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<UseTableSelectionOptions, 'defaultSelectedItems' | 'selectedItems'> & {\n    onSortChange?: (e: React.MouseEvent, sortState: SortState) => void;\n    onSelectionChange?: (e: React.MouseEvent | React.KeyboardEvent, data: OnSelectionChangeData) => void;\n    /**\n     * Enables row selection and sets the selection mode\n     * @default false\n     */\n    selectionMode?: SelectionMode;\n    /**\n     * Options for column resizing\n     */\n    columnSizingOptions?: TableColumnSizingOptions;\n    /**\n     * A callback triggered when a column is resized.\n     */\n    onColumnResize?: (e: TouchEvent | MouseEvent | undefined, data: { columnId: TableColumnId; width: number }) => void;\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"]}
+{"version":3,"file":"DataGrid.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGrid/DataGrid.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { TableContextValues, TableProps, TableSlots, TableState } from '../Table/Table.types';\nimport type {\n  SortState,\n  TableFeaturesState,\n  UseTableSortOptions,\n  SelectionMode,\n  UseTableSelectionOptions,\n  OnSelectionChangeData,\n  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';\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<UseTableSelectionOptions, 'defaultSelectedItems' | 'selectedItems'> & {\n    onSortChange?: (e: React.MouseEvent, sortState: SortState) => void;\n    onSelectionChange?: (e: React.MouseEvent | React.KeyboardEvent, data: OnSelectionChangeData) => void;\n    /**\n     * Enables row selection and sets the selection mode\n     * @default false\n     */\n    selectionMode?: SelectionMode;\n    /**\n     * 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\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"]}

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

@@ -1 +1 @@
-{"version":3,"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","navigable","keyboardNavAttr","axis","tableState","containerWidthOffset","innerRef","useRef","findFirstFocusable","findLastFocusable","onKeyDown","e","_a","call","current","ctrlKey","defaultPrevented","key","firstRow","querySelector","_b","focus","rows","querySelectorAll","length","lastRow","item","_c","baseTableState","role","as","noNativeElements","tableRef","selectableRows"],"sources":["../src/packages/react-components/react-table/src/components/DataGrid/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  } = props;\n\n  const navigable = focusMode !== 'none';\n  const keyboardNavAttr = useArrowNavigationGroup({ axis: 'grid' });\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: selectionMode ? -CELL_WIDTH : 0,\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"],"mappings":"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"}
+{"version":3,"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","navigable","keyboardNavAttr","axis","tableState","containerWidthOffset","innerRef","useRef","findFirstFocusable","findLastFocusable","onKeyDown","e","_a","call","current","ctrlKey","defaultPrevented","key","firstRow","querySelector","_b","focus","rows","querySelectorAll","length","lastRow","item","_c","baseTableState","role","as","noNativeElements","tableRef","selectableRows"],"sources":["../src/packages/react-components/react-table/src/components/DataGrid/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  } = props;\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: selectionMode ? -CELL_WIDTH : 0,\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"],"mappings":"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"}

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

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

package/lib/components/DataGridRow/renderDataGridRow.js

@@ -16,6 +16,6 @@ export const renderDataGridRow_unstable = state => {
   }), state.columnDefs.map(columnDef => /*#__PURE__*/React.createElement(ColumnIdContextProvider, {
     value: columnDef.columnId,
     key: columnDef.columnId
-  }, state.renderCell(columnDef))));
+  }, state.renderCell(columnDef, state.dataGridContextValue))));
 };
 //# sourceMappingURL=renderDataGridRow.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","getSlots","ColumnIdContextProvider","renderDataGridRow_unstable","state","slots","slotProps","createElement","root","selectionCell","columnDefs","map","columnDef","value","columnId","key","renderCell"],"sources":["../src/packages/react-components/react-table/src/components/DataGridRow/renderDataGridRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DataGridRowState, DataGridRowSlots } from './DataGridRow.types';\nimport { ColumnIdContextProvider } from '../../contexts/columnIdContext';\n\n/**\n * Render the final JSX of DataGridRow\n */\nexport const renderDataGridRow_unstable = (state: DataGridRowState) => {\n  const { slots, slotProps } = getSlots<DataGridRowSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.selectionCell && <slots.selectionCell {...slotProps.selectionCell} />}\n      {state.columnDefs.map(columnDef => (\n        <ColumnIdContextProvider value={columnDef.columnId} key={columnDef.columnId}>\n          {state.renderCell(columnDef)}\n        </ColumnIdContextProvider>\n      ))}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAEpD,SAASC,uBAAuB,QAAQ,gCAAgC;AAExE;;;AAGA,OAAO,MAAMC,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGL,QAAQ,CAAmBG,KAAK,CAAC;EAE9D,oBACEJ,KAAA,CAAAO,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,GAC3BH,KAAK,CAACI,aAAa,iBAAIT,KAAA,CAAAO,aAAA,CAACF,KAAK,CAACI,aAAa;IAAA,GAAKH,SAAS,CAACG;EAAa,EAAI,EAC3EL,KAAK,CAACM,UAAU,CAACC,GAAG,CAACC,SAAS,iBAC7BZ,KAAA,CAAAO,aAAA,CAACL,uBAAuB;IAACW,KAAK,EAAED,SAAS,CAACE,QAAQ;IAAEC,GAAG,EAAEH,SAAS,CAACE;EAAQ,GACxEV,KAAK,CAACY,UAAU,CAACJ,SAAS,CAAC,CAE/B,CAAC,CACS;AAEjB,CAAC"}
+{"version":3,"names":["React","getSlots","ColumnIdContextProvider","renderDataGridRow_unstable","state","slots","slotProps","createElement","root","selectionCell","columnDefs","map","columnDef","value","columnId","key","renderCell","dataGridContextValue"],"sources":["../src/packages/react-components/react-table/src/components/DataGridRow/renderDataGridRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DataGridRowState, DataGridRowSlots } from './DataGridRow.types';\nimport { ColumnIdContextProvider } from '../../contexts/columnIdContext';\n\n/**\n * Render the final JSX of DataGridRow\n */\nexport const renderDataGridRow_unstable = (state: DataGridRowState) => {\n  const { slots, slotProps } = getSlots<DataGridRowSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.selectionCell && <slots.selectionCell {...slotProps.selectionCell} />}\n      {state.columnDefs.map(columnDef => (\n        <ColumnIdContextProvider value={columnDef.columnId} key={columnDef.columnId}>\n          {state.renderCell(columnDef, state.dataGridContextValue)}\n        </ColumnIdContextProvider>\n      ))}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAEpD,SAASC,uBAAuB,QAAQ,gCAAgC;AAExE;;;AAGA,OAAO,MAAMC,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGL,QAAQ,CAAmBG,KAAK,CAAC;EAE9D,oBACEJ,KAAA,CAAAO,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,GAC3BH,KAAK,CAACI,aAAa,iBAAIT,KAAA,CAAAO,aAAA,CAACF,KAAK,CAACI,aAAa;IAAA,GAAKH,SAAS,CAACG;EAAa,EAAI,EAC3EL,KAAK,CAACM,UAAU,CAACC,GAAG,CAACC,SAAS,iBAC7BZ,KAAA,CAAAO,aAAA,CAACL,uBAAuB;IAACW,KAAK,EAAED,SAAS,CAACE,QAAQ;IAAEC,GAAG,EAAEH,SAAS,CAACE;EAAQ,GACxEV,KAAK,CAACY,UAAU,CAACJ,SAAS,EAAER,KAAK,CAACa,oBAAoB,CAAC,CAE3D,CAAC,CACS;AAEjB,CAAC"}

package/lib/components/DataGridRow/useDataGridRow.js

@@ -28,6 +28,7 @@ export const useDataGridRow_unstable = (props, ref) => {
     return 'none';
   });
   const toggleRow = useDataGridContext_unstable(ctx => ctx.selection.toggleRow);
+  const dataGridContextValue = useDataGridContext_unstable(ctx => ctx);
   const onClick = useEventCallback(e => {
     var _a;
     if (selectable && !isHeader) {
@@ -64,7 +65,8 @@ export const useDataGridRow_unstable = (props, ref) => {
       required: selectable
     }),
     renderCell: props.children,
-    columnDefs
+    columnDefs,
+    dataGridContextValue
   };
 };
 //# sourceMappingURL=useDataGridRow.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["isInteractiveHTMLElement","useEventCallback","resolveShorthand","Space","useTableRow_unstable","useDataGridContext_unstable","DataGridSelectionCell","useTableRowIdContext","useIsInTableHeader","useDataGridRow_unstable","props","ref","rowId","isHeader","columnDefs","ctx","columns","selectable","selectableRows","selected","selection","isRowSelected","tabbable","focusMode","appearance","selectionAppearance","toggleRow","onClick","e","_a","call","onKeyDown","key","target","preventDefault","baseState","undefined","children","as","tabIndex","components","selectionCell","required","renderCell"],"sources":["../src/packages/react-components/react-table/src/components/DataGridRow/useDataGridRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isInteractiveHTMLElement, useEventCallback, resolveShorthand } from '@fluentui/react-utilities';\nimport { Space } from '@fluentui/keyboard-keys';\nimport type { DataGridRowProps, DataGridRowState } from './DataGridRow.types';\nimport { useTableRow_unstable } from '../TableRow/useTableRow';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { DataGridSelectionCell } from '../DataGridSelectionCell/DataGridSelectionCell';\nimport { useTableRowIdContext } from '../../contexts/rowIdContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\n/**\n * Create the state required to render DataGridRow.\n *\n * The returned state can be modified with hooks such as useDataGridRowStyles_unstable,\n * before being passed to renderDataGridRow_unstable.\n *\n * @param props - props from this instance of DataGridRow\n * @param ref - reference to root HTMLElement of DataGridRow\n */\nexport const useDataGridRow_unstable = (props: DataGridRowProps, ref: React.Ref<HTMLElement>): DataGridRowState => {\n  const rowId = useTableRowIdContext();\n  const isHeader = useIsInTableHeader();\n  const columnDefs = useDataGridContext_unstable(ctx => ctx.columns);\n  const selectable = useDataGridContext_unstable(ctx => ctx.selectableRows);\n  const selected = useDataGridContext_unstable(ctx => ctx.selection.isRowSelected(rowId));\n  const tabbable = useDataGridContext_unstable(ctx => ctx.focusMode === 'row_unstable');\n  const appearance = useDataGridContext_unstable(ctx => {\n    if (!isHeader && selectable && ctx.selection.isRowSelected(rowId)) {\n      return ctx.selectionAppearance;\n    }\n\n    return 'none';\n  });\n  const toggleRow = useDataGridContext_unstable(ctx => ctx.selection.toggleRow);\n\n  const onClick = useEventCallback((e: React.MouseEvent<HTMLTableRowElement>) => {\n    if (selectable && !isHeader) {\n      toggleRow(e, rowId);\n    }\n\n    props.onClick?.(e);\n  });\n\n  const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLTableRowElement>) => {\n    if (selectable && !isHeader && e.key === Space && !isInteractiveHTMLElement(e.target as HTMLElement)) {\n      // stop scrolling\n      e.preventDefault();\n      toggleRow(e, rowId);\n    }\n\n    props.onKeyDown?.(e);\n  });\n\n  const baseState = useTableRow_unstable(\n    {\n      appearance,\n      'aria-selected': selectable ? selected : undefined,\n      ...props,\n      onClick,\n      onKeyDown,\n      children: null,\n      as: 'div',\n      tabIndex: tabbable && !isHeader ? 0 : undefined,\n    },\n    ref,\n  );\n\n  return {\n    ...baseState,\n    components: {\n      ...baseState.components,\n      selectionCell: DataGridSelectionCell,\n    },\n    selectionCell: resolveShorthand(props.selectionCell, { required: selectable }),\n    renderCell: props.children,\n    columnDefs,\n  };\n};\n"],"mappings":"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"}
+{"version":3,"names":["isInteractiveHTMLElement","useEventCallback","resolveShorthand","Space","useTableRow_unstable","useDataGridContext_unstable","DataGridSelectionCell","useTableRowIdContext","useIsInTableHeader","useDataGridRow_unstable","props","ref","rowId","isHeader","columnDefs","ctx","columns","selectable","selectableRows","selected","selection","isRowSelected","tabbable","focusMode","appearance","selectionAppearance","toggleRow","dataGridContextValue","onClick","e","_a","call","onKeyDown","key","target","preventDefault","baseState","undefined","children","as","tabIndex","components","selectionCell","required","renderCell"],"sources":["../src/packages/react-components/react-table/src/components/DataGridRow/useDataGridRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isInteractiveHTMLElement, useEventCallback, resolveShorthand } from '@fluentui/react-utilities';\nimport { Space } from '@fluentui/keyboard-keys';\nimport type { DataGridRowProps, DataGridRowState } from './DataGridRow.types';\nimport { useTableRow_unstable } from '../TableRow/useTableRow';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { DataGridSelectionCell } from '../DataGridSelectionCell/DataGridSelectionCell';\nimport { useTableRowIdContext } from '../../contexts/rowIdContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\n/**\n * Create the state required to render DataGridRow.\n *\n * The returned state can be modified with hooks such as useDataGridRowStyles_unstable,\n * before being passed to renderDataGridRow_unstable.\n *\n * @param props - props from this instance of DataGridRow\n * @param ref - reference to root HTMLElement of DataGridRow\n */\nexport const useDataGridRow_unstable = (props: DataGridRowProps, ref: React.Ref<HTMLElement>): DataGridRowState => {\n  const rowId = useTableRowIdContext();\n  const isHeader = useIsInTableHeader();\n  const columnDefs = useDataGridContext_unstable(ctx => ctx.columns);\n  const selectable = useDataGridContext_unstable(ctx => ctx.selectableRows);\n  const selected = useDataGridContext_unstable(ctx => ctx.selection.isRowSelected(rowId));\n  const tabbable = useDataGridContext_unstable(ctx => ctx.focusMode === 'row_unstable');\n  const appearance = useDataGridContext_unstable(ctx => {\n    if (!isHeader && selectable && ctx.selection.isRowSelected(rowId)) {\n      return ctx.selectionAppearance;\n    }\n\n    return 'none';\n  });\n  const toggleRow = useDataGridContext_unstable(ctx => ctx.selection.toggleRow);\n  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"],"mappings":"AACA,SAASA,wBAAwB,EAAEC,gBAAgB,EAAEC,gBAAgB,QAAQ,2BAA2B;AACxG,SAASC,KAAK,QAAQ,yBAAyB;AAE/C,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,2BAA2B,QAAQ,gCAAgC;AAC5E,SAASC,qBAAqB,QAAQ,gDAAgD;AACtF,SAASC,oBAAoB,QAAQ,6BAA6B;AAClE,SAASC,kBAAkB,QAAQ,mCAAmC;AAEtE;;;;;;;;;AASA,OAAO,MAAMC,uBAAuB,GAAGA,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;EAChH,MAAMC,KAAK,GAAGL,oBAAoB,EAAE;EACpC,MAAMM,QAAQ,GAAGL,kBAAkB,EAAE;EACrC,MAAMM,UAAU,GAAGT,2BAA2B,CAACU,GAAG,IAAIA,GAAG,CAACC,OAAO,CAAC;EAClE,MAAMC,UAAU,GAAGZ,2BAA2B,CAACU,GAAG,IAAIA,GAAG,CAACG,cAAc,CAAC;EACzE,MAAMC,QAAQ,GAAGd,2BAA2B,CAACU,GAAG,IAAIA,GAAG,CAACK,SAAS,CAACC,aAAa,CAACT,KAAK,CAAC,CAAC;EACvF,MAAMU,QAAQ,GAAGjB,2BAA2B,CAACU,GAAG,IAAIA,GAAG,CAACQ,SAAS,KAAK,cAAc,CAAC;EACrF,MAAMC,UAAU,GAAGnB,2BAA2B,CAACU,GAAG,IAAG;IACnD,IAAI,CAACF,QAAQ,IAAII,UAAU,IAAIF,GAAG,CAACK,SAAS,CAACC,aAAa,CAACT,KAAK,CAAC,EAAE;MACjE,OAAOG,GAAG,CAACU,mBAAmB;;IAGhC,OAAO,MAAM;EACf,CAAC,CAAC;EACF,MAAMC,SAAS,GAAGrB,2BAA2B,CAACU,GAAG,IAAIA,GAAG,CAACK,SAAS,CAACM,SAAS,CAAC;EAC7E,MAAMC,oBAAoB,GAAGtB,2BAA2B,CAACU,GAAG,IAAIA,GAAG,CAAC;EAEpE,MAAMa,OAAO,GAAG3B,gBAAgB,CAAE4B,CAAwC,IAAI;;IAC5E,IAAIZ,UAAU,IAAI,CAACJ,QAAQ,EAAE;MAC3Ba,SAAS,CAACG,CAAC,EAAEjB,KAAK,CAAC;;IAGrB,CAAAkB,EAAA,GAAApB,KAAK,CAACkB,OAAO,cAAAE,EAAA,uBAAAA,EAAA,CAAAC,IAAA,CAAbrB,KAAK,EAAWmB,CAAC,CAAC;EACpB,CAAC,CAAC;EAEF,MAAMG,SAAS,GAAG/B,gBAAgB,CAAE4B,CAA2C,IAAI;;IACjF,IAAIZ,UAAU,IAAI,CAACJ,QAAQ,IAAIgB,CAAC,CAACI,GAAG,KAAK9B,KAAK,IAAI,CAACH,wBAAwB,CAAC6B,CAAC,CAACK,MAAqB,CAAC,EAAE;MACpG;MACAL,CAAC,CAACM,cAAc,EAAE;MAClBT,SAAS,CAACG,CAAC,EAAEjB,KAAK,CAAC;;IAGrB,CAAAkB,EAAA,GAAApB,KAAK,CAACsB,SAAS,cAAAF,EAAA,uBAAAA,EAAA,CAAAC,IAAA,CAAfrB,KAAK,EAAamB,CAAC,CAAC;EACtB,CAAC,CAAC;EAEF,MAAMO,SAAS,GAAGhC,oBAAoB,CACpC;IACEoB,UAAU;IACV,eAAe,EAAEP,UAAU,GAAGE,QAAQ,GAAGkB,SAAS;IAClD,GAAG3B,KAAK;IACRkB,OAAO;IACPI,SAAS;IACTM,QAAQ,EAAE,IAAI;IACdC,EAAE,EAAE,KAAK;IACTC,QAAQ,EAAElB,QAAQ,IAAI,CAACT,QAAQ,GAAG,CAAC,GAAGwB;GACvC,EACD1B,GAAG,CACJ;EAED,OAAO;IACL,GAAGyB,SAAS;IACZK,UAAU,EAAE;MACV,GAAGL,SAAS,CAACK,UAAU;MACvBC,aAAa,EAAEpC;KAChB;IACDoC,aAAa,EAAExC,gBAAgB,CAACQ,KAAK,CAACgC,aAAa,EAAE;MAAEC,QAAQ,EAAE1B;IAAU,CAAE,CAAC;IAC9E2B,UAAU,EAAElC,KAAK,CAAC4B,QAAQ;IAC1BxB,UAAU;IACVa;GACD;AACH,CAAC"}

package/lib/hooks/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { SortDirection } from '../components/Table/Table.types';\nimport { TableHeaderCellProps } from '../components/TableHeaderCell/TableHeaderCell.types';\n\nexport type TableRowId = string | number;\nexport type TableColumnId = string | number;\nexport type SelectionMode = 'single' | 'multiselect';\n\nexport interface SortState {\n  sortColumn: TableColumnId | undefined;\n  sortDirection: SortDirection;\n}\n\nexport interface OnSelectionChangeData {\n  selectedItems: Set<TableRowId>;\n}\n\nexport interface CreateTableColumnOptions<TItem> extends Partial<TableColumnDefinition<TItem>> {\n  columnId: TableColumnId;\n}\n\nexport interface TableColumnDefinition<TItem> {\n  columnId: TableColumnId;\n  compare: (a: TItem, b: TItem) => number;\n  renderHeaderCell: () => React.ReactNode;\n  renderCell: (item: TItem) => React.ReactNode;\n}\n\nexport type RowEnhancer<TItem, TRowState extends TableRowData<TItem> = TableRowData<TItem>> = (\n  row: TableRowData<TItem>,\n) => TRowState;\n\nexport interface TableSortState<TItem> {\n  /**\n   * Current sort direction\n   */\n  sortDirection: SortDirection;\n  /**\n   * Column id of the currently sorted column\n   */\n  sortColumn: TableColumnId | undefined;\n  /**\n   * Set the sort direction for the specified column\n   */\n  setColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId, sortDirection: SortDirection) => void;\n  /**\n   * Toggles the sort direction for specified column\n   */\n  toggleColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId) => void;\n  /**\n   * Returns the sort direction if a column is sorted,\n   * returns undefined if the column is not sorted\n   */\n  getSortDirection: (columnId: TableColumnId) => SortDirection | undefined;\n\n  /**\n   * Sorts rows and returns a **shallow** copy of original items\n   */\n  sort: <TRowState extends TableRowData<TItem>>(rows: TRowState[]) => TRowState[];\n}\n\nexport interface TableSelectionState {\n  /**\n   * Clears all selected rows\n   */\n  clearRows: (e: React.SyntheticEvent) => void;\n  /**\n   * Selects single row\n   */\n  selectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * De-selects single row\n   */\n  deselectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * Toggle selection of all rows\n   */\n  toggleAllRows: (e: React.SyntheticEvent) => void;\n  /**\n   * Toggle selection of single row\n   */\n  toggleRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * Collection of row ids corresponding to selected rows\n   */\n  selectedRows: Set<TableRowId>;\n  /**\n   * Whether all rows are selected\n   */\n  allRowsSelected: boolean;\n  /**\n   * Whether some rows are selected\n   */\n  someRowsSelected: boolean;\n\n  /**\n   * Checks if a given rowId is selected\n   */\n  isRowSelected: (rowId: TableRowId) => boolean;\n\n  selectionMode: SelectionMode;\n}\n\nexport interface TableRowData<TItem> {\n  /**\n   * User provided data\n   */\n  item: TItem;\n  /**\n   * The row id, defaults to index position in the collection\n   */\n  rowId: TableRowId;\n}\n\nexport interface TableFeaturesState<TItem> extends Pick<UseTableFeaturesOptions<TItem>, 'items' | 'getRowId'> {\n  /**\n   * The row data for rendering\n   * @param rowEnhancer - Enhances the row with extra user data\n   */\n  getRows: <TRowState extends TableRowData<TItem> = TableRowData<TItem>>(\n    rowEnhancer?: RowEnhancer<TItem, TRowState>,\n  ) => TRowState[];\n  /**\n   * State and actions to manage row selection\n   */\n  selection: TableSelectionState;\n  /**\n   * State and actions to manage row sorting\n   */\n  sort: TableSortState<TItem>;\n  /**\n   * Table columns\n   */\n  columns: TableColumnDefinition<TItem>[];\n  /**\n   * State and actions to manage column resizing\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  columnSizing_unstable: TableColumnSizingState;\n  /**\n   * A React.Ref object to be set as a ref for the table.\n   * Used with column resizing.\n   */\n  tableRef: React.Ref<HTMLDivElement>;\n}\n\nexport interface UseTableSortOptions {\n  /**\n   * Used to control sorting\n   */\n  sortState?: SortState;\n  /**\n   * Used in uncontrolled mode to set initial sort column and direction on mount\n   */\n  defaultSortState?: SortState;\n  /**\n   * Called when sort changes\n   */\n  onSortChange?(e: React.SyntheticEvent, state: SortState): void;\n}\n\nexport interface UseTableSelectionOptions {\n  /**\n   * Can be multi or single select\n   */\n  selectionMode: SelectionMode;\n  /**\n   * Used in uncontrolled mode to set initial selected rows on mount\n   */\n  defaultSelectedItems?: Iterable<TableRowId>;\n  /**\n   * Used to control row selection\n   */\n  selectedItems?: Iterable<TableRowId>;\n  /**\n   * Called when selection changes\n   */\n  onSelectionChange?(e: React.SyntheticEvent, data: OnSelectionChangeData): void;\n}\n\nexport interface UseTableFeaturesOptions<TItem> {\n  columns: TableColumnDefinition<TItem>[];\n  items: TItem[];\n  getRowId?: (item: TItem) => TableRowId;\n}\n\nexport type TableFeaturePlugin = <TItem>(tableState: TableFeaturesState<TItem>) => TableFeaturesState<TItem>;\n\nexport interface ColumnWidthState {\n  columnId: TableColumnId;\n  width: number;\n  minWidth: number;\n  idealWidth: number;\n  padding: number;\n}\n\nexport type ColumnSizingTableHeaderCellProps = Pick<TableHeaderCellProps, 'style' | 'aside'>;\nexport type ColumnSizingTableCellProps = Pick<TableHeaderCellProps, 'style'>;\n\nexport interface TableColumnSizingState {\n  getOnMouseDown: (columnId: TableColumnId) => (e: React.MouseEvent | React.TouchEvent) => void;\n  setColumnWidth: (columnId: TableColumnId, newSize: number) => void;\n  getColumnWidths: () => ColumnWidthState[];\n  getTableHeaderCellProps: (columnId: TableColumnId) => ColumnSizingTableHeaderCellProps;\n  getTableCellProps: (columnId: TableColumnId) => ColumnSizingTableCellProps;\n}\n\nexport type ColumnResizeState = {\n  getColumnWidth: (columnId: TableColumnId) => number;\n  setColumnWidth: (e: TouchEvent | MouseEvent | undefined, data: { columnId: TableColumnId; width: number }) => void;\n  getColumnById: (columnId: TableColumnId) => ColumnWidthState | undefined;\n  getColumns: () => ColumnWidthState[];\n};\n\nexport type TableColumnSizingOptions = Record<\n  TableColumnId,\n  Partial<Pick<ColumnWidthState, 'minWidth' | 'idealWidth' | 'padding'>> & { defaultWidth?: number }\n>;\n\nexport type UseTableColumnSizingParams = {\n  columnSizingOptions?: TableColumnSizingOptions;\n  onColumnResize?: (e: TouchEvent | MouseEvent | undefined, data: { columnId: TableColumnId; width: number }) => void;\n  containerWidthOffset?: number;\n};\n"]}
+{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { SortDirection } from '../components/Table/Table.types';\nimport { TableHeaderCellProps } from '../components/TableHeaderCell/TableHeaderCell.types';\n\nexport type TableRowId = string | number;\nexport type TableColumnId = string | number;\nexport type SelectionMode = 'single' | 'multiselect';\n\nexport interface SortState {\n  sortColumn: TableColumnId | undefined;\n  sortDirection: SortDirection;\n}\n\nexport interface OnSelectionChangeData {\n  selectedItems: Set<TableRowId>;\n}\n\nexport interface CreateTableColumnOptions<TItem> extends Partial<TableColumnDefinition<TItem>> {\n  columnId: TableColumnId;\n}\n\nexport interface TableColumnDefinition<TItem> {\n  columnId: TableColumnId;\n  compare: (a: TItem, b: TItem) => number;\n  renderHeaderCell: () => React.ReactNode;\n  renderCell: (item: TItem) => React.ReactNode;\n}\n\nexport type RowEnhancer<TItem, TRowState extends TableRowData<TItem> = TableRowData<TItem>> = (\n  row: TableRowData<TItem>,\n) => TRowState;\n\nexport interface TableSortState<TItem> {\n  /**\n   * Current sort direction\n   */\n  sortDirection: SortDirection;\n  /**\n   * Column id of the currently sorted column\n   */\n  sortColumn: TableColumnId | undefined;\n  /**\n   * Set the sort direction for the specified column\n   */\n  setColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId, sortDirection: SortDirection) => void;\n  /**\n   * Toggles the sort direction for specified column\n   */\n  toggleColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId) => void;\n  /**\n   * Returns the sort direction if a column is sorted,\n   * returns undefined if the column is not sorted\n   */\n  getSortDirection: (columnId: TableColumnId) => SortDirection | undefined;\n\n  /**\n   * Sorts rows and returns a **shallow** copy of original items\n   */\n  sort: <TRowState extends TableRowData<TItem>>(rows: TRowState[]) => TRowState[];\n}\n\nexport interface TableSelectionState {\n  /**\n   * Clears all selected rows\n   */\n  clearRows: (e: React.SyntheticEvent) => void;\n  /**\n   * Selects single row\n   */\n  selectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * De-selects single row\n   */\n  deselectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * Toggle selection of all rows\n   */\n  toggleAllRows: (e: React.SyntheticEvent) => void;\n  /**\n   * Toggle selection of single row\n   */\n  toggleRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * Collection of row ids corresponding to selected rows\n   */\n  selectedRows: Set<TableRowId>;\n  /**\n   * Whether all rows are selected\n   */\n  allRowsSelected: boolean;\n  /**\n   * Whether some rows are selected\n   */\n  someRowsSelected: boolean;\n\n  /**\n   * Checks if a given rowId is selected\n   */\n  isRowSelected: (rowId: TableRowId) => boolean;\n\n  selectionMode: SelectionMode;\n}\n\nexport interface TableRowData<TItem> {\n  /**\n   * User provided data\n   */\n  item: TItem;\n  /**\n   * The row id, defaults to index position in the collection\n   */\n  rowId: TableRowId;\n}\n\nexport interface TableFeaturesState<TItem> extends Pick<UseTableFeaturesOptions<TItem>, 'items' | 'getRowId'> {\n  /**\n   * The row data for rendering\n   * @param rowEnhancer - Enhances the row with extra user data\n   */\n  getRows: <TRowState extends TableRowData<TItem> = TableRowData<TItem>>(\n    rowEnhancer?: RowEnhancer<TItem, TRowState>,\n  ) => TRowState[];\n  /**\n   * State and actions to manage row selection\n   */\n  selection: TableSelectionState;\n  /**\n   * State and actions to manage row sorting\n   */\n  sort: TableSortState<TItem>;\n  /**\n   * Table columns\n   */\n  columns: TableColumnDefinition<TItem>[];\n  /**\n   * State and actions to manage column resizing\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  columnSizing_unstable: TableColumnSizingState;\n  /**\n   * A React.Ref object to be set as a ref for the table.\n   * Used with column resizing.\n   */\n  tableRef: React.Ref<HTMLDivElement>;\n}\n\nexport interface UseTableSortOptions {\n  /**\n   * Used to control sorting\n   */\n  sortState?: SortState;\n  /**\n   * Used in uncontrolled mode to set initial sort column and direction on mount\n   */\n  defaultSortState?: SortState;\n  /**\n   * Called when sort changes\n   */\n  onSortChange?(e: React.SyntheticEvent, state: SortState): void;\n}\n\nexport interface UseTableSelectionOptions {\n  /**\n   * Can be multi or single select\n   */\n  selectionMode: SelectionMode;\n  /**\n   * Used in uncontrolled mode to set initial selected rows on mount\n   */\n  defaultSelectedItems?: Iterable<TableRowId>;\n  /**\n   * Used to control row selection\n   */\n  selectedItems?: Iterable<TableRowId>;\n  /**\n   * Called when selection changes\n   */\n  onSelectionChange?(e: React.SyntheticEvent, data: OnSelectionChangeData): void;\n}\n\nexport interface UseTableFeaturesOptions<TItem> {\n  columns: TableColumnDefinition<TItem>[];\n  items: TItem[];\n  getRowId?: (item: TItem) => TableRowId;\n}\n\nexport type TableFeaturePlugin = <TItem>(tableState: TableFeaturesState<TItem>) => TableFeaturesState<TItem>;\n\nexport interface ColumnWidthState {\n  columnId: TableColumnId;\n  width: number;\n  minWidth: number;\n  idealWidth: number;\n  padding: number;\n}\n\nexport type ColumnSizingTableHeaderCellProps = Pick<TableHeaderCellProps, 'style' | 'aside'>;\nexport type ColumnSizingTableCellProps = Pick<TableHeaderCellProps, 'style'>;\n\nexport type EnableKeyboardModeOnChangeCallback = (columnId: TableColumnId, isKeyboardMode: boolean) => void;\n\nexport interface TableColumnSizingState {\n  getOnMouseDown: (columnId: TableColumnId) => (e: React.MouseEvent | React.TouchEvent) => void;\n  setColumnWidth: (columnId: TableColumnId, newSize: number) => void;\n  getColumnWidths: () => ColumnWidthState[];\n  getTableHeaderCellProps: (columnId: TableColumnId) => ColumnSizingTableHeaderCellProps;\n  getTableCellProps: (columnId: TableColumnId) => ColumnSizingTableCellProps;\n  enableKeyboardMode: (\n    columnId: TableColumnId,\n    onChange?: EnableKeyboardModeOnChangeCallback,\n  ) => (e: React.MouseEvent | React.TouchEvent) => void;\n}\n\nexport type ColumnResizeState = {\n  getColumnWidth: (columnId: TableColumnId) => number;\n  setColumnWidth: (\n    e: KeyboardEvent | TouchEvent | MouseEvent | undefined,\n    data: { columnId: TableColumnId; width: number },\n  ) => void;\n  getColumnById: (columnId: TableColumnId) => ColumnWidthState | undefined;\n  getColumns: () => ColumnWidthState[];\n};\n\nexport type TableColumnSizingOptions = Record<\n  TableColumnId,\n  Partial<Pick<ColumnWidthState, 'minWidth' | 'idealWidth' | 'padding'>> & { defaultWidth?: number }\n>;\n\nexport type UseTableColumnSizingParams = {\n  columnSizingOptions?: TableColumnSizingOptions;\n  onColumnResize?: (\n    e: KeyboardEvent | TouchEvent | MouseEvent | undefined,\n    data: { columnId: TableColumnId; width: number },\n  ) => void;\n  containerWidthOffset?: number;\n};\n"]}

package/lib/hooks/useKeyboardResizing.js

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { ArrowLeft, ArrowRight, Enter, Escape, Shift, Space } from '@fluentui/keyboard-keys';
+import { useEventCallback } from '@fluentui/react-utilities';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+const STEP = 20;
+const PRECISION_MODIFIER = Shift;
+const PRECISION_FACTOR = 1 / 4;
+export function useKeyboardResizing(columnResizeState) {
+  const columnId = React.useRef();
+  const onChangeRef = React.useRef();
+  const addListenerTimeout = React.useRef();
+  const columnResizeStateRef = React.useRef(columnResizeState);
+  React.useEffect(() => {
+    columnResizeStateRef.current = columnResizeState;
+  }, [columnResizeState]);
+  const {
+    targetDocument
+  } = useFluent();
+  const keyboardHandler = useEventCallback(event => {
+    const colId = columnId.current;
+    if (!colId) {
+      return;
+    }
+    const width = columnResizeStateRef.current.getColumnWidth(colId);
+    const precisionModifier = event.getModifierState(PRECISION_MODIFIER);
+    const stopEvent = () => {
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    switch (event.key) {
+      case ArrowLeft:
+        stopEvent();
+        columnResizeStateRef.current.setColumnWidth(event, {
+          columnId: colId,
+          width: width - (precisionModifier ? STEP * PRECISION_FACTOR : STEP)
+        });
+        return;
+      case ArrowRight:
+        stopEvent();
+        columnResizeStateRef.current.setColumnWidth(event, {
+          columnId: colId,
+          width: width + (precisionModifier ? STEP * PRECISION_FACTOR : STEP)
+        });
+        return;
+      case Space:
+      case Enter:
+      case Escape:
+        stopEvent();
+        disableInteractiveMode();
+        break;
+    }
+  });
+  // On component unmout, cancel any timer for adding a listener (if it exists) and remove the listener
+  React.useEffect(() => () => {
+    var _a, _b;
+    (_a = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) === null || _a === void 0 ? void 0 : _a.clearTimeout(addListenerTimeout.current);
+    (_b = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) === null || _b === void 0 ? void 0 : _b.removeEventListener('keydown', keyboardHandler);
+  }, [keyboardHandler, targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView]);
+  const enableInteractiveMode = React.useCallback(colId => {
+    var _a, _b;
+    columnId.current = colId;
+    (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, colId, true);
+    // Create the listener in the next tick, because the event that triggered this is still propagating
+    // when Enter was pressed and would be caught in the keyboardHandler, disabling the keyboard mode immediately.
+    // No idea why this is happening, but this is a working workaround.
+    // Tracked here: https://github.com/microsoft/fluentui/issues/27177
+    addListenerTimeout.current = (_b = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) === null || _b === void 0 ? void 0 : _b.setTimeout(() => {
+      var _a;
+      (_a = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', keyboardHandler);
+    }, 0);
+  }, [keyboardHandler, targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView]);
+  const disableInteractiveMode = React.useCallback(() => {
+    var _a, _b;
+    if (columnId.current) {
+      (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, columnId.current, false);
+    }
+    columnId.current = undefined;
+    (_b = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) === null || _b === void 0 ? void 0 : _b.removeEventListener('keydown', keyboardHandler);
+  }, [keyboardHandler, targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView]);
+  const toggleInteractiveMode = (colId, onChange) => {
+    onChangeRef.current = onChange;
+    if (!columnId.current) {
+      enableInteractiveMode(colId);
+    } else if (colId && columnId.current !== colId) {
+      columnId.current = colId;
+      onChange === null || onChange === void 0 ? void 0 : onChange(columnId.current, true);
+    } else {
+      disableInteractiveMode();
+    }
+  };
+  return {
+    toggleInteractiveMode
+  };
+}
+//# sourceMappingURL=useKeyboardResizing.js.map

package/lib/hooks/useKeyboardResizing.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ArrowLeft","ArrowRight","Enter","Escape","Shift","Space","useEventCallback","useFluent_unstable","useFluent","STEP","PRECISION_MODIFIER","PRECISION_FACTOR","useKeyboardResizing","columnResizeState","columnId","useRef","onChangeRef","addListenerTimeout","columnResizeStateRef","useEffect","current","targetDocument","keyboardHandler","event","colId","width","getColumnWidth","precisionModifier","getModifierState","stopEvent","preventDefault","stopPropagation","key","setColumnWidth","disableInteractiveMode","_a","defaultView","clearTimeout","_b","removeEventListener","enableInteractiveMode","useCallback","call","setTimeout","addEventListener","undefined","toggleInteractiveMode","onChange"],"sources":["../src/packages/react-components/react-table/src/hooks/useKeyboardResizing.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, ArrowRight, Enter, Escape, Shift, Space } from '@fluentui/keyboard-keys';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { ColumnResizeState, EnableKeyboardModeOnChangeCallback, TableColumnId } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nconst STEP = 20;\nconst PRECISION_MODIFIER = Shift;\nconst PRECISION_FACTOR = 1 / 4;\n\nexport function useKeyboardResizing(columnResizeState: ColumnResizeState) {\n  const columnId = React.useRef<TableColumnId>();\n  const onChangeRef = React.useRef<EnableKeyboardModeOnChangeCallback>();\n  const addListenerTimeout = React.useRef<number>();\n\n  const columnResizeStateRef = React.useRef<ColumnResizeState>(columnResizeState);\n  React.useEffect(() => {\n    columnResizeStateRef.current = columnResizeState;\n  }, [columnResizeState]);\n\n  const { targetDocument } = useFluent();\n\n  const keyboardHandler = useEventCallback((event: KeyboardEvent) => {\n    const colId = columnId.current;\n\n    if (!colId) {\n      return;\n    }\n\n    const width = columnResizeStateRef.current.getColumnWidth(colId);\n    const precisionModifier = event.getModifierState(PRECISION_MODIFIER);\n\n    const stopEvent = () => {\n      event.preventDefault();\n      event.stopPropagation();\n    };\n\n    switch (event.key) {\n      case ArrowLeft:\n        stopEvent();\n        columnResizeStateRef.current.setColumnWidth(event, {\n          columnId: colId,\n          width: width - (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n        });\n        return;\n\n      case ArrowRight:\n        stopEvent();\n        columnResizeStateRef.current.setColumnWidth(event, {\n          columnId: colId,\n          width: width + (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n        });\n        return;\n\n      case Space:\n      case Enter:\n      case Escape:\n        stopEvent();\n        disableInteractiveMode();\n        break;\n    }\n  });\n\n  // On component unmout, cancel any timer for adding a listener (if it exists) and remove the listener\n  React.useEffect(\n    () => () => {\n      targetDocument?.defaultView?.clearTimeout(addListenerTimeout.current);\n      targetDocument?.defaultView?.removeEventListener('keydown', keyboardHandler);\n    },\n    [keyboardHandler, targetDocument?.defaultView],\n  );\n\n  const enableInteractiveMode = React.useCallback(\n    (colId: TableColumnId) => {\n      columnId.current = colId;\n      onChangeRef.current?.(colId, true);\n      // Create the listener in the next tick, because the event that triggered this is still propagating\n      // when Enter was pressed and would be caught in the keyboardHandler, disabling the keyboard mode immediately.\n      // No idea why this is happening, but this is a working workaround.\n      // Tracked here: https://github.com/microsoft/fluentui/issues/27177\n      addListenerTimeout.current = targetDocument?.defaultView?.setTimeout(() => {\n        targetDocument?.defaultView?.addEventListener('keydown', keyboardHandler);\n      }, 0);\n    },\n    [keyboardHandler, targetDocument?.defaultView],\n  );\n\n  const disableInteractiveMode = React.useCallback(() => {\n    if (columnId.current) {\n      onChangeRef.current?.(columnId.current, false);\n    }\n    columnId.current = undefined;\n    targetDocument?.defaultView?.removeEventListener('keydown', keyboardHandler);\n  }, [keyboardHandler, targetDocument?.defaultView]);\n\n  const toggleInteractiveMode = (colId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) => {\n    onChangeRef.current = onChange;\n    if (!columnId.current) {\n      enableInteractiveMode(colId);\n    } else if (colId && columnId.current !== colId) {\n      columnId.current = colId;\n      onChange?.(columnId.current, true);\n    } else {\n      disableInteractiveMode();\n    }\n  };\n\n  return {\n    toggleInteractiveMode,\n  };\n}\n"],"mappings":"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"}

package/lib/hooks/useTableColumnResizeState.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEventCallback","useIsomorphicLayoutEffect","React","columnDefinitionsToState","adjustColumnWidthsToFitContainer","getColumnById","setColumnProperty","getColumnWidth","createReducer","state","action","type","containerWidth","columnWidthState","newS","columns","columnSizingOptions","newState","columnId","width","column","newColumnWidthState","useTableColumnResizeState","params","onColumnResize","reducer","useMemo","dispatch","useReducer","undefined","setColumnWidth","event","data","col","Math","max","minWidth","colId","getColumns"],"sources":["../src/packages/react-components/react-table/src/hooks/useTableColumnResizeState.ts"],"sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport {\n  TableColumnDefinition,\n  TableColumnId,\n  ColumnResizeState,\n  ColumnWidthState,\n  UseTableColumnSizingParams,\n  TableColumnSizingOptions,\n} from './types';\nimport {\n  columnDefinitionsToState,\n  adjustColumnWidthsToFitContainer,\n  getColumnById,\n  setColumnProperty,\n  getColumnWidth,\n} from '../utils/columnResizeUtils';\n\ntype ComponentState<T> = {\n  columns: TableColumnDefinition<T>[];\n  containerWidth: number;\n  columnWidthState: ColumnWidthState[];\n  columnSizingOptions: TableColumnSizingOptions | undefined;\n};\n\ntype ColumnResizeStateAction<T> =\n  | {\n      type: 'CONTAINER_WIDTH_UPDATED';\n      containerWidth: number;\n    }\n  | {\n      type: 'COLUMNS_UPDATED';\n      columns: TableColumnDefinition<T>[];\n    }\n  | {\n      type: 'COLUMN_SIZING_OPTIONS_UPDATED';\n      columnSizingOptions: TableColumnSizingOptions | undefined;\n    }\n  | {\n      type: 'SET_COLUMN_WIDTH';\n      columnId: TableColumnId;\n      width: number;\n    };\n\nconst createReducer =\n  <T>() =>\n  (state: ComponentState<T>, action: ColumnResizeStateAction<T>): ComponentState<T> => {\n    switch (action.type) {\n      case 'CONTAINER_WIDTH_UPDATED':\n        return {\n          ...state,\n          containerWidth: action.containerWidth,\n          columnWidthState: adjustColumnWidthsToFitContainer(state.columnWidthState, action.containerWidth),\n        };\n\n      case 'COLUMNS_UPDATED':\n        const newS = columnDefinitionsToState(action.columns, state.columnWidthState, state.columnSizingOptions);\n        return {\n          ...state,\n          columns: action.columns,\n          columnWidthState: adjustColumnWidthsToFitContainer(newS, state.containerWidth),\n        };\n\n      case 'COLUMN_SIZING_OPTIONS_UPDATED':\n        const newState = columnDefinitionsToState(state.columns, state.columnWidthState, action.columnSizingOptions);\n        return {\n          ...state,\n          columnSizingOptions: action.columnSizingOptions,\n          columnWidthState: adjustColumnWidthsToFitContainer(newState, state.containerWidth),\n        };\n\n      case 'SET_COLUMN_WIDTH':\n        const { columnId, width } = action;\n        const { containerWidth } = state;\n\n        const column = getColumnById(state.columnWidthState, columnId);\n        let newColumnWidthState = [...state.columnWidthState];\n\n        if (!column) {\n          return state;\n        }\n\n        // Adjust the column width and measure the new total width\n        newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'width', width);\n        // Set this width as idealWidth, because its a deliberate change, not a recalculation because of container\n        newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'idealWidth', width);\n        // Adjust the widths to the container size\n        newColumnWidthState = adjustColumnWidthsToFitContainer(newColumnWidthState, containerWidth);\n\n        return { ...state, columnWidthState: newColumnWidthState };\n    }\n  };\n\nexport function useTableColumnResizeState<T>(\n  columns: TableColumnDefinition<T>[],\n  containerWidth: number,\n  params: UseTableColumnSizingParams = {},\n): ColumnResizeState {\n  const { onColumnResize, columnSizingOptions } = params;\n\n  const reducer = React.useMemo(() => createReducer<T>(), []);\n\n  const [state, dispatch] = React.useReducer(reducer, {\n    columns,\n    containerWidth: 0,\n    columnWidthState: columnDefinitionsToState(columns, undefined, columnSizingOptions),\n    columnSizingOptions,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'CONTAINER_WIDTH_UPDATED', containerWidth });\n  }, [containerWidth]);\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'COLUMNS_UPDATED', columns });\n  }, [columns]);\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'COLUMN_SIZING_OPTIONS_UPDATED', columnSizingOptions });\n  }, [columnSizingOptions]);\n\n  const setColumnWidth = useEventCallback(\n    (event: MouseEvent | TouchEvent | undefined, data: { columnId: TableColumnId; width: number }) => {\n      let { width } = data;\n      const { columnId } = data;\n      const col = getColumnById(state.columnWidthState, columnId);\n      if (!col) {\n        return;\n      }\n\n      width = Math.max(col.minWidth || 0, width);\n\n      if (onColumnResize) {\n        onColumnResize(event, { columnId, width });\n      }\n      dispatch({ type: 'SET_COLUMN_WIDTH', columnId, width });\n    },\n  );\n\n  return {\n    getColumnById: (colId: TableColumnId) => getColumnById(state.columnWidthState, colId),\n    getColumns: () => state.columnWidthState,\n    getColumnWidth: (colId: TableColumnId) => getColumnWidth(state.columnWidthState, colId),\n    setColumnWidth,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"names":["useEventCallback","useIsomorphicLayoutEffect","React","columnDefinitionsToState","adjustColumnWidthsToFitContainer","getColumnById","setColumnProperty","getColumnWidth","createReducer","state","action","type","containerWidth","columnWidthState","newS","columns","columnSizingOptions","newState","columnId","width","column","newColumnWidthState","useTableColumnResizeState","params","onColumnResize","reducer","useMemo","dispatch","useReducer","undefined","setColumnWidth","event","data","col","Math","max","minWidth","colId","getColumns"],"sources":["../src/packages/react-components/react-table/src/hooks/useTableColumnResizeState.ts"],"sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport {\n  TableColumnDefinition,\n  TableColumnId,\n  ColumnResizeState,\n  ColumnWidthState,\n  UseTableColumnSizingParams,\n  TableColumnSizingOptions,\n} from './types';\nimport {\n  columnDefinitionsToState,\n  adjustColumnWidthsToFitContainer,\n  getColumnById,\n  setColumnProperty,\n  getColumnWidth,\n} from '../utils/columnResizeUtils';\n\ntype ComponentState<T> = {\n  columns: TableColumnDefinition<T>[];\n  containerWidth: number;\n  columnWidthState: ColumnWidthState[];\n  columnSizingOptions: TableColumnSizingOptions | undefined;\n};\n\ntype ColumnResizeStateAction<T> =\n  | {\n      type: 'CONTAINER_WIDTH_UPDATED';\n      containerWidth: number;\n    }\n  | {\n      type: 'COLUMNS_UPDATED';\n      columns: TableColumnDefinition<T>[];\n    }\n  | {\n      type: 'COLUMN_SIZING_OPTIONS_UPDATED';\n      columnSizingOptions: TableColumnSizingOptions | undefined;\n    }\n  | {\n      type: 'SET_COLUMN_WIDTH';\n      columnId: TableColumnId;\n      width: number;\n    };\n\nconst createReducer =\n  <T>() =>\n  (state: ComponentState<T>, action: ColumnResizeStateAction<T>): ComponentState<T> => {\n    switch (action.type) {\n      case 'CONTAINER_WIDTH_UPDATED':\n        return {\n          ...state,\n          containerWidth: action.containerWidth,\n          columnWidthState: adjustColumnWidthsToFitContainer(state.columnWidthState, action.containerWidth),\n        };\n\n      case 'COLUMNS_UPDATED':\n        const newS = columnDefinitionsToState(action.columns, state.columnWidthState, state.columnSizingOptions);\n        return {\n          ...state,\n          columns: action.columns,\n          columnWidthState: adjustColumnWidthsToFitContainer(newS, state.containerWidth),\n        };\n\n      case 'COLUMN_SIZING_OPTIONS_UPDATED':\n        const newState = columnDefinitionsToState(state.columns, state.columnWidthState, action.columnSizingOptions);\n        return {\n          ...state,\n          columnSizingOptions: action.columnSizingOptions,\n          columnWidthState: adjustColumnWidthsToFitContainer(newState, state.containerWidth),\n        };\n\n      case 'SET_COLUMN_WIDTH':\n        const { columnId, width } = action;\n        const { containerWidth } = state;\n\n        const column = getColumnById(state.columnWidthState, columnId);\n        let newColumnWidthState = [...state.columnWidthState];\n\n        if (!column) {\n          return state;\n        }\n\n        // Adjust the column width and measure the new total width\n        newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'width', width);\n        // Set this width as idealWidth, because its a deliberate change, not a recalculation because of container\n        newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'idealWidth', width);\n        // Adjust the widths to the container size\n        newColumnWidthState = adjustColumnWidthsToFitContainer(newColumnWidthState, containerWidth);\n\n        return { ...state, columnWidthState: newColumnWidthState };\n    }\n  };\n\nexport function useTableColumnResizeState<T>(\n  columns: TableColumnDefinition<T>[],\n  containerWidth: number,\n  params: UseTableColumnSizingParams = {},\n): ColumnResizeState {\n  const { onColumnResize, columnSizingOptions } = params;\n\n  const reducer = React.useMemo(() => createReducer<T>(), []);\n\n  const [state, dispatch] = React.useReducer(reducer, {\n    columns,\n    containerWidth: 0,\n    columnWidthState: columnDefinitionsToState(columns, undefined, columnSizingOptions),\n    columnSizingOptions,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'CONTAINER_WIDTH_UPDATED', containerWidth });\n  }, [containerWidth]);\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'COLUMNS_UPDATED', columns });\n  }, [columns]);\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'COLUMN_SIZING_OPTIONS_UPDATED', columnSizingOptions });\n  }, [columnSizingOptions]);\n\n  const setColumnWidth = useEventCallback(\n    (event: KeyboardEvent | MouseEvent | TouchEvent | undefined, data: { columnId: TableColumnId; width: number }) => {\n      let { width } = data;\n      const { columnId } = data;\n      const col = getColumnById(state.columnWidthState, columnId);\n      if (!col) {\n        return;\n      }\n\n      width = Math.max(col.minWidth || 0, width);\n\n      if (onColumnResize) {\n        onColumnResize(event, { columnId, width });\n      }\n      dispatch({ type: 'SET_COLUMN_WIDTH', columnId, width });\n    },\n  );\n\n  return {\n    getColumnById: (colId: TableColumnId) => getColumnById(state.columnWidthState, colId),\n    getColumns: () => state.columnWidthState,\n    getColumnWidth: (colId: TableColumnId) => getColumnWidth(state.columnWidthState, colId),\n    setColumnWidth,\n  };\n}\n"],"mappings":"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"}

package/lib/hooks/useTableColumnSizing.js

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { useTableColumnResizeState } from './useTableColumnResizeState';
-import { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';
-import { useMeasureElement } from './useMeasureElement';
 import { TableResizeHandle } from '../TableResizeHandle';
+import { useMeasureElement } from './useMeasureElement';
+import { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';
+import { useTableColumnResizeState } from './useTableColumnResizeState';
+import { useKeyboardResizing } from './useKeyboardResizing';
 export const defaultColumnSizingState = {
   getColumnWidths: () => [],
   getOnMouseDown: () => () => null,
@@ -14,7 +15,8 @@ export const defaultColumnSizingState = {
   getTableCellProps: () => ({
     style: {},
     columnId: ''
-  })
+  }),
+  enableKeyboardMode: () => () => null
 };
 export function useTableColumnSizing_unstable(params) {
   // False positive, these plugin hooks are intended to be run on every render
@@ -44,6 +46,13 @@ function useTableColumnSizingState(tableState, params) {
   const columnResizeState = useTableColumnResizeState(columns, width + ((params === null || params === void 0 ? void 0 : params.containerWidthOffset) || 0), params);
   // Creates the mouse handler and attaches the state to it
   const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);
+  // Creates the keyboard handler for resizing columns
+  const keyboardResizing = useKeyboardResizing(columnResizeState);
+  const enableKeyboardMode = React.useCallback((columnId, onChange) => e => {
+    e.preventDefault();
+    e.nativeEvent.stopPropagation();
+    keyboardResizing.toggleInteractiveMode(columnId, onChange);
+  }, [keyboardResizing]);
   return {
     ...tableState,
     tableRef: measureElementRef,
@@ -71,7 +80,8 @@ function useTableColumnSizingState(tableState, params) {
         return col ? {
           style: getColumnStyles(col)
         } : {};
-      }
+      },
+      enableKeyboardMode
     }
   };
 }