@crisp-ui-kit/crisp 0.31.0 → 0.31.2

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

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRadioGroupKeyboard = useRadioGroupKeyboard;
 const React = __importStar(require("react"));
+const core_1 = require("../../core");
 /**
  * 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
@@ -113,7 +114,11 @@ function useRadioGroupKeyboard({ select, groupRef: externalRef, }) {
         else if (e.key === "End")
             next = radios[radios.length - 1];
         else {
-            const fwd = e.key === "ArrowDown" || e.key === "ArrowRight";
+            // Down always means forward; the horizontal pair follows the direction
+            // the radios are drawn in, which for Segmented's pill row is the whole
+            // point (#255).
+            const rtl = (0, core_1.isRtlElement)(e.currentTarget);
+            const fwd = e.key === "ArrowDown" || e.key === (rtl ? "ArrowLeft" : "ArrowRight");
             // focus outside the group: enter at the near end rather than stepping
             // off an index of -1, which would land two from the back going backwards
             if (idx < 0)

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTablistKeyboard = useTablistKeyboard;
+const core_1 = require("../../core");
 /**
  * The WAI-ARIA tablist keyboard model: ←/→ to move (wrapping), Home/End to
  * jump, disabled tabs skipped, focus following selection.
@@ -20,9 +21,15 @@ function useTablistKeyboard({ tabs, active, select, listRef, }) {
             return;
         const idx = enabled.findIndex((t) => t.value === active);
         let next = -1;
-        if (e.key === "ArrowRight")
+        // The arrows follow the strip as it is drawn: under RTL the next tab is to
+        // the LEFT, so the keys swap. Everything else about the model is unchanged
+        // (#255).
+        const rtl = (0, core_1.isRtlElement)(e.currentTarget);
+        const forwardKey = rtl ? "ArrowLeft" : "ArrowRight";
+        const backKey = rtl ? "ArrowRight" : "ArrowLeft";
+        if (e.key === forwardKey)
             next = (idx + 1) % enabled.length;
-        else if (e.key === "ArrowLeft")
+        else if (e.key === backKey)
             next = (idx - 1 + enabled.length) % enabled.length;
         else if (e.key === "Home")
             next = 0;

package/dist/cjs/product/board/board.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Board = Board;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
+const core_1 = require("../../core");
 const board_recipe_1 = require("./board.recipe");
 /**
  * A kanban board with native drag-and-drop between columns. Cards are
@@ -108,11 +109,12 @@ function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLa
                                     }, onKeyDown: (e) => {
                                         if (!(e.ctrlKey || e.metaKey))
                                             return;
-                                        const delta = e.key === "ArrowLeft"
-                                            ? -1
-                                            : e.key === "ArrowRight"
-                                                ? 1
-                                                : 0;
+                                        // the columns are a flex row, so under RTL the next one
+                                        // is to the LEFT and the keys swap (#255)
+                                        const rtl = (0, core_1.isRtlElement)(e.currentTarget);
+                                        const forwardKey = rtl ? "ArrowLeft" : "ArrowRight";
+                                        const backKey = rtl ? "ArrowRight" : "ArrowLeft";
+                                        const delta = e.key === backKey ? -1 : e.key === forwardKey ? 1 : 0;
                                         // only swallow the key when the move actually happens, so
                                         // Ctrl+Right at the last column still reaches the browser
                                         if (delta && moveByKey(card, delta))

package/dist/cjs/product/recordpage/recordpage.js

@@ -414,10 +414,15 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
                                                         if (!next)
                                                             setFieldQuery("");
                                                     }, children: showAllValues ? t.viewLess : t.viewAllValues }))] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "recordpage-noresults", children: ["No fields match \u201C", fieldQuery, "\u201D."] })))] }), (0, jsx_runtime_1.jsxs)("div", { className: "recordpage-section", children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.lists, action: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordpage-addbtn", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), (0, jsx_runtime_1.jsx)("div", { className: "recordpage-emptystate", children: t.noLists })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "recordpage-resizer", "data-active": resizing ? "" : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": t.resizeDetails, "aria-valuenow": Math.round(detailsW), "aria-valuemin": 300, "aria-valuemax": 560, tabIndex: 0, onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onKeyDown: (e) => {
-                            if (e.key === "ArrowLeft")
-                                setDetailsW((w) => Math.max(300, w - 16));
-                            else if (e.key === "ArrowRight")
-                                setDetailsW((w) => Math.min(560, w + 16));
+                            if (e.key !== "ArrowLeft" && e.key !== "ArrowRight")
+                                return;
+                            // The pointer drag learned its direction in #212; this did not.
+                            // The details column is the flex row's first child, so it sits on
+                            // the RIGHT under RTL and ArrowLeft has to grow it — the same
+                            // half-conversion the drag had, one handler away (#255).
+                            const rtl = (0, core_1.isRtlElement)(e.currentTarget);
+                            const grow = e.key === (rtl ? "ArrowLeft" : "ArrowRight");
+                            setDetailsW((w) => grow ? Math.min(560, w + 16) : Math.max(300, w - 16));
                         } }), (0, jsx_runtime_1.jsx)("main", { className: "recordpage-main", children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: tabs, defaultValue: "overview", "aria-label": `${name} record`, children: panel }) })] })] }));
 }
 RecordPage.displayName = "RecordPage";

package/dist/cjs/product/recordstable/recordstable.js

@@ -640,10 +640,15 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
             nr = Math.max(0, r - 1);
         else if (e.key === "ArrowDown")
             nr = Math.min(visibleRows.length - 1, r + 1);
-        else if (e.key === "ArrowLeft")
-            nc = Math.max(0, c - 1);
-        else if (e.key === "ArrowRight")
-            nc = Math.min(cols.length - 1, c + 1);
+        // The arrows follow what the user SEES. Under RTL the first column renders
+        // rightmost, so ArrowLeft moves to the next column and ArrowRight to the
+        // previous — the grid's own half-conversion, of the same kind the resize
+        // grips had (#255).
+        else if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+            const rtl = (0, core_1.isRtlElement)(e.currentTarget);
+            const forward = e.key === (rtl ? "ArrowLeft" : "ArrowRight");
+            nc = forward ? Math.min(cols.length - 1, c + 1) : Math.max(0, c - 1);
+        }
         else if (e.key === "Escape") {
             setSelCell(null);
             return;
@@ -716,6 +721,36 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
     const setSortField = (i, key) => setSorts(sorts.map((s, j) => (j === i ? { ...s, key } : s)));
     const setSortDir = (i, dir) => setSorts(sorts.map((s, j) => (j === i ? { ...s, dir } : s)));
     const removeSort = (i) => setSorts(sorts.filter((_, j) => j !== i));
+    /**
+     * Keep the selected cell on screen.
+     *
+     * Focus stays on the scroll region, never on a cell, so the browser has
+     * nothing to scroll to: the arrow keys moved the outline and the viewport
+     * stayed put. Measured in Chrome on a 384px-tall region over 40 rows —
+     * twenty ArrowDowns left `scrollTop` at 0 with the selected cell 761px below
+     * the top edge, i.e. the user was driving a selection they could not see
+     * (#257).
+     *
+     * `nearest` on both axes: a cell already in view is left exactly where it
+     * is, which is what makes this safe to run after a click too.
+     *
+     * No `behavior` of our own — the page's `scroll-behavior` decides, and Attio
+     * jumps rather than glides — except under reduced motion, where an explicit
+     * "auto" is the only thing that beats a host page that set
+     * `scroll-behavior: smooth` on the scroller (#208's rule: JS motion reads
+     * the preference itself, because CSS cannot reach an explicit argument).
+     */
+    const reduceMotion = (0, core_1.usePrefersReducedMotion)();
+    React.useEffect(() => {
+        if (!selCell)
+            return;
+        const cell = scrollRef.current?.querySelector(`[data-cell="${CSS.escape(`${selCell.id}:${selCell.key}`)}"]`);
+        cell?.scrollIntoView({
+            block: "nearest",
+            inline: "nearest",
+            ...(reduceMotion ? { behavior: "auto" } : null),
+        });
+    }, [selCell, reduceMotion]);
     const commitEdit = (id, key, raw) => {
         const col = cols.find((c) => c.key === key);
         const numeric = col?.type === "number" || col?.type === "currency";
@@ -1064,7 +1099,7 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
                                             // row instead of a bare "182,000", and the same header is
                                             // repeated in every cell's context (#231).
                                             const Cell = (i === 0 ? "th" : "td");
-                                            return ((0, jsx_runtime_1.jsxs)(Cell, { scope: i === 0 ? "row" : undefined, className: `recordstable-td${i === 0 ? " recordstable-col-entity" : ""}${canEdit ? " recordstable-td--editable" : ""}${isPicker ? " recordstable-td--picker" : ""}`, "data-enriched": col.enriched ? "" : undefined, "data-selected": selCell?.id === row.id && selCell?.key === col.key
+                                            return ((0, jsx_runtime_1.jsxs)(Cell, { scope: i === 0 ? "row" : undefined, "data-cell": `${row.id}:${col.key}`, className: `recordstable-td${i === 0 ? " recordstable-col-entity" : ""}${canEdit ? " recordstable-td--editable" : ""}${isPicker ? " recordstable-td--picker" : ""}`, "data-enriched": col.enriched ? "" : undefined, "data-selected": selCell?.id === row.id && selCell?.key === col.key
                                                     ? ""
                                                     : undefined, onClick: () => {
                                                     if (isPicker)

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { isRtlElement } from "../../core/index.js";
 /**
  * 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
@@ -77,7 +78,11 @@ export function useRadioGroupKeyboard({ select, groupRef: externalRef, }) {
         else if (e.key === "End")
             next = radios[radios.length - 1];
         else {
-            const fwd = e.key === "ArrowDown" || e.key === "ArrowRight";
+            // Down always means forward; the horizontal pair follows the direction
+            // the radios are drawn in, which for Segmented's pill row is the whole
+            // point (#255).
+            const rtl = isRtlElement(e.currentTarget);
+            const fwd = e.key === "ArrowDown" || e.key === (rtl ? "ArrowLeft" : "ArrowRight");
             // focus outside the group: enter at the near end rather than stepping
             // off an index of -1, which would land two from the back going backwards
             if (idx < 0)

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

@@ -1,3 +1,4 @@
+import { isRtlElement } from "../../core/index.js";
 /**
  * The WAI-ARIA tablist keyboard model: ←/→ to move (wrapping), Home/End to
  * jump, disabled tabs skipped, focus following selection.
@@ -17,9 +18,15 @@ export function useTablistKeyboard({ tabs, active, select, listRef, }) {
             return;
         const idx = enabled.findIndex((t) => t.value === active);
         let next = -1;
-        if (e.key === "ArrowRight")
+        // The arrows follow the strip as it is drawn: under RTL the next tab is to
+        // the LEFT, so the keys swap. Everything else about the model is unchanged
+        // (#255).
+        const rtl = isRtlElement(e.currentTarget);
+        const forwardKey = rtl ? "ArrowLeft" : "ArrowRight";
+        const backKey = rtl ? "ArrowRight" : "ArrowLeft";
+        if (e.key === forwardKey)
             next = (idx + 1) % enabled.length;
-        else if (e.key === "ArrowLeft")
+        else if (e.key === backKey)
             next = (idx - 1 + enabled.length) % enabled.length;
         else if (e.key === "Home")
             next = 0;

package/dist/esm/product/board/board.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { isRtlElement } from "../../core/index.js";
 import { boardRecipe } from "./board.recipe.js";
 /**
  * A kanban board with native drag-and-drop between columns. Cards are
@@ -72,11 +73,12 @@ export function Board({ columns, cards, onCardsChange, renderCard, onNewCard, ne
                                     }, onKeyDown: (e) => {
                                         if (!(e.ctrlKey || e.metaKey))
                                             return;
-                                        const delta = e.key === "ArrowLeft"
-                                            ? -1
-                                            : e.key === "ArrowRight"
-                                                ? 1
-                                                : 0;
+                                        // the columns are a flex row, so under RTL the next one
+                                        // is to the LEFT and the keys swap (#255)
+                                        const rtl = isRtlElement(e.currentTarget);
+                                        const forwardKey = rtl ? "ArrowLeft" : "ArrowRight";
+                                        const backKey = rtl ? "ArrowRight" : "ArrowLeft";
+                                        const delta = e.key === backKey ? -1 : e.key === forwardKey ? 1 : 0;
                                         // only swallow the key when the move actually happens, so
                                         // Ctrl+Right at the last column still reaches the browser
                                         if (delta && moveByKey(card, delta))

package/dist/esm/product/recordpage/recordpage.js

@@ -377,10 +377,15 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
                                                         if (!next)
                                                             setFieldQuery("");
                                                     }, children: showAllValues ? t.viewLess : t.viewAllValues }))] })) : (_jsxs("div", { className: "recordpage-noresults", children: ["No fields match \u201C", fieldQuery, "\u201D."] })))] }), _jsxs("div", { className: "recordpage-section", children: [_jsx(SectionHead, { title: t.tabs.lists, action: _jsxs("button", { type: "button", className: "recordpage-addbtn", children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), _jsx("div", { className: "recordpage-emptystate", children: t.noLists })] })] }), _jsx("div", { className: "recordpage-resizer", "data-active": resizing ? "" : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": t.resizeDetails, "aria-valuenow": Math.round(detailsW), "aria-valuemin": 300, "aria-valuemax": 560, tabIndex: 0, onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onKeyDown: (e) => {
-                            if (e.key === "ArrowLeft")
-                                setDetailsW((w) => Math.max(300, w - 16));
-                            else if (e.key === "ArrowRight")
-                                setDetailsW((w) => Math.min(560, w + 16));
+                            if (e.key !== "ArrowLeft" && e.key !== "ArrowRight")
+                                return;
+                            // The pointer drag learned its direction in #212; this did not.
+                            // The details column is the flex row's first child, so it sits on
+                            // the RIGHT under RTL and ArrowLeft has to grow it — the same
+                            // half-conversion the drag had, one handler away (#255).
+                            const rtl = isRtlElement(e.currentTarget);
+                            const grow = e.key === (rtl ? "ArrowLeft" : "ArrowRight");
+                            setDetailsW((w) => grow ? Math.min(560, w + 16) : Math.max(300, w - 16));
                         } }), _jsx("main", { className: "recordpage-main", children: _jsx(Tabs, { tabs: tabs, defaultValue: "overview", "aria-label": `${name} record`, children: panel }) })] })] }));
 }
 RecordPage.displayName = "RecordPage";

package/dist/esm/product/recordstable/recordstable.js

@@ -14,7 +14,7 @@ import { Menu, MenuItem, useMenuKeyboard } from "../../components/menu/index.js"
 import { MultiSelect } from "../../components/multiselect/index.js";
 import { Select } from "../../components/select/index.js";
 import { Switch } from "../../components/switch/index.js";
-import { isRtlElement } from "../../core/index.js";
+import { isRtlElement, usePrefersReducedMotion } from "../../core/index.js";
 import { companyLogos } from "./company-logos.js";
 import { recordstableRecipe } from "./recordstable.recipe.js";
 const EDITABLE = new Set(["text", "number", "url", "currency"]);
@@ -600,10 +600,15 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
             nr = Math.max(0, r - 1);
         else if (e.key === "ArrowDown")
             nr = Math.min(visibleRows.length - 1, r + 1);
-        else if (e.key === "ArrowLeft")
-            nc = Math.max(0, c - 1);
-        else if (e.key === "ArrowRight")
-            nc = Math.min(cols.length - 1, c + 1);
+        // The arrows follow what the user SEES. Under RTL the first column renders
+        // rightmost, so ArrowLeft moves to the next column and ArrowRight to the
+        // previous — the grid's own half-conversion, of the same kind the resize
+        // grips had (#255).
+        else if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+            const rtl = isRtlElement(e.currentTarget);
+            const forward = e.key === (rtl ? "ArrowLeft" : "ArrowRight");
+            nc = forward ? Math.min(cols.length - 1, c + 1) : Math.max(0, c - 1);
+        }
         else if (e.key === "Escape") {
             setSelCell(null);
             return;
@@ -676,6 +681,36 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
     const setSortField = (i, key) => setSorts(sorts.map((s, j) => (j === i ? { ...s, key } : s)));
     const setSortDir = (i, dir) => setSorts(sorts.map((s, j) => (j === i ? { ...s, dir } : s)));
     const removeSort = (i) => setSorts(sorts.filter((_, j) => j !== i));
+    /**
+     * Keep the selected cell on screen.
+     *
+     * Focus stays on the scroll region, never on a cell, so the browser has
+     * nothing to scroll to: the arrow keys moved the outline and the viewport
+     * stayed put. Measured in Chrome on a 384px-tall region over 40 rows —
+     * twenty ArrowDowns left `scrollTop` at 0 with the selected cell 761px below
+     * the top edge, i.e. the user was driving a selection they could not see
+     * (#257).
+     *
+     * `nearest` on both axes: a cell already in view is left exactly where it
+     * is, which is what makes this safe to run after a click too.
+     *
+     * No `behavior` of our own — the page's `scroll-behavior` decides, and Attio
+     * jumps rather than glides — except under reduced motion, where an explicit
+     * "auto" is the only thing that beats a host page that set
+     * `scroll-behavior: smooth` on the scroller (#208's rule: JS motion reads
+     * the preference itself, because CSS cannot reach an explicit argument).
+     */
+    const reduceMotion = usePrefersReducedMotion();
+    React.useEffect(() => {
+        if (!selCell)
+            return;
+        const cell = scrollRef.current?.querySelector(`[data-cell="${CSS.escape(`${selCell.id}:${selCell.key}`)}"]`);
+        cell?.scrollIntoView({
+            block: "nearest",
+            inline: "nearest",
+            ...(reduceMotion ? { behavior: "auto" } : null),
+        });
+    }, [selCell, reduceMotion]);
     const commitEdit = (id, key, raw) => {
         const col = cols.find((c) => c.key === key);
         const numeric = col?.type === "number" || col?.type === "currency";
@@ -1024,7 +1059,7 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
                                             // row instead of a bare "182,000", and the same header is
                                             // repeated in every cell's context (#231).
                                             const Cell = (i === 0 ? "th" : "td");
-                                            return (_jsxs(Cell, { scope: i === 0 ? "row" : undefined, className: `recordstable-td${i === 0 ? " recordstable-col-entity" : ""}${canEdit ? " recordstable-td--editable" : ""}${isPicker ? " recordstable-td--picker" : ""}`, "data-enriched": col.enriched ? "" : undefined, "data-selected": selCell?.id === row.id && selCell?.key === col.key
+                                            return (_jsxs(Cell, { scope: i === 0 ? "row" : undefined, "data-cell": `${row.id}:${col.key}`, className: `recordstable-td${i === 0 ? " recordstable-col-entity" : ""}${canEdit ? " recordstable-td--editable" : ""}${isPicker ? " recordstable-td--picker" : ""}`, "data-enriched": col.enriched ? "" : undefined, "data-selected": selCell?.id === row.id && selCell?.key === col.key
                                                     ? ""
                                                     : undefined, onClick: () => {
                                                     if (isPicker)

package/package.json

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