@radix-solid-js/menu 0.1.2

package/dist/index.js

@@ -0,0 +1,1037 @@
+import { splitProps, createSignal, createEffect, onCleanup, Show, onMount } from 'solid-js';
+import { composeEventHandlers } from '@radix-solid-js/primitive';
+import { createCollection } from '@radix-solid-js/collection';
+import { mergeRefs } from '@radix-solid-js/compose-refs';
+import { createContextScope } from '@radix-solid-js/context';
+import { useDirection } from '@radix-solid-js/direction';
+import { DismissableLayer } from '@radix-solid-js/dismissable-layer';
+import { useFocusGuards } from '@radix-solid-js/focus-guards';
+import { FocusScope } from '@radix-solid-js/focus-scope';
+import { createId } from '@radix-solid-js/id';
+import { createPopperScope, Popper, PopperAnchor, PopperContent, PopperArrow } from '@radix-solid-js/popper';
+import { Portal } from '@radix-solid-js/portal';
+import { Presence } from '@radix-solid-js/presence';
+import { Primitive, dispatchDiscreteCustomEvent } from '@radix-solid-js/primitive-component';
+import { createRovingFocusGroupScope, RovingFocusGroup, RovingFocusGroupItem } from '@radix-solid-js/roving-focus';
+import { hideOthers } from 'aria-hidden';
+
+// src/menu.tsx
+var SELECTION_KEYS = ["Enter", " "];
+var FIRST_KEYS = ["ArrowDown", "PageUp", "Home"];
+var LAST_KEYS = ["ArrowUp", "PageDown", "End"];
+var FIRST_LAST_KEYS = [...FIRST_KEYS, ...LAST_KEYS];
+var SUB_OPEN_KEYS = {
+  ltr: [...SELECTION_KEYS, "ArrowRight"],
+  rtl: [...SELECTION_KEYS, "ArrowLeft"]
+};
+var SUB_CLOSE_KEYS = {
+  ltr: ["ArrowLeft"],
+  rtl: ["ArrowRight"]
+};
+var MENU_NAME = "Menu";
+var [Collection, useCollection, createCollectionScope] = createCollection(MENU_NAME);
+var [createMenuContext, createMenuScope] = createContextScope(MENU_NAME, [
+  createCollectionScope,
+  createPopperScope,
+  createRovingFocusGroupScope
+]);
+var usePopperScope = createPopperScope();
+var useRovingFocusGroupScope = createRovingFocusGroupScope();
+var [MenuProvider, useMenuContext] = createMenuContext(MENU_NAME);
+var [MenuRootProvider, useMenuRootContext] = createMenuContext(MENU_NAME);
+function Menu(props) {
+  const [local] = splitProps(props, [
+    "__scopeMenu",
+    "children",
+    "open",
+    "onOpenChange",
+    "dir",
+    "modal"
+  ]);
+  const popperScope = usePopperScope(local.__scopeMenu);
+  const [content, setContent] = createSignal(null);
+  const [isUsingKeyboard, setIsUsingKeyboard] = createSignal(false);
+  const direction = useDirection(local.dir);
+  const open = () => local.open ?? false;
+  const modal = () => local.modal ?? true;
+  const handleOpenChange = (value) => local.onOpenChange?.(value);
+  createEffect(() => {
+    const handleKeyDown = () => {
+      setIsUsingKeyboard(true);
+      document.addEventListener("pointerdown", handlePointer, {
+        capture: true,
+        once: true
+      });
+      document.addEventListener("pointermove", handlePointer, {
+        capture: true,
+        once: true
+      });
+    };
+    const handlePointer = () => setIsUsingKeyboard(false);
+    document.addEventListener("keydown", handleKeyDown, { capture: true });
+    onCleanup(() => {
+      document.removeEventListener("keydown", handleKeyDown, { capture: true });
+      document.removeEventListener("pointerdown", handlePointer, {
+        capture: true
+      });
+      document.removeEventListener("pointermove", handlePointer, {
+        capture: true
+      });
+    });
+  });
+  return /* @__PURE__ */ React.createElement(Popper, { ...popperScope }, /* @__PURE__ */ React.createElement(
+    MenuProvider,
+    {
+      scope: local.__scopeMenu,
+      open: open(),
+      onOpenChange: handleOpenChange,
+      content: content(),
+      onContentChange: setContent
+    },
+    /* @__PURE__ */ React.createElement(
+      MenuRootProvider,
+      {
+        scope: local.__scopeMenu,
+        onClose: () => handleOpenChange(false),
+        isUsingKeyboard: isUsingKeyboard(),
+        onIsUsingKeyboardChange: setIsUsingKeyboard,
+        dir: direction,
+        modal: modal()
+      },
+      local.children
+    )
+  ));
+}
+Menu.displayName = MENU_NAME;
+var ANCHOR_NAME = "MenuAnchor";
+function MenuAnchor(inProps) {
+  const [local, rest] = splitProps(inProps, ["__scopeMenu", "ref"]);
+  const popperScope = usePopperScope(local.__scopeMenu);
+  return /* @__PURE__ */ React.createElement(PopperAnchor, { ...popperScope, ...rest, ref: local.ref });
+}
+MenuAnchor.displayName = ANCHOR_NAME;
+var PORTAL_NAME = "MenuPortal";
+var [PortalProvider, usePortalContext] = createMenuContext(PORTAL_NAME, {
+  forceMount: void 0
+});
+function MenuPortal(props) {
+  const [local] = splitProps(props, [
+    "__scopeMenu",
+    "forceMount",
+    "children",
+    "container"
+  ]);
+  const context = useMenuContext(PORTAL_NAME, local.__scopeMenu);
+  return /* @__PURE__ */ React.createElement(PortalProvider, { scope: local.__scopeMenu, forceMount: local.forceMount }, /* @__PURE__ */ React.createElement(Presence, { present: local.forceMount || context.open }, /* @__PURE__ */ React.createElement(Portal, { container: local.container }, local.children)));
+}
+MenuPortal.displayName = PORTAL_NAME;
+var CONTENT_NAME = "MenuContent";
+var [MenuContentProvider, useMenuContentContext] = createMenuContext(CONTENT_NAME);
+function MenuContent(inProps) {
+  const [local, rest] = splitProps(inProps, ["__scopeMenu", "forceMount"]);
+  const portalContext = usePortalContext(CONTENT_NAME, local.__scopeMenu);
+  const context = useMenuContext(CONTENT_NAME, local.__scopeMenu);
+  const rootContext = useMenuRootContext(CONTENT_NAME, local.__scopeMenu);
+  const forceMount = () => local.forceMount ?? portalContext.forceMount;
+  return /* @__PURE__ */ React.createElement(Collection.Provider, { scope: local.__scopeMenu }, /* @__PURE__ */ React.createElement(Presence, { present: forceMount() || context.open }, /* @__PURE__ */ React.createElement(Collection.Slot, { scope: local.__scopeMenu }, /* @__PURE__ */ React.createElement(
+    Show,
+    {
+      when: rootContext.modal,
+      fallback: /* @__PURE__ */ React.createElement(
+        MenuRootContentNonModal,
+        {
+          ...rest,
+          __scopeMenu: local.__scopeMenu
+        }
+      )
+    },
+    /* @__PURE__ */ React.createElement(MenuRootContentModal, { ...rest, __scopeMenu: local.__scopeMenu })
+  ))));
+}
+MenuContent.displayName = CONTENT_NAME;
+function MenuRootContentModal(inProps) {
+  const [local, rest] = splitProps(inProps, [
+    "__scopeMenu",
+    "ref",
+    "onFocusOutside"
+  ]);
+  const context = useMenuContext(CONTENT_NAME, local.__scopeMenu);
+  let contentRef;
+  createEffect(() => {
+    if (contentRef) {
+      const cleanup = hideOthers(contentRef);
+      onCleanup(() => cleanup?.());
+    }
+  });
+  return /* @__PURE__ */ React.createElement(
+    MenuContentImpl,
+    {
+      ...rest,
+      __scopeMenu: local.__scopeMenu,
+      ref: mergeRefs(local.ref, (el) => {
+        contentRef = el;
+      }),
+      trapFocus: context.open,
+      disableOutsidePointerEvents: context.open,
+      disableOutsideScroll: true,
+      onFocusOutside: composeEventHandlers(
+        local.onFocusOutside,
+        (event) => event.preventDefault()
+      ),
+      onDismiss: () => context.onOpenChange(false)
+    }
+  );
+}
+function MenuRootContentNonModal(inProps) {
+  const [local, rest] = splitProps(inProps, ["__scopeMenu"]);
+  const context = useMenuContext(CONTENT_NAME, local.__scopeMenu);
+  return /* @__PURE__ */ React.createElement(
+    MenuContentImpl,
+    {
+      ...rest,
+      __scopeMenu: local.__scopeMenu,
+      trapFocus: false,
+      disableOutsidePointerEvents: false,
+      disableOutsideScroll: false,
+      onDismiss: () => context.onOpenChange(false)
+    }
+  );
+}
+function MenuContentImpl(inProps) {
+  const [local, rest] = splitProps(inProps, [
+    "__scopeMenu",
+    "ref",
+    "loop",
+    "trapFocus",
+    "onOpenAutoFocus",
+    "onCloseAutoFocus",
+    "disableOutsidePointerEvents",
+    "disableOutsideScroll",
+    "onEntryFocus",
+    "onEscapeKeyDown",
+    "onPointerDownOutside",
+    "onFocusOutside",
+    "onInteractOutside",
+    "onDismiss",
+    "side",
+    "sideOffset",
+    "align",
+    "alignOffset",
+    "avoidCollisions",
+    "collisionBoundary",
+    "collisionPadding",
+    "arrowPadding",
+    "sticky",
+    "hideWhenDetached",
+    "style",
+    "onKeyDown",
+    "onBlur",
+    "onPointerMove"
+  ]);
+  const context = useMenuContext(CONTENT_NAME, local.__scopeMenu);
+  const rootContext = useMenuRootContext(CONTENT_NAME, local.__scopeMenu);
+  const popperScope = usePopperScope(local.__scopeMenu);
+  const rovingFocusGroupScope = useRovingFocusGroupScope(local.__scopeMenu);
+  const getItems = useCollection(local.__scopeMenu);
+  const [currentItemId, setCurrentItemId] = createSignal(null);
+  let contentRef;
+  let timerRef = 0;
+  let searchRef = "";
+  let pointerGraceTimerRef = 0;
+  let pointerGraceIntentRef = null;
+  let pointerDirRef = "right";
+  let lastPointerXRef = 0;
+  createEffect(() => {
+    if (local.disableOutsideScroll) {
+      const body = document.body;
+      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+      const originalOverflow = body.style.overflow;
+      const originalPaddingRight = body.style.paddingRight;
+      body.style.overflow = "hidden";
+      if (scrollbarWidth > 0) {
+        body.style.paddingRight = `${scrollbarWidth}px`;
+      }
+      onCleanup(() => {
+        body.style.overflow = originalOverflow;
+        body.style.paddingRight = originalPaddingRight;
+      });
+    }
+  });
+  const handleTypeaheadSearch = (key) => {
+    const search = searchRef + key;
+    const items = getItems().filter((item) => !item.disabled);
+    const currentItem = document.activeElement;
+    const currentMatch = items.find(
+      (item) => item.ref === currentItem
+    )?.textValue;
+    const values = items.map((item) => item.textValue);
+    const nextMatch = getNextMatch(values, search, currentMatch);
+    const newItem = items.find(
+      (item) => item.textValue === nextMatch
+    )?.ref;
+    (function updateSearch(value) {
+      searchRef = value;
+      window.clearTimeout(timerRef);
+      if (value !== "")
+        timerRef = window.setTimeout(() => updateSearch(""), 1e3);
+    })(search);
+    if (newItem) {
+      setTimeout(() => newItem.focus());
+    }
+  };
+  onCleanup(() => window.clearTimeout(timerRef));
+  useFocusGuards();
+  const isPointerMovingToSubmenu = (event) => {
+    const isMovingTowards = pointerDirRef === pointerGraceIntentRef?.side;
+    return isMovingTowards && isPointerInGraceArea(event, pointerGraceIntentRef?.area);
+  };
+  return /* @__PURE__ */ React.createElement(
+    MenuContentProvider,
+    {
+      scope: local.__scopeMenu,
+      searchRef,
+      onSearchChange: (value) => {
+        searchRef = value;
+      },
+      onItemEnter: (event) => {
+        if (isPointerMovingToSubmenu(event)) event.preventDefault();
+      },
+      onItemLeave: (event) => {
+        if (isPointerMovingToSubmenu(event)) return;
+        contentRef?.focus();
+        setCurrentItemId(null);
+      },
+      onTriggerLeave: (event) => {
+        if (isPointerMovingToSubmenu(event)) event.preventDefault();
+      },
+      pointerGraceTimerRef,
+      onPointerGraceTimerChange: (value) => {
+        pointerGraceTimerRef = value;
+      },
+      onPointerGraceIntentChange: (intent) => {
+        pointerGraceIntentRef = intent;
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      FocusScope,
+      {
+        trapped: local.trapFocus,
+        onMountAutoFocus: composeEventHandlers(
+          local.onOpenAutoFocus,
+          (event) => {
+            event.preventDefault();
+            contentRef?.focus({ preventScroll: true });
+          }
+        ),
+        onUnmountAutoFocus: local.onCloseAutoFocus
+      },
+      /* @__PURE__ */ React.createElement(
+        DismissableLayer,
+        {
+          asChild: true,
+          disableOutsidePointerEvents: local.disableOutsidePointerEvents,
+          onEscapeKeyDown: local.onEscapeKeyDown,
+          onPointerDownOutside: local.onPointerDownOutside,
+          onFocusOutside: local.onFocusOutside,
+          onInteractOutside: local.onInteractOutside,
+          onDismiss: local.onDismiss
+        },
+        /* @__PURE__ */ React.createElement(
+          RovingFocusGroup,
+          {
+            asChild: true,
+            ...rovingFocusGroupScope,
+            dir: rootContext.dir,
+            orientation: "vertical",
+            loop: local.loop ?? false,
+            currentTabStopId: currentItemId(),
+            onCurrentTabStopIdChange: setCurrentItemId,
+            onEntryFocus: composeEventHandlers(
+              local.onEntryFocus,
+              (event) => {
+                if (!rootContext.isUsingKeyboard) event.preventDefault();
+              }
+            ),
+            preventScrollOnEntryFocus: true
+          },
+          /* @__PURE__ */ React.createElement(
+            PopperContent,
+            {
+              role: "menu",
+              "aria-orientation": "vertical",
+              "data-state": getOpenState(context.open),
+              "data-radix-menu-content": "",
+              dir: rootContext.dir,
+              ...popperScope,
+              ...rest,
+              ref: mergeRefs(local.ref, (el) => {
+                contentRef = el;
+                context.onContentChange(el);
+              }),
+              side: local.side,
+              sideOffset: local.sideOffset,
+              align: local.align,
+              alignOffset: local.alignOffset,
+              avoidCollisions: local.avoidCollisions,
+              collisionBoundary: local.collisionBoundary,
+              collisionPadding: local.collisionPadding,
+              arrowPadding: local.arrowPadding,
+              sticky: local.sticky,
+              hideWhenDetached: local.hideWhenDetached,
+              style: {
+                outline: "none",
+                ...typeof local.style === "object" ? local.style : {},
+                "--radix-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
+                "--radix-menu-content-available-width": "var(--radix-popper-available-width)",
+                "--radix-menu-content-available-height": "var(--radix-popper-available-height)",
+                "--radix-menu-trigger-width": "var(--radix-popper-anchor-width)",
+                "--radix-menu-trigger-height": "var(--radix-popper-anchor-height)"
+              },
+              onKeyDown: composeEventHandlers(
+                local.onKeyDown,
+                (event) => {
+                  const target = event.target;
+                  const isKeyDownInside = target.closest("[data-radix-menu-content]") === event.currentTarget;
+                  const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
+                  const isCharacterKey = event.key.length === 1;
+                  if (isKeyDownInside) {
+                    if (event.key === "Tab") event.preventDefault();
+                    if (!isModifierKey && isCharacterKey)
+                      handleTypeaheadSearch(event.key);
+                  }
+                  const content = contentRef;
+                  if (event.target !== content) return;
+                  if (!FIRST_LAST_KEYS.includes(event.key)) return;
+                  event.preventDefault();
+                  const items = getItems().filter(
+                    (item) => !item.disabled
+                  );
+                  const candidateNodes = items.map((item) => item.ref);
+                  if (LAST_KEYS.includes(event.key)) candidateNodes.reverse();
+                  focusFirst(candidateNodes);
+                }
+              ),
+              onBlur: composeEventHandlers(
+                local.onBlur,
+                (event) => {
+                  if (!event.currentTarget.contains(
+                    event.target
+                  )) {
+                    window.clearTimeout(timerRef);
+                    searchRef = "";
+                  }
+                }
+              ),
+              onPointerMove: composeEventHandlers(
+                local.onPointerMove,
+                whenMouse((event) => {
+                  const target = event.target;
+                  const pointerXHasChanged = lastPointerXRef !== event.clientX;
+                  if (event.currentTarget.contains(target) && pointerXHasChanged) {
+                    const newDir = event.clientX > lastPointerXRef ? "right" : "left";
+                    pointerDirRef = newDir;
+                    lastPointerXRef = event.clientX;
+                  }
+                })
+              )
+            }
+          )
+        )
+      )
+    )
+  );
+}
+var GROUP_NAME = "MenuGroup";
+function MenuGroup(inProps) {
+  const [local, rest] = splitProps(inProps, ["__scopeMenu", "ref"]);
+  return /* @__PURE__ */ React.createElement(Primitive.div, { role: "group", ...rest, ref: local.ref });
+}
+MenuGroup.displayName = GROUP_NAME;
+var LABEL_NAME = "MenuLabel";
+function MenuLabel(inProps) {
+  const [local, rest] = splitProps(inProps, ["__scopeMenu", "ref"]);
+  return /* @__PURE__ */ React.createElement(Primitive.div, { ...rest, ref: local.ref });
+}
+MenuLabel.displayName = LABEL_NAME;
+var ITEM_NAME = "MenuItem";
+var ITEM_SELECT = "menu.itemSelect";
+function MenuItem(inProps) {
+  const [local, rest] = splitProps(inProps, [
+    "__scopeMenu",
+    "disabled",
+    "onSelect",
+    "ref",
+    "onClick",
+    "onPointerDown",
+    "onPointerUp",
+    "onKeyDown"
+  ]);
+  const rootContext = useMenuRootContext(ITEM_NAME, local.__scopeMenu);
+  const contentContext = useMenuContentContext(ITEM_NAME, local.__scopeMenu);
+  let itemRef;
+  let isPointerDownRef = false;
+  const disabled = () => local.disabled ?? false;
+  const handleSelect = () => {
+    const menuItem = itemRef;
+    if (!disabled() && menuItem) {
+      const itemSelectEvent = new CustomEvent(ITEM_SELECT, {
+        bubbles: true,
+        cancelable: true
+      });
+      menuItem.addEventListener(
+        ITEM_SELECT,
+        (event) => local.onSelect?.(event),
+        { once: true }
+      );
+      dispatchDiscreteCustomEvent(menuItem, itemSelectEvent);
+      if (itemSelectEvent.defaultPrevented) {
+        isPointerDownRef = false;
+      } else {
+        rootContext.onClose();
+      }
+    }
+  };
+  return /* @__PURE__ */ React.createElement(
+    MenuItemImpl,
+    {
+      ...rest,
+      __scopeMenu: local.__scopeMenu,
+      ref: mergeRefs(local.ref, (el) => {
+        itemRef = el;
+      }),
+      disabled: disabled(),
+      onClick: composeEventHandlers(local.onClick, handleSelect),
+      onPointerDown: composeEventHandlers(local.onPointerDown, () => {
+        isPointerDownRef = true;
+      }),
+      onPointerUp: composeEventHandlers(
+        local.onPointerUp,
+        (event) => {
+          if (!isPointerDownRef) event.currentTarget?.click();
+        }
+      ),
+      onKeyDown: composeEventHandlers(
+        local.onKeyDown,
+        (event) => {
+          const isTypingAhead = contentContext.searchRef !== "";
+          if (disabled() || isTypingAhead && event.key === " ") return;
+          if (SELECTION_KEYS.includes(event.key)) {
+            event.currentTarget.click();
+            event.preventDefault();
+          }
+        }
+      )
+    }
+  );
+}
+MenuItem.displayName = ITEM_NAME;
+function MenuItemImpl(inProps) {
+  const [local, rest] = splitProps(inProps, [
+    "__scopeMenu",
+    "disabled",
+    "textValue",
+    "ref",
+    "onPointerMove",
+    "onPointerLeave",
+    "onFocus",
+    "onBlur"
+  ]);
+  const contentContext = useMenuContentContext(ITEM_NAME, local.__scopeMenu);
+  const rovingFocusGroupScope = useRovingFocusGroupScope(local.__scopeMenu);
+  let itemRef;
+  const [isFocused, setIsFocused] = createSignal(false);
+  const [textContent, setTextContent] = createSignal("");
+  const disabled = () => local.disabled ?? false;
+  onMount(() => {
+    if (itemRef) {
+      setTextContent((itemRef.textContent ?? "").trim());
+    }
+  });
+  return /* @__PURE__ */ React.createElement(
+    Collection.ItemSlot,
+    {
+      scope: local.__scopeMenu,
+      disabled: disabled(),
+      textValue: local.textValue ?? textContent()
+    },
+    /* @__PURE__ */ React.createElement(
+      RovingFocusGroupItem,
+      {
+        asChild: true,
+        ...rovingFocusGroupScope,
+        focusable: !disabled()
+      },
+      /* @__PURE__ */ React.createElement(
+        Primitive.div,
+        {
+          role: "menuitem",
+          "data-highlighted": isFocused() ? "" : void 0,
+          "aria-disabled": disabled() || void 0,
+          "data-disabled": disabled() ? "" : void 0,
+          ...rest,
+          ref: mergeRefs(local.ref, (el) => {
+            itemRef = el;
+          }),
+          onPointerMove: composeEventHandlers(
+            local.onPointerMove,
+            whenMouse((event) => {
+              if (disabled()) {
+                contentContext.onItemLeave(event);
+              } else {
+                contentContext.onItemEnter(event);
+                if (!event.defaultPrevented) {
+                  const item = event.currentTarget;
+                  item.focus({ preventScroll: true });
+                }
+              }
+            })
+          ),
+          onPointerLeave: composeEventHandlers(
+            local.onPointerLeave,
+            whenMouse(
+              (event) => contentContext.onItemLeave(event)
+            )
+          ),
+          onFocus: composeEventHandlers(
+            local.onFocus,
+            () => setIsFocused(true)
+          ),
+          onBlur: composeEventHandlers(
+            local.onBlur,
+            () => setIsFocused(false)
+          )
+        }
+      )
+    )
+  );
+}
+var CHECKBOX_ITEM_NAME = "MenuCheckboxItem";
+function MenuCheckboxItem(inProps) {
+  const [local, rest] = splitProps(inProps, [
+    "__scopeMenu",
+    "checked",
+    "onCheckedChange",
+    "onSelect"
+  ]);
+  const checked = () => local.checked ?? false;
+  return /* @__PURE__ */ React.createElement(ItemIndicatorProvider, { scope: local.__scopeMenu, checked: checked() }, /* @__PURE__ */ React.createElement(
+    MenuItem,
+    {
+      role: "menuitemcheckbox",
+      "aria-checked": isIndeterminate(checked()) ? "mixed" : checked(),
+      ...rest,
+      __scopeMenu: local.__scopeMenu,
+      "data-state": getCheckedState(checked()),
+      onSelect: composeEventHandlers(
+        local.onSelect,
+        () => local.onCheckedChange?.(
+          isIndeterminate(checked()) ? true : !checked()
+        ),
+        { checkForDefaultPrevented: false }
+      )
+    }
+  ));
+}
+MenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
+var RADIO_GROUP_NAME = "MenuRadioGroup";
+var [RadioGroupProvider, useRadioGroupContext] = createMenuContext(RADIO_GROUP_NAME, {
+  value: void 0,
+  onValueChange: () => {
+  }
+});
+function MenuRadioGroup(inProps) {
+  const [local, rest] = splitProps(inProps, [
+    "__scopeMenu",
+    "value",
+    "onValueChange"
+  ]);
+  return /* @__PURE__ */ React.createElement(
+    RadioGroupProvider,
+    {
+      scope: local.__scopeMenu,
+      value: local.value,
+      onValueChange: local.onValueChange
+    },
+    /* @__PURE__ */ React.createElement(MenuGroup, { ...rest, __scopeMenu: local.__scopeMenu })
+  );
+}
+MenuRadioGroup.displayName = RADIO_GROUP_NAME;
+var RADIO_ITEM_NAME = "MenuRadioItem";
+function MenuRadioItem(inProps) {
+  const [local, rest] = splitProps(inProps, [
+    "__scopeMenu",
+    "value",
+    "onSelect"
+  ]);
+  const context = useRadioGroupContext(RADIO_ITEM_NAME, local.__scopeMenu);
+  const checked = () => local.value === context.value;
+  return /* @__PURE__ */ React.createElement(ItemIndicatorProvider, { scope: local.__scopeMenu, checked: checked() }, /* @__PURE__ */ React.createElement(
+    MenuItem,
+    {
+      role: "menuitemradio",
+      "aria-checked": checked(),
+      ...rest,
+      __scopeMenu: local.__scopeMenu,
+      "data-state": getCheckedState(checked()),
+      onSelect: composeEventHandlers(
+        local.onSelect,
+        () => context.onValueChange?.(local.value),
+        { checkForDefaultPrevented: false }
+      )
+    }
+  ));
+}
+MenuRadioItem.displayName = RADIO_ITEM_NAME;
+var ITEM_INDICATOR_NAME = "MenuItemIndicator";
+var [ItemIndicatorProvider, useItemIndicatorContext] = createMenuContext(ITEM_INDICATOR_NAME, {
+  checked: false
+});
+function MenuItemIndicator(inProps) {
+  const [local, rest] = splitProps(inProps, [
+    "__scopeMenu",
+    "forceMount",
+    "ref"
+  ]);
+  const indicatorContext = useItemIndicatorContext(
+    ITEM_INDICATOR_NAME,
+    local.__scopeMenu
+  );
+  return /* @__PURE__ */ React.createElement(
+    Presence,
+    {
+      present: local.forceMount || isIndeterminate(indicatorContext.checked) || indicatorContext.checked === true
+    },
+    /* @__PURE__ */ React.createElement(
+      Primitive.span,
+      {
+        ...rest,
+        ref: local.ref,
+        "data-state": getCheckedState(indicatorContext.checked)
+      }
+    )
+  );
+}
+MenuItemIndicator.displayName = ITEM_INDICATOR_NAME;
+var SEPARATOR_NAME = "MenuSeparator";
+function MenuSeparator(inProps) {
+  const [local, rest] = splitProps(inProps, ["__scopeMenu", "ref"]);
+  return /* @__PURE__ */ React.createElement(
+    Primitive.div,
+    {
+      role: "separator",
+      "aria-orientation": "horizontal",
+      ...rest,
+      ref: local.ref
+    }
+  );
+}
+MenuSeparator.displayName = SEPARATOR_NAME;
+var ARROW_NAME = "MenuArrow";
+function MenuArrow(inProps) {
+  const [local, rest] = splitProps(inProps, ["__scopeMenu"]);
+  const popperScope = usePopperScope(local.__scopeMenu);
+  return /* @__PURE__ */ React.createElement(PopperArrow, { ...popperScope, ...rest });
+}
+MenuArrow.displayName = ARROW_NAME;
+var SUB_NAME = "MenuSub";
+var [MenuSubProvider, useMenuSubContext] = createMenuContext(SUB_NAME);
+function MenuSub(props) {
+  const [local] = splitProps(props, [
+    "__scopeMenu",
+    "children",
+    "open",
+    "onOpenChange"
+  ]);
+  const parentMenuContext = useMenuContext(SUB_NAME, local.__scopeMenu);
+  const popperScope = usePopperScope(local.__scopeMenu);
+  const [trigger, setTrigger] = createSignal(null);
+  const [content, setContent] = createSignal(null);
+  const open = () => local.open ?? false;
+  const handleOpenChange = (value) => local.onOpenChange?.(value);
+  createEffect(() => {
+    if (parentMenuContext.open === false) handleOpenChange(false);
+    onCleanup(() => handleOpenChange(false));
+  });
+  return /* @__PURE__ */ React.createElement(Popper, { ...popperScope }, /* @__PURE__ */ React.createElement(
+    MenuProvider,
+    {
+      scope: local.__scopeMenu,
+      open: open(),
+      onOpenChange: handleOpenChange,
+      content: content(),
+      onContentChange: setContent
+    },
+    /* @__PURE__ */ React.createElement(
+      MenuSubProvider,
+      {
+        scope: local.__scopeMenu,
+        contentId: createId(),
+        triggerId: createId(),
+        trigger: trigger(),
+        onTriggerChange: setTrigger
+      },
+      local.children
+    )
+  ));
+}
+MenuSub.displayName = SUB_NAME;
+var SUB_TRIGGER_NAME = "MenuSubTrigger";
+function MenuSubTrigger(inProps) {
+  const [local, rest] = splitProps(inProps, [
+    "__scopeMenu",
+    "ref",
+    "onClick",
+    "onPointerMove",
+    "onPointerLeave",
+    "onKeyDown"
+  ]);
+  const context = useMenuContext(SUB_TRIGGER_NAME, local.__scopeMenu);
+  const rootContext = useMenuRootContext(SUB_TRIGGER_NAME, local.__scopeMenu);
+  const subContext = useMenuSubContext(SUB_TRIGGER_NAME, local.__scopeMenu);
+  const contentContext = useMenuContentContext(
+    SUB_TRIGGER_NAME,
+    local.__scopeMenu
+  );
+  let openTimerRef = null;
+  const clearOpenTimer = () => {
+    if (openTimerRef) window.clearTimeout(openTimerRef);
+    openTimerRef = null;
+  };
+  onCleanup(() => {
+    clearOpenTimer();
+    window.clearTimeout(contentContext.pointerGraceTimerRef);
+    contentContext.onPointerGraceIntentChange(null);
+  });
+  return /* @__PURE__ */ React.createElement(MenuAnchor, { __scopeMenu: local.__scopeMenu }, /* @__PURE__ */ React.createElement(
+    MenuItemImpl,
+    {
+      id: subContext.triggerId,
+      "aria-haspopup": "menu",
+      "aria-expanded": context.open,
+      "aria-controls": subContext.contentId,
+      "data-state": getOpenState(context.open),
+      ...rest,
+      __scopeMenu: local.__scopeMenu,
+      ref: mergeRefs(
+        local.ref,
+        (el) => subContext.onTriggerChange(el)
+      ),
+      onClick: composeEventHandlers(
+        local.onClick,
+        (event) => {
+          if (rest.disabled || event.defaultPrevented) return;
+          event.currentTarget.focus();
+          if (!context.open) context.onOpenChange(true);
+        }
+      ),
+      onPointerMove: composeEventHandlers(
+        local.onPointerMove,
+        whenMouse((event) => {
+          contentContext.onItemEnter(event);
+          if (event.defaultPrevented) return;
+          if (!rest.disabled && !context.open && !openTimerRef) {
+            contentContext.onPointerGraceIntentChange(null);
+            openTimerRef = window.setTimeout(() => {
+              context.onOpenChange(true);
+              clearOpenTimer();
+            }, 100);
+          }
+        })
+      ),
+      onPointerLeave: composeEventHandlers(
+        local.onPointerLeave,
+        whenMouse((event) => {
+          clearOpenTimer();
+          const contentRect = context.content?.getBoundingClientRect();
+          if (contentRect) {
+            const side = context.content?.dataset.side;
+            const rightSide = side === "right";
+            const bleed = rightSide ? -5 : 5;
+            const contentNearEdge = contentRect[rightSide ? "left" : "right"];
+            const contentFarEdge = contentRect[rightSide ? "right" : "left"];
+            contentContext.onPointerGraceIntentChange({
+              area: [
+                { x: event.clientX + bleed, y: event.clientY },
+                { x: contentNearEdge, y: contentRect.top },
+                { x: contentFarEdge, y: contentRect.top },
+                { x: contentFarEdge, y: contentRect.bottom },
+                { x: contentNearEdge, y: contentRect.bottom }
+              ],
+              side
+            });
+            window.clearTimeout(contentContext.pointerGraceTimerRef);
+            contentContext.onPointerGraceTimerChange(
+              window.setTimeout(
+                () => contentContext.onPointerGraceIntentChange(null),
+                300
+              )
+            );
+          } else {
+            contentContext.onTriggerLeave(event);
+            if (event.defaultPrevented) return;
+            contentContext.onPointerGraceIntentChange(null);
+          }
+        })
+      ),
+      onKeyDown: composeEventHandlers(
+        local.onKeyDown,
+        (event) => {
+          const isTypingAhead = contentContext.searchRef !== "";
+          if (rest.disabled || isTypingAhead && event.key === " ") return;
+          if (SUB_OPEN_KEYS[rootContext.dir].includes(event.key)) {
+            context.onOpenChange(true);
+            context.content?.focus();
+            event.preventDefault();
+          }
+        }
+      )
+    }
+  ));
+}
+MenuSubTrigger.displayName = SUB_TRIGGER_NAME;
+var SUB_CONTENT_NAME = "MenuSubContent";
+function MenuSubContent(inProps) {
+  const [local, rest] = splitProps(inProps, [
+    "__scopeMenu",
+    "forceMount",
+    "ref",
+    "onFocusOutside",
+    "onEscapeKeyDown",
+    "onKeyDown"
+  ]);
+  const portalContext = usePortalContext(CONTENT_NAME, local.__scopeMenu);
+  const context = useMenuContext(CONTENT_NAME, local.__scopeMenu);
+  const rootContext = useMenuRootContext(CONTENT_NAME, local.__scopeMenu);
+  const subContext = useMenuSubContext(SUB_CONTENT_NAME, local.__scopeMenu);
+  const forceMount = () => local.forceMount ?? portalContext.forceMount;
+  let contentRef;
+  return /* @__PURE__ */ React.createElement(Collection.Provider, { scope: local.__scopeMenu }, /* @__PURE__ */ React.createElement(Presence, { present: forceMount() || context.open }, /* @__PURE__ */ React.createElement(Collection.Slot, { scope: local.__scopeMenu }, /* @__PURE__ */ React.createElement(
+    MenuContentImpl,
+    {
+      id: subContext.contentId,
+      "aria-labelledby": subContext.triggerId,
+      ...rest,
+      __scopeMenu: local.__scopeMenu,
+      ref: mergeRefs(local.ref, (el) => {
+        contentRef = el;
+      }),
+      align: "start",
+      side: rootContext.dir === "rtl" ? "left" : "right",
+      disableOutsidePointerEvents: false,
+      disableOutsideScroll: false,
+      trapFocus: false,
+      onOpenAutoFocus: (event) => {
+        if (rootContext.isUsingKeyboard) contentRef?.focus();
+        event.preventDefault();
+      },
+      onCloseAutoFocus: (event) => event.preventDefault(),
+      onFocusOutside: composeEventHandlers(
+        local.onFocusOutside,
+        (event) => {
+          if (event.target !== subContext.trigger)
+            context.onOpenChange(false);
+        }
+      ),
+      onEscapeKeyDown: composeEventHandlers(
+        local.onEscapeKeyDown,
+        (event) => {
+          rootContext.onClose();
+          event.preventDefault();
+        }
+      ),
+      onKeyDown: composeEventHandlers(
+        local.onKeyDown,
+        (event) => {
+          const isKeyDownInside = event.currentTarget.contains(event.target);
+          const isCloseKey = SUB_CLOSE_KEYS[rootContext.dir].includes(
+            event.key
+          );
+          if (isKeyDownInside && isCloseKey) {
+            context.onOpenChange(false);
+            subContext.trigger?.focus();
+            event.preventDefault();
+          }
+        }
+      )
+    }
+  ))));
+}
+MenuSubContent.displayName = SUB_CONTENT_NAME;
+function getOpenState(open) {
+  return open ? "open" : "closed";
+}
+function isIndeterminate(checked) {
+  return checked === "indeterminate";
+}
+function getCheckedState(checked) {
+  return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
+}
+function focusFirst(candidates) {
+  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
+  for (const candidate of candidates) {
+    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
+    candidate.focus();
+    if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
+  }
+}
+function wrapArray(array, startIndex) {
+  return array.map(
+    (_, index) => array[(startIndex + index) % array.length]
+  );
+}
+function getNextMatch(values, search, currentMatch) {
+  const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
+  const normalizedSearch = isRepeated ? search[0] : search;
+  const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
+  let wrappedValues = wrapArray(values, Math.max(currentMatchIndex, 0));
+  const excludeCurrentMatch = normalizedSearch.length === 1;
+  if (excludeCurrentMatch)
+    wrappedValues = wrappedValues.filter((v) => v !== currentMatch);
+  const nextMatch = wrappedValues.find(
+    (value) => value.toLowerCase().startsWith(normalizedSearch.toLowerCase())
+  );
+  return nextMatch !== currentMatch ? nextMatch : void 0;
+}
+function isPointInPolygon(point, polygon) {
+  const { x, y } = point;
+  let inside = false;
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    const ii = polygon[i];
+    const jj = polygon[j];
+    const xi = ii.x;
+    const yi = ii.y;
+    const xj = jj.x;
+    const yj = jj.y;
+    const 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;
+  const cursorPos = { x: event.clientX, y: event.clientY };
+  return isPointInPolygon(cursorPos, area);
+}
+function whenMouse(handler) {
+  return (event) => event.pointerType === "mouse" ? handler(event) : void 0;
+}
+var Root = Menu;
+var Anchor = MenuAnchor;
+var PortalExport = MenuPortal;
+var Content = MenuContent;
+var Group = MenuGroup;
+var Label = MenuLabel;
+var Item = MenuItem;
+var CheckboxItem = MenuCheckboxItem;
+var RadioGroup = MenuRadioGroup;
+var RadioItem = MenuRadioItem;
+var ItemIndicator = MenuItemIndicator;
+var Separator = MenuSeparator;
+var Arrow = MenuArrow;
+var Sub = MenuSub;
+var SubTrigger = MenuSubTrigger;
+var SubContent = MenuSubContent;
+
+export { Anchor, Arrow, CheckboxItem, Content, Group, Item, ItemIndicator, Label, Menu, MenuAnchor, MenuArrow, MenuCheckboxItem, MenuContent, MenuGroup, MenuItem, MenuItemIndicator, MenuLabel, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, PortalExport as Portal, RadioGroup, RadioItem, Root, Separator, Sub, SubContent, SubTrigger, createMenuScope };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map