@jirawatpyk/aura-react 5.14.0 → 5.16.0

package/README.md

@@ -186,6 +186,28 @@ 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.16 — Chamber-OS addenda 15–16, the larger items
+
+- **SideNav action rows** (item 95): an item with `selectable: false` is an action row — Sign out, Help — with the rows' look, 44px on touch screens and the arrow keys, that runs `onSelect` and never becomes the current item (no `aria-current`, no `onChange`). In the rail it is its icon, the label its name. Any item can take `onSelect`. `collapseToggle="row"` shows `collapsible`'s toggle as a labelled row ("Collapse sidebar" / "Expand sidebar") instead of an icon button. In AppShell's phone drawer an action row closes the drawer; `onAction(id)` on SideNav reports action rows.
+- **SideNav `chevron="right"` and a one-row header** (item 96): `chevron="right"` points a closed group's chevron right (left in right-to-left pages) and down when open; the default stays down / up. The header's end padding is now 8px (was 16px) for every SideNav, so a brand, its dot and a badge share one row at 240px — a visible change to headers that were close to the edge.
+- **DataTable `rangeSelect` and how a selection changed** (item 98): `onSelectionChange(keys, change)` now gets a second argument, `{ key, shiftKey, source: 'click' | 'keyboard' | 'all' | 'sync', range? }` — existing one-argument handlers are unaffected (a wrapper that calls a `DataTableProps['onSelectionChange']` itself now needs to pass the second argument). With `rangeSelect`, Shift-clicking a row's box (or Shift+Space on a row) sets every selectable row on this page, from the last row changed to this one in the order shown, to this row's new state; `range` lists them.
+- **Dialog `trigger`, `finalFocus`, `onCloseComplete` and attributes on the panel** (item 101): `trigger={<Button>Add contact</Button>}` renders the button with `aria-haspopup="dialog"` and `aria-expanded`; without `open`, the Dialog then opens and closes itself (`onOpen` / `onClose` still report it). `finalFocus` (a ref or a function) sends focus there when it closes — by a button, Escape or the scrim — instead of back to the opener, falling back to the opener if it returns nothing. `onCloseComplete` runs once after the panel has left the page (also when an open Dialog is unmounted). Inside a self-managed Dialog, `useDialogClose()` gives Cancel and Save a way to close it. `id`, `data-*`, `aria-*`, `style`, `lang` and `dir` reach the `.aura-dialog` panel, as on Drawer; Drawer takes `finalFocus` and `onCloseComplete` too. `open` and `onClose` are optional now.
+- The whole-library and IIFE budgets are 62 kB (were 60).
+- **Combobox `allowCustomValue` and `groups`** (item 105): with `allowCustomValue` a typed value that isn't in the list is kept — on Enter when no option is highlighted, on Tab, or on leaving the field; text matching an option's label picks that option, empty text clears the value. `groups={[{ label, options }]}` lists options under headings (after any `options`, which is optional now), each a named group for screen readers; filtering hides a heading with no matches. With `allowCustomValue` typing highlights nothing (unless the text is an option's label), so Enter and Tab keep what was typed; an option reached with the arrow keys is picked by Enter or Tab. `clearable={false}` keeps the value when the text is emptied.
+
+## 5.15 — Chamber-OS addenda 14–16, layout
+
+- **Table `stackStyle="cards"`** (item 85): below `stackBelow` each row is its own framed card (DataTable's card radius, border, padding and 8px gap), with no frame around them; above it the table is unchanged. The table then sits in one more `div` (`.aura-tbl-cards`), which carries the width query. Table roles, labels and the `card` slots behave as before.
+- **Card `header`** (item 87): free head content in place of `title` and `description` — skeleton bars while the card loads, a status pill above a title you mark up yourself. No heading is added and `title` / `titleId` are ignored; `actions` still sit top-right. Card `header` works from `/server` too.
+- **Progress `secondaryValue`** (item 89): a reserved amount drawn after `value` in the same tone, striped (so it reads without colour), clamped to the end of the track. Screen readers hear "2 of 6 used, 1 reserved" (Thai and Swedish included) unless you pass `valueLabel`.
+- **Tabs `fullWidth` for underline tabs** (item 90): `fullWidth` now works on the default look too, tabs sharing the row equally; `fullWidth="below-sm" | "below-md" | "below-lg"` does it only below that width (either look). Tabs never shrink below their label; too many scroll as before. Underline tabs that already passed `fullWidth` (ignored until now) now fill their row.
+- **FilterBar `controlsLayout="fill"` and `stackBelow="lg"`** (item 92): `fill` gives the filters equal columns across their row (at least 120px each, wrapping when they can't fit) with the count and actions at the end; `stackBelow="lg"` puts the search on its own row up to 1024px (default `md`, 768px).
+- **Card `flushBelow`** (item 93): `'sm' | 'md' | 'lg'` — below that width the card drops its border, surface and shadow (padding kept), for a list whose rows become cards of their own.
+- **Breadcrumb `collapseBelow` and item attributes** (item 94): `collapseBelow="sm" | "md"` shows the first item, "…" and the last below that width, in CSS (the server's HTML is already right); "…" is a button ("Show the full path") that shows the rest and moves focus to the first item it revealed; a new trail (the next page, with the Breadcrumb kept mounted) starts collapsed again. "…" is a 24px target, 44px on touch screens. Each item takes `itemProps` (its `<li>`) and `linkProps` (its link, button or text) — `data-slot`, `data-testid`.
+- **Checkbox `hitArea`** (item 99): `'target'` (24×24, WCAG 2.5.8) or `{ x, y }` px on each side — `{ x: 12, y: 8 }` is 40×32 — for a box without visible text; the box looks the same. A labelled checkbox's whole label is already its target.
+- **`touchHeight` on Button and IconButton** (item 100): 44px tall (IconButton 44×44) below 640px, the size asked for above; the label stays centred. A Drawer's close button takes it through `closeProps={{ touchHeight: true }}`. `buttonClass({ touchHeight: true })` from `/server` gives the same class. Off by default.
+- New strings `progressReserved` and `breadcrumbMore` in every locale; a pack you wrote yourself should add them (the built-in ones for the locale are used otherwise). The CSS budget is 25 kB (was 24).
+
 ## 5.14 — Chamber-OS addenda 15–16, the small items
 
 - **EmptyState `headingLevel={false}`** (item 86): the title is a `<p>`, so an empty state inside a card or list adds nothing to the page's heading outline. EmptyState has no live-region role unless you pass `role`.