@dmsi/wedgekit-react 0.0.162 → 0.0.163

package/dist/{chunk-SBSHZ327.js → chunk-O4JGGMFE.js}

@@ -1,6 +1,6 @@
 import {
   Menu
-} from "./chunk-RLK4TBXR.js";
+} from "./chunk-UBU6IJML.js";
 import {
   useSubMenuSystem
 } from "./chunk-5GUW4DUY.js";
@@ -323,7 +323,7 @@ function DataCellHeader(_a) {
                   children: "Filter"
                 })
               ),
-              !predeterminedPinned.current && header.column.getCanPin() && /* @__PURE__ */ jsxs(
+              !predeterminedPinned.current && header.column.getCanPin() && /* @__PURE__ */ jsx(
                 MenuOption,
                 __spreadProps(__spreadValues({
                   onClick: () => {
@@ -374,11 +374,7 @@ function DataCellHeader(_a) {
                       })
                     );
                   },
-                  children: [
-                    "Freeze [",
-                    header.column.columnDef.header,
-                    "]"
-                  ]
+                  children: `Freeze [${header.column.columnDef.header}]`
                 })
               )
             ]

package/dist/{chunk-RLK4TBXR.js → chunk-UBU6IJML.js}

@@ -40,7 +40,8 @@ var Menu = (_a) => {
     mobileHide,
     useDefaultMinWidth,
     autoFocusOff,
-    menuName
+    menuName,
+    calculateMinMaxHeight
   } = _b, props = __objRest(_b, [
     "id",
     "testid",
@@ -58,7 +59,8 @@ var Menu = (_a) => {
     "mobileHide",
     "useDefaultMinWidth",
     "autoFocusOff",
-    "menuName"
+    "menuName",
+    "calculateMinMaxHeight"
   ]);
   const internalRef = useRef(null);
   const actualRef = ref || internalRef;
@@ -75,8 +77,11 @@ var Menu = (_a) => {
     }
   );
   useEffect(() => {
+    if (calculateMinMaxHeight) {
+      return;
+    }
     const raf = requestAnimationFrame(() => {
-      if (!actualRef || !actualRef.current || customMaxHeight) {
+      if (!actualRef.current || customMaxHeight) {
         return;
       }
       if (actualRef.current.childElementCount > 4) {
@@ -94,7 +99,18 @@ var Menu = (_a) => {
     return () => {
       cancelAnimationFrame(raf);
     };
-  }, [actualRef, customMaxHeight]);
+  }, [actualRef.current, customMaxHeight, calculateMinMaxHeight]);
+  useEffect(() => {
+    if (!calculateMinMaxHeight) {
+      return;
+    }
+    if ((positionTo == null ? void 0 : positionTo.current) && actualRef.current) {
+      const positionToRect = positionTo.current.getBoundingClientRect();
+      const offsetInPx = 16;
+      const calculatedMaxHeight = window.innerHeight - positionToRect.bottom - offsetInPx;
+      setMaxHeight(`${calculatedMaxHeight}px`);
+    }
+  }, [actualRef.current, positionTo == null ? void 0 : positionTo.current, calculateMinMaxHeight]);
   useEffect(() => {
     if (!show) {
       return;

package/dist/components/DataGridCell.cjs

@@ -1228,7 +1228,8 @@ var Menu = (_a) => {
     mobileHide,
     useDefaultMinWidth,
     autoFocusOff,
-    menuName
+    menuName,
+    calculateMinMaxHeight
   } = _b, props = __objRest(_b, [
     "id",
     "testid",
@@ -1246,7 +1247,8 @@ var Menu = (_a) => {
     "mobileHide",
     "useDefaultMinWidth",
     "autoFocusOff",
-    "menuName"
+    "menuName",
+    "calculateMinMaxHeight"
   ]);
   const internalRef = (0, import_react8.useRef)(null);
   const actualRef = ref || internalRef;
@@ -1263,8 +1265,11 @@ var Menu = (_a) => {
     }
   );
   (0, import_react8.useEffect)(() => {
+    if (calculateMinMaxHeight) {
+      return;
+    }
     const raf = requestAnimationFrame(() => {
-      if (!actualRef || !actualRef.current || customMaxHeight) {
+      if (!actualRef.current || customMaxHeight) {
         return;
       }
       if (actualRef.current.childElementCount > 4) {
@@ -1282,7 +1287,18 @@ var Menu = (_a) => {
     return () => {
       cancelAnimationFrame(raf);
     };
-  }, [actualRef, customMaxHeight]);
+  }, [actualRef.current, customMaxHeight, calculateMinMaxHeight]);
+  (0, import_react8.useEffect)(() => {
+    if (!calculateMinMaxHeight) {
+      return;
+    }
+    if ((positionTo == null ? void 0 : positionTo.current) && actualRef.current) {
+      const positionToRect = positionTo.current.getBoundingClientRect();
+      const offsetInPx = 16;
+      const calculatedMaxHeight = window.innerHeight - positionToRect.bottom - offsetInPx;
+      setMaxHeight(`${calculatedMaxHeight}px`);
+    }
+  }, [actualRef.current, positionTo == null ? void 0 : positionTo.current, calculateMinMaxHeight]);
   (0, import_react8.useEffect)(() => {
     if (!show) {
       return;
@@ -1961,7 +1977,7 @@ function DataCellHeader(_a) {
                   children: "Filter"
                 })
               ),
-              !predeterminedPinned.current && header.column.getCanPin() && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              !predeterminedPinned.current && header.column.getCanPin() && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 MenuOption,
                 __spreadProps(__spreadValues({
                   onClick: () => {
@@ -2012,11 +2028,7 @@ function DataCellHeader(_a) {
                       })
                     );
                   },
-                  children: [
-                    "Freeze [",
-                    header.column.columnDef.header,
-                    "]"
-                  ]
+                  children: `Freeze [${header.column.columnDef.header}]`
                 })
               )
             ]

package/dist/components/DataGridCell.js

@@ -4,8 +4,8 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-SBSHZ327.js";
-import "../chunk-RLK4TBXR.js";
+} from "../chunk-O4JGGMFE.js";
+import "../chunk-UBU6IJML.js";
 import "../chunk-5GUW4DUY.js";
 import "../chunk-FFU6FB3K.js";
 import "../chunk-WNQ53SVY.js";

package/dist/components/Menu.cjs

@@ -221,7 +221,8 @@ var Menu = (_a) => {
     mobileHide,
     useDefaultMinWidth,
     autoFocusOff,
-    menuName
+    menuName,
+    calculateMinMaxHeight
   } = _b, props = __objRest(_b, [
     "id",
     "testid",
@@ -239,7 +240,8 @@ var Menu = (_a) => {
     "mobileHide",
     "useDefaultMinWidth",
     "autoFocusOff",
-    "menuName"
+    "menuName",
+    "calculateMinMaxHeight"
   ]);
   const internalRef = (0, import_react5.useRef)(null);
   const actualRef = ref || internalRef;
@@ -256,8 +258,11 @@ var Menu = (_a) => {
     }
   );
   (0, import_react5.useEffect)(() => {
+    if (calculateMinMaxHeight) {
+      return;
+    }
     const raf = requestAnimationFrame(() => {
-      if (!actualRef || !actualRef.current || customMaxHeight) {
+      if (!actualRef.current || customMaxHeight) {
         return;
       }
       if (actualRef.current.childElementCount > 4) {
@@ -275,7 +280,18 @@ var Menu = (_a) => {
     return () => {
       cancelAnimationFrame(raf);
     };
-  }, [actualRef, customMaxHeight]);
+  }, [actualRef.current, customMaxHeight, calculateMinMaxHeight]);
+  (0, import_react5.useEffect)(() => {
+    if (!calculateMinMaxHeight) {
+      return;
+    }
+    if ((positionTo == null ? void 0 : positionTo.current) && actualRef.current) {
+      const positionToRect = positionTo.current.getBoundingClientRect();
+      const offsetInPx = 16;
+      const calculatedMaxHeight = window.innerHeight - positionToRect.bottom - offsetInPx;
+      setMaxHeight(`${calculatedMaxHeight}px`);
+    }
+  }, [actualRef.current, positionTo == null ? void 0 : positionTo.current, calculateMinMaxHeight]);
   (0, import_react5.useEffect)(() => {
     if (!show) {
       return;

package/dist/components/Menu.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Menu
-} from "../chunk-RLK4TBXR.js";
+} from "../chunk-UBU6IJML.js";
 import "../chunk-5GUW4DUY.js";
 import "../chunk-WNQ53SVY.js";
 import "../chunk-6LN6QT6M.js";

package/dist/components/index.cjs

@@ -1270,7 +1270,8 @@ var Menu = (_a) => {
     mobileHide,
     useDefaultMinWidth,
     autoFocusOff,
-    menuName
+    menuName,
+    calculateMinMaxHeight
   } = _b, props = __objRest(_b, [
     "id",
     "testid",
@@ -1288,7 +1289,8 @@ var Menu = (_a) => {
     "mobileHide",
     "useDefaultMinWidth",
     "autoFocusOff",
-    "menuName"
+    "menuName",
+    "calculateMinMaxHeight"
   ]);
   const internalRef = (0, import_react8.useRef)(null);
   const actualRef = ref || internalRef;
@@ -1305,8 +1307,11 @@ var Menu = (_a) => {
     }
   );
   (0, import_react8.useEffect)(() => {
+    if (calculateMinMaxHeight) {
+      return;
+    }
     const raf = requestAnimationFrame(() => {
-      if (!actualRef || !actualRef.current || customMaxHeight) {
+      if (!actualRef.current || customMaxHeight) {
         return;
       }
       if (actualRef.current.childElementCount > 4) {
@@ -1324,7 +1329,18 @@ var Menu = (_a) => {
     return () => {
       cancelAnimationFrame(raf);
     };
-  }, [actualRef, customMaxHeight]);
+  }, [actualRef.current, customMaxHeight, calculateMinMaxHeight]);
+  (0, import_react8.useEffect)(() => {
+    if (!calculateMinMaxHeight) {
+      return;
+    }
+    if ((positionTo == null ? void 0 : positionTo.current) && actualRef.current) {
+      const positionToRect = positionTo.current.getBoundingClientRect();
+      const offsetInPx = 16;
+      const calculatedMaxHeight = window.innerHeight - positionToRect.bottom - offsetInPx;
+      setMaxHeight(`${calculatedMaxHeight}px`);
+    }
+  }, [actualRef.current, positionTo == null ? void 0 : positionTo.current, calculateMinMaxHeight]);
   (0, import_react8.useEffect)(() => {
     if (!show) {
       return;
@@ -2003,7 +2019,7 @@ function DataCellHeader(_a) {
                   children: "Filter"
                 })
               ),
-              !predeterminedPinned.current && header.column.getCanPin() && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              !predeterminedPinned.current && header.column.getCanPin() && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 MenuOption,
                 __spreadProps(__spreadValues({
                   onClick: () => {
@@ -2054,11 +2070,7 @@ function DataCellHeader(_a) {
                       })
                     );
                   },
-                  children: [
-                    "Freeze [",
-                    header.column.columnDef.header,
-                    "]"
-                  ]
+                  children: `Freeze [${header.column.columnDef.header}]`
                 })
               )
             ]
@@ -2632,6 +2644,7 @@ function ColumnSelectorHeaderCell({
             position: "bottom-right",
             show,
             setShow,
+            calculateMinMaxHeight: true,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 Button,

package/dist/components/index.js

@@ -12,10 +12,10 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-SBSHZ327.js";
+} from "../chunk-O4JGGMFE.js";
 import {
   Menu
-} from "../chunk-RLK4TBXR.js";
+} from "../chunk-UBU6IJML.js";
 import "../chunk-5GUW4DUY.js";
 import {
   MenuOption
@@ -560,6 +560,7 @@ function ColumnSelectorHeaderCell({
             position: "bottom-right",
             show,
             setShow,
+            calculateMinMaxHeight: true,
             children: [
               /* @__PURE__ */ jsx7(
                 Button,

package/package.json

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

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

@@ -43,6 +43,7 @@ export function ColumnSelectorHeaderCell<T>({
         position="bottom-right"
         show={show}
         setShow={setShow}
+        calculateMinMaxHeight
       >
         <Button
           id={id ? `${id}-reset-button` : undefined}

package/src/components/DataGridCell.tsx

@@ -405,7 +405,7 @@ export function DataCellHeader<T>({
                 </Menu>
               )}
             >
-              Freeze [{header.column.columnDef.header as string}]
+              {`Freeze [${header.column.columnDef.header as string}]`}
             </MenuOption>
           )}
         </Menu>

package/src/components/Menu.tsx

@@ -31,6 +31,7 @@ type MenuProps = {
   useDefaultMinWidth?: boolean;
   autoFocusOff?: boolean;
   menuName?: string;
+  calculateMinMaxHeight?: boolean;
 };
 
 export const Menu = ({
@@ -51,6 +52,7 @@ export const Menu = ({
   useDefaultMinWidth,
   autoFocusOff,
   menuName,
+  calculateMinMaxHeight,
   ...props
 }: ComponentProps<"div"> & MenuProps) => {
   const internalRef = useRef<HTMLDivElement>(null);
@@ -69,8 +71,12 @@ export const Menu = ({
   );
 
   useEffect(() => {
+    if (calculateMinMaxHeight) {
+      return;
+    }
+
     const raf = requestAnimationFrame(() => {
-      if (!actualRef || !actualRef.current || customMaxHeight) {
+      if (!actualRef.current || customMaxHeight) {
         return;
       }
 
@@ -85,15 +91,31 @@ export const Menu = ({
           accumulatedHeight += child.clientHeight;
         });
 
-        accumulatedHeight = (accumulatedHeight / 5) * 4.5;
+        accumulatedHeight = (accumulatedHeight / 5) * 4.5; // default max height is set to 4.5 times of the first 5 child height of the menu
 
         setMaxHeight(`${accumulatedHeight}px`);
       }
     });
+
     return () => {
       cancelAnimationFrame(raf);
     };
-  }, [actualRef, customMaxHeight]);
+  }, [actualRef.current, customMaxHeight, calculateMinMaxHeight]);
+
+  useEffect(() => {
+    if (!calculateMinMaxHeight) {
+      return;
+    }
+
+    if (positionTo?.current && actualRef.current) {
+      const positionToRect = positionTo.current.getBoundingClientRect();
+      const offsetInPx = 16;
+
+      const calculatedMaxHeight = window.innerHeight - positionToRect.bottom - offsetInPx;
+
+      setMaxHeight(`${calculatedMaxHeight}px`);
+    }
+  }, [actualRef.current, positionTo?.current, calculateMinMaxHeight])
 
   useEffect(() => {
     if (!show) {