@fluentui/react-table 9.0.0-rc.4 → 9.0.0

package/CHANGELOG.json

@@ -2,7 +2,123 @@
   "name": "@fluentui/react-table",
   "entries": [
     {
-      "date": "Tue, 31 Jan 2023 19:50:42 GMT",
+      "date": "Fri, 10 Feb 2023 08:46:46 GMT",
+      "tag": "@fluentui/react-table_v9.0.0",
+      "version": "9.0.0",
+      "comments": {
+        "patch": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-table",
+            "commit": "6a925547d8051b7d9a1855d6f20b7920d946fcdf",
+            "comment": "feat: Release 9.0.0"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-aria to v9.3.8",
+            "commit": "cc62f050f8231e8f21a2cf7dddf33003e0ba3931"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-avatar to v9.3.3",
+            "commit": "cc62f050f8231e8f21a2cf7dddf33003e0ba3931"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-checkbox to v9.0.26",
+            "commit": "cc62f050f8231e8f21a2cf7dddf33003e0ba3931"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.8",
+            "commit": "cc62f050f8231e8f21a2cf7dddf33003e0ba3931"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-radio to v9.0.24",
+            "commit": "cc62f050f8231e8f21a2cf7dddf33003e0ba3931"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-tabster to v9.5.1",
+            "commit": "cc62f050f8231e8f21a2cf7dddf33003e0ba3931"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-utilities to v9.5.2",
+            "commit": "cc62f050f8231e8f21a2cf7dddf33003e0ba3931"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "jirivyhnalek@microsoft.com",
+            "package": "@fluentui/react-table",
+            "commit": "fbe4207b3b40b147e936ecaf1e8fad9a8b357db9",
+            "comment": "feat: TableCellLayout component now supports truncate prop"
+          },
+          {
+            "author": "jirivyhnalek@microsoft.com",
+            "package": "@fluentui/react-table",
+            "commit": "c5149e270e02a09eae9b7dfbba4da3aa4ac77a52",
+            "comment": "feat: DataGrid - add support for resizable columns"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 07 Feb 2023 14:13:07 GMT",
+      "tag": "@fluentui/react-table_v9.0.0-rc.5",
+      "version": "9.0.0-rc.5",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-table",
+            "commit": "0b35790d67cad33bd1d52d2418fcca6ef8b4a710",
+            "comment": "feat: exports `useDataGridContextValues_unstable`"
+          },
+          {
+            "author": "jirivyhnalek@microsoft.com",
+            "package": "@fluentui/react-table",
+            "commit": "c625afa508c0dead93ea2d3cb698b41dc67ec187",
+            "comment": "Add support for column resizing"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-avatar to v9.3.2",
+            "commit": "8a1405562b3328c408f15e3bf511d3eb6a0c0e66"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-checkbox to v9.0.25",
+            "commit": "8a1405562b3328c408f15e3bf511d3eb6a0c0e66"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-radio to v9.0.23",
+            "commit": "8a1405562b3328c408f15e3bf511d3eb6a0c0e66"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-tabster to v9.5.0",
+            "commit": "8a1405562b3328c408f15e3bf511d3eb6a0c0e66"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 31 Jan 2023 19:53:58 GMT",
       "tag": "@fluentui/react-table_v9.0.0-rc.4",
       "version": "9.0.0-rc.4",
       "comments": {
@@ -11,43 +127,43 @@
             "author": "beachball",
             "package": "@fluentui/react-table",
             "comment": "Bump @fluentui/react-aria to v9.3.7",
-            "commit": "22477ef4202cd24add6ebf823196b5888c9d8083"
+            "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-table",
             "comment": "Bump @fluentui/react-avatar to v9.3.1",
-            "commit": "22477ef4202cd24add6ebf823196b5888c9d8083"
+            "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-table",
             "comment": "Bump @fluentui/react-checkbox to v9.0.24",
-            "commit": "22477ef4202cd24add6ebf823196b5888c9d8083"
+            "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-table",
             "comment": "Bump @fluentui/react-context-selector to v9.1.7",
-            "commit": "22477ef4202cd24add6ebf823196b5888c9d8083"
+            "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-table",
             "comment": "Bump @fluentui/react-radio to v9.0.22",
-            "commit": "22477ef4202cd24add6ebf823196b5888c9d8083"
+            "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-table",
             "comment": "Bump @fluentui/react-tabster to v9.4.2",
-            "commit": "22477ef4202cd24add6ebf823196b5888c9d8083"
+            "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-table",
             "comment": "Bump @fluentui/react-utilities to v9.5.1",
-            "commit": "22477ef4202cd24add6ebf823196b5888c9d8083"
+            "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,23 +1,58 @@
 # Change Log - @fluentui/react-table
 
-This log was last generated on Tue, 31 Jan 2023 19:50:42 GMT and should not be manually modified.
+This log was last generated on Fri, 10 Feb 2023 08:46:46 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.0)
+
+Fri, 10 Feb 2023 08:46:46 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.0.0-rc.5..@fluentui/react-table_v9.0.0)
+
+### Patches
+
+- feat: Release 9.0.0 ([PR #26736](https://github.com/microsoft/fluentui/pull/26736) by lingfangao@hotmail.com)
+- Bump @fluentui/react-aria to v9.3.8 ([commit](https://github.com/microsoft/fluentui/commit/cc62f050f8231e8f21a2cf7dddf33003e0ba3931) by beachball)
+- Bump @fluentui/react-avatar to v9.3.3 ([commit](https://github.com/microsoft/fluentui/commit/cc62f050f8231e8f21a2cf7dddf33003e0ba3931) by beachball)
+- Bump @fluentui/react-checkbox to v9.0.26 ([commit](https://github.com/microsoft/fluentui/commit/cc62f050f8231e8f21a2cf7dddf33003e0ba3931) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.8 ([commit](https://github.com/microsoft/fluentui/commit/cc62f050f8231e8f21a2cf7dddf33003e0ba3931) by beachball)
+- Bump @fluentui/react-radio to v9.0.24 ([commit](https://github.com/microsoft/fluentui/commit/cc62f050f8231e8f21a2cf7dddf33003e0ba3931) by beachball)
+- Bump @fluentui/react-tabster to v9.5.1 ([commit](https://github.com/microsoft/fluentui/commit/cc62f050f8231e8f21a2cf7dddf33003e0ba3931) by beachball)
+- Bump @fluentui/react-utilities to v9.5.2 ([commit](https://github.com/microsoft/fluentui/commit/cc62f050f8231e8f21a2cf7dddf33003e0ba3931) by beachball)
+
+### Changes
+
+- feat: TableCellLayout component now supports truncate prop ([PR #26738](https://github.com/microsoft/fluentui/pull/26738) by jirivyhnalek@microsoft.com)
+- feat: DataGrid - add support for resizable columns ([PR #26690](https://github.com/microsoft/fluentui/pull/26690) by jirivyhnalek@microsoft.com)
+
+## [9.0.0-rc.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.0-rc.5)
+
+Tue, 07 Feb 2023 14:13:07 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.0.0-rc.4..@fluentui/react-table_v9.0.0-rc.5)
+
+### Changes
+
+- feat: exports `useDataGridContextValues_unstable` ([PR #26627](https://github.com/microsoft/fluentui/pull/26627) by lingfangao@hotmail.com)
+- Add support for column resizing ([PR #26477](https://github.com/microsoft/fluentui/pull/26477) by jirivyhnalek@microsoft.com)
+- Bump @fluentui/react-avatar to v9.3.2 ([PR #26732](https://github.com/microsoft/fluentui/pull/26732) by beachball)
+- Bump @fluentui/react-checkbox to v9.0.25 ([PR #26732](https://github.com/microsoft/fluentui/pull/26732) by beachball)
+- Bump @fluentui/react-radio to v9.0.23 ([PR #26732](https://github.com/microsoft/fluentui/pull/26732) by beachball)
+- Bump @fluentui/react-tabster to v9.5.0 ([PR #26732](https://github.com/microsoft/fluentui/pull/26732) by beachball)
+
 ## [9.0.0-rc.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.0-rc.4)
 
-Tue, 31 Jan 2023 19:50:42 GMT 
+Tue, 31 Jan 2023 19:53:58 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.0.0-rc.3..@fluentui/react-table_v9.0.0-rc.4)
 
 ### Changes
 
-- Bump @fluentui/react-aria to v9.3.7 ([PR #26491](https://github.com/microsoft/fluentui/pull/26491) by beachball)
-- Bump @fluentui/react-avatar to v9.3.1 ([PR #26491](https://github.com/microsoft/fluentui/pull/26491) by beachball)
-- Bump @fluentui/react-checkbox to v9.0.24 ([PR #26491](https://github.com/microsoft/fluentui/pull/26491) by beachball)
-- Bump @fluentui/react-context-selector to v9.1.7 ([PR #26491](https://github.com/microsoft/fluentui/pull/26491) by beachball)
-- Bump @fluentui/react-radio to v9.0.22 ([PR #26491](https://github.com/microsoft/fluentui/pull/26491) by beachball)
-- Bump @fluentui/react-tabster to v9.4.2 ([PR #26491](https://github.com/microsoft/fluentui/pull/26491) by beachball)
-- Bump @fluentui/react-utilities to v9.5.1 ([PR #26491](https://github.com/microsoft/fluentui/pull/26491) by beachball)
+- Bump @fluentui/react-aria to v9.3.7 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
+- Bump @fluentui/react-avatar to v9.3.1 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
+- Bump @fluentui/react-checkbox to v9.0.24 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.7 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
+- Bump @fluentui/react-radio to v9.0.22 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
+- Bump @fluentui/react-tabster to v9.4.2 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
+- Bump @fluentui/react-utilities to v9.5.1 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
 
 ## [9.0.0-rc.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.0-rc.3)
 

package/dist/index.d.ts

@@ -15,6 +15,18 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 
 export declare type CellRenderFunction<TItem = unknown> = (column: TableColumnDefinition<TItem>) => React_2.ReactNode;
 
+declare type ColumnSizingTableCellProps = Pick<TableHeaderCellProps, 'style'>;
+
+declare type ColumnSizingTableHeaderCellProps = Pick<TableHeaderCellProps, 'style' | 'aside'>;
+
+declare interface ColumnWidthState {
+    columnId: TableColumnId;
+    width: number;
+    minWidth: number;
+    idealWidth: number;
+    padding: number;
+}
+
 /**
  * Helper function to create column definition with defaults
  * @param options - column definition options
@@ -105,6 +117,10 @@ export declare type DataGridContextValue = TableFeaturesState<any> & {
      * @default brand
      */
     selectionAppearance: TableRowProps['appearance'];
+    /**
+     * Enables column resizing
+     */
+    resizableColumns?: boolean;
 };
 
 export declare type DataGridContextValues = TableContextValues & {
@@ -154,7 +170,7 @@ export declare type DataGridHeaderState = TableHeaderState;
 /**
  * DataGrid Props
  */
-export declare type DataGridProps = TableProps & Pick<DataGridContextValue, 'items' | 'columns' | 'getRowId'> & Pick<Partial<DataGridContextValue>, 'focusMode' | 'subtleSelection' | 'selectionAppearance'> & Pick<UseTableSortOptions, 'sortState' | 'defaultSortState'> & Pick<UseTableSelectionOptions, 'defaultSelectedItems' | 'selectedItems'> & {
+export declare type DataGridProps = TableProps & Pick<DataGridContextValue, 'items' | 'columns' | 'getRowId'> & Pick<Partial<DataGridContextValue>, 'focusMode' | 'subtleSelection' | 'selectionAppearance' | 'resizableColumns'> & Pick<UseTableSortOptions, 'sortState' | 'defaultSortState'> & Pick<UseTableSelectionOptions, 'defaultSelectedItems' | 'selectedItems'> & {
     onSortChange?: (e: React_2.MouseEvent, sortState: SortState) => void;
     onSelectionChange?: (e: React_2.MouseEvent | React_2.KeyboardEvent, data: OnSelectionChangeData) => void;
     /**
@@ -162,6 +178,17 @@ export declare type DataGridProps = TableProps & Pick<DataGridContextValue, 'ite
      * @default false
      */
     selectionMode?: SelectionMode_2;
+    /**
+     * Options for column resizing
+     */
+    columnSizingOptions?: TableColumnSizingOptions;
+    /**
+     * A callback triggered when a column is resized.
+     */
+    onColumnResize?: (event: MouseEvent | undefined, data: {
+        columnId: TableColumnId;
+        width: number;
+    }) => void;
 };
 
 /**
@@ -220,7 +247,7 @@ export declare type DataGridSlots = TableSlots;
  */
 export declare type DataGridState = TableState & {
     tableState: TableFeaturesState<unknown>;
-} & Pick<DataGridContextValue, 'focusMode' | 'selectableRows' | 'subtleSelection' | 'selectionAppearance' | 'getRowId'>;
+} & Pick<DataGridContextValue, 'focusMode' | 'selectableRows' | 'subtleSelection' | 'selectionAppearance' | 'getRowId' | 'resizableColumns'>;
 
 declare interface OnSelectionChangeData {
     selectedItems: Set<TableRowId>;
@@ -296,6 +323,11 @@ export declare const renderTableHeader_unstable: (state: TableHeaderState) => JS
  */
 export declare const renderTableHeaderCell_unstable: (state: TableHeaderCellState) => JSX.Element;
 
+/**
+ * Render the final JSX of TableResizeHandle
+ */
+export declare const renderTableResizeHandle_unstable: (state: TableResizeHandleState) => JSX.Element;
+
 /**
  * Render the final JSX of TableRow
  */
@@ -405,6 +437,10 @@ export declare type TableCellLayoutProps = ComponentProps<Partial<TableCellLayou
      * @default undefined
      */
     appearance?: 'primary';
+    /**
+     * Renders content with overflow: hidden and text-overflow: ellipsis
+     */
+    truncate?: boolean;
 };
 
 export declare type TableCellLayoutSlots = {
@@ -430,7 +466,7 @@ export declare type TableCellLayoutSlots = {
 /**
  * State used in rendering TableCellLayout
  */
-export declare type TableCellLayoutState = ComponentState<TableCellLayoutSlots> & Pick<TableCellLayoutProps, 'appearance'> & {
+export declare type TableCellLayoutState = ComponentState<TableCellLayoutSlots> & Pick<TableCellLayoutProps, 'appearance' | 'truncate'> & {
     avatarSize: AvatarSize | undefined;
 } & Pick<TableContextValue, 'size'>;
 
@@ -461,6 +497,18 @@ export declare interface TableColumnDefinition<TItem> {
 
 export declare type TableColumnId = string | number;
 
+export declare type TableColumnSizingOptions = Record<TableColumnId, Partial<Pick<ColumnWidthState, 'minWidth' | 'idealWidth' | 'padding'>> & {
+    defaultWidth?: number;
+}>;
+
+declare interface TableColumnSizingState {
+    getOnMouseDown: (columnId: TableColumnId) => (e: React_2.MouseEvent<HTMLElement>) => void;
+    setColumnWidth: (columnId: TableColumnId, newSize: number) => void;
+    getColumnWidths: () => ColumnWidthState[];
+    getTableHeaderCellProps: (columnId: TableColumnId) => ColumnSizingTableHeaderCellProps;
+    getTableCellProps: (columnId: TableColumnId) => ColumnSizingTableCellProps;
+}
+
 export declare const TableContextProvider: React_2.Provider<TableContextValue | undefined>;
 
 export declare type TableContextValue = {
@@ -506,6 +554,15 @@ export declare interface TableFeaturesState<TItem> extends Pick<UseTableFeatures
      * Table columns
      */
     columns: TableColumnDefinition<TItem>[];
+    /**
+     * State and actions to manage column resizing
+     */
+    columnSizing_unstable: TableColumnSizingState;
+    /**
+     * A React.Ref object to be set as a ref for the table.
+     * Used with column resizing.
+     */
+    tableRef: React_2.Ref<HTMLDivElement>;
 }
 
 /**
@@ -539,6 +596,10 @@ export declare type TableHeaderCellSlots = {
      * Button handles correct narration and interactions for sorting;
      */
     button: NonNullable<Slot<ARIAButtonSlotProps>>;
+    /**
+     * aside content for anything that should be after main content of the table header cell
+     */
+    aside: Slot<'span'>;
 };
 
 /**
@@ -569,6 +630,27 @@ export declare type TableHeaderState = ComponentState<TableHeaderSlots> & Pick<T
  */
 export declare type TableProps = ComponentProps<TableSlots> & Partial<TableContextValue>;
 
+/**
+ * TableResizeHandle component - TODO: add more docs
+ */
+export declare const TableResizeHandle: ForwardRefComponent<TableResizeHandleProps>;
+
+export declare const tableResizeHandleClassNames: SlotClassNames<TableResizeHandleSlots>;
+
+/**
+ * TableResizeHandle Props
+ */
+export declare type TableResizeHandleProps = ComponentProps<TableResizeHandleSlots> & {};
+
+export declare type TableResizeHandleSlots = {
+    root: Slot<'div'>;
+};
+
+/**
+ * State used in rendering TableResizeHandle
+ */
+export declare type TableResizeHandleState = ComponentState<TableResizeHandleSlots>;
+
 /**
  * TableRow component
  */
@@ -784,6 +866,8 @@ export declare const useDataGridCell_unstable: (props: DataGridCellProps, ref: R
  */
 export declare const useDataGridCellStyles_unstable: (state: DataGridCellState) => DataGridCellState;
 
+export declare function useDataGridContextValues_unstable(state: DataGridState): DataGridContextValues;
+
 /**
  * Create the state required to render DataGridHeader.
  *
@@ -928,6 +1012,17 @@ export declare const useTableCellLayoutStyles_unstable: (state: TableCellLayoutS
  */
 export declare const useTableCellStyles_unstable: (state: TableCellState) => TableCellState;
 
+export declare function useTableColumnSizing_unstable<TItem>(params?: UseTableColumnSizingParams): (tableState: TableFeaturesState<TItem>) => TableFeaturesState<TItem>;
+
+declare type UseTableColumnSizingParams = {
+    columnSizingOptions?: TableColumnSizingOptions;
+    onColumnResize?: (e: MouseEvent | undefined, data: {
+        columnId: TableColumnId;
+        width: number;
+    }) => void;
+    containerWidthOffset?: number;
+};
+
 export declare const useTableContext: () => TableContextValue;
 
 export declare function useTableFeatures<TItem>(options: UseTableFeaturesOptions<TItem>, plugins?: TableFeaturePlugin[]): TableFeaturesState<TItem>;
@@ -970,6 +1065,22 @@ export declare const useTableHeaderCellStyles_unstable: (state: TableHeaderCellS
  */
 export declare const useTableHeaderStyles_unstable: (state: TableHeaderState) => TableHeaderState;
 
+/**
+ * Create the state required to render TableResizeHandle.
+ *
+ * The returned state can be modified with hooks such as useTableResizeHandleStyles_unstable,
+ * before being passed to renderTableResizeHandle_unstable.
+ *
+ * @param props - props from this instance of TableResizeHandle
+ * @param ref - reference to root HTMLElement of TableResizeHandle
+ */
+export declare const useTableResizeHandle_unstable: (props: TableResizeHandleProps, ref: React_2.Ref<HTMLElement>) => TableResizeHandleState;
+
+/**
+ * Apply styling to the TableResizeHandle slots based on the state
+ */
+export declare const useTableResizeHandleStyles_unstable: (state: TableResizeHandleState) => TableResizeHandleState;
+
 /**
  * Create the state required to render TableRow.
  *

package/lib/TableResizeHandle.js

@@ -0,0 +1,2 @@
+export * from './components/TableResizeHandle/index';
+//# sourceMappingURL=TableResizeHandle.js.map

package/lib/TableResizeHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableResizeHandle.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/TableResizeHandle.ts"],"names":[],"mappings":"AAAA,cAAc,sCAAsC,CAAC","sourcesContent":["export * from './components/TableResizeHandle/index';\n"]}

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

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

package/lib/components/DataGrid/index.js

@@ -3,4 +3,5 @@ export * from './DataGrid.types';
 export * from './renderDataGrid';
 export * from './useDataGrid';
 export * from './useDataGridStyles';
+export * from './useDataGridContextValues';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGrid/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './DataGrid';\nexport * from './DataGrid.types';\nexport * from './renderDataGrid';\nexport * from './useDataGrid';\nexport * from './useDataGridStyles';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGrid/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './DataGrid';\nexport * from './DataGrid.types';\nexport * from './renderDataGrid';\nexport * from './useDataGrid';\nexport * from './useDataGridStyles';\nexport * from './useDataGridContextValues';\n"]}

package/lib/components/DataGrid/useDataGrid.js

@@ -1,6 +1,8 @@
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { useTable_unstable } from '../Table/useTable';
-import { useTableFeatures, useTableSort, useTableSelection } from '../../hooks';
+import { useTableFeatures, useTableSort, useTableSelection, useTableColumnSizing_unstable } from '../../hooks';
+import { CELL_WIDTH } from '../TableSelectionCell';
+import { useMergedRefs } from '@fluentui/react-utilities';
 /**
  * Create the state required to render DataGrid.
  *
@@ -24,7 +26,10 @@ export const useDataGrid_unstable = (props, ref) => {
     defaultSelectedItems,
     subtleSelection = false,
     selectionAppearance = 'brand',
-    getRowId
+    getRowId,
+    resizableColumns,
+    columnSizingOptions,
+    onColumnResize
   } = props;
   const navigable = focusMode !== 'none';
   const keyboardNavAttr = useArrowNavigationGroup({
@@ -43,6 +48,12 @@ export const useDataGrid_unstable = (props, ref) => {
     selectedItems,
     onSelectionChange,
     selectionMode: selectionMode !== null && selectionMode !== void 0 ? selectionMode : 'multiselect'
+  }), useTableColumnSizing_unstable({
+    onColumnResize,
+    columnSizingOptions,
+    // The selection cell is not part of the columns, therefore its width needs to be subtracted
+    // from the container to make sure the columns don't overflow the table.
+    containerWidthOffset: selectionMode ? -CELL_WIDTH : 0
   })]);
   const baseTableState = useTable_unstable({
     role: 'grid',
@@ -50,14 +61,15 @@ export const useDataGrid_unstable = (props, ref) => {
     noNativeElements: true,
     ...(navigable && keyboardNavAttr),
     ...props
-  }, ref);
+  }, useMergedRefs(ref, tableState.tableRef));
   return {
     ...baseTableState,
     focusMode,
     tableState,
     selectableRows: !!selectionMode,
     subtleSelection,
-    selectionAppearance
+    selectionAppearance,
+    resizableColumns
   };
 };
 //# sourceMappingURL=useDataGrid.js.map

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

@@ -1 +1 @@
-{"version":3,"mappings":"AACA,SAASA,uBAAuB,QAAQ,yBAAyB;AAEjE,SAASC,iBAAiB,QAAQ,mBAAmB;AACrD,SAASC,gBAAgB,EAAEC,YAAY,EAAEC,iBAAiB,QAAQ,aAAa;AAE/E;;;;;;;;;AASA,OAAO,MAAMC,oBAAoB,GAAG,CAACC,KAAoB,EAAEC,GAA2B,KAAmB;EACvG,MAAM;IACJC,KAAK;IACLC,OAAO;IACPC,SAAS,GAAG,MAAM;IAClBC,aAAa;IACbC,YAAY;IACZC,iBAAiB;IACjBC,gBAAgB;IAChBC,SAAS;IACTC,aAAa;IACbC,oBAAoB;IACpBC,eAAe,GAAG,KAAK;IACvBC,mBAAmB,GAAG,OAAO;IAC7BC;EAAQ,CACT,GAAGd,KAAK;EAET,MAAMe,SAAS,GAAGX,SAAS,KAAK,MAAM;EACtC,MAAMY,eAAe,GAAGtB,uBAAuB,CAAC;IAAEuB,IAAI,EAAE;EAAM,CAAE,CAAC;EAEjE,MAAMC,UAAU,GAAGtB,gBAAgB,CAAC;IAAEM,KAAK;IAAEC,OAAO;IAAEW;EAAQ,CAAE,EAAE,CAChEjB,YAAY,CAAC;IACXW,gBAAgB;IAChBC,SAAS;IACTH;GACD,CAAC,EACFR,iBAAiB,CAAC;IAChBa,oBAAoB;IACpBD,aAAa;IACbH,iBAAiB;IACjBF,aAAa,EAAEA,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAI;GACjC,CAAC,CACH,CAAC;EAEF,MAAMc,cAAc,GAAGxB,iBAAiB,CACtC;IAAEyB,IAAI,EAAE,MAAM;IAAEC,EAAE,EAAE,KAAK;IAAEC,gBAAgB,EAAE,IAAI;IAAE,IAAIP,SAAS,IAAIC,eAAe,CAAC;IAAE,GAAGhB;EAAK,CAAE,EAChGC,GAAG,CACJ;EAED,OAAO;IACL,GAAGkB,cAAc;IACjBf,SAAS;IACTc,UAAU;IACVK,cAAc,EAAE,CAAC,CAAClB,aAAa;IAC/BO,eAAe;IACfC;GACD;AACH,CAAC","names":["useArrowNavigationGroup","useTable_unstable","useTableFeatures","useTableSort","useTableSelection","useDataGrid_unstable","props","ref","items","columns","focusMode","selectionMode","onSortChange","onSelectionChange","defaultSortState","sortState","selectedItems","defaultSelectedItems","subtleSelection","selectionAppearance","getRowId","navigable","keyboardNavAttr","axis","tableState","baseTableState","role","as","noNativeElements","selectableRows"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport type { DataGridProps, DataGridState } from './DataGrid.types';\nimport { useTable_unstable } from '../Table/useTable';\nimport { useTableFeatures, useTableSort, useTableSelection } from '../../hooks';\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  } = 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  ]);\n\n  const baseTableState = useTable_unstable(\n    { role: 'grid', as: 'div', noNativeElements: true, ...(navigable && keyboardNavAttr), ...props },\n    ref,\n  );\n\n  return {\n    ...baseTableState,\n    focusMode,\n    tableState,\n    selectableRows: !!selectionMode,\n    subtleSelection,\n    selectionAppearance,\n  };\n};\n"]}
+{"version":3,"mappings":"AACA,SAASA,uBAAuB,QAAQ,yBAAyB;AAEjE,SAASC,iBAAiB,QAAQ,mBAAmB;AACrD,SAASC,gBAAgB,EAAEC,YAAY,EAAEC,iBAAiB,EAAEC,6BAA6B,QAAQ,aAAa;AAC9G,SAASC,UAAU,QAAQ,uBAAuB;AAClD,SAASC,aAAa,QAAQ,2BAA2B;AAEzD;;;;;;;;;AASA,OAAO,MAAMC,oBAAoB,GAAG,CAACC,KAAoB,EAAEC,GAA2B,KAAmB;EACvG,MAAM;IACJC,KAAK;IACLC,OAAO;IACPC,SAAS,GAAG,MAAM;IAClBC,aAAa;IACbC,YAAY;IACZC,iBAAiB;IACjBC,gBAAgB;IAChBC,SAAS;IACTC,aAAa;IACbC,oBAAoB;IACpBC,eAAe,GAAG,KAAK;IACvBC,mBAAmB,GAAG,OAAO;IAC7BC,QAAQ;IACRC,gBAAgB;IAChBC,mBAAmB;IACnBC;EAAc,CACf,GAAGjB,KAAK;EAET,MAAMkB,SAAS,GAAGd,SAAS,KAAK,MAAM;EACtC,MAAMe,eAAe,GAAG5B,uBAAuB,CAAC;IAAE6B,IAAI,EAAE;EAAM,CAAE,CAAC;EAEjE,MAAMC,UAAU,GAAG5B,gBAAgB,CAAC;IAAES,KAAK;IAAEC,OAAO;IAAEW;EAAQ,CAAE,EAAE,CAChEpB,YAAY,CAAC;IACXc,gBAAgB;IAChBC,SAAS;IACTH;GACD,CAAC,EACFX,iBAAiB,CAAC;IAChBgB,oBAAoB;IACpBD,aAAa;IACbH,iBAAiB;IACjBF,aAAa,EAAEA,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAI;GACjC,CAAC,EACFT,6BAA6B,CAAC;IAC5BqB,cAAc;IACdD,mBAAmB;IACnB;IACA;IACAM,oBAAoB,EAAEjB,aAAa,GAAG,CAACR,UAAU,GAAG;GACrD,CAAC,CACH,CAAC;EAEF,MAAM0B,cAAc,GAAG/B,iBAAiB,CACtC;IACEgC,IAAI,EAAE,MAAM;IACZC,EAAE,EAAE,KAAK;IACTC,gBAAgB,EAAE,IAAI;IACtB,IAAIR,SAAS,IAAIC,eAAe,CAAC;IACjC,GAAGnB;GACJ,EACDF,aAAa,CAACG,GAAG,EAAEoB,UAAU,CAACM,QAAQ,CAAC,CACxC;EAED,OAAO;IACL,GAAGJ,cAAc;IACjBnB,SAAS;IACTiB,UAAU;IACVO,cAAc,EAAE,CAAC,CAACvB,aAAa;IAC/BO,eAAe;IACfC,mBAAmB;IACnBE;GACD;AACH,CAAC","names":["useArrowNavigationGroup","useTable_unstable","useTableFeatures","useTableSort","useTableSelection","useTableColumnSizing_unstable","CELL_WIDTH","useMergedRefs","useDataGrid_unstable","props","ref","items","columns","focusMode","selectionMode","onSortChange","onSelectionChange","defaultSortState","sortState","selectedItems","defaultSelectedItems","subtleSelection","selectionAppearance","getRowId","resizableColumns","columnSizingOptions","onColumnResize","navigable","keyboardNavAttr","axis","tableState","containerWidthOffset","baseTableState","role","as","noNativeElements","tableRef","selectableRows"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } 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 { useMergedRefs } from '@fluentui/react-utilities';\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 baseTableState = useTable_unstable(\n    {\n      role: 'grid',\n      as: 'div',\n      noNativeElements: true,\n      ...(navigable && keyboardNavAttr),\n      ...props,\n    },\n    useMergedRefs(ref, tableState.tableRef),\n  );\n\n  return {\n    ...baseTableState,\n    focusMode,\n    tableState,\n    selectableRows: !!selectionMode,\n    subtleSelection,\n    selectionAppearance,\n    resizableColumns,\n  };\n};\n"]}

package/lib/components/DataGrid/useDataGridContextValues.js

@@ -8,7 +8,8 @@ export function useDataGridContextValues_unstable(state) {
       focusMode: state.focusMode,
       selectableRows: state.selectableRows,
       subtleSelection: state.subtleSelection,
-      selectionAppearance: state.selectionAppearance
+      selectionAppearance: state.selectionAppearance,
+      resizableColumns: state.resizableColumns
     }
   };
 }

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,SAASA,8BAA8B,QAAQ,gCAAgC;AAG/E,OAAM,SAAUC,iCAAiC,CAACC,KAAoB;EACpE,MAAMC,kBAAkB,GAAGH,8BAA8B,CAACE,KAAK,CAAC;EAChE,OAAO;IACL,GAAGC,kBAAkB;IACrBC,QAAQ,EAAE;MACR,GAAGF,KAAK,CAACG,UAAU;MACnBC,SAAS,EAAEJ,KAAK,CAACI,SAAS;MAC1BC,cAAc,EAAEL,KAAK,CAACK,cAAc;MACpCC,eAAe,EAAEN,KAAK,CAACM,eAAe;MACtCC,mBAAmB,EAAEP,KAAK,CAACO;;GAE9B;AACH","names":["useTableContextValues_unstable","useDataGridContextValues_unstable","state","tableContextValues","dataGrid","tableState","focusMode","selectableRows","subtleSelection","selectionAppearance"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGrid/useDataGridContextValues.ts"],"sourcesContent":["import { useTableContextValues_unstable } from '../Table/useTableContextValues';\nimport { DataGridContextValues, DataGridState } from './DataGrid.types';\n\nexport function useDataGridContextValues_unstable(state: DataGridState): DataGridContextValues {\n  const tableContextValues = useTableContextValues_unstable(state);\n  return {\n    ...tableContextValues,\n    dataGrid: {\n      ...state.tableState,\n      focusMode: state.focusMode,\n      selectableRows: state.selectableRows,\n      subtleSelection: state.subtleSelection,\n      selectionAppearance: state.selectionAppearance,\n    },\n  };\n}\n"]}
+{"version":3,"mappings":"AAAA,SAASA,8BAA8B,QAAQ,gCAAgC;AAG/E,OAAM,SAAUC,iCAAiC,CAACC,KAAoB;EACpE,MAAMC,kBAAkB,GAAGH,8BAA8B,CAACE,KAAK,CAAC;EAChE,OAAO;IACL,GAAGC,kBAAkB;IACrBC,QAAQ,EAAE;MACR,GAAGF,KAAK,CAACG,UAAU;MACnBC,SAAS,EAAEJ,KAAK,CAACI,SAAS;MAC1BC,cAAc,EAAEL,KAAK,CAACK,cAAc;MACpCC,eAAe,EAAEN,KAAK,CAACM,eAAe;MACtCC,mBAAmB,EAAEP,KAAK,CAACO,mBAAmB;MAC9CC,gBAAgB,EAAER,KAAK,CAACQ;;GAE3B;AACH","names":["useTableContextValues_unstable","useDataGridContextValues_unstable","state","tableContextValues","dataGrid","tableState","focusMode","selectableRows","subtleSelection","selectionAppearance","resizableColumns"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGrid/useDataGridContextValues.ts"],"sourcesContent":["import { useTableContextValues_unstable } from '../Table/useTableContextValues';\nimport { DataGridContextValues, DataGridState } from './DataGrid.types';\n\nexport function useDataGridContextValues_unstable(state: DataGridState): DataGridContextValues {\n  const tableContextValues = useTableContextValues_unstable(state);\n  return {\n    ...tableContextValues,\n    dataGrid: {\n      ...state.tableState,\n      focusMode: state.focusMode,\n      selectableRows: state.selectableRows,\n      subtleSelection: state.subtleSelection,\n      selectionAppearance: state.selectionAppearance,\n      resizableColumns: state.resizableColumns,\n    },\n  };\n}\n"]}

package/lib/components/DataGridCell/useDataGridCell.js

@@ -1,5 +1,6 @@
 import { useTableCell_unstable } from '../TableCell/useTableCell';
 import { useDataGridContext_unstable } from '../../contexts/dataGridContext';
+import { useColumnIdContext } from '../../contexts/columnIdContext';
 /**
  * Create the state required to render DataGridCell.
  *
@@ -10,11 +11,15 @@ import { useDataGridContext_unstable } from '../../contexts/dataGridContext';
  * @param ref - reference to root HTMLElement of DataGridCell
  */
 export const useDataGridCell_unstable = (props, ref) => {
+  const columnId = useColumnIdContext();
   const tabbable = useDataGridContext_unstable(ctx => ctx.focusMode === 'cell');
+  const resizableColumns = useDataGridContext_unstable(ctx => ctx.resizableColumns);
+  const columnSizing = useDataGridContext_unstable(ctx => ctx.columnSizing_unstable);
   return useTableCell_unstable({
     as: 'div',
     role: 'gridcell',
     tabIndex: tabbable ? 0 : undefined,
+    ...(resizableColumns ? columnSizing.getTableCellProps(columnId) : {}),
     ...props
   }, ref);
 };

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAEA,SAASA,qBAAqB,QAAQ,2BAA2B;AACjE,SAASC,2BAA2B,QAAQ,gCAAgC;AAE5E;;;;;;;;;AASA,OAAO,MAAMC,wBAAwB,GAAG,CAACC,KAAwB,EAAEC,GAA2B,KAAuB;EACnH,MAAMC,QAAQ,GAAGJ,2BAA2B,CAACK,GAAG,IAAIA,GAAG,CAACC,SAAS,KAAK,MAAM,CAAC;EAC7E,OAAOP,qBAAqB,CAAC;IAAEQ,EAAE,EAAE,KAAK;IAAEC,IAAI,EAAE,UAAU;IAAEC,QAAQ,EAAEL,QAAQ,GAAG,CAAC,GAAGM,SAAS;IAAE,GAAGR;EAAK,CAAE,EAAEC,GAAG,CAAC;AAClH,CAAC","names":["useTableCell_unstable","useDataGridContext_unstable","useDataGridCell_unstable","props","ref","tabbable","ctx","focusMode","as","role","tabIndex","undefined"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridCell/useDataGridCell.ts"],"sourcesContent":["import * as React from 'react';\nimport type { DataGridCellProps, DataGridCellState } from './DataGridCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\n\n/**\n * Create the state required to render DataGridCell.\n *\n * The returned state can be modified with hooks such as useDataGridCellStyles_unstable,\n * before being passed to renderDataGridCell_unstable.\n *\n * @param props - props from this instance of DataGridCell\n * @param ref - reference to root HTMLElement of DataGridCell\n */\nexport const useDataGridCell_unstable = (props: DataGridCellProps, ref: React.Ref<HTMLElement>): DataGridCellState => {\n  const tabbable = useDataGridContext_unstable(ctx => ctx.focusMode === 'cell');\n  return useTableCell_unstable({ as: 'div', role: 'gridcell', tabIndex: tabbable ? 0 : undefined, ...props }, ref);\n};\n"]}
+{"version":3,"mappings":"AAEA,SAASA,qBAAqB,QAAQ,2BAA2B;AACjE,SAASC,2BAA2B,QAAQ,gCAAgC;AAC5E,SAASC,kBAAkB,QAAQ,gCAAgC;AAEnE;;;;;;;;;AASA,OAAO,MAAMC,wBAAwB,GAAG,CAACC,KAAwB,EAAEC,GAA2B,KAAuB;EACnH,MAAMC,QAAQ,GAAGJ,kBAAkB,EAAE;EACrC,MAAMK,QAAQ,GAAGN,2BAA2B,CAACO,GAAG,IAAIA,GAAG,CAACC,SAAS,KAAK,MAAM,CAAC;EAC7E,MAAMC,gBAAgB,GAAGT,2BAA2B,CAACO,GAAG,IAAIA,GAAG,CAACE,gBAAgB,CAAC;EACjF,MAAMC,YAAY,GAAGV,2BAA2B,CAACO,GAAG,IAAIA,GAAG,CAACI,qBAAqB,CAAC;EAClF,OAAOZ,qBAAqB,CAC1B;IACEa,EAAE,EAAE,KAAK;IACTC,IAAI,EAAE,UAAU;IAChBC,QAAQ,EAAER,QAAQ,GAAG,CAAC,GAAGS,SAAS;IAClC,IAAIN,gBAAgB,GAAGC,YAAY,CAACM,iBAAiB,CAACX,QAAQ,CAAC,GAAG,EAAE,CAAC;IACrE,GAAGF;GACJ,EACDC,GAAG,CACJ;AACH,CAAC","names":["useTableCell_unstable","useDataGridContext_unstable","useColumnIdContext","useDataGridCell_unstable","props","ref","columnId","tabbable","ctx","focusMode","resizableColumns","columnSizing","columnSizing_unstable","as","role","tabIndex","undefined","getTableCellProps"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridCell/useDataGridCell.ts"],"sourcesContent":["import * as React from 'react';\nimport type { DataGridCellProps, DataGridCellState } from './DataGridCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useColumnIdContext } from '../../contexts/columnIdContext';\n\n/**\n * Create the state required to render DataGridCell.\n *\n * The returned state can be modified with hooks such as useDataGridCellStyles_unstable,\n * before being passed to renderDataGridCell_unstable.\n *\n * @param props - props from this instance of DataGridCell\n * @param ref - reference to root HTMLElement of DataGridCell\n */\nexport const useDataGridCell_unstable = (props: DataGridCellProps, ref: React.Ref<HTMLElement>): DataGridCellState => {\n  const columnId = useColumnIdContext();\n  const tabbable = useDataGridContext_unstable(ctx => ctx.focusMode === 'cell');\n  const resizableColumns = useDataGridContext_unstable(ctx => ctx.resizableColumns);\n  const columnSizing = useDataGridContext_unstable(ctx => ctx.columnSizing_unstable);\n  return useTableCell_unstable(\n    {\n      as: 'div',\n      role: 'gridcell',\n      tabIndex: tabbable ? 0 : undefined,\n      ...(resizableColumns ? columnSizing.getTableCellProps(columnId) : {}),\n      ...props,\n    },\n    ref,\n  );\n};\n"]}