@arun-dev/headless 4.14.0 → 4.16.0

package/dist/menu/index.cjs

@@ -27,9 +27,17 @@ module.exports = __toCommonJS(menu_exports);
 // 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
 });
 
@@ -133,17 +141,20 @@ function useMenuRootContext(part) {
 
 // src/menu/MenuRoot.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function MenuRoot({
+function MenuRoot({ children, ...props }) {
+  const context = useMenuRootValue("Menu.Root", props, null);
+  return /* @__PURE__ */ (0, import_jsx_runtime.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 = (0, import_react3.useCallback)(
@@ -154,6 +165,10 @@ function MenuRoot({
     },
     [open, setOpenState, onOpenChange]
   );
+  const closeAll = (0, import_react3.useCallback)(() => {
+    setOpen(false);
+    parent?.closeAll();
+  }, [setOpen, parent]);
   const [items, setItems] = (0, import_react3.useState)([]);
   const register = (0, import_react3.useCallback)((entry) => {
     setItems((current) => [...current, entry].sort(byDocumentOrder));
@@ -166,10 +181,14 @@ function MenuRoot({
   const id = (0, import_react3.useId)();
   const triggerRef = (0, import_react3.useRef)(null);
   const focusOnOpenRef = (0, import_react3.useRef)("first");
-  const context = (0, import_react3.useMemo)(
+  const popupRef = (0, import_react3.useRef)(null);
+  const openSubmenuRef = (0, import_react3.useRef)(null);
+  const graceRef = (0, import_react3.useRef)(null);
+  return (0, import_react3.useMemo)(
     () => ({
       open,
       setOpen,
+      closeAll,
       navigableItems,
       focusableWhenDisabled,
       register,
@@ -177,11 +196,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__ */ (0, import_jsx_runtime.jsx)(MenuRootContext.Provider, { value: context, children });
 }
 
 // src/core/useRender.ts
@@ -280,9 +302,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 }) {
@@ -317,9 +336,60 @@ function MenuTrigger({ className, children, render, ...rest }) {
 }
 
 // src/menu/MenuPopup.tsx
+var import_react6 = require("react");
+
+// src/core/typeahead.ts
 var import_react5 = require("react");
+
+// src/core/fold.ts
+function fold(text) {
+  return text.normalize("NFD").replace(/\p{M}/gu, "").toLocaleLowerCase();
+}
+
+// src/core/typeahead.ts
+var TYPEAHEAD_TIMEOUT = 500;
+function textOf(node) {
+  let text = "";
+  import_react5.Children.forEach(node, (child) => {
+    if (typeof child === "string" || typeof child === "number") text += child;
+    else if ((0, import_react5.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 = (0, import_react5.useRef)("");
+  const timerRef = (0, import_react5.useRef)(void 0);
+  (0, import_react5.useEffect)(() => () => clearTimeout(timerRef.current), []);
+  return (0, import_react5.useCallback)((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,
@@ -334,12 +404,16 @@ function MenuPopup({
     triggerId,
     popupId,
     anchorName,
-    triggerRef
+    triggerRef,
+    parent,
+    popupRef: elementRef,
+    openSubmenuRef
   } = useMenuRootContext("Popup");
-  const elementRef = (0, import_react5.useRef)(null);
-  const focusPendingRef = (0, import_react5.useRef)(false);
-  const [, resync] = (0, import_react5.useReducer)((n) => n + 1, 0);
-  (0, import_react5.useEffect)(() => {
+  const side = sideProp ?? (parent ? "right" : "bottom");
+  const focusPendingRef = (0, import_react6.useRef)(false);
+  const [, resync] = (0, import_react6.useReducer)((n) => n + 1, 0);
+  const typeahead = useTypeahead();
+  (0, import_react6.useEffect)(() => {
     const popup = elementRef.current;
     if (!popup || typeof popup.showPopover !== "function") return;
     const shown = popup.matches(":popover-open");
@@ -353,7 +427,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();
     }
   });
@@ -378,15 +453,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;
@@ -399,34 +494,415 @@ function MenuPopup({
   });
 }
 
+// src/menu/useMenuItem.ts
+var import_react7 = require("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 = (0, import_react7.useRef)(null);
+  const text = textValue ?? textOf(children);
+  (0, import_react7.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 = (0, import_react7.createContext)(null);
+function useMenuItemIndicatorContext() {
+  const context = (0, import_react7.useContext)(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
-var import_react6 = require("react");
 function MenuItem({
   disabled = false,
+  textValue,
   onClick,
   className,
   children,
   render,
   ...rest
 }) {
-  const { setOpen, focusableWhenDisabled, register } = useMenuRootContext("Item");
-  const elementRef = (0, import_react6.useRef)(null);
-  (0, import_react6.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
+var import_react8 = require("react");
+var import_jsx_runtime2 = require("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 = (0, import_react8.useMemo)(() => ({ 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__ */ (0, import_jsx_runtime2.jsx)(MenuItemIndicatorContext.Provider, { value: state, children: element });
+}
+
+// src/menu/MenuRadioGroup.tsx
+var import_react10 = require("react");
+
+// src/menu/MenuGroup.tsx
+var import_react9 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var MenuGroupContext = (0, import_react9.createContext)(null);
+function useMenuGroupContext() {
+  return (0, import_react9.useContext)(MenuGroupContext);
+}
+function useMenuGroupElement(part, {
+  render,
+  props,
+  consumerProps
+}) {
+  useMenuRootContext(part);
+  const labelId = `${(0, import_react9.useId)()}-label`;
+  const [hasLabel, setHasLabel] = (0, import_react9.useState)(false);
+  const registerLabel = (0, import_react9.useCallback)(() => {
+    setHasLabel(true);
+    return () => setHasLabel(false);
+  }, []);
+  const context = (0, import_react9.useMemo)(() => ({ labelId, registerLabel }), [labelId, registerLabel]);
+  const element = useRender({
+    render,
+    defaultTagName: "div",
+    props: { role: "group", "aria-labelledby": hasLabel ? labelId : void 0, ...props },
+    consumerProps
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(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
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var MenuRadioGroupContext = (0, import_react10.createContext)(null);
+function useMenuRadioGroupContext() {
+  const context = (0, import_react10.useContext)(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 = (0, import_react10.useCallback)(
+    (next) => {
+      if (next === value) return;
+      setValue(next);
+      onValueChange?.(next);
+    },
+    [value, setValue, onValueChange]
+  );
+  const context = (0, import_react10.useMemo)(() => ({ value, disabled, select }), [value, disabled, select]);
+  const element = useMenuGroupElement("RadioGroup", {
+    render,
+    props: { "data-disabled": disabled ? "" : void 0, className, children },
+    consumerProps: rest
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuRadioGroupContext.Provider, { value: context, children: element });
+}
+
+// src/menu/MenuRadioItem.tsx
+var import_react11 = require("react");
+var import_jsx_runtime5 = require("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 = (0, import_react11.useMemo)(() => ({ 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__ */ (0, import_jsx_runtime5.jsx)(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
+var import_react12 = require("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;
+  (0, import_react12.useLayoutEffect)(registerLabel, [registerLabel]);
+  return useRender({
+    render,
+    defaultTagName: "div",
+    props: { id: labelId, className, children },
+    consumerProps: rest
+  });
+}
+
+// src/menu/MenuSubmenuRoot.tsx
+var import_react13 = require("react");
+var import_jsx_runtime6 = require("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;
+  (0, import_react13.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime6.jsx)(MenuRootContext.Provider, { value: context, children });
+}
+
+// src/menu/MenuSubmenuTrigger.tsx
+var import_react14 = require("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 = (0, import_react14.useRef)(void 0);
+  (0, import_react14.useEffect)(() => () => 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 = (0, import_react14.useRef)(openAt);
+  openAtRef.current = openAt;
+  const itemRef = itemProps.ref;
+  const ref = (0, import_react14.useCallback)(
+    (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 }