@fluentui/react-table 9.11.2 → 9.11.4

package/lib/hooks/useTableColumnSizing.js

@@ -51,17 +51,19 @@ function useTableColumnSizingState(tableState, params) {
         }, [
         toggleInteractiveMode
     ]);
+    const { getColumnById, setColumnWidth, getColumns } = columnResizeState;
+    const { getOnMouseDown } = mouseHandler;
     return {
         ...tableState,
         tableRef: measureElementRef,
         // eslint-disable-next-line @typescript-eslint/naming-convention
         columnSizing_unstable: {
-            getOnMouseDown: mouseHandler.getOnMouseDown,
-            setColumnWidth: (columnId, w)=>columnResizeState.setColumnWidth(undefined, {
+            getOnMouseDown,
+            setColumnWidth: (columnId, w)=>setColumnWidth(undefined, {
                     columnId,
                     width: w
                 }),
-            getColumnWidths: columnResizeState.getColumns,
+            getColumnWidths: getColumns,
             getTableProps: (props = {})=>{
                 return {
                     ...props,
@@ -71,26 +73,33 @@ function useTableColumnSizingState(tableState, params) {
                     }
                 };
             },
-            getTableHeaderCellProps: (columnId)=>{
+            getTableHeaderCellProps: React.useCallback((columnId)=>{
                 var _columns_;
-                const col = columnResizeState.getColumnById(columnId);
+                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, {
-                    onMouseDown: mouseHandler.getOnMouseDown(columnId),
-                    onTouchStart: mouseHandler.getOnMouseDown(columnId),
+                    onMouseDown: getOnMouseDown(columnId),
+                    onTouchStart: getOnMouseDown(columnId),
                     ...getKeyboardResizingProps(columnId, (col === null || col === void 0 ? void 0 : col.width) || 0)
                 });
                 return col ? {
                     style: getColumnStyles(col),
                     aside
                 } : {};
-            },
-            getTableCellProps: (columnId)=>{
-                const col = columnResizeState.getColumnById(columnId);
+            }, [
+                getColumnById,
+                columns,
+                getKeyboardResizingProps,
+                getOnMouseDown
+            ]),
+            getTableCellProps: React.useCallback((columnId)=>{
+                const col = getColumnById(columnId);
                 return col ? {
                     style: getColumnStyles(col)
                 } : {};
-            },
+            }, [
+                getColumnById
+            ]),
             enableKeyboardMode
         }
     };

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): 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  };\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  return {\n    ...tableState,\n    tableRef: measureElementRef,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    columnSizing_unstable: {\n      getOnMouseDown: mouseHandler.getOnMouseDown,\n      setColumnWidth: (columnId: TableColumnId, w: number) =>\n        columnResizeState.setColumnWidth(undefined, { columnId, width: w }),\n      getColumnWidths: columnResizeState.getColumns,\n      getTableProps: (props = {}) => {\n        return {\n          ...props,\n          style: {\n            minWidth: 'fit-content',\n            ...(props.style || {}),\n          },\n        };\n      },\n      getTableHeaderCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        const isLastColumn = columns[columns.length - 1]?.columnId === columnId;\n\n        const aside = isLastColumn ? null : (\n          <TableResizeHandle\n            onMouseDown={mouseHandler.getOnMouseDown(columnId)}\n            onTouchStart={mouseHandler.getOnMouseDown(columnId)}\n            {...getKeyboardResizingProps(columnId, col?.width || 0)}\n          />\n        );\n\n        return col\n          ? {\n              style: getColumnStyles(col),\n              aside,\n            }\n          : {};\n      },\n      getTableCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        return col ? { style: getColumnStyles(col) } : {};\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","width","minWidth","maxWidth","columns","measureElementRef","columnResizeState","containerWidthOffset","mouseHandler","toggleInteractiveMode","getKeyboardResizingProps","useCallback","onChange","e","preventDefault","nativeEvent","stopPropagation","tableRef","columnSizing_unstable","w","undefined","getColumns","props","col","getColumnById","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  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return (tableState: TableFeaturesState<TItem>) => useTableColumnSizingState(tableState, params);\n}\n\nfunction getColumnStyles(column: ColumnWidthState): 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  };\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 } = 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),\n                aside,\n              }\n            : {};\n        },\n        [getColumnById, columns, 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","width","minWidth","maxWidth","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/useTableFeatures.js

@@ -16,13 +16,18 @@ export const defaultTableState = {
 };
 export function useTableFeatures(options, plugins = []) {
     const { items, getRowId, columns } = options;
-    const getRows = (rowEnhancer = defaultRowEnhancer)=>items.map((item, i)=>{
+    const getRows = React.useCallback((rowEnhancer = defaultRowEnhancer)=>{
+        return items.map((item, i)=>{
             var _getRowId;
             return rowEnhancer({
                 item,
                 rowId: (_getRowId = getRowId === null || getRowId === void 0 ? void 0 : getRowId(item)) !== null && _getRowId !== void 0 ? _getRowId : i
             });
         });
+    }, [
+        items,
+        getRowId
+    ]);
     const initialState = {
         getRowId,
         items,

package/lib/hooks/useTableFeatures.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTableFeatures.ts"],"sourcesContent":["import * as React from 'react';\nimport type {\n  UseTableFeaturesOptions,\n  TableFeaturesState,\n  TableRowData,\n  RowEnhancer,\n  TableFeaturePlugin,\n  TableSortState,\n} from './types';\nimport { defaultTableSelectionState } from './useTableSelection';\nimport { defaultTableSortState } from './useTableSort';\nimport { defaultColumnSizingState } from './useTableColumnSizing';\n\nconst defaultRowEnhancer: RowEnhancer<unknown, TableRowData<unknown>> = row => row;\n\nexport const defaultTableState: TableFeaturesState<unknown> = {\n  selection: defaultTableSelectionState,\n  sort: defaultTableSortState,\n  getRows: () => [],\n  getRowId: () => '',\n  items: [],\n  columns: [],\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  columnSizing_unstable: defaultColumnSizingState,\n  tableRef: React.createRef<HTMLDivElement>(),\n};\n\nexport function useTableFeatures<TItem>(\n  options: UseTableFeaturesOptions<TItem>,\n  plugins: TableFeaturePlugin[] = [],\n): TableFeaturesState<TItem> {\n  const { items, getRowId, columns } = options;\n\n  const getRows = <TRowState extends TableRowData<TItem>>(\n    rowEnhancer = defaultRowEnhancer as RowEnhancer<TItem, TRowState>,\n  ) => items.map((item, i) => rowEnhancer({ item, rowId: getRowId?.(item) ?? i }));\n\n  const initialState: TableFeaturesState<TItem> = {\n    getRowId,\n    items,\n    columns,\n    getRows,\n    selection: defaultTableSelectionState,\n    sort: defaultTableSortState as TableSortState<TItem>,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    columnSizing_unstable: defaultColumnSizingState,\n    tableRef: React.createRef(),\n  };\n\n  return plugins.reduce((state, plugin) => plugin(state), initialState);\n}\n"],"names":["React","defaultTableSelectionState","defaultTableSortState","defaultColumnSizingState","defaultRowEnhancer","row","defaultTableState","selection","sort","getRows","getRowId","items","columns","columnSizing_unstable","tableRef","createRef","useTableFeatures","options","plugins","rowEnhancer","map","item","i","rowId","initialState","reduce","state","plugin"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAS/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,yBAAyB;AAElE,MAAMC,qBAAkEC,CAAAA,MAAOA;AAE/E,OAAO,MAAMC,oBAAiD;IAC5DC,WAAWN;IACXO,MAAMN;IACNO,SAAS,IAAM,EAAE;IACjBC,UAAU,IAAM;IAChBC,OAAO,EAAE;IACTC,SAAS,EAAE;IACX,gEAAgE;IAChEC,uBAAuBV;IACvBW,UAAUd,MAAMe,SAAS;AAC3B,EAAE;AAEF,OAAO,SAASC,iBACdC,OAAuC,EACvCC,UAAgC,EAAE;IAElC,MAAM,EAAEP,KAAK,EAAED,QAAQ,EAAEE,OAAO,EAAE,GAAGK;IAErC,MAAMR,UAAU,CACdU,cAAcf,kBAAmD,GAC9DO,MAAMS,GAAG,CAAC,CAACC,MAAMC;gBAAiCZ;mBAA3BS,YAAY;gBAAEE;gBAAME,OAAOb,CAAAA,YAAAA,qBAAAA,+BAAAA,SAAWW,mBAAXX,uBAAAA,YAAoBY;YAAE;QAAC;IAE9E,MAAME,eAA0C;QAC9Cd;QACAC;QACAC;QACAH;QACAF,WAAWN;QACXO,MAAMN;QACN,gEAAgE;QAChEW,uBAAuBV;QACvBW,UAAUd,MAAMe,SAAS;IAC3B;IAEA,OAAOG,QAAQO,MAAM,CAAC,CAACC,OAAOC,SAAWA,OAAOD,QAAQF;AAC1D"}
+{"version":3,"sources":["useTableFeatures.ts"],"sourcesContent":["import * as React from 'react';\nimport type {\n  UseTableFeaturesOptions,\n  TableFeaturesState,\n  TableRowData,\n  RowEnhancer,\n  TableFeaturePlugin,\n  TableSortState,\n} from './types';\nimport { defaultTableSelectionState } from './useTableSelection';\nimport { defaultTableSortState } from './useTableSort';\nimport { defaultColumnSizingState } from './useTableColumnSizing';\n\nconst defaultRowEnhancer: RowEnhancer<unknown, TableRowData<unknown>> = row => row;\n\nexport const defaultTableState: TableFeaturesState<unknown> = {\n  selection: defaultTableSelectionState,\n  sort: defaultTableSortState,\n  getRows: () => [],\n  getRowId: () => '',\n  items: [],\n  columns: [],\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  columnSizing_unstable: defaultColumnSizingState,\n  tableRef: React.createRef<HTMLDivElement>(),\n};\n\nexport function useTableFeatures<TItem>(\n  options: UseTableFeaturesOptions<TItem>,\n  plugins: TableFeaturePlugin[] = [],\n): TableFeaturesState<TItem> {\n  const { items, getRowId, columns } = options;\n\n  const getRows = React.useCallback(\n    <TRowState extends TableRowData<TItem>>(rowEnhancer = defaultRowEnhancer as RowEnhancer<TItem, TRowState>) => {\n      return items.map((item, i) => rowEnhancer({ item, rowId: getRowId?.(item) ?? i }));\n    },\n    [items, getRowId],\n  );\n\n  const initialState: TableFeaturesState<TItem> = {\n    getRowId,\n    items,\n    columns,\n    getRows,\n    selection: defaultTableSelectionState,\n    sort: defaultTableSortState as TableSortState<TItem>,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    columnSizing_unstable: defaultColumnSizingState,\n    tableRef: React.createRef(),\n  };\n\n  return plugins.reduce((state, plugin) => plugin(state), initialState);\n}\n"],"names":["React","defaultTableSelectionState","defaultTableSortState","defaultColumnSizingState","defaultRowEnhancer","row","defaultTableState","selection","sort","getRows","getRowId","items","columns","columnSizing_unstable","tableRef","createRef","useTableFeatures","options","plugins","useCallback","rowEnhancer","map","item","i","rowId","initialState","reduce","state","plugin"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAS/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,yBAAyB;AAElE,MAAMC,qBAAkEC,CAAAA,MAAOA;AAE/E,OAAO,MAAMC,oBAAiD;IAC5DC,WAAWN;IACXO,MAAMN;IACNO,SAAS,IAAM,EAAE;IACjBC,UAAU,IAAM;IAChBC,OAAO,EAAE;IACTC,SAAS,EAAE;IACX,gEAAgE;IAChEC,uBAAuBV;IACvBW,UAAUd,MAAMe,SAAS;AAC3B,EAAE;AAEF,OAAO,SAASC,iBACdC,OAAuC,EACvCC,UAAgC,EAAE;IAElC,MAAM,EAAEP,KAAK,EAAED,QAAQ,EAAEE,OAAO,EAAE,GAAGK;IAErC,MAAMR,UAAUT,MAAMmB,WAAW,CAC/B,CAAwCC,cAAchB,kBAAmD;QACvG,OAAOO,MAAMU,GAAG,CAAC,CAACC,MAAMC;gBAAiCb;mBAA3BU,YAAY;gBAAEE;gBAAME,OAAOd,CAAAA,YAAAA,qBAAAA,+BAAAA,SAAWY,mBAAXZ,uBAAAA,YAAoBa;YAAE;QAAC;IAClF,GACA;QAACZ;QAAOD;KAAS;IAGnB,MAAMe,eAA0C;QAC9Cf;QACAC;QACAC;QACAH;QACAF,WAAWN;QACXO,MAAMN;QACN,gEAAgE;QAChEW,uBAAuBV;QACvBW,UAAUd,MAAMe,SAAS;IAC3B;IAEA,OAAOG,QAAQQ,MAAM,CAAC,CAACC,OAAOC,SAAWA,OAAOD,QAAQF;AAC1D"}

package/lib/hooks/useTableSort.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useControllableState } from '@fluentui/react-utilities';
+import { useControllableState, useEventCallback } from '@fluentui/react-utilities';
 const noop = ()=>undefined;
 export const defaultTableSortState = {
     getSortDirection: ()=>'ascending',
@@ -18,7 +18,7 @@ export function useTableSort(options) {
 }
 export function useTableSortState(tableState, options) {
     const { columns } = tableState;
-    const { sortState, defaultSortState, onSortChange } = options;
+    const { sortState, defaultSortState, onSortChange: onSortChangeProp = noop } = options;
     const [sorted, setSorted] = useControllableState({
         initialState: {
             sortDirection: 'ascending',
@@ -28,7 +28,8 @@ export function useTableSortState(tableState, options) {
         state: sortState
     });
     const { sortColumn, sortDirection } = sorted;
-    const toggleColumnSort = (e, columnId)=>{
+    const onSortChange = useEventCallback(onSortChangeProp);
+    const toggleColumnSort = React.useCallback((e, columnId)=>{
         setSorted((s)=>{
             const newState = {
                 ...s,
@@ -42,7 +43,10 @@ export function useTableSortState(tableState, options) {
             onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(e, newState);
             return newState;
         });
-    };
+    }, [
+        onSortChange,
+        setSorted
+    ]);
     const setColumnSort = (e, nextSortColumn, nextSortDirection)=>{
         const newState = {
             sortColumn: nextSortColumn,
@@ -51,7 +55,7 @@ export function useTableSortState(tableState, options) {
         onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(e, newState);
         setSorted(newState);
     };
-    const sort = (rows)=>{
+    const sort = React.useCallback((rows)=>{
         return rows.slice().sort((a, b)=>{
             const sortColumnDef = columns.find((column)=>column.columnId === sortColumn);
             if (!(sortColumnDef === null || sortColumnDef === void 0 ? void 0 : sortColumnDef.compare)) {
@@ -60,7 +64,11 @@ export function useTableSortState(tableState, options) {
             const mod = sortDirection === 'ascending' ? 1 : -1;
             return sortColumnDef.compare(a.item, b.item) * mod;
         });
-    };
+    }, [
+        columns,
+        sortColumn,
+        sortDirection
+    ]);
     const getSortDirection = (columnId)=>{
         return sortColumn === columnId ? sortDirection : undefined;
     };

package/lib/hooks/useTableSort.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTableSort.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport type {\n  TableColumnId,\n  TableRowData,\n  SortState,\n  TableSortState,\n  TableFeaturesState,\n  UseTableSortOptions,\n} from './types';\n\nconst noop = () => undefined;\n\nexport const defaultTableSortState: TableSortState<unknown> = {\n  getSortDirection: () => 'ascending',\n  setColumnSort: noop,\n  sort: <TRowState extends TableRowData<unknown>>(rows: TRowState[]) => [...rows],\n  sortColumn: undefined,\n  sortDirection: 'ascending',\n  toggleColumnSort: noop,\n};\n\nexport function useTableSort<TItem>(options: UseTableSortOptions) {\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>) => useTableSortState(tableState, options);\n}\n\nexport function useTableSortState<TItem>(\n  tableState: TableFeaturesState<TItem>,\n  options: UseTableSortOptions,\n): TableFeaturesState<TItem> {\n  const { columns } = tableState;\n  const { sortState, defaultSortState, onSortChange } = options;\n\n  const [sorted, setSorted] = useControllableState<SortState>({\n    initialState: {\n      sortDirection: 'ascending' as const,\n      sortColumn: undefined,\n    },\n    defaultState: defaultSortState,\n    state: sortState,\n  });\n\n  const { sortColumn, sortDirection } = sorted;\n\n  const toggleColumnSort = (e: React.SyntheticEvent, columnId: TableColumnId | undefined) => {\n    setSorted(s => {\n      const newState = { ...s, sortColumn: columnId };\n      if (s.sortColumn === columnId) {\n        newState.sortDirection = s.sortDirection === 'ascending' ? 'descending' : 'ascending';\n      } else {\n        newState.sortDirection = 'ascending';\n      }\n\n      onSortChange?.(e, newState);\n      return newState;\n    });\n  };\n\n  const setColumnSort: TableSortState<TItem>['setColumnSort'] = (e, nextSortColumn, nextSortDirection) => {\n    const newState = { sortColumn: nextSortColumn, sortDirection: nextSortDirection };\n    onSortChange?.(e, newState);\n    setSorted(newState);\n  };\n\n  const sort = <TRowState extends TableRowData<TItem>>(rows: TRowState[]) => {\n    return rows.slice().sort((a, b) => {\n      const sortColumnDef = columns.find(column => column.columnId === sortColumn);\n      if (!sortColumnDef?.compare) {\n        return 0;\n      }\n\n      const mod = sortDirection === 'ascending' ? 1 : -1;\n      return sortColumnDef.compare(a.item, b.item) * mod;\n    });\n  };\n\n  const getSortDirection: TableSortState<TItem>['getSortDirection'] = (columnId: TableColumnId) => {\n    return sortColumn === columnId ? sortDirection : undefined;\n  };\n\n  return {\n    ...tableState,\n    sort: {\n      sort,\n      sortColumn,\n      sortDirection,\n      setColumnSort,\n      toggleColumnSort,\n      getSortDirection,\n    },\n  };\n}\n"],"names":["React","useControllableState","noop","undefined","defaultTableSortState","getSortDirection","setColumnSort","sort","rows","sortColumn","sortDirection","toggleColumnSort","useTableSort","options","tableState","useTableSortState","columns","sortState","defaultSortState","onSortChange","sorted","setSorted","initialState","defaultState","state","e","columnId","s","newState","nextSortColumn","nextSortDirection","slice","a","b","sortColumnDef","find","column","compare","mod","item"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,4BAA4B;AAUjE,MAAMC,OAAO,IAAMC;AAEnB,OAAO,MAAMC,wBAAiD;IAC5DC,kBAAkB,IAAM;IACxBC,eAAeJ;IACfK,MAAM,CAA0CC,OAAsB;eAAIA;SAAK;IAC/EC,YAAYN;IACZO,eAAe;IACfC,kBAAkBT;AACpB,EAAE;AAEF,OAAO,SAASU,aAAoBC,OAA4B;IAC9D,4EAA4E;IAC5E,sDAAsD;IACtD,OAAO,CAACC,aAA0CC,kBAAkBD,YAAYD;AAClF;AAEA,OAAO,SAASE,kBACdD,UAAqC,EACrCD,OAA4B;IAE5B,MAAM,EAAEG,OAAO,EAAE,GAAGF;IACpB,MAAM,EAAEG,SAAS,EAAEC,gBAAgB,EAAEC,YAAY,EAAE,GAAGN;IAEtD,MAAM,CAACO,QAAQC,UAAU,GAAGpB,qBAAgC;QAC1DqB,cAAc;YACZZ,eAAe;YACfD,YAAYN;QACd;QACAoB,cAAcL;QACdM,OAAOP;IACT;IAEA,MAAM,EAAER,UAAU,EAAEC,aAAa,EAAE,GAAGU;IAEtC,MAAMT,mBAAmB,CAACc,GAAyBC;QACjDL,UAAUM,CAAAA;YACR,MAAMC,WAAW;gBAAE,GAAGD,CAAC;gBAAElB,YAAYiB;YAAS;YAC9C,IAAIC,EAAElB,UAAU,KAAKiB,UAAU;gBAC7BE,SAASlB,aAAa,GAAGiB,EAAEjB,aAAa,KAAK,cAAc,eAAe;YAC5E,OAAO;gBACLkB,SAASlB,aAAa,GAAG;YAC3B;YAEAS,yBAAAA,mCAAAA,aAAeM,GAAGG;YAClB,OAAOA;QACT;IACF;IAEA,MAAMtB,gBAAwD,CAACmB,GAAGI,gBAAgBC;QAChF,MAAMF,WAAW;YAAEnB,YAAYoB;YAAgBnB,eAAeoB;QAAkB;QAChFX,yBAAAA,mCAAAA,aAAeM,GAAGG;QAClBP,UAAUO;IACZ;IAEA,MAAMrB,OAAO,CAAwCC;QACnD,OAAOA,KAAKuB,KAAK,GAAGxB,IAAI,CAAC,CAACyB,GAAGC;YAC3B,MAAMC,gBAAgBlB,QAAQmB,IAAI,CAACC,CAAAA,SAAUA,OAAOV,QAAQ,KAAKjB;YACjE,IAAI,EAACyB,0BAAAA,oCAAAA,cAAeG,OAAO,GAAE;gBAC3B,OAAO;YACT;YAEA,MAAMC,MAAM5B,kBAAkB,cAAc,IAAI,CAAC;YACjD,OAAOwB,cAAcG,OAAO,CAACL,EAAEO,IAAI,EAAEN,EAAEM,IAAI,IAAID;QACjD;IACF;IAEA,MAAMjC,mBAA8D,CAACqB;QACnE,OAAOjB,eAAeiB,WAAWhB,gBAAgBP;IACnD;IAEA,OAAO;QACL,GAAGW,UAAU;QACbP,MAAM;YACJA;YACAE;YACAC;YACAJ;YACAK;YACAN;QACF;IACF;AACF"}
+{"version":3,"sources":["useTableSort.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport type {\n  TableColumnId,\n  TableRowData,\n  SortState,\n  TableSortState,\n  TableFeaturesState,\n  UseTableSortOptions,\n} from './types';\n\nconst noop = () => undefined;\n\nexport const defaultTableSortState: TableSortState<unknown> = {\n  getSortDirection: () => 'ascending',\n  setColumnSort: noop,\n  sort: <TRowState extends TableRowData<unknown>>(rows: TRowState[]) => [...rows],\n  sortColumn: undefined,\n  sortDirection: 'ascending',\n  toggleColumnSort: noop,\n};\n\nexport function useTableSort<TItem>(options: UseTableSortOptions) {\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>) => useTableSortState(tableState, options);\n}\n\nexport function useTableSortState<TItem>(\n  tableState: TableFeaturesState<TItem>,\n  options: UseTableSortOptions,\n): TableFeaturesState<TItem> {\n  const { columns } = tableState;\n  const { sortState, defaultSortState, onSortChange: onSortChangeProp = noop } = options;\n\n  const [sorted, setSorted] = useControllableState<SortState>({\n    initialState: {\n      sortDirection: 'ascending' as const,\n      sortColumn: undefined,\n    },\n    defaultState: defaultSortState,\n    state: sortState,\n  });\n\n  const { sortColumn, sortDirection } = sorted;\n\n  const onSortChange = useEventCallback(onSortChangeProp);\n\n  const toggleColumnSort = React.useCallback(\n    (e: React.SyntheticEvent, columnId: TableColumnId | undefined) => {\n      setSorted(s => {\n        const newState = { ...s, sortColumn: columnId };\n        if (s.sortColumn === columnId) {\n          newState.sortDirection = s.sortDirection === 'ascending' ? 'descending' : 'ascending';\n        } else {\n          newState.sortDirection = 'ascending';\n        }\n\n        onSortChange?.(e, newState);\n        return newState;\n      });\n    },\n    [onSortChange, setSorted],\n  );\n\n  const setColumnSort: TableSortState<TItem>['setColumnSort'] = (e, nextSortColumn, nextSortDirection) => {\n    const newState = { sortColumn: nextSortColumn, sortDirection: nextSortDirection };\n    onSortChange?.(e, newState);\n    setSorted(newState);\n  };\n\n  const sort = React.useCallback(\n    <TRowState extends TableRowData<TItem>>(rows: TRowState[]) => {\n      return rows.slice().sort((a, b) => {\n        const sortColumnDef = columns.find(column => column.columnId === sortColumn);\n        if (!sortColumnDef?.compare) {\n          return 0;\n        }\n\n        const mod = sortDirection === 'ascending' ? 1 : -1;\n        return sortColumnDef.compare(a.item, b.item) * mod;\n      });\n    },\n    [columns, sortColumn, sortDirection],\n  );\n\n  const getSortDirection: TableSortState<TItem>['getSortDirection'] = (columnId: TableColumnId) => {\n    return sortColumn === columnId ? sortDirection : undefined;\n  };\n\n  return {\n    ...tableState,\n    sort: {\n      sort,\n      sortColumn,\n      sortDirection,\n      setColumnSort,\n      toggleColumnSort,\n      getSortDirection,\n    },\n  };\n}\n"],"names":["React","useControllableState","useEventCallback","noop","undefined","defaultTableSortState","getSortDirection","setColumnSort","sort","rows","sortColumn","sortDirection","toggleColumnSort","useTableSort","options","tableState","useTableSortState","columns","sortState","defaultSortState","onSortChange","onSortChangeProp","sorted","setSorted","initialState","defaultState","state","useCallback","e","columnId","s","newState","nextSortColumn","nextSortDirection","slice","a","b","sortColumnDef","find","column","compare","mod","item"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAUnF,MAAMC,OAAO,IAAMC;AAEnB,OAAO,MAAMC,wBAAiD;IAC5DC,kBAAkB,IAAM;IACxBC,eAAeJ;IACfK,MAAM,CAA0CC,OAAsB;eAAIA;SAAK;IAC/EC,YAAYN;IACZO,eAAe;IACfC,kBAAkBT;AACpB,EAAE;AAEF,OAAO,SAASU,aAAoBC,OAA4B;IAC9D,4EAA4E;IAC5E,sDAAsD;IACtD,OAAO,CAACC,aAA0CC,kBAAkBD,YAAYD;AAClF;AAEA,OAAO,SAASE,kBACdD,UAAqC,EACrCD,OAA4B;IAE5B,MAAM,EAAEG,OAAO,EAAE,GAAGF;IACpB,MAAM,EAAEG,SAAS,EAAEC,gBAAgB,EAAEC,cAAcC,mBAAmBlB,IAAI,EAAE,GAAGW;IAE/E,MAAM,CAACQ,QAAQC,UAAU,GAAGtB,qBAAgC;QAC1DuB,cAAc;YACZb,eAAe;YACfD,YAAYN;QACd;QACAqB,cAAcN;QACdO,OAAOR;IACT;IAEA,MAAM,EAAER,UAAU,EAAEC,aAAa,EAAE,GAAGW;IAEtC,MAAMF,eAAelB,iBAAiBmB;IAEtC,MAAMT,mBAAmBZ,MAAM2B,WAAW,CACxC,CAACC,GAAyBC;QACxBN,UAAUO,CAAAA;YACR,MAAMC,WAAW;gBAAE,GAAGD,CAAC;gBAAEpB,YAAYmB;YAAS;YAC9C,IAAIC,EAAEpB,UAAU,KAAKmB,UAAU;gBAC7BE,SAASpB,aAAa,GAAGmB,EAAEnB,aAAa,KAAK,cAAc,eAAe;YAC5E,OAAO;gBACLoB,SAASpB,aAAa,GAAG;YAC3B;YAEAS,yBAAAA,mCAAAA,aAAeQ,GAAGG;YAClB,OAAOA;QACT;IACF,GACA;QAACX;QAAcG;KAAU;IAG3B,MAAMhB,gBAAwD,CAACqB,GAAGI,gBAAgBC;QAChF,MAAMF,WAAW;YAAErB,YAAYsB;YAAgBrB,eAAesB;QAAkB;QAChFb,yBAAAA,mCAAAA,aAAeQ,GAAGG;QAClBR,UAAUQ;IACZ;IAEA,MAAMvB,OAAOR,MAAM2B,WAAW,CAC5B,CAAwClB;QACtC,OAAOA,KAAKyB,KAAK,GAAG1B,IAAI,CAAC,CAAC2B,GAAGC;YAC3B,MAAMC,gBAAgBpB,QAAQqB,IAAI,CAACC,CAAAA,SAAUA,OAAOV,QAAQ,KAAKnB;YACjE,IAAI,EAAC2B,0BAAAA,oCAAAA,cAAeG,OAAO,GAAE;gBAC3B,OAAO;YACT;YAEA,MAAMC,MAAM9B,kBAAkB,cAAc,IAAI,CAAC;YACjD,OAAO0B,cAAcG,OAAO,CAACL,EAAEO,IAAI,EAAEN,EAAEM,IAAI,IAAID;QACjD;IACF,GACA;QAACxB;QAASP;QAAYC;KAAc;IAGtC,MAAML,mBAA8D,CAACuB;QACnE,OAAOnB,eAAemB,WAAWlB,gBAAgBP;IACnD;IAEA,OAAO;QACL,GAAGW,UAAU;QACbP,MAAM;YACJA;YACAE;YACAC;YACAJ;YACAK;YACAN;QACF;IACF;AACF"}

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

@@ -19,7 +19,9 @@ const useDataGridCell_unstable = (props, ref)=>{
     const columnId = (0, _columnIdContext.useColumnIdContext)();
     const tabbable = (0, _dataGridContext.useDataGridContext_unstable)((ctx)=>(ctx.focusMode === 'cell' || ctx.focusMode === 'composite') && focusMode !== 'none');
     const resizableColumns = (0, _dataGridContext.useDataGridContext_unstable)((ctx)=>ctx.resizableColumns);
-    const columnSizing = (0, _dataGridContext.useDataGridContext_unstable)((ctx)=>ctx.columnSizing_unstable);
+    const getTableCellProps = (0, _dataGridContext.useDataGridContext_unstable)((ctx)=>{
+        return ctx.columnSizing_unstable.getTableCellProps;
+    });
     const focusableGroupAttr = (0, _reacttabster.useFocusableGroup)({
         tabBehavior: 'limited-trap-focus'
     });
@@ -28,7 +30,7 @@ const useDataGridCell_unstable = (props, ref)=>{
         role: 'gridcell',
         ...focusMode === 'group' && focusableGroupAttr,
         tabIndex: tabbable ? 0 : undefined,
-        ...resizableColumns ? columnSizing.getTableCellProps(columnId) : {},
+        ...resizableColumns ? getTableCellProps(columnId) : {},
         ...props
     }, ref);
 };

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

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

package/lib-commonjs/components/DataGridHeaderCell/useDataGridHeaderCell.js

@@ -30,7 +30,9 @@ const useDataGridHeaderCell_unstable = (props, ref)=>{
     });
     const sortDirection = (0, _dataGridContext.useDataGridContext_unstable)((ctx)=>sortable ? ctx.sort.getSortDirection(columnId) : undefined);
     const resizableColumns = (0, _dataGridContext.useDataGridContext_unstable)((ctx)=>ctx.resizableColumns);
-    const columnSizing = (0, _dataGridContext.useDataGridContext_unstable)((ctx)=>ctx.columnSizing_unstable);
+    const getTableHeaderCellProps = (0, _dataGridContext.useDataGridContext_unstable)((ctx)=>{
+        return ctx.columnSizing_unstable.getTableHeaderCellProps;
+    });
     // eslint-disable-next-line deprecation/deprecation -- prefer HTMLTableCellElement
     const onClick = (0, _reactutilities.useEventCallback)((e)=>{
         var _props_onClick;
@@ -44,7 +46,7 @@ const useDataGridHeaderCell_unstable = (props, ref)=>{
         sortDirection,
         as: 'div',
         tabIndex: sortable ? undefined : 0,
-        ...resizableColumns ? columnSizing.getTableHeaderCellProps(columnId) : {},
+        ...resizableColumns ? getTableHeaderCellProps(columnId) : {},
         ...props,
         onClick
     }, ref);

package/lib-commonjs/components/DataGridHeaderCell/useDataGridHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDataGridHeaderCell.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useTableHeaderCell_unstable } from '../TableHeaderCell/useTableHeaderCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useColumnIdContext } from '../../contexts/columnIdContext';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { isColumnSortable } from '../../utils/isColumnSortable';\n/**\n * Create the state required to render DataGridHeaderCell.\n *\n * The returned state can be modified with hooks such as useDataGridHeaderCellStyles_unstable,\n * before being passed to renderDataGridHeaderCell_unstable.\n *\n * @param props - props from this instance of DataGridHeaderCell\n * @param ref - reference to root HTMLElement of DataGridHeaderCell\n */ export const useDataGridHeaderCell_unstable = (props, ref)=>{\n    const columnId = useColumnIdContext();\n    const { sortable: gridSortable } = useTableContext();\n    const toggleColumnSort = useDataGridContext_unstable((ctx)=>ctx.sort.toggleColumnSort);\n    const sortable = useDataGridContext_unstable((ctx)=>{\n        const columnSortable = !!ctx.columns.find((c)=>c.columnId === columnId && isColumnSortable(c));\n        if (!gridSortable) {\n            // if the grid is not sortable - disable sorting on all columns\n            return false;\n        }\n        return columnSortable;\n    });\n    const sortDirection = useDataGridContext_unstable((ctx)=>sortable ? ctx.sort.getSortDirection(columnId) : undefined);\n    const resizableColumns = useDataGridContext_unstable((ctx)=>ctx.resizableColumns);\n    const columnSizing = useDataGridContext_unstable((ctx)=>ctx.columnSizing_unstable);\n    // eslint-disable-next-line deprecation/deprecation -- prefer HTMLTableCellElement\n    const onClick = useEventCallback((e)=>{\n        var _props_onClick;\n        if (sortable) {\n            toggleColumnSort(e, columnId);\n        }\n        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, e);\n    });\n    return useTableHeaderCell_unstable({\n        sortable,\n        sortDirection,\n        as: 'div',\n        tabIndex: sortable ? undefined : 0,\n        ...resizableColumns ? columnSizing.getTableHeaderCellProps(columnId) : {},\n        ...props,\n        onClick\n    }, ref);\n};\n"],"names":["useDataGridHeaderCell_unstable","props","ref","columnId","useColumnIdContext","sortable","gridSortable","useTableContext","toggleColumnSort","useDataGridContext_unstable","ctx","sort","columnSortable","columns","find","c","isColumnSortable","sortDirection","getSortDirection","undefined","resizableColumns","columnSizing","columnSizing_unstable","onClick","useEventCallback","e","_props_onClick","call","useTableHeaderCell_unstable","as","tabIndex","getTableHeaderCellProps"],"mappings":";;;;+BAeiBA;;;eAAAA;;;;iEAfM;gCACU;oCACW;iCACA;iCACT;8BACH;kCACC;AAStB,MAAMA,iCAAiC,CAACC,OAAOC;IACtD,MAAMC,WAAWC,IAAAA,mCAAkB;IACnC,MAAM,EAAEC,UAAUC,YAAY,EAAE,GAAGC,IAAAA,6BAAe;IAClD,MAAMC,mBAAmBC,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIC,IAAI,CAACH,gBAAgB;IACrF,MAAMH,WAAWI,IAAAA,4CAA2B,EAAC,CAACC;QAC1C,MAAME,iBAAiB,CAAC,CAACF,IAAIG,OAAO,CAACC,IAAI,CAAC,CAACC,IAAIA,EAAEZ,QAAQ,KAAKA,YAAYa,IAAAA,kCAAgB,EAACD;QAC3F,IAAI,CAACT,cAAc;YACf,+DAA+D;YAC/D,OAAO;QACX;QACA,OAAOM;IACX;IACA,MAAMK,gBAAgBR,IAAAA,4CAA2B,EAAC,CAACC,MAAML,WAAWK,IAAIC,IAAI,CAACO,gBAAgB,CAACf,YAAYgB;IAC1G,MAAMC,mBAAmBX,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIU,gBAAgB;IAChF,MAAMC,eAAeZ,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIY,qBAAqB;IACjF,kFAAkF;IAClF,MAAMC,UAAUC,IAAAA,gCAAgB,EAAC,CAACC;QAC9B,IAAIC;QACJ,IAAIrB,UAAU;YACVG,iBAAiBiB,GAAGtB;QACxB;QACCuB,CAAAA,iBAAiBzB,MAAMsB,OAAO,AAAD,MAAO,QAAQG,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeC,IAAI,CAAC1B,OAAOwB;IACjH;IACA,OAAOG,IAAAA,+CAA2B,EAAC;QAC/BvB;QACAY;QACAY,IAAI;QACJC,UAAUzB,WAAWc,YAAY;QACjC,GAAGC,mBAAmBC,aAAaU,uBAAuB,CAAC5B,YAAY,CAAC,CAAC;QACzE,GAAGF,KAAK;QACRsB;IACJ,GAAGrB;AACP"}
+{"version":3,"sources":["useDataGridHeaderCell.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useTableHeaderCell_unstable } from '../TableHeaderCell/useTableHeaderCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useColumnIdContext } from '../../contexts/columnIdContext';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { isColumnSortable } from '../../utils/isColumnSortable';\n/**\n * Create the state required to render DataGridHeaderCell.\n *\n * The returned state can be modified with hooks such as useDataGridHeaderCellStyles_unstable,\n * before being passed to renderDataGridHeaderCell_unstable.\n *\n * @param props - props from this instance of DataGridHeaderCell\n * @param ref - reference to root HTMLElement of DataGridHeaderCell\n */ export const useDataGridHeaderCell_unstable = (props, ref)=>{\n    const columnId = useColumnIdContext();\n    const { sortable: gridSortable } = useTableContext();\n    const toggleColumnSort = useDataGridContext_unstable((ctx)=>ctx.sort.toggleColumnSort);\n    const sortable = useDataGridContext_unstable((ctx)=>{\n        const columnSortable = !!ctx.columns.find((c)=>c.columnId === columnId && isColumnSortable(c));\n        if (!gridSortable) {\n            // if the grid is not sortable - disable sorting on all columns\n            return false;\n        }\n        return columnSortable;\n    });\n    const sortDirection = useDataGridContext_unstable((ctx)=>sortable ? ctx.sort.getSortDirection(columnId) : undefined);\n    const resizableColumns = useDataGridContext_unstable((ctx)=>ctx.resizableColumns);\n    const getTableHeaderCellProps = useDataGridContext_unstable((ctx)=>{\n        return ctx.columnSizing_unstable.getTableHeaderCellProps;\n    });\n    // eslint-disable-next-line deprecation/deprecation -- prefer HTMLTableCellElement\n    const onClick = useEventCallback((e)=>{\n        var _props_onClick;\n        if (sortable) {\n            toggleColumnSort(e, columnId);\n        }\n        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, e);\n    });\n    return useTableHeaderCell_unstable({\n        sortable,\n        sortDirection,\n        as: 'div',\n        tabIndex: sortable ? undefined : 0,\n        ...resizableColumns ? getTableHeaderCellProps(columnId) : {},\n        ...props,\n        onClick\n    }, ref);\n};\n"],"names":["useDataGridHeaderCell_unstable","props","ref","columnId","useColumnIdContext","sortable","gridSortable","useTableContext","toggleColumnSort","useDataGridContext_unstable","ctx","sort","columnSortable","columns","find","c","isColumnSortable","sortDirection","getSortDirection","undefined","resizableColumns","getTableHeaderCellProps","columnSizing_unstable","onClick","useEventCallback","e","_props_onClick","call","useTableHeaderCell_unstable","as","tabIndex"],"mappings":";;;;+BAeiBA;;;eAAAA;;;;iEAfM;gCACU;oCACW;iCACA;iCACT;8BACH;kCACC;AAStB,MAAMA,iCAAiC,CAACC,OAAOC;IACtD,MAAMC,WAAWC,IAAAA,mCAAkB;IACnC,MAAM,EAAEC,UAAUC,YAAY,EAAE,GAAGC,IAAAA,6BAAe;IAClD,MAAMC,mBAAmBC,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIC,IAAI,CAACH,gBAAgB;IACrF,MAAMH,WAAWI,IAAAA,4CAA2B,EAAC,CAACC;QAC1C,MAAME,iBAAiB,CAAC,CAACF,IAAIG,OAAO,CAACC,IAAI,CAAC,CAACC,IAAIA,EAAEZ,QAAQ,KAAKA,YAAYa,IAAAA,kCAAgB,EAACD;QAC3F,IAAI,CAACT,cAAc;YACf,+DAA+D;YAC/D,OAAO;QACX;QACA,OAAOM;IACX;IACA,MAAMK,gBAAgBR,IAAAA,4CAA2B,EAAC,CAACC,MAAML,WAAWK,IAAIC,IAAI,CAACO,gBAAgB,CAACf,YAAYgB;IAC1G,MAAMC,mBAAmBX,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIU,gBAAgB;IAChF,MAAMC,0BAA0BZ,IAAAA,4CAA2B,EAAC,CAACC;QACzD,OAAOA,IAAIY,qBAAqB,CAACD,uBAAuB;IAC5D;IACA,kFAAkF;IAClF,MAAME,UAAUC,IAAAA,gCAAgB,EAAC,CAACC;QAC9B,IAAIC;QACJ,IAAIrB,UAAU;YACVG,iBAAiBiB,GAAGtB;QACxB;QACCuB,CAAAA,iBAAiBzB,MAAMsB,OAAO,AAAD,MAAO,QAAQG,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeC,IAAI,CAAC1B,OAAOwB;IACjH;IACA,OAAOG,IAAAA,+CAA2B,EAAC;QAC/BvB;QACAY;QACAY,IAAI;QACJC,UAAUzB,WAAWc,YAAY;QACjC,GAAGC,mBAAmBC,wBAAwBlB,YAAY,CAAC,CAAC;QAC5D,GAAGF,KAAK;QACRsB;IACJ,GAAGrB;AACP"}

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

@@ -33,7 +33,6 @@ const useDataGridRow_unstable = (props, ref)=>{
         return 'none';
     });
     const toggleRow = (0, _dataGridContext.useDataGridContext_unstable)((ctx)=>ctx.selection.toggleRow);
-    const dataGridContextValue = (0, _dataGridContext.useDataGridContext_unstable)((ctx)=>ctx);
     const onClick = (0, _reactutilities.useEventCallback)((e)=>{
         var _props_onClick;
         if (selectable && !isHeader) {
@@ -73,6 +72,23 @@ const useDataGridRow_unstable = (props, ref)=>{
         }),
         renderCell: props.children,
         columnDefs,
-        dataGridContextValue
+        // This context value should not be used internally
+        // It's intended to help power user render functions
+        dataGridContextValue: useStableDataGridContextValue()
     };
 };
+function useStableDataGridContextValue() {
+    const ref = _react.useRef(_dataGridContext.dataGridContextDefaultValue);
+    // Heads up!
+    // We will not re-render when the context value changes, but we will have the latest value of the context when we do
+    // render for other reasons.
+    //
+    // This relies on a context selector that always returns the same value:
+    // - we will not re-render when the context value changes
+    // - we will store the context value in a ref
+    (0, _dataGridContext.useDataGridContext_unstable)((ctx)=>{
+        ref.current = ctx;
+        return null;
+    });
+    return ref.current;
+}

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

@@ -1 +1 @@
-{"version":3,"sources":["useDataGridRow.js"],"sourcesContent":["import * as React from 'react';\nimport { isInteractiveHTMLElement, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { useTableRow_unstable } from '../TableRow/useTableRow';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { DataGridSelectionCell } from '../DataGridSelectionCell/DataGridSelectionCell';\nimport { useTableRowIdContext } from '../../contexts/rowIdContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n/**\n * Create the state required to render DataGridRow.\n *\n * The returned state can be modified with hooks such as useDataGridRowStyles_unstable,\n * before being passed to renderDataGridRow_unstable.\n *\n * @param props - props from this instance of DataGridRow\n * @param ref - reference to root HTMLElement of DataGridRow\n */ export const useDataGridRow_unstable = (props, ref)=>{\n    const rowId = useTableRowIdContext();\n    const isHeader = useIsInTableHeader();\n    const columnDefs = useDataGridContext_unstable((ctx)=>ctx.columns);\n    const selectable = useDataGridContext_unstable((ctx)=>ctx.selectableRows);\n    const selected = useDataGridContext_unstable((ctx)=>ctx.selection.isRowSelected(rowId));\n    const focusMode = useDataGridContext_unstable((ctx)=>ctx.focusMode);\n    const compositeRowTabsterAttribute = useDataGridContext_unstable((ctx)=>ctx.compositeRowTabsterAttribute);\n    const tabbable = focusMode === 'row_unstable' || focusMode === 'composite';\n    const appearance = useDataGridContext_unstable((ctx)=>{\n        if (!isHeader && selectable && ctx.selection.isRowSelected(rowId)) {\n            return ctx.selectionAppearance;\n        }\n        return 'none';\n    });\n    const toggleRow = useDataGridContext_unstable((ctx)=>ctx.selection.toggleRow);\n    const dataGridContextValue = useDataGridContext_unstable((ctx)=>ctx);\n    const onClick = useEventCallback((e)=>{\n        var _props_onClick;\n        if (selectable && !isHeader) {\n            toggleRow(e, rowId);\n        }\n        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, e);\n    });\n    const onKeyDown = useEventCallback((e)=>{\n        var _props_onKeyDown;\n        if (selectable && !isHeader && e.key === Space && !isInteractiveHTMLElement(e.target)) {\n            // stop scrolling\n            e.preventDefault();\n            toggleRow(e, rowId);\n        }\n        (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, e);\n    });\n    const baseState = useTableRow_unstable({\n        appearance,\n        'aria-selected': selectable ? selected : undefined,\n        tabIndex: tabbable && !isHeader ? 0 : undefined,\n        ...focusMode === 'composite' && !isHeader && compositeRowTabsterAttribute,\n        ...props,\n        onClick,\n        onKeyDown,\n        children: null,\n        as: 'div'\n    }, ref);\n    return {\n        ...baseState,\n        components: {\n            ...baseState.components,\n            selectionCell: DataGridSelectionCell\n        },\n        selectionCell: slot.optional(props.selectionCell, {\n            renderByDefault: selectable,\n            elementType: DataGridSelectionCell\n        }),\n        renderCell: props.children,\n        columnDefs,\n        dataGridContextValue\n    };\n};\n"],"names":["useDataGridRow_unstable","props","ref","rowId","useTableRowIdContext","isHeader","useIsInTableHeader","columnDefs","useDataGridContext_unstable","ctx","columns","selectable","selectableRows","selected","selection","isRowSelected","focusMode","compositeRowTabsterAttribute","tabbable","appearance","selectionAppearance","toggleRow","dataGridContextValue","onClick","useEventCallback","e","_props_onClick","call","onKeyDown","_props_onKeyDown","key","Space","isInteractiveHTMLElement","target","preventDefault","baseState","useTableRow_unstable","undefined","tabIndex","children","as","components","selectionCell","DataGridSelectionCell","slot","optional","renderByDefault","elementType","renderCell"],"mappings":";;;;+BAgBiBA;;;eAAAA;;;;iEAhBM;gCAC0C;8BAC3C;6BACe;iCACO;uCACN;8BACD;oCACF;AASxB,MAAMA,0BAA0B,CAACC,OAAOC;IAC/C,MAAMC,QAAQC,IAAAA,kCAAoB;IAClC,MAAMC,WAAWC,IAAAA,sCAAkB;IACnC,MAAMC,aAAaC,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIC,OAAO;IACjE,MAAMC,aAAaH,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIG,cAAc;IACxE,MAAMC,WAAWL,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIK,SAAS,CAACC,aAAa,CAACZ;IAChF,MAAMa,YAAYR,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIO,SAAS;IAClE,MAAMC,+BAA+BT,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIQ,4BAA4B;IACxG,MAAMC,WAAWF,cAAc,kBAAkBA,cAAc;IAC/D,MAAMG,aAAaX,IAAAA,4CAA2B,EAAC,CAACC;QAC5C,IAAI,CAACJ,YAAYM,cAAcF,IAAIK,SAAS,CAACC,aAAa,CAACZ,QAAQ;YAC/D,OAAOM,IAAIW,mBAAmB;QAClC;QACA,OAAO;IACX;IACA,MAAMC,YAAYb,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIK,SAAS,CAACO,SAAS;IAC5E,MAAMC,uBAAuBd,IAAAA,4CAA2B,EAAC,CAACC,MAAMA;IAChE,MAAMc,UAAUC,IAAAA,gCAAgB,EAAC,CAACC;QAC9B,IAAIC;QACJ,IAAIf,cAAc,CAACN,UAAU;YACzBgB,UAAUI,GAAGtB;QACjB;QACCuB,CAAAA,iBAAiBzB,MAAMsB,OAAO,AAAD,MAAO,QAAQG,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeC,IAAI,CAAC1B,OAAOwB;IACjH;IACA,MAAMG,YAAYJ,IAAAA,gCAAgB,EAAC,CAACC;QAChC,IAAII;QACJ,IAAIlB,cAAc,CAACN,YAAYoB,EAAEK,GAAG,KAAKC,mBAAK,IAAI,CAACC,IAAAA,wCAAwB,EAACP,EAAEQ,MAAM,GAAG;YACnF,iBAAiB;YACjBR,EAAES,cAAc;YAChBb,UAAUI,GAAGtB;QACjB;QACC0B,CAAAA,mBAAmB5B,MAAM2B,SAAS,AAAD,MAAO,QAAQC,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBF,IAAI,CAAC1B,OAAOwB;IACzH;IACA,MAAMU,YAAYC,IAAAA,iCAAoB,EAAC;QACnCjB;QACA,iBAAiBR,aAAaE,WAAWwB;QACzCC,UAAUpB,YAAY,CAACb,WAAW,IAAIgC;QACtC,GAAGrB,cAAc,eAAe,CAACX,YAAYY,4BAA4B;QACzE,GAAGhB,KAAK;QACRsB;QACAK;QACAW,UAAU;QACVC,IAAI;IACR,GAAGtC;IACH,OAAO;QACH,GAAGiC,SAAS;QACZM,YAAY;YACR,GAAGN,UAAUM,UAAU;YACvBC,eAAeC,4CAAqB;QACxC;QACAD,eAAeE,oBAAI,CAACC,QAAQ,CAAC5C,MAAMyC,aAAa,EAAE;YAC9CI,iBAAiBnC;YACjBoC,aAAaJ,4CAAqB;QACtC;QACAK,YAAY/C,MAAMsC,QAAQ;QAC1BhC;QACAe;IACJ;AACJ"}
+{"version":3,"sources":["useDataGridRow.js"],"sourcesContent":["import * as React from 'react';\nimport { isInteractiveHTMLElement, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { useTableRow_unstable } from '../TableRow/useTableRow';\nimport { dataGridContextDefaultValue, useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { DataGridSelectionCell } from '../DataGridSelectionCell/DataGridSelectionCell';\nimport { useTableRowIdContext } from '../../contexts/rowIdContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n/**\n * Create the state required to render DataGridRow.\n *\n * The returned state can be modified with hooks such as useDataGridRowStyles_unstable,\n * before being passed to renderDataGridRow_unstable.\n *\n * @param props - props from this instance of DataGridRow\n * @param ref - reference to root HTMLElement of DataGridRow\n */ export const useDataGridRow_unstable = (props, ref)=>{\n    const rowId = useTableRowIdContext();\n    const isHeader = useIsInTableHeader();\n    const columnDefs = useDataGridContext_unstable((ctx)=>ctx.columns);\n    const selectable = useDataGridContext_unstable((ctx)=>ctx.selectableRows);\n    const selected = useDataGridContext_unstable((ctx)=>ctx.selection.isRowSelected(rowId));\n    const focusMode = useDataGridContext_unstable((ctx)=>ctx.focusMode);\n    const compositeRowTabsterAttribute = useDataGridContext_unstable((ctx)=>ctx.compositeRowTabsterAttribute);\n    const tabbable = focusMode === 'row_unstable' || focusMode === 'composite';\n    const appearance = useDataGridContext_unstable((ctx)=>{\n        if (!isHeader && selectable && ctx.selection.isRowSelected(rowId)) {\n            return ctx.selectionAppearance;\n        }\n        return 'none';\n    });\n    const toggleRow = useDataGridContext_unstable((ctx)=>ctx.selection.toggleRow);\n    const onClick = useEventCallback((e)=>{\n        var _props_onClick;\n        if (selectable && !isHeader) {\n            toggleRow(e, rowId);\n        }\n        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, e);\n    });\n    const onKeyDown = useEventCallback((e)=>{\n        var _props_onKeyDown;\n        if (selectable && !isHeader && e.key === Space && !isInteractiveHTMLElement(e.target)) {\n            // stop scrolling\n            e.preventDefault();\n            toggleRow(e, rowId);\n        }\n        (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, e);\n    });\n    const baseState = useTableRow_unstable({\n        appearance,\n        'aria-selected': selectable ? selected : undefined,\n        tabIndex: tabbable && !isHeader ? 0 : undefined,\n        ...focusMode === 'composite' && !isHeader && compositeRowTabsterAttribute,\n        ...props,\n        onClick,\n        onKeyDown,\n        children: null,\n        as: 'div'\n    }, ref);\n    return {\n        ...baseState,\n        components: {\n            ...baseState.components,\n            selectionCell: DataGridSelectionCell\n        },\n        selectionCell: slot.optional(props.selectionCell, {\n            renderByDefault: selectable,\n            elementType: DataGridSelectionCell\n        }),\n        renderCell: props.children,\n        columnDefs,\n        // This context value should not be used internally\n        // It's intended to help power user render functions\n        dataGridContextValue: useStableDataGridContextValue()\n    };\n};\nfunction useStableDataGridContextValue() {\n    const ref = React.useRef(dataGridContextDefaultValue);\n    // Heads up!\n    // We will not re-render when the context value changes, but we will have the latest value of the context when we do\n    // render for other reasons.\n    //\n    // This relies on a context selector that always returns the same value:\n    // - we will not re-render when the context value changes\n    // - we will store the context value in a ref\n    useDataGridContext_unstable((ctx)=>{\n        ref.current = ctx;\n        return null;\n    });\n    return ref.current;\n}\n"],"names":["useDataGridRow_unstable","props","ref","rowId","useTableRowIdContext","isHeader","useIsInTableHeader","columnDefs","useDataGridContext_unstable","ctx","columns","selectable","selectableRows","selected","selection","isRowSelected","focusMode","compositeRowTabsterAttribute","tabbable","appearance","selectionAppearance","toggleRow","onClick","useEventCallback","e","_props_onClick","call","onKeyDown","_props_onKeyDown","key","Space","isInteractiveHTMLElement","target","preventDefault","baseState","useTableRow_unstable","undefined","tabIndex","children","as","components","selectionCell","DataGridSelectionCell","slot","optional","renderByDefault","elementType","renderCell","dataGridContextValue","useStableDataGridContextValue","React","useRef","dataGridContextDefaultValue","current"],"mappings":";;;;+BAgBiBA;;;eAAAA;;;;iEAhBM;gCAC0C;8BAC3C;6BACe;iCACoC;uCACnC;8BACD;oCACF;AASxB,MAAMA,0BAA0B,CAACC,OAAOC;IAC/C,MAAMC,QAAQC,IAAAA,kCAAoB;IAClC,MAAMC,WAAWC,IAAAA,sCAAkB;IACnC,MAAMC,aAAaC,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIC,OAAO;IACjE,MAAMC,aAAaH,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIG,cAAc;IACxE,MAAMC,WAAWL,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIK,SAAS,CAACC,aAAa,CAACZ;IAChF,MAAMa,YAAYR,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIO,SAAS;IAClE,MAAMC,+BAA+BT,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIQ,4BAA4B;IACxG,MAAMC,WAAWF,cAAc,kBAAkBA,cAAc;IAC/D,MAAMG,aAAaX,IAAAA,4CAA2B,EAAC,CAACC;QAC5C,IAAI,CAACJ,YAAYM,cAAcF,IAAIK,SAAS,CAACC,aAAa,CAACZ,QAAQ;YAC/D,OAAOM,IAAIW,mBAAmB;QAClC;QACA,OAAO;IACX;IACA,MAAMC,YAAYb,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIK,SAAS,CAACO,SAAS;IAC5E,MAAMC,UAAUC,IAAAA,gCAAgB,EAAC,CAACC;QAC9B,IAAIC;QACJ,IAAId,cAAc,CAACN,UAAU;YACzBgB,UAAUG,GAAGrB;QACjB;QACCsB,CAAAA,iBAAiBxB,MAAMqB,OAAO,AAAD,MAAO,QAAQG,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeC,IAAI,CAACzB,OAAOuB;IACjH;IACA,MAAMG,YAAYJ,IAAAA,gCAAgB,EAAC,CAACC;QAChC,IAAII;QACJ,IAAIjB,cAAc,CAACN,YAAYmB,EAAEK,GAAG,KAAKC,mBAAK,IAAI,CAACC,IAAAA,wCAAwB,EAACP,EAAEQ,MAAM,GAAG;YACnF,iBAAiB;YACjBR,EAAES,cAAc;YAChBZ,UAAUG,GAAGrB;QACjB;QACCyB,CAAAA,mBAAmB3B,MAAM0B,SAAS,AAAD,MAAO,QAAQC,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBF,IAAI,CAACzB,OAAOuB;IACzH;IACA,MAAMU,YAAYC,IAAAA,iCAAoB,EAAC;QACnChB;QACA,iBAAiBR,aAAaE,WAAWuB;QACzCC,UAAUnB,YAAY,CAACb,WAAW,IAAI+B;QACtC,GAAGpB,cAAc,eAAe,CAACX,YAAYY,4BAA4B;QACzE,GAAGhB,KAAK;QACRqB;QACAK;QACAW,UAAU;QACVC,IAAI;IACR,GAAGrC;IACH,OAAO;QACH,GAAGgC,SAAS;QACZM,YAAY;YACR,GAAGN,UAAUM,UAAU;YACvBC,eAAeC,4CAAqB;QACxC;QACAD,eAAeE,oBAAI,CAACC,QAAQ,CAAC3C,MAAMwC,aAAa,EAAE;YAC9CI,iBAAiBlC;YACjBmC,aAAaJ,4CAAqB;QACtC;QACAK,YAAY9C,MAAMqC,QAAQ;QAC1B/B;QACA,mDAAmD;QACnD,oDAAoD;QACpDyC,sBAAsBC;IAC1B;AACJ;AACA,SAASA;IACL,MAAM/C,MAAMgD,OAAMC,MAAM,CAACC,4CAA2B;IACpD,YAAY;IACZ,oHAAoH;IACpH,4BAA4B;IAC5B,EAAE;IACF,wEAAwE;IACxE,yDAAyD;IACzD,6CAA6C;IAC7C5C,IAAAA,4CAA2B,EAAC,CAACC;QACzBP,IAAImD,OAAO,GAAG5C;QACd,OAAO;IACX;IACA,OAAOP,IAAImD,OAAO;AACtB"}

package/lib-commonjs/components/TableRow/useTableRowStyles.styles.js

@@ -80,7 +80,18 @@ const useFlexLayoutStyles = /*#__PURE__*/ (0, _react.__styles)({
         Jwef8y: "f1t94bn6",
         Bi91k9c: "feu1g3u",
         Bpt6rm4: "f1uorfem",
-        ff6mpl: "fw60kww"
+        ff6mpl: "fw60kww",
+        ze5xyy: "f4xjyn1",
+        pgvf35: "ff1wgvm",
+        Bh7lczh: [
+            "fiob0tu",
+            "f1x4h75k"
+        ],
+        dpv3f4: "f1j6scgf",
+        Bpnjhaq: [
+            "f1x4h75k",
+            "fiob0tu"
+        ]
     },
     medium: {
         Bn0qgzm: "f1vxd6vx",
@@ -269,6 +280,30 @@ const useFlexLayoutStyles = /*#__PURE__*/ (0, _react.__styles)({
         ".f1uqaxdt:hover{background-color:var(--colorSubtleBackgroundSelected);}"
     ],
     m: [
+        [
+            "@media (forced-colors: active){.f4xjyn1:hover{color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.ff1wgvm:hover{border-top-color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1x4h75k:hover{border-left-color:Highlight;}.fiob0tu:hover{border-right-color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1j6scgf:hover{border-bottom-color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
         [
             "@media (forced-colors: active){.fqlf3fd{border-top-width:2px;}}",
             {

package/lib-commonjs/components/TableRow/useTableRowStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTableRowStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles.styles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles.styles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames = {\n  root: tableRowClassName\n};\nconst useTableLayoutStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f1u0rzck\"\n  }\n}, {\n  d: [\".f1u0rzck{display:table-row;}\"]\n});\nconst useFlexLayoutStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f22iagw\",\n    Bt984gj: \"f122n59\"\n  }\n}, {\n  d: [\".f22iagw{display:flex;}\", \".f122n59{align-items:center;}\"]\n});\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    sj55zd: \"f19n0e5\",\n    B7ck84d: \"f1ewtqcl\",\n    Bconypa: \"f1jazu75\",\n    B6guboy: \"f1xeqee6\",\n    Bn4voq9: \"fz36nt7\",\n    g9k6zt: \"f9znhxp\",\n    Bfpq7zp: \"fqrak0z\",\n    kdpuga: [\"f1o2ludy\", \"f1kjnpwc\"],\n    Bw81rd7: [\"f1kjnpwc\", \"f1o2ludy\"],\n    B6xbmo0: [\"fxmnebo\", \"f1witrsb\"],\n    dm238s: [\"f1witrsb\", \"fxmnebo\"]\n  },\n  rootInteractive: {\n    ecr2s2: \"f1wfn5kd\",\n    lj723h: \"f1g4hkjv\",\n    B43xm9u: \"f15ngxrw\",\n    i921ia: \"fjbbrdp\",\n    Jwef8y: \"f1t94bn6\",\n    Bi91k9c: \"feu1g3u\",\n    Bpt6rm4: \"f1uorfem\",\n    ff6mpl: \"fw60kww\"\n  },\n  medium: {\n    Bn0qgzm: \"f1vxd6vx\",\n    oivjwe: \"fg706s2\",\n    B9xav0g: \"frpde29\"\n  },\n  small: {\n    Bn0qgzm: \"f1vxd6vx\",\n    oivjwe: \"fg706s2\",\n    B9xav0g: \"frpde29\"\n  },\n  \"extra-small\": {\n    Be2twd7: \"fy9rknc\"\n  },\n  brand: {\n    De3pzq: \"f16xkysk\",\n    g2u3we: \"f1bh3yvw\",\n    h3c5rm: [\"fmi79ni\", \"f11fozsx\"],\n    B9xav0g: \"fnzw4c6\",\n    zhjwy3: [\"f11fozsx\", \"fmi79ni\"],\n    ecr2s2: \"f7tkmfy\",\n    lj723h: \"f1r2dosr\",\n    gwxt9v: \"fqlf3fd\",\n    v3aym: [\"f9dpb3h\", \"fw2muls\"],\n    Bc736ss: \"f1yat0gj\",\n    Bk6ri7n: [\"fw2muls\", \"f9dpb3h\"],\n    Bk5ld8o: \"f7nae3y\",\n    c4eypz: [\"fkbere7\", \"fa97sf3\"],\n    felo30: \"fmtyzcc\",\n    Eshu5l: [\"fa97sf3\", \"fkbere7\"],\n    Bjwas2f: \"fb6zhgp\",\n    Bn1d65q: [\"fyowp6c\", \"fz08sq8\"],\n    Bxeuatn: \"f9dii88\",\n    n51gp8: [\"fz08sq8\", \"fyowp6c\"],\n    Beo2b4z: [\"f1afxoft\", \"flqq2yx\"],\n    h6lo6r: [\"flqq2yx\", \"f1afxoft\"],\n    Btyw6ap: [\"f1b5xrmd\", \"f1831rx6\"],\n    w1pwid: [\"f1831rx6\", \"f1b5xrmd\"],\n    Brwvgy3: \"fd94n53\",\n    yadkgm: \"f1e0wld5\"\n  },\n  neutral: {\n    gwxt9v: \"fqlf3fd\",\n    v3aym: [\"f9dpb3h\", \"fw2muls\"],\n    Bc736ss: \"f1yat0gj\",\n    Bk6ri7n: [\"fw2muls\", \"f9dpb3h\"],\n    Bk5ld8o: \"f7nae3y\",\n    c4eypz: [\"fkbere7\", \"fa97sf3\"],\n    felo30: \"fmtyzcc\",\n    Eshu5l: [\"fa97sf3\", \"fkbere7\"],\n    Bjwas2f: \"fb6zhgp\",\n    Bn1d65q: [\"fyowp6c\", \"fz08sq8\"],\n    Bxeuatn: \"f9dii88\",\n    n51gp8: [\"fz08sq8\", \"fyowp6c\"],\n    Beo2b4z: [\"f1afxoft\", \"flqq2yx\"],\n    h6lo6r: [\"flqq2yx\", \"f1afxoft\"],\n    Btyw6ap: [\"f1b5xrmd\", \"f1831rx6\"],\n    w1pwid: [\"f1831rx6\", \"f1b5xrmd\"],\n    Brwvgy3: \"fd94n53\",\n    yadkgm: \"f1e0wld5\",\n    De3pzq: \"fq5gl1p\",\n    sj55zd: \"f1cgsbmv\",\n    Jwef8y: \"f1uqaxdt\",\n    ecr2s2: \"fa9o754\",\n    g2u3we: \"frmsihh\",\n    h3c5rm: [\"frttxa5\", \"f11o2r7f\"],\n    B9xav0g: \"fem5et0\",\n    zhjwy3: [\"f11o2r7f\", \"frttxa5\"]\n  },\n  none: {}\n}, {\n  d: [\".f19n0e5{color:var(--colorNeutralForeground1);}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f1jazu75[data-fui-focus-within]:focus-within .fui-TableSelectionCell{opacity:1;}\", \".f1xeqee6[data-fui-focus-within]:focus-within .fui-TableCellActions{opacity:1;}\", \".fz36nt7[data-fui-focus-visible]{outline-width:2px;}\", \".f9znhxp[data-fui-focus-visible]{outline-style:solid;}\", \".fqrak0z[data-fui-focus-visible]{outline-color:var(--colorStrokeFocus2);}\", \".f1o2ludy[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusMedium);}\", \".f1kjnpwc[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusMedium);}\", \".fxmnebo[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusMedium);}\", \".f1witrsb[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusMedium);}\", \".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}\", \".fg706s2{border-bottom-style:solid;}\", \".frpde29{border-bottom-color:var(--colorNeutralStroke2);}\", \".fy9rknc{font-size:var(--fontSizeBase200);}\", \".f16xkysk{background-color:var(--colorBrandBackground2);}\", \".f1bh3yvw{border-top-color:var(--colorTransparentStrokeInteractive);}\", \".fmi79ni{border-right-color:var(--colorTransparentStrokeInteractive);}\", \".f11fozsx{border-left-color:var(--colorTransparentStrokeInteractive);}\", \".fnzw4c6{border-bottom-color:var(--colorTransparentStrokeInteractive);}\", \".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}\", \".f1cgsbmv{color:var(--colorNeutralForeground1Hover);}\", \".frmsihh{border-top-color:var(--colorNeutralStrokeOnBrand);}\", \".frttxa5{border-right-color:var(--colorNeutralStrokeOnBrand);}\", \".f11o2r7f{border-left-color:var(--colorNeutralStrokeOnBrand);}\", \".fem5et0{border-bottom-color:var(--colorNeutralStrokeOnBrand);}\"],\n  a: [\".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}\", \".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}\", \".f15ngxrw:active .fui-TableCellActions{opacity:1;}\", \".fjbbrdp:active .fui-TableSelectionCell{opacity:1;}\", \".f7tkmfy:active{background-color:var(--colorBrandBackground2);}\", \".f1r2dosr:active{color:var(--colorNeutralForeground1);}\", \".fa9o754:active{background-color:var(--colorSubtleBackgroundSelected);}\"],\n  h: [\".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}\", \".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}\", \".f1uorfem:hover .fui-TableCellActions{opacity:1;}\", \".fw60kww:hover .fui-TableSelectionCell{opacity:1;}\", \".f1uqaxdt:hover{background-color:var(--colorSubtleBackgroundSelected);}\"],\n  m: [[\"@media (forced-colors: active){.fqlf3fd{border-top-width:2px;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f9dpb3h{border-right-width:2px;}.fw2muls{border-left-width:2px;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f1yat0gj{border-bottom-width:2px;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f7nae3y{border-top-style:solid;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.fa97sf3{border-left-style:solid;}.fkbere7{border-right-style:solid;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.fmtyzcc{border-bottom-style:solid;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.fb6zhgp{border-top-color:transparent;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.fyowp6c{border-right-color:transparent;}.fz08sq8{border-left-color:transparent;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f9dii88{border-bottom-color:transparent;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f1afxoft{border-bottom-right-radius:var(--borderRadiusMedium);}.flqq2yx{border-bottom-left-radius:var(--borderRadiusMedium);}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f1831rx6{border-top-left-radius:var(--borderRadiusMedium);}.f1b5xrmd{border-top-right-radius:var(--borderRadiusMedium);}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.fd94n53{box-sizing:border-box;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f1e0wld5:focus-visible{outline-offset:-4px;}}\", {\n    m: \"(forced-colors: active)\"\n  }]]\n});\n/**\n * Apply styling to the TableRow slots based on the state\n */\nexport const useTableRowStyles_unstable = state => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles()\n  };\n  state.root.className = mergeClasses(tableRowClassNames.root, styles.root, !state.isHeaderRow && styles.rootInteractive, styles[state.size], state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, styles[state.appearance], state.root.className);\n  return state;\n};\n//# sourceMappingURL=useTableRowStyles.styles.js.map"],"names":["tableRowClassName","tableRowClassNames","useTableRowStyles_unstable","root","useTableLayoutStyles","__styles","mc9l5x","d","useFlexLayoutStyles","Bt984gj","useStyles","sj55zd","B7ck84d","Bconypa","B6guboy","Bn4voq9","g9k6zt","Bfpq7zp","kdpuga","Bw81rd7","B6xbmo0","dm238s","rootInteractive","ecr2s2","lj723h","B43xm9u","i921ia","Jwef8y","Bi91k9c","Bpt6rm4","ff6mpl","medium","Bn0qgzm","oivjwe","B9xav0g","small","Be2twd7","brand","De3pzq","g2u3we","h3c5rm","zhjwy3","gwxt9v","v3aym","Bc736ss","Bk6ri7n","Bk5ld8o","c4eypz","felo30","Eshu5l","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Beo2b4z","h6lo6r","Btyw6ap","w1pwid","Brwvgy3","yadkgm","neutral","none","a","h","m","state","styles","layoutStyles","table","flex","className","mergeClasses","isHeaderRow","size","noNativeElements","appearance"],"mappings":"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"}
+{"version":3,"sources":["useTableRowStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles.styles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles.styles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames = {\n  root: tableRowClassName\n};\nconst useTableLayoutStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f1u0rzck\"\n  }\n}, {\n  d: [\".f1u0rzck{display:table-row;}\"]\n});\nconst useFlexLayoutStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f22iagw\",\n    Bt984gj: \"f122n59\"\n  }\n}, {\n  d: [\".f22iagw{display:flex;}\", \".f122n59{align-items:center;}\"]\n});\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    sj55zd: \"f19n0e5\",\n    B7ck84d: \"f1ewtqcl\",\n    Bconypa: \"f1jazu75\",\n    B6guboy: \"f1xeqee6\",\n    Bn4voq9: \"fz36nt7\",\n    g9k6zt: \"f9znhxp\",\n    Bfpq7zp: \"fqrak0z\",\n    kdpuga: [\"f1o2ludy\", \"f1kjnpwc\"],\n    Bw81rd7: [\"f1kjnpwc\", \"f1o2ludy\"],\n    B6xbmo0: [\"fxmnebo\", \"f1witrsb\"],\n    dm238s: [\"f1witrsb\", \"fxmnebo\"]\n  },\n  rootInteractive: {\n    ecr2s2: \"f1wfn5kd\",\n    lj723h: \"f1g4hkjv\",\n    B43xm9u: \"f15ngxrw\",\n    i921ia: \"fjbbrdp\",\n    Jwef8y: \"f1t94bn6\",\n    Bi91k9c: \"feu1g3u\",\n    Bpt6rm4: \"f1uorfem\",\n    ff6mpl: \"fw60kww\",\n    ze5xyy: \"f4xjyn1\",\n    pgvf35: \"ff1wgvm\",\n    Bh7lczh: [\"fiob0tu\", \"f1x4h75k\"],\n    dpv3f4: \"f1j6scgf\",\n    Bpnjhaq: [\"f1x4h75k\", \"fiob0tu\"]\n  },\n  medium: {\n    Bn0qgzm: \"f1vxd6vx\",\n    oivjwe: \"fg706s2\",\n    B9xav0g: \"frpde29\"\n  },\n  small: {\n    Bn0qgzm: \"f1vxd6vx\",\n    oivjwe: \"fg706s2\",\n    B9xav0g: \"frpde29\"\n  },\n  \"extra-small\": {\n    Be2twd7: \"fy9rknc\"\n  },\n  brand: {\n    De3pzq: \"f16xkysk\",\n    g2u3we: \"f1bh3yvw\",\n    h3c5rm: [\"fmi79ni\", \"f11fozsx\"],\n    B9xav0g: \"fnzw4c6\",\n    zhjwy3: [\"f11fozsx\", \"fmi79ni\"],\n    ecr2s2: \"f7tkmfy\",\n    lj723h: \"f1r2dosr\",\n    gwxt9v: \"fqlf3fd\",\n    v3aym: [\"f9dpb3h\", \"fw2muls\"],\n    Bc736ss: \"f1yat0gj\",\n    Bk6ri7n: [\"fw2muls\", \"f9dpb3h\"],\n    Bk5ld8o: \"f7nae3y\",\n    c4eypz: [\"fkbere7\", \"fa97sf3\"],\n    felo30: \"fmtyzcc\",\n    Eshu5l: [\"fa97sf3\", \"fkbere7\"],\n    Bjwas2f: \"fb6zhgp\",\n    Bn1d65q: [\"fyowp6c\", \"fz08sq8\"],\n    Bxeuatn: \"f9dii88\",\n    n51gp8: [\"fz08sq8\", \"fyowp6c\"],\n    Beo2b4z: [\"f1afxoft\", \"flqq2yx\"],\n    h6lo6r: [\"flqq2yx\", \"f1afxoft\"],\n    Btyw6ap: [\"f1b5xrmd\", \"f1831rx6\"],\n    w1pwid: [\"f1831rx6\", \"f1b5xrmd\"],\n    Brwvgy3: \"fd94n53\",\n    yadkgm: \"f1e0wld5\"\n  },\n  neutral: {\n    gwxt9v: \"fqlf3fd\",\n    v3aym: [\"f9dpb3h\", \"fw2muls\"],\n    Bc736ss: \"f1yat0gj\",\n    Bk6ri7n: [\"fw2muls\", \"f9dpb3h\"],\n    Bk5ld8o: \"f7nae3y\",\n    c4eypz: [\"fkbere7\", \"fa97sf3\"],\n    felo30: \"fmtyzcc\",\n    Eshu5l: [\"fa97sf3\", \"fkbere7\"],\n    Bjwas2f: \"fb6zhgp\",\n    Bn1d65q: [\"fyowp6c\", \"fz08sq8\"],\n    Bxeuatn: \"f9dii88\",\n    n51gp8: [\"fz08sq8\", \"fyowp6c\"],\n    Beo2b4z: [\"f1afxoft\", \"flqq2yx\"],\n    h6lo6r: [\"flqq2yx\", \"f1afxoft\"],\n    Btyw6ap: [\"f1b5xrmd\", \"f1831rx6\"],\n    w1pwid: [\"f1831rx6\", \"f1b5xrmd\"],\n    Brwvgy3: \"fd94n53\",\n    yadkgm: \"f1e0wld5\",\n    De3pzq: \"fq5gl1p\",\n    sj55zd: \"f1cgsbmv\",\n    Jwef8y: \"f1uqaxdt\",\n    ecr2s2: \"fa9o754\",\n    g2u3we: \"frmsihh\",\n    h3c5rm: [\"frttxa5\", \"f11o2r7f\"],\n    B9xav0g: \"fem5et0\",\n    zhjwy3: [\"f11o2r7f\", \"frttxa5\"]\n  },\n  none: {}\n}, {\n  d: [\".f19n0e5{color:var(--colorNeutralForeground1);}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f1jazu75[data-fui-focus-within]:focus-within .fui-TableSelectionCell{opacity:1;}\", \".f1xeqee6[data-fui-focus-within]:focus-within .fui-TableCellActions{opacity:1;}\", \".fz36nt7[data-fui-focus-visible]{outline-width:2px;}\", \".f9znhxp[data-fui-focus-visible]{outline-style:solid;}\", \".fqrak0z[data-fui-focus-visible]{outline-color:var(--colorStrokeFocus2);}\", \".f1o2ludy[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusMedium);}\", \".f1kjnpwc[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusMedium);}\", \".fxmnebo[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusMedium);}\", \".f1witrsb[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusMedium);}\", \".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}\", \".fg706s2{border-bottom-style:solid;}\", \".frpde29{border-bottom-color:var(--colorNeutralStroke2);}\", \".fy9rknc{font-size:var(--fontSizeBase200);}\", \".f16xkysk{background-color:var(--colorBrandBackground2);}\", \".f1bh3yvw{border-top-color:var(--colorTransparentStrokeInteractive);}\", \".fmi79ni{border-right-color:var(--colorTransparentStrokeInteractive);}\", \".f11fozsx{border-left-color:var(--colorTransparentStrokeInteractive);}\", \".fnzw4c6{border-bottom-color:var(--colorTransparentStrokeInteractive);}\", \".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}\", \".f1cgsbmv{color:var(--colorNeutralForeground1Hover);}\", \".frmsihh{border-top-color:var(--colorNeutralStrokeOnBrand);}\", \".frttxa5{border-right-color:var(--colorNeutralStrokeOnBrand);}\", \".f11o2r7f{border-left-color:var(--colorNeutralStrokeOnBrand);}\", \".fem5et0{border-bottom-color:var(--colorNeutralStrokeOnBrand);}\"],\n  a: [\".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}\", \".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}\", \".f15ngxrw:active .fui-TableCellActions{opacity:1;}\", \".fjbbrdp:active .fui-TableSelectionCell{opacity:1;}\", \".f7tkmfy:active{background-color:var(--colorBrandBackground2);}\", \".f1r2dosr:active{color:var(--colorNeutralForeground1);}\", \".fa9o754:active{background-color:var(--colorSubtleBackgroundSelected);}\"],\n  h: [\".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}\", \".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}\", \".f1uorfem:hover .fui-TableCellActions{opacity:1;}\", \".fw60kww:hover .fui-TableSelectionCell{opacity:1;}\", \".f1uqaxdt:hover{background-color:var(--colorSubtleBackgroundSelected);}\"],\n  m: [[\"@media (forced-colors: active){.f4xjyn1:hover{color:Highlight;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.ff1wgvm:hover{border-top-color:Highlight;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f1x4h75k:hover{border-left-color:Highlight;}.fiob0tu:hover{border-right-color:Highlight;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f1j6scgf:hover{border-bottom-color:Highlight;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.fqlf3fd{border-top-width:2px;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f9dpb3h{border-right-width:2px;}.fw2muls{border-left-width:2px;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f1yat0gj{border-bottom-width:2px;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f7nae3y{border-top-style:solid;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.fa97sf3{border-left-style:solid;}.fkbere7{border-right-style:solid;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.fmtyzcc{border-bottom-style:solid;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.fb6zhgp{border-top-color:transparent;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.fyowp6c{border-right-color:transparent;}.fz08sq8{border-left-color:transparent;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f9dii88{border-bottom-color:transparent;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f1afxoft{border-bottom-right-radius:var(--borderRadiusMedium);}.flqq2yx{border-bottom-left-radius:var(--borderRadiusMedium);}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f1831rx6{border-top-left-radius:var(--borderRadiusMedium);}.f1b5xrmd{border-top-right-radius:var(--borderRadiusMedium);}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.fd94n53{box-sizing:border-box;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f1e0wld5:focus-visible{outline-offset:-4px;}}\", {\n    m: \"(forced-colors: active)\"\n  }]]\n});\n/**\n * Apply styling to the TableRow slots based on the state\n */\nexport const useTableRowStyles_unstable = state => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles()\n  };\n  state.root.className = mergeClasses(tableRowClassNames.root, styles.root, !state.isHeaderRow && styles.rootInteractive, styles[state.size], state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, styles[state.appearance], state.root.className);\n  return state;\n};\n//# sourceMappingURL=useTableRowStyles.styles.js.map"],"names":["tableRowClassName","tableRowClassNames","useTableRowStyles_unstable","root","useTableLayoutStyles","__styles","mc9l5x","d","useFlexLayoutStyles","Bt984gj","useStyles","sj55zd","B7ck84d","Bconypa","B6guboy","Bn4voq9","g9k6zt","Bfpq7zp","kdpuga","Bw81rd7","B6xbmo0","dm238s","rootInteractive","ecr2s2","lj723h","B43xm9u","i921ia","Jwef8y","Bi91k9c","Bpt6rm4","ff6mpl","ze5xyy","pgvf35","Bh7lczh","dpv3f4","Bpnjhaq","medium","Bn0qgzm","oivjwe","B9xav0g","small","Be2twd7","brand","De3pzq","g2u3we","h3c5rm","zhjwy3","gwxt9v","v3aym","Bc736ss","Bk6ri7n","Bk5ld8o","c4eypz","felo30","Eshu5l","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Beo2b4z","h6lo6r","Btyw6ap","w1pwid","Brwvgy3","yadkgm","neutral","none","a","h","m","state","styles","layoutStyles","table","flex","className","mergeClasses","isHeaderRow","size","noNativeElements","appearance"],"mappings":"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"}

package/lib-commonjs/contexts/dataGridContext.js

@@ -9,6 +9,9 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    dataGridContextDefaultValue: function() {
+        return dataGridContextDefaultValue;
+    },
     DataGridContextProvider: function() {
         return DataGridContextProvider;
     },

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

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

package/lib-commonjs/hooks/useKeyboardResizing.js

@@ -124,7 +124,7 @@ function useKeyboardResizing(columnResizeState) {
     return {
         toggleInteractiveMode,
         columnId,
-        getKeyboardResizingProps: (colId, currentWidth)=>({
+        getKeyboardResizingProps: _react.useCallback((colId, currentWidth)=>({
                 onKeyDown: keyboardHandler,
                 onBlur: disableInteractiveMode,
                 ref: getKeyboardResizingRef(colId),
@@ -134,6 +134,12 @@ function useKeyboardResizing(columnResizeState) {
                 'aria-hidden': colId === columnId ? false : true,
                 tabIndex: colId === columnId ? 0 : undefined,
                 ...tabsterAttrs
-            })
+            }), [
+            columnId,
+            disableInteractiveMode,
+            getKeyboardResizingRef,
+            keyboardHandler,
+            tabsterAttrs
+        ])
     };
 }