https://asktori.ai/assets/dropdown-menu-CavHflgj.js

1import { j as jsxRuntimeExports } from "./jsx-runtime-TULtkvNU.js";
2import { c as cn } from "./cn-QXBWQHlM.js";
3import { C as Circle } from "./circle-9empojJz.js";
4import { C as Check } from "./check-Ccg1Qj_f.js";
5import { C as ChevronRight } from "./chevron-right-DkUh7J1o.js";
6import { r as reactExports } from "./chunk-EPOLDU6W-CZGKYP5O.js";
7import { c as createContextScope, P as Presence, b as composeEventHandlers, u as useControllableState } from "./index-Du38QLBy.js";
8import { u as useComposedRefs, c as createSlot, b as composeRefs } from "./index-BY3iWFtl.js";
9import { P as Primitive, d as dispatchDiscreteCustomEvent } from "./index-Dkjh3IBy.js";
10import { c as createCollection, u as useDirection } from "./index-Cpxn6J7_.js";
11import { P as Portal$1, h as hideOthers, u as useFocusGuards, R as ReactRemoveScroll, F as FocusScope, D as DismissableLayer } from "./index-Dem3E75n.js";
12import { a as useCallbackRef, u as useId } from "./index-Df5UIE99.js";
13import { c as createPopperScope, R as Root2$1, A as Anchor, C as Content, a as Arrow } from "./index-ClARao6l.js";
14import { c as createRovingFocusGroupScope, I as Item, R as Root } from "./index-D_FTgCFl.js";
15var SELECTION_KEYS = ["Enter", " "];
16var FIRST_KEYS = ["ArrowDown", "PageUp", "Home"];
17var LAST_KEYS = ["ArrowUp", "PageDown", "End"];
18var FIRST_LAST_KEYS = [...FIRST_KEYS, ...LAST_KEYS];
19var SUB_OPEN_KEYS = {
20  ltr: [...SELECTION_KEYS, "ArrowRight"],
21  rtl: [...SELECTION_KEYS, "ArrowLeft"]
22};
23var SUB_CLOSE_KEYS = {
24  ltr: ["ArrowLeft"],
25  rtl: ["ArrowRight"]
26};
27var MENU_NAME = "Menu";
28var [Collection, useCollection, createCollectionScope] = createCollection(MENU_NAME);
29var [createMenuContext, createMenuScope] = createContextScope(MENU_NAME, [
30  createCollectionScope,
31  createPopperScope,
32  createRovingFocusGroupScope
33]);
34var usePopperScope = createPopperScope();
35var useRovingFocusGroupScope = createRovingFocusGroupScope();
36var [MenuProvider, useMenuContext] = createMenuContext(MENU_NAME);
37var [MenuRootProvider, useMenuRootContext] = createMenuContext(MENU_NAME);
38var Menu = (props) => {
39  const { __scopeMenu, open = false, children, dir, onOpenChange, modal = true } = props;
40  const popperScope = usePopperScope(__scopeMenu);
41  const [content, setContent] = reactExports.useState(null);
42  const isUsingKeyboardRef = reactExports.useRef(false);
43  const handleOpenChange = useCallbackRef(onOpenChange);
44  const direction = useDirection(dir);
45  reactExports.useEffect(() => {
46    const handleKeyDown = () => {
47      isUsingKeyboardRef.current = true;
48      document.addEventListener("pointerdown", handlePointer, { capture: true, once: true });
49      document.addEventListener("pointermove", handlePointer, { capture: true, once: true });
50    };
51    const handlePointer = () => isUsingKeyboardRef.current = false;
52    document.addEventListener("keydown", handleKeyDown, { capture: true });
53    return () => {
54      document.removeEventListener("keydown", handleKeyDown, { capture: true });
55      document.removeEventListener("pointerdown", handlePointer, { capture: true });
56      document.removeEventListener("pointermove", handlePointer, { capture: true });
57    };
58  }, []);
59  return /* @__PURE__ */ jsxRuntimeExports.jsx(Root2$1, { ...popperScope, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
60    MenuProvider,
61    {
62      scope: __scopeMenu,
63      open,
64      onOpenChange: handleOpenChange,
65      content,
66      onContentChange: setContent,
67      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
68        MenuRootProvider,
69        {
70          scope: __scopeMenu,
71          onClose: reactExports.useCallback(() => handleOpenChange(false), [handleOpenChange]),
72          isUsingKeyboardRef,
73          dir: direction,
74          modal,
75          children
76        }
77      )
78    }
79  ) });
80};
81Menu.displayName = MENU_NAME;
82var ANCHOR_NAME = "MenuAnchor";
83var MenuAnchor = reactExports.forwardRef(
84  (props, forwardedRef) => {
85    const { __scopeMenu, ...anchorProps } = props;
86    const popperScope = usePopperScope(__scopeMenu);
87    return /* @__PURE__ */ jsxRuntimeExports.jsx(Anchor, { ...popperScope, ...anchorProps, ref: forwardedRef });
88  }
89);
90MenuAnchor.displayName = ANCHOR_NAME;
91var PORTAL_NAME$1 = "MenuPortal";
92var [PortalProvider, usePortalContext] = createMenuContext(PORTAL_NAME$1, {
93  forceMount: void 0
94});
95var MenuPortal = (props) => {
96  const { __scopeMenu, forceMount, children, container } = props;
97  const context = useMenuContext(PORTAL_NAME$1, __scopeMenu);
98  return /* @__PURE__ */ jsxRuntimeExports.jsx(PortalProvider, { scope: __scopeMenu, forceMount, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Portal$1, { asChild: true, container, children }) }) });
99};
100MenuPortal.displayName = PORTAL_NAME$1;
101var CONTENT_NAME$1 = "MenuContent";
102var [MenuContentProvider, useMenuContentContext] = createMenuContext(CONTENT_NAME$1);
103var MenuContent = reactExports.forwardRef(
104  (props, forwardedRef) => {
105    const portalContext = usePortalContext(CONTENT_NAME$1, props.__scopeMenu);
106    const { forceMount = portalContext.forceMount, ...contentProps } = props;
107    const context = useMenuContext(CONTENT_NAME$1, props.__scopeMenu);
108    const rootContext = useMenuRootContext(CONTENT_NAME$1, props.__scopeMenu);
109    return /* @__PURE__ */ jsxRuntimeExports.jsx(Collection.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Collection.Slot, { scope: props.__scopeMenu, children: rootContext.modal ? /* @__PURE__ */ jsxRuntimeExports.jsx(MenuRootContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsxRuntimeExports.jsx(MenuRootContentNonModal, { ...contentProps, ref: forwardedRef }) }) }) });
110  }
111);
112var MenuRootContentModal = reactExports.forwardRef(
113  (props, forwardedRef) => {
114    const context = useMenuContext(CONTENT_NAME$1, props.__scopeMenu);
115    const ref = reactExports.useRef(null);
116    const composedRefs = useComposedRefs(forwardedRef, ref);
117    reactExports.useEffect(() => {
118      const content = ref.current;
119      if (content) return hideOthers(content);
120    }, []);
121    return /* @__PURE__ */ jsxRuntimeExports.jsx(
122      MenuContentImpl,
123      {
124        ...props,
125        ref: composedRefs,
126        trapFocus: context.open,
127        disableOutsidePointerEvents: context.open,
128        disableOutsideScroll: true,
129        onFocusOutside: composeEventHandlers(
130          props.onFocusOutside,
131          (event) => event.preventDefault(),
132          { checkForDefaultPrevented: false }
133        ),
134        onDismiss: () => context.onOpenChange(false)
135      }
136    );
137  }
138);
139var MenuRootContentNonModal = reactExports.forwardRef((props, forwardedRef) => {
140  const context = useMenuContext(CONTENT_NAME$1, props.__scopeMenu);
141  return /* @__PURE__ */ jsxRuntimeExports.jsx(
142    MenuContentImpl,
143    {
144      ...props,
145      ref: forwardedRef,
146      trapFocus: false,
147      disableOutsidePointerEvents: false,
148      disableOutsideScroll: false,
149      onDismiss: () => context.onOpenChange(false)
150    }
151  );
152});
153var Slot = createSlot("MenuContent.ScrollLock");
154var MenuContentImpl = reactExports.forwardRef(
155  (props, forwardedRef) => {
156    const {
157      __scopeMenu,
158      loop = false,
159      trapFocus,
160      onOpenAutoFocus,
161      onCloseAutoFocus,
162      disableOutsidePointerEvents,
163      onEntryFocus,
164      onEscapeKeyDown,
165      onPointerDownOutside,
166      onFocusOutside,
167      onInteractOutside,
168      onDismiss,
169      disableOutsideScroll,
170      ...contentProps
171    } = props;
172    const context = useMenuContext(CONTENT_NAME$1, __scopeMenu);
173    const rootContext = useMenuRootContext(CONTENT_NAME$1, __scopeMenu);
174    const popperScope = usePopperScope(__scopeMenu);
175    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenu);
176    const getItems = useCollection(__scopeMenu);
177    const [currentItemId, setCurrentItemId] = reactExports.useState(null);
178    const contentRef = reactExports.useRef(null);
179    const composedRefs = useComposedRefs(forwardedRef, contentRef, context.onContentChange);
180    const timerRef = reactExports.useRef(0);
181    const searchRef = reactExports.useRef("");
182    const pointerGraceTimerRef = reactExports.useRef(0);
183    const pointerGraceIntentRef = reactExports.useRef(null);
184    const pointerDirRef = reactExports.useRef("right");
185    const lastPointerXRef = reactExports.useRef(0);
186    const ScrollLockWrapper = disableOutsideScroll ? ReactRemoveScroll : reactExports.Fragment;
187    const scrollLockWrapperProps = disableOutsideScroll ? { as: Slot, allowPinchZoom: true } : void 0;
188    const handleTypeaheadSearch = (key) => {
189      const search = searchRef.current + key;
190      const items = getItems().filter((item) => !item.disabled);
191      const currentItem = document.activeElement;
192      const currentMatch = items.find((item) => item.ref.current === currentItem)?.textValue;
193      const values = items.map((item) => item.textValue);
194      const nextMatch = getNextMatch(values, search, currentMatch);
195      const newItem = items.find((item) => item.textValue === nextMatch)?.ref.current;
196      (function updateSearch(value) {
197        searchRef.current = value;
198        window.clearTimeout(timerRef.current);
199        if (value !== "") timerRef.current = window.setTimeout(() => updateSearch(""), 1e3);
200      })(search);
201      if (newItem) {
202        setTimeout(() => newItem.focus());
203      }
204    };
205    reactExports.useEffect(() => {
206      return () => window.clearTimeout(timerRef.current);
207    }, []);
208    useFocusGuards();
209    const isPointerMovingToSubmenu = reactExports.useCallback((event) => {
210      const isMovingTowards = pointerDirRef.current === pointerGraceIntentRef.current?.side;
211      return isMovingTowards && isPointerInGraceArea(event, pointerGraceIntentRef.current?.area);
212    }, []);
213    return /* @__PURE__ */ jsxRuntimeExports.jsx(
214      MenuContentProvider,
215      {
216        scope: __scopeMenu,
217        searchRef,
218        onItemEnter: reactExports.useCallback(
219          (event) => {
220            if (isPointerMovingToSubmenu(event)) event.preventDefault();
221          },
222          [isPointerMovingToSubmenu]
223        ),
224        onItemLeave: reactExports.useCallback(
225          (event) => {
226            if (isPointerMovingToSubmenu(event)) return;
227            contentRef.current?.focus();
228            setCurrentItemId(null);
229          },
230          [isPointerMovingToSubmenu]
231        ),
232        onTriggerLeave: reactExports.useCallback(
233          (event) => {
234            if (isPointerMovingToSubmenu(event)) event.preventDefault();
235          },
236          [isPointerMovingToSubmenu]
237        ),
238        pointerGraceTimerRef,
239        onPointerGraceIntentChange: reactExports.useCallback((intent) => {
240          pointerGraceIntentRef.current = intent;
241        }, []),
242        children: /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollLockWrapper, { ...scrollLockWrapperProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
243          FocusScope,
244          {
245            asChild: true,
246            trapped: trapFocus,
247            onMountAutoFocus: composeEventHandlers(onOpenAutoFocus, (event) => {
248              event.preventDefault();
249              contentRef.current?.focus({ preventScroll: true });
250            }),
251            onUnmountAutoFocus: onCloseAutoFocus,
252            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
253              DismissableLayer,
254              {
255                asChild: true,
256                disableOutsidePointerEvents,
257                onEscapeKeyDown,
258                onPointerDownOutside,
259                onFocusOutside,
260                onInteractOutside,
261                onDismiss,
262                children: /* @__PURE__ */ jsxRuntimeExports.jsx(
263                  Root,
264                  {
265                    asChild: true,
266                    ...rovingFocusGroupScope,
267                    dir: rootContext.dir,
268                    orientation: "vertical",
269                    loop,
270                    currentTabStopId: currentItemId,
271                    onCurrentTabStopIdChange: setCurrentItemId,
272                    onEntryFocus: composeEventHandlers(onEntryFocus, (event) => {
273                      if (!rootContext.isUsingKeyboardRef.current) event.preventDefault();
274                    }),
275                    preventScrollOnEntryFocus: true,
276                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
277                      Content,
278                      {
279                        role: "menu",
280                        "aria-orientation": "vertical",
281                        "data-state": getOpenState(context.open),
282                        "data-radix-menu-content": "",
283                        dir: rootContext.dir,
284                        ...popperScope,
285                        ...contentProps,
286                        ref: composedRefs,
287                        style: { outline: "none", ...contentProps.style },
288                        onKeyDown: composeEventHandlers(contentProps.onKeyDown, (event) => {
289                          const target = event.target;
290                          const isKeyDownInside = target.closest("[data-radix-menu-content]") === event.currentTarget;
291                          const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
292                          const isCharacterKey = event.key.length === 1;
293                          if (isKeyDownInside) {
294                            if (event.key === "Tab") event.preventDefault();
295                            if (!isModifierKey && isCharacterKey) handleTypeaheadSearch(event.key);
296                          }
297                          const content = contentRef.current;
298                          if (event.target !== content) return;
299                          if (!FIRST_LAST_KEYS.includes(event.key)) return;
300                          event.preventDefault();
301                          const items = getItems().filter((item) => !item.disabled);
302                          const candidateNodes = items.map((item) => item.ref.current);
303                          if (LAST_KEYS.includes(event.key)) candidateNodes.reverse();
304                          focusFirst(candidateNodes);
305                        }),
306                        onBlur: composeEventHandlers(props.onBlur, (event) => {
307                          if (!event.currentTarget.contains(event.target)) {
308                            window.clearTimeout(timerRef.current);
309                            searchRef.current = "";
310                          }
311                        }),
312                        onPointerMove: composeEventHandlers(
313                          props.onPointerMove,
314                          whenMouse((event) => {
315                            const target = event.target;
316                            const pointerXHasChanged = lastPointerXRef.current !== event.clientX;
317                            if (event.currentTarget.contains(target) && pointerXHasChanged) {
318                              const newDir = event.clientX > lastPointerXRef.current ? "right" : "left";
319                              pointerDirRef.current = newDir;
320                              lastPointerXRef.current = event.clientX;
321                            }
322                          })
323                        )
324                      }
325                    )
326                  }
327                )
328              }
329            )
330          }
331        ) })
332      }
333    );
334  }
335);
336MenuContent.displayName = CONTENT_NAME$1;
337var GROUP_NAME$1 = "MenuGroup";
338var MenuGroup = reactExports.forwardRef(
339  (props, forwardedRef) => {
340    const { __scopeMenu, ...groupProps } = props;
341    return /* @__PURE__ */ jsxRuntimeExports.jsx(Primitive.div, { role: "group", ...groupProps, ref: forwardedRef });
342  }
343);
344MenuGroup.displayName = GROUP_NAME$1;
345var LABEL_NAME$1 = "MenuLabel";
346var MenuLabel = reactExports.forwardRef(
347  (props, forwardedRef) => {
348    const { __scopeMenu, ...labelProps } = props;
349    return /* @__PURE__ */ jsxRuntimeExports.jsx(Primitive.div, { ...labelProps, ref: forwardedRef });
350  }
351);
352MenuLabel.displayName = LABEL_NAME$1;
353var ITEM_NAME$1 = "MenuItem";
354var ITEM_SELECT = "menu.itemSelect";
355var MenuItem = reactExports.forwardRef(
356  (props, forwardedRef) => {
357    const { disabled = false, onSelect, ...itemProps } = props;
358    const ref = reactExports.useRef(null);
359    const rootContext = useMenuRootContext(ITEM_NAME$1, props.__scopeMenu);
360    const contentContext = useMenuContentContext(ITEM_NAME$1, props.__scopeMenu);
361    const composedRefs = useComposedRefs(forwardedRef, ref);
362    const isPointerDownRef = reactExports.useRef(false);
363    const handleSelect = () => {
364      const menuItem = ref.current;
365      if (!disabled && menuItem) {
366        const itemSelectEvent = new CustomEvent(ITEM_SELECT, { bubbles: true, cancelable: true });
367        menuItem.addEventListener(ITEM_SELECT, (event) => onSelect?.(event), { once: true });
368        dispatchDiscreteCustomEvent(menuItem, itemSelectEvent);
369        if (itemSelectEvent.defaultPrevented) {
370          isPointerDownRef.current = false;
371        } else {
372          rootContext.onClose();
373        }
374      }
375    };
376    return /* @__PURE__ */ jsxRuntimeExports.jsx(
377      MenuItemImpl,
378      {
379        ...itemProps,
380        ref: composedRefs,
381        disabled,
382        onClick: composeEventHandlers(props.onClick, handleSelect),
383        onPointerDown: (event) => {
384          props.onPointerDown?.(event);
385          isPointerDownRef.current = true;
386        },
387        onPointerUp: composeEventHandlers(props.onPointerUp, (event) => {
388          if (!isPointerDownRef.current) event.currentTarget?.click();
389        }),
390        onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
391          const isTypingAhead = contentContext.searchRef.current !== "";
392          if (disabled || isTypingAhead && event.key === " ") return;
393          if (SELECTION_KEYS.includes(event.key)) {
394            event.currentTarget.click();
395            event.preventDefault();
396          }
397        })
398      }
399    );
400  }
401);
402MenuItem.displayName = ITEM_NAME$1;
403var MenuItemImpl = reactExports.forwardRef(
404  (props, forwardedRef) => {
405    const { __scopeMenu, disabled = false, textValue, ...itemProps } = props;
406    const contentContext = useMenuContentContext(ITEM_NAME$1, __scopeMenu);
407    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenu);
408    const ref = reactExports.useRef(null);
409    const composedRefs = useComposedRefs(forwardedRef, ref);
410    const [isFocused, setIsFocused] = reactExports.useState(false);
411    const [textContent, setTextContent] = reactExports.useState("");
412    reactExports.useEffect(() => {
413      const menuItem = ref.current;
414      if (menuItem) {
415        setTextContent((menuItem.textContent ?? "").trim());
416      }
417    }, [itemProps.children]);
418    return /* @__PURE__ */ jsxRuntimeExports.jsx(
419      Collection.ItemSlot,
420      {
421        scope: __scopeMenu,
422        disabled,
423        textValue: textValue ?? textContent,
424        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Item, { asChild: true, ...rovingFocusGroupScope, focusable: !disabled, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
425          Primitive.div,
426          {
427            role: "menuitem",
428            "data-highlighted": isFocused ? "" : void 0,
429            "aria-disabled": disabled || void 0,
430            "data-disabled": disabled ? "" : void 0,
431            ...itemProps,
432            ref: composedRefs,
433            onPointerMove: composeEventHandlers(
434              props.onPointerMove,
435              whenMouse((event) => {
436                if (disabled) {
437                  contentContext.onItemLeave(event);
438                } else {
439                  contentContext.onItemEnter(event);
440                  if (!event.defaultPrevented) {
441                    const item = event.currentTarget;
442                    item.focus({ preventScroll: true });
443                  }
444                }
445              })
446            ),
447            onPointerLeave: composeEventHandlers(
448              props.onPointerLeave,
449              whenMouse((event) => contentContext.onItemLeave(event))
450            ),
451            onFocus: composeEventHandlers(props.onFocus, () => setIsFocused(true)),
452            onBlur: composeEventHandlers(props.onBlur, () => setIsFocused(false))
453          }
454        ) })
455      }
456    );
457  }
458);
459var CHECKBOX_ITEM_NAME$1 = "MenuCheckboxItem";
460var MenuCheckboxItem = reactExports.forwardRef(
461  (props, forwardedRef) => {
462    const { checked = false, onCheckedChange, ...checkboxItemProps } = props;
463    return /* @__PURE__ */ jsxRuntimeExports.jsx(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
464      MenuItem,
465      {
466        role: "menuitemcheckbox",
467        "aria-checked": isIndeterminate(checked) ? "mixed" : checked,
468        ...checkboxItemProps,
469        ref: forwardedRef,
470        "data-state": getCheckedState(checked),
471        onSelect: composeEventHandlers(
472          checkboxItemProps.onSelect,
473          () => onCheckedChange?.(isIndeterminate(checked) ? true : !checked),
474          { checkForDefaultPrevented: false }
475        )
476      }
477    ) });
478  }
479);
480MenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME$1;
481var RADIO_GROUP_NAME$1 = "MenuRadioGroup";
482var [RadioGroupProvider, useRadioGroupContext] = createMenuContext(
483  RADIO_GROUP_NAME$1,
484  { value: void 0, onValueChange: () => {
485  } }
486);
487var MenuRadioGroup = reactExports.forwardRef(
488  (props, forwardedRef) => {
489    const { value, onValueChange, ...groupProps } = props;
490    const handleValueChange = useCallbackRef(onValueChange);
491    return /* @__PURE__ */ jsxRuntimeExports.jsx(RadioGroupProvider, { scope: props.__scopeMenu, value, onValueChange: handleValueChange, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MenuGroup, { ...groupProps, ref: forwardedRef }) });
492  }
493);
494MenuRadioGroup.displayName = RADIO_GROUP_NAME$1;
495var RADIO_ITEM_NAME$1 = "MenuRadioItem";
496var MenuRadioItem = reactExports.forwardRef(
497  (props, forwardedRef) => {
498    const { value, ...radioItemProps } = props;
499    const context = useRadioGroupContext(RADIO_ITEM_NAME$1, props.__scopeMenu);
500    const checked = value === context.value;
501    return /* @__PURE__ */ jsxRuntimeExports.jsx(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
502      MenuItem,
503      {
504        role: "menuitemradio",
505        "aria-checked": checked,
506        ...radioItemProps,
507        ref: forwardedRef,
508        "data-state": getCheckedState(checked),
509        onSelect: composeEventHandlers(
510          radioItemProps.onSelect,
511          () => context.onValueChange?.(value),
512          { checkForDefaultPrevented: false }
513        )
514      }
515    ) });
516  }
517);
518MenuRadioItem.displayName = RADIO_ITEM_NAME$1;
519var ITEM_INDICATOR_NAME = "MenuItemIndicator";
520var [ItemIndicatorProvider, useItemIndicatorContext] = createMenuContext(
521  ITEM_INDICATOR_NAME,
522  { checked: false }
523);
524var MenuItemIndicator = reactExports.forwardRef(
525  (props, forwardedRef) => {
526    const { __scopeMenu, forceMount, ...itemIndicatorProps } = props;
527    const indicatorContext = useItemIndicatorContext(ITEM_INDICATOR_NAME, __scopeMenu);
528    return /* @__PURE__ */ jsxRuntimeExports.jsx(
529      Presence,
530      {
531        present: forceMount || isIndeterminate(indicatorContext.checked) || indicatorContext.checked === true,
532        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
533          Primitive.span,
534          {
535            ...itemIndicatorProps,
536            ref: forwardedRef,
537            "data-state": getCheckedState(indicatorContext.checked)
538          }
539        )
540      }
541    );
542  }
543);
544MenuItemIndicator.displayName = ITEM_INDICATOR_NAME;
545var SEPARATOR_NAME$1 = "MenuSeparator";
546var MenuSeparator = reactExports.forwardRef(
547  (props, forwardedRef) => {
548    const { __scopeMenu, ...separatorProps } = props;
549    return /* @__PURE__ */ jsxRuntimeExports.jsx(
550      Primitive.div,
551      {
552        role: "separator",
553        "aria-orientation": "horizontal",
554        ...separatorProps,
555        ref: forwardedRef
556      }
557    );
558  }
559);
560MenuSeparator.displayName = SEPARATOR_NAME$1;
561var ARROW_NAME$1 = "MenuArrow";
562var MenuArrow = reactExports.forwardRef(
563  (props, forwardedRef) => {
564    const { __scopeMenu, ...arrowProps } = props;
565    const popperScope = usePopperScope(__scopeMenu);
566    return /* @__PURE__ */ jsxRuntimeExports.jsx(Arrow, { ...popperScope, ...arrowProps, ref: forwardedRef });
567  }
568);
569MenuArrow.displayName = ARROW_NAME$1;
570var SUB_NAME = "MenuSub";

571var [MenuSubProvider, useMenuSubContext] = createMenuContext(SUB_NAME);
572var MenuSub = (props) => {
573  const { __scopeMenu, children, open = false, onOpenChange } = props;
574  const parentMenuContext = useMenuContext(SUB_NAME, __scopeMenu);
575  const popperScope = usePopperScope(__scopeMenu);
576  const [trigger, setTrigger] = reactExports.useState(null);
577  const [content, setContent] = reactExports.useState(null);
578  const handleOpenChange = useCallbackRef(onOpenChange);
579  reactExports.useEffect(() => {
580    if (parentMenuContext.open === false) handleOpenChange(false);
581    return () => handleOpenChange(false);
582  }, [parentMenuContext.open, handleOpenChange]);
583  return /* @__PURE__ */ jsxRuntimeExports.jsx(Root2$1, { ...popperScope, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
584    MenuProvider,
585    {
586      scope: __scopeMenu,
587      open,
588      onOpenChange: handleOpenChange,
589      content,
590      onContentChange: setContent,
591      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
592        MenuSubProvider,
593        {
594          scope: __scopeMenu,
595          contentId: useId(),
596          triggerId: useId(),
597          trigger,
598          onTriggerChange: setTrigger,
599          children
600        }
601      )
602    }
603  ) });
604};
605MenuSub.displayName = SUB_NAME;
606var SUB_TRIGGER_NAME$1 = "MenuSubTrigger";
607var MenuSubTrigger = reactExports.forwardRef(
608  (props, forwardedRef) => {
609    const context = useMenuContext(SUB_TRIGGER_NAME$1, props.__scopeMenu);
610    const rootContext = useMenuRootContext(SUB_TRIGGER_NAME$1, props.__scopeMenu);
611    const subContext = useMenuSubContext(SUB_TRIGGER_NAME$1, props.__scopeMenu);
612    const contentContext = useMenuContentContext(SUB_TRIGGER_NAME$1, props.__scopeMenu);
613    const openTimerRef = reactExports.useRef(null);
614    const { pointerGraceTimerRef, onPointerGraceIntentChange } = contentContext;
615    const scope = { __scopeMenu: props.__scopeMenu };
616    const clearOpenTimer = reactExports.useCallback(() => {
617      if (openTimerRef.current) window.clearTimeout(openTimerRef.current);
618      openTimerRef.current = null;
619    }, []);
620    reactExports.useEffect(() => clearOpenTimer, [clearOpenTimer]);
621    reactExports.useEffect(() => {
622      const pointerGraceTimer = pointerGraceTimerRef.current;
623      return () => {
624        window.clearTimeout(pointerGraceTimer);
625        onPointerGraceIntentChange(null);
626      };
627    }, [pointerGraceTimerRef, onPointerGraceIntentChange]);
628    return /* @__PURE__ */ jsxRuntimeExports.jsx(MenuAnchor, { asChild: true, ...scope, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
629      MenuItemImpl,
630      {
631        id: subContext.triggerId,
632        "aria-haspopup": "menu",
633        "aria-expanded": context.open,
634        "aria-controls": subContext.contentId,
635        "data-state": getOpenState(context.open),
636        ...props,
637        ref: composeRefs(forwardedRef, subContext.onTriggerChange),
638        onClick: (event) => {
639          props.onClick?.(event);
640          if (props.disabled || event.defaultPrevented) return;
641          event.currentTarget.focus();
642          if (!context.open) context.onOpenChange(true);
643        },
644        onPointerMove: composeEventHandlers(
645          props.onPointerMove,
646          whenMouse((event) => {
647            contentContext.onItemEnter(event);
648            if (event.defaultPrevented) return;
649            if (!props.disabled && !context.open && !openTimerRef.current) {
650              contentContext.onPointerGraceIntentChange(null);
651              openTimerRef.current = window.setTimeout(() => {
652                context.onOpenChange(true);
653                clearOpenTimer();
654              }, 100);
655            }
656          })
657        ),
658        onPointerLeave: composeEventHandlers(
659          props.onPointerLeave,
660          whenMouse((event) => {
661            clearOpenTimer();
662            const contentRect = context.content?.getBoundingClientRect();
663            if (contentRect) {
664              const side = context.content?.dataset.side;
665              const rightSide = side === "right";
666              const bleed = rightSide ? -5 : 5;
667              const contentNearEdge = contentRect[rightSide ? "left" : "right"];
668              const contentFarEdge = contentRect[rightSide ? "right" : "left"];
669              contentContext.onPointerGraceIntentChange({
670                area: [
671                  // Apply a bleed on clientX to ensure that our exit point is

672                  // consistently within polygon bounds
673                  { x: event.clientX + bleed, y: event.clientY },
674                  { x: contentNearEdge, y: contentRect.top },
675                  { x: contentFarEdge, y: contentRect.top },
676                  { x: contentFarEdge, y: contentRect.bottom },
677                  { x: contentNearEdge, y: contentRect.bottom }
678                ],
679                side
680              });
681              window.clearTimeout(pointerGraceTimerRef.current);
682              pointerGraceTimerRef.current = window.setTimeout(
683                () => contentContext.onPointerGraceIntentChange(null),
684                300
685              );
686            } else {
687              contentContext.onTriggerLeave(event);
688              if (event.defaultPrevented) return;
689              contentContext.onPointerGraceIntentChange(null);
690            }
691          })
692        ),
693        onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
694          const isTypingAhead = contentContext.searchRef.current !== "";
695          if (props.disabled || isTypingAhead && event.key === " ") return;
696          if (SUB_OPEN_KEYS[rootContext.dir].includes(event.key)) {
697            context.onOpenChange(true);
698            context.content?.focus();
699            event.preventDefault();
700          }
701        })
702      }
703    ) });
704  }
705);
706MenuSubTrigger.displayName = SUB_TRIGGER_NAME$1;
707var SUB_CONTENT_NAME$1 = "MenuSubContent";
708var MenuSubContent = reactExports.forwardRef(
709  (props, forwardedRef) => {
710    const portalContext = usePortalContext(CONTENT_NAME$1, props.__scopeMenu);
711    const { forceMount = portalContext.forceMount, ...subContentProps } = props;
712    const context = useMenuContext(CONTENT_NAME$1, props.__scopeMenu);
713    const rootContext = useMenuRootContext(CONTENT_NAME$1, props.__scopeMenu);
714    const subContext = useMenuSubContext(SUB_CONTENT_NAME$1, props.__scopeMenu);
715    const ref = reactExports.useRef(null);
716    const composedRefs = useComposedRefs(forwardedRef, ref);
717    return /* @__PURE__ */ jsxRuntimeExports.jsx(Collection.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Collection.Slot, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
718      MenuContentImpl,
719      {
720        id: subContext.contentId,
721        "aria-labelledby": subContext.triggerId,
722        ...subContentProps,
723        ref: composedRefs,
724        align: "start",
725        side: rootContext.dir === "rtl" ? "left" : "right",
726        disableOutsidePointerEvents: false,
727        disableOutsideScroll: false,
728        trapFocus: false,
729        onOpenAutoFocus: (event) => {
730          if (rootContext.isUsingKeyboardRef.current) ref.current?.focus();
731          event.preventDefault();
732        },
733        onCloseAutoFocus: (event) => event.preventDefault(),
734        onFocusOutside: composeEventHandlers(props.onFocusOutside, (event) => {
735          if (event.target !== subContext.trigger) context.onOpenChange(false);
736        }),
737        onEscapeKeyDown: composeEventHandlers(props.onEscapeKeyDown, (event) => {
738          rootContext.onClose();
739          event.preventDefault();
740        }),
741        onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
742          const isKeyDownInside = event.currentTarget.contains(event.target);
743          const isCloseKey = SUB_CLOSE_KEYS[rootContext.dir].includes(event.key);
744          if (isKeyDownInside && isCloseKey) {
745            context.onOpenChange(false);
746            subContext.trigger?.focus();
747            event.preventDefault();
748          }
749        })
750      }
751    ) }) }) });
752  }
753);
754MenuSubContent.displayName = SUB_CONTENT_NAME$1;
755function getOpenState(open) {
756  return open ? "open" : "closed";
757}
758function isIndeterminate(checked) {
759  return checked === "indeterminate";
760}
761function getCheckedState(checked) {
762  return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
763}
764function focusFirst(candidates) {
765  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
766  for (const candidate of candidates) {
767    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
768    candidate.focus();
769    if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
770  }
771}
772function wrapArray(array, startIndex) {
773  return array.map((_, index) => array[(startIndex + index) % array.length]);
774}
775function getNextMatch(values, search, currentMatch) {
776  const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
777  const normalizedSearch = isRepeated ? search[0] : search;
778  const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
779  let wrappedValues = wrapArray(values, Math.max(currentMatchIndex, 0));
780  const excludeCurrentMatch = normalizedSearch.length === 1;
781  if (excludeCurrentMatch) wrappedValues = wrappedValues.filter((v) => v !== currentMatch);
782  const nextMatch = wrappedValues.find(
783    (value) => value.toLowerCase().startsWith(normalizedSearch.toLowerCase())
784  );
785  return nextMatch !== currentMatch ? nextMatch : void 0;
786}
787function isPointInPolygon(point, polygon) {
788  const { x, y } = point;
789  let inside = false;
790  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
791    const ii = polygon[i];
792    const jj = polygon[j];
793    const xi = ii.x;
794    const yi = ii.y;
795    const xj = jj.x;
796    const yj = jj.y;
797    const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
798    if (intersect) inside = !inside;
799  }
800  return inside;
801}
802function isPointerInGraceArea(event, area) {
803  if (!area) return false;
804  const cursorPos = { x: event.clientX, y: event.clientY };
805  return isPointInPolygon(cursorPos, area);
806}
807function whenMouse(handler) {
808  return (event) => event.pointerType === "mouse" ? handler(event) : void 0;
809}
810var Root3 = Menu;
811var Anchor2 = MenuAnchor;
812var Portal = MenuPortal;
813var Content2$1 = MenuContent;
814var Group = MenuGroup;
815var Label = MenuLabel;
816var Item2$1 = MenuItem;
817var CheckboxItem = MenuCheckboxItem;
818var RadioGroup = MenuRadioGroup;
819var RadioItem = MenuRadioItem;
820var ItemIndicator = MenuItemIndicator;
821var Separator = MenuSeparator;
822var Arrow2 = MenuArrow;
823var Sub = MenuSub;
824var SubTrigger = MenuSubTrigger;
825var SubContent = MenuSubContent;
826var DROPDOWN_MENU_NAME = "DropdownMenu";
827var [createDropdownMenuContext] = createContextScope(
828  DROPDOWN_MENU_NAME,
829  [createMenuScope]
830);
831var useMenuScope = createMenuScope();
832var [DropdownMenuProvider, useDropdownMenuContext] = createDropdownMenuContext(DROPDOWN_MENU_NAME);
833var DropdownMenu$1 = (props) => {
834  const {
835    __scopeDropdownMenu,
836    children,
837    dir,
838    open: openProp,
839    defaultOpen,
840    onOpenChange,
841    modal = true
842  } = props;
843  const menuScope = useMenuScope(__scopeDropdownMenu);
844  const triggerRef = reactExports.useRef(null);
845  const [open, setOpen] = useControllableState({
846    prop: openProp,
847    defaultProp: defaultOpen ?? false,
848    onChange: onOpenChange,
849    caller: DROPDOWN_MENU_NAME
850  });
851  return /* @__PURE__ */ jsxRuntimeExports.jsx(
852    DropdownMenuProvider,
853    {
854      scope: __scopeDropdownMenu,
855      triggerId: useId(),
856      triggerRef,
857      contentId: useId(),
858      open,
859      onOpenChange: setOpen,
860      onOpenToggle: reactExports.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
861      modal,
862      children: /* @__PURE__ */ jsxRuntimeExports.jsx(Root3, { ...menuScope, open, onOpenChange: setOpen, dir, modal, children })
863    }
864  );
865};
866DropdownMenu$1.displayName = DROPDOWN_MENU_NAME;
867var TRIGGER_NAME = "DropdownMenuTrigger";
868var DropdownMenuTrigger$1 = reactExports.forwardRef(
869  (props, forwardedRef) => {
870    const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
871    const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);
872    const menuScope = useMenuScope(__scopeDropdownMenu);
873    return /* @__PURE__ */ jsxRuntimeExports.jsx(Anchor2, { asChild: true, ...menuScope, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
874      Primitive.button,
875      {
876        type: "button",
877        id: context.triggerId,
878        "aria-haspopup": "menu",
879        "aria-expanded": context.open,
880        "aria-controls": context.open ? context.contentId : void 0,
881        "data-state": context.open ? "open" : "closed",
882        "data-disabled": disabled ? "" : void 0,
883        disabled,
884        ...triggerProps,
885        ref: composeRefs(forwardedRef, context.triggerRef),
886        onPointerDown: composeEventHandlers(props.onPointerDown, (event) => {
887          if (!disabled && event.button === 0 && event.ctrlKey === false) {
888            context.onOpenToggle();
889            if (!context.open) event.preventDefault();
890          }
891        }),
892        onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
893          if (disabled) return;
894          if (["Enter", " "].includes(event.key)) context.onOpenToggle();
895          if (event.key === "ArrowDown") context.onOpenChange(true);
896          if (["Enter", " ", "ArrowDown"].includes(event.key)) event.preventDefault();
897        })
898      }
899    ) });
900  }
901);
902DropdownMenuTrigger$1.displayName = TRIGGER_NAME;
903var PORTAL_NAME = "DropdownMenuPortal";
904var DropdownMenuPortal = (props) => {
905  const { __scopeDropdownMenu, ...portalProps } = props;
906  const menuScope = useMenuScope(__scopeDropdownMenu);
907  return /* @__PURE__ */ jsxRuntimeExports.jsx(Portal, { ...menuScope, ...portalProps });
908};
909DropdownMenuPortal.displayName = PORTAL_NAME;
910var CONTENT_NAME = "DropdownMenuContent";
911var DropdownMenuContent$1 = reactExports.forwardRef(
912  (props, forwardedRef) => {
913    const { __scopeDropdownMenu, ...contentProps } = props;
914    const context = useDropdownMenuContext(CONTENT_NAME, __scopeDropdownMenu);
915    const menuScope = useMenuScope(__scopeDropdownMenu);
916    const hasInteractedOutsideRef = reactExports.useRef(false);
917    return /* @__PURE__ */ jsxRuntimeExports.jsx(
918      Content2$1,
919      {
920        id: context.contentId,
921        "aria-labelledby": context.triggerId,
922        ...menuScope,
923        ...contentProps,
924        ref: forwardedRef,
925        onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
926          if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();
927          hasInteractedOutsideRef.current = false;