@tamagui/create-menu 2.0.0-rc.9 → 2.0.0

package/dist/esm/createBaseMenu.js

@@ -1,849 +0,0 @@
-import { Animate } from "@tamagui/animate";
-import { AnimatePresence as Presence } from "@tamagui/animate-presence";
-import { createCollection } from "@tamagui/collection";
-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 { needsPortalRepropagation, Portal as PortalPrimitive } from "@tamagui/portal";
-import { RemoveScroll } from "@tamagui/remove-scroll";
-import { RovingFocusGroup } from "@tamagui/roving-focus";
-import { useCallbackRef } from "@tamagui/use-callback-ref";
-import { useDirection } from "@tamagui/use-direction";
-import {
-  composeEventHandlers,
-  composeRefs,
-  createStyledContext,
-  isWeb,
-  Text,
-  Theme,
-  useComposedRefs,
-  useThemeName,
-  View,
-  withStaticProperties
-} from "@tamagui/web";
-import * as React from "react";
-import { useId } from "react";
-import { MenuPredefined } from "./MenuPredefined";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function whenMouse(handler) {
-  return (event) => event.pointerType === "mouse" ? handler(event) : void 0;
-}
-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";
-function createBaseMenu({
-  Item: _Item = MenuPredefined.MenuItem,
-  Title: _Title = MenuPredefined.Title,
-  SubTitle: _SubTitle = MenuPredefined.SubTitle,
-  Image: _Image = MenuPredefined.MenuImage,
-  Icon: _Icon = MenuPredefined.MenuIcon,
-  Indicator: _Indicator = MenuPredefined.MenuIndicator,
-  Separator: _Separator = MenuPredefined.MenuSeparator,
-  MenuGroup: _MenuGroup = MenuPredefined.MenuGroup,
-  Label: _Label = MenuPredefined.MenuLabel
-}) {
-  const MenuComp = (props) => {
-    const {
-      scope = MENU_CONTEXT,
-      open = !1,
-      children,
-      dir,
-      onOpenChange,
-      modal = !0,
-      allowFlip = { padding: 10 },
-      stayInFrame = { padding: 10 },
-      ...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,
-        allowFlip,
-        stayInFrame,
-        ...rest,
-        children: /* @__PURE__ */ jsx(
-          MenuProvider,
-          {
-            scope,
-            open,
-            onOpenChange: handleOpenChange,
-            content,
-            onContentChange: setContent,
-            children: /* @__PURE__ */ jsx(
-              MenuRootProvider,
-              {
-                scope,
-                open,
-                onClose: React.useCallback(() => handleOpenChange(!1), [handleOpenChange]),
-                isUsingKeyboardRef,
-                dir: direction,
-                modal,
-                children: /* @__PURE__ */ jsx(MenuSubProvider, { scope, children })
-              }
-            )
-          }
-        )
-      }
-    );
-  }, RepropagateMenuAndMenuRootProvider = (props) => {
-    const {
-      scope = MENU_CONTEXT,
-      menuContext,
-      rootContext,
-      popperContext,
-      menuSubContext,
-      children
-    } = props;
-    return /* @__PURE__ */ jsx(PopperPrimitive.PopperProvider, { ...popperContext, 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 = MENU_CONTEXT, forceMount, zIndex, children } = props, menuContext = useMenuContext(scope), rootContext = useMenuRootContext(scope), popperContext = PopperPrimitive.usePopperContext(scope), menuSubContext = useMenuSubContext(scope), themeName = useThemeName(), themedChildren = /* @__PURE__ */ jsx(Theme, { forceClassName: !0, name: themeName, children }), content = needsPortalRepropagation() ? /* @__PURE__ */ jsx(
-      RepropagateMenuAndMenuRootProvider,
-      {
-        menuContext,
-        rootContext,
-        popperContext,
-        menuSubContext,
-        scope,
-        children: themedChildren
-      }
-    ) : themedChildren, isPresent = forceMount || rootContext.open && menuContext.open;
-    return /* @__PURE__ */ jsx(Animate, { type: "presence", present: isPresent, children: /* @__PURE__ */ jsx(PortalPrimitive, { children: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(PortalProvider, { scope, forceMount, children: /* @__PURE__ */ jsxs(View, { zIndex: zIndex || 100, inset: 0, position: "absolute", children: [
-      !!menuContext.open && !isWeb && /* @__PURE__ */ jsx(
-        View,
-        {
-          inset: 0,
-          position: "absolute",
-          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 scope = props.scope || MENU_CONTEXT, portalContext = usePortalContext(scope), { forceMount = portalContext.forceMount, ...contentProps } = props, rootContext = useMenuRootContext(scope);
-      return /* @__PURE__ */ jsx(Collection.Provider, { scope, children: /* @__PURE__ */ jsx(Collection.Slot, { scope, children: rootContext.modal ? /* @__PURE__ */ jsx(MenuRootContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx(MenuRootContentNonModal, { ...contentProps, ref: forwardedRef }) }) });
-    }
-  ), MenuRootContentModal = React.forwardRef((props, forwardedRef) => {
-    const scope = props.scope || MENU_CONTEXT, context = useMenuContext(scope), ref = React.useRef(null), composedRefs = useComposedRefs(forwardedRef, ref);
-    return /* @__PURE__ */ jsx(
-      MenuContentImpl,
-      {
-        ...props,
-        scope,
-        ref: composedRefs,
-        trapFocus: context.open,
-        disableOutsidePointerEvents: context.open,
-        disableOutsideScroll: !1,
-        onFocusOutside: composeEventHandlers(
-          props.onFocusOutside,
-          (event) => event.preventDefault(),
-          { checkDefaultPrevented: !1 }
-        ),
-        onDismiss: () => context.onOpenChange(!1)
-      }
-    );
-  }), MenuRootContentNonModal = React.forwardRef((props, forwardedRef) => {
-    const scope = props.scope || MENU_CONTEXT, context = useMenuContext(scope);
-    return /* @__PURE__ */ jsx(
-      MenuContentImpl,
-      {
-        ...props,
-        scope,
-        ref: forwardedRef,
-        trapFocus: !1,
-        disableOutsidePointerEvents: !1,
-        disableOutsideScroll: !1,
-        onDismiss: () => context.onOpenChange(!1)
-      }
-    );
-  }), MenuContentImpl = React.forwardRef((props, forwardedRef) => {
-    const {
-      scope = MENU_CONTEXT,
-      loop = !1,
-      trapFocus,
-      onOpenAutoFocus,
-      onCloseAutoFocus,
-      disableOutsidePointerEvents,
-      onEntryFocus,
-      onEscapeKeyDown,
-      onPointerDownOutside,
-      onFocusOutside,
-      onInteractOutside,
-      onDismiss,
-      disableOutsideScroll,
-      disableDismissOnScroll = !1,
-      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), []), React.useEffect(() => {
-      if (!isWeb || disableDismissOnScroll || !context.open) return;
-      const handleScroll = () => {
-        onDismiss?.();
-      };
-      return window.addEventListener("scroll", handleScroll, { capture: !0, passive: !0 }), () => {
-        window.removeEventListener("scroll", handleScroll, { capture: !0 });
-      };
-    }, [disableDismissOnScroll, context.open, onDismiss]), isWeb && useFocusGuards();
-    const isPointerMovingToSubmenu = React.useCallback((event) => {
-      const isMovingTowards = pointerDirRef.current === pointerGraceIntentRef.current?.side, inArea = isPointerInGraceArea(event, pointerGraceIntentRef.current?.area);
-      return isMovingTowards && inArea;
-    }, []), content = /* @__PURE__ */ jsx(
-      PopperPrimitive.PopperContent,
-      {
-        role: "menu",
-        ...!unstyled && {
-          padding: 4,
-          backgroundColor: "$background",
-          borderWidth: 1,
-          borderColor: "$borderColor",
-          outlineWidth: 0,
-          minWidth: 180
-        },
-        "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,
-        ...isWeb ? {
-          onKeyDown: composeEventHandlers(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 isOnContentFrame = event.target.hasAttribute(
-              "data-tamagui-menu-content"
-            );
-            if (!isKeyDownInside || !isOnContentFrame || !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, { focusVisible: !0 });
-          }),
-          // TODO
-          // @ts-ignore
-          onBlur: composeEventHandlers(props.onBlur, (event) => {
-            event.currentTarget?.contains(event.target) || (clearTimeout(timerRef.current), searchRef.current = "");
-          }),
-          // TODO
-          onPointerMove: composeEventHandlers(props.onPointerMove, (event) => {
-            if (event.pointerType !== "mouse") return;
-            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(), document.querySelector(
-                "[data-tamagui-menu-content]"
-              )?.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 = React.forwardRef(
-    (props, forwardedRef) => {
-      const {
-        disabled = !1,
-        onSelect,
-        children,
-        scope = MENU_CONTEXT,
-        // filter out native-only props that shouldn't reach the DOM
-        // @ts-ignore
-        destructive,
-        // @ts-ignore
-        hidden,
-        // @ts-ignore
-        androidIconName,
-        // @ts-ignore
-        iosIconName,
-        ...itemProps
-      } = props, ref = React.useRef(null), rootContext = useMenuRootContext(scope), contentContext = useMenuContentContext(scope), composedRefs = useComposedRefs(forwardedRef, ref), isPointerDownRef = React.useRef(!1), handleSelect = () => {
-        const menuItem = ref.current;
-        if (!disabled && menuItem)
-          if (isWeb) {
-            const menuItemEl = menuItem, itemSelectEvent = new CustomEvent(ITEM_SELECT, {
-              bubbles: !0,
-              cancelable: !0
-            });
-            menuItemEl.addEventListener(ITEM_SELECT, (event) => onSelect?.(event), {
-              once: !0
-            }), dispatchDiscreteCustomEvent(menuItemEl, 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,
-          scope,
-          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(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 = MENU_CONTEXT,
-      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,
-        disabled,
-        textValue: textValue ?? textContent,
-        children: /* @__PURE__ */ jsx(
-          RovingFocusGroup.Item,
-          {
-            asChild: !0,
-            __scopeRovingFocusGroup: scope,
-            focusable: !disabled,
-            ...!unstyled && {
-              flexDirection: "row",
-              alignItems: "center"
-            },
-            ...itemProps,
-            children: /* @__PURE__ */ jsx(
-              _Item,
-              {
-                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, (event) => {
-                  event.pointerType === "mouse" && (disabled ? contentContext.onItemLeave(event) : (contentContext.onItemEnter(event), event.defaultPrevented || event.currentTarget.focus({ preventScroll: !0, focusVisible: !1 })));
-                }),
-                onPointerLeave: composeEventHandlers(props.onPointerLeave, (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) => {
-    const {
-      // @ts-ignore - native menu ios config
-      ios,
-      // @ts-ignore
-      androidIconName,
-      // @ts-ignore
-      iosIconName,
-      ...rest
-    } = props;
-    return /* @__PURE__ */ jsx(_Image, { ...rest, ref: forwardedRef });
-  });
-  MenuItemImage.displayName = ITEM_IMAGE;
-  const ITEM_ICON = "MenuItemIcon", MenuItemIcon = _Icon.styleable((props, forwardedRef) => {
-    const {
-      // @ts-ignore
-      ios,
-      // @ts-ignore
-      android,
-      // @ts-ignore
-      androidIconName,
-      // @ts-ignore
-      iosIconName,
-      ...rest
-    } = props;
-    return /* @__PURE__ */ jsx(_Icon, { ...rest, ref: forwardedRef });
-  });
-  MenuItemIcon.displayName = ITEM_ICON;
-  const CHECKBOX_ITEM_NAME = "MenuCheckboxItem", MenuCheckboxItem = React.forwardRef((props, forwardedRef) => {
-    const {
-      checked = !1,
-      onCheckedChange,
-      scope = MENU_CONTEXT,
-      // filter out native-only props
-      // @ts-ignore - native menu value state
-      value,
-      // @ts-ignore - native menu value change handler
-      onValueChange,
-      ...checkboxItemProps
-    } = props;
-    return /* @__PURE__ */ jsx(ItemIndicatorProvider, { scope, checked, children: /* @__PURE__ */ jsx(
-      MenuItem,
-      {
-        componentName: CHECKBOX_ITEM_NAME,
-        role: isWeb ? "menuitemcheckbox" : "menuitem",
-        "aria-checked": isIndeterminate(checked) ? "mixed" : checked,
-        ...checkboxItemProps,
-        scope,
-        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 = MENU_CONTEXT, ...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 = React.forwardRef(
-    (props, forwardedRef) => {
-      const { value, scope = MENU_CONTEXT, ...radioItemProps } = props, context = useRadioGroupContext(scope), checked = value === context.value;
-      return /* @__PURE__ */ jsx(ItemIndicatorProvider, { scope, checked, children: /* @__PURE__ */ jsx(
-        MenuItem,
-        {
-          componentName: RADIO_ITEM_NAME,
-          ...radioItemProps,
-          scope,
-          "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 = MENU_CONTEXT, 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,
-          render: "span",
-          ...itemIndicatorProps,
-          ref: forwardedRef,
-          "data-state": getCheckedState(indicatorContext.checked)
-        }
-      ) : null });
-    }
-  );
-  MenuItemIndicator.displayName = ITEM_INDICATOR_NAME;
-  const MenuArrow = React.forwardRef(
-    function(props, forwardedRef) {
-      const {
-        scope = MENU_CONTEXT,
-        unstyled = process.env.TAMAGUI_HEADLESS === "1",
-        ...rest
-      } = props;
-      return /* @__PURE__ */ jsx(
-        PopperPrimitive.PopperArrow,
-        {
-          scope,
-          componentName: "PopperArrow",
-          ...!unstyled && {
-            backgroundColor: "$background"
-          },
-          ...rest,
-          ref: forwardedRef
-        }
-      );
-    }
-  ), SUB_NAME = "MenuSub", { Provider: MenuSubProvider, useStyledContext: useMenuSubContext } = createStyledContext(), MenuSub = (props) => {
-    const {
-      scope = MENU_CONTEXT,
-      children,
-      open = !1,
-      onOpenChange,
-      allowFlip = { padding: 10 },
-      stayInFrame = { padding: 10 },
-      ...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,
-      {
-        allowFlip,
-        stayInFrame,
-        ...rest,
-        scope,
-        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 = React.forwardRef((props, forwardedRef) => {
-    const scope = props.scope || MENU_CONTEXT, context = useMenuContext(scope), rootContext = useMenuRootContext(scope), subContext = useMenuSubContext(scope), contentContext = useMenuContentContext(scope), popperContext = PopperPrimitive.usePopperContext(scope), openTimerRef = React.useRef(null), { pointerGraceTimerRef, onPointerGraceIntentChange } = contentContext, placementSide = popperContext.placement?.split("-")[0], effectiveDir = placementSide === "left" ? "rtl" : placementSide === "right" ? "ltr" : rootContext.dir, 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: "except-style", scope, 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, (eventIn) => {
-          const event = eventIn;
-          clearOpenTimer();
-          const contentRect = context.content?.getBoundingClientRect();
-          if (contentRect) {
-            const contentEl = context.content, side = (contentEl?.dataset?.side ? contentEl : contentEl?.querySelector("[data-side]"))?.dataset?.side || "right", rightSide = side === "right", bleed = rightSide ? -5 : 5, contentNearEdge = contentRect[rightSide ? "left" : "right"], contentFarEdge = contentRect[rightSide ? "right" : "left"], polygon = {
-              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
-            };
-            contentContext.onPointerGraceIntentChange(polygon), window.clearTimeout(pointerGraceTimerRef.current), pointerGraceTimerRef.current = window.setTimeout(
-              () => contentContext.onPointerGraceIntentChange(null),
-              300
-            );
-          } else if (isWeb && subContext.trigger) {
-            const triggerRect = subContext.trigger?.getBoundingClientRect();
-            if (triggerRect) {
-              const placementSide2 = popperContext.placement?.split("-")[0], side = placementSide2 === "left" || placementSide2 === "right" ? placementSide2 : rootContext.dir === "rtl" ? "left" : "right", rightSide = side === "right", bleed = rightSide ? -5 : 5, nearEdge = rightSide ? triggerRect.right + 4 : triggerRect.left - 4, farEdge = rightSide ? nearEdge + 200 : nearEdge - 200, polygon = {
-                area: [
-                  { x: event.clientX + bleed, 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
-              };
-              contentContext.onPointerGraceIntentChange(polygon), 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(props.onKeyDown, (event) => {
-            const isTypingAhead = contentContext.searchRef.current !== "";
-            if (props.disabled || isTypingAhead && event.key === " ") return;
-            if (SUB_OPEN_KEYS[effectiveDir].includes(event.key)) {
-              if (context.open && context.content) {
-                const firstItem = context.content.querySelector?.(
-                  '[role="menuitem"]:not([data-disabled])'
-                );
-                if (firstItem) {
-                  firstItem.focus({ focusVisible: !0 }), event.preventDefault();
-                  return;
-                }
-              }
-              const triggerEl = event.currentTarget;
-              popperContext.refs?.setReference(triggerEl), context.onOpenChange(!0), requestAnimationFrame(() => {
-                popperContext.update?.();
-              }), context.content?.focus({ focusVisible: !0 }), event.preventDefault();
-            }
-          })
-        } : null
-      }
-    ) });
-  });
-  MenuSubTrigger.displayName = SUB_TRIGGER_NAME;
-  const SUB_CONTENT_NAME = "MenuSubContent", MenuSubContent = React.forwardRef((props, forwardedRef) => {
-    const scope = props.scope || MENU_CONTEXT, portalContext = usePortalContext(scope), { forceMount = portalContext.forceMount, ...subContentProps } = props, context = useMenuContext(scope), rootContext = useMenuRootContext(scope), subContext = useMenuSubContext(scope), popperContext = PopperPrimitive.usePopperContext(scope), ref = React.useRef(null), composedRefs = useComposedRefs(forwardedRef, ref), placementSide = popperContext.placement?.split("-")[0], dataSide = placementSide === "left" || placementSide === "right" ? placementSide : rootContext.dir === "rtl" ? "left" : "right", effectiveDir = placementSide === "left" ? "rtl" : placementSide === "right" ? "ltr" : rootContext.dir;
-    return /* @__PURE__ */ jsx(Collection.Provider, { scope, children: /* @__PURE__ */ jsx(Collection.Slot, { scope, children: /* @__PURE__ */ jsx(
-      MenuContentImpl,
-      {
-        id: subContext.contentId,
-        "aria-labelledby": subContext.triggerId,
-        ...subContentProps,
-        ref: composedRefs,
-        "data-side": dataSide,
-        disableOutsidePointerEvents: !1,
-        disableOutsideScroll: !1,
-        trapFocus: !1,
-        onOpenAutoFocus: (event) => {
-          rootContext.isUsingKeyboardRef.current && document.querySelector(
-            "[data-tamagui-menu-content][data-side]"
-          )?.focus(), event.preventDefault();
-        },
-        onCloseAutoFocus: (event) => event.preventDefault(),
-        onFocusOutside: composeEventHandlers(props.onFocusOutside, (event) => {
-          event.target !== subContext.trigger && context.onOpenChange(!1);
-        }),
-        onEscapeKeyDown: composeEventHandlers(props.onEscapeKeyDown, (event) => {
-          context.onOpenChange(!1), subContext.trigger?.focus({ focusVisible: !0 }), event.preventDefault();
-        }),
-        ...isWeb ? {
-          onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
-            const isKeyDownInside = event.currentTarget.contains(
-              event.target
-            ), isCloseKey = SUB_CLOSE_KEYS[effectiveDir].includes(event.key);
-            isKeyDownInside && isCloseKey && (context.onOpenChange(!1), subContext.trigger?.focus({ focusVisible: !0 }), event.preventDefault());
-          })
-        } : null
-      }
-    ) }) });
-  });
-  MenuSubContent.displayName = SUB_CONTENT_NAME;
-  const Anchor = MenuAnchor, Portal = MenuPortal, Content = MenuContent, Group = _MenuGroup.styleable((props, ref) => /* @__PURE__ */ jsx(_MenuGroup, { ...props, ref }));
-  Group.displayName = "MenuGroup";
-  const Label = _Label.styleable((props, ref) => /* @__PURE__ */ jsx(_Label, { ...props, ref }));
-  Label.displayName = "MenuLabel";
-  const Item = MenuItem, CheckboxItem = MenuCheckboxItem, RadioGroup = MenuRadioGroup, RadioItem = MenuRadioItem, ItemIndicator = MenuItemIndicator, Separator = _Separator.styleable((props, ref) => /* @__PURE__ */ jsx(_Separator, { ...props, ref }));
-  return Separator.displayName = "MenuSeparator", {
-    Menu: withStaticProperties(MenuComp, {
-      Anchor,
-      Portal,
-      Content,
-      Group,
-      Label,
-      Item,
-      CheckboxItem,
-      RadioGroup,
-      RadioItem,
-      ItemIndicator,
-      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, options) {
-  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
-  for (const candidate of candidates)
-    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT || (candidate.focus({ focusVisible: options?.focusVisible }), 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);
-}
-export {
-  createBaseMenu
-};
-//# sourceMappingURL=createBaseMenu.js.map