@tamagui/menu 1.138.1 → 1.138.2

package/dist/esm/createMenu.js

@@ -1,757 +0,0 @@
-import { Animate } from "@tamagui/animate";
-import { AnimatePresence as Presence } from "@tamagui/animate-presence";
-import { createCollection } from "@tamagui/collection";
-import {
-  Text,
-  composeEventHandlers,
-  composeRefs,
-  createStyledContext,
-  useComposedRefs
-} from "@tamagui/core";
-import {
-  Dismissable as DismissableLayer,
-  dispatchDiscreteCustomEvent
-} from "@tamagui/dismissable";
-import { useFocusGuards } from "@tamagui/focus-guard";
-import { FocusScope } from "@tamagui/focus-scope";
-import * as PopperPrimitive from "@tamagui/popper";
-import { Portal as PortalPrimitive } from "@tamagui/portal";
-import { RemoveScroll } from "@tamagui/remove-scroll";
-import { RovingFocusGroup } from "@tamagui/roving-focus";
-import {
-  ThemeableStack,
-  YStack
-} from "@tamagui/stacks";
-import { useCallbackRef } from "@tamagui/use-callback-ref";
-import { useDirection } from "@tamagui/use-direction";
-import { isAndroid, isWeb, withStaticProperties } from "@tamagui/web";
-import * as React from "react";
-import { useId } from "react";
-import { MenuPredefinied } from "./Menu";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-const SELECTION_KEYS = ["Enter", " "], FIRST_KEYS = ["ArrowDown", "PageUp", "Home"], LAST_KEYS = ["ArrowUp", "PageDown", "End"], FIRST_LAST_KEYS = [...FIRST_KEYS, ...LAST_KEYS], SUB_OPEN_KEYS = {
-  ltr: [...SELECTION_KEYS, "ArrowRight"],
-  rtl: [...SELECTION_KEYS, "ArrowLeft"]
-}, SUB_CLOSE_KEYS = {
-  ltr: ["ArrowLeft"],
-  rtl: ["ArrowRight"]
-}, MENU_NAME = "Menu", [Collection, useCollection] = createCollection(MENU_NAME), { Provider: MenuProvider, useStyledContext: useMenuContext } = createStyledContext(), { Provider: MenuRootProvider, useStyledContext: useMenuRootContext } = createStyledContext(), MENU_CONTEXT = "MenuContext", { Provider: NativePropProvider, useStyledContext: useNativeProp } = createStyledContext({ native: !1 });
-function createMenu({
-  Item: _Item = MenuPredefinied.MenuItem,
-  Title: _Title = MenuPredefinied.Title,
-  SubTitle: _SubTitle = MenuPredefinied.SubTitle,
-  Image: _Image = MenuPredefinied.MenuImage,
-  Icon: _Icon = MenuPredefinied.MenuIcon,
-  Indicator: _Indicator = MenuPredefinied.MenuIndicator,
-  Separator: _Separator = MenuPredefinied.MenuSeparator,
-  MenuGroup: _MenuGroup = MenuPredefinied.MenuGroup,
-  Label: _Label = MenuPredefinied.MenuLabel
-}) {
-  const MenuComp = (props) => {
-    const {
-      scope,
-      open = !1,
-      children,
-      dir,
-      onOpenChange,
-      modal = !0,
-      ...rest
-    } = props, [content, setContent] = React.useState(null), isUsingKeyboardRef = React.useRef(!1), handleOpenChange = useCallbackRef(onOpenChange), direction = useDirection(dir);
-    return isWeb && React.useEffect(() => {
-      const handleKeyDown = () => {
-        isUsingKeyboardRef.current = !0, document.addEventListener("pointerdown", handlePointer, {
-          capture: !0,
-          once: !0
-        }), document.addEventListener("pointermove", handlePointer, {
-          capture: !0,
-          once: !0
-        });
-      }, handlePointer = () => isUsingKeyboardRef.current = !1;
-      return document.addEventListener("keydown", handleKeyDown, { capture: !0 }), () => {
-        document.removeEventListener("keydown", handleKeyDown, { capture: !0 }), document.removeEventListener("pointerdown", handlePointer, { capture: !0 }), document.removeEventListener("pointermove", handlePointer, { capture: !0 });
-      };
-    }, []), /* @__PURE__ */ jsx(PopperPrimitive.Popper, { scope: scope || MENU_CONTEXT, ...rest, children: /* @__PURE__ */ jsx(
-      MenuProvider,
-      {
-        scope,
-        open,
-        onOpenChange: handleOpenChange,
-        content,
-        onContentChange: setContent,
-        children: /* @__PURE__ */ jsx(NativePropProvider, { native: !1, scope, children: /* @__PURE__ */ jsx(
-          MenuRootProvider,
-          {
-            scope,
-            onClose: React.useCallback(
-              () => handleOpenChange(!1),
-              [handleOpenChange]
-            ),
-            isUsingKeyboardRef,
-            dir: direction,
-            modal,
-            children: /* @__PURE__ */ jsx(MenuSubProvider, { scope, children })
-          }
-        ) })
-      }
-    ) });
-  }, RepropagateMenuAndMenuRootProvider = (props) => {
-    const { scope, menuContext, rootContext, popperContext, menuSubContext, children } = props;
-    return /* @__PURE__ */ jsx(PopperPrimitive.PopperProvider, { ...popperContext, scope: scope || MENU_CONTEXT, children: /* @__PURE__ */ jsx(NativePropProvider, { native: !1, scope, children: /* @__PURE__ */ jsx(MenuProvider, { scope, ...menuContext, children: /* @__PURE__ */ jsx(MenuRootProvider, { scope, ...rootContext, children: menuSubContext ? /* @__PURE__ */ jsx(MenuSubProvider, { scope, ...menuSubContext, children }) : children }) }) }) });
-  };
-  MenuComp.displayName = MENU_NAME;
-  const ANCHOR_NAME = "MenuAnchor", MenuAnchor = (props) => /* @__PURE__ */ jsx(PopperPrimitive.PopperAnchor, { scope: MENU_CONTEXT, ...props });
-  MenuAnchor.displayName = ANCHOR_NAME;
-  const PORTAL_NAME = "MenuPortal", { Provider: PortalProvider, useStyledContext: usePortalContext } = createStyledContext(void 0, "Portal"), MenuPortal = (props) => {
-    const {
-      scope,
-      forceMount,
-      zIndex,
-      children
-      // TODO removed
-      // host
-    } = props, menuContext = useMenuContext(scope), rootContext = useMenuRootContext(scope), popperContext = PopperPrimitive.usePopperContext(scope || MENU_CONTEXT), menuSubContext = useMenuSubContext(scope), content = isAndroid ? /* @__PURE__ */ jsx(
-      RepropagateMenuAndMenuRootProvider,
-      {
-        menuContext,
-        rootContext,
-        popperContext,
-        menuSubContext,
-        scope,
-        children
-      }
-    ) : children;
-    return /* @__PURE__ */ jsx(Animate, { type: "presence", present: forceMount || menuContext.open, children: /* @__PURE__ */ jsx(PortalPrimitive, { host, children: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(PortalProvider, { scope, forceMount, children: /* @__PURE__ */ jsxs(YStack, { zIndex: zIndex || 100, fullscreen: !0, children: [
-      !!menuContext.open && !isWeb && /* @__PURE__ */ jsx(
-        YStack,
-        {
-          fullscreen: !0,
-          onPress: () => menuContext.onOpenChange(!menuContext.open)
-        }
-      ),
-      content
-    ] }) }) }) }) });
-  };
-  MenuPortal.displayName = PORTAL_NAME;
-  const CONTENT_NAME = "MenuContent", { Provider: MenuContentProvider, useStyledContext: useMenuContentContext } = createStyledContext(), MenuContent = React.forwardRef(
-    (props, forwardedRef) => {
-      const portalContext = usePortalContext(props.scope), { forceMount = portalContext.forceMount, ...contentProps } = props, rootContext = useMenuRootContext(props.scope);
-      return /* @__PURE__ */ jsx(Collection.Provider, { scope: props.scope || MENU_CONTEXT, children: /* @__PURE__ */ jsx(Collection.Slot, { scope: props.scope || MENU_CONTEXT, children: rootContext.modal ? /* @__PURE__ */ jsx(MenuRootContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx(MenuRootContentNonModal, { ...contentProps, ref: forwardedRef }) }) });
-    }
-  ), MenuRootContentModal = React.forwardRef((props, forwardedRef) => {
-    const context = useMenuContext(props.scope), ref = React.useRef(null), composedRefs = useComposedRefs(forwardedRef, ref);
-    return /* @__PURE__ */ jsx(
-      MenuContentImpl,
-      {
-        ...props,
-        ref: composedRefs,
-        trapFocus: context.open,
-        disableOutsidePointerEvents: context.open,
-        disableOutsideScroll: !0,
-        onFocusOutside: composeEventHandlers(
-          props.onFocusOutside,
-          (event) => event.preventDefault(),
-          { checkDefaultPrevented: !1 }
-        ),
-        onDismiss: () => context.onOpenChange(!1)
-      }
-    );
-  }), MenuRootContentNonModal = React.forwardRef((props, forwardedRef) => {
-    const context = useMenuContext(props.scope);
-    return /* @__PURE__ */ jsx(
-      MenuContentImpl,
-      {
-        ...props,
-        ref: forwardedRef,
-        trapFocus: !1,
-        disableOutsidePointerEvents: !1,
-        disableOutsideScroll: !1,
-        onDismiss: () => context.onOpenChange(!1)
-      }
-    );
-  }), Fragment2 = React.forwardRef((props, ref) => props.children), MenuContentImpl = React.forwardRef((props, forwardedRef) => {
-    const {
-      scope = MENU_CONTEXT,
-      loop = !1,
-      trapFocus,
-      onOpenAutoFocus,
-      onCloseAutoFocus,
-      disableOutsidePointerEvents,
-      onEntryFocus,
-      onEscapeKeyDown,
-      onPointerDownOutside,
-      onFocusOutside,
-      onInteractOutside,
-      onDismiss,
-      disableOutsideScroll,
-      unstyled = process.env.TAMAGUI_HEADLESS === "1",
-      ...contentProps
-    } = props, context = useMenuContext(scope), rootContext = useMenuRootContext(scope), getItems = useCollection(scope), [currentItemId, setCurrentItemId] = React.useState(null), contentRef = React.useRef(null), composedRefs = useComposedRefs(
-      forwardedRef,
-      contentRef,
-      context.onContentChange
-    ), timerRef = React.useRef(0), searchRef = React.useRef(""), pointerGraceTimerRef = React.useRef(0), pointerGraceIntentRef = React.useRef(null), pointerDirRef = React.useRef("right"), lastPointerXRef = React.useRef(0), handleTypeaheadSearch = (key) => {
-      const search = searchRef.current + key, items = getItems().filter((item) => !item.disabled), currentItem = document.activeElement, currentMatch = items.find(
-        (item) => item.ref.current === currentItem
-      )?.textValue, values = items.map((item) => item.textValue), nextMatch = getNextMatch(values, search, currentMatch), newItem = items.find((item) => item.textValue === nextMatch)?.ref.current;
-      (function updateSearch(value) {
-        searchRef.current = value, clearTimeout(timerRef.current), value !== "" && (timerRef.current = setTimeout(() => updateSearch(""), 1e3));
-      })(search), newItem && setTimeout(() => newItem.focus());
-    };
-    React.useEffect(() => () => clearTimeout(timerRef.current), []), isWeb && useFocusGuards();
-    const isPointerMovingToSubmenu = React.useCallback((event) => pointerDirRef.current === pointerGraceIntentRef.current?.side && isPointerInGraceArea(event, pointerGraceIntentRef.current?.area), []), content = /* @__PURE__ */ jsx(
-      PopperPrimitive.PopperContent,
-      {
-        role: "menu",
-        ...!unstyled && {
-          elevation: 30,
-          paddingVertical: "$2",
-          backgroundColor: "$background",
-          borderColor: "$borderColor",
-          outlineWidth: 0
-        },
-        "aria-orientation": "vertical",
-        "data-state": getOpenState(context.open),
-        "data-tamagui-menu-content": "",
-        dir: rootContext.dir,
-        scope: scope || MENU_CONTEXT,
-        ...contentProps,
-        ref: composedRefs,
-        className: contentProps.animation ? void 0 : contentProps.className,
-        ...isWeb ? {
-          onKeyDown: composeEventHandlers(
-            //@ts-ignore
-            contentProps.onKeyDown,
-            (event) => {
-              const isKeyDownInside = event.target.closest("[data-tamagui-menu-content]") === event.currentTarget, isModifierKey = event.ctrlKey || event.altKey || event.metaKey, isCharacterKey = event.key.length === 1;
-              isKeyDownInside && (event.key === "Tab" && event.preventDefault(), !isModifierKey && isCharacterKey && handleTypeaheadSearch(event.key));
-              const content2 = contentRef.current;
-              if (event.target !== content2 || !FIRST_LAST_KEYS.includes(event.key)) return;
-              event.preventDefault();
-              const candidateNodes = getItems().filter((item) => !item.disabled).map((item) => item.ref.current);
-              LAST_KEYS.includes(event.key) && candidateNodes.reverse(), focusFirst(candidateNodes);
-            }
-          ),
-          // @ts-ignore
-          onBlur: composeEventHandlers(props.onBlur, (event) => {
-            event.currentTarget?.contains(event.target) || (clearTimeout(timerRef.current), searchRef.current = "");
-          }),
-          onPointerMove: composeEventHandlers(
-            // @ts-ignore
-            props.onPointerMove,
-            // @ts-ignore
-            whenMouse((event) => {
-              const target = event.target, 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;
-              }
-            })
-          )
-        } : {}
-      }
-    );
-    return /* @__PURE__ */ jsx(
-      MenuContentProvider,
-      {
-        scope,
-        searchRef,
-        onItemEnter: React.useCallback(
-          (event) => {
-            isPointerMovingToSubmenu(event) && event.preventDefault();
-          },
-          [isPointerMovingToSubmenu]
-        ),
-        onItemLeave: React.useCallback(
-          (event) => {
-            isPointerMovingToSubmenu(event) || (contentRef.current?.focus(), setCurrentItemId(null));
-          },
-          [isPointerMovingToSubmenu]
-        ),
-        onTriggerLeave: React.useCallback(
-          (event) => {
-            isPointerMovingToSubmenu(event) && event.preventDefault();
-          },
-          [isPointerMovingToSubmenu]
-        ),
-        pointerGraceTimerRef,
-        onPointerGraceIntentChange: React.useCallback((intent) => {
-          pointerGraceIntentRef.current = intent;
-        }, []),
-        children: /* @__PURE__ */ jsx(RemoveScroll, { enabled: disableOutsideScroll, children: /* @__PURE__ */ jsx(
-          FocusScope,
-          {
-            asChild: !1,
-            trapped: trapFocus,
-            onMountAutoFocus: composeEventHandlers(onOpenAutoFocus, (event) => {
-              event.preventDefault(), contentRef.current?.focus();
-            }),
-            onUnmountAutoFocus: onCloseAutoFocus,
-            children: /* @__PURE__ */ jsx(
-              DismissableLayer,
-              {
-                disableOutsidePointerEvents,
-                onEscapeKeyDown,
-                onPointerDownOutside,
-                onFocusOutside,
-                onInteractOutside,
-                onDismiss,
-                asChild: !0,
-                children: /* @__PURE__ */ jsx(
-                  RovingFocusGroup,
-                  {
-                    asChild: !0,
-                    __scopeRovingFocusGroup: scope || MENU_CONTEXT,
-                    dir: rootContext.dir,
-                    orientation: "vertical",
-                    loop,
-                    currentTabStopId: currentItemId,
-                    onCurrentTabStopIdChange: setCurrentItemId,
-                    onEntryFocus: composeEventHandlers(onEntryFocus, (event) => {
-                      rootContext.isUsingKeyboardRef.current || event.preventDefault();
-                    }),
-                    children: content
-                  }
-                )
-              }
-            )
-          }
-        ) })
-      }
-    );
-  });
-  MenuContent.displayName = CONTENT_NAME;
-  const ITEM_NAME = "MenuItem", ITEM_SELECT = "menu.itemSelect", MenuItem = ThemeableStack.styleable(
-    (props, forwardedRef) => {
-      const { disabled = !1, onSelect, children, ...itemProps } = props, ref = React.useRef(null), rootContext = useMenuRootContext(props.scope), contentContext = useMenuContentContext(props.scope), composedRefs = useComposedRefs(forwardedRef, ref), isPointerDownRef = React.useRef(!1), handleSelect = () => {
-        const menuItem = ref.current;
-        if (!disabled && menuItem)
-          if (isWeb) {
-            const itemSelectEvent = new CustomEvent(ITEM_SELECT, {
-              bubbles: !0,
-              cancelable: !0
-            });
-            menuItem.addEventListener(ITEM_SELECT, (event) => onSelect?.(event), {
-              once: !0
-            }), dispatchDiscreteCustomEvent(menuItem, itemSelectEvent), itemSelectEvent.defaultPrevented ? isPointerDownRef.current = !1 : rootContext.onClose();
-          } else
-            onSelect?.({ target: menuItem }), isPointerDownRef.current = !1, rootContext.onClose();
-      }, content = typeof children == "string" ? /* @__PURE__ */ jsx(Text, { children }) : children;
-      return /* @__PURE__ */ jsx(
-        MenuItemImpl,
-        {
-          outlineStyle: "none",
-          ...itemProps,
-          ref: composedRefs,
-          disabled,
-          onPress: composeEventHandlers(props.onPress, handleSelect),
-          onPointerDown: (event) => {
-            props.onPointerDown?.(event), isPointerDownRef.current = !0;
-          },
-          onPointerUp: composeEventHandlers(props.onPointerUp, (event) => {
-            isWeb && (isPointerDownRef.current || event.currentTarget?.click());
-          }),
-          ...isWeb ? {
-            onKeyDown: composeEventHandlers(
-              // @ts-ignore
-              props.onKeyDown,
-              (event) => {
-                const isTypingAhead = contentContext.searchRef.current !== "";
-                disabled || isTypingAhead && event.key === " " || SELECTION_KEYS.includes(event.key) && (event.currentTarget?.click(), event.preventDefault());
-              }
-            )
-          } : {},
-          children: content
-        }
-      );
-    }
-  ), MenuItemImpl = React.forwardRef((props, forwardedRef) => {
-    const {
-      scope,
-      disabled = !1,
-      textValue,
-      unstyled = process.env.TAMAGUI_HEADLESS === "1",
-      ...itemProps
-    } = props, contentContext = useMenuContentContext(scope), ref = React.useRef(null), composedRefs = useComposedRefs(forwardedRef, ref), [isFocused, setIsFocused] = React.useState(!1), [textContent, setTextContent] = React.useState("");
-    return isWeb && React.useEffect(() => {
-      const menuItem = ref.current;
-      menuItem && setTextContent((menuItem.textContent ?? "").trim());
-    }, [itemProps.children]), /* @__PURE__ */ jsx(
-      Collection.ItemSlot,
-      {
-        scope: scope || MENU_CONTEXT,
-        disabled,
-        textValue: textValue ?? textContent,
-        children: /* @__PURE__ */ jsx(
-          RovingFocusGroup.Item,
-          {
-            asChild: !0,
-            __scopeRovingFocusGroup: scope || MENU_CONTEXT,
-            focusable: !disabled,
-            ...!unstyled && {
-              flexDirection: "row",
-              alignItems: "center"
-            },
-            ...itemProps,
-            children: /* @__PURE__ */ jsx(
-              _Item,
-              {
-                ...!unstyled && {
-                  hoverTheme: !0,
-                  pressTheme: !0,
-                  focusTheme: !0,
-                  paddingVertical: "$2",
-                  paddingHorizontal: "$4",
-                  width: "100%"
-                },
-                componentName: ITEM_NAME,
-                role: "menuitem",
-                "data-highlighted": isFocused ? "" : void 0,
-                "aria-disabled": disabled || void 0,
-                "data-disabled": disabled ? "" : void 0,
-                ...itemProps,
-                ref: composedRefs,
-                onPointerMove: composeEventHandlers(
-                  props.onPointerMove,
-                  // @ts-ignore
-                  whenMouse((event) => {
-                    disabled ? contentContext.onItemLeave(event) : (contentContext.onItemEnter(event), event.defaultPrevented || event.currentTarget.focus());
-                  })
-                ),
-                onPointerLeave: composeEventHandlers(
-                  // @ts-ignore
-                  props.onPointerLeave,
-                  // @ts-ignore
-                  whenMouse((event) => contentContext.onItemLeave(event))
-                ),
-                onFocus: composeEventHandlers(props.onFocus, () => setIsFocused(!0)),
-                onBlur: composeEventHandlers(props.onBlur, () => setIsFocused(!1))
-              }
-            )
-          }
-        )
-      }
-    );
-  });
-  MenuItem.displayName = ITEM_NAME;
-  const ITEM_TITLE_NAME = "MenuItemTitle", MenuItemTitle = _Title.styleable((props, forwardedRef) => /* @__PURE__ */ jsx(_Title, { ...props, ref: forwardedRef }));
-  MenuItemTitle.displayName = ITEM_TITLE_NAME;
-  const ITEM_SUB_TITLE_NAME = "MenuItemSubTitle", MenuItemSubTitle = _SubTitle.styleable((props, forwardedRef) => /* @__PURE__ */ jsx(_SubTitle, { ...props, ref: forwardedRef }));
-  MenuItemSubTitle.displayName = ITEM_SUB_TITLE_NAME;
-  const ITEM_IMAGE = "MenuItemImage", MenuItemImage = React.forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(_Image, { ...props, ref: forwardedRef }));
-  MenuItemImage.displayName = ITEM_IMAGE;
-  const ITEM_ICON = "MenuItemIcon", MenuItemIcon = _Icon.styleable((props, forwardedRef) => /* @__PURE__ */ jsx(_Icon, { ...props, ref: forwardedRef }));
-  MenuItemIcon.displayName = ITEM_ICON;
-  const CHECKBOX_ITEM_NAME = "MenuCheckboxItem", MenuCheckboxItem = ThemeableStack.styleable(
-    (props, forwardedRef) => {
-      const { checked = !1, onCheckedChange, ...checkboxItemProps } = props;
-      return /* @__PURE__ */ jsx(ItemIndicatorProvider, { scope: props.scope, checked, children: /* @__PURE__ */ jsx(
-        MenuItem,
-        {
-          componentName: CHECKBOX_ITEM_NAME,
-          role: isWeb ? "menuitemcheckbox" : "menuitem",
-          "aria-checked": isIndeterminate(checked) ? "mixed" : checked,
-          ...checkboxItemProps,
-          ref: forwardedRef,
-          "data-state": getCheckedState(checked),
-          onSelect: composeEventHandlers(
-            checkboxItemProps.onSelect,
-            () => onCheckedChange?.(isIndeterminate(checked) ? !0 : !checked),
-            { checkDefaultPrevented: !1 }
-          )
-        }
-      ) });
-    }
-  );
-  MenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
-  const RADIO_GROUP_NAME = "MenuRadioGroup", { Provider: RadioGroupProvider, useStyledContext: useRadioGroupContext } = createStyledContext(), MenuRadioGroup = _MenuGroup.styleable(
-    (props, forwardedRef) => {
-      const { value, onValueChange, scope, ...groupProps } = props, handleValueChange = useCallbackRef(onValueChange);
-      return /* @__PURE__ */ jsx(RadioGroupProvider, { scope, value, onValueChange: handleValueChange, children: /* @__PURE__ */ jsx(
-        _MenuGroup,
-        {
-          componentName: RADIO_GROUP_NAME,
-          ...groupProps,
-          ref: forwardedRef
-        }
-      ) });
-    }
-  );
-  MenuRadioGroup.displayName = RADIO_GROUP_NAME;
-  const RADIO_ITEM_NAME = "MenuRadioItem", MenuRadioItem = ThemeableStack.styleable(
-    (props, forwardedRef) => {
-      const { value, ...radioItemProps } = props, context = useRadioGroupContext(props.scope), checked = value === context.value;
-      return /* @__PURE__ */ jsx(ItemIndicatorProvider, { scope: props.scope, checked, children: /* @__PURE__ */ jsx(
-        MenuItem,
-        {
-          componentName: RADIO_ITEM_NAME,
-          ...radioItemProps,
-          "aria-checked": checked,
-          ref: forwardedRef,
-          role: isWeb ? "menuitemradio" : "menuitem",
-          "data-state": getCheckedState(checked),
-          onSelect: composeEventHandlers(
-            radioItemProps.onSelect,
-            () => context.onValueChange?.(value),
-            { checkDefaultPrevented: !1 }
-          )
-        }
-      ) });
-    }
-  );
-  MenuRadioItem.displayName = RADIO_ITEM_NAME;
-  const ITEM_INDICATOR_NAME = "MenuItemIndicator", { Provider: ItemIndicatorProvider, useStyledContext: useItemIndicatorContext } = createStyledContext(), MenuItemIndicator = _Indicator.styleable(
-    (props, forwardedRef) => {
-      const { scope, forceMount, ...itemIndicatorProps } = props, indicatorContext = useItemIndicatorContext(scope);
-      return /* @__PURE__ */ jsx(Presence, { children: forceMount || isIndeterminate(indicatorContext.checked) || indicatorContext.checked === !0 ? /* @__PURE__ */ jsx(
-        _Indicator,
-        {
-          componentName: ITEM_INDICATOR_NAME,
-          tag: "span",
-          ...itemIndicatorProps,
-          ref: forwardedRef,
-          "data-state": getCheckedState(indicatorContext.checked)
-        }
-      ) : null });
-    }
-  );
-  MenuItemIndicator.displayName = ITEM_INDICATOR_NAME;
-  const MenuArrow = React.forwardRef(
-    function(props, forwardedRef) {
-      const { scope, unstyled = process.env.TAMAGUI_HEADLESS === "1", ...rest } = props;
-      return /* @__PURE__ */ jsx(
-        PopperPrimitive.PopperArrow,
-        {
-          scope: scope || MENU_CONTEXT,
-          componentName: "PopperArrow",
-          ...!unstyled && {
-            backgroundColor: "$background"
-          },
-          ...rest,
-          ref: forwardedRef
-        }
-      );
-    }
-  ), SUB_NAME = "MenuSub", { Provider: MenuSubProvider, useStyledContext: useMenuSubContext } = createStyledContext(), MenuSub = (props) => {
-    const { scope, children, open = !1, onOpenChange, ...rest } = props, parentMenuContext = useMenuContext(scope), [trigger, setTrigger] = React.useState(null), [content, setContent] = React.useState(null), handleOpenChange = useCallbackRef(onOpenChange);
-    return React.useEffect(() => (parentMenuContext.open === !1 && handleOpenChange(!1), () => handleOpenChange(!1)), [parentMenuContext.open, handleOpenChange]), /* @__PURE__ */ jsx(PopperPrimitive.Popper, { ...rest, scope: scope || MENU_CONTEXT, children: /* @__PURE__ */ jsx(
-      MenuProvider,
-      {
-        scope,
-        open,
-        onOpenChange: handleOpenChange,
-        content,
-        onContentChange: setContent,
-        children: /* @__PURE__ */ jsx(
-          MenuSubProvider,
-          {
-            scope,
-            contentId: useId(),
-            triggerId: useId(),
-            trigger,
-            onTriggerChange: setTrigger,
-            children
-          }
-        )
-      }
-    ) });
-  };
-  MenuSub.displayName = SUB_NAME;
-  const SUB_TRIGGER_NAME = "MenuSubTrigger", MenuSubTrigger = YStack.styleable(
-    (props, forwardedRef) => {
-      const context = useMenuContext(props.scope), rootContext = useMenuRootContext(props.scope), subContext = useMenuSubContext(props.scope), contentContext = useMenuContentContext(props.scope), openTimerRef = React.useRef(null), { pointerGraceTimerRef, onPointerGraceIntentChange } = contentContext, clearOpenTimer = React.useCallback(() => {
-        openTimerRef.current && window.clearTimeout(openTimerRef.current), openTimerRef.current = null;
-      }, []);
-      return React.useEffect(() => clearOpenTimer, [clearOpenTimer]), React.useEffect(() => {
-        const pointerGraceTimer = pointerGraceTimerRef.current;
-        return () => {
-          window.clearTimeout(pointerGraceTimer), onPointerGraceIntentChange(null);
-        };
-      }, [pointerGraceTimerRef, onPointerGraceIntentChange]), /* @__PURE__ */ jsx(
-        MenuAnchor,
-        {
-          componentName: SUB_TRIGGER_NAME,
-          asChild: !0,
-          scope: props.scope || MENU_CONTEXT,
-          children: /* @__PURE__ */ jsx(
-            MenuItemImpl,
-            {
-              id: subContext.triggerId,
-              "aria-haspopup": "menu",
-              "aria-expanded": context.open,
-              "aria-controls": subContext.contentId,
-              "data-state": getOpenState(context.open),
-              outlineStyle: "none",
-              ...props,
-              ref: composeRefs(forwardedRef, subContext.onTriggerChange),
-              onPress: (event) => {
-                props.onPress?.(event), !(props.disabled || event.defaultPrevented) && (isWeb && event.currentTarget.focus(), context.open || context.onOpenChange(!0));
-              },
-              onPointerMove: composeEventHandlers(
-                props.onPointerMove,
-                // @ts-ignore
-                whenMouse((event) => {
-                  contentContext.onItemEnter(event), !event.defaultPrevented && !props.disabled && !context.open && !openTimerRef.current && (contentContext.onPointerGraceIntentChange(null), openTimerRef.current = window.setTimeout(() => {
-                    context.onOpenChange(!0), clearOpenTimer();
-                  }, 100));
-                })
-              ),
-              onPointerLeave: composeEventHandlers(
-                props.onPointerLeave,
-                // @ts-ignore
-                whenMouse((event) => {
-                  clearOpenTimer();
-                  const contentRect = context.content?.getBoundingClientRect();
-                  if (contentRect) {
-                    const side = context.content?.dataset.side, rightSide = side === "right", bleed = rightSide ? -5 : 5, contentNearEdge = contentRect[rightSide ? "left" : "right"], contentFarEdge = contentRect[rightSide ? "right" : "left"];
-                    contentContext.onPointerGraceIntentChange({
-                      area: [
-                        // Apply a bleed on clientX to ensure that our exit point is
-                        // consistently within polygon bounds
-                        { 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 {
-                    if (contentContext.onTriggerLeave(event), event.defaultPrevented) return;
-                    contentContext.onPointerGraceIntentChange(null);
-                  }
-                })
-              ),
-              ...isWeb ? {
-                onKeyDown: composeEventHandlers(
-                  // @ts-ignore
-                  props.onKeyDown,
-                  (event) => {
-                    const isTypingAhead = contentContext.searchRef.current !== "";
-                    props.disabled || isTypingAhead && event.key === " " || SUB_OPEN_KEYS[rootContext.dir].includes(event.key) && (context.onOpenChange(!0), context.content?.focus(), event.preventDefault());
-                  }
-                )
-              } : null
-            }
-          )
-        }
-      );
-    }
-  );
-  MenuSubTrigger.displayName = SUB_TRIGGER_NAME;
-  const SUB_CONTENT_NAME = "MenuSubContent", MenuSubContent = React.forwardRef((props, forwardedRef) => {
-    const portalContext = usePortalContext(props.scope), { forceMount = portalContext.forceMount, ...subContentProps } = props, context = useMenuContext(props.scope), rootContext = useMenuRootContext(props.scope), subContext = useMenuSubContext(props.scope), ref = React.useRef(null), composedRefs = useComposedRefs(forwardedRef, ref);
-    return /* @__PURE__ */ jsx(Collection.Provider, { scope: props.scope || MENU_CONTEXT, children: /* @__PURE__ */ jsx(Collection.Slot, { scope: props.scope || MENU_CONTEXT, children: /* @__PURE__ */ jsx(
-      MenuContentImpl,
-      {
-        id: subContext.contentId,
-        "aria-labelledby": subContext.triggerId,
-        ...subContentProps,
-        ref: composedRefs,
-        "data-side": rootContext.dir === "rtl" ? "left" : "right",
-        disableOutsidePointerEvents: !1,
-        disableOutsideScroll: !1,
-        trapFocus: !1,
-        onOpenAutoFocus: (event) => {
-          rootContext.isUsingKeyboardRef.current && ref.current?.focus(), event.preventDefault();
-        },
-        onCloseAutoFocus: (event) => event.preventDefault(),
-        onFocusOutside: composeEventHandlers(props.onFocusOutside, (event) => {
-          event.target !== subContext.trigger && context.onOpenChange(!1);
-        }),
-        onEscapeKeyDown: composeEventHandlers(props.onEscapeKeyDown, (event) => {
-          rootContext.onClose(), event.preventDefault();
-        }),
-        ...isWeb ? {
-          // @ts-ignore
-          onKeyDown: composeEventHandlers(
-            // @ts-ignore
-            props.onKeyDown,
-            (event) => {
-              const isKeyDownInside = event.currentTarget.contains(
-                event.target
-              ), isCloseKey = SUB_CLOSE_KEYS[rootContext.dir].includes(
-                event.key
-              );
-              isKeyDownInside && isCloseKey && (context.onOpenChange(!1), subContext.trigger?.focus(), event.preventDefault());
-            }
-          )
-        } : null
-      }
-    ) }) });
-  });
-  return MenuSubContent.displayName = SUB_CONTENT_NAME, {
-    Menu: withStaticProperties(MenuComp, {
-      Anchor: MenuAnchor,
-      Portal: MenuPortal,
-      Content: MenuContent,
-      Group: _MenuGroup,
-      Label: _Label,
-      Item: MenuItem,
-      CheckboxItem: MenuCheckboxItem,
-      RadioGroup: MenuRadioGroup,
-      RadioItem: MenuRadioItem,
-      ItemIndicator: MenuItemIndicator,
-      Separator: _Separator,
-      Arrow: MenuArrow,
-      Sub: MenuSub,
-      SubTrigger: MenuSubTrigger,
-      SubContent: MenuSubContent,
-      ItemTitle: MenuItemTitle,
-      ItemSubtitle: MenuItemSubTitle,
-      ItemImage: MenuItemImage,
-      ItemIcon: MenuItemIcon
-    })
-  };
-}
-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 || (candidate.focus(), document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT)) return;
-}
-function wrapArray(array, startIndex) {
-  return array.map((_, index) => array[(startIndex + index) % array.length]);
-}
-function getNextMatch(values, search, currentMatch) {
-  const normalizedSearch = search.length > 1 && Array.from(search).every((char) => char === search[0]) ? search[0] : search, currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
-  let wrappedValues = wrapArray(values, Math.max(currentMatchIndex, 0));
-  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 = !1;
-  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
-    const xi = polygon[i].x, yi = polygon[i].y, xj = polygon[j].x, yj = polygon[j].y;
-    yi > y != yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi && (inside = !inside);
-  }
-  return inside;
-}
-function isPointerInGraceArea(event, area) {
-  if (!area) return !1;
-  const cursorPos = { x: event.clientX, y: event.clientY };
-  return isPointInPolygon(cursorPos, area);
-}
-function whenMouse(handler) {
-  return (event) => event.pointerType === "mouse" ? handler(event) : void 0;
-}
-export {
-  NativePropProvider,
-  createMenu,
-  useNativeProp
-};
-//# sourceMappingURL=createMenu.js.map