@sprawlify/primitives 0.0.1

package/dist/machines/menu/index.mjs

@@ -0,0 +1,1286 @@
+import { t as createAnatomy } from "../../create-anatomy-BbDZbHpC.mjs";
+import { F as scrollIntoView, G as isValidTabEvent, I as clickIfLink, R as observeAttributes, S as queryAll, St as isPrintableKey, U as raf, W as getInitialFocus, Xt as contains, _n as ariaAttr, _t as isDownloadingEvent, an as isAnchorElement, bt as isModifierKey, ft as getEventTarget, ht as isContextMenuEvent, ln as isHTMLElement, lt as getEventKey, o as getByTypeahead, rn as getWindow, sn as isEditableElement, st as addDomEvent, ut as getEventPoint, vn as dataAttr, xt as isOpeningInNewTab } from "../../dom-query-DFCRhyj1.mjs";
+import { Ct as last, Dt as prev, G as cast, _t as first, dt as isEqual, et as hasProp, u as createSplitProps, wt as next } from "../../utils-BZyrxWWR.mjs";
+import { a as createMachine, c as mergeProps, i as createGuards } from "../../core-DCFNMTZF.mjs";
+import "../../interact-outside-BplxR9cR.mjs";
+import { n as trackDismissableElement } from "../../dismissable-DDrx0xnH.mjs";
+import { n as getPlacement, r as getPlacementSide, t as getPlacementStyles } from "../../popper-BPJeAtcA.mjs";
+import { i as isPointInPolygon, r as getElementPolygon } from "../../rect-utils-0ellN0a_.mjs";
+import { t as createProps } from "../../create-props-BnF_vl-E.mjs";
+
+//#region src/machines/menu/menu.anatomy.ts
+const anatomy = createAnatomy("menu").parts("arrow", "arrowTip", "content", "contextTrigger", "indicator", "item", "itemGroup", "itemGroupLabel", "itemIndicator", "itemText", "positioner", "separator", "trigger", "triggerItem");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/machines/menu/menu.dom.ts
+const getTriggerId = (ctx) => ctx.ids?.trigger ?? `menu:${ctx.id}:trigger`;
+const getContextTriggerId = (ctx) => ctx.ids?.contextTrigger ?? `menu:${ctx.id}:ctx-trigger`;
+const getContentId = (ctx) => ctx.ids?.content ?? `menu:${ctx.id}:content`;
+const getArrowId = (ctx) => ctx.ids?.arrow ?? `menu:${ctx.id}:arrow`;
+const getPositionerId = (ctx) => ctx.ids?.positioner ?? `menu:${ctx.id}:popper`;
+const getGroupId = (ctx, id) => ctx.ids?.group?.(id) ?? `menu:${ctx.id}:group:${id}`;
+const getItemId = (ctx, id) => `${ctx.id}/${id}`;
+const getItemValue = (el) => el?.dataset.value ?? null;
+const getGroupLabelId = (ctx, id) => ctx.ids?.groupLabel?.(id) ?? `menu:${ctx.id}:group-label:${id}`;
+const getContentEl = (ctx) => ctx.getById(getContentId(ctx));
+const getPositionerEl = (ctx) => ctx.getById(getPositionerId(ctx));
+const getTriggerEl = (ctx) => ctx.getById(getTriggerId(ctx));
+const getItemEl = (ctx, value) => value ? ctx.getById(getItemId(ctx, value)) : null;
+const getContextTriggerEl = (ctx) => ctx.getById(getContextTriggerId(ctx));
+const getElements = (ctx) => {
+	const selector = `[role^="menuitem"][data-ownedby=${CSS.escape(getContentId(ctx))}]:not([data-disabled])`;
+	return queryAll(getContentEl(ctx), selector);
+};
+const getFirstEl = (ctx) => first(getElements(ctx));
+const getLastEl = (ctx) => last(getElements(ctx));
+const isMatch = (el, value) => {
+	if (!value) return false;
+	return el.id === value || el.dataset.value === value;
+};
+const getNextEl = (ctx, opts) => {
+	const items = getElements(ctx);
+	return next(items, items.findIndex((el) => isMatch(el, opts.value)), { loop: opts.loop ?? opts.loopFocus });
+};
+const getPrevEl = (ctx, opts) => {
+	const items = getElements(ctx);
+	return prev(items, items.findIndex((el) => isMatch(el, opts.value)), { loop: opts.loop ?? opts.loopFocus });
+};
+const getElemByKey = (ctx, opts) => {
+	const items = getElements(ctx);
+	const item = items.find((el) => isMatch(el, opts.value));
+	return getByTypeahead(items, {
+		state: opts.typeaheadState,
+		key: opts.key,
+		activeId: item?.id ?? null
+	});
+};
+const isTargetDisabled = (v) => {
+	return isHTMLElement(v) && (v.dataset.disabled === "" || v.hasAttribute("disabled"));
+};
+const isTriggerItem = (el) => {
+	return !!el?.getAttribute("role")?.startsWith("menuitem") && !!el?.hasAttribute("aria-controls");
+};
+const itemSelectEvent = "menu:select";
+function dispatchSelectionEvent(el, value) {
+	if (!el) return;
+	const event = new (getWindow(el)).CustomEvent(itemSelectEvent, { detail: { value } });
+	el.dispatchEvent(event);
+}
+
+//#endregion
+//#region src/machines/menu/menu.connect.ts
+function connect(service, normalize) {
+	const { context, send, state, computed, prop, scope } = service;
+	const open = state.hasTag("open");
+	const isSubmenu = context.get("isSubmenu");
+	const isTypingAhead = computed("isTypingAhead");
+	const composite = prop("composite");
+	const currentPlacement = context.get("currentPlacement");
+	const anchorPoint = context.get("anchorPoint");
+	const highlightedValue = context.get("highlightedValue");
+	const popperStyles = getPlacementStyles({
+		...prop("positioning"),
+		placement: anchorPoint ? "bottom" : currentPlacement
+	});
+	function getItemState(props$1) {
+		return {
+			id: getItemId(scope, props$1.value),
+			disabled: !!props$1.disabled,
+			highlighted: highlightedValue === props$1.value
+		};
+	}
+	function getOptionItemProps(props$1) {
+		const valueText = props$1.valueText ?? props$1.value;
+		return {
+			...props$1,
+			id: props$1.value,
+			valueText
+		};
+	}
+	function getOptionItemState(props$1) {
+		return {
+			...getItemState(getOptionItemProps(props$1)),
+			checked: !!props$1.checked
+		};
+	}
+	function getItemProps(props$1) {
+		const { closeOnSelect, valueText, value } = props$1;
+		const itemState = getItemState(props$1);
+		const id = getItemId(scope, value);
+		return normalize.element({
+			...parts.item.attrs,
+			id,
+			role: "menuitem",
+			"aria-disabled": ariaAttr(itemState.disabled),
+			"data-disabled": dataAttr(itemState.disabled),
+			"data-ownedby": getContentId(scope),
+			"data-highlighted": dataAttr(itemState.highlighted),
+			"data-value": value,
+			"data-valuetext": valueText,
+			onDragStart(event) {
+				if (event.currentTarget.matches("a[href]")) event.preventDefault();
+			},
+			onPointerMove(event) {
+				if (itemState.disabled) return;
+				if (event.pointerType !== "mouse") return;
+				const target = event.currentTarget;
+				if (itemState.highlighted) return;
+				send({
+					type: "ITEM_POINTERMOVE",
+					id,
+					target,
+					closeOnSelect
+				});
+			},
+			onPointerLeave(event) {
+				if (itemState.disabled) return;
+				if (event.pointerType !== "mouse") return;
+				if (!service.event.previous()?.type.includes("POINTER")) return;
+				const target = event.currentTarget;
+				send({
+					type: "ITEM_POINTERLEAVE",
+					id,
+					target,
+					closeOnSelect
+				});
+			},
+			onPointerDown(event) {
+				if (itemState.disabled) return;
+				const target = event.currentTarget;
+				send({
+					type: "ITEM_POINTERDOWN",
+					target,
+					id,
+					closeOnSelect
+				});
+			},
+			onClick(event) {
+				if (isDownloadingEvent(event)) return;
+				if (isOpeningInNewTab(event)) return;
+				if (itemState.disabled) return;
+				const target = event.currentTarget;
+				send({
+					type: "ITEM_CLICK",
+					target,
+					id,
+					closeOnSelect
+				});
+			}
+		});
+	}
+	return {
+		highlightedValue,
+		open,
+		setOpen(nextOpen) {
+			if (state.hasTag("open") === nextOpen) return;
+			send({ type: nextOpen ? "OPEN" : "CLOSE" });
+		},
+		setHighlightedValue(value) {
+			send({
+				type: "HIGHLIGHTED.SET",
+				value
+			});
+		},
+		setParent(parent) {
+			send({
+				type: "PARENT.SET",
+				value: parent,
+				id: parent.prop("id")
+			});
+		},
+		setChild(child) {
+			send({
+				type: "CHILD.SET",
+				value: child,
+				id: child.prop("id")
+			});
+		},
+		reposition(options = {}) {
+			send({
+				type: "POSITIONING.SET",
+				options
+			});
+		},
+		addItemListener(props$1) {
+			const node = scope.getById(props$1.id);
+			if (!node) return;
+			const listener = () => props$1.onSelect?.();
+			node.addEventListener(itemSelectEvent, listener);
+			return () => node.removeEventListener(itemSelectEvent, listener);
+		},
+		getContextTriggerProps() {
+			return normalize.element({
+				...parts.contextTrigger.attrs,
+				dir: prop("dir"),
+				id: getContextTriggerId(scope),
+				"data-state": open ? "open" : "closed",
+				onPointerDown(event) {
+					if (event.pointerType === "mouse") return;
+					send({
+						type: "CONTEXT_MENU_START",
+						point: getEventPoint(event)
+					});
+				},
+				onPointerCancel(event) {
+					if (event.pointerType === "mouse") return;
+					send({ type: "CONTEXT_MENU_CANCEL" });
+				},
+				onPointerMove(event) {
+					if (event.pointerType === "mouse") return;
+					send({ type: "CONTEXT_MENU_CANCEL" });
+				},
+				onPointerUp(event) {
+					if (event.pointerType === "mouse") return;
+					send({ type: "CONTEXT_MENU_CANCEL" });
+				},
+				onContextMenu(event) {
+					send({
+						type: "CONTEXT_MENU",
+						point: getEventPoint(event)
+					});
+					event.preventDefault();
+				},
+				style: {
+					WebkitTouchCallout: "none",
+					WebkitUserSelect: "none",
+					userSelect: "none"
+				}
+			});
+		},
+		getTriggerItemProps(childApi) {
+			const triggerProps = childApi.getTriggerProps();
+			return mergeProps(getItemProps({ value: triggerProps.id }), triggerProps);
+		},
+		getTriggerProps() {
+			return normalize.button({
+				...isSubmenu ? parts.triggerItem.attrs : parts.trigger.attrs,
+				"data-placement": context.get("currentPlacement"),
+				type: "button",
+				dir: prop("dir"),
+				id: getTriggerId(scope),
+				"data-uid": prop("id"),
+				"aria-haspopup": composite ? "menu" : "dialog",
+				"aria-controls": getContentId(scope),
+				"aria-expanded": open || void 0,
+				"data-state": open ? "open" : "closed",
+				onPointerMove(event) {
+					if (event.pointerType !== "mouse") return;
+					if (isTargetDisabled(event.currentTarget) || !isSubmenu) return;
+					const point = getEventPoint(event);
+					send({
+						type: "TRIGGER_POINTERMOVE",
+						target: event.currentTarget,
+						point
+					});
+				},
+				onPointerLeave(event) {
+					if (isTargetDisabled(event.currentTarget)) return;
+					if (event.pointerType !== "mouse") return;
+					if (!isSubmenu) return;
+					const point = getEventPoint(event);
+					send({
+						type: "TRIGGER_POINTERLEAVE",
+						target: event.currentTarget,
+						point
+					});
+				},
+				onPointerDown(event) {
+					if (isTargetDisabled(event.currentTarget)) return;
+					if (isContextMenuEvent(event)) return;
+					event.preventDefault();
+				},
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (isTargetDisabled(event.currentTarget)) return;
+					send({
+						type: "TRIGGER_CLICK",
+						target: event.currentTarget
+					});
+				},
+				onBlur() {
+					send({ type: "TRIGGER_BLUR" });
+				},
+				onFocus() {
+					send({ type: "TRIGGER_FOCUS" });
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					const exec = {
+						ArrowDown() {
+							send({ type: "ARROW_DOWN" });
+						},
+						ArrowUp() {
+							send({ type: "ARROW_UP" });
+						},
+						Enter() {
+							send({
+								type: "ARROW_DOWN",
+								src: "enter"
+							});
+						},
+						Space() {
+							send({
+								type: "ARROW_DOWN",
+								src: "space"
+							});
+						}
+					}[getEventKey(event, {
+						orientation: "vertical",
+						dir: prop("dir")
+					})];
+					if (exec) {
+						event.preventDefault();
+						exec(event);
+					}
+				}
+			});
+		},
+		getIndicatorProps() {
+			return normalize.element({
+				...parts.indicator.attrs,
+				dir: prop("dir"),
+				"data-state": open ? "open" : "closed"
+			});
+		},
+		getPositionerProps() {
+			return normalize.element({
+				...parts.positioner.attrs,
+				dir: prop("dir"),
+				id: getPositionerId(scope),
+				style: popperStyles.floating
+			});
+		},
+		getArrowProps() {
+			return normalize.element({
+				id: getArrowId(scope),
+				...parts.arrow.attrs,
+				dir: prop("dir"),
+				style: popperStyles.arrow
+			});
+		},
+		getArrowTipProps() {
+			return normalize.element({
+				...parts.arrowTip.attrs,
+				dir: prop("dir"),
+				style: popperStyles.arrowTip
+			});
+		},
+		getContentProps() {
+			return normalize.element({
+				...parts.content.attrs,
+				id: getContentId(scope),
+				"aria-label": prop("aria-label"),
+				hidden: !open,
+				"data-state": open ? "open" : "closed",
+				role: composite ? "menu" : "dialog",
+				tabIndex: 0,
+				dir: prop("dir"),
+				"aria-activedescendant": computed("highlightedId") || void 0,
+				"aria-labelledby": getTriggerId(scope),
+				"data-placement": currentPlacement,
+				onPointerEnter(event) {
+					if (event.pointerType !== "mouse") return;
+					send({ type: "MENU_POINTERENTER" });
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (!contains(event.currentTarget, getEventTarget(event))) return;
+					const target = getEventTarget(event);
+					if (!(target?.closest("[role=menu]") === event.currentTarget || target === event.currentTarget)) return;
+					if (event.key === "Tab") {
+						if (!isValidTabEvent(event)) {
+							event.preventDefault();
+							return;
+						}
+					}
+					const keyMap = {
+						ArrowDown() {
+							send({ type: "ARROW_DOWN" });
+						},
+						ArrowUp() {
+							send({ type: "ARROW_UP" });
+						},
+						ArrowLeft() {
+							send({ type: "ARROW_LEFT" });
+						},
+						ArrowRight() {
+							send({ type: "ARROW_RIGHT" });
+						},
+						Enter() {
+							send({ type: "ENTER" });
+						},
+						Space(event$1) {
+							if (isTypingAhead) send({
+								type: "TYPEAHEAD",
+								key: event$1.key
+							});
+							else keyMap.Enter?.(event$1);
+						},
+						Home() {
+							send({ type: "HOME" });
+						},
+						End() {
+							send({ type: "END" });
+						}
+					};
+					const exec = keyMap[getEventKey(event, { dir: prop("dir") })];
+					if (exec) {
+						exec(event);
+						event.stopPropagation();
+						event.preventDefault();
+						return;
+					}
+					if (!prop("typeahead")) return;
+					if (!isPrintableKey(event)) return;
+					if (isModifierKey(event)) return;
+					if (isEditableElement(target)) return;
+					send({
+						type: "TYPEAHEAD",
+						key: event.key
+					});
+					event.preventDefault();
+				}
+			});
+		},
+		getSeparatorProps() {
+			return normalize.element({
+				...parts.separator.attrs,
+				role: "separator",
+				dir: prop("dir"),
+				"aria-orientation": "horizontal"
+			});
+		},
+		getItemState,
+		getItemProps,
+		getOptionItemState,
+		getOptionItemProps(props$1) {
+			const { type, disabled, closeOnSelect } = props$1;
+			const option = getOptionItemProps(props$1);
+			const itemState = getOptionItemState(props$1);
+			return {
+				...getItemProps(option),
+				...normalize.element({
+					"data-type": type,
+					...parts.item.attrs,
+					dir: prop("dir"),
+					"data-value": option.value,
+					role: `menuitem${type}`,
+					"aria-checked": !!itemState.checked,
+					"data-state": itemState.checked ? "checked" : "unchecked",
+					onClick(event) {
+						if (disabled) return;
+						if (isDownloadingEvent(event)) return;
+						if (isOpeningInNewTab(event)) return;
+						const target = event.currentTarget;
+						send({
+							type: "ITEM_CLICK",
+							target,
+							option,
+							closeOnSelect
+						});
+					}
+				})
+			};
+		},
+		getItemIndicatorProps(props$1) {
+			const itemState = getOptionItemState(cast(props$1));
+			const dataState = itemState.checked ? "checked" : "unchecked";
+			return normalize.element({
+				...parts.itemIndicator.attrs,
+				dir: prop("dir"),
+				"data-disabled": dataAttr(itemState.disabled),
+				"data-highlighted": dataAttr(itemState.highlighted),
+				"data-state": hasProp(props$1, "checked") ? dataState : void 0,
+				hidden: hasProp(props$1, "checked") ? !itemState.checked : void 0
+			});
+		},
+		getItemTextProps(props$1) {
+			const itemState = getOptionItemState(cast(props$1));
+			const dataState = itemState.checked ? "checked" : "unchecked";
+			return normalize.element({
+				...parts.itemText.attrs,
+				dir: prop("dir"),
+				"data-disabled": dataAttr(itemState.disabled),
+				"data-highlighted": dataAttr(itemState.highlighted),
+				"data-state": hasProp(props$1, "checked") ? dataState : void 0
+			});
+		},
+		getItemGroupLabelProps(props$1) {
+			return normalize.element({
+				...parts.itemGroupLabel.attrs,
+				id: getGroupLabelId(scope, props$1.htmlFor),
+				dir: prop("dir")
+			});
+		},
+		getItemGroupProps(props$1) {
+			return normalize.element({
+				id: getGroupId(scope, props$1.id),
+				...parts.itemGroup.attrs,
+				dir: prop("dir"),
+				"aria-labelledby": getGroupLabelId(scope, props$1.id),
+				role: "group"
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machines/menu/menu.machine.ts
+const { not, and, or } = createGuards();
+const machine = createMachine({
+	props({ props: props$1 }) {
+		return {
+			closeOnSelect: true,
+			typeahead: true,
+			composite: true,
+			loopFocus: false,
+			navigate(details) {
+				clickIfLink(details.node);
+			},
+			...props$1,
+			positioning: {
+				placement: "bottom-start",
+				gutter: 8,
+				...props$1.positioning
+			}
+		};
+	},
+	initialState({ prop }) {
+		return prop("open") || prop("defaultOpen") ? "open" : "idle";
+	},
+	context({ bindable, prop }) {
+		return {
+			suspendPointer: bindable(() => ({ defaultValue: false })),
+			highlightedValue: bindable(() => ({
+				defaultValue: prop("defaultHighlightedValue") || null,
+				value: prop("highlightedValue"),
+				onChange(value) {
+					prop("onHighlightChange")?.({ highlightedValue: value });
+				}
+			})),
+			lastHighlightedValue: bindable(() => ({ defaultValue: null })),
+			currentPlacement: bindable(() => ({ defaultValue: void 0 })),
+			intentPolygon: bindable(() => ({ defaultValue: null })),
+			anchorPoint: bindable(() => ({
+				defaultValue: null,
+				hash(value) {
+					return `x: ${value?.x}, y: ${value?.y}`;
+				}
+			})),
+			isSubmenu: bindable(() => ({ defaultValue: false }))
+		};
+	},
+	refs() {
+		return {
+			parent: null,
+			children: {},
+			typeaheadState: { ...getByTypeahead.defaultOptions },
+			positioningOverride: {}
+		};
+	},
+	computed: {
+		isRtl: ({ prop }) => prop("dir") === "rtl",
+		isTypingAhead: ({ refs }) => refs.get("typeaheadState").keysSoFar !== "",
+		highlightedId: ({ context, scope, refs }) => resolveItemId(refs.get("children"), context.get("highlightedValue"), scope)
+	},
+	watch({ track, action, context, prop }) {
+		track([() => context.get("isSubmenu")], () => {
+			action(["setSubmenuPlacement"]);
+		});
+		track([() => context.hash("anchorPoint")], () => {
+			if (!context.get("anchorPoint")) return;
+			action(["reposition"]);
+		});
+		track([() => prop("open")], () => {
+			action(["toggleVisibility"]);
+		});
+	},
+	on: {
+		"PARENT.SET": { actions: ["setParentMenu"] },
+		"CHILD.SET": { actions: ["setChildMenu"] },
+		OPEN: [{
+			guard: "isOpenControlled",
+			actions: ["invokeOnOpen"]
+		}, {
+			target: "open",
+			actions: ["invokeOnOpen"]
+		}],
+		OPEN_AUTOFOCUS: [{
+			guard: "isOpenControlled",
+			actions: ["invokeOnOpen"]
+		}, {
+			target: "open",
+			actions: ["highlightFirstItem", "invokeOnOpen"]
+		}],
+		CLOSE: [{
+			guard: "isOpenControlled",
+			actions: ["invokeOnClose"]
+		}, {
+			target: "closed",
+			actions: ["invokeOnClose"]
+		}],
+		"HIGHLIGHTED.RESTORE": { actions: ["restoreHighlightedItem"] },
+		"HIGHLIGHTED.SET": { actions: ["setHighlightedItem"] }
+	},
+	states: {
+		idle: {
+			tags: ["closed"],
+			on: {
+				"CONTROLLED.OPEN": { target: "open" },
+				"CONTROLLED.CLOSE": { target: "closed" },
+				CONTEXT_MENU_START: {
+					target: "opening:contextmenu",
+					actions: ["setAnchorPoint"]
+				},
+				CONTEXT_MENU: [{
+					guard: "isOpenControlled",
+					actions: ["setAnchorPoint", "invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: ["setAnchorPoint", "invokeOnOpen"]
+				}],
+				TRIGGER_CLICK: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: ["invokeOnOpen"]
+				}],
+				TRIGGER_FOCUS: {
+					guard: not("isSubmenu"),
+					target: "closed"
+				},
+				TRIGGER_POINTERMOVE: {
+					guard: "isSubmenu",
+					target: "opening"
+				}
+			}
+		},
+		"opening:contextmenu": {
+			tags: ["closed"],
+			effects: ["waitForLongPress"],
+			on: {
+				"CONTROLLED.OPEN": { target: "open" },
+				"CONTROLLED.CLOSE": { target: "closed" },
+				CONTEXT_MENU_CANCEL: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose"]
+				}, {
+					target: "closed",
+					actions: ["invokeOnClose"]
+				}],
+				"LONG_PRESS.OPEN": [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: ["invokeOnOpen"]
+				}]
+			}
+		},
+		opening: {
+			tags: ["closed"],
+			effects: ["waitForOpenDelay"],
+			on: {
+				"CONTROLLED.OPEN": { target: "open" },
+				"CONTROLLED.CLOSE": { target: "closed" },
+				BLUR: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose"]
+				}, {
+					target: "closed",
+					actions: ["invokeOnClose"]
+				}],
+				TRIGGER_POINTERLEAVE: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose"]
+				}, {
+					target: "closed",
+					actions: ["invokeOnClose"]
+				}],
+				"DELAY.OPEN": [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: ["invokeOnOpen"]
+				}]
+			}
+		},
+		closing: {
+			tags: ["open"],
+			effects: [
+				"trackPointerMove",
+				"trackInteractOutside",
+				"waitForCloseDelay"
+			],
+			on: {
+				"CONTROLLED.OPEN": { target: "open" },
+				"CONTROLLED.CLOSE": {
+					target: "closed",
+					actions: ["focusParentMenu", "restoreParentHighlightedItem"]
+				},
+				MENU_POINTERENTER: {
+					target: "open",
+					actions: ["clearIntentPolygon"]
+				},
+				POINTER_MOVED_AWAY_FROM_SUBMENU: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose"]
+				}, {
+					target: "closed",
+					actions: ["focusParentMenu", "restoreParentHighlightedItem"]
+				}],
+				"DELAY.CLOSE": [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose"]
+				}, {
+					target: "closed",
+					actions: [
+						"focusParentMenu",
+						"restoreParentHighlightedItem",
+						"invokeOnClose"
+					]
+				}]
+			}
+		},
+		closed: {
+			tags: ["closed"],
+			entry: [
+				"clearHighlightedItem",
+				"focusTrigger",
+				"resumePointer",
+				"clearAnchorPoint"
+			],
+			on: {
+				"CONTROLLED.OPEN": [
+					{
+						guard: or("isOpenAutoFocusEvent", "isArrowDownEvent"),
+						target: "open",
+						actions: ["highlightFirstItem"]
+					},
+					{
+						guard: "isArrowUpEvent",
+						target: "open",
+						actions: ["highlightLastItem"]
+					},
+					{ target: "open" }
+				],
+				CONTEXT_MENU_START: {
+					target: "opening:contextmenu",
+					actions: ["setAnchorPoint"]
+				},
+				CONTEXT_MENU: [{
+					guard: "isOpenControlled",
+					actions: ["setAnchorPoint", "invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: ["setAnchorPoint", "invokeOnOpen"]
+				}],
+				TRIGGER_CLICK: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: ["invokeOnOpen"]
+				}],
+				TRIGGER_POINTERMOVE: {
+					guard: "isTriggerItem",
+					target: "opening"
+				},
+				TRIGGER_BLUR: { target: "idle" },
+				ARROW_DOWN: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: ["highlightFirstItem", "invokeOnOpen"]
+				}],
+				ARROW_UP: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: ["highlightLastItem", "invokeOnOpen"]
+				}]
+			}
+		},
+		open: {
+			tags: ["open"],
+			effects: [
+				"trackInteractOutside",
+				"trackPositioning",
+				"scrollToHighlightedItem"
+			],
+			entry: ["focusMenu", "resumePointer"],
+			on: {
+				"CONTROLLED.CLOSE": [{
+					target: "closed",
+					guard: "isArrowLeftEvent",
+					actions: ["focusParentMenu"]
+				}, { target: "closed" }],
+				TRIGGER_CLICK: [{
+					guard: and(not("isTriggerItem"), "isOpenControlled"),
+					actions: ["invokeOnClose"]
+				}, {
+					guard: not("isTriggerItem"),
+					target: "closed",
+					actions: ["invokeOnClose"]
+				}],
+				CONTEXT_MENU: { actions: ["setAnchorPoint", "focusMenu"] },
+				ARROW_UP: { actions: ["highlightPrevItem", "focusMenu"] },
+				ARROW_DOWN: { actions: ["highlightNextItem", "focusMenu"] },
+				ARROW_LEFT: [{
+					guard: and("isSubmenu", "isOpenControlled"),
+					actions: ["invokeOnClose"]
+				}, {
+					guard: "isSubmenu",
+					target: "closed",
+					actions: ["focusParentMenu", "invokeOnClose"]
+				}],
+				HOME: { actions: ["highlightFirstItem", "focusMenu"] },
+				END: { actions: ["highlightLastItem", "focusMenu"] },
+				ARROW_RIGHT: {
+					guard: "isTriggerItemHighlighted",
+					actions: ["openSubmenu"]
+				},
+				ENTER: [{
+					guard: "isTriggerItemHighlighted",
+					actions: ["openSubmenu"]
+				}, { actions: ["clickHighlightedItem"] }],
+				ITEM_POINTERMOVE: [{
+					guard: not("isPointerSuspended"),
+					actions: ["setHighlightedItem", "focusMenu"]
+				}, { actions: ["setLastHighlightedItem"] }],
+				ITEM_POINTERLEAVE: {
+					guard: and(not("isPointerSuspended"), not("isTriggerItem")),
+					actions: ["clearHighlightedItem"]
+				},
+				ITEM_CLICK: [
+					{
+						guard: and(not("isTriggerItemHighlighted"), not("isHighlightedItemEditable"), "closeOnSelect", "isOpenControlled"),
+						actions: [
+							"invokeOnSelect",
+							"setOptionState",
+							"closeRootMenu",
+							"invokeOnClose"
+						]
+					},
+					{
+						guard: and(not("isTriggerItemHighlighted"), not("isHighlightedItemEditable"), "closeOnSelect"),
+						target: "closed",
+						actions: [
+							"invokeOnSelect",
+							"setOptionState",
+							"closeRootMenu",
+							"invokeOnClose"
+						]
+					},
+					{
+						guard: and(not("isTriggerItemHighlighted"), not("isHighlightedItemEditable")),
+						actions: ["invokeOnSelect", "setOptionState"]
+					},
+					{ actions: ["setHighlightedItem"] }
+				],
+				TRIGGER_POINTERMOVE: {
+					guard: "isTriggerItem",
+					actions: ["setIntentPolygon"]
+				},
+				TRIGGER_POINTERLEAVE: { target: "closing" },
+				ITEM_POINTERDOWN: { actions: ["setHighlightedItem"] },
+				TYPEAHEAD: { actions: ["highlightMatchedItem"] },
+				FOCUS_MENU: { actions: ["focusMenu"] },
+				"POSITIONING.SET": { actions: ["reposition"] }
+			}
+		}
+	},
+	implementations: {
+		guards: {
+			closeOnSelect: ({ prop, event }) => !!(event?.closeOnSelect ?? prop("closeOnSelect")),
+			isTriggerItem: ({ event }) => isTriggerItem(event.target),
+			isTriggerItemHighlighted: ({ event, scope, computed }) => {
+				return !!(event.target ?? scope.getById(computed("highlightedId")))?.hasAttribute("aria-controls");
+			},
+			isSubmenu: ({ context }) => context.get("isSubmenu"),
+			isPointerSuspended: ({ context }) => context.get("suspendPointer"),
+			isHighlightedItemEditable: ({ scope, computed }) => isEditableElement(scope.getById(computed("highlightedId"))),
+			isOpenControlled: ({ prop }) => prop("open") !== void 0,
+			isArrowLeftEvent: ({ event }) => event.previousEvent?.type === "ARROW_LEFT",
+			isArrowUpEvent: ({ event }) => event.previousEvent?.type === "ARROW_UP",
+			isArrowDownEvent: ({ event }) => event.previousEvent?.type === "ARROW_DOWN",
+			isOpenAutoFocusEvent: ({ event }) => event.previousEvent?.type === "OPEN_AUTOFOCUS"
+		},
+		effects: {
+			waitForOpenDelay({ send }) {
+				const timer = setTimeout(() => {
+					send({ type: "DELAY.OPEN" });
+				}, 100);
+				return () => clearTimeout(timer);
+			},
+			waitForCloseDelay({ send }) {
+				const timer = setTimeout(() => {
+					send({ type: "DELAY.CLOSE" });
+				}, 300);
+				return () => clearTimeout(timer);
+			},
+			waitForLongPress({ send }) {
+				const timer = setTimeout(() => {
+					send({ type: "LONG_PRESS.OPEN" });
+				}, 700);
+				return () => clearTimeout(timer);
+			},
+			trackPositioning({ context, prop, scope, refs }) {
+				if (getContextTriggerEl(scope)) return;
+				const positioning = {
+					...prop("positioning"),
+					...refs.get("positioningOverride")
+				};
+				context.set("currentPlacement", positioning.placement);
+				const getPositionerEl$1 = () => getPositionerEl(scope);
+				return getPlacement(getTriggerEl(scope), getPositionerEl$1, {
+					...positioning,
+					defer: true,
+					onComplete(data) {
+						context.set("currentPlacement", data.placement);
+					}
+				});
+			},
+			trackInteractOutside({ refs, scope, prop, context, send }) {
+				const getContentEl$1 = () => getContentEl(scope);
+				let restoreFocus = true;
+				return trackDismissableElement(getContentEl$1, {
+					type: "menu",
+					defer: true,
+					exclude: [getTriggerEl(scope)],
+					onInteractOutside: prop("onInteractOutside"),
+					onRequestDismiss: prop("onRequestDismiss"),
+					onFocusOutside(event) {
+						prop("onFocusOutside")?.(event);
+						const target = getEventTarget(event.detail.originalEvent);
+						if (contains(getContextTriggerEl(scope), target)) {
+							event.preventDefault();
+							return;
+						}
+					},
+					onEscapeKeyDown(event) {
+						prop("onEscapeKeyDown")?.(event);
+						if (context.get("isSubmenu")) event.preventDefault();
+						closeRootMenu({ parent: refs.get("parent") });
+					},
+					onPointerDownOutside(event) {
+						prop("onPointerDownOutside")?.(event);
+						const target = getEventTarget(event.detail.originalEvent);
+						if (contains(getContextTriggerEl(scope), target) && event.detail.contextmenu) {
+							event.preventDefault();
+							return;
+						}
+						restoreFocus = !event.detail.focusable;
+					},
+					onDismiss() {
+						send({
+							type: "CLOSE",
+							src: "interact-outside",
+							restoreFocus
+						});
+					}
+				});
+			},
+			trackPointerMove({ context, scope, send, refs, flush }) {
+				const parent = refs.get("parent");
+				flush(() => {
+					parent.context.set("suspendPointer", true);
+				});
+				return addDomEvent(scope.getDoc(), "pointermove", (e) => {
+					if (!isWithinPolygon(context.get("intentPolygon"), {
+						x: e.clientX,
+						y: e.clientY
+					})) {
+						send({ type: "POINTER_MOVED_AWAY_FROM_SUBMENU" });
+						parent.context.set("suspendPointer", false);
+					}
+				});
+			},
+			scrollToHighlightedItem({ event, scope, computed }) {
+				const exec = () => {
+					if (event.current().type.startsWith("ITEM_POINTER")) return;
+					scrollIntoView(scope.getById(computed("highlightedId")), {
+						rootEl: getContentEl(scope),
+						block: "nearest"
+					});
+				};
+				raf(() => exec());
+				const contentEl = () => getContentEl(scope);
+				return observeAttributes(contentEl, {
+					defer: true,
+					attributes: ["aria-activedescendant"],
+					callback: exec
+				});
+			}
+		},
+		actions: {
+			setAnchorPoint({ context, event }) {
+				context.set("anchorPoint", (prev$1) => isEqual(prev$1, event.point) ? prev$1 : event.point);
+			},
+			setSubmenuPlacement({ context, computed, refs }) {
+				if (!context.get("isSubmenu")) return;
+				const placement = computed("isRtl") ? "left-start" : "right-start";
+				refs.set("positioningOverride", {
+					placement,
+					gutter: 0
+				});
+			},
+			reposition({ context, scope, prop, event, refs }) {
+				const getPositionerEl$1 = () => getPositionerEl(scope);
+				const anchorPoint = context.get("anchorPoint");
+				const getAnchorRect = anchorPoint ? () => ({
+					width: 0,
+					height: 0,
+					...anchorPoint
+				}) : void 0;
+				const positioning = {
+					...prop("positioning"),
+					...refs.get("positioningOverride")
+				};
+				getPlacement(getTriggerEl(scope), getPositionerEl$1, {
+					...positioning,
+					defer: true,
+					getAnchorRect,
+					...event.options ?? {},
+					listeners: false,
+					onComplete(data) {
+						context.set("currentPlacement", data.placement);
+					}
+				});
+			},
+			setOptionState({ event }) {
+				if (!event.option) return;
+				const { checked, onCheckedChange, type } = event.option;
+				if (type === "radio") onCheckedChange?.(true);
+				else if (type === "checkbox") onCheckedChange?.(!checked);
+			},
+			clickHighlightedItem({ scope, computed, prop, context }) {
+				const itemEl = scope.getById(computed("highlightedId"));
+				if (!itemEl || itemEl.dataset.disabled) return;
+				const highlightedValue = context.get("highlightedValue");
+				if (isAnchorElement(itemEl)) prop("navigate")?.({
+					value: highlightedValue,
+					node: itemEl,
+					href: itemEl.href
+				});
+				else queueMicrotask(() => itemEl.click());
+			},
+			setIntentPolygon({ context, scope, event }) {
+				const menu = getContentEl(scope);
+				const placement = context.get("currentPlacement");
+				if (!menu || !placement) return;
+				const polygon = getElementPolygon(menu.getBoundingClientRect(), placement);
+				if (!polygon) return;
+				const bleed = getPlacementSide(placement) === "right" ? -5 : 5;
+				context.set("intentPolygon", [{
+					...event.point,
+					x: event.point.x + bleed
+				}, ...polygon]);
+			},
+			clearIntentPolygon({ context }) {
+				context.set("intentPolygon", null);
+			},
+			clearAnchorPoint({ context }) {
+				context.set("anchorPoint", null);
+			},
+			resumePointer({ refs, flush }) {
+				const parent = refs.get("parent");
+				if (!parent) return;
+				flush(() => {
+					parent.context.set("suspendPointer", false);
+				});
+			},
+			setHighlightedItem({ context, event }) {
+				const value = event.value || getItemValue(event.target);
+				context.set("highlightedValue", value);
+			},
+			clearHighlightedItem({ context }) {
+				context.set("highlightedValue", null);
+			},
+			focusMenu({ scope }) {
+				raf(() => {
+					const contentEl = getContentEl(scope);
+					getInitialFocus({
+						root: contentEl,
+						enabled: !contains(contentEl, scope.getActiveElement()),
+						filter(node) {
+							return !node.role?.startsWith("menuitem");
+						}
+					})?.focus({ preventScroll: true });
+				});
+			},
+			highlightFirstItem({ context, scope }) {
+				(getContentEl(scope) ? queueMicrotask : raf)(() => {
+					const first$1 = getFirstEl(scope);
+					if (!first$1) return;
+					context.set("highlightedValue", getItemValue(first$1));
+				});
+			},
+			highlightLastItem({ context, scope }) {
+				(getContentEl(scope) ? queueMicrotask : raf)(() => {
+					const last$1 = getLastEl(scope);
+					if (!last$1) return;
+					context.set("highlightedValue", getItemValue(last$1));
+				});
+			},
+			highlightNextItem({ context, scope, event, prop }) {
+				const next$1 = getNextEl(scope, {
+					loop: event.loop,
+					value: context.get("highlightedValue"),
+					loopFocus: prop("loopFocus")
+				});
+				context.set("highlightedValue", getItemValue(next$1));
+			},
+			highlightPrevItem({ context, scope, event, prop }) {
+				const prev$1 = getPrevEl(scope, {
+					loop: event.loop,
+					value: context.get("highlightedValue"),
+					loopFocus: prop("loopFocus")
+				});
+				context.set("highlightedValue", getItemValue(prev$1));
+			},
+			invokeOnSelect({ context, prop, scope }) {
+				const value = context.get("highlightedValue");
+				if (value == null) return;
+				const node = getItemEl(scope, value);
+				dispatchSelectionEvent(node, value);
+				prop("onSelect")?.({ value });
+			},
+			focusTrigger({ scope, context, event }) {
+				if (context.get("isSubmenu") || context.get("anchorPoint") || event.restoreFocus === false) return;
+				queueMicrotask(() => getTriggerEl(scope)?.focus({ preventScroll: true }));
+			},
+			highlightMatchedItem({ scope, context, event, refs }) {
+				const node = getElemByKey(scope, {
+					key: event.key,
+					value: context.get("highlightedValue"),
+					typeaheadState: refs.get("typeaheadState")
+				});
+				if (!node) return;
+				context.set("highlightedValue", getItemValue(node));
+			},
+			setParentMenu({ refs, event, context }) {
+				refs.set("parent", event.value);
+				context.set("isSubmenu", true);
+			},
+			setChildMenu({ refs, event }) {
+				const children = refs.get("children");
+				children[event.id] = event.value;
+				refs.set("children", children);
+			},
+			closeRootMenu({ refs }) {
+				closeRootMenu({ parent: refs.get("parent") });
+			},
+			openSubmenu({ refs, scope, computed }) {
+				const id = scope.getById(computed("highlightedId"))?.getAttribute("data-uid");
+				const children = refs.get("children");
+				(id ? children[id] : null)?.send({ type: "OPEN_AUTOFOCUS" });
+			},
+			focusParentMenu({ refs }) {
+				refs.get("parent")?.send({ type: "FOCUS_MENU" });
+			},
+			setLastHighlightedItem({ context, event }) {
+				context.set("lastHighlightedValue", getItemValue(event.target));
+			},
+			restoreHighlightedItem({ context }) {
+				if (!context.get("lastHighlightedValue")) return;
+				context.set("highlightedValue", context.get("lastHighlightedValue"));
+				context.set("lastHighlightedValue", null);
+			},
+			restoreParentHighlightedItem({ refs }) {
+				refs.get("parent")?.send({ type: "HIGHLIGHTED.RESTORE" });
+			},
+			invokeOnOpen({ prop }) {
+				prop("onOpenChange")?.({ open: true });
+			},
+			invokeOnClose({ prop }) {
+				prop("onOpenChange")?.({ open: false });
+			},
+			toggleVisibility({ prop, event, send }) {
+				send({
+					type: prop("open") ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE",
+					previousEvent: event
+				});
+			}
+		}
+	}
+});
+function closeRootMenu(ctx) {
+	let parent = ctx.parent;
+	while (parent && parent.context.get("isSubmenu")) parent = parent.refs.get("parent");
+	parent?.send({ type: "CLOSE" });
+}
+function isWithinPolygon(polygon, point) {
+	if (!polygon) return false;
+	return isPointInPolygon(polygon, point);
+}
+function resolveItemId(children, value, scope) {
+	const hasChildren = Object.keys(children).length > 0;
+	if (!value) return null;
+	if (!hasChildren) return getItemId(scope, value);
+	for (const id in children) {
+		const childMenu = children[id];
+		const childTriggerId = getTriggerId(childMenu.scope);
+		if (childTriggerId === value) return childTriggerId;
+	}
+	return getItemId(scope, value);
+}
+
+//#endregion
+//#region src/machines/menu/menu.props.ts
+const props = createProps()([
+	"anchorPoint",
+	"aria-label",
+	"closeOnSelect",
+	"composite",
+	"defaultHighlightedValue",
+	"defaultOpen",
+	"dir",
+	"getRootNode",
+	"highlightedValue",
+	"id",
+	"ids",
+	"loopFocus",
+	"navigate",
+	"onEscapeKeyDown",
+	"onFocusOutside",
+	"onHighlightChange",
+	"onInteractOutside",
+	"onOpenChange",
+	"onPointerDownOutside",
+	"onRequestDismiss",
+	"onSelect",
+	"open",
+	"positioning",
+	"typeahead"
+]);
+const splitProps = createSplitProps(props);
+const itemProps = createProps()([
+	"closeOnSelect",
+	"disabled",
+	"value",
+	"valueText"
+]);
+const splitItemProps = createSplitProps(itemProps);
+const itemGroupLabelProps = createProps()(["htmlFor"]);
+const splitItemGroupLabelProps = createSplitProps(itemGroupLabelProps);
+const itemGroupProps = createProps()(["id"]);
+const splitItemGroupProps = createSplitProps(itemGroupProps);
+const optionItemProps = createProps()([
+	"checked",
+	"closeOnSelect",
+	"disabled",
+	"onCheckedChange",
+	"type",
+	"value",
+	"valueText"
+]);
+const splitOptionItemProps = createSplitProps(optionItemProps);
+
+//#endregion
+export { anatomy, connect, itemGroupLabelProps, itemGroupProps, itemProps, machine, optionItemProps, props, splitItemGroupLabelProps, splitItemGroupProps, splitItemProps, splitOptionItemProps, splitProps };