@aurora-ds/components 1.7.20 → 1.7.21
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 +14 -6
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +14 -6
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.ts +8 -0
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -3996,7 +3996,7 @@ const HOVER_CLOSE_DELAY_MS = 160;
|
|
|
3996
3996
|
* focus restoration, parent-keyboard pausing and the configurable close-on-click
|
|
3997
3997
|
* behaviour.
|
|
3998
3998
|
*/
|
|
3999
|
-
const useMenuItem = ({ ref, role, hasSubmenu, disabled, onClick, closeOnClick, }) => {
|
|
3999
|
+
const useMenuItem = ({ ref, role, hasSubmenu, disabled, onClick, closeOnClick, submenuTrigger = 'hover', }) => {
|
|
4000
4000
|
const { setChildOpen, closeMenu } = React.useContext(MenuContext);
|
|
4001
4001
|
const liRef = React.useRef(null);
|
|
4002
4002
|
const mergedRef = useMergedRefs(ref, liRef);
|
|
@@ -4056,14 +4056,20 @@ const useMenuItem = ({ ref, role, hasSubmenu, disabled, onClick, closeOnClick, }
|
|
|
4056
4056
|
return;
|
|
4057
4057
|
}
|
|
4058
4058
|
if (hasSubmenu) {
|
|
4059
|
-
|
|
4059
|
+
if (submenuTrigger === 'click') {
|
|
4060
|
+
// Toggle: click again closes the submenu.
|
|
4061
|
+
setSubmenuOpen((prev) => !prev);
|
|
4062
|
+
}
|
|
4063
|
+
else {
|
|
4064
|
+
openSubmenu();
|
|
4065
|
+
}
|
|
4060
4066
|
return;
|
|
4061
4067
|
}
|
|
4062
4068
|
onClick?.(event);
|
|
4063
4069
|
if (shouldCloseOnClick) {
|
|
4064
4070
|
closeMenu?.();
|
|
4065
4071
|
}
|
|
4066
|
-
}, [disabled, hasSubmenu, openSubmenu, onClick, shouldCloseOnClick, closeMenu]);
|
|
4072
|
+
}, [disabled, hasSubmenu, submenuTrigger, openSubmenu, onClick, shouldCloseOnClick, closeMenu]);
|
|
4067
4073
|
return {
|
|
4068
4074
|
liRef,
|
|
4069
4075
|
mergedRef,
|
|
@@ -4073,6 +4079,7 @@ const useMenuItem = ({ ref, role, hasSubmenu, disabled, onClick, closeOnClick, }
|
|
|
4073
4079
|
scheduleClose,
|
|
4074
4080
|
clearTimers,
|
|
4075
4081
|
closeSubmenu,
|
|
4082
|
+
submenuTrigger,
|
|
4076
4083
|
};
|
|
4077
4084
|
};
|
|
4078
4085
|
|
|
@@ -4147,13 +4154,14 @@ const MENU_ITEM_STYLES = theme.createStyles((theme) => {
|
|
|
4147
4154
|
};
|
|
4148
4155
|
}, { id: 'menu-item' });
|
|
4149
4156
|
|
|
4150
|
-
const MenuItem = ({ ref, label, icon, iconColor, role = 'menuitem', checked, selected, focused, disabled, size = 'default', closeOnClick, submenu, submenuPlacement = 'right', onClick, ...rest }) => {
|
|
4157
|
+
const MenuItem = ({ ref, label, icon, iconColor, role = 'menuitem', checked, selected, focused, disabled, size = 'default', closeOnClick, submenu, submenuTrigger = 'click', submenuPlacement = 'right', onClick, ...rest }) => {
|
|
4151
4158
|
const hasSubmenu = submenu !== undefined;
|
|
4152
4159
|
const isCheckable = role === 'menuitemcheckbox' || role === 'menuitemradio';
|
|
4153
4160
|
const isOption = role === 'option';
|
|
4154
4161
|
const isHighlighted = isCheckable ? Boolean(checked) : Boolean(selected);
|
|
4155
|
-
const { liRef, mergedRef, submenuOpen, handleClick, scheduleOpen, scheduleClose, clearTimers, closeSubmenu, } = useMenuItem({ ref, role, hasSubmenu, disabled, onClick, closeOnClick });
|
|
4156
|
-
|
|
4162
|
+
const { liRef, mergedRef, submenuOpen, handleClick, scheduleOpen, scheduleClose, clearTimers, closeSubmenu, } = useMenuItem({ ref, role, hasSubmenu, disabled, onClick, closeOnClick, submenuTrigger });
|
|
4163
|
+
const isHoverTrigger = submenuTrigger === 'hover';
|
|
4164
|
+
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 }))] }));
|
|
4157
4165
|
};
|
|
4158
4166
|
MenuItem.displayName = 'MenuItem';
|
|
4159
4167
|
|