@columenlabs/lumen-ui 0.1.204 → 0.1.205

package/dist/lumen-view.js

@@ -499,11 +499,13 @@ const colPropsOf = (units) => (f, ...more) => ({
  * theme.css), so one long name never pushes the other columns off screen; `false` lifts it.
  */
 const capOf = (f, i) => f.maxWidth === false ? undefined : (f.maxWidth ?? (i === 0 ? 'var(--lead-col-max)' : undefined));
-/** Holds a cell to its column's cap on one line: text past it ends in an ellipsis. */
-function CappedCell({ max, title, children, }) {
+/** Holds a cell to its column's cap on one line: text past it ends in an ellipsis. `end` keeps a
+ *  right-aligned column's value on its right edge (the wrapper is a flex row, which `text-right`
+ *  alone does not move), so a capped or resized column keeps one edge. */
+function CappedCell({ max, end, title, children, }) {
     if (!max)
         return children;
-    return (_jsx("div", { className: "flex min-w-0 *:min-w-0 *:max-w-full *:truncate", style: { maxWidth: max }, title: title, children: children }));
+    return (_jsx("div", { className: cn('flex min-w-0 *:min-w-0 *:max-w-full *:truncate', end && 'justify-end'), style: { maxWidth: max }, title: title, children: children }));
 }
 /** The flat or grouped table: sortable headers, a Total row, group rows that collapse. */
 // Sorting, and paging of flat tables (the page is LumenView's, set right of the row count).
@@ -534,11 +536,6 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
     const resizing = resizable && !isMobile && !fit;
     const colWidths = useColumnWidths(resizing ? (widthsKey ?? '') || undefined : undefined);
     const widthOf = (f) => resizing && f ? colWidths.widths[f.key] : undefined;
-    // A dragged width caps the column's cells in its place (the cell's own padding taken off).
-    const capFor = (f, i) => {
-        const w = widthOf(f);
-        return w ? `calc(${w}px - 2 * var(--cell-x))` : capOf(f, i);
-    };
     const [sorting, setSorting] = useState(() => sortingOf(sort, columns, serverSorts));
     // A saved sort patched while the table is open (the assistant's card move) applies at once.
     const savedSort = JSON.stringify(sort ?? null);
@@ -554,11 +551,18 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
         pageIndex: paging ? page.index : 0,
         pageSize: paging ? page.size : Math.max(rows.length, 1),
     };
-    // Groups whose state differs from where they start: open, or past OPEN_ALL rows only the first.
     // Columns a UnitValue has drawn in (`UnitColumns`): their cells share the numbers' edge.
     const [units, setUnits] = useState(() => new Set());
     const markUnits = useCallback((key) => setUnits((s) => (s.has(key) ? s : new Set(s).add(key))), []);
     const colProps = colPropsOf(units);
+    // A dragged width caps the column's cells in its place (the cell's own padding taken off).
+    const capFor = (f, i) => {
+        const w = widthOf(f);
+        // A units column's right padding also holds the unit slot (theme.css `[data-units]`).
+        const pad = units.has(f.key) ? '2 * var(--cell-x) - var(--unit-slot)' : '2 * var(--cell-x)';
+        return w ? `calc(${w}px - ${pad})` : capOf(f, i);
+    };
+    // Groups whose state differs from where they start: open, or past OPEN_ALL rows only the first.
     const [flipped, setFlipped] = useState(new Set());
     const [more, setMore] = useState(new Map());
     // Under a sub-group's `flat` grouping each row names itself by its sub-group key instead of
@@ -683,7 +687,7 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
             const field = now[i] ?? f;
             const chip = chips.some((c) => c.key === field.key);
             const v = computed.value(field, row.original);
-            return (_jsx(CappedCell, { max: capFor(field, i), title: !field.render && typeof v === 'string' ? v : undefined, children: i === 0 && inline.length ? (_jsx(FirstCell, { value: cellOf(field, row.original, chip), chips: inline.flatMap((x) => {
+            return (_jsx(CappedCell, { max: capFor(field, i), end: (field.format ?? 'text') !== 'text', title: !field.render && typeof v === 'string' ? v : undefined, children: i === 0 && inline.length ? (_jsx(FirstCell, { value: cellOf(field, row.original, chip), chips: inline.flatMap((x) => {
                         const v = computed.value(x, row.original);
                         if (!x.edit && (v === null || v === ''))
                             return [];

package/dist/theme.css

@@ -433,6 +433,9 @@
 }
 [data-units] [data-slot="unit-value"] {
   position: relative;
+  /* A resized column wraps its cells in a truncating box; the unit hangs outside the value's box,
+     so it must not be clipped with it. */
+  overflow: visible;
 }
 [data-units] [data-slot="unit-value-unit"] {
   position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.204",
+  "version": "0.1.205",
   "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.204",
+    "@columenlabs/lumen-ui-types": "0.1.205",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",