@fluentui/react-table 9.0.0-rc.5 → 9.0.1

package/CHANGELOG.json

@@ -2,7 +2,93 @@
   "name": "@fluentui/react-table",
   "entries": [
     {
-      "date": "Tue, 07 Feb 2023 14:10:44 GMT",
+      "date": "Mon, 13 Feb 2023 09:34:36 GMT",
+      "tag": "@fluentui/react-table_v9.0.1",
+      "version": "9.0.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-avatar to v9.3.4",
+            "commit": "b24aed22677cb12a74f185feee89edefd1601b9a"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 10 Feb 2023 08:50:01 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": {

package/CHANGELOG.md

@@ -1,12 +1,42 @@
 # Change Log - @fluentui/react-table
 
-This log was last generated on Tue, 07 Feb 2023 14:10:44 GMT and should not be manually modified.
+This log was last generated on Mon, 13 Feb 2023 09:34:36 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.1)
+
+Mon, 13 Feb 2023 09:34:36 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.0.0..@fluentui/react-table_v9.0.1)
+
+### Patches
+
+- Bump @fluentui/react-avatar to v9.3.4 ([PR #26800](https://github.com/microsoft/fluentui/pull/26800) by beachball)
+
+## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.0)
+
+Fri, 10 Feb 2023 08:50:01 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:10:44 GMT 
+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

package/dist/index.d.ts

@@ -117,6 +117,10 @@ export declare type DataGridContextValue = TableFeaturesState<any> & {
      * @default brand
      */
     selectionAppearance: TableRowProps['appearance'];
+    /**
+     * Enables column resizing
+     */
+    resizableColumns?: boolean;
 };
 
 export declare type DataGridContextValues = TableContextValues & {
@@ -166,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;
     /**
@@ -174,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;
 };
 
 /**
@@ -232,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>;
@@ -422,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 = {
@@ -447,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'>;
 
@@ -997,7 +1016,11 @@ export declare function useTableColumnSizing_unstable<TItem>(params?: UseTableCo
 
 declare type UseTableColumnSizingParams = {
     columnSizingOptions?: TableColumnSizingOptions;
-    onColumnResize?: (columnId: TableColumnId, width: number) => void;
+    onColumnResize?: (e: MouseEvent | undefined, data: {
+        columnId: TableColumnId;
+        width: number;
+    }) => void;
+    containerWidthOffset?: number;
 };
 
 export declare const useTableContext: () => TableContextValue;

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/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"]}

package/lib/components/DataGridHeaderCell/useDataGridHeaderCell.js

@@ -19,6 +19,8 @@ export const useDataGridHeaderCell_unstable = (props, ref) => {
   } = useTableContext();
   const toggleColumnSort = useDataGridContext_unstable(ctx => ctx.sort.toggleColumnSort);
   const sortDirection = useDataGridContext_unstable(ctx => sortable ? ctx.sort.getSortDirection(columnId) : undefined);
+  const resizableColumns = useDataGridContext_unstable(ctx => ctx.resizableColumns);
+  const columnSizing = useDataGridContext_unstable(ctx => ctx.columnSizing_unstable);
   const onClick = useEventCallback(e => {
     var _a;
     if (sortable) {
@@ -30,6 +32,7 @@ export const useDataGridHeaderCell_unstable = (props, ref) => {
     sortDirection,
     as: 'div',
     tabIndex: sortable ? undefined : 0,
+    ...(resizableColumns ? columnSizing.getTableHeaderCellProps(columnId) : {}),
     ...props,
     onClick
   }, ref);

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

@@ -1 +1 @@
-{"version":3,"mappings":"AACA,SAASA,gBAAgB,QAAQ,2BAA2B;AAE5D,SAASC,2BAA2B,QAAQ,uCAAuC;AACnF,SAASC,2BAA2B,QAAQ,gCAAgC;AAC5E,SAASC,kBAAkB,QAAQ,gCAAgC;AACnE,SAASC,eAAe,QAAQ,6BAA6B;AAE7D;;;;;;;;;AASA,OAAO,MAAMC,8BAA8B,GAAG,CAC5CC,KAA8B,EAC9BC,GAA2B,KACA;EAC3B,MAAMC,QAAQ,GAAGL,kBAAkB,EAAE;EACrC,MAAM;IAAEM;EAAQ,CAAE,GAAGL,eAAe,EAAE;EACtC,MAAMM,gBAAgB,GAAGR,2BAA2B,CAACS,GAAG,IAAIA,GAAG,CAACC,IAAI,CAACF,gBAAgB,CAAC;EACtF,MAAMG,aAAa,GAAGX,2BAA2B,CAACS,GAAG,IACnDF,QAAQ,GAAGE,GAAG,CAACC,IAAI,CAACE,gBAAgB,CAACN,QAAQ,CAAC,GAAGO,SAAS,CAC3D;EACD,MAAMC,OAAO,GAAGhB,gBAAgB,CAAEiB,CAA+C,IAAI;;IACnF,IAAIR,QAAQ,EAAE;MACZC,gBAAgB,CAACO,CAAC,EAAET,QAAQ,CAAC;;IAE/B,WAAK,CAACQ,OAAO,+CAAbV,KAAK,EAAWW,CAAC,CAAC;EACpB,CAAC,CAAC;EAEF,OAAOhB,2BAA2B,CAChC;IAAEY,aAAa;IAAEK,EAAE,EAAE,KAAK;IAAEC,QAAQ,EAAEV,QAAQ,GAAGM,SAAS,GAAG,CAAC;IAAE,GAAGT,KAAK;IAAEU;EAAO,CAAE,EACnFT,GAAG,CACJ;AACH,CAAC","names":["useEventCallback","useTableHeaderCell_unstable","useDataGridContext_unstable","useColumnIdContext","useTableContext","useDataGridHeaderCell_unstable","props","ref","columnId","sortable","toggleColumnSort","ctx","sort","sortDirection","getSortDirection","undefined","onClick","e","as","tabIndex"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCell.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport type { DataGridHeaderCellProps, DataGridHeaderCellState } from './DataGridHeaderCell.types';\nimport { useTableHeaderCell_unstable } from '../TableHeaderCell/useTableHeaderCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useColumnIdContext } from '../../contexts/columnIdContext';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render DataGridHeaderCell.\n *\n * The returned state can be modified with hooks such as useDataGridHeaderCellStyles_unstable,\n * before being passed to renderDataGridHeaderCell_unstable.\n *\n * @param props - props from this instance of DataGridHeaderCell\n * @param ref - reference to root HTMLElement of DataGridHeaderCell\n */\nexport const useDataGridHeaderCell_unstable = (\n  props: DataGridHeaderCellProps,\n  ref: React.Ref<HTMLElement>,\n): DataGridHeaderCellState => {\n  const columnId = useColumnIdContext();\n  const { sortable } = useTableContext();\n  const toggleColumnSort = useDataGridContext_unstable(ctx => ctx.sort.toggleColumnSort);\n  const sortDirection = useDataGridContext_unstable(ctx =>\n    sortable ? ctx.sort.getSortDirection(columnId) : undefined,\n  );\n  const onClick = useEventCallback((e: React.MouseEvent<HTMLTableHeaderCellElement>) => {\n    if (sortable) {\n      toggleColumnSort(e, columnId);\n    }\n    props.onClick?.(e);\n  });\n\n  return useTableHeaderCell_unstable(\n    { sortDirection, as: 'div', tabIndex: sortable ? undefined : 0, ...props, onClick },\n    ref,\n  );\n};\n"]}
+{"version":3,"mappings":"AACA,SAASA,gBAAgB,QAAQ,2BAA2B;AAE5D,SAASC,2BAA2B,QAAQ,uCAAuC;AACnF,SAASC,2BAA2B,QAAQ,gCAAgC;AAC5E,SAASC,kBAAkB,QAAQ,gCAAgC;AACnE,SAASC,eAAe,QAAQ,6BAA6B;AAE7D;;;;;;;;;AASA,OAAO,MAAMC,8BAA8B,GAAG,CAC5CC,KAA8B,EAC9BC,GAA2B,KACA;EAC3B,MAAMC,QAAQ,GAAGL,kBAAkB,EAAE;EACrC,MAAM;IAAEM;EAAQ,CAAE,GAAGL,eAAe,EAAE;EACtC,MAAMM,gBAAgB,GAAGR,2BAA2B,CAACS,GAAG,IAAIA,GAAG,CAACC,IAAI,CAACF,gBAAgB,CAAC;EACtF,MAAMG,aAAa,GAAGX,2BAA2B,CAACS,GAAG,IACnDF,QAAQ,GAAGE,GAAG,CAACC,IAAI,CAACE,gBAAgB,CAACN,QAAQ,CAAC,GAAGO,SAAS,CAC3D;EAED,MAAMC,gBAAgB,GAAGd,2BAA2B,CAACS,GAAG,IAAIA,GAAG,CAACK,gBAAgB,CAAC;EACjF,MAAMC,YAAY,GAAGf,2BAA2B,CAACS,GAAG,IAAIA,GAAG,CAACO,qBAAqB,CAAC;EAElF,MAAMC,OAAO,GAAGnB,gBAAgB,CAAEoB,CAA+C,IAAI;;IACnF,IAAIX,QAAQ,EAAE;MACZC,gBAAgB,CAACU,CAAC,EAAEZ,QAAQ,CAAC;;IAE/B,WAAK,CAACW,OAAO,+CAAbb,KAAK,EAAWc,CAAC,CAAC;EACpB,CAAC,CAAC;EAEF,OAAOnB,2BAA2B,CAChC;IACEY,aAAa;IACbQ,EAAE,EAAE,KAAK;IACTC,QAAQ,EAAEb,QAAQ,GAAGM,SAAS,GAAG,CAAC;IAClC,IAAIC,gBAAgB,GAAGC,YAAY,CAACM,uBAAuB,CAACf,QAAQ,CAAC,GAAG,EAAE,CAAC;IAC3E,GAAGF,KAAK;IACRa;GACD,EACDZ,GAAG,CACJ;AACH,CAAC","names":["useEventCallback","useTableHeaderCell_unstable","useDataGridContext_unstable","useColumnIdContext","useTableContext","useDataGridHeaderCell_unstable","props","ref","columnId","sortable","toggleColumnSort","ctx","sort","sortDirection","getSortDirection","undefined","resizableColumns","columnSizing","columnSizing_unstable","onClick","e","as","tabIndex","getTableHeaderCellProps"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCell.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport type { DataGridHeaderCellProps, DataGridHeaderCellState } from './DataGridHeaderCell.types';\nimport { useTableHeaderCell_unstable } from '../TableHeaderCell/useTableHeaderCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useColumnIdContext } from '../../contexts/columnIdContext';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render DataGridHeaderCell.\n *\n * The returned state can be modified with hooks such as useDataGridHeaderCellStyles_unstable,\n * before being passed to renderDataGridHeaderCell_unstable.\n *\n * @param props - props from this instance of DataGridHeaderCell\n * @param ref - reference to root HTMLElement of DataGridHeaderCell\n */\nexport const useDataGridHeaderCell_unstable = (\n  props: DataGridHeaderCellProps,\n  ref: React.Ref<HTMLElement>,\n): DataGridHeaderCellState => {\n  const columnId = useColumnIdContext();\n  const { sortable } = useTableContext();\n  const toggleColumnSort = useDataGridContext_unstable(ctx => ctx.sort.toggleColumnSort);\n  const sortDirection = useDataGridContext_unstable(ctx =>\n    sortable ? ctx.sort.getSortDirection(columnId) : undefined,\n  );\n\n  const resizableColumns = useDataGridContext_unstable(ctx => ctx.resizableColumns);\n  const columnSizing = useDataGridContext_unstable(ctx => ctx.columnSizing_unstable);\n\n  const onClick = useEventCallback((e: React.MouseEvent<HTMLTableHeaderCellElement>) => {\n    if (sortable) {\n      toggleColumnSort(e, columnId);\n    }\n    props.onClick?.(e);\n  });\n\n  return useTableHeaderCell_unstable(\n    {\n      sortDirection,\n      as: 'div',\n      tabIndex: sortable ? undefined : 0,\n      ...(resizableColumns ? columnSizing.getTableHeaderCellProps(columnId) : {}),\n      ...props,\n      onClick,\n    },\n    ref,\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"TableCellLayout.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AvatarSize } from '@fluentui/react-avatar';\nimport { TableContextValue } from '../Table/Table.types';\n\nexport type TableCellLayoutContextValues = {\n  avatar: {\n    size?: AvatarSize;\n  };\n};\n\nexport type TableCellLayoutSlots = {\n  root: Slot<'div'>;\n\n  /**\n   * Slot for an icon or other visual element\n   */\n  media: Slot<'span'>;\n\n  /**\n   * Main text for the table cell. Children of the root slot are automatically rendered here\n   */\n  main: Slot<'span'>;\n\n  /**\n   * Secondary text that describes or complements the main text\n   */\n  description: Slot<'span'>;\n\n  /**\n   * A layout wrapper for the main and description slots\n   */\n  content: Slot<'div'>;\n};\n\n/**\n * TableCellLayout Props\n */\nexport type TableCellLayoutProps = ComponentProps<Partial<TableCellLayoutSlots>> & {\n  /**\n   * Renders design variants of the table cell\n   * @default undefined\n   */\n  appearance?: 'primary';\n};\n\n/**\n * State used in rendering TableCellLayout\n */\nexport type TableCellLayoutState = ComponentState<TableCellLayoutSlots> &\n  Pick<TableCellLayoutProps, 'appearance'> & { avatarSize: AvatarSize | undefined } & Pick<TableContextValue, 'size'>;\n"]}
+{"version":3,"file":"TableCellLayout.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AvatarSize } from '@fluentui/react-avatar';\nimport { TableContextValue } from '../Table/Table.types';\n\nexport type TableCellLayoutContextValues = {\n  avatar: {\n    size?: AvatarSize;\n  };\n};\n\nexport type TableCellLayoutSlots = {\n  root: Slot<'div'>;\n\n  /**\n   * Slot for an icon or other visual element\n   */\n  media: Slot<'span'>;\n\n  /**\n   * Main text for the table cell. Children of the root slot are automatically rendered here\n   */\n  main: Slot<'span'>;\n\n  /**\n   * Secondary text that describes or complements the main text\n   */\n  description: Slot<'span'>;\n\n  /**\n   * A layout wrapper for the main and description slots\n   */\n  content: Slot<'div'>;\n};\n\n/**\n * TableCellLayout Props\n */\nexport type TableCellLayoutProps = ComponentProps<Partial<TableCellLayoutSlots>> & {\n  /**\n   * Renders design variants of the table cell\n   * @default undefined\n   */\n  appearance?: 'primary';\n\n  /**\n   * Renders content with overflow: hidden and text-overflow: ellipsis\n   */\n  truncate?: boolean;\n};\n\n/**\n * State used in rendering TableCellLayout\n */\nexport type TableCellLayoutState = ComponentState<TableCellLayoutSlots> &\n  Pick<TableCellLayoutProps, 'appearance' | 'truncate'> & { avatarSize: AvatarSize | undefined } & Pick<\n    TableContextValue,\n    'size'\n  >;\n"]}

package/lib/components/TableCellLayout/useTableCellLayout.js

@@ -31,6 +31,7 @@ export const useTableCellLayout_unstable = (props, ref) => {
       ...props
     }),
     appearance: props.appearance,
+    truncate: props.truncate,
     main: resolveShorthand(props.main, {
       required: true
     }),

package/lib/components/TableCellLayout/useTableCellLayout.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AACA,SAASA,qBAAqB,EAAEC,gBAAgB,QAAQ,2BAA2B;AAEnF,SAASC,eAAe,QAAQ,6BAA6B;AAE7D,MAAMC,kBAAkB,GAAG;EACzBC,MAAM,EAAE,EAAE;EACVC,KAAK,EAAE,EAAE;EACT,aAAa,EAAE;CACP;AAEV;;;;;;;;;AASA,OAAO,MAAMC,2BAA2B,GAAG,CACzCC,KAA2B,EAC3BC,GAA2B,KACH;EACxB,MAAM;IAAEC;EAAI,CAAE,GAAGP,eAAe,EAAE;EAElC,OAAO;IACLQ,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXC,IAAI,EAAE,MAAM;MACZC,WAAW,EAAE,MAAM;MACnBC,OAAO,EAAE,KAAK;MACdC,KAAK,EAAE;KACR;IACDJ,IAAI,EAAEX,qBAAqB,CAAC,KAAK,EAAE;MAAEQ,GAAG;MAAE,GAAGD;IAAK,CAAE,CAAC;IACrDS,UAAU,EAAET,KAAK,CAACS,UAAU;IAC5BJ,IAAI,EAAEX,gBAAgB,CAACM,KAAK,CAACK,IAAI,EAAE;MAAEK,QAAQ,EAAE;IAAI,CAAE,CAAC;IACtDF,KAAK,EAAEd,gBAAgB,CAACM,KAAK,CAACQ,KAAK,CAAC;IACpCF,WAAW,EAAEZ,gBAAgB,CAACM,KAAK,CAACM,WAAW,CAAC;IAChDC,OAAO,EAAEb,gBAAgB,CAACM,KAAK,CAACO,OAAO,EAAE;MAAEG,QAAQ,EAAE,CAAC,CAACV,KAAK,CAACM,WAAW,IAAI,CAAC,CAACN,KAAK,CAACW;IAAQ,CAAE,CAAC;IAC/FC,UAAU,EAAEhB,kBAAkB,CAACM,IAAI,CAAC;IACpCA;GACD;AACH,CAAC","names":["getNativeElementProps","resolveShorthand","useTableContext","tableAvatarSizeMap","medium","small","useTableCellLayout_unstable","props","ref","size","components","root","main","description","content","media","appearance","required","children","avatarSize"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { TableCellLayoutProps, TableCellLayoutState } from './TableCellLayout.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\nconst tableAvatarSizeMap = {\n  medium: 32,\n  small: 24,\n  'extra-small': 20,\n} as const;\n\n/**\n * Create the state required to render TableCellLayout.\n *\n * The returned state can be modified with hooks such as useTableCellLayoutStyles_unstable,\n * before being passed to renderTableCellLayout_unstable.\n *\n * @param props - props from this instance of TableCellLayout\n * @param ref - reference to root HTMLElement of TableCellLayout\n */\nexport const useTableCellLayout_unstable = (\n  props: TableCellLayoutProps,\n  ref: React.Ref<HTMLElement>,\n): TableCellLayoutState => {\n  const { size } = useTableContext();\n\n  return {\n    components: {\n      root: 'div',\n      main: 'span',\n      description: 'span',\n      content: 'div',\n      media: 'span',\n    },\n    root: getNativeElementProps('div', { ref, ...props }),\n    appearance: props.appearance,\n    main: resolveShorthand(props.main, { required: true }),\n    media: resolveShorthand(props.media),\n    description: resolveShorthand(props.description),\n    content: resolveShorthand(props.content, { required: !!props.description || !!props.children }),\n    avatarSize: tableAvatarSizeMap[size],\n    size,\n  };\n};\n"]}
+{"version":3,"mappings":"AACA,SAASA,qBAAqB,EAAEC,gBAAgB,QAAQ,2BAA2B;AAEnF,SAASC,eAAe,QAAQ,6BAA6B;AAE7D,MAAMC,kBAAkB,GAAG;EACzBC,MAAM,EAAE,EAAE;EACVC,KAAK,EAAE,EAAE;EACT,aAAa,EAAE;CACP;AAEV;;;;;;;;;AASA,OAAO,MAAMC,2BAA2B,GAAG,CACzCC,KAA2B,EAC3BC,GAA2B,KACH;EACxB,MAAM;IAAEC;EAAI,CAAE,GAAGP,eAAe,EAAE;EAElC,OAAO;IACLQ,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXC,IAAI,EAAE,MAAM;MACZC,WAAW,EAAE,MAAM;MACnBC,OAAO,EAAE,KAAK;MACdC,KAAK,EAAE;KACR;IACDJ,IAAI,EAAEX,qBAAqB,CAAC,KAAK,EAAE;MAAEQ,GAAG;MAAE,GAAGD;IAAK,CAAE,CAAC;IACrDS,UAAU,EAAET,KAAK,CAACS,UAAU;IAC5BC,QAAQ,EAAEV,KAAK,CAACU,QAAQ;IACxBL,IAAI,EAAEX,gBAAgB,CAACM,KAAK,CAACK,IAAI,EAAE;MAAEM,QAAQ,EAAE;IAAI,CAAE,CAAC;IACtDH,KAAK,EAAEd,gBAAgB,CAACM,KAAK,CAACQ,KAAK,CAAC;IACpCF,WAAW,EAAEZ,gBAAgB,CAACM,KAAK,CAACM,WAAW,CAAC;IAChDC,OAAO,EAAEb,gBAAgB,CAACM,KAAK,CAACO,OAAO,EAAE;MAAEI,QAAQ,EAAE,CAAC,CAACX,KAAK,CAACM,WAAW,IAAI,CAAC,CAACN,KAAK,CAACY;IAAQ,CAAE,CAAC;IAC/FC,UAAU,EAAEjB,kBAAkB,CAACM,IAAI,CAAC;IACpCA;GACD;AACH,CAAC","names":["getNativeElementProps","resolveShorthand","useTableContext","tableAvatarSizeMap","medium","small","useTableCellLayout_unstable","props","ref","size","components","root","main","description","content","media","appearance","truncate","required","children","avatarSize"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { TableCellLayoutProps, TableCellLayoutState } from './TableCellLayout.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\nconst tableAvatarSizeMap = {\n  medium: 32,\n  small: 24,\n  'extra-small': 20,\n} as const;\n\n/**\n * Create the state required to render TableCellLayout.\n *\n * The returned state can be modified with hooks such as useTableCellLayoutStyles_unstable,\n * before being passed to renderTableCellLayout_unstable.\n *\n * @param props - props from this instance of TableCellLayout\n * @param ref - reference to root HTMLElement of TableCellLayout\n */\nexport const useTableCellLayout_unstable = (\n  props: TableCellLayoutProps,\n  ref: React.Ref<HTMLElement>,\n): TableCellLayoutState => {\n  const { size } = useTableContext();\n\n  return {\n    components: {\n      root: 'div',\n      main: 'span',\n      description: 'span',\n      content: 'div',\n      media: 'span',\n    },\n    root: getNativeElementProps('div', { ref, ...props }),\n    appearance: props.appearance,\n    truncate: props.truncate,\n    main: resolveShorthand(props.main, { required: true }),\n    media: resolveShorthand(props.media),\n    description: resolveShorthand(props.description),\n    content: resolveShorthand(props.content, { required: !!props.description || !!props.children }),\n    avatarSize: tableAvatarSizeMap[size],\n    size,\n  };\n};\n"]}

package/lib/components/TableCellLayout/useTableCellLayoutStyles.js

@@ -21,10 +21,16 @@ const useStyles = /*#__PURE__*/__styles({
     Bnnss6s: "f1neuvcm",
     xawz: "fkjuxzh"
   },
+  rootTruncate: {
+    B68tc82: "f1p9o1ba"
+  },
   content: {
     mc9l5x: "f22iagw",
     Beiy3e4: "f1vx9l62"
   },
+  contentTruncate: {
+    B68tc82: "f1p9o1ba"
+  },
   media: {
     mc9l5x: "f22iagw",
     Bt984gj: "f122n59"
@@ -41,6 +47,11 @@ const useStyles = /*#__PURE__*/__styles({
   mainPrimary: {
     Bhrd7zp: "fl43uef"
   },
+  mainTruncate: {
+    B68tc82: "f1p9o1ba",
+    Huce71: "fz5stix",
+    ygn44y: "f1cmbuwj"
+  },
   description: {
     sj55zd: "fkfq4zb",
     Bahqtrf: "fk6fouc",
@@ -49,14 +60,17 @@ const useStyles = /*#__PURE__*/__styles({
     Bg96gwp: "fwrc4pm"
   }
 }, {
-  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fsnqrgy{-webkit-column-gap:var(--spacingHorizontalS);column-gap:var(--spacingHorizontalS);}", ".fylz90v{row-gap:var(--spacingHorizontalS);}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".fkjuxzh{-webkit-flex-basis:0px;-ms-flex-preferred-size:0px;flex-basis:0px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}"]
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fsnqrgy{-webkit-column-gap:var(--spacingHorizontalS);column-gap:var(--spacingHorizontalS);}", ".fylz90v{row-gap:var(--spacingHorizontalS);}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".fkjuxzh{-webkit-flex-basis:0px;-ms-flex-preferred-size:0px;flex-basis:0px;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fz5stix{white-space:nowrap;}", ".f1cmbuwj{text-overflow:ellipsis;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}"]
 });
 /**
  * Apply styling to the TableCellLayout slots based on the state
  */
 export const useTableCellLayoutStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = mergeClasses(tableCellLayoutClassNames.root, styles.root, state.root.className);
+  const {
+    truncate
+  } = state;
+  state.root.className = mergeClasses(tableCellLayoutClassNames.root, styles.root, truncate && styles.rootTruncate, state.root.className);
   const primary = state.appearance === 'primary';
   if (state.media) {
     const mediaSizedStyles = {
@@ -67,13 +81,13 @@ export const useTableCellLayoutStyles_unstable = state => {
     state.media.className = mergeClasses(tableCellLayoutClassNames.media, styles.media, mediaSizedStyles[state.size], primary && styles.mediaPrimary, state.media.className);
   }
   if (state.main) {
-    state.main.className = mergeClasses(tableCellLayoutClassNames.main, primary && styles.mainPrimary, state.main.className);
+    state.main.className = mergeClasses(tableCellLayoutClassNames.main, truncate && styles.mainTruncate, primary && styles.mainPrimary, state.main.className);
   }
   if (state.description) {
     state.description.className = mergeClasses(tableCellLayoutClassNames.description, styles.description, state.description.className);
   }
   if (state.content) {
-    state.content.className = mergeClasses(tableCellLayoutClassNames.content, styles.content, state.content.className);
+    state.content.className = mergeClasses(tableCellLayoutClassNames.content, styles.content, truncate && styles.contentTruncate, state.content.className);
   }
   return state;
 };

package/lib/components/TableCellLayout/useTableCellLayoutStyles.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,mBAAqBA,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAG9C,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,OAAO,MAAMC,yBAAyB,GAAyC;EAC7EC,IAAI,EAAE,qBAAqB;EAC3BC,KAAK,EAAE,4BAA4B;EACnCC,IAAI,EAAE,2BAA2B;EACjCC,WAAW,EAAE,kCAAkC;EAC/CC,OAAO,EAAE;CACV;AAED;;;AAGA,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAqChB;AAEF;;;AAGA,OAAO,MAAMC,iCAAiC,GAAIC,KAA2B,IAA0B;EACrG,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1BE,KAAK,CAACP,IAAI,CAACS,SAAS,GAAGd,YAAY,CAACI,yBAAyB,CAACC,IAAI,EAAEQ,MAAM,CAACR,IAAI,EAAEO,KAAK,CAACP,IAAI,CAACS,SAAS,CAAC;EACtG,MAAMC,OAAO,GAAGH,KAAK,CAACI,UAAU,KAAK,SAAS;EAE9C,IAAIJ,KAAK,CAACN,KAAK,EAAE;IACf,MAAMW,gBAAgB,GAAG;MACvBC,KAAK,EAAEL,MAAM,CAACM,mBAAmB;MACjCC,MAAM,EAAEP,MAAM,CAACM,mBAAmB;MAClC,aAAa,EAAEN,MAAM,CAACQ;KACvB;IAEDT,KAAK,CAACN,KAAK,CAACQ,SAAS,GAAGd,YAAY,CAClCI,yBAAyB,CAACE,KAAK,EAC/BO,MAAM,CAACP,KAAK,EACZW,gBAAgB,CAACL,KAAK,CAACU,IAAI,CAAC,EAC5BP,OAAO,IAAIF,MAAM,CAACU,YAAY,EAC9BX,KAAK,CAACN,KAAK,CAACQ,SAAS,CACtB;;EAGH,IAAIF,KAAK,CAACL,IAAI,EAAE;IACdK,KAAK,CAACL,IAAI,CAACO,SAAS,GAAGd,YAAY,CACjCI,yBAAyB,CAACG,IAAI,EAC9BQ,OAAO,IAAIF,MAAM,CAACW,WAAW,EAC7BZ,KAAK,CAACL,IAAI,CAACO,SAAS,CACrB;;EAGH,IAAIF,KAAK,CAACJ,WAAW,EAAE;IACrBI,KAAK,CAACJ,WAAW,CAACM,SAAS,GAAGd,YAAY,CACxCI,yBAAyB,CAACI,WAAW,EACrCK,MAAM,CAACL,WAAW,EAClBI,KAAK,CAACJ,WAAW,CAACM,SAAS,CAC5B;;EAGH,IAAIF,KAAK,CAACH,OAAO,EAAE;IACjBG,KAAK,CAACH,OAAO,CAACK,SAAS,GAAGd,YAAY,CAACI,yBAAyB,CAACK,OAAO,EAAEI,MAAM,CAACJ,OAAO,EAAEG,KAAK,CAACH,OAAO,CAACK,SAAS,CAAC;;EAGpH,OAAOF,KAAK;AACd,CAAC","names":["mergeClasses","shorthands","tokens","typographyStyles","tableCellLayoutClassNames","root","media","main","description","content","useStyles","useTableCellLayoutStyles_unstable","state","styles","className","primary","appearance","mediaSizedStyles","small","mediaSmallAndMedium","medium","mediaExtraSmall","size","mediaPrimary","mainPrimary"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableCellLayoutSlots, TableCellLayoutState } from './TableCellLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const tableCellLayoutClassNames: SlotClassNames<TableCellLayoutSlots> = {\n  root: 'fui-TableCellLayout',\n  media: 'fui-TableCellLayout__media',\n  main: 'fui-TableCellLayout__main',\n  description: 'fui-TableCellLayout__description',\n  content: 'fui-TableCellLayout__content',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    ...shorthands.gap(tokens.spacingHorizontalS),\n    ...shorthands.flex(1, 1, '0px'),\n  },\n  content: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n\n  media: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n\n  mediaExtraSmall: {\n    fontSize: '16px',\n  },\n\n  mediaSmallAndMedium: {\n    fontSize: '20px',\n  },\n\n  mediaPrimary: {\n    fontSize: '24px',\n  },\n\n  mainPrimary: {\n    fontWeight: tokens.fontWeightSemibold,\n  },\n\n  description: {\n    color: tokens.colorNeutralForeground2,\n    ...typographyStyles.caption1,\n  },\n});\n\n/**\n * Apply styling to the TableCellLayout slots based on the state\n */\nexport const useTableCellLayoutStyles_unstable = (state: TableCellLayoutState): TableCellLayoutState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(tableCellLayoutClassNames.root, styles.root, state.root.className);\n  const primary = state.appearance === 'primary';\n\n  if (state.media) {\n    const mediaSizedStyles = {\n      small: styles.mediaSmallAndMedium,\n      medium: styles.mediaSmallAndMedium,\n      'extra-small': styles.mediaExtraSmall,\n    };\n\n    state.media.className = mergeClasses(\n      tableCellLayoutClassNames.media,\n      styles.media,\n      mediaSizedStyles[state.size],\n      primary && styles.mediaPrimary,\n      state.media.className,\n    );\n  }\n\n  if (state.main) {\n    state.main.className = mergeClasses(\n      tableCellLayoutClassNames.main,\n      primary && styles.mainPrimary,\n      state.main.className,\n    );\n  }\n\n  if (state.description) {\n    state.description.className = mergeClasses(\n      tableCellLayoutClassNames.description,\n      styles.description,\n      state.description.className,\n    );\n  }\n\n  if (state.content) {\n    state.content.className = mergeClasses(tableCellLayoutClassNames.content, styles.content, state.content.className);\n  }\n\n  return state;\n};\n"]}
+{"version":3,"mappings":"AAAA,mBAAqBA,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAG9C,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,OAAO,MAAMC,yBAAyB,GAAyC;EAC7EC,IAAI,EAAE,qBAAqB;EAC3BC,KAAK,EAAE,4BAA4B;EACnCC,IAAI,EAAE,2BAA2B;EACjCC,WAAW,EAAE,kCAAkC;EAC/CC,OAAO,EAAE;CACV;AAED;;;AAGA,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAoDhB;AAEF;;;AAGA,OAAO,MAAMC,iCAAiC,GAAIC,KAA2B,IAA0B;EACrG,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1B,MAAM;IAAEI;EAAQ,CAAE,GAAGF,KAAK;EAE1BA,KAAK,CAACP,IAAI,CAACU,SAAS,GAAGf,YAAY,CACjCI,yBAAyB,CAACC,IAAI,EAC9BQ,MAAM,CAACR,IAAI,EACXS,QAAQ,IAAID,MAAM,CAACG,YAAY,EAC/BJ,KAAK,CAACP,IAAI,CAACU,SAAS,CACrB;EACD,MAAME,OAAO,GAAGL,KAAK,CAACM,UAAU,KAAK,SAAS;EAE9C,IAAIN,KAAK,CAACN,KAAK,EAAE;IACf,MAAMa,gBAAgB,GAAG;MACvBC,KAAK,EAAEP,MAAM,CAACQ,mBAAmB;MACjCC,MAAM,EAAET,MAAM,CAACQ,mBAAmB;MAClC,aAAa,EAAER,MAAM,CAACU;KACvB;IAEDX,KAAK,CAACN,KAAK,CAACS,SAAS,GAAGf,YAAY,CAClCI,yBAAyB,CAACE,KAAK,EAC/BO,MAAM,CAACP,KAAK,EACZa,gBAAgB,CAACP,KAAK,CAACY,IAAI,CAAC,EAC5BP,OAAO,IAAIJ,MAAM,CAACY,YAAY,EAC9Bb,KAAK,CAACN,KAAK,CAACS,SAAS,CACtB;;EAGH,IAAIH,KAAK,CAACL,IAAI,EAAE;IACdK,KAAK,CAACL,IAAI,CAACQ,SAAS,GAAGf,YAAY,CACjCI,yBAAyB,CAACG,IAAI,EAC9BO,QAAQ,IAAID,MAAM,CAACa,YAAY,EAC/BT,OAAO,IAAIJ,MAAM,CAACc,WAAW,EAC7Bf,KAAK,CAACL,IAAI,CAACQ,SAAS,CACrB;;EAGH,IAAIH,KAAK,CAACJ,WAAW,EAAE;IACrBI,KAAK,CAACJ,WAAW,CAACO,SAAS,GAAGf,YAAY,CACxCI,yBAAyB,CAACI,WAAW,EACrCK,MAAM,CAACL,WAAW,EAClBI,KAAK,CAACJ,WAAW,CAACO,SAAS,CAC5B;;EAGH,IAAIH,KAAK,CAACH,OAAO,EAAE;IACjBG,KAAK,CAACH,OAAO,CAACM,SAAS,GAAGf,YAAY,CACpCI,yBAAyB,CAACK,OAAO,EACjCI,MAAM,CAACJ,OAAO,EACdK,QAAQ,IAAID,MAAM,CAACe,eAAe,EAClChB,KAAK,CAACH,OAAO,CAACM,SAAS,CACxB;;EAGH,OAAOH,KAAK;AACd,CAAC","names":["mergeClasses","shorthands","tokens","typographyStyles","tableCellLayoutClassNames","root","media","main","description","content","useStyles","useTableCellLayoutStyles_unstable","state","styles","truncate","className","rootTruncate","primary","appearance","mediaSizedStyles","small","mediaSmallAndMedium","medium","mediaExtraSmall","size","mediaPrimary","mainTruncate","mainPrimary","contentTruncate"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableCellLayoutSlots, TableCellLayoutState } from './TableCellLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const tableCellLayoutClassNames: SlotClassNames<TableCellLayoutSlots> = {\n  root: 'fui-TableCellLayout',\n  media: 'fui-TableCellLayout__media',\n  main: 'fui-TableCellLayout__main',\n  description: 'fui-TableCellLayout__description',\n  content: 'fui-TableCellLayout__content',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    ...shorthands.gap(tokens.spacingHorizontalS),\n    ...shorthands.flex(1, 1, '0px'),\n  },\n\n  rootTruncate: {\n    overflowX: 'hidden',\n  },\n\n  content: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n\n  contentTruncate: {\n    overflowX: 'hidden',\n  },\n\n  media: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n\n  mediaExtraSmall: {\n    fontSize: '16px',\n  },\n\n  mediaSmallAndMedium: {\n    fontSize: '20px',\n  },\n\n  mediaPrimary: {\n    fontSize: '24px',\n  },\n\n  mainPrimary: {\n    fontWeight: tokens.fontWeightSemibold,\n  },\n\n  mainTruncate: {\n    overflowX: 'hidden',\n    whiteSpace: 'nowrap',\n    textOverflow: 'ellipsis',\n  },\n\n  description: {\n    color: tokens.colorNeutralForeground2,\n    ...typographyStyles.caption1,\n  },\n});\n\n/**\n * Apply styling to the TableCellLayout slots based on the state\n */\nexport const useTableCellLayoutStyles_unstable = (state: TableCellLayoutState): TableCellLayoutState => {\n  const styles = useStyles();\n  const { truncate } = state;\n\n  state.root.className = mergeClasses(\n    tableCellLayoutClassNames.root,\n    styles.root,\n    truncate && styles.rootTruncate,\n    state.root.className,\n  );\n  const primary = state.appearance === 'primary';\n\n  if (state.media) {\n    const mediaSizedStyles = {\n      small: styles.mediaSmallAndMedium,\n      medium: styles.mediaSmallAndMedium,\n      'extra-small': styles.mediaExtraSmall,\n    };\n\n    state.media.className = mergeClasses(\n      tableCellLayoutClassNames.media,\n      styles.media,\n      mediaSizedStyles[state.size],\n      primary && styles.mediaPrimary,\n      state.media.className,\n    );\n  }\n\n  if (state.main) {\n    state.main.className = mergeClasses(\n      tableCellLayoutClassNames.main,\n      truncate && styles.mainTruncate,\n      primary && styles.mainPrimary,\n      state.main.className,\n    );\n  }\n\n  if (state.description) {\n    state.description.className = mergeClasses(\n      tableCellLayoutClassNames.description,\n      styles.description,\n      state.description.className,\n    );\n  }\n\n  if (state.content) {\n    state.content.className = mergeClasses(\n      tableCellLayoutClassNames.content,\n      styles.content,\n      truncate && styles.contentTruncate,\n      state.content.className,\n    );\n  }\n\n  return state;\n};\n"]}

package/lib/components/TableSelectionCell/useTableSelectionCellStyles.js

@@ -1,6 +1,7 @@
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
+export const CELL_WIDTH = 44;
 export const tableSelectionCellClassNames = {
   root: 'fui-TableSelectionCell',
   checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',

package/lib/components/TableSelectionCell/useTableSelectionCellStyles.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,mBAAqBA,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAGrE,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAE9C,OAAO,MAAMC,4BAA4B,GAA4C;EACnFC,IAAI,EAAE,wBAAwB;EAC9BC,iBAAiB,EAAE,2CAA2C;EAC9DC,cAAc,EAAE;CACjB;AAED,MAAMC,oBAAoB,gBAAG;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAK3B;AAEF,MAAMC,mBAAmB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAQ1B;AAEF;;;AAGA,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAkChB;AAEF;;;AAGA,OAAO,MAAMC,oCAAoC,GAAIC,KAA8B,IAA6B;EAC9G,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1B,MAAMI,YAAY,GAAG;IACnBC,KAAK,EAAEP,oBAAoB,EAAE;IAC7BQ,IAAI,EAAEP,mBAAmB;GAC1B;EACDG,KAAK,CAACP,IAAI,CAACY,SAAS,GAAGjB,YAAY,CACjCI,4BAA4B,CAACC,IAAI,EACjCQ,MAAM,CAACR,IAAI,EACXO,KAAK,CAACM,gBAAgB,GAAGJ,YAAY,CAACE,IAAI,CAACX,IAAI,GAAGS,YAAY,CAACC,KAAK,CAACV,IAAI,EACzEO,KAAK,CAACO,MAAM,IAAIP,KAAK,CAACQ,OAAO,KAAK,KAAK,IAAIP,MAAM,CAACM,MAAM,EACxDP,KAAK,CAACS,MAAM,IAAIR,MAAM,CAACQ,MAAM,EAC7BT,KAAK,CAACP,IAAI,CAACY,SAAS,CACrB;EACD,IAAIL,KAAK,CAACN,iBAAiB,EAAE;IAC3BM,KAAK,CAACN,iBAAiB,CAACW,SAAS,GAAGjB,YAAY,CAC9CI,4BAA4B,CAACE,iBAAiB,EAC9CM,KAAK,CAACN,iBAAiB,CAACW,SAAS,CAClC;;EAGH,IAAIL,KAAK,CAACL,cAAc,EAAE;IACxBK,KAAK,CAACL,cAAc,CAACU,SAAS,GAAGjB,YAAY,CAC3CI,4BAA4B,CAACG,cAAc,EAC3CM,MAAM,CAACN,cAAc,EACrBK,KAAK,CAACL,cAAc,CAACU,SAAS,CAC/B;;EAGH,OAAOL,KAAK;AACd,CAAC","names":["mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","tableSelectionCellClassNames","root","checkboxIndicator","radioIndicator","useTableLayoutStyles","useFlexLayoutStyles","useStyles","useTableSelectionCellStyles_unstable","state","styles","layoutStyles","table","flex","className","noNativeElements","subtle","checked","hidden"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TableSelectionCellSlots, TableSelectionCellState } from './TableSelectionCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const tableSelectionCellClassNames: SlotClassNames<TableSelectionCellSlots> = {\n  root: 'fui-TableSelectionCell',\n  checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',\n  radioIndicator: 'fui-TableSelectionCell__radioIndicator',\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-cell',\n    width: '44px',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    ...shorthands.flex(1, 1, '0px'),\n    minWidth: '44px',\n    maxWidth: '44px',\n    justifyContent: 'center',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    textAlign: 'center',\n    whiteSpace: 'nowrap',\n    ...shorthands.padding(0),\n    ...createCustomFocusIndicatorStyle(\n      {\n        ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      },\n      { selector: 'focus', enableOutline: true },\n    ),\n  },\n\n  radioIndicator: {\n    display: 'flex',\n    flexGrow: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n\n  subtle: {\n    opacity: 0,\n    ...createCustomFocusIndicatorStyle(\n      {\n        opacity: 1,\n      },\n      { selector: 'focus-within' },\n    ),\n  },\n\n  hidden: {\n    visibility: 'hidden',\n  },\n});\n\n/**\n * Apply styling to the TableSelectionCell slots based on the state\n */\nexport const useTableSelectionCellStyles_unstable = (state: TableSelectionCellState): TableSelectionCellState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableSelectionCellClassNames.root,\n    styles.root,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.subtle && state.checked === false && styles.subtle,\n    state.hidden && styles.hidden,\n    state.root.className,\n  );\n  if (state.checkboxIndicator) {\n    state.checkboxIndicator.className = mergeClasses(\n      tableSelectionCellClassNames.checkboxIndicator,\n      state.checkboxIndicator.className,\n    );\n  }\n\n  if (state.radioIndicator) {\n    state.radioIndicator.className = mergeClasses(\n      tableSelectionCellClassNames.radioIndicator,\n      styles.radioIndicator,\n      state.radioIndicator.className,\n    );\n  }\n\n  return state;\n};\n"]}
+{"version":3,"mappings":"AAAA,mBAAqBA,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAGrE,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAE9C,OAAO,MAAMC,UAAU,GAAG,EAAE;AAE5B,OAAO,MAAMC,4BAA4B,GAA4C;EACnFC,IAAI,EAAE,wBAAwB;EAC9BC,iBAAiB,EAAE,2CAA2C;EAC9DC,cAAc,EAAE;CACjB;AAED,MAAMC,oBAAoB,gBAAG;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAK3B;AAEF,MAAMC,mBAAmB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAQ1B;AAEF;;;AAGA,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAkChB;AAEF;;;AAGA,OAAO,MAAMC,oCAAoC,GAAIC,KAA8B,IAA6B;EAC9G,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1B,MAAMI,YAAY,GAAG;IACnBC,KAAK,EAAEP,oBAAoB,EAAE;IAC7BQ,IAAI,EAAEP,mBAAmB;GAC1B;EACDG,KAAK,CAACP,IAAI,CAACY,SAAS,GAAGlB,YAAY,CACjCK,4BAA4B,CAACC,IAAI,EACjCQ,MAAM,CAACR,IAAI,EACXO,KAAK,CAACM,gBAAgB,GAAGJ,YAAY,CAACE,IAAI,CAACX,IAAI,GAAGS,YAAY,CAACC,KAAK,CAACV,IAAI,EACzEO,KAAK,CAACO,MAAM,IAAIP,KAAK,CAACQ,OAAO,KAAK,KAAK,IAAIP,MAAM,CAACM,MAAM,EACxDP,KAAK,CAACS,MAAM,IAAIR,MAAM,CAACQ,MAAM,EAC7BT,KAAK,CAACP,IAAI,CAACY,SAAS,CACrB;EACD,IAAIL,KAAK,CAACN,iBAAiB,EAAE;IAC3BM,KAAK,CAACN,iBAAiB,CAACW,SAAS,GAAGlB,YAAY,CAC9CK,4BAA4B,CAACE,iBAAiB,EAC9CM,KAAK,CAACN,iBAAiB,CAACW,SAAS,CAClC;;EAGH,IAAIL,KAAK,CAACL,cAAc,EAAE;IACxBK,KAAK,CAACL,cAAc,CAACU,SAAS,GAAGlB,YAAY,CAC3CK,4BAA4B,CAACG,cAAc,EAC3CM,MAAM,CAACN,cAAc,EACrBK,KAAK,CAACL,cAAc,CAACU,SAAS,CAC/B;;EAGH,OAAOL,KAAK;AACd,CAAC","names":["mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","CELL_WIDTH","tableSelectionCellClassNames","root","checkboxIndicator","radioIndicator","useTableLayoutStyles","useFlexLayoutStyles","useStyles","useTableSelectionCellStyles_unstable","state","styles","layoutStyles","table","flex","className","noNativeElements","subtle","checked","hidden"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TableSelectionCellSlots, TableSelectionCellState } from './TableSelectionCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const CELL_WIDTH = 44;\n\nexport const tableSelectionCellClassNames: SlotClassNames<TableSelectionCellSlots> = {\n  root: 'fui-TableSelectionCell',\n  checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',\n  radioIndicator: 'fui-TableSelectionCell__radioIndicator',\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-cell',\n    width: `${CELL_WIDTH}px`,\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    ...shorthands.flex(1, 1, '0px'),\n    minWidth: `${CELL_WIDTH}px`,\n    maxWidth: `${CELL_WIDTH}px`,\n    justifyContent: 'center',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    textAlign: 'center',\n    whiteSpace: 'nowrap',\n    ...shorthands.padding(0),\n    ...createCustomFocusIndicatorStyle(\n      {\n        ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      },\n      { selector: 'focus', enableOutline: true },\n    ),\n  },\n\n  radioIndicator: {\n    display: 'flex',\n    flexGrow: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n\n  subtle: {\n    opacity: 0,\n    ...createCustomFocusIndicatorStyle(\n      {\n        opacity: 1,\n      },\n      { selector: 'focus-within' },\n    ),\n  },\n\n  hidden: {\n    visibility: 'hidden',\n  },\n});\n\n/**\n * Apply styling to the TableSelectionCell slots based on the state\n */\nexport const useTableSelectionCellStyles_unstable = (state: TableSelectionCellState): TableSelectionCellState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableSelectionCellClassNames.root,\n    styles.root,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.subtle && state.checked === false && styles.subtle,\n    state.hidden && styles.hidden,\n    state.root.className,\n  );\n  if (state.checkboxIndicator) {\n    state.checkboxIndicator.className = mergeClasses(\n      tableSelectionCellClassNames.checkboxIndicator,\n      state.checkboxIndicator.className,\n    );\n  }\n\n  if (state.radioIndicator) {\n    state.radioIndicator.className = mergeClasses(\n      tableSelectionCellClassNames.radioIndicator,\n      styles.radioIndicator,\n      state.radioIndicator.className,\n    );\n  }\n\n  return state;\n};\n"]}