@aurora-ds/components 1.7.19 → 1.7.21

package/dist/cjs/index.js

@@ -3561,6 +3561,10 @@ const MENU_MIN_WIDTH_PX = 224;
  */
 const useMenuPosition = ({ anchorEl, open, menuRef, minWidth, gap = 4, placement = 'bottom', }) => {
     const [style, setStyle] = React.useState({});
+    // Stays false until the rAF second pass has run with the real panel dimensions.
+    // Keeps the panel invisible during the initial style={} state and the first
+    // pass (menuHeight = 0) to prevent the position-jump flickering.
+    const [isPositioned, setIsPositioned] = React.useState(false);
     const computePosition = React.useCallback(() => {
         if (!anchorEl) {
             return;
@@ -3641,14 +3645,19 @@ const useMenuPosition = ({ anchorEl, open, menuRef, minWidth, gap = 4, placement
         }
         else {
             setStyle({});
+            setIsPositioned(false);
         }
     }, [open, computePosition]);
-    // Second pass: recompute after the panel renders to get actual height/width
+    // Second pass: recompute after the panel renders to get actual height/width,
+    // then mark as positioned so the panel becomes visible.
     React.useEffect(() => {
         if (!open) {
             return;
         }
-        const id = requestAnimationFrame(computePosition);
+        const id = requestAnimationFrame(() => {
+            computePosition();
+            setIsPositioned(true);
+        });
         return () => cancelAnimationFrame(id);
     }, [open, computePosition]);
     // Keep the menu glued to its anchor on scroll (nested containers) and resize.
@@ -3663,7 +3672,7 @@ const useMenuPosition = ({ anchorEl, open, menuRef, minWidth, gap = 4, placement
             window.removeEventListener('resize', computePosition);
         };
     }, [open, computePosition]);
-    return { style };
+    return { style: { ...style, visibility: isPositioned ? 'visible' : 'hidden' } };
 };
 
 /** Custom DOM event fired on a submenu trigger item to request it opens. */
@@ -3987,7 +3996,7 @@ const HOVER_CLOSE_DELAY_MS = 160;
  * focus restoration, parent-keyboard pausing and the configurable close-on-click
  * behaviour.
  */
-const useMenuItem = ({ ref, role, hasSubmenu, disabled, onClick, closeOnClick, }) => {
+const useMenuItem = ({ ref, role, hasSubmenu, disabled, onClick, closeOnClick, submenuTrigger = 'hover', }) => {
     const { setChildOpen, closeMenu } = React.useContext(MenuContext);
     const liRef = React.useRef(null);
     const mergedRef = useMergedRefs(ref, liRef);
@@ -4047,14 +4056,20 @@ const useMenuItem = ({ ref, role, hasSubmenu, disabled, onClick, closeOnClick, }
             return;
         }
         if (hasSubmenu) {
-            openSubmenu();
+            if (submenuTrigger === 'click') {
+                // Toggle: click again closes the submenu.
+                setSubmenuOpen((prev) => !prev);
+            }
+            else {
+                openSubmenu();
+            }
             return;
         }
         onClick?.(event);
         if (shouldCloseOnClick) {
             closeMenu?.();
         }
-    }, [disabled, hasSubmenu, openSubmenu, onClick, shouldCloseOnClick, closeMenu]);
+    }, [disabled, hasSubmenu, submenuTrigger, openSubmenu, onClick, shouldCloseOnClick, closeMenu]);
     return {
         liRef,
         mergedRef,
@@ -4064,6 +4079,7 @@ const useMenuItem = ({ ref, role, hasSubmenu, disabled, onClick, closeOnClick, }
         scheduleClose,
         clearTimers,
         closeSubmenu,
+        submenuTrigger,
     };
 };
 
@@ -4138,13 +4154,14 @@ const MENU_ITEM_STYLES = theme.createStyles((theme) => {
     };
 }, { id: 'menu-item' });
 
-const MenuItem = ({ ref, label, icon, iconColor, role = 'menuitem', checked, selected, focused, disabled, size = 'default', closeOnClick, submenu, submenuPlacement = 'right', onClick, ...rest }) => {
+const MenuItem = ({ ref, label, icon, iconColor, role = 'menuitem', checked, selected, focused, disabled, size = 'default', closeOnClick, submenu, submenuTrigger = 'click', submenuPlacement = 'right', onClick, ...rest }) => {
     const hasSubmenu = submenu !== undefined;
     const isCheckable = role === 'menuitemcheckbox' || role === 'menuitemradio';
     const isOption = role === 'option';
     const isHighlighted = isCheckable ? Boolean(checked) : Boolean(selected);
-    const { liRef, mergedRef, submenuOpen, handleClick, scheduleOpen, scheduleClose, clearTimers, closeSubmenu, } = useMenuItem({ ref, role, hasSubmenu, disabled, onClick, closeOnClick });
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("li", { ref: mergedRef, role: role, "aria-checked": isCheckable ? Boolean(checked) : undefined, "aria-selected": isOption ? Boolean(selected) : undefined, "aria-disabled": disabled, "aria-haspopup": hasSubmenu ? 'menu' : undefined, "aria-expanded": hasSubmenu ? submenuOpen : undefined, "data-selected": isHighlighted || undefined, "data-focused": focused || undefined, "data-disabled": disabled || undefined, className: MENU_ITEM_STYLES.root({ size }), onClick: handleClick, onMouseEnter: hasSubmenu && !disabled ? scheduleOpen : undefined, onMouseLeave: hasSubmenu ? scheduleClose : undefined, ...rest, children: [isCheckable && (jsxRuntime.jsxs("span", { className: MENU_ITEM_STYLES.indicator, "aria-hidden": true, children: [checked && role === 'menuitemcheckbox' && (jsxRuntime.jsx(Icon, { icon: CheckIcon, size: size === 'default' ? 'sm' : 'md', strokeColor: 'primaryMain' })), checked && role === 'menuitemradio' && (jsxRuntime.jsx("span", { className: MENU_ITEM_STYLES.radioDot }))] })), icon !== undefined && (jsxRuntime.jsx(Icon, { icon: icon, size: 'sm', strokeColor: iconColor ?? (isHighlighted ? 'primaryMain' : 'textSecondary') })), jsxRuntime.jsx(Text, { variant: 'span', fontSize: 'sm', className: MENU_ITEM_STYLES.label, children: label }), hasSubmenu && (jsxRuntime.jsx("span", { className: MENU_ITEM_STYLES.submenuChevron, "aria-hidden": true, children: jsxRuntime.jsx(Icon, { icon: ChevronRightIcon, size: 'sm', strokeColor: 'textTertiary' }) }))] }), hasSubmenu && (jsxRuntime.jsx(MenuPanel, { open: submenuOpen, onClose: () => closeSubmenu(true), onArrowLeft: () => closeSubmenu(true), anchorEl: liRef.current, placement: submenuPlacement, isSubmenu: true, "aria-label": label, onMouseEnter: clearTimers, onMouseLeave: scheduleClose, children: submenu }))] }));
+    const { liRef, mergedRef, submenuOpen, handleClick, scheduleOpen, scheduleClose, clearTimers, closeSubmenu, } = useMenuItem({ ref, role, hasSubmenu, disabled, onClick, closeOnClick, submenuTrigger });
+    const isHoverTrigger = submenuTrigger === 'hover';
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("li", { ref: mergedRef, role: role, "aria-checked": isCheckable ? Boolean(checked) : undefined, "aria-selected": isOption ? Boolean(selected) : undefined, "aria-disabled": disabled, "aria-haspopup": hasSubmenu ? 'menu' : undefined, "aria-expanded": hasSubmenu ? submenuOpen : undefined, "data-selected": isHighlighted || undefined, "data-focused": focused || undefined, "data-disabled": disabled || undefined, className: MENU_ITEM_STYLES.root({ size }), onClick: handleClick, onMouseEnter: hasSubmenu && !disabled && isHoverTrigger ? scheduleOpen : undefined, onMouseLeave: hasSubmenu && isHoverTrigger ? scheduleClose : undefined, ...rest, children: [isCheckable && (jsxRuntime.jsxs("span", { className: MENU_ITEM_STYLES.indicator, "aria-hidden": true, children: [checked && role === 'menuitemcheckbox' && (jsxRuntime.jsx(Icon, { icon: CheckIcon, size: size === 'default' ? 'sm' : 'md', strokeColor: 'primaryMain' })), checked && role === 'menuitemradio' && (jsxRuntime.jsx("span", { className: MENU_ITEM_STYLES.radioDot }))] })), icon !== undefined && (jsxRuntime.jsx(Icon, { icon: icon, size: 'sm', strokeColor: iconColor ?? (isHighlighted ? 'primaryMain' : 'textSecondary') })), jsxRuntime.jsx(Text, { variant: 'span', fontSize: 'sm', className: MENU_ITEM_STYLES.label, children: label }), hasSubmenu && (jsxRuntime.jsx("span", { className: MENU_ITEM_STYLES.submenuChevron, "aria-hidden": true, children: jsxRuntime.jsx(Icon, { icon: ChevronRightIcon, size: 'sm', strokeColor: 'textTertiary' }) }))] }), hasSubmenu && (jsxRuntime.jsx(MenuPanel, { open: submenuOpen, onClose: () => closeSubmenu(true), onArrowLeft: () => closeSubmenu(true), anchorEl: liRef.current, placement: submenuPlacement, isSubmenu: true, "aria-label": label, onMouseEnter: isHoverTrigger ? clearTimers : undefined, onMouseLeave: isHoverTrigger ? scheduleClose : undefined, children: submenu }))] }));
 };
 MenuItem.displayName = 'MenuItem';