@lotics/ui 27.13.2 → 27.13.3

package/MIGRATION.md

@@ -4,6 +4,25 @@ Breaking changes, newest first — normally per major, plus the rare minor that
 anyway (recorded under its exact version). The current contract lives in `AGENTS.md` + `docs/`;
 this file exists only to move an app from one release to the next.
 
+## 27.13.3 — a stacked `Table` row's identity cell no longer renders its column label
+
+No API change, but the rendered output changed on NARROW containers only (below the
+two-column floor, where `Table` stacks). The identity cell — column 0 — used to render as a
+`DetailRow` spread like every other cell, so its column label appeared beside the value. It
+now heads the row bare. **A test or script that finds that label inside a stacked row must be
+updated**:
+
+```ts
+// a 375px-wide register whose first column is labelled "Customer"
+getByText("Customer")   // BEFORE — the identity cell's label, once per ROW
+                        // AFTER  — matches the column HEADER only (wide containers)
+```
+
+Field cells (index ≥ 1) keep their labels, and register mode is untouched — this is stacked
+mode only. The label restated the value it sat beside (`Customer` over `Northwind Packaging`),
+and it had nowhere to go: a label and a full-width identity on one line with nothing to give
+made the label collapse under a long value, which is what a narrow register used to render.
+
 ## 27.4.0 — a `Select` trigger announces as `combobox`, not `button`
 
 No API change, but the DOM and the accessibility tree changed, so **a test or script that

package/docs/catalog.md

@@ -973,9 +973,10 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   CONTAINER-RESPONSIVE with no prop (measures itself, like `Breakdown`/`DetailTable`): when
   the width can't fit every column it hides columns by `TableColumn.priority` (higher drops
   first; default = column order, rightmost first; column 0 — the identity — never drops), and
-  below the two-column floor every row STACKS: each cell renders as a `DetailRow`-spread
-  line (muted label left, value at the right edge — one vocabulary with the drawer's detail
-  rows), the lines sitting on the identity column's text edge, never under the checkbox;
+  below the two-column floor every row STACKS: the identity cell (column 0) HEADS the pile
+  unlabelled — its column name would only restate the value — and each REMAINING cell renders
+  as a `DetailRow`-spread line (muted label left, value at the right edge — one vocabulary with
+  the drawer's detail rows), the lines sitting on the identity column's text edge, never under the checkbox;
   the header band gives way, so sorting is a wide-container affordance. Rows carry TWO right-side slots: `action`
   (the primary CTA `Button` — register: in the trailing gutter; stacked: closes the content,
   right-aligned) and `trailing` (the ⋯ overflow — stays beside the identity on the top line).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "27.13.2",
+  "version": "27.13.3",
   "type": "module",
   "exports": {
     "./vite": {

package/src/table.tsx

@@ -229,7 +229,10 @@ export function TableRow(props: TableRowProps) {
     // A dropped column drops its cell (stacked shows everything). Cells beyond
     // the declared columns stay — same tolerance as the width mapping.
     .filter(({ column }) => ctx.stacked || column == null || ctx.visibleKeys.has(column.key))
-    .map(({ cell, column }) => cloneElement(cell, { _column: column, _stacked: ctx.stacked }));
+    // Index 0 is the identity cell — it HEADS the stacked pile rather than becoming
+    // one of its labelled field lines. (Safe to read post-filter: stacked mode drops
+    // no cell, and column 0 never drops in register mode either.)
+    .map(({ cell, column }, i) => cloneElement(cell, { _column: column, _stacked: ctx.stacked, _primary: i === 0 }));
 
   const body = ctx.stacked ? (
     <View style={styles.stackedBody}>
@@ -314,19 +317,31 @@ export interface TableCellProps {
   _column?: TableColumn;
   /** @internal — injected by `TableRow`; the Table is in stacked mode. */
   _stacked?: boolean;
+  /** @internal — injected by `TableRow`; this is the identity cell (column 0), which
+   *  in stacked mode leads the row instead of becoming one of its field lines. */
+  _primary?: boolean;
 }
 
 /** One cell — its width/align come from the column `TableRow` injects by position.
- *  In stacked mode it IS a `DetailRow` (spread: muted label left, value at the
- *  right edge) — the drawer's detail-row component, not a lookalike, so a
+ *  In stacked mode a FIELD cell is a `DetailRow` (spread: muted label left, value
+ *  at the right edge) — the drawer's detail-row component, not a lookalike, so a
  *  stacked register and the record workspace behind its door share one
  *  vocabulary by construction. `DetailRow` values are arbitrary nodes (the
  *  drawer renders badges, money stacks, editors, popover triggers in them), so
  *  register cell content needs no adaptation. A label-less control column has
- *  no line to spread — its content pins to the right edge. */
+ *  no line to spread — its content pins to the right edge.
+ *
+ *  The IDENTITY cell is not a field line and carries no label. It heads the row —
+ *  the thing you read to know WHICH record this is — so its column name ("Hợp đồng",
+ *  "Customer") only restates what the value already says, and it already sits on the
+ *  top line beside the selection checkbox and the ⋯ overflow, where a label has no
+ *  field grid to align to. */
 export function TableCell(props: TableCellProps) {
-  const { children, _column, _stacked } = props;
+  const { children, _column, _stacked, _primary } = props;
   if (_stacked) {
+    if (_primary) {
+      return <>{children}</>;
+    }
     if (!_column?.label) {
       return <View style={styles.stackedBareCell}>{children}</View>;
     }