@crisp-ui-kit/crisp 0.32.0 → 0.32.1

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

@@ -402,21 +402,29 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
     // sticky attrs for the leading column(s): grip col (index -2) + selection
     // col (-1) + first data column (0). Each offsets by whatever leading
     // columns come before it, so the group stays contiguous when scrolled.
+    // `insetInlineStart`, never `left`: the offset pins the column to the
+    // LEADING edge, which is the right one under `dir="rtl"`. A physical `left`
+    // pins to the trailing edge instead, and the column scrolls out of view the
+    // moment sticky would have engaged (#285). RecordsTable does the same job in
+    // CSS and has used the logical property since #91 -- this offset is computed
+    // here rather than in a recipe, which is why that sweep could not reach it.
     const stickyCol = (index) => {
         if (!stickyFirst)
             return {};
         if (showGrip && index === -2)
-            return { "data-sticky": "", style: { left: 0 } };
+            return { "data-sticky": "", style: { insetInlineStart: 0 } };
         if (selectable && index === -1)
             return {
                 "data-sticky": "",
-                style: { left: showGrip ? GRIP_W : 0 },
+                style: { insetInlineStart: showGrip ? GRIP_W : 0 },
             };
         if (index === 0)
             return {
                 "data-sticky": "",
                 "data-sticky-edge": "",
-                style: { left: (showGrip ? GRIP_W : 0) + (selectable ? CHECK_W : 0) },
+                style: {
+                    insetInlineStart: (showGrip ? GRIP_W : 0) + (selectable ? CHECK_W : 0),
+                },
             };
         return {};
     };

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

@@ -366,21 +366,29 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
     // sticky attrs for the leading column(s): grip col (index -2) + selection
     // col (-1) + first data column (0). Each offsets by whatever leading
     // columns come before it, so the group stays contiguous when scrolled.
+    // `insetInlineStart`, never `left`: the offset pins the column to the
+    // LEADING edge, which is the right one under `dir="rtl"`. A physical `left`
+    // pins to the trailing edge instead, and the column scrolls out of view the
+    // moment sticky would have engaged (#285). RecordsTable does the same job in
+    // CSS and has used the logical property since #91 -- this offset is computed
+    // here rather than in a recipe, which is why that sweep could not reach it.
     const stickyCol = (index) => {
         if (!stickyFirst)
             return {};
         if (showGrip && index === -2)
-            return { "data-sticky": "", style: { left: 0 } };
+            return { "data-sticky": "", style: { insetInlineStart: 0 } };
         if (selectable && index === -1)
             return {
                 "data-sticky": "",
-                style: { left: showGrip ? GRIP_W : 0 },
+                style: { insetInlineStart: showGrip ? GRIP_W : 0 },
             };
         if (index === 0)
             return {
                 "data-sticky": "",
                 "data-sticky-edge": "",
-                style: { left: (showGrip ? GRIP_W : 0) + (selectable ? CHECK_W : 0) },
+                style: {
+                    insetInlineStart: (showGrip ? GRIP_W : 0) + (selectable ? CHECK_W : 0),
+                },
             };
         return {};
     };

package/package.json

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