@aurora-ds/components 1.8.7 → 1.9.1

package/dist/esm/index.js

@@ -4100,6 +4100,7 @@ const MENU_ITEM_STYLES = createStyles((theme) => {
             transition: `background-color ${theme.transition.fast}, border-color ${theme.transition.fast}`,
             '&[data-selected]': {
                 backgroundColor: c.primarySubtle,
+                borderLeftColor: c.primaryMain,
                 color: c.primaryMain,
                 fontWeight: theme.fontWeight.medium,
             },
@@ -4156,10 +4157,27 @@ const MENU_ITEM_STYLES = createStyles((theme) => {
             marginLeft: theme.spacing.sm,
             flexShrink: 0,
         },
+        /**
+         * Full-size transparent `<a>` wrapper used when `href` is provided.
+         * Resets link defaults and mirrors the parent `<li>`'s flex layout so
+         * the icon / label / chevron align correctly.
+         */
+        link: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: theme.spacing.sm,
+            width: '100%',
+            color: 'inherit',
+            textDecoration: 'none',
+            outline: 'none',
+            '&:focus-visible': {
+                outline: 'none',
+            },
+        },
     };
 }, { id: 'menu-item' });
 
-const MenuItem = ({ ref, id, label, icon, iconColor, role = 'menuitem', checked, selected, focused, disabled, size = 'default', closeOnClick, submenu, submenuTrigger = 'click', submenuPlacement = 'right', onClick, ...rest }) => {
+const MenuItem = ({ ref, id, label, icon, iconColor, role = 'menuitem', checked, selected, focused, disabled, size = 'default', closeOnClick, submenu, submenuTrigger = 'click', submenuPlacement = 'right', href, target, onClick, ...rest }) => {
     const hasSubmenu = submenu !== undefined;
     const isCheckable = role === 'menuitemcheckbox' || role === 'menuitemradio';
     const isOption = role === 'option';
@@ -4174,7 +4192,26 @@ 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 (jsxs(Fragment$1, { children: [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 && (jsxs("span", { className: MENU_ITEM_STYLES.indicator, "aria-hidden": true, children: [checked && role === 'menuitemcheckbox' && (jsx(Icon, { icon: CheckIcon, size: size === 'default' ? 'sm' : 'md', strokeColor: 'primaryMain' })), checked && role === 'menuitemradio' && (jsx("span", { className: MENU_ITEM_STYLES.radioDot }))] })), icon !== undefined && (jsx(Icon, { icon: icon, size: 'sm', strokeColor: iconColor ?? (isHighlighted ? 'primaryMain' : 'textSecondary') })), jsx(Text, { variant: 'span', fontSize: 'sm', className: MENU_ITEM_STYLES.label, children: label }), hasSubmenu && (jsx("span", { className: MENU_ITEM_STYLES.submenuChevron, "aria-hidden": true, children: jsx(Icon, { icon: ChevronRightIcon, size: 'sm', strokeColor: 'textTertiary' }) }))] }), hasSubmenu && (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 }))] }));
+    /**
+     * When `href` is provided, the `<a>` is the browser navigation element.
+     * - If `onClick` is also given (SPA routing): prevent browser navigation,
+     *   the click bubbles to `<li>` where `handleClick` calls `onClick` + `closeMenu`.
+     * - If only `href` (plain link): let the browser navigate, `handleClick` on
+     *   the `<li>` still fires via bubbling and closes the menu.
+     * - If `disabled`: prevent navigation entirely.
+     */
+    const handleAnchorClick = (e) => {
+        if (disabled) {
+            e.preventDefault();
+            return;
+        }
+        if (onClick) {
+            // Prevent browser follow; SPA handler will be called via bubbling.
+            e.preventDefault();
+        }
+    };
+    const innerContent = (jsxs(Fragment$1, { children: [isCheckable && (jsxs("span", { className: MENU_ITEM_STYLES.indicator, "aria-hidden": true, children: [checked && role === 'menuitemcheckbox' && (jsx(Icon, { icon: CheckIcon, size: size === 'default' ? 'sm' : 'md', strokeColor: 'primaryMain' })), checked && role === 'menuitemradio' && (jsx("span", { className: MENU_ITEM_STYLES.radioDot }))] })), icon !== undefined && (jsx(Icon, { icon: icon, size: 'sm', strokeColor: iconColor ?? (isHighlighted ? 'primaryMain' : 'textSecondary') })), jsx(Text, { variant: 'span', fontSize: 'sm', className: MENU_ITEM_STYLES.label, children: label }), hasSubmenu && (jsx("span", { className: MENU_ITEM_STYLES.submenuChevron, "aria-hidden": true, children: jsx(Icon, { icon: ChevronRightIcon, size: 'sm', strokeColor: 'textTertiary' }) }))] }));
+    return (jsxs(Fragment$1, { children: [jsx("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: href ? (jsx("a", { href: href, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, "aria-disabled": disabled || undefined, className: MENU_ITEM_STYLES.link, tabIndex: -1, onClick: handleAnchorClick, children: innerContent })) : innerContent }), hasSubmenu && (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';