@veeqo/ui 10.0.0-beta.1 → 10.0.0-beta.3

package/dist/components/DataGrid/hooks/useColumnState.js

@@ -0,0 +1,65 @@
+import { useRef, useMemo } from 'react';
+import { ColumnMapper } from '../utils/ColumnMapper.js';
+import { SelectionColumnDefinition } from '../columns/SelectionColumnDefinition.js';
+import { SELECTION_COLUMN_ID } from '../constants.js';
+
+const useColumnState = ({ columns, hiddenColumns, columnOrdering, pinnedColumns, enableRowSelection, }) => {
+    /**
+     * 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, 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]);
+    return {
+        mappedColumnDefinitions,
+        columnOrder,
+        columnVisibility,
+        columnPinning,
+    };
+};
+
+export { useColumnState };
+//# sourceMappingURL=useColumnState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useColumnState.js","sources":["../../../../src/components/DataGrid/hooks/useColumnState.ts"],"sourcesContent":["import { useMemo, useRef } from 'react';\nimport { ColumnMapper } from '../utils';\nimport { DataGridProps } from '../types';\nimport { SelectionColumnDefinition } from '../columns';\nimport { SELECTION_COLUMN_ID } from '../constants';\n\ntype UseColumnStateProps = Pick<\n  DataGridProps,\n  'columns' | 'hiddenColumns' | 'columnOrdering' | 'pinnedColumns'\n> & {\n  enableRowSelection: boolean;\n};\n\nexport const useColumnState = ({\n  columns,\n  hiddenColumns,\n  columnOrdering,\n  pinnedColumns,\n  enableRowSelection,\n}: UseColumnStateProps) => {\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  return {\n    mappedColumnDefinitions,\n    columnOrder,\n    columnVisibility,\n    columnPinning,\n  };\n};\n"],"names":[],"mappings":";;;;;AAaa,MAAA,cAAc,GAAG,CAAC,EAC7B,OAAO,EACP,aAAa,EACb,cAAc,EACd,aAAa,EACb,kBAAkB,GACE,KAAI;AACxB;;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;IAEvC,OAAO;QACL,uBAAuB;QACvB,WAAW;QACX,gBAAgB;QAChB,aAAa;KACd;AACH;;;;"}

package/dist/components/DataGrid/hooks/useColumnWidthState.cjs

@@ -0,0 +1,52 @@
+'use strict';
+
+var React = require('react');
+
+/**
+ * Normalizes the column widths to ensure they are within the min/max bounds defined in the column definitions. Internally within
+ * the columnSizing state, TanStack will allow columns to be resized to values exceeding the min/max bounds - this corrects for
+ * that behaviour.
+ * @param columnDefinitions Mapped column definitions.
+ * @param columnWidths An object containing the current widths of the columns.
+ * @returns An object containing the current widths of the columns, with the min/max sizes taken into account.
+ */
+const normalizeColumnWidths = (columnDefinitions, columnWidths) => {
+    const normalizedColumnWidths = {};
+    Object.entries(columnWidths).forEach(([columnId, width]) => {
+        const { minSize, maxSize } = columnDefinitions.find((col) => col.id === columnId);
+        // Both minSize and maxSize properties should always be defined since they're set to defaults by the ColumnMapper - but, just in case.
+        if (!minSize || !maxSize) {
+            normalizedColumnWidths[columnId] = width;
+            return;
+        }
+        const newWidth = Math.max(minSize, Math.min(maxSize, width));
+        normalizedColumnWidths[columnId] = newWidth;
+    });
+    return normalizedColumnWidths;
+};
+/**
+ * Hook used to handle column width state for the grid. By default, it sets up internal state, but if the user provides columnWidths
+ * and onColumnsResized props to the grid, it will use those to manage the column widths externally.
+ */
+const useColumnWidthState = ({ mappedColumnDefinitions, columnWidths, onColumnsResized, }) => {
+    // Internal state to store the column widths if the user doesn't provide them.
+    const [internalColumnWidthState, setInternalColumnWidthState] = React.useState({});
+    // If the user provides columnWidths and an onColumnsResized callback, we use them to control the column widths externally.
+    const isControlledExternally = columnWidths && onColumnsResized;
+    const columnSizing = isControlledExternally ? columnWidths : internalColumnWidthState;
+    const onColumnSizingChange = React.useCallback((onUpdate) => {
+        const newColumnSizing = typeof onUpdate === 'function' ? onUpdate(columnSizing) : onUpdate;
+        const normalizedColumnSizing = normalizeColumnWidths(mappedColumnDefinitions, newColumnSizing);
+        if (isControlledExternally || onColumnsResized) {
+            onColumnsResized(normalizedColumnSizing);
+        }
+        setInternalColumnWidthState(normalizedColumnSizing);
+    }, [columnSizing, isControlledExternally, onColumnsResized, mappedColumnDefinitions]);
+    return {
+        columnSizing,
+        onColumnSizingChange,
+    };
+};
+
+exports.useColumnWidthState = useColumnWidthState;
+//# sourceMappingURL=useColumnWidthState.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useColumnWidthState.cjs","sources":["../../../../src/components/DataGrid/hooks/useColumnWidthState.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { ColumnDef, ColumnSizingState, OnChangeFn } from '@tanstack/react-table';\n\nimport { ColumnWidths } from '../types/ColumnWidths';\n\ntype UseColumnWidthStateProps = {\n  /**\n   * The TanStack Table column definitions.\n   */\n  mappedColumnDefinitions: ColumnDef<any, any>[];\n\n  /**\n   * The current widths of the columns.\n   */\n  columnWidths?: ColumnWidths;\n\n  /**\n   * Callback function to be called when the columns are resized.\n   */\n  onColumnsResized?: (columnWidths: ColumnWidths) => void;\n};\n\n/**\n * Normalizes the column widths to ensure they are within the min/max bounds defined in the column definitions. Internally within\n * the columnSizing state, TanStack will allow columns to be resized to values exceeding the min/max bounds - this corrects for\n * that behaviour.\n * @param columnDefinitions Mapped column definitions.\n * @param columnWidths An object containing the current widths of the columns.\n * @returns An object containing the current widths of the columns, with the min/max sizes taken into account.\n */\nconst normalizeColumnWidths = (\n  columnDefinitions: ColumnDef<any, any>[],\n  columnWidths: ColumnWidths,\n) => {\n  const normalizedColumnWidths: Record<string, number> = {};\n\n  Object.entries(columnWidths).forEach(([columnId, width]) => {\n    const { minSize, maxSize } = columnDefinitions.find((col) => col.id === columnId)!;\n\n    // Both minSize and maxSize properties should always be defined since they're set to defaults by the ColumnMapper - but, just in case.\n    if (!minSize || !maxSize) {\n      normalizedColumnWidths[columnId] = width;\n      return;\n    }\n\n    const newWidth = Math.max(minSize, Math.min(maxSize, width));\n    normalizedColumnWidths[columnId] = newWidth;\n  });\n\n  return normalizedColumnWidths;\n};\n\n/**\n * Hook used to handle column width state for the grid. By default, it sets up internal state, but if the user provides columnWidths\n * and onColumnsResized props to the grid, it will use those to manage the column widths externally.\n */\nexport const useColumnWidthState = ({\n  mappedColumnDefinitions,\n  columnWidths,\n  onColumnsResized,\n}: UseColumnWidthStateProps) => {\n  // Internal state to store the column widths if the user doesn't provide them.\n  const [internalColumnWidthState, setInternalColumnWidthState] = useState<ColumnWidths>({});\n\n  // If the user provides columnWidths and an onColumnsResized callback, we use them to control the column widths externally.\n  const isControlledExternally = columnWidths && onColumnsResized;\n\n  const columnSizing = isControlledExternally ? columnWidths : internalColumnWidthState;\n\n  const onColumnSizingChange: OnChangeFn<ColumnSizingState> = useCallback(\n    (onUpdate) => {\n      const newColumnSizing = typeof onUpdate === 'function' ? onUpdate(columnSizing) : onUpdate;\n      const normalizedColumnSizing = normalizeColumnWidths(\n        mappedColumnDefinitions,\n        newColumnSizing,\n      );\n\n      if (isControlledExternally || onColumnsResized) {\n        onColumnsResized(normalizedColumnSizing);\n      }\n\n      setInternalColumnWidthState(normalizedColumnSizing);\n    },\n    [columnSizing, isControlledExternally, onColumnsResized, mappedColumnDefinitions],\n  );\n\n  return {\n    columnSizing,\n    onColumnSizingChange,\n  };\n};\n"],"names":["useState","useCallback"],"mappings":";;;;AAsBA;;;;;;;AAOG;AACH,MAAM,qBAAqB,GAAG,CAC5B,iBAAwC,EACxC,YAA0B,KACxB;IACF,MAAM,sBAAsB,GAA2B,EAAE;AAEzD,IAAA,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAI;QACzD,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,KAAK,QAAQ,CAAE;;AAGlF,QAAA,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO,EAAE;AACxB,YAAA,sBAAsB,CAAC,QAAQ,CAAC,GAAG,KAAK;YACxC;AACD;AAED,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AAC5D,QAAA,sBAAsB,CAAC,QAAQ,CAAC,GAAG,QAAQ;AAC7C,KAAC,CAAC;AAEF,IAAA,OAAO,sBAAsB;AAC/B,CAAC;AAED;;;AAGG;AACI,MAAM,mBAAmB,GAAG,CAAC,EAClC,uBAAuB,EACvB,YAAY,EACZ,gBAAgB,GACS,KAAI;;IAE7B,MAAM,CAAC,wBAAwB,EAAE,2BAA2B,CAAC,GAAGA,cAAQ,CAAe,EAAE,CAAC;;AAG1F,IAAA,MAAM,sBAAsB,GAAG,YAAY,IAAI,gBAAgB;IAE/D,MAAM,YAAY,GAAG,sBAAsB,GAAG,YAAY,GAAG,wBAAwB;AAErF,IAAA,MAAM,oBAAoB,GAAkCC,iBAAW,CACrE,CAAC,QAAQ,KAAI;AACX,QAAA,MAAM,eAAe,GAAG,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,YAAY,CAAC,GAAG,QAAQ;QAC1F,MAAM,sBAAsB,GAAG,qBAAqB,CAClD,uBAAuB,EACvB,eAAe,CAChB;QAED,IAAI,sBAAsB,IAAI,gBAAgB,EAAE;YAC9C,gBAAgB,CAAC,sBAAsB,CAAC;AACzC;QAED,2BAA2B,CAAC,sBAAsB,CAAC;KACpD,EACD,CAAC,YAAY,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,uBAAuB,CAAC,CAClF;IAED,OAAO;QACL,YAAY;QACZ,oBAAoB;KACrB;AACH;;;;"}

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

@@ -0,0 +1,25 @@
+import { ColumnDef, ColumnSizingState, OnChangeFn } from '@tanstack/react-table';
+import { ColumnWidths } from '../types/ColumnWidths';
+type UseColumnWidthStateProps = {
+    /**
+     * The TanStack Table column definitions.
+     */
+    mappedColumnDefinitions: ColumnDef<any, any>[];
+    /**
+     * The current widths of the columns.
+     */
+    columnWidths?: ColumnWidths;
+    /**
+     * Callback function to be called when the columns are resized.
+     */
+    onColumnsResized?: (columnWidths: ColumnWidths) => void;
+};
+/**
+ * Hook used to handle column width state for the grid. By default, it sets up internal state, but if the user provides columnWidths
+ * and onColumnsResized props to the grid, it will use those to manage the column widths externally.
+ */
+export declare const useColumnWidthState: ({ mappedColumnDefinitions, columnWidths, onColumnsResized, }: UseColumnWidthStateProps) => {
+    columnSizing: ColumnWidths;
+    onColumnSizingChange: OnChangeFn<ColumnSizingState>;
+};
+export {};

package/dist/components/DataGrid/hooks/useColumnWidthState.js

@@ -0,0 +1,50 @@
+import { useState, useCallback } from 'react';
+
+/**
+ * Normalizes the column widths to ensure they are within the min/max bounds defined in the column definitions. Internally within
+ * the columnSizing state, TanStack will allow columns to be resized to values exceeding the min/max bounds - this corrects for
+ * that behaviour.
+ * @param columnDefinitions Mapped column definitions.
+ * @param columnWidths An object containing the current widths of the columns.
+ * @returns An object containing the current widths of the columns, with the min/max sizes taken into account.
+ */
+const normalizeColumnWidths = (columnDefinitions, columnWidths) => {
+    const normalizedColumnWidths = {};
+    Object.entries(columnWidths).forEach(([columnId, width]) => {
+        const { minSize, maxSize } = columnDefinitions.find((col) => col.id === columnId);
+        // Both minSize and maxSize properties should always be defined since they're set to defaults by the ColumnMapper - but, just in case.
+        if (!minSize || !maxSize) {
+            normalizedColumnWidths[columnId] = width;
+            return;
+        }
+        const newWidth = Math.max(minSize, Math.min(maxSize, width));
+        normalizedColumnWidths[columnId] = newWidth;
+    });
+    return normalizedColumnWidths;
+};
+/**
+ * Hook used to handle column width state for the grid. By default, it sets up internal state, but if the user provides columnWidths
+ * and onColumnsResized props to the grid, it will use those to manage the column widths externally.
+ */
+const useColumnWidthState = ({ mappedColumnDefinitions, columnWidths, onColumnsResized, }) => {
+    // Internal state to store the column widths if the user doesn't provide them.
+    const [internalColumnWidthState, setInternalColumnWidthState] = useState({});
+    // If the user provides columnWidths and an onColumnsResized callback, we use them to control the column widths externally.
+    const isControlledExternally = columnWidths && onColumnsResized;
+    const columnSizing = isControlledExternally ? columnWidths : internalColumnWidthState;
+    const onColumnSizingChange = useCallback((onUpdate) => {
+        const newColumnSizing = typeof onUpdate === 'function' ? onUpdate(columnSizing) : onUpdate;
+        const normalizedColumnSizing = normalizeColumnWidths(mappedColumnDefinitions, newColumnSizing);
+        if (isControlledExternally || onColumnsResized) {
+            onColumnsResized(normalizedColumnSizing);
+        }
+        setInternalColumnWidthState(normalizedColumnSizing);
+    }, [columnSizing, isControlledExternally, onColumnsResized, mappedColumnDefinitions]);
+    return {
+        columnSizing,
+        onColumnSizingChange,
+    };
+};
+
+export { useColumnWidthState };
+//# sourceMappingURL=useColumnWidthState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useColumnWidthState.js","sources":["../../../../src/components/DataGrid/hooks/useColumnWidthState.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { ColumnDef, ColumnSizingState, OnChangeFn } from '@tanstack/react-table';\n\nimport { ColumnWidths } from '../types/ColumnWidths';\n\ntype UseColumnWidthStateProps = {\n  /**\n   * The TanStack Table column definitions.\n   */\n  mappedColumnDefinitions: ColumnDef<any, any>[];\n\n  /**\n   * The current widths of the columns.\n   */\n  columnWidths?: ColumnWidths;\n\n  /**\n   * Callback function to be called when the columns are resized.\n   */\n  onColumnsResized?: (columnWidths: ColumnWidths) => void;\n};\n\n/**\n * Normalizes the column widths to ensure they are within the min/max bounds defined in the column definitions. Internally within\n * the columnSizing state, TanStack will allow columns to be resized to values exceeding the min/max bounds - this corrects for\n * that behaviour.\n * @param columnDefinitions Mapped column definitions.\n * @param columnWidths An object containing the current widths of the columns.\n * @returns An object containing the current widths of the columns, with the min/max sizes taken into account.\n */\nconst normalizeColumnWidths = (\n  columnDefinitions: ColumnDef<any, any>[],\n  columnWidths: ColumnWidths,\n) => {\n  const normalizedColumnWidths: Record<string, number> = {};\n\n  Object.entries(columnWidths).forEach(([columnId, width]) => {\n    const { minSize, maxSize } = columnDefinitions.find((col) => col.id === columnId)!;\n\n    // Both minSize and maxSize properties should always be defined since they're set to defaults by the ColumnMapper - but, just in case.\n    if (!minSize || !maxSize) {\n      normalizedColumnWidths[columnId] = width;\n      return;\n    }\n\n    const newWidth = Math.max(minSize, Math.min(maxSize, width));\n    normalizedColumnWidths[columnId] = newWidth;\n  });\n\n  return normalizedColumnWidths;\n};\n\n/**\n * Hook used to handle column width state for the grid. By default, it sets up internal state, but if the user provides columnWidths\n * and onColumnsResized props to the grid, it will use those to manage the column widths externally.\n */\nexport const useColumnWidthState = ({\n  mappedColumnDefinitions,\n  columnWidths,\n  onColumnsResized,\n}: UseColumnWidthStateProps) => {\n  // Internal state to store the column widths if the user doesn't provide them.\n  const [internalColumnWidthState, setInternalColumnWidthState] = useState<ColumnWidths>({});\n\n  // If the user provides columnWidths and an onColumnsResized callback, we use them to control the column widths externally.\n  const isControlledExternally = columnWidths && onColumnsResized;\n\n  const columnSizing = isControlledExternally ? columnWidths : internalColumnWidthState;\n\n  const onColumnSizingChange: OnChangeFn<ColumnSizingState> = useCallback(\n    (onUpdate) => {\n      const newColumnSizing = typeof onUpdate === 'function' ? onUpdate(columnSizing) : onUpdate;\n      const normalizedColumnSizing = normalizeColumnWidths(\n        mappedColumnDefinitions,\n        newColumnSizing,\n      );\n\n      if (isControlledExternally || onColumnsResized) {\n        onColumnsResized(normalizedColumnSizing);\n      }\n\n      setInternalColumnWidthState(normalizedColumnSizing);\n    },\n    [columnSizing, isControlledExternally, onColumnsResized, mappedColumnDefinitions],\n  );\n\n  return {\n    columnSizing,\n    onColumnSizingChange,\n  };\n};\n"],"names":[],"mappings":";;AAsBA;;;;;;;AAOG;AACH,MAAM,qBAAqB,GAAG,CAC5B,iBAAwC,EACxC,YAA0B,KACxB;IACF,MAAM,sBAAsB,GAA2B,EAAE;AAEzD,IAAA,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAI;QACzD,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,KAAK,QAAQ,CAAE;;AAGlF,QAAA,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO,EAAE;AACxB,YAAA,sBAAsB,CAAC,QAAQ,CAAC,GAAG,KAAK;YACxC;AACD;AAED,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AAC5D,QAAA,sBAAsB,CAAC,QAAQ,CAAC,GAAG,QAAQ;AAC7C,KAAC,CAAC;AAEF,IAAA,OAAO,sBAAsB;AAC/B,CAAC;AAED;;;AAGG;AACI,MAAM,mBAAmB,GAAG,CAAC,EAClC,uBAAuB,EACvB,YAAY,EACZ,gBAAgB,GACS,KAAI;;IAE7B,MAAM,CAAC,wBAAwB,EAAE,2BAA2B,CAAC,GAAG,QAAQ,CAAe,EAAE,CAAC;;AAG1F,IAAA,MAAM,sBAAsB,GAAG,YAAY,IAAI,gBAAgB;IAE/D,MAAM,YAAY,GAAG,sBAAsB,GAAG,YAAY,GAAG,wBAAwB;AAErF,IAAA,MAAM,oBAAoB,GAAkC,WAAW,CACrE,CAAC,QAAQ,KAAI;AACX,QAAA,MAAM,eAAe,GAAG,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,YAAY,CAAC,GAAG,QAAQ;QAC1F,MAAM,sBAAsB,GAAG,qBAAqB,CAClD,uBAAuB,EACvB,eAAe,CAChB;QAED,IAAI,sBAAsB,IAAI,gBAAgB,EAAE;YAC9C,gBAAgB,CAAC,sBAAsB,CAAC;AACzC;QAED,2BAA2B,CAAC,sBAAsB,CAAC;KACpD,EACD,CAAC,YAAY,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,uBAAuB,CAAC,CAClF;IAED,OAAO;QACL,YAAY;QACZ,oBAAoB;KACrB;AACH;;;;"}

package/dist/components/DataGrid/hooks/useExpandedState.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+var React = require('react');
+
+const useExpandedState = (rowGrouping) => {
+    const { getChildData, expandedRows, onRowExpanded } = rowGrouping || {};
+    const internalExpandedState = React.useMemo(() => {
+        if (!expandedRows || !onRowExpanded)
+            return {};
+        return expandedRows;
+    }, [expandedRows, onRowExpanded]);
+    const setInternalExpandedState = React.useCallback((onUpdate) => {
+        if (!onRowExpanded)
+            return;
+        const newExpandedState = typeof onUpdate === 'function' ? onUpdate(internalExpandedState) : onUpdate;
+        onRowExpanded(newExpandedState);
+    }, [onRowExpanded, internalExpandedState]);
+    const enableExpanding = !!getChildData;
+    const getRowCanExpand = React.useCallback((row) => {
+        if (!getChildData)
+            return false;
+        return getChildData(row.original) !== undefined;
+    }, [getChildData]);
+    return {
+        enableExpanding,
+        getSubRows: getChildData,
+        getRowCanExpand,
+        expanded: internalExpandedState,
+        onExpandedChange: setInternalExpandedState,
+    };
+};
+
+exports.useExpandedState = useExpandedState;
+//# sourceMappingURL=useExpandedState.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useExpandedState.cjs","sources":["../../../../src/components/DataGrid/hooks/useExpandedState.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react';\n\nimport { ExpandedState, OnChangeFn } from '@tanstack/react-table';\nimport { RowGroupingConfiguration } from '../types';\n\nexport const useExpandedState = (rowGrouping?: RowGroupingConfiguration) => {\n  const { getChildData, expandedRows, onRowExpanded } = rowGrouping || {};\n\n  const internalExpandedState = useMemo(() => {\n    if (!expandedRows || !onRowExpanded) return {};\n\n    return expandedRows;\n  }, [expandedRows, onRowExpanded]);\n\n  const setInternalExpandedState: OnChangeFn<ExpandedState> = useCallback(\n    (onUpdate) => {\n      if (!onRowExpanded) return;\n\n      const newExpandedState =\n        typeof onUpdate === 'function' ? onUpdate(internalExpandedState) : onUpdate;\n\n      onRowExpanded(newExpandedState);\n    },\n    [onRowExpanded, internalExpandedState],\n  );\n\n  const enableExpanding = !!getChildData;\n  const getRowCanExpand = useCallback(\n    (row: any) => {\n      if (!getChildData) return false;\n\n      return getChildData(row.original) !== undefined;\n    },\n    [getChildData],\n  );\n\n  return {\n    enableExpanding,\n    getSubRows: getChildData,\n    getRowCanExpand,\n    expanded: internalExpandedState,\n    onExpandedChange: setInternalExpandedState,\n  };\n};\n"],"names":["useMemo","useCallback"],"mappings":";;;;AAKa,MAAA,gBAAgB,GAAG,CAAC,WAAsC,KAAI;IACzE,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,GAAG,WAAW,IAAI,EAAE;AAEvE,IAAA,MAAM,qBAAqB,GAAGA,aAAO,CAAC,MAAK;AACzC,QAAA,IAAI,CAAC,YAAY,IAAI,CAAC,aAAa;AAAE,YAAA,OAAO,EAAE;AAE9C,QAAA,OAAO,YAAY;AACrB,KAAC,EAAE,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;AAEjC,IAAA,MAAM,wBAAwB,GAA8BC,iBAAW,CACrE,CAAC,QAAQ,KAAI;AACX,QAAA,IAAI,CAAC,aAAa;YAAE;AAEpB,QAAA,MAAM,gBAAgB,GACpB,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,qBAAqB,CAAC,GAAG,QAAQ;QAE7E,aAAa,CAAC,gBAAgB,CAAC;AACjC,KAAC,EACD,CAAC,aAAa,EAAE,qBAAqB,CAAC,CACvC;AAED,IAAA,MAAM,eAAe,GAAG,CAAC,CAAC,YAAY;AACtC,IAAA,MAAM,eAAe,GAAGA,iBAAW,CACjC,CAAC,GAAQ,KAAI;AACX,QAAA,IAAI,CAAC,YAAY;AAAE,YAAA,OAAO,KAAK;QAE/B,OAAO,YAAY,CAAC,GAAG,CAAC,QAAQ,CAAC,KAAK,SAAS;AACjD,KAAC,EACD,CAAC,YAAY,CAAC,CACf;IAED,OAAO;QACL,eAAe;AACf,QAAA,UAAU,EAAE,YAAY;QACxB,eAAe;AACf,QAAA,QAAQ,EAAE,qBAAqB;AAC/B,QAAA,gBAAgB,EAAE,wBAAwB;KAC3C;AACH;;;;"}

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

@@ -0,0 +1,9 @@
+import { ExpandedState, OnChangeFn } from '@tanstack/react-table';
+import { RowGroupingConfiguration } from '../types';
+export declare const useExpandedState: (rowGrouping?: RowGroupingConfiguration) => {
+    enableExpanding: boolean;
+    getSubRows: ((row: any) => any) | undefined;
+    getRowCanExpand: (row: any) => boolean;
+    expanded: import("../types").ExpandedRows;
+    onExpandedChange: OnChangeFn<ExpandedState>;
+};

package/dist/components/DataGrid/hooks/useExpandedState.js

@@ -0,0 +1,32 @@
+import { useMemo, useCallback } from 'react';
+
+const useExpandedState = (rowGrouping) => {
+    const { getChildData, expandedRows, onRowExpanded } = rowGrouping || {};
+    const internalExpandedState = useMemo(() => {
+        if (!expandedRows || !onRowExpanded)
+            return {};
+        return expandedRows;
+    }, [expandedRows, onRowExpanded]);
+    const setInternalExpandedState = useCallback((onUpdate) => {
+        if (!onRowExpanded)
+            return;
+        const newExpandedState = typeof onUpdate === 'function' ? onUpdate(internalExpandedState) : onUpdate;
+        onRowExpanded(newExpandedState);
+    }, [onRowExpanded, internalExpandedState]);
+    const enableExpanding = !!getChildData;
+    const getRowCanExpand = useCallback((row) => {
+        if (!getChildData)
+            return false;
+        return getChildData(row.original) !== undefined;
+    }, [getChildData]);
+    return {
+        enableExpanding,
+        getSubRows: getChildData,
+        getRowCanExpand,
+        expanded: internalExpandedState,
+        onExpandedChange: setInternalExpandedState,
+    };
+};
+
+export { useExpandedState };
+//# sourceMappingURL=useExpandedState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useExpandedState.js","sources":["../../../../src/components/DataGrid/hooks/useExpandedState.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react';\n\nimport { ExpandedState, OnChangeFn } from '@tanstack/react-table';\nimport { RowGroupingConfiguration } from '../types';\n\nexport const useExpandedState = (rowGrouping?: RowGroupingConfiguration) => {\n  const { getChildData, expandedRows, onRowExpanded } = rowGrouping || {};\n\n  const internalExpandedState = useMemo(() => {\n    if (!expandedRows || !onRowExpanded) return {};\n\n    return expandedRows;\n  }, [expandedRows, onRowExpanded]);\n\n  const setInternalExpandedState: OnChangeFn<ExpandedState> = useCallback(\n    (onUpdate) => {\n      if (!onRowExpanded) return;\n\n      const newExpandedState =\n        typeof onUpdate === 'function' ? onUpdate(internalExpandedState) : onUpdate;\n\n      onRowExpanded(newExpandedState);\n    },\n    [onRowExpanded, internalExpandedState],\n  );\n\n  const enableExpanding = !!getChildData;\n  const getRowCanExpand = useCallback(\n    (row: any) => {\n      if (!getChildData) return false;\n\n      return getChildData(row.original) !== undefined;\n    },\n    [getChildData],\n  );\n\n  return {\n    enableExpanding,\n    getSubRows: getChildData,\n    getRowCanExpand,\n    expanded: internalExpandedState,\n    onExpandedChange: setInternalExpandedState,\n  };\n};\n"],"names":[],"mappings":";;AAKa,MAAA,gBAAgB,GAAG,CAAC,WAAsC,KAAI;IACzE,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,GAAG,WAAW,IAAI,EAAE;AAEvE,IAAA,MAAM,qBAAqB,GAAG,OAAO,CAAC,MAAK;AACzC,QAAA,IAAI,CAAC,YAAY,IAAI,CAAC,aAAa;AAAE,YAAA,OAAO,EAAE;AAE9C,QAAA,OAAO,YAAY;AACrB,KAAC,EAAE,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;AAEjC,IAAA,MAAM,wBAAwB,GAA8B,WAAW,CACrE,CAAC,QAAQ,KAAI;AACX,QAAA,IAAI,CAAC,aAAa;YAAE;AAEpB,QAAA,MAAM,gBAAgB,GACpB,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,qBAAqB,CAAC,GAAG,QAAQ;QAE7E,aAAa,CAAC,gBAAgB,CAAC;AACjC,KAAC,EACD,CAAC,aAAa,EAAE,qBAAqB,CAAC,CACvC;AAED,IAAA,MAAM,eAAe,GAAG,CAAC,CAAC,YAAY;AACtC,IAAA,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,GAAQ,KAAI;AACX,QAAA,IAAI,CAAC,YAAY;AAAE,YAAA,OAAO,KAAK;QAE/B,OAAO,YAAY,CAAC,GAAG,CAAC,QAAQ,CAAC,KAAK,SAAS;AACjD,KAAC,EACD,CAAC,YAAY,CAAC,CACf;IAED,OAAO;QACL,eAAe;AACf,QAAA,UAAU,EAAE,YAAY;QACxB,eAAe;AACf,QAAA,QAAQ,EAAE,qBAAqB;AAC/B,QAAA,gBAAgB,EAAE,wBAAwB;KAC3C;AACH;;;;"}

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

@@ -0,0 +1 @@
+export type ColumnWidths = Record<string, number>;

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

@@ -4,6 +4,8 @@ import { BorderMode, ResizeMode, SelectionMode } from './enums';
 import { ColumnDefinition } from './ColumnDefinition';
 import { SortState } from './SortState';
 import { PinnedColumnState } from './PinnedColumnState';
+import { RowGroupingConfiguration } from './RowGroupingConfiguration';
+import { ColumnWidths } from './ColumnWidths';
 export type CustomState = {
     iconSlot: ReactElement;
     heading: string;
@@ -104,4 +106,18 @@ export type DataGridProps = Pick<AriaAttributes, 'aria-label'> & {
      * Handler called when the row selection is changed.
      */
     onSelectionChanged?: (selectedRows: string[]) => void;
+    /** Row grouping */
+    /**
+     * Row grouping configuration for rendering nested data in the grid.
+     */
+    rowGrouping?: RowGroupingConfiguration;
+    /** Column widths */
+    /**
+     * Column widths, a map of column ID's to their widths in pixels. If this is undefined, or a column isn't included, the default width will be used.
+     */
+    columnWidths?: ColumnWidths;
+    /**
+     * Callback which is raised when the column widths change.
+     */
+    onColumnsResized?: (columnWidths: ColumnWidths) => void;
 };

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

@@ -0,0 +1,22 @@
+export type ExpandedRows = true | Record<string, boolean>;
+/**
+ * Configuration for row grouping within the `DataGrid` component.
+ */
+export type RowGroupingConfiguration<TRow = any> = {
+    /**
+     * Getter used to fetch children within the tree data structure.
+     * @param row The row data to fetch children for.
+     * @returns The children of the given row.
+     */
+    getChildData: (row: TRow) => any;
+    /**
+     * Expanded row state. This can either be:
+     * - `true` - every row is expanded by default.
+     * - a record of row ID's to a boolean value indicating whether the row is expanded or not.
+     */
+    expandedRows: ExpandedRows;
+    /**
+     * Setter called when a row is expanded within the table.
+     */
+    onRowExpanded: (expandedRows: ExpandedRows) => void;
+};

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

@@ -4,3 +4,4 @@ export { AriaRoles } from './AriaRoles';
 export { ColumnDefinition } from './ColumnDefinition';
 export { SortState } from './SortState';
 export { PinnedColumnState } from './PinnedColumnState';
+export { RowGroupingConfiguration, ExpandedRows } from './RowGroupingConfiguration';

package/dist/components/DataGrid/utils/getAriaRoles.cjs

@@ -1,15 +1,21 @@
 'use strict';
 
-const getAriaRoles = (enableKeyboardNavigation) => {
-    if (!enableKeyboardNavigation) {
+const getAriaRoles = ({ enableKeyboardNavigation, rowGrouping, }) => {
+    if (rowGrouping) {
         return {
-            table: 'table',
-            cell: 'cell',
+            table: 'treegrid',
+            cell: 'gridcell',
+        };
+    }
+    if (enableKeyboardNavigation) {
+        return {
+            table: 'grid',
+            cell: 'gridcell',
         };
     }
     return {
-        table: 'grid',
-        cell: 'gridcell',
+        table: 'table',
+        cell: 'cell',
     };
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"getAriaRoles.cjs","sources":["../../../../src/components/DataGrid/utils/getAriaRoles.ts"],"sourcesContent":["import { AriaRoles } from '../types/AriaRoles';\n\nexport const getAriaRoles = (enableKeyboardNavigation: boolean): AriaRoles => {\n  if (!enableKeyboardNavigation) {\n    return {\n      table: 'table',\n      cell: 'cell',\n    };\n  }\n\n  return {\n    table: 'grid',\n    cell: 'gridcell',\n  };\n};\n"],"names":[],"mappings":";;AAEa,MAAA,YAAY,GAAG,CAAC,wBAAiC,KAAe;IAC3E,IAAI,CAAC,wBAAwB,EAAE;QAC7B,OAAO;AACL,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,IAAI,EAAE,MAAM;SACb;AACF;IAED,OAAO;AACL,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,IAAI,EAAE,UAAU;KACjB;AACH;;;;"}
+{"version":3,"file":"getAriaRoles.cjs","sources":["../../../../src/components/DataGrid/utils/getAriaRoles.ts"],"sourcesContent":["import { DataGridProps } from '../types';\nimport { AriaRoles } from '../types/AriaRoles';\n\ntype GetAriaRolesProps = Pick<DataGridProps, 'enableKeyboardNavigation' | 'rowGrouping'>;\n\nexport const getAriaRoles = ({\n  enableKeyboardNavigation,\n  rowGrouping,\n}: GetAriaRolesProps): AriaRoles => {\n  if (rowGrouping) {\n    return {\n      table: 'treegrid',\n      cell: 'gridcell',\n    };\n  }\n\n  if (enableKeyboardNavigation) {\n    return {\n      table: 'grid',\n      cell: 'gridcell',\n    };\n  }\n\n  return {\n    table: 'table',\n    cell: 'cell',\n  };\n};\n"],"names":[],"mappings":";;AAKa,MAAA,YAAY,GAAG,CAAC,EAC3B,wBAAwB,EACxB,WAAW,GACO,KAAe;AACjC,IAAA,IAAI,WAAW,EAAE;QACf,OAAO;AACL,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,IAAI,EAAE,UAAU;SACjB;AACF;AAED,IAAA,IAAI,wBAAwB,EAAE;QAC5B,OAAO;AACL,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,IAAI,EAAE,UAAU;SACjB;AACF;IAED,OAAO;AACL,QAAA,KAAK,EAAE,OAAO;AACd,QAAA,IAAI,EAAE,MAAM;KACb;AACH;;;;"}

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

@@ -1,2 +1,5 @@
+import { DataGridProps } from '../types';
 import { AriaRoles } from '../types/AriaRoles';
-export declare const getAriaRoles: (enableKeyboardNavigation: boolean) => AriaRoles;
+type GetAriaRolesProps = Pick<DataGridProps, 'enableKeyboardNavigation' | 'rowGrouping'>;
+export declare const getAriaRoles: ({ enableKeyboardNavigation, rowGrouping, }: GetAriaRolesProps) => AriaRoles;
+export {};

package/dist/components/DataGrid/utils/getAriaRoles.js

@@ -1,13 +1,19 @@
-const getAriaRoles = (enableKeyboardNavigation) => {
-    if (!enableKeyboardNavigation) {
+const getAriaRoles = ({ enableKeyboardNavigation, rowGrouping, }) => {
+    if (rowGrouping) {
         return {
-            table: 'table',
-            cell: 'cell',
+            table: 'treegrid',
+            cell: 'gridcell',
+        };
+    }
+    if (enableKeyboardNavigation) {
+        return {
+            table: 'grid',
+            cell: 'gridcell',
         };
     }
     return {
-        table: 'grid',
-        cell: 'gridcell',
+        table: 'table',
+        cell: 'cell',
     };
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"getAriaRoles.js","sources":["../../../../src/components/DataGrid/utils/getAriaRoles.ts"],"sourcesContent":["import { AriaRoles } from '../types/AriaRoles';\n\nexport const getAriaRoles = (enableKeyboardNavigation: boolean): AriaRoles => {\n  if (!enableKeyboardNavigation) {\n    return {\n      table: 'table',\n      cell: 'cell',\n    };\n  }\n\n  return {\n    table: 'grid',\n    cell: 'gridcell',\n  };\n};\n"],"names":[],"mappings":"AAEa,MAAA,YAAY,GAAG,CAAC,wBAAiC,KAAe;IAC3E,IAAI,CAAC,wBAAwB,EAAE;QAC7B,OAAO;AACL,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,IAAI,EAAE,MAAM;SACb;AACF;IAED,OAAO;AACL,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,IAAI,EAAE,UAAU;KACjB;AACH;;;;"}
+{"version":3,"file":"getAriaRoles.js","sources":["../../../../src/components/DataGrid/utils/getAriaRoles.ts"],"sourcesContent":["import { DataGridProps } from '../types';\nimport { AriaRoles } from '../types/AriaRoles';\n\ntype GetAriaRolesProps = Pick<DataGridProps, 'enableKeyboardNavigation' | 'rowGrouping'>;\n\nexport const getAriaRoles = ({\n  enableKeyboardNavigation,\n  rowGrouping,\n}: GetAriaRolesProps): AriaRoles => {\n  if (rowGrouping) {\n    return {\n      table: 'treegrid',\n      cell: 'gridcell',\n    };\n  }\n\n  if (enableKeyboardNavigation) {\n    return {\n      table: 'grid',\n      cell: 'gridcell',\n    };\n  }\n\n  return {\n    table: 'table',\n    cell: 'cell',\n  };\n};\n"],"names":[],"mappings":"AAKa,MAAA,YAAY,GAAG,CAAC,EAC3B,wBAAwB,EACxB,WAAW,GACO,KAAe;AACjC,IAAA,IAAI,WAAW,EAAE;QACf,OAAO;AACL,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,IAAI,EAAE,UAAU;SACjB;AACF;AAED,IAAA,IAAI,wBAAwB,EAAE;QAC5B,OAAO;AACL,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,IAAI,EAAE,UAAU;SACjB;AACF;IAED,OAAO;AACL,QAAA,KAAK,EAAE,OAAO;AACd,QAAA,IAAI,EAAE,MAAM;KACb;AACH;;;;"}

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

@@ -1,4 +1,3 @@
-export { isLastColumn } from './isLastColumn';
 export { ColumnMapper } from './ColumnMapper';
 export { getAriaRoles } from './getAriaRoles';
 export { getPinnedColumnStyles, getPinnedColumnClassNames } from './pinnedColumnUtils';

package/dist/components/DataGrid/utils/pinnedColumnUtils.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var DataGrid_module = require('../DataGrid.module.css.cjs');
+var DataGrid_module = require('../DataGrid.module.scss.cjs');
 
 const getPinnedColumnStyles = (column) => {
     const isPinned = column.getIsPinned();

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

@@ -1 +1 @@
-{"version":3,"file":"pinnedColumnUtils.cjs","sources":["../../../../src/components/DataGrid/utils/pinnedColumnUtils.ts"],"sourcesContent":["import { Column } from '@tanstack/react-table';\nimport { CSSProperties } from 'react';\n\nimport { pinnedColumnLeft, pinnedColumnRight } from '../DataGrid.module.css';\n\nexport const getPinnedColumnStyles = (column: Column<any>): CSSProperties => {\n  const isPinned = column.getIsPinned();\n\n  if (!isPinned) {\n    return {};\n  }\n\n  return {\n    left: isPinned === 'left' ? `var(--${column.id}-start)` : undefined,\n    right: isPinned === 'right' ? `var(--${column.id}-after)` : undefined,\n    opacity: isPinned ? 0.95 : undefined,\n    position: isPinned ? 'sticky' : undefined,\n    zIndex: isPinned ? 1 : undefined,\n  };\n};\n\nexport const getPinnedColumnClassNames = (column: Column<any>) => {\n  const isPinned = column.getIsPinned();\n\n  const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');\n  const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');\n\n  if (isLastLeftPinnedColumn) {\n    return pinnedColumnLeft;\n  }\n\n  if (isFirstRightPinnedColumn) {\n    return pinnedColumnRight;\n  }\n\n  return '';\n};\n"],"names":["pinnedColumnLeft","pinnedColumnRight"],"mappings":";;;;AAKa,MAAA,qBAAqB,GAAG,CAAC,MAAmB,KAAmB;AAC1E,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,WAAW,EAAE;IAErC,IAAI,CAAC,QAAQ,EAAE;AACb,QAAA,OAAO,EAAE;AACV;IAED,OAAO;AACL,QAAA,IAAI,EAAE,QAAQ,KAAK,MAAM,GAAG,CAAS,MAAA,EAAA,MAAM,CAAC,EAAE,CAAA,OAAA,CAAS,GAAG,SAAS;AACnE,QAAA,KAAK,EAAE,QAAQ,KAAK,OAAO,GAAG,CAAS,MAAA,EAAA,MAAM,CAAC,EAAE,CAAA,OAAA,CAAS,GAAG,SAAS;QACrE,OAAO,EAAE,QAAQ,GAAG,IAAI,GAAG,SAAS;QACpC,QAAQ,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS;QACzC,MAAM,EAAE,QAAQ,GAAG,CAAC,GAAG,SAAS;KACjC;AACH;AAEa,MAAA,yBAAyB,GAAG,CAAC,MAAmB,KAAI;AAC/D,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,WAAW,EAAE;AAErC,IAAA,MAAM,sBAAsB,GAAG,QAAQ,KAAK,MAAM,IAAI,MAAM,CAAC,eAAe,CAAC,MAAM,CAAC;AACpF,IAAA,MAAM,wBAAwB,GAAG,QAAQ,KAAK,OAAO,IAAI,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC;AAEzF,IAAA,IAAI,sBAAsB,EAAE;AAC1B,QAAA,OAAOA,gCAAgB;AACxB;AAED,IAAA,IAAI,wBAAwB,EAAE;AAC5B,QAAA,OAAOC,iCAAiB;AACzB;AAED,IAAA,OAAO,EAAE;AACX;;;;;"}
+{"version":3,"file":"pinnedColumnUtils.cjs","sources":["../../../../src/components/DataGrid/utils/pinnedColumnUtils.ts"],"sourcesContent":["import { Column } from '@tanstack/react-table';\nimport { CSSProperties } from 'react';\n\nimport styles from '../DataGrid.module.scss';\n\nexport const getPinnedColumnStyles = (column: Column<any>): CSSProperties => {\n  const isPinned = column.getIsPinned();\n\n  if (!isPinned) {\n    return {};\n  }\n\n  return {\n    left: isPinned === 'left' ? `var(--${column.id}-start)` : undefined,\n    right: isPinned === 'right' ? `var(--${column.id}-after)` : undefined,\n    opacity: isPinned ? 0.95 : undefined,\n    position: isPinned ? 'sticky' : undefined,\n    zIndex: isPinned ? 1 : undefined,\n  };\n};\n\nexport const getPinnedColumnClassNames = (column: Column<any>) => {\n  const isPinned = column.getIsPinned();\n\n  const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');\n  const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');\n\n  if (isLastLeftPinnedColumn) {\n    return styles.pinnedColumnLeft;\n  }\n\n  if (isFirstRightPinnedColumn) {\n    return styles.pinnedColumnRight;\n  }\n\n  return '';\n};\n"],"names":["styles"],"mappings":";;;;AAKa,MAAA,qBAAqB,GAAG,CAAC,MAAmB,KAAmB;AAC1E,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,WAAW,EAAE;IAErC,IAAI,CAAC,QAAQ,EAAE;AACb,QAAA,OAAO,EAAE;AACV;IAED,OAAO;AACL,QAAA,IAAI,EAAE,QAAQ,KAAK,MAAM,GAAG,CAAS,MAAA,EAAA,MAAM,CAAC,EAAE,CAAA,OAAA,CAAS,GAAG,SAAS;AACnE,QAAA,KAAK,EAAE,QAAQ,KAAK,OAAO,GAAG,CAAS,MAAA,EAAA,MAAM,CAAC,EAAE,CAAA,OAAA,CAAS,GAAG,SAAS;QACrE,OAAO,EAAE,QAAQ,GAAG,IAAI,GAAG,SAAS;QACpC,QAAQ,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS;QACzC,MAAM,EAAE,QAAQ,GAAG,CAAC,GAAG,SAAS;KACjC;AACH;AAEa,MAAA,yBAAyB,GAAG,CAAC,MAAmB,KAAI;AAC/D,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,WAAW,EAAE;AAErC,IAAA,MAAM,sBAAsB,GAAG,QAAQ,KAAK,MAAM,IAAI,MAAM,CAAC,eAAe,CAAC,MAAM,CAAC;AACpF,IAAA,MAAM,wBAAwB,GAAG,QAAQ,KAAK,OAAO,IAAI,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC;AAEzF,IAAA,IAAI,sBAAsB,EAAE;QAC1B,OAAOA,eAAM,CAAC,gBAAgB;AAC/B;AAED,IAAA,IAAI,wBAAwB,EAAE;QAC5B,OAAOA,eAAM,CAAC,iBAAiB;AAChC;AAED,IAAA,OAAO,EAAE;AACX;;;;;"}

package/dist/components/DataGrid/utils/pinnedColumnUtils.js

@@ -1,4 +1,4 @@
-import { pinnedColumnLeft, pinnedColumnRight } from '../DataGrid.module.css.js';
+import styles from '../DataGrid.module.scss.js';
 
 const getPinnedColumnStyles = (column) => {
     const isPinned = column.getIsPinned();
@@ -18,10 +18,10 @@ const getPinnedColumnClassNames = (column) => {
     const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
     const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
     if (isLastLeftPinnedColumn) {
-        return pinnedColumnLeft;
+        return styles.pinnedColumnLeft;
     }
     if (isFirstRightPinnedColumn) {
-        return pinnedColumnRight;
+        return styles.pinnedColumnRight;
     }
     return '';
 };

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

@@ -1 +1 @@
-{"version":3,"file":"pinnedColumnUtils.js","sources":["../../../../src/components/DataGrid/utils/pinnedColumnUtils.ts"],"sourcesContent":["import { Column } from '@tanstack/react-table';\nimport { CSSProperties } from 'react';\n\nimport { pinnedColumnLeft, pinnedColumnRight } from '../DataGrid.module.css';\n\nexport const getPinnedColumnStyles = (column: Column<any>): CSSProperties => {\n  const isPinned = column.getIsPinned();\n\n  if (!isPinned) {\n    return {};\n  }\n\n  return {\n    left: isPinned === 'left' ? `var(--${column.id}-start)` : undefined,\n    right: isPinned === 'right' ? `var(--${column.id}-after)` : undefined,\n    opacity: isPinned ? 0.95 : undefined,\n    position: isPinned ? 'sticky' : undefined,\n    zIndex: isPinned ? 1 : undefined,\n  };\n};\n\nexport const getPinnedColumnClassNames = (column: Column<any>) => {\n  const isPinned = column.getIsPinned();\n\n  const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');\n  const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');\n\n  if (isLastLeftPinnedColumn) {\n    return pinnedColumnLeft;\n  }\n\n  if (isFirstRightPinnedColumn) {\n    return pinnedColumnRight;\n  }\n\n  return '';\n};\n"],"names":[],"mappings":";;AAKa,MAAA,qBAAqB,GAAG,CAAC,MAAmB,KAAmB;AAC1E,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,WAAW,EAAE;IAErC,IAAI,CAAC,QAAQ,EAAE;AACb,QAAA,OAAO,EAAE;AACV;IAED,OAAO;AACL,QAAA,IAAI,EAAE,QAAQ,KAAK,MAAM,GAAG,CAAS,MAAA,EAAA,MAAM,CAAC,EAAE,CAAA,OAAA,CAAS,GAAG,SAAS;AACnE,QAAA,KAAK,EAAE,QAAQ,KAAK,OAAO,GAAG,CAAS,MAAA,EAAA,MAAM,CAAC,EAAE,CAAA,OAAA,CAAS,GAAG,SAAS;QACrE,OAAO,EAAE,QAAQ,GAAG,IAAI,GAAG,SAAS;QACpC,QAAQ,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS;QACzC,MAAM,EAAE,QAAQ,GAAG,CAAC,GAAG,SAAS;KACjC;AACH;AAEa,MAAA,yBAAyB,GAAG,CAAC,MAAmB,KAAI;AAC/D,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,WAAW,EAAE;AAErC,IAAA,MAAM,sBAAsB,GAAG,QAAQ,KAAK,MAAM,IAAI,MAAM,CAAC,eAAe,CAAC,MAAM,CAAC;AACpF,IAAA,MAAM,wBAAwB,GAAG,QAAQ,KAAK,OAAO,IAAI,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC;AAEzF,IAAA,IAAI,sBAAsB,EAAE;AAC1B,QAAA,OAAO,gBAAgB;AACxB;AAED,IAAA,IAAI,wBAAwB,EAAE;AAC5B,QAAA,OAAO,iBAAiB;AACzB;AAED,IAAA,OAAO,EAAE;AACX;;;;"}
+{"version":3,"file":"pinnedColumnUtils.js","sources":["../../../../src/components/DataGrid/utils/pinnedColumnUtils.ts"],"sourcesContent":["import { Column } from '@tanstack/react-table';\nimport { CSSProperties } from 'react';\n\nimport styles from '../DataGrid.module.scss';\n\nexport const getPinnedColumnStyles = (column: Column<any>): CSSProperties => {\n  const isPinned = column.getIsPinned();\n\n  if (!isPinned) {\n    return {};\n  }\n\n  return {\n    left: isPinned === 'left' ? `var(--${column.id}-start)` : undefined,\n    right: isPinned === 'right' ? `var(--${column.id}-after)` : undefined,\n    opacity: isPinned ? 0.95 : undefined,\n    position: isPinned ? 'sticky' : undefined,\n    zIndex: isPinned ? 1 : undefined,\n  };\n};\n\nexport const getPinnedColumnClassNames = (column: Column<any>) => {\n  const isPinned = column.getIsPinned();\n\n  const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');\n  const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');\n\n  if (isLastLeftPinnedColumn) {\n    return styles.pinnedColumnLeft;\n  }\n\n  if (isFirstRightPinnedColumn) {\n    return styles.pinnedColumnRight;\n  }\n\n  return '';\n};\n"],"names":[],"mappings":";;AAKa,MAAA,qBAAqB,GAAG,CAAC,MAAmB,KAAmB;AAC1E,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,WAAW,EAAE;IAErC,IAAI,CAAC,QAAQ,EAAE;AACb,QAAA,OAAO,EAAE;AACV;IAED,OAAO;AACL,QAAA,IAAI,EAAE,QAAQ,KAAK,MAAM,GAAG,CAAS,MAAA,EAAA,MAAM,CAAC,EAAE,CAAA,OAAA,CAAS,GAAG,SAAS;AACnE,QAAA,KAAK,EAAE,QAAQ,KAAK,OAAO,GAAG,CAAS,MAAA,EAAA,MAAM,CAAC,EAAE,CAAA,OAAA,CAAS,GAAG,SAAS;QACrE,OAAO,EAAE,QAAQ,GAAG,IAAI,GAAG,SAAS;QACpC,QAAQ,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS;QACzC,MAAM,EAAE,QAAQ,GAAG,CAAC,GAAG,SAAS;KACjC;AACH;AAEa,MAAA,yBAAyB,GAAG,CAAC,MAAmB,KAAI;AAC/D,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,WAAW,EAAE;AAErC,IAAA,MAAM,sBAAsB,GAAG,QAAQ,KAAK,MAAM,IAAI,MAAM,CAAC,eAAe,CAAC,MAAM,CAAC;AACpF,IAAA,MAAM,wBAAwB,GAAG,QAAQ,KAAK,OAAO,IAAI,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC;AAEzF,IAAA,IAAI,sBAAsB,EAAE;QAC1B,OAAO,MAAM,CAAC,gBAAgB;AAC/B;AAED,IAAA,IAAI,wBAAwB,EAAE;QAC5B,OAAO,MAAM,CAAC,iBAAiB;AAChC;AAED,IAAA,OAAO,EAAE;AACX;;;;"}

package/dist/components/DataTable/components/ActionBar.cjs

@@ -11,8 +11,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const Container = styled__default.default.div.withConfig({ displayName: "vui--Container", componentId: "vui--uoc40o" }) `display:grid;grid-template-columns:auto 1fr;align-items:center;position:absolute;top:0;left:0;right:0;z-index:50;height:${constants.headerCellHeight};background-color:white;`;
-const Content = styled__default.default.div.withConfig({ displayName: "vui--Content", componentId: "vui--x1996k" }) `width:100%;height:100%;display:flex;align-items:center;padding:0 0.5rem;border-bottom:1px solid ${index.theme.colors.neutral.grey.base};& > *{flex:1;}`;
+const Container = styled__default.default.div.withConfig({ displayName: "vui--Container", componentId: "vui--1qrfauk" }) `display:grid;grid-template-columns:auto 1fr;align-items:center;position:absolute;top:0;left:0;right:0;z-index:50;height:${constants.headerCellHeight};background-color:white;`;
+const Content = styled__default.default.div.withConfig({ displayName: "vui--Content", componentId: "vui--fy6vxi" }) `width:100%;height:100%;display:flex;align-items:center;padding:0 0.5rem;border-bottom:1px solid ${index.theme.colors.neutral.grey.base};& > *{flex:1;}`;
 function ActionBar({ selectionColumn, intersectionTargetRef, containerRef, children, }) {
     var _a;
     const [isSticky, setIsSticky] = React.useState(false);

package/dist/components/DataTable/components/ActionBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.cjs","sources":["../../../../src/components/DataTable/components/ActionBar.tsx"],"sourcesContent":["import React, { useEffect, useState, RefObject, CSSProperties, ReactNode } from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { renderHeader } from '../renderers/renderHeader';\nimport { ColumnConfig } from '../types';\nimport { headerCellHeight } from '../constants';\n\nconst Container = styled.div`\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 50;\n  height: ${headerCellHeight};\n  background-color: white;\n`;\n\nconst Content = styled.div`\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 0.5rem;\n  border-bottom: 1px solid ${theme.colors.neutral.grey.base};\n\n  & > * {\n    flex: 1;\n  }\n`;\n\nexport interface ActionBarProps {\n  children: ReactNode;\n  selectionColumn: ColumnConfig;\n  intersectionTargetRef: RefObject<HTMLElement>;\n  containerRef: RefObject<HTMLElement>;\n}\n\nexport function ActionBar({\n  selectionColumn,\n  intersectionTargetRef,\n  containerRef,\n  children,\n}: ActionBarProps) {\n  const [isSticky, setIsSticky] = useState(false);\n\n  useEffect(() => {\n    if (!intersectionTargetRef.current) return;\n    const callback: IntersectionObserverCallback = (entries) => {\n      entries.forEach((entry) => {\n        setIsSticky(!entry.isIntersecting);\n      });\n    };\n    const intersectionObserver = new IntersectionObserver(callback);\n    intersectionObserver.observe(intersectionTargetRef.current);\n    /* eslint-disable-next-line consistent-return */\n    return () => intersectionObserver.disconnect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [intersectionTargetRef.current]);\n\n  const containerRect = containerRef.current?.getBoundingClientRect();\n\n  const defaultPositionStyles: CSSProperties = {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n  };\n\n  const stickyPositionStyles: CSSProperties = {\n    position: 'fixed',\n    top: 0,\n    left: containerRect?.left,\n    width: containerRect?.width,\n  };\n\n  const style = isSticky ? stickyPositionStyles : defaultPositionStyles;\n\n  return (\n    <Container style={style}>\n      {renderHeader({ column: selectionColumn })}\n      <Content>{children}</Content>\n    </Container>\n  );\n}\n"],"names":["styled","headerCellHeight","theme","useState","useEffect","React","renderHeader"],"mappings":";;;;;;;;;;;;;AAOA,MAAM,SAAS,GAAGA,uBAAM,CAAC,GAAG,CAShB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wHAAA,EAAAC,0BAAgB,0BAE3B;AAED,MAAM,OAAO,GAAGD,uBAAM,CAAC,GAAG,4KAMGE,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,iBAK1D;AASK,SAAU,SAAS,CAAC,EACxB,eAAe,EACf,qBAAqB,EACrB,YAAY,EACZ,QAAQ,GACO,EAAA;;IACf,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;IAE/CC,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,qBAAqB,CAAC,OAAO;YAAE;AACpC,QAAA,MAAM,QAAQ,GAAiC,CAAC,OAAO,KAAI;AACzD,YAAA,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACxB,gBAAA,WAAW,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC;AACpC,aAAC,CAAC;AACJ,SAAC;AACD,QAAA,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,QAAQ,CAAC;AAC/D,QAAA,oBAAoB,CAAC,OAAO,CAAC,qBAAqB,CAAC,OAAO,CAAC;;AAE3D,QAAA,OAAO,MAAM,oBAAoB,CAAC,UAAU,EAAE;;AAEhD,KAAC,EAAE,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,aAAa,GAAG,CAAA,EAAA,GAAA,YAAY,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,qBAAqB,EAAE;AAEnE,IAAA,MAAM,qBAAqB,GAAkB;AAC3C,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,CAAC;KACT;AAED,IAAA,MAAM,oBAAoB,GAAkB;AAC1C,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,IAAI;AACzB,QAAA,KAAK,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,KAAK;KAC5B;IAED,MAAM,KAAK,GAAG,QAAQ,GAAG,oBAAoB,GAAG,qBAAqB;AAErE,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,KAAK,EAAE,KAAK,EAAA;AACpB,QAAAC,yBAAY,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC;AAC1C,QAAAD,sBAAA,CAAA,aAAA,CAAC,OAAO,EAAE,IAAA,EAAA,QAAQ,CAAW,CACnB;AAEhB;;;;"}
+{"version":3,"file":"ActionBar.cjs","sources":["../../../../src/components/DataTable/components/ActionBar.tsx"],"sourcesContent":["import React, { useEffect, useState, RefObject, CSSProperties, ReactNode } from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { renderHeader } from '../renderers/renderHeader';\nimport { ColumnConfig } from '../types';\nimport { headerCellHeight } from '../constants';\n\nconst Container = styled.div`\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 50;\n  height: ${headerCellHeight};\n  background-color: white;\n`;\n\nconst Content = styled.div`\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 0.5rem;\n  border-bottom: 1px solid ${theme.colors.neutral.grey.base};\n\n  & > * {\n    flex: 1;\n  }\n`;\n\nexport interface ActionBarProps {\n  children: ReactNode;\n  selectionColumn: ColumnConfig;\n  intersectionTargetRef: RefObject<HTMLElement>;\n  containerRef: RefObject<HTMLElement>;\n}\n\nexport function ActionBar({\n  selectionColumn,\n  intersectionTargetRef,\n  containerRef,\n  children,\n}: ActionBarProps) {\n  const [isSticky, setIsSticky] = useState(false);\n\n  useEffect(() => {\n    if (!intersectionTargetRef.current) return;\n    const callback: IntersectionObserverCallback = (entries) => {\n      entries.forEach((entry) => {\n        setIsSticky(!entry.isIntersecting);\n      });\n    };\n    const intersectionObserver = new IntersectionObserver(callback);\n    intersectionObserver.observe(intersectionTargetRef.current);\n    /* eslint-disable-next-line consistent-return */\n    return () => intersectionObserver.disconnect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [intersectionTargetRef.current]);\n\n  const containerRect = containerRef.current?.getBoundingClientRect();\n\n  const defaultPositionStyles: CSSProperties = {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n  };\n\n  const stickyPositionStyles: CSSProperties = {\n    position: 'fixed',\n    top: 0,\n    left: containerRect?.left,\n    width: containerRect?.width,\n  };\n\n  const style = isSticky ? stickyPositionStyles : defaultPositionStyles;\n\n  return (\n    <Container style={style}>\n      {renderHeader({ column: selectionColumn })}\n      <Content>{children}</Content>\n    </Container>\n  );\n}\n"],"names":["styled","headerCellHeight","theme","useState","useEffect","React","renderHeader"],"mappings":";;;;;;;;;;;;;AAOA,MAAM,SAAS,GAAGA,uBAAM,CAAC,GAAG,CAShB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,wHAAA,EAAAC,0BAAgB,0BAE3B;AAED,MAAM,OAAO,GAAGD,uBAAM,CAAC,GAAG,4KAMGE,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,iBAK1D;AASK,SAAU,SAAS,CAAC,EACxB,eAAe,EACf,qBAAqB,EACrB,YAAY,EACZ,QAAQ,GACO,EAAA;;IACf,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;IAE/CC,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,qBAAqB,CAAC,OAAO;YAAE;AACpC,QAAA,MAAM,QAAQ,GAAiC,CAAC,OAAO,KAAI;AACzD,YAAA,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACxB,gBAAA,WAAW,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC;AACpC,aAAC,CAAC;AACJ,SAAC;AACD,QAAA,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,QAAQ,CAAC;AAC/D,QAAA,oBAAoB,CAAC,OAAO,CAAC,qBAAqB,CAAC,OAAO,CAAC;;AAE3D,QAAA,OAAO,MAAM,oBAAoB,CAAC,UAAU,EAAE;;AAEhD,KAAC,EAAE,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,aAAa,GAAG,CAAA,EAAA,GAAA,YAAY,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,qBAAqB,EAAE;AAEnE,IAAA,MAAM,qBAAqB,GAAkB;AAC3C,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,CAAC;KACT;AAED,IAAA,MAAM,oBAAoB,GAAkB;AAC1C,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,IAAI;AACzB,QAAA,KAAK,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,KAAK;KAC5B;IAED,MAAM,KAAK,GAAG,QAAQ,GAAG,oBAAoB,GAAG,qBAAqB;AAErE,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,KAAK,EAAE,KAAK,EAAA;AACpB,QAAAC,yBAAY,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC;AAC1C,QAAAD,sBAAA,CAAA,aAAA,CAAC,OAAO,EAAE,IAAA,EAAA,QAAQ,CAAW,CACnB;AAEhB;;;;"}

package/dist/components/DataTable/components/ActionBar.js

@@ -4,8 +4,8 @@ import { theme } from '../../../theme/index.js';
 import { renderHeader } from '../renderers/renderHeader.js';
 import { headerCellHeight } from '../constants.js';
 
-const Container = styled.div.withConfig({ displayName: "vui--Container", componentId: "vui--uoc40o" }) `display:grid;grid-template-columns:auto 1fr;align-items:center;position:absolute;top:0;left:0;right:0;z-index:50;height:${headerCellHeight};background-color:white;`;
-const Content = styled.div.withConfig({ displayName: "vui--Content", componentId: "vui--x1996k" }) `width:100%;height:100%;display:flex;align-items:center;padding:0 0.5rem;border-bottom:1px solid ${theme.colors.neutral.grey.base};& > *{flex:1;}`;
+const Container = styled.div.withConfig({ displayName: "vui--Container", componentId: "vui--1qrfauk" }) `display:grid;grid-template-columns:auto 1fr;align-items:center;position:absolute;top:0;left:0;right:0;z-index:50;height:${headerCellHeight};background-color:white;`;
+const Content = styled.div.withConfig({ displayName: "vui--Content", componentId: "vui--fy6vxi" }) `width:100%;height:100%;display:flex;align-items:center;padding:0 0.5rem;border-bottom:1px solid ${theme.colors.neutral.grey.base};& > *{flex:1;}`;
 function ActionBar({ selectionColumn, intersectionTargetRef, containerRef, children, }) {
     var _a;
     const [isSticky, setIsSticky] = useState(false);

package/dist/components/DataTable/components/ActionBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.js","sources":["../../../../src/components/DataTable/components/ActionBar.tsx"],"sourcesContent":["import React, { useEffect, useState, RefObject, CSSProperties, ReactNode } from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { renderHeader } from '../renderers/renderHeader';\nimport { ColumnConfig } from '../types';\nimport { headerCellHeight } from '../constants';\n\nconst Container = styled.div`\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 50;\n  height: ${headerCellHeight};\n  background-color: white;\n`;\n\nconst Content = styled.div`\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 0.5rem;\n  border-bottom: 1px solid ${theme.colors.neutral.grey.base};\n\n  & > * {\n    flex: 1;\n  }\n`;\n\nexport interface ActionBarProps {\n  children: ReactNode;\n  selectionColumn: ColumnConfig;\n  intersectionTargetRef: RefObject<HTMLElement>;\n  containerRef: RefObject<HTMLElement>;\n}\n\nexport function ActionBar({\n  selectionColumn,\n  intersectionTargetRef,\n  containerRef,\n  children,\n}: ActionBarProps) {\n  const [isSticky, setIsSticky] = useState(false);\n\n  useEffect(() => {\n    if (!intersectionTargetRef.current) return;\n    const callback: IntersectionObserverCallback = (entries) => {\n      entries.forEach((entry) => {\n        setIsSticky(!entry.isIntersecting);\n      });\n    };\n    const intersectionObserver = new IntersectionObserver(callback);\n    intersectionObserver.observe(intersectionTargetRef.current);\n    /* eslint-disable-next-line consistent-return */\n    return () => intersectionObserver.disconnect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [intersectionTargetRef.current]);\n\n  const containerRect = containerRef.current?.getBoundingClientRect();\n\n  const defaultPositionStyles: CSSProperties = {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n  };\n\n  const stickyPositionStyles: CSSProperties = {\n    position: 'fixed',\n    top: 0,\n    left: containerRect?.left,\n    width: containerRect?.width,\n  };\n\n  const style = isSticky ? stickyPositionStyles : defaultPositionStyles;\n\n  return (\n    <Container style={style}>\n      {renderHeader({ column: selectionColumn })}\n      <Content>{children}</Content>\n    </Container>\n  );\n}\n"],"names":["React"],"mappings":";;;;;;AAOA,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAShB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wHAAA,EAAA,gBAAgB,0BAE3B;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,4KAMG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,iBAK1D;AASK,SAAU,SAAS,CAAC,EACxB,eAAe,EACf,qBAAqB,EACrB,YAAY,EACZ,QAAQ,GACO,EAAA;;IACf,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAE/C,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,qBAAqB,CAAC,OAAO;YAAE;AACpC,QAAA,MAAM,QAAQ,GAAiC,CAAC,OAAO,KAAI;AACzD,YAAA,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACxB,gBAAA,WAAW,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC;AACpC,aAAC,CAAC;AACJ,SAAC;AACD,QAAA,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,QAAQ,CAAC;AAC/D,QAAA,oBAAoB,CAAC,OAAO,CAAC,qBAAqB,CAAC,OAAO,CAAC;;AAE3D,QAAA,OAAO,MAAM,oBAAoB,CAAC,UAAU,EAAE;;AAEhD,KAAC,EAAE,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,aAAa,GAAG,CAAA,EAAA,GAAA,YAAY,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,qBAAqB,EAAE;AAEnE,IAAA,MAAM,qBAAqB,GAAkB;AAC3C,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,CAAC;KACT;AAED,IAAA,MAAM,oBAAoB,GAAkB;AAC1C,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,IAAI;AACzB,QAAA,KAAK,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,KAAK;KAC5B;IAED,MAAM,KAAK,GAAG,QAAQ,GAAG,oBAAoB,GAAG,qBAAqB;AAErE,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,KAAK,EAAE,KAAK,EAAA;AACpB,QAAA,YAAY,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC;AAC1C,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAE,IAAA,EAAA,QAAQ,CAAW,CACnB;AAEhB;;;;"}
+{"version":3,"file":"ActionBar.js","sources":["../../../../src/components/DataTable/components/ActionBar.tsx"],"sourcesContent":["import React, { useEffect, useState, RefObject, CSSProperties, ReactNode } from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { renderHeader } from '../renderers/renderHeader';\nimport { ColumnConfig } from '../types';\nimport { headerCellHeight } from '../constants';\n\nconst Container = styled.div`\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 50;\n  height: ${headerCellHeight};\n  background-color: white;\n`;\n\nconst Content = styled.div`\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 0.5rem;\n  border-bottom: 1px solid ${theme.colors.neutral.grey.base};\n\n  & > * {\n    flex: 1;\n  }\n`;\n\nexport interface ActionBarProps {\n  children: ReactNode;\n  selectionColumn: ColumnConfig;\n  intersectionTargetRef: RefObject<HTMLElement>;\n  containerRef: RefObject<HTMLElement>;\n}\n\nexport function ActionBar({\n  selectionColumn,\n  intersectionTargetRef,\n  containerRef,\n  children,\n}: ActionBarProps) {\n  const [isSticky, setIsSticky] = useState(false);\n\n  useEffect(() => {\n    if (!intersectionTargetRef.current) return;\n    const callback: IntersectionObserverCallback = (entries) => {\n      entries.forEach((entry) => {\n        setIsSticky(!entry.isIntersecting);\n      });\n    };\n    const intersectionObserver = new IntersectionObserver(callback);\n    intersectionObserver.observe(intersectionTargetRef.current);\n    /* eslint-disable-next-line consistent-return */\n    return () => intersectionObserver.disconnect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [intersectionTargetRef.current]);\n\n  const containerRect = containerRef.current?.getBoundingClientRect();\n\n  const defaultPositionStyles: CSSProperties = {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n  };\n\n  const stickyPositionStyles: CSSProperties = {\n    position: 'fixed',\n    top: 0,\n    left: containerRect?.left,\n    width: containerRect?.width,\n  };\n\n  const style = isSticky ? stickyPositionStyles : defaultPositionStyles;\n\n  return (\n    <Container style={style}>\n      {renderHeader({ column: selectionColumn })}\n      <Content>{children}</Content>\n    </Container>\n  );\n}\n"],"names":["React"],"mappings":";;;;;;AAOA,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAShB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,wHAAA,EAAA,gBAAgB,0BAE3B;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,4KAMG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,iBAK1D;AASK,SAAU,SAAS,CAAC,EACxB,eAAe,EACf,qBAAqB,EACrB,YAAY,EACZ,QAAQ,GACO,EAAA;;IACf,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAE/C,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,qBAAqB,CAAC,OAAO;YAAE;AACpC,QAAA,MAAM,QAAQ,GAAiC,CAAC,OAAO,KAAI;AACzD,YAAA,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACxB,gBAAA,WAAW,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC;AACpC,aAAC,CAAC;AACJ,SAAC;AACD,QAAA,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,QAAQ,CAAC;AAC/D,QAAA,oBAAoB,CAAC,OAAO,CAAC,qBAAqB,CAAC,OAAO,CAAC;;AAE3D,QAAA,OAAO,MAAM,oBAAoB,CAAC,UAAU,EAAE;;AAEhD,KAAC,EAAE,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,aAAa,GAAG,CAAA,EAAA,GAAA,YAAY,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,qBAAqB,EAAE;AAEnE,IAAA,MAAM,qBAAqB,GAAkB;AAC3C,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,CAAC;KACT;AAED,IAAA,MAAM,oBAAoB,GAAkB;AAC1C,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,IAAI;AACzB,QAAA,KAAK,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,KAAK;KAC5B;IAED,MAAM,KAAK,GAAG,QAAQ,GAAG,oBAAoB,GAAG,qBAAqB;AAErE,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,KAAK,EAAE,KAAK,EAAA;AACpB,QAAA,YAAY,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC;AAC1C,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAE,IAAA,EAAA,QAAQ,CAAW,CACnB;AAEhB;;;;"}