@veeqo/ui 9.10.2 → 9.11.0

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/types/ColumnWidths.d.ts

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

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

@@ -5,6 +5,7 @@ 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;
@@ -110,4 +111,13 @@ export type DataGridProps = Pick<AriaAttributes, 'aria-label'> & {
      * 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/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/package.json

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

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

@@ -1,11 +0,0 @@
-'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

@@ -1 +0,0 @@
-{"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

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

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

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