@crisp-ui-kit/crisp 0.31.2 → 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/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/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.2",
+  "version": "0.31.3",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",