@dmsi/wedgekit-react 0.0.207 → 0.0.209

package/dist/components/index.js

@@ -12,18 +12,20 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-RXPS5GVE.js";
+} from "../chunk-Q3TNALWH.js";
 import {
   Menu
-} from "../chunk-2JRZCC2K.js";
-import "../chunk-WE55TGZZ.js";
+} from "../chunk-JITZWSPR.js";
+import "../chunk-NIHZMIOL.js";
 import {
   MenuOption
-} from "../chunk-WXHRJSDG.js";
+} from "../chunk-ERW3AMED.js";
 import {
-  useInfiniteScroll
-} from "../chunk-WNQ53SVY.js";
-import "../chunk-6LN6QT6M.js";
+  useInfiniteScroll,
+  useTableLayout
+} from "../chunk-E6Y7ZHQX.js";
+import "../chunk-VXWSAIB5.js";
+import "../chunk-T3F37S6Z.js";
 import {
   Search
 } from "../chunk-2WRRRPEB.js";
@@ -65,7 +67,7 @@ import {
 } from "../chunk-BBZEL7EG.js";
 
 // src/components/DataGrid/index.tsx
-import React3, { useCallback, useId, useState as useState3 } from "react";
+import React3, { useCallback, useEffect, useId, useState as useState3 } from "react";
 import {
   flexRender as flexRender3,
   getCoreRowModel,
@@ -170,7 +172,7 @@ function TableBodyRow({
           /* @__PURE__ */ jsx2("td", { style: { display: "flex", width: virtualPaddingLeft } })
         ) : null,
         columns.map((column) => {
-          var _a2, _b, _c;
+          var _a2;
           const cell = locked ? column : visibleCells[column.index];
           if (!cell) {
             return;
@@ -185,7 +187,6 @@ function TableBodyRow({
               className: clsx2({
                 "justify-end": typeof cellValue === "number"
               }),
-              width: (_c = (_b = cell.column.columnDef.meta) == null ? void 0 : _b.headerWidth) != null ? _c : `${cell.column.getSize()}px`,
               children: /* @__PURE__ */ jsx2(
                 Tooltip,
                 {
@@ -371,7 +372,15 @@ function TableBody({
               transform: `translateY(${virtualRows[virtualRows.length - 1].start + 40}px)`
             },
             className: "odd:bg-background-grouped-primary-normal even:bg-background-grouped-secondary-normal",
-            children: table.getAllLeafColumns().map((column) => /* @__PURE__ */ jsx4(LoadingCell, { id, testid, column: column.columnDef }, column.id))
+            children: table.getAllLeafColumns().map((column) => /* @__PURE__ */ jsx4(
+              LoadingCell,
+              {
+                id,
+                testid,
+                column: column.columnDef
+              },
+              column.id
+            ))
           }
         )
       ]
@@ -659,12 +668,29 @@ function DataGrid({
   useMenuDefaultMinWidth
 }) {
   var _a, _b, _c, _d, _e, _f, _g;
-  const [columnOrder, setColumnOrder] = useState3(
-    () => columns.map((c) => c.id)
-  );
   const [localSorting, setLocalSorting] = useState3([]);
   const [localColumnFilters, setLocalColumnFilters] = useState3([]);
   const [localRowSelection, setLocalRowSelection] = useState3({});
+  const {
+    columns: tableColumns,
+    setColumns: setTableColumns,
+    layoutSignal
+  } = useTableLayout(columns, id != null ? id : testid);
+  const [columnOrder, setColumnOrder] = useState3(
+    tableColumns.map((c) => c.id)
+  );
+  const [columnVisibility, setColumnVisibility] = useState3(
+    Object.fromEntries(
+      tableColumns.filter((column) => !!column.id).map((column) => {
+        var _a2, _b2;
+        return [column.id, (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true];
+      })
+    )
+  );
+  useEffect(() => {
+    setColumnOrder(tableColumns.map((c) => c.id));
+    resetColumnVisibility();
+  }, [layoutSignal]);
   const sortingState = pagination ? externalSorting != null ? externalSorting : localSorting : localSorting;
   const setSortingState = pagination ? (updaterOrValue) => {
     const value = typeof updaterOrValue === "function" ? updaterOrValue(
@@ -684,36 +710,32 @@ function DataGrid({
   } : setLocalRowSelection;
   const dndId = useId();
   const containerRef = React3.useRef(null);
-  const [columnVisibility, setColumnVisibility] = useState3(() => {
-    const initialVisibility = {};
-    columns.forEach((column) => {
-      var _a2, _b2;
-      if (column.id) {
-        initialVisibility[column.id] = (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true;
-      }
-    });
-    return initialVisibility;
-  });
   const toggleColumnVisibility = useCallback(
     (columnId, isVisible) => {
-      setColumnVisibility((prev) => __spreadProps(__spreadValues({}, prev), { [columnId]: isVisible }));
+      setTableColumns((prev) => {
+        const persistedIndex = prev.findIndex((col) => col.id === columnId);
+        if (persistedIndex !== -1) {
+          prev[persistedIndex].meta = __spreadProps(__spreadValues({}, prev[persistedIndex].meta), {
+            visible: isVisible
+          });
+        }
+        return [...prev];
+      }, true);
     },
-    [setColumnVisibility]
+    [setTableColumns]
   );
   const resetColumnVisibility = useCallback(() => {
-    setColumnVisibility(() => {
-      const initialVisibility = {};
-      columns.forEach((column) => {
-        var _a2, _b2;
-        if (column.id) {
-          initialVisibility[column.id] = (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true;
-        }
-      });
-      return initialVisibility;
-    });
-  }, [columns]);
+    setColumnVisibility(
+      Object.fromEntries(
+        tableColumns.filter((column) => !!column.id).map((column) => {
+          var _a2, _b2;
+          return [column.id, (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true];
+        })
+      )
+    );
+  }, [tableColumns]);
   const table = useReactTable({
-    columns,
+    columns: tableColumns,
     data,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
@@ -797,7 +819,12 @@ function DataGrid({
       setColumnOrder((prev) => {
         const oldIndex = prev.indexOf(active.id);
         const newIndex = prev.indexOf(over.id);
-        return arrayMove(prev, oldIndex, newIndex);
+        const newOrder = arrayMove(prev, oldIndex, newIndex);
+        setTableColumns((prev2) => {
+          const res = newOrder.map((id2) => prev2.find((col) => col.id === id2)).filter(Boolean);
+          return res;
+        });
+        return newOrder;
       });
     }
   };
@@ -883,23 +910,21 @@ function DataGrid({
                                 )
                               ) : null,
                               virtualColumns.map((virtualColumn) => {
-                                var _a2, _b2, _c2, _d2;
+                                var _a2, _b2, _c2;
                                 const header = headerGroup.headers[virtualColumn.index];
                                 if (!header) {
                                   return;
                                 }
                                 if (typeof header.column.columnDef.header === "string") {
-                                  const customHeaderWidth = (_a2 = header.column.columnDef.meta) == null ? void 0 : _a2.headerWidth;
-                                  const cellValue = (_b2 = table.getRowModel().rows[0]) == null ? void 0 : _b2.getValue(header.column.id);
+                                  const cellValue = (_a2 = table.getRowModel().rows[0]) == null ? void 0 : _a2.getValue(header.column.id);
                                   return /* @__PURE__ */ jsxs5(
                                     DraggableCellHeader,
                                     {
                                       id: id ? `${id}-header-${header.id}` : void 0,
                                       testid: testid ? `${testid}-header-${header.id}` : void 0,
                                       header,
-                                      locked: (_c2 = header.column.columnDef.meta) == null ? void 0 : _c2.locked,
+                                      locked: (_b2 = header.column.columnDef.meta) == null ? void 0 : _b2.locked,
                                       center: centerHeader,
-                                      width: customHeaderWidth,
                                       className: clsx5(
                                         header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
                                         "group",
@@ -940,7 +965,7 @@ function DataGrid({
                                     header.id
                                   );
                                 }
-                                return /* @__PURE__ */ jsx8(React3.Fragment, { children: ((_d2 = header.column.columnDef.meta) == null ? void 0 : _d2.checkbox) ? /* @__PURE__ */ jsx8(
+                                return /* @__PURE__ */ jsx8(React3.Fragment, { children: ((_c2 = header.column.columnDef.meta) == null ? void 0 : _c2.checkbox) ? /* @__PURE__ */ jsx8(
                                   DataGridCell,
                                   {
                                     id: id ? `${id}-header-${header.id}` : void 0,

package/dist/components/useMenuSystem.cjs

@@ -39,7 +39,7 @@ __export(useMenuSystem_exports, {
   useSubMenuSystem: () => useSubMenuSystem
 });
 module.exports = __toCommonJS(useMenuSystem_exports);
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/hooks/useKeydown.ts
 var import_react = require("react");
@@ -62,23 +62,26 @@ var useMatchesMedia = (query) => {
 };
 var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
 
+// src/hooks/useTableLayout.ts
+var import_react4 = require("react");
+
 // src/components/useMenuSystem.tsx
 function useSubMenuSystem(mobilePositionTo) {
-  const [activeMenus, setActiveMenus] = (0, import_react4.useState)(
+  const [activeMenus, setActiveMenus] = (0, import_react5.useState)(
     {}
   );
-  const [activeMenu, setActiveMenu] = (0, import_react4.useState)("");
-  const [currentSubMenuLevel, setCurrentSubMenuLevel] = (0, import_react4.useState)(
+  const [activeMenu, setActiveMenu] = (0, import_react5.useState)("");
+  const [currentSubMenuLevel, setCurrentSubMenuLevel] = (0, import_react5.useState)(
     null
   );
-  const menuRootRef = (0, import_react4.useRef)(null);
-  const subMenuRefs = (0, import_react4.useRef)({});
-  const hoverTimeoutRef = (0, import_react4.useRef)(null);
-  const closeTimeoutRef = (0, import_react4.useRef)(null);
-  const mouseStopTimeoutRef = (0, import_react4.useRef)(null);
-  const isMouseMovingRef = (0, import_react4.useRef)(false);
-  const pendingOpenActionRef = (0, import_react4.useRef)(null);
-  const pendingCloseActionRef = (0, import_react4.useRef)(null);
+  const menuRootRef = (0, import_react5.useRef)(null);
+  const subMenuRefs = (0, import_react5.useRef)({});
+  const hoverTimeoutRef = (0, import_react5.useRef)(null);
+  const closeTimeoutRef = (0, import_react5.useRef)(null);
+  const mouseStopTimeoutRef = (0, import_react5.useRef)(null);
+  const isMouseMovingRef = (0, import_react5.useRef)(false);
+  const pendingOpenActionRef = (0, import_react5.useRef)(null);
+  const pendingCloseActionRef = (0, import_react5.useRef)(null);
   const isMobile = useMatchesMobile();
   const toggleMenu = (menuId, level) => {
     if (closeTimeoutRef.current) {
@@ -118,7 +121,7 @@ function useSubMenuSystem(mobilePositionTo) {
       return newActiveMenus;
     });
   };
-  const executePendingActions = (0, import_react4.useCallback)(() => {
+  const executePendingActions = (0, import_react5.useCallback)(() => {
     if (pendingCloseActionRef.current) {
       pendingCloseActionRef.current();
       pendingCloseActionRef.current = null;
@@ -207,7 +210,7 @@ function useSubMenuSystem(mobilePositionTo) {
   const isMenuActive = (menuId, level) => {
     return activeMenus[level] === menuId;
   };
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     const handleClickOutside = (event) => {
       var _a;
       if (Object.keys(activeMenus).length === 0) return;
@@ -226,7 +229,7 @@ function useSubMenuSystem(mobilePositionTo) {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [activeMenus]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     return () => {
       if (hoverTimeoutRef.current) {
         clearTimeout(hoverTimeoutRef.current);
@@ -304,13 +307,13 @@ function useSubMenuSystem(mobilePositionTo) {
   };
 }
 function useMenuPosition(elementRef, position = "bottom", options) {
-  const [menuPosition, setMenuPosition] = (0, import_react4.useState)({
+  const [menuPosition, setMenuPosition] = (0, import_react5.useState)({
     top: 0,
     left: 0,
     minWidth: 0
   });
   const isMobile = options == null ? void 0 : options.isMobile;
-  const updatePosition = (0, import_react4.useCallback)(() => {
+  const updatePosition = (0, import_react5.useCallback)(() => {
     var _a, _b, _c;
     if (!(elementRef == null ? void 0 : elementRef.current)) return;
     const triggerRect = elementRef.current.getBoundingClientRect();
@@ -358,7 +361,7 @@ function useMenuPosition(elementRef, position = "bottom", options) {
       minWidth: triggerRect.width
     });
   }, [elementRef, position, options == null ? void 0 : options.menuRef, options == null ? void 0 : options.topOffset, isMobile]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!(options == null ? void 0 : options.isOpen) || !(options == null ? void 0 : options.setIsOpen)) return;
     const handleClickOutside = (event) => {
       var _a, _b, _c, _d, _e;
@@ -384,7 +387,7 @@ function useMenuPosition(elementRef, position = "bottom", options) {
     options == null ? void 0 : options.menuRef,
     options == null ? void 0 : options.additionalRefs
   ]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     updatePosition();
     const resizeObserver = new ResizeObserver(updatePosition);
     if (elementRef == null ? void 0 : elementRef.current) {

package/dist/components/useMenuSystem.js

@@ -2,8 +2,11 @@
 import {
   useMenuPosition,
   useSubMenuSystem
-} from "../chunk-WE55TGZZ.js";
-import "../chunk-WNQ53SVY.js";
+} from "../chunk-NIHZMIOL.js";
+import "../chunk-E6Y7ZHQX.js";
+import "../chunk-VXWSAIB5.js";
+import "../chunk-T3F37S6Z.js";
+import "../chunk-5UH6QUFB.js";
 import "../chunk-BBZEL7EG.js";
 export {
   useMenuPosition,

package/dist/hooks/index.cjs

@@ -2,7 +2,21 @@
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -23,7 +37,8 @@ __export(hooks_exports, {
   useInfiniteScroll: () => useInfiniteScroll,
   useKeydown: () => useKeydown,
   useMatchesMedia: () => useMatchesMedia,
-  useMatchesMobile: () => useMatchesMobile
+  useMatchesMobile: () => useMatchesMobile,
+  useTableLayout: () => useTableLayout
 });
 module.exports = __toCommonJS(hooks_exports);
 
@@ -99,10 +114,59 @@ var useMatchesMedia = (query) => {
   return matches;
 };
 var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
+
+// src/utils/mergeObjectArrays.ts
+function mergeObjectArrays(arr1, arr2) {
+  const maxLength = Math.max(arr1.length, arr2.length);
+  return Array.from(
+    { length: maxLength },
+    (_, i) => __spreadValues(__spreadValues({}, arr1[i] || {}), arr2[i] || {})
+  );
+}
+
+// src/hooks/useTableLayout.ts
+var import_react4 = require("react");
+function useTableLayout(initialColumns, key) {
+  const [columns, setColumns] = (0, import_react4.useState)(initialColumns);
+  const [isReady, setIsReady] = (0, import_react4.useState)(false);
+  const [layoutSignal, setLayoutSignal] = (0, import_react4.useState)(0);
+  (0, import_react4.useEffect)(() => {
+    if (!key) return setIsReady(true);
+    const savedLayout = localStorage.getItem(`${key}-tableLayout`);
+    if (savedLayout) {
+      setColumns(
+        mergeObjectArrays(
+          initialColumns,
+          JSON.parse(savedLayout)
+        )
+      );
+    }
+    if (!savedLayout) handleSaveLayout(initialColumns, true);
+    setLayoutSignal((prev) => prev + 1);
+    setIsReady(true);
+  }, []);
+  const handleSaveLayout = (0, import_react4.useCallback)(
+    (setter, _internal) => {
+      if (!isReady && !_internal) return null;
+      const newColumns = typeof setter === "function" ? setter(columns) : setter;
+      if (JSON.stringify(newColumns) === JSON.stringify(columns) && !_internal)
+        return null;
+      if (key) {
+        localStorage.setItem(`${key}-tableLayout`, JSON.stringify(newColumns));
+      }
+      setColumns(newColumns);
+      setLayoutSignal((prev) => prev + 1);
+      return newColumns;
+    },
+    [columns, isReady, key]
+  );
+  return { columns, setColumns: handleSaveLayout, layoutSignal, isReady };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   useInfiniteScroll,
   useKeydown,
   useMatchesMedia,
-  useMatchesMobile
+  useMatchesMobile,
+  useTableLayout
 });

package/dist/hooks/index.js

@@ -2,12 +2,17 @@ import {
   useInfiniteScroll,
   useKeydown,
   useMatchesMedia,
-  useMatchesMobile
-} from "../chunk-WNQ53SVY.js";
+  useMatchesMobile,
+  useTableLayout
+} from "../chunk-E6Y7ZHQX.js";
+import "../chunk-VXWSAIB5.js";
+import "../chunk-T3F37S6Z.js";
+import "../chunk-5UH6QUFB.js";
 import "../chunk-BBZEL7EG.js";
 export {
   useInfiniteScroll,
   useKeydown,
   useMatchesMedia,
-  useMatchesMobile
+  useMatchesMobile,
+  useTableLayout
 };

package/dist/utils/index.cjs

@@ -2,7 +2,21 @@
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -34,6 +48,7 @@ __export(utils_exports, {
   isValidDate: () => isValidDate,
   isValidDateRange: () => isValidDateRange,
   isValidDateRangeOrder: () => isValidDateRangeOrder,
+  mergeObjectArrays: () => mergeObjectArrays,
   parseDateParts: () => parseDateParts,
   parseInputDate: () => parseInputDate
 });
@@ -197,6 +212,15 @@ function isValidDateRangeOrder(fromDate, toDate) {
   const to = new Date(toDate);
   return to >= from;
 }
+
+// src/utils/mergeObjectArrays.ts
+function mergeObjectArrays(arr1, arr2) {
+  const maxLength = Math.max(arr1.length, arr2.length);
+  return Array.from(
+    { length: maxLength },
+    (_, i) => __spreadValues(__spreadValues({}, arr1[i] || {}), arr2[i] || {})
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   calculateCursorPosition,
@@ -213,6 +237,7 @@ function isValidDateRangeOrder(fromDate, toDate) {
   isValidDate,
   isValidDateRange,
   isValidDateRangeOrder,
+  mergeObjectArrays,
   parseDateParts,
   parseInputDate
 });

package/dist/utils/index.js

@@ -10,9 +10,10 @@ import {
   isValidDate,
   isValidDateRange,
   isValidDateRangeOrder,
+  mergeObjectArrays,
   parseDateParts,
   parseInputDate
-} from "../chunk-M3433XEJ.js";
+} from "../chunk-T3F37S6Z.js";
 import {
   formatCurrencyDisplay,
   formatDecimalValue,
@@ -34,6 +35,7 @@ export {
   isValidDate,
   isValidDateRange,
   isValidDateRangeOrder,
+  mergeObjectArrays,
   parseDateParts,
   parseInputDate
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.207",
+  "version": "0.0.209",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/DataGrid/TableBody/TableBodyRow.tsx

@@ -107,10 +107,6 @@ export function TableBodyRow<T>({
             className={clsx({
               "justify-end": typeof cellValue === "number",
             })}
-            width={
-              (cell.column.columnDef.meta?.headerWidth as string | undefined) ??
-              `${cell.column.getSize()}px`
-            }
           >
             <Tooltip
               id={id ? `${id}-tooltip-${cell.id}` : undefined}

package/src/components/DataGrid/TableBody/index.tsx

@@ -89,7 +89,9 @@ export function TableBody<T>({
             x.headers.map((header) => (
               <CellElement
                 id={id ? `${id}-filter-cell-${header.id}` : undefined}
-                testid={testid ? `${testid}-filter-cell-${header.id}` : undefined}
+                testid={
+                  testid ? `${testid}-filter-cell-${header.id}` : undefined
+                }
                 noPadding
                 key={header.id}
                 cell={header}
@@ -105,7 +107,11 @@ export function TableBody<T>({
                   }) ?? (
                     <Search
                       id={id ? `${id}-filter-search-${header.id}` : undefined}
-                      testid={testid ? `${testid}-filter-search-${header.id}` : undefined}
+                      testid={
+                        testid
+                          ? `${testid}-filter-search-${header.id}`
+                          : undefined
+                      }
                       removeRoundness
                       onChange={(e) =>
                         header.column.setFilterValue(e.target.value)
@@ -156,7 +162,12 @@ export function TableBody<T>({
           className="odd:bg-background-grouped-primary-normal even:bg-background-grouped-secondary-normal"
         >
           {table.getAllLeafColumns().map((column) => (
-            <LoadingCell id={id} testid={testid} key={column.id} column={column.columnDef} />
+            <LoadingCell
+              id={id}
+              testid={testid}
+              key={column.id}
+              column={column.columnDef}
+            />
           ))}
         </tr>
       )}