@yamada-ui/react/dist/cjs/components/menu/menu.cjs

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_check_icon = require('../icon/icons/check-icon.cjs');
const require_chevron_right_icon = require('../icon/icons/chevron-right-icon.cjs');
const require_circle_small_icon = require('../icon/icons/circle-small-icon.cjs');
const require_use_popover = require('../popover/use-popover.cjs');
const require_popover = require('../popover/popover.cjs');
const require_menu_style = require('./menu.style.cjs');
const require_use_menu = require('./use-menu.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);

//#region src/components/menu/menu.tsx
const { ComponentContext, PropsContext: MenuPropsContext, StyleContext, useComponentContext, usePropsContext: useMenuPropsContext, withContext, useRootComponentProps } = require_create_component.createSlotComponent("menu", require_menu_style.menuStyle);
/**
* `Menu` is a component that displays a common dropdown menu.
*
* @see https://yamada-ui.com/docs/components/menu
*/
const MenuRoot = (props) => {
	const [styleContext, mergedProps] = useRootComponentProps(props);
	const [{ animationScheme, initialFocusRef, offset, placement,...popoverProps }, { children, disabled,...rest }] = require_use_popover.usePopoverProps(mergedProps, [
		"disabled",
		"open",
		"defaultOpen",
		"onOpen",
		"onClose"
	]);
	const { closeOnSelect, descendants, open, subMenu, subMenuDirection, updateRef, getContentProps, getContextTriggerProps, getSeparatorProps, getTriggerProps, onActiveDescendant, onClose, onCloseRef, onCloseSubMenu, onOpen, onSelect } = require_use_menu.useMenu({
		disabled,
		...rest
	});
	const mergedPopoverProps = (0, react.useMemo)(() => ({
		...popoverProps,
		animationScheme: animationScheme ?? (subMenu ? "inline-start" : "block-start"),
		autoFocus: !!initialFocusRef,
		disabled,
		initialFocusRef,
		offset: offset ?? (subMenu ? [0, 0] : void 0),
		open,
		placement: placement ?? (subMenu ? `center-${subMenuDirection}` : "end-start"),
		updateRef,
		onClose,
		onOpen
	}), [
		animationScheme,
		disabled,
		initialFocusRef,
		offset,
		onClose,
		onOpen,
		open,
		placement,
		popoverProps,
		subMenu,
		subMenuDirection,
		updateRef
	]);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyleContext, {
		value: styleContext,
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_menu.MenuDescendantsContext, {
			value: descendants,
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_menu.MenuContext, {
				value: (0, react.useMemo)(() => ({
					subMenu,
					subMenuDirection,
					onActiveDescendant,
					onClose,
					onCloseSubMenu,
					onOpen,
					onSelect
				}), [
					onClose,
					onOpen,
					onSelect,
					onActiveDescendant,
					subMenu,
					subMenuDirection,
					onCloseSubMenu
				]),
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_menu.MainMenuContext, {
					value: (0, react.useMemo)(() => ({
						closeOnSelect,
						descendants,
						onActiveDescendant,
						onCloseRef,
						onSelect
					}), [
						closeOnSelect,
						descendants,
						onActiveDescendant,
						onCloseRef,
						onSelect
					]),
					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
						value: (0, react.useMemo)(() => ({
							getContentProps,
							getContextTriggerProps,
							getSeparatorProps,
							getTriggerProps
						}), [
							getContentProps,
							getContextTriggerProps,
							getSeparatorProps,
							getTriggerProps
						]),
						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_popover.PopoverRoot, {
							...mergedPopoverProps,
							children
						})
					})
				})
			})
		})
	});
};
const MenuTrigger = withContext(require_popover.PopoverTrigger, "trigger")(void 0, (props) => {
	const { getTriggerProps } = useComponentContext();
	return (0, require_utils_index.utils_exports.cast)(getTriggerProps((0, require_utils_index.utils_exports.cast)(props)));
});
const MenuContextTrigger = withContext(({ children, onContextMenu,...rest }) => {
	const [rect, setRect] = (0, react.useState)({
		left: 0,
		top: 0
	});
	const { getContextTriggerProps } = useComponentContext();
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuAnchor, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, { style: {
		position: "fixed",
		...rect
	} }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, {
		asChild: true,
		...getContextTriggerProps({
			onContextMenu: (0, require_utils_index.utils_exports.handlerAll)(onContextMenu, (ev) => {
				setRect({
					left: ev.clientX,
					top: ev.clientY
				});
			}),
			...rest
		}),
		children
	})] });
}, "contextTrigger")();
const MenuAnchor = withContext(require_popover.PopoverAnchor, "anchor")();
const MenuContent = withContext(require_popover.PopoverContent, "content")(void 0, ({ children, footer, header, items = [], footerProps, headerProps, portalProps,...rest }) => {
	const { subMenu } = require_use_menu.useMenuContext();
	const { getContentProps } = useComponentContext();
	const computedChildren = (0, react.useMemo)(() => {
		if (children) return children;
		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
			header ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuHeader, {
				...headerProps,
				children: header
			}) : null,
			items.map((props, index) => {
				if ("type" in props) if (props.type === "radio") {
					const { type, hasSeparator = true, hasEndSeparator = hasSeparator, hasStartSeparator = hasSeparator, items: items$1 = [],...rest$1 } = props;
					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [
						hasStartSeparator ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuSeparator, {}) : null,
						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuOptionGroup, {
							type,
							...rest$1,
							children: items$1.map(({ label,...rest$2 }, index$1) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuOptionItem, {
								...rest$2,
								children: label
							}, index$1))
						}),
						hasEndSeparator ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuSeparator, {}) : null
					] }, index);
				} else if (props.type === "checkbox") {
					const { type, hasSeparator = true, hasEndSeparator = hasSeparator, hasStartSeparator = hasSeparator, items: items$1 = [],...rest$1 } = props;
					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [
						hasStartSeparator ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuSeparator, {}) : null,
						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuOptionGroup, {
							type,
							...rest$1,
							children: items$1.map(({ label,...rest$2 }, index$1) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuOptionItem, {
								...rest$2,
								children: label
							}, index$1))
						}),
						hasEndSeparator ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuSeparator, {}) : null
					] }, index);
				} else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuSeparator, {}, index);
				else if ("items" in props) {
					const { hasSeparator = true, hasEndSeparator = hasSeparator, hasStartSeparator = hasSeparator, items: items$1 = [],...rest$1 } = props;
					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [
						hasStartSeparator ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuSeparator, {}) : null,
						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuGroup, {
							...rest$1,
							children: items$1.map(({ label,...rest$2 }, index$1) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuItem, {
								...rest$2,
								children: label
							}, index$1))
						}),
						hasEndSeparator ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuSeparator, {}) : null
					] }, index);
				} else if ("value" in props) {
					const { label,...rest$1 } = props;
					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuItem, {
						...rest$1,
						children: label
					}, index);
				}
			}),
			footer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuFooter, {
				...footerProps,
				children: footer
			}) : null
		] });
	}, [
		children,
		footer,
		footerProps,
		header,
		headerProps,
		items
	]);
	return {
		...getContentProps((0, require_utils_index.utils_exports.cast)({
			...rest,
			children: computedChildren
		})),
		portalProps: subMenu ? {
			...portalProps,
			disabled: true
		} : portalProps
	};
});
const MenuHeader = withContext("div", "header")({ "data-header": "" });
const MenuFooter = withContext("div", "footer")({ "data-footer": "" });
const MenuLabel = withContext("span", "label")(void 0, (props) => {
	const { getLabelProps } = require_use_menu.useMenuGroupContext();
	return getLabelProps(props);
});
const MenuGroup = withContext(({ children, label, labelProps,...rest }) => {
	const { getGroupProps, getLabelProps } = require_use_menu.useMenuGroup(rest);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_menu.MenuGroupContext, {
		value: (0, react.useMemo)(() => ({ getLabelProps }), [getLabelProps]),
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
			...getGroupProps(),
			children: [label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuLabel, {
				...labelProps,
				children: label
			}) : null, children]
		})
	});
}, "group")();
const MenuOptionGroup = withContext(({ type: typeProp, defaultValue, value: valueProp, onChange: onChangeProp,...rest }) => {
	const { type, value, onChange } = require_use_menu.useMenuOptionGroup({
		type: typeProp,
		defaultValue,
		value: valueProp,
		onChange: onChangeProp
	});
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_menu.MenuOptionGroupContext, {
		value: (0, react.useMemo)(() => ({
			type,
			value,
			onChange
		}), [
			type,
			value,
			onChange
		]),
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuGroup, { ...rest })
	});
}, {
	name: "optionGroup",
	slot: ["group", "option"]
})();
const MenuItem = withContext(({ children,...rest }) => {
	const { subMenuTrigger, getItemProps } = require_use_menu.useMenuItem(rest);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
		...getItemProps(),
		children: [children, subMenuTrigger ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuIndicator, {
			as: require_chevron_right_icon.ChevronRightIcon,
			ms: "auto"
		}) : null]
	});
}, "item")();
const MenuOptionItem = withContext(({ children, icon,...rest }) => {
	const { type, getIndicatorProps, getOptionItemProps } = require_use_menu.useMenuOptionItem(rest);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
		...getOptionItemProps(),
		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuIndicator, {
			...getIndicatorProps(),
			children: icon || (type === "radio" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_circle_small_icon.CircleSmallIcon, { fill: "currentColor" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_check_icon.CheckIcon, {}))
		}), children]
	});
}, {
	name: "optionItem",
	slot: ["item", "option"]
})();
const MenuIndicator = withContext("div", "indicator")();
const MenuCommand = withContext("kbd", "command")();
const MenuSeparator = withContext("hr", "separator")(void 0, (props) => {
	const { getSeparatorProps } = useComponentContext();
	return getSeparatorProps(props);
});

//#endregion
exports.MenuAnchor = MenuAnchor;
exports.MenuCommand = MenuCommand;
exports.MenuContent = MenuContent;
exports.MenuContextTrigger = MenuContextTrigger;
exports.MenuFooter = MenuFooter;
exports.MenuGroup = MenuGroup;
exports.MenuHeader = MenuHeader;
exports.MenuIndicator = MenuIndicator;
exports.MenuItem = MenuItem;
exports.MenuLabel = MenuLabel;
exports.MenuOptionGroup = MenuOptionGroup;
exports.MenuOptionItem = MenuOptionItem;
exports.MenuPropsContext = MenuPropsContext;
exports.MenuRoot = MenuRoot;
exports.MenuSeparator = MenuSeparator;
exports.MenuTrigger = MenuTrigger;
exports.useMenuPropsContext = useMenuPropsContext;
//# sourceMappingURL=menu.cjs.map