@jirawatpyk/aura-react 5.50.0 → 5.52.0

package/README.md

@@ -186,6 +186,39 @@ 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.52 — Chamber-OS addendum 65 (#164)
+
+- **`Table loading`** (with `loadingRows`, default 5): the head as given, then placeholder rows in its columns — and below `stackBelow`, the same cards (title and action slots kept). Each column follows its head cell: `skeleton={{ lines: 1 | 2, kind: 'text' | 'pill' | 'action', touch }}` (two lines for a value over its caption, a status pill, or a block as tall as a small Button — 44px on a phone card with `touch`), its width from `skeletonWidth`, else the cell's `width` or `style.width`, else an even share of what is left. The THead must be a direct child (call your head as a function, not your own component) — a dev notice says so — and its first row must be the column row (with grouped headers, columns come from that first row). A head cell whose content isn't plain text (an icon, a sort button) needs `label` for the cards' field labels. TBody and TFoot aren't rendered while loading, so a totals row appears with the data.
+- **`TableSkeleton`** — the same thing for Server Components (a route's `loading.tsx`), from the root and `/server`: `columns` (`{ label, width, align, numeric, card, skeleton }`), `rows`, and Table's `density`, `stackBelow`, `stackStyle`, `bordered`, `bleed`, `bleedEnd`, `rowHeight`, `align`. Build both from one column list and they can't drift.
+- Both are `aria-hidden` and `inert`, with nothing focusable: announce the load in the page's own status line. A loading table has no content to size from, so its columns are fixed to those widths; give the loaded table the same shares (adding up to 100%) and every column's left edge matches.
+
+```jsx
+<Table stackBelow="sm" loading={isPending} loadingRows={8}>
+  {head()}   {/* <THead><Tr><Th style={{ width: '26%' }} card="title" skeleton={{ lines: 2 }}>Member</Th>… */}
+  <TBody>…</TBody>
+</Table>
+// app/members/loading.tsx (a Server Component)
+import { TableSkeleton } from '@jirawatpyk/aura-react/server';
+export default () => <TableSkeleton stackBelow="sm" rows={8} columns={MEMBER_COLUMNS} />;
+```
+
+## 5.51 — Chamber-OS addenda 58–64 (#157–163)
+
+- **DataTable column `sortDirection`** (#157): `'ascending' | 'descending'` — for a list the page orders (from the URL, a line under the table), puts `aria-sort` on that column's header with no sort button, icon or click, in the server's HTML too. Give it to one column (two warn in development); move it when the order changes. Once the table has its own sort (a sortable header was used, or `sort` is set) that wins and `sortDirection` is ignored, so one header at most claims the order.
+- **DataTable `selectAllRef`** (#157): a ref to the select-all checkbox, e.g. to return focus there after a bulk bar's Clear.
+- **The row minimum counts each flexible column's `minWidth`** (#159), the value its cells already used, instead of 160px for every one — eight columns with minimums of 80–132px now fit a 959px box without a sideways scroll. Columns without `minWidth` still count 160.
+- **`StatusPill wrap`** (#158): in a box narrower than the words they wrap inside the pill (the icon beside the first line, the pill's own line height, Thai's too), and its corners are `aura-radius-lg` (16px) instead of full (addendum 61): on one line that still gives fully round ends, so it looks exactly as before; wrapped it is a rounded rectangle rather than a tall lozenge instead of running out of it — for a narrow DataTable column or a stacked card. In a wide box, or without `wrap`, a pill is one line as before.
+- **Toggle Tags among FilterBar's controls show their whole label** (#160): from 640px a selectable Tag inside FilterBar isn't cut at 24ch, only when wider than the bar, and in the Filters sheet it never is; below 640px in the bar itself, and for a Tag outside FilterBar, the cap and its tip stay. Applied-filter chips were already uncapped (5.28).
+- **The wheel over a DataTable scrolls the page again** (#163): `.aura-table__scroll` contains only the sideways axis (`overscroll-behavior-x: contain`), so a vertical wheel over a grid that scrolls sideways scrolls the page, a sideways swipe stays in the grid (no back navigation), and a fixed-`height` grid scrolls inside first, then the page at its end. Remove any `overscroll-behavior-y` override you added for it.
+- **DataTable column `grow`** (#162): a flexible column's share of the spare width (its cells' flex-grow; default 1), e.g. `{ key: 'actions', minWidth: 128, grow: 3 }` puts Approve and Reject side by side once the table is wide. At the row minimum nothing changes, the row minimum ignores it, and fixed-`width` columns and stacked cards ignore it. `grow: 0` keeps a column at its minimum; leave at least one flexible column above 0 or the rows won't fill a wide table.
+- **DataTable `keyboard="tab"`** (#161): every checkbox, sort and column button, row link and row action is an ordinary Tab stop in reading order (Shift+Tab walks back), each with its focus ring, in the grid and in stacked cards — for lists whose rows carry actions people expect to Tab to. The cells stop being Tab stops; the arrows still move between them once focus is in one (click a cell, or Escape from a control), and the grid's row and column semantics stay. Without it (`'grid'`, the default) the table is one Tab stop as before. Keyboard resizing and reordering of columns (Alt/Ctrl+Shift with the arrows on a header cell) need focus on that header cell, so they stay with the grid keyboard.
+- **5.50 follow-up:** a disabled box whose control has `aria-invalid="true"` keeps its disabled edge inside an enabled custom `Field` too.
+
+```jsx
+<DataTable columns={[{ key: 'timeInStage', label: 'Time in stage', minWidth: 132, sortDirection: 'descending' }, …]} selectAllRef={selectAll} … />
+<StatusPill tone="progress" wrap>Awaiting marketing review</StatusPill>
+```
+
 ## 5.50 — Chamber-OS addendum 57 (#156)
 
 - **`invalid` on TextField and Textarea** (and PasswordField, which is a TextField; `Field` for a custom control): marks the value invalid without AURA's message — the danger edge (`--aura-border-danger`, light and dark, also on hover and focus) and `aria-invalid="true"` on the control, no error line, and `aria-describedby` as it would be without it (the addon, the hint, then your own ids). For a page that explains the problem itself — a live contrast readout, a reason line a disabled Save points at. Point `aria-describedby` at that explanation, or a screen reader hears "invalid" with no reason. `error` still wins: its message replaces the hint and its id the hint's. A disabled field keeps its disabled edge.