@arun-dev/headless 4.6.0 → 4.7.0

package/dist/tabs/index.js

@@ -1,3 +1,7 @@
+import {
+  byDocumentOrder,
+  rovingIndex
+} from "../chunk-2S4XG4VD.js";
 import {
   useControlled
 } from "../chunk-UEIB3I3T.js";
@@ -46,18 +50,13 @@ import { jsx } from "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,
@@ -80,12 +79,16 @@ function TabsRoot({
   const [tabs, setTabs] = useState([]);
   const register = 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 = 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 = 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 = useId();
   const context = useMemo(
     () => ({
@@ -93,13 +96,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,
@@ -112,33 +126,8 @@ function TabsRoot({
 
 // src/tabs/TabsList.tsx
 import { useRef } from "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 = useRef(null);
   return useRender({
     render,
@@ -152,19 +141,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
@@ -176,6 +165,7 @@ import { useLayoutEffect, useRef as useRef2 } from "react";
 function TabsTab({
   value,
   disabled = false,
+  onClick,
   className,
   children,
   render,
@@ -185,6 +175,7 @@ function TabsTab({
     value: selectedValue,
     setValue,
     activationMode,
+    focusableWhenDisabled,
     tabStopValue,
     register,
     tabId,
@@ -206,8 +197,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,
@@ -219,7 +212,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arun-dev/headless",
-  "version": "4.6.0",
+  "version": "4.7.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",
@@ -64,6 +64,16 @@
         "default": "./dist/dialog/index.cjs"
       }
     },
+    "./menu": {
+      "import": {
+        "types": "./dist/menu/index.d.ts",
+        "default": "./dist/menu/index.js"
+      },
+      "require": {
+        "types": "./dist/menu/index.d.cts",
+        "default": "./dist/menu/index.cjs"
+      }
+    },
     "./popover": {
       "import": {
         "types": "./dist/popover/index.d.ts",