@columenlabs/lumen-ui 0.1.167 → 0.1.169

package/dist/lumen-view.js

@@ -725,7 +725,8 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
             n = down ? n.nextElementSibling : n.previousElementSibling;
         if (!(n instanceof HTMLElement))
             return;
-        n.focus();
+        n.focus({ preventScroll: true });
+        revealRow(n);
         const next = openKey === null ? undefined : sorted.find((x) => keyOf(x.original) === n.dataset.row);
         if (next && onDetails)
             onDetails(next.original);
@@ -737,7 +738,8 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
         if (openKey === null)
             return;
         const el = box.current?.querySelector(`tr[data-row="${CSS.escape(openKey)}"]`);
-        el?.scrollIntoView({ block: 'nearest' });
+        if (el)
+            revealRow(el);
     }, [openKey, pageKeys, page?.index]);
     // The whole row opens the details drawer.
     const dataRow = (r) => (_jsxs(Fragment, { children: [_jsxs(TableRow, { "data-row": domain.rowKey(r.original), "data-state": tapped?.(r.original) ? 'selected' : undefined, "aria-selected": openKey === null ? undefined : openKey === keyOf(r.original), className: cn('group/row', onDetails && 'cursor-pointer'), tabIndex: onDetails ? 0 : undefined, onClick: onDetails ? () => onDetails(r.original) : undefined, onKeyDown: onDetails
@@ -883,3 +885,17 @@ function GroupMark({ field, value }) {
         return _jsx(ColorDot, { color: color });
     return _jsx(field.icon, {});
 }
+/** Scrolls a row into view up and down only: a table wider than its box keeps its sideways scroll,
+ * so the name column never slides out of view when a row opens or the keys step. */
+function revealRow(row) {
+    const kept = [];
+    for (let e = row.parentElement; e; e = e.parentElement)
+        if (e.scrollLeft)
+            kept.push([e, e.scrollLeft]);
+    row.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    for (let e = row.parentElement; e; e = e.parentElement) {
+        const was = kept.find(([k]) => k === e)?.[1] ?? 0;
+        if (e.scrollLeft !== was)
+            e.scrollLeft = was;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.167",
+  "version": "0.1.169",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -49,7 +49,7 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-sql": "6.10.0",
-    "@columenlabs/lumen-ui-types": "0.1.167",
+    "@columenlabs/lumen-ui-types": "0.1.169",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",