@arun-dev/headless 4.14.0 → 4.16.0

package/dist/menu/index.js

@@ -1,12 +1,15 @@
 import {
-  anchorNameFor,
-  anchoredDataAttributes,
-  anchoredPopupStyle
-} from "../chunk-HCOCPQXS.js";
+  fold
+} from "../chunk-ETNICT5M.js";
 import {
   byDocumentOrder,
   rovingIndex
 } from "../chunk-2S4XG4VD.js";
+import {
+  anchorNameFor,
+  anchoredDataAttributes,
+  anchoredPopupStyle
+} from "../chunk-HCOCPQXS.js";
 import {
   useControlled
 } from "../chunk-UEIB3I3T.js";
@@ -18,9 +21,17 @@ import {
 // src/menu/index.parts.ts
 var index_parts_exports = {};
 __export(index_parts_exports, {
+  CheckboxItem: () => MenuCheckboxItem,
+  Group: () => MenuGroup,
+  GroupLabel: () => MenuGroupLabel,
   Item: () => MenuItem,
+  ItemIndicator: () => MenuItemIndicator,
   Popup: () => MenuPopup,
+  RadioGroup: () => MenuRadioGroup,
+  RadioItem: () => MenuRadioItem,
   Root: () => MenuRoot,
+  SubmenuRoot: () => MenuSubmenuRoot,
+  SubmenuTrigger: () => MenuSubmenuTrigger,
   Trigger: () => MenuTrigger
 });
 
@@ -40,17 +51,20 @@ function useMenuRootContext(part) {
 
 // src/menu/MenuRoot.tsx
 import { jsx } from "react/jsx-runtime";
-function MenuRoot({
+function MenuRoot({ children, ...props }) {
+  const context = useMenuRootValue("Menu.Root", props, null);
+  return /* @__PURE__ */ jsx(MenuRootContext.Provider, { value: context, children });
+}
+function useMenuRootValue(name, {
   open: openProp,
   defaultOpen,
   onOpenChange,
-  focusableWhenDisabled = false,
-  children
-}) {
+  focusableWhenDisabled = false
+}, parent) {
   const [open, setOpenState] = useControlled({
     controlled: openProp,
     default: defaultOpen ?? false,
-    name: "Menu.Root",
+    name,
     state: "open"
   });
   const setOpen = useCallback(
@@ -61,6 +75,10 @@ function MenuRoot({
     },
     [open, setOpenState, onOpenChange]
   );
+  const closeAll = useCallback(() => {
+    setOpen(false);
+    parent?.closeAll();
+  }, [setOpen, parent]);
   const [items, setItems] = useState([]);
   const register = useCallback((entry) => {
     setItems((current) => [...current, entry].sort(byDocumentOrder));
@@ -73,10 +91,14 @@ function MenuRoot({
   const id = useId();
   const triggerRef = useRef(null);
   const focusOnOpenRef = useRef("first");
-  const context = useMemo(
+  const popupRef = useRef(null);
+  const openSubmenuRef = useRef(null);
+  const graceRef = useRef(null);
+  return useMemo(
     () => ({
       open,
       setOpen,
+      closeAll,
       navigableItems,
       focusableWhenDisabled,
       register,
@@ -84,11 +106,14 @@ function MenuRoot({
       triggerId: `${id}-trigger`,
       popupId: `${id}-popup`,
       anchorName: anchorNameFor(id),
-      triggerRef
+      triggerRef,
+      parent,
+      popupRef,
+      openSubmenuRef,
+      graceRef
     }),
-    [open, setOpen, navigableItems, focusableWhenDisabled, register, id]
+    [open, setOpen, closeAll, navigableItems, focusableWhenDisabled, register, id, parent]
   );
-  return /* @__PURE__ */ jsx(MenuRootContext.Provider, { value: context, children });
 }
 
 // src/menu/menuDataAttributes.ts
@@ -98,9 +123,6 @@ function menuDataAttributes({ open }) {
     "data-closed": open ? void 0 : ""
   };
 }
-function menuItemDataAttributes(disabled) {
-  return { "data-disabled": disabled ? "" : void 0 };
-}
 
 // src/menu/MenuTrigger.tsx
 function MenuTrigger({ className, children, render, ...rest }) {
@@ -135,9 +157,53 @@ function MenuTrigger({ className, children, render, ...rest }) {
 }
 
 // src/menu/MenuPopup.tsx
-import { useEffect, useReducer, useRef as useRef2 } from "react";
+import { useEffect as useEffect2, useReducer, useRef as useRef3 } from "react";
+
+// src/core/typeahead.ts
+import { Children, isValidElement, useCallback as useCallback2, useEffect, useRef as useRef2 } from "react";
+var TYPEAHEAD_TIMEOUT = 500;
+function textOf(node) {
+  let text = "";
+  Children.forEach(node, (child) => {
+    if (typeof child === "string" || typeof child === "number") text += child;
+    else if (isValidElement(child)) text += textOf(child.props.children);
+  });
+  return text;
+}
+function typeaheadIndex(labels, current, search) {
+  const count = labels.length;
+  if (count === 0 || search === "") return null;
+  const [first = "", ...others] = [...search];
+  const repeated = others.every((char) => char === first);
+  const needle = fold(repeated ? first : search);
+  const start = current < 0 ? 0 : repeated ? current + 1 : current;
+  for (let step = 0; step < count; step += 1) {
+    const index = (start + step) % count;
+    if (fold(labels[index] ?? "").startsWith(needle)) return index;
+  }
+  return null;
+}
+function useTypeahead() {
+  const searchRef = useRef2("");
+  const timerRef = useRef2(void 0);
+  useEffect(() => () => clearTimeout(timerRef.current), []);
+  return useCallback2((event) => {
+    const { key } = event;
+    if (event.ctrlKey || event.metaKey || event.altKey) return null;
+    if ([...key].length !== 1) return null;
+    if (key === " " && searchRef.current === "") return null;
+    searchRef.current += key;
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
+      searchRef.current = "";
+    }, TYPEAHEAD_TIMEOUT);
+    return searchRef.current;
+  }, []);
+}
+
+// src/menu/MenuPopup.tsx
 function MenuPopup({
-  side = "bottom",
+  side: sideProp,
   align = "start",
   className,
   children,
@@ -152,12 +218,16 @@ function MenuPopup({
     triggerId,
     popupId,
     anchorName,
-    triggerRef
+    triggerRef,
+    parent,
+    popupRef: elementRef,
+    openSubmenuRef
   } = useMenuRootContext("Popup");
-  const elementRef = useRef2(null);
-  const focusPendingRef = useRef2(false);
+  const side = sideProp ?? (parent ? "right" : "bottom");
+  const focusPendingRef = useRef3(false);
   const [, resync] = useReducer((n) => n + 1, 0);
-  useEffect(() => {
+  const typeahead = useTypeahead();
+  useEffect2(() => {
     const popup = elementRef.current;
     if (!popup || typeof popup.showPopover !== "function") return;
     const shown = popup.matches(":popover-open");
@@ -171,7 +241,8 @@ function MenuPopup({
     }
     if (focusPendingRef.current && navigableItems.length > 0) {
       focusPendingRef.current = false;
-      const target = focusOnOpenRef.current === "last" ? navigableItems.at(-1) : navigableItems[0];
+      const focus = focusOnOpenRef.current;
+      const target = focus === "last" ? navigableItems.at(-1) : focus === "first" ? navigableItems[0] : null;
       target?.ref.current?.focus();
     }
   });
@@ -196,15 +267,35 @@ function MenuPopup({
         }
         const current = navigableItems.findIndex((i) => i.ref.current === event.target);
         if (current < 0 && event.target !== event.currentTarget) return;
-        const next = rovingIndex(event.key, {
+        const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+        if (parent && event.key === (rtl ? "ArrowRight" : "ArrowLeft")) {
+          event.preventDefault();
+          setOpen(false);
+          return;
+        }
+        const search = typeahead(event);
+        const next = search === null ? rovingIndex(event.key, {
           count: navigableItems.length,
           current,
           orientation: "vertical",
           rtl: false
-        });
+        }) : typeaheadIndex(
+          navigableItems.map((i) => i.textValue),
+          current,
+          search
+        );
+        if (search !== null) event.preventDefault();
         if (next === null) return;
         event.preventDefault();
-        navigableItems[next]?.ref.current?.focus();
+        const target = navigableItems[next]?.ref.current;
+        const submenu = openSubmenuRef.current;
+        if (submenu && submenu.triggerRef.current !== target) submenu.close();
+        target?.focus();
+      },
+      onBeforeToggle(event) {
+        if (event.target !== event.currentTarget || !parent) return;
+        if (event.nativeEvent.newState !== "closed") return;
+        if (event.currentTarget.contains(document.activeElement)) triggerRef.current?.focus();
       },
       onToggle(event) {
         if (event.target !== event.currentTarget) return;
@@ -217,34 +308,415 @@ function MenuPopup({
   });
 }
 
+// src/menu/useMenuItem.ts
+import { createContext as createContext2, useContext as useContext2, useLayoutEffect, useRef as useRef4 } from "react";
+
+// src/core/pointerIntent.ts
+function graceArea(exit, popup) {
+  const toRight = popup.left >= exit.x;
+  const edge = toRight ? popup.left : popup.right;
+  const back = toRight ? -5 : 5;
+  return [
+    { x: exit.x + back, y: exit.y - 5 },
+    { x: edge, y: popup.top },
+    { x: edge, y: popup.bottom },
+    { x: exit.x + back, y: exit.y + 5 }
+  ];
+}
+function isPointInPolygon({ x, y }, polygon) {
+  let inside = false;
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i, i += 1) {
+    const a = polygon[i];
+    const b = polygon[j];
+    if (!a || !b) continue;
+    if (a.y > y !== b.y > y && x < (b.x - a.x) * (y - a.y) / (b.y - a.y) + a.x) {
+      inside = !inside;
+    }
+  }
+  return inside;
+}
+
+// src/menu/useMenuItem.ts
+function useMenuItem(part, { disabled, textValue, children }, menu) {
+  const own = useMenuRootContext(part);
+  const { closeAll, focusableWhenDisabled, register, openSubmenuRef, graceRef } = menu ?? own;
+  const ref = useRef4(null);
+  const text = textValue ?? textOf(children);
+  useLayoutEffect(() => register({ disabled, textValue: text, ref }), [register, disabled, text]);
+  return {
+    closeAll,
+    itemProps: {
+      type: "button",
+      tabIndex: -1,
+      disabled: disabled && !focusableWhenDisabled || void 0,
+      "aria-disabled": disabled && focusableWhenDisabled || void 0,
+      "data-disabled": disabled ? "" : void 0,
+      ref,
+      onPointerMove(event) {
+        if (event.pointerType !== "mouse" || !openSubmenuRef.current) return;
+        if (isInGrace(graceRef.current, event)) return;
+        openSubmenuRef.current.close();
+      }
+    }
+  };
+}
+function isInGrace(grace, event) {
+  if (!grace || performance.now() > grace.until) return false;
+  return isPointInPolygon({ x: event.clientX, y: event.clientY }, grace.area);
+}
+var MenuItemIndicatorContext = createContext2(null);
+function useMenuItemIndicatorContext() {
+  const context = useContext2(MenuItemIndicatorContext);
+  if (context === null) {
+    throw new Error(
+      "<Menu.ItemIndicator> must be rendered inside <Menu.CheckboxItem> or <Menu.RadioItem>."
+    );
+  }
+  return context;
+}
+function menuCheckableDataAttributes({ checked, disabled }) {
+  return {
+    "data-checked": checked ? "" : void 0,
+    "data-unchecked": checked ? void 0 : "",
+    "data-disabled": disabled ? "" : void 0
+  };
+}
+
 // src/menu/MenuItem.tsx
-import { useLayoutEffect, useRef as useRef3 } from "react";
 function MenuItem({
   disabled = false,
+  textValue,
   onClick,
   className,
   children,
   render,
   ...rest
 }) {
-  const { setOpen, focusableWhenDisabled, register } = useMenuRootContext("Item");
-  const elementRef = useRef3(null);
-  useLayoutEffect(() => register({ disabled, ref: elementRef }), [register, disabled]);
+  const { closeAll, itemProps } = useMenuItem("Item", { disabled, textValue, children });
   return useRender({
     render,
     defaultTagName: "button",
     props: {
-      type: "button",
+      ...itemProps,
       role: "menuitem",
-      tabIndex: -1,
-      disabled: disabled && !focusableWhenDisabled || void 0,
-      "aria-disabled": disabled && focusableWhenDisabled || void 0,
-      ...menuItemDataAttributes(disabled),
       className,
       children,
-      ref: elementRef,
       onClick() {
-        if (!disabled) setOpen(false);
+        if (!disabled) closeAll();
+      }
+    },
+    consumerProps: disabled ? rest : { ...rest, onClick }
+  });
+}
+
+// src/menu/MenuCheckboxItem.tsx
+import { useMemo as useMemo2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function MenuCheckboxItem({
+  checked: checkedProp,
+  defaultChecked,
+  onCheckedChange,
+  closeOnClick = false,
+  disabled = false,
+  textValue,
+  onClick,
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const { closeAll, itemProps } = useMenuItem("CheckboxItem", { disabled, textValue, children });
+  const [checked, setChecked] = useControlled({
+    controlled: checkedProp,
+    default: defaultChecked ?? false,
+    name: "Menu.CheckboxItem",
+    state: "checked"
+  });
+  const state = useMemo2(() => ({ checked, disabled }), [checked, disabled]);
+  const element = useRender({
+    render,
+    defaultTagName: "button",
+    props: {
+      ...itemProps,
+      role: "menuitemcheckbox",
+      "aria-checked": checked,
+      ...menuCheckableDataAttributes(state),
+      className,
+      children,
+      onClick() {
+        if (disabled) return;
+        setChecked(!checked);
+        onCheckedChange?.(!checked);
+        if (closeOnClick) closeAll();
+      }
+    },
+    consumerProps: disabled ? rest : { ...rest, onClick }
+  });
+  return /* @__PURE__ */ jsx2(MenuItemIndicatorContext.Provider, { value: state, children: element });
+}
+
+// src/menu/MenuRadioGroup.tsx
+import { createContext as createContext4, useCallback as useCallback4, useContext as useContext4, useMemo as useMemo4 } from "react";
+
+// src/menu/MenuGroup.tsx
+import { createContext as createContext3, useCallback as useCallback3, useContext as useContext3, useId as useId2, useMemo as useMemo3, useState as useState2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var MenuGroupContext = createContext3(null);
+function useMenuGroupContext() {
+  return useContext3(MenuGroupContext);
+}
+function useMenuGroupElement(part, {
+  render,
+  props,
+  consumerProps
+}) {
+  useMenuRootContext(part);
+  const labelId = `${useId2()}-label`;
+  const [hasLabel, setHasLabel] = useState2(false);
+  const registerLabel = useCallback3(() => {
+    setHasLabel(true);
+    return () => setHasLabel(false);
+  }, []);
+  const context = useMemo3(() => ({ labelId, registerLabel }), [labelId, registerLabel]);
+  const element = useRender({
+    render,
+    defaultTagName: "div",
+    props: { role: "group", "aria-labelledby": hasLabel ? labelId : void 0, ...props },
+    consumerProps
+  });
+  return /* @__PURE__ */ jsx3(MenuGroupContext.Provider, { value: context, children: element });
+}
+function MenuGroup({ className, children, render, ...rest }) {
+  return useMenuGroupElement("Group", {
+    render,
+    props: { className, children },
+    consumerProps: rest
+  });
+}
+
+// src/menu/MenuRadioGroup.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var MenuRadioGroupContext = createContext4(null);
+function useMenuRadioGroupContext() {
+  const context = useContext4(MenuRadioGroupContext);
+  if (context === null) {
+    throw new Error("<Menu.RadioItem> must be rendered inside <Menu.RadioGroup>.");
+  }
+  return context;
+}
+function MenuRadioGroup({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  disabled = false,
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const [value, setValue] = useControlled({
+    controlled: valueProp,
+    default: defaultValue ?? null,
+    name: "Menu.RadioGroup",
+    state: "value"
+  });
+  const select = useCallback4(
+    (next) => {
+      if (next === value) return;
+      setValue(next);
+      onValueChange?.(next);
+    },
+    [value, setValue, onValueChange]
+  );
+  const context = useMemo4(() => ({ value, disabled, select }), [value, disabled, select]);
+  const element = useMenuGroupElement("RadioGroup", {
+    render,
+    props: { "data-disabled": disabled ? "" : void 0, className, children },
+    consumerProps: rest
+  });
+  return /* @__PURE__ */ jsx4(MenuRadioGroupContext.Provider, { value: context, children: element });
+}
+
+// src/menu/MenuRadioItem.tsx
+import { useMemo as useMemo5 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function MenuRadioItem({
+  value,
+  closeOnClick = false,
+  disabled: disabledProp = false,
+  textValue,
+  onClick,
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const group = useMenuRadioGroupContext();
+  const disabled = disabledProp || group.disabled;
+  const { closeAll, itemProps } = useMenuItem("RadioItem", { disabled, textValue, children });
+  const checked = group.value === value;
+  const state = useMemo5(() => ({ checked, disabled }), [checked, disabled]);
+  const element = useRender({
+    render,
+    defaultTagName: "button",
+    props: {
+      ...itemProps,
+      role: "menuitemradio",
+      "aria-checked": checked,
+      ...menuCheckableDataAttributes(state),
+      className,
+      children,
+      onClick() {
+        if (disabled) return;
+        group.select(value);
+        if (closeOnClick) closeAll();
+      }
+    },
+    consumerProps: disabled ? rest : { ...rest, onClick }
+  });
+  return /* @__PURE__ */ jsx5(MenuItemIndicatorContext.Provider, { value: state, children: element });
+}
+
+// src/menu/MenuItemIndicator.tsx
+function MenuItemIndicator({
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const state = useMenuItemIndicatorContext();
+  return useRender({
+    render,
+    defaultTagName: "span",
+    props: { "aria-hidden": true, ...menuCheckableDataAttributes(state), className, children },
+    consumerProps: rest
+  });
+}
+
+// src/menu/MenuGroupLabel.tsx
+import { useLayoutEffect as useLayoutEffect2 } from "react";
+function MenuGroupLabel({ className, children, render, ...rest }) {
+  const group = useMenuGroupContext();
+  if (group === null) {
+    throw new Error("<Menu.GroupLabel> must be rendered inside <Menu.Group> or <Menu.RadioGroup>.");
+  }
+  const { labelId, registerLabel } = group;
+  useLayoutEffect2(registerLabel, [registerLabel]);
+  return useRender({
+    render,
+    defaultTagName: "div",
+    props: { id: labelId, className, children },
+    consumerProps: rest
+  });
+}
+
+// src/menu/MenuSubmenuRoot.tsx
+import { useEffect as useEffect3 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function MenuSubmenuRoot({
+  focusableWhenDisabled,
+  children,
+  ...props
+}) {
+  const parent = useMenuRootContext("SubmenuRoot");
+  const context = useMenuRootValue(
+    "Menu.SubmenuRoot",
+    { ...props, focusableWhenDisabled: focusableWhenDisabled ?? parent.focusableWhenDisabled },
+    parent
+  );
+  const { open, setOpen, triggerRef } = context;
+  useEffect3(() => {
+    if (!open) return;
+    const entry = { close: () => setOpen(false), triggerRef };
+    parent.openSubmenuRef.current = entry;
+    return () => {
+      if (parent.openSubmenuRef.current === entry) parent.openSubmenuRef.current = null;
+    };
+  }, [open, setOpen, triggerRef, parent]);
+  return /* @__PURE__ */ jsx6(MenuRootContext.Provider, { value: context, children });
+}
+
+// src/menu/MenuSubmenuTrigger.tsx
+import { useCallback as useCallback5, useEffect as useEffect4, useRef as useRef5 } from "react";
+var SUBMENU_OPEN_DELAY = 100;
+var SUBMENU_GRACE_PERIOD = 300;
+function MenuSubmenuTrigger({
+  disabled = false,
+  textValue,
+  onClick,
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const submenu = useMenuRootContext("SubmenuTrigger");
+  const { parent } = submenu;
+  if (parent === null) {
+    throw new Error("<Menu.SubmenuTrigger> must be rendered inside <Menu.SubmenuRoot>.");
+  }
+  const { itemProps } = useMenuItem("SubmenuTrigger", { disabled, textValue, children }, parent);
+  const { open, setOpen, focusOnOpenRef, navigableItems, triggerRef, popupRef } = submenu;
+  const timerRef = useRef5(void 0);
+  useEffect4(() => () => clearTimeout(timerRef.current), []);
+  const openAt = (focus) => {
+    if (disabled) return;
+    focusOnOpenRef.current = focus;
+    if (!open) setOpen(true);
+    else if (focus === "first") navigableItems[0]?.ref.current?.focus();
+  };
+  const openAtRef = useRef5(openAt);
+  openAtRef.current = openAt;
+  const itemRef = itemProps.ref;
+  const ref = useCallback5(
+    (element) => {
+      itemRef.current = element;
+      triggerRef.current = element;
+    },
+    [itemRef, triggerRef]
+  );
+  return useRender({
+    render,
+    defaultTagName: "button",
+    props: {
+      ...itemProps,
+      id: submenu.triggerId,
+      role: "menuitem",
+      "aria-haspopup": "menu",
+      "aria-expanded": open,
+      "aria-controls": submenu.popupId,
+      ...menuDataAttributes({ open }),
+      style: { anchorName: submenu.anchorName },
+      className,
+      children,
+      ref,
+      onClick(event) {
+        openAt(event.detail === 0 ? "first" : "none");
+      },
+      onKeyDown(event) {
+        const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+        if (event.key !== (rtl ? "ArrowLeft" : "ArrowRight")) return;
+        event.preventDefault();
+        openAt("first");
+      },
+      onPointerMove(event) {
+        if (event.pointerType !== "mouse" || disabled) return;
+        const sibling = parent.openSubmenuRef.current;
+        if (sibling && sibling.triggerRef !== triggerRef) sibling.close();
+        if (open || timerRef.current !== void 0) return;
+        timerRef.current = setTimeout(() => {
+          timerRef.current = void 0;
+          openAtRef.current("none");
+        }, SUBMENU_OPEN_DELAY);
+      },
+      onPointerLeave(event) {
+        clearTimeout(timerRef.current);
+        timerRef.current = void 0;
+        const popup = popupRef.current;
+        if (!open || !popup) return;
+        parent.graceRef.current = {
+          area: graceArea({ x: event.clientX, y: event.clientY }, popup.getBoundingClientRect()),
+          until: performance.now() + SUBMENU_GRACE_PERIOD
+        };
       }
     },
     consumerProps: disabled ? rest : { ...rest, onClick }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arun-dev/headless",
-  "version": "4.14.0",
+  "version": "4.16.0",
   "description": "Unstyled React behaviour primitives — render engine, controlled/uncontrolled state, and data-* state projection. Ships no CSS and no class names.",
   "license": "MIT",
   "type": "module",