@crisp-ui-kit/crisp 0.31.1 → 0.31.3

package/dist/cjs/components/datatable/datatable.js

@@ -37,6 +37,7 @@ exports.DataTable = DataTable;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
+const core_1 = require("../../core");
 const checkbox_1 = require("../checkbox");
 const menu_1 = require("../menu");
 const table_1 = require("../table");
@@ -365,10 +366,13 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
             nr = Math.max(0, r - 1);
         else if (e.key === "ArrowDown")
             nr = Math.min(rows.length - 1, r + 1);
-        else if (e.key === "ArrowLeft")
-            nc = Math.max(0, c - 1);
-        else if (e.key === "ArrowRight")
-            nc = Math.min(columns.length - 1, c + 1);
+        // The arrows follow what the user SEES: under RTL the first column renders
+        // rightmost, so ArrowLeft steps forward and ArrowRight steps back (#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(columns.length - 1, c + 1) : Math.max(0, c - 1);
+        }
         else if (e.key === "Escape") {
             setSelCell(null);
             return;
@@ -426,6 +430,11 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
             key: col.key,
             startX: e.clientX,
             startW: colWidth(col),
+            // The columns reverse under RTL, so the grip — anchored at
+            // `inset-inline-end` — lands on the column's LEFT edge there, and
+            // pulling it further left must GROW the column. `clientX` stays
+            // physical, so the sign is the other half of that conversion (#214).
+            dir: (0, core_1.isRtlElement)(e.currentTarget) ? -1 : 1,
         };
         setResizingKey(col.key);
     }
@@ -433,7 +442,7 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
         const r = resizeRef.current;
         if (!r)
             return;
-        const w = Math.max(64, r.startW + (e.clientX - r.startX));
+        const w = Math.max(64, r.startW + r.dir * (e.clientX - r.startX));
         setWidths((prev) => ({ ...prev, [r.key]: w }));
     }
     function endResize(e) {

package/dist/cjs/components/datatable/datatable.recipe.js

@@ -73,8 +73,8 @@ const config = (0, core_1.defineRecipe)({
     /* fixed layout so column widths (and resize) are exact — like RecordsTable */
     & table { table-layout: fixed; }
     /* column resize grip */
-    & .datatable-resize { position: absolute; top: 0; right: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
-    & .datatable-resize::after { content: ""; position: absolute; top: 0; left: 3px; width: 2px; height: 100%; background: ${tokens_1.contract.bgBrandSolid}; opacity: 0; transition: opacity .12s; }
+    & .datatable-resize { position: absolute; top: 0; inset-inline-end: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
+    & .datatable-resize::after { content: ""; position: absolute; top: 0; inset-inline-start: 3px; width: 2px; height: 100%; background: ${tokens_1.contract.bgBrandSolid}; opacity: 0; transition: opacity .12s; }
     & .datatable-resize:hover::after, & .datatable-resize[data-resizing]::after { opacity: 1; }
     /* typed cells — entity (avatar + name), colour-coded tags, numbers, dates */
     & .datatable-entity { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; min-width: 0; color: ${tokens_1.contract.fgPrimary}; font-weight: ${tokens_1.contract.weight.medium}; }

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

@@ -721,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";
@@ -1069,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/datatable.css

@@ -63,8 +63,8 @@
     /* fixed layout so column widths (and resize) are exact — like RecordsTable */
     & table { table-layout: fixed; }
     /* column resize grip */
-    & .datatable-resize { position: absolute; top: 0; right: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
-    & .datatable-resize::after { content: ""; position: absolute; top: 0; left: 3px; width: 2px; height: 100%; background: var(--bg-brand-solid); opacity: 0; transition: opacity .12s; }
+    & .datatable-resize { position: absolute; top: 0; inset-inline-end: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
+    & .datatable-resize::after { content: ""; position: absolute; top: 0; inset-inline-start: 3px; width: 2px; height: 100%; background: var(--bg-brand-solid); opacity: 0; transition: opacity .12s; }
     & .datatable-resize:hover::after, & .datatable-resize[data-resizing]::after { opacity: 1; }
     /* typed cells — entity (avatar + name), colour-coded tags, numbers, dates */
     & .datatable-entity { display: flex; align-items: center; gap: var(--space-1-5); min-width: 0; color: var(--fg-primary); font-weight: var(--weight-medium); }

package/dist/esm/components/datatable/datatable.js

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowDown, ArrowUp, Check, ChevronsUpDown, GripVertical, Plus, Search, SlidersHorizontal, } from "lucide-react";
 import * as React from "react";
+import { isRtlElement } from "../../core/index.js";
 import { Checkbox } from "../checkbox/index.js";
 import { Menu, MenuItem } from "../menu/index.js";
 import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "../table/index.js";
@@ -329,10 +330,13 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
             nr = Math.max(0, r - 1);
         else if (e.key === "ArrowDown")
             nr = Math.min(rows.length - 1, r + 1);
-        else if (e.key === "ArrowLeft")
-            nc = Math.max(0, c - 1);
-        else if (e.key === "ArrowRight")
-            nc = Math.min(columns.length - 1, c + 1);
+        // The arrows follow what the user SEES: under RTL the first column renders
+        // rightmost, so ArrowLeft steps forward and ArrowRight steps back (#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(columns.length - 1, c + 1) : Math.max(0, c - 1);
+        }
         else if (e.key === "Escape") {
             setSelCell(null);
             return;
@@ -390,6 +394,11 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
             key: col.key,
             startX: e.clientX,
             startW: colWidth(col),
+            // The columns reverse under RTL, so the grip — anchored at
+            // `inset-inline-end` — lands on the column's LEFT edge there, and
+            // pulling it further left must GROW the column. `clientX` stays
+            // physical, so the sign is the other half of that conversion (#214).
+            dir: isRtlElement(e.currentTarget) ? -1 : 1,
         };
         setResizingKey(col.key);
     }
@@ -397,7 +406,7 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
         const r = resizeRef.current;
         if (!r)
             return;
-        const w = Math.max(64, r.startW + (e.clientX - r.startX));
+        const w = Math.max(64, r.startW + r.dir * (e.clientX - r.startX));
         setWidths((prev) => ({ ...prev, [r.key]: w }));
     }
     function endResize(e) {

package/dist/esm/components/datatable/datatable.recipe.js

@@ -70,8 +70,8 @@ const config = defineRecipe({
     /* fixed layout so column widths (and resize) are exact — like RecordsTable */
     & table { table-layout: fixed; }
     /* column resize grip */
-    & .datatable-resize { position: absolute; top: 0; right: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
-    & .datatable-resize::after { content: ""; position: absolute; top: 0; left: 3px; width: 2px; height: 100%; background: ${c.bgBrandSolid}; opacity: 0; transition: opacity .12s; }
+    & .datatable-resize { position: absolute; top: 0; inset-inline-end: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
+    & .datatable-resize::after { content: ""; position: absolute; top: 0; inset-inline-start: 3px; width: 2px; height: 100%; background: ${c.bgBrandSolid}; opacity: 0; transition: opacity .12s; }
     & .datatable-resize:hover::after, & .datatable-resize[data-resizing]::after { opacity: 1; }
     /* typed cells — entity (avatar + name), colour-coded tags, numbers, dates */
     & .datatable-entity { display: flex; align-items: center; gap: ${c.space["1.5"]}; min-width: 0; color: ${c.fgPrimary}; font-weight: ${c.weight.medium}; }

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"]);
@@ -681,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";
@@ -1029,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/dist/styles.css

@@ -522,8 +522,8 @@
     /* fixed layout so column widths (and resize) are exact — like RecordsTable */
     & table { table-layout: fixed; }
     /* column resize grip */
-    & .datatable-resize { position: absolute; top: 0; right: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
-    & .datatable-resize::after { content: ""; position: absolute; top: 0; left: 3px; width: 2px; height: 100%; background: var(--bg-brand-solid); opacity: 0; transition: opacity .12s; }
+    & .datatable-resize { position: absolute; top: 0; inset-inline-end: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
+    & .datatable-resize::after { content: ""; position: absolute; top: 0; inset-inline-start: 3px; width: 2px; height: 100%; background: var(--bg-brand-solid); opacity: 0; transition: opacity .12s; }
     & .datatable-resize:hover::after, & .datatable-resize[data-resizing]::after { opacity: 1; }
     /* typed cells — entity (avatar + name), colour-coded tags, numbers, dates */
     & .datatable-entity { display: flex; align-items: center; gap: var(--space-1-5); min-width: 0; color: var(--fg-primary); font-weight: var(--weight-medium); }

package/package.json

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