@veeqo/ui 9.8.0 → 9.9.1

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

@@ -0,0 +1,77 @@
+import { ReactElement } from 'react';
+import { DeepKeys } from '@tanstack/react-table';
+export type ColumnAlignment = 'left' | 'center' | 'right';
+export type ColumnAccessor<T> = (row: T) => any;
+/**
+ * Basic column definition.
+ */
+export type BaseColumnDefinition = {
+    /**
+     * Column ID, this must be a string.
+     */
+    id: string;
+    /**
+     * Column title.
+     */
+    title: string;
+    /**
+     * Column alignment, used to control alignment of content within cells.
+     */
+    align?: ColumnAlignment;
+    /**
+     * Indicates that the cell in this column is the header for its row.
+     */
+    rowHeader?: boolean;
+    /**
+     * Indicates whether the column is resizeable or not. If a column is resizeable, sizing should be
+     * provided to ensure columns are given necessary default width's for your content.
+     */
+    resizeable?: boolean;
+    /**
+     * Indicates whether the column is sortable or not.
+     */
+    sortable?: boolean;
+    /**
+     * Column width, only used when resizeable columns are enabled, otherwise the default table
+     * layout algorithm will be used to determine the best fit.
+     * @default 150
+     */
+    width?: number;
+    /**
+     * Minimum column width, only used when resizeable columns are enabled.
+     * @default 120
+     */
+    minWidth?: number;
+    /**
+     * Maximum column width, only used when resizeable columns are enabled.
+     * @default Number.MAX_SAFE_INTEGER
+     */
+    maxWidth?: number;
+    /**
+     * Optional getter used to create an `aria-label` for the column header. If none is provided, the
+     * column's `title` will be used.
+     */
+    getAriaLabel?: () => string;
+    /**
+     * Optional render method used to render a column footer.
+     */
+    renderFooter?: () => ReactElement;
+    /**
+     * Optional render method used to render a custom column header in place of the column title.
+     */
+    renderHeader?: () => ReactElement;
+};
+/**
+ * Column which has an underlying value in the model, can be sorted.
+ */
+export type DataColumnDefinition<T> = BaseColumnDefinition & {
+    field: DeepKeys<T> | ColumnAccessor<T>;
+    renderCell?: (fieldValue: any, row: T) => ReactElement | null | string;
+};
+/**
+ * Column which is purely for display, not part of the model, cannot be sorted.
+ */
+export type DisplayColumnDefinition<T> = BaseColumnDefinition & {
+    renderCell: (row: T) => ReactElement | null | string;
+};
+export type ColumnDefinition<T> = DataColumnDefinition<T> | DisplayColumnDefinition<T>;

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

@@ -0,0 +1,85 @@
+import React, { AriaAttributes, ReactElement } from 'react';
+import { SizeScale } from 'Theme/modules/sizes';
+import { BorderMode, ResizeMode } from './enums';
+import { ColumnDefinition } from './ColumnDefinition';
+import { SortState } from './SortState';
+import { PinnedColumnState } from './PinnedColumnState';
+export type CustomState = {
+    iconSlot: ReactElement;
+    heading: string;
+    subHeading?: string;
+};
+export type DataGridProps = Pick<AriaAttributes, 'aria-label'> & {
+    /** General config */
+    /**
+     * Density, controls the spacing between rows in the table.
+     *
+     * @default 'base'
+     */
+    density?: keyof SizeScale;
+    /**
+     * Enable/disable row striping.
+     *
+     * @default true
+     */
+    striped?: boolean;
+    /**
+     * Border mode, controls the border displayed in the container around the grid.
+     *
+     * @default 'full'
+     */
+    borderMode?: BorderMode;
+    /**
+     * Resize mode, used to control whether or not columns within the grid can be resized. Use `onChange` to have columns resize as the user drags, `onEnd` to have them resize after the user
+     * releases the resize bar, or `off` to disable column resizing.
+     *
+     * If column resizing is disabled, columns will be sized according to the best fit as decided by the browser's table rendering algorithm.
+     *
+     * If column resizing is enabled, columns will be rendered with fixed column widths.
+     *
+     * @default 'off'
+     */
+    resizeMode?: ResizeMode;
+    /**
+     * Additional styles to be applied to the grid container.
+     */
+    containerStyle?: React.CSSProperties;
+    /** Columns */
+    /**
+     * Column definitions. It is not recommended that you modify these once the table has been initialized, since internal state
+     * is built based around the initial set of column definitions passed to the component.
+     *
+     * If you need to control visibility, pinning, or ordering, you can do so through other props (`hiddenColumns`, `columnOrder`, and `pinnedColumns`).
+     */
+    columns: ColumnDefinition<any>[];
+    /**
+     * Hidden columns, an array of column ID's, can be used to hide columns in the table.
+     */
+    hiddenColumns?: string[];
+    /**
+     * Column ordering, an array of column ID's, can be used to reorder columns in the table.
+     */
+    columnOrdering?: string[];
+    /**
+     * Pinned columns, an object with two arrays of column ID's, one for columns pinned to the left and another for the right.
+     */
+    pinnedColumns?: PinnedColumnState;
+    /** Rows */
+    /**
+     * Data to render within the table.
+     */
+    data: any[];
+    /**
+     * Getter which returns the ID to use for a row (a string). If one isn't provided, the row index will be used instead.
+     */
+    getRowId?: (row: any, index: number, parent?: any) => string;
+    /** Sorting */
+    /**
+     * The current sort state, including the selected column ID and sort direction.
+     */
+    sortState?: SortState;
+    /**
+     * Handler called when the sort state changes.
+     */
+    onSortChanged?: (sortState: SortState) => void;
+};

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

@@ -0,0 +1,4 @@
+export type PinnedColumnState = {
+    left: string[];
+    right: string[];
+};

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

@@ -0,0 +1,5 @@
+import { SortDirection } from './enums';
+export type SortState = {
+    columnId: string;
+    direction: SortDirection;
+};

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

@@ -0,0 +1,9 @@
+import { RowData } from '@tanstack/react-table';
+declare module '@tanstack/react-table' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        rowHeader?: boolean;
+        textAlign: string;
+        justifyContent: string;
+        getAriaLabel?: () => string;
+    }
+}

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

@@ -0,0 +1,3 @@
+export type ResizeMode = 'onChange' | 'onEnd' | 'off';
+export type BorderMode = 'full' | 'vertical' | 'none';
+export type SortDirection = 'asc' | 'desc';

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

@@ -0,0 +1,6 @@
+export { ResizeMode, BorderMode } from './enums';
+export { DataGridProps } from './DataGridProps';
+export { AriaRoles } from './AriaRoles';
+export { ColumnDefinition } from './ColumnDefinition';
+export { SortState } from './SortState';
+export { PinnedColumnState } from './PinnedColumnState';

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

@@ -0,0 +1,96 @@
+'use strict';
+
+var reactTable = require('@tanstack/react-table');
+var constants = require('../constants.cjs');
+
+/**
+ * Helper method which checks whether a given column definition is a `DataColumn`.
+ * @param column The column definition to check.
+ * @returns True if the column definition is a `DataColumn`, false otherwise.
+ */
+const isDataColumn = (column) => {
+    return column.field !== undefined;
+};
+/**
+ * Maps a column alignment to the equivalent flexbox alignment.
+ * @param align The column alingment to map.
+ * @returns The flexbox alignment.
+ */
+function alignmentToFlex(align) {
+    switch (align) {
+        case 'left':
+            return 'flex-start';
+        case 'center':
+            return 'center';
+        case 'right':
+            return 'flex-end';
+        default:
+            return 'flex-start';
+    }
+}
+/**
+ * Validates a column definition, ensuring required properties are defined and values make sense.
+ * @param definition The column definition to validate.
+ * @throws Error if the column definition is invalid.
+ */
+const validateColumnDefinition = (definition) => {
+    if (!definition.id) {
+        throw new Error("[ColumnMapper] Column definition is missing an 'id' property.");
+    }
+    if (!isDataColumn(definition)) {
+        if (!definition.renderCell) {
+            throw new Error(`[ColumnMapper] Column '${definition.id}' is a display column but is missing a 'renderCell' property.`);
+        }
+    }
+    if (definition.width && definition.minWidth && definition.width < definition.minWidth) {
+        throw new Error(`[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is smaller than its minimum size of ${definition.minWidth}.`);
+    }
+    if (definition.width && definition.maxWidth && definition.width > definition.maxWidth) {
+        throw new Error(`[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is larger than its maximum size of ${definition.maxWidth}.`);
+    }
+};
+/**
+ * Mapper which validates and converts our ColumnDefinition's to a ColumnDef for use in TanStack Table.
+ */
+class ColumnMapper {
+    constructor() {
+        this.columnHelper = reactTable.createColumnHelper();
+    }
+    mapColumnDefinition(definition) {
+        var _a, _b, _c, _d, _e, _f;
+        const sharedColumnProps = {
+            id: definition.id,
+            enableResizing: !!definition.resizeable,
+            enableSorting: !!definition.sortable,
+            header: (_a = definition.renderHeader) !== null && _a !== undefined ? _a : definition.title,
+            footer: definition.renderFooter,
+            size: (_b = definition.width) !== null && _b !== undefined ? _b : constants.DEFAULT_COLUMN_WIDTH,
+            maxSize: (_c = definition.maxWidth) !== null && _c !== undefined ? _c : constants.DEFAULT_COLUMN_MAXIMUM_WIDTH,
+            minSize: (_d = definition.minWidth) !== null && _d !== undefined ? _d : constants.DEFAULT_COLUMN_MINIMUM_WIDTH,
+            meta: {
+                rowHeader: !!definition.rowHeader,
+                // Generate flex and text alignment based off column.align
+                justifyContent: alignmentToFlex((_e = definition.align) !== null && _e !== undefined ? _e : constants.DEFAULT_CELL_ALIGN),
+                textAlign: (_f = definition.align) !== null && _f !== undefined ? _f : constants.DEFAULT_CELL_ALIGN,
+                getAriaLabel: definition.getAriaLabel,
+            },
+        };
+        validateColumnDefinition(definition);
+        if (isDataColumn(definition)) {
+            return this.columnHelper.accessor(definition.field, {
+                ...sharedColumnProps,
+                // enableSorting: definition.sortable ?? false,
+                cell: definition.renderCell
+                    ? (context) => definition.renderCell(context.getValue(), context.row.original)
+                    : (context) => context.getValue(),
+            });
+        }
+        return this.columnHelper.display({
+            ...sharedColumnProps,
+            cell: (context) => definition.renderCell(context.row.original),
+        });
+    }
+}
+
+exports.ColumnMapper = ColumnMapper;
+//# sourceMappingURL=ColumnMapper.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnMapper.cjs","sources":["../../../../src/components/DataGrid/utils/ColumnMapper.ts"],"sourcesContent":["import { ColumnDef, ColumnHelper, createColumnHelper } from '@tanstack/react-table';\nimport { ColumnDefinition, DataColumnDefinition, ColumnAlignment } from '../types/ColumnDefinition';\nimport {\n  DEFAULT_CELL_ALIGN,\n  DEFAULT_COLUMN_MAXIMUM_WIDTH,\n  DEFAULT_COLUMN_MINIMUM_WIDTH,\n  DEFAULT_COLUMN_WIDTH,\n} from '../constants';\n\n/**\n * Helper method which checks whether a given column definition is a `DataColumn`.\n * @param column The column definition to check.\n * @returns True if the column definition is a `DataColumn`, false otherwise.\n */\nconst isDataColumn = <T>(column: ColumnDefinition<T>): column is DataColumnDefinition<T> => {\n  return (column as DataColumnDefinition<T>).field !== undefined;\n};\n\n/**\n * Maps a column alignment to the equivalent flexbox alignment.\n * @param align The column alingment to map.\n * @returns The flexbox alignment.\n */\nfunction alignmentToFlex(align: ColumnAlignment) {\n  switch (align) {\n    case 'left':\n      return 'flex-start';\n    case 'center':\n      return 'center';\n    case 'right':\n      return 'flex-end';\n    default:\n      return 'flex-start';\n  }\n}\n\n/**\n * Validates a column definition, ensuring required properties are defined and values make sense.\n * @param definition The column definition to validate.\n * @throws Error if the column definition is invalid.\n */\nconst validateColumnDefinition = (definition: ColumnDefinition<any>) => {\n  if (!definition.id) {\n    throw new Error(\"[ColumnMapper] Column definition is missing an 'id' property.\");\n  }\n\n  if (!isDataColumn(definition)) {\n    if (!definition.renderCell) {\n      throw new Error(\n        `[ColumnMapper] Column '${definition.id}' is a display column but is missing a 'renderCell' property.`,\n      );\n    }\n  }\n\n  if (definition.width && definition.minWidth && definition.width < definition.minWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is smaller than its minimum size of ${definition.minWidth}.`,\n    );\n  }\n\n  if (definition.width && definition.maxWidth && definition.width > definition.maxWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is larger than its maximum size of ${definition.maxWidth}.`,\n    );\n  }\n};\n\n/**\n * Mapper which validates and converts our ColumnDefinition's to a ColumnDef for use in TanStack Table.\n */\nexport class ColumnMapper {\n  private columnHelper: ColumnHelper<any>;\n\n  constructor() {\n    this.columnHelper = createColumnHelper<any>();\n  }\n\n  mapColumnDefinition(definition: ColumnDefinition<any>): ColumnDef<any, any> {\n    const sharedColumnProps = {\n      id: definition.id,\n      enableResizing: !!definition.resizeable,\n      enableSorting: !!definition.sortable,\n\n      header: definition.renderHeader ?? definition.title,\n      footer: definition.renderFooter,\n\n      size: definition.width ?? DEFAULT_COLUMN_WIDTH,\n      maxSize: definition.maxWidth ?? DEFAULT_COLUMN_MAXIMUM_WIDTH,\n      minSize: definition.minWidth ?? DEFAULT_COLUMN_MINIMUM_WIDTH,\n\n      meta: {\n        rowHeader: !!definition.rowHeader,\n        // Generate flex and text alignment based off column.align\n        justifyContent: alignmentToFlex(definition.align ?? DEFAULT_CELL_ALIGN),\n        textAlign: definition.align ?? DEFAULT_CELL_ALIGN,\n        getAriaLabel: definition.getAriaLabel,\n      },\n    };\n\n    validateColumnDefinition(definition);\n\n    if (isDataColumn(definition)) {\n      return this.columnHelper.accessor(definition.field, {\n        ...sharedColumnProps,\n        // enableSorting: definition.sortable ?? false,\n        cell: definition.renderCell\n          ? (context) => definition.renderCell!(context.getValue(), context.row.original)\n          : (context) => context.getValue(),\n      });\n    }\n\n    return this.columnHelper.display({\n      ...sharedColumnProps,\n      cell: (context) => definition.renderCell(context.row.original),\n    });\n  }\n}\n"],"names":["createColumnHelper","DEFAULT_COLUMN_WIDTH","DEFAULT_COLUMN_MAXIMUM_WIDTH","DEFAULT_COLUMN_MINIMUM_WIDTH","DEFAULT_CELL_ALIGN"],"mappings":"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"}

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

@@ -0,0 +1,10 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { ColumnDefinition } from '../types/ColumnDefinition';
+/**
+ * Mapper which validates and converts our ColumnDefinition's to a ColumnDef for use in TanStack Table.
+ */
+export declare class ColumnMapper {
+    private columnHelper;
+    constructor();
+    mapColumnDefinition(definition: ColumnDefinition<any>): ColumnDef<any, any>;
+}

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

@@ -0,0 +1,94 @@
+import { createColumnHelper } from '@tanstack/react-table';
+import { DEFAULT_COLUMN_WIDTH, DEFAULT_COLUMN_MAXIMUM_WIDTH, DEFAULT_COLUMN_MINIMUM_WIDTH, DEFAULT_CELL_ALIGN } from '../constants.js';
+
+/**
+ * Helper method which checks whether a given column definition is a `DataColumn`.
+ * @param column The column definition to check.
+ * @returns True if the column definition is a `DataColumn`, false otherwise.
+ */
+const isDataColumn = (column) => {
+    return column.field !== undefined;
+};
+/**
+ * Maps a column alignment to the equivalent flexbox alignment.
+ * @param align The column alingment to map.
+ * @returns The flexbox alignment.
+ */
+function alignmentToFlex(align) {
+    switch (align) {
+        case 'left':
+            return 'flex-start';
+        case 'center':
+            return 'center';
+        case 'right':
+            return 'flex-end';
+        default:
+            return 'flex-start';
+    }
+}
+/**
+ * Validates a column definition, ensuring required properties are defined and values make sense.
+ * @param definition The column definition to validate.
+ * @throws Error if the column definition is invalid.
+ */
+const validateColumnDefinition = (definition) => {
+    if (!definition.id) {
+        throw new Error("[ColumnMapper] Column definition is missing an 'id' property.");
+    }
+    if (!isDataColumn(definition)) {
+        if (!definition.renderCell) {
+            throw new Error(`[ColumnMapper] Column '${definition.id}' is a display column but is missing a 'renderCell' property.`);
+        }
+    }
+    if (definition.width && definition.minWidth && definition.width < definition.minWidth) {
+        throw new Error(`[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is smaller than its minimum size of ${definition.minWidth}.`);
+    }
+    if (definition.width && definition.maxWidth && definition.width > definition.maxWidth) {
+        throw new Error(`[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is larger than its maximum size of ${definition.maxWidth}.`);
+    }
+};
+/**
+ * Mapper which validates and converts our ColumnDefinition's to a ColumnDef for use in TanStack Table.
+ */
+class ColumnMapper {
+    constructor() {
+        this.columnHelper = createColumnHelper();
+    }
+    mapColumnDefinition(definition) {
+        var _a, _b, _c, _d, _e, _f;
+        const sharedColumnProps = {
+            id: definition.id,
+            enableResizing: !!definition.resizeable,
+            enableSorting: !!definition.sortable,
+            header: (_a = definition.renderHeader) !== null && _a !== undefined ? _a : definition.title,
+            footer: definition.renderFooter,
+            size: (_b = definition.width) !== null && _b !== undefined ? _b : DEFAULT_COLUMN_WIDTH,
+            maxSize: (_c = definition.maxWidth) !== null && _c !== undefined ? _c : DEFAULT_COLUMN_MAXIMUM_WIDTH,
+            minSize: (_d = definition.minWidth) !== null && _d !== undefined ? _d : DEFAULT_COLUMN_MINIMUM_WIDTH,
+            meta: {
+                rowHeader: !!definition.rowHeader,
+                // Generate flex and text alignment based off column.align
+                justifyContent: alignmentToFlex((_e = definition.align) !== null && _e !== undefined ? _e : DEFAULT_CELL_ALIGN),
+                textAlign: (_f = definition.align) !== null && _f !== undefined ? _f : DEFAULT_CELL_ALIGN,
+                getAriaLabel: definition.getAriaLabel,
+            },
+        };
+        validateColumnDefinition(definition);
+        if (isDataColumn(definition)) {
+            return this.columnHelper.accessor(definition.field, {
+                ...sharedColumnProps,
+                // enableSorting: definition.sortable ?? false,
+                cell: definition.renderCell
+                    ? (context) => definition.renderCell(context.getValue(), context.row.original)
+                    : (context) => context.getValue(),
+            });
+        }
+        return this.columnHelper.display({
+            ...sharedColumnProps,
+            cell: (context) => definition.renderCell(context.row.original),
+        });
+    }
+}
+
+export { ColumnMapper };
+//# sourceMappingURL=ColumnMapper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnMapper.js","sources":["../../../../src/components/DataGrid/utils/ColumnMapper.ts"],"sourcesContent":["import { ColumnDef, ColumnHelper, createColumnHelper } from '@tanstack/react-table';\nimport { ColumnDefinition, DataColumnDefinition, ColumnAlignment } from '../types/ColumnDefinition';\nimport {\n  DEFAULT_CELL_ALIGN,\n  DEFAULT_COLUMN_MAXIMUM_WIDTH,\n  DEFAULT_COLUMN_MINIMUM_WIDTH,\n  DEFAULT_COLUMN_WIDTH,\n} from '../constants';\n\n/**\n * Helper method which checks whether a given column definition is a `DataColumn`.\n * @param column The column definition to check.\n * @returns True if the column definition is a `DataColumn`, false otherwise.\n */\nconst isDataColumn = <T>(column: ColumnDefinition<T>): column is DataColumnDefinition<T> => {\n  return (column as DataColumnDefinition<T>).field !== undefined;\n};\n\n/**\n * Maps a column alignment to the equivalent flexbox alignment.\n * @param align The column alingment to map.\n * @returns The flexbox alignment.\n */\nfunction alignmentToFlex(align: ColumnAlignment) {\n  switch (align) {\n    case 'left':\n      return 'flex-start';\n    case 'center':\n      return 'center';\n    case 'right':\n      return 'flex-end';\n    default:\n      return 'flex-start';\n  }\n}\n\n/**\n * Validates a column definition, ensuring required properties are defined and values make sense.\n * @param definition The column definition to validate.\n * @throws Error if the column definition is invalid.\n */\nconst validateColumnDefinition = (definition: ColumnDefinition<any>) => {\n  if (!definition.id) {\n    throw new Error(\"[ColumnMapper] Column definition is missing an 'id' property.\");\n  }\n\n  if (!isDataColumn(definition)) {\n    if (!definition.renderCell) {\n      throw new Error(\n        `[ColumnMapper] Column '${definition.id}' is a display column but is missing a 'renderCell' property.`,\n      );\n    }\n  }\n\n  if (definition.width && definition.minWidth && definition.width < definition.minWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is smaller than its minimum size of ${definition.minWidth}.`,\n    );\n  }\n\n  if (definition.width && definition.maxWidth && definition.width > definition.maxWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is larger than its maximum size of ${definition.maxWidth}.`,\n    );\n  }\n};\n\n/**\n * Mapper which validates and converts our ColumnDefinition's to a ColumnDef for use in TanStack Table.\n */\nexport class ColumnMapper {\n  private columnHelper: ColumnHelper<any>;\n\n  constructor() {\n    this.columnHelper = createColumnHelper<any>();\n  }\n\n  mapColumnDefinition(definition: ColumnDefinition<any>): ColumnDef<any, any> {\n    const sharedColumnProps = {\n      id: definition.id,\n      enableResizing: !!definition.resizeable,\n      enableSorting: !!definition.sortable,\n\n      header: definition.renderHeader ?? definition.title,\n      footer: definition.renderFooter,\n\n      size: definition.width ?? DEFAULT_COLUMN_WIDTH,\n      maxSize: definition.maxWidth ?? DEFAULT_COLUMN_MAXIMUM_WIDTH,\n      minSize: definition.minWidth ?? DEFAULT_COLUMN_MINIMUM_WIDTH,\n\n      meta: {\n        rowHeader: !!definition.rowHeader,\n        // Generate flex and text alignment based off column.align\n        justifyContent: alignmentToFlex(definition.align ?? DEFAULT_CELL_ALIGN),\n        textAlign: definition.align ?? DEFAULT_CELL_ALIGN,\n        getAriaLabel: definition.getAriaLabel,\n      },\n    };\n\n    validateColumnDefinition(definition);\n\n    if (isDataColumn(definition)) {\n      return this.columnHelper.accessor(definition.field, {\n        ...sharedColumnProps,\n        // enableSorting: definition.sortable ?? false,\n        cell: definition.renderCell\n          ? (context) => definition.renderCell!(context.getValue(), context.row.original)\n          : (context) => context.getValue(),\n      });\n    }\n\n    return this.columnHelper.display({\n      ...sharedColumnProps,\n      cell: (context) => definition.renderCell(context.row.original),\n    });\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,11 @@
+'use strict';
+
+const getAriaRoles = () => {
+    return {
+        table: 'table',
+        cell: 'cell',
+    };
+};
+
+exports.getAriaRoles = getAriaRoles;
+//# sourceMappingURL=getAriaRoles.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getAriaRoles.cjs","sources":["../../../../src/components/DataGrid/utils/getAriaRoles.ts"],"sourcesContent":["import { AriaRoles } from '../types/AriaRoles';\n\nexport const getAriaRoles = (): AriaRoles => {\n  return {\n    table: 'table',\n    cell: 'cell',\n  };\n};\n"],"names":[],"mappings":";;AAEO,MAAM,YAAY,GAAG,MAAgB;IAC1C,OAAO;AACL,QAAA,KAAK,EAAE,OAAO;AACd,QAAA,IAAI,EAAE,MAAM;KACb;AACH;;;;"}

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

@@ -0,0 +1,2 @@
+import { AriaRoles } from '../types/AriaRoles';
+export declare const getAriaRoles: () => AriaRoles;

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

@@ -0,0 +1,9 @@
+const getAriaRoles = () => {
+    return {
+        table: 'table',
+        cell: 'cell',
+    };
+};
+
+export { getAriaRoles };
+//# sourceMappingURL=getAriaRoles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getAriaRoles.js","sources":["../../../../src/components/DataGrid/utils/getAriaRoles.ts"],"sourcesContent":["import { AriaRoles } from '../types/AriaRoles';\n\nexport const getAriaRoles = (): AriaRoles => {\n  return {\n    table: 'table',\n    cell: 'cell',\n  };\n};\n"],"names":[],"mappings":"AAEO,MAAM,YAAY,GAAG,MAAgB;IAC1C,OAAO;AACL,QAAA,KAAK,EAAE,OAAO;AACd,QAAA,IAAI,EAAE,MAAM;KACb;AACH;;;;"}

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

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

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

@@ -0,0 +1,11 @@
+'use strict';
+
+const isLastColumn = (table, column) => {
+    if (table.getIsSomeColumnsPinned('right')) {
+        return column.getIsLastColumn('right');
+    }
+    return column.getIsLastColumn();
+};
+
+exports.isLastColumn = isLastColumn;
+//# sourceMappingURL=isLastColumn.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"isLastColumn.cjs","sources":["../../../../src/components/DataGrid/utils/isLastColumn.ts"],"sourcesContent":["import { Column, Table } from '@tanstack/react-table';\n\nexport const isLastColumn = (table: Table<any>, column: Column<any, any>) => {\n  if (table.getIsSomeColumnsPinned('right')) {\n    return column.getIsLastColumn('right');\n  }\n\n  return column.getIsLastColumn();\n};\n"],"names":[],"mappings":";;MAEa,YAAY,GAAG,CAAC,KAAiB,EAAE,MAAwB,KAAI;AAC1E,IAAA,IAAI,KAAK,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAAE;AACzC,QAAA,OAAO,MAAM,CAAC,eAAe,CAAC,OAAO,CAAC;AACvC;AAED,IAAA,OAAO,MAAM,CAAC,eAAe,EAAE;AACjC;;;;"}

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

@@ -0,0 +1,2 @@
+import { Column, Table } from '@tanstack/react-table';
+export declare const isLastColumn: (table: Table<any>, column: Column<any, any>) => boolean;

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

@@ -0,0 +1,9 @@
+const isLastColumn = (table, column) => {
+    if (table.getIsSomeColumnsPinned('right')) {
+        return column.getIsLastColumn('right');
+    }
+    return column.getIsLastColumn();
+};
+
+export { isLastColumn };
+//# sourceMappingURL=isLastColumn.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"isLastColumn.js","sources":["../../../../src/components/DataGrid/utils/isLastColumn.ts"],"sourcesContent":["import { Column, Table } from '@tanstack/react-table';\n\nexport const isLastColumn = (table: Table<any>, column: Column<any, any>) => {\n  if (table.getIsSomeColumnsPinned('right')) {\n    return column.getIsLastColumn('right');\n  }\n\n  return column.getIsLastColumn();\n};\n"],"names":[],"mappings":"MAEa,YAAY,GAAG,CAAC,KAAiB,EAAE,MAAwB,KAAI;AAC1E,IAAA,IAAI,KAAK,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAAE;AACzC,QAAA,OAAO,MAAM,CAAC,eAAe,CAAC,OAAO,CAAC;AACvC;AAED,IAAA,OAAO,MAAM,CAAC,eAAe,EAAE;AACjC;;;;"}

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

@@ -0,0 +1,33 @@
+'use strict';
+
+var DataGrid_module = require('../DataGrid.module.css.cjs');
+
+const getPinnedColumnStyles = (column) => {
+    const isPinned = column.getIsPinned();
+    if (!isPinned) {
+        return {};
+    }
+    return {
+        left: isPinned === 'left' ? `var(--${column.id}-start)` : undefined,
+        right: isPinned === 'right' ? `var(--${column.id}-after)` : undefined,
+        opacity: isPinned ? 0.95 : undefined,
+        position: isPinned ? 'sticky' : undefined,
+        zIndex: isPinned ? 1 : undefined,
+    };
+};
+const getPinnedColumnClassNames = (column) => {
+    const isPinned = column.getIsPinned();
+    const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
+    const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
+    if (isLastLeftPinnedColumn) {
+        return DataGrid_module.pinnedColumnLeft;
+    }
+    if (isFirstRightPinnedColumn) {
+        return DataGrid_module.pinnedColumnRight;
+    }
+    return '';
+};
+
+exports.getPinnedColumnClassNames = getPinnedColumnClassNames;
+exports.getPinnedColumnStyles = getPinnedColumnStyles;
+//# sourceMappingURL=pinnedColumnUtils.cjs.map

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

@@ -0,0 +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;;;;;"}

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

@@ -0,0 +1,4 @@
+import { Column } from '@tanstack/react-table';
+import { CSSProperties } from 'react';
+export declare const getPinnedColumnStyles: (column: Column<any>) => CSSProperties;
+export declare const getPinnedColumnClassNames: (column: Column<any>) => any;

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

@@ -0,0 +1,30 @@
+import { pinnedColumnLeft, pinnedColumnRight } from '../DataGrid.module.css.js';
+
+const getPinnedColumnStyles = (column) => {
+    const isPinned = column.getIsPinned();
+    if (!isPinned) {
+        return {};
+    }
+    return {
+        left: isPinned === 'left' ? `var(--${column.id}-start)` : undefined,
+        right: isPinned === 'right' ? `var(--${column.id}-after)` : undefined,
+        opacity: isPinned ? 0.95 : undefined,
+        position: isPinned ? 'sticky' : undefined,
+        zIndex: isPinned ? 1 : undefined,
+    };
+};
+const getPinnedColumnClassNames = (column) => {
+    const isPinned = column.getIsPinned();
+    const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
+    const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
+    if (isLastLeftPinnedColumn) {
+        return pinnedColumnLeft;
+    }
+    if (isFirstRightPinnedColumn) {
+        return pinnedColumnRight;
+    }
+    return '';
+};
+
+export { getPinnedColumnClassNames, getPinnedColumnStyles };
+//# sourceMappingURL=pinnedColumnUtils.js.map

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

@@ -0,0 +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;;;;"}

package/dist/components/DataTable/DataTable.cjs

@@ -3,6 +3,10 @@
 var React = require('react');
 var Stack = require('../Stack/Stack.cjs');
 var Text = require('../Text/Text.cjs');
+require('../../hooks/useFocusVisible.cjs');
+require('uid/secure');
+var useDragToScroll = require('../../hooks/useDragToScroll.cjs');
+require('lodash.throttle');
 var generateTableCss = require('./utils/generateTableCss.cjs');
 require('./types.cjs');
 require('../../theme/modules/shadows.cjs');
@@ -11,7 +15,6 @@ require('../../theme/modules/text.cjs');
 require('styled-components');
 var useCellWidths = require('./hooks/useCellWidths.cjs');
 var useColumns = require('./hooks/useColumns.cjs');
-var useDragToScroll = require('./hooks/useDragToScroll.cjs');
 var useScrollPosition = require('./hooks/useScrollPosition.cjs');
 var useSelection = require('./hooks/useSelection.cjs');
 var renderCell = require('./renderers/renderCell.cjs');
@@ -51,7 +54,7 @@ const DataTable = ({ actionBarSlot, borderMode, columns: initialColumns, emptySt
     const scrollContainerRef = React.useRef(null);
     const tableRef = React.useRef(null);
     const intersectionTargetRef = React.useRef(null);
-    useDragToScroll.useDragToScroll(scrollContainerRef);
+    useDragToScroll.useDragToScroll({ targetRef: scrollContainerRef, ignoreClassName: 'th-divider' });
     // Configure row selection
     const enabledRowIds = rows.map((row) => row.id).filter((id) => !(disabledRowIds === null || disabledRowIds === undefined ? undefined : disabledRowIds.includes(id)));
     const { selectionEnabled, selectedRowIds, selectionColumn, setSelected } = useSelection.useSelection({