@tamagui/create-menu 2.7.7 → 3.0.0-beta.637.1

package/dist/cjs/createBaseMenu.native.cjs

@@ -0,0 +1,1217 @@
+"use strict";
+
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var createBaseMenu_exports = {};
+__export(createBaseMenu_exports, { createBaseMenu: () => createBaseMenu });
+module.exports = __toCommonJS(createBaseMenu_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_core = require("@tamagui/core");
+var import_animate = require("@tamagui/animate");
+var import_animate_presence = require("@tamagui/animate-presence");
+var import_collection = require("@tamagui/collection");
+var import_dismissable = require("@tamagui/dismissable");
+var import_focus_guard = require("@tamagui/focus-guard");
+var import_focus_scope = require("@tamagui/focus-scope");
+var import_image = require("@tamagui/image");
+var PopperPrimitive = __toESM(require("@tamagui/popper"), 1);
+var import_portal = require("@tamagui/portal");
+var import_remove_scroll = require("@tamagui/remove-scroll");
+var import_roving_focus = require("@tamagui/roving-focus");
+var import_use_callback_ref = require("@tamagui/use-callback-ref");
+var import_use_direction = require("@tamagui/use-direction");
+var import_web = require("@tamagui/web");
+var React = __toESM(require("react"), 1);
+var import_react = require("react");
+function _instanceof(left, right) {
+	if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
+		return !!right[Symbol.hasInstance](left);
+	} else {
+		return left instanceof right;
+	}
+}
+function _type_of(obj) {
+	"@swc/helpers - typeof";
+	return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+function whenMouse(handler) {
+	return function(event) {
+		return event.pointerType === "mouse" ? handler(event) : void 0;
+	};
+}
+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] = (0, import_collection.createCollection)(MENU_NAME);
+var { Provider: MenuProvider, useStyledContext: useMenuContext } = (0, import_web.createStyledContext)();
+var { Provider: MenuRootProvider, useStyledContext: useMenuRootContext } = (0, import_web.createStyledContext)();
+var MENU_CONTEXT = "MenuContext";
+var MenuImageFrame = (0, import_web.styled)(import_image.Image, { displayName: "MenuItemImage" });
+function createBaseMenu() {
+	var MenuComp = function(props) {
+		var direction = (0, import_use_direction.useDirection)(props.dir);
+		var defaultPlacement = direction === "rtl" ? "bottom-end" : "bottom-start";
+		var { scope = MENU_CONTEXT, open = false, children, dir, onOpenChange, modal = true, allowFlip = { padding: 10 }, stayInFrame = { padding: 10 }, placement = defaultPlacement, resize = true, offset = 10, ...rest } = props;
+		var [content, setContent] = React.useState(null);
+		var isUsingKeyboardRef = React.useRef(false);
+		var handleOpenChange = (0, import_use_callback_ref.useCallbackRef)(onOpenChange);
+		if (import_web.isWeb) {
+			React.useEffect(function() {
+				var handleKeyDown = function() {
+					isUsingKeyboardRef.current = true;
+					document.addEventListener("pointerdown", handlePointer, {
+						capture: true,
+						once: true
+					});
+					document.addEventListener("pointermove", handlePointer, {
+						capture: true,
+						once: true
+					});
+				};
+				var handlePointer = function() {
+					return isUsingKeyboardRef.current = false;
+				};
+				document.addEventListener("keydown", handleKeyDown, { capture: true });
+				return function() {
+					document.removeEventListener("keydown", handleKeyDown, { capture: true });
+					document.removeEventListener("pointerdown", handlePointer, { capture: true });
+					document.removeEventListener("pointermove", handlePointer, { capture: true });
+				};
+			}, []);
+		}
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.Popper, {
+			scope,
+			open,
+			placement,
+			allowFlip,
+			stayInFrame,
+			resize,
+			offset,
+			...rest,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuProvider, {
+				scope,
+				open,
+				onOpenChange: handleOpenChange,
+				content,
+				onContentChange: setContent,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuRootProvider, {
+					scope,
+					open,
+					onClose: React.useCallback(function() {
+						return handleOpenChange(false);
+					}, [handleOpenChange]),
+					isUsingKeyboardRef,
+					dir: direction,
+					modal,
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuSubProvider, {
+						scope,
+						children
+					})
+				})
+			})
+		});
+	};
+	var RepropagateMenuAndMenuRootProvider = function(props) {
+		var { scope = MENU_CONTEXT, menuContext, rootContext, popperContext, menuSubContext, children } = props;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.PopperProvider, {
+			...popperContext,
+			scope,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuProvider, {
+				scope,
+				...menuContext,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuRootProvider, {
+					scope,
+					...rootContext,
+					children: menuSubContext ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuSubProvider, {
+						scope,
+						...menuSubContext,
+						children
+					}) : children
+				})
+			})
+		});
+	};
+	MenuComp.displayName = MENU_NAME;
+	var ANCHOR_NAME = "MenuAnchor";
+	var MenuAnchor = function(props) {
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.PopperAnchor, {
+			scope: MENU_CONTEXT,
+			...props
+		});
+	};
+	MenuAnchor.displayName = ANCHOR_NAME;
+	var PORTAL_NAME = "MenuPortal";
+	var { Provider: PortalProvider, useStyledContext: usePortalContext } = (0, import_web.createStyledContext)(void 0, "Portal");
+	var MenuPortal = function(props) {
+		var { scope = MENU_CONTEXT, forceMount, zIndex, children } = props;
+		var menuContext = useMenuContext(scope);
+		var rootContext = useMenuRootContext(scope);
+		var popperContext = PopperPrimitive.usePopperContext(scope);
+		var menuSubContext = useMenuSubContext(scope);
+		var themeName = (0, import_web.useThemeName)();
+		var themedChildren = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web.Theme, {
+			forceClassName: true,
+			name: themeName,
+			children
+		});
+		var content = (0, import_portal.needsPortalRepropagation)() ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RepropagateMenuAndMenuRootProvider, {
+			menuContext,
+			rootContext,
+			popperContext,
+			menuSubContext,
+			scope,
+			children: themedChildren
+		}) : themedChildren;
+		var isPresent = forceMount || rootContext.open && menuContext.open;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_animate.Animate, {
+			type: "presence",
+			present: isPresent,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.Portal, {
+				stackZIndex: true,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PortalProvider, {
+					scope,
+					forceMount,
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_web.View, {
+						zIndex: zIndex || 100,
+						inset: 0,
+						position: "absolute",
+						children: [!!menuContext.open && !import_web.isWeb && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web.View, {
+							inset: 0,
+							position: "absolute",
+							onPress: function() {
+								return menuContext.onOpenChange(!menuContext.open);
+							}
+						}), content]
+					})
+				}) })
+			})
+		});
+	};
+	MenuPortal.displayName = PORTAL_NAME;
+	var CONTENT_NAME = "MenuContent";
+	var { Provider: MenuContentProvider, useStyledContext: useMenuContentContext } = (0, import_web.createStyledContext)();
+	var MenuContentFrame = (0, import_web.styled)(PopperPrimitive.PopperContentFrame, { displayName: CONTENT_NAME });
+	var MenuContent = (0, import_core.createStyledHOC)(MenuContentFrame, function(props, forwardedRef) {
+		var scope = props.scope || MENU_CONTEXT;
+		var portalContext = usePortalContext(scope);
+		var { forceMount = portalContext.forceMount, ...contentProps } = props;
+		var rootContext = useMenuRootContext(scope);
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Provider, {
+			scope,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Slot, {
+				scope,
+				children: rootContext.modal ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuRootContentModal, {
+					...contentProps,
+					ref: forwardedRef
+				}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuRootContentNonModal, {
+					...contentProps,
+					ref: forwardedRef
+				})
+			})
+		});
+	});
+	var MenuRootContentModal = (0, import_core.createRefComponent)(function(props, forwardedRef) {
+		var scope = props.scope || MENU_CONTEXT;
+		var context = useMenuContext(scope);
+		var ref = React.useRef(null);
+		var composedRefs = (0, import_web.useComposedRefs)(forwardedRef, ref);
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuContentImpl, {
+			...props,
+			scope,
+			ref: composedRefs,
+			trapFocus: context.open,
+			disableOutsidePointerEvents: context.open,
+			disableOutsideScroll: false,
+			onFocusOutside: (0, import_web.composeEventHandlers)(props.onFocusOutside, function(event) {
+				return event.cancel();
+			}, { checkDefaultPrevented: false }),
+			onDismiss: function() {
+				return context.onOpenChange(false);
+			}
+		});
+	});
+	var MenuRootContentNonModal = (0, import_core.createRefComponent)(function(props, forwardedRef) {
+		var scope = props.scope || MENU_CONTEXT;
+		var context = useMenuContext(scope);
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuContentImpl, {
+			...props,
+			scope,
+			ref: forwardedRef,
+			trapFocus: false,
+			disableOutsidePointerEvents: false,
+			disableOutsideScroll: false,
+			onDismiss: function() {
+				return context.onOpenChange(false);
+			}
+		});
+	});
+	var MenuContentImpl = (0, import_core.createRefComponent)(function(props, forwardedRef) {
+		var { scope = MENU_CONTEXT, loop = false, trapFocus, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, onEntryFocus, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, onDismiss, disableOutsideScroll, disableDismissOnScroll = false, ...contentProps } = props;
+		var context = useMenuContext(scope);
+		var rootContext = useMenuRootContext(scope);
+		var popperContext = PopperPrimitive.usePopperContext(scope);
+		var getItems = useCollection(scope);
+		var [currentItemId, setCurrentItemId] = React.useState(null);
+		var contentRef = React.useRef(null);
+		var focusableContentRef = React.useRef(null);
+		var composedRefs = (0, import_web.useComposedRefs)(forwardedRef, contentRef, context.onContentChange);
+		var timerRef = React.useRef(0);
+		var searchRef = React.useRef("");
+		var pointerGraceTimerRef = React.useRef(0);
+		var pointerGraceIntentRef = React.useRef(null);
+		var pointerDirRef = React.useRef("right");
+		var lastPointerXRef = React.useRef(0);
+		var handleTypeaheadSearch = function(key) {
+			var _items_find, _items_find1;
+			var search = searchRef.current + key;
+			var items = getItems().filter(function(item) {
+				return !item.disabled;
+			});
+			var currentItem = document.activeElement;
+			var currentMatch = (_items_find = items.find(function(item) {
+				return item.ref.current === currentItem;
+			})) === null || _items_find === void 0 ? void 0 : _items_find.textValue;
+			var values = items.map(function(item) {
+				return item.textValue;
+			});
+			var nextMatch = getNextMatch(values, search, currentMatch);
+			var newItem = (_items_find1 = items.find(function(item) {
+				return item.textValue === nextMatch;
+			})) === null || _items_find1 === void 0 ? void 0 : _items_find1.ref.current;
+			(function updateSearch(value) {
+				searchRef.current = value;
+				clearTimeout(timerRef.current);
+				if (value !== "") timerRef.current = setTimeout(function() {
+					return updateSearch("");
+				}, 1e3);
+			})(search);
+			if (newItem) {
+				setTimeout(function() {
+					return newItem.focus();
+				});
+			}
+		};
+		React.useEffect(function() {
+			return function() {
+				return clearTimeout(timerRef.current);
+			};
+		}, []);
+		React.useEffect(function() {
+			if (!import_web.isWeb || !context.open) return;
+			var frame = requestAnimationFrame(function() {
+				var container = contentRef.current;
+				var el = container === null || container === void 0 ? void 0 : container.querySelector("[data-tamagui-menu-content]");
+				if (el) focusableContentRef.current = el;
+			});
+			return function() {
+				return cancelAnimationFrame(frame);
+			};
+		}, [context.open]);
+		React.useEffect(function() {
+			if (!import_web.isWeb || disableDismissOnScroll || !context.open) return;
+			var handleScroll = function(event) {
+				var _popperContext_refs_reference, _popperContext_refs;
+				var scrolled = event.target;
+				if (!scrolled) return;
+				var content2 = contentRef.current;
+				if (content2 === null || content2 === void 0 ? void 0 : content2.contains(scrolled)) return;
+				var reference = (_popperContext_refs = popperContext.refs) === null || _popperContext_refs === void 0 ? void 0 : (_popperContext_refs_reference = _popperContext_refs.reference) === null || _popperContext_refs_reference === void 0 ? void 0 : _popperContext_refs_reference.current;
+				var _reference_contextElement;
+				var anchor = _instanceof(reference, Element) ? reference : (_reference_contextElement = reference === null || reference === void 0 ? void 0 : reference.contextElement) !== null && _reference_contextElement !== void 0 ? _reference_contextElement : null;
+				if (anchor && !scrolled.contains(anchor)) return;
+				context.onOpenChange(false);
+			};
+			window.addEventListener("scroll", handleScroll, {
+				capture: true,
+				passive: true
+			});
+			return function() {
+				window.removeEventListener("scroll", handleScroll, { capture: true });
+			};
+		}, [
+			disableDismissOnScroll,
+			context.open,
+			context.onOpenChange,
+			popperContext.refs
+		]);
+		if (import_web.isWeb) {
+			(0, import_focus_guard.useFocusGuards)();
+		}
+		var isPointerMovingToSubmenu = React.useCallback(function(event) {
+			var _pointerGraceIntentRef_current, _pointerGraceIntentRef_current1;
+			var isMovingTowards = pointerDirRef.current === ((_pointerGraceIntentRef_current = pointerGraceIntentRef.current) === null || _pointerGraceIntentRef_current === void 0 ? void 0 : _pointerGraceIntentRef_current.side);
+			var inArea = isPointerInGraceArea(event, (_pointerGraceIntentRef_current1 = pointerGraceIntentRef.current) === null || _pointerGraceIntentRef_current1 === void 0 ? void 0 : _pointerGraceIntentRef_current1.area);
+			return isMovingTowards && inArea;
+		}, []);
+		var content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.PopperContent, {
+			role: "menu",
+			tabIndex: -1,
+			"aria-orientation": "vertical",
+			"data-state": getOpenState(context.open),
+			"data-tamagui-menu-content": "",
+			dir: rootContext.dir,
+			scope: scope || MENU_CONTEXT,
+			...contentProps,
+			ref: composedRefs,
+			className: contentProps.transition ? void 0 : contentProps.className,
+			...import_web.isWeb ? {
+				onKeyDown: (0, import_web.composeEventHandlers)(contentProps.onKeyDown, function(event) {
+					var target = event.target;
+					var isKeyDownInside = target.closest("[data-tamagui-menu-content]") === event.currentTarget;
+					var isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
+					var isCharacterKey = event.key.length === 1;
+					if (isKeyDownInside) {
+						if (event.key === "Tab") event.preventDefault();
+						if (!isModifierKey && isCharacterKey) handleTypeaheadSearch(event.key);
+					}
+					var isOnContentFrame = event.target.hasAttribute("data-tamagui-menu-content");
+					if (!isKeyDownInside || !isOnContentFrame) return;
+					if (!FIRST_LAST_KEYS.includes(event.key)) return;
+					event.preventDefault();
+					var items = getItems().filter(function(item) {
+						return !item.disabled;
+					});
+					var candidateNodes = items.map(function(item) {
+						return item.ref.current;
+					});
+					if (LAST_KEYS.includes(event.key)) candidateNodes.reverse();
+					focusFirst(candidateNodes, { focusVisible: true });
+				}),
+				onBlur: (0, import_web.composeEventHandlers)(props.onBlur, function(event) {
+					var _event_currentTarget;
+					if (!((_event_currentTarget = event.currentTarget) === null || _event_currentTarget === void 0 ? void 0 : _event_currentTarget.contains(event.target))) {
+						clearTimeout(timerRef.current);
+						searchRef.current = "";
+					}
+				}),
+				onPointerMove: (0, import_web.composeEventHandlers)(props.onPointerMove, function(event) {
+					var _event_currentTarget;
+					if (event.pointerType !== "mouse") return;
+					var target = event.target;
+					var pointerXHasChanged = lastPointerXRef.current !== event.clientX;
+					if (((_event_currentTarget = event.currentTarget) === null || _event_currentTarget === void 0 ? void 0 : _event_currentTarget.contains(target)) && pointerXHasChanged) {
+						var newDir = event.clientX > lastPointerXRef.current ? "right" : "left";
+						pointerDirRef.current = newDir;
+						lastPointerXRef.current = event.clientX;
+					}
+				})
+			} : {}
+		});
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuContentProvider, {
+			scope,
+			searchRef,
+			onItemEnter: React.useCallback(function(event) {
+				if (isPointerMovingToSubmenu(event)) event.preventDefault();
+			}, [isPointerMovingToSubmenu]),
+			onItemLeave: React.useCallback(function(event) {
+				var _focusableContentRef_current;
+				if (isPointerMovingToSubmenu(event)) return;
+				(_focusableContentRef_current = focusableContentRef.current) === null || _focusableContentRef_current === void 0 ? void 0 : _focusableContentRef_current.focus();
+				setCurrentItemId(null);
+			}, [isPointerMovingToSubmenu]),
+			onTriggerLeave: React.useCallback(function(event) {
+				if (isPointerMovingToSubmenu(event)) event.preventDefault();
+			}, [isPointerMovingToSubmenu]),
+			pointerGraceTimerRef,
+			onPointerGraceIntentChange: React.useCallback(function(intent) {
+				pointerGraceIntentRef.current = intent;
+			}, []),
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_remove_scroll.RemoveScroll, {
+				enabled: disableOutsideScroll,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_focus_scope.FocusScope, {
+					asChild: false,
+					trapped: trapFocus,
+					onMountAutoFocus: (0, import_web.composeEventHandlers)(onOpenAutoFocus, function(event) {
+						event.cancel();
+						var content2 = document.querySelector("[data-tamagui-menu-content]");
+						content2 === null || content2 === void 0 ? void 0 : content2.focus({ preventScroll: true });
+					}),
+					onUnmountAutoFocus: onCloseAutoFocus,
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dismissable.Dismissable, {
+						disableOutsidePointerEvents,
+						onEscapeKeyDown,
+						onPointerDownOutside,
+						onFocusOutside,
+						onInteractOutside,
+						onDismiss,
+						asChild: true,
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup, {
+							asChild: true,
+							__scopeRovingFocusGroup: scope || MENU_CONTEXT,
+							dir: rootContext.dir,
+							orientation: "vertical",
+							loop,
+							currentTabStopId: currentItemId,
+							onCurrentTabStopIdChange: setCurrentItemId,
+							onEntryFocus: (0, import_web.composeEventHandlers)(onEntryFocus, function(event) {
+								if (!rootContext.isUsingKeyboardRef.current) {
+									event.cancel();
+								}
+							}),
+							children: content
+						})
+					})
+				})
+			})
+		});
+	});
+	MenuContent.displayName = CONTENT_NAME;
+	var ITEM_NAME = "MenuItem";
+	var ITEM_SELECT = "menu.itemSelect";
+	var MenuItem = (0, import_core.createStyledHOC)(import_web.View, function(props, forwardedRef) {
+		var { disabled = false, onSelect, preventCloseOnSelect, children, scope = MENU_CONTEXT, destructive, hidden, androidIconName, ...itemProps } = props;
+		var ref = React.useRef(null);
+		var rootContext = useMenuRootContext(scope);
+		var contentContext = useMenuContentContext(scope);
+		var composedRefs = (0, import_web.useComposedRefs)(forwardedRef, ref);
+		var isPointerDownRef = React.useRef(false);
+		var handleSelect = function() {
+			var menuItem = ref.current;
+			if (!disabled && menuItem) {
+				if (import_web.isWeb) {
+					var menuItemEl = menuItem;
+					var itemSelectEvent = new CustomEvent(ITEM_SELECT, {
+						bubbles: true,
+						cancelable: true
+					});
+					menuItemEl.addEventListener(ITEM_SELECT, function(event) {
+						return onSelect === null || onSelect === void 0 ? void 0 : onSelect(event);
+					}, { once: true });
+					(0, import_dismissable.dispatchDiscreteCustomEvent)(menuItemEl, itemSelectEvent);
+					if (itemSelectEvent.defaultPrevented || preventCloseOnSelect) {
+						isPointerDownRef.current = false;
+					} else {
+						rootContext.onClose();
+					}
+				} else {
+					onSelect === null || onSelect === void 0 ? void 0 : onSelect({ target: menuItem });
+					isPointerDownRef.current = false;
+					if (!preventCloseOnSelect) {
+						rootContext.onClose();
+					}
+				}
+			}
+		};
+		var content = typeof children === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web.Text, { children }) : children;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuItemImpl, {
+			...itemProps,
+			scope,
+			ref: composedRefs,
+			disabled,
+			onPress: (0, import_web.composeEventHandlers)(props.onPress, handleSelect),
+			onPointerDown: function(event) {
+				var _props_onPointerDown;
+				(_props_onPointerDown = props.onPointerDown) === null || _props_onPointerDown === void 0 ? void 0 : _props_onPointerDown.call(props, event);
+				isPointerDownRef.current = true;
+			},
+			onPointerUp: (0, import_web.composeEventHandlers)(props.onPointerUp, function(event) {
+				if (import_web.isWeb) {
+					var _event_currentTarget;
+					if (!isPointerDownRef.current) (_event_currentTarget = event.currentTarget) === null || _event_currentTarget === void 0 ? void 0 : _event_currentTarget.click();
+				}
+			}),
+			...import_web.isWeb ? { onKeyDown: (0, import_web.composeEventHandlers)(props.onKeyDown, function(event) {
+				var isTypingAhead = contentContext.searchRef.current !== "";
+				if (disabled || isTypingAhead && event.key === " ") return;
+				if (SELECTION_KEYS.includes(event.key)) {
+					var _event_currentTarget;
+					(_event_currentTarget = event.currentTarget) === null || _event_currentTarget === void 0 ? void 0 : _event_currentTarget.click();
+					event.preventDefault();
+				}
+			}) } : {},
+			children: content
+		});
+	});
+	var MenuItemImpl = (0, import_core.createRefComponent)(function(props, forwardedRef) {
+		var { scope = MENU_CONTEXT, className, disabled = false, textValue, ...itemProps } = props;
+		var contentContext = useMenuContentContext(scope);
+		var ref = React.useRef(null);
+		var composedRefs = (0, import_web.useComposedRefs)(forwardedRef, ref);
+		var [isFocused, setIsFocused] = React.useState(false);
+		var [textContent, setTextContent] = React.useState("");
+		if (import_web.isWeb) {
+			React.useEffect(function() {
+				var menuItem = ref.current;
+				if (menuItem) {
+					var _menuItem_textContent;
+					setTextContent(((_menuItem_textContent = menuItem.textContent) !== null && _menuItem_textContent !== void 0 ? _menuItem_textContent : "").trim());
+				}
+			}, [itemProps.children]);
+		}
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.ItemSlot, {
+			scope,
+			disabled,
+			textValue: textValue !== null && textValue !== void 0 ? textValue : textContent,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup.Item, {
+				asChild: true,
+				__scopeRovingFocusGroup: scope,
+				tabIndex: disabled ? -1 : 0,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web.View, {
+					className: `is_${ITEM_NAME} ${className || ""}`.trim(),
+					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: (0, import_web.composeEventHandlers)(props.onPointerMove, function(event) {
+						if (event.pointerType !== "mouse") return;
+						if (disabled) {
+							contentContext.onItemLeave(event);
+						} else {
+							contentContext.onItemEnter(event);
+							if (!event.defaultPrevented) {
+								var item = event.currentTarget;
+								item.focus({
+									preventScroll: true,
+									focusVisible: false
+								});
+							}
+						}
+					}),
+					onPointerLeave: (0, import_web.composeEventHandlers)(props.onPointerLeave, function(event) {
+						contentContext.onItemLeave(event);
+					}),
+					onFocus: (0, import_web.composeEventHandlers)(props.onFocus, function() {
+						return setIsFocused(true);
+					}),
+					onBlur: (0, import_web.composeEventHandlers)(props.onBlur, function() {
+						return setIsFocused(false);
+					})
+				})
+			})
+		});
+	});
+	MenuItem.displayName = ITEM_NAME;
+	var ITEM_TITLE_NAME = "MenuItemTitle";
+	var MenuItemTitle = (0, import_core.createStyledHOC)(import_web.Text, function(props, forwardedRef) {
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web.Text, {
+			...props,
+			ref: forwardedRef
+		});
+	});
+	MenuItemTitle.displayName = ITEM_TITLE_NAME;
+	var ITEM_SUB_TITLE_NAME = "MenuItemSubTitle";
+	var MenuItemSubTitle = (0, import_core.createStyledHOC)(import_web.Text, function(props, forwardedRef) {
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web.Text, {
+			...props,
+			ref: forwardedRef
+		});
+	});
+	MenuItemSubTitle.displayName = ITEM_SUB_TITLE_NAME;
+	var ITEM_IMAGE = "MenuItemImage";
+	var MenuItemImage = (0, import_core.createRefComponent)(function(props, forwardedRef) {
+		var { ios, androidIconName, ...rest } = props;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuImageFrame, {
+			...rest,
+			ref: forwardedRef
+		});
+	});
+	MenuItemImage.displayName = ITEM_IMAGE;
+	var ITEM_ICON = "MenuItemIcon";
+	var MenuItemIcon = (0, import_core.createStyledHOC)(import_web.View, function(props, forwardedRef) {
+		var { ios, android, androidIconName, ...rest } = props;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web.View, {
+			...rest,
+			ref: forwardedRef
+		});
+	});
+	MenuItemIcon.displayName = ITEM_ICON;
+	var CHECKBOX_ITEM_NAME = "MenuCheckboxItem";
+	var MenuCheckboxItem = (0, import_core.createStyledHOC)(import_web.View, function(props, forwardedRef) {
+		var { checked = false, onCheckedChange, scope = MENU_CONTEXT, value, onValueChange, className, ...checkboxItemProps } = props;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemIndicatorProvider, {
+			scope,
+			checked,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuItem, {
+				className: `is_${CHECKBOX_ITEM_NAME} ${className || ""}`.trim(),
+				role: import_web.isWeb ? "menuitemcheckbox" : "menuitem",
+				"aria-checked": isIndeterminate(checked) ? "mixed" : checked,
+				...checkboxItemProps,
+				scope,
+				ref: forwardedRef,
+				"data-state": getCheckedState(checked),
+				onSelect: (0, import_web.composeEventHandlers)(checkboxItemProps.onSelect, function() {
+					return onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(isIndeterminate(checked) ? true : !checked);
+				}, { checkDefaultPrevented: false })
+			})
+		});
+	});
+	MenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
+	var RADIO_GROUP_NAME = "MenuRadioGroup";
+	var { Provider: RadioGroupProvider, useStyledContext: useRadioGroupContext } = (0, import_web.createStyledContext)();
+	var MenuRadioGroup = (0, import_core.createStyledHOC)(import_web.View, function(props, forwardedRef) {
+		var { value, onValueChange, scope = MENU_CONTEXT, className, ...groupProps } = props;
+		var handleValueChange = (0, import_use_callback_ref.useCallbackRef)(onValueChange);
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadioGroupProvider, {
+			scope,
+			value,
+			onValueChange: handleValueChange,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web.View, {
+				className: `is_${RADIO_GROUP_NAME} ${className || ""}`.trim(),
+				...groupProps,
+				ref: forwardedRef
+			})
+		});
+	});
+	MenuRadioGroup.displayName = RADIO_GROUP_NAME;
+	var RADIO_ITEM_NAME = "MenuRadioItem";
+	var MenuRadioItem = (0, import_core.createStyledHOC)(import_web.View, function(props, forwardedRef) {
+		var { value, scope = MENU_CONTEXT, className, ...radioItemProps } = props;
+		var context = useRadioGroupContext(scope);
+		var checked = value === context.value;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemIndicatorProvider, {
+			scope,
+			checked,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuItem, {
+				className: `is_${RADIO_ITEM_NAME} ${className || ""}`.trim(),
+				...radioItemProps,
+				scope,
+				"aria-checked": checked,
+				ref: forwardedRef,
+				role: import_web.isWeb ? "menuitemradio" : "menuitem",
+				"data-state": getCheckedState(checked),
+				onSelect: (0, import_web.composeEventHandlers)(radioItemProps.onSelect, function() {
+					var _context_onValueChange;
+					return (_context_onValueChange = context.onValueChange) === null || _context_onValueChange === void 0 ? void 0 : _context_onValueChange.call(context, value);
+				}, { checkDefaultPrevented: false })
+			})
+		});
+	});
+	MenuRadioItem.displayName = RADIO_ITEM_NAME;
+	var ITEM_INDICATOR_NAME = "MenuItemIndicator";
+	var { Provider: ItemIndicatorProvider, useStyledContext: useItemIndicatorContext } = (0, import_web.createStyledContext)();
+	var MenuItemIndicator = (0, import_core.createStyledHOC)(import_web.View, function(props, forwardedRef) {
+		var { scope = MENU_CONTEXT, className, forceMount, ...itemIndicatorProps } = props;
+		var indicatorContext = useItemIndicatorContext(scope);
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_animate_presence.AnimatePresence, { children: forceMount || isIndeterminate(indicatorContext.checked) || indicatorContext.checked === true ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web.View, {
+			className: `is_${ITEM_INDICATOR_NAME} ${className || ""}`.trim(),
+			render: "span",
+			...itemIndicatorProps,
+			ref: forwardedRef,
+			"data-state": getCheckedState(indicatorContext.checked)
+		}) : null });
+	});
+	MenuItemIndicator.displayName = ITEM_INDICATOR_NAME;
+	var MenuArrow = (0, import_core.createRefComponent)(function MenuArrow2(props, forwardedRef) {
+		var { scope = MENU_CONTEXT, className, ...rest } = props;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.PopperArrow, {
+			scope,
+			className: `is_PopperArrow ${className || ""}`.trim(),
+			...rest,
+			ref: forwardedRef
+		});
+	});
+	var SUB_NAME = "MenuSub";
+	var { Provider: MenuSubProvider, useStyledContext: useMenuSubContext } = (0, import_web.createStyledContext)();
+	var MenuSub = function(props) {
+		var _parentPopperContext_placement;
+		var isTouchDevice = (0, import_web.useIsTouchDevice)();
+		var { scope = MENU_CONTEXT } = props;
+		var rootContext = useMenuRootContext(scope);
+		var parentPopperContext = PopperPrimitive.usePopperContext(scope);
+		var parentSide = (_parentPopperContext_placement = parentPopperContext.placement) === null || _parentPopperContext_placement === void 0 ? void 0 : _parentPopperContext_placement.split("-")[0];
+		var isNestedSubmenu = parentSide === "left" || parentSide === "right";
+		var defaultPlacement = isTouchDevice ? "bottom" : isNestedSubmenu ? `${parentSide}-start` : rootContext.dir === "rtl" ? "left-start" : "right-start";
+		var { children, open = false, onOpenChange, allowFlip: allowFlipProp = { padding: 10 }, stayInFrame = { padding: 10 }, placement = defaultPlacement, ...rest } = props;
+		var allowFlip = React.useMemo(function() {
+			if (!isNestedSubmenu || typeof allowFlipProp === "boolean") return allowFlipProp;
+			if (allowFlipProp.fallbackPlacements) return allowFlipProp;
+			var side = placement.split("-")[0];
+			var align = placement.split("-")[1] || "start";
+			var otherAlign = align === "start" ? "end" : "start";
+			if (side === "left" || side === "right") {
+				var oppositeSide = side === "right" ? "left" : "right";
+				return {
+					...(typeof allowFlipProp === "undefined" ? "undefined" : _type_of(allowFlipProp)) === "object" ? allowFlipProp : {},
+					fallbackPlacements: [
+						`${side}-${otherAlign}`,
+						`${oppositeSide}-${align}`,
+						`${oppositeSide}-${otherAlign}`
+					]
+				};
+			}
+			return allowFlipProp;
+		}, [
+			isNestedSubmenu,
+			allowFlipProp,
+			placement
+		]);
+		var parentMenuContext = useMenuContext(scope);
+		var [trigger, setTrigger] = React.useState(null);
+		var [content, setContent] = React.useState(null);
+		var handleOpenChange = (0, import_use_callback_ref.useCallbackRef)(onOpenChange);
+		React.useEffect(function() {
+			if (parentMenuContext.open === false) handleOpenChange(false);
+			return function() {
+				return handleOpenChange(false);
+			};
+		}, [parentMenuContext.open, handleOpenChange]);
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.Popper, {
+			open,
+			placement,
+			allowFlip,
+			stayInFrame,
+			...rest,
+			scope,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuProvider, {
+				scope,
+				open,
+				onOpenChange: handleOpenChange,
+				content,
+				onContentChange: setContent,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuSubProvider, {
+					scope,
+					contentId: (0, import_react.useId)(),
+					triggerId: (0, import_react.useId)(),
+					trigger,
+					onTriggerChange: setTrigger,
+					children
+				})
+			})
+		});
+	};
+	MenuSub.displayName = SUB_NAME;
+	var SUB_TRIGGER_NAME = "MenuSubTrigger";
+	var MenuSubTrigger = (0, import_core.createRefComponent)(function(props, forwardedRef) {
+		var scope = props.scope || MENU_CONTEXT;
+		var context = useMenuContext(scope);
+		var rootContext = useMenuRootContext(scope);
+		var subContext = useMenuSubContext(scope);
+		var contentContext = useMenuContentContext(scope);
+		var popperContext = PopperPrimitive.usePopperContext(scope);
+		var openTimerRef = React.useRef(null);
+		var { pointerGraceTimerRef, onPointerGraceIntentChange } = contentContext;
+		var effectiveDir = rootContext.dir;
+		var clearOpenTimer = React.useCallback(function() {
+			if (openTimerRef.current) window.clearTimeout(openTimerRef.current);
+			openTimerRef.current = null;
+		}, []);
+		React.useEffect(function() {
+			return clearOpenTimer;
+		}, [clearOpenTimer]);
+		React.useEffect(function() {
+			var pointerGraceTimer = pointerGraceTimerRef.current;
+			return function() {
+				window.clearTimeout(pointerGraceTimer);
+				onPointerGraceIntentChange(null);
+			};
+		}, [pointerGraceTimerRef, onPointerGraceIntentChange]);
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuAnchor, {
+			className: `is_${SUB_TRIGGER_NAME}`,
+			asChild: "except-style",
+			scope,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuItemImpl, {
+				id: subContext.triggerId,
+				"aria-haspopup": "menu",
+				"aria-expanded": context.open,
+				"aria-controls": subContext.contentId,
+				"data-state": getOpenState(context.open),
+				...props,
+				ref: (0, import_web.composeRefs)(forwardedRef, subContext.onTriggerChange),
+				onPress: function(event) {
+					var _props_onPress;
+					(_props_onPress = props.onPress) === null || _props_onPress === void 0 ? void 0 : _props_onPress.call(props, event);
+					if (props.disabled || event.defaultPrevented) return;
+					if (import_web.isWeb) {
+						event.currentTarget.focus();
+					}
+					if (!context.open) context.onOpenChange(true);
+				},
+				onPointerMove: (0, import_web.composeEventHandlers)(props.onPointerMove, whenMouse(function(event) {
+					contentContext.onItemEnter(event);
+					if (event.defaultPrevented) return;
+					if (!props.disabled && !context.open && !openTimerRef.current) {
+						contentContext.onPointerGraceIntentChange(null);
+						openTimerRef.current = window.setTimeout(function() {
+							context.onOpenChange(true);
+							clearOpenTimer();
+						}, 100);
+					}
+				})),
+				onPointerLeave: (0, import_web.composeEventHandlers)(props.onPointerLeave, function(eventIn) {
+					var _context_content;
+					var event = eventIn;
+					clearOpenTimer();
+					var contentRect = (_context_content = context.content) === null || _context_content === void 0 ? void 0 : _context_content.getBoundingClientRect();
+					if (contentRect) {
+						var _contentEl_dataset, _sideEl_dataset;
+						var contentEl = context.content;
+						var sideEl = (contentEl === null || contentEl === void 0 ? void 0 : (_contentEl_dataset = contentEl.dataset) === null || _contentEl_dataset === void 0 ? void 0 : _contentEl_dataset.side) ? contentEl : contentEl === null || contentEl === void 0 ? void 0 : contentEl.querySelector("[data-side]");
+						var side = (sideEl === null || sideEl === void 0 ? void 0 : (_sideEl_dataset = sideEl.dataset) === null || _sideEl_dataset === void 0 ? void 0 : _sideEl_dataset.side) || "right";
+						var rightSide = side === "right";
+						var bleed = rightSide ? -5 : 5;
+						var contentNearEdge = contentRect[rightSide ? "left" : "right"];
+						var contentFarEdge = contentRect[rightSide ? "right" : "left"];
+						var polygon = {
+							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
+						};
+						contentContext.onPointerGraceIntentChange(polygon);
+						window.clearTimeout(pointerGraceTimerRef.current);
+						pointerGraceTimerRef.current = window.setTimeout(function() {
+							return contentContext.onPointerGraceIntentChange(null);
+						}, 300);
+					} else if (import_web.isWeb && subContext.trigger) {
+						var triggerEl = subContext.trigger;
+						var triggerRect = triggerEl === null || triggerEl === void 0 ? void 0 : triggerEl.getBoundingClientRect();
+						if (triggerRect) {
+							var _popperContext_placement;
+							var placementSide = (_popperContext_placement = popperContext.placement) === null || _popperContext_placement === void 0 ? void 0 : _popperContext_placement.split("-")[0];
+							var side1 = placementSide === "left" || placementSide === "right" ? placementSide : rootContext.dir === "rtl" ? "left" : "right";
+							var rightSide1 = side1 === "right";
+							var bleed1 = rightSide1 ? -5 : 5;
+							var nearEdge = rightSide1 ? triggerRect.right + 4 : triggerRect.left - 4;
+							var farEdge = rightSide1 ? nearEdge + 200 : nearEdge - 200;
+							var polygon1 = {
+								area: [
+									{
+										x: event.clientX + bleed1,
+										y: event.clientY
+									},
+									{
+										x: nearEdge,
+										y: triggerRect.top - 50
+									},
+									{
+										x: farEdge,
+										y: triggerRect.top - 50
+									},
+									{
+										x: farEdge,
+										y: triggerRect.bottom + 50
+									},
+									{
+										x: nearEdge,
+										y: triggerRect.bottom + 50
+									}
+								],
+								side: side1
+							};
+							contentContext.onPointerGraceIntentChange(polygon1);
+							window.clearTimeout(pointerGraceTimerRef.current);
+							pointerGraceTimerRef.current = window.setTimeout(function() {
+								return contentContext.onPointerGraceIntentChange(null);
+							}, 300);
+						}
+					} else {
+						contentContext.onTriggerLeave(event);
+						if (event.defaultPrevented) return;
+						contentContext.onPointerGraceIntentChange(null);
+					}
+				}),
+				...import_web.isWeb ? { onKeyDown: (0, import_web.composeEventHandlers)(props.onKeyDown, function(event) {
+					var isTypingAhead = contentContext.searchRef.current !== "";
+					if (props.disabled || isTypingAhead && event.key === " ") return;
+					var willOpen = SUB_OPEN_KEYS[effectiveDir].includes(event.key);
+					if (willOpen) {
+						var _popperContext_refs, _context_content;
+						if (context.open && context.content) {
+							var _contentEl_querySelector;
+							var contentEl = context.content;
+							var firstItem = (_contentEl_querySelector = contentEl.querySelector) === null || _contentEl_querySelector === void 0 ? void 0 : _contentEl_querySelector.call(contentEl, "[role=\"menuitem\"]:not([data-disabled])");
+							if (firstItem) {
+								firstItem.focus({ focusVisible: true });
+								event.preventDefault();
+								return;
+							}
+						}
+						var triggerEl = event.currentTarget;
+						(_popperContext_refs = popperContext.refs) === null || _popperContext_refs === void 0 ? void 0 : _popperContext_refs.setReference(triggerEl);
+						context.onOpenChange(true);
+						requestAnimationFrame(function() {
+							var _popperContext_update;
+							(_popperContext_update = popperContext.update) === null || _popperContext_update === void 0 ? void 0 : _popperContext_update.call(popperContext);
+						});
+						(_context_content = context.content) === null || _context_content === void 0 ? void 0 : _context_content.focus({ focusVisible: true });
+						event.preventDefault();
+					}
+				}) } : null
+			})
+		});
+	});
+	MenuSubTrigger.displayName = SUB_TRIGGER_NAME;
+	var SUB_CONTENT_NAME = "MenuSubContent";
+	var MenuSubContentFrame = (0, import_web.styled)(PopperPrimitive.PopperContentFrame, { displayName: SUB_CONTENT_NAME });
+	var MenuSubContent = (0, import_core.createStyledHOC)(MenuSubContentFrame, function(props, forwardedRef) {
+		var _popperContext_placement;
+		var scope = props.scope || MENU_CONTEXT;
+		var portalContext = usePortalContext(scope);
+		var { forceMount = portalContext.forceMount, ...subContentProps } = props;
+		var context = useMenuContext(scope);
+		var rootContext = useMenuRootContext(scope);
+		var subContext = useMenuSubContext(scope);
+		var popperContext = PopperPrimitive.usePopperContext(scope);
+		var ref = React.useRef(null);
+		var composedRefs = (0, import_web.useComposedRefs)(forwardedRef, ref);
+		var placementSide = (_popperContext_placement = popperContext.placement) === null || _popperContext_placement === void 0 ? void 0 : _popperContext_placement.split("-")[0];
+		var dataSide = placementSide === "left" || placementSide === "right" ? placementSide : rootContext.dir === "rtl" ? "left" : "right";
+		var effectiveDir = rootContext.dir;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Provider, {
+			scope,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Slot, {
+				scope,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuContentImpl, {
+					id: subContext.contentId,
+					"aria-labelledby": subContext.triggerId,
+					...subContentProps,
+					ref: composedRefs,
+					"data-side": dataSide,
+					disableOutsidePointerEvents: false,
+					disableOutsideScroll: false,
+					trapFocus: false,
+					onOpenAutoFocus: function(event) {
+						if (rootContext.isUsingKeyboardRef.current) {
+							var _root_querySelector, _this;
+							var root = ref.current;
+							var content = root === null || root === void 0 ? void 0 : (_root_querySelector = root.querySelector) === null || _root_querySelector === void 0 ? void 0 : _root_querySelector.call(root, "[data-tamagui-menu-content]");
+							(_this = content || root) === null || _this === void 0 ? void 0 : _this.focus({ preventScroll: true });
+						}
+						event.cancel();
+					},
+					onCloseAutoFocus: function(event) {
+						return event.cancel();
+					},
+					onFocusOutside: (0, import_web.composeEventHandlers)(props.onFocusOutside, function(event) {
+						var _event_event;
+						if (((_event_event = event.event) === null || _event_event === void 0 ? void 0 : _event_event.target) !== subContext.trigger) context.onOpenChange(false);
+					}),
+					onEscapeKeyDown: (0, import_web.composeEventHandlers)(props.onEscapeKeyDown, function(event) {
+						var _subContext_trigger, _event_event_preventDefault, _event_event;
+						context.onOpenChange(false);
+						(_subContext_trigger = subContext.trigger) === null || _subContext_trigger === void 0 ? void 0 : _subContext_trigger.focus({ focusVisible: true });
+						event.cancel();
+						(_event_event = event.event) === null || _event_event === void 0 ? void 0 : (_event_event_preventDefault = _event_event.preventDefault) === null || _event_event_preventDefault === void 0 ? void 0 : _event_event_preventDefault.call(_event_event);
+					}),
+					...import_web.isWeb ? { onKeyDown: (0, import_web.composeEventHandlers)(props.onKeyDown, function(event) {
+						var isKeyDownInside = event.currentTarget.contains(event.target);
+						var isCloseKey = SUB_CLOSE_KEYS[effectiveDir].includes(event.key);
+						if (isKeyDownInside && isCloseKey) {
+							var _subContext_trigger;
+							context.onOpenChange(false);
+							(_subContext_trigger = subContext.trigger) === null || _subContext_trigger === void 0 ? void 0 : _subContext_trigger.focus({ focusVisible: true });
+							event.preventDefault();
+						}
+					}) } : null
+				})
+			})
+		});
+	});
+	MenuSubContent.displayName = SUB_CONTENT_NAME;
+	var Anchor = MenuAnchor;
+	var Portal = MenuPortal;
+	var Content = MenuContent;
+	var Group = (0, import_core.createStyledHOC)(import_web.View, function(props, ref) {
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web.View, {
+			role: "group",
+			...props,
+			ref
+		});
+	});
+	Group.displayName = "MenuGroup";
+	var Label = (0, import_core.createStyledHOC)(import_web.Text, function(props, ref) {
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web.Text, {
+			...props,
+			ref
+		});
+	});
+	Label.displayName = "MenuLabel";
+	var Item = MenuItem;
+	var CheckboxItem = MenuCheckboxItem;
+	var RadioGroup = MenuRadioGroup;
+	var RadioItem = MenuRadioItem;
+	var ItemIndicator = MenuItemIndicator;
+	var Separator = (0, import_core.createStyledHOC)(import_web.View, function(props, ref) {
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web.View, {
+			role: "separator",
+			"aria-orientation": "horizontal",
+			...props,
+			ref
+		});
+	});
+	Separator.displayName = "MenuSeparator";
+	var Arrow = MenuArrow;
+	var Sub = MenuSub;
+	var SubTrigger = MenuSubTrigger;
+	var SubContent = MenuSubContent;
+	var ItemTitle = MenuItemTitle;
+	var ItemSubtitle = MenuItemSubTitle;
+	var ItemImage = MenuItemImage;
+	var ItemIcon = MenuItemIcon;
+	var Menu = (0, import_web.withStaticProperties)(MenuComp, {
+		Anchor,
+		Portal,
+		Content,
+		Group,
+		Label,
+		Item,
+		CheckboxItem,
+		RadioGroup,
+		RadioItem,
+		ItemIndicator,
+		Separator,
+		Arrow,
+		Sub,
+		SubTrigger,
+		SubContent,
+		ItemTitle,
+		ItemSubtitle,
+		ItemImage,
+		ItemIcon
+	});
+	return { Menu };
+}
+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, options) {
+	var PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
+	var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+	try {
+		for (var _iterator = candidates[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+			var candidate = _step.value;
+			if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
+			candidate.focus({
+				preventScroll: true,
+				focusVisible: options === null || options === void 0 ? void 0 : options.focusVisible
+			});
+			if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
+		}
+	} catch (err) {
+		_didIteratorError = true;
+		_iteratorError = err;
+	} finally {
+		try {
+			if (!_iteratorNormalCompletion && _iterator.return != null) {
+				_iterator.return();
+			}
+		} finally {
+			if (_didIteratorError) {
+				throw _iteratorError;
+			}
+		}
+	}
+}
+function wrapArray(array, startIndex) {
+	return array.map(function(_, index) {
+		return array[(startIndex + index) % array.length];
+	});
+}
+function getNextMatch(values, search, currentMatch) {
+	var isRepeated = search.length > 1 && Array.from(search).every(function(char) {
+		return char === search[0];
+	});
+	var normalizedSearch = isRepeated ? search[0] : search;
+	var currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
+	var wrappedValues = wrapArray(values, Math.max(currentMatchIndex, 0));
+	var excludeCurrentMatch = normalizedSearch.length === 1;
+	if (excludeCurrentMatch) wrappedValues = wrappedValues.filter(function(v) {
+		return v !== currentMatch;
+	});
+	var nextMatch = wrappedValues.find(function(value) {
+		return value.toLowerCase().startsWith(normalizedSearch.toLowerCase());
+	});
+	return nextMatch !== currentMatch ? nextMatch : void 0;
+}
+function isPointInPolygon(point, polygon) {
+	var { x, y } = point;
+	var inside = false;
+	for (var i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+		var xi = polygon[i].x;
+		var yi = polygon[i].y;
+		var xj = polygon[j].x;
+		var yj = polygon[j].y;
+		var intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
+		if (intersect) inside = !inside;
+	}
+	return inside;
+}
+function isPointerInGraceArea(event, area) {
+	if (!area) return false;
+	var cursorPos = {
+		x: event.clientX,
+		y: event.clientY
+	};
+	return isPointInPolygon(cursorPos, area);
+}