@dmsi/wedgekit-react 0.0.643 → 0.0.645

package/dist/components/index.js

@@ -2,13 +2,13 @@ import {
   DataGrid,
   DateInput,
   MobileDataGrid
-} from "../chunk-SJ3SULQB.js";
-import "../chunk-XX5GVIPZ.js";
+} from "../chunk-FJXWYGB7.js";
+import "../chunk-3MV3KMQH.js";
 import "../chunk-M7INAUAJ.js";
-import "../chunk-ARWHCWG7.js";
+import "../chunk-XT4BQXSX.js";
 import {
   ProductImagePreview
-} from "../chunk-MQB6BSRX.js";
+} from "../chunk-FCGPQNS2.js";
 import "../chunk-YCDDBSVU.js";
 import "../chunk-3X3Y4TMS.js";
 import "../chunk-BQNPOGD5.js";
@@ -17,11 +17,11 @@ import {
 } from "../chunk-Y5GD2FJA.js";
 import "../chunk-MBZ55T2D.js";
 import "../chunk-2IKT6IHB.js";
-import "../chunk-FIOXWZWU.js";
-import "../chunk-LGX34HML.js";
+import "../chunk-ECYXZZWC.js";
+import "../chunk-Q4AANHJY.js";
 import "../chunk-5IFPG6TS.js";
 import "../chunk-AJ5M6MVX.js";
-import "../chunk-UB3GEENN.js";
+import "../chunk-OZEKRO4L.js";
 import "../chunk-AT4AWD6B.js";
 import "../chunk-EWGHVZL5.js";
 import {
@@ -42,7 +42,7 @@ import {
 import {
   Tooltip
 } from "../chunk-AS57Y2D3.js";
-import "../chunk-V7GPM6Z3.js";
+import "../chunk-3PBA2EZ5.js";
 import "../chunk-4RJKB7LC.js";
 import "../chunk-UUKHQUSF.js";
 import "../chunk-WVVEOCEH.js";
@@ -64,14 +64,14 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-RQMOWYB7.js";
+} from "../chunk-EXCAOI2L.js";
 import {
   Menu
-} from "../chunk-5JHKFK73.js";
-import "../chunk-IATOG76G.js";
+} from "../chunk-HIGNJAQA.js";
+import "../chunk-ISRG77J6.js";
 import {
   MenuOption
-} from "../chunk-PS7MBNUT.js";
+} from "../chunk-REC2XOPI.js";
 import {
   Search
 } from "../chunk-FHXCCVOG.js";
@@ -87,10 +87,10 @@ import {
 } from "../chunk-M7WHWZ2J.js";
 import {
   CompactImagesPreview
-} from "../chunk-3R3AY5MT.js";
-import "../chunk-YR4ZO2XL.js";
+} from "../chunk-B3T7KBDA.js";
+import "../chunk-ZSRTAMSW.js";
 import "../chunk-VXWSAIB5.js";
-import "../chunk-QJZ3XHNH.js";
+import "../chunk-HCHKYUNQ.js";
 import "../chunk-5UH6QUFB.js";
 import {
   AccessCard

package/dist/components/useMenuSystem.cjs

@@ -39,7 +39,7 @@ __export(useMenuSystem_exports, {
   useSubMenuSystem: () => useSubMenuSystem
 });
 module.exports = __toCommonJS(useMenuSystem_exports);
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/hooks/useKeydown.ts
 var import_react = require("react");
@@ -69,23 +69,26 @@ var LocalStoragePrefixVersion = `dmsi-acc-v1.1.1`;
 var import_react4 = require("react");
 var LocalStoragePrefix = `${LocalStoragePrefixVersion}-tableLayout`;
 
+// src/hooks/useEditCell.tsx
+var import_react5 = require("react");
+
 // src/components/useMenuSystem.tsx
 function useSubMenuSystem(mobilePositionTo) {
-  const [activeMenus, setActiveMenus] = (0, import_react5.useState)(
+  const [activeMenus, setActiveMenus] = (0, import_react6.useState)(
     {}
   );
-  const [activeMenu, setActiveMenu] = (0, import_react5.useState)("");
-  const [currentSubMenuLevel, setCurrentSubMenuLevel] = (0, import_react5.useState)(
+  const [activeMenu, setActiveMenu] = (0, import_react6.useState)("");
+  const [currentSubMenuLevel, setCurrentSubMenuLevel] = (0, import_react6.useState)(
     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 menuRootRef = (0, import_react6.useRef)(null);
+  const subMenuRefs = (0, import_react6.useRef)({});
+  const hoverTimeoutRef = (0, import_react6.useRef)(null);
+  const closeTimeoutRef = (0, import_react6.useRef)(null);
+  const mouseStopTimeoutRef = (0, import_react6.useRef)(null);
+  const isMouseMovingRef = (0, import_react6.useRef)(false);
+  const pendingOpenActionRef = (0, import_react6.useRef)(null);
+  const pendingCloseActionRef = (0, import_react6.useRef)(null);
   const isMobile = useMatchesMobile();
   const toggleMenu = (menuId, level) => {
     if (closeTimeoutRef.current) {
@@ -125,7 +128,7 @@ function useSubMenuSystem(mobilePositionTo) {
       return newActiveMenus;
     });
   };
-  const executePendingActions = (0, import_react5.useCallback)(() => {
+  const executePendingActions = (0, import_react6.useCallback)(() => {
     if (pendingCloseActionRef.current) {
       pendingCloseActionRef.current();
       pendingCloseActionRef.current = null;
@@ -214,7 +217,7 @@ function useSubMenuSystem(mobilePositionTo) {
   const isMenuActive = (menuId, level) => {
     return activeMenus[level] === menuId;
   };
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const handleClickOutside = (event) => {
       var _a;
       if (Object.keys(activeMenus).length === 0) return;
@@ -233,7 +236,7 @@ function useSubMenuSystem(mobilePositionTo) {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [activeMenus]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     return () => {
       if (hoverTimeoutRef.current) {
         clearTimeout(hoverTimeoutRef.current);
@@ -311,13 +314,13 @@ function useSubMenuSystem(mobilePositionTo) {
   };
 }
 function useMenuPosition(elementRef, position = "bottom", options) {
-  const [menuPosition, setMenuPosition] = (0, import_react5.useState)({
+  const [menuPosition, setMenuPosition] = (0, import_react6.useState)({
     top: 0,
     left: 0,
     minWidth: 0
   });
   const isMobile = options == null ? void 0 : options.isMobile;
-  const updatePosition = (0, import_react5.useCallback)(() => {
+  const updatePosition = (0, import_react6.useCallback)(() => {
     var _a, _b, _c;
     if (!(elementRef == null ? void 0 : elementRef.current)) return;
     const triggerRect = elementRef.current.getBoundingClientRect();
@@ -365,7 +368,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_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!(options == null ? void 0 : options.isOpen) || !(options == null ? void 0 : options.setIsOpen)) return;
     const handleClickOutside = (event) => {
       var _a, _b, _c, _d, _e;
@@ -391,7 +394,7 @@ function useMenuPosition(elementRef, position = "bottom", options) {
     options == null ? void 0 : options.menuRef,
     options == null ? void 0 : options.additionalRefs
   ]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     updatePosition();
     const resizeObserver = new ResizeObserver(updatePosition);
     if (elementRef == null ? void 0 : elementRef.current) {

package/dist/components/useMenuSystem.js

@@ -2,10 +2,10 @@
 import {
   useMenuPosition,
   useSubMenuSystem
-} from "../chunk-IATOG76G.js";
-import "../chunk-YR4ZO2XL.js";
+} from "../chunk-ISRG77J6.js";
+import "../chunk-ZSRTAMSW.js";
 import "../chunk-VXWSAIB5.js";
-import "../chunk-QJZ3XHNH.js";
+import "../chunk-HCHKYUNQ.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/hooks/index.cjs

@@ -1,6 +1,8 @@
 "use strict";
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
@@ -17,6 +19,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -34,6 +37,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/hooks/index.ts
 var hooks_exports = {};
 __export(hooks_exports, {
+  useEditCell: () => useEditCell,
   useInfiniteScroll: () => useInfiniteScroll,
   useKeydown: () => useKeydown,
   useMatchesMedia: () => useMatchesMedia,
@@ -117,11 +121,24 @@ 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] || {})
-  );
+  const arr2Map = /* @__PURE__ */ new Map();
+  for (const item of arr2) {
+    const id = item.id;
+    if (id !== void 0) {
+      arr2Map.set(id, item);
+    }
+  }
+  return arr1.map((item1) => {
+    const id = item1.id;
+    if (id !== void 0 && arr2Map.has(id)) {
+      const item2 = arr2Map.get(id);
+      const meta1 = item1.meta;
+      const meta2 = item2.meta;
+      const mergedMeta = meta1 && meta2 && typeof meta1 === "object" && typeof meta2 === "object" ? __spreadValues(__spreadValues({}, meta1), meta2) : meta2 != null ? meta2 : meta1;
+      return __spreadProps(__spreadValues(__spreadValues({}, item1), item2), { meta: mergedMeta });
+    }
+    return item1;
+  });
 }
 
 // src/utils/index.ts
@@ -134,52 +151,58 @@ var getLocalStorageKeyWithPrefix = (key) => `${LocalStoragePrefix}__${key}`;
 function useTableLayout(initialColumns, key, autosync = true) {
   const [columns, setColumns] = (0, import_react4.useState)(initialColumns);
   const [isReady, setIsReady] = (0, import_react4.useState)(false);
-  const renderCountRef = (0, import_react4.useRef)(0);
+  const isReadyRef = (0, import_react4.useRef)(false);
+  const keyRef = (0, import_react4.useRef)(key);
+  (0, import_react4.useEffect)(() => {
+    isReadyRef.current = isReady;
+    keyRef.current = key;
+  }, [isReady, key]);
   const handleSaveLayout = (0, import_react4.useCallback)(
     (setter, _internal) => {
-      if (!isReady && !_internal || !key) return;
+      if (!isReadyRef.current && !_internal || !keyRef.current) return;
       setColumns((prevColumns) => {
         const newColumns = typeof setter === "function" ? setter(prevColumns) : setter;
-        if (JSON.stringify(newColumns) === JSON.stringify(prevColumns) && !_internal)
+        if (JSON.stringify(newColumns) === JSON.stringify(prevColumns) && !_internal) {
           return prevColumns;
+        }
         localStorage.setItem(
-          getLocalStorageKeyWithPrefix(`${key}-tableLayout`),
+          getLocalStorageKeyWithPrefix(`${keyRef.current}-tableLayout`),
           JSON.stringify(newColumns)
         );
         return newColumns;
       });
     },
-    [isReady, key]
+    []
   );
   (0, import_react4.useEffect)(() => {
     if (!autosync) return;
-    if (!key) return setIsReady(true);
-    if (renderCountRef.current > 1) {
-      throw new Error(
-        `useTableLayout should only be called once per component render cycle.
-        ${renderCountRef.current} Renders detected.
-        Check dependency stability`
-      );
+    if (!key) {
+      setIsReady(true);
+      return;
     }
-    renderCountRef.current += 1;
     const savedLayout = localStorage.getItem(
       getLocalStorageKeyWithPrefix(`${key}-tableLayout`)
     );
     if (savedLayout) {
-      handleSaveLayout(
+      setColumns(
         mergeObjectArrays(
           initialColumns,
           JSON.parse(savedLayout)
-        ),
-        true
+        )
+      );
+    } else {
+      localStorage.setItem(
+        getLocalStorageKeyWithPrefix(`${key}-tableLayout`),
+        JSON.stringify(initialColumns)
       );
+      setColumns((prev) => {
+        if (JSON.stringify(initialColumns) === JSON.stringify(prev))
+          return prev;
+        return initialColumns;
+      });
     }
-    if (!savedLayout) handleSaveLayout(initialColumns, true);
     setIsReady(true);
-    return () => {
-      renderCountRef.current = 0;
-    };
-  }, [handleSaveLayout, initialColumns, key, autosync]);
+  }, [initialColumns, key, autosync]);
   const getSavedLayout = (0, import_react4.useCallback)(() => {
     const savedLayout = localStorage.getItem(
       getLocalStorageKeyWithPrefix(`${key}-tableLayout`)
@@ -190,8 +213,35 @@ function useTableLayout(initialColumns, key, autosync = true) {
   }, [key]);
   return { columns, setColumns: handleSaveLayout, isReady, getSavedLayout };
 }
+
+// src/hooks/useEditCell.tsx
+var import_react5 = require("react");
+function useEditCell(initialValue) {
+  const [value, setValue] = (0, import_react5.useState)(initialValue);
+  const [isEdit, setIsEdit] = (0, import_react5.useState)(false);
+  const inputRef = (0, import_react5.useRef)(null);
+  function changeToEditMode() {
+    setIsEdit(true);
+    requestAnimationFrame(() => {
+      var _a;
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+    });
+  }
+  function changeToViewMode() {
+    setIsEdit(false);
+  }
+  return {
+    value,
+    setValue,
+    isEdit,
+    inputRef,
+    changeToEditMode,
+    changeToViewMode
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  useEditCell,
   useInfiniteScroll,
   useKeydown,
   useMatchesMedia,

package/dist/hooks/index.js

@@ -1,15 +1,17 @@
 import {
+  useEditCell,
   useInfiniteScroll,
   useKeydown,
   useMatchesMedia,
   useMatchesMobile,
   useTableLayout
-} from "../chunk-YR4ZO2XL.js";
+} from "../chunk-ZSRTAMSW.js";
 import "../chunk-VXWSAIB5.js";
-import "../chunk-QJZ3XHNH.js";
+import "../chunk-HCHKYUNQ.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-ORMEWXMH.js";
 export {
+  useEditCell,
   useInfiniteScroll,
   useKeydown,
   useMatchesMedia,

package/dist/utils/index.cjs

@@ -1,6 +1,8 @@
 "use strict";
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
@@ -17,6 +19,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -216,11 +219,24 @@ function isValidDateRangeOrder(fromDate, toDate) {
 
 // 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] || {})
-  );
+  const arr2Map = /* @__PURE__ */ new Map();
+  for (const item of arr2) {
+    const id = item.id;
+    if (id !== void 0) {
+      arr2Map.set(id, item);
+    }
+  }
+  return arr1.map((item1) => {
+    const id = item1.id;
+    if (id !== void 0 && arr2Map.has(id)) {
+      const item2 = arr2Map.get(id);
+      const meta1 = item1.meta;
+      const meta2 = item2.meta;
+      const mergedMeta = meta1 && meta2 && typeof meta1 === "object" && typeof meta2 === "object" ? __spreadValues(__spreadValues({}, meta1), meta2) : meta2 != null ? meta2 : meta1;
+      return __spreadProps(__spreadValues(__spreadValues({}, item1), item2), { meta: mergedMeta });
+    }
+    return item1;
+  });
 }
 
 // src/utils/index.ts

package/dist/utils/index.js

@@ -14,7 +14,7 @@ import {
   mergeObjectArrays,
   parseDateParts,
   parseInputDate
-} from "../chunk-QJZ3XHNH.js";
+} from "../chunk-HCHKYUNQ.js";
 import {
   formatCurrencyDisplay,
   formatDecimalValue,

package/package.json

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