@veeqo/ui 9.9.0 → 9.9.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePinnedColumnLayout.cjs","sources":["../../../../src/components/DataGrid/hooks/usePinnedColumnLayout.ts"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\n\nimport { useMemo } from 'react';\n\nimport { Table } from '@tanstack/react-table';\n\ntype UsePinnedColumnLayoutProps = {\n  table: Table<any>;\n};\n\n/**\n * Hook which computes left and right positions for laying out pinned columns, which are then returned as CSS variables\n * to be applied to the table element.\n *\n * We do this so that pinned columns can be resized correctly, whilst avoiding having to re-render the table body and\n * header (since left/right properties must be applied to the <th> and <td> elements rather than the <col>).\n */\nexport const usePinnedColumnLayout = ({ table }: UsePinnedColumnLayoutProps) => {\n  const pinnedColumnLayoutStyles = useMemo(() => {\n    if (!table.getIsSomeColumnsPinned()) {\n      return {};\n    }\n\n    const pinnedColumns = [\n      ...table.getLeftVisibleLeafColumns(),\n      ...table.getRightVisibleLeafColumns(),\n    ];\n\n    return pinnedColumns.reduce((styleObj, column) => {\n      const pinLocation = column.getIsPinned();\n\n      return {\n        ...styleObj,\n        [`--${column.id}-start`]:\n          pinLocation === 'left' ? `${column.getStart('left')}px` : undefined,\n        [`--${column.id}-after`]:\n          pinLocation === 'right' ? `${column.getAfter('right')}px` : undefined,\n      };\n    }, {});\n  }, [\n    table.getState().columnSizing,\n    table.getState().columnSizingInfo,\n    table.getState().columnPinning,\n  ]);\n\n  return { pinnedColumnLayoutStyles };\n};\n"],"names":["useMemo"],"mappings":";;;;AAAA;AAUA;;;;;;AAMG;MACU,qBAAqB,GAAG,CAAC,EAAE,KAAK,EAA8B,KAAI;AAC7E,IAAA,MAAM,wBAAwB,GAAGA,aAAO,CAAC,MAAK;AAC5C,QAAA,IAAI,CAAC,KAAK,CAAC,sBAAsB,EAAE,EAAE;AACnC,YAAA,OAAO,EAAE;AACV;AAED,QAAA,MAAM,aAAa,GAAG;YACpB,GAAG,KAAK,CAAC,yBAAyB,EAAE;YACpC,GAAG,KAAK,CAAC,0BAA0B,EAAE;SACtC;QAED,OAAO,aAAa,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAI;AAC/C,YAAA,MAAM,WAAW,GAAG,MAAM,CAAC,WAAW,EAAE;YAExC,OAAO;AACL,gBAAA,GAAG,QAAQ;gBACX,CAAC,CAAA,EAAA,EAAK,MAAM,CAAC,EAAE,CAAA,MAAA,CAAQ,GACrB,WAAW,KAAK,MAAM,GAAG,CAAG,EAAA,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAI,EAAA,CAAA,GAAG,SAAS;gBACrE,CAAC,CAAA,EAAA,EAAK,MAAM,CAAC,EAAE,CAAA,MAAA,CAAQ,GACrB,WAAW,KAAK,OAAO,GAAG,CAAG,EAAA,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAI,EAAA,CAAA,GAAG,SAAS;aACxE;SACF,EAAE,EAAE,CAAC;AACR,KAAC,EAAE;AACD,QAAA,KAAK,CAAC,QAAQ,EAAE,CAAC,YAAY;AAC7B,QAAA,KAAK,CAAC,QAAQ,EAAE,CAAC,gBAAgB;AACjC,QAAA,KAAK,CAAC,QAAQ,EAAE,CAAC,aAAa;AAC/B,KAAA,CAAC;IAEF,OAAO,EAAE,wBAAwB,EAAE;AACrC;;;;"}

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

@@ -0,0 +1,15 @@
+import { Table } from '@tanstack/react-table';
+type UsePinnedColumnLayoutProps = {
+    table: Table<any>;
+};
+/**
+ * Hook which computes left and right positions for laying out pinned columns, which are then returned as CSS variables
+ * to be applied to the table element.
+ *
+ * We do this so that pinned columns can be resized correctly, whilst avoiding having to re-render the table body and
+ * header (since left/right properties must be applied to the <th> and <td> elements rather than the <col>).
+ */
+export declare const usePinnedColumnLayout: ({ table }: UsePinnedColumnLayoutProps) => {
+    pinnedColumnLayoutStyles: {};
+};
+export {};

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

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+
+/* eslint-disable react-hooks/exhaustive-deps */
+/**
+ * Hook which computes left and right positions for laying out pinned columns, which are then returned as CSS variables
+ * to be applied to the table element.
+ *
+ * We do this so that pinned columns can be resized correctly, whilst avoiding having to re-render the table body and
+ * header (since left/right properties must be applied to the <th> and <td> elements rather than the <col>).
+ */
+const usePinnedColumnLayout = ({ table }) => {
+    const pinnedColumnLayoutStyles = useMemo(() => {
+        if (!table.getIsSomeColumnsPinned()) {
+            return {};
+        }
+        const pinnedColumns = [
+            ...table.getLeftVisibleLeafColumns(),
+            ...table.getRightVisibleLeafColumns(),
+        ];
+        return pinnedColumns.reduce((styleObj, column) => {
+            const pinLocation = column.getIsPinned();
+            return {
+                ...styleObj,
+                [`--${column.id}-start`]: pinLocation === 'left' ? `${column.getStart('left')}px` : undefined,
+                [`--${column.id}-after`]: pinLocation === 'right' ? `${column.getAfter('right')}px` : undefined,
+            };
+        }, {});
+    }, [
+        table.getState().columnSizing,
+        table.getState().columnSizingInfo,
+        table.getState().columnPinning,
+    ]);
+    return { pinnedColumnLayoutStyles };
+};
+
+export { usePinnedColumnLayout };
+//# sourceMappingURL=usePinnedColumnLayout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePinnedColumnLayout.js","sources":["../../../../src/components/DataGrid/hooks/usePinnedColumnLayout.ts"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\n\nimport { useMemo } from 'react';\n\nimport { Table } from '@tanstack/react-table';\n\ntype UsePinnedColumnLayoutProps = {\n  table: Table<any>;\n};\n\n/**\n * Hook which computes left and right positions for laying out pinned columns, which are then returned as CSS variables\n * to be applied to the table element.\n *\n * We do this so that pinned columns can be resized correctly, whilst avoiding having to re-render the table body and\n * header (since left/right properties must be applied to the <th> and <td> elements rather than the <col>).\n */\nexport const usePinnedColumnLayout = ({ table }: UsePinnedColumnLayoutProps) => {\n  const pinnedColumnLayoutStyles = useMemo(() => {\n    if (!table.getIsSomeColumnsPinned()) {\n      return {};\n    }\n\n    const pinnedColumns = [\n      ...table.getLeftVisibleLeafColumns(),\n      ...table.getRightVisibleLeafColumns(),\n    ];\n\n    return pinnedColumns.reduce((styleObj, column) => {\n      const pinLocation = column.getIsPinned();\n\n      return {\n        ...styleObj,\n        [`--${column.id}-start`]:\n          pinLocation === 'left' ? `${column.getStart('left')}px` : undefined,\n        [`--${column.id}-after`]:\n          pinLocation === 'right' ? `${column.getAfter('right')}px` : undefined,\n      };\n    }, {});\n  }, [\n    table.getState().columnSizing,\n    table.getState().columnSizingInfo,\n    table.getState().columnPinning,\n  ]);\n\n  return { pinnedColumnLayoutStyles };\n};\n"],"names":[],"mappings":";;AAAA;AAUA;;;;;;AAMG;MACU,qBAAqB,GAAG,CAAC,EAAE,KAAK,EAA8B,KAAI;AAC7E,IAAA,MAAM,wBAAwB,GAAG,OAAO,CAAC,MAAK;AAC5C,QAAA,IAAI,CAAC,KAAK,CAAC,sBAAsB,EAAE,EAAE;AACnC,YAAA,OAAO,EAAE;AACV;AAED,QAAA,MAAM,aAAa,GAAG;YACpB,GAAG,KAAK,CAAC,yBAAyB,EAAE;YACpC,GAAG,KAAK,CAAC,0BAA0B,EAAE;SACtC;QAED,OAAO,aAAa,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAI;AAC/C,YAAA,MAAM,WAAW,GAAG,MAAM,CAAC,WAAW,EAAE;YAExC,OAAO;AACL,gBAAA,GAAG,QAAQ;gBACX,CAAC,CAAA,EAAA,EAAK,MAAM,CAAC,EAAE,CAAA,MAAA,CAAQ,GACrB,WAAW,KAAK,MAAM,GAAG,CAAG,EAAA,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAI,EAAA,CAAA,GAAG,SAAS;gBACrE,CAAC,CAAA,EAAA,EAAK,MAAM,CAAC,EAAE,CAAA,MAAA,CAAQ,GACrB,WAAW,KAAK,OAAO,GAAG,CAAG,EAAA,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAI,EAAA,CAAA,GAAG,SAAS;aACxE;SACF,EAAE,EAAE,CAAC;AACR,KAAC,EAAE;AACD,QAAA,KAAK,CAAC,QAAQ,EAAE,CAAC,YAAY;AAC7B,QAAA,KAAK,CAAC,QAAQ,EAAE,CAAC,gBAAgB;AACjC,QAAA,KAAK,CAAC,QAAQ,EAAE,CAAC,aAAa;AAC/B,KAAA,CAAC;IAEF,OAAO,EAAE,wBAAwB,EAAE;AACrC;;;;"}

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

@@ -0,0 +1,22 @@
+'use strict';
+
+var pinnedColumnUtils = require('../utils/pinnedColumnUtils.cjs');
+
+/**
+ * Hook which returns class names, and styles that need to be computed on-the-fly, for pinned column cells.
+ */
+const usePinnedColumnStyles = ({ column }) => {
+    if (!column.getIsPinned()) {
+        return {
+            pinnedCellClassName: '',
+            pinnedCellStyles: {},
+        };
+    }
+    return {
+        pinnedCellClassName: pinnedColumnUtils.getPinnedColumnClassNames(column),
+        pinnedCellStyles: pinnedColumnUtils.getPinnedColumnStyles(column),
+    };
+};
+
+exports.usePinnedColumnStyles = usePinnedColumnStyles;
+//# sourceMappingURL=usePinnedColumnStyles.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePinnedColumnStyles.cjs","sources":["../../../../src/components/DataGrid/hooks/usePinnedColumnStyles.ts"],"sourcesContent":["import { Column } from '@tanstack/react-table';\n\nimport { getPinnedColumnClassNames, getPinnedColumnStyles } from '../utils/pinnedColumnUtils';\n\ntype UsePinnedColumnStylesProps = {\n  column: Column<any, any>;\n};\n\n/**\n * Hook which returns class names, and styles that need to be computed on-the-fly, for pinned column cells.\n */\nexport const usePinnedColumnStyles = ({ column }: UsePinnedColumnStylesProps) => {\n  if (!column.getIsPinned()) {\n    return {\n      pinnedCellClassName: '',\n      pinnedCellStyles: {},\n    };\n  }\n\n  return {\n    pinnedCellClassName: getPinnedColumnClassNames(column),\n    pinnedCellStyles: getPinnedColumnStyles(column),\n  };\n};\n"],"names":["getPinnedColumnClassNames","getPinnedColumnStyles"],"mappings":";;;;AAQA;;AAEG;MACU,qBAAqB,GAAG,CAAC,EAAE,MAAM,EAA8B,KAAI;AAC9E,IAAA,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,EAAE;QACzB,OAAO;AACL,YAAA,mBAAmB,EAAE,EAAE;AACvB,YAAA,gBAAgB,EAAE,EAAE;SACrB;AACF;IAED,OAAO;AACL,QAAA,mBAAmB,EAAEA,2CAAyB,CAAC,MAAM,CAAC;AACtD,QAAA,gBAAgB,EAAEC,uCAAqB,CAAC,MAAM,CAAC;KAChD;AACH;;;;"}

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { Column } from '@tanstack/react-table';
+type UsePinnedColumnStylesProps = {
+    column: Column<any, any>;
+};
+/**
+ * Hook which returns class names, and styles that need to be computed on-the-fly, for pinned column cells.
+ */
+export declare const usePinnedColumnStyles: ({ column }: UsePinnedColumnStylesProps) => {
+    pinnedCellClassName: any;
+    pinnedCellStyles: import("react").CSSProperties;
+};
+export {};

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

@@ -0,0 +1,20 @@
+import { getPinnedColumnClassNames, getPinnedColumnStyles } from '../utils/pinnedColumnUtils.js';
+
+/**
+ * Hook which returns class names, and styles that need to be computed on-the-fly, for pinned column cells.
+ */
+const usePinnedColumnStyles = ({ column }) => {
+    if (!column.getIsPinned()) {
+        return {
+            pinnedCellClassName: '',
+            pinnedCellStyles: {},
+        };
+    }
+    return {
+        pinnedCellClassName: getPinnedColumnClassNames(column),
+        pinnedCellStyles: getPinnedColumnStyles(column),
+    };
+};
+
+export { usePinnedColumnStyles };
+//# sourceMappingURL=usePinnedColumnStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePinnedColumnStyles.js","sources":["../../../../src/components/DataGrid/hooks/usePinnedColumnStyles.ts"],"sourcesContent":["import { Column } from '@tanstack/react-table';\n\nimport { getPinnedColumnClassNames, getPinnedColumnStyles } from '../utils/pinnedColumnUtils';\n\ntype UsePinnedColumnStylesProps = {\n  column: Column<any, any>;\n};\n\n/**\n * Hook which returns class names, and styles that need to be computed on-the-fly, for pinned column cells.\n */\nexport const usePinnedColumnStyles = ({ column }: UsePinnedColumnStylesProps) => {\n  if (!column.getIsPinned()) {\n    return {\n      pinnedCellClassName: '',\n      pinnedCellStyles: {},\n    };\n  }\n\n  return {\n    pinnedCellClassName: getPinnedColumnClassNames(column),\n    pinnedCellStyles: getPinnedColumnStyles(column),\n  };\n};\n"],"names":[],"mappings":";;AAQA;;AAEG;MACU,qBAAqB,GAAG,CAAC,EAAE,MAAM,EAA8B,KAAI;AAC9E,IAAA,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,EAAE;QACzB,OAAO;AACL,YAAA,mBAAmB,EAAE,EAAE;AACvB,YAAA,gBAAgB,EAAE,EAAE;SACrB;AACF;IAED,OAAO;AACL,QAAA,mBAAmB,EAAE,yBAAyB,CAAC,MAAM,CAAC;AACtD,QAAA,gBAAgB,EAAE,qBAAqB,CAAC,MAAM,CAAC;KAChD;AACH;;;;"}

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

@@ -0,0 +1,40 @@
+'use strict';
+
+var React = require('react');
+
+/**
+ * Hook which manages interop between sorting props and the internal TanStack sorting state.
+ */
+const useSortingState = ({ columns, sortState, onSortChanged }) => {
+    const internalSortState = React.useMemo(() => {
+        if (!sortState || !onSortChanged)
+            return undefined;
+        return [{ id: sortState.columnId, desc: sortState.direction === 'desc' }];
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sortState]);
+    const setInternalSortState = React.useCallback((onUpdate) => {
+        if (!onSortChanged)
+            return;
+        // TanStack can either pass us a functional updater method, or the new sort object directly.
+        const newSortState = typeof onUpdate === 'function' ? onUpdate(internalSortState) : onUpdate;
+        if (!newSortState || newSortState.length === 0)
+            return;
+        const [{ id, desc }] = newSortState;
+        onSortChanged({
+            columnId: id,
+            direction: desc ? 'desc' : 'asc',
+        });
+    }, [onSortChanged, internalSortState]);
+    const enableSorting = React.useMemo(() => onSortChanged !== undefined && columns.some((column) => column.sortable), [columns, onSortChanged]);
+    return {
+        enableSorting,
+        sorting: internalSortState,
+        onSortingChange: setInternalSortState,
+        manualSorting: true,
+        enableSortingRemoval: false,
+        enableMultiRemove: false,
+    };
+};
+
+exports.useSortingState = useSortingState;
+//# sourceMappingURL=useSortingState.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSortingState.cjs","sources":["../../../../src/components/DataGrid/hooks/useSortingState.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react';\n\nimport { OnChangeFn, SortingState } from '@tanstack/react-table';\n\nimport { ColumnDefinition } from '../types';\nimport { SortState } from '../types/SortState';\n\ntype UseSortingStateProps = {\n  columns: ColumnDefinition<any>[];\n\n  sortState?: SortState;\n  onSortChanged?: (sortState: SortState) => void;\n};\n\n/**\n * Hook which manages interop between sorting props and the internal TanStack sorting state.\n */\nexport const useSortingState = ({ columns, sortState, onSortChanged }: UseSortingStateProps) => {\n  const internalSortState = useMemo(() => {\n    if (!sortState || !onSortChanged) return undefined;\n\n    return [{ id: sortState.columnId, desc: sortState.direction === 'desc' }];\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [sortState]);\n\n  const setInternalSortState: OnChangeFn<SortingState> = useCallback(\n    (onUpdate) => {\n      if (!onSortChanged) return;\n\n      // TanStack can either pass us a functional updater method, or the new sort object directly.\n      const newSortState =\n        typeof onUpdate === 'function' ? onUpdate(internalSortState as SortingState) : onUpdate;\n\n      if (!newSortState || newSortState.length === 0) return;\n\n      const [{ id, desc }] = newSortState;\n\n      onSortChanged({\n        columnId: id,\n        direction: desc ? 'desc' : 'asc',\n      });\n    },\n    [onSortChanged, internalSortState],\n  );\n\n  const enableSorting = useMemo(\n    () => onSortChanged !== undefined && columns.some((column) => column.sortable),\n    [columns, onSortChanged],\n  );\n\n  return {\n    enableSorting,\n    sorting: internalSortState,\n    onSortingChange: setInternalSortState,\n\n    manualSorting: true,\n    enableSortingRemoval: false,\n    enableMultiRemove: false,\n  };\n};\n"],"names":["useMemo","useCallback"],"mappings":";;;;AAcA;;AAEG;AACI,MAAM,eAAe,GAAG,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAwB,KAAI;AAC7F,IAAA,MAAM,iBAAiB,GAAGA,aAAO,CAAC,MAAK;AACrC,QAAA,IAAI,CAAC,SAAS,IAAI,CAAC,aAAa;AAAE,YAAA,OAAO,SAAS;AAElD,QAAA,OAAO,CAAC,EAAE,EAAE,EAAE,SAAS,CAAC,QAAQ,EAAE,IAAI,EAAE,SAAS,CAAC,SAAS,KAAK,MAAM,EAAE,CAAC;;AAE3E,KAAC,EAAE,CAAC,SAAS,CAAC,CAAC;AAEf,IAAA,MAAM,oBAAoB,GAA6BC,iBAAW,CAChE,CAAC,QAAQ,KAAI;AACX,QAAA,IAAI,CAAC,aAAa;YAAE;;AAGpB,QAAA,MAAM,YAAY,GAChB,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,iBAAiC,CAAC,GAAG,QAAQ;AAEzF,QAAA,IAAI,CAAC,YAAY,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC;YAAE;QAEhD,MAAM,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,GAAG,YAAY;AAEnC,QAAA,aAAa,CAAC;AACZ,YAAA,QAAQ,EAAE,EAAE;YACZ,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,KAAK;AACjC,SAAA,CAAC;AACJ,KAAC,EACD,CAAC,aAAa,EAAE,iBAAiB,CAAC,CACnC;AAED,IAAA,MAAM,aAAa,GAAGD,aAAO,CAC3B,MAAM,aAAa,KAAK,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,QAAQ,CAAC,EAC9E,CAAC,OAAO,EAAE,aAAa,CAAC,CACzB;IAED,OAAO;QACL,aAAa;AACb,QAAA,OAAO,EAAE,iBAAiB;AAC1B,QAAA,eAAe,EAAE,oBAAoB;AAErC,QAAA,aAAa,EAAE,IAAI;AACnB,QAAA,oBAAoB,EAAE,KAAK;AAC3B,QAAA,iBAAiB,EAAE,KAAK;KACzB;AACH;;;;"}

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

@@ -0,0 +1,23 @@
+import { OnChangeFn, SortingState } from '@tanstack/react-table';
+import { ColumnDefinition } from '../types';
+import { SortState } from '../types/SortState';
+type UseSortingStateProps = {
+    columns: ColumnDefinition<any>[];
+    sortState?: SortState;
+    onSortChanged?: (sortState: SortState) => void;
+};
+/**
+ * Hook which manages interop between sorting props and the internal TanStack sorting state.
+ */
+export declare const useSortingState: ({ columns, sortState, onSortChanged }: UseSortingStateProps) => {
+    enableSorting: boolean;
+    sorting: {
+        id: string;
+        desc: boolean;
+    }[] | undefined;
+    onSortingChange: OnChangeFn<SortingState>;
+    manualSorting: boolean;
+    enableSortingRemoval: boolean;
+    enableMultiRemove: boolean;
+};
+export {};

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

@@ -0,0 +1,38 @@
+import { useMemo, useCallback } from 'react';
+
+/**
+ * Hook which manages interop between sorting props and the internal TanStack sorting state.
+ */
+const useSortingState = ({ columns, sortState, onSortChanged }) => {
+    const internalSortState = useMemo(() => {
+        if (!sortState || !onSortChanged)
+            return undefined;
+        return [{ id: sortState.columnId, desc: sortState.direction === 'desc' }];
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sortState]);
+    const setInternalSortState = useCallback((onUpdate) => {
+        if (!onSortChanged)
+            return;
+        // TanStack can either pass us a functional updater method, or the new sort object directly.
+        const newSortState = typeof onUpdate === 'function' ? onUpdate(internalSortState) : onUpdate;
+        if (!newSortState || newSortState.length === 0)
+            return;
+        const [{ id, desc }] = newSortState;
+        onSortChanged({
+            columnId: id,
+            direction: desc ? 'desc' : 'asc',
+        });
+    }, [onSortChanged, internalSortState]);
+    const enableSorting = useMemo(() => onSortChanged !== undefined && columns.some((column) => column.sortable), [columns, onSortChanged]);
+    return {
+        enableSorting,
+        sorting: internalSortState,
+        onSortingChange: setInternalSortState,
+        manualSorting: true,
+        enableSortingRemoval: false,
+        enableMultiRemove: false,
+    };
+};
+
+export { useSortingState };
+//# sourceMappingURL=useSortingState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSortingState.js","sources":["../../../../src/components/DataGrid/hooks/useSortingState.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react';\n\nimport { OnChangeFn, SortingState } from '@tanstack/react-table';\n\nimport { ColumnDefinition } from '../types';\nimport { SortState } from '../types/SortState';\n\ntype UseSortingStateProps = {\n  columns: ColumnDefinition<any>[];\n\n  sortState?: SortState;\n  onSortChanged?: (sortState: SortState) => void;\n};\n\n/**\n * Hook which manages interop between sorting props and the internal TanStack sorting state.\n */\nexport const useSortingState = ({ columns, sortState, onSortChanged }: UseSortingStateProps) => {\n  const internalSortState = useMemo(() => {\n    if (!sortState || !onSortChanged) return undefined;\n\n    return [{ id: sortState.columnId, desc: sortState.direction === 'desc' }];\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [sortState]);\n\n  const setInternalSortState: OnChangeFn<SortingState> = useCallback(\n    (onUpdate) => {\n      if (!onSortChanged) return;\n\n      // TanStack can either pass us a functional updater method, or the new sort object directly.\n      const newSortState =\n        typeof onUpdate === 'function' ? onUpdate(internalSortState as SortingState) : onUpdate;\n\n      if (!newSortState || newSortState.length === 0) return;\n\n      const [{ id, desc }] = newSortState;\n\n      onSortChanged({\n        columnId: id,\n        direction: desc ? 'desc' : 'asc',\n      });\n    },\n    [onSortChanged, internalSortState],\n  );\n\n  const enableSorting = useMemo(\n    () => onSortChanged !== undefined && columns.some((column) => column.sortable),\n    [columns, onSortChanged],\n  );\n\n  return {\n    enableSorting,\n    sorting: internalSortState,\n    onSortingChange: setInternalSortState,\n\n    manualSorting: true,\n    enableSortingRemoval: false,\n    enableMultiRemove: false,\n  };\n};\n"],"names":[],"mappings":";;AAcA;;AAEG;AACI,MAAM,eAAe,GAAG,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAwB,KAAI;AAC7F,IAAA,MAAM,iBAAiB,GAAG,OAAO,CAAC,MAAK;AACrC,QAAA,IAAI,CAAC,SAAS,IAAI,CAAC,aAAa;AAAE,YAAA,OAAO,SAAS;AAElD,QAAA,OAAO,CAAC,EAAE,EAAE,EAAE,SAAS,CAAC,QAAQ,EAAE,IAAI,EAAE,SAAS,CAAC,SAAS,KAAK,MAAM,EAAE,CAAC;;AAE3E,KAAC,EAAE,CAAC,SAAS,CAAC,CAAC;AAEf,IAAA,MAAM,oBAAoB,GAA6B,WAAW,CAChE,CAAC,QAAQ,KAAI;AACX,QAAA,IAAI,CAAC,aAAa;YAAE;;AAGpB,QAAA,MAAM,YAAY,GAChB,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,iBAAiC,CAAC,GAAG,QAAQ;AAEzF,QAAA,IAAI,CAAC,YAAY,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC;YAAE;QAEhD,MAAM,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,GAAG,YAAY;AAEnC,QAAA,aAAa,CAAC;AACZ,YAAA,QAAQ,EAAE,EAAE;YACZ,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,KAAK;AACjC,SAAA,CAAC;AACJ,KAAC,EACD,CAAC,aAAa,EAAE,iBAAiB,CAAC,CACnC;AAED,IAAA,MAAM,aAAa,GAAG,OAAO,CAC3B,MAAM,aAAa,KAAK,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,QAAQ,CAAC,EAC9E,CAAC,OAAO,EAAE,aAAa,CAAC,CACzB;IAED,OAAO;QACL,aAAa;AACb,QAAA,OAAO,EAAE,iBAAiB;AAC1B,QAAA,eAAe,EAAE,oBAAoB;AAErC,QAAA,aAAa,EAAE,IAAI;AACnB,QAAA,oBAAoB,EAAE,KAAK;AAC3B,QAAA,iBAAiB,EAAE,KAAK;KACzB;AACH;;;;"}

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

@@ -27,6 +27,10 @@ export type BaseColumnDefinition = {
      * 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.
@@ -46,8 +50,6 @@ export type BaseColumnDefinition = {
     /**
      * Optional getter used to create an `aria-label` for the column header. If none is provided, the
      * column's `title` will be used.
-     *
-     * TODO: Add sort direction and other information.
      */
     getAriaLabel?: () => string;
     /**

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

@@ -2,6 +2,8 @@ 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;
@@ -58,6 +60,10 @@ export type DataGridProps = Pick<AriaAttributes, 'aria-label'> & {
      * 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.
@@ -67,4 +73,13 @@ export type DataGridProps = Pick<AriaAttributes, 'aria-label'> & {
      * 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/enums.d.ts

@@ -1,2 +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

@@ -2,3 +2,5 @@ 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

@@ -61,6 +61,7 @@ class ColumnMapper {
         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,

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

@@ -1 +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\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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"}
+{"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.js

@@ -59,6 +59,7 @@ class ColumnMapper {
         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,

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

@@ -1 +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\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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"}
+{"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/index.d.ts

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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "9.9.0",
+  "version": "9.9.1",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",