@dmsi/wedgekit-react 0.0.185 → 0.0.187

package/dist/{chunk-5GUW4DUY.js → chunk-AEDQLVKH.js}

@@ -19,6 +19,10 @@ function useSubMenuSystem(mobilePositionTo) {
   const subMenuRefs = useRef({});
   const hoverTimeoutRef = useRef(null);
   const closeTimeoutRef = useRef(null);
+  const mouseStopTimeoutRef = useRef(null);
+  const isMouseMovingRef = useRef(false);
+  const pendingOpenActionRef = useRef(null);
+  const pendingCloseActionRef = useRef(null);
   const isMobile = useMatchesMobile();
   const toggleMenu = (menuId, level) => {
     if (closeTimeoutRef.current) {
@@ -58,36 +62,67 @@ function useSubMenuSystem(mobilePositionTo) {
       return newActiveMenus;
     });
   };
+  const executePendingActions = useCallback(() => {
+    if (pendingCloseActionRef.current) {
+      pendingCloseActionRef.current();
+      pendingCloseActionRef.current = null;
+    }
+    if (pendingOpenActionRef.current) {
+      pendingOpenActionRef.current();
+      pendingOpenActionRef.current = null;
+    }
+  }, []);
   const openMenuWithDelay = (menuId, level, delay = 150) => {
     if (isMobile) {
       return;
     }
-    if (hoverTimeoutRef.current) {
-      clearTimeout(hoverTimeoutRef.current);
+    pendingOpenActionRef.current = () => {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+      }
+      hoverTimeoutRef.current = setTimeout(() => {
+        openMenu(menuId, level);
+      }, delay);
+    };
+    if (!isMouseMovingRef.current) {
+      executePendingActions();
     }
-    hoverTimeoutRef.current = setTimeout(() => {
-      openMenu(menuId, level);
-    }, delay);
   };
   const closeMenuWithDelay = (level, delay = 500) => {
     if (isMobile) {
       return;
     }
-    if (hoverTimeoutRef.current) {
-      clearTimeout(hoverTimeoutRef.current);
-      hoverTimeoutRef.current = null;
+    pendingCloseActionRef.current = () => {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+        hoverTimeoutRef.current = null;
+      }
+      closeTimeoutRef.current = setTimeout(() => {
+        closeSubMenuLevel(level);
+      }, delay);
+    };
+    if (!isMouseMovingRef.current) {
+      executePendingActions();
+    }
+  };
+  const handleMouseMove = () => {
+    isMouseMovingRef.current = true;
+    if (mouseStopTimeoutRef.current) {
+      clearTimeout(mouseStopTimeoutRef.current);
     }
-    closeTimeoutRef.current = setTimeout(() => {
-      closeSubMenuLevel(level);
-    }, delay);
+    mouseStopTimeoutRef.current = setTimeout(() => {
+      isMouseMovingRef.current = false;
+      executePendingActions();
+    }, 200);
   };
   const cancelCloseTimeout = () => {
     if (isMobile) {
       return;
     }
-    if (closeTimeoutRef.current) {
-      clearTimeout(closeTimeoutRef.current);
-      closeTimeoutRef.current = null;
+    if (mouseStopTimeoutRef.current) {
+      clearTimeout(mouseStopTimeoutRef.current);
+      mouseStopTimeoutRef.current = null;
+      isMouseMovingRef.current = false;
     }
   };
   const closeSubMenuLevel = (level) => {
@@ -203,6 +238,7 @@ function useSubMenuSystem(mobilePositionTo) {
       onSubMenuHover: openMenuWithDelay,
       onSubMenuLeave: closeMenuWithDelay,
       onSubMenuEnter: cancelCloseTimeout,
+      onMouseMove: handleMouseMove,
       toggleMenu,
       mobilePositionTo,
       activeMenu,
@@ -217,9 +253,9 @@ function useMenuPosition(elementRef, position = "bottom", options) {
     left: 0,
     minWidth: 0
   });
-  const isMobile = useMatchesMobile();
+  const isMobile = options == null ? void 0 : options.isMobile;
   const updatePosition = useCallback(() => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    var _a, _b, _c;
     if (!(elementRef == null ? void 0 : elementRef.current)) return;
     const triggerRect = elementRef.current.getBoundingClientRect();
     const menuRect = (_b = (_a = options == null ? void 0 : options.menuRef) == null ? void 0 : _a.current) == null ? void 0 : _b.getBoundingClientRect();
@@ -238,15 +274,27 @@ function useMenuPosition(elementRef, position = "bottom", options) {
     } else if (position === "bottom-right") {
       left = triggerRect.right + window.scrollX - menuWidth;
     } else if (position === "right") {
-      left = triggerRect.right + window.scrollX;
+      if (isMobile) {
+        left = triggerRect.left + window.scrollX;
+      } else {
+        left = triggerRect.right + window.scrollX;
+      }
+    }
+    const overflowsRightViewport = left + menuWidth > viewportWidth;
+    if (overflowsRightViewport) {
+      const newLeft = triggerRect.left - menuWidth;
+      const overflowsLeftViewport = newLeft < 0;
+      if (overflowsLeftViewport) {
+        left = (viewportWidth - menuWidth) / 2;
+      } else {
+        left = newLeft;
+      }
     }
-    const overflowsLeftViewport = left + menuWidth > viewportWidth;
-    if (overflowsLeftViewport) {
-      left = triggerRect.left - menuWidth;
+    if (isMobile && position === "right") {
+      top = triggerRect.top + triggerRect.height + topOffset;
     }
-    if (isMobile) {
-      left = triggerRect.left + menuWidth > viewportWidth ? Math.max(viewportWidth - menuWidth, 0) - 8 : triggerRect.left;
-      top = ((_f = (_e = (_d = elementRef.current.parentElement) == null ? void 0 : _d.getBoundingClientRect()) == null ? void 0 : _e.top) != null ? _f : 0) + ((_i = (_h = (_g = elementRef.current.parentElement) == null ? void 0 : _g.getBoundingClientRect()) == null ? void 0 : _h.height) != null ? _i : 0) + topOffset;
+    if (isMobile && menuWidth > viewportWidth) {
+      left = 0;
     }
     setMenuPosition({
       top,

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

@@ -1,6 +1,6 @@
 import {
   useMenuPosition
-} from "./chunk-5GUW4DUY.js";
+} from "./chunk-AEDQLVKH.js";
 import {
   useMatchesMobile
 } from "./chunk-WNQ53SVY.js";
@@ -73,7 +73,8 @@ var Menu = (_a) => {
       isOpen: show,
       setIsOpen: setShow,
       menuRef: internalRef,
-      topOffset
+      topOffset,
+      isMobile: !!(isMobile && mobilePositionTo)
     }
   );
   useEffect(() => {
@@ -146,6 +147,7 @@ var Menu = (_a) => {
           "shadow-4 rounded-base bg-background-grouped-primary-normal overflow-x-hidden overflow-y-auto flex flex-col outline-0",
           "fixed",
           "z-50",
+          "max-w-screen",
           mobileHide && "opacity-0 pointer-events-none",
           className
         )

package/dist/{chunk-FFU6FB3K.js → chunk-OZKCUKBS.js}

@@ -47,7 +47,8 @@ var MenuOption = ({
   activeMenu,
   mobilePositionTo,
   highlightMatchingText = false,
-  menuValue
+  menuValue,
+  onMouseMove
 }) => {
   const uniqueId = useId();
   const internalRef = useRef(null);
@@ -64,6 +65,11 @@ var MenuOption = ({
       onSubMenuLeave(subMenuLevel);
     }
   };
+  const handleMouseMove = () => {
+    if (subMenu && onMouseMove && !disabled) {
+      onMouseMove();
+    }
+  };
   const handleSubMenuEnter = () => {
     if (onSubMenuEnter) {
       onSubMenuEnter();
@@ -122,7 +128,8 @@ var MenuOption = ({
           }
         },
         onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave
+        onMouseLeave: handleMouseLeave,
+        onMouseMove: handleMouseMove
       }, additionalAttributes), {
         tabIndex: -1,
         role: "menuitem",

package/dist/{chunk-Z2KZO4J3.js → chunk-SDQPZQTI.js}

@@ -1,12 +1,12 @@
 import {
   Menu
-} from "./chunk-UBU6IJML.js";
+} from "./chunk-ESTHTAR5.js";
 import {
   useSubMenuSystem
-} from "./chunk-5GUW4DUY.js";
+} from "./chunk-AEDQLVKH.js";
 import {
   MenuOption
-} from "./chunk-FFU6FB3K.js";
+} from "./chunk-OZKCUKBS.js";
 import {
   Search
 } from "./chunk-PMBEIP24.js";

package/dist/components/DataGridCell.cjs

@@ -907,6 +907,10 @@ function useSubMenuSystem(mobilePositionTo) {
   const subMenuRefs = (0, import_react7.useRef)({});
   const hoverTimeoutRef = (0, import_react7.useRef)(null);
   const closeTimeoutRef = (0, import_react7.useRef)(null);
+  const mouseStopTimeoutRef = (0, import_react7.useRef)(null);
+  const isMouseMovingRef = (0, import_react7.useRef)(false);
+  const pendingOpenActionRef = (0, import_react7.useRef)(null);
+  const pendingCloseActionRef = (0, import_react7.useRef)(null);
   const isMobile = useMatchesMobile();
   const toggleMenu = (menuId, level) => {
     if (closeTimeoutRef.current) {
@@ -946,36 +950,67 @@ function useSubMenuSystem(mobilePositionTo) {
       return newActiveMenus;
     });
   };
+  const executePendingActions = (0, import_react7.useCallback)(() => {
+    if (pendingCloseActionRef.current) {
+      pendingCloseActionRef.current();
+      pendingCloseActionRef.current = null;
+    }
+    if (pendingOpenActionRef.current) {
+      pendingOpenActionRef.current();
+      pendingOpenActionRef.current = null;
+    }
+  }, []);
   const openMenuWithDelay = (menuId, level, delay = 150) => {
     if (isMobile) {
       return;
     }
-    if (hoverTimeoutRef.current) {
-      clearTimeout(hoverTimeoutRef.current);
+    pendingOpenActionRef.current = () => {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+      }
+      hoverTimeoutRef.current = setTimeout(() => {
+        openMenu(menuId, level);
+      }, delay);
+    };
+    if (!isMouseMovingRef.current) {
+      executePendingActions();
     }
-    hoverTimeoutRef.current = setTimeout(() => {
-      openMenu(menuId, level);
-    }, delay);
   };
   const closeMenuWithDelay = (level, delay = 500) => {
     if (isMobile) {
       return;
     }
-    if (hoverTimeoutRef.current) {
-      clearTimeout(hoverTimeoutRef.current);
-      hoverTimeoutRef.current = null;
+    pendingCloseActionRef.current = () => {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+        hoverTimeoutRef.current = null;
+      }
+      closeTimeoutRef.current = setTimeout(() => {
+        closeSubMenuLevel(level);
+      }, delay);
+    };
+    if (!isMouseMovingRef.current) {
+      executePendingActions();
     }
-    closeTimeoutRef.current = setTimeout(() => {
-      closeSubMenuLevel(level);
-    }, delay);
+  };
+  const handleMouseMove = () => {
+    isMouseMovingRef.current = true;
+    if (mouseStopTimeoutRef.current) {
+      clearTimeout(mouseStopTimeoutRef.current);
+    }
+    mouseStopTimeoutRef.current = setTimeout(() => {
+      isMouseMovingRef.current = false;
+      executePendingActions();
+    }, 200);
   };
   const cancelCloseTimeout = () => {
     if (isMobile) {
       return;
     }
-    if (closeTimeoutRef.current) {
-      clearTimeout(closeTimeoutRef.current);
-      closeTimeoutRef.current = null;
+    if (mouseStopTimeoutRef.current) {
+      clearTimeout(mouseStopTimeoutRef.current);
+      mouseStopTimeoutRef.current = null;
+      isMouseMovingRef.current = false;
     }
   };
   const closeSubMenuLevel = (level) => {
@@ -1091,6 +1126,7 @@ function useSubMenuSystem(mobilePositionTo) {
       onSubMenuHover: openMenuWithDelay,
       onSubMenuLeave: closeMenuWithDelay,
       onSubMenuEnter: cancelCloseTimeout,
+      onMouseMove: handleMouseMove,
       toggleMenu,
       mobilePositionTo,
       activeMenu,
@@ -1105,9 +1141,9 @@ function useMenuPosition(elementRef, position = "bottom", options) {
     left: 0,
     minWidth: 0
   });
-  const isMobile = useMatchesMobile();
+  const isMobile = options == null ? void 0 : options.isMobile;
   const updatePosition = (0, import_react7.useCallback)(() => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    var _a, _b, _c;
     if (!(elementRef == null ? void 0 : elementRef.current)) return;
     const triggerRect = elementRef.current.getBoundingClientRect();
     const menuRect = (_b = (_a = options == null ? void 0 : options.menuRef) == null ? void 0 : _a.current) == null ? void 0 : _b.getBoundingClientRect();
@@ -1126,15 +1162,27 @@ function useMenuPosition(elementRef, position = "bottom", options) {
     } else if (position === "bottom-right") {
       left = triggerRect.right + window.scrollX - menuWidth;
     } else if (position === "right") {
-      left = triggerRect.right + window.scrollX;
+      if (isMobile) {
+        left = triggerRect.left + window.scrollX;
+      } else {
+        left = triggerRect.right + window.scrollX;
+      }
+    }
+    const overflowsRightViewport = left + menuWidth > viewportWidth;
+    if (overflowsRightViewport) {
+      const newLeft = triggerRect.left - menuWidth;
+      const overflowsLeftViewport = newLeft < 0;
+      if (overflowsLeftViewport) {
+        left = (viewportWidth - menuWidth) / 2;
+      } else {
+        left = newLeft;
+      }
     }
-    const overflowsLeftViewport = left + menuWidth > viewportWidth;
-    if (overflowsLeftViewport) {
-      left = triggerRect.left - menuWidth;
+    if (isMobile && position === "right") {
+      top = triggerRect.top + triggerRect.height + topOffset;
     }
-    if (isMobile) {
-      left = triggerRect.left + menuWidth > viewportWidth ? Math.max(viewportWidth - menuWidth, 0) - 8 : triggerRect.left;
-      top = ((_f = (_e = (_d = elementRef.current.parentElement) == null ? void 0 : _d.getBoundingClientRect()) == null ? void 0 : _e.top) != null ? _f : 0) + ((_i = (_h = (_g = elementRef.current.parentElement) == null ? void 0 : _g.getBoundingClientRect()) == null ? void 0 : _h.height) != null ? _i : 0) + topOffset;
+    if (isMobile && menuWidth > viewportWidth) {
+      left = 0;
     }
     setMenuPosition({
       top,
@@ -1261,7 +1309,8 @@ var Menu = (_a) => {
       isOpen: show,
       setIsOpen: setShow,
       menuRef: internalRef,
-      topOffset
+      topOffset,
+      isMobile: !!(isMobile && mobilePositionTo)
     }
   );
   (0, import_react8.useEffect)(() => {
@@ -1334,6 +1383,7 @@ var Menu = (_a) => {
           "shadow-4 rounded-base bg-background-grouped-primary-normal overflow-x-hidden overflow-y-auto flex flex-col outline-0",
           "fixed",
           "z-50",
+          "max-w-screen",
           mobileHide && "opacity-0 pointer-events-none",
           className
         )
@@ -1540,7 +1590,8 @@ var MenuOption = ({
   activeMenu,
   mobilePositionTo,
   highlightMatchingText = false,
-  menuValue
+  menuValue,
+  onMouseMove
 }) => {
   const uniqueId = (0, import_react9.useId)();
   const internalRef = (0, import_react9.useRef)(null);
@@ -1557,6 +1608,11 @@ var MenuOption = ({
       onSubMenuLeave(subMenuLevel);
     }
   };
+  const handleMouseMove = () => {
+    if (subMenu && onMouseMove && !disabled) {
+      onMouseMove();
+    }
+  };
   const handleSubMenuEnter = () => {
     if (onSubMenuEnter) {
       onSubMenuEnter();
@@ -1615,7 +1671,8 @@ var MenuOption = ({
           }
         },
         onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave
+        onMouseLeave: handleMouseLeave,
+        onMouseMove: handleMouseMove
       }, additionalAttributes), {
         tabIndex: -1,
         role: "menuitem",

package/dist/components/DataGridCell.js

@@ -4,10 +4,10 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-Z2KZO4J3.js";
-import "../chunk-UBU6IJML.js";
-import "../chunk-5GUW4DUY.js";
-import "../chunk-FFU6FB3K.js";
+} from "../chunk-SDQPZQTI.js";
+import "../chunk-ESTHTAR5.js";
+import "../chunk-AEDQLVKH.js";
+import "../chunk-OZKCUKBS.js";
 import "../chunk-WNQ53SVY.js";
 import "../chunk-6LN6QT6M.js";
 import "../chunk-PMBEIP24.js";

package/dist/components/Menu.cjs

@@ -98,9 +98,9 @@ function useMenuPosition(elementRef, position = "bottom", options) {
     left: 0,
     minWidth: 0
   });
-  const isMobile = useMatchesMobile();
+  const isMobile = options == null ? void 0 : options.isMobile;
   const updatePosition = (0, import_react4.useCallback)(() => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    var _a, _b, _c;
     if (!(elementRef == null ? void 0 : elementRef.current)) return;
     const triggerRect = elementRef.current.getBoundingClientRect();
     const menuRect = (_b = (_a = options == null ? void 0 : options.menuRef) == null ? void 0 : _a.current) == null ? void 0 : _b.getBoundingClientRect();
@@ -119,15 +119,27 @@ function useMenuPosition(elementRef, position = "bottom", options) {
     } else if (position === "bottom-right") {
       left = triggerRect.right + window.scrollX - menuWidth;
     } else if (position === "right") {
-      left = triggerRect.right + window.scrollX;
+      if (isMobile) {
+        left = triggerRect.left + window.scrollX;
+      } else {
+        left = triggerRect.right + window.scrollX;
+      }
     }
-    const overflowsLeftViewport = left + menuWidth > viewportWidth;
-    if (overflowsLeftViewport) {
-      left = triggerRect.left - menuWidth;
+    const overflowsRightViewport = left + menuWidth > viewportWidth;
+    if (overflowsRightViewport) {
+      const newLeft = triggerRect.left - menuWidth;
+      const overflowsLeftViewport = newLeft < 0;
+      if (overflowsLeftViewport) {
+        left = (viewportWidth - menuWidth) / 2;
+      } else {
+        left = newLeft;
+      }
+    }
+    if (isMobile && position === "right") {
+      top = triggerRect.top + triggerRect.height + topOffset;
     }
-    if (isMobile) {
-      left = triggerRect.left + menuWidth > viewportWidth ? Math.max(viewportWidth - menuWidth, 0) - 8 : triggerRect.left;
-      top = ((_f = (_e = (_d = elementRef.current.parentElement) == null ? void 0 : _d.getBoundingClientRect()) == null ? void 0 : _e.top) != null ? _f : 0) + ((_i = (_h = (_g = elementRef.current.parentElement) == null ? void 0 : _g.getBoundingClientRect()) == null ? void 0 : _h.height) != null ? _i : 0) + topOffset;
+    if (isMobile && menuWidth > viewportWidth) {
+      left = 0;
     }
     setMenuPosition({
       top,
@@ -254,7 +266,8 @@ var Menu = (_a) => {
       isOpen: show,
       setIsOpen: setShow,
       menuRef: internalRef,
-      topOffset
+      topOffset,
+      isMobile: !!(isMobile && mobilePositionTo)
     }
   );
   (0, import_react5.useEffect)(() => {
@@ -327,6 +340,7 @@ var Menu = (_a) => {
           "shadow-4 rounded-base bg-background-grouped-primary-normal overflow-x-hidden overflow-y-auto flex flex-col outline-0",
           "fixed",
           "z-50",
+          "max-w-screen",
           mobileHide && "opacity-0 pointer-events-none",
           className
         )

package/dist/components/Menu.js

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

package/dist/components/MenuOption.cjs

@@ -370,7 +370,8 @@ var MenuOption = ({
   activeMenu,
   mobilePositionTo,
   highlightMatchingText = false,
-  menuValue
+  menuValue,
+  onMouseMove
 }) => {
   const uniqueId = (0, import_react4.useId)();
   const internalRef = (0, import_react4.useRef)(null);
@@ -387,6 +388,11 @@ var MenuOption = ({
       onSubMenuLeave(subMenuLevel);
     }
   };
+  const handleMouseMove = () => {
+    if (subMenu && onMouseMove && !disabled) {
+      onMouseMove();
+    }
+  };
   const handleSubMenuEnter = () => {
     if (onSubMenuEnter) {
       onSubMenuEnter();
@@ -445,7 +451,8 @@ var MenuOption = ({
           }
         },
         onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave
+        onMouseLeave: handleMouseLeave,
+        onMouseMove: handleMouseMove
       }, additionalAttributes), {
         tabIndex: -1,
         role: "menuitem",

package/dist/components/MenuOption.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   MenuOption
-} from "../chunk-FFU6FB3K.js";
+} from "../chunk-OZKCUKBS.js";
 import "../chunk-WNQ53SVY.js";
 import "../chunk-JWCT72WR.js";
 import "../chunk-HVI3CL7Y.js";

package/dist/components/NestedMenu.cjs

@@ -399,7 +399,8 @@ var MenuOption = ({
   activeMenu,
   mobilePositionTo,
   highlightMatchingText = false,
-  menuValue
+  menuValue,
+  onMouseMove
 }) => {
   const uniqueId = (0, import_react4.useId)();
   const internalRef = (0, import_react4.useRef)(null);
@@ -416,6 +417,11 @@ var MenuOption = ({
       onSubMenuLeave(subMenuLevel);
     }
   };
+  const handleMouseMove = () => {
+    if (subMenu && onMouseMove && !disabled) {
+      onMouseMove();
+    }
+  };
   const handleSubMenuEnter = () => {
     if (onSubMenuEnter) {
       onSubMenuEnter();
@@ -474,7 +480,8 @@ var MenuOption = ({
           }
         },
         onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave
+        onMouseLeave: handleMouseLeave,
+        onMouseMove: handleMouseMove
       }, additionalAttributes), {
         tabIndex: -1,
         role: "menuitem",

package/dist/components/NestedMenu.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   MenuOption
-} from "../chunk-FFU6FB3K.js";
+} from "../chunk-OZKCUKBS.js";
 import {
   useKeydown
 } from "../chunk-WNQ53SVY.js";

package/dist/components/index.cjs

@@ -949,6 +949,10 @@ function useSubMenuSystem(mobilePositionTo) {
   const subMenuRefs = (0, import_react7.useRef)({});
   const hoverTimeoutRef = (0, import_react7.useRef)(null);
   const closeTimeoutRef = (0, import_react7.useRef)(null);
+  const mouseStopTimeoutRef = (0, import_react7.useRef)(null);
+  const isMouseMovingRef = (0, import_react7.useRef)(false);
+  const pendingOpenActionRef = (0, import_react7.useRef)(null);
+  const pendingCloseActionRef = (0, import_react7.useRef)(null);
   const isMobile = useMatchesMobile();
   const toggleMenu = (menuId, level) => {
     if (closeTimeoutRef.current) {
@@ -988,36 +992,67 @@ function useSubMenuSystem(mobilePositionTo) {
       return newActiveMenus;
     });
   };
+  const executePendingActions = (0, import_react7.useCallback)(() => {
+    if (pendingCloseActionRef.current) {
+      pendingCloseActionRef.current();
+      pendingCloseActionRef.current = null;
+    }
+    if (pendingOpenActionRef.current) {
+      pendingOpenActionRef.current();
+      pendingOpenActionRef.current = null;
+    }
+  }, []);
   const openMenuWithDelay = (menuId, level, delay = 150) => {
     if (isMobile) {
       return;
     }
-    if (hoverTimeoutRef.current) {
-      clearTimeout(hoverTimeoutRef.current);
+    pendingOpenActionRef.current = () => {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+      }
+      hoverTimeoutRef.current = setTimeout(() => {
+        openMenu(menuId, level);
+      }, delay);
+    };
+    if (!isMouseMovingRef.current) {
+      executePendingActions();
     }
-    hoverTimeoutRef.current = setTimeout(() => {
-      openMenu(menuId, level);
-    }, delay);
   };
   const closeMenuWithDelay = (level, delay = 500) => {
     if (isMobile) {
       return;
     }
-    if (hoverTimeoutRef.current) {
-      clearTimeout(hoverTimeoutRef.current);
-      hoverTimeoutRef.current = null;
+    pendingCloseActionRef.current = () => {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+        hoverTimeoutRef.current = null;
+      }
+      closeTimeoutRef.current = setTimeout(() => {
+        closeSubMenuLevel(level);
+      }, delay);
+    };
+    if (!isMouseMovingRef.current) {
+      executePendingActions();
     }
-    closeTimeoutRef.current = setTimeout(() => {
-      closeSubMenuLevel(level);
-    }, delay);
+  };
+  const handleMouseMove = () => {
+    isMouseMovingRef.current = true;
+    if (mouseStopTimeoutRef.current) {
+      clearTimeout(mouseStopTimeoutRef.current);
+    }
+    mouseStopTimeoutRef.current = setTimeout(() => {
+      isMouseMovingRef.current = false;
+      executePendingActions();
+    }, 200);
   };
   const cancelCloseTimeout = () => {
     if (isMobile) {
       return;
     }
-    if (closeTimeoutRef.current) {
-      clearTimeout(closeTimeoutRef.current);
-      closeTimeoutRef.current = null;
+    if (mouseStopTimeoutRef.current) {
+      clearTimeout(mouseStopTimeoutRef.current);
+      mouseStopTimeoutRef.current = null;
+      isMouseMovingRef.current = false;
     }
   };
   const closeSubMenuLevel = (level) => {
@@ -1133,6 +1168,7 @@ function useSubMenuSystem(mobilePositionTo) {
       onSubMenuHover: openMenuWithDelay,
       onSubMenuLeave: closeMenuWithDelay,
       onSubMenuEnter: cancelCloseTimeout,
+      onMouseMove: handleMouseMove,
       toggleMenu,
       mobilePositionTo,
       activeMenu,
@@ -1147,9 +1183,9 @@ function useMenuPosition(elementRef, position = "bottom", options) {
     left: 0,
     minWidth: 0
   });
-  const isMobile = useMatchesMobile();
+  const isMobile = options == null ? void 0 : options.isMobile;
   const updatePosition = (0, import_react7.useCallback)(() => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    var _a, _b, _c;
     if (!(elementRef == null ? void 0 : elementRef.current)) return;
     const triggerRect = elementRef.current.getBoundingClientRect();
     const menuRect = (_b = (_a = options == null ? void 0 : options.menuRef) == null ? void 0 : _a.current) == null ? void 0 : _b.getBoundingClientRect();
@@ -1168,15 +1204,27 @@ function useMenuPosition(elementRef, position = "bottom", options) {
     } else if (position === "bottom-right") {
       left = triggerRect.right + window.scrollX - menuWidth;
     } else if (position === "right") {
-      left = triggerRect.right + window.scrollX;
+      if (isMobile) {
+        left = triggerRect.left + window.scrollX;
+      } else {
+        left = triggerRect.right + window.scrollX;
+      }
+    }
+    const overflowsRightViewport = left + menuWidth > viewportWidth;
+    if (overflowsRightViewport) {
+      const newLeft = triggerRect.left - menuWidth;
+      const overflowsLeftViewport = newLeft < 0;
+      if (overflowsLeftViewport) {
+        left = (viewportWidth - menuWidth) / 2;
+      } else {
+        left = newLeft;
+      }
     }
-    const overflowsLeftViewport = left + menuWidth > viewportWidth;
-    if (overflowsLeftViewport) {
-      left = triggerRect.left - menuWidth;
+    if (isMobile && position === "right") {
+      top = triggerRect.top + triggerRect.height + topOffset;
     }
-    if (isMobile) {
-      left = triggerRect.left + menuWidth > viewportWidth ? Math.max(viewportWidth - menuWidth, 0) - 8 : triggerRect.left;
-      top = ((_f = (_e = (_d = elementRef.current.parentElement) == null ? void 0 : _d.getBoundingClientRect()) == null ? void 0 : _e.top) != null ? _f : 0) + ((_i = (_h = (_g = elementRef.current.parentElement) == null ? void 0 : _g.getBoundingClientRect()) == null ? void 0 : _h.height) != null ? _i : 0) + topOffset;
+    if (isMobile && menuWidth > viewportWidth) {
+      left = 0;
     }
     setMenuPosition({
       top,
@@ -1303,7 +1351,8 @@ var Menu = (_a) => {
       isOpen: show,
       setIsOpen: setShow,
       menuRef: internalRef,
-      topOffset
+      topOffset,
+      isMobile: !!(isMobile && mobilePositionTo)
     }
   );
   (0, import_react8.useEffect)(() => {
@@ -1376,6 +1425,7 @@ var Menu = (_a) => {
           "shadow-4 rounded-base bg-background-grouped-primary-normal overflow-x-hidden overflow-y-auto flex flex-col outline-0",
           "fixed",
           "z-50",
+          "max-w-screen",
           mobileHide && "opacity-0 pointer-events-none",
           className
         )
@@ -1582,7 +1632,8 @@ var MenuOption = ({
   activeMenu,
   mobilePositionTo,
   highlightMatchingText = false,
-  menuValue
+  menuValue,
+  onMouseMove
 }) => {
   const uniqueId = (0, import_react9.useId)();
   const internalRef = (0, import_react9.useRef)(null);
@@ -1599,6 +1650,11 @@ var MenuOption = ({
       onSubMenuLeave(subMenuLevel);
     }
   };
+  const handleMouseMove = () => {
+    if (subMenu && onMouseMove && !disabled) {
+      onMouseMove();
+    }
+  };
   const handleSubMenuEnter = () => {
     if (onSubMenuEnter) {
       onSubMenuEnter();
@@ -1657,7 +1713,8 @@ var MenuOption = ({
           }
         },
         onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave
+        onMouseLeave: handleMouseLeave,
+        onMouseMove: handleMouseMove
       }, additionalAttributes), {
         tabIndex: -1,
         role: "menuitem",

package/dist/components/index.js

@@ -12,14 +12,14 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-Z2KZO4J3.js";
+} from "../chunk-SDQPZQTI.js";
 import {
   Menu
-} from "../chunk-UBU6IJML.js";
-import "../chunk-5GUW4DUY.js";
+} from "../chunk-ESTHTAR5.js";
+import "../chunk-AEDQLVKH.js";
 import {
   MenuOption
-} from "../chunk-FFU6FB3K.js";
+} from "../chunk-OZKCUKBS.js";
 import {
   useInfiniteScroll
 } from "../chunk-WNQ53SVY.js";

package/dist/components/useMenuSystem.cjs

@@ -75,6 +75,10 @@ function useSubMenuSystem(mobilePositionTo) {
   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 isMobile = useMatchesMobile();
   const toggleMenu = (menuId, level) => {
     if (closeTimeoutRef.current) {
@@ -114,36 +118,67 @@ function useSubMenuSystem(mobilePositionTo) {
       return newActiveMenus;
     });
   };
+  const executePendingActions = (0, import_react4.useCallback)(() => {
+    if (pendingCloseActionRef.current) {
+      pendingCloseActionRef.current();
+      pendingCloseActionRef.current = null;
+    }
+    if (pendingOpenActionRef.current) {
+      pendingOpenActionRef.current();
+      pendingOpenActionRef.current = null;
+    }
+  }, []);
   const openMenuWithDelay = (menuId, level, delay = 150) => {
     if (isMobile) {
       return;
     }
-    if (hoverTimeoutRef.current) {
-      clearTimeout(hoverTimeoutRef.current);
+    pendingOpenActionRef.current = () => {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+      }
+      hoverTimeoutRef.current = setTimeout(() => {
+        openMenu(menuId, level);
+      }, delay);
+    };
+    if (!isMouseMovingRef.current) {
+      executePendingActions();
     }
-    hoverTimeoutRef.current = setTimeout(() => {
-      openMenu(menuId, level);
-    }, delay);
   };
   const closeMenuWithDelay = (level, delay = 500) => {
     if (isMobile) {
       return;
     }
-    if (hoverTimeoutRef.current) {
-      clearTimeout(hoverTimeoutRef.current);
-      hoverTimeoutRef.current = null;
+    pendingCloseActionRef.current = () => {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+        hoverTimeoutRef.current = null;
+      }
+      closeTimeoutRef.current = setTimeout(() => {
+        closeSubMenuLevel(level);
+      }, delay);
+    };
+    if (!isMouseMovingRef.current) {
+      executePendingActions();
+    }
+  };
+  const handleMouseMove = () => {
+    isMouseMovingRef.current = true;
+    if (mouseStopTimeoutRef.current) {
+      clearTimeout(mouseStopTimeoutRef.current);
     }
-    closeTimeoutRef.current = setTimeout(() => {
-      closeSubMenuLevel(level);
-    }, delay);
+    mouseStopTimeoutRef.current = setTimeout(() => {
+      isMouseMovingRef.current = false;
+      executePendingActions();
+    }, 200);
   };
   const cancelCloseTimeout = () => {
     if (isMobile) {
       return;
     }
-    if (closeTimeoutRef.current) {
-      clearTimeout(closeTimeoutRef.current);
-      closeTimeoutRef.current = null;
+    if (mouseStopTimeoutRef.current) {
+      clearTimeout(mouseStopTimeoutRef.current);
+      mouseStopTimeoutRef.current = null;
+      isMouseMovingRef.current = false;
     }
   };
   const closeSubMenuLevel = (level) => {
@@ -259,6 +294,7 @@ function useSubMenuSystem(mobilePositionTo) {
       onSubMenuHover: openMenuWithDelay,
       onSubMenuLeave: closeMenuWithDelay,
       onSubMenuEnter: cancelCloseTimeout,
+      onMouseMove: handleMouseMove,
       toggleMenu,
       mobilePositionTo,
       activeMenu,
@@ -273,9 +309,9 @@ function useMenuPosition(elementRef, position = "bottom", options) {
     left: 0,
     minWidth: 0
   });
-  const isMobile = useMatchesMobile();
+  const isMobile = options == null ? void 0 : options.isMobile;
   const updatePosition = (0, import_react4.useCallback)(() => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    var _a, _b, _c;
     if (!(elementRef == null ? void 0 : elementRef.current)) return;
     const triggerRect = elementRef.current.getBoundingClientRect();
     const menuRect = (_b = (_a = options == null ? void 0 : options.menuRef) == null ? void 0 : _a.current) == null ? void 0 : _b.getBoundingClientRect();
@@ -294,15 +330,27 @@ function useMenuPosition(elementRef, position = "bottom", options) {
     } else if (position === "bottom-right") {
       left = triggerRect.right + window.scrollX - menuWidth;
     } else if (position === "right") {
-      left = triggerRect.right + window.scrollX;
+      if (isMobile) {
+        left = triggerRect.left + window.scrollX;
+      } else {
+        left = triggerRect.right + window.scrollX;
+      }
+    }
+    const overflowsRightViewport = left + menuWidth > viewportWidth;
+    if (overflowsRightViewport) {
+      const newLeft = triggerRect.left - menuWidth;
+      const overflowsLeftViewport = newLeft < 0;
+      if (overflowsLeftViewport) {
+        left = (viewportWidth - menuWidth) / 2;
+      } else {
+        left = newLeft;
+      }
     }
-    const overflowsLeftViewport = left + menuWidth > viewportWidth;
-    if (overflowsLeftViewport) {
-      left = triggerRect.left - menuWidth;
+    if (isMobile && position === "right") {
+      top = triggerRect.top + triggerRect.height + topOffset;
     }
-    if (isMobile) {
-      left = triggerRect.left + menuWidth > viewportWidth ? Math.max(viewportWidth - menuWidth, 0) - 8 : triggerRect.left;
-      top = ((_f = (_e = (_d = elementRef.current.parentElement) == null ? void 0 : _d.getBoundingClientRect()) == null ? void 0 : _e.top) != null ? _f : 0) + ((_i = (_h = (_g = elementRef.current.parentElement) == null ? void 0 : _g.getBoundingClientRect()) == null ? void 0 : _h.height) != null ? _i : 0) + topOffset;
+    if (isMobile && menuWidth > viewportWidth) {
+      left = 0;
     }
     setMenuPosition({
       top,

package/dist/components/useMenuSystem.js

@@ -2,7 +2,7 @@
 import {
   useMenuPosition,
   useSubMenuSystem
-} from "../chunk-5GUW4DUY.js";
+} from "../chunk-AEDQLVKH.js";
 import "../chunk-WNQ53SVY.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/package.json

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

package/src/components/Menu.tsx

@@ -67,6 +67,7 @@ export const Menu = ({
       setIsOpen: setShow,
       menuRef: internalRef,
       topOffset,
+      isMobile: !!(isMobile && mobilePositionTo)
     },
   );
 
@@ -158,6 +159,7 @@ export const Menu = ({
           "shadow-4 rounded-base bg-background-grouped-primary-normal overflow-x-hidden overflow-y-auto flex flex-col outline-0",
           "fixed",
           "z-50",
+          "max-w-screen",
           mobileHide && "opacity-0 pointer-events-none",
           className,
         )}

package/src/components/MenuOption.tsx

@@ -38,6 +38,7 @@ type BaseProps = PropsWithChildren<{
         onSubMenuHover: (menuId: string, level: number) => void;
         onSubMenuLeave: (level: number) => void;
         onSubMenuEnter: () => void;
+        onMouseMove: () => void;
         toggleMenu: (id: string, level: number) => void;
         activeMenu: string;
         closeSubMenuLevel: (level: number) => void;
@@ -48,6 +49,7 @@ type BaseProps = PropsWithChildren<{
         onSubMenuHover?: (menuId: string, level: number) => void;
         onSubMenuLeave?: (level: number) => void;
         onSubMenuEnter?: () => void;
+        onMouseMove?: () => void;
         toggleMenu?: (id: string, level: number) => void;
         closeSubMenuLevel?: (level: number) => void;
         activeMenu?: string;
@@ -98,6 +100,7 @@ export const MenuOption = ({
   mobilePositionTo,
   highlightMatchingText = false,
   menuValue,
+  onMouseMove
 }: MenuOptionProps) => {
   const uniqueId = useId();
   const internalRef = useRef(null);
@@ -117,6 +120,12 @@ export const MenuOption = ({
     }
   };
 
+  const handleMouseMove = () => {
+    if (subMenu && onMouseMove && !disabled) {
+      onMouseMove();
+    }
+  }
+
   const handleSubMenuEnter = () => {
     if (onSubMenuEnter) {
       onSubMenuEnter();
@@ -209,6 +218,7 @@ export const MenuOption = ({
         }}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
+        onMouseMove={handleMouseMove}
         {...additionalAttributes}
         tabIndex={-1}
         role="menuitem"

package/src/components/useMenuSystem.tsx

@@ -23,6 +23,10 @@ export function useSubMenuSystem(
   const subMenuRefs = useRef<{ [id: string]: HTMLElement | null }>({});
   const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const closeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const mouseStopTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const isMouseMovingRef = useRef(false);
+  const pendingOpenActionRef = useRef<(() => void) | null>(null);
+  const pendingCloseActionRef = useRef<(() => void) | null>(null);
   const isMobile = useMatchesMobile();
 
   const toggleMenu = (menuId: string, level: number) => {
@@ -72,18 +76,36 @@ export function useSubMenuSystem(
     });
   };
 
+  const executePendingActions = useCallback(() => {
+    if (pendingCloseActionRef.current) {
+      pendingCloseActionRef.current();
+      pendingCloseActionRef.current = null;
+    }
+
+    if (pendingOpenActionRef.current) {
+      pendingOpenActionRef.current();
+      pendingOpenActionRef.current = null;
+    }
+  }, []);
+
   const openMenuWithDelay = (menuId: string, level: number, delay = 150) => {
     if (isMobile) {
       return;
     }
 
-    if (hoverTimeoutRef.current) {
-      clearTimeout(hoverTimeoutRef.current);
+    pendingOpenActionRef.current = () => {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+      }
+
+      hoverTimeoutRef.current = setTimeout(() => {
+        openMenu(menuId, level);
+      }, delay);
     }
 
-    hoverTimeoutRef.current = setTimeout(() => {
-      openMenu(menuId, level);
-    }, delay);
+    if (!isMouseMovingRef.current) {
+      executePendingActions();
+    }
   };
 
   const closeMenuWithDelay = (level: number, delay = 500) => {
@@ -91,14 +113,33 @@ export function useSubMenuSystem(
       return;
     }
 
-    if (hoverTimeoutRef.current) {
-      clearTimeout(hoverTimeoutRef.current);
-      hoverTimeoutRef.current = null;
+    pendingCloseActionRef.current = () => {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+        hoverTimeoutRef.current = null;
+      }
+
+      closeTimeoutRef.current = setTimeout(() => {
+        closeSubMenuLevel(level);
+      }, delay);
+    }
+
+    if (!isMouseMovingRef.current) {
+      executePendingActions();
     }
+  };
 
-    closeTimeoutRef.current = setTimeout(() => {
-      closeSubMenuLevel(level);
-    }, delay);
+  const handleMouseMove = () => {
+    isMouseMovingRef.current = true;
+    
+    if (mouseStopTimeoutRef.current) {
+      clearTimeout(mouseStopTimeoutRef.current);
+    }
+    
+    mouseStopTimeoutRef.current = setTimeout(() => {
+      isMouseMovingRef.current = false;
+      executePendingActions();
+    }, 200);
   };
 
   const cancelCloseTimeout = () => {
@@ -106,9 +147,10 @@ export function useSubMenuSystem(
       return;
     }
 
-    if (closeTimeoutRef.current) {
-      clearTimeout(closeTimeoutRef.current);
-      closeTimeoutRef.current = null;
+    if (mouseStopTimeoutRef.current) {
+      clearTimeout(mouseStopTimeoutRef.current);
+      mouseStopTimeoutRef.current = null;
+      isMouseMovingRef.current = false;
     }
   };
 
@@ -250,6 +292,7 @@ export function useSubMenuSystem(
       onSubMenuHover: openMenuWithDelay,
       onSubMenuLeave: closeMenuWithDelay,
       onSubMenuEnter: cancelCloseTimeout,
+      onMouseMove: handleMouseMove,
       toggleMenu,
       mobilePositionTo,
       activeMenu,
@@ -268,6 +311,7 @@ export function useMenuPosition(
     menuRef?: RefObject<HTMLElement | null>;
     additionalRefs?: RefObject<HTMLElement | null>[];
     topOffset?: number | null;
+    isMobile?: boolean;
   },
 ) {
   const [menuPosition, setMenuPosition] = useState<MenuPosition>({
@@ -276,7 +320,7 @@ export function useMenuPosition(
     minWidth: 0,
   });
 
-  const isMobile = useMatchesMobile();
+  const isMobile = options?.isMobile;
 
   const updatePosition = useCallback(() => {
     if (!elementRef?.current) return;
@@ -302,25 +346,32 @@ export function useMenuPosition(
     } else if (position === "bottom-right") {
       left = triggerRect.right + window.scrollX - menuWidth;
     } else if (position === "right") {
-      left = triggerRect.right + window.scrollX;
+      if (isMobile) {
+        left = triggerRect.left + window.scrollX
+      } else {
+        left = triggerRect.right + window.scrollX;
+      }
     }
 
-    const overflowsLeftViewport = left + menuWidth > viewportWidth;
+    const overflowsRightViewport = left + menuWidth > viewportWidth;
+
+    if (overflowsRightViewport) {
+      const newLeft = triggerRect.left - menuWidth;
+      const overflowsLeftViewport = newLeft < 0;
+
+      if (overflowsLeftViewport) {
+        left = (viewportWidth - menuWidth) / 2;
+      } else {
+        left = newLeft;
+      }
+    }
 
-    if (overflowsLeftViewport) {
-      left = triggerRect.left - menuWidth;
+    if (isMobile && position === "right") {
+      top = triggerRect.top + triggerRect.height + topOffset;
     }
 
-    if (isMobile) {
-      left =
-        triggerRect.left + menuWidth > viewportWidth
-          ? Math.max(viewportWidth - menuWidth, 0) - 8
-          : triggerRect.left;
-      top =
-        (elementRef.current.parentElement?.getBoundingClientRect()?.top ?? 0) +
-        (elementRef.current.parentElement?.getBoundingClientRect()?.height ??
-          0) +
-        topOffset;
+    if (isMobile && menuWidth > viewportWidth) {
+      left = 0;
     }
 
     setMenuPosition({