@aurora-ds/components 1.8.0 → 1.8.1

package/dist/esm/index.js

@@ -4074,17 +4074,18 @@ const MENU_ITEM_STYLES = 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,
@@ -4096,6 +4097,14 @@ const MENU_ITEM_STYLES = 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,
@@ -4153,7 +4162,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 (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, 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 }))] }));
+    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 }))] }));
 };
 MenuItem.displayName = 'MenuItem';