@jcsoftdev/ui 0.1.6 → 0.2.0

package/dist/primitives/menu/menu.js

@@ -0,0 +1,871 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { composeHandlers, useComposedRefs } from "../../utils/compose.js";
+import { Slot } from "../../utils/slot.js";
+import { useControllableState } from "../../utils/use-controllable-state.js";
+import { resolveTabOut } from "../focusable.js";
+import { hideOthers } from "../hide-others.js";
+import { blockOutsidePointerEvents } from "../pointer-events-lock.js";
+import * as PopperPrimitive from "../popper/popper.js";
+import { Portal } from "../portal.js";
+import { lockBodyScroll } from "../scroll-lock.js";
+import {
+  useDismissableLayer
+} from "../use-dismissable-layer.js";
+import { useFocusScope } from "../use-focus-scope.js";
+import { useLayer } from "../use-layer.js";
+import { usePresence } from "../use-presence.js";
+import { graceArea, isPointInPolygon } from "./grace.js";
+import { moveIndex } from "./navigation.js";
+import { nextTypeaheadIndex } from "./typeahead.js";
+const TYPEAHEAD_RESET_MS = 1e3;
+const SUB_OPEN_DELAY_MS = 100;
+const GRACE_MS = 300;
+const SUB_OPEN_KEYS = {
+  ltr: ["Enter", " ", "ArrowRight"],
+  rtl: ["Enter", " ", "ArrowLeft"]
+};
+const SUB_CLOSE_KEYS = { ltr: ["ArrowLeft"], rtl: ["ArrowRight"] };
+const FIRST_KEYS = ["ArrowDown", "PageUp", "Home"];
+const LAST_KEYS = ["ArrowUp", "PageDown", "End"];
+const SELECT_KEYS = ["Enter", " "];
+const stateOf = (open) => open ? "open" : "closed";
+const present = (value) => value ? "" : void 0;
+const MenuContext = createContext(null);
+function useMenuContext(part) {
+  const context = useContext(MenuContext);
+  if (!context) throw new Error(`<${part}> must be rendered inside <Menu.Root>`);
+  return context;
+}
+const ContentContext = createContext(null);
+function useContentContext(part) {
+  const context = useContext(ContentContext);
+  if (!context) throw new Error(`<${part}> must be rendered inside <Menu.Content>`);
+  return context;
+}
+const SubContext = createContext(null);
+const CONTENT_ATTR = "data-ui-menu-content";
+function enabledItems(content) {
+  return Array.from(
+    content.querySelectorAll("[data-ui-menu-item]:not([data-disabled])")
+  ).filter((item) => item.closest(`[${CONTENT_ATTR}]`) === content);
+}
+function textOf(item) {
+  return (item.getAttribute("data-text-value") ?? item.textContent ?? "").trim();
+}
+function focusItem(item) {
+  item?.focus({ preventScroll: true });
+}
+function focusEntry(content, intent) {
+  const items = enabledItems(content);
+  if (intent === "first" && items.length > 0) focusItem(items[0]);
+  else if (intent === "last" && items.length > 0) focusItem(items[items.length - 1]);
+  else content.focus({ preventScroll: true });
+}
+function isInsideContent(event) {
+  const target = event.target;
+  return target?.closest?.(`[${CONTENT_ATTR}]`) === event.currentTarget;
+}
+function whenMouse(handler) {
+  return (event) => {
+    if (event.pointerType === "mouse") handler(event);
+  };
+}
+function readDirection(node) {
+  return node && getComputedStyle(node).direction === "rtl" ? "rtl" : "ltr";
+}
+function Root({
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  modal = true,
+  dir,
+  children
+}) {
+  const [open, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  const triggerRef = useRef(null);
+  const anchorRef = useRef(null);
+  const focusIntent = useRef("none");
+  const contents = useRef(/* @__PURE__ */ new Set());
+  const interactedOutside = useRef(false);
+  const exitTab = useRef(null);
+  const contentId = useId();
+  const triggerId = useId();
+  const [hasTrigger, setHasTrigger] = useState(false);
+  const [hasCustomAnchor, setHasCustomAnchor] = useState(false);
+  const getDir = useCallback(
+    () => dir ?? readDirection(anchorRef.current ?? triggerRef.current),
+    [dir]
+  );
+  const value = useMemo(
+    () => ({
+      open,
+      modal,
+      setOpen,
+      getDir,
+      triggerRef,
+      anchorRef,
+      contentId,
+      triggerId,
+      hasTrigger,
+      setHasTrigger,
+      hasCustomAnchor,
+      setHasCustomAnchor,
+      focusIntent,
+      contents,
+      interactedOutside,
+      exitTab
+    }),
+    [open, modal, setOpen, getDir, contentId, triggerId, hasTrigger, hasCustomAnchor]
+  );
+  return /* @__PURE__ */ jsx(MenuContext.Provider, { value, children: /* @__PURE__ */ jsx(PopperPrimitive.Root, { children }) });
+}
+function Anchor({ ref, ...props }) {
+  const { setHasCustomAnchor, anchorRef } = useMenuContext("MenuAnchor");
+  const composed = useComposedRefs(ref, anchorRef);
+  useEffect(() => {
+    setHasCustomAnchor(true);
+    return () => setHasCustomAnchor(false);
+  }, [setHasCustomAnchor]);
+  return /* @__PURE__ */ jsx(PopperPrimitive.Anchor, { ...props, ref: composed });
+}
+function Trigger({
+  asChild,
+  disabled = false,
+  onPointerDown,
+  onKeyDown,
+  ref,
+  ...props
+}) {
+  const context = useMenuContext("MenuTrigger");
+  const { setHasTrigger } = context;
+  useEffect(() => {
+    setHasTrigger(true);
+    return () => setHasTrigger(false);
+  }, [setHasTrigger]);
+  const composed = useComposedRefs(
+    ref,
+    context.triggerRef
+  );
+  const Comp = asChild ? Slot : "button";
+  const trigger = /* @__PURE__ */ jsx(
+    Comp,
+    {
+      type: asChild ? void 0 : "button",
+      id: context.triggerId,
+      "aria-haspopup": "menu",
+      "aria-expanded": context.open,
+      "aria-controls": context.open ? context.contentId : void 0,
+      "data-state": stateOf(context.open),
+      "data-disabled": present(disabled),
+      disabled,
+      ...props,
+      ref: composed,
+      onPointerDown: composeHandlers(
+        onPointerDown,
+        (event) => {
+          if (disabled || event.button !== 0 || event.ctrlKey) return;
+          context.focusIntent.current = "none";
+          context.setOpen(!context.open);
+          if (!context.open) event.preventDefault();
+        }
+      ),
+      onKeyDown: composeHandlers(onKeyDown, (event) => {
+        if (disabled) return;
+        if (event.key === "Enter" || event.key === " ") {
+          context.focusIntent.current = "first";
+          context.setOpen(!context.open);
+        } else if (event.key === "ArrowDown") {
+          context.focusIntent.current = "first";
+          context.setOpen(true);
+        } else if (event.key === "ArrowUp") {
+          context.focusIntent.current = "last";
+          context.setOpen(true);
+        } else {
+          return;
+        }
+        event.preventDefault();
+      })
+    }
+  );
+  return context.hasCustomAnchor ? trigger : /* @__PURE__ */ jsx(PopperPrimitive.Anchor, { asChild: true, children: trigger });
+}
+const Arrow = PopperPrimitive.Arrow;
+function ContentImpl({
+  nodeRef,
+  listening,
+  engaged,
+  trapped,
+  onMountAutoFocus,
+  onUnmountAutoFocus,
+  onEscapeKeyDown,
+  onPointerDownOutside,
+  onFocusOutside,
+  onInteractOutside,
+  onDismiss,
+  isSub,
+  onPointerDownCapture,
+  onFocusCapture,
+  onBlurCapture,
+  onKeyDown,
+  onPointerMove,
+  style,
+  ref,
+  ...props
+}) {
+  const root = useMenuContext("MenuContent");
+  const isTop = useLayer(listening);
+  const focusInTree = useRef(() => false);
+  const searchRef = useRef("");
+  const searchTimer = useRef(void 0);
+  const graceIntent = useRef(null);
+  const graceTimer = useRef(void 0);
+  const pointerDir = useRef("right");
+  const lastPointerX = useRef(0);
+  useEffect(() => {
+    const node = nodeRef.current;
+    if (!engaged || !node) return;
+    root.contents.current.add(node);
+    return () => {
+      root.contents.current.delete(node);
+    };
+  }, [engaged, nodeRef, root.contents]);
+  useLayoutEffect(() => {
+    const node = nodeRef.current;
+    if (node) node.setAttribute("dir", root.getDir());
+  });
+  useEffect(
+    () => () => {
+      window.clearTimeout(searchTimer.current);
+      window.clearTimeout(graceTimer.current);
+    },
+    []
+  );
+  useFocusScope({
+    ref: nodeRef,
+    active: engaged,
+    trapped,
+    isTop,
+    allowFocus: () => focusInTree.current(),
+    onMountAutoFocus,
+    onUnmountAutoFocus
+  });
+  const layerProps = useDismissableLayer({
+    ref: nodeRef,
+    active: listening,
+    isTop,
+    onEscapeKeyDown,
+    onPointerDownOutside,
+    onFocusOutside,
+    onInteractOutside,
+    onDismiss
+  });
+  focusInTree.current = layerProps.isFocusInTree;
+  const isMovingToSubmenu = useCallback((event) => {
+    const intent = graceIntent.current;
+    if (!intent || pointerDir.current !== intent.side) return false;
+    return isPointInPolygon({ x: event.clientX, y: event.clientY }, intent.area);
+  }, []);
+  const contentContext = useMemo(
+    () => ({
+      searchRef,
+      focusContent: () => nodeRef.current?.focus({ preventScroll: true }),
+      onItemEnter: (event) => {
+        if (isMovingToSubmenu(event)) event.preventDefault();
+      },
+      onItemLeave: (event) => {
+        if (isMovingToSubmenu(event)) return;
+        nodeRef.current?.focus({ preventScroll: true });
+      },
+      graceIntent,
+      isMovingToSubmenu
+    }),
+    [nodeRef, isMovingToSubmenu]
+  );
+  const typeahead = (content, key) => {
+    const search = searchRef.current + key;
+    searchRef.current = search;
+    window.clearTimeout(searchTimer.current);
+    searchTimer.current = window.setTimeout(() => {
+      searchRef.current = "";
+    }, TYPEAHEAD_RESET_MS);
+    const items = enabledItems(content);
+    const index = nextTypeaheadIndex(
+      items.map(textOf),
+      search,
+      items.indexOf(document.activeElement)
+    );
+    if (index >= 0) focusItem(items[index]);
+  };
+  const handleKeyDown = (event) => {
+    const content = nodeRef.current;
+    if (!content || !isInsideContent(event)) return;
+    const target = event.target;
+    if (event.key === "Tab") {
+      event.preventDefault();
+      root.interactedOutside.current = true;
+      root.exitTab.current = event.shiftKey ? "backward" : "forward";
+      root.setOpen(false);
+      return;
+    }
+    const onContent = target === content;
+    const onItem = target.closest("[data-ui-menu-item]") === target;
+    const modifier = event.ctrlKey || event.altKey || event.metaKey;
+    if ((onContent || onItem) && !modifier && !event.shiftKey) {
+      let move;
+      if (FIRST_KEYS.includes(event.key))
+        move = event.key === "ArrowDown" && !onContent ? "next" : "first";
+      else if (LAST_KEYS.includes(event.key))
+        move = event.key === "ArrowUp" && !onContent ? "prev" : "last";
+      if (move) {
+        event.preventDefault();
+        const items = enabledItems(content);
+        const index = moveIndex(items.length, items.indexOf(target), move);
+        focusItem(items[index]);
+        return;
+      }
+    }
+    const typing = target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable;
+    if (!modifier && !typing && event.key.length === 1) {
+      if (event.key === " " && searchRef.current !== "") event.preventDefault();
+      if (event.key !== " " || searchRef.current !== "") typeahead(content, event.key);
+    }
+  };
+  return /* @__PURE__ */ jsx(ContentContext.Provider, { value: contentContext, children: /* @__PURE__ */ jsx(
+    PopperPrimitive.Content,
+    {
+      role: "menu",
+      "aria-orientation": "vertical",
+      "data-ui-menu-content": "",
+      "data-state": stateOf(listening),
+      tabIndex: -1,
+      ...props,
+      ref: ref ?? nodeRef,
+      style: { outline: "none", ...root.modal ? { pointerEvents: "auto" } : null, ...style },
+      onPointerDownCapture: composeHandlers(
+        onPointerDownCapture,
+        layerProps.onPointerDownCapture
+      ),
+      onFocusCapture: composeHandlers(onFocusCapture, layerProps.onFocusCapture),
+      onBlurCapture: composeHandlers(onBlurCapture, layerProps.onBlurCapture),
+      onKeyDown: (event) => {
+        const cancelledBefore = event.defaultPrevented;
+        onKeyDown?.(event);
+        if (event.defaultPrevented && !cancelledBefore) return;
+        handleKeyDown(event);
+      },
+      onPointerMove: composeHandlers(
+        onPointerMove,
+        whenMouse((event) => {
+          if (!isInsideContent(event)) return;
+          if (lastPointerX.current !== event.clientX) {
+            pointerDir.current = event.clientX > lastPointerX.current ? "right" : "left";
+            lastPointerX.current = event.clientX;
+          }
+        })
+      )
+    }
+  ) });
+}
+function Content({ forceMount, ref, ...props }) {
+  const root = useMenuContext("MenuContent");
+  const nodeRef = useRef(null);
+  const composed = useComposedRefs(ref, nodeRef);
+  const mounted = usePresence(forceMount || root.open, nodeRef);
+  if (!mounted) return null;
+  return /* @__PURE__ */ jsx(RootContent, { ...props, ref: composed, nodeRef, engaged: root.open || !forceMount });
+}
+function RootContent({
+  nodeRef,
+  engaged,
+  onOpenAutoFocus,
+  onCloseAutoFocus,
+  onEscapeKeyDown,
+  onPointerDownOutside,
+  onFocusOutside,
+  onInteractOutside,
+  ...props
+}) {
+  const root = useMenuContext("MenuContent");
+  const { open, modal, setOpen, triggerRef, interactedOutside } = root;
+  const listening = open && engaged;
+  useEffect(() => {
+    if (listening) interactedOutside.current = false;
+  }, [listening, interactedOutside]);
+  useEffect(() => {
+    if (!listening || !modal) return;
+    const unlock = lockBodyScroll();
+    const show = hideOthers([nodeRef.current]);
+    const unblock = blockOutsidePointerEvents();
+    return () => {
+      unblock();
+      show();
+      unlock();
+    };
+  }, [listening, modal, nodeRef]);
+  return /* @__PURE__ */ jsx(
+    ContentImpl,
+    {
+      id: root.contentId,
+      "aria-labelledby": root.hasTrigger ? root.triggerId : void 0,
+      ...props,
+      nodeRef,
+      listening,
+      engaged,
+      trapped: modal && open,
+      isSub: false,
+      onMountAutoFocus: (event) => {
+        onOpenAutoFocus?.(event);
+        if (event.defaultPrevented) return;
+        event.preventDefault();
+        const intent = root.focusIntent.current;
+        root.focusIntent.current = "none";
+        if (nodeRef.current) focusEntry(nodeRef.current, intent);
+      },
+      onUnmountAutoFocus: (event) => {
+        onCloseAutoFocus?.(event);
+        if (event.defaultPrevented) return;
+        event.preventDefault();
+        const trigger = triggerRef.current;
+        const tabbed = root.exitTab.current;
+        root.exitTab.current = null;
+        if (tabbed && trigger && document.contains(trigger)) {
+          const next = resolveTabOut(trigger, nodeRef.current, tabbed === "backward");
+          (next ?? trigger).focus({ preventScroll: true });
+          return;
+        }
+        if (interactedOutside.current) return;
+        const active = document.activeElement;
+        const free = !active || active === document.body || active === document.documentElement || Boolean(nodeRef.current?.contains(active)) || // A surrounding dialog's focus scope grabs focus when the menu node is removed.
+        Boolean(trigger && active.contains(trigger));
+        if (trigger && document.contains(trigger) && free) trigger.focus({ preventScroll: true });
+      },
+      onEscapeKeyDown,
+      onPointerDownOutside: (event) => {
+        onPointerDownOutside?.(event);
+        const original = event.detail.originalEvent;
+        const contextClick = original.button === 2 || original.button === 0 && original.ctrlKey;
+        if (!modal || contextClick) interactedOutside.current = true;
+      },
+      onFocusOutside: (event) => {
+        onFocusOutside?.(event);
+        event.preventDefault();
+      },
+      onInteractOutside: (event) => {
+        onInteractOutside?.(event);
+        const target = event.detail.originalEvent.target;
+        if (target && triggerRef.current?.contains(target)) event.preventDefault();
+      },
+      onDismiss: () => setOpen(false)
+    }
+  );
+}
+function ItemImpl({
+  asChild,
+  disabled = false,
+  textValue,
+  onPointerMove,
+  onPointerLeave,
+  onFocus,
+  onBlur,
+  ...props
+}) {
+  const content = useContentContext("MenuItem");
+  const [focused, setFocused] = useState(false);
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      role: "menuitem",
+      tabIndex: -1,
+      "data-ui-menu-item": "",
+      "data-text-value": textValue,
+      "aria-disabled": disabled || void 0,
+      "data-disabled": present(disabled),
+      "data-highlighted": present(focused),
+      ...props,
+      onPointerMove: composeHandlers(
+        onPointerMove,
+        whenMouse((event) => {
+          if (disabled) {
+            content.onItemLeave(event);
+            return;
+          }
+          content.onItemEnter(event);
+          if (!event.defaultPrevented) focusItem(event.currentTarget);
+        })
+      ),
+      onPointerLeave: composeHandlers(onPointerLeave, whenMouse(content.onItemLeave)),
+      onFocus: composeHandlers(onFocus, () => setFocused(true)),
+      onBlur: composeHandlers(onBlur, () => setFocused(false))
+    }
+  );
+}
+function Item({
+  disabled = false,
+  onSelect,
+  onClick,
+  onPointerDown,
+  onPointerUp,
+  onKeyDown,
+  ...props
+}) {
+  const root = useMenuContext("MenuItem");
+  const content = useContentContext("MenuItem");
+  const pointerDown = useRef(false);
+  const select = () => {
+    if (disabled) return;
+    const event = new Event("ui.menu.itemSelect", { bubbles: true, cancelable: true });
+    onSelect?.(event);
+    if (event.defaultPrevented) pointerDown.current = false;
+    else root.setOpen(false);
+  };
+  return /* @__PURE__ */ jsx(
+    ItemImpl,
+    {
+      ...props,
+      disabled,
+      onClick: composeHandlers(onClick, select),
+      onPointerDown: composeHandlers(onPointerDown, () => {
+        pointerDown.current = true;
+      }),
+      onPointerUp: composeHandlers(onPointerUp, (event) => {
+        if (!pointerDown.current) event.currentTarget.click();
+      }),
+      onKeyDown: composeHandlers(onKeyDown, (event) => {
+        if (event.target !== event.currentTarget) return;
+        const typing = content.searchRef.current !== "";
+        if (disabled || typing && event.key === " ") return;
+        if (SELECT_KEYS.includes(event.key)) {
+          event.currentTarget.click();
+          event.preventDefault();
+        }
+      })
+    }
+  );
+}
+const ItemIndicatorContext = createContext(false);
+const checkedState = (checked) => checked === "indeterminate" ? "indeterminate" : checked ? "checked" : "unchecked";
+function CheckboxItem({
+  checked = false,
+  onCheckedChange,
+  onSelect,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(ItemIndicatorContext.Provider, { value: checked, children: /* @__PURE__ */ jsx(
+    Item,
+    {
+      role: "menuitemcheckbox",
+      "aria-checked": checked === "indeterminate" ? "mixed" : checked,
+      "data-state": checkedState(checked),
+      ...props,
+      onSelect: (event) => {
+        onSelect?.(event);
+        onCheckedChange?.(checked === "indeterminate" ? true : !checked);
+      }
+    }
+  ) });
+}
+const RadioGroupContext = createContext({
+  value: void 0,
+  onValueChange: void 0
+});
+function RadioGroup({ value, onValueChange, ...props }) {
+  const context = useMemo(() => ({ value, onValueChange }), [value, onValueChange]);
+  return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx("div", { role: "group", ...props }) });
+}
+function RadioItem({ value, onSelect, ...props }) {
+  const group = useContext(RadioGroupContext);
+  const checked = group.value === value;
+  return /* @__PURE__ */ jsx(ItemIndicatorContext.Provider, { value: checked, children: /* @__PURE__ */ jsx(
+    Item,
+    {
+      role: "menuitemradio",
+      "aria-checked": checked,
+      "data-state": checkedState(checked),
+      ...props,
+      onSelect: (event) => {
+        onSelect?.(event);
+        group.onValueChange?.(value);
+      }
+    }
+  ) });
+}
+function ItemIndicator({ asChild, forceMount, ...props }) {
+  const checked = useContext(ItemIndicatorContext);
+  if (!forceMount && checked === false) return null;
+  const Comp = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(Comp, { "data-state": checkedState(checked), ...props });
+}
+function Label(props) {
+  return /* @__PURE__ */ jsx("div", { ...props });
+}
+function Group(props) {
+  return /* @__PURE__ */ jsx("div", { role: "group", ...props });
+}
+function Separator(props) {
+  return /* @__PURE__ */ jsx("div", { role: "separator", "aria-orientation": "horizontal", ...props });
+}
+function Sub({ open: openProp, defaultOpen = false, onOpenChange, children }) {
+  const root = useMenuContext("MenuSub");
+  const [open, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  const triggerRef = useRef(null);
+  const contentRef = useRef(null);
+  const focusIntent = useRef("none");
+  const contentId = useId();
+  const triggerId = useId();
+  useEffect(() => {
+    if (!root.open) setOpen(false);
+  }, [root.open, setOpen]);
+  const value = useMemo(
+    () => ({ open, setOpen, triggerRef, contentRef, contentId, triggerId, focusIntent }),
+    [open, setOpen, contentId, triggerId]
+  );
+  return /* @__PURE__ */ jsx(SubContext.Provider, { value, children: /* @__PURE__ */ jsx(PopperPrimitive.Root, { children }) });
+}
+function useSubContext(part) {
+  const context = useContext(SubContext);
+  if (!context) throw new Error(`<${part}> must be rendered inside <Menu.Sub>`);
+  return context;
+}
+function SubTrigger({
+  disabled = false,
+  onClick,
+  onKeyDown,
+  onPointerMove,
+  onPointerLeave,
+  ref,
+  ...props
+}) {
+  const root = useMenuContext("MenuSubTrigger");
+  const sub = useSubContext("MenuSubTrigger");
+  const content = useContentContext("MenuSubTrigger");
+  const composed = useComposedRefs(
+    ref,
+    sub.triggerRef
+  );
+  const openTimer = useRef(void 0);
+  const graceTimer = useRef(void 0);
+  useEffect(
+    () => () => {
+      window.clearTimeout(openTimer.current);
+      window.clearTimeout(graceTimer.current);
+    },
+    []
+  );
+  const clearOpenTimer = () => {
+    window.clearTimeout(openTimer.current);
+    openTimer.current = void 0;
+  };
+  return /* @__PURE__ */ jsx(PopperPrimitive.Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
+    ItemImpl,
+    {
+      id: sub.triggerId,
+      "aria-haspopup": "menu",
+      "aria-expanded": sub.open,
+      "aria-controls": sub.open ? sub.contentId : void 0,
+      "data-state": stateOf(sub.open),
+      ...props,
+      ref: composed,
+      disabled,
+      onClick: composeHandlers(onClick, (event) => {
+        if (disabled) return;
+        event.currentTarget.focus();
+        sub.focusIntent.current = "none";
+        if (!sub.open) sub.setOpen(true);
+      }),
+      onPointerMove: composeHandlers(
+        onPointerMove,
+        whenMouse((event) => {
+          if (disabled) return;
+          content.onItemEnter(event);
+          if (event.defaultPrevented) return;
+          if (sub.open || openTimer.current !== void 0) return;
+          content.graceIntent.current = null;
+          openTimer.current = window.setTimeout(() => {
+            sub.focusIntent.current = "none";
+            sub.setOpen(true);
+            clearOpenTimer();
+          }, SUB_OPEN_DELAY_MS);
+        })
+      ),
+      onPointerLeave: composeHandlers(
+        onPointerLeave,
+        whenMouse((event) => {
+          clearOpenTimer();
+          const rect = sub.contentRef.current?.getBoundingClientRect();
+          if (!rect) {
+            if (content.isMovingToSubmenu(event)) return;
+            content.graceIntent.current = null;
+            return;
+          }
+          const side = sub.contentRef.current?.getAttribute("data-side") === "left" ? "left" : "right";
+          content.graceIntent.current = {
+            area: graceArea({ x: event.clientX, y: event.clientY }, side, rect),
+            side
+          };
+          window.clearTimeout(graceTimer.current);
+          graceTimer.current = window.setTimeout(() => {
+            content.graceIntent.current = null;
+          }, GRACE_MS);
+        })
+      ),
+      onKeyDown: composeHandlers(onKeyDown, (event) => {
+        if (event.target !== event.currentTarget) return;
+        const typing = content.searchRef.current !== "";
+        if (disabled || typing && event.key === " ") return;
+        if (SUB_OPEN_KEYS[root.getDir()].includes(event.key)) {
+          sub.focusIntent.current = "first";
+          sub.setOpen(true);
+          event.preventDefault();
+        }
+      })
+    }
+  ) });
+}
+function SubContent({ forceMount, ref, ...props }) {
+  const root = useMenuContext("MenuSubContent");
+  const sub = useSubContext("MenuSubContent");
+  const nodeRef = useRef(null);
+  const composed = useComposedRefs(
+    ref,
+    nodeRef,
+    sub.contentRef
+  );
+  const mounted = usePresence(forceMount || sub.open && root.open, nodeRef);
+  if (!mounted) return null;
+  return /* @__PURE__ */ jsx(
+    SubContentImpl,
+    {
+      ...props,
+      ref: composed,
+      nodeRef,
+      engaged: sub.open && root.open || !forceMount
+    }
+  );
+}
+function SubContentImpl({
+  nodeRef,
+  engaged,
+  onOpenAutoFocus,
+  onEscapeKeyDown,
+  onPointerDownOutside,
+  onFocusOutside,
+  onKeyDown,
+  onPointerMove,
+  side,
+  align = "start",
+  ...props
+}) {
+  const root = useMenuContext("MenuSubContent");
+  const sub = useSubContext("MenuSubContent");
+  const parent = useContentContext("MenuSubContent");
+  const listening = sub.open && root.open && engaged;
+  const dir = root.getDir();
+  const insideMenu = (target) => target !== null && Array.from(root.contents.current).some((node) => node.contains(target));
+  return /* @__PURE__ */ jsx(
+    ContentImpl,
+    {
+      id: sub.contentId,
+      "aria-labelledby": sub.triggerId,
+      side: side ?? (dir === "rtl" ? "left" : "right"),
+      align,
+      ...props,
+      nodeRef,
+      listening,
+      engaged,
+      trapped: false,
+      isSub: true,
+      onMountAutoFocus: (event) => {
+        onOpenAutoFocus?.(event);
+        if (event.defaultPrevented) return;
+        event.preventDefault();
+        const intent = sub.focusIntent.current;
+        sub.focusIntent.current = "none";
+        if (intent !== "none" && nodeRef.current) focusEntry(nodeRef.current, intent);
+      },
+      onUnmountAutoFocus: (event) => event.preventDefault(),
+      onEscapeKeyDown: (event) => {
+        onEscapeKeyDown?.(event);
+        if (!event.defaultPrevented) sub.triggerRef.current?.focus({ preventScroll: true });
+      },
+      onPointerDownOutside: (event) => {
+        onPointerDownOutside?.(event);
+        if (event.defaultPrevented) return;
+        const original = event.detail.originalEvent;
+        const target = original.target;
+        if (target && sub.triggerRef.current?.contains(target)) {
+          event.preventDefault();
+        } else if (target && root.triggerRef.current?.contains(target)) {
+          event.preventDefault();
+        } else if (!insideMenu(target)) {
+          event.preventDefault();
+          root.interactedOutside.current = !root.modal || original.button === 2 || original.button === 0 && original.ctrlKey;
+          root.setOpen(false);
+        }
+      },
+      onFocusOutside: (event) => {
+        onFocusOutside?.(event);
+        if (event.defaultPrevented) return;
+        const target = event.detail.originalEvent.target;
+        if (target && sub.triggerRef.current?.contains(target) || !insideMenu(target)) {
+          event.preventDefault();
+        }
+      },
+      onInteractOutside: void 0,
+      onDismiss: () => sub.setOpen(false),
+      onKeyDown: composeHandlers(onKeyDown, (event) => {
+        if (!isInsideContent(event)) return;
+        if (SUB_CLOSE_KEYS[dir].includes(event.key)) {
+          sub.setOpen(false);
+          sub.triggerRef.current?.focus();
+          event.preventDefault();
+        }
+      }),
+      onPointerMove: composeHandlers(
+        onPointerMove,
+        whenMouse(() => {
+          parent.graceIntent.current = null;
+        })
+      )
+    }
+  );
+}
+export {
+  Anchor,
+  Arrow,
+  CheckboxItem,
+  Content,
+  Group,
+  Item,
+  ItemIndicator,
+  Label,
+  Portal,
+  RadioGroup,
+  RadioItem,
+  Root,
+  Separator,
+  Sub,
+  SubContent,
+  SubTrigger,
+  Trigger
+};