@crisp-ui-kit/crisp 0.31.0 → 0.31.1

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;

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

@@ -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;

package/package.json

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