@crisp-ui-kit/crisp 0.31.1 → 0.31.2

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/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/package.json

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