@aurora-ds/components 1.8.0 → 1.8.2

package/dist/cjs/index.js

@@ -3486,6 +3486,13 @@ width = '100%', minWidth = 0, maxWidth, flex, flexGrow, flexShrink, flexBasis, .
 };
 TextField.displayName = 'TextField';
 
+/**
+ * Vertical padding (in px) applied to the top and bottom of the menu panel.
+ * Matches `theme.spacing.xs` (0.25rem = 4px at 16px base font).
+ * Exported so submenus can offset their position upward by this amount to align
+ * their first item with the trigger item.
+ */
+const MENU_PANEL_PADDING_Y_PX = 6;
 const MENU_PANEL_STYLES = theme.createStyles((theme) => ({
     backdrop: {
         position: 'fixed',
@@ -3559,7 +3566,7 @@ const MENU_MIN_WIDTH_PX = 224;
  * Uses a two-pass strategy: first render with `menuHeight = 0`, then a rAF
  * recompute with the actual rendered size to apply any overflow offset.
  */
-const useMenuPosition = ({ anchorEl, open, menuRef, minWidth, gap = 4, placement = 'bottom', }) => {
+const useMenuPosition = ({ anchorEl, open, menuRef, minWidth, gap = 4, verticalOffset = 0, 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
@@ -3576,8 +3583,10 @@ const useMenuPosition = ({ anchorEl, open, menuRef, minWidth, gap = 4, placement
         const viewportRight = window.innerWidth - VIEWPORT_MARGIN_PX;
         const viewportBottom = window.innerHeight - VIEWPORT_MARGIN_PX;
         if (placement === 'right' || placement === 'left') {
-            // --- Vertical: align with the anchor top, clamp inside the viewport ---
-            let top = anchor.top;
+            // --- Vertical: align with the anchor top, offset upward by verticalOffset
+            // (e.g. the panel's paddingTop) so the first item lines up with the trigger,
+            // then clamp inside the viewport. ---
+            let top = anchor.top - verticalOffset;
             if (menuHeight > 0 && top + menuHeight > viewportBottom) {
                 top = Math.max(VIEWPORT_MARGIN_PX, viewportBottom - menuHeight);
             }
@@ -3637,7 +3646,7 @@ const useMenuPosition = ({ anchorEl, open, menuRef, minWidth, gap = 4, placement
         const maxLeft = window.innerWidth - effectiveWidth - VIEWPORT_MARGIN_PX;
         const left = Math.max(VIEWPORT_MARGIN_PX, Math.min(anchor.left, maxLeft));
         setStyle({ top, left, minWidth: minWidth ?? fallbackMinWidth });
-    }, [anchorEl, menuRef, minWidth, gap, placement]);
+    }, [anchorEl, menuRef, minWidth, gap, verticalOffset, placement]);
     // First pass: compute as soon as the menu opens (menuHeight = 0)
     React.useLayoutEffect(() => {
         if (open) {
@@ -3710,12 +3719,12 @@ const ITEM_SELECTOR = '[role^="menuitem"]:not([data-disabled]), [role="option"]:
  * `aria-activedescendant`. Item order is read from the DOM (read-only) so the
  * logic stays correct across groups and dynamic content.
  */
-const useMenuPanel = ({ open, onClose, anchorEl, minWidth, placement = 'bottom', onArrowLeft, }) => {
+const useMenuPanel = ({ open, onClose, anchorEl, minWidth, placement = 'bottom', verticalOffset = 0, onArrowLeft, }) => {
     const panelRef = React.useRef(null);
     const [focusedId, setFocusedId] = React.useState(undefined);
     // True while a descendant submenu is open → pause this panel's keyboard nav.
     const [childOpen, setChildOpen] = React.useState(false);
-    const { style } = useMenuPosition({ anchorEl, open, menuRef: panelRef, minWidth, placement });
+    const { style } = useMenuPosition({ anchorEl, open, menuRef: panelRef, minWidth, placement, verticalOffset });
     /** Read this panel's focusable items in DOM order (excluding nested submenus). */
     const getItems = React.useCallback(() => {
         const panel = panelRef.current;
@@ -3929,6 +3938,9 @@ const MenuPanel = ({ open, onClose, anchorEl, minWidth, maxHeight = '20rem', pla
         anchorEl,
         minWidth,
         placement,
+        // Shift submenus upward by the panel's paddingTop so the first item aligns
+        // visually with the trigger item in the parent menu.
+        verticalOffset: isSubmenu ? MENU_PANEL_PADDING_Y_PX : 0,
         onArrowLeft,
     });
     const contextValue = React.useMemo(() => ({ setChildOpen, closeMenu }), [setChildOpen, closeMenu]);
@@ -4094,17 +4106,18 @@ const MENU_ITEM_STYLES = theme.createStyles((theme) => {
             display: 'flex',
             alignItems: 'center',
             gap: theme.spacing.sm,
-            paddingLeft: theme.spacing.md,
+            paddingLeft: `calc(${theme.spacing.md} - 2px)`,
             paddingRight: theme.spacing.md,
             ...(size === 'default'
                 ? { height: DEFAULT_DRAWER_ITEM_SIZE }
                 : { paddingTop: theme.spacing.xs, paddingBottom: theme.spacing.xs }),
+            borderLeft: '2px solid transparent',
             cursor: 'pointer',
             userSelect: 'none',
             color: c.textPrimary,
             fontSize: theme.fontSize.sm,
             listStyle: 'none',
-            transition: `background-color ${theme.transition.fast}`,
+            transition: `background-color ${theme.transition.fast}, border-color ${theme.transition.fast}`,
             '&[data-selected]': {
                 backgroundColor: c.primarySubtle,
                 color: c.primaryMain,
@@ -4116,6 +4129,14 @@ const MENU_ITEM_STYLES = theme.createStyles((theme) => {
             '&[data-focused][data-selected]': {
                 backgroundColor: c.primarySubtleHover,
             },
+            '&[data-submenu-open]': {
+                backgroundColor: c.primarySubtle,
+                color: c.primaryMain,
+                borderLeftColor: c.primaryMain,
+            },
+            '&[data-submenu-open]:hover:not([data-disabled])': {
+                backgroundColor: c.primarySubtleHover,
+            },
             '&[data-disabled]': {
                 cursor: 'not-allowed',
                 opacity: theme.opacity.high,
@@ -4173,7 +4194,7 @@ const MenuItem = ({ ref, id, label, icon, iconColor, role = 'menuitem', checked,
     const isFocused = focused || focusedId === itemId;
     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, id: itemId, 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": isFocused || 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 }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("li", { ref: mergedRef, id: itemId, 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": isFocused || undefined, "data-disabled": disabled || undefined, "data-submenu-open": hasSubmenu && submenuOpen || 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';