@burtson-labs/ui 0.13.1 → 0.14.1

package/dist/primitives/vendor/radix/react-menu/menu.js

@@ -0,0 +1,806 @@
+"use client";
+import { createContextScope } from "../react-context/create-context.js";
+import { useComposedRefs } from "../react-compose-refs/compose-refs.js";
+import { createSlot } from "../react-slot/slot.js";
+import { createCollection } from "../react-collection/collection-legacy.js";
+import { composeEventHandlers } from "../primitive/primitive.js";
+import { Primitive, dispatchDiscreteCustomEvent } from "../react-primitive/primitive.js";
+import { Presence } from "../react-presence/presence.js";
+import { useId } from "../react-id/id.js";
+import { useDirection } from "../react-direction/direction.js";
+import { useCallbackRef } from "../react-use-callback-ref/use-callback-ref.js";
+import { DismissableLayer } from "../react-dismissable-layer/dismissable-layer.js";
+import { FocusScope } from "../react-focus-scope/focus-scope.js";
+import { Portal as Portal$1 } from "../react-portal/portal.js";
+import { useFocusGuards } from "../react-focus-guards/focus-guards.js";
+import { Anchor as Anchor$1, Content as Content$1, Root as Root$1, createPopperScope } from "../react-popper/popper.js";
+import { Item as Item$1, Root as Root$2, createRovingFocusGroupScope } from "../react-roving-focus/roving-focus-group.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { RemoveScroll } from "react-remove-scroll";
+import { hideOthers } from "aria-hidden";
+//#region src/primitives/vendor/radix/react-menu/menu.tsx
+var SELECTION_KEYS = ["Enter", " "];
+var FIRST_KEYS = [
+	"ArrowDown",
+	"PageUp",
+	"Home"
+];
+var LAST_KEYS = [
+	"ArrowUp",
+	"PageDown",
+	"End"
+];
+var FIRST_LAST_KEYS = [...FIRST_KEYS, ...LAST_KEYS];
+var SUB_OPEN_KEYS = {
+	ltr: [...SELECTION_KEYS, "ArrowRight"],
+	rtl: [...SELECTION_KEYS, "ArrowLeft"]
+};
+var SUB_CLOSE_KEYS = {
+	ltr: ["ArrowLeft"],
+	rtl: ["ArrowRight"]
+};
+var MENU_NAME = "Menu";
+var [Collection, useCollection, createCollectionScope] = createCollection(MENU_NAME);
+var [createMenuContext, createMenuScope] = createContextScope(MENU_NAME, [
+	createCollectionScope,
+	createPopperScope,
+	createRovingFocusGroupScope
+]);
+var usePopperScope = createPopperScope();
+var useRovingFocusGroupScope = createRovingFocusGroupScope();
+var [MenuProvider, useMenuContext] = createMenuContext(MENU_NAME);
+var [MenuRootProvider, useMenuRootContext] = createMenuContext(MENU_NAME);
+var Menu = (props) => {
+	const { __scopeMenu, open = false, children, dir, onOpenChange, modal = true } = props;
+	const popperScope = usePopperScope(__scopeMenu);
+	const [content, setContent] = React.useState(null);
+	const isUsingKeyboardRef = React.useRef(false);
+	const handleOpenChange = useCallbackRef(onOpenChange);
+	const direction = useDirection(dir);
+	React.useEffect(() => {
+		const handleKeyDown = () => {
+			isUsingKeyboardRef.current = true;
+			document.addEventListener("pointerdown", handlePointer, {
+				capture: true,
+				once: true
+			});
+			document.addEventListener("pointermove", handlePointer, {
+				capture: true,
+				once: true
+			});
+		};
+		const handlePointer = () => isUsingKeyboardRef.current = false;
+		document.addEventListener("keydown", handleKeyDown, { capture: true });
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown, { capture: true });
+			document.removeEventListener("pointerdown", handlePointer, { capture: true });
+			document.removeEventListener("pointermove", handlePointer, { capture: true });
+		};
+	}, []);
+	React.useEffect(() => {
+		if (!open) return;
+		const handleBlur = () => handleOpenChange(false);
+		window.addEventListener("blur", handleBlur);
+		return () => window.removeEventListener("blur", handleBlur);
+	}, [open, handleOpenChange]);
+	return /* @__PURE__ */ jsx(Root$1, {
+		...popperScope,
+		children: /* @__PURE__ */ jsx(MenuProvider, {
+			scope: __scopeMenu,
+			open,
+			onOpenChange: handleOpenChange,
+			content,
+			onContentChange: setContent,
+			children: /* @__PURE__ */ jsx(MenuRootProvider, {
+				scope: __scopeMenu,
+				onClose: React.useCallback(() => handleOpenChange(false), [handleOpenChange]),
+				isUsingKeyboardRef,
+				dir: direction,
+				modal,
+				children
+			})
+		})
+	});
+};
+var MenuAnchor = /* @__PURE__ */ React.forwardRef(function MenuAnchor(props, forwardedRef) {
+	const { __scopeMenu, ...anchorProps } = props;
+	const popperScope = usePopperScope(__scopeMenu);
+	return /* @__PURE__ */ jsx(Anchor$1, {
+		...popperScope,
+		...anchorProps,
+		ref: forwardedRef
+	});
+});
+var PORTAL_NAME = "MenuPortal";
+var [PortalProvider, usePortalContext] = createMenuContext(PORTAL_NAME, { forceMount: void 0 });
+var MenuPortal = (props) => {
+	const { __scopeMenu, forceMount, children, container } = props;
+	const context = useMenuContext(PORTAL_NAME, __scopeMenu);
+	return /* @__PURE__ */ jsx(PortalProvider, {
+		scope: __scopeMenu,
+		forceMount,
+		children: /* @__PURE__ */ jsx(Presence, {
+			present: forceMount || context.open,
+			children: /* @__PURE__ */ jsx(Portal$1, {
+				asChild: true,
+				container,
+				children
+			})
+		})
+	});
+};
+var CONTENT_NAME = "MenuContent";
+var [MenuContentProvider, useMenuContentContext] = createMenuContext(CONTENT_NAME);
+var MenuContent = /* @__PURE__ */ React.forwardRef(function MenuContent(props, forwardedRef) {
+	const portalContext = usePortalContext(CONTENT_NAME, props.__scopeMenu);
+	const { forceMount = portalContext.forceMount, ...contentProps } = props;
+	const context = useMenuContext(CONTENT_NAME, props.__scopeMenu);
+	const rootContext = useMenuRootContext(CONTENT_NAME, props.__scopeMenu);
+	return /* @__PURE__ */ jsx(Collection.Provider, {
+		scope: props.__scopeMenu,
+		children: /* @__PURE__ */ jsx(Presence, {
+			present: forceMount || context.open,
+			children: /* @__PURE__ */ jsx(Collection.Slot, {
+				scope: props.__scopeMenu,
+				children: rootContext.modal ? /* @__PURE__ */ jsx(MenuRootContentModal, {
+					...contentProps,
+					ref: forwardedRef
+				}) : /* @__PURE__ */ jsx(MenuRootContentNonModal, {
+					...contentProps,
+					ref: forwardedRef
+				})
+			})
+		})
+	});
+});
+var MenuRootContentModal = /* @__PURE__ */ React.forwardRef(function MenuRootContentModal(props, forwardedRef) {
+	const context = useMenuContext(CONTENT_NAME, props.__scopeMenu);
+	const ref = React.useRef(null);
+	const composedRefs = useComposedRefs(forwardedRef, ref);
+	React.useEffect(() => {
+		const content = ref.current;
+		if (content) return hideOthers(content);
+	}, []);
+	return /* @__PURE__ */ jsx(MenuContentImpl, {
+		...props,
+		ref: composedRefs,
+		trapFocus: context.open,
+		disableOutsidePointerEvents: context.open,
+		disableOutsideScroll: true,
+		onFocusOutside: composeEventHandlers(props.onFocusOutside, (event) => event.preventDefault(), { checkForDefaultPrevented: false }),
+		onDismiss: () => context.onOpenChange(false)
+	});
+});
+var MenuRootContentNonModal = /* @__PURE__ */ React.forwardRef(function MenuRootContentNonModal(props, forwardedRef) {
+	const context = useMenuContext(CONTENT_NAME, props.__scopeMenu);
+	return /* @__PURE__ */ jsx(MenuContentImpl, {
+		...props,
+		ref: forwardedRef,
+		trapFocus: false,
+		disableOutsidePointerEvents: false,
+		disableOutsideScroll: false,
+		onDismiss: () => context.onOpenChange(false)
+	});
+});
+var Slot = /* @__PURE__ */ createSlot("MenuContent.ScrollLock");
+var MenuContentImpl = /* @__PURE__ */ React.forwardRef(function MenuContentImpl(props, forwardedRef) {
+	const { __scopeMenu, loop = false, trapFocus, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, onEntryFocus, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, onDismiss, disableOutsideScroll, ...contentProps } = props;
+	const context = useMenuContext(CONTENT_NAME, __scopeMenu);
+	const rootContext = useMenuRootContext(CONTENT_NAME, __scopeMenu);
+	const popperScope = usePopperScope(__scopeMenu);
+	const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenu);
+	const getItems = useCollection(__scopeMenu);
+	const [currentItemId, setCurrentItemId] = React.useState(null);
+	const contentRef = React.useRef(null);
+	const composedRefs = useComposedRefs(forwardedRef, contentRef, context.onContentChange);
+	const timerRef = React.useRef(0);
+	const searchRef = React.useRef("");
+	const pointerGraceTimerRef = React.useRef(0);
+	const pointerGraceIntentRef = React.useRef(null);
+	const pointerDirRef = React.useRef("right");
+	const lastPointerXRef = React.useRef(0);
+	const ScrollLockWrapper = disableOutsideScroll ? RemoveScroll : React.Fragment;
+	const scrollLockWrapperProps = disableOutsideScroll ? {
+		as: Slot,
+		allowPinchZoom: true
+	} : void 0;
+	const handleTypeaheadSearch = (key) => {
+		const search = searchRef.current + key;
+		const items = getItems().filter((item) => !item.disabled);
+		const currentItem = document.activeElement;
+		const currentMatch = items.find((item) => item.ref.current === currentItem)?.textValue;
+		const nextMatch = getNextMatch(items.map((item) => item.textValue), search, currentMatch);
+		const newItem = items.find((item) => item.textValue === nextMatch)?.ref.current;
+		(function updateSearch(value) {
+			searchRef.current = value;
+			window.clearTimeout(timerRef.current);
+			if (value !== "") timerRef.current = window.setTimeout(() => updateSearch(""), 1e3);
+		})(search);
+		if (newItem)
+ /**
+		* Imperative focus during keydown is risky so we prevent React's batching updates
+		* to avoid potential bugs. See: https://github.com/facebook/react/issues/20332
+		*/
+		setTimeout(() => newItem.focus());
+	};
+	React.useEffect(() => {
+		return () => window.clearTimeout(timerRef.current);
+	}, []);
+	useFocusGuards();
+	const isPointerMovingToSubmenu = React.useCallback((event) => {
+		return pointerDirRef.current === pointerGraceIntentRef.current?.side && isPointerInGraceArea(event, pointerGraceIntentRef.current?.area);
+	}, []);
+	return /* @__PURE__ */ jsx(MenuContentProvider, {
+		scope: __scopeMenu,
+		searchRef,
+		onItemEnter: React.useCallback((event) => {
+			if (isPointerMovingToSubmenu(event)) event.preventDefault();
+		}, [isPointerMovingToSubmenu]),
+		onItemLeave: React.useCallback((event) => {
+			if (isPointerMovingToSubmenu(event)) return;
+			contentRef.current?.focus();
+			setCurrentItemId(null);
+		}, [isPointerMovingToSubmenu]),
+		onTriggerLeave: React.useCallback((event) => {
+			if (isPointerMovingToSubmenu(event)) event.preventDefault();
+		}, [isPointerMovingToSubmenu]),
+		pointerGraceTimerRef,
+		onPointerGraceIntentChange: React.useCallback((intent) => {
+			pointerGraceIntentRef.current = intent;
+		}, []),
+		children: /* @__PURE__ */ jsx(ScrollLockWrapper, {
+			...scrollLockWrapperProps,
+			children: /* @__PURE__ */ jsx(FocusScope, {
+				asChild: true,
+				trapped: trapFocus,
+				onMountAutoFocus: composeEventHandlers(onOpenAutoFocus, (event) => {
+					event.preventDefault();
+					contentRef.current?.focus({ preventScroll: true });
+				}),
+				onUnmountAutoFocus: onCloseAutoFocus,
+				children: /* @__PURE__ */ jsx(DismissableLayer, {
+					asChild: true,
+					disableOutsidePointerEvents,
+					onEscapeKeyDown,
+					onPointerDownOutside,
+					onFocusOutside,
+					onInteractOutside,
+					onDismiss,
+					children: /* @__PURE__ */ jsx(Root$2, {
+						asChild: true,
+						...rovingFocusGroupScope,
+						dir: rootContext.dir,
+						orientation: "vertical",
+						loop,
+						currentTabStopId: currentItemId,
+						onCurrentTabStopIdChange: setCurrentItemId,
+						onEntryFocus: composeEventHandlers(onEntryFocus, (event) => {
+							if (!rootContext.isUsingKeyboardRef.current) event.preventDefault();
+						}),
+						preventScrollOnEntryFocus: true,
+						children: /* @__PURE__ */ jsx(Content$1, {
+							role: "menu",
+							"aria-orientation": "vertical",
+							"data-state": getOpenState(context.open),
+							"data-radix-menu-content": "",
+							dir: rootContext.dir,
+							...popperScope,
+							...contentProps,
+							ref: composedRefs,
+							style: {
+								outline: "none",
+								...contentProps.style
+							},
+							onKeyDown: composeEventHandlers(contentProps.onKeyDown, (event) => {
+								const isKeyDownInside = event.target.closest("[data-radix-menu-content]") === event.currentTarget;
+								const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
+								const isCharacterKey = event.key.length === 1;
+								if (isKeyDownInside) {
+									if (event.key === "Tab") event.preventDefault();
+									if (!isModifierKey && isCharacterKey) handleTypeaheadSearch(event.key);
+								}
+								const content = contentRef.current;
+								if (event.target !== content) return;
+								if (!FIRST_LAST_KEYS.includes(event.key)) return;
+								event.preventDefault();
+								const candidateNodes = getItems().filter((item) => !item.disabled).map((item) => item.ref.current);
+								if (LAST_KEYS.includes(event.key)) candidateNodes.reverse();
+								focusFirst(candidateNodes);
+							}),
+							onBlur: composeEventHandlers(props.onBlur, (event) => {
+								if (!event.currentTarget.contains(event.target)) {
+									window.clearTimeout(timerRef.current);
+									searchRef.current = "";
+								}
+							}),
+							onPointerMove: composeEventHandlers(props.onPointerMove, whenMouse((event) => {
+								const target = event.target;
+								const pointerXHasChanged = lastPointerXRef.current !== event.clientX;
+								if (event.currentTarget.contains(target) && pointerXHasChanged) {
+									const newDir = event.clientX > lastPointerXRef.current ? "right" : "left";
+									pointerDirRef.current = newDir;
+									lastPointerXRef.current = event.clientX;
+								}
+							}))
+						})
+					})
+				})
+			})
+		})
+	});
+});
+var MenuGroup = /* @__PURE__ */ React.forwardRef(function MenuGroup(props, forwardedRef) {
+	const { __scopeMenu, ...groupProps } = props;
+	return /* @__PURE__ */ jsx(Primitive.div, {
+		role: "group",
+		...groupProps,
+		ref: forwardedRef
+	});
+});
+var MenuLabel = /* @__PURE__ */ React.forwardRef(function MenuLabel(props, forwardedRef) {
+	const { __scopeMenu, ...labelProps } = props;
+	return /* @__PURE__ */ jsx(Primitive.div, {
+		...labelProps,
+		ref: forwardedRef
+	});
+});
+var ITEM_NAME = "MenuItem";
+var ITEM_SELECT = "menu.itemSelect";
+var MenuItem = /* @__PURE__ */ React.forwardRef(function MenuItem(props, forwardedRef) {
+	const { disabled = false, onSelect, ...itemProps } = props;
+	const ref = React.useRef(null);
+	const rootContext = useMenuRootContext(ITEM_NAME, props.__scopeMenu);
+	const contentContext = useMenuContentContext(ITEM_NAME, props.__scopeMenu);
+	const composedRefs = useComposedRefs(forwardedRef, ref);
+	const isPointerDownRef = React.useRef(false);
+	const handleSelect = () => {
+		const menuItem = ref.current;
+		if (!disabled && menuItem) {
+			const itemSelectEvent = new CustomEvent(ITEM_SELECT, {
+				bubbles: true,
+				cancelable: true
+			});
+			menuItem.addEventListener(ITEM_SELECT, (event) => onSelect?.(event), { once: true });
+			dispatchDiscreteCustomEvent(menuItem, itemSelectEvent);
+			if (itemSelectEvent.defaultPrevented) isPointerDownRef.current = false;
+			else rootContext.onClose();
+		}
+	};
+	return /* @__PURE__ */ jsx(MenuItemImpl, {
+		...itemProps,
+		ref: composedRefs,
+		disabled,
+		onClick: composeEventHandlers(props.onClick, handleSelect),
+		onPointerDown: (event) => {
+			props.onPointerDown?.(event);
+			isPointerDownRef.current = true;
+		},
+		onPointerUp: composeEventHandlers(props.onPointerUp, (event) => {
+			if (!isPointerDownRef.current) event.currentTarget?.click();
+		}),
+		onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
+			if (disabled || event.target !== event.currentTarget) return;
+			if (contentContext.searchRef.current !== "" && event.key === " ") return;
+			if (SELECTION_KEYS.includes(event.key)) {
+				event.currentTarget.click();
+				/**
+				* We prevent default browser behaviour for selection keys as they should trigger
+				* a selection only:
+				* - prevents space from scrolling the page.
+				* - if keydown causes focus to move, prevents keydown from firing on the new target.
+				*/
+				event.preventDefault();
+			}
+		})
+	});
+});
+var MenuItemImpl = /* @__PURE__ */ React.forwardRef(function MenuItemImpl(props, forwardedRef) {
+	const { __scopeMenu, disabled = false, textValue, ...itemProps } = props;
+	const contentContext = useMenuContentContext(ITEM_NAME, __scopeMenu);
+	const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenu);
+	const ref = React.useRef(null);
+	const composedRefs = useComposedRefs(forwardedRef, ref);
+	const [isFocused, setIsFocused] = React.useState(false);
+	const [textContent, setTextContent] = React.useState("");
+	React.useEffect(() => {
+		const menuItem = ref.current;
+		if (menuItem) setTextContent((menuItem.textContent ?? "").trim());
+	}, [itemProps.children]);
+	return /* @__PURE__ */ jsx(Collection.ItemSlot, {
+		scope: __scopeMenu,
+		disabled,
+		textValue: textValue ?? textContent,
+		children: /* @__PURE__ */ jsx(Item$1, {
+			asChild: true,
+			...rovingFocusGroupScope,
+			focusable: !disabled,
+			children: /* @__PURE__ */ jsx(Primitive.div, {
+				role: "menuitem",
+				"data-highlighted": isFocused ? "" : void 0,
+				"aria-disabled": disabled || void 0,
+				"data-disabled": disabled ? "" : void 0,
+				...itemProps,
+				ref: composedRefs,
+				/**
+				* We focus items on `pointerMove` to achieve the following:
+				*
+				* - Mouse over an item (it focuses)
+				* - Leave mouse where it is and use keyboard to focus a different item
+				* - Wiggle mouse without it leaving previously focused item
+				* - Previously focused item should re-focus
+				*
+				* If we used `mouseOver`/`mouseEnter` it would not re-focus when the mouse
+				* wiggles. This is to match native menu implementation.
+				*/
+				onPointerMove: composeEventHandlers(props.onPointerMove, whenMouse((event) => {
+					if (disabled) contentContext.onItemLeave(event);
+					else {
+						contentContext.onItemEnter(event);
+						if (!event.defaultPrevented) event.currentTarget.focus({ preventScroll: true });
+					}
+				})),
+				onPointerLeave: composeEventHandlers(props.onPointerLeave, whenMouse((event) => contentContext.onItemLeave(event))),
+				onFocus: composeEventHandlers(props.onFocus, () => setIsFocused(true)),
+				onBlur: composeEventHandlers(props.onBlur, () => setIsFocused(false))
+			})
+		})
+	});
+});
+var MenuCheckboxItem = /* @__PURE__ */ React.forwardRef(function MenuCheckboxItem(props, forwardedRef) {
+	const { checked = false, onCheckedChange, ...checkboxItemProps } = props;
+	return /* @__PURE__ */ jsx(ItemIndicatorProvider, {
+		scope: props.__scopeMenu,
+		checked,
+		children: /* @__PURE__ */ jsx(MenuItem, {
+			role: "menuitemcheckbox",
+			"aria-checked": isIndeterminate(checked) ? "mixed" : checked,
+			...checkboxItemProps,
+			ref: forwardedRef,
+			"data-state": getCheckedState(checked),
+			onSelect: composeEventHandlers(checkboxItemProps.onSelect, () => onCheckedChange?.(isIndeterminate(checked) ? true : !checked), { checkForDefaultPrevented: false })
+		})
+	});
+});
+var [RadioGroupProvider, useRadioGroupContext] = createMenuContext("MenuRadioGroup", {
+	value: void 0,
+	onValueChange: () => {}
+});
+var MenuRadioGroup = /* @__PURE__ */ React.forwardRef(function MenuRadioGroup(props, forwardedRef) {
+	const { value, onValueChange, ...groupProps } = props;
+	const handleValueChange = useCallbackRef(onValueChange);
+	return /* @__PURE__ */ jsx(RadioGroupProvider, {
+		scope: props.__scopeMenu,
+		value,
+		onValueChange: handleValueChange,
+		children: /* @__PURE__ */ jsx(MenuGroup, {
+			...groupProps,
+			ref: forwardedRef
+		})
+	});
+});
+var RADIO_ITEM_NAME = "MenuRadioItem";
+var MenuRadioItem = /* @__PURE__ */ React.forwardRef(function MenuRadioItem(props, forwardedRef) {
+	const { value, ...radioItemProps } = props;
+	const context = useRadioGroupContext(RADIO_ITEM_NAME, props.__scopeMenu);
+	const checked = value === context.value;
+	return /* @__PURE__ */ jsx(ItemIndicatorProvider, {
+		scope: props.__scopeMenu,
+		checked,
+		children: /* @__PURE__ */ jsx(MenuItem, {
+			role: "menuitemradio",
+			"aria-checked": checked,
+			...radioItemProps,
+			ref: forwardedRef,
+			"data-state": getCheckedState(checked),
+			onSelect: composeEventHandlers(radioItemProps.onSelect, () => context.onValueChange?.(value), { checkForDefaultPrevented: false })
+		})
+	});
+});
+var ITEM_INDICATOR_NAME = "MenuItemIndicator";
+var [ItemIndicatorProvider, useItemIndicatorContext] = createMenuContext(ITEM_INDICATOR_NAME, { checked: false });
+var MenuItemIndicator = /* @__PURE__ */ React.forwardRef(function MenuItemIndicator(props, forwardedRef) {
+	const { __scopeMenu, forceMount, ...itemIndicatorProps } = props;
+	const indicatorContext = useItemIndicatorContext(ITEM_INDICATOR_NAME, __scopeMenu);
+	return /* @__PURE__ */ jsx(Presence, {
+		present: forceMount || isIndeterminate(indicatorContext.checked) || indicatorContext.checked === true,
+		children: /* @__PURE__ */ jsx(Primitive.span, {
+			...itemIndicatorProps,
+			ref: forwardedRef,
+			"data-state": getCheckedState(indicatorContext.checked)
+		})
+	});
+});
+var MenuSeparator = /* @__PURE__ */ React.forwardRef(function MenuSeparator(props, forwardedRef) {
+	const { __scopeMenu, ...separatorProps } = props;
+	return /* @__PURE__ */ jsx(Primitive.div, {
+		role: "separator",
+		"aria-orientation": "horizontal",
+		...separatorProps,
+		ref: forwardedRef
+	});
+});
+var SUB_NAME = "MenuSub";
+var [MenuSubProvider, useMenuSubContext] = createMenuContext(SUB_NAME);
+var MenuSub = (props) => {
+	const { __scopeMenu, children, open = false, onOpenChange } = props;
+	const parentMenuContext = useMenuContext(SUB_NAME, __scopeMenu);
+	const popperScope = usePopperScope(__scopeMenu);
+	const [trigger, setTrigger] = React.useState(null);
+	const [content, setContent] = React.useState(null);
+	const handleOpenChange = useCallbackRef(onOpenChange);
+	React.useEffect(() => {
+		if (parentMenuContext.open === false) handleOpenChange(false);
+		return () => handleOpenChange(false);
+	}, [parentMenuContext.open, handleOpenChange]);
+	return /* @__PURE__ */ jsx(Root$1, {
+		...popperScope,
+		children: /* @__PURE__ */ jsx(MenuProvider, {
+			scope: __scopeMenu,
+			open,
+			onOpenChange: handleOpenChange,
+			content,
+			onContentChange: setContent,
+			children: /* @__PURE__ */ jsx(MenuSubProvider, {
+				scope: __scopeMenu,
+				contentId: useId(),
+				triggerId: useId(),
+				trigger,
+				onTriggerChange: setTrigger,
+				children
+			})
+		})
+	});
+};
+var SUB_TRIGGER_NAME = "MenuSubTrigger";
+var MenuSubTrigger = /* @__PURE__ */ React.forwardRef(function MenuSubTrigger(props, forwardedRef) {
+	const context = useMenuContext(SUB_TRIGGER_NAME, props.__scopeMenu);
+	const rootContext = useMenuRootContext(SUB_TRIGGER_NAME, props.__scopeMenu);
+	const subContext = useMenuSubContext(SUB_TRIGGER_NAME, props.__scopeMenu);
+	const contentContext = useMenuContentContext(SUB_TRIGGER_NAME, props.__scopeMenu);
+	const openTimerRef = React.useRef(null);
+	const { pointerGraceTimerRef, onPointerGraceIntentChange } = contentContext;
+	const scope = { __scopeMenu: props.__scopeMenu };
+	const clearOpenTimer = React.useCallback(() => {
+		if (openTimerRef.current) window.clearTimeout(openTimerRef.current);
+		openTimerRef.current = null;
+	}, []);
+	React.useEffect(() => clearOpenTimer, [clearOpenTimer]);
+	React.useEffect(() => {
+		const pointerGraceTimer = pointerGraceTimerRef.current;
+		return () => {
+			window.clearTimeout(pointerGraceTimer);
+			onPointerGraceIntentChange(null);
+		};
+	}, [pointerGraceTimerRef, onPointerGraceIntentChange]);
+	const composedRefs = useComposedRefs(forwardedRef, subContext.onTriggerChange);
+	return /* @__PURE__ */ jsx(MenuAnchor, {
+		asChild: true,
+		...scope,
+		children: /* @__PURE__ */ jsx(MenuItemImpl, {
+			id: subContext.triggerId,
+			"aria-haspopup": "menu",
+			"aria-expanded": context.open,
+			"aria-controls": context.open ? subContext.contentId : void 0,
+			"data-state": getOpenState(context.open),
+			...props,
+			ref: composedRefs,
+			onClick: (event) => {
+				props.onClick?.(event);
+				if (props.disabled || event.defaultPrevented) return;
+				/**
+				* We manually focus because iOS Safari doesn't always focus on click (e.g. buttons)
+				* and we rely heavily on `onFocusOutside` for submenus to close when switching
+				* between separate submenus.
+				*/
+				event.currentTarget.focus();
+				if (!context.open) context.onOpenChange(true);
+			},
+			onPointerMove: composeEventHandlers(props.onPointerMove, whenMouse((event) => {
+				contentContext.onItemEnter(event);
+				if (event.defaultPrevented) return;
+				if (!props.disabled && !context.open && !openTimerRef.current) {
+					contentContext.onPointerGraceIntentChange(null);
+					openTimerRef.current = window.setTimeout(() => {
+						context.onOpenChange(true);
+						clearOpenTimer();
+					}, 100);
+				}
+			})),
+			onPointerLeave: composeEventHandlers(props.onPointerLeave, whenMouse((event) => {
+				clearOpenTimer();
+				const contentRect = context.content?.getBoundingClientRect();
+				if (contentRect) {
+					const side = context.content?.dataset.side;
+					const rightSide = side === "right";
+					const bleed = rightSide ? -5 : 5;
+					const contentNearEdge = contentRect[rightSide ? "left" : "right"];
+					const contentFarEdge = contentRect[rightSide ? "right" : "left"];
+					contentContext.onPointerGraceIntentChange({
+						area: [
+							{
+								x: event.clientX + bleed,
+								y: event.clientY
+							},
+							{
+								x: contentNearEdge,
+								y: contentRect.top
+							},
+							{
+								x: contentFarEdge,
+								y: contentRect.top
+							},
+							{
+								x: contentFarEdge,
+								y: contentRect.bottom
+							},
+							{
+								x: contentNearEdge,
+								y: contentRect.bottom
+							}
+						],
+						side
+					});
+					window.clearTimeout(pointerGraceTimerRef.current);
+					pointerGraceTimerRef.current = window.setTimeout(() => contentContext.onPointerGraceIntentChange(null), 300);
+				} else {
+					contentContext.onTriggerLeave(event);
+					if (event.defaultPrevented) return;
+					contentContext.onPointerGraceIntentChange(null);
+				}
+			})),
+			onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
+				if (props.disabled || event.target !== event.currentTarget) return;
+				if (contentContext.searchRef.current !== "" && event.key === " ") return;
+				if (SUB_OPEN_KEYS[rootContext.dir].includes(event.key)) {
+					context.onOpenChange(true);
+					context.content?.focus();
+					event.preventDefault();
+				}
+			})
+		})
+	});
+});
+var SUB_CONTENT_NAME = "MenuSubContent";
+var MenuSubContent = /* @__PURE__ */ React.forwardRef(function MenuSubContent(props, forwardedRef) {
+	const portalContext = usePortalContext(CONTENT_NAME, props.__scopeMenu);
+	const { forceMount = portalContext.forceMount, align = "start", ...subContentProps } = props;
+	const context = useMenuContext(CONTENT_NAME, props.__scopeMenu);
+	const rootContext = useMenuRootContext(CONTENT_NAME, props.__scopeMenu);
+	const subContext = useMenuSubContext(SUB_CONTENT_NAME, props.__scopeMenu);
+	const ref = React.useRef(null);
+	const composedRefs = useComposedRefs(forwardedRef, ref);
+	return /* @__PURE__ */ jsx(Collection.Provider, {
+		scope: props.__scopeMenu,
+		children: /* @__PURE__ */ jsx(Presence, {
+			present: forceMount || context.open,
+			children: /* @__PURE__ */ jsx(Collection.Slot, {
+				scope: props.__scopeMenu,
+				children: /* @__PURE__ */ jsx(MenuContentImpl, {
+					id: subContext.contentId,
+					"aria-labelledby": subContext.triggerId,
+					...subContentProps,
+					ref: composedRefs,
+					align,
+					side: rootContext.dir === "rtl" ? "left" : "right",
+					disableOutsidePointerEvents: false,
+					disableOutsideScroll: false,
+					trapFocus: false,
+					onOpenAutoFocus: (event) => {
+						if (rootContext.isUsingKeyboardRef.current) ref.current?.focus();
+						event.preventDefault();
+					},
+					onCloseAutoFocus: (event) => event.preventDefault(),
+					onFocusOutside: composeEventHandlers(props.onFocusOutside, (event) => {
+						if (event.target !== subContext.trigger) context.onOpenChange(false);
+					}),
+					onEscapeKeyDown: composeEventHandlers(props.onEscapeKeyDown, (event) => {
+						rootContext.onClose();
+						event.preventDefault();
+					}),
+					onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
+						const isKeyDownInside = event.currentTarget.contains(event.target);
+						const isCloseKey = SUB_CLOSE_KEYS[rootContext.dir].includes(event.key);
+						if (isKeyDownInside && isCloseKey) {
+							context.onOpenChange(false);
+							subContext.trigger?.focus();
+							event.preventDefault();
+						}
+					})
+				})
+			})
+		})
+	});
+});
+function getOpenState(open) {
+	return open ? "open" : "closed";
+}
+function isIndeterminate(checked) {
+	return checked === "indeterminate";
+}
+function getCheckedState(checked) {
+	return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
+}
+function focusFirst(candidates) {
+	const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
+	for (const candidate of candidates) {
+		if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
+		candidate.focus();
+		if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
+	}
+}
+/**
+* Wraps an array around itself at a given start index
+* Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`
+*/
+function wrapArray(array, startIndex) {
+	return array.map((_, index) => array[(startIndex + index) % array.length]);
+}
+/**
+* This is the "meat" of the typeahead matching logic. It takes in all the values,
+* the search and the current match, and returns the next match (or `undefined`).
+*
+* We normalize the search because if a user has repeatedly pressed a character,
+* we want the exact same behavior as if we only had that one character
+* (ie. cycle through options starting with that character)
+*
+* We also reorder the values by wrapping the array around the current match.
+* This is so we always look forward from the current match, and picking the first
+* match will always be the correct one.
+*
+* Finally, if the normalized search is exactly one character, we exclude the
+* current match from the values because otherwise it would be the first to match always
+* and focus would never move. This is as opposed to the regular case, where we
+* don't want focus to move if the current match still matches.
+*/
+function getNextMatch(values, search, currentMatch) {
+	const normalizedSearch = search.length > 1 && Array.from(search).every((char) => char === search[0]) ? search[0] : search;
+	const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
+	let wrappedValues = wrapArray(values, Math.max(currentMatchIndex, 0));
+	if (normalizedSearch.length === 1) wrappedValues = wrappedValues.filter((v) => v !== currentMatch);
+	const nextMatch = wrappedValues.find((value) => value.toLowerCase().startsWith(normalizedSearch.toLowerCase()));
+	return nextMatch !== currentMatch ? nextMatch : void 0;
+}
+function isPointInPolygon(point, polygon) {
+	const { x, y } = point;
+	let inside = false;
+	for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+		const ii = polygon[i];
+		const jj = polygon[j];
+		const xi = ii.x;
+		const yi = ii.y;
+		const xj = jj.x;
+		const yj = jj.y;
+		if (yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi) inside = !inside;
+	}
+	return inside;
+}
+function isPointerInGraceArea(event, area) {
+	if (!area) return false;
+	return isPointInPolygon({
+		x: event.clientX,
+		y: event.clientY
+	}, area);
+}
+function whenMouse(handler) {
+	return (event) => event.pointerType === "mouse" ? handler(event) : void 0;
+}
+var Root = Menu;
+var Anchor = MenuAnchor;
+var Portal = MenuPortal;
+var Content = MenuContent;
+var Group = MenuGroup;
+var Label = MenuLabel;
+var Item = MenuItem;
+var CheckboxItem = MenuCheckboxItem;
+var RadioGroup = MenuRadioGroup;
+var RadioItem = MenuRadioItem;
+var ItemIndicator = MenuItemIndicator;
+var Separator = MenuSeparator;
+var Sub = MenuSub;
+var SubTrigger = MenuSubTrigger;
+var SubContent = MenuSubContent;
+//#endregion
+export { Anchor, CheckboxItem, Content, Group, Item, ItemIndicator, Label, Menu, MenuAnchor, MenuCheckboxItem, MenuContent, MenuGroup, MenuItem, MenuItemIndicator, MenuLabel, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, Portal, RadioGroup, RadioItem, Root, Separator, Sub, SubContent, SubTrigger, createMenuScope };
+
+//# sourceMappingURL=menu.js.map