@aurora-ds/components 1.8.7 → 1.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +38 -2
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +38 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.ts +11 -0
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -4176,10 +4176,27 @@ const MENU_ITEM_STYLES = theme.createStyles((theme) => {
|
|
|
4176
4176
|
marginLeft: theme.spacing.sm,
|
|
4177
4177
|
flexShrink: 0,
|
|
4178
4178
|
},
|
|
4179
|
+
/**
|
|
4180
|
+
* Full-size transparent `<a>` wrapper used when `href` is provided.
|
|
4181
|
+
* Resets link defaults and mirrors the parent `<li>`'s flex layout so
|
|
4182
|
+
* the icon / label / chevron align correctly.
|
|
4183
|
+
*/
|
|
4184
|
+
link: {
|
|
4185
|
+
display: 'flex',
|
|
4186
|
+
alignItems: 'center',
|
|
4187
|
+
gap: theme.spacing.sm,
|
|
4188
|
+
width: '100%',
|
|
4189
|
+
color: 'inherit',
|
|
4190
|
+
textDecoration: 'none',
|
|
4191
|
+
outline: 'none',
|
|
4192
|
+
'&:focus-visible': {
|
|
4193
|
+
outline: 'none',
|
|
4194
|
+
},
|
|
4195
|
+
},
|
|
4179
4196
|
};
|
|
4180
4197
|
}, { id: 'menu-item' });
|
|
4181
4198
|
|
|
4182
|
-
const MenuItem = ({ ref, id, label, icon, iconColor, role = 'menuitem', checked, selected, focused, disabled, size = 'default', closeOnClick, submenu, submenuTrigger = 'click', submenuPlacement = 'right', onClick, ...rest }) => {
|
|
4199
|
+
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 }) => {
|
|
4183
4200
|
const hasSubmenu = submenu !== undefined;
|
|
4184
4201
|
const isCheckable = role === 'menuitemcheckbox' || role === 'menuitemradio';
|
|
4185
4202
|
const isOption = role === 'option';
|
|
@@ -4194,7 +4211,26 @@ const MenuItem = ({ ref, id, label, icon, iconColor, role = 'menuitem', checked,
|
|
|
4194
4211
|
const isFocused = focused || focusedId === itemId;
|
|
4195
4212
|
const { liRef, mergedRef, submenuOpen, handleClick, scheduleOpen, scheduleClose, clearTimers, closeSubmenu, } = useMenuItem({ ref, role, hasSubmenu, disabled, onClick, closeOnClick, submenuTrigger });
|
|
4196
4213
|
const isHoverTrigger = submenuTrigger === 'hover';
|
|
4197
|
-
|
|
4214
|
+
/**
|
|
4215
|
+
* When `href` is provided, the `<a>` is the browser navigation element.
|
|
4216
|
+
* - If `onClick` is also given (SPA routing): prevent browser navigation,
|
|
4217
|
+
* the click bubbles to `<li>` where `handleClick` calls `onClick` + `closeMenu`.
|
|
4218
|
+
* - If only `href` (plain link): let the browser navigate, `handleClick` on
|
|
4219
|
+
* the `<li>` still fires via bubbling and closes the menu.
|
|
4220
|
+
* - If `disabled`: prevent navigation entirely.
|
|
4221
|
+
*/
|
|
4222
|
+
const handleAnchorClick = (e) => {
|
|
4223
|
+
if (disabled) {
|
|
4224
|
+
e.preventDefault();
|
|
4225
|
+
return;
|
|
4226
|
+
}
|
|
4227
|
+
if (onClick) {
|
|
4228
|
+
// Prevent browser follow; SPA handler will be called via bubbling.
|
|
4229
|
+
e.preventDefault();
|
|
4230
|
+
}
|
|
4231
|
+
};
|
|
4232
|
+
const innerContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { 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' }) }))] }));
|
|
4233
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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 ? (jsxRuntime.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 && (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 }))] }));
|
|
4198
4234
|
};
|
|
4199
4235
|
MenuItem.displayName = 'MenuItem';
|
|
4200
4236
|
|