@arun-dev/headless 4.6.0 → 4.7.0

package/dist/menu/index.js

@@ -0,0 +1,255 @@
+import {
+  byDocumentOrder,
+  rovingIndex
+} from "../chunk-2S4XG4VD.js";
+import {
+  anchorNameFor,
+  anchoredDataAttributes,
+  anchoredPopupStyle
+} from "../chunk-HCOCPQXS.js";
+import {
+  useControlled
+} from "../chunk-UEIB3I3T.js";
+import {
+  __export,
+  useRender
+} from "../chunk-OQTWWZ4B.js";
+
+// src/menu/index.parts.ts
+var index_parts_exports = {};
+__export(index_parts_exports, {
+  Item: () => MenuItem,
+  Popup: () => MenuPopup,
+  Root: () => MenuRoot,
+  Trigger: () => MenuTrigger
+});
+
+// src/menu/MenuRoot.tsx
+import { useCallback, useId, useMemo, useRef, useState } from "react";
+
+// src/menu/MenuRootContext.ts
+import { createContext, useContext } from "react";
+var MenuRootContext = createContext(null);
+function useMenuRootContext(part) {
+  const context = useContext(MenuRootContext);
+  if (context === null) {
+    throw new Error(`<Menu.${part}> must be rendered inside <Menu.Root>.`);
+  }
+  return context;
+}
+
+// src/menu/MenuRoot.tsx
+import { jsx } from "react/jsx-runtime";
+function MenuRoot({
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  focusableWhenDisabled = false,
+  children
+}) {
+  const [open, setOpenState] = useControlled({
+    controlled: openProp,
+    default: defaultOpen ?? false,
+    name: "Menu.Root",
+    state: "open"
+  });
+  const setOpen = useCallback(
+    (next) => {
+      if (next === open) return;
+      setOpenState(next);
+      onOpenChange?.(next);
+    },
+    [open, setOpenState, onOpenChange]
+  );
+  const [items, setItems] = useState([]);
+  const register = useCallback((entry) => {
+    setItems((current) => [...current, entry].sort(byDocumentOrder));
+    return () => setItems((current) => current.filter((i) => i !== entry));
+  }, []);
+  const navigableItems = useMemo(
+    () => focusableWhenDisabled ? items : items.filter((i) => !i.disabled),
+    [items, focusableWhenDisabled]
+  );
+  const id = useId();
+  const triggerRef = useRef(null);
+  const focusOnOpenRef = useRef("first");
+  const context = useMemo(
+    () => ({
+      open,
+      setOpen,
+      navigableItems,
+      focusableWhenDisabled,
+      register,
+      focusOnOpenRef,
+      triggerId: `${id}-trigger`,
+      popupId: `${id}-popup`,
+      anchorName: anchorNameFor(id),
+      triggerRef
+    }),
+    [open, setOpen, navigableItems, focusableWhenDisabled, register, id]
+  );
+  return /* @__PURE__ */ jsx(MenuRootContext.Provider, { value: context, children });
+}
+
+// src/menu/menuDataAttributes.ts
+function menuDataAttributes({ open }) {
+  return {
+    "data-open": open ? "" : void 0,
+    "data-closed": open ? void 0 : ""
+  };
+}
+function menuItemDataAttributes(disabled) {
+  return { "data-disabled": disabled ? "" : void 0 };
+}
+
+// src/menu/MenuTrigger.tsx
+function MenuTrigger({ className, children, render, ...rest }) {
+  const { open, setOpen, focusOnOpenRef, triggerId, popupId, anchorName, triggerRef } = useMenuRootContext("Trigger");
+  return useRender({
+    render,
+    defaultTagName: "button",
+    props: {
+      type: "button",
+      id: triggerId,
+      "aria-haspopup": "menu",
+      "aria-expanded": open,
+      "aria-controls": popupId,
+      ...menuDataAttributes({ open }),
+      style: { anchorName },
+      className,
+      children,
+      ref: triggerRef,
+      onClick() {
+        focusOnOpenRef.current = "first";
+        setOpen(!open);
+      },
+      onKeyDown(event) {
+        if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+        event.preventDefault();
+        focusOnOpenRef.current = event.key === "ArrowUp" ? "last" : "first";
+        setOpen(true);
+      }
+    },
+    consumerProps: rest
+  });
+}
+
+// src/menu/MenuPopup.tsx
+import { useEffect, useReducer, useRef as useRef2 } from "react";
+function MenuPopup({
+  side = "bottom",
+  align = "start",
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const {
+    open,
+    setOpen,
+    navigableItems,
+    focusOnOpenRef,
+    triggerId,
+    popupId,
+    anchorName,
+    triggerRef
+  } = useMenuRootContext("Popup");
+  const elementRef = useRef2(null);
+  const focusPendingRef = useRef2(false);
+  const [, resync] = useReducer((n) => n + 1, 0);
+  useEffect(() => {
+    const popup = elementRef.current;
+    if (!popup || typeof popup.showPopover !== "function") return;
+    const shown = popup.matches(":popover-open");
+    if (open && !shown) {
+      popup.showPopover({ source: triggerRef.current ?? void 0 });
+      if (!popup.matches(":popover-open")) setOpen(false);
+      else focusPendingRef.current = true;
+    } else if (!open && shown) {
+      focusPendingRef.current = false;
+      popup.hidePopover();
+    }
+    if (focusPendingRef.current && navigableItems.length > 0) {
+      focusPendingRef.current = false;
+      const target = focusOnOpenRef.current === "last" ? navigableItems.at(-1) : navigableItems[0];
+      target?.ref.current?.focus();
+    }
+  });
+  return useRender({
+    render,
+    defaultTagName: "div",
+    props: {
+      id: popupId,
+      popover: "auto",
+      role: "menu",
+      "aria-labelledby": triggerId,
+      ...anchoredDataAttributes(side, align),
+      ...menuDataAttributes({ open }),
+      style: anchoredPopupStyle(anchorName, side, align),
+      className,
+      children,
+      ref: elementRef,
+      onKeyDown(event) {
+        if (event.key === "Tab") {
+          setOpen(false);
+          return;
+        }
+        const current = navigableItems.findIndex((i) => i.ref.current === event.target);
+        if (current < 0 && event.target !== event.currentTarget) return;
+        const next = rovingIndex(event.key, {
+          count: navigableItems.length,
+          current,
+          orientation: "vertical",
+          rtl: false
+        });
+        if (next === null) return;
+        event.preventDefault();
+        navigableItems[next]?.ref.current?.focus();
+      },
+      onToggle(event) {
+        if (event.target !== event.currentTarget) return;
+        if (event.nativeEvent.newState !== "closed") return;
+        setOpen(false);
+        resync();
+      }
+    },
+    consumerProps: rest
+  });
+}
+
+// src/menu/MenuItem.tsx
+import { useLayoutEffect, useRef as useRef3 } from "react";
+function MenuItem({
+  disabled = false,
+  onClick,
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const { setOpen, focusableWhenDisabled, register } = useMenuRootContext("Item");
+  const elementRef = useRef3(null);
+  useLayoutEffect(() => register({ disabled, ref: elementRef }), [register, disabled]);
+  return useRender({
+    render,
+    defaultTagName: "button",
+    props: {
+      type: "button",
+      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);
+      }
+    },
+    consumerProps: disabled ? rest : { ...rest, onClick }
+  });
+}
+export {
+  index_parts_exports as Menu
+};

package/dist/tabs/index.cjs

@@ -36,6 +36,35 @@ __export(index_parts_exports, {
 // src/tabs/TabsRoot.tsx
 var import_react4 = require("react");
 
+// src/core/rovingFocus.ts
+function byDocumentOrder(a, b) {
+  const x = a.ref.current;
+  const y = b.ref.current;
+  if (!x || !y) return 0;
+  return x.compareDocumentPosition(y) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+}
+function rovingIndex(key, {
+  count,
+  current,
+  orientation,
+  rtl
+}) {
+  if (count === 0) return null;
+  const [prevKey, nextKey] = orientation === "vertical" ? ["ArrowUp", "ArrowDown"] : rtl ? ["ArrowRight", "ArrowLeft"] : ["ArrowLeft", "ArrowRight"];
+  switch (key) {
+    case nextKey:
+      return current < 0 ? 0 : (current + 1) % count;
+    case prevKey:
+      return current < 0 ? count - 1 : (current - 1 + count) % count;
+    case "Home":
+      return 0;
+    case "End":
+      return count - 1;
+    default:
+      return null;
+  }
+}
+
 // src/core/useControlled.ts
 var import_react = require("react");
 function useControlled({
@@ -186,18 +215,13 @@ var import_jsx_runtime = require("react/jsx-runtime");
 function idPart(value) {
   return value.replace(/\s+/g, "_");
 }
-function documentOrder(a, b) {
-  const x = a.ref.current;
-  const y = b.ref.current;
-  if (!x || !y) return 0;
-  return x.compareDocumentPosition(y) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
-}
 function TabsRoot({
   value: valueProp,
   defaultValue,
   onValueChange,
   orientation = "horizontal",
   activationMode = "automatic",
+  focusableWhenDisabled: focusableWhenDisabledProp = false,
   className,
   children,
   render,
@@ -220,12 +244,16 @@ function TabsRoot({
   const [tabs, setTabs] = (0, import_react4.useState)([]);
   const register = (0, import_react4.useCallback)((entry) => {
     setTabs(
-      (current) => [...current.filter((t) => t.value !== entry.value), entry].sort(documentOrder)
+      (current) => [...current.filter((t) => t.value !== entry.value), entry].sort(byDocumentOrder)
     );
     return () => setTabs((current) => current.filter((t) => t !== entry));
   }, []);
-  const enabledTabs = (0, import_react4.useMemo)(() => tabs.filter((t) => !t.disabled), [tabs]);
-  const tabStopValue = tabs.length === 0 ? value : (enabledTabs.find((t) => t.value === value) ?? enabledTabs[0])?.value;
+  const focusableWhenDisabled = focusableWhenDisabledProp && activationMode === "manual";
+  const navigableTabs = (0, import_react4.useMemo)(
+    () => focusableWhenDisabled ? tabs : tabs.filter((t) => !t.disabled),
+    [tabs, focusableWhenDisabled]
+  );
+  const tabStopValue = tabs.length === 0 ? value : (navigableTabs.find((t) => t.value === value) ?? navigableTabs[0])?.value;
   const baseId = (0, import_react4.useId)();
   const context = (0, import_react4.useMemo)(
     () => ({
@@ -233,13 +261,24 @@ function TabsRoot({
       setValue,
       orientation,
       activationMode,
-      enabledTabs,
+      navigableTabs,
+      focusableWhenDisabled,
       tabStopValue,
       register,
       tabId: (v) => `${baseId}-tab-${idPart(v)}`,
       panelId: (v) => `${baseId}-panel-${idPart(v)}`
     }),
-    [value, setValue, orientation, activationMode, enabledTabs, tabStopValue, register, baseId]
+    [
+      value,
+      setValue,
+      orientation,
+      activationMode,
+      navigableTabs,
+      focusableWhenDisabled,
+      tabStopValue,
+      register,
+      baseId
+    ]
   );
   const element = useRender({
     render,
@@ -252,33 +291,8 @@ function TabsRoot({
 
 // src/tabs/TabsList.tsx
 var import_react5 = require("react");
-
-// src/core/rovingFocus.ts
-function rovingIndex(key, {
-  count,
-  current,
-  orientation,
-  rtl
-}) {
-  if (count === 0) return null;
-  const [prevKey, nextKey] = orientation === "vertical" ? ["ArrowUp", "ArrowDown"] : rtl ? ["ArrowRight", "ArrowLeft"] : ["ArrowLeft", "ArrowRight"];
-  switch (key) {
-    case nextKey:
-      return current < 0 ? 0 : (current + 1) % count;
-    case prevKey:
-      return current < 0 ? count - 1 : (current - 1 + count) % count;
-    case "Home":
-      return 0;
-    case "End":
-      return count - 1;
-    default:
-      return null;
-  }
-}
-
-// src/tabs/TabsList.tsx
 function TabsList({ className, children, render, ...rest }) {
-  const { orientation, enabledTabs } = useTabsRootContext("List");
+  const { orientation, navigableTabs } = useTabsRootContext("List");
   const elementRef = (0, import_react5.useRef)(null);
   return useRender({
     render,
@@ -292,19 +306,19 @@ function TabsList({ className, children, render, ...rest }) {
       children,
       ref: elementRef,
       onKeyDown(event) {
-        const current = enabledTabs.findIndex((t) => t.ref.current === event.target);
+        const current = navigableTabs.findIndex((t) => t.ref.current === event.target);
         if (current < 0) return;
         const list = elementRef.current;
         const rtl = list ? getComputedStyle(list).direction === "rtl" : false;
         const next = rovingIndex(event.key, {
-          count: enabledTabs.length,
+          count: navigableTabs.length,
           current,
           orientation,
           rtl
         });
         if (next === null) return;
         event.preventDefault();
-        enabledTabs[next]?.ref.current?.focus();
+        navigableTabs[next]?.ref.current?.focus();
       }
     },
     consumerProps: rest
@@ -316,6 +330,7 @@ var import_react6 = require("react");
 function TabsTab({
   value,
   disabled = false,
+  onClick,
   className,
   children,
   render,
@@ -325,6 +340,7 @@ function TabsTab({
     value: selectedValue,
     setValue,
     activationMode,
+    focusableWhenDisabled,
     tabStopValue,
     register,
     tabId,
@@ -346,8 +362,10 @@ function TabsTab({
       "aria-selected": selected,
       "aria-controls": panelId(value),
       tabIndex: value === tabStopValue ? 0 : -1,
-      // The platform keeps a disabled button out of focus and activation.
-      disabled: disabled || void 0,
+      // The platform keeps a disabled button out of focus and activation. Focusable when
+      // disabled, it is aria-disabled instead, and activation is blocked here.
+      disabled: disabled && !focusableWhenDisabled || void 0,
+      "aria-disabled": disabled && focusableWhenDisabled || void 0,
       ...selectedDataAttributes(selected, disabled),
       className,
       children,
@@ -359,7 +377,8 @@ function TabsTab({
         if (activationMode === "automatic" && !disabled) setValue(value);
       }
     },
-    consumerProps: rest
+    // A native `disabled` would block your onClick; aria-disabled does not, so it is left off.
+    consumerProps: disabled ? rest : { ...rest, onClick }
   });
 }
 

package/dist/tabs/index.d.cts

@@ -36,6 +36,13 @@ type TabsRootOwnProps = {
      * click. Manual suits panels that are slow to show.
      */
     activationMode?: TabsActivationMode;
+    /**
+     * Keeps disabled tabs in the arrow-key sequence, so a screen reader announces them as
+     * unavailable. They still cannot be selected. Only with `activationMode="manual"`: under
+     * `"automatic"` moving focus to a tab selects it, so disabled tabs are always skipped and
+     * this has no effect.
+     */
+    focusableWhenDisabled?: boolean;
     /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
     render?: ReactElement;
     /** Ref to the rendered element. Merged with any ref on the `render` element. */
@@ -52,7 +59,7 @@ type TabsRootProps = TabsRootOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof
  * Each Tab registers its own `value` and `disabled` from its props; the Root never reads
  * them back from the DOM (decision 10). Elements are kept only to move focus to.
  */
-declare function TabsRoot({ value: valueProp, defaultValue, onValueChange, orientation, activationMode, className, children, render, ...rest }: TabsRootProps): react.JSX.Element;
+declare function TabsRoot({ value: valueProp, defaultValue, onValueChange, orientation, activationMode, focusableWhenDisabled: focusableWhenDisabledProp, className, children, render, ...rest }: TabsRootProps): react.JSX.Element;
 
 type TabsListOwnProps = {
     /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
@@ -63,7 +70,8 @@ type TabsListOwnProps = {
 type TabsListProps = TabsListOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof TabsListOwnProps>;
 /**
  * The tablist. Holds the keyboard: arrows along the orientation, wrapping at the ends,
- * Home and End — moving focus among the enabled tabs only. Whether focusing a tab also
+ * Home and End — moving focus among the enabled tabs, and the disabled ones too with
+ * `focusableWhenDisabled`. Whether focusing a tab also
  * selects it is the Tab's to decide, by `activationMode`.
  *
  * Name it with `aria-label` or `aria-labelledby` when the page has more than one.
@@ -73,7 +81,10 @@ declare function TabsList({ className, children, render, ...rest }: TabsListProp
 type TabsTabOwnProps = {
     /** Identifies this tab, and the Panel with the same `value`. */
     value: string;
-    /** Skipped by the arrow keys and cannot be selected. */
+    /**
+     * Cannot be selected. Skipped by the arrow keys, unless the Root sets
+     * `focusableWhenDisabled` with `activationMode="manual"`.
+     */
     disabled?: boolean;
     /** Element to render instead of the default `<button>`. Props and ref are merged onto it. */
     render?: ReactElement;
@@ -89,7 +100,7 @@ type TabsTabProps = TabsTabOwnProps & Omit<ComponentPropsWithRef<'button'>, keyo
  * With `activationMode="automatic"` (the default) focus selects: the arrow keys change the
  * panel as they move. With `"manual"` they only move focus.
  */
-declare function TabsTab({ value, disabled, className, children, render, ...rest }: TabsTabProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+declare function TabsTab({ value, disabled, onClick, className, children, render, ...rest }: TabsTabProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
 
 type TabsPanelOwnProps = {
     /** The `value` of the Tab this panel belongs to. */

package/dist/tabs/index.d.ts

@@ -36,6 +36,13 @@ type TabsRootOwnProps = {
      * click. Manual suits panels that are slow to show.
      */
     activationMode?: TabsActivationMode;
+    /**
+     * Keeps disabled tabs in the arrow-key sequence, so a screen reader announces them as
+     * unavailable. They still cannot be selected. Only with `activationMode="manual"`: under
+     * `"automatic"` moving focus to a tab selects it, so disabled tabs are always skipped and
+     * this has no effect.
+     */
+    focusableWhenDisabled?: boolean;
     /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
     render?: ReactElement;
     /** Ref to the rendered element. Merged with any ref on the `render` element. */
@@ -52,7 +59,7 @@ type TabsRootProps = TabsRootOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof
  * Each Tab registers its own `value` and `disabled` from its props; the Root never reads
  * them back from the DOM (decision 10). Elements are kept only to move focus to.
  */
-declare function TabsRoot({ value: valueProp, defaultValue, onValueChange, orientation, activationMode, className, children, render, ...rest }: TabsRootProps): react.JSX.Element;
+declare function TabsRoot({ value: valueProp, defaultValue, onValueChange, orientation, activationMode, focusableWhenDisabled: focusableWhenDisabledProp, className, children, render, ...rest }: TabsRootProps): react.JSX.Element;
 
 type TabsListOwnProps = {
     /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
@@ -63,7 +70,8 @@ type TabsListOwnProps = {
 type TabsListProps = TabsListOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof TabsListOwnProps>;
 /**
  * The tablist. Holds the keyboard: arrows along the orientation, wrapping at the ends,
- * Home and End — moving focus among the enabled tabs only. Whether focusing a tab also
+ * Home and End — moving focus among the enabled tabs, and the disabled ones too with
+ * `focusableWhenDisabled`. Whether focusing a tab also
  * selects it is the Tab's to decide, by `activationMode`.
  *
  * Name it with `aria-label` or `aria-labelledby` when the page has more than one.
@@ -73,7 +81,10 @@ declare function TabsList({ className, children, render, ...rest }: TabsListProp
 type TabsTabOwnProps = {
     /** Identifies this tab, and the Panel with the same `value`. */
     value: string;
-    /** Skipped by the arrow keys and cannot be selected. */
+    /**
+     * Cannot be selected. Skipped by the arrow keys, unless the Root sets
+     * `focusableWhenDisabled` with `activationMode="manual"`.
+     */
     disabled?: boolean;
     /** Element to render instead of the default `<button>`. Props and ref are merged onto it. */
     render?: ReactElement;
@@ -89,7 +100,7 @@ type TabsTabProps = TabsTabOwnProps & Omit<ComponentPropsWithRef<'button'>, keyo
  * With `activationMode="automatic"` (the default) focus selects: the arrow keys change the
  * panel as they move. With `"manual"` they only move focus.
  */
-declare function TabsTab({ value, disabled, className, children, render, ...rest }: TabsTabProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+declare function TabsTab({ value, disabled, onClick, className, children, render, ...rest }: TabsTabProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
 
 type TabsPanelOwnProps = {
     /** The `value` of the Tab this panel belongs to. */