@dmsi/wedgekit-react 0.0.461 → 0.0.462

package/dist/components/MobileDataGrid/index.cjs

@@ -954,6 +954,9 @@ function mergeObjectArrays(arr1, arr2) {
   );
 }
 
+// src/utils/index.ts
+var LocalStoragePrefixVersion = `dmsi-acc-v1.1`;
+
 // src/utils.ts
 function findDocumentRoot(element) {
   if (typeof window === "undefined" || typeof document === "undefined") {
@@ -979,7 +982,7 @@ function findDocumentRoot(element) {
 
 // src/hooks/useTableLayout.ts
 var import_react5 = require("react");
-var LocalStoragePrefix = `dmsi-acc-v1-tableLayout`;
+var LocalStoragePrefix = `${LocalStoragePrefixVersion}-tableLayout`;
 var getLocalStorageKeyWithPrefix = (key) => `${LocalStoragePrefix}__${key}`;
 function useTableLayout(initialColumns, key) {
   const [columns, setColumns] = (0, import_react5.useState)(initialColumns);
@@ -1555,15 +1558,37 @@ function useMenuPosition(elementRef, position = "bottom", options) {
       resizeObserver.observe(elementRef.current);
     }
     window.addEventListener("scroll", updatePosition);
+    const hideMenuWhenParentIsScrolled = () => {
+      var _a;
+      (_a = options == null ? void 0 : options.setIsOpen) == null ? void 0 : _a.call(options, false);
+    };
+    const scrollableAncestors = getScrollableAncestors(elementRef.current);
+    scrollableAncestors.forEach((ancestor) => ancestor.addEventListener("scroll", hideMenuWhenParentIsScrolled));
     window.addEventListener("resize", updatePosition);
     return () => {
       resizeObserver.disconnect();
       window.removeEventListener("scroll", updatePosition);
+      scrollableAncestors.forEach((ancestor) => ancestor.removeEventListener("scroll", hideMenuWhenParentIsScrolled));
       window.removeEventListener("resize", updatePosition);
     };
   }, [elementRef, updatePosition]);
   return { menuPosition, updatePosition };
 }
+function getScrollableAncestors(element) {
+  if (!element) {
+    return [];
+  }
+  const scrollables = [];
+  let parent = element.parentElement;
+  while (parent) {
+    const overflowY = window.getComputedStyle(parent).overflowY;
+    if (overflowY === "auto" || overflowY === "scroll") {
+      scrollables.push(parent);
+    }
+    parent = parent.parentElement;
+  }
+  return scrollables;
+}
 
 // src/components/Menu.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");

package/dist/components/MobileDataGrid/index.js

@@ -1,11 +1,11 @@
 import {
   MobileDataGrid
-} from "../../chunk-BYRLHNBP.js";
-import "../../chunk-UKSV4UHI.js";
+} from "../../chunk-GTPSPGSJ.js";
+import "../../chunk-OEMLNGE2.js";
 import "../../chunk-IT4VFU6T.js";
 import "../../chunk-M7INAUAJ.js";
-import "../../chunk-DNUBM26R.js";
-import "../../chunk-I363QX6Y.js";
+import "../../chunk-IG2YUDHI.js";
+import "../../chunk-DYBJUTGK.js";
 import "../../chunk-MBZ55T2D.js";
 import "../../chunk-2IKT6IHB.js";
 import "../../chunk-YCDDBSVU.js";
@@ -27,7 +27,7 @@ import "../../chunk-7BVUTFZ5.js";
 import "../../chunk-ETAEB3TA.js";
 import "../../chunk-HVNHTM3P.js";
 import "../../chunk-GRGDX7JC.js";
-import "../../chunk-KCUB3UWA.js";
+import "../../chunk-NIWXVOBW.js";
 import "../../chunk-4RJKB7LC.js";
 import "../../chunk-G7KIKHER.js";
 import "../../chunk-AG43RS4Q.js";
@@ -40,18 +40,18 @@ import "../../chunk-H2KC5XUY.js";
 import "../../chunk-QVWYTQKL.js";
 import "../../chunk-75USUR3I.js";
 import "../../chunk-WEAVZEE4.js";
-import "../../chunk-W53FKPJD.js";
-import "../../chunk-WX62IDZ5.js";
-import "../../chunk-22VBZWJG.js";
-import "../../chunk-NVOZAVEX.js";
-import "../../chunk-SOZRGIQW.js";
+import "../../chunk-OZBB6RFM.js";
+import "../../chunk-BFFNSUNS.js";
+import "../../chunk-TCMOGTPB.js";
+import "../../chunk-DVU5XV7L.js";
+import "../../chunk-IPAKWF2V.js";
 import "../../chunk-WVUIIBRR.js";
 import "../../chunk-RQRR4FEF.js";
 import "../../chunk-44TH3VC7.js";
 import "../../chunk-AL5QIRY3.js";
-import "../../chunk-MYKYZHEO.js";
+import "../../chunk-URYQ24NF.js";
 import "../../chunk-VXWSAIB5.js";
-import "../../chunk-TYTD4FLW.js";
+import "../../chunk-R3EQIDBX.js";
 import "../../chunk-5UH6QUFB.js";
 import "../../chunk-UCJUC5AZ.js";
 import "../../chunk-ZQSD74IJ.js";

package/dist/components/Modal.cjs

@@ -600,6 +600,9 @@ ModalScrim.displayName = "ModalScrim";
 // src/components/Modal.tsx
 var import_react_dom = require("react-dom");
 
+// src/utils/index.ts
+var LocalStoragePrefixVersion = `dmsi-acc-v1.1`;
+
 // src/utils.ts
 function findDocumentRoot(element) {
   if (typeof window === "undefined" || typeof document === "undefined") {
@@ -649,6 +652,7 @@ var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
 
 // src/hooks/useTableLayout.ts
 var import_react4 = require("react");
+var LocalStoragePrefix = `${LocalStoragePrefixVersion}-tableLayout`;
 
 // src/components/useMounted.tsx
 var import_react5 = require("react");

package/dist/components/Modal.js

@@ -1,16 +1,16 @@
 "use client";
 import {
   Modal
-} from "../chunk-KCUB3UWA.js";
+} from "../chunk-NIWXVOBW.js";
 import "../chunk-4RJKB7LC.js";
 import "../chunk-G7KIKHER.js";
 import "../chunk-AG43RS4Q.js";
 import "../chunk-ZQJMNPCF.js";
 import "../chunk-FG7GNGE3.js";
 import "../chunk-H2KC5XUY.js";
-import "../chunk-MYKYZHEO.js";
+import "../chunk-URYQ24NF.js";
 import "../chunk-VXWSAIB5.js";
-import "../chunk-TYTD4FLW.js";
+import "../chunk-R3EQIDBX.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-NKUETCDA.js";
 import "../chunk-LPY6PMAY.js";

package/dist/components/NestedMenu.cjs

@@ -385,8 +385,12 @@ var useMatchesMedia = (query) => {
 };
 var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
 
+// src/utils/index.ts
+var LocalStoragePrefixVersion = `dmsi-acc-v1.1`;
+
 // src/hooks/useTableLayout.ts
 var import_react4 = require("react");
+var LocalStoragePrefix = `${LocalStoragePrefixVersion}-tableLayout`;
 
 // src/components/MenuOption.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");

package/dist/components/NestedMenu.js

@@ -1,15 +1,15 @@
 "use client";
 import {
   MenuOption
-} from "../chunk-SOZRGIQW.js";
+} from "../chunk-IPAKWF2V.js";
 import {
   Label
 } from "../chunk-AL5QIRY3.js";
 import {
   useKeydown
-} from "../chunk-MYKYZHEO.js";
+} from "../chunk-URYQ24NF.js";
 import "../chunk-VXWSAIB5.js";
-import "../chunk-TYTD4FLW.js";
+import "../chunk-R3EQIDBX.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-ZSETMD4A.js";
 import {

package/dist/components/PDFViewer/index.cjs

@@ -603,6 +603,9 @@ ModalScrim.displayName = "ModalScrim";
 // src/components/Modal.tsx
 var import_react_dom = require("react-dom");
 
+// src/utils/index.ts
+var LocalStoragePrefixVersion = `dmsi-acc-v1.1`;
+
 // src/utils.ts
 function findDocumentRoot(element) {
   if (typeof window === "undefined" || typeof document === "undefined") {
@@ -652,6 +655,7 @@ var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
 
 // src/hooks/useTableLayout.ts
 var import_react4 = require("react");
+var LocalStoragePrefix = `${LocalStoragePrefixVersion}-tableLayout`;
 
 // src/components/useMounted.tsx
 var import_react5 = require("react");

package/dist/components/PDFViewer/index.js

@@ -1,12 +1,12 @@
 "use client";
 import {
   PDFViewer
-} from "../../chunk-DNUBM26R.js";
+} from "../../chunk-IG2YUDHI.js";
 import "../../chunk-JUFBGNWW.js";
 import "../../chunk-YNKN6RKF.js";
 import "../../chunk-VJVY6NPF.js";
 import "../../chunk-GTBGPBH6.js";
-import "../../chunk-KCUB3UWA.js";
+import "../../chunk-NIWXVOBW.js";
 import "../../chunk-4RJKB7LC.js";
 import "../../chunk-G7KIKHER.js";
 import "../../chunk-AG43RS4Q.js";
@@ -14,9 +14,9 @@ import "../../chunk-ZQJMNPCF.js";
 import "../../chunk-FG7GNGE3.js";
 import "../../chunk-SBRRNFOP.js";
 import "../../chunk-H2KC5XUY.js";
-import "../../chunk-MYKYZHEO.js";
+import "../../chunk-URYQ24NF.js";
 import "../../chunk-VXWSAIB5.js";
-import "../../chunk-TYTD4FLW.js";
+import "../../chunk-R3EQIDBX.js";
 import "../../chunk-5UH6QUFB.js";
 import "../../chunk-DORD2EBO.js";
 import "../../chunk-ZSETMD4A.js";

package/dist/components/ProductImagePreview/index.cjs

@@ -1113,8 +1113,12 @@ var useMatchesMedia = (query) => {
 };
 var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
 
+// src/utils/index.ts
+var LocalStoragePrefixVersion = `dmsi-acc-v1.1`;
+
 // src/hooks/useTableLayout.ts
 var import_react9 = require("react");
+var LocalStoragePrefix = `${LocalStoragePrefixVersion}-tableLayout`;
 
 // src/components/ProductImagePreview/useProductImagePreview.ts
 var import_react10 = require("react");

package/dist/components/ProductImagePreview/index.js

@@ -1,6 +1,6 @@
 import {
   ProductImagePreview
-} from "../../chunk-I363QX6Y.js";
+} from "../../chunk-DYBJUTGK.js";
 import "../../chunk-MBZ55T2D.js";
 import "../../chunk-2IKT6IHB.js";
 import "../../chunk-YCDDBSVU.js";
@@ -9,9 +9,9 @@ import "../../chunk-BQNPOGD5.js";
 import "../../chunk-AT4AWD6B.js";
 import "../../chunk-Y2GK27RX.js";
 import "../../chunk-QVWYTQKL.js";
-import "../../chunk-MYKYZHEO.js";
+import "../../chunk-URYQ24NF.js";
 import "../../chunk-VXWSAIB5.js";
-import "../../chunk-TYTD4FLW.js";
+import "../../chunk-R3EQIDBX.js";
 import "../../chunk-5UH6QUFB.js";
 import "../../chunk-DORD2EBO.js";
 import "../../chunk-IXR65MOU.js";

package/dist/components/ProjectBar.cjs

@@ -207,8 +207,12 @@ var useMatchesMedia = (query) => {
 };
 var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
 
+// src/utils/index.ts
+var LocalStoragePrefixVersion = `dmsi-acc-v1.1`;
+
 // src/hooks/useTableLayout.ts
 var import_react4 = require("react");
+var LocalStoragePrefix = `${LocalStoragePrefixVersion}-tableLayout`;
 
 // src/components/ProjectBar.tsx
 var import_jsx_runtime = require("react/jsx-runtime");

package/dist/components/ProjectBar.js

@@ -1,8 +1,8 @@
 import {
   useMatchesMobile
-} from "../chunk-MYKYZHEO.js";
+} from "../chunk-URYQ24NF.js";
 import "../chunk-VXWSAIB5.js";
-import "../chunk-TYTD4FLW.js";
+import "../chunk-R3EQIDBX.js";
 import "../chunk-5UH6QUFB.js";
 import {
   containerPaddingX,

package/dist/components/Time.js

@@ -5,7 +5,7 @@ import "../chunk-AL5QIRY3.js";
 import {
   findDocumentRoot
 } from "../chunk-VXWSAIB5.js";
-import "../chunk-TYTD4FLW.js";
+import "../chunk-R3EQIDBX.js";
 import "../chunk-5UH6QUFB.js";
 import {
   Stack

package/dist/components/index.cjs

@@ -555,6 +555,9 @@ function mergeObjectArrays(arr1, arr2) {
   );
 }
 
+// src/utils/index.ts
+var LocalStoragePrefixVersion = `dmsi-acc-v1.1`;
+
 // src/utils.ts
 function findDocumentRoot(element) {
   if (typeof window === "undefined" || typeof document === "undefined") {
@@ -580,7 +583,7 @@ function findDocumentRoot(element) {
 
 // src/hooks/useTableLayout.ts
 var import_react5 = require("react");
-var LocalStoragePrefix = `dmsi-acc-v1-tableLayout`;
+var LocalStoragePrefix = `${LocalStoragePrefixVersion}-tableLayout`;
 var getLocalStorageKeyWithPrefix = (key) => `${LocalStoragePrefix}__${key}`;
 function useTableLayout(initialColumns, key) {
   const [columns, setColumns] = (0, import_react5.useState)(initialColumns);
@@ -1156,15 +1159,37 @@ function useMenuPosition(elementRef, position = "bottom", options) {
       resizeObserver.observe(elementRef.current);
     }
     window.addEventListener("scroll", updatePosition);
+    const hideMenuWhenParentIsScrolled = () => {
+      var _a;
+      (_a = options == null ? void 0 : options.setIsOpen) == null ? void 0 : _a.call(options, false);
+    };
+    const scrollableAncestors = getScrollableAncestors(elementRef.current);
+    scrollableAncestors.forEach((ancestor) => ancestor.addEventListener("scroll", hideMenuWhenParentIsScrolled));
     window.addEventListener("resize", updatePosition);
     return () => {
       resizeObserver.disconnect();
       window.removeEventListener("scroll", updatePosition);
+      scrollableAncestors.forEach((ancestor) => ancestor.removeEventListener("scroll", hideMenuWhenParentIsScrolled));
       window.removeEventListener("resize", updatePosition);
     };
   }, [elementRef, updatePosition]);
   return { menuPosition, updatePosition };
 }
+function getScrollableAncestors(element) {
+  if (!element) {
+    return [];
+  }
+  const scrollables = [];
+  let parent = element.parentElement;
+  while (parent) {
+    const overflowY = window.getComputedStyle(parent).overflowY;
+    if (overflowY === "auto" || overflowY === "scroll") {
+      scrollables.push(parent);
+    }
+    parent = parent.parentElement;
+  }
+  return scrollables;
+}
 
 // src/components/Menu.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");

package/dist/components/index.js

@@ -1,16 +1,16 @@
 import {
   DataGrid,
   MobileDataGrid
-} from "../chunk-BYRLHNBP.js";
-import "../chunk-UKSV4UHI.js";
+} from "../chunk-GTPSPGSJ.js";
+import "../chunk-OEMLNGE2.js";
 import "../chunk-IT4VFU6T.js";
 import "../chunk-M7INAUAJ.js";
 import {
   PDFViewer
-} from "../chunk-DNUBM26R.js";
+} from "../chunk-IG2YUDHI.js";
 import {
   ProductImagePreview
-} from "../chunk-I363QX6Y.js";
+} from "../chunk-DYBJUTGK.js";
 import "../chunk-MBZ55T2D.js";
 import "../chunk-2IKT6IHB.js";
 import "../chunk-YCDDBSVU.js";
@@ -42,7 +42,7 @@ import {
 import {
   Pagination
 } from "../chunk-GRGDX7JC.js";
-import "../chunk-KCUB3UWA.js";
+import "../chunk-NIWXVOBW.js";
 import "../chunk-4RJKB7LC.js";
 import "../chunk-G7KIKHER.js";
 import "../chunk-AG43RS4Q.js";
@@ -63,20 +63,20 @@ import {
 } from "../chunk-WEAVZEE4.js";
 import {
   CompactImagesPreview
-} from "../chunk-W53FKPJD.js";
+} from "../chunk-OZBB6RFM.js";
 import {
   DataCellHeader,
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-WX62IDZ5.js";
+} from "../chunk-BFFNSUNS.js";
 import {
   Menu
-} from "../chunk-22VBZWJG.js";
-import "../chunk-NVOZAVEX.js";
+} from "../chunk-TCMOGTPB.js";
+import "../chunk-DVU5XV7L.js";
 import {
   MenuOption
-} from "../chunk-SOZRGIQW.js";
+} from "../chunk-IPAKWF2V.js";
 import "../chunk-WVUIIBRR.js";
 import {
   Search
@@ -87,9 +87,9 @@ import {
 import {
   Label
 } from "../chunk-AL5QIRY3.js";
-import "../chunk-MYKYZHEO.js";
+import "../chunk-URYQ24NF.js";
 import "../chunk-VXWSAIB5.js";
-import "../chunk-TYTD4FLW.js";
+import "../chunk-R3EQIDBX.js";
 import "../chunk-5UH6QUFB.js";
 import {
   Subheader

package/dist/components/useMenuSystem.cjs

@@ -62,8 +62,12 @@ var useMatchesMedia = (query) => {
 };
 var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
 
+// src/utils/index.ts
+var LocalStoragePrefixVersion = `dmsi-acc-v1.1`;
+
 // src/hooks/useTableLayout.ts
 var import_react4 = require("react");
+var LocalStoragePrefix = `${LocalStoragePrefixVersion}-tableLayout`;
 
 // src/components/useMenuSystem.tsx
 function useSubMenuSystem(mobilePositionTo) {
@@ -394,15 +398,37 @@ function useMenuPosition(elementRef, position = "bottom", options) {
       resizeObserver.observe(elementRef.current);
     }
     window.addEventListener("scroll", updatePosition);
+    const hideMenuWhenParentIsScrolled = () => {
+      var _a;
+      (_a = options == null ? void 0 : options.setIsOpen) == null ? void 0 : _a.call(options, false);
+    };
+    const scrollableAncestors = getScrollableAncestors(elementRef.current);
+    scrollableAncestors.forEach((ancestor) => ancestor.addEventListener("scroll", hideMenuWhenParentIsScrolled));
     window.addEventListener("resize", updatePosition);
     return () => {
       resizeObserver.disconnect();
       window.removeEventListener("scroll", updatePosition);
+      scrollableAncestors.forEach((ancestor) => ancestor.removeEventListener("scroll", hideMenuWhenParentIsScrolled));
       window.removeEventListener("resize", updatePosition);
     };
   }, [elementRef, updatePosition]);
   return { menuPosition, updatePosition };
 }
+function getScrollableAncestors(element) {
+  if (!element) {
+    return [];
+  }
+  const scrollables = [];
+  let parent = element.parentElement;
+  while (parent) {
+    const overflowY = window.getComputedStyle(parent).overflowY;
+    if (overflowY === "auto" || overflowY === "scroll") {
+      scrollables.push(parent);
+    }
+    parent = parent.parentElement;
+  }
+  return scrollables;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   useMenuPosition,

package/dist/components/useMenuSystem.js

@@ -2,10 +2,10 @@
 import {
   useMenuPosition,
   useSubMenuSystem
-} from "../chunk-NVOZAVEX.js";
-import "../chunk-MYKYZHEO.js";
+} from "../chunk-DVU5XV7L.js";
+import "../chunk-URYQ24NF.js";
 import "../chunk-VXWSAIB5.js";
-import "../chunk-TYTD4FLW.js";
+import "../chunk-R3EQIDBX.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/hooks/index.cjs

@@ -124,9 +124,12 @@ function mergeObjectArrays(arr1, arr2) {
   );
 }
 
+// src/utils/index.ts
+var LocalStoragePrefixVersion = `dmsi-acc-v1.1`;
+
 // src/hooks/useTableLayout.ts
 var import_react4 = require("react");
-var LocalStoragePrefix = `dmsi-acc-v1-tableLayout`;
+var LocalStoragePrefix = `${LocalStoragePrefixVersion}-tableLayout`;
 var getLocalStorageKeyWithPrefix = (key) => `${LocalStoragePrefix}__${key}`;
 function useTableLayout(initialColumns, key) {
   const [columns, setColumns] = (0, import_react4.useState)(initialColumns);

package/dist/hooks/index.js

@@ -4,9 +4,9 @@ import {
   useMatchesMedia,
   useMatchesMobile,
   useTableLayout
-} from "../chunk-MYKYZHEO.js";
+} from "../chunk-URYQ24NF.js";
 import "../chunk-VXWSAIB5.js";
-import "../chunk-TYTD4FLW.js";
+import "../chunk-R3EQIDBX.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/utils/index.cjs

@@ -34,6 +34,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/utils/index.ts
 var utils_exports = {};
 __export(utils_exports, {
+  LocalStoragePrefixVersion: () => LocalStoragePrefixVersion,
   calculateCursorPosition: () => calculateCursorPosition,
   countDigitsUpToCursor: () => countDigitsUpToCursor,
   findPositionAfterDigitCount: () => findPositionAfterDigitCount,
@@ -221,8 +222,12 @@ function mergeObjectArrays(arr1, arr2) {
     (_, i) => __spreadValues(__spreadValues({}, arr1[i] || {}), arr2[i] || {})
   );
 }
+
+// src/utils/index.ts
+var LocalStoragePrefixVersion = `dmsi-acc-v1.1`;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  LocalStoragePrefixVersion,
   calculateCursorPosition,
   countDigitsUpToCursor,
   findPositionAfterDigitCount,

package/dist/utils/index.js

@@ -1,4 +1,5 @@
 import {
+  LocalStoragePrefixVersion,
   calculateCursorPosition,
   countDigitsUpToCursor,
   findPositionAfterDigitCount,
@@ -13,7 +14,7 @@ import {
   mergeObjectArrays,
   parseDateParts,
   parseInputDate
-} from "../chunk-TYTD4FLW.js";
+} from "../chunk-R3EQIDBX.js";
 import {
   formatCurrencyDisplay,
   formatDecimalValue,
@@ -21,6 +22,7 @@ import {
 } from "../chunk-5UH6QUFB.js";
 import "../chunk-ORMEWXMH.js";
 export {
+  LocalStoragePrefixVersion,
   calculateCursorPosition,
   countDigitsUpToCursor,
   findPositionAfterDigitCount,

package/package.json

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

package/src/components/useMenuSystem.tsx

@@ -416,14 +416,41 @@ export function useMenuPosition(
     }
 
     window.addEventListener("scroll", updatePosition);
+
+    const hideMenuWhenParentIsScrolled = () => {
+      options?.setIsOpen?.(false);
+    }
+    const scrollableAncestors = getScrollableAncestors(elementRef.current);
+    scrollableAncestors.forEach(ancestor => ancestor.addEventListener("scroll", hideMenuWhenParentIsScrolled));
+
     window.addEventListener("resize", updatePosition);
 
     return () => {
       resizeObserver.disconnect();
       window.removeEventListener("scroll", updatePosition);
+      scrollableAncestors.forEach(ancestor => ancestor.removeEventListener("scroll", hideMenuWhenParentIsScrolled))
       window.removeEventListener("resize", updatePosition);
     };
   }, [elementRef, updatePosition]);
 
   return { menuPosition, updatePosition };
 }
+
+function getScrollableAncestors(element: HTMLElement | null): HTMLElement[] {
+  if (!element) {
+    return []
+  }
+
+  const scrollables: HTMLElement[] = [];
+  let parent = element.parentElement;
+
+  while (parent) {
+    const overflowY = window.getComputedStyle(parent).overflowY;
+    if (overflowY === 'auto' || overflowY === 'scroll') {
+      scrollables.push(parent);
+    }
+    parent = parent.parentElement;
+  }
+
+  return scrollables;
+}

package/src/hooks/useTableLayout.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { mergeObjectArrays } from "../utils";
+import { LocalStoragePrefixVersion, mergeObjectArrays } from "../utils";
 import { ColumnDef } from "@dmsi/wedgekit-react/components";
 import {
   useState,
@@ -18,7 +18,7 @@ export type PersistedTableLayout<T> = {
 
 // Change prefix to refresh client table layout.
 // It's probably better to discuss about a better key strategy in the future.
-const LocalStoragePrefix = `dmsi-acc-v1-tableLayout`;
+const LocalStoragePrefix = `${LocalStoragePrefixVersion}-tableLayout`;
 
 const getLocalStorageKeyWithPrefix = (key: string) =>
   `${LocalStoragePrefix}__${key}`;

package/src/utils/index.ts

@@ -1,3 +1,4 @@
 export * from "./formatting";
 export * from "./date";
 export { mergeObjectArrays } from "./mergeObjectArrays";
+export const LocalStoragePrefixVersion = `dmsi-acc-v1.1`;