@fluentui/react-table 9.1.1 → 9.2.0

package/lib/hooks/useTableColumnSizing.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useTableColumnResizeState","useTableColumnResizeMouseHandler","useMeasureElement","TableResizeHandle","defaultColumnSizingState","getColumnWidths","getOnMouseDown","setColumnWidth","getTableHeaderCellProps","style","columnId","getTableCellProps","useTableColumnSizing_unstable","params","tableState","useTableColumnSizingState","getColumnStyles","column","width","minWidth","maxWidth","columns","measureElementRef","columnResizeState","containerWidthOffset","mouseHandler","tableRef","columnSizing_unstable","w","undefined","getColumns","col","getColumnById","aside","createElement","onMouseDown","onTouchStart"],"sources":["../src/packages/react-components/react-table/src/hooks/useTableColumnSizing.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  TableColumnId,\n  ColumnWidthState,\n  TableColumnSizingState,\n  TableFeaturesState,\n  UseTableColumnSizingParams,\n} from './types';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useMeasureElement } from './useMeasureElement';\nimport { TableResizeHandle } from '../TableResizeHandle';\n\nexport const defaultColumnSizingState: TableColumnSizingState = {\n  getColumnWidths: () => [],\n  getOnMouseDown: () => () => null,\n  setColumnWidth: () => null,\n  getTableHeaderCellProps: () => ({ style: {}, columnId: '' }),\n  getTableCellProps: () => ({ style: {}, columnId: '' }),\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\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      getTableHeaderCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        const aside = (\n          <TableResizeHandle\n            onMouseDown={mouseHandler.getOnMouseDown(columnId)}\n            onTouchStart={mouseHandler.getOnMouseDown(columnId)}\n          />\n        );\n        return col ? { style: getColumnStyles(col), aside } : {};\n      },\n      getTableCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        return col ? { style: getColumnStyles(col) } : {};\n      },\n    },\n  };\n}\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAQ9B,SAASC,yBAAyB,QAAQ,6BAA6B;AACvE,SAASC,gCAAgC,QAAQ,oCAAoC;AACrF,SAASC,iBAAiB,QAAQ,qBAAqB;AACvD,SAASC,iBAAiB,QAAQ,sBAAsB;AAExD,OAAO,MAAMC,wBAAwB,GAA2B;EAC9DC,eAAe,EAAEA,CAAA,KAAM,EAAE;EACzBC,cAAc,EAAEA,CAAA,KAAM,MAAM,IAAI;EAChCC,cAAc,EAAEA,CAAA,KAAM,IAAI;EAC1BC,uBAAuB,EAAEA,CAAA,MAAO;IAAEC,KAAK,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAE,CAAE,CAAC;EAC5DC,iBAAiB,EAAEA,CAAA,MAAO;IAAEF,KAAK,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAE,CAAE;CACtD;AAED,OAAM,SAAUE,6BAA6BA,CAAQC,MAAmC;EACtF;EACA;EACA,OAAQC,UAAqC,IAAKC,yBAAyB,CAACD,UAAU,EAAED,MAAM,CAAC;AACjG;AAEA,SAASG,eAAeA,CAACC,MAAwB;EAC/C,MAAMC,KAAK,GAAGD,MAAM,CAACC,KAAK;EAE1B,OAAO;IACL;IACAA,KAAK;IACL;IACAC,QAAQ,EAAED,KAAK;IACfE,QAAQ,EAAEF;GACX;AACH;AAEA,SAASH,yBAAyBA,CAChCD,UAAqC,EACrCD,MAAmC;EAEnC,MAAM;IAAEQ;EAAO,CAAE,GAAGP,UAAU;EAE9B;EACA,MAAM;IAAEI,KAAK;IAAEI;EAAiB,CAAE,GAAGpB,iBAAiB,EAAE;EACxD;EACA,MAAMqB,iBAAiB,GAAGvB,yBAAyB,CAACqB,OAAO,EAAEH,KAAK,IAAI,CAAAL,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEW,oBAAoB,KAAI,CAAC,CAAC,EAAEX,MAAM,CAAC;EACjH;EACA,MAAMY,YAAY,GAAGxB,gCAAgC,CAACsB,iBAAiB,CAAC;EAExE,OAAO;IACL,GAAGT,UAAU;IACbY,QAAQ,EAAEJ,iBAAiB;IAC3B;IACAK,qBAAqB,EAAE;MACrBrB,cAAc,EAAEmB,YAAY,CAACnB,cAAc;MAC3CC,cAAc,EAAEA,CAACG,QAAuB,EAAEkB,CAAS,KACjDL,iBAAiB,CAAChB,cAAc,CAACsB,SAAS,EAAE;QAAEnB,QAAQ;QAAEQ,KAAK,EAAEU;MAAC,CAAE,CAAC;MACrEvB,eAAe,EAAEkB,iBAAiB,CAACO,UAAU;MAC7CtB,uBAAuB,EAAGE,QAAuB,IAAI;QACnD,MAAMqB,GAAG,GAAGR,iBAAiB,CAACS,aAAa,CAACtB,QAAQ,CAAC;QACrD,MAAMuB,KAAK,gBACTlC,KAAA,CAAAmC,aAAA,CAAC/B,iBAAiB;UAChBgC,WAAW,EAAEV,YAAY,CAACnB,cAAc,CAACI,QAAQ,CAAC;UAClD0B,YAAY,EAAEX,YAAY,CAACnB,cAAc,CAACI,QAAQ;QAAC,EAEtD;QACD,OAAOqB,GAAG,GAAG;UAAEtB,KAAK,EAAEO,eAAe,CAACe,GAAG,CAAC;UAAEE;QAAK,CAAE,GAAG,EAAE;MAC1D,CAAC;MACDtB,iBAAiB,EAAGD,QAAuB,IAAI;QAC7C,MAAMqB,GAAG,GAAGR,iBAAiB,CAACS,aAAa,CAACtB,QAAQ,CAAC;QACrD,OAAOqB,GAAG,GAAG;UAAEtB,KAAK,EAAEO,eAAe,CAACe,GAAG;QAAC,CAAE,GAAG,EAAE;MACnD;;GAEH;AACH"}
+{"version":3,"names":["React","TableResizeHandle","useMeasureElement","useTableColumnResizeMouseHandler","useTableColumnResizeState","useKeyboardResizing","defaultColumnSizingState","getColumnWidths","getOnMouseDown","setColumnWidth","getTableHeaderCellProps","style","columnId","getTableCellProps","enableKeyboardMode","useTableColumnSizing_unstable","params","tableState","useTableColumnSizingState","getColumnStyles","column","width","minWidth","maxWidth","columns","measureElementRef","columnResizeState","containerWidthOffset","mouseHandler","keyboardResizing","useCallback","onChange","e","preventDefault","nativeEvent","stopPropagation","toggleInteractiveMode","tableRef","columnSizing_unstable","w","undefined","getColumns","col","getColumnById","aside","createElement","onMouseDown","onTouchStart"],"sources":["../src/packages/react-components/react-table/src/hooks/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';\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  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 keyboardResizing = 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        keyboardResizing.toggleInteractiveMode(columnId, onChange);\n      },\n    [keyboardResizing],\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      getTableHeaderCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n\n        const aside = (\n          <TableResizeHandle\n            onMouseDown={mouseHandler.getOnMouseDown(columnId)}\n            onTouchStart={mouseHandler.getOnMouseDown(columnId)}\n          />\n        );\n        return col ? { style: getColumnStyles(col), aside } : {};\n      },\n      getTableCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        return col ? { style: getColumnStyles(col) } : {};\n      },\n      enableKeyboardMode,\n    },\n  };\n}\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/DataGrid/DataGrid.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { TableContextValues, TableProps, TableSlots, TableState } from '../Table/Table.types';\nimport type {\n  SortState,\n  TableFeaturesState,\n  UseTableSortOptions,\n  SelectionMode,\n  UseTableSelectionOptions,\n  OnSelectionChangeData,\n  TableColumnSizingOptions,\n  TableColumnId,\n} from '../../hooks';\nimport { TableRowProps } from '../TableRow/TableRow.types';\n\nexport type DataGridSlots = TableSlots;\n\nexport type DataGridFocusMode = 'none' | 'cell' | 'row_unstable';\n\nexport type DataGridContextValues = TableContextValues & {\n  dataGrid: DataGridContextValue;\n};\n\n// Use any here since we can't know the user types\n// The user is responsible for narrowing the type downstream\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type DataGridContextValue = TableFeaturesState<any> & {\n  /**\n   * How focus navigation will work in the datagrid\n   * @default cell\n   */\n  focusMode: DataGridFocusMode;\n\n  /**\n   * Lets child components know if rows selection is enabled\n   * @see selectionMode prop enables row selection on the component\n   */\n  selectableRows: boolean;\n\n  /**\n   * Enables subtle selection style\n   * @default false\n   */\n  subtleSelection: boolean;\n\n  /**\n   * Row appearance when selected\n   * @default brand\n   */\n  selectionAppearance: TableRowProps['appearance'];\n\n  /**\n   * Enables column resizing\n   */\n  resizableColumns?: boolean;\n};\n\n/**\n * DataGrid Props\n */\nexport type DataGridProps = TableProps &\n  Pick<DataGridContextValue, 'items' | 'columns' | 'getRowId'> &\n  Pick<Partial<DataGridContextValue>, 'focusMode' | 'subtleSelection' | 'selectionAppearance' | 'resizableColumns'> &\n  Pick<UseTableSortOptions, 'sortState' | 'defaultSortState'> &\n  Pick<UseTableSelectionOptions, 'defaultSelectedItems' | 'selectedItems'> & {\n    onSortChange?: (e: React.MouseEvent, sortState: SortState) => void;\n    onSelectionChange?: (e: React.MouseEvent | React.KeyboardEvent, data: OnSelectionChangeData) => void;\n    /**\n     * Enables row selection and sets the selection mode\n     * @default false\n     */\n    selectionMode?: SelectionMode;\n    /**\n     * Options for column resizing\n     */\n    columnSizingOptions?: TableColumnSizingOptions;\n    /**\n     * A callback triggered when a column is resized.\n     */\n    onColumnResize?: (e: TouchEvent | MouseEvent | undefined, data: { columnId: TableColumnId; width: number }) => void;\n  };\n\n/**\n * State used in rendering DataGrid\n */\nexport type DataGridState = TableState & { tableState: TableFeaturesState<unknown> } & Pick<\n    DataGridContextValue,\n    'focusMode' | 'selectableRows' | 'subtleSelection' | 'selectionAppearance' | 'getRowId' | 'resizableColumns'\n  >;\n"]}
+{"version":3,"file":"DataGrid.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/DataGrid/DataGrid.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { TableContextValues, TableProps, TableSlots, TableState } from '../Table/Table.types';\nimport type {\n  SortState,\n  TableFeaturesState,\n  UseTableSortOptions,\n  SelectionMode,\n  UseTableSelectionOptions,\n  OnSelectionChangeData,\n  TableColumnSizingOptions,\n  TableColumnId,\n} from '../../hooks';\nimport { TableRowProps } from '../TableRow/TableRow.types';\n\nexport type DataGridSlots = TableSlots;\n\nexport type DataGridFocusMode = 'none' | 'cell' | 'row_unstable';\n\nexport type DataGridContextValues = TableContextValues & {\n  dataGrid: DataGridContextValue;\n};\n\n// Use any here since we can't know the user types\n// The user is responsible for narrowing the type downstream\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type DataGridContextValue = TableFeaturesState<any> & {\n  /**\n   * How focus navigation will work in the datagrid\n   * @default cell\n   */\n  focusMode: DataGridFocusMode;\n\n  /**\n   * Lets child components know if rows selection is enabled\n   * @see selectionMode prop enables row selection on the component\n   */\n  selectableRows: boolean;\n\n  /**\n   * Enables subtle selection style\n   * @default false\n   */\n  subtleSelection: boolean;\n\n  /**\n   * Row appearance when selected\n   * @default brand\n   */\n  selectionAppearance: TableRowProps['appearance'];\n\n  /**\n   * Enables column resizing\n   */\n  resizableColumns?: boolean;\n};\n\n/**\n * DataGrid Props\n */\nexport type DataGridProps = TableProps &\n  Pick<DataGridContextValue, 'items' | 'columns' | 'getRowId'> &\n  Pick<Partial<DataGridContextValue>, 'focusMode' | 'subtleSelection' | 'selectionAppearance' | 'resizableColumns'> &\n  Pick<UseTableSortOptions, 'sortState' | 'defaultSortState'> &\n  Pick<UseTableSelectionOptions, 'defaultSelectedItems' | 'selectedItems'> & {\n    onSortChange?: (e: React.MouseEvent, sortState: SortState) => void;\n    onSelectionChange?: (e: React.MouseEvent | React.KeyboardEvent, data: OnSelectionChangeData) => void;\n    /**\n     * Enables row selection and sets the selection mode\n     * @default false\n     */\n    selectionMode?: SelectionMode;\n    /**\n     * Options for column resizing\n     */\n    columnSizingOptions?: TableColumnSizingOptions;\n    /**\n     * A callback triggered when a column is resized.\n     */\n    onColumnResize?: (\n      e: KeyboardEvent | TouchEvent | MouseEvent | undefined,\n      data: { columnId: TableColumnId; width: number },\n    ) => void;\n  };\n\n/**\n * State used in rendering DataGrid\n */\nexport type DataGridState = TableState & { tableState: TableFeaturesState<unknown> } & Pick<\n    DataGridContextValue,\n    'focusMode' | 'selectableRows' | 'subtleSelection' | 'selectionAppearance' | 'getRowId' | 'resizableColumns'\n  >;\n"]}

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

@@ -14,7 +14,9 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-tabster", "../T
     var useDataGrid_unstable = function (props, ref) {
         var items = props.items, columns = props.columns, _a = props.focusMode, focusMode = _a === void 0 ? 'cell' : _a, selectionMode = props.selectionMode, onSortChange = props.onSortChange, onSelectionChange = props.onSelectionChange, defaultSortState = props.defaultSortState, sortState = props.sortState, selectedItems = props.selectedItems, defaultSelectedItems = props.defaultSelectedItems, _b = props.subtleSelection, subtleSelection = _b === void 0 ? false : _b, _c = props.selectionAppearance, selectionAppearance = _c === void 0 ? 'brand' : _c, getRowId = props.getRowId, resizableColumns = props.resizableColumns, columnSizingOptions = props.columnSizingOptions, onColumnResize = props.onColumnResize;
         var navigable = focusMode !== 'none';
-        var keyboardNavAttr = react_tabster_1.useArrowNavigationGroup({ axis: 'grid' });
+        var keyboardNavAttr = react_tabster_1.useArrowNavigationGroup({
+            axis: 'grid',
+        });
         var tableState = hooks_1.useTableFeatures({ items: items, columns: columns, getRowId: getRowId }, [
             hooks_1.useTableSort({
                 defaultSortState: defaultSortState,

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

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

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

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

package/lib-amd/components/DataGridRow/renderDataGridRow.js

@@ -9,7 +9,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "..
         var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
         return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
             slots.selectionCell && React.createElement(slots.selectionCell, tslib_1.__assign({}, slotProps.selectionCell)),
-            state.columnDefs.map(function (columnDef) { return (React.createElement(columnIdContext_1.ColumnIdContextProvider, { value: columnDef.columnId, key: columnDef.columnId }, state.renderCell(columnDef))); })));
+            state.columnDefs.map(function (columnDef) { return (React.createElement(columnIdContext_1.ColumnIdContextProvider, { value: columnDef.columnId, key: columnDef.columnId }, state.renderCell(columnDef, state.dataGridContextValue))); })));
     };
     exports.renderDataGridRow_unstable = renderDataGridRow_unstable;
 });

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

@@ -1 +1 @@
-{"version":3,"file":"renderDataGridRow.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/DataGridRow/renderDataGridRow.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,0BAA0B,GAAG,UAAC,KAAuB;QAC1D,IAAA,KAAuB,0BAAQ,CAAmB,KAAK,CAAC,EAAtD,KAAK,WAAA,EAAE,SAAS,eAAsC,CAAC;QAE/D,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,KAAK,CAAC,aAAa,IAAI,oBAAC,KAAK,CAAC,aAAa,uBAAK,SAAS,CAAC,aAAa,EAAI;YAC3E,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,UAAA,SAAS,IAAI,OAAA,CACjC,oBAAC,yCAAuB,IAAC,KAAK,EAAE,SAAS,CAAC,QAAQ,EAAE,GAAG,EAAE,SAAS,CAAC,QAAQ,IACxE,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,CACJ,CAC3B,EAJkC,CAIlC,CAAC,CACS,CACd,CAAC;IACJ,CAAC,CAAC;IAbW,QAAA,0BAA0B,8BAarC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DataGridRowState, DataGridRowSlots } from './DataGridRow.types';\nimport { ColumnIdContextProvider } from '../../contexts/columnIdContext';\n\n/**\n * Render the final JSX of DataGridRow\n */\nexport const renderDataGridRow_unstable = (state: DataGridRowState) => {\n  const { slots, slotProps } = getSlots<DataGridRowSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.selectionCell && <slots.selectionCell {...slotProps.selectionCell} />}\n      {state.columnDefs.map(columnDef => (\n        <ColumnIdContextProvider value={columnDef.columnId} key={columnDef.columnId}>\n          {state.renderCell(columnDef)}\n        </ColumnIdContextProvider>\n      ))}\n    </slots.root>\n  );\n};\n"]}
+{"version":3,"file":"renderDataGridRow.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/DataGridRow/renderDataGridRow.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,0BAA0B,GAAG,UAAC,KAAuB;QAC1D,IAAA,KAAuB,0BAAQ,CAAmB,KAAK,CAAC,EAAtD,KAAK,WAAA,EAAE,SAAS,eAAsC,CAAC;QAE/D,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,KAAK,CAAC,aAAa,IAAI,oBAAC,KAAK,CAAC,aAAa,uBAAK,SAAS,CAAC,aAAa,EAAI;YAC3E,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,UAAA,SAAS,IAAI,OAAA,CACjC,oBAAC,yCAAuB,IAAC,KAAK,EAAE,SAAS,CAAC,QAAQ,EAAE,GAAG,EAAE,SAAS,CAAC,QAAQ,IACxE,KAAK,CAAC,UAAU,CAAC,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAC,CAChC,CAC3B,EAJkC,CAIlC,CAAC,CACS,CACd,CAAC;IACJ,CAAC,CAAC;IAbW,QAAA,0BAA0B,8BAarC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DataGridRowState, DataGridRowSlots } from './DataGridRow.types';\nimport { ColumnIdContextProvider } from '../../contexts/columnIdContext';\n\n/**\n * Render the final JSX of DataGridRow\n */\nexport const renderDataGridRow_unstable = (state: DataGridRowState) => {\n  const { slots, slotProps } = getSlots<DataGridRowSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.selectionCell && <slots.selectionCell {...slotProps.selectionCell} />}\n      {state.columnDefs.map(columnDef => (\n        <ColumnIdContextProvider value={columnDef.columnId} key={columnDef.columnId}>\n          {state.renderCell(columnDef, state.dataGridContextValue)}\n        </ColumnIdContextProvider>\n      ))}\n    </slots.root>\n  );\n};\n"]}

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

@@ -25,6 +25,7 @@ define(["require", "exports", "tslib", "@fluentui/react-utilities", "@fluentui/k
             return 'none';
         });
         var toggleRow = dataGridContext_1.useDataGridContext_unstable(function (ctx) { return ctx.selection.toggleRow; });
+        var dataGridContextValue = dataGridContext_1.useDataGridContext_unstable(function (ctx) { return ctx; });
         var onClick = react_utilities_1.useEventCallback(function (e) {
             var _a;
             if (selectable && !isHeader) {
@@ -42,7 +43,7 @@ define(["require", "exports", "tslib", "@fluentui/react-utilities", "@fluentui/k
             (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
         });
         var baseState = useTableRow_1.useTableRow_unstable(tslib_1.__assign(tslib_1.__assign({ appearance: appearance, 'aria-selected': selectable ? selected : undefined }, props), { onClick: onClick, onKeyDown: onKeyDown, children: null, as: 'div', tabIndex: tabbable && !isHeader ? 0 : undefined }), ref);
-        return tslib_1.__assign(tslib_1.__assign({}, baseState), { components: tslib_1.__assign(tslib_1.__assign({}, baseState.components), { selectionCell: DataGridSelectionCell_1.DataGridSelectionCell }), selectionCell: react_utilities_1.resolveShorthand(props.selectionCell, { required: selectable }), renderCell: props.children, columnDefs: columnDefs });
+        return tslib_1.__assign(tslib_1.__assign({}, baseState), { components: tslib_1.__assign(tslib_1.__assign({}, baseState.components), { selectionCell: DataGridSelectionCell_1.DataGridSelectionCell }), selectionCell: react_utilities_1.resolveShorthand(props.selectionCell, { required: selectable }), renderCell: props.children, columnDefs: columnDefs, dataGridContextValue: dataGridContextValue });
     };
     exports.useDataGridRow_unstable = useDataGridRow_unstable;
 });

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

@@ -1 +1 @@
-{"version":3,"file":"useDataGridRow.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/DataGridRow/useDataGridRow.tsx"],"names":[],"mappings":";;;;IAUA;;;;;;;;OAQG;IACI,IAAM,uBAAuB,GAAG,UAAC,KAAuB,EAAE,GAA2B;QAC1F,IAAM,KAAK,GAAG,mCAAoB,EAAE,CAAC;QACrC,IAAM,QAAQ,GAAG,uCAAkB,EAAE,CAAC;QACtC,IAAM,UAAU,GAAG,6CAA2B,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,OAAO,EAAX,CAAW,CAAC,CAAC;QACnE,IAAM,UAAU,GAAG,6CAA2B,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,cAAc,EAAlB,CAAkB,CAAC,CAAC;QAC1E,IAAM,QAAQ,GAAG,6CAA2B,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,EAAlC,CAAkC,CAAC,CAAC;QACxF,IAAM,QAAQ,GAAG,6CAA2B,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,SAAS,KAAK,cAAc,EAAhC,CAAgC,CAAC,CAAC;QACtF,IAAM,UAAU,GAAG,6CAA2B,CAAC,UAAA,GAAG;YAChD,IAAI,CAAC,QAAQ,IAAI,UAAU,IAAI,GAAG,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE;gBACjE,OAAO,GAAG,CAAC,mBAAmB,CAAC;aAChC;YAED,OAAO,MAAM,CAAC;QAChB,CAAC,CAAC,CAAC;QACH,IAAM,SAAS,GAAG,6CAA2B,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,SAAS,CAAC,SAAS,EAAvB,CAAuB,CAAC,CAAC;QAE9E,IAAM,OAAO,GAAG,kCAAgB,CAAC,UAAC,CAAwC;;YACxE,IAAI,UAAU,IAAI,CAAC,QAAQ,EAAE;gBAC3B,SAAS,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;aACrB;YAED,MAAA,KAAK,CAAC,OAAO,+CAAb,KAAK,EAAW,CAAC,CAAC,CAAC;QACrB,CAAC,CAAC,CAAC;QAEH,IAAM,SAAS,GAAG,kCAAgB,CAAC,UAAC,CAA2C;;YAC7E,IAAI,UAAU,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,GAAG,KAAK,qBAAK,IAAI,CAAC,0CAAwB,CAAC,CAAC,CAAC,MAAqB,CAAC,EAAE;gBACpG,iBAAiB;gBACjB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,SAAS,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;aACrB;YAED,MAAA,KAAK,CAAC,SAAS,+CAAf,KAAK,EAAa,CAAC,CAAC,CAAC;QACvB,CAAC,CAAC,CAAC;QAEH,IAAM,SAAS,GAAG,kCAAoB,qCAElC,UAAU,YAAA,EACV,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,IAC/C,KAAK,KACR,OAAO,SAAA,EACP,SAAS,WAAA,EACT,QAAQ,EAAE,IAAI,EACd,EAAE,EAAE,KAAK,EACT,QAAQ,EAAE,QAAQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,KAEjD,GAAG,CACJ,CAAC;QAEF,6CACK,SAAS,KACZ,UAAU,wCACL,SAAS,CAAC,UAAU,KACvB,aAAa,EAAE,6CAAqB,KAEtC,aAAa,EAAE,kCAAgB,CAAC,KAAK,CAAC,aAAa,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,EAC9E,UAAU,EAAE,KAAK,CAAC,QAAQ,EAC1B,UAAU,YAAA,IACV;IACJ,CAAC,CAAC;IA1DW,QAAA,uBAAuB,2BA0DlC","sourcesContent":["import * as React from 'react';\nimport { isInteractiveHTMLElement, useEventCallback, resolveShorthand } from '@fluentui/react-utilities';\nimport { Space } from '@fluentui/keyboard-keys';\nimport type { DataGridRowProps, DataGridRowState } from './DataGridRow.types';\nimport { useTableRow_unstable } from '../TableRow/useTableRow';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { DataGridSelectionCell } from '../DataGridSelectionCell/DataGridSelectionCell';\nimport { useTableRowIdContext } from '../../contexts/rowIdContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\n/**\n * Create the state required to render DataGridRow.\n *\n * The returned state can be modified with hooks such as useDataGridRowStyles_unstable,\n * before being passed to renderDataGridRow_unstable.\n *\n * @param props - props from this instance of DataGridRow\n * @param ref - reference to root HTMLElement of DataGridRow\n */\nexport const useDataGridRow_unstable = (props: DataGridRowProps, ref: React.Ref<HTMLElement>): DataGridRowState => {\n  const rowId = useTableRowIdContext();\n  const isHeader = useIsInTableHeader();\n  const columnDefs = useDataGridContext_unstable(ctx => ctx.columns);\n  const selectable = useDataGridContext_unstable(ctx => ctx.selectableRows);\n  const selected = useDataGridContext_unstable(ctx => ctx.selection.isRowSelected(rowId));\n  const tabbable = useDataGridContext_unstable(ctx => ctx.focusMode === 'row_unstable');\n  const appearance = useDataGridContext_unstable(ctx => {\n    if (!isHeader && selectable && ctx.selection.isRowSelected(rowId)) {\n      return ctx.selectionAppearance;\n    }\n\n    return 'none';\n  });\n  const toggleRow = useDataGridContext_unstable(ctx => ctx.selection.toggleRow);\n\n  const onClick = useEventCallback((e: React.MouseEvent<HTMLTableRowElement>) => {\n    if (selectable && !isHeader) {\n      toggleRow(e, rowId);\n    }\n\n    props.onClick?.(e);\n  });\n\n  const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLTableRowElement>) => {\n    if (selectable && !isHeader && e.key === Space && !isInteractiveHTMLElement(e.target as HTMLElement)) {\n      // stop scrolling\n      e.preventDefault();\n      toggleRow(e, rowId);\n    }\n\n    props.onKeyDown?.(e);\n  });\n\n  const baseState = useTableRow_unstable(\n    {\n      appearance,\n      'aria-selected': selectable ? selected : undefined,\n      ...props,\n      onClick,\n      onKeyDown,\n      children: null,\n      as: 'div',\n      tabIndex: tabbable && !isHeader ? 0 : undefined,\n    },\n    ref,\n  );\n\n  return {\n    ...baseState,\n    components: {\n      ...baseState.components,\n      selectionCell: DataGridSelectionCell,\n    },\n    selectionCell: resolveShorthand(props.selectionCell, { required: selectable }),\n    renderCell: props.children,\n    columnDefs,\n  };\n};\n"]}
+{"version":3,"file":"useDataGridRow.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/DataGridRow/useDataGridRow.tsx"],"names":[],"mappings":";;;;IAUA;;;;;;;;OAQG;IACI,IAAM,uBAAuB,GAAG,UAAC,KAAuB,EAAE,GAA2B;QAC1F,IAAM,KAAK,GAAG,mCAAoB,EAAE,CAAC;QACrC,IAAM,QAAQ,GAAG,uCAAkB,EAAE,CAAC;QACtC,IAAM,UAAU,GAAG,6CAA2B,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,OAAO,EAAX,CAAW,CAAC,CAAC;QACnE,IAAM,UAAU,GAAG,6CAA2B,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,cAAc,EAAlB,CAAkB,CAAC,CAAC;QAC1E,IAAM,QAAQ,GAAG,6CAA2B,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,EAAlC,CAAkC,CAAC,CAAC;QACxF,IAAM,QAAQ,GAAG,6CAA2B,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,SAAS,KAAK,cAAc,EAAhC,CAAgC,CAAC,CAAC;QACtF,IAAM,UAAU,GAAG,6CAA2B,CAAC,UAAA,GAAG;YAChD,IAAI,CAAC,QAAQ,IAAI,UAAU,IAAI,GAAG,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE;gBACjE,OAAO,GAAG,CAAC,mBAAmB,CAAC;aAChC;YAED,OAAO,MAAM,CAAC;QAChB,CAAC,CAAC,CAAC;QACH,IAAM,SAAS,GAAG,6CAA2B,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,SAAS,CAAC,SAAS,EAAvB,CAAuB,CAAC,CAAC;QAC9E,IAAM,oBAAoB,GAAG,6CAA2B,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,EAAH,CAAG,CAAC,CAAC;QAErE,IAAM,OAAO,GAAG,kCAAgB,CAAC,UAAC,CAAwC;;YACxE,IAAI,UAAU,IAAI,CAAC,QAAQ,EAAE;gBAC3B,SAAS,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;aACrB;YAED,MAAA,KAAK,CAAC,OAAO,+CAAb,KAAK,EAAW,CAAC,CAAC,CAAC;QACrB,CAAC,CAAC,CAAC;QAEH,IAAM,SAAS,GAAG,kCAAgB,CAAC,UAAC,CAA2C;;YAC7E,IAAI,UAAU,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,GAAG,KAAK,qBAAK,IAAI,CAAC,0CAAwB,CAAC,CAAC,CAAC,MAAqB,CAAC,EAAE;gBACpG,iBAAiB;gBACjB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,SAAS,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;aACrB;YAED,MAAA,KAAK,CAAC,SAAS,+CAAf,KAAK,EAAa,CAAC,CAAC,CAAC;QACvB,CAAC,CAAC,CAAC;QAEH,IAAM,SAAS,GAAG,kCAAoB,qCAElC,UAAU,YAAA,EACV,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,IAC/C,KAAK,KACR,OAAO,SAAA,EACP,SAAS,WAAA,EACT,QAAQ,EAAE,IAAI,EACd,EAAE,EAAE,KAAK,EACT,QAAQ,EAAE,QAAQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,KAEjD,GAAG,CACJ,CAAC;QAEF,6CACK,SAAS,KACZ,UAAU,wCACL,SAAS,CAAC,UAAU,KACvB,aAAa,EAAE,6CAAqB,KAEtC,aAAa,EAAE,kCAAgB,CAAC,KAAK,CAAC,aAAa,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,EAC9E,UAAU,EAAE,KAAK,CAAC,QAAQ,EAC1B,UAAU,YAAA,EACV,oBAAoB,sBAAA,IACpB;IACJ,CAAC,CAAC;IA5DW,QAAA,uBAAuB,2BA4DlC","sourcesContent":["import * as React from 'react';\nimport { isInteractiveHTMLElement, useEventCallback, resolveShorthand } from '@fluentui/react-utilities';\nimport { Space } from '@fluentui/keyboard-keys';\nimport type { DataGridRowProps, DataGridRowState } from './DataGridRow.types';\nimport { useTableRow_unstable } from '../TableRow/useTableRow';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { DataGridSelectionCell } from '../DataGridSelectionCell/DataGridSelectionCell';\nimport { useTableRowIdContext } from '../../contexts/rowIdContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\n/**\n * Create the state required to render DataGridRow.\n *\n * The returned state can be modified with hooks such as useDataGridRowStyles_unstable,\n * before being passed to renderDataGridRow_unstable.\n *\n * @param props - props from this instance of DataGridRow\n * @param ref - reference to root HTMLElement of DataGridRow\n */\nexport const useDataGridRow_unstable = (props: DataGridRowProps, ref: React.Ref<HTMLElement>): DataGridRowState => {\n  const rowId = useTableRowIdContext();\n  const isHeader = useIsInTableHeader();\n  const columnDefs = useDataGridContext_unstable(ctx => ctx.columns);\n  const selectable = useDataGridContext_unstable(ctx => ctx.selectableRows);\n  const selected = useDataGridContext_unstable(ctx => ctx.selection.isRowSelected(rowId));\n  const tabbable = useDataGridContext_unstable(ctx => ctx.focusMode === 'row_unstable');\n  const appearance = useDataGridContext_unstable(ctx => {\n    if (!isHeader && selectable && ctx.selection.isRowSelected(rowId)) {\n      return ctx.selectionAppearance;\n    }\n\n    return 'none';\n  });\n  const toggleRow = useDataGridContext_unstable(ctx => ctx.selection.toggleRow);\n  const dataGridContextValue = useDataGridContext_unstable(ctx => ctx);\n\n  const onClick = useEventCallback((e: React.MouseEvent<HTMLTableRowElement>) => {\n    if (selectable && !isHeader) {\n      toggleRow(e, rowId);\n    }\n\n    props.onClick?.(e);\n  });\n\n  const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLTableRowElement>) => {\n    if (selectable && !isHeader && e.key === Space && !isInteractiveHTMLElement(e.target as HTMLElement)) {\n      // stop scrolling\n      e.preventDefault();\n      toggleRow(e, rowId);\n    }\n\n    props.onKeyDown?.(e);\n  });\n\n  const baseState = useTableRow_unstable(\n    {\n      appearance,\n      'aria-selected': selectable ? selected : undefined,\n      ...props,\n      onClick,\n      onKeyDown,\n      children: null,\n      as: 'div',\n      tabIndex: tabbable && !isHeader ? 0 : undefined,\n    },\n    ref,\n  );\n\n  return {\n    ...baseState,\n    components: {\n      ...baseState.components,\n      selectionCell: DataGridSelectionCell,\n    },\n    selectionCell: resolveShorthand(props.selectionCell, { required: selectable }),\n    renderCell: props.children,\n    columnDefs,\n    dataGridContextValue,\n  };\n};\n"]}

package/lib-amd/hooks/types.js.map

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

package/lib-amd/hooks/useKeyboardResizing.js

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

package/lib-amd/hooks/useKeyboardResizing.js.map

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

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

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

package/lib-amd/hooks/useTableColumnSizing.js

@@ -1,4 +1,4 @@
-define(["require", "exports", "tslib", "react", "./useTableColumnResizeState", "./useTableColumnResizeMouseHandler", "./useMeasureElement", "../TableResizeHandle"], function (require, exports, tslib_1, React, useTableColumnResizeState_1, useTableColumnResizeMouseHandler_1, useMeasureElement_1, TableResizeHandle_1) {
+define(["require", "exports", "tslib", "react", "../TableResizeHandle", "./useMeasureElement", "./useTableColumnResizeMouseHandler", "./useTableColumnResizeState", "./useKeyboardResizing"], function (require, exports, tslib_1, React, TableResizeHandle_1, useMeasureElement_1, useTableColumnResizeMouseHandler_1, useTableColumnResizeState_1, useKeyboardResizing_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.useTableColumnSizing_unstable = exports.defaultColumnSizingState = void 0;
@@ -8,6 +8,7 @@ define(["require", "exports", "tslib", "react", "./useTableColumnResizeState", "
         setColumnWidth: function () { return null; },
         getTableHeaderCellProps: function () { return ({ style: {}, columnId: '' }); },
         getTableCellProps: function () { return ({ style: {}, columnId: '' }); },
+        enableKeyboardMode: function () { return function () { return null; }; },
     };
     function useTableColumnSizing_unstable(params) {
         // False positive, these plugin hooks are intended to be run on every render
@@ -33,6 +34,15 @@ define(["require", "exports", "tslib", "react", "./useTableColumnResizeState", "
         var columnResizeState = useTableColumnResizeState_1.useTableColumnResizeState(columns, width + ((params === null || params === void 0 ? void 0 : params.containerWidthOffset) || 0), params);
         // Creates the mouse handler and attaches the state to it
         var mouseHandler = useTableColumnResizeMouseHandler_1.useTableColumnResizeMouseHandler(columnResizeState);
+        // Creates the keyboard handler for resizing columns
+        var keyboardResizing = useKeyboardResizing_1.useKeyboardResizing(columnResizeState);
+        var enableKeyboardMode = React.useCallback(function (columnId, onChange) {
+            return function (e) {
+                e.preventDefault();
+                e.nativeEvent.stopPropagation();
+                keyboardResizing.toggleInteractiveMode(columnId, onChange);
+            };
+        }, [keyboardResizing]);
         return tslib_1.__assign(tslib_1.__assign({}, tableState), { tableRef: measureElementRef, 
             // eslint-disable-next-line @typescript-eslint/naming-convention
             columnSizing_unstable: {
@@ -50,6 +60,7 @@ define(["require", "exports", "tslib", "react", "./useTableColumnResizeState", "
                     var col = columnResizeState.getColumnById(columnId);
                     return col ? { style: getColumnStyles(col) } : {};
                 },
+                enableKeyboardMode: enableKeyboardMode,
             } });
     }
 });

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

@@ -1 +1 @@
-{"version":3,"file":"useTableColumnSizing.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-table/src/hooks/useTableColumnSizing.tsx"],"names":[],"mappings":";;;;IAaa,QAAA,wBAAwB,GAA2B;QAC9D,eAAe,EAAE,cAAM,OAAA,EAAE,EAAF,CAAE;QACzB,cAAc,EAAE,cAAM,OAAA,cAAM,OAAA,IAAI,EAAJ,CAAI,EAAV,CAAU;QAChC,cAAc,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;QAC1B,uBAAuB,EAAE,cAAM,OAAA,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,EAA7B,CAA6B;QAC5D,iBAAiB,EAAE,cAAM,OAAA,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,EAA7B,CAA6B;KACvD,CAAC;IAEF,SAAgB,6BAA6B,CAAQ,MAAmC;QACtF,4EAA4E;QAC5E,sDAAsD;QACtD,OAAO,UAAC,UAAqC,IAAK,OAAA,yBAAyB,CAAC,UAAU,EAAE,MAAM,CAAC,EAA7C,CAA6C,CAAC;IAClG,CAAC;IAJD,sEAIC;IAED,SAAS,eAAe,CAAC,MAAwB;QAC/C,IAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAE3B,OAAO;YACL,gBAAgB;YAChB,KAAK,OAAA;YACL,0CAA0C;YAC1C,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,KAAK;SAChB,CAAC;IACJ,CAAC;IAED,SAAS,yBAAyB,CAChC,UAAqC,EACrC,MAAmC;QAE3B,IAAA,OAAO,GAAK,UAAU,QAAf,CAAgB;QAE/B,2BAA2B;QACrB,IAAA,KAA+B,qCAAiB,EAAE,EAAhD,KAAK,WAAA,EAAE,iBAAiB,uBAAwB,CAAC;QACzD,kEAAkE;QAClE,IAAM,iBAAiB,GAAG,qDAAyB,CAAC,OAAO,EAAE,KAAK,GAAG,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,oBAAoB,KAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;QAClH,yDAAyD;QACzD,IAAM,YAAY,GAAG,mEAAgC,CAAC,iBAAiB,CAAC,CAAC;QAEzE,6CACK,UAAU,KACb,QAAQ,EAAE,iBAAiB;YAC3B,gEAAgE;YAChE,qBAAqB,EAAE;gBACrB,cAAc,EAAE,YAAY,CAAC,cAAc;gBAC3C,cAAc,EAAE,UAAC,QAAuB,EAAE,CAAS;oBACjD,OAAA,iBAAiB,CAAC,cAAc,CAAC,SAAS,EAAE,EAAE,QAAQ,UAAA,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;gBAAnE,CAAmE;gBACrE,eAAe,EAAE,iBAAiB,CAAC,UAAU;gBAC7C,uBAAuB,EAAE,UAAC,QAAuB;oBAC/C,IAAM,GAAG,GAAG,iBAAiB,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;oBACtD,IAAM,KAAK,GAAG,CACZ,oBAAC,qCAAiB,IAChB,WAAW,EAAE,YAAY,CAAC,cAAc,CAAC,QAAQ,CAAC,EAClD,YAAY,EAAE,YAAY,CAAC,cAAc,CAAC,QAAQ,CAAC,GACnD,CACH,CAAC;oBACF,OAAO,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,GAAG,CAAC,EAAE,KAAK,OAAA,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC3D,CAAC;gBACD,iBAAiB,EAAE,UAAC,QAAuB;oBACzC,IAAM,GAAG,GAAG,iBAAiB,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;oBACtD,OAAO,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;gBACpD,CAAC;aACF,IACD;IACJ,CAAC","sourcesContent":["import * as React from 'react';\nimport {\n  TableColumnId,\n  ColumnWidthState,\n  TableColumnSizingState,\n  TableFeaturesState,\n  UseTableColumnSizingParams,\n} from './types';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useMeasureElement } from './useMeasureElement';\nimport { TableResizeHandle } from '../TableResizeHandle';\n\nexport const defaultColumnSizingState: TableColumnSizingState = {\n  getColumnWidths: () => [],\n  getOnMouseDown: () => () => null,\n  setColumnWidth: () => null,\n  getTableHeaderCellProps: () => ({ style: {}, columnId: '' }),\n  getTableCellProps: () => ({ style: {}, columnId: '' }),\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\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      getTableHeaderCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        const aside = (\n          <TableResizeHandle\n            onMouseDown={mouseHandler.getOnMouseDown(columnId)}\n            onTouchStart={mouseHandler.getOnMouseDown(columnId)}\n          />\n        );\n        return col ? { style: getColumnStyles(col), aside } : {};\n      },\n      getTableCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        return col ? { style: getColumnStyles(col) } : {};\n      },\n    },\n  };\n}\n"]}
+{"version":3,"file":"useTableColumnSizing.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-table/src/hooks/useTableColumnSizing.tsx"],"names":[],"mappings":"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","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';\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  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 keyboardResizing = 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        keyboardResizing.toggleInteractiveMode(columnId, onChange);\n      },\n    [keyboardResizing],\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      getTableHeaderCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n\n        const aside = (\n          <TableResizeHandle\n            onMouseDown={mouseHandler.getOnMouseDown(columnId)}\n            onTouchStart={mouseHandler.getOnMouseDown(columnId)}\n          />\n        );\n        return col ? { style: getColumnStyles(col), aside } : {};\n      },\n      getTableCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        return col ? { style: getColumnStyles(col) } : {};\n      },\n      enableKeyboardMode,\n    },\n  };\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../src/packages/react-components/react-table/src/components/DataGrid/DataGrid.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TableContextValues, TableProps, TableSlots, TableState } from '../Table/Table.types';\nimport type {\n  SortState,\n  TableFeaturesState,\n  UseTableSortOptions,\n  SelectionMode,\n  UseTableSelectionOptions,\n  OnSelectionChangeData,\n  TableColumnSizingOptions,\n  TableColumnId,\n} from '../../hooks';\nimport { TableRowProps } from '../TableRow/TableRow.types';\n\nexport type DataGridSlots = TableSlots;\n\nexport type DataGridFocusMode = 'none' | 'cell' | 'row_unstable';\n\nexport type DataGridContextValues = TableContextValues & {\n  dataGrid: DataGridContextValue;\n};\n\n// Use any here since we can't know the user types\n// The user is responsible for narrowing the type downstream\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type DataGridContextValue = TableFeaturesState<any> & {\n  /**\n   * How focus navigation will work in the datagrid\n   * @default cell\n   */\n  focusMode: DataGridFocusMode;\n\n  /**\n   * Lets child components know if rows selection is enabled\n   * @see selectionMode prop enables row selection on the component\n   */\n  selectableRows: boolean;\n\n  /**\n   * Enables subtle selection style\n   * @default false\n   */\n  subtleSelection: boolean;\n\n  /**\n   * Row appearance when selected\n   * @default brand\n   */\n  selectionAppearance: TableRowProps['appearance'];\n\n  /**\n   * Enables column resizing\n   */\n  resizableColumns?: boolean;\n};\n\n/**\n * DataGrid Props\n */\nexport type DataGridProps = TableProps &\n  Pick<DataGridContextValue, 'items' | 'columns' | 'getRowId'> &\n  Pick<Partial<DataGridContextValue>, 'focusMode' | 'subtleSelection' | 'selectionAppearance' | 'resizableColumns'> &\n  Pick<UseTableSortOptions, 'sortState' | 'defaultSortState'> &\n  Pick<UseTableSelectionOptions, 'defaultSelectedItems' | 'selectedItems'> & {\n    onSortChange?: (e: React.MouseEvent, sortState: SortState) => void;\n    onSelectionChange?: (e: React.MouseEvent | React.KeyboardEvent, data: OnSelectionChangeData) => void;\n    /**\n     * Enables row selection and sets the selection mode\n     * @default false\n     */\n    selectionMode?: SelectionMode;\n    /**\n     * Options for column resizing\n     */\n    columnSizingOptions?: TableColumnSizingOptions;\n    /**\n     * A callback triggered when a column is resized.\n     */\n    onColumnResize?: (e: TouchEvent | MouseEvent | undefined, data: { columnId: TableColumnId; width: number }) => void;\n  };\n\n/**\n * State used in rendering DataGrid\n */\nexport type DataGridState = TableState & { tableState: TableFeaturesState<unknown> } & Pick<\n    DataGridContextValue,\n    'focusMode' | 'selectableRows' | 'subtleSelection' | 'selectionAppearance' | 'getRowId' | 'resizableColumns'\n  >;\n"],"mappings":""}
+{"version":3,"names":[],"sources":["../src/packages/react-components/react-table/src/components/DataGrid/DataGrid.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TableContextValues, TableProps, TableSlots, TableState } from '../Table/Table.types';\nimport type {\n  SortState,\n  TableFeaturesState,\n  UseTableSortOptions,\n  SelectionMode,\n  UseTableSelectionOptions,\n  OnSelectionChangeData,\n  TableColumnSizingOptions,\n  TableColumnId,\n} from '../../hooks';\nimport { TableRowProps } from '../TableRow/TableRow.types';\n\nexport type DataGridSlots = TableSlots;\n\nexport type DataGridFocusMode = 'none' | 'cell' | 'row_unstable';\n\nexport type DataGridContextValues = TableContextValues & {\n  dataGrid: DataGridContextValue;\n};\n\n// Use any here since we can't know the user types\n// The user is responsible for narrowing the type downstream\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type DataGridContextValue = TableFeaturesState<any> & {\n  /**\n   * How focus navigation will work in the datagrid\n   * @default cell\n   */\n  focusMode: DataGridFocusMode;\n\n  /**\n   * Lets child components know if rows selection is enabled\n   * @see selectionMode prop enables row selection on the component\n   */\n  selectableRows: boolean;\n\n  /**\n   * Enables subtle selection style\n   * @default false\n   */\n  subtleSelection: boolean;\n\n  /**\n   * Row appearance when selected\n   * @default brand\n   */\n  selectionAppearance: TableRowProps['appearance'];\n\n  /**\n   * Enables column resizing\n   */\n  resizableColumns?: boolean;\n};\n\n/**\n * DataGrid Props\n */\nexport type DataGridProps = TableProps &\n  Pick<DataGridContextValue, 'items' | 'columns' | 'getRowId'> &\n  Pick<Partial<DataGridContextValue>, 'focusMode' | 'subtleSelection' | 'selectionAppearance' | 'resizableColumns'> &\n  Pick<UseTableSortOptions, 'sortState' | 'defaultSortState'> &\n  Pick<UseTableSelectionOptions, 'defaultSelectedItems' | 'selectedItems'> & {\n    onSortChange?: (e: React.MouseEvent, sortState: SortState) => void;\n    onSelectionChange?: (e: React.MouseEvent | React.KeyboardEvent, data: OnSelectionChangeData) => void;\n    /**\n     * Enables row selection and sets the selection mode\n     * @default false\n     */\n    selectionMode?: SelectionMode;\n    /**\n     * Options for column resizing\n     */\n    columnSizingOptions?: TableColumnSizingOptions;\n    /**\n     * A callback triggered when a column is resized.\n     */\n    onColumnResize?: (\n      e: KeyboardEvent | TouchEvent | MouseEvent | undefined,\n      data: { columnId: TableColumnId; width: number },\n    ) => void;\n  };\n\n/**\n * State used in rendering DataGrid\n */\nexport type DataGridState = TableState & { tableState: TableFeaturesState<unknown> } & Pick<\n    DataGridContextValue,\n    'focusMode' | 'selectableRows' | 'subtleSelection' | 'selectionAppearance' | 'getRowId' | 'resizableColumns'\n  >;\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"names":["React","require","react_tabster_1","useTable_1","hooks_1","TableSelectionCell_1","react_utilities_1","keyboard_keys_1","useDataGrid_unstable","props","ref","items","columns","focusMode","selectionMode","onSortChange","onSelectionChange","defaultSortState","sortState","selectedItems","defaultSelectedItems","subtleSelection","selectionAppearance","getRowId","resizableColumns","columnSizingOptions","onColumnResize","navigable","keyboardNavAttr","useArrowNavigationGroup","axis","tableState","useTableFeatures","useTableSort","useTableSelection","useTableColumnSizing_unstable","containerWidthOffset","CELL_WIDTH","innerRef","useRef","findFirstFocusable","findLastFocusable","useFocusFinders","onKeyDown","useEventCallback","e","_a","call","current","ctrlKey","defaultPrevented","key","Home","firstRow","querySelector","_b","focus","End","rows","querySelectorAll","length","lastRow","item","_c","baseTableState","useTable_unstable","role","as","noNativeElements","useMergedRefs","tableRef","selectableRows","exports"],"sources":["../src/packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport type { DataGridProps, DataGridState } from './DataGrid.types';\nimport { useTable_unstable } from '../Table/useTable';\nimport { useTableFeatures, useTableSort, useTableSelection, useTableColumnSizing_unstable } from '../../hooks';\nimport { CELL_WIDTH } from '../TableSelectionCell';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { End, Home } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render DataGrid.\n *\n * The returned state can be modified with hooks such as useDataGridStyles_unstable,\n * before being passed to renderDataGrid_unstable.\n *\n * @param props - props from this instance of DataGrid\n * @param ref - reference to root HTMLElement of DataGrid\n */\nexport const useDataGrid_unstable = (props: DataGridProps, ref: React.Ref<HTMLElement>): DataGridState => {\n  const {\n    items,\n    columns,\n    focusMode = 'cell',\n    selectionMode,\n    onSortChange,\n    onSelectionChange,\n    defaultSortState,\n    sortState,\n    selectedItems,\n    defaultSelectedItems,\n    subtleSelection = false,\n    selectionAppearance = 'brand',\n    getRowId,\n    resizableColumns,\n    columnSizingOptions,\n    onColumnResize,\n  } = props;\n\n  const navigable = focusMode !== 'none';\n  const keyboardNavAttr = useArrowNavigationGroup({ axis: 'grid' });\n\n  const tableState = useTableFeatures({ items, columns, getRowId }, [\n    useTableSort({\n      defaultSortState,\n      sortState,\n      onSortChange,\n    }),\n    useTableSelection({\n      defaultSelectedItems,\n      selectedItems,\n      onSelectionChange,\n      selectionMode: selectionMode ?? 'multiselect',\n    }),\n    useTableColumnSizing_unstable({\n      onColumnResize,\n      columnSizingOptions,\n      // The selection cell is not part of the columns, therefore its width needs to be subtracted\n      // from the container to make sure the columns don't overflow the table.\n      containerWidthOffset: selectionMode ? -CELL_WIDTH : 0,\n    }),\n  ]);\n\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const { findFirstFocusable, findLastFocusable } = useFocusFinders();\n  const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLTableElement>) => {\n    props.onKeyDown?.(e);\n    if (!innerRef.current || !e.ctrlKey || e.defaultPrevented) {\n      return;\n    }\n\n    if (e.key === Home) {\n      const firstRow = innerRef.current.querySelector('[role=\"row\"]') as HTMLElement | null;\n      if (firstRow) {\n        findFirstFocusable(firstRow)?.focus();\n      }\n    }\n\n    if (e.key === End) {\n      const rows = innerRef.current.querySelectorAll('[role=\"row\"]');\n      if (rows.length) {\n        const lastRow = rows.item(rows.length - 1);\n        findLastFocusable(lastRow as HTMLElement)?.focus();\n      }\n    }\n  });\n\n  const baseTableState = useTable_unstable(\n    {\n      role: 'grid',\n      as: 'div',\n      noNativeElements: true,\n      ...(navigable && keyboardNavAttr),\n      ...props,\n      onKeyDown,\n    },\n    useMergedRefs(ref, tableState.tableRef, innerRef),\n  );\n\n  return {\n    ...baseTableState,\n    focusMode,\n    tableState,\n    selectableRows: !!selectionMode,\n    subtleSelection,\n    selectionAppearance,\n    resizableColumns,\n  };\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","require","react_tabster_1","useTable_1","hooks_1","TableSelectionCell_1","react_utilities_1","keyboard_keys_1","useDataGrid_unstable","props","ref","items","columns","focusMode","selectionMode","onSortChange","onSelectionChange","defaultSortState","sortState","selectedItems","defaultSelectedItems","subtleSelection","selectionAppearance","getRowId","resizableColumns","columnSizingOptions","onColumnResize","navigable","keyboardNavAttr","useArrowNavigationGroup","axis","tableState","useTableFeatures","useTableSort","useTableSelection","useTableColumnSizing_unstable","containerWidthOffset","CELL_WIDTH","innerRef","useRef","findFirstFocusable","findLastFocusable","useFocusFinders","onKeyDown","useEventCallback","e","_a","call","current","ctrlKey","defaultPrevented","key","Home","firstRow","querySelector","_b","focus","End","rows","querySelectorAll","length","lastRow","item","_c","baseTableState","useTable_unstable","role","as","noNativeElements","useMergedRefs","tableRef","selectableRows","exports"],"sources":["../src/packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport type { DataGridProps, DataGridState } from './DataGrid.types';\nimport { useTable_unstable } from '../Table/useTable';\nimport { useTableFeatures, useTableSort, useTableSelection, useTableColumnSizing_unstable } from '../../hooks';\nimport { CELL_WIDTH } from '../TableSelectionCell';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { End, Home } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render DataGrid.\n *\n * The returned state can be modified with hooks such as useDataGridStyles_unstable,\n * before being passed to renderDataGrid_unstable.\n *\n * @param props - props from this instance of DataGrid\n * @param ref - reference to root HTMLElement of DataGrid\n */\nexport const useDataGrid_unstable = (props: DataGridProps, ref: React.Ref<HTMLElement>): DataGridState => {\n  const {\n    items,\n    columns,\n    focusMode = 'cell',\n    selectionMode,\n    onSortChange,\n    onSelectionChange,\n    defaultSortState,\n    sortState,\n    selectedItems,\n    defaultSelectedItems,\n    subtleSelection = false,\n    selectionAppearance = 'brand',\n    getRowId,\n    resizableColumns,\n    columnSizingOptions,\n    onColumnResize,\n  } = props;\n\n  const navigable = focusMode !== 'none';\n  const keyboardNavAttr = useArrowNavigationGroup({\n    axis: 'grid',\n  });\n\n  const tableState = useTableFeatures({ items, columns, getRowId }, [\n    useTableSort({\n      defaultSortState,\n      sortState,\n      onSortChange,\n    }),\n    useTableSelection({\n      defaultSelectedItems,\n      selectedItems,\n      onSelectionChange,\n      selectionMode: selectionMode ?? 'multiselect',\n    }),\n    useTableColumnSizing_unstable({\n      onColumnResize,\n      columnSizingOptions,\n      // The selection cell is not part of the columns, therefore its width needs to be subtracted\n      // from the container to make sure the columns don't overflow the table.\n      containerWidthOffset: selectionMode ? -CELL_WIDTH : 0,\n    }),\n  ]);\n\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const { findFirstFocusable, findLastFocusable } = useFocusFinders();\n  const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLTableElement>) => {\n    props.onKeyDown?.(e);\n    if (!innerRef.current || !e.ctrlKey || e.defaultPrevented) {\n      return;\n    }\n\n    if (e.key === Home) {\n      const firstRow = innerRef.current.querySelector('[role=\"row\"]') as HTMLElement | null;\n      if (firstRow) {\n        findFirstFocusable(firstRow)?.focus();\n      }\n    }\n\n    if (e.key === End) {\n      const rows = innerRef.current.querySelectorAll('[role=\"row\"]');\n      if (rows.length) {\n        const lastRow = rows.item(rows.length - 1);\n        findLastFocusable(lastRow as HTMLElement)?.focus();\n      }\n    }\n  });\n\n  const baseTableState = useTable_unstable(\n    {\n      role: 'grid',\n      as: 'div',\n      noNativeElements: true,\n      ...(navigable && keyboardNavAttr),\n      ...props,\n      onKeyDown,\n    },\n    useMergedRefs(ref, tableState.tableRef, innerRef),\n  );\n\n  return {\n    ...baseTableState,\n    focusMode,\n    tableState,\n    selectableRows: !!selectionMode,\n    subtleSelection,\n    selectionAppearance,\n    resizableColumns,\n  };\n};\n"],"mappings":"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"}

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

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

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

@@ -22,7 +22,7 @@ const renderDataGridRow_unstable = state => {
   }), state.columnDefs.map(columnDef => React.createElement(columnIdContext_1.ColumnIdContextProvider, {
     value: columnDef.columnId,
     key: columnDef.columnId
-  }, state.renderCell(columnDef))));
+  }, state.renderCell(columnDef, state.dataGridContextValue))));
 };
 exports.renderDataGridRow_unstable = renderDataGridRow_unstable;
 //# sourceMappingURL=renderDataGridRow.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","require","react_utilities_1","columnIdContext_1","renderDataGridRow_unstable","state","slots","slotProps","getSlots","createElement","root","selectionCell","columnDefs","map","columnDef","ColumnIdContextProvider","value","columnId","key","renderCell","exports"],"sources":["../src/packages/react-components/react-table/src/components/DataGridRow/renderDataGridRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DataGridRowState, DataGridRowSlots } from './DataGridRow.types';\nimport { ColumnIdContextProvider } from '../../contexts/columnIdContext';\n\n/**\n * Render the final JSX of DataGridRow\n */\nexport const renderDataGridRow_unstable = (state: DataGridRowState) => {\n  const { slots, slotProps } = getSlots<DataGridRowSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.selectionCell && <slots.selectionCell {...slotProps.selectionCell} />}\n      {state.columnDefs.map(columnDef => (\n        <ColumnIdContextProvider value={columnDef.columnId} key={columnDef.columnId}>\n          {state.renderCell(columnDef)}\n        </ColumnIdContextProvider>\n      ))}\n    </slots.root>\n  );\n};\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AAEA,MAAAE,iBAAA,gBAAAF,OAAA;AAEA;;;AAGO,MAAMG,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGL,iBAAA,CAAAM,QAAQ,CAAmBH,KAAK,CAAC;EAE9D,OACEL,KAAA,CAAAS,aAAA,CAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BJ,KAAK,CAACK,aAAa,IAAIX,KAAA,CAAAS,aAAA,CAACH,KAAK,CAACK,aAAa;IAAA,GAAKJ,SAAS,CAACI;EAAa,EAAI,EAC3EN,KAAK,CAACO,UAAU,CAACC,GAAG,CAACC,SAAS,IAC7Bd,KAAA,CAAAS,aAAA,CAACN,iBAAA,CAAAY,uBAAuB;IAACC,KAAK,EAAEF,SAAS,CAACG,QAAQ;IAAEC,GAAG,EAAEJ,SAAS,CAACG;EAAQ,GACxEZ,KAAK,CAACc,UAAU,CAACL,SAAS,CAAC,CAE/B,CAAC,CACS;AAEjB,CAAC;AAbYM,OAAA,CAAAhB,0BAA0B,GAAAA,0BAAA"}
+{"version":3,"names":["React","require","react_utilities_1","columnIdContext_1","renderDataGridRow_unstable","state","slots","slotProps","getSlots","createElement","root","selectionCell","columnDefs","map","columnDef","ColumnIdContextProvider","value","columnId","key","renderCell","dataGridContextValue","exports"],"sources":["../src/packages/react-components/react-table/src/components/DataGridRow/renderDataGridRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DataGridRowState, DataGridRowSlots } from './DataGridRow.types';\nimport { ColumnIdContextProvider } from '../../contexts/columnIdContext';\n\n/**\n * Render the final JSX of DataGridRow\n */\nexport const renderDataGridRow_unstable = (state: DataGridRowState) => {\n  const { slots, slotProps } = getSlots<DataGridRowSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.selectionCell && <slots.selectionCell {...slotProps.selectionCell} />}\n      {state.columnDefs.map(columnDef => (\n        <ColumnIdContextProvider value={columnDef.columnId} key={columnDef.columnId}>\n          {state.renderCell(columnDef, state.dataGridContextValue)}\n        </ColumnIdContextProvider>\n      ))}\n    </slots.root>\n  );\n};\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AAEA,MAAAE,iBAAA,gBAAAF,OAAA;AAEA;;;AAGO,MAAMG,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGL,iBAAA,CAAAM,QAAQ,CAAmBH,KAAK,CAAC;EAE9D,OACEL,KAAA,CAAAS,aAAA,CAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BJ,KAAK,CAACK,aAAa,IAAIX,KAAA,CAAAS,aAAA,CAACH,KAAK,CAACK,aAAa;IAAA,GAAKJ,SAAS,CAACI;EAAa,EAAI,EAC3EN,KAAK,CAACO,UAAU,CAACC,GAAG,CAACC,SAAS,IAC7Bd,KAAA,CAAAS,aAAA,CAACN,iBAAA,CAAAY,uBAAuB;IAACC,KAAK,EAAEF,SAAS,CAACG,QAAQ;IAAEC,GAAG,EAAEJ,SAAS,CAACG;EAAQ,GACxEZ,KAAK,CAACc,UAAU,CAACL,SAAS,EAAET,KAAK,CAACe,oBAAoB,CAAC,CAE3D,CAAC,CACS;AAEjB,CAAC;AAbYC,OAAA,CAAAjB,0BAA0B,GAAAA,0BAAA"}

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

@@ -34,6 +34,7 @@ const useDataGridRow_unstable = (props, ref) => {
     return 'none';
   });
   const toggleRow = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.selection.toggleRow);
+  const dataGridContextValue = dataGridContext_1.useDataGridContext_unstable(ctx => ctx);
   const onClick = react_utilities_1.useEventCallback(e => {
     var _a;
     if (selectable && !isHeader) {
@@ -70,7 +71,8 @@ const useDataGridRow_unstable = (props, ref) => {
       required: selectable
     }),
     renderCell: props.children,
-    columnDefs
+    columnDefs,
+    dataGridContextValue
   };
 };
 exports.useDataGridRow_unstable = useDataGridRow_unstable;