@crisp-ui-kit/crisp 0.24.0 → 0.25.0

package/dist/cjs/components/radiogroup/radiogroup-keyboard.js

@@ -1,6 +1,40 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRadioGroupKeyboard = useRadioGroupKeyboard;
+const React = __importStar(require("react"));
 /**
  * The WAI-ARIA radio group keyboard model: ←/→/↑/↓ move focus to the next or
  * previous enabled radio, wrapping, and check it on arrival. Home/End jump to
@@ -25,7 +59,39 @@ exports.useRadioGroupKeyboard = useRadioGroupKeyboard;
  * `Segmented` already offered them, and the shared model should be the union
  * rather than quietly dropping behaviour one surface had.
  */
-function useRadioGroupKeyboard({ select, }) {
+function useRadioGroupKeyboard({ select, groupRef: externalRef, }) {
+    /**
+     * The group's one tab stop. `tabIndex={checked ? 0 : -1}` in the markup is
+     * right for every case but the one that matters most: a group with NOTHING
+     * selected gives every radio -1, so Tab skips the whole control and an
+     * unanswered question can never be answered from the keyboard (#237). APG
+     * says the first radio is tabbable when none is checked, and RadioGroup's
+     * own comment said so too — "the selected (or first, when none) radio is
+     * tabbable" — while the code did only the first half.
+     *
+     * Owned here rather than in the markup because the group renders arbitrary
+     * children: only the DOM knows which radio comes first, which is the same
+     * reason the arrow keys read the radios out of the DOM.
+     *
+     * It runs after EVERY render, and sets both ends. React will not undo a
+     * mutation it did not make — when the selection moves, the newly checked
+     * radio changes 0 from React's side while the stale one keeps the 0 written
+     * here — so this has to own the whole row, not just add to it.
+     */
+    const ownRef = React.useRef(null);
+    const groupRef = externalRef ?? ownRef;
+    React.useLayoutEffect(() => {
+        const root = groupRef.current;
+        if (!root)
+            return;
+        const radios = Array.from(root.querySelectorAll('[role="radio"]:not([disabled])'));
+        if (!radios.length)
+            return;
+        const checked = radios.find((r) => r.getAttribute("aria-checked") === "true");
+        const stop = checked ?? radios[0];
+        for (const r of radios)
+            r.tabIndex = r === stop ? 0 : -1;
+    });
     const onKeyDown = (e) => {
         const KEYS = [
             "ArrowDown",
@@ -63,5 +129,5 @@ function useRadioGroupKeyboard({ select, }) {
         if (value !== undefined)
             select(value);
     };
-    return { onKeyDown };
+    return { onKeyDown, groupRef };
 }

package/dist/cjs/components/radiogroup/radiogroup.js

@@ -56,8 +56,8 @@ function RadioGroup({ value, defaultValue, onValueChange, variant = "default", n
             setInternal(v);
         onValueChange?.(v);
     }, [value, onValueChange]);
-    const { onKeyDown } = (0, radiogroup_keyboard_1.useRadioGroupKeyboard)({ select });
-    return ((0, jsx_runtime_1.jsx)(RadioContext.Provider, { value: { value: selected, select, name: groupName, variant }, children: (0, jsx_runtime_1.jsx)("div", { role: "radiogroup", "aria-label": ariaLabel, "data-variant": variant, className: (0, radiogroup_recipe_1.radiogroupRecipe)({ className }), ...rest, onKeyDown: onKeyDown, children: children }) }));
+    const { onKeyDown, groupRef } = (0, radiogroup_keyboard_1.useRadioGroupKeyboard)({ select });
+    return ((0, jsx_runtime_1.jsx)(RadioContext.Provider, { value: { value: selected, select, name: groupName, variant }, children: (0, jsx_runtime_1.jsx)("div", { ref: groupRef, role: "radiogroup", "aria-label": ariaLabel, "data-variant": variant, className: (0, radiogroup_recipe_1.radiogroupRecipe)({ className }), ...rest, onKeyDown: onKeyDown, children: children }) }));
 }
 RadioGroup.displayName = "RadioGroup";
 function Radio({ value, label, children, disabled }) {

package/dist/cjs/components/segmented/segmented.js

@@ -68,7 +68,7 @@ function Segmented({ options, value, defaultValue, onValueChange, "aria-label":
     // crisp's shared radio group model (#200). The per-button handler this
     // replaces closed over its own index, so it selected a neighbour without
     // moving focus and every press after the first recomputed the same step.
-    const { onKeyDown } = (0, radiogroup_1.useRadioGroupKeyboard)({ select });
+    const { onKeyDown } = (0, radiogroup_1.useRadioGroupKeyboard)({ select, groupRef: rootRef });
     return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, segmented_recipe_1.segmentedRecipe)({ className }), ...rest, role: "radiogroup", "aria-label": ariaLabel, onKeyDown: onKeyDown, children: [thumb && ((0, jsx_runtime_1.jsx)("span", { className: "segmented-thumb", "aria-hidden": "true", style: {
                     width: thumb.width,
                     transform: `translateX(${thumb.left}px)`,

package/dist/cjs/components/tabs/tabs-keyboard.js

@@ -44,6 +44,15 @@ function useTablistKeyboard({ tabs, active, select, listRef, }) {
      * arrows move within. Without this a keyboard user walks through every tab
      * one at a time, and the number of stops grows with the tab set.
      */
-    const tabIndexFor = (value) => (value === active ? 0 : -1);
+    const tabIndexFor = (value) => {
+        // ...and a group with no tab stop at all is worse than one with too many:
+        // a controlled `value` that matches no tab gave every tab -1, so Tab
+        // skipped the whole strip (#237). Fall back to the first enabled tab,
+        // which is where focus would land anyway.
+        const stop = tabs.some((t) => t.value === active && !t.disabled)
+            ? active
+            : tabs.find((t) => !t.disabled)?.value;
+        return value === stop ? 0 : -1;
+    };
     return { onKeyDown, tabIndexFor };
 }

package/dist/esm/components/radiogroup/radiogroup-keyboard.js

@@ -1,3 +1,4 @@
+import * as React from "react";
 /**
  * The WAI-ARIA radio group keyboard model: ←/→/↑/↓ move focus to the next or
  * previous enabled radio, wrapping, and check it on arrival. Home/End jump to
@@ -22,7 +23,39 @@
  * `Segmented` already offered them, and the shared model should be the union
  * rather than quietly dropping behaviour one surface had.
  */
-export function useRadioGroupKeyboard({ select, }) {
+export function useRadioGroupKeyboard({ select, groupRef: externalRef, }) {
+    /**
+     * The group's one tab stop. `tabIndex={checked ? 0 : -1}` in the markup is
+     * right for every case but the one that matters most: a group with NOTHING
+     * selected gives every radio -1, so Tab skips the whole control and an
+     * unanswered question can never be answered from the keyboard (#237). APG
+     * says the first radio is tabbable when none is checked, and RadioGroup's
+     * own comment said so too — "the selected (or first, when none) radio is
+     * tabbable" — while the code did only the first half.
+     *
+     * Owned here rather than in the markup because the group renders arbitrary
+     * children: only the DOM knows which radio comes first, which is the same
+     * reason the arrow keys read the radios out of the DOM.
+     *
+     * It runs after EVERY render, and sets both ends. React will not undo a
+     * mutation it did not make — when the selection moves, the newly checked
+     * radio changes 0 from React's side while the stale one keeps the 0 written
+     * here — so this has to own the whole row, not just add to it.
+     */
+    const ownRef = React.useRef(null);
+    const groupRef = externalRef ?? ownRef;
+    React.useLayoutEffect(() => {
+        const root = groupRef.current;
+        if (!root)
+            return;
+        const radios = Array.from(root.querySelectorAll('[role="radio"]:not([disabled])'));
+        if (!radios.length)
+            return;
+        const checked = radios.find((r) => r.getAttribute("aria-checked") === "true");
+        const stop = checked ?? radios[0];
+        for (const r of radios)
+            r.tabIndex = r === stop ? 0 : -1;
+    });
     const onKeyDown = (e) => {
         const KEYS = [
             "ArrowDown",
@@ -60,5 +93,5 @@ export function useRadioGroupKeyboard({ select, }) {
         if (value !== undefined)
             select(value);
     };
-    return { onKeyDown };
+    return { onKeyDown, groupRef };
 }

package/dist/esm/components/radiogroup/radiogroup.js

@@ -19,8 +19,8 @@ export function RadioGroup({ value, defaultValue, onValueChange, variant = "defa
             setInternal(v);
         onValueChange?.(v);
     }, [value, onValueChange]);
-    const { onKeyDown } = useRadioGroupKeyboard({ select });
-    return (_jsx(RadioContext.Provider, { value: { value: selected, select, name: groupName, variant }, children: _jsx("div", { role: "radiogroup", "aria-label": ariaLabel, "data-variant": variant, className: radiogroupRecipe({ className }), ...rest, onKeyDown: onKeyDown, children: children }) }));
+    const { onKeyDown, groupRef } = useRadioGroupKeyboard({ select });
+    return (_jsx(RadioContext.Provider, { value: { value: selected, select, name: groupName, variant }, children: _jsx("div", { ref: groupRef, role: "radiogroup", "aria-label": ariaLabel, "data-variant": variant, className: radiogroupRecipe({ className }), ...rest, onKeyDown: onKeyDown, children: children }) }));
 }
 RadioGroup.displayName = "RadioGroup";
 export function Radio({ value, label, children, disabled }) {

package/dist/esm/components/segmented/segmented.js

@@ -32,7 +32,7 @@ export function Segmented({ options, value, defaultValue, onValueChange, "aria-l
     // crisp's shared radio group model (#200). The per-button handler this
     // replaces closed over its own index, so it selected a neighbour without
     // moving focus and every press after the first recomputed the same step.
-    const { onKeyDown } = useRadioGroupKeyboard({ select });
+    const { onKeyDown } = useRadioGroupKeyboard({ select, groupRef: rootRef });
     return (_jsxs("div", { ref: rootRef, className: segmentedRecipe({ className }), ...rest, role: "radiogroup", "aria-label": ariaLabel, onKeyDown: onKeyDown, children: [thumb && (_jsx("span", { className: "segmented-thumb", "aria-hidden": "true", style: {
                     width: thumb.width,
                     transform: `translateX(${thumb.left}px)`,

package/dist/esm/components/tabs/tabs-keyboard.js

@@ -41,6 +41,15 @@ export function useTablistKeyboard({ tabs, active, select, listRef, }) {
      * arrows move within. Without this a keyboard user walks through every tab
      * one at a time, and the number of stops grows with the tab set.
      */
-    const tabIndexFor = (value) => (value === active ? 0 : -1);
+    const tabIndexFor = (value) => {
+        // ...and a group with no tab stop at all is worse than one with too many:
+        // a controlled `value` that matches no tab gave every tab -1, so Tab
+        // skipped the whole strip (#237). Fall back to the first enabled tab,
+        // which is where focus would land anyway.
+        const stop = tabs.some((t) => t.value === active && !t.disabled)
+            ? active
+            : tabs.find((t) => !t.disabled)?.value;
+        return value === stop ? 0 : -1;
+    };
     return { onKeyDown, tabIndexFor };
 }

package/dist/types/components/radiogroup/radiogroup-keyboard.d.ts

@@ -1,7 +1,13 @@
-import type * as React from "react";
+import * as React from "react";
 export type UseRadioGroupKeyboardOptions = {
     /** Select a radio by its `data-value`. */
     select: (value: string) => void;
+    /**
+     * The element carrying `role="radiogroup"`, when the surface already keeps a
+     * ref to it (Segmented measures its thumb from one). Omit it and the hook
+     * hands one back to attach.
+     */
+    groupRef?: React.RefObject<HTMLElement | null>;
 };
 /**
  * The WAI-ARIA radio group keyboard model: ←/→/↑/↓ move focus to the next or
@@ -27,6 +33,7 @@ export type UseRadioGroupKeyboardOptions = {
  * `Segmented` already offered them, and the shared model should be the union
  * rather than quietly dropping behaviour one surface had.
  */
-export declare function useRadioGroupKeyboard({ select, }: UseRadioGroupKeyboardOptions): {
+export declare function useRadioGroupKeyboard({ select, groupRef: externalRef, }: UseRadioGroupKeyboardOptions): {
     onKeyDown: (e: React.KeyboardEvent) => void;
+    groupRef: React.RefObject<HTMLElement | null>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",