@dmsi/wedgekit-react 0.0.185 → 0.0.186

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.186",
   "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({

package/dist/{chunk-4T3DRGLF.js → chunk-MVGOAMTP.js}

@@ -1,11 +1,11 @@
+import {
+  Label
+} from "./chunk-JWCT72WR.js";
 import {
   formatCurrencyDisplay,
   formatDecimalValue,
   getDecimalPlaceholder
 } from "./chunk-5UH6QUFB.js";
-import {
-  Label
-} from "./chunk-JWCT72WR.js";
 import {
   Icon
 } from "./chunk-NKUETCDA.js";

package/dist/{chunk-F6YFWBVV.js → chunk-RYBHJC4G.js}

@@ -13,12 +13,12 @@ import {
 import {
   ModalScrim
 } from "./chunk-ZFOANBWG.js";
-import {
-  useMatchesMobile
-} from "./chunk-WNQ53SVY.js";
 import {
   findDocumentRoot
 } from "./chunk-6LN6QT6M.js";
+import {
+  useMatchesMobile
+} from "./chunk-WNQ53SVY.js";
 
 // src/components/Modal.tsx
 import clsx from "clsx";