@puzzle-ui/ui 0.3.0 → 0.5.0

package/dist/components/overlays/context-menu/index.cjs

@@ -0,0 +1,830 @@
+"use client";
+const require_index = require("../popout/index.cjs");
+const require_context_menu_utils = require("./context-menu.utils.cjs");
+;/* empty css                   */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/overlays/context-menu/index.tsx
+const ContextMenuContext = (0, react.createContext)(null);
+const RadioGroupContext = (0, react.createContext)(null);
+const SubContext = (0, react.createContext)(null);
+const useContextMenuContext = () => {
+	const context = (0, react.useContext)(ContextMenuContext);
+	if (!context) throw new Error("ContextMenu components must be rendered inside ContextMenu.");
+	return context;
+};
+const useRadioGroupContext = () => {
+	const context = (0, react.useContext)(RadioGroupContext);
+	if (!context) throw new Error("ContextMenu.RadioItem must be rendered inside ContextMenu.RadioGroup.");
+	return context;
+};
+const useSubContext = () => {
+	const context = (0, react.useContext)(SubContext);
+	if (!context) throw new Error("ContextMenu.SubTrigger and SubContent must be rendered inside ContextMenu.Sub.");
+	return context;
+};
+const getMenuElements = (children) => react.Children.toArray(children).flatMap((child) => {
+	if ((0, react.isValidElement)(child) && child.type === react.Fragment) return getMenuElements(child.props.children);
+	return (0, react.isValidElement)(child) ? [child] : [];
+});
+const ContextMenuRoot = ({ children, open, defaultOpen = false, onOpenChange, disabled = false, triggerClassName, contentClassName }) => {
+	const baseId = (0, react.useId)();
+	const triggerId = `${baseId}-trigger`;
+	const contentId = `${baseId}-content`;
+	const childElements = getMenuElements(children);
+	const triggers = childElements.filter((child) => child.type === ContextMenuTrigger);
+	const contents = childElements.filter((child) => child.type === ContextMenuContent);
+	const triggerElement = triggers[0];
+	const contentElement = contents[0];
+	if (triggers.length !== 1 || contents.length !== 1 || !triggerElement || !contentElement) throw new Error("ContextMenu requires exactly one ContextMenu.Trigger and one ContextMenu.Content.");
+	const controlled = open !== void 0;
+	const [internalOpen, setInternalOpen] = (0, react.useState)(defaultOpen);
+	const triggerDisabled = disabled || triggerElement.props.disabled === true;
+	const isOpen = !triggerDisabled && (controlled ? open ?? false : internalOpen);
+	const [point, setPoint] = (0, react.useState)({
+		x: 0,
+		y: 0
+	});
+	const triggerRef = (0, react.useRef)(null);
+	const focusPositionRef = (0, react.useRef)("first");
+	const changeOpen = (0, react.useCallback)((nextOpen) => {
+		if (triggerDisabled && nextOpen) return;
+		if (nextOpen === isOpen) return;
+		if (!controlled) setInternalOpen(nextOpen);
+		onOpenChange?.(nextOpen);
+	}, [
+		controlled,
+		isOpen,
+		onOpenChange,
+		triggerDisabled
+	]);
+	const openAt = (0, react.useCallback)((nextPoint, position = "first") => {
+		if (triggerDisabled) return;
+		setPoint({
+			x: Math.max(0, nextPoint.x),
+			y: Math.max(0, nextPoint.y)
+		});
+		focusPositionRef.current = position;
+		changeOpen(true);
+	}, [changeOpen, triggerDisabled]);
+	const close = (0, react.useCallback)((restoreFocus = false) => {
+		changeOpen(false);
+		if (restoreFocus) require_context_menu_utils.focusElement(triggerRef.current ?? void 0);
+	}, [changeOpen]);
+	const context = (0, react.useMemo)(() => ({
+		open: isOpen,
+		disabled: triggerDisabled,
+		triggerId,
+		contentId,
+		triggerRef,
+		focusPositionRef,
+		openAt,
+		changeOpen,
+		close
+	}), [
+		isOpen,
+		triggerDisabled,
+		triggerId,
+		contentId,
+		openAt,
+		changeOpen,
+		close
+	]);
+	const trigger = (0, react.cloneElement)(triggerElement, {
+		id: triggerId,
+		disabled: triggerDisabled,
+		className: (0, _puzzle_ui_core.cn)(triggerElement.props.className, triggerClassName)
+	});
+	const content = (0, react.cloneElement)(contentElement, {
+		id: contentId,
+		className: (0, _puzzle_ui_core.cn)(contentElement.props.className, contentClassName)
+	});
+	const anchor = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"aria-hidden": "true",
+		className: "puzzle-context-menu__anchor",
+		style: {
+			left: point.x,
+			top: point.y
+		},
+		tabIndex: -1
+	});
+	(0, react.useEffect)(() => {
+		if (!isOpen || !triggerRef.current) return;
+		const ownerDocument = triggerRef.current.ownerDocument;
+		const handleOutsidePointerDown = (event) => {
+			const target = event.target;
+			if (!(target instanceof ownerDocument.defaultView.Node)) return;
+			if (triggerRef.current?.contains(target) || target instanceof Element && target.closest(".puzzle-context-menu__popover")) return;
+			changeOpen(false);
+		};
+		ownerDocument.addEventListener("pointerdown", handleOutsidePointerDown, true);
+		return () => {
+			ownerDocument.removeEventListener("pointerdown", handleOutsidePointerDown, true);
+		};
+	}, [isOpen, changeOpen]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ContextMenuContext.Provider, {
+		value: context,
+		children: [trigger, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Popout, {
+			trigger: anchor,
+			open: isOpen,
+			onOpenChange: (nextOpen) => {
+				if (nextOpen) changeOpen(true);
+				else close(true);
+			},
+			position: "bottom",
+			align: "start",
+			offset: 0,
+			collisionPadding: 8,
+			closeOnOutsideClick: false,
+			closeOnEscape: true,
+			contentClassName: "puzzle-context-menu__popover",
+			children: content
+		})]
+	});
+};
+const ContextMenuTrigger = ({ children, asChild = false, disabled = false, id, className, ref, onContextMenu, onClick, onKeyDown, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, ...triggerProps }) => {
+	const context = useContextMenuContext();
+	const longPressTimerRef = (0, react.useRef)(null);
+	const pointerStartRef = (0, react.useRef)(null);
+	const isDisabled = disabled || context.disabled;
+	const clearLongPress = (0, react.useCallback)(() => {
+		if (longPressTimerRef.current !== null) {
+			clearTimeout(longPressTimerRef.current);
+			longPressTimerRef.current = null;
+		}
+	}, []);
+	(0, react.useEffect)(() => clearLongPress, [clearLongPress]);
+	const handleRef = (0, react.useCallback)((node) => {
+		context.triggerRef.current = node;
+		require_context_menu_utils.setRef(ref, node);
+	}, [context.triggerRef, ref]);
+	const handleContextMenu = (event) => {
+		onContextMenu?.(event);
+		if (event.defaultPrevented || isDisabled) return;
+		event.preventDefault();
+		context.triggerRef.current = event.currentTarget;
+		context.openAt({
+			x: event.clientX,
+			y: event.clientY
+		});
+	};
+	const handleClick = (event) => {
+		onClick?.(event);
+		if (event.defaultPrevented || isDisabled || event.button !== 0) return;
+		if (event.ctrlKey) {
+			event.preventDefault();
+			context.triggerRef.current = event.currentTarget;
+			context.openAt({
+				x: event.clientX,
+				y: event.clientY
+			});
+			return;
+		}
+		if (context.open) context.close(false);
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || isDisabled) return;
+		const target = event.currentTarget;
+		const rect = target.getBoundingClientRect();
+		if (event.key === "ContextMenu" || event.shiftKey && event.key === "F10") {
+			event.preventDefault();
+			context.triggerRef.current = target;
+			context.openAt({
+				x: rect.left,
+				y: rect.bottom
+			});
+			return;
+		}
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			event.preventDefault();
+			context.triggerRef.current = target;
+			context.openAt({
+				x: rect.left,
+				y: rect.bottom
+			}, event.key === "ArrowUp" ? "last" : "first");
+		}
+	};
+	const handlePointerDown = (event) => {
+		onPointerDown?.(event);
+		if (event.defaultPrevented || isDisabled || event.pointerType !== "touch") return;
+		pointerStartRef.current = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		const target = event.currentTarget;
+		longPressTimerRef.current = setTimeout(() => {
+			const rect = target.getBoundingClientRect();
+			context.triggerRef.current = target;
+			context.openAt({
+				x: rect.left + rect.width / 2,
+				y: rect.top + rect.height / 2
+			});
+		}, 550);
+	};
+	const handlePointerMove = (event) => {
+		onPointerMove?.(event);
+		const start = pointerStartRef.current;
+		if (start && (Math.abs(event.clientX - start.x) > 10 || Math.abs(event.clientY - start.y) > 10)) {
+			clearLongPress();
+			pointerStartRef.current = null;
+		}
+	};
+	const handlePointerEnd = (event, callback) => {
+		callback?.(event);
+		clearLongPress();
+		pointerStartRef.current = null;
+	};
+	const commonProps = {
+		...triggerProps,
+		id,
+		ref: handleRef,
+		className: (0, _puzzle_ui_core.cn)("puzzle-context-menu__trigger", className),
+		role: "button",
+		tabIndex: isDisabled ? -1 : triggerProps.tabIndex ?? 0,
+		"aria-haspopup": "menu",
+		"aria-expanded": context.open,
+		"aria-controls": context.open ? context.contentId : void 0,
+		"aria-disabled": isDisabled || void 0,
+		"data-state": context.open ? "open" : "closed",
+		onContextMenu: handleContextMenu,
+		onClick: handleClick,
+		onKeyDown: handleKeyDown,
+		onPointerDown: handlePointerDown,
+		onPointerMove: handlePointerMove,
+		onPointerUp: (event) => handlePointerEnd(event, onPointerUp),
+		onPointerCancel: (event) => handlePointerEnd(event, onPointerCancel)
+	};
+	if (!asChild) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...commonProps,
+		children
+	});
+	const child = react.Children.only(children);
+	if (!(0, react.isValidElement)(child) || child.type === react.Fragment) throw new Error("ContextMenu.Trigger with asChild expects one non-Fragment element.");
+	const childProps = child.props;
+	const childDisabled = isDisabled || childProps.disabled === true || childProps["aria-disabled"] === true || childProps["aria-disabled"] === "true";
+	return (0, react.cloneElement)(child, {
+		...commonProps,
+		ref: (node) => {
+			handleRef(node);
+			require_context_menu_utils.setRef(childProps.ref, node);
+		},
+		className: (0, _puzzle_ui_core.cn)("puzzle-context-menu__trigger", childProps.className, className),
+		role: child.type === "button" ? void 0 : "button",
+		tabIndex: childDisabled ? -1 : childProps.tabIndex ?? 0,
+		"aria-disabled": childDisabled || void 0,
+		disabled: child.type === "button" ? childDisabled : void 0,
+		onContextMenu: (event) => {
+			if (childDisabled) {
+				event.preventDefault();
+				return;
+			}
+			childProps.onContextMenu?.(event);
+			if (!event.defaultPrevented) handleContextMenu(event);
+		},
+		onClick: (event) => {
+			if (childDisabled) return;
+			childProps.onClick?.(event);
+			if (!event.defaultPrevented) handleClick(event);
+		},
+		onKeyDown: (event) => {
+			childProps.onKeyDown?.(event);
+			if (!event.defaultPrevented) handleKeyDown(event);
+		},
+		onPointerDown: (event) => {
+			childProps.onPointerDown?.(event);
+			if (!event.defaultPrevented) handlePointerDown(event);
+		},
+		onPointerMove: (event) => {
+			childProps.onPointerMove?.(event);
+			if (!event.defaultPrevented) handlePointerMove(event);
+		},
+		onPointerUp: (event) => {
+			childProps.onPointerUp?.(event);
+			handlePointerEnd(event);
+		},
+		onPointerCancel: (event) => {
+			childProps.onPointerCancel?.(event);
+			handlePointerEnd(event);
+		}
+	});
+};
+const ContextMenuContent = ({ children, id, className, style, maxHeight = "min(24rem, calc(100dvh - 1rem))", onKeyDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...contentProps }) => {
+	const context = useContextMenuContext();
+	const positioned = require_index.usePopoutPositioned();
+	const menuRef = (0, react.useRef)(null);
+	const typeaheadRef = (0, react.useRef)("");
+	const typeaheadTimerRef = (0, react.useRef)(null);
+	const initialFocusDoneRef = (0, react.useRef)(false);
+	(0, react.useEffect)(() => {
+		if (!context.open) {
+			initialFocusDoneRef.current = false;
+			typeaheadRef.current = "";
+			if (typeaheadTimerRef.current !== null) {
+				clearTimeout(typeaheadTimerRef.current);
+				typeaheadTimerRef.current = null;
+			}
+		}
+	}, [context.open]);
+	(0, react.useEffect)(() => {
+		if (!context.open || !positioned || initialFocusDoneRef.current) return;
+		const menu = menuRef.current;
+		if (!menu) return;
+		initialFocusDoneRef.current = true;
+		const items = require_context_menu_utils.getEnabledMenuItems(menu);
+		const target = context.focusPositionRef.current === "last" ? items[items.length - 1] : items[0];
+		require_context_menu_utils.focusElement(target ?? menu);
+	}, [
+		context.open,
+		context.focusPositionRef,
+		positioned
+	]);
+	(0, react.useEffect)(() => () => {
+		if (typeaheadTimerRef.current !== null) clearTimeout(typeaheadTimerRef.current);
+	}, []);
+	const focusIndex = (items, index) => {
+		if (index >= 0 && index < items.length) require_context_menu_utils.focusElement(items[index]);
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		const menu = menuRef.current;
+		if (!menu) return;
+		if (event.key === "Escape") {
+			event.preventDefault();
+			context.close(true);
+			return;
+		}
+		if (event.key === "Tab") {
+			const ownerDocument = event.currentTarget.ownerDocument;
+			const trigger = context.triggerRef.current;
+			const selector = [
+				"a[href]",
+				"area[href]",
+				"button:not([disabled])",
+				"input:not([disabled]):not([type='hidden'])",
+				"select:not([disabled])",
+				"textarea:not([disabled])",
+				"iframe",
+				"summary",
+				"[contenteditable='true']",
+				"[tabindex]:not([tabindex='-1'])"
+			].join(",");
+			const tabbableElements = Array.from(ownerDocument.querySelectorAll(selector)).filter((element) => {
+				if (menu.contains(element) || element.hidden || element.tabIndex < 0 || element.getAttribute("aria-disabled") === "true" || element.closest("[hidden], [inert], [aria-hidden='true']")) return false;
+				const computedStyle = ownerDocument.defaultView?.getComputedStyle(element);
+				return computedStyle?.display !== "none" && computedStyle?.visibility !== "hidden";
+			});
+			const triggerIndex = trigger ? tabbableElements.indexOf(trigger) : -1;
+			const targetIndex = triggerIndex + (event.shiftKey ? -1 : 1);
+			const target = triggerIndex >= 0 && tabbableElements.length > 0 ? tabbableElements[(targetIndex + tabbableElements.length) % tabbableElements.length] : void 0;
+			context.close(false);
+			if (target) {
+				event.preventDefault();
+				require_context_menu_utils.focusElement(target);
+			}
+			return;
+		}
+		const items = require_context_menu_utils.getEnabledMenuItems(menu);
+		const activeIndex = items.indexOf(menu.ownerDocument.activeElement);
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			event.preventDefault();
+			const direction = event.key === "ArrowDown" ? 1 : -1;
+			const startIndex = activeIndex < 0 ? direction === 1 ? -1 : 0 : activeIndex;
+			const nextIndex = require_context_menu_utils.findNextMenuItemIndex(items.map(() => ({ disabled: false })), startIndex, direction);
+			focusIndex(items, nextIndex);
+			return;
+		}
+		if (event.key === "Home" || event.key === "End") {
+			event.preventDefault();
+			focusIndex(items, event.key === "Home" ? 0 : items.length - 1);
+			return;
+		}
+		if (event.key === "ArrowRight") {
+			const activeItem = items[activeIndex];
+			if (activeItem?.hasAttribute("data-puzzle-context-menu-sub-trigger")) {
+				event.preventDefault();
+				activeItem.click();
+			}
+			return;
+		}
+		if (event.key.length !== 1 || event.key === " " || event.ctrlKey || event.metaKey || event.altKey) return;
+		event.preventDefault();
+		const nextBuffer = `${typeaheadRef.current}${event.key}`;
+		const query = [...nextBuffer].every((character) => character.toLocaleLowerCase() === nextBuffer[0].toLocaleLowerCase()) ? event.key : nextBuffer;
+		typeaheadRef.current = query;
+		if (typeaheadTimerRef.current !== null) clearTimeout(typeaheadTimerRef.current);
+		typeaheadTimerRef.current = setTimeout(() => {
+			typeaheadRef.current = "";
+			typeaheadTimerRef.current = null;
+		}, 500);
+		const nextIndex = require_context_menu_utils.findMenuItemIndexByText(items.map((item) => ({ text: require_context_menu_utils.getMenuItemText(item) })), query, activeIndex);
+		focusIndex(items, nextIndex);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...contentProps,
+		ref: menuRef,
+		id: id ?? context.contentId,
+		className: (0, _puzzle_ui_core.cn)("puzzle-context-menu__content", className),
+		role: "menu",
+		"aria-orientation": "vertical",
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy ?? context.triggerId,
+		tabIndex: -1,
+		"data-state": context.open ? "open" : "closed",
+		style: {
+			...style,
+			maxHeight
+		},
+		onKeyDown: handleKeyDown,
+		children
+	});
+};
+const ContextMenuItem = ({ children, className, disabled = false, "aria-disabled": ariaDisabled, textValue, closeOnSelect = true, variant = "default", onClick, onSelect, ...itemProps }) => {
+	const context = useContextMenuContext();
+	const itemDisabled = disabled || ariaDisabled === true || ariaDisabled === "true";
+	const handleClick = (event) => {
+		if (itemDisabled) {
+			event.preventDefault();
+			event.stopPropagation();
+			return;
+		}
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		onSelect?.(event);
+		if (!event.defaultPrevented && closeOnSelect) context.close(true);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		...itemProps,
+		type: "button",
+		className: (0, _puzzle_ui_core.cn)("puzzle-context-menu__item", variant === "danger" && "puzzle-context-menu__item--danger", className),
+		role: "menuitem",
+		tabIndex: -1,
+		disabled: itemDisabled,
+		"aria-disabled": itemDisabled || void 0,
+		"data-puzzle-context-menu-item": "true",
+		"data-text-value": textValue,
+		onClick: handleClick,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "puzzle-context-menu__item-label",
+			children
+		})
+	});
+};
+const ContextMenuGroup = ({ children, className, "aria-label": ariaLabel, ...groupProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	...groupProps,
+	className: (0, _puzzle_ui_core.cn)("puzzle-context-menu__group", className),
+	role: "group",
+	"aria-label": ariaLabel,
+	children
+});
+const ContextMenuLabel = ({ children, className, ...labelProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	...labelProps,
+	className: (0, _puzzle_ui_core.cn)("puzzle-context-menu__label", className),
+	children
+});
+const ContextMenuSeparator = ({ className, ...separatorProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	...separatorProps,
+	className: (0, _puzzle_ui_core.cn)("puzzle-context-menu__separator", className),
+	role: "separator",
+	"aria-orientation": "horizontal"
+});
+const ContextMenuCheckboxItem = ({ children, checked, defaultChecked = false, onCheckedChange, closeOnSelect = false, textValue, className, disabled = false, "aria-disabled": ariaDisabled, onClick, onSelect, ...itemProps }) => {
+	const context = useContextMenuContext();
+	const itemDisabled = disabled || ariaDisabled === true || ariaDisabled === "true";
+	const controlled = checked !== void 0;
+	const [internalChecked, setInternalChecked] = (0, react.useState)(defaultChecked);
+	const resolvedChecked = checked ?? internalChecked;
+	const handleClick = (event) => {
+		if (itemDisabled) {
+			event.preventDefault();
+			return;
+		}
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		onSelect?.(event);
+		if (event.defaultPrevented) return;
+		const nextChecked = resolvedChecked !== true;
+		if (!controlled) setInternalChecked(nextChecked);
+		onCheckedChange?.(nextChecked);
+		if (closeOnSelect) context.close(true);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		...itemProps,
+		type: "button",
+		className: (0, _puzzle_ui_core.cn)("puzzle-context-menu__item", className),
+		role: "menuitemcheckbox",
+		tabIndex: -1,
+		disabled: itemDisabled,
+		"aria-disabled": itemDisabled || void 0,
+		"aria-checked": resolvedChecked === "indeterminate" ? "mixed" : resolvedChecked,
+		"data-state": resolvedChecked === "indeterminate" ? "indeterminate" : resolvedChecked ? "checked" : "unchecked",
+		"data-puzzle-context-menu-item": "true",
+		"data-text-value": textValue,
+		onClick: handleClick,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "puzzle-context-menu__indicator",
+			"aria-hidden": "true",
+			children: resolvedChecked === "indeterminate" ? "−" : resolvedChecked ? "✓" : ""
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "puzzle-context-menu__item-label",
+			children
+		})]
+	});
+};
+const ContextMenuRadioGroup = ({ children, value, defaultValue, onValueChange, className, ...groupProps }) => {
+	const controlled = value !== void 0;
+	const [internalValue, setInternalValue] = (0, react.useState)(defaultValue);
+	const resolvedValue = controlled ? value : internalValue;
+	const setValue = (0, react.useCallback)((nextValue) => {
+		if (nextValue === resolvedValue) return;
+		if (!controlled) setInternalValue(nextValue);
+		onValueChange?.(nextValue);
+	}, [
+		controlled,
+		onValueChange,
+		resolvedValue
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadioGroupContext.Provider, {
+		value: {
+			value: resolvedValue,
+			setValue
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			...groupProps,
+			className: (0, _puzzle_ui_core.cn)("puzzle-context-menu__group", className),
+			role: "group",
+			children
+		})
+	});
+};
+const ContextMenuRadioItem = ({ children, value, closeOnSelect = true, textValue, className, disabled = false, "aria-disabled": ariaDisabled, onClick, onSelect, ...itemProps }) => {
+	const context = useContextMenuContext();
+	const radioGroup = useRadioGroupContext();
+	const checked = radioGroup.value === value;
+	const itemDisabled = disabled || ariaDisabled === true || ariaDisabled === "true";
+	const handleClick = (event) => {
+		if (itemDisabled) {
+			event.preventDefault();
+			return;
+		}
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		onSelect?.(event);
+		if (event.defaultPrevented) return;
+		radioGroup.setValue(value);
+		if (closeOnSelect) context.close(true);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		...itemProps,
+		type: "button",
+		className: (0, _puzzle_ui_core.cn)("puzzle-context-menu__item", className),
+		role: "menuitemradio",
+		tabIndex: -1,
+		disabled: itemDisabled,
+		"aria-disabled": itemDisabled || void 0,
+		"aria-checked": checked,
+		"data-state": checked ? "checked" : "unchecked",
+		"data-puzzle-context-menu-item": "true",
+		"data-text-value": textValue,
+		onClick: handleClick,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "puzzle-context-menu__indicator",
+			"aria-hidden": "true",
+			children: checked ? "●" : ""
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "puzzle-context-menu__item-label",
+			children
+		})]
+	});
+};
+const ContextMenuSub = ({ children, defaultOpen = false }) => {
+	const rootContext = useContextMenuContext();
+	const baseId = (0, react.useId)();
+	const triggerId = `${baseId}-trigger`;
+	const contentId = `${baseId}-content`;
+	const [open, setOpen] = (0, react.useState)(defaultOpen);
+	const triggerRef = (0, react.useRef)(null);
+	const elements = getMenuElements(children);
+	const triggers = elements.filter((child) => child.type === ContextMenuSubTrigger);
+	const contents = elements.filter((child) => child.type === ContextMenuSubContent);
+	const triggerElement = triggers[0];
+	const contentElement = contents[0];
+	if (triggers.length !== 1 || contents.length !== 1 || !triggerElement || !contentElement) throw new Error("ContextMenu.Sub requires exactly one SubTrigger and one SubContent.");
+	(0, react.useEffect)(() => {
+		if (!rootContext.open) setOpen(false);
+	}, [rootContext.open]);
+	const close = (0, react.useCallback)((restoreFocus = false) => {
+		setOpen(false);
+		if (restoreFocus) require_context_menu_utils.focusElement(triggerRef.current ?? void 0);
+	}, []);
+	const subContext = (0, react.useMemo)(() => ({
+		open,
+		setOpen,
+		triggerId,
+		contentId,
+		triggerRef,
+		close
+	}), [
+		open,
+		triggerId,
+		contentId,
+		close
+	]);
+	const trigger = (0, react.cloneElement)(triggerElement, { id: triggerId });
+	const content = (0, react.cloneElement)(contentElement, { id: contentId });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubContext.Provider, {
+		value: subContext,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Popout, {
+			trigger,
+			open,
+			onOpenChange: setOpen,
+			position: "right",
+			align: "start",
+			offset: 4,
+			collisionPadding: 8,
+			action: "hover",
+			closeOnOutsideClick: true,
+			closeOnEscape: true,
+			contentClassName: "puzzle-context-menu__popover puzzle-context-menu__submenu-popover",
+			children: content
+		})
+	});
+};
+const ContextMenuSubTrigger = (0, react.forwardRef)(({ children, className, disabled = false, onClick, onKeyDown, ...props }, ref) => {
+	const context = useSubContext();
+	const handleClick = (event) => {
+		onClick?.(event);
+		if (!event.defaultPrevented && !disabled) context.setOpen(true);
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (!event.defaultPrevented && !disabled && event.key === "ArrowRight") {
+			event.preventDefault();
+			context.setOpen(true);
+		}
+		if (!event.defaultPrevented && !disabled && event.key === "ArrowLeft") {
+			event.preventDefault();
+			context.close(true);
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		...props,
+		ref: (node) => {
+			context.triggerRef.current = node;
+			require_context_menu_utils.setRef(ref, node);
+		},
+		id: context.triggerId,
+		type: "button",
+		role: "menuitem",
+		tabIndex: -1,
+		className: (0, _puzzle_ui_core.cn)("puzzle-context-menu__item", className),
+		"aria-haspopup": "menu",
+		"aria-expanded": context.open,
+		"aria-controls": context.open ? context.contentId : void 0,
+		"aria-disabled": disabled || void 0,
+		disabled,
+		"data-puzzle-context-menu-item": "true",
+		"data-puzzle-context-menu-sub-trigger": "true",
+		onClick: handleClick,
+		onKeyDown: handleKeyDown,
+		onPointerEnter: () => {
+			if (!disabled) context.setOpen(true);
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "puzzle-context-menu__item-label",
+			children
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "puzzle-context-menu__submenu-indicator",
+			"aria-hidden": "true",
+			children: "›"
+		})]
+	});
+});
+ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
+const ContextMenuSubContent = ({ children, id, className, style, maxHeight = "min(24rem, calc(100dvh - 1rem))", onKeyDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...contentProps }) => {
+	const context = useSubContext();
+	const positioned = require_index.usePopoutPositioned();
+	const menuRef = (0, react.useRef)(null);
+	const typeaheadRef = (0, react.useRef)("");
+	const typeaheadTimerRef = (0, react.useRef)(null);
+	const initialFocusDoneRef = (0, react.useRef)(false);
+	(0, react.useEffect)(() => {
+		if (!context.open) {
+			initialFocusDoneRef.current = false;
+			typeaheadRef.current = "";
+			if (typeaheadTimerRef.current !== null) {
+				clearTimeout(typeaheadTimerRef.current);
+				typeaheadTimerRef.current = null;
+			}
+		}
+	}, [context.open]);
+	(0, react.useEffect)(() => () => {
+		if (typeaheadTimerRef.current !== null) clearTimeout(typeaheadTimerRef.current);
+	}, []);
+	(0, react.useEffect)(() => {
+		if (!context.open || !positioned || initialFocusDoneRef.current) return;
+		const menu = menuRef.current;
+		if (!menu) return;
+		initialFocusDoneRef.current = true;
+		const items = require_context_menu_utils.getEnabledMenuItems(menu);
+		require_context_menu_utils.focusElement(items[0] ?? menu);
+	}, [context.open, positioned]);
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		event.stopPropagation();
+		if (event.key === "ArrowLeft") {
+			event.preventDefault();
+			context.close(true);
+			return;
+		}
+		if (event.key === "Escape") {
+			event.preventDefault();
+			context.close(true);
+			return;
+		}
+		const menu = menuRef.current;
+		if (!menu) return;
+		const items = require_context_menu_utils.getEnabledMenuItems(menu);
+		const activeIndex = items.indexOf(menu.ownerDocument.activeElement);
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			event.preventDefault();
+			const direction = event.key === "ArrowDown" ? 1 : -1;
+			const startIndex = activeIndex < 0 ? direction === 1 ? -1 : 0 : activeIndex;
+			const nextIndex = require_context_menu_utils.findNextMenuItemIndex(items.map(() => ({ disabled: false })), startIndex, direction);
+			if (nextIndex >= 0) require_context_menu_utils.focusElement(items[nextIndex]);
+			return;
+		}
+		if (event.key === "Home" || event.key === "End") {
+			event.preventDefault();
+			const target = event.key === "Home" ? items[0] : items[items.length - 1];
+			if (target) require_context_menu_utils.focusElement(target);
+			return;
+		}
+		if (event.key.length !== 1 || event.key === " " || event.ctrlKey || event.metaKey || event.altKey) return;
+		event.preventDefault();
+		const nextBuffer = `${typeaheadRef.current}${event.key}`;
+		const query = [...nextBuffer].every((character) => character.toLocaleLowerCase() === nextBuffer[0].toLocaleLowerCase()) ? event.key : nextBuffer;
+		typeaheadRef.current = query;
+		if (typeaheadTimerRef.current !== null) clearTimeout(typeaheadTimerRef.current);
+		typeaheadTimerRef.current = setTimeout(() => {
+			typeaheadRef.current = "";
+			typeaheadTimerRef.current = null;
+		}, 500);
+		const nextIndex = require_context_menu_utils.findMenuItemIndexByText(items.map((item) => ({ text: require_context_menu_utils.getMenuItemText(item) })), query, activeIndex);
+		if (nextIndex >= 0) require_context_menu_utils.focusElement(items[nextIndex]);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...contentProps,
+		ref: menuRef,
+		id: id ?? context.contentId,
+		className: (0, _puzzle_ui_core.cn)("puzzle-context-menu__content", className),
+		role: "menu",
+		"aria-orientation": "vertical",
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy ?? context.triggerId,
+		tabIndex: -1,
+		"data-state": context.open ? "open" : "closed",
+		style: {
+			...style,
+			maxHeight
+		},
+		onKeyDown: handleKeyDown,
+		children
+	});
+};
+const ContextMenuSubCompound = Object.assign(ContextMenuSub, {
+	Trigger: ContextMenuSubTrigger,
+	Content: ContextMenuSubContent
+});
+const ContextMenu = Object.assign(ContextMenuRoot, {
+	Trigger: ContextMenuTrigger,
+	Content: ContextMenuContent,
+	Item: ContextMenuItem,
+	Group: ContextMenuGroup,
+	Label: ContextMenuLabel,
+	Separator: ContextMenuSeparator,
+	CheckboxItem: ContextMenuCheckboxItem,
+	RadioGroup: ContextMenuRadioGroup,
+	RadioItem: ContextMenuRadioItem,
+	Sub: ContextMenuSubCompound,
+	SubTrigger: ContextMenuSubTrigger,
+	SubContent: ContextMenuSubContent
+});
+exports.ContextMenu = ContextMenu;
+exports.ContextMenuCheckboxItem = ContextMenuCheckboxItem;
+exports.ContextMenuContent = ContextMenuContent;
+exports.ContextMenuGroup = ContextMenuGroup;
+exports.ContextMenuItem = ContextMenuItem;
+exports.ContextMenuLabel = ContextMenuLabel;
+exports.ContextMenuRadioGroup = ContextMenuRadioGroup;
+exports.ContextMenuRadioItem = ContextMenuRadioItem;
+exports.ContextMenuSeparator = ContextMenuSeparator;
+exports.ContextMenuSub = ContextMenuSubCompound;
+exports.ContextMenuSubContent = ContextMenuSubContent;
+exports.ContextMenuSubTrigger = ContextMenuSubTrigger;
+exports.ContextMenuTrigger = ContextMenuTrigger;
+
+//# sourceMappingURL=index.cjs.map