@fluentui/react-table 9.12.1 → 9.14.0

package/CHANGELOG.md

@@ -1,25 +1,52 @@
 # Change Log - @fluentui/react-table
 
-This log was last generated on Tue, 02 Apr 2024 09:41:20 GMT and should not be manually modified.
+This log was last generated on Wed, 17 Apr 2024 21:47:28 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.14.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.14.0)
+
+Wed, 17 Apr 2024 21:47:28 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.13.0..@fluentui/react-table_v9.14.0)
+
+### Minor changes
+
+- Tabster 7.1.0. ([PR #30969](https://github.com/microsoft/fluentui/pull/30969) by marata@microsoft.com)
+- Bump @fluentui/react-aria to v9.10.4 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
+- Bump @fluentui/react-avatar to v9.6.21 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
+- Bump @fluentui/react-checkbox to v9.2.20 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
+- Bump @fluentui/react-radio to v9.2.15 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
+- Bump @fluentui/react-tabster to v9.20.0 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
+
+### Patches
+
+- chore: Update react-icons to 2.0.235 ([PR #31011](https://github.com/microsoft/fluentui/pull/31011) by ololubek@microsoft.com)
+
+## [9.13.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.13.0)
+
+Thu, 04 Apr 2024 12:08:08 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.12.1..@fluentui/react-table_v9.13.0)
+
+### Minor changes
+
+- add resizableColumnsOptions with option to allowContainerOverflow ([PR #30717](https://github.com/microsoft/fluentui/pull/30717) by jirivyhnalek@microsoft.com)
+
 ## [9.12.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.12.1)
 
-Tue, 02 Apr 2024 09:41:20 GMT 
+Tue, 02 Apr 2024 09:48:01 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.12.0..@fluentui/react-table_v9.12.1)
 
 ### Patches
 
-- Bump @fluentui/react-aria to v9.10.3 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
-- Bump @fluentui/react-avatar to v9.6.20 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
-- Bump @fluentui/react-checkbox to v9.2.19 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
-- Bump @fluentui/react-context-selector to v9.1.57 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
-- Bump @fluentui/react-radio to v9.2.14 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.16.0 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
-- Bump @fluentui/react-tabster to v9.19.6 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
-- Bump @fluentui/react-utilities to v9.18.6 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.0.35 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
+- Bump @fluentui/react-aria to v9.10.3 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-avatar to v9.6.20 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-checkbox to v9.2.19 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.57 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-radio to v9.2.14 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.16.0 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-tabster to v9.19.6 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-utilities to v9.18.6 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.35 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
 
 ## [9.12.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.12.0)
 

package/dist/index.d.ts

@@ -210,7 +210,7 @@ export declare type DataGridProps = TableProps & Pick<DataGridContextValue, 'ite
      */
     selectionMode?: SelectionMode_2;
     /**
-     * Options for column resizing
+     * Options for column resizing, specific for each column
      */
     columnSizingOptions?: TableColumnSizingOptions;
     /**
@@ -226,6 +226,16 @@ export declare type DataGridProps = TableProps & Pick<DataGridContextValue, 'ite
      * By default, this value is calculated internally based on other props, but can be overriden.
      */
     containerWidthOffset?: number;
+    /**
+     * Custom options for column resizing.
+     */
+    resizableColumnsOptions?: {
+        /**
+         * If true, columns will be auto-fitted to the container width.
+         * @default true
+         * */
+        autoFitColumns?: boolean;
+    };
 };
 
 /**
@@ -539,6 +549,7 @@ export declare type TableColumnId = string | number;
 
 export declare type TableColumnSizingOptions = Record<TableColumnId, Partial<Pick<ColumnWidthState, 'minWidth' | 'idealWidth' | 'padding'>> & {
     defaultWidth?: number;
+    autoFitColumns?: boolean;
 }>;
 
 declare interface TableColumnSizingState {
@@ -1076,6 +1087,7 @@ declare type UseTableColumnSizingParams = {
         width: number;
     }) => void;
     containerWidthOffset?: number;
+    autoFitColumns?: boolean;
 };
 
 export declare function useTableCompositeNavigation(): {

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

@@ -1 +1 @@
-{"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    /* eslint-disable @nx/workspace-consistent-callback-type -- can't change type of existing callback */\n    onSortChange?: (e: React.MouseEvent, sortState: SortState) => void;\n    onSelectionChange?: (e: React.MouseEvent | React.KeyboardEvent, data: OnSelectionChangeData) => void;\n    /* eslint-enable @nx/workspace-consistent-callback-type */\n\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    // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\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"}
+{"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    /* eslint-disable @nx/workspace-consistent-callback-type -- can't change type of existing callback */\n    onSortChange?: (e: React.MouseEvent, sortState: SortState) => void;\n    onSelectionChange?: (e: React.MouseEvent | React.KeyboardEvent, data: OnSelectionChangeData) => void;\n    /* eslint-enable @nx/workspace-consistent-callback-type */\n\n    /**\n     * Enables row selection and sets the selection mode\n     * @default false\n     */\n    selectionMode?: SelectionMode;\n    /**\n     * Options for column resizing, specific for each column\n     */\n    columnSizingOptions?: TableColumnSizingOptions;\n    /**\n     * A callback triggered when a column is resized.\n     */\n    // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\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     * Custom options for column resizing.\n     */\n    resizableColumnsOptions?: {\n      /**\n       * If true, columns will be auto-fitted to the container width.\n       * @default true\n       * */\n      autoFitColumns?: boolean;\n    };\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

@@ -14,12 +14,13 @@ import { CELL_WIDTH } from '../TableSelectionCell';
  * @param props - props from this instance of DataGrid
  * @param ref - reference to root HTMLElement of DataGrid
  */ 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 { items, columns, focusMode = 'cell', selectionMode, onSortChange, onSelectionChange, defaultSortState, sortState, selectedItems, defaultSelectedItems, subtleSelection = false, selectionAppearance = 'brand', getRowId, resizableColumns, columnSizingOptions, onColumnResize, containerWidthOffset, resizableColumnsOptions = {} } = props;
     const widthOffset = containerWidthOffset !== null && containerWidthOffset !== void 0 ? containerWidthOffset : selectionMode ? -CELL_WIDTH : 0;
     const gridTabsterAttribute = useArrowNavigationGroup({
         axis: 'grid'
     });
     const { onTableKeyDown: onCompositeKeyDown, tableTabsterAttribute: compositeTabsterAttribute, tableRowTabsterAttribute: compositeRowTabsterAttribute } = useTableCompositeNavigation();
+    var _resizableColumnsOptions_autoFitColumns;
     const tableState = useTableFeatures({
         items,
         columns,
@@ -41,7 +42,10 @@ import { CELL_WIDTH } from '../TableSelectionCell';
             columnSizingOptions,
             // The selection cell is not part of the columns, therefore its width needs to be subtracted
             // from the container to make sure the columns don't overflow the table.
-            containerWidthOffset: widthOffset
+            containerWidthOffset: widthOffset,
+            // Disables automatic resizing of columns when the container overflows.
+            // This allows the sum of the columns to be larger than the container.
+            autoFitColumns: (_resizableColumnsOptions_autoFitColumns = resizableColumnsOptions.autoFitColumns) !== null && _resizableColumnsOptions_autoFitColumns !== void 0 ? _resizableColumnsOptions_autoFitColumns : true
         })
     ]);
     const innerRef = React.useRef(null);

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 { 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      ...(resizableColumns ? tableState.columnSizing_unstable.getTableProps(props) : {}),\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","columnSizing_unstable","getTableProps","tableRef","selectableRows"],"mappings":"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"}
+{"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    resizableColumnsOptions = {},\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      // Disables automatic resizing of columns when the container overflows.\n      // This allows the sum of the columns to be larger than the container.\n      autoFitColumns: resizableColumnsOptions.autoFitColumns ?? true,\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      ...(resizableColumns ? tableState.columnSizing_unstable.getTableProps(props) : {}),\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","resizableColumnsOptions","widthOffset","gridTabsterAttribute","axis","onTableKeyDown","onCompositeKeyDown","tableTabsterAttribute","compositeTabsterAttribute","tableRowTabsterAttribute","compositeRowTabsterAttribute","tableState","autoFitColumns","innerRef","useRef","findFirstFocusable","findLastFocusable","onKeyDown","e","current","ctrlKey","defaultPrevented","key","firstRow","querySelector","focus","rows","querySelectorAll","length","lastRow","item","baseTableState","role","as","noNativeElements","columnSizing_unstable","getTableProps","tableRef","selectableRows"],"mappings":"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"}

package/lib/hooks/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["types.ts"],"sourcesContent":["import * as React from 'react';\nimport { SortDirection, TableProps } from '../components/Table/Table.types';\nimport { TableHeaderCellProps } from '../components/TableHeaderCell/TableHeaderCell.types';\nimport { SelectionMode } from '@fluentui/react-utilities';\n\nexport type TableRowId = string | number;\nexport type TableColumnId = string | number;\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: (data?: unknown) => 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  /**\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 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 ColumnSizingTableProps = Partial<TableProps>;\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  getTableProps: (props?: Partial<TableProps>) => ColumnSizingTableProps;\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"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["types.ts"],"sourcesContent":["import * as React from 'react';\nimport { SortDirection, TableProps } from '../components/Table/Table.types';\nimport { TableHeaderCellProps } from '../components/TableHeaderCell/TableHeaderCell.types';\nimport { SelectionMode } from '@fluentui/react-utilities';\n\nexport type TableRowId = string | number;\nexport type TableColumnId = string | number;\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: (data?: unknown) => 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  /**\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 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 ColumnSizingTableProps = Partial<TableProps>;\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  getTableProps: (props?: Partial<TableProps>) => ColumnSizingTableProps;\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'>> & {\n    defaultWidth?: number;\n    autoFitColumns?: boolean;\n  }\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  autoFitColumns?: boolean;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/hooks/useTableColumnResizeState.js

@@ -1,27 +1,27 @@
 import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
 import * as React from 'react';
 import { columnDefinitionsToState, adjustColumnWidthsToFitContainer, getColumnById, setColumnProperty, getColumnWidth } from '../utils/columnResizeUtils';
-const createReducer = ()=>(state, action)=>{
+const createReducer = (autoFitColumns)=>(state, action)=>{
         switch(action.type){
             case 'CONTAINER_WIDTH_UPDATED':
                 return {
                     ...state,
                     containerWidth: action.containerWidth,
-                    columnWidthState: adjustColumnWidthsToFitContainer(state.columnWidthState, action.containerWidth)
+                    columnWidthState: autoFitColumns ? adjustColumnWidthsToFitContainer(state.columnWidthState, action.containerWidth) : state.columnWidthState
                 };
             case 'COLUMNS_UPDATED':
                 const newS = columnDefinitionsToState(action.columns, state.columnWidthState, state.columnSizingOptions);
                 return {
                     ...state,
                     columns: action.columns,
-                    columnWidthState: adjustColumnWidthsToFitContainer(newS, state.containerWidth)
+                    columnWidthState: autoFitColumns ? adjustColumnWidthsToFitContainer(newS, state.containerWidth) : newS
                 };
             case 'COLUMN_SIZING_OPTIONS_UPDATED':
                 const newState = columnDefinitionsToState(state.columns, state.columnWidthState, action.columnSizingOptions);
                 return {
                     ...state,
                     columnSizingOptions: action.columnSizingOptions,
-                    columnWidthState: adjustColumnWidthsToFitContainer(newState, state.containerWidth)
+                    columnWidthState: autoFitColumns ? adjustColumnWidthsToFitContainer(newState, state.containerWidth) : newState
                 };
             case 'SET_COLUMN_WIDTH':
                 const { columnId, width } = action;
@@ -38,7 +38,9 @@ const createReducer = ()=>(state, action)=>{
                 // Set this width as idealWidth, because its a deliberate change, not a recalculation because of container
                 newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'idealWidth', width);
                 // Adjust the widths to the container size
-                newColumnWidthState = adjustColumnWidthsToFitContainer(newColumnWidthState, containerWidth);
+                if (autoFitColumns) {
+                    newColumnWidthState = adjustColumnWidthsToFitContainer(newColumnWidthState, containerWidth);
+                }
                 return {
                     ...state,
                     columnWidthState: newColumnWidthState
@@ -46,8 +48,10 @@ const createReducer = ()=>(state, action)=>{
         }
     };
 export function useTableColumnResizeState(columns, containerWidth, params = {}) {
-    const { onColumnResize, columnSizingOptions } = params;
-    const reducer = React.useMemo(()=>createReducer(), []);
+    const { onColumnResize, columnSizingOptions, autoFitColumns = true } = params;
+    const reducer = React.useMemo(()=>createReducer(autoFitColumns), [
+        autoFitColumns
+    ]);
     const [state, dispatch] = React.useReducer(reducer, {
         columns,
         containerWidth: 0,

package/lib/hooks/useTableColumnResizeState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["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: React.useCallback(\n      (colId: TableColumnId) => getColumnById(state.columnWidthState, colId),\n      [state.columnWidthState],\n    ),\n    getColumns: React.useCallback(() => state.columnWidthState, [state.columnWidthState]),\n    getColumnWidth: React.useCallback(\n      (colId: TableColumnId) => getColumnWidth(state.columnWidthState, colId),\n      [state.columnWidthState],\n    ),\n    setColumnWidth,\n  };\n}\n"],"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","useCallback","colId","getColumns"],"mappings":"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"}
+{"version":3,"sources":["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>(autoFitColumns?: boolean) =>\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: autoFitColumns\n            ? adjustColumnWidthsToFitContainer(state.columnWidthState, action.containerWidth)\n            : state.columnWidthState,\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: autoFitColumns ? adjustColumnWidthsToFitContainer(newS, state.containerWidth) : newS,\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: autoFitColumns\n            ? adjustColumnWidthsToFitContainer(newState, state.containerWidth)\n            : newState,\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        if (autoFitColumns) {\n          newColumnWidthState = adjustColumnWidthsToFitContainer(newColumnWidthState, containerWidth);\n        }\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, autoFitColumns = true } = params;\n\n  const reducer = React.useMemo(() => createReducer<T>(autoFitColumns), [autoFitColumns]);\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: React.useCallback(\n      (colId: TableColumnId) => getColumnById(state.columnWidthState, colId),\n      [state.columnWidthState],\n    ),\n    getColumns: React.useCallback(() => state.columnWidthState, [state.columnWidthState]),\n    getColumnWidth: React.useCallback(\n      (colId: TableColumnId) => getColumnWidth(state.columnWidthState, colId),\n      [state.columnWidthState],\n    ),\n    setColumnWidth,\n  };\n}\n"],"names":["useEventCallback","useIsomorphicLayoutEffect","React","columnDefinitionsToState","adjustColumnWidthsToFitContainer","getColumnById","setColumnProperty","getColumnWidth","createReducer","autoFitColumns","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","useCallback","colId","getColumns"],"mappings":"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"}

package/lib/hooks/useTableColumnSizing.js

@@ -21,8 +21,11 @@ export const defaultColumnSizingState = {
 };
 export function useTableColumnSizing_unstable(params) {
     // False positive, these plugin hooks are intended to be run on every render
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    return (tableState)=>useTableColumnSizingState(tableState, params);
+    return (tableState)=>// eslint-disable-next-line react-hooks/rules-of-hooks
+        useTableColumnSizingState(tableState, {
+            autoFitColumns: true,
+            ...params
+        });
 }
 function getColumnStyles(column, dragging) {
     const width = column.width;
@@ -38,7 +41,7 @@ function getColumnStyles(column, dragging) {
         } : {}
     };
 }
-function useTableColumnSizingState(tableState, params) {
+function useTableColumnSizingState(tableState, params = {}) {
     const { columns } = tableState;
     // Gets the container width
     const { width, measureElementRef } = useMeasureElement();
@@ -48,6 +51,7 @@ function useTableColumnSizingState(tableState, params) {
     const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);
     // Creates the keyboard handler for resizing columns
     const { toggleInteractiveMode, getKeyboardResizingProps } = useKeyboardResizing(columnResizeState);
+    const { autoFitColumns } = params;
     const enableKeyboardMode = React.useCallback((columnId, onChange)=>(e)=>{
             e.preventDefault();
             e.nativeEvent.stopPropagation();
@@ -81,7 +85,7 @@ function useTableColumnSizingState(tableState, params) {
                 var _columns_;
                 const col = getColumnById(columnId);
                 const isLastColumn = ((_columns_ = columns[columns.length - 1]) === null || _columns_ === void 0 ? void 0 : _columns_.columnId) === columnId;
-                const aside = isLastColumn ? null : /*#__PURE__*/ React.createElement(TableResizeHandle, {
+                const aside = isLastColumn && autoFitColumns ? null : /*#__PURE__*/ React.createElement(TableResizeHandle, {
                     onMouseDown: getOnMouseDown(columnId),
                     onTouchStart: getOnMouseDown(columnId),
                     ...getKeyboardResizingProps(columnId, (col === null || col === void 0 ? void 0 : col.width) || 0)
@@ -95,7 +99,8 @@ function useTableColumnSizingState(tableState, params) {
                 columns,
                 dragging,
                 getKeyboardResizingProps,
-                getOnMouseDown
+                getOnMouseDown,
+                autoFitColumns
             ]),
             getTableCellProps: React.useCallback((columnId)=>{
                 const col = getColumnById(columnId);

package/lib/hooks/useTableColumnSizing.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTableColumnSizing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TableResizeHandle } from '../TableResizeHandle';\nimport {\n  ColumnWidthState,\n  EnableKeyboardModeOnChangeCallback,\n  TableColumnId,\n  TableColumnSizingState,\n  TableFeaturesState,\n  UseTableColumnSizingParams,\n} from './types';\n\nimport { useMeasureElement } from './useMeasureElement';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useKeyboardResizing } from './useKeyboardResizing';\n\nexport const defaultColumnSizingState: TableColumnSizingState = {\n  getColumnWidths: () => [],\n  getOnMouseDown: () => () => null,\n  setColumnWidth: () => null,\n  getTableProps: () => ({}),\n  getTableHeaderCellProps: () => ({ style: {}, columnId: '' }),\n  getTableCellProps: () => ({ style: {}, columnId: '' }),\n  enableKeyboardMode: () => () => null,\n};\n\nexport function useTableColumnSizing_unstable<TItem>(params?: UseTableColumnSizingParams) {\n  // False positive, these plugin hooks are intended to be run on every render\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return (tableState: TableFeaturesState<TItem>) => useTableColumnSizingState(tableState, params);\n}\n\nfunction getColumnStyles(column: ColumnWidthState, dragging?: boolean): React.CSSProperties {\n  const width = column.width;\n\n  return {\n    // native styles\n    width,\n    // non-native element styles (flex layout)\n    minWidth: width,\n    maxWidth: width,\n    // Fixed the unwanted sort: https://github.com/microsoft/fluentui/issues/27803\n    ...(dragging ? { pointerEvents: 'none' } : {}),\n  };\n}\n\nfunction useTableColumnSizingState<TItem>(\n  tableState: TableFeaturesState<TItem>,\n  params?: UseTableColumnSizingParams,\n): TableFeaturesState<TItem> {\n  const { columns } = tableState;\n\n  // Gets the container width\n  const { width, measureElementRef } = useMeasureElement();\n  // Creates the state based on columns and available containerWidth\n  const columnResizeState = useTableColumnResizeState(columns, width + (params?.containerWidthOffset || 0), params);\n  // Creates the mouse handler and attaches the state to it\n  const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);\n  // Creates the keyboard handler for resizing columns\n  const { toggleInteractiveMode, getKeyboardResizingProps } = useKeyboardResizing(columnResizeState);\n\n  const enableKeyboardMode = React.useCallback(\n    (columnId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) =>\n      (e: React.MouseEvent | React.TouchEvent) => {\n        e.preventDefault();\n        e.nativeEvent.stopPropagation();\n        toggleInteractiveMode(columnId, onChange);\n      },\n    [toggleInteractiveMode],\n  );\n\n  const { getColumnById, setColumnWidth, getColumns } = columnResizeState;\n  const { getOnMouseDown, dragging } = mouseHandler;\n  return {\n    ...tableState,\n    tableRef: measureElementRef,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    columnSizing_unstable: {\n      getOnMouseDown,\n      setColumnWidth: (columnId: TableColumnId, w: number) => setColumnWidth(undefined, { columnId, width: w }),\n      getColumnWidths: getColumns,\n      getTableProps: (props = {}) => {\n        return {\n          ...props,\n          style: {\n            minWidth: 'fit-content',\n            ...(props.style || {}),\n          },\n        };\n      },\n      getTableHeaderCellProps: React.useCallback(\n        (columnId: TableColumnId) => {\n          const col = getColumnById(columnId);\n          const isLastColumn = columns[columns.length - 1]?.columnId === columnId;\n\n          const aside = isLastColumn ? null : (\n            <TableResizeHandle\n              onMouseDown={getOnMouseDown(columnId)}\n              onTouchStart={getOnMouseDown(columnId)}\n              {...getKeyboardResizingProps(columnId, col?.width || 0)}\n            />\n          );\n\n          return col\n            ? {\n                style: getColumnStyles(col, dragging),\n                aside,\n              }\n            : {};\n        },\n        [getColumnById, columns, dragging, getKeyboardResizingProps, getOnMouseDown],\n      ),\n      getTableCellProps: React.useCallback(\n        (columnId: TableColumnId) => {\n          const col = getColumnById(columnId);\n          return col ? { style: getColumnStyles(col) } : {};\n        },\n        [getColumnById],\n      ),\n      enableKeyboardMode,\n    },\n  };\n}\n"],"names":["React","TableResizeHandle","useMeasureElement","useTableColumnResizeMouseHandler","useTableColumnResizeState","useKeyboardResizing","defaultColumnSizingState","getColumnWidths","getOnMouseDown","setColumnWidth","getTableProps","getTableHeaderCellProps","style","columnId","getTableCellProps","enableKeyboardMode","useTableColumnSizing_unstable","params","tableState","useTableColumnSizingState","getColumnStyles","column","dragging","width","minWidth","maxWidth","pointerEvents","columns","measureElementRef","columnResizeState","containerWidthOffset","mouseHandler","toggleInteractiveMode","getKeyboardResizingProps","useCallback","onChange","e","preventDefault","nativeEvent","stopPropagation","getColumnById","getColumns","tableRef","columnSizing_unstable","w","undefined","props","col","isLastColumn","length","aside","onMouseDown","onTouchStart"],"mappings":"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"}
+{"version":3,"sources":["useTableColumnSizing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TableResizeHandle } from '../TableResizeHandle';\nimport {\n  ColumnWidthState,\n  EnableKeyboardModeOnChangeCallback,\n  TableColumnId,\n  TableColumnSizingState,\n  TableFeaturesState,\n  UseTableColumnSizingParams,\n} from './types';\n\nimport { useMeasureElement } from './useMeasureElement';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useKeyboardResizing } from './useKeyboardResizing';\n\nexport const defaultColumnSizingState: TableColumnSizingState = {\n  getColumnWidths: () => [],\n  getOnMouseDown: () => () => null,\n  setColumnWidth: () => null,\n  getTableProps: () => ({}),\n  getTableHeaderCellProps: () => ({ style: {}, columnId: '' }),\n  getTableCellProps: () => ({ style: {}, columnId: '' }),\n  enableKeyboardMode: () => () => null,\n};\n\nexport function useTableColumnSizing_unstable<TItem>(params?: UseTableColumnSizingParams) {\n  // False positive, these plugin hooks are intended to be run on every render\n\n  return (tableState: TableFeaturesState<TItem>) =>\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useTableColumnSizingState(tableState, { autoFitColumns: true, ...params });\n}\n\nfunction getColumnStyles(column: ColumnWidthState, dragging?: boolean): React.CSSProperties {\n  const width = column.width;\n\n  return {\n    // native styles\n    width,\n    // non-native element styles (flex layout)\n    minWidth: width,\n    maxWidth: width,\n    // Fixed the unwanted sort: https://github.com/microsoft/fluentui/issues/27803\n    ...(dragging ? { pointerEvents: 'none' } : {}),\n  };\n}\n\nfunction useTableColumnSizingState<TItem>(\n  tableState: TableFeaturesState<TItem>,\n  params: UseTableColumnSizingParams = {},\n): TableFeaturesState<TItem> {\n  const { columns } = tableState;\n\n  // Gets the container width\n  const { width, measureElementRef } = useMeasureElement();\n  // Creates the state based on columns and available containerWidth\n  const columnResizeState = useTableColumnResizeState(columns, width + (params?.containerWidthOffset || 0), params);\n  // Creates the mouse handler and attaches the state to it\n  const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);\n  // Creates the keyboard handler for resizing columns\n  const { toggleInteractiveMode, getKeyboardResizingProps } = useKeyboardResizing(columnResizeState);\n\n  const { autoFitColumns } = params;\n\n  const enableKeyboardMode = React.useCallback(\n    (columnId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) =>\n      (e: React.MouseEvent | React.TouchEvent) => {\n        e.preventDefault();\n        e.nativeEvent.stopPropagation();\n        toggleInteractiveMode(columnId, onChange);\n      },\n    [toggleInteractiveMode],\n  );\n\n  const { getColumnById, setColumnWidth, getColumns } = columnResizeState;\n  const { getOnMouseDown, dragging } = mouseHandler;\n  return {\n    ...tableState,\n    tableRef: measureElementRef,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    columnSizing_unstable: {\n      getOnMouseDown,\n      setColumnWidth: (columnId: TableColumnId, w: number) => setColumnWidth(undefined, { columnId, width: w }),\n      getColumnWidths: getColumns,\n      getTableProps: (props = {}) => {\n        return {\n          ...props,\n          style: {\n            minWidth: 'fit-content',\n            ...(props.style || {}),\n          },\n        };\n      },\n      getTableHeaderCellProps: React.useCallback(\n        (columnId: TableColumnId) => {\n          const col = getColumnById(columnId);\n          const isLastColumn = columns[columns.length - 1]?.columnId === columnId;\n\n          const aside =\n            isLastColumn && autoFitColumns ? null : (\n              <TableResizeHandle\n                onMouseDown={getOnMouseDown(columnId)}\n                onTouchStart={getOnMouseDown(columnId)}\n                {...getKeyboardResizingProps(columnId, col?.width || 0)}\n              />\n            );\n\n          return col\n            ? {\n                style: getColumnStyles(col, dragging),\n                aside,\n              }\n            : {};\n        },\n        [getColumnById, columns, dragging, getKeyboardResizingProps, getOnMouseDown, autoFitColumns],\n      ),\n      getTableCellProps: React.useCallback(\n        (columnId: TableColumnId) => {\n          const col = getColumnById(columnId);\n          return col ? { style: getColumnStyles(col) } : {};\n        },\n        [getColumnById],\n      ),\n      enableKeyboardMode,\n    },\n  };\n}\n"],"names":["React","TableResizeHandle","useMeasureElement","useTableColumnResizeMouseHandler","useTableColumnResizeState","useKeyboardResizing","defaultColumnSizingState","getColumnWidths","getOnMouseDown","setColumnWidth","getTableProps","getTableHeaderCellProps","style","columnId","getTableCellProps","enableKeyboardMode","useTableColumnSizing_unstable","params","tableState","useTableColumnSizingState","autoFitColumns","getColumnStyles","column","dragging","width","minWidth","maxWidth","pointerEvents","columns","measureElementRef","columnResizeState","containerWidthOffset","mouseHandler","toggleInteractiveMode","getKeyboardResizingProps","useCallback","onChange","e","preventDefault","nativeEvent","stopPropagation","getColumnById","getColumns","tableRef","columnSizing_unstable","w","undefined","props","col","isLastColumn","length","aside","onMouseDown","onTouchStart"],"mappings":"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"}

package/lib/hooks/useTableCompositeNavigation.js

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { ArrowDown, ArrowRight, ArrowUp } from '@fluentui/keyboard-keys';
-import { useArrowNavigationGroup, useFocusableGroup, useMergedTabsterAttributes_unstable, useFocusFinders } from '@fluentui/react-tabster';
+import { useArrowNavigationGroup, useFocusableGroup, useMergedTabsterAttributes_unstable, useFocusFinders, GroupperMoveFocusEvent, MoverMoveFocusEvent, GroupperMoveFocusActions, MoverKeys } from '@fluentui/react-tabster';
 import { isHTMLElement } from '@fluentui/react-utilities';
-import { TabsterTypes, dispatchGroupperMoveFocusEvent, dispatchMoverMoveFocusEvent } from '@fluentui/react-tabster';
 export function useTableCompositeNavigation() {
     const horizontalAttr = useArrowNavigationGroup({
         axis: 'horizontal'
@@ -47,10 +46,14 @@ export function useTableCompositeNavigation() {
         })();
         // Escape groupper focus trap before arrow down
         if ((e.key === ArrowDown || e.key === ArrowUp) && isInCell) {
-            dispatchGroupperMoveFocusEvent(activeElement, TabsterTypes.GroupperMoveFocusActions.Escape);
+            activeElement.dispatchEvent(new GroupperMoveFocusEvent({
+                action: GroupperMoveFocusActions.Escape
+            }));
             activeElement = targetDocument.activeElement;
             if (activeElement) {
-                dispatchMoverMoveFocusEvent(activeElement, TabsterTypes.MoverKeys[e.key]);
+                activeElement.dispatchEvent(new MoverMoveFocusEvent({
+                    key: MoverKeys[e.key]
+                }));
             }
         }
     }, [

package/lib/hooks/useTableCompositeNavigation.js.map

@@ -1 +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, 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';\nimport { TabsterTypes, dispatchGroupperMoveFocusEvent, dispatchMoverMoveFocusEvent } from '@fluentui/react-tabster';\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      let 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        dispatchGroupperMoveFocusEvent(activeElement as HTMLElement, TabsterTypes.GroupperMoveFocusActions.Escape);\n\n        activeElement = targetDocument.activeElement;\n\n        if (activeElement) {\n          dispatchMoverMoveFocusEvent(activeElement as HTMLElement, TabsterTypes.MoverKeys[e.key]);\n        }\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","ArrowUp","useArrowNavigationGroup","useFocusableGroup","useMergedTabsterAttributes_unstable","useFocusFinders","isHTMLElement","TabsterTypes","dispatchGroupperMoveFocusEvent","dispatchMoverMoveFocusEvent","useTableCompositeNavigation","horizontalAttr","axis","gridAttr","groupperAttr","tabBehavior","findFirstFocusable","targetDocument","rowAttr","onKeyDown","useCallback","e","activeElement","currentTarget","contains","activeElementRole","getAttribute","key","focus","isInCell","cur","curRole","parentElement","GroupperMoveFocusActions","Escape","MoverKeys","onTableKeyDown","tableTabsterAttribute","tableRowTabsterAttribute"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,SAAS,EAAEC,UAAU,EAAEC,OAAO,QAAQ,0BAA0B;AACzE,SACEC,uBAAuB,EACvBC,iBAAiB,EACjBC,mCAAmC,EAEnCC,eAAe,QACV,0BAA0B;AACjC,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,EAAEC,8BAA8B,EAAEC,2BAA2B,QAAQ,0BAA0B;AAEpH,OAAO,SAASC;IAKd,MAAMC,iBAAiBT,wBAAwB;QAAEU,MAAM;IAAa;IACpE,MAAMC,WAAWX,wBAAwB;QAAEU,MAAM;IAAO;IACxD,MAAME,eAAeX,kBAAkB;QAAEY,aAAa;IAAqB;IAC3E,MAAM,EAAEC,kBAAkB,EAAE,GAAGX;IAC/B,MAAM,EAAEY,cAAc,EAAE,GAAGnB;IAE3B,MAAMoB,UAAUd,oCAAoCO,gBAAgBG;IAEpE,MAAMK,YAAwCvB,MAAMwB,WAAW,CAC7DC,CAAAA;QACE,IAAI,CAACJ,gBAAgB;YACnB;QACF;QAEA,IAAIK,gBAAgBL,eAAeK,aAAa;QAChD,IAAI,CAACA,iBAAiB,CAACD,EAAEE,aAAa,CAACC,QAAQ,CAACF,gBAAgB;YAC9D;QACF;QACA,MAAMG,oBAAoBH,cAAcI,YAAY,CAAC;QAErD,0DAA0D;QAC1D,IAAIL,EAAEM,GAAG,KAAK3B,cAAcyB,sBAAsB,SAASnB,cAAcgB,gBAAgB;gBACvFN;aAAAA,sBAAAA,mBAAmBM,4BAAnBN,0CAAAA,oBAAmCY,KAAK;QAC1C;QAEA,IAAIH,sBAAsB,OAAO;YAC/B;QACF;QAEA,MAAMI,WAAW,AAAC,CAAA;YAChB,IAAIC,MAAMxB,cAAcgB,iBAAiBA,gBAAgB;YACzD,MAAOQ,IAAK;gBACV,MAAMC,UAAUD,IAAIJ,YAAY,CAAC;gBACjC,IAAIK,YAAY,UAAUA,YAAY,YAAY;oBAChD,OAAO;gBACT;gBAEAD,MAAMA,IAAIE,aAAa;YACzB;YAEA,OAAO;QACT,CAAA;QAEA,+CAA+C;QAC/C,IAAI,AAACX,CAAAA,EAAEM,GAAG,KAAK5B,aAAasB,EAAEM,GAAG,KAAK1B,OAAM,KAAM4B,UAAU;YAC1DrB,+BAA+Bc,eAA8Bf,aAAa0B,wBAAwB,CAACC,MAAM;YAEzGZ,gBAAgBL,eAAeK,aAAa;YAE5C,IAAIA,eAAe;gBACjBb,4BAA4Ba,eAA8Bf,aAAa4B,SAAS,CAACd,EAAEM,GAAG,CAAC;YACzF;QACF;IACF,GACA;QAACV;QAAgBD;KAAmB;IAGtC,OAAO;QACLoB,gBAAgBjB;QAChBkB,uBAAuBxB;QACvByB,0BAA0BpB;IAC5B;AACF"}
+{"version":3,"sources":["useTableCompositeNavigation.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { ArrowDown, ArrowRight, ArrowUp } from '@fluentui/keyboard-keys';\nimport {\n  useArrowNavigationGroup,\n  useFocusableGroup,\n  useMergedTabsterAttributes_unstable,\n  TabsterDOMAttribute,\n  useFocusFinders,\n  GroupperMoveFocusEvent,\n  MoverMoveFocusEvent,\n  GroupperMoveFocusActions,\n  MoverKeys,\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      let 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 GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Escape }));\n\n        activeElement = targetDocument.activeElement;\n\n        if (activeElement) {\n          activeElement.dispatchEvent(new MoverMoveFocusEvent({ key: MoverKeys[e.key] }));\n        }\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","ArrowUp","useArrowNavigationGroup","useFocusableGroup","useMergedTabsterAttributes_unstable","useFocusFinders","GroupperMoveFocusEvent","MoverMoveFocusEvent","GroupperMoveFocusActions","MoverKeys","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","action","Escape","onTableKeyDown","tableTabsterAttribute","tableRowTabsterAttribute"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,SAAS,EAAEC,UAAU,EAAEC,OAAO,QAAQ,0BAA0B;AACzE,SACEC,uBAAuB,EACvBC,iBAAiB,EACjBC,mCAAmC,EAEnCC,eAAe,EACfC,sBAAsB,EACtBC,mBAAmB,EACnBC,wBAAwB,EACxBC,SAAS,QACJ,0BAA0B;AACjC,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,OAAO,SAASC;IAKd,MAAMC,iBAAiBV,wBAAwB;QAAEW,MAAM;IAAa;IACpE,MAAMC,WAAWZ,wBAAwB;QAAEW,MAAM;IAAO;IACxD,MAAME,eAAeZ,kBAAkB;QAAEa,aAAa;IAAqB;IAC3E,MAAM,EAAEC,kBAAkB,EAAE,GAAGZ;IAC/B,MAAM,EAAEa,cAAc,EAAE,GAAGpB;IAE3B,MAAMqB,UAAUf,oCAAoCQ,gBAAgBG;IAEpE,MAAMK,YAAwCxB,MAAMyB,WAAW,CAC7DC,CAAAA;QACE,IAAI,CAACJ,gBAAgB;YACnB;QACF;QAEA,IAAIK,gBAAgBL,eAAeK,aAAa;QAChD,IAAI,CAACA,iBAAiB,CAACD,EAAEE,aAAa,CAACC,QAAQ,CAACF,gBAAgB;YAC9D;QACF;QACA,MAAMG,oBAAoBH,cAAcI,YAAY,CAAC;QAErD,0DAA0D;QAC1D,IAAIL,EAAEM,GAAG,KAAK5B,cAAc0B,sBAAsB,SAAShB,cAAca,gBAAgB;gBACvFN;aAAAA,sBAAAA,mBAAmBM,4BAAnBN,0CAAAA,oBAAmCY,KAAK;QAC1C;QAEA,IAAIH,sBAAsB,OAAO;YAC/B;QACF;QAEA,MAAMI,WAAW,AAAC,CAAA;YAChB,IAAIC,MAAMrB,cAAca,iBAAiBA,gBAAgB;YACzD,MAAOQ,IAAK;gBACV,MAAMC,UAAUD,IAAIJ,YAAY,CAAC;gBACjC,IAAIK,YAAY,UAAUA,YAAY,YAAY;oBAChD,OAAO;gBACT;gBAEAD,MAAMA,IAAIE,aAAa;YACzB;YAEA,OAAO;QACT,CAAA;QAEA,+CAA+C;QAC/C,IAAI,AAACX,CAAAA,EAAEM,GAAG,KAAK7B,aAAauB,EAAEM,GAAG,KAAK3B,OAAM,KAAM6B,UAAU;YAC1DP,cAAcW,aAAa,CAAC,IAAI5B,uBAAuB;gBAAE6B,QAAQ3B,yBAAyB4B,MAAM;YAAC;YAEjGb,gBAAgBL,eAAeK,aAAa;YAE5C,IAAIA,eAAe;gBACjBA,cAAcW,aAAa,CAAC,IAAI3B,oBAAoB;oBAAEqB,KAAKnB,SAAS,CAACa,EAAEM,GAAG,CAAC;gBAAC;YAC9E;QACF;IACF,GACA;QAACV;QAAgBD;KAAmB;IAGtC,OAAO;QACLoB,gBAAgBjB;QAChBkB,uBAAuBxB;QACvByB,0BAA0BpB;IAC5B;AACF"}

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

@@ -17,12 +17,13 @@ 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 { items, columns, focusMode = 'cell', selectionMode, onSortChange, onSelectionChange, defaultSortState, sortState, selectedItems, defaultSelectedItems, subtleSelection = false, selectionAppearance = 'brand', getRowId, resizableColumns, columnSizingOptions, onColumnResize, containerWidthOffset, resizableColumnsOptions = {} } = props;
     const widthOffset = containerWidthOffset !== null && containerWidthOffset !== void 0 ? containerWidthOffset : selectionMode ? -_TableSelectionCell.CELL_WIDTH : 0;
     const gridTabsterAttribute = (0, _reacttabster.useArrowNavigationGroup)({
         axis: 'grid'
     });
     const { onTableKeyDown: onCompositeKeyDown, tableTabsterAttribute: compositeTabsterAttribute, tableRowTabsterAttribute: compositeRowTabsterAttribute } = (0, _hooks.useTableCompositeNavigation)();
+    var _resizableColumnsOptions_autoFitColumns;
     const tableState = (0, _hooks.useTableFeatures)({
         items,
         columns,
@@ -44,7 +45,10 @@ const useDataGrid_unstable = (props, ref)=>{
             columnSizingOptions,
             // The selection cell is not part of the columns, therefore its width needs to be subtracted
             // from the container to make sure the columns don't overflow the table.
-            containerWidthOffset: widthOffset
+            containerWidthOffset: widthOffset,
+            // Disables automatic resizing of columns when the container overflows.
+            // This allows the sum of the columns to be larger than the container.
+            autoFitColumns: (_resizableColumnsOptions_autoFitColumns = resizableColumnsOptions.autoFitColumns) !== null && _resizableColumnsOptions_autoFitColumns !== void 0 ? _resizableColumnsOptions_autoFitColumns : true
         })
     ]);
     const innerRef = _react.useRef(null);

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 { 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        ...resizableColumns ? tableState.columnSizing_unstable.getTableProps(props) : {}\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","columnSizing_unstable","getTableProps","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, resizableColumnsOptions = {} } = 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    var _resizableColumnsOptions_autoFitColumns;\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            // Disables automatic resizing of columns when the container overflows.\n            // This allows the sum of the columns to be larger than the container.\n            autoFitColumns: (_resizableColumnsOptions_autoFitColumns = resizableColumnsOptions.autoFitColumns) !== null && _resizableColumnsOptions_autoFitColumns !== void 0 ? _resizableColumnsOptions_autoFitColumns : true\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        ...resizableColumns ? tableState.columnSizing_unstable.getTableProps(props) : {}\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","resizableColumnsOptions","widthOffset","CELL_WIDTH","gridTabsterAttribute","useArrowNavigationGroup","axis","onTableKeyDown","onCompositeKeyDown","tableTabsterAttribute","compositeTabsterAttribute","tableRowTabsterAttribute","compositeRowTabsterAttribute","useTableCompositeNavigation","_resizableColumnsOptions_autoFitColumns","tableState","useTableFeatures","useTableSort","useTableSelection","useTableColumnSizing_unstable","autoFitColumns","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","columnSizing_unstable","getTableProps","useMergedRefs","tableRef","selectableRows"],"mappings":"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"}

package/lib-commonjs/hooks/useTableColumnResizeState.js

@@ -12,27 +12,27 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _reactutilities = require("@fluentui/react-utilities");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _columnResizeUtils = require("../utils/columnResizeUtils");
-const createReducer = ()=>(state, action)=>{
+const createReducer = (autoFitColumns)=>(state, action)=>{
         switch(action.type){
             case 'CONTAINER_WIDTH_UPDATED':
                 return {
                     ...state,
                     containerWidth: action.containerWidth,
-                    columnWidthState: (0, _columnResizeUtils.adjustColumnWidthsToFitContainer)(state.columnWidthState, action.containerWidth)
+                    columnWidthState: autoFitColumns ? (0, _columnResizeUtils.adjustColumnWidthsToFitContainer)(state.columnWidthState, action.containerWidth) : state.columnWidthState
                 };
             case 'COLUMNS_UPDATED':
                 const newS = (0, _columnResizeUtils.columnDefinitionsToState)(action.columns, state.columnWidthState, state.columnSizingOptions);
                 return {
                     ...state,
                     columns: action.columns,
-                    columnWidthState: (0, _columnResizeUtils.adjustColumnWidthsToFitContainer)(newS, state.containerWidth)
+                    columnWidthState: autoFitColumns ? (0, _columnResizeUtils.adjustColumnWidthsToFitContainer)(newS, state.containerWidth) : newS
                 };
             case 'COLUMN_SIZING_OPTIONS_UPDATED':
                 const newState = (0, _columnResizeUtils.columnDefinitionsToState)(state.columns, state.columnWidthState, action.columnSizingOptions);
                 return {
                     ...state,
                     columnSizingOptions: action.columnSizingOptions,
-                    columnWidthState: (0, _columnResizeUtils.adjustColumnWidthsToFitContainer)(newState, state.containerWidth)
+                    columnWidthState: autoFitColumns ? (0, _columnResizeUtils.adjustColumnWidthsToFitContainer)(newState, state.containerWidth) : newState
                 };
             case 'SET_COLUMN_WIDTH':
                 const { columnId, width } = action;
@@ -49,7 +49,9 @@ const createReducer = ()=>(state, action)=>{
                 // Set this width as idealWidth, because its a deliberate change, not a recalculation because of container
                 newColumnWidthState = (0, _columnResizeUtils.setColumnProperty)(newColumnWidthState, columnId, 'idealWidth', width);
                 // Adjust the widths to the container size
-                newColumnWidthState = (0, _columnResizeUtils.adjustColumnWidthsToFitContainer)(newColumnWidthState, containerWidth);
+                if (autoFitColumns) {
+                    newColumnWidthState = (0, _columnResizeUtils.adjustColumnWidthsToFitContainer)(newColumnWidthState, containerWidth);
+                }
                 return {
                     ...state,
                     columnWidthState: newColumnWidthState
@@ -57,8 +59,10 @@ const createReducer = ()=>(state, action)=>{
         }
     };
 function useTableColumnResizeState(columns, containerWidth, params = {}) {
-    const { onColumnResize, columnSizingOptions } = params;
-    const reducer = _react.useMemo(()=>createReducer(), []);
+    const { onColumnResize, columnSizingOptions, autoFitColumns = true } = params;
+    const reducer = _react.useMemo(()=>createReducer(autoFitColumns), [
+        autoFitColumns
+    ]);
     const [state, dispatch] = _react.useReducer(reducer, {
         columns,
         containerWidth: 0,

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

@@ -1 +1 @@
-{"version":3,"sources":["useTableColumnResizeState.js"],"sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { columnDefinitionsToState, adjustColumnWidthsToFitContainer, getColumnById, setColumnProperty, getColumnWidth } from '../utils/columnResizeUtils';\nconst createReducer = ()=>(state, action)=>{\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            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            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            case 'SET_COLUMN_WIDTH':\n                const { columnId, width } = action;\n                const { containerWidth } = state;\n                const column = getColumnById(state.columnWidthState, columnId);\n                let newColumnWidthState = [\n                    ...state.columnWidthState\n                ];\n                if (!column) {\n                    return state;\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                return {\n                    ...state,\n                    columnWidthState: newColumnWidthState\n                };\n        }\n    };\nexport function useTableColumnResizeState(columns, containerWidth, params = {}) {\n    const { onColumnResize, columnSizingOptions } = params;\n    const reducer = React.useMemo(()=>createReducer(), []);\n    const [state, dispatch] = React.useReducer(reducer, {\n        columns,\n        containerWidth: 0,\n        columnWidthState: columnDefinitionsToState(columns, undefined, columnSizingOptions),\n        columnSizingOptions\n    });\n    useIsomorphicLayoutEffect(()=>{\n        dispatch({\n            type: 'CONTAINER_WIDTH_UPDATED',\n            containerWidth\n        });\n    }, [\n        containerWidth\n    ]);\n    useIsomorphicLayoutEffect(()=>{\n        dispatch({\n            type: 'COLUMNS_UPDATED',\n            columns\n        });\n    }, [\n        columns\n    ]);\n    useIsomorphicLayoutEffect(()=>{\n        dispatch({\n            type: 'COLUMN_SIZING_OPTIONS_UPDATED',\n            columnSizingOptions\n        });\n    }, [\n        columnSizingOptions\n    ]);\n    const setColumnWidth = useEventCallback((event, data)=>{\n        let { width } = data;\n        const { columnId } = data;\n        const col = getColumnById(state.columnWidthState, columnId);\n        if (!col) {\n            return;\n        }\n        width = Math.max(col.minWidth || 0, width);\n        if (onColumnResize) {\n            onColumnResize(event, {\n                columnId,\n                width\n            });\n        }\n        dispatch({\n            type: 'SET_COLUMN_WIDTH',\n            columnId,\n            width\n        });\n    });\n    return {\n        getColumnById: React.useCallback((colId)=>getColumnById(state.columnWidthState, colId), [\n            state.columnWidthState\n        ]),\n        getColumns: React.useCallback(()=>state.columnWidthState, [\n            state.columnWidthState\n        ]),\n        getColumnWidth: React.useCallback((colId)=>getColumnWidth(state.columnWidthState, colId), [\n            state.columnWidthState\n        ]),\n        setColumnWidth\n    };\n}\n"],"names":["useTableColumnResizeState","createReducer","state","action","type","containerWidth","columnWidthState","adjustColumnWidthsToFitContainer","newS","columnDefinitionsToState","columns","columnSizingOptions","newState","columnId","width","column","getColumnById","newColumnWidthState","setColumnProperty","params","onColumnResize","reducer","React","useMemo","dispatch","useReducer","undefined","useIsomorphicLayoutEffect","setColumnWidth","useEventCallback","event","data","col","Math","max","minWidth","useCallback","colId","getColumns","getColumnWidth"],"mappings":"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"}
+{"version":3,"sources":["useTableColumnResizeState.js"],"sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { columnDefinitionsToState, adjustColumnWidthsToFitContainer, getColumnById, setColumnProperty, getColumnWidth } from '../utils/columnResizeUtils';\nconst createReducer = (autoFitColumns)=>(state, action)=>{\n        switch(action.type){\n            case 'CONTAINER_WIDTH_UPDATED':\n                return {\n                    ...state,\n                    containerWidth: action.containerWidth,\n                    columnWidthState: autoFitColumns ? adjustColumnWidthsToFitContainer(state.columnWidthState, action.containerWidth) : state.columnWidthState\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: autoFitColumns ? adjustColumnWidthsToFitContainer(newS, state.containerWidth) : newS\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: autoFitColumns ? adjustColumnWidthsToFitContainer(newState, state.containerWidth) : newState\n                };\n            case 'SET_COLUMN_WIDTH':\n                const { columnId, width } = action;\n                const { containerWidth } = state;\n                const column = getColumnById(state.columnWidthState, columnId);\n                let newColumnWidthState = [\n                    ...state.columnWidthState\n                ];\n                if (!column) {\n                    return state;\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                if (autoFitColumns) {\n                    newColumnWidthState = adjustColumnWidthsToFitContainer(newColumnWidthState, containerWidth);\n                }\n                return {\n                    ...state,\n                    columnWidthState: newColumnWidthState\n                };\n        }\n    };\nexport function useTableColumnResizeState(columns, containerWidth, params = {}) {\n    const { onColumnResize, columnSizingOptions, autoFitColumns = true } = params;\n    const reducer = React.useMemo(()=>createReducer(autoFitColumns), [\n        autoFitColumns\n    ]);\n    const [state, dispatch] = React.useReducer(reducer, {\n        columns,\n        containerWidth: 0,\n        columnWidthState: columnDefinitionsToState(columns, undefined, columnSizingOptions),\n        columnSizingOptions\n    });\n    useIsomorphicLayoutEffect(()=>{\n        dispatch({\n            type: 'CONTAINER_WIDTH_UPDATED',\n            containerWidth\n        });\n    }, [\n        containerWidth\n    ]);\n    useIsomorphicLayoutEffect(()=>{\n        dispatch({\n            type: 'COLUMNS_UPDATED',\n            columns\n        });\n    }, [\n        columns\n    ]);\n    useIsomorphicLayoutEffect(()=>{\n        dispatch({\n            type: 'COLUMN_SIZING_OPTIONS_UPDATED',\n            columnSizingOptions\n        });\n    }, [\n        columnSizingOptions\n    ]);\n    const setColumnWidth = useEventCallback((event, data)=>{\n        let { width } = data;\n        const { columnId } = data;\n        const col = getColumnById(state.columnWidthState, columnId);\n        if (!col) {\n            return;\n        }\n        width = Math.max(col.minWidth || 0, width);\n        if (onColumnResize) {\n            onColumnResize(event, {\n                columnId,\n                width\n            });\n        }\n        dispatch({\n            type: 'SET_COLUMN_WIDTH',\n            columnId,\n            width\n        });\n    });\n    return {\n        getColumnById: React.useCallback((colId)=>getColumnById(state.columnWidthState, colId), [\n            state.columnWidthState\n        ]),\n        getColumns: React.useCallback(()=>state.columnWidthState, [\n            state.columnWidthState\n        ]),\n        getColumnWidth: React.useCallback((colId)=>getColumnWidth(state.columnWidthState, colId), [\n            state.columnWidthState\n        ]),\n        setColumnWidth\n    };\n}\n"],"names":["useTableColumnResizeState","createReducer","autoFitColumns","state","action","type","containerWidth","columnWidthState","adjustColumnWidthsToFitContainer","newS","columnDefinitionsToState","columns","columnSizingOptions","newState","columnId","width","column","getColumnById","newColumnWidthState","setColumnProperty","params","onColumnResize","reducer","React","useMemo","dispatch","useReducer","undefined","useIsomorphicLayoutEffect","setColumnWidth","useEventCallback","event","data","col","Math","max","minWidth","useCallback","colId","getColumns","getColumnWidth"],"mappings":"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"}

package/lib-commonjs/hooks/useTableColumnSizing.js

@@ -40,8 +40,10 @@ const defaultColumnSizingState = {
 };
 function useTableColumnSizing_unstable(params) {
     // False positive, these plugin hooks are intended to be run on every render
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    return (tableState)=>useTableColumnSizingState(tableState, params);
+    return (tableState)=>useTableColumnSizingState(tableState, {
+            autoFitColumns: true,
+            ...params
+        });
 }
 function getColumnStyles(column, dragging) {
     const width = column.width;
@@ -57,7 +59,7 @@ function getColumnStyles(column, dragging) {
         } : {}
     };
 }
-function useTableColumnSizingState(tableState, params) {
+function useTableColumnSizingState(tableState, params = {}) {
     const { columns } = tableState;
     // Gets the container width
     const { width, measureElementRef } = (0, _useMeasureElement.useMeasureElement)();
@@ -67,6 +69,7 @@ function useTableColumnSizingState(tableState, params) {
     const mouseHandler = (0, _useTableColumnResizeMouseHandler.useTableColumnResizeMouseHandler)(columnResizeState);
     // Creates the keyboard handler for resizing columns
     const { toggleInteractiveMode, getKeyboardResizingProps } = (0, _useKeyboardResizing.useKeyboardResizing)(columnResizeState);
+    const { autoFitColumns } = params;
     const enableKeyboardMode = _react.useCallback((columnId, onChange)=>(e)=>{
             e.preventDefault();
             e.nativeEvent.stopPropagation();
@@ -100,7 +103,7 @@ function useTableColumnSizingState(tableState, params) {
                 var _columns_;
                 const col = getColumnById(columnId);
                 const isLastColumn = ((_columns_ = columns[columns.length - 1]) === null || _columns_ === void 0 ? void 0 : _columns_.columnId) === columnId;
-                const aside = isLastColumn ? null : /*#__PURE__*/ _react.createElement(_TableResizeHandle.TableResizeHandle, {
+                const aside = isLastColumn && autoFitColumns ? null : /*#__PURE__*/ _react.createElement(_TableResizeHandle.TableResizeHandle, {
                     onMouseDown: getOnMouseDown(columnId),
                     onTouchStart: getOnMouseDown(columnId),
                     ...getKeyboardResizingProps(columnId, (col === null || col === void 0 ? void 0 : col.width) || 0)
@@ -114,7 +117,8 @@ function useTableColumnSizingState(tableState, params) {
                 columns,
                 dragging,
                 getKeyboardResizingProps,
-                getOnMouseDown
+                getOnMouseDown,
+                autoFitColumns
             ]),
             getTableCellProps: _react.useCallback((columnId)=>{
                 const col = getColumnById(columnId);

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

@@ -1 +1 @@
-{"version":3,"sources":["useTableColumnSizing.js"],"sourcesContent":["import * as React from 'react';\nimport { TableResizeHandle } from '../TableResizeHandle';\nimport { useMeasureElement } from './useMeasureElement';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useKeyboardResizing } from './useKeyboardResizing';\nexport const defaultColumnSizingState = {\n    getColumnWidths: ()=>[],\n    getOnMouseDown: ()=>()=>null,\n    setColumnWidth: ()=>null,\n    getTableProps: ()=>({}),\n    getTableHeaderCellProps: ()=>({\n            style: {},\n            columnId: ''\n        }),\n    getTableCellProps: ()=>({\n            style: {},\n            columnId: ''\n        }),\n    enableKeyboardMode: ()=>()=>null\n};\nexport function useTableColumnSizing_unstable(params) {\n    // False positive, these plugin hooks are intended to be run on every render\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    return (tableState)=>useTableColumnSizingState(tableState, params);\n}\nfunction getColumnStyles(column, dragging) {\n    const width = column.width;\n    return {\n        // native styles\n        width,\n        // non-native element styles (flex layout)\n        minWidth: width,\n        maxWidth: width,\n        // Fixed the unwanted sort: https://github.com/microsoft/fluentui/issues/27803\n        ...dragging ? {\n            pointerEvents: 'none'\n        } : {}\n    };\n}\nfunction useTableColumnSizingState(tableState, params) {\n    const { columns } = tableState;\n    // Gets the container width\n    const { width, measureElementRef } = useMeasureElement();\n    // Creates the state based on columns and available containerWidth\n    const columnResizeState = useTableColumnResizeState(columns, width + ((params === null || params === void 0 ? void 0 : params.containerWidthOffset) || 0), params);\n    // Creates the mouse handler and attaches the state to it\n    const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);\n    // Creates the keyboard handler for resizing columns\n    const { toggleInteractiveMode, getKeyboardResizingProps } = useKeyboardResizing(columnResizeState);\n    const enableKeyboardMode = React.useCallback((columnId, onChange)=>(e)=>{\n            e.preventDefault();\n            e.nativeEvent.stopPropagation();\n            toggleInteractiveMode(columnId, onChange);\n        }, [\n        toggleInteractiveMode\n    ]);\n    const { getColumnById, setColumnWidth, getColumns } = columnResizeState;\n    const { getOnMouseDown, dragging } = mouseHandler;\n    return {\n        ...tableState,\n        tableRef: measureElementRef,\n        // eslint-disable-next-line @typescript-eslint/naming-convention\n        columnSizing_unstable: {\n            getOnMouseDown,\n            setColumnWidth: (columnId, w)=>setColumnWidth(undefined, {\n                    columnId,\n                    width: w\n                }),\n            getColumnWidths: getColumns,\n            getTableProps: (props = {})=>{\n                return {\n                    ...props,\n                    style: {\n                        minWidth: 'fit-content',\n                        ...props.style || {}\n                    }\n                };\n            },\n            getTableHeaderCellProps: React.useCallback((columnId)=>{\n                var _columns_;\n                const col = getColumnById(columnId);\n                const isLastColumn = ((_columns_ = columns[columns.length - 1]) === null || _columns_ === void 0 ? void 0 : _columns_.columnId) === columnId;\n                const aside = isLastColumn ? null : /*#__PURE__*/ React.createElement(TableResizeHandle, {\n                    onMouseDown: getOnMouseDown(columnId),\n                    onTouchStart: getOnMouseDown(columnId),\n                    ...getKeyboardResizingProps(columnId, (col === null || col === void 0 ? void 0 : col.width) || 0)\n                });\n                return col ? {\n                    style: getColumnStyles(col, dragging),\n                    aside\n                } : {};\n            }, [\n                getColumnById,\n                columns,\n                dragging,\n                getKeyboardResizingProps,\n                getOnMouseDown\n            ]),\n            getTableCellProps: React.useCallback((columnId)=>{\n                const col = getColumnById(columnId);\n                return col ? {\n                    style: getColumnStyles(col)\n                } : {};\n            }, [\n                getColumnById\n            ]),\n            enableKeyboardMode\n        }\n    };\n}\n"],"names":["defaultColumnSizingState","useTableColumnSizing_unstable","getColumnWidths","getOnMouseDown","setColumnWidth","getTableProps","getTableHeaderCellProps","style","columnId","getTableCellProps","enableKeyboardMode","params","tableState","useTableColumnSizingState","getColumnStyles","column","dragging","width","minWidth","maxWidth","pointerEvents","columns","measureElementRef","useMeasureElement","columnResizeState","useTableColumnResizeState","containerWidthOffset","mouseHandler","useTableColumnResizeMouseHandler","toggleInteractiveMode","getKeyboardResizingProps","useKeyboardResizing","React","useCallback","onChange","e","preventDefault","nativeEvent","stopPropagation","getColumnById","getColumns","tableRef","columnSizing_unstable","w","undefined","props","_columns_","col","isLastColumn","length","aside","createElement","TableResizeHandle","onMouseDown","onTouchStart"],"mappings":"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"}
+{"version":3,"sources":["useTableColumnSizing.js"],"sourcesContent":["import * as React from 'react';\nimport { TableResizeHandle } from '../TableResizeHandle';\nimport { useMeasureElement } from './useMeasureElement';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useKeyboardResizing } from './useKeyboardResizing';\nexport const defaultColumnSizingState = {\n    getColumnWidths: ()=>[],\n    getOnMouseDown: ()=>()=>null,\n    setColumnWidth: ()=>null,\n    getTableProps: ()=>({}),\n    getTableHeaderCellProps: ()=>({\n            style: {},\n            columnId: ''\n        }),\n    getTableCellProps: ()=>({\n            style: {},\n            columnId: ''\n        }),\n    enableKeyboardMode: ()=>()=>null\n};\nexport function useTableColumnSizing_unstable(params) {\n    // False positive, these plugin hooks are intended to be run on every render\n    return (tableState)=>// eslint-disable-next-line react-hooks/rules-of-hooks\n        useTableColumnSizingState(tableState, {\n            autoFitColumns: true,\n            ...params\n        });\n}\nfunction getColumnStyles(column, dragging) {\n    const width = column.width;\n    return {\n        // native styles\n        width,\n        // non-native element styles (flex layout)\n        minWidth: width,\n        maxWidth: width,\n        // Fixed the unwanted sort: https://github.com/microsoft/fluentui/issues/27803\n        ...dragging ? {\n            pointerEvents: 'none'\n        } : {}\n    };\n}\nfunction useTableColumnSizingState(tableState, params = {}) {\n    const { columns } = tableState;\n    // Gets the container width\n    const { width, measureElementRef } = useMeasureElement();\n    // Creates the state based on columns and available containerWidth\n    const columnResizeState = useTableColumnResizeState(columns, width + ((params === null || params === void 0 ? void 0 : params.containerWidthOffset) || 0), params);\n    // Creates the mouse handler and attaches the state to it\n    const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);\n    // Creates the keyboard handler for resizing columns\n    const { toggleInteractiveMode, getKeyboardResizingProps } = useKeyboardResizing(columnResizeState);\n    const { autoFitColumns } = params;\n    const enableKeyboardMode = React.useCallback((columnId, onChange)=>(e)=>{\n            e.preventDefault();\n            e.nativeEvent.stopPropagation();\n            toggleInteractiveMode(columnId, onChange);\n        }, [\n        toggleInteractiveMode\n    ]);\n    const { getColumnById, setColumnWidth, getColumns } = columnResizeState;\n    const { getOnMouseDown, dragging } = mouseHandler;\n    return {\n        ...tableState,\n        tableRef: measureElementRef,\n        // eslint-disable-next-line @typescript-eslint/naming-convention\n        columnSizing_unstable: {\n            getOnMouseDown,\n            setColumnWidth: (columnId, w)=>setColumnWidth(undefined, {\n                    columnId,\n                    width: w\n                }),\n            getColumnWidths: getColumns,\n            getTableProps: (props = {})=>{\n                return {\n                    ...props,\n                    style: {\n                        minWidth: 'fit-content',\n                        ...props.style || {}\n                    }\n                };\n            },\n            getTableHeaderCellProps: React.useCallback((columnId)=>{\n                var _columns_;\n                const col = getColumnById(columnId);\n                const isLastColumn = ((_columns_ = columns[columns.length - 1]) === null || _columns_ === void 0 ? void 0 : _columns_.columnId) === columnId;\n                const aside = isLastColumn && autoFitColumns ? null : /*#__PURE__*/ React.createElement(TableResizeHandle, {\n                    onMouseDown: getOnMouseDown(columnId),\n                    onTouchStart: getOnMouseDown(columnId),\n                    ...getKeyboardResizingProps(columnId, (col === null || col === void 0 ? void 0 : col.width) || 0)\n                });\n                return col ? {\n                    style: getColumnStyles(col, dragging),\n                    aside\n                } : {};\n            }, [\n                getColumnById,\n                columns,\n                dragging,\n                getKeyboardResizingProps,\n                getOnMouseDown,\n                autoFitColumns\n            ]),\n            getTableCellProps: React.useCallback((columnId)=>{\n                const col = getColumnById(columnId);\n                return col ? {\n                    style: getColumnStyles(col)\n                } : {};\n            }, [\n                getColumnById\n            ]),\n            enableKeyboardMode\n        }\n    };\n}\n"],"names":["defaultColumnSizingState","useTableColumnSizing_unstable","getColumnWidths","getOnMouseDown","setColumnWidth","getTableProps","getTableHeaderCellProps","style","columnId","getTableCellProps","enableKeyboardMode","params","tableState","useTableColumnSizingState","autoFitColumns","getColumnStyles","column","dragging","width","minWidth","maxWidth","pointerEvents","columns","measureElementRef","useMeasureElement","columnResizeState","useTableColumnResizeState","containerWidthOffset","mouseHandler","useTableColumnResizeMouseHandler","toggleInteractiveMode","getKeyboardResizingProps","useKeyboardResizing","React","useCallback","onChange","e","preventDefault","nativeEvent","stopPropagation","getColumnById","getColumns","tableRef","columnSizing_unstable","w","undefined","props","_columns_","col","isLastColumn","length","aside","createElement","TableResizeHandle","onMouseDown","onTouchStart"],"mappings":"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"}

package/lib-commonjs/hooks/useTableCompositeNavigation.js

@@ -57,10 +57,14 @@ function useTableCompositeNavigation() {
         })();
         // Escape groupper focus trap before arrow down
         if ((e.key === _keyboardkeys.ArrowDown || e.key === _keyboardkeys.ArrowUp) && isInCell) {
-            (0, _reacttabster.dispatchGroupperMoveFocusEvent)(activeElement, _reacttabster.TabsterTypes.GroupperMoveFocusActions.Escape);
+            activeElement.dispatchEvent(new _reacttabster.GroupperMoveFocusEvent({
+                action: _reacttabster.GroupperMoveFocusActions.Escape
+            }));
             activeElement = targetDocument.activeElement;
             if (activeElement) {
-                (0, _reacttabster.dispatchMoverMoveFocusEvent)(activeElement, _reacttabster.TabsterTypes.MoverKeys[e.key]);
+                activeElement.dispatchEvent(new _reacttabster.MoverMoveFocusEvent({
+                    key: _reacttabster.MoverKeys[e.key]
+                }));
             }
         }
     }, [

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

@@ -1 +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, ArrowUp } from '@fluentui/keyboard-keys';\nimport { useArrowNavigationGroup, useFocusableGroup, useMergedTabsterAttributes_unstable, useFocusFinders } from '@fluentui/react-tabster';\nimport { isHTMLElement } from '@fluentui/react-utilities';\nimport { TabsterTypes, dispatchGroupperMoveFocusEvent, dispatchMoverMoveFocusEvent } from '@fluentui/react-tabster';\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        let 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            dispatchGroupperMoveFocusEvent(activeElement, TabsterTypes.GroupperMoveFocusActions.Escape);\n            activeElement = targetDocument.activeElement;\n            if (activeElement) {\n                dispatchMoverMoveFocusEvent(activeElement, TabsterTypes.MoverKeys[e.key]);\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","dispatchGroupperMoveFocusEvent","TabsterTypes","GroupperMoveFocusActions","Escape","dispatchMoverMoveFocusEvent","MoverKeys","onTableKeyDown","tableTabsterAttribute","tableRowTabsterAttribute"],"mappings":";;;;+BAMgBA;;;eAAAA;;;;iEANO;qCACyB;8BACD;8BACkE;gCACnF;AAEvB,SAASA;IACZ,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,kBAAkB,EAAE,GAAGC,IAAAA,6BAAe;IAC9C,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,MAAMC,UAAUC,IAAAA,iDAAmC,EAACZ,gBAAgBI;IACpE,MAAMS,YAAYC,OAAMC,WAAW,CAAC,CAACC;QACjC,IAAI,CAACP,gBAAgB;YACjB;QACJ;QACA,IAAIQ,gBAAgBR,eAAeQ,aAAa;QAChD,IAAI,CAACA,iBAAiB,CAACD,EAAEE,aAAa,CAACC,QAAQ,CAACF,gBAAgB;YAC5D;QACJ;QACA,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,QAAQQ,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBC,KAAK;QAC7I;QACA,IAAIN,sBAAsB,OAAO;YAC7B;QACJ;QACA,MAAMO,WAAW,AAAC,CAAA;YACd,IAAIC,MAAMJ,IAAAA,6BAAa,EAACP,iBAAiBA,gBAAgB;YACzD,MAAMW,IAAI;gBACN,MAAMC,UAAUD,IAAIP,YAAY,CAAC;gBACjC,IAAIQ,YAAY,UAAUA,YAAY,YAAY;oBAC9C,OAAO;gBACX;gBACAD,MAAMA,IAAIE,aAAa;YAC3B;YACA,OAAO;QACX,CAAA;QACA,+CAA+C;QAC/C,IAAI,AAACd,CAAAA,EAAEM,GAAG,KAAKS,uBAAS,IAAIf,EAAEM,GAAG,KAAKU,qBAAO,AAAD,KAAML,UAAU;YACxDM,IAAAA,4CAA8B,EAAChB,eAAeiB,0BAAY,CAACC,wBAAwB,CAACC,MAAM;YAC1FnB,gBAAgBR,eAAeQ,aAAa;YAC5C,IAAIA,eAAe;gBACfoB,IAAAA,yCAA2B,EAACpB,eAAeiB,0BAAY,CAACI,SAAS,CAACtB,EAAEM,GAAG,CAAC;YAC5E;QACJ;IACJ,GAAG;QACCb;QACAF;KACH;IACD,OAAO;QACHgC,gBAAgB1B;QAChB2B,uBAAuBrC;QACvBsC,0BAA0B9B;IAC9B;AACJ"}
+{"version":3,"sources":["useTableCompositeNavigation.js"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { ArrowDown, ArrowRight, ArrowUp } from '@fluentui/keyboard-keys';\nimport { useArrowNavigationGroup, useFocusableGroup, useMergedTabsterAttributes_unstable, useFocusFinders, GroupperMoveFocusEvent, MoverMoveFocusEvent, GroupperMoveFocusActions, MoverKeys } 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        let 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 GroupperMoveFocusEvent({\n                action: GroupperMoveFocusActions.Escape\n            }));\n            activeElement = targetDocument.activeElement;\n            if (activeElement) {\n                activeElement.dispatchEvent(new MoverMoveFocusEvent({\n                    key: MoverKeys[e.key]\n                }));\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","GroupperMoveFocusEvent","action","GroupperMoveFocusActions","Escape","MoverMoveFocusEvent","MoverKeys","onTableKeyDown","tableTabsterAttribute","tableRowTabsterAttribute"],"mappings":";;;;+BAKgBA;;;eAAAA;;;;iEALO;qCACyB;8BACD;8BACoJ;gCACrK;AACvB,SAASA;IACZ,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,kBAAkB,EAAE,GAAGC,IAAAA,6BAAe;IAC9C,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,MAAMC,UAAUC,IAAAA,iDAAmC,EAACZ,gBAAgBI;IACpE,MAAMS,YAAYC,OAAMC,WAAW,CAAC,CAACC;QACjC,IAAI,CAACP,gBAAgB;YACjB;QACJ;QACA,IAAIQ,gBAAgBR,eAAeQ,aAAa;QAChD,IAAI,CAACA,iBAAiB,CAACD,EAAEE,aAAa,CAACC,QAAQ,CAACF,gBAAgB;YAC5D;QACJ;QACA,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,QAAQQ,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBC,KAAK;QAC7I;QACA,IAAIN,sBAAsB,OAAO;YAC7B;QACJ;QACA,MAAMO,WAAW,AAAC,CAAA;YACd,IAAIC,MAAMJ,IAAAA,6BAAa,EAACP,iBAAiBA,gBAAgB;YACzD,MAAMW,IAAI;gBACN,MAAMC,UAAUD,IAAIP,YAAY,CAAC;gBACjC,IAAIQ,YAAY,UAAUA,YAAY,YAAY;oBAC9C,OAAO;gBACX;gBACAD,MAAMA,IAAIE,aAAa;YAC3B;YACA,OAAO;QACX,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,oCAAsB,CAAC;gBACnDC,QAAQC,sCAAwB,CAACC,MAAM;YAC3C;YACApB,gBAAgBR,eAAeQ,aAAa;YAC5C,IAAIA,eAAe;gBACfA,cAAcgB,aAAa,CAAC,IAAIK,iCAAmB,CAAC;oBAChDhB,KAAKiB,uBAAS,CAACvB,EAAEM,GAAG,CAAC;gBACzB;YACJ;QACJ;IACJ,GAAG;QACCb;QACAF;KACH;IACD,OAAO;QACHiC,gBAAgB3B;QAChB4B,uBAAuBtC;QACvBuC,0BAA0B/B;IAC9B;AACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-table",
-  "version": "9.12.1",
+  "version": "9.14.0",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -36,14 +36,14 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.7",
-    "@fluentui/react-aria": "^9.10.3",
-    "@fluentui/react-avatar": "^9.6.20",
-    "@fluentui/react-checkbox": "^9.2.19",
+    "@fluentui/react-aria": "^9.10.4",
+    "@fluentui/react-avatar": "^9.6.21",
+    "@fluentui/react-checkbox": "^9.2.20",
     "@fluentui/react-context-selector": "^9.1.57",
-    "@fluentui/react-icons": "^2.0.224",
-    "@fluentui/react-radio": "^9.2.14",
+    "@fluentui/react-icons": "^2.0.235",
+    "@fluentui/react-radio": "^9.2.15",
     "@fluentui/react-shared-contexts": "^9.16.0",
-    "@fluentui/react-tabster": "^9.19.6",
+    "@fluentui/react-tabster": "^9.20.0",
     "@fluentui/react-theme": "^9.1.19",
     "@fluentui/react-utilities": "^9.18.6",
     "@fluentui/react-jsx-runtime": "^9.0.35",