@mantine/core/esm/components/Menu/MenuSelectableItem/MenuSelectableItem.mjs

React components library focused on usability, accessibility and developer experience

"use client";
import { createScopedKeydownHandler } from "../../../core/utils/create-scoped-keydown-handler/create-scoped-keydown-handler.mjs";
import { createEventHandler } from "../../../core/utils/create-event-handler/create-event-handler.mjs";
import { parseThemeColor } from "../../../core/MantineProvider/color-functions/parse-theme-color/parse-theme-color.mjs";
import { useMantineTheme } from "../../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.mjs";
import { useDirection } from "../../../core/DirectionProvider/DirectionProvider.mjs";
import { UnstyledButton } from "../../UnstyledButton/UnstyledButton.mjs";
import { useMenuContext } from "../Menu.context.mjs";
import { SubMenuContext } from "../MenuSub/MenuSub.context.mjs";
import { use, useRef } from "react";
import { useMergedRef } from "@mantine/hooks";
import { jsx, jsxs } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/Menu/MenuSelectableItem/MenuSelectableItem.tsx
function MenuSelectableItem({ role, checked, indicator, onSelect, color, closeMenuOnClick, rightSection, children, disabled, dataDisabled, className, style, styles, classNames, buttonRef, others }) {
	const ctx = useMenuContext();
	const subCtx = use(SubMenuContext);
	const theme = useMantineTheme();
	const { dir } = useDirection();
	const itemRef = useRef(null);
	const handleClick = createEventHandler(others.onClick, () => {
		if (dataDisabled) return;
		onSelect();
		if (closeMenuOnClick) ctx.closeDropdownImmediately();
	});
	const handleMouseMove = createEventHandler(others.onMouseMove, () => {
		if (!ctx.hasSearch) return;
		const dropdown = itemRef.current?.closest("[data-menu-dropdown]");
		if (!dropdown) return;
		dropdown.querySelectorAll("[data-menu-active]").forEach((node) => {
			if (node !== itemRef.current && node.closest("[data-menu-dropdown]") === dropdown) node.removeAttribute("data-menu-active");
		});
	});
	const handleKeydown = createEventHandler(others.onKeyDown, (event) => {
		if (event.key === "ArrowLeft" && subCtx) {
			subCtx.close();
			subCtx.focusParentItem();
		}
	});
	const colors = color ? theme.variantColorResolver({
		color,
		theme,
		variant: "light"
	}) : void 0;
	const parsedThemeColor = color ? parseThemeColor({
		color,
		theme
	}) : null;
	const renderIndicator = ctx.alignItemsLabels !== "none" || checked;
	return /* @__PURE__ */ jsxs(UnstyledButton, {
		onMouseDown: (event) => event.preventDefault(),
		...others,
		unstyled: ctx.unstyled,
		tabIndex: ctx.menuItemTabIndex,
		...ctx.getStyles("item", {
			className,
			style,
			styles,
			classNames
		}),
		ref: useMergedRef(itemRef, buttonRef),
		role,
		"aria-checked": checked,
		disabled,
		"data-menu-item": true,
		"data-checked": checked || void 0,
		"data-disabled": disabled || dataDisabled || void 0,
		"data-mantine-stop-propagation": true,
		onClick: handleClick,
		onMouseMove: handleMouseMove,
		onKeyDown: 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: [
			renderIndicator && /* @__PURE__ */ jsx("div", {
				...ctx.getStyles("itemIndicator", {
					styles,
					classNames
				}),
				"data-checked": checked || void 0,
				children: checked ? indicator : null
			}),
			children && /* @__PURE__ */ jsx("div", {
				...ctx.getStyles("itemLabel", {
					styles,
					classNames
				}),
				"data-menu-item-label": true,
				children
			}),
			rightSection && /* @__PURE__ */ jsx("div", {
				...ctx.getStyles("itemSection", {
					styles,
					classNames
				}),
				"data-position": "right",
				children: rightSection
			})
		]
	});
}
//#endregion
export { MenuSelectableItem };

//# sourceMappingURL=MenuSelectableItem.mjs.map