@veeqo/ui 9.10.2 → 9.10.3

package/dist/components/DataGrid/DataGrid.cjs

@@ -6,7 +6,6 @@ require('../../hooks/useFocusVisible.cjs');
 require('uid/secure');
 var useDragToScroll = require('../../hooks/useDragToScroll.cjs');
 require('lodash.throttle');
-var ColumnMapper = require('./utils/ColumnMapper.cjs');
 var getAriaRoles = require('./utils/getAriaRoles.cjs');
 var Columns = require('./components/Columns/Columns.cjs');
 var Header = require('./components/Header/Header.cjs');
@@ -14,11 +13,11 @@ var Body = require('./components/Body/Body.cjs');
 var Footer = require('./components/Footer/Footer.cjs');
 var GridContainer = require('./components/GridContainer/GridContainer.cjs');
 var useSortingState = require('./hooks/useSortingState.cjs');
+var useSelectionState = require('./hooks/useSelectionState.cjs');
 var usePinnedColumnLayout = require('./hooks/usePinnedColumnLayout.cjs');
 var useKeyboardNavigation = require('./hooks/useKeyboardNavigation.cjs');
-var useSelectionState = require('./hooks/useSelectionState.cjs');
-var constants = require('./constants.cjs');
-var SelectionColumnDefinition = require('./columns/SelectionColumnDefinition.cjs');
+var useColumnState = require('./hooks/useColumnState.cjs');
+var useColumnWidthState = require('./hooks/useColumnWidthState.cjs');
 var useExpandedState = require('./hooks/useExpandedState.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -43,7 +42,10 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
  *
  * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*
  */
-const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, enableKeyboardNavigation = false, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, rowGrouping, 'aria-label': ariaLabel, }) => {
+const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, enableKeyboardNavigation = false, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, 'aria-label': ariaLabel, }) => {
+    /**
+     * Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.
+     */
     const containerRef = React.useRef(null);
     const tableRef = React.useRef(null);
     const showFooter = React.useMemo(() => columns.some((column) => column.renderFooter), [columns]);
@@ -61,54 +63,20 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
     const { enableSorting, enableMultiRemove, enableSortingRemoval, manualSorting, sorting, onSortingChange, } = useSortingState.useSortingState({ columns, sortState, onSortChanged });
     const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } = useExpandedState.useExpandedState(rowGrouping);
     /**
-     * Mapping of column definitions.
+     * Hooks to setup column state, including visibility, ordering, pinning, and width(s).
      */
-    const columnMapper = React.useRef(new ColumnMapper.ColumnMapper());
-    const mappedColumnDefinitions = React.useMemo(() => {
-        const mappedColumns = columns.map((column) => columnMapper.current.mapColumnDefinition(column));
-        if (enableRowSelection) {
-            mappedColumns.unshift(SelectionColumnDefinition.SelectionColumnDefinition);
-        }
-        return mappedColumns;
-    }, [columns, enableRowSelection]);
-    /**
-     * Stable references for column states (visibility, order, pinning).
-     */
-    // Column render order - the order of the array indicates the order on screen.
-    const columnOrder = React.useMemo(() => {
-        if (!columnOrdering || columnOrdering.length === 0) {
-            return undefined;
-        }
-        // If we have a custom column order, we need to make sure the selection column always appears first.
-        if (enableRowSelection) {
-            return ['selection', ...columnOrdering];
-        }
-        return columnOrdering;
-    }, [columnOrdering, enableRowSelection]);
-    // Column visibiilty - record of column ID's to visibility, where false/no value = hidden.
-    const columnVisibility = React.useMemo(() => {
-        // We can't have no columns visible - if the array is empty we show them all.
-        if (!hiddenColumns || hiddenColumns.length === columns.length) {
-            return undefined;
-        }
-        return columns.reduce((acc, column) => ({
-            ...acc,
-            [column.id]: !hiddenColumns.includes(column.id),
-        }), {});
-    }, [hiddenColumns, columns]);
-    // Pinned columns
-    const columnPinning = React.useMemo(() => {
-        var _a, _b;
-        let left = (_a = pinnedColumns === null || pinnedColumns === undefined ? undefined : pinnedColumns.left) !== null && _a !== undefined ? _a : [];
-        // If we have any left-pinned columns, we need to include the selection column as it should appear first.
-        if (enableRowSelection && left.length > 0) {
-            left = [constants.SELECTION_COLUMN_ID, ...left];
-        }
-        return {
-            left,
-            right: (_b = pinnedColumns === null || pinnedColumns === undefined ? undefined : pinnedColumns.right) !== null && _b !== undefined ? _b : [],
-        };
-    }, [pinnedColumns, enableRowSelection]);
+    const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState.useColumnState({
+        columns,
+        hiddenColumns,
+        columnOrdering,
+        pinnedColumns,
+        enableRowSelection: !!enableRowSelection,
+    });
+    const { columnSizing, onColumnSizingChange } = useColumnWidthState.useColumnWidthState({
+        mappedColumnDefinitions,
+        columnWidths,
+        onColumnsResized,
+    });
     /**
      * Setup the TanStack table, including mapped column definitions, row data, and any additional state such as
      * column visibility and ordering.
@@ -119,6 +87,7 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
         // Column settings
         columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,
         enableColumnResizing,
+        onColumnSizingChange,
         // Row model
         getRowId,
         getCoreRowModel: reactTable.getCoreRowModel(),
@@ -148,6 +117,7 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
             sorting,
             rowSelection,
             expanded,
+            columnSizing,
         },
     });
     /**

package/dist/components/DataGrid/DataGrid.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.cjs","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { ColumnMapper, getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { MemoizedBody } from './components/Body';\n\nimport { usePinnedColumnLayout, useSortingState, useKeyboardNavigation } from './hooks';\n\nimport { useSelectionState } from './hooks/useSelectionState';\nimport { SELECTION_COLUMN_ID } from './constants';\nimport { SelectionColumnDefinition } from './columns';\nimport { useExpandedState } from './hooks/useExpandedState';\n\n/**\n * [WIP]\n *\n * A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`\n * component, the `DataGrid` supports both flat and hierarchical (tree) data.\n *\n * Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality\n * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.\n *\n * Supported features include:\n * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns\n * - Selection (single and multiple) and disabling of rows.\n * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.\n * - In-built keyboard navigation with arrow keys, and drag to scroll.\n * - Configurable density.\n *\n * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*\n */\nexport const DataGrid = ({\n  density = 'base',\n  striped = true,\n  borderMode = 'full',\n  resizeMode = 'off',\n  containerStyle,\n  enableKeyboardNavigation = false,\n\n  columns,\n  hiddenColumns,\n  columnOrdering,\n  pinnedColumns,\n\n  data,\n  getRowId,\n\n  sortState,\n  onSortChanged,\n\n  selectionMode,\n  selectedRows,\n  disabledRows,\n  onSelectionChanged,\n\n  rowGrouping,\n\n  'aria-label': ariaLabel,\n}: DataGridProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tableRef = useRef<HTMLTableElement>(null);\n\n  const showFooter = useMemo(() => columns.some((column) => column.renderFooter), [columns]);\n  const ariaRoles = useMemo(\n    () => getAriaRoles({ enableKeyboardNavigation, rowGrouping }),\n    [enableKeyboardNavigation, rowGrouping],\n  );\n  const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n  /**\n   * Hooks to handle state for selection, sorting, and expanded/collapsed.\n   */\n\n  const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } =\n    useSelectionState({\n      selectionMode,\n      selectedRows,\n      disabledRows,\n      onSelectionChanged,\n    });\n\n  const {\n    enableSorting,\n    enableMultiRemove,\n    enableSortingRemoval,\n    manualSorting,\n    sorting,\n    onSortingChange,\n  } = useSortingState({ columns, sortState, onSortChanged });\n\n  const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } =\n    useExpandedState(rowGrouping);\n\n  /**\n   * Mapping of column definitions.\n   */\n  const columnMapper = useRef(new ColumnMapper());\n  const mappedColumnDefinitions = useMemo(() => {\n    const mappedColumns = columns.map((column) => columnMapper.current.mapColumnDefinition(column));\n\n    if (enableRowSelection) {\n      mappedColumns.unshift(SelectionColumnDefinition);\n    }\n\n    return mappedColumns;\n  }, [columns, enableRowSelection]);\n\n  /**\n   * Stable references for column states (visibility, order, pinning).\n   */\n\n  // Column render order - the order of the array indicates the order on screen.\n  const columnOrder = useMemo(() => {\n    if (!columnOrdering || columnOrdering.length === 0) {\n      return undefined;\n    }\n\n    // If we have a custom column order, we need to make sure the selection column always appears first.\n    if (enableRowSelection) {\n      return ['selection', ...columnOrdering];\n    }\n\n    return columnOrdering;\n  }, [columnOrdering, enableRowSelection]);\n\n  // Column visibiilty - record of column ID's to visibility, where false/no value = hidden.\n  const columnVisibility = useMemo(() => {\n    // We can't have no columns visible - if the array is empty we show them all.\n    if (!hiddenColumns || hiddenColumns.length === columns.length) {\n      return undefined;\n    }\n\n    return columns.reduce(\n      (acc, column) => ({\n        ...acc,\n        [column.id]: !hiddenColumns.includes(column.id),\n      }),\n      {},\n    );\n  }, [hiddenColumns, columns]);\n\n  // Pinned columns\n  const columnPinning = useMemo(() => {\n    let left = pinnedColumns?.left ?? [];\n\n    // If we have any left-pinned columns, we need to include the selection column as it should appear first.\n    if (enableRowSelection && left.length > 0) {\n      left = [SELECTION_COLUMN_ID, ...left];\n    }\n\n    return {\n      left,\n      right: pinnedColumns?.right ?? [],\n    };\n  }, [pinnedColumns, enableRowSelection]);\n\n  /**\n   * Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n   * column visibility and ordering.\n   */\n  const table = useReactTable<any>({\n    data,\n    columns: mappedColumnDefinitions,\n\n    // Column settings\n    columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n    enableColumnResizing,\n\n    // Row model\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n\n    // Sorting\n    enableSorting,\n    enableSortingRemoval,\n    enableMultiRemove,\n    manualSorting,\n    onSortingChange,\n\n    // Pinning\n    enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n    // Selection\n    enableRowSelection,\n    enableMultiRowSelection,\n    onRowSelectionChange,\n\n    // Row grouping\n    getSubRows,\n    getRowCanExpand,\n    onExpandedChange,\n    enableExpanding,\n    getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,\n\n    // Inject external table state\n    state: {\n      columnOrder,\n      columnVisibility,\n      columnPinning,\n      sorting,\n      rowSelection,\n      expanded,\n    },\n  });\n\n  /**\n   * Pinned column layout\n   */\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n  /**\n   * Other hooks\n   */\n  useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n  useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n  return (\n    <GridContainer\n      containerRef={containerRef}\n      tableRef={tableRef}\n      borderMode={borderMode}\n      containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n      ariaRoles={ariaRoles}\n      enableResizeableColumns={enableColumnResizing}\n      density={density}\n      table={table}\n      aria-label={ariaLabel}\n    >\n      {/* Columns */}\n      {enableColumnResizing && <Columns table={table} />}\n\n      {/* Header */}\n      <Header table={table} />\n\n      {/* Body */}\n      {table.getState().columnSizingInfo.isResizingColumn ? (\n        <MemoizedBody table={table} ariaRoles={ariaRoles} striped={striped} />\n      ) : (\n        <Body table={table} ariaRoles={ariaRoles} striped={striped} />\n      )}\n\n      {/* Footer */}\n      {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n    </GridContainer>\n  );\n};\n"],"names":["useRef","useMemo","getAriaRoles","useSelectionState","useSortingState","useExpandedState","ColumnMapper","SelectionColumnDefinition","SELECTION_COLUMN_ID","useReactTable","getCoreRowModel","getExpandedRowModel","usePinnedColumnLayout","useDragToScroll","useKeyboardNavigation","React","GridContainer","Columns","Header","MemoizedBody","Body","Footer"],"mappings":"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"}
+{"version":3,"file":"DataGrid.cjs","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { MemoizedBody } from './components/Body';\n\nimport {\n  usePinnedColumnLayout,\n  useSortingState,\n  useKeyboardNavigation,\n  useColumnState,\n  useExpandedState,\n  useColumnWidthState,\n  useSelectionState,\n} from './hooks';\n\n/**\n * [WIP]\n *\n * A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`\n * component, the `DataGrid` supports both flat and hierarchical (tree) data.\n *\n * Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality\n * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.\n *\n * Supported features include:\n * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns\n * - Selection (single and multiple) and disabling of rows.\n * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.\n * - In-built keyboard navigation with arrow keys, and drag to scroll.\n * - Configurable density.\n *\n * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*\n */\nexport const DataGrid = ({\n  density = 'base',\n  striped = true,\n  borderMode = 'full',\n  resizeMode = 'off',\n  containerStyle,\n  enableKeyboardNavigation = false,\n\n  columns,\n  hiddenColumns,\n  columnOrdering,\n  pinnedColumns,\n\n  data,\n  getRowId,\n\n  sortState,\n  onSortChanged,\n\n  selectionMode,\n  selectedRows,\n  disabledRows,\n  onSelectionChanged,\n\n  rowGrouping,\n\n  columnWidths,\n  onColumnsResized,\n\n  'aria-label': ariaLabel,\n}: DataGridProps) => {\n  /**\n   * Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.\n   */\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tableRef = useRef<HTMLTableElement>(null);\n\n  const showFooter = useMemo(() => columns.some((column) => column.renderFooter), [columns]);\n  const ariaRoles = useMemo(\n    () => getAriaRoles({ enableKeyboardNavigation, rowGrouping }),\n    [enableKeyboardNavigation, rowGrouping],\n  );\n  const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n  /**\n   * Hooks to handle state for selection, sorting, and expanded/collapsed.\n   */\n  const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } =\n    useSelectionState({\n      selectionMode,\n      selectedRows,\n      disabledRows,\n      onSelectionChanged,\n    });\n\n  const {\n    enableSorting,\n    enableMultiRemove,\n    enableSortingRemoval,\n    manualSorting,\n    sorting,\n    onSortingChange,\n  } = useSortingState({ columns, sortState, onSortChanged });\n\n  const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } =\n    useExpandedState(rowGrouping);\n\n  /**\n   * Hooks to setup column state, including visibility, ordering, pinning, and width(s).\n   */\n  const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState({\n    columns,\n    hiddenColumns,\n    columnOrdering,\n    pinnedColumns,\n    enableRowSelection: !!enableRowSelection,\n  });\n\n  const { columnSizing, onColumnSizingChange } = useColumnWidthState({\n    mappedColumnDefinitions,\n    columnWidths,\n    onColumnsResized,\n  });\n\n  /**\n   * Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n   * column visibility and ordering.\n   */\n  const table = useReactTable<any>({\n    data,\n    columns: mappedColumnDefinitions,\n\n    // Column settings\n    columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n    enableColumnResizing,\n    onColumnSizingChange,\n\n    // Row model\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n\n    // Sorting\n    enableSorting,\n    enableSortingRemoval,\n    enableMultiRemove,\n    manualSorting,\n    onSortingChange,\n\n    // Pinning\n    enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n    // Selection\n    enableRowSelection,\n    enableMultiRowSelection,\n    onRowSelectionChange,\n\n    // Row grouping\n    getSubRows,\n    getRowCanExpand,\n    onExpandedChange,\n    enableExpanding,\n    getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,\n\n    // Inject external table state\n    state: {\n      columnOrder,\n      columnVisibility,\n      columnPinning,\n      sorting,\n      rowSelection,\n      expanded,\n      columnSizing,\n    },\n  });\n\n  /**\n   * Pinned column layout\n   */\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n  /**\n   * Other hooks\n   */\n  useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n  useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n  return (\n    <GridContainer\n      containerRef={containerRef}\n      tableRef={tableRef}\n      borderMode={borderMode}\n      containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n      ariaRoles={ariaRoles}\n      enableResizeableColumns={enableColumnResizing}\n      density={density}\n      table={table}\n      aria-label={ariaLabel}\n    >\n      {/* Columns */}\n      {enableColumnResizing && <Columns table={table} />}\n\n      {/* Header */}\n      <Header table={table} />\n\n      {/* Body */}\n      {table.getState().columnSizingInfo.isResizingColumn ? (\n        <MemoizedBody table={table} ariaRoles={ariaRoles} striped={striped} />\n      ) : (\n        <Body table={table} ariaRoles={ariaRoles} striped={striped} />\n      )}\n\n      {/* Footer */}\n      {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n    </GridContainer>\n  );\n};\n"],"names":["useRef","useMemo","getAriaRoles","useSelectionState","useSortingState","useExpandedState","useColumnState","useColumnWidthState","useReactTable","getCoreRowModel","getExpandedRowModel","usePinnedColumnLayout","useDragToScroll","useKeyboardNavigation","React","GridContainer","Columns","Header","MemoizedBody","Body","Footer"],"mappings":"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"}

package/dist/components/DataGrid/DataGrid.d.ts

@@ -18,4 +18,4 @@ import { DataGridProps } from './types';
  *
  * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*
  */
-export declare const DataGrid: ({ density, striped, borderMode, resizeMode, containerStyle, enableKeyboardNavigation, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, rowGrouping, "aria-label": ariaLabel, }: DataGridProps) => React.JSX.Element;
+export declare const DataGrid: ({ density, striped, borderMode, resizeMode, containerStyle, enableKeyboardNavigation, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, "aria-label": ariaLabel, }: DataGridProps) => React.JSX.Element;

package/dist/components/DataGrid/DataGrid.js

@@ -4,7 +4,6 @@ import '../../hooks/useFocusVisible.js';
 import 'uid/secure';
 import { useDragToScroll } from '../../hooks/useDragToScroll.js';
 import 'lodash.throttle';
-import { ColumnMapper } from './utils/ColumnMapper.js';
 import { getAriaRoles } from './utils/getAriaRoles.js';
 import { Columns } from './components/Columns/Columns.js';
 import { Header } from './components/Header/Header.js';
@@ -12,11 +11,11 @@ import { MemoizedBody, Body } from './components/Body/Body.js';
 import { Footer } from './components/Footer/Footer.js';
 import { GridContainer } from './components/GridContainer/GridContainer.js';
 import { useSortingState } from './hooks/useSortingState.js';
+import { useSelectionState } from './hooks/useSelectionState.js';
 import { usePinnedColumnLayout } from './hooks/usePinnedColumnLayout.js';
 import { useKeyboardNavigation } from './hooks/useKeyboardNavigation.js';
-import { useSelectionState } from './hooks/useSelectionState.js';
-import { SELECTION_COLUMN_ID } from './constants.js';
-import { SelectionColumnDefinition } from './columns/SelectionColumnDefinition.js';
+import { useColumnState } from './hooks/useColumnState.js';
+import { useColumnWidthState } from './hooks/useColumnWidthState.js';
 import { useExpandedState } from './hooks/useExpandedState.js';
 
 /**
@@ -37,7 +36,10 @@ import { useExpandedState } from './hooks/useExpandedState.js';
  *
  * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*
  */
-const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, enableKeyboardNavigation = false, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, rowGrouping, 'aria-label': ariaLabel, }) => {
+const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, enableKeyboardNavigation = false, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, 'aria-label': ariaLabel, }) => {
+    /**
+     * Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.
+     */
     const containerRef = useRef(null);
     const tableRef = useRef(null);
     const showFooter = useMemo(() => columns.some((column) => column.renderFooter), [columns]);
@@ -55,54 +57,20 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
     const { enableSorting, enableMultiRemove, enableSortingRemoval, manualSorting, sorting, onSortingChange, } = useSortingState({ columns, sortState, onSortChanged });
     const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } = useExpandedState(rowGrouping);
     /**
-     * Mapping of column definitions.
+     * Hooks to setup column state, including visibility, ordering, pinning, and width(s).
      */
-    const columnMapper = useRef(new ColumnMapper());
-    const mappedColumnDefinitions = useMemo(() => {
-        const mappedColumns = columns.map((column) => columnMapper.current.mapColumnDefinition(column));
-        if (enableRowSelection) {
-            mappedColumns.unshift(SelectionColumnDefinition);
-        }
-        return mappedColumns;
-    }, [columns, enableRowSelection]);
-    /**
-     * Stable references for column states (visibility, order, pinning).
-     */
-    // Column render order - the order of the array indicates the order on screen.
-    const columnOrder = useMemo(() => {
-        if (!columnOrdering || columnOrdering.length === 0) {
-            return undefined;
-        }
-        // If we have a custom column order, we need to make sure the selection column always appears first.
-        if (enableRowSelection) {
-            return ['selection', ...columnOrdering];
-        }
-        return columnOrdering;
-    }, [columnOrdering, enableRowSelection]);
-    // Column visibiilty - record of column ID's to visibility, where false/no value = hidden.
-    const columnVisibility = useMemo(() => {
-        // We can't have no columns visible - if the array is empty we show them all.
-        if (!hiddenColumns || hiddenColumns.length === columns.length) {
-            return undefined;
-        }
-        return columns.reduce((acc, column) => ({
-            ...acc,
-            [column.id]: !hiddenColumns.includes(column.id),
-        }), {});
-    }, [hiddenColumns, columns]);
-    // Pinned columns
-    const columnPinning = useMemo(() => {
-        var _a, _b;
-        let left = (_a = pinnedColumns === null || pinnedColumns === undefined ? undefined : pinnedColumns.left) !== null && _a !== undefined ? _a : [];
-        // If we have any left-pinned columns, we need to include the selection column as it should appear first.
-        if (enableRowSelection && left.length > 0) {
-            left = [SELECTION_COLUMN_ID, ...left];
-        }
-        return {
-            left,
-            right: (_b = pinnedColumns === null || pinnedColumns === undefined ? undefined : pinnedColumns.right) !== null && _b !== undefined ? _b : [],
-        };
-    }, [pinnedColumns, enableRowSelection]);
+    const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState({
+        columns,
+        hiddenColumns,
+        columnOrdering,
+        pinnedColumns,
+        enableRowSelection: !!enableRowSelection,
+    });
+    const { columnSizing, onColumnSizingChange } = useColumnWidthState({
+        mappedColumnDefinitions,
+        columnWidths,
+        onColumnsResized,
+    });
     /**
      * Setup the TanStack table, including mapped column definitions, row data, and any additional state such as
      * column visibility and ordering.
@@ -113,6 +81,7 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
         // Column settings
         columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,
         enableColumnResizing,
+        onColumnSizingChange,
         // Row model
         getRowId,
         getCoreRowModel: getCoreRowModel(),
@@ -142,6 +111,7 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
             sorting,
             rowSelection,
             expanded,
+            columnSizing,
         },
     });
     /**

package/dist/components/DataGrid/DataGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.js","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { ColumnMapper, getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { MemoizedBody } from './components/Body';\n\nimport { usePinnedColumnLayout, useSortingState, useKeyboardNavigation } from './hooks';\n\nimport { useSelectionState } from './hooks/useSelectionState';\nimport { SELECTION_COLUMN_ID } from './constants';\nimport { SelectionColumnDefinition } from './columns';\nimport { useExpandedState } from './hooks/useExpandedState';\n\n/**\n * [WIP]\n *\n * A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`\n * component, the `DataGrid` supports both flat and hierarchical (tree) data.\n *\n * Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality\n * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.\n *\n * Supported features include:\n * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns\n * - Selection (single and multiple) and disabling of rows.\n * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.\n * - In-built keyboard navigation with arrow keys, and drag to scroll.\n * - Configurable density.\n *\n * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*\n */\nexport const DataGrid = ({\n  density = 'base',\n  striped = true,\n  borderMode = 'full',\n  resizeMode = 'off',\n  containerStyle,\n  enableKeyboardNavigation = false,\n\n  columns,\n  hiddenColumns,\n  columnOrdering,\n  pinnedColumns,\n\n  data,\n  getRowId,\n\n  sortState,\n  onSortChanged,\n\n  selectionMode,\n  selectedRows,\n  disabledRows,\n  onSelectionChanged,\n\n  rowGrouping,\n\n  'aria-label': ariaLabel,\n}: DataGridProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tableRef = useRef<HTMLTableElement>(null);\n\n  const showFooter = useMemo(() => columns.some((column) => column.renderFooter), [columns]);\n  const ariaRoles = useMemo(\n    () => getAriaRoles({ enableKeyboardNavigation, rowGrouping }),\n    [enableKeyboardNavigation, rowGrouping],\n  );\n  const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n  /**\n   * Hooks to handle state for selection, sorting, and expanded/collapsed.\n   */\n\n  const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } =\n    useSelectionState({\n      selectionMode,\n      selectedRows,\n      disabledRows,\n      onSelectionChanged,\n    });\n\n  const {\n    enableSorting,\n    enableMultiRemove,\n    enableSortingRemoval,\n    manualSorting,\n    sorting,\n    onSortingChange,\n  } = useSortingState({ columns, sortState, onSortChanged });\n\n  const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } =\n    useExpandedState(rowGrouping);\n\n  /**\n   * Mapping of column definitions.\n   */\n  const columnMapper = useRef(new ColumnMapper());\n  const mappedColumnDefinitions = useMemo(() => {\n    const mappedColumns = columns.map((column) => columnMapper.current.mapColumnDefinition(column));\n\n    if (enableRowSelection) {\n      mappedColumns.unshift(SelectionColumnDefinition);\n    }\n\n    return mappedColumns;\n  }, [columns, enableRowSelection]);\n\n  /**\n   * Stable references for column states (visibility, order, pinning).\n   */\n\n  // Column render order - the order of the array indicates the order on screen.\n  const columnOrder = useMemo(() => {\n    if (!columnOrdering || columnOrdering.length === 0) {\n      return undefined;\n    }\n\n    // If we have a custom column order, we need to make sure the selection column always appears first.\n    if (enableRowSelection) {\n      return ['selection', ...columnOrdering];\n    }\n\n    return columnOrdering;\n  }, [columnOrdering, enableRowSelection]);\n\n  // Column visibiilty - record of column ID's to visibility, where false/no value = hidden.\n  const columnVisibility = useMemo(() => {\n    // We can't have no columns visible - if the array is empty we show them all.\n    if (!hiddenColumns || hiddenColumns.length === columns.length) {\n      return undefined;\n    }\n\n    return columns.reduce(\n      (acc, column) => ({\n        ...acc,\n        [column.id]: !hiddenColumns.includes(column.id),\n      }),\n      {},\n    );\n  }, [hiddenColumns, columns]);\n\n  // Pinned columns\n  const columnPinning = useMemo(() => {\n    let left = pinnedColumns?.left ?? [];\n\n    // If we have any left-pinned columns, we need to include the selection column as it should appear first.\n    if (enableRowSelection && left.length > 0) {\n      left = [SELECTION_COLUMN_ID, ...left];\n    }\n\n    return {\n      left,\n      right: pinnedColumns?.right ?? [],\n    };\n  }, [pinnedColumns, enableRowSelection]);\n\n  /**\n   * Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n   * column visibility and ordering.\n   */\n  const table = useReactTable<any>({\n    data,\n    columns: mappedColumnDefinitions,\n\n    // Column settings\n    columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n    enableColumnResizing,\n\n    // Row model\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n\n    // Sorting\n    enableSorting,\n    enableSortingRemoval,\n    enableMultiRemove,\n    manualSorting,\n    onSortingChange,\n\n    // Pinning\n    enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n    // Selection\n    enableRowSelection,\n    enableMultiRowSelection,\n    onRowSelectionChange,\n\n    // Row grouping\n    getSubRows,\n    getRowCanExpand,\n    onExpandedChange,\n    enableExpanding,\n    getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,\n\n    // Inject external table state\n    state: {\n      columnOrder,\n      columnVisibility,\n      columnPinning,\n      sorting,\n      rowSelection,\n      expanded,\n    },\n  });\n\n  /**\n   * Pinned column layout\n   */\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n  /**\n   * Other hooks\n   */\n  useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n  useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n  return (\n    <GridContainer\n      containerRef={containerRef}\n      tableRef={tableRef}\n      borderMode={borderMode}\n      containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n      ariaRoles={ariaRoles}\n      enableResizeableColumns={enableColumnResizing}\n      density={density}\n      table={table}\n      aria-label={ariaLabel}\n    >\n      {/* Columns */}\n      {enableColumnResizing && <Columns table={table} />}\n\n      {/* Header */}\n      <Header table={table} />\n\n      {/* Body */}\n      {table.getState().columnSizingInfo.isResizingColumn ? (\n        <MemoizedBody table={table} ariaRoles={ariaRoles} striped={striped} />\n      ) : (\n        <Body table={table} ariaRoles={ariaRoles} striped={striped} />\n      )}\n\n      {/* Footer */}\n      {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n    </GridContainer>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"DataGrid.js","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { MemoizedBody } from './components/Body';\n\nimport {\n  usePinnedColumnLayout,\n  useSortingState,\n  useKeyboardNavigation,\n  useColumnState,\n  useExpandedState,\n  useColumnWidthState,\n  useSelectionState,\n} from './hooks';\n\n/**\n * [WIP]\n *\n * A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`\n * component, the `DataGrid` supports both flat and hierarchical (tree) data.\n *\n * Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality\n * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.\n *\n * Supported features include:\n * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns\n * - Selection (single and multiple) and disabling of rows.\n * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.\n * - In-built keyboard navigation with arrow keys, and drag to scroll.\n * - Configurable density.\n *\n * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*\n */\nexport const DataGrid = ({\n  density = 'base',\n  striped = true,\n  borderMode = 'full',\n  resizeMode = 'off',\n  containerStyle,\n  enableKeyboardNavigation = false,\n\n  columns,\n  hiddenColumns,\n  columnOrdering,\n  pinnedColumns,\n\n  data,\n  getRowId,\n\n  sortState,\n  onSortChanged,\n\n  selectionMode,\n  selectedRows,\n  disabledRows,\n  onSelectionChanged,\n\n  rowGrouping,\n\n  columnWidths,\n  onColumnsResized,\n\n  'aria-label': ariaLabel,\n}: DataGridProps) => {\n  /**\n   * Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.\n   */\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tableRef = useRef<HTMLTableElement>(null);\n\n  const showFooter = useMemo(() => columns.some((column) => column.renderFooter), [columns]);\n  const ariaRoles = useMemo(\n    () => getAriaRoles({ enableKeyboardNavigation, rowGrouping }),\n    [enableKeyboardNavigation, rowGrouping],\n  );\n  const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n  /**\n   * Hooks to handle state for selection, sorting, and expanded/collapsed.\n   */\n  const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } =\n    useSelectionState({\n      selectionMode,\n      selectedRows,\n      disabledRows,\n      onSelectionChanged,\n    });\n\n  const {\n    enableSorting,\n    enableMultiRemove,\n    enableSortingRemoval,\n    manualSorting,\n    sorting,\n    onSortingChange,\n  } = useSortingState({ columns, sortState, onSortChanged });\n\n  const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } =\n    useExpandedState(rowGrouping);\n\n  /**\n   * Hooks to setup column state, including visibility, ordering, pinning, and width(s).\n   */\n  const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState({\n    columns,\n    hiddenColumns,\n    columnOrdering,\n    pinnedColumns,\n    enableRowSelection: !!enableRowSelection,\n  });\n\n  const { columnSizing, onColumnSizingChange } = useColumnWidthState({\n    mappedColumnDefinitions,\n    columnWidths,\n    onColumnsResized,\n  });\n\n  /**\n   * Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n   * column visibility and ordering.\n   */\n  const table = useReactTable<any>({\n    data,\n    columns: mappedColumnDefinitions,\n\n    // Column settings\n    columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n    enableColumnResizing,\n    onColumnSizingChange,\n\n    // Row model\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n\n    // Sorting\n    enableSorting,\n    enableSortingRemoval,\n    enableMultiRemove,\n    manualSorting,\n    onSortingChange,\n\n    // Pinning\n    enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n    // Selection\n    enableRowSelection,\n    enableMultiRowSelection,\n    onRowSelectionChange,\n\n    // Row grouping\n    getSubRows,\n    getRowCanExpand,\n    onExpandedChange,\n    enableExpanding,\n    getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,\n\n    // Inject external table state\n    state: {\n      columnOrder,\n      columnVisibility,\n      columnPinning,\n      sorting,\n      rowSelection,\n      expanded,\n      columnSizing,\n    },\n  });\n\n  /**\n   * Pinned column layout\n   */\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n  /**\n   * Other hooks\n   */\n  useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n  useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n  return (\n    <GridContainer\n      containerRef={containerRef}\n      tableRef={tableRef}\n      borderMode={borderMode}\n      containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n      ariaRoles={ariaRoles}\n      enableResizeableColumns={enableColumnResizing}\n      density={density}\n      table={table}\n      aria-label={ariaLabel}\n    >\n      {/* Columns */}\n      {enableColumnResizing && <Columns table={table} />}\n\n      {/* Header */}\n      <Header table={table} />\n\n      {/* Body */}\n      {table.getState().columnSizingInfo.isResizingColumn ? (\n        <MemoizedBody table={table} ariaRoles={ariaRoles} striped={striped} />\n      ) : (\n        <Body table={table} ariaRoles={ariaRoles} striped={striped} />\n      )}\n\n      {/* Footer */}\n      {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n    </GridContainer>\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.cjs

@@ -6,6 +6,15 @@ var buildClassnames = require('../../../../../utils/buildClassnames.cjs');
 require('uid/secure');
 var CellContent = require('../../CellContent/CellContent.cjs');
 var usePinnedColumnStyles = require('../../../hooks/usePinnedColumnStyles.cjs');
+require('../../../../Stack/Stack.cjs');
+require('../../../../../theme/modules/shadows.cjs');
+require('../../../../../theme/modules/sizes.cjs');
+require('../../../../../theme/modules/text.cjs');
+require('styled-components');
+require('../../../../Choice/components/styled.cjs');
+require('../../../../Text/Text.cjs');
+require('../../../../Checkbox/styled.cjs');
+require('../../../../Radio/Radio.cjs');
 var useExpandableCell = require('./hooks/useExpandableCell.cjs');
 var BodyCell_module = require('./BodyCell.module.scss.cjs');
 

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BodyCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { useExpandableCell } from './hooks';\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n  /**\n   * Cell within the TanStack Table instance.\n   */\n  cell: Cell<any, any>;\n\n  /**\n   * ARIA roles for the grid.\n   */\n  ariaRoles: AriaRoles;\n\n  /**\n   * Whether row selection is enabled.\n   */\n  enableRowSelection: boolean;\n\n  /**\n   * Whether row expanding is enabled for the grid.\n   */\n  enableExpanding: boolean;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({\n  cell,\n  ariaRoles,\n  enableRowSelection,\n  enableExpanding,\n}: ColumnCellProps) => {\n  const { justifyContent, textAlign, rowHeader } = cell.column.columnDef.meta!;\n  const CellElement = rowHeader ? 'th' : 'td';\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n  const { expandButtonProps, contentMarginLeft } = useExpandableCell({\n    cell,\n    enableExpanding,\n    enableRowSelection,\n  });\n\n  const bodyCellClassname = buildClassnames([\n    styles.bodyCell,\n    pinnedCellClassName,\n    'data-grid-cell',\n  ]);\n\n  return (\n    <CellElement\n      className={bodyCellClassname}\n      aria-colindex={cell.column.getIndex() + 1}\n      scope={rowHeader ? 'row' : undefined}\n      role={rowHeader ? 'rowheader' : ariaRoles.cell}\n      style={pinnedCellStyles}\n    >\n      <CellContent\n        contentStyle={\n          {\n            marginLeft: contentMarginLeft,\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n        expandButtonProps={expandButtonProps}\n      >\n        {flexRender(cell.column.columnDef.cell, cell.getContext())}\n      </CellContent>\n    </CellElement>\n  );\n};\n"],"names":["usePinnedColumnStyles","useExpandableCell","buildClassnames","styles","React","CellContent","flexRender"],"mappings":";;;;;;;;;;;;;;;AAmCA;;AAEG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,kBAAkB,EAClB,eAAe,GACC,KAAI;AACpB,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAC5E,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAGA,2CAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAEhG,IAAA,MAAM,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAGC,mCAAiB,CAAC;QACjE,IAAI;QACJ,eAAe;QACf,kBAAkB;AACnB,KAAA,CAAC;IAEF,MAAM,iBAAiB,GAAGC,+BAAe,CAAC;AACxC,QAAAC,eAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;IAEF,QACEC,qCAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA;QAEvBA,sBAAC,CAAA,aAAA,CAAAC,uBAAW,EACV,EAAA,YAAY,EACV;AACE,gBAAA,UAAU,EAAE,iBAAiB;gBAC7B,cAAc;gBACd,SAAS;aACa,EAE1B,iBAAiB,EAAE,iBAAiB,EAAA,EAEnCC,qBAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAC9C,CACF;AAElB;;;;"}
+{"version":3,"file":"BodyCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { useExpandableCell } from './hooks';\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n  /**\n   * Cell within the TanStack Table instance.\n   */\n  cell: Cell<any, any>;\n\n  /**\n   * ARIA roles for the grid.\n   */\n  ariaRoles: AriaRoles;\n\n  /**\n   * Whether row selection is enabled.\n   */\n  enableRowSelection: boolean;\n\n  /**\n   * Whether row expanding is enabled for the grid.\n   */\n  enableExpanding: boolean;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({\n  cell,\n  ariaRoles,\n  enableRowSelection,\n  enableExpanding,\n}: ColumnCellProps) => {\n  const { justifyContent, textAlign, rowHeader } = cell.column.columnDef.meta!;\n  const CellElement = rowHeader ? 'th' : 'td';\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n  const { expandButtonProps, contentMarginLeft } = useExpandableCell({\n    cell,\n    enableExpanding,\n    enableRowSelection,\n  });\n\n  const bodyCellClassname = buildClassnames([\n    styles.bodyCell,\n    pinnedCellClassName,\n    'data-grid-cell',\n  ]);\n\n  return (\n    <CellElement\n      className={bodyCellClassname}\n      aria-colindex={cell.column.getIndex() + 1}\n      scope={rowHeader ? 'row' : undefined}\n      role={rowHeader ? 'rowheader' : ariaRoles.cell}\n      style={pinnedCellStyles}\n    >\n      <CellContent\n        contentStyle={\n          {\n            marginLeft: contentMarginLeft,\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n        expandButtonProps={expandButtonProps}\n      >\n        {flexRender(cell.column.columnDef.cell, cell.getContext())}\n      </CellContent>\n    </CellElement>\n  );\n};\n"],"names":["usePinnedColumnStyles","useExpandableCell","buildClassnames","styles","React","CellContent","flexRender"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAmCA;;AAEG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,kBAAkB,EAClB,eAAe,GACC,KAAI;AACpB,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAC5E,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAGA,2CAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAEhG,IAAA,MAAM,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAGC,mCAAiB,CAAC;QACjE,IAAI;QACJ,eAAe;QACf,kBAAkB;AACnB,KAAA,CAAC;IAEF,MAAM,iBAAiB,GAAGC,+BAAe,CAAC;AACxC,QAAAC,eAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;IAEF,QACEC,qCAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA;QAEvBA,sBAAC,CAAA,aAAA,CAAAC,uBAAW,EACV,EAAA,YAAY,EACV;AACE,gBAAA,UAAU,EAAE,iBAAiB;gBAC7B,cAAc;gBACd,SAAS;aACa,EAE1B,iBAAiB,EAAE,iBAAiB,EAAA,EAEnCC,qBAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAC9C,CACF;AAElB;;;;"}

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.js

@@ -4,6 +4,15 @@ import { buildClassnames } from '../../../../../utils/buildClassnames.js';
 import 'uid/secure';
 import { CellContent } from '../../CellContent/CellContent.js';
 import { usePinnedColumnStyles } from '../../../hooks/usePinnedColumnStyles.js';
+import '../../../../Stack/Stack.js';
+import '../../../../../theme/modules/shadows.js';
+import '../../../../../theme/modules/sizes.js';
+import '../../../../../theme/modules/text.js';
+import 'styled-components';
+import '../../../../Choice/components/styled.js';
+import '../../../../Text/Text.js';
+import '../../../../Checkbox/styled.js';
+import '../../../../Radio/Radio.js';
 import { useExpandableCell } from './hooks/useExpandableCell.js';
 import styles from './BodyCell.module.scss.js';
 

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"BodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { useExpandableCell } from './hooks';\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n  /**\n   * Cell within the TanStack Table instance.\n   */\n  cell: Cell<any, any>;\n\n  /**\n   * ARIA roles for the grid.\n   */\n  ariaRoles: AriaRoles;\n\n  /**\n   * Whether row selection is enabled.\n   */\n  enableRowSelection: boolean;\n\n  /**\n   * Whether row expanding is enabled for the grid.\n   */\n  enableExpanding: boolean;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({\n  cell,\n  ariaRoles,\n  enableRowSelection,\n  enableExpanding,\n}: ColumnCellProps) => {\n  const { justifyContent, textAlign, rowHeader } = cell.column.columnDef.meta!;\n  const CellElement = rowHeader ? 'th' : 'td';\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n  const { expandButtonProps, contentMarginLeft } = useExpandableCell({\n    cell,\n    enableExpanding,\n    enableRowSelection,\n  });\n\n  const bodyCellClassname = buildClassnames([\n    styles.bodyCell,\n    pinnedCellClassName,\n    'data-grid-cell',\n  ]);\n\n  return (\n    <CellElement\n      className={bodyCellClassname}\n      aria-colindex={cell.column.getIndex() + 1}\n      scope={rowHeader ? 'row' : undefined}\n      role={rowHeader ? 'rowheader' : ariaRoles.cell}\n      style={pinnedCellStyles}\n    >\n      <CellContent\n        contentStyle={\n          {\n            marginLeft: contentMarginLeft,\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n        expandButtonProps={expandButtonProps}\n      >\n        {flexRender(cell.column.columnDef.cell, cell.getContext())}\n      </CellContent>\n    </CellElement>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;AAmCA;;AAEG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,kBAAkB,EAClB,eAAe,GACC,KAAI;AACpB,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAC5E,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAEhG,IAAA,MAAM,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,CAAC;QACjE,IAAI;QACJ,eAAe;QACf,kBAAkB;AACnB,KAAA,CAAC;IAEF,MAAM,iBAAiB,GAAG,eAAe,CAAC;AACxC,QAAA,MAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;IAEF,QACEA,6BAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA;QAEvBA,cAAC,CAAA,aAAA,CAAA,WAAW,EACV,EAAA,YAAY,EACV;AACE,gBAAA,UAAU,EAAE,iBAAiB;gBAC7B,cAAc;gBACd,SAAS;aACa,EAE1B,iBAAiB,EAAE,iBAAiB,EAAA,EAEnC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAC9C,CACF;AAElB;;;;"}
+{"version":3,"file":"BodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { useExpandableCell } from './hooks';\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n  /**\n   * Cell within the TanStack Table instance.\n   */\n  cell: Cell<any, any>;\n\n  /**\n   * ARIA roles for the grid.\n   */\n  ariaRoles: AriaRoles;\n\n  /**\n   * Whether row selection is enabled.\n   */\n  enableRowSelection: boolean;\n\n  /**\n   * Whether row expanding is enabled for the grid.\n   */\n  enableExpanding: boolean;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({\n  cell,\n  ariaRoles,\n  enableRowSelection,\n  enableExpanding,\n}: ColumnCellProps) => {\n  const { justifyContent, textAlign, rowHeader } = cell.column.columnDef.meta!;\n  const CellElement = rowHeader ? 'th' : 'td';\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n  const { expandButtonProps, contentMarginLeft } = useExpandableCell({\n    cell,\n    enableExpanding,\n    enableRowSelection,\n  });\n\n  const bodyCellClassname = buildClassnames([\n    styles.bodyCell,\n    pinnedCellClassName,\n    'data-grid-cell',\n  ]);\n\n  return (\n    <CellElement\n      className={bodyCellClassname}\n      aria-colindex={cell.column.getIndex() + 1}\n      scope={rowHeader ? 'row' : undefined}\n      role={rowHeader ? 'rowheader' : ariaRoles.cell}\n      style={pinnedCellStyles}\n    >\n      <CellContent\n        contentStyle={\n          {\n            marginLeft: contentMarginLeft,\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n        expandButtonProps={expandButtonProps}\n      >\n        {flexRender(cell.column.columnDef.cell, cell.getContext())}\n      </CellContent>\n    </CellElement>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;AAmCA;;AAEG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,kBAAkB,EAClB,eAAe,GACC,KAAI;AACpB,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAC5E,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAEhG,IAAA,MAAM,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,CAAC;QACjE,IAAI;QACJ,eAAe;QACf,kBAAkB;AACnB,KAAA,CAAC;IAEF,MAAM,iBAAiB,GAAG,eAAe,CAAC;AACxC,QAAA,MAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;IAEF,QACEA,6BAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA;QAEvBA,cAAC,CAAA,aAAA,CAAA,WAAW,EACV,EAAA,YAAY,EACV;AACE,gBAAA,UAAU,EAAE,iBAAiB;gBAC7B,cAAc;gBACd,SAAS;aACa,EAE1B,iBAAiB,EAAE,iBAAiB,EAAA,EAEnC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAC9C,CACF;AAElB;;;;"}

package/dist/components/DataGrid/components/Columns/Columns.cjs

@@ -5,8 +5,6 @@ require('../../../../hooks/useFocusVisible.cjs');
 require('uid/secure');
 var useResizeObserver = require('../../../../hooks/useResizeObserver.cjs');
 require('lodash.throttle');
-var isLastColumn = require('../../utils/isLastColumn.cjs');
-require('@tanstack/react-table');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -21,17 +19,20 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
  */
 const Columns = ({ table }) => {
     const headers = table.getLeafHeaders();
-    // Setup state and hook to observe the last column in the table. If the last column is larger than its
-    // default size, we allow it to render with `width: auto;` to ensure the table fills the container.
-    // If the last column is smaller than its default size, the table should start to 'overflow' its parent,
-    // so we switch to using a fixed width on the column instead.
+    /**
+     * Setup state and hook to observe the last column in the table. If the last column is larger than its
+     * default size, we allow it to render with `width: auto;` to ensure the table fills the container.
+     *
+     * If the last column is smaller than its default size, the table should start to 'overflow' its parent,
+     * so we switch to using a fixed width on the column instead.
+     */
     const lastColumnRef = React.useRef(null);
     const [lastColumnAuto, setLastColumnAuto] = React.useState(true);
     useResizeObserver.useResizeObserver({
         targetRef: lastColumnRef,
         resizeHandler: ({ width }) => {
             const lastHeader = headers[headers.length - 1];
-            if (width <= lastHeader.column.columnDef.size) {
+            if (width <= lastHeader.column.getSize()) {
                 setLastColumnAuto(false);
             }
             else {
@@ -42,7 +43,7 @@ const Columns = ({ table }) => {
     });
     // Memoized columns.
     const columns = React.useMemo(() => (React__default.default.createElement("colgroup", null, headers.map((header) => {
-        const lastColumn = isLastColumn.isLastColumn(table, header.column);
+        const lastColumn = header.column.getIsLastColumn();
         const columnWidth = lastColumn && lastColumnAuto ? 'auto' : `${header.column.getSize()}px`;
         return (React__default.default.createElement("col", { ref: lastColumn ? lastColumnRef : undefined, key: header.column.id, style: { width: columnWidth, minWidth: header.column.columnDef.minSize } }));
     }))), 

package/dist/components/DataGrid/components/Columns/Columns.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Columns.cjs","sources":["../../../../../src/components/DataGrid/components/Columns/Columns.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { useResizeObserver } from '../../../../hooks';\nimport { isLastColumn } from '../../utils';\n\ntype ColumnsProps = {\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n};\n\n/**\n * Renders the colgroup and col's for the table, responsible for controlling the width of columns within the table, including\n * handling situations where overflow may be necessary while resizing.\n *\n * Separated from the Header component to allow for better performance, since we can reliably memoize col's and limit updates only\n * to when the table sizing state changes.\n */\nexport const Columns = ({ table }: ColumnsProps) => {\n  const headers = table.getLeafHeaders();\n\n  // Setup state and hook to observe the last column in the table. If the last column is larger than its\n  // default size, we allow it to render with `width: auto;` to ensure the table fills the container.\n  // If the last column is smaller than its default size, the table should start to 'overflow' its parent,\n  // so we switch to using a fixed width on the column instead.\n  const lastColumnRef = useRef<HTMLTableColElement>(null);\n  const [lastColumnAuto, setLastColumnAuto] = useState(true);\n  useResizeObserver({\n    targetRef: lastColumnRef,\n    resizeHandler: ({ width }) => {\n      const lastHeader = headers[headers.length - 1];\n\n      if (width <= lastHeader.column.columnDef.size!) {\n        setLastColumnAuto(false);\n      } else {\n        setLastColumnAuto(true);\n      }\n    },\n    throttleMs: 10,\n  });\n\n  // Memoized columns.\n  const columns = useMemo(\n    () => (\n      <colgroup>\n        {headers.map((header) => {\n          const lastColumn = isLastColumn(table, header.column);\n          const columnWidth =\n            lastColumn && lastColumnAuto ? 'auto' : `${header.column.getSize()}px`;\n\n          return (\n            <col\n              ref={lastColumn ? lastColumnRef : undefined}\n              key={header.column.id}\n              style={{ width: columnWidth, minWidth: header.column.columnDef.minSize }}\n            />\n          );\n        })}\n      </colgroup>\n    ),\n    // Dependencies here are as recommended by TanStack docs (https://tanstack.com/table/latest/docs/framework/react/examples/column-resizing-performant)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [table.getState().columnSizingInfo, table.getState().columnSizing, lastColumnAuto, headers],\n  );\n\n  return columns;\n};\n"],"names":["useRef","useState","useResizeObserver","useMemo","React","isLastColumn"],"mappings":";;;;;;;;;;;;;;AAaA;;;;;;AAMG;MACU,OAAO,GAAG,CAAC,EAAE,KAAK,EAAgB,KAAI;AACjD,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,cAAc,EAAE;;;;;AAMtC,IAAA,MAAM,aAAa,GAAGA,YAAM,CAAsB,IAAI,CAAC;IACvD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAGC,cAAQ,CAAC,IAAI,CAAC;AAC1D,IAAAC,mCAAiB,CAAC;AAChB,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,aAAa,EAAE,CAAC,EAAE,KAAK,EAAE,KAAI;YAC3B,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;YAE9C,IAAI,KAAK,IAAI,UAAU,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK,EAAE;gBAC9C,iBAAiB,CAAC,KAAK,CAAC;AACzB;AAAM,iBAAA;gBACL,iBAAiB,CAAC,IAAI,CAAC;AACxB;SACF;AACD,QAAA,UAAU,EAAE,EAAE;AACf,KAAA,CAAC;;AAGF,IAAA,MAAM,OAAO,GAAGC,aAAO,CACrB,OACEC,sBACG,CAAA,aAAA,CAAA,UAAA,EAAA,IAAA,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI;QACtB,MAAM,UAAU,GAAGC,yBAAY,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC;QACrD,MAAM,WAAW,GACf,UAAU,IAAI,cAAc,GAAG,MAAM,GAAG,CAAA,EAAG,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI;AAExE,QAAA,QACED,sBACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,UAAU,GAAG,aAAa,GAAG,SAAS,EAC3C,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,EACrB,KAAK,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,EAAA,CACxE;KAEL,CAAC,CACO,CACZ;;;AAGD,IAAA,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,gBAAgB,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,OAAO,CAAC,CAC5F;AAED,IAAA,OAAO,OAAO;AAChB;;;;"}
+{"version":3,"file":"Columns.cjs","sources":["../../../../../src/components/DataGrid/components/Columns/Columns.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { useResizeObserver } from '../../../../hooks';\n\ntype ColumnsProps = {\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n};\n\n/**\n * Renders the colgroup and col's for the table, responsible for controlling the width of columns within the table, including\n * handling situations where overflow may be necessary while resizing.\n *\n * Separated from the Header component to allow for better performance, since we can reliably memoize col's and limit updates only\n * to when the table sizing state changes.\n */\nexport const Columns = ({ table }: ColumnsProps) => {\n  const headers = table.getLeafHeaders();\n\n  /**\n   * Setup state and hook to observe the last column in the table. If the last column is larger than its\n   * default size, we allow it to render with `width: auto;` to ensure the table fills the container.\n   *\n   * If the last column is smaller than its default size, the table should start to 'overflow' its parent,\n   * so we switch to using a fixed width on the column instead.\n   */\n  const lastColumnRef = useRef<HTMLTableColElement>(null);\n  const [lastColumnAuto, setLastColumnAuto] = useState(true);\n  useResizeObserver({\n    targetRef: lastColumnRef,\n    resizeHandler: ({ width }) => {\n      const lastHeader = headers[headers.length - 1];\n      if (width <= lastHeader.column.getSize()) {\n        setLastColumnAuto(false);\n      } else {\n        setLastColumnAuto(true);\n      }\n    },\n    throttleMs: 10,\n  });\n\n  // Memoized columns.\n  const columns = useMemo(\n    () => (\n      <colgroup>\n        {headers.map((header) => {\n          const lastColumn = header.column.getIsLastColumn();\n          const columnWidth =\n            lastColumn && lastColumnAuto ? 'auto' : `${header.column.getSize()}px`;\n\n          return (\n            <col\n              ref={lastColumn ? lastColumnRef : undefined}\n              key={header.column.id}\n              style={{ width: columnWidth, minWidth: header.column.columnDef.minSize }}\n            />\n          );\n        })}\n      </colgroup>\n    ),\n    // Dependencies here are as recommended by TanStack docs (https://tanstack.com/table/latest/docs/framework/react/examples/column-resizing-performant)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [table.getState().columnSizingInfo, table.getState().columnSizing, lastColumnAuto, headers],\n  );\n\n  return columns;\n};\n"],"names":["useRef","useState","useResizeObserver","useMemo","React"],"mappings":";;;;;;;;;;;;AAYA;;;;;;AAMG;MACU,OAAO,GAAG,CAAC,EAAE,KAAK,EAAgB,KAAI;AACjD,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,cAAc,EAAE;AAEtC;;;;;;AAMG;AACH,IAAA,MAAM,aAAa,GAAGA,YAAM,CAAsB,IAAI,CAAC;IACvD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAGC,cAAQ,CAAC,IAAI,CAAC;AAC1D,IAAAC,mCAAiB,CAAC;AAChB,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,aAAa,EAAE,CAAC,EAAE,KAAK,EAAE,KAAI;YAC3B,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;YAC9C,IAAI,KAAK,IAAI,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE;gBACxC,iBAAiB,CAAC,KAAK,CAAC;AACzB;AAAM,iBAAA;gBACL,iBAAiB,CAAC,IAAI,CAAC;AACxB;SACF;AACD,QAAA,UAAU,EAAE,EAAE;AACf,KAAA,CAAC;;AAGF,IAAA,MAAM,OAAO,GAAGC,aAAO,CACrB,OACEC,sBACG,CAAA,aAAA,CAAA,UAAA,EAAA,IAAA,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI;QACtB,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;QAClD,MAAM,WAAW,GACf,UAAU,IAAI,cAAc,GAAG,MAAM,GAAG,CAAA,EAAG,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI;AAExE,QAAA,QACEA,sBACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,UAAU,GAAG,aAAa,GAAG,SAAS,EAC3C,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,EACrB,KAAK,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,EAAA,CACxE;KAEL,CAAC,CACO,CACZ;;;AAGD,IAAA,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,gBAAgB,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,OAAO,CAAC,CAC5F;AAED,IAAA,OAAO,OAAO;AAChB;;;;"}

package/dist/components/DataGrid/components/Columns/Columns.js

@@ -3,8 +3,6 @@ import '../../../../hooks/useFocusVisible.js';
 import 'uid/secure';
 import { useResizeObserver } from '../../../../hooks/useResizeObserver.js';
 import 'lodash.throttle';
-import { isLastColumn } from '../../utils/isLastColumn.js';
-import '@tanstack/react-table';
 
 /**
  * Renders the colgroup and col's for the table, responsible for controlling the width of columns within the table, including
@@ -15,17 +13,20 @@ import '@tanstack/react-table';
  */
 const Columns = ({ table }) => {
     const headers = table.getLeafHeaders();
-    // Setup state and hook to observe the last column in the table. If the last column is larger than its
-    // default size, we allow it to render with `width: auto;` to ensure the table fills the container.
-    // If the last column is smaller than its default size, the table should start to 'overflow' its parent,
-    // so we switch to using a fixed width on the column instead.
+    /**
+     * Setup state and hook to observe the last column in the table. If the last column is larger than its
+     * default size, we allow it to render with `width: auto;` to ensure the table fills the container.
+     *
+     * If the last column is smaller than its default size, the table should start to 'overflow' its parent,
+     * so we switch to using a fixed width on the column instead.
+     */
     const lastColumnRef = useRef(null);
     const [lastColumnAuto, setLastColumnAuto] = useState(true);
     useResizeObserver({
         targetRef: lastColumnRef,
         resizeHandler: ({ width }) => {
             const lastHeader = headers[headers.length - 1];
-            if (width <= lastHeader.column.columnDef.size) {
+            if (width <= lastHeader.column.getSize()) {
                 setLastColumnAuto(false);
             }
             else {
@@ -36,7 +37,7 @@ const Columns = ({ table }) => {
     });
     // Memoized columns.
     const columns = useMemo(() => (React__default.createElement("colgroup", null, headers.map((header) => {
-        const lastColumn = isLastColumn(table, header.column);
+        const lastColumn = header.column.getIsLastColumn();
         const columnWidth = lastColumn && lastColumnAuto ? 'auto' : `${header.column.getSize()}px`;
         return (React__default.createElement("col", { ref: lastColumn ? lastColumnRef : undefined, key: header.column.id, style: { width: columnWidth, minWidth: header.column.columnDef.minSize } }));
     }))), 

package/dist/components/DataGrid/components/Columns/Columns.js.map

@@ -1 +1 @@
-{"version":3,"file":"Columns.js","sources":["../../../../../src/components/DataGrid/components/Columns/Columns.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { useResizeObserver } from '../../../../hooks';\nimport { isLastColumn } from '../../utils';\n\ntype ColumnsProps = {\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n};\n\n/**\n * Renders the colgroup and col's for the table, responsible for controlling the width of columns within the table, including\n * handling situations where overflow may be necessary while resizing.\n *\n * Separated from the Header component to allow for better performance, since we can reliably memoize col's and limit updates only\n * to when the table sizing state changes.\n */\nexport const Columns = ({ table }: ColumnsProps) => {\n  const headers = table.getLeafHeaders();\n\n  // Setup state and hook to observe the last column in the table. If the last column is larger than its\n  // default size, we allow it to render with `width: auto;` to ensure the table fills the container.\n  // If the last column is smaller than its default size, the table should start to 'overflow' its parent,\n  // so we switch to using a fixed width on the column instead.\n  const lastColumnRef = useRef<HTMLTableColElement>(null);\n  const [lastColumnAuto, setLastColumnAuto] = useState(true);\n  useResizeObserver({\n    targetRef: lastColumnRef,\n    resizeHandler: ({ width }) => {\n      const lastHeader = headers[headers.length - 1];\n\n      if (width <= lastHeader.column.columnDef.size!) {\n        setLastColumnAuto(false);\n      } else {\n        setLastColumnAuto(true);\n      }\n    },\n    throttleMs: 10,\n  });\n\n  // Memoized columns.\n  const columns = useMemo(\n    () => (\n      <colgroup>\n        {headers.map((header) => {\n          const lastColumn = isLastColumn(table, header.column);\n          const columnWidth =\n            lastColumn && lastColumnAuto ? 'auto' : `${header.column.getSize()}px`;\n\n          return (\n            <col\n              ref={lastColumn ? lastColumnRef : undefined}\n              key={header.column.id}\n              style={{ width: columnWidth, minWidth: header.column.columnDef.minSize }}\n            />\n          );\n        })}\n      </colgroup>\n    ),\n    // Dependencies here are as recommended by TanStack docs (https://tanstack.com/table/latest/docs/framework/react/examples/column-resizing-performant)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [table.getState().columnSizingInfo, table.getState().columnSizing, lastColumnAuto, headers],\n  );\n\n  return columns;\n};\n"],"names":["React"],"mappings":";;;;;;;;AAaA;;;;;;AAMG;MACU,OAAO,GAAG,CAAC,EAAE,KAAK,EAAgB,KAAI;AACjD,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,cAAc,EAAE;;;;;AAMtC,IAAA,MAAM,aAAa,GAAG,MAAM,CAAsB,IAAI,CAAC;IACvD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC;AAC1D,IAAA,iBAAiB,CAAC;AAChB,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,aAAa,EAAE,CAAC,EAAE,KAAK,EAAE,KAAI;YAC3B,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;YAE9C,IAAI,KAAK,IAAI,UAAU,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK,EAAE;gBAC9C,iBAAiB,CAAC,KAAK,CAAC;AACzB;AAAM,iBAAA;gBACL,iBAAiB,CAAC,IAAI,CAAC;AACxB;SACF;AACD,QAAA,UAAU,EAAE,EAAE;AACf,KAAA,CAAC;;AAGF,IAAA,MAAM,OAAO,GAAG,OAAO,CACrB,OACEA,cACG,CAAA,aAAA,CAAA,UAAA,EAAA,IAAA,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI;QACtB,MAAM,UAAU,GAAG,YAAY,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC;QACrD,MAAM,WAAW,GACf,UAAU,IAAI,cAAc,GAAG,MAAM,GAAG,CAAA,EAAG,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI;AAExE,QAAA,QACEA,cACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,UAAU,GAAG,aAAa,GAAG,SAAS,EAC3C,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,EACrB,KAAK,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,EAAA,CACxE;KAEL,CAAC,CACO,CACZ;;;AAGD,IAAA,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,gBAAgB,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,OAAO,CAAC,CAC5F;AAED,IAAA,OAAO,OAAO;AAChB;;;;"}
+{"version":3,"file":"Columns.js","sources":["../../../../../src/components/DataGrid/components/Columns/Columns.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { useResizeObserver } from '../../../../hooks';\n\ntype ColumnsProps = {\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n};\n\n/**\n * Renders the colgroup and col's for the table, responsible for controlling the width of columns within the table, including\n * handling situations where overflow may be necessary while resizing.\n *\n * Separated from the Header component to allow for better performance, since we can reliably memoize col's and limit updates only\n * to when the table sizing state changes.\n */\nexport const Columns = ({ table }: ColumnsProps) => {\n  const headers = table.getLeafHeaders();\n\n  /**\n   * Setup state and hook to observe the last column in the table. If the last column is larger than its\n   * default size, we allow it to render with `width: auto;` to ensure the table fills the container.\n   *\n   * If the last column is smaller than its default size, the table should start to 'overflow' its parent,\n   * so we switch to using a fixed width on the column instead.\n   */\n  const lastColumnRef = useRef<HTMLTableColElement>(null);\n  const [lastColumnAuto, setLastColumnAuto] = useState(true);\n  useResizeObserver({\n    targetRef: lastColumnRef,\n    resizeHandler: ({ width }) => {\n      const lastHeader = headers[headers.length - 1];\n      if (width <= lastHeader.column.getSize()) {\n        setLastColumnAuto(false);\n      } else {\n        setLastColumnAuto(true);\n      }\n    },\n    throttleMs: 10,\n  });\n\n  // Memoized columns.\n  const columns = useMemo(\n    () => (\n      <colgroup>\n        {headers.map((header) => {\n          const lastColumn = header.column.getIsLastColumn();\n          const columnWidth =\n            lastColumn && lastColumnAuto ? 'auto' : `${header.column.getSize()}px`;\n\n          return (\n            <col\n              ref={lastColumn ? lastColumnRef : undefined}\n              key={header.column.id}\n              style={{ width: columnWidth, minWidth: header.column.columnDef.minSize }}\n            />\n          );\n        })}\n      </colgroup>\n    ),\n    // Dependencies here are as recommended by TanStack docs (https://tanstack.com/table/latest/docs/framework/react/examples/column-resizing-performant)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [table.getState().columnSizingInfo, table.getState().columnSizing, lastColumnAuto, headers],\n  );\n\n  return columns;\n};\n"],"names":["React"],"mappings":";;;;;;AAYA;;;;;;AAMG;MACU,OAAO,GAAG,CAAC,EAAE,KAAK,EAAgB,KAAI;AACjD,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,cAAc,EAAE;AAEtC;;;;;;AAMG;AACH,IAAA,MAAM,aAAa,GAAG,MAAM,CAAsB,IAAI,CAAC;IACvD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC;AAC1D,IAAA,iBAAiB,CAAC;AAChB,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,aAAa,EAAE,CAAC,EAAE,KAAK,EAAE,KAAI;YAC3B,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;YAC9C,IAAI,KAAK,IAAI,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE;gBACxC,iBAAiB,CAAC,KAAK,CAAC;AACzB;AAAM,iBAAA;gBACL,iBAAiB,CAAC,IAAI,CAAC;AACxB;SACF;AACD,QAAA,UAAU,EAAE,EAAE;AACf,KAAA,CAAC;;AAGF,IAAA,MAAM,OAAO,GAAG,OAAO,CACrB,OACEA,cACG,CAAA,aAAA,CAAA,UAAA,EAAA,IAAA,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI;QACtB,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;QAClD,MAAM,WAAW,GACf,UAAU,IAAI,cAAc,GAAG,MAAM,GAAG,CAAA,EAAG,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI;AAExE,QAAA,QACEA,cACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,UAAU,GAAG,aAAa,GAAG,SAAS,EAC3C,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,EACrB,KAAK,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,EAAA,CACxE;KAEL,CAAC,CACO,CACZ;;;AAGD,IAAA,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,gBAAgB,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,OAAO,CAAC,CAC5F;AAED,IAAA,OAAO,OAAO;AAChB;;;;"}

package/dist/components/DataGrid/components/GridContainer/GridContainer.cjs

@@ -6,6 +6,13 @@ var buildClassnames = require('../../../../utils/buildClassnames.cjs');
 var Container = require('./Container/Container.cjs');
 var GridContainer_module = require('./GridContainer.module.scss.cjs');
 var usePinnedColumnLayout = require('../../hooks/usePinnedColumnLayout.cjs');
+require('@tanstack/react-table');
+require('../../../Stack/Stack.cjs');
+require('../../../Choice/components/styled.cjs');
+require('../../../Text/Text.cjs');
+require('../../../Checkbox/styled.cjs');
+require('uid/secure');
+require('../../../Radio/Radio.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/dist/components/DataGrid/components/GridContainer/GridContainer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GridContainer.cjs","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> & {\n  /**\n   * Reference to be used for the outer container element.\n   */\n  containerRef?: RefObject<HTMLDivElement>;\n\n  /**\n   * Reference to be used for the table element.\n   */\n  tableRef?: RefObject<HTMLTableElement>;\n\n  /**\n   * Border mode.\n   */\n  borderMode: BorderMode;\n\n  /**\n   * Additional container styles.\n   */\n  containerStyles?: CSSProperties;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n\n  /**\n   * Whether resizeable columns are enabled or not.\n   */\n  enableResizeableColumns: boolean;\n\n  /**\n   * Density of the grid.\n   */\n  density: keyof SizeScale;\n\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * Child elements (table contents).\n   */\n  children: ReactNode;\n};\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n  containerRef,\n  tableRef,\n  borderMode,\n  containerStyles,\n  ariaRoles,\n  enableResizeableColumns,\n  density,\n  table,\n  children,\n  'aria-label': ariaLabel,\n}: GridContainerProps) => {\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n  return (\n    <Container ref={containerRef} borderMode={borderMode} style={containerStyles}>\n      <table\n        ref={tableRef}\n        className={gridContainerClassname}\n        role={ariaRoles.table}\n        style={\n          {\n            tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n            '--density': theme.sizes[density],\n            ...pinnedColumnLayoutStyles,\n          } as CSSProperties\n        }\n        aria-colcount={table.getFlatHeaders().length}\n        aria-rowcount={table.getRowCount()}\n        aria-label={ariaLabel}\n      >\n        {children}\n      </table>\n    </Container>\n  );\n};\n"],"names":["buildClassnames","styles","usePinnedColumnLayout","React","Container","theme"],"mappings":";;;;;;;;;;;;;AA8DA,MAAM,sBAAsB,GAAGA,+BAAe,CAAC,CAACC,oBAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAGC,2CAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AAErE,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,mBAAS,EAAA,EAAC,GAAG,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,eAAe,EAAA;AAC1E,QAAAD,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,sBAAsB,EACjC,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAEE,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AACX,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}
+{"version":3,"file":"GridContainer.cjs","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> & {\n  /**\n   * Reference to be used for the outer container element.\n   */\n  containerRef?: RefObject<HTMLDivElement>;\n\n  /**\n   * Reference to be used for the table element.\n   */\n  tableRef?: RefObject<HTMLTableElement>;\n\n  /**\n   * Border mode.\n   */\n  borderMode: BorderMode;\n\n  /**\n   * Additional container styles.\n   */\n  containerStyles?: CSSProperties;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n\n  /**\n   * Whether resizeable columns are enabled or not.\n   */\n  enableResizeableColumns: boolean;\n\n  /**\n   * Density of the grid.\n   */\n  density: keyof SizeScale;\n\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * Child elements (table contents).\n   */\n  children: ReactNode;\n};\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n  containerRef,\n  tableRef,\n  borderMode,\n  containerStyles,\n  ariaRoles,\n  enableResizeableColumns,\n  density,\n  table,\n  children,\n  'aria-label': ariaLabel,\n}: GridContainerProps) => {\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n  return (\n    <Container ref={containerRef} borderMode={borderMode} style={containerStyles}>\n      <table\n        ref={tableRef}\n        className={gridContainerClassname}\n        role={ariaRoles.table}\n        style={\n          {\n            tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n            '--density': theme.sizes[density],\n            ...pinnedColumnLayoutStyles,\n          } as CSSProperties\n        }\n        aria-colcount={table.getFlatHeaders().length}\n        aria-rowcount={table.getRowCount()}\n        aria-label={ariaLabel}\n      >\n        {children}\n      </table>\n    </Container>\n  );\n};\n"],"names":["buildClassnames","styles","usePinnedColumnLayout","React","Container","theme"],"mappings":";;;;;;;;;;;;;;;;;;;;AA8DA,MAAM,sBAAsB,GAAGA,+BAAe,CAAC,CAACC,oBAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAGC,2CAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AAErE,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,mBAAS,EAAA,EAAC,GAAG,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,eAAe,EAAA;AAC1E,QAAAD,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,sBAAsB,EACjC,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAEE,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AACX,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}