@jirawatpyk/aura-react 5.21.0 → 5.22.0

package/README.md

@@ -186,6 +186,12 @@ DataTable with sort and page in the URL (4.17): `onStateChange={({ sort, page })
 - **Time zone**: `timeZone` on AuraProvider, DatePicker, DateRangePicker and Calendar decides "today" (the marker, `min`/`max="today"`, the first month shown); or pass `today` as an ISO date. `todayIn('Asia/Bangkok')` is exported from the root and `/server`.
 - **Toasts** queue past three instead of dropping: six in a row all show, in order, three at a time.
 
+## 5.22 — Chamber-OS addendum 22
+
+- **DataTable `card: 'footer'`** (item 118): in a stacked card the column becomes the card's last row, full width, after every other cell — row actions such as "Send reminder" and a menu. A Button placed directly in the cell grows to fill the row; an IconButton or menu keeps its size. The grid is unchanged (an ordinary column at its `width`).
+- **Stacked titles wrap** (item 119): a card's title (`card: 'title'` or the automatic one) wraps onto more lines instead of being cut, on a 20px line, and the row box, the pill and top-right actions line up with its first line. Visible in every stacked DataTable: long titles wrap; one-line cards without a pill or actions are 4px taller (the 20px line), with a pill about 1px; the grid is unchanged.
+- `card: 'footer'` moves the cell only visually: arrow keys and screen readers keep the grid's column order. A footer holding only an IconButton or a menu sits at the end edge.
+
 ## 5.21 — Chamber-OS addendum 21
 
 - **Table `rowHeight="density"`** (item 117): every body row is at least the density's row height (48px; 40px compact; 48px on touch screens, as DataTable — unlike the 5.20 cell padding, which stays compact on touch), and its cells' vertical padding shrinks to fit a small Button (7.5px at 48px, 3.5px compact, at most 8px), as in DataTable's `rowHeight="auto"` — so a row with a `sm` Button, an IconButton, a pill or one line of text are all the same height. Content is centred on the row unless you pass `align="top"` (footer cells centre too, as with `align="middle"`). Rows whose text wraps still grow, with the smaller padding. Header and footer row heights, stacked rows and cards (`stackBelow`), and tables without the prop are unchanged.

package/dist/index.d.cts

@@ -106,8 +106,10 @@ export interface DataTableColumn<Row extends Record<string, any> = Record<string
 	actions?: boolean | undefined;
 	/** Its place in a stacked card (5.13): `'hide'` leaves it out of the card (the grid keeps it), `'title'` / `'pill'`
 	 * make it the card's title or the pill beside it (instead of the first column / first pill column), `'field'` a
-	 * label/value field. Default: today's rule. */
-	card?: "hide" | "field" | "title" | "pill" | undefined;
+	 * label/value field. `'footer'` (5.22, Chamber-OS 118) makes it the card's last row, full width — row actions
+	 * such as "Send reminder" and a menu: a Button placed directly in the cell grows to fill the row, an IconButton or
+	 * menu keeps its size. Default: today's rule. The grid is unchanged by any of them. */
+	card?: "hide" | "field" | "title" | "pill" | "footer" | undefined;
 	/** The order of fields in a stacked card (5.13), lowest first; the grid's column order is unchanged. Fields
 	 * without one sort by their column index (0-based). Screen readers and arrow keys follow the grid's order. */
 	cardOrder?: number | undefined;

package/dist/index.d.ts

@@ -106,8 +106,10 @@ export interface DataTableColumn<Row extends Record<string, any> = Record<string
 	actions?: boolean | undefined;
 	/** Its place in a stacked card (5.13): `'hide'` leaves it out of the card (the grid keeps it), `'title'` / `'pill'`
 	 * make it the card's title or the pill beside it (instead of the first column / first pill column), `'field'` a
-	 * label/value field. Default: today's rule. */
-	card?: "hide" | "field" | "title" | "pill" | undefined;
+	 * label/value field. `'footer'` (5.22, Chamber-OS 118) makes it the card's last row, full width — row actions
+	 * such as "Send reminder" and a menu: a Button placed directly in the cell grows to fill the row, an IconButton or
+	 * menu keeps its size. Default: today's rule. The grid is unchanged by any of them. */
+	card?: "hide" | "field" | "title" | "pill" | "footer" | undefined;
 	/** The order of fields in a stacked card (5.13), lowest first; the grid's column order is unchanged. Fields
 	 * without one sort by their column index (0-based). Screen readers and arrow keys follow the grid's order. */
 	cardOrder?: number | undefined;

package/dist/styles.css

@@ -1854,9 +1854,29 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-table__td[data-card='title'] { order: 1; flex: 1 1 0; font-size: 14px; font-weight: 600; }
   .aura-table__td[data-card='pill'] { order: 2; flex: none; }
   .aura-table__td[data-card='actions'] { order: 3; flex: none; margin: calc(-1 * var(--aura-space-1)) calc(-1 * var(--aura-space-2)) calc(-1 * var(--aura-space-1)) 0; }
+  /* 5.22 (Chamber-OS 119): the title wraps rather than being cut — a member's full name before a one-click action —
+   * and the row box and the pill line up with its first line (a 20px line; the 16px box 2px down). */
+  .aura-table__td[data-card='title'] { white-space: normal; overflow-wrap: anywhere; overflow: visible; line-height: 20px; align-self: flex-start; }
+  .aura-table__td[data-card='pill'] { align-self: flex-start; line-height: 20px; }
+  .aura-table__row > .aura-table__sel { align-self: flex-start; margin-top: 2px; }
+  /* Actions top-right sit on that first line too (a 32px button centred on 20px, the same 24px footprint as before). */
+  .aura-table__td[data-card='actions'] { align-self: flex-start; margin-top: calc(-1 * var(--aura-space-1) - 2px); margin-bottom: -2px; }
+  /* 5.22 (Chamber-OS 118): card: 'footer' — the card's last row, full width; a Button in it grows, an IconButton or a
+   * menu keeps its size. */
+  .aura-table__td[data-card='footer'] {
+    order: 99; flex: 0 0 100%; display: flex; align-items: center; gap: var(--aura-space-2);
+    margin: var(--aura-space-1) 0 0; overflow: visible; white-space: normal;
+  }
+  .aura-table__td[data-card='footer'] > .aura-table__cell { display: flex; flex: 1 1 auto; align-items: center; gap: var(--aura-space-2); min-width: 0; }
+  .aura-table__td[data-card='footer'] > .aura-btn, .aura-table__td[data-card='footer'] > .aura-table__cell > .aura-btn { flex: 1 1 auto; }
+  /* Only an IconButton or a menu: at the end, as a card's ⋯ usually is. A totals row's label isn't shown there. */
+  .aura-table__td[data-card='footer']:not(:has(.aura-btn)), .aura-table__td[data-card='footer'] > .aura-table__cell:not(:has(.aura-btn)) { justify-content: flex-end; }
+  .aura-table__td[data-card='footer']::before { display: none; }
   /* Spacing: 12px under the title line, 8px between field lines (row gap 4 + the break's 4 + each field's 4 below). */
   .aura-table__break { display: block; order: 4; flex: 0 0 100%; height: var(--aura-space-1); }
   .aura-table__row:has(> .aura-table__break) { padding-bottom: calc(var(--aura-space-4) - var(--aura-space-1)); }
+  /* 5.22: a footer row ends the card with no margin under it, so the card keeps its full 16px. */
+  .aura-table__row:has(> [data-card='footer']:not(.is-blank)) { padding-bottom: var(--aura-space-4); }
   .aura-table__row--skeleton .aura-table__td { display: flex; }
   .aura-table__total { background: var(--aura-bg-canvas); }
   .aura-table__total > .is-blank { display: none; }

package/dist/styles.layer.css

@@ -1856,9 +1856,29 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-table__td[data-card='title'] { order: 1; flex: 1 1 0; font-size: 14px; font-weight: 600; }
   .aura-table__td[data-card='pill'] { order: 2; flex: none; }
   .aura-table__td[data-card='actions'] { order: 3; flex: none; margin: calc(-1 * var(--aura-space-1)) calc(-1 * var(--aura-space-2)) calc(-1 * var(--aura-space-1)) 0; }
+  /* 5.22 (Chamber-OS 119): the title wraps rather than being cut — a member's full name before a one-click action —
+   * and the row box and the pill line up with its first line (a 20px line; the 16px box 2px down). */
+  .aura-table__td[data-card='title'] { white-space: normal; overflow-wrap: anywhere; overflow: visible; line-height: 20px; align-self: flex-start; }
+  .aura-table__td[data-card='pill'] { align-self: flex-start; line-height: 20px; }
+  .aura-table__row > .aura-table__sel { align-self: flex-start; margin-top: 2px; }
+  /* Actions top-right sit on that first line too (a 32px button centred on 20px, the same 24px footprint as before). */
+  .aura-table__td[data-card='actions'] { align-self: flex-start; margin-top: calc(-1 * var(--aura-space-1) - 2px); margin-bottom: -2px; }
+  /* 5.22 (Chamber-OS 118): card: 'footer' — the card's last row, full width; a Button in it grows, an IconButton or a
+   * menu keeps its size. */
+  .aura-table__td[data-card='footer'] {
+    order: 99; flex: 0 0 100%; display: flex; align-items: center; gap: var(--aura-space-2);
+    margin: var(--aura-space-1) 0 0; overflow: visible; white-space: normal;
+  }
+  .aura-table__td[data-card='footer'] > .aura-table__cell { display: flex; flex: 1 1 auto; align-items: center; gap: var(--aura-space-2); min-width: 0; }
+  .aura-table__td[data-card='footer'] > .aura-btn, .aura-table__td[data-card='footer'] > .aura-table__cell > .aura-btn { flex: 1 1 auto; }
+  /* Only an IconButton or a menu: at the end, as a card's ⋯ usually is. A totals row's label isn't shown there. */
+  .aura-table__td[data-card='footer']:not(:has(.aura-btn)), .aura-table__td[data-card='footer'] > .aura-table__cell:not(:has(.aura-btn)) { justify-content: flex-end; }
+  .aura-table__td[data-card='footer']::before { display: none; }
   /* Spacing: 12px under the title line, 8px between field lines (row gap 4 + the break's 4 + each field's 4 below). */
   .aura-table__break { display: block; order: 4; flex: 0 0 100%; height: var(--aura-space-1); }
   .aura-table__row:has(> .aura-table__break) { padding-bottom: calc(var(--aura-space-4) - var(--aura-space-1)); }
+  /* 5.22: a footer row ends the card with no margin under it, so the card keeps its full 16px. */
+  .aura-table__row:has(> [data-card='footer']:not(.is-blank)) { padding-bottom: var(--aura-space-4); }
   .aura-table__row--skeleton .aura-table__td { display: flex; }
   .aura-table__total { background: var(--aura-bg-canvas); }
   .aura-table__total > .is-blank { display: none; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-react",
-  "version": "5.21.0",
+  "version": "5.22.0",
   "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
   "license": "MIT",
   "type": "module",