@crisp-ui-kit/crisp 0.16.0 → 0.16.1

package/dist/cjs/components/multiselect/multiselect.js

@@ -37,6 +37,7 @@ exports.MultiSelect = MultiSelect;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
+const select_1 = require("../select");
 const multiselect_recipe_1 = require("./multiselect.recipe");
 const TONES = [
     "brand",
@@ -122,26 +123,24 @@ function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, p
             setInternalValue(next);
         onValueChange?.(next);
     };
-    const onNavKeys = (e) => {
-        if (e.key === "ArrowDown") {
-            e.preventDefault();
-            setHighlight((h) => Math.min(h + 1, filtered.length - 1));
-        }
-        else if (e.key === "ArrowUp") {
-            e.preventDefault();
-            setHighlight((h) => Math.max(h - 1, 0));
-        }
-        else if (e.key === "Enter") {
-            e.preventDefault();
+    // crisp's shared popup-listbox model (#198). Hand-rolling a second one is
+    // how MultiSelect ended up with no Home/End, arrows that dead-end instead of
+    // wrapping, and a popup left open behind a Tab — while Select, the same
+    // widget with single selection, had all three.
+    const { onKeyDown: onNavKeys } = (0, select_1.useListboxKeyboard)({
+        // every rendered option is selectable: MultiSelect has no disabled state
+        enabledIndexes: filtered.map((_, i) => i),
+        highlight,
+        setHighlight,
+        commit: () => {
             const opt = filtered[highlight];
             if (opt)
                 toggle(opt.value);
-        }
-        else if (e.key === "Escape") {
-            e.preventDefault();
-            close();
-        }
-    };
+        },
+        close,
+        // Tab is already moving focus out; `close` would drag it back to the trigger
+        dismiss: () => setOpen(false),
+    });
     React.useEffect(() => {
         if (!open)
             return;

package/dist/cjs/components/select/index.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.selectRecipe = exports.Select = void 0;
+exports.selectRecipe = exports.Select = exports.useListboxKeyboard = void 0;
+var listbox_keyboard_1 = require("./listbox-keyboard");
+Object.defineProperty(exports, "useListboxKeyboard", { enumerable: true, get: function () { return listbox_keyboard_1.useListboxKeyboard; } });
 var select_1 = require("./select");
 Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return select_1.Select; } });
 var select_recipe_1 = require("./select.recipe");

package/dist/cjs/components/select/listbox-keyboard.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useListboxKeyboard = useListboxKeyboard;
+/**
+ * The WAI-ARIA listbox keyboard model for a POPUP listbox: ↑/↓ to move the
+ * highlight (wrapping, skipping disabled options), Home/End to jump, Enter to
+ * choose, Escape to close, Tab to dismiss.
+ *
+ * Extracted from `Select`, whose set was the complete one, so `MultiSelect` —
+ * the same widget with multiple selection — stops being a second partial copy
+ * that had no Home/End and stayed open on Tab (#198). The same reason
+ * `useMenuKeyboard` and `useTablistKeyboard` exist.
+ *
+ * NOT for `WheelPicker`: that is an always-visible multi-column wheel that
+ * commits on move, so Enter, Escape and Tab have no meaning in it.
+ */
+function useListboxKeyboard({ enabledIndexes, highlight, setHighlight, commit, close, dismiss = close, }) {
+    const move = (dir) => {
+        if (enabledIndexes.length === 0)
+            return;
+        const pos = enabledIndexes.indexOf(highlight);
+        // nothing highlighted yet: ↓ enters at the top, ↑ at the bottom
+        const nextPos = pos < 0
+            ? dir > 0
+                ? 0
+                : enabledIndexes.length - 1
+            : (pos + dir + enabledIndexes.length) % enabledIndexes.length;
+        setHighlight(enabledIndexes[nextPos] ?? 0);
+    };
+    const onKeyDown = (e) => {
+        switch (e.key) {
+            case "ArrowDown":
+                e.preventDefault();
+                move(1);
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                move(-1);
+                break;
+            case "Home":
+                e.preventDefault();
+                // the `?? 0` these used to end in armed option 0 on a list with no
+                // options — the arrows guarded against that and Home/End did not
+                if (enabledIndexes.length)
+                    setHighlight(enabledIndexes[0]);
+                break;
+            case "End":
+                e.preventDefault();
+                if (enabledIndexes.length)
+                    setHighlight(enabledIndexes[enabledIndexes.length - 1]);
+                break;
+            case "Enter":
+                e.preventDefault();
+                commit();
+                break;
+            case "Escape":
+                e.preventDefault();
+                close();
+                break;
+            case "Tab":
+                // not preventDefault: Tab must still move focus, it just must not
+                // leave an open popup floating behind it
+                dismiss();
+                break;
+        }
+    };
+    return { onKeyDown };
+}

package/dist/cjs/components/select/select.js

@@ -37,6 +37,7 @@ exports.Select = Select;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
+const listbox_keyboard_1 = require("./listbox-keyboard");
 const select_recipe_1 = require("./select.recipe");
 function optionText(o) {
     if (o.keywords)
@@ -116,48 +117,14 @@ function Select({ options, value, defaultValue, onValueChange, placeholder = "Se
         setOpen(false);
         triggerRef.current?.focus({ preventScroll: true });
     };
-    const moveHighlight = (dir) => {
-        if (enabledIndexes.length === 0)
-            return;
-        const pos = enabledIndexes.indexOf(highlight);
-        const nextPos = pos < 0
-            ? dir > 0
-                ? 0
-                : enabledIndexes.length - 1
-            : (pos + dir + enabledIndexes.length) % enabledIndexes.length;
-        setHighlight(enabledIndexes[nextPos] ?? 0);
-    };
-    const onNavKeys = (e) => {
-        switch (e.key) {
-            case "ArrowDown":
-                e.preventDefault();
-                moveHighlight(1);
-                break;
-            case "ArrowUp":
-                e.preventDefault();
-                moveHighlight(-1);
-                break;
-            case "Home":
-                e.preventDefault();
-                setHighlight(enabledIndexes[0] ?? 0);
-                break;
-            case "End":
-                e.preventDefault();
-                setHighlight(enabledIndexes[enabledIndexes.length - 1] ?? 0);
-                break;
-            case "Enter":
-                e.preventDefault();
-                pick(filtered[highlight]);
-                break;
-            case "Escape":
-                e.preventDefault();
-                close();
-                break;
-            case "Tab":
-                setOpen(false);
-                break;
-        }
-    };
+    const { onKeyDown: onNavKeys } = (0, listbox_keyboard_1.useListboxKeyboard)({
+        enabledIndexes,
+        highlight,
+        setHighlight,
+        commit: () => pick(filtered[highlight]),
+        close,
+        dismiss: () => setOpen(false),
+    });
     const onTriggerKeyDown = (e) => {
         if (!open) {
             if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {

package/dist/esm/components/multiselect/multiselect.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown, Search } from "lucide-react";
 import * as React from "react";
+import { useListboxKeyboard } from "../select/index.js";
 import { multiselectRecipe } from "./multiselect.recipe.js";
 const TONES = [
     "brand",
@@ -86,26 +87,24 @@ export function MultiSelect({ options, value: valueProp, defaultValue, onValueCh
             setInternalValue(next);
         onValueChange?.(next);
     };
-    const onNavKeys = (e) => {
-        if (e.key === "ArrowDown") {
-            e.preventDefault();
-            setHighlight((h) => Math.min(h + 1, filtered.length - 1));
-        }
-        else if (e.key === "ArrowUp") {
-            e.preventDefault();
-            setHighlight((h) => Math.max(h - 1, 0));
-        }
-        else if (e.key === "Enter") {
-            e.preventDefault();
+    // crisp's shared popup-listbox model (#198). Hand-rolling a second one is
+    // how MultiSelect ended up with no Home/End, arrows that dead-end instead of
+    // wrapping, and a popup left open behind a Tab — while Select, the same
+    // widget with single selection, had all three.
+    const { onKeyDown: onNavKeys } = useListboxKeyboard({
+        // every rendered option is selectable: MultiSelect has no disabled state
+        enabledIndexes: filtered.map((_, i) => i),
+        highlight,
+        setHighlight,
+        commit: () => {
             const opt = filtered[highlight];
             if (opt)
                 toggle(opt.value);
-        }
-        else if (e.key === "Escape") {
-            e.preventDefault();
-            close();
-        }
-    };
+        },
+        close,
+        // Tab is already moving focus out; `close` would drag it back to the trigger
+        dismiss: () => setOpen(false),
+    });
     React.useEffect(() => {
         if (!open)
             return;

package/dist/esm/components/select/index.js

@@ -1,2 +1,3 @@
+export { useListboxKeyboard, } from "./listbox-keyboard.js";
 export { Select } from "./select.js";
 export { selectRecipe } from "./select.recipe.js";

package/dist/esm/components/select/listbox-keyboard.js

@@ -0,0 +1,65 @@
+/**
+ * The WAI-ARIA listbox keyboard model for a POPUP listbox: ↑/↓ to move the
+ * highlight (wrapping, skipping disabled options), Home/End to jump, Enter to
+ * choose, Escape to close, Tab to dismiss.
+ *
+ * Extracted from `Select`, whose set was the complete one, so `MultiSelect` —
+ * the same widget with multiple selection — stops being a second partial copy
+ * that had no Home/End and stayed open on Tab (#198). The same reason
+ * `useMenuKeyboard` and `useTablistKeyboard` exist.
+ *
+ * NOT for `WheelPicker`: that is an always-visible multi-column wheel that
+ * commits on move, so Enter, Escape and Tab have no meaning in it.
+ */
+export function useListboxKeyboard({ enabledIndexes, highlight, setHighlight, commit, close, dismiss = close, }) {
+    const move = (dir) => {
+        if (enabledIndexes.length === 0)
+            return;
+        const pos = enabledIndexes.indexOf(highlight);
+        // nothing highlighted yet: ↓ enters at the top, ↑ at the bottom
+        const nextPos = pos < 0
+            ? dir > 0
+                ? 0
+                : enabledIndexes.length - 1
+            : (pos + dir + enabledIndexes.length) % enabledIndexes.length;
+        setHighlight(enabledIndexes[nextPos] ?? 0);
+    };
+    const onKeyDown = (e) => {
+        switch (e.key) {
+            case "ArrowDown":
+                e.preventDefault();
+                move(1);
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                move(-1);
+                break;
+            case "Home":
+                e.preventDefault();
+                // the `?? 0` these used to end in armed option 0 on a list with no
+                // options — the arrows guarded against that and Home/End did not
+                if (enabledIndexes.length)
+                    setHighlight(enabledIndexes[0]);
+                break;
+            case "End":
+                e.preventDefault();
+                if (enabledIndexes.length)
+                    setHighlight(enabledIndexes[enabledIndexes.length - 1]);
+                break;
+            case "Enter":
+                e.preventDefault();
+                commit();
+                break;
+            case "Escape":
+                e.preventDefault();
+                close();
+                break;
+            case "Tab":
+                // not preventDefault: Tab must still move focus, it just must not
+                // leave an open popup floating behind it
+                dismiss();
+                break;
+        }
+    };
+    return { onKeyDown };
+}

package/dist/esm/components/select/select.js

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown, Search } from "lucide-react";
 import * as React from "react";
+import { useListboxKeyboard } from "./listbox-keyboard.js";
 import { selectRecipe } from "./select.recipe.js";
 function optionText(o) {
     if (o.keywords)
@@ -80,48 +81,14 @@ export function Select({ options, value, defaultValue, onValueChange, placeholde
         setOpen(false);
         triggerRef.current?.focus({ preventScroll: true });
     };
-    const moveHighlight = (dir) => {
-        if (enabledIndexes.length === 0)
-            return;
-        const pos = enabledIndexes.indexOf(highlight);
-        const nextPos = pos < 0
-            ? dir > 0
-                ? 0
-                : enabledIndexes.length - 1
-            : (pos + dir + enabledIndexes.length) % enabledIndexes.length;
-        setHighlight(enabledIndexes[nextPos] ?? 0);
-    };
-    const onNavKeys = (e) => {
-        switch (e.key) {
-            case "ArrowDown":
-                e.preventDefault();
-                moveHighlight(1);
-                break;
-            case "ArrowUp":
-                e.preventDefault();
-                moveHighlight(-1);
-                break;
-            case "Home":
-                e.preventDefault();
-                setHighlight(enabledIndexes[0] ?? 0);
-                break;
-            case "End":
-                e.preventDefault();
-                setHighlight(enabledIndexes[enabledIndexes.length - 1] ?? 0);
-                break;
-            case "Enter":
-                e.preventDefault();
-                pick(filtered[highlight]);
-                break;
-            case "Escape":
-                e.preventDefault();
-                close();
-                break;
-            case "Tab":
-                setOpen(false);
-                break;
-        }
-    };
+    const { onKeyDown: onNavKeys } = useListboxKeyboard({
+        enabledIndexes,
+        highlight,
+        setHighlight,
+        commit: () => pick(filtered[highlight]),
+        close,
+        dismiss: () => setOpen(false),
+    });
     const onTriggerKeyDown = (e) => {
         if (!open) {
             if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {

package/dist/types/components/select/index.d.ts

@@ -1,2 +1,3 @@
+export { type UseListboxKeyboardOptions, useListboxKeyboard, } from "./listbox-keyboard";
 export { Select, type SelectOption, type SelectProps } from "./select";
 export { selectRecipe } from "./select.recipe";

package/dist/types/components/select/listbox-keyboard.d.ts

@@ -0,0 +1,38 @@
+import type * as React from "react";
+export type UseListboxKeyboardOptions = {
+    /**
+     * Indexes into the rendered option list that may be highlighted, in order.
+     * Disabled options are left out, so the arrows step over them rather than
+     * landing on something that cannot be chosen.
+     */
+    enabledIndexes: number[];
+    /** The highlighted index, or -1 when nothing is highlighted yet. */
+    highlight: number;
+    setHighlight: (index: number) => void;
+    /** Choose the highlighted option. Enter. */
+    commit: () => void;
+    /** Close the popup. Escape. */
+    close: () => void;
+    /**
+     * Close WITHOUT the focus handling `close` does, for Tab — the browser is
+     * already moving focus to the next element, so anything that pulls it back
+     * lands the user in the wrong place. Defaults to `close`.
+     */
+    dismiss?: () => void;
+};
+/**
+ * The WAI-ARIA listbox keyboard model for a POPUP listbox: ↑/↓ to move the
+ * highlight (wrapping, skipping disabled options), Home/End to jump, Enter to
+ * choose, Escape to close, Tab to dismiss.
+ *
+ * Extracted from `Select`, whose set was the complete one, so `MultiSelect` —
+ * the same widget with multiple selection — stops being a second partial copy
+ * that had no Home/End and stayed open on Tab (#198). The same reason
+ * `useMenuKeyboard` and `useTablistKeyboard` exist.
+ *
+ * NOT for `WheelPicker`: that is an always-visible multi-column wheel that
+ * commits on move, so Enter, Escape and Tab have no meaning in it.
+ */
+export declare function useListboxKeyboard({ enabledIndexes, highlight, setHighlight, commit, close, dismiss, }: UseListboxKeyboardOptions): {
+    onKeyDown: (e: React.KeyboardEvent) => void;
+};

package/package.json

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