@mantine/core/cjs/components/Menu/MenuSubItem/MenuSubItem.cjs

React components library focused on usability, accessibility and developer experience

"use client";
require("../../../_virtual/_rolldown/runtime.cjs");
const require_create_scoped_keydown_handler = require("../../../core/utils/create-scoped-keydown-handler/create-scoped-keydown-handler.cjs");
const require_create_event_handler = require("../../../core/utils/create-event-handler/create-event-handler.cjs");
const require_parse_theme_color = require("../../../core/MantineProvider/color-functions/parse-theme-color/parse-theme-color.cjs");
const require_MantineThemeProvider = require("../../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.cjs");
const require_use_props = require("../../../core/MantineProvider/use-props/use-props.cjs");
const require_polymorphic_factory = require("../../../core/factory/polymorphic-factory.cjs");
const require_DirectionProvider = require("../../../core/DirectionProvider/DirectionProvider.cjs");
const require_UnstyledButton = require("../../UnstyledButton/UnstyledButton.cjs");
const require_AccordionChevron = require("../../Accordion/AccordionChevron.cjs");
const require_Menu_context = require("../Menu.context.cjs");
const require_Menu_module = require("../Menu.module.cjs");
const require_MenuSub_context = require("../MenuSub/MenuSub.context.cjs");
let react = require("react");
let _mantine_hooks = require("@mantine/hooks");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/Menu/MenuSubItem/MenuSubItem.tsx
const MenuSubItem = require_polymorphic_factory.polymorphicFactory((props) => {
	const { classNames, className, style, styles, vars, color, leftSection, rightSection, children, disabled, "data-disabled": dataDisabled, closeMenuOnClick, ref, ...others } = require_use_props.useProps("MenuSubItem", null, props);
	const ctx = require_Menu_context.useMenuContext();
	const subCtx = (0, react.use)(require_MenuSub_context.SubMenuContext);
	const theme = require_MantineThemeProvider.useMantineTheme();
	const { dir } = require_DirectionProvider.useDirection();
	const itemRef = (0, react.useRef)(null);
	const _others = others;
	const colors = color ? theme.variantColorResolver({
		color,
		theme,
		variant: "light"
	}) : void 0;
	const parsedThemeColor = color ? require_parse_theme_color.parseThemeColor({
		color,
		theme
	}) : null;
	const handleKeydown = require_create_event_handler.createEventHandler(_others.onKeyDown, (event) => {
		if (event.key === "ArrowRight") {
			subCtx?.open();
			subCtx?.focusFirstItem();
		}
		if (event.key === "ArrowLeft" && subCtx?.parentContext) {
			subCtx.parentContext.close();
			subCtx.parentContext.focusParentItem();
		}
	});
	const handleClick = require_create_event_handler.createEventHandler(_others.onClick, () => {
		if (!dataDisabled && closeMenuOnClick) ctx.closeDropdownImmediately();
	});
	const handleMouseEnter = require_create_event_handler.createEventHandler(_others.onMouseEnter, subCtx?.open);
	const handleMouseLeave = require_create_event_handler.createEventHandler(_others.onMouseLeave, subCtx?.close);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_UnstyledButton.UnstyledButton, {
		onMouseDown: (event) => event.preventDefault(),
		...others,
		unstyled: ctx.unstyled,
		tabIndex: ctx.menuItemTabIndex,
		...ctx.getStyles("item", {
			className,
			style,
			styles,
			classNames
		}),
		ref: (0, _mantine_hooks.useMergedRef)(itemRef, ref),
		role: "menuitem",
		disabled,
		"data-menu-item": true,
		"data-sub-menu-item": true,
		"data-disabled": disabled || dataDisabled || void 0,
		"data-mantine-stop-propagation": true,
		onMouseEnter: handleMouseEnter,
		onMouseLeave: handleMouseLeave,
		onClick: handleClick,
		onKeyDown: require_create_scoped_keydown_handler.createScopedKeydownHandler({
			siblingSelector: "[data-menu-item]:not([data-disabled])",
			parentSelector: "[data-menu-dropdown]",
			activateOnFocus: false,
			loop: ctx.loop,
			dir,
			orientation: "vertical",
			onKeyDown: handleKeydown
		}),
		__vars: {
			"--menu-item-color": parsedThemeColor?.isThemeColor && parsedThemeColor?.shade === void 0 ? `var(--mantine-color-${parsedThemeColor.color}-6)` : colors?.color,
			"--menu-item-hover": colors?.hover
		},
		children: [
			leftSection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
				...ctx.getStyles("itemSection", {
					styles,
					classNames
				}),
				"data-position": "left",
				children: leftSection
			}),
			children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
				...ctx.getStyles("itemLabel", {
					styles,
					classNames
				}),
				children
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
				...ctx.getStyles("itemSection", {
					styles,
					classNames
				}),
				"data-position": "right",
				children: rightSection || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AccordionChevron.AccordionChevron, {
					...ctx.getStyles("chevron"),
					size: 14
				})
			})
		]
	});
});
MenuSubItem.classes = require_Menu_module.default;
MenuSubItem.displayName = "@mantine/core/MenuSubItem";
//#endregion
exports.MenuSubItem = MenuSubItem;

//# sourceMappingURL=MenuSubItem.cjs.map