@veeqo/ui 9.9.0 → 9.9.2

package/dist/components/DataGrid/DataGrid.cjs

@@ -13,6 +13,11 @@ var Header = require('./components/Header/Header.cjs');
 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 usePinnedColumnLayout = require('./hooks/usePinnedColumnLayout.cjs');
+var useSelectionState = require('./hooks/useSelectionState.cjs');
+var constants = require('./constants.cjs');
+var SelectionColumnDefinition = require('./columns/SelectionColumnDefinition.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -34,31 +39,48 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
  * - In-built keyboard navigation with arrow keys, and drag to scroll.
  * - Configurable density.
  *
- * *Important: This component uses CSS modules, and therefore requires a `<ThemeProvider />` to be present on your page.*
+ * *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, columns, hiddenColumns, columnOrdering, data, getRowId, 'aria-label': ariaLabel, }) => {
+const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, 'aria-label': ariaLabel, }) => {
     const containerRef = React.useRef(null);
     const showFooter = React.useMemo(() => columns.some((column) => column.renderFooter), [columns]);
     const ariaRoles = React.useMemo(() => getAriaRoles.getAriaRoles(), []);
     const enableColumnResizing = React.useMemo(() => resizeMode !== 'off', [resizeMode]);
+    /**
+     * Hooks to handle state for selection and sorting.
+     */
+    const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } = useSelectionState.useSelectionState({
+        selectionMode,
+        selectedRows,
+        disabledRows,
+        onSelectionChanged,
+    });
+    const { enableSorting, enableMultiRemove, enableSortingRemoval, manualSorting, sorting, onSortingChange, } = useSortingState.useSortingState({ columns, sortState, onSortChanged });
     /**
      * Mapping of column definitions.
      */
     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]);
+    }, [columns, enableRowSelection]);
     /**
-     * Stable references for column states (visibility, order).
+     * 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]);
+    }, [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.
@@ -70,6 +92,19 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
             [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]);
     /**
      * Setup the TanStack table, including mapped column definitions, row data, and any additional state such as
      * column visibility and ordering.
@@ -83,17 +118,36 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
         // Row model
         getRowId,
         getCoreRowModel: reactTable.getCoreRowModel(),
+        // Sorting
+        enableSorting,
+        enableSortingRemoval,
+        enableMultiRemove,
+        manualSorting,
+        onSortingChange,
+        // Pinning
+        enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,
+        // Selection
+        enableRowSelection,
+        enableMultiRowSelection,
+        onRowSelectionChange,
         // Inject external table state
         state: {
             columnOrder,
             columnVisibility,
+            columnPinning,
+            sorting,
+            rowSelection,
         },
     });
+    /**
+     * Pinned column layout
+     */
+    const { pinnedColumnLayoutStyles } = usePinnedColumnLayout.usePinnedColumnLayout({ table });
     /**
      * Other hooks
      */
     useDragToScroll.useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });
-    return (React__default.default.createElement(GridContainer.GridContainer, { containerRef: containerRef, borderMode: borderMode, containerStyles: containerStyle, ariaRoles: ariaRoles, enableResizeableColumns: enableColumnResizing, density: density, table: table, "aria-label": ariaLabel },
+    return (React__default.default.createElement(GridContainer.GridContainer, { containerRef: containerRef, borderMode: borderMode, containerStyles: { ...containerStyle, ...pinnedColumnLayoutStyles }, ariaRoles: ariaRoles, enableResizeableColumns: enableColumnResizing, density: density, table: table, "aria-label": ariaLabel },
         enableColumnResizing && React__default.default.createElement(Columns.Columns, { table: table }),
         React__default.default.createElement(Header.Header, { table: table }),
         table.getState().columnSizingInfo.isResizingColumn ? (React__default.default.createElement(Body.MemoizedBody, { table: table, ariaRoles: ariaRoles, striped: striped })) : (React__default.default.createElement(Body.Body, { table: table, ariaRoles: ariaRoles, striped: striped })),

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, 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\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 `<ThemeProvider />` 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  columns,\n  hiddenColumns,\n  columnOrdering,\n  data,\n  getRowId,\n\n  'aria-label': ariaLabel,\n}: DataGridProps) => {\n  const containerRef = useRef<HTMLTableElement>(null);\n\n  const showFooter = useMemo(() => columns.some((column) => column.renderFooter), [columns]);\n  const ariaRoles = useMemo(() => getAriaRoles(), []);\n  const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\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    return mappedColumns;\n  }, [columns]);\n\n  /**\n   * Stable references for column states (visibility, order).\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    return columnOrdering;\n  }, [columnOrdering]);\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  /**\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    // Inject external table state\n    state: {\n      columnOrder,\n      columnVisibility,\n    },\n  });\n\n  /**\n   * Other hooks\n   */\n  useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n\n  return (\n    <GridContainer\n      containerRef={containerRef}\n      borderMode={borderMode}\n      containerStyles={containerStyle}\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","ColumnMapper","useReactTable","getCoreRowModel","useDragToScroll","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, 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 } from './hooks';\n\nimport { useSelectionState } from './hooks/useSelectionState';\nimport { SELECTION_COLUMN_ID } from './constants';\nimport { SelectionColumnDefinition } from './columns';\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\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  'aria-label': ariaLabel,\n}: DataGridProps) => {\n  const containerRef = useRef<HTMLTableElement>(null);\n\n  const showFooter = useMemo(() => columns.some((column) => column.renderFooter), [columns]);\n  const ariaRoles = useMemo(() => getAriaRoles(), []);\n  const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n  /**\n   * Hooks to handle state for selection and sorting.\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  /**\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    // Inject external table state\n    state: {\n      columnOrder,\n      columnVisibility,\n      columnPinning,\n      sorting,\n      rowSelection,\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\n  return (\n    <GridContainer\n      containerRef={containerRef}\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","ColumnMapper","SelectionColumnDefinition","SELECTION_COLUMN_ID","useReactTable","getCoreRowModel","usePinnedColumnLayout","useDragToScroll","React","GridContainer","Columns","Header","MemoizedBody","Body","Footer"],"mappings":"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"}

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

@@ -16,6 +16,6 @@ import { DataGridProps } from './types';
  * - In-built keyboard navigation with arrow keys, and drag to scroll.
  * - Configurable density.
  *
- * *Important: This component uses CSS modules, and therefore requires a `<ThemeProvider />` to be present on your page.*
+ * *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, columns, hiddenColumns, columnOrdering, data, getRowId, "aria-label": ariaLabel, }: DataGridProps) => React.JSX.Element;
+export declare const DataGrid: ({ density, striped, borderMode, resizeMode, containerStyle, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, "aria-label": ariaLabel, }: DataGridProps) => React.JSX.Element;

package/dist/components/DataGrid/DataGrid.js

@@ -11,6 +11,11 @@ import { Header } from './components/Header/Header.js';
 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 { usePinnedColumnLayout } from './hooks/usePinnedColumnLayout.js';
+import { useSelectionState } from './hooks/useSelectionState.js';
+import { SELECTION_COLUMN_ID } from './constants.js';
+import { SelectionColumnDefinition } from './columns/SelectionColumnDefinition.js';
 
 /**
  * [WIP]
@@ -28,31 +33,48 @@ import { GridContainer } from './components/GridContainer/GridContainer.js';
  * - In-built keyboard navigation with arrow keys, and drag to scroll.
  * - Configurable density.
  *
- * *Important: This component uses CSS modules, and therefore requires a `<ThemeProvider />` to be present on your page.*
+ * *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, columns, hiddenColumns, columnOrdering, data, getRowId, 'aria-label': ariaLabel, }) => {
+const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, 'aria-label': ariaLabel, }) => {
     const containerRef = useRef(null);
     const showFooter = useMemo(() => columns.some((column) => column.renderFooter), [columns]);
     const ariaRoles = useMemo(() => getAriaRoles(), []);
     const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);
+    /**
+     * Hooks to handle state for selection and sorting.
+     */
+    const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } = useSelectionState({
+        selectionMode,
+        selectedRows,
+        disabledRows,
+        onSelectionChanged,
+    });
+    const { enableSorting, enableMultiRemove, enableSortingRemoval, manualSorting, sorting, onSortingChange, } = useSortingState({ columns, sortState, onSortChanged });
     /**
      * Mapping of column definitions.
      */
     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]);
+    }, [columns, enableRowSelection]);
     /**
-     * Stable references for column states (visibility, order).
+     * 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]);
+    }, [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.
@@ -64,6 +86,19 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
             [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]);
     /**
      * Setup the TanStack table, including mapped column definitions, row data, and any additional state such as
      * column visibility and ordering.
@@ -77,17 +112,36 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
         // Row model
         getRowId,
         getCoreRowModel: getCoreRowModel(),
+        // Sorting
+        enableSorting,
+        enableSortingRemoval,
+        enableMultiRemove,
+        manualSorting,
+        onSortingChange,
+        // Pinning
+        enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,
+        // Selection
+        enableRowSelection,
+        enableMultiRowSelection,
+        onRowSelectionChange,
         // Inject external table state
         state: {
             columnOrder,
             columnVisibility,
+            columnPinning,
+            sorting,
+            rowSelection,
         },
     });
+    /**
+     * Pinned column layout
+     */
+    const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });
     /**
      * Other hooks
      */
     useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });
-    return (React__default.createElement(GridContainer, { containerRef: containerRef, borderMode: borderMode, containerStyles: containerStyle, ariaRoles: ariaRoles, enableResizeableColumns: enableColumnResizing, density: density, table: table, "aria-label": ariaLabel },
+    return (React__default.createElement(GridContainer, { containerRef: containerRef, borderMode: borderMode, containerStyles: { ...containerStyle, ...pinnedColumnLayoutStyles }, ariaRoles: ariaRoles, enableResizeableColumns: enableColumnResizing, density: density, table: table, "aria-label": ariaLabel },
         enableColumnResizing && React__default.createElement(Columns, { table: table }),
         React__default.createElement(Header, { table: table }),
         table.getState().columnSizingInfo.isResizingColumn ? (React__default.createElement(MemoizedBody, { table: table, ariaRoles: ariaRoles, striped: striped })) : (React__default.createElement(Body, { table: table, ariaRoles: ariaRoles, striped: striped })),

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, 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\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 `<ThemeProvider />` 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  columns,\n  hiddenColumns,\n  columnOrdering,\n  data,\n  getRowId,\n\n  'aria-label': ariaLabel,\n}: DataGridProps) => {\n  const containerRef = useRef<HTMLTableElement>(null);\n\n  const showFooter = useMemo(() => columns.some((column) => column.renderFooter), [columns]);\n  const ariaRoles = useMemo(() => getAriaRoles(), []);\n  const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\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    return mappedColumns;\n  }, [columns]);\n\n  /**\n   * Stable references for column states (visibility, order).\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    return columnOrdering;\n  }, [columnOrdering]);\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  /**\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    // Inject external table state\n    state: {\n      columnOrder,\n      columnVisibility,\n    },\n  });\n\n  /**\n   * Other hooks\n   */\n  useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n\n  return (\n    <GridContainer\n      containerRef={containerRef}\n      borderMode={borderMode}\n      containerStyles={containerStyle}\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, 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 } from './hooks';\n\nimport { useSelectionState } from './hooks/useSelectionState';\nimport { SELECTION_COLUMN_ID } from './constants';\nimport { SelectionColumnDefinition } from './columns';\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\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  'aria-label': ariaLabel,\n}: DataGridProps) => {\n  const containerRef = useRef<HTMLTableElement>(null);\n\n  const showFooter = useMemo(() => columns.some((column) => column.renderFooter), [columns]);\n  const ariaRoles = useMemo(() => getAriaRoles(), []);\n  const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n  /**\n   * Hooks to handle state for selection and sorting.\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  /**\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    // Inject external table state\n    state: {\n      columnOrder,\n      columnVisibility,\n      columnPinning,\n      sorting,\n      rowSelection,\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\n  return (\n    <GridContainer\n      containerRef={containerRef}\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":";;;;;;;;;;;;;;;;;;;AAgBA;;;;;;;;;;;;;;;;;AAiBG;AACU,MAAA,QAAQ,GAAG,CAAC,EACvB,OAAO,GAAG,MAAM,EAChB,OAAO,GAAG,IAAI,EACd,UAAU,GAAG,MAAM,EACnB,UAAU,GAAG,KAAK,EAClB,cAAc,EAEd,OAAO,EACP,aAAa,EACb,cAAc,EACd,aAAa,EAEb,IAAI,EACJ,QAAQ,EAER,SAAS,EACT,aAAa,EAEb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAElB,YAAY,EAAE,SAAS,GACT,KAAI;AAClB,IAAA,MAAM,YAAY,GAAG,MAAM,CAAmB,IAAI,CAAC;IAEnD,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;AAC1F,IAAA,MAAM,SAAS,GAAG,OAAO,CAAC,MAAM,YAAY,EAAE,EAAE,EAAE,CAAC;AACnD,IAAA,MAAM,oBAAoB,GAAG,OAAO,CAAC,MAAM,UAAU,KAAK,KAAK,EAAE,CAAC,UAAU,CAAC,CAAC;AAE9E;;AAEG;IAEH,MAAM,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,YAAY,EAAE,oBAAoB,EAAE,GACvF,iBAAiB,CAAC;QAChB,aAAa;QACb,YAAY;QACZ,YAAY;QACZ,kBAAkB;AACnB,KAAA,CAAC;IAEJ,MAAM,EACJ,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EACpB,aAAa,EACb,OAAO,EACP,eAAe,GAChB,GAAG,eAAe,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;AAE1D;;AAEG;IACH,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,YAAY,EAAE,CAAC;AAC/C,IAAA,MAAM,uBAAuB,GAAG,OAAO,CAAC,MAAK;QAC3C,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAK,YAAY,CAAC,OAAO,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;AAE/F,QAAA,IAAI,kBAAkB,EAAE;AACtB,YAAA,aAAa,CAAC,OAAO,CAAC,yBAAyB,CAAC;AACjD;AAED,QAAA,OAAO,aAAa;AACtB,KAAC,EAAE,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;AAEjC;;AAEG;;AAGH,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,MAAK;QAC/B,IAAI,CAAC,cAAc,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;AAClD,YAAA,OAAO,SAAS;AACjB;;AAGD,QAAA,IAAI,kBAAkB,EAAE;AACtB,YAAA,OAAO,CAAC,WAAW,EAAE,GAAG,cAAc,CAAC;AACxC;AAED,QAAA,OAAO,cAAc;AACvB,KAAC,EAAE,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAC;;AAGxC,IAAA,MAAM,gBAAgB,GAAG,OAAO,CAAC,MAAK;;QAEpC,IAAI,CAAC,aAAa,IAAI,aAAa,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE;AAC7D,YAAA,OAAO,SAAS;AACjB;QAED,OAAO,OAAO,CAAC,MAAM,CACnB,CAAC,GAAG,EAAE,MAAM,MAAM;AAChB,YAAA,GAAG,GAAG;AACN,YAAA,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;SAChD,CAAC,EACF,EAAE,CACH;AACH,KAAC,EAAE,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;;AAG5B,IAAA,MAAM,aAAa,GAAG,OAAO,CAAC,MAAK;;AACjC,QAAA,IAAI,IAAI,GAAG,CAAA,EAAA,GAAA,aAAa,KAAb,IAAA,IAAA,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,IAAI,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,EAAE;;AAGpC,QAAA,IAAI,kBAAkB,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;AACzC,YAAA,IAAI,GAAG,CAAC,mBAAmB,EAAE,GAAG,IAAI,CAAC;AACtC;QAED,OAAO;YACL,IAAI;YACJ,KAAK,EAAE,CAAA,EAAA,GAAA,aAAa,KAAb,IAAA,IAAA,aAAa,6BAAb,aAAa,CAAE,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAI,EAAE;SAClC;AACH,KAAC,EAAE,CAAC,aAAa,EAAE,kBAAkB,CAAC,CAAC;AAEvC;;;AAGG;IACH,MAAM,KAAK,GAAG,aAAa,CAAM;QAC/B,IAAI;AACJ,QAAA,OAAO,EAAE,uBAAuB;;QAGhC,gBAAgB,EAAE,UAAU,KAAK,KAAK,GAAG,SAAS,GAAG,UAAU;QAC/D,oBAAoB;;QAGpB,QAAQ;QACR,eAAe,EAAE,eAAe,EAAE;;QAGlC,aAAa;QACb,oBAAoB;QACpB,iBAAiB;QACjB,aAAa;QACb,eAAe;;AAGf,QAAA,mBAAmB,EAAE,aAAa,CAAC,IAAI,CAAC,MAAM,GAAG,aAAa,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;;QAG/E,kBAAkB;QAClB,uBAAuB;QACvB,oBAAoB;;AAGpB,QAAA,KAAK,EAAE;YACL,WAAW;YACX,gBAAgB;YAChB,aAAa;YACb,OAAO;YACP,YAAY;AACb,SAAA;AACF,KAAA,CAAC;AAEF;;AAEG;IACH,MAAM,EAAE,wBAAwB,EAAE,GAAG,qBAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AAErE;;AAEG;IACH,eAAe,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,0BAA0B,EAAE,CAAC;AAEzF,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,aAAa,EACZ,EAAA,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,EAAE,GAAG,cAAc,EAAE,GAAG,wBAAwB,EAAE,EACnE,SAAS,EAAE,SAAS,EACpB,uBAAuB,EAAE,oBAAoB,EAC7C,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,gBACA,SAAS,EAAA;AAGpB,QAAA,oBAAoB,IAAIA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,KAAK,EAAE,KAAK,EAAI,CAAA;AAGlD,QAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,KAAK,EAAE,KAAK,EAAI,CAAA;QAGvB,KAAK,CAAC,QAAQ,EAAE,CAAC,gBAAgB,CAAC,gBAAgB,IACjDA,cAAC,CAAA,aAAA,CAAA,YAAY,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAA,CAAI,KAEtEA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAA,CAAI,CAC/D;AAGA,QAAA,UAAU,IAAIA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAI,CAAA,CAC/C;AAEpB;;;;"}

package/dist/components/DataGrid/DataGrid.module.css.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+const cssContents = `._baseCell_13swz_1{box-sizing:border-box;position:relative;&:focus,&:focus-visible{box-shadow:inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);outline:var(--sizes-none)}}._pinnedColumnBase_13swz_12{&:after{bottom:-1px;box-sizing:border-box;content:"";pointer-events:none;position:absolute;top:var(--sizes-none);width:30px}}._pinnedColumnLeft_13swz_27{&:after{box-shadow:inset 10px 0 10px -8px rgba(0,0,0,.25);right:var(--sizes-none);transform:translate(100%)}}._pinnedColumnRight_13swz_39{&:after{box-shadow:inset -10px 0 10px -8px rgba(0,0,0,.25);left:var(--sizes-none);transform:translate(-100%)}}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGFHcmlkLm1vZHVsZS5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsbUJBRUUscUJBQXNCLENBRHRCLGlCQUFrQixDQUdsQix3QkFHRSwwSEFBMkgsQ0FEM0gseUJBRUYsQ0FDRixDQUVBLDRCQUNFLFFBSUUsV0FBWSxDQU1aLHFCQUFzQixDQUh0QixVQUFXLENBQ1gsbUJBQW9CLENBUHBCLGlCQUFrQixDQUVsQixxQkFBc0IsQ0FFdEIsVUFNRixDQUNGLENBRUEsNEJBR0UsUUFLRSxpREFBdUQsQ0FGdkQsdUJBQXdCLENBRnhCLHlCQUtGLENBQ0YsQ0FFQSw2QkFHRSxRQUtFLGtEQUF3RCxDQUZ4RCxzQkFBdUIsQ0FGdkIsMEJBS0YsQ0FDRiIsImZpbGUiOiJEYXRhR3JpZC5tb2R1bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmJhc2VDZWxsIHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXG4gICY6Zm9jdXMsXG4gICY6Zm9jdXMtdmlzaWJsZSB7XG4gICAgb3V0bGluZTogdmFyKC0tc2l6ZXMtbm9uZSk7XG4gICAgYm94LXNoYWRvdzogaW5zZXQgdmFyKC0tc2l6ZXMtbm9uZSkgdmFyKC0tc2l6ZXMtbm9uZSkgdmFyKC0tc2l6ZXMtbm9uZSkgdmFyKC0tc2l6ZXMtbGluZSkgdmFyKC0tY29sb3JzLXNlY29uZGFyeS1ibHVlLWJhc2UpO1xuICB9XG59XG5cbi5waW5uZWRDb2x1bW5CYXNlIHtcbiAgJjo6YWZ0ZXIge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcblxuICAgIHRvcDogdmFyKC0tc2l6ZXMtbm9uZSk7XG4gICAgYm90dG9tOiAtMXB4O1xuICAgIHdpZHRoOiAzMHB4O1xuXG4gICAgY29udGVudDogJyc7XG4gICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG5cbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICB9XG59XG5cbi5waW5uZWRDb2x1bW5MZWZ0IHtcbiAgY29tcG9zZXM6IHBpbm5lZENvbHVtbkJhc2U7XG5cbiAgJjo6YWZ0ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlKDEwMCUpO1xuICAgIFxuICAgIHJpZ2h0OiB2YXIoLS1zaXplcy1ub25lKTtcblxuICAgIGJveC1zaGFkb3c6IGluc2V0IDEwcHggMHB4IDEwcHggLThweCByZ2JhKDAsIDAsIDAsIDI1JSk7XG4gIH1cbn1cblxuLnBpbm5lZENvbHVtblJpZ2h0IHtcbiAgY29tcG9zZXM6IHBpbm5lZENvbHVtbkJhc2U7XG5cbiAgJjo6YWZ0ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlKC0xMDAlKTtcblxuICAgIGxlZnQ6IHZhcigtLXNpemVzLW5vbmUpO1xuXG4gICAgYm94LXNoYWRvdzogaW5zZXQgLTEwcHggMHB4IDEwcHggLThweCByZ2JhKDAsIDAsIDAsIDI1JSk7XG4gIH1cbn1cbiJdfQ== */`;
+const style = document.createElement('style');
+style.innerHTML = cssContents;
+document.head.appendChild(style);
+const pinnedColumnLeft = '_pinnedColumnLeft_13swz_27 _pinnedColumnBase_13swz_12';
+const pinnedColumnRight = '_pinnedColumnRight_13swz_39 _pinnedColumnBase_13swz_12';
+
+exports.pinnedColumnLeft = pinnedColumnLeft;
+exports.pinnedColumnRight = pinnedColumnRight;
+//# sourceMappingURL=DataGrid.module.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataGrid.module.css.cjs","sources":["../../../src/components/DataGrid/DataGrid.module.css"],"sourcesContent":[".baseCell {\n  position: relative;\n  box-sizing: border-box;\n\n  &:focus,\n  &:focus-visible {\n    outline: var(--sizes-none);\n    box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n  }\n}\n\n.pinnedColumnBase {\n  &::after {\n    position: absolute;\n\n    top: var(--sizes-none);\n    bottom: -1px;\n    width: 30px;\n\n    content: '';\n    pointer-events: none;\n\n    box-sizing: border-box;\n  }\n}\n\n.pinnedColumnLeft {\n  composes: pinnedColumnBase;\n\n  &::after {\n    transform: translate(100%);\n    \n    right: var(--sizes-none);\n\n    box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 25%);\n  }\n}\n\n.pinnedColumnRight {\n  composes: pinnedColumnBase;\n\n  &::after {\n    transform: translate(-100%);\n\n    left: var(--sizes-none);\n\n    box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 25%);\n  }\n}\n"],"names":[],"mappings":";;AACA,MAAM,WAAW,GAAG,CAAC;AACrB,6vDAA6vD,CAAC;AAC9vD,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,KAAK,CAAC,SAAS,GAAG,WAAW;AAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAG3B,MAAC,gBAAgB,GAAG;AACpB,MAAC,iBAAiB,GAAG;;;;;"}

package/dist/components/DataGrid/DataGrid.module.css.js

@@ -0,0 +1,10 @@
+const cssContents = `._baseCell_13swz_1{box-sizing:border-box;position:relative;&:focus,&:focus-visible{box-shadow:inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);outline:var(--sizes-none)}}._pinnedColumnBase_13swz_12{&:after{bottom:-1px;box-sizing:border-box;content:"";pointer-events:none;position:absolute;top:var(--sizes-none);width:30px}}._pinnedColumnLeft_13swz_27{&:after{box-shadow:inset 10px 0 10px -8px rgba(0,0,0,.25);right:var(--sizes-none);transform:translate(100%)}}._pinnedColumnRight_13swz_39{&:after{box-shadow:inset -10px 0 10px -8px rgba(0,0,0,.25);left:var(--sizes-none);transform:translate(-100%)}}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGFHcmlkLm1vZHVsZS5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsbUJBRUUscUJBQXNCLENBRHRCLGlCQUFrQixDQUdsQix3QkFHRSwwSEFBMkgsQ0FEM0gseUJBRUYsQ0FDRixDQUVBLDRCQUNFLFFBSUUsV0FBWSxDQU1aLHFCQUFzQixDQUh0QixVQUFXLENBQ1gsbUJBQW9CLENBUHBCLGlCQUFrQixDQUVsQixxQkFBc0IsQ0FFdEIsVUFNRixDQUNGLENBRUEsNEJBR0UsUUFLRSxpREFBdUQsQ0FGdkQsdUJBQXdCLENBRnhCLHlCQUtGLENBQ0YsQ0FFQSw2QkFHRSxRQUtFLGtEQUF3RCxDQUZ4RCxzQkFBdUIsQ0FGdkIsMEJBS0YsQ0FDRiIsImZpbGUiOiJEYXRhR3JpZC5tb2R1bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmJhc2VDZWxsIHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXG4gICY6Zm9jdXMsXG4gICY6Zm9jdXMtdmlzaWJsZSB7XG4gICAgb3V0bGluZTogdmFyKC0tc2l6ZXMtbm9uZSk7XG4gICAgYm94LXNoYWRvdzogaW5zZXQgdmFyKC0tc2l6ZXMtbm9uZSkgdmFyKC0tc2l6ZXMtbm9uZSkgdmFyKC0tc2l6ZXMtbm9uZSkgdmFyKC0tc2l6ZXMtbGluZSkgdmFyKC0tY29sb3JzLXNlY29uZGFyeS1ibHVlLWJhc2UpO1xuICB9XG59XG5cbi5waW5uZWRDb2x1bW5CYXNlIHtcbiAgJjo6YWZ0ZXIge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcblxuICAgIHRvcDogdmFyKC0tc2l6ZXMtbm9uZSk7XG4gICAgYm90dG9tOiAtMXB4O1xuICAgIHdpZHRoOiAzMHB4O1xuXG4gICAgY29udGVudDogJyc7XG4gICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG5cbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICB9XG59XG5cbi5waW5uZWRDb2x1bW5MZWZ0IHtcbiAgY29tcG9zZXM6IHBpbm5lZENvbHVtbkJhc2U7XG5cbiAgJjo6YWZ0ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlKDEwMCUpO1xuICAgIFxuICAgIHJpZ2h0OiB2YXIoLS1zaXplcy1ub25lKTtcblxuICAgIGJveC1zaGFkb3c6IGluc2V0IDEwcHggMHB4IDEwcHggLThweCByZ2JhKDAsIDAsIDAsIDI1JSk7XG4gIH1cbn1cblxuLnBpbm5lZENvbHVtblJpZ2h0IHtcbiAgY29tcG9zZXM6IHBpbm5lZENvbHVtbkJhc2U7XG5cbiAgJjo6YWZ0ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlKC0xMDAlKTtcblxuICAgIGxlZnQ6IHZhcigtLXNpemVzLW5vbmUpO1xuXG4gICAgYm94LXNoYWRvdzogaW5zZXQgLTEwcHggMHB4IDEwcHggLThweCByZ2JhKDAsIDAsIDAsIDI1JSk7XG4gIH1cbn1cbiJdfQ== */`;
+const style = document.createElement('style');
+style.innerHTML = cssContents;
+document.head.appendChild(style);
+const pinnedColumnLeft = '_pinnedColumnLeft_13swz_27 _pinnedColumnBase_13swz_12';
+const pinnedColumnRight = '_pinnedColumnRight_13swz_39 _pinnedColumnBase_13swz_12';
+
+export { pinnedColumnLeft, pinnedColumnRight };
+//# sourceMappingURL=DataGrid.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataGrid.module.css.js","sources":["../../../src/components/DataGrid/DataGrid.module.css"],"sourcesContent":[".baseCell {\n  position: relative;\n  box-sizing: border-box;\n\n  &:focus,\n  &:focus-visible {\n    outline: var(--sizes-none);\n    box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n  }\n}\n\n.pinnedColumnBase {\n  &::after {\n    position: absolute;\n\n    top: var(--sizes-none);\n    bottom: -1px;\n    width: 30px;\n\n    content: '';\n    pointer-events: none;\n\n    box-sizing: border-box;\n  }\n}\n\n.pinnedColumnLeft {\n  composes: pinnedColumnBase;\n\n  &::after {\n    transform: translate(100%);\n    \n    right: var(--sizes-none);\n\n    box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 25%);\n  }\n}\n\n.pinnedColumnRight {\n  composes: pinnedColumnBase;\n\n  &::after {\n    transform: translate(-100%);\n\n    left: var(--sizes-none);\n\n    box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 25%);\n  }\n}\n"],"names":[],"mappings":"AACA,MAAM,WAAW,GAAG,CAAC;AACrB,6vDAA6vD,CAAC;AAC9vD,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,KAAK,CAAC,SAAS,GAAG,WAAW;AAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAG3B,MAAC,gBAAgB,GAAG;AACpB,MAAC,iBAAiB,GAAG;;;;"}

package/dist/components/DataGrid/columns/SelectionColumnDefinition.cjs

@@ -0,0 +1,36 @@
+'use strict';
+
+var React = require('react');
+var Checkbox = require('../../Checkbox/Checkbox.cjs');
+var Radio = require('../../Radio/Radio.cjs');
+var constants = require('../constants.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const headerRenderer = ({ table }) => table.options.enableMultiRowSelection && (React__default.default.createElement(Checkbox.Checkbox, { ariaLabel: "Select all rows", indeterminate: table.getIsSomeRowsSelected(), checked: table.getIsAllRowsSelected(), onChange: () => table.toggleAllRowsSelected() }));
+const cellRenderer = ({ row }) => {
+    if (row.getCanMultiSelect()) {
+        return (React__default.default.createElement(Checkbox.Checkbox, { ariaLabel: "Select row", checked: row.getIsSelected(), onChange: row.getToggleSelectedHandler(), disabled: !row.getCanSelect() }));
+    }
+    return (React__default.default.createElement(Radio.Radio, { "aria-label": "Select row", checked: row.getIsSelected(), onChange: row.getToggleSelectedHandler(), disabled: !row.getCanSelect() }));
+};
+const SelectionColumnDefinition = {
+    id: constants.SELECTION_COLUMN_ID,
+    header: headerRenderer,
+    cell: cellRenderer,
+    size: 50,
+    minSize: 50,
+    maxSize: 50,
+    enableResizing: false,
+    enableSorting: false,
+    meta: {
+        rowHeader: false,
+        justifyContent: 'center',
+        textAlign: 'center',
+    },
+};
+
+exports.SelectionColumnDefinition = SelectionColumnDefinition;
+//# sourceMappingURL=SelectionColumnDefinition.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionColumnDefinition.cjs","sources":["../../../../src/components/DataGrid/columns/SelectionColumnDefinition.tsx"],"sourcesContent":["import React from 'react';\n\nimport { DisplayColumnDef, Row, Table } from '@tanstack/react-table';\n\nimport { Checkbox } from '../../Checkbox';\nimport { Radio } from '../../Radio';\n\nimport { SELECTION_COLUMN_ID } from '../constants';\n\nconst headerRenderer = ({ table }: { table: Table<any> }) =>\n  table.options.enableMultiRowSelection && (\n    <Checkbox\n      ariaLabel=\"Select all rows\"\n      indeterminate={table.getIsSomeRowsSelected()}\n      checked={table.getIsAllRowsSelected()}\n      onChange={() => table.toggleAllRowsSelected()}\n    />\n  );\n\nconst cellRenderer = ({ row }: { row: Row<any> }) => {\n  if (row.getCanMultiSelect()) {\n    return (\n      <Checkbox\n        ariaLabel=\"Select row\"\n        checked={row.getIsSelected()}\n        onChange={row.getToggleSelectedHandler()}\n        disabled={!row.getCanSelect()}\n      />\n    );\n  }\n\n  return (\n    <Radio\n      aria-label=\"Select row\"\n      checked={row.getIsSelected()}\n      onChange={row.getToggleSelectedHandler()}\n      disabled={!row.getCanSelect()}\n    />\n  );\n};\n\nexport const SelectionColumnDefinition: DisplayColumnDef<any> = {\n  id: SELECTION_COLUMN_ID,\n  header: headerRenderer,\n  cell: cellRenderer,\n  size: 50,\n  minSize: 50,\n  maxSize: 50,\n  enableResizing: false,\n  enableSorting: false,\n  meta: {\n    rowHeader: false,\n    justifyContent: 'center',\n    textAlign: 'center',\n  },\n};\n"],"names":["React","Checkbox","Radio","SELECTION_COLUMN_ID"],"mappings":";;;;;;;;;;;AASA,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,EAAyB,KACtD,KAAK,CAAC,OAAO,CAAC,uBAAuB,KACnCA,sBAAA,CAAA,aAAA,CAACC,iBAAQ,EACP,EAAA,SAAS,EAAC,iBAAiB,EAC3B,aAAa,EAAE,KAAK,CAAC,qBAAqB,EAAE,EAC5C,OAAO,EAAE,KAAK,CAAC,oBAAoB,EAAE,EACrC,QAAQ,EAAE,MAAM,KAAK,CAAC,qBAAqB,EAAE,EAC7C,CAAA,CACH;AAEH,MAAM,YAAY,GAAG,CAAC,EAAE,GAAG,EAAqB,KAAI;AAClD,IAAA,IAAI,GAAG,CAAC,iBAAiB,EAAE,EAAE;AAC3B,QAAA,QACED,sBAAA,CAAA,aAAA,CAACC,iBAAQ,EAAA,EACP,SAAS,EAAC,YAAY,EACtB,OAAO,EAAE,GAAG,CAAC,aAAa,EAAE,EAC5B,QAAQ,EAAE,GAAG,CAAC,wBAAwB,EAAE,EACxC,QAAQ,EAAE,CAAC,GAAG,CAAC,YAAY,EAAE,EAAA,CAC7B;AAEL;AAED,IAAA,QACED,sBAAA,CAAA,aAAA,CAACE,WAAK,EAAA,EAAA,YAAA,EACO,YAAY,EACvB,OAAO,EAAE,GAAG,CAAC,aAAa,EAAE,EAC5B,QAAQ,EAAE,GAAG,CAAC,wBAAwB,EAAE,EACxC,QAAQ,EAAE,CAAC,GAAG,CAAC,YAAY,EAAE,EAAA,CAC7B;AAEN,CAAC;AAEY,MAAA,yBAAyB,GAA0B;AAC9D,IAAA,EAAE,EAAEC,6BAAmB;AACvB,IAAA,MAAM,EAAE,cAAc;AACtB,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,IAAI,EAAE,EAAE;AACR,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,cAAc,EAAE,KAAK;AACrB,IAAA,aAAa,EAAE,KAAK;AACpB,IAAA,IAAI,EAAE;AACJ,QAAA,SAAS,EAAE,KAAK;AAChB,QAAA,cAAc,EAAE,QAAQ;AACxB,QAAA,SAAS,EAAE,QAAQ;AACpB,KAAA;;;;;"}

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

@@ -0,0 +1,2 @@
+import { DisplayColumnDef } from '@tanstack/react-table';
+export declare const SelectionColumnDefinition: DisplayColumnDef<any>;

package/dist/components/DataGrid/columns/SelectionColumnDefinition.js

@@ -0,0 +1,30 @@
+import React__default from 'react';
+import { Checkbox } from '../../Checkbox/Checkbox.js';
+import { Radio } from '../../Radio/Radio.js';
+import { SELECTION_COLUMN_ID } from '../constants.js';
+
+const headerRenderer = ({ table }) => table.options.enableMultiRowSelection && (React__default.createElement(Checkbox, { ariaLabel: "Select all rows", indeterminate: table.getIsSomeRowsSelected(), checked: table.getIsAllRowsSelected(), onChange: () => table.toggleAllRowsSelected() }));
+const cellRenderer = ({ row }) => {
+    if (row.getCanMultiSelect()) {
+        return (React__default.createElement(Checkbox, { ariaLabel: "Select row", checked: row.getIsSelected(), onChange: row.getToggleSelectedHandler(), disabled: !row.getCanSelect() }));
+    }
+    return (React__default.createElement(Radio, { "aria-label": "Select row", checked: row.getIsSelected(), onChange: row.getToggleSelectedHandler(), disabled: !row.getCanSelect() }));
+};
+const SelectionColumnDefinition = {
+    id: SELECTION_COLUMN_ID,
+    header: headerRenderer,
+    cell: cellRenderer,
+    size: 50,
+    minSize: 50,
+    maxSize: 50,
+    enableResizing: false,
+    enableSorting: false,
+    meta: {
+        rowHeader: false,
+        justifyContent: 'center',
+        textAlign: 'center',
+    },
+};
+
+export { SelectionColumnDefinition };
+//# sourceMappingURL=SelectionColumnDefinition.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionColumnDefinition.js","sources":["../../../../src/components/DataGrid/columns/SelectionColumnDefinition.tsx"],"sourcesContent":["import React from 'react';\n\nimport { DisplayColumnDef, Row, Table } from '@tanstack/react-table';\n\nimport { Checkbox } from '../../Checkbox';\nimport { Radio } from '../../Radio';\n\nimport { SELECTION_COLUMN_ID } from '../constants';\n\nconst headerRenderer = ({ table }: { table: Table<any> }) =>\n  table.options.enableMultiRowSelection && (\n    <Checkbox\n      ariaLabel=\"Select all rows\"\n      indeterminate={table.getIsSomeRowsSelected()}\n      checked={table.getIsAllRowsSelected()}\n      onChange={() => table.toggleAllRowsSelected()}\n    />\n  );\n\nconst cellRenderer = ({ row }: { row: Row<any> }) => {\n  if (row.getCanMultiSelect()) {\n    return (\n      <Checkbox\n        ariaLabel=\"Select row\"\n        checked={row.getIsSelected()}\n        onChange={row.getToggleSelectedHandler()}\n        disabled={!row.getCanSelect()}\n      />\n    );\n  }\n\n  return (\n    <Radio\n      aria-label=\"Select row\"\n      checked={row.getIsSelected()}\n      onChange={row.getToggleSelectedHandler()}\n      disabled={!row.getCanSelect()}\n    />\n  );\n};\n\nexport const SelectionColumnDefinition: DisplayColumnDef<any> = {\n  id: SELECTION_COLUMN_ID,\n  header: headerRenderer,\n  cell: cellRenderer,\n  size: 50,\n  minSize: 50,\n  maxSize: 50,\n  enableResizing: false,\n  enableSorting: false,\n  meta: {\n    rowHeader: false,\n    justifyContent: 'center',\n    textAlign: 'center',\n  },\n};\n"],"names":["React"],"mappings":";;;;;AASA,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,EAAyB,KACtD,KAAK,CAAC,OAAO,CAAC,uBAAuB,KACnCA,cAAA,CAAA,aAAA,CAAC,QAAQ,EACP,EAAA,SAAS,EAAC,iBAAiB,EAC3B,aAAa,EAAE,KAAK,CAAC,qBAAqB,EAAE,EAC5C,OAAO,EAAE,KAAK,CAAC,oBAAoB,EAAE,EACrC,QAAQ,EAAE,MAAM,KAAK,CAAC,qBAAqB,EAAE,EAC7C,CAAA,CACH;AAEH,MAAM,YAAY,GAAG,CAAC,EAAE,GAAG,EAAqB,KAAI;AAClD,IAAA,IAAI,GAAG,CAAC,iBAAiB,EAAE,EAAE;AAC3B,QAAA,QACEA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EACP,SAAS,EAAC,YAAY,EACtB,OAAO,EAAE,GAAG,CAAC,aAAa,EAAE,EAC5B,QAAQ,EAAE,GAAG,CAAC,wBAAwB,EAAE,EACxC,QAAQ,EAAE,CAAC,GAAG,CAAC,YAAY,EAAE,EAAA,CAC7B;AAEL;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAA,YAAA,EACO,YAAY,EACvB,OAAO,EAAE,GAAG,CAAC,aAAa,EAAE,EAC5B,QAAQ,EAAE,GAAG,CAAC,wBAAwB,EAAE,EACxC,QAAQ,EAAE,CAAC,GAAG,CAAC,YAAY,EAAE,EAAA,CAC7B;AAEN,CAAC;AAEY,MAAA,yBAAyB,GAA0B;AAC9D,IAAA,EAAE,EAAE,mBAAmB;AACvB,IAAA,MAAM,EAAE,cAAc;AACtB,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,IAAI,EAAE,EAAE;AACR,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,cAAc,EAAE,KAAK;AACrB,IAAA,aAAa,EAAE,KAAK;AACpB,IAAA,IAAI,EAAE;AACJ,QAAA,SAAS,EAAE,KAAK;AAChB,QAAA,cAAc,EAAE,QAAQ;AACxB,QAAA,SAAS,EAAE,QAAQ;AACpB,KAAA;;;;;"}

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

@@ -0,0 +1 @@
+export { SelectionColumnDefinition } from './SelectionColumnDefinition';

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

@@ -5,20 +5,22 @@ var reactTable = require('@tanstack/react-table');
 var buildClassnames = require('../../../../../utils/buildClassnames.cjs');
 require('uid/secure');
 var CellContent = require('../../CellContent/CellContent.cjs');
+var usePinnedColumnStyles = require('../../../hooks/usePinnedColumnStyles.cjs');
 var BodyCell_module = require('./BodyCell.module.css.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const bodyCellClassname = buildClassnames.buildClassnames([BodyCell_module.bodyCell, 'data-grid-cell']);
 /**
  * Renders a cell element, and its content, for a given column and row, within the grid body.
  */
 const BodyCell = ({ cell, ariaRoles }) => {
     const { justifyContent, textAlign, rowHeader } = cell.column.columnDef.meta;
     const CellElement = rowHeader ? 'th' : 'td';
-    return (React__default.default.createElement(CellElement, { className: bodyCellClassname, "aria-colindex": cell.column.getIndex() + 1, scope: rowHeader ? 'row' : undefined, role: rowHeader ? 'rowheader' : ariaRoles.cell },
+    const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles.usePinnedColumnStyles({ column: cell.column });
+    const bodyCellClassname = buildClassnames.buildClassnames([BodyCell_module.bodyCell, pinnedCellClassName, 'data-grid-cell']);
+    return (React__default.default.createElement(CellElement, { className: bodyCellClassname, "aria-colindex": cell.column.getIndex() + 1, scope: rowHeader ? 'row' : undefined, role: rowHeader ? 'rowheader' : ariaRoles.cell, style: pinnedCellStyles },
         React__default.default.createElement(CellContent.CellContent, { contentStyle: {
                 justifyContent,
                 textAlign,

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';\n\nimport { bodyCell } from './BodyCell.module.css';\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\nconst bodyCellClassname = buildClassnames([bodyCell, 'data-grid-cell']);\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({ cell, ariaRoles }: ColumnCellProps) => {\n  const { justifyContent, textAlign, rowHeader } = cell.column.columnDef.meta!;\n  const CellElement = rowHeader ? 'th' : 'td';\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    >\n      <CellContent\n        contentStyle={\n          {\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n      >\n        {flexRender(cell.column.columnDef.cell, cell.getContext())}\n      </CellContent>\n    </CellElement>\n  );\n};\n"],"names":["buildClassnames","bodyCell","React","CellContent","flexRender"],"mappings":";;;;;;;;;;;;;AAuBA,MAAM,iBAAiB,GAAGA,+BAAe,CAAC,CAACC,wBAAQ,EAAE,gBAAgB,CAAC,CAAC;AAEvE;;AAEG;AACU,MAAA,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,SAAS,EAAmB,KAAI;AAC/D,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,QACEC,sBAAC,CAAA,aAAA,CAAA,WAAW,IACV,SAAS,EAAE,iBAAiB,EACb,eAAA,EAAA,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,EAAA;QAE9CA,sBAAC,CAAA,aAAA,CAAAC,uBAAW,EACV,EAAA,YAAY,EACV;gBACE,cAAc;gBACd,SAAS;AACa,aAAA,EAAA,EAGzBC,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 { bodyCell } from './BodyCell.module.css';\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/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({ cell, ariaRoles }: 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 bodyCellClassname = buildClassnames([bodyCell, pinnedCellClassName, 'data-grid-cell']);\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            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n      >\n        {flexRender(cell.column.columnDef.cell, cell.getContext())}\n      </CellContent>\n    </CellElement>\n  );\n};\n"],"names":["usePinnedColumnStyles","buildClassnames","bodyCell","React","CellContent","flexRender"],"mappings":";;;;;;;;;;;;;;AAwBA;;AAEG;AACU,MAAA,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,SAAS,EAAmB,KAAI;AAC/D,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,iBAAiB,GAAGC,+BAAe,CAAC,CAACC,wBAAQ,EAAE,mBAAmB,EAAE,gBAAgB,CAAC,CAAC;IAE5F,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;gBACE,cAAc;gBACd,SAAS;AACa,aAAA,EAAA,EAGzBC,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

@@ -3,16 +3,18 @@ import { flexRender } from '@tanstack/react-table';
 import { buildClassnames } from '../../../../../utils/buildClassnames.js';
 import 'uid/secure';
 import { CellContent } from '../../CellContent/CellContent.js';
+import { usePinnedColumnStyles } from '../../../hooks/usePinnedColumnStyles.js';
 import { bodyCell } from './BodyCell.module.css.js';
 
-const bodyCellClassname = buildClassnames([bodyCell, 'data-grid-cell']);
 /**
  * Renders a cell element, and its content, for a given column and row, within the grid body.
  */
 const BodyCell = ({ cell, ariaRoles }) => {
     const { justifyContent, textAlign, rowHeader } = cell.column.columnDef.meta;
     const CellElement = rowHeader ? 'th' : 'td';
-    return (React__default.createElement(CellElement, { className: bodyCellClassname, "aria-colindex": cell.column.getIndex() + 1, scope: rowHeader ? 'row' : undefined, role: rowHeader ? 'rowheader' : ariaRoles.cell },
+    const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });
+    const bodyCellClassname = buildClassnames([bodyCell, pinnedCellClassName, 'data-grid-cell']);
+    return (React__default.createElement(CellElement, { className: bodyCellClassname, "aria-colindex": cell.column.getIndex() + 1, scope: rowHeader ? 'row' : undefined, role: rowHeader ? 'rowheader' : ariaRoles.cell, style: pinnedCellStyles },
         React__default.createElement(CellContent, { contentStyle: {
                 justifyContent,
                 textAlign,

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';\n\nimport { bodyCell } from './BodyCell.module.css';\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\nconst bodyCellClassname = buildClassnames([bodyCell, 'data-grid-cell']);\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({ cell, ariaRoles }: ColumnCellProps) => {\n  const { justifyContent, textAlign, rowHeader } = cell.column.columnDef.meta!;\n  const CellElement = rowHeader ? 'th' : 'td';\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    >\n      <CellContent\n        contentStyle={\n          {\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n      >\n        {flexRender(cell.column.columnDef.cell, cell.getContext())}\n      </CellContent>\n    </CellElement>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;AAuBA,MAAM,iBAAiB,GAAG,eAAe,CAAC,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;AAEvE;;AAEG;AACU,MAAA,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,SAAS,EAAmB,KAAI;AAC/D,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,QACEA,cAAC,CAAA,aAAA,CAAA,WAAW,IACV,SAAS,EAAE,iBAAiB,EACb,eAAA,EAAA,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,EAAA;QAE9CA,cAAC,CAAA,aAAA,CAAA,WAAW,EACV,EAAA,YAAY,EACV;gBACE,cAAc;gBACd,SAAS;AACa,aAAA,EAAA,EAGzB,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 { bodyCell } from './BodyCell.module.css';\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/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({ cell, ariaRoles }: 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 bodyCellClassname = buildClassnames([bodyCell, pinnedCellClassName, 'data-grid-cell']);\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            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n      >\n        {flexRender(cell.column.columnDef.cell, cell.getContext())}\n      </CellContent>\n    </CellElement>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;AAwBA;;AAEG;AACU,MAAA,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,SAAS,EAAmB,KAAI;AAC/D,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,iBAAiB,GAAG,eAAe,CAAC,CAAC,QAAQ,EAAE,mBAAmB,EAAE,gBAAgB,CAAC,CAAC;IAE5F,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;gBACE,cAAc;gBACd,SAAS;AACa,aAAA,EAAA,EAGzB,UAAU,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.module.css.cjs

@@ -1,11 +1,11 @@
 'use strict';
 
-const cssContents = `._baseCell_1w2bt_1{box-sizing:border-box;position:relative;&:focus,&:focus-visible{box-shadow:inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);outline:var(--sizes-none)}}._bodyCell_w9phy_1{background-color:#fff;color:var(--text-body-small-color);font-family:var(--text-body-small-font-family);font-size:var(--text-body-small-font-size);font-weight:var(--text-body-small-font-weight);line-height:var(--text-body-small-line-height)}.data-grid-row.striped:nth-of-type(odd)>._bodyCell_w9phy_1{background-color:var(--colors-neutral-grey-lightest)}.data-grid-row.selected>._bodyCell_w9phy_1{background-color:var(--colors-brand-blue-lightest)}.data-grid-row+.data-grid-row>._bodyCell_w9phy_1{border-top:1px solid var(--colors-neutral-grey-base)}
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIjxubyBzb3VyY2U+IiwiQm9keUNlbGwubW9kdWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxtQkFBQSxzQkFBQSxrQkFBQSx3QkFBQSwySEFBQSwwQkFBQSxDQUFBLEFDQUEsbUJBR0UscUJBQXVCLENBRXZCLGtDQUFtQyxDQUNuQyw4Q0FBK0MsQ0FDL0MsMENBQTJDLENBQzNDLDhDQUErQyxDQUMvQyw4Q0FDRixDQUVBLDJEQUNFLG9EQUNGLENBRUEsMkNBQ0Usa0RBQ0YsQ0FFQSxpREFDRSxvREFDRiIsImZpbGUiOiJCb2R5Q2VsbC5tb2R1bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOltudWxsLCIuYm9keUNlbGwge1xuICBjb21wb3NlczogYmFzZUNlbGwgZnJvbSAnLi4vLi4vLi4vRGF0YUdyaWQubW9kdWxlLmNzcyc7XG5cbiAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7XG5cbiAgY29sb3I6IHZhcigtLXRleHQtYm9keS1zbWFsbC1jb2xvcik7XG4gIGZvbnQtZmFtaWx5OiB2YXIoLS10ZXh0LWJvZHktc21hbGwtZm9udC1mYW1pbHkpO1xuICBmb250LXNpemU6IHZhcigtLXRleHQtYm9keS1zbWFsbC1mb250LXNpemUpO1xuICBmb250LXdlaWdodDogdmFyKC0tdGV4dC1ib2R5LXNtYWxsLWZvbnQtd2VpZ2h0KTtcbiAgbGluZS1oZWlnaHQ6IHZhcigtLXRleHQtYm9keS1zbWFsbC1saW5lLWhlaWdodCk7XG59XG5cbjpnbG9iYWwoLmRhdGEtZ3JpZC1yb3cuc3RyaXBlZDpudGgtb2YtdHlwZShvZGQpKSA+IC5ib2R5Q2VsbCB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9ycy1uZXV0cmFsLWdyZXktbGlnaHRlc3QpO1xufVxuXG46Z2xvYmFsKC5kYXRhLWdyaWQtcm93LnNlbGVjdGVkKSA+IC5ib2R5Q2VsbCB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9ycy1icmFuZC1ibHVlLWxpZ2h0ZXN0KTtcbn1cblxuOmdsb2JhbCguZGF0YS1ncmlkLXJvdyArIC5kYXRhLWdyaWQtcm93KSA+IC5ib2R5Q2VsbCB7XG4gIGJvcmRlci10b3A6IDFweCBzb2xpZCB2YXIoLS1jb2xvcnMtbmV1dHJhbC1ncmV5LWJhc2UpO1xufVxuIl19 */`;
+const cssContents = `._baseCell_13swz_1{box-sizing:border-box;position:relative;&:focus,&:focus-visible{box-shadow:inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);outline:var(--sizes-none)}}._pinnedColumnBase_13swz_12{&:after{bottom:-1px;box-sizing:border-box;content:"";pointer-events:none;position:absolute;top:var(--sizes-none);width:30px}}._pinnedColumnLeft_13swz_27{&:after{box-shadow:inset 10px 0 10px -8px rgba(0,0,0,.25);right:var(--sizes-none);transform:translate(100%)}}._pinnedColumnRight_13swz_39{&:after{box-shadow:inset -10px 0 10px -8px rgba(0,0,0,.25);left:var(--sizes-none);transform:translate(-100%)}}._bodyCell_w9phy_1{background-color:#fff;color:var(--text-body-small-color);font-family:var(--text-body-small-font-family);font-size:var(--text-body-small-font-size);font-weight:var(--text-body-small-font-weight);line-height:var(--text-body-small-line-height)}.data-grid-row.striped:nth-of-type(odd)>._bodyCell_w9phy_1{background-color:var(--colors-neutral-grey-lightest)}.data-grid-row.selected>._bodyCell_w9phy_1{background-color:var(--colors-brand-blue-lightest)}.data-grid-row+.data-grid-row>._bodyCell_w9phy_1{border-top:1px solid var(--colors-neutral-grey-base)}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIjxubyBzb3VyY2U+IiwiQm9keUNlbGwubW9kdWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxtQkFBQSxzQkFBQSxrQkFBQSx3QkFBQSwySEFBQSwwQkFBQSxDQUFBLDRCQUFBLFFBQUEsWUFBQSxzQkFBQSxXQUFBLG9CQUFBLGtCQUFBLHNCQUFBLFdBQUEsQ0FBQSw0QkFBQSxRQUFBLGtEQUFBLHdCQUFBLDBCQUFBLENBQUEsNkJBQUEsUUFBQSxtREFBQSx1QkFBQSwyQkFBQSxDQUFBLEFDQUEsbUJBR0UscUJBQXVCLENBRXZCLGtDQUFtQyxDQUNuQyw4Q0FBK0MsQ0FDL0MsMENBQTJDLENBQzNDLDhDQUErQyxDQUMvQyw4Q0FDRixDQUVBLDJEQUNFLG9EQUNGLENBRUEsMkNBQ0Usa0RBQ0YsQ0FFQSxpREFDRSxvREFDRiIsImZpbGUiOiJCb2R5Q2VsbC5tb2R1bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOltudWxsLCIuYm9keUNlbGwge1xuICBjb21wb3NlczogYmFzZUNlbGwgZnJvbSAnLi4vLi4vLi4vRGF0YUdyaWQubW9kdWxlLmNzcyc7XG5cbiAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7XG5cbiAgY29sb3I6IHZhcigtLXRleHQtYm9keS1zbWFsbC1jb2xvcik7XG4gIGZvbnQtZmFtaWx5OiB2YXIoLS10ZXh0LWJvZHktc21hbGwtZm9udC1mYW1pbHkpO1xuICBmb250LXNpemU6IHZhcigtLXRleHQtYm9keS1zbWFsbC1mb250LXNpemUpO1xuICBmb250LXdlaWdodDogdmFyKC0tdGV4dC1ib2R5LXNtYWxsLWZvbnQtd2VpZ2h0KTtcbiAgbGluZS1oZWlnaHQ6IHZhcigtLXRleHQtYm9keS1zbWFsbC1saW5lLWhlaWdodCk7XG59XG5cbjpnbG9iYWwoLmRhdGEtZ3JpZC1yb3cuc3RyaXBlZDpudGgtb2YtdHlwZShvZGQpKSA+IC5ib2R5Q2VsbCB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9ycy1uZXV0cmFsLWdyZXktbGlnaHRlc3QpO1xufVxuXG46Z2xvYmFsKC5kYXRhLWdyaWQtcm93LnNlbGVjdGVkKSA+IC5ib2R5Q2VsbCB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9ycy1icmFuZC1ibHVlLWxpZ2h0ZXN0KTtcbn1cblxuOmdsb2JhbCguZGF0YS1ncmlkLXJvdyArIC5kYXRhLWdyaWQtcm93KSA+IC5ib2R5Q2VsbCB7XG4gIGJvcmRlci10b3A6IDFweCBzb2xpZCB2YXIoLS1jb2xvcnMtbmV1dHJhbC1ncmV5LWJhc2UpO1xufVxuIl19 */`;
 const style = document.createElement('style');
 style.innerHTML = cssContents;
 document.head.appendChild(style);
-const bodyCell = '_bodyCell_w9phy_1 _baseCell_1w2bt_1';
+const bodyCell = '_bodyCell_w9phy_1 _baseCell_13swz_1';
 
 exports.bodyCell = bodyCell;
 //# sourceMappingURL=BodyCell.module.css.cjs.map