@jirawatpyk/aura-react 5.10.1 → 5.12.0

package/README.md

@@ -74,9 +74,9 @@ export default function Root() {
 | `dist/styles.css`     | Component CSS (no font import).                                                                                                                                                                            |
 | `dist/index.d.ts`     | Types for every component and helper, generated from the TypeScript sources (one file).                                                                                                                    |
 
-## Components (59)
+## Components (60)
 
-Actions: Button (`ghost`, `size="sm"`), IconButton, Menu, DropdownMenu (link, danger and radio items), ActionBar, Tag · Forms: TextField, PasswordField, Textarea, NumberField, Select, RadioGroup, Checkbox, Switch, SegmentedControl, Combobox (one value, or `multiple`), FileUpload (+ `formatBytes`) · Dates & times: DatePicker, DateRangePicker, Calendar, TimePicker (+ `useFormatDate`, `formatDate`, `parseDate`, `parseTime`) · Feedback: Alert, FormErrorSummary, Toaster/`toast()` (+ `.success/.error/.warning/.info/.loading`), Tooltip, StatusPill, Badge, Progress, Skeleton, EmptyState · Overlays: Dialog, Drawer, Popover · Data: DataTable, Table (+ THead, TBody, TFoot, Tr, Th, Td — static tables), FilterBar, Stat · Navigation: Command (⌘K palette), BottomNav · Layout: AppShell, Container, Stack, Grid, Separator, Accordion, Pagination, Card, Tabs, Stepper, SideNav, Breadcrumb, Avatar, Surface, Icon · Theme: ColorSchemeToggle, ColorSchemeScript, `useColorScheme`, ThemeStyle/`createTheme` · Hooks: `useBreakpoint`, `useResponsive`, `breakpoints`, `useAuraLocale`, `useDensity`.
+Actions: Button (`ghost`, `size="sm"`), IconButton, Menu, DropdownMenu (link, danger and radio items), ActionBar, Tag · Forms: TextField, PasswordField, Textarea, NumberField, Select, FilterSelect, RadioGroup, Checkbox, Switch, SegmentedControl, Combobox (one value, or `multiple`), FileUpload (+ `formatBytes`) · Dates & times: DatePicker, DateRangePicker, Calendar, TimePicker (+ `useFormatDate`, `formatDate`, `parseDate`, `parseTime`) · Feedback: Alert, FormErrorSummary, Toaster/`toast()` (+ `.success/.error/.warning/.info/.loading`), Tooltip, StatusPill, Badge, Progress, Skeleton, EmptyState · Overlays: Dialog, Drawer, Popover · Data: DataTable, Table (+ THead, TBody, TFoot, Tr, Th, Td — static tables), FilterBar, Stat · Navigation: Command (⌘K palette), BottomNav · Layout: AppShell, Container, Stack, Grid, Separator, Accordion, Pagination, Card, Tabs, Stepper, SideNav, Breadcrumb, Avatar, Surface, Icon · Theme: ColorSchemeToggle, ColorSchemeScript, `useColorScheme`, ThemeStyle/`createTheme` · Hooks: `useBreakpoint`, `useResponsive`, `breakpoints`, `useAuraLocale`, `useDensity`.
 
 ## Router links, Swedish, motion
 
@@ -186,6 +186,29 @@ 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.12 — Chamber-OS addendum 12 (compact filters)
+
+- **FilterSelect** (item 79): a filter for `FilterBar` drawn as one small button — "Status All ▾" — as wide as its words, so several filters and a toggle `Tag` share a row, three and a Tag even at 375px. It is Select underneath: it opens the same AURA list (on phones too, as Select does since 5.3), with the same keys (arrows, typing, Enter, Escape), `name` in a form and a real `<select>` before hydration (with JavaScript off a choice still posts with the form, but the face keeps the server's value). `onChange` gets the value, so with react-hook-form use a `Controller` (`render={({ field }) => <FilterSelect label="Plan" {...field} options={plans} />}`), not `register`. `label` is the filter's name and its accessible name; screen readers hear the chosen option as the value. The first option is the "all" choice: `allLabel` is the shorter word its face shows ("All" for "All statuses"). A long value ("Diamond Partnership") shows in full and the button moves to the next row instead of cutting it. Right to left, the list opens from the face's right edge.
+  ```tsx
+  <FilterBar search={q} onSearchChange={setQ} searchGrow>
+    <FilterSelect label="Status" allLabel="All" options={statuses} value={status} onChange={setStatus} />
+    <FilterSelect label="Plan" allLabel="All" options={plans} value={plan} onChange={setPlan} />
+    <Tag selected={unpaid} onClick={() => setUnpaid(!unpaid)}>Unpaid</Tag>
+  </FilterBar>
+  ```
+- **FilterBar `searchGrow`**: the search takes all the room the controls leave in its row instead of stopping at 360px (no CSS override needed). Filters in a bar with FilterSelects sit 8px apart instead of 12px.
+- **Select**: a list wider than its field stays on screen, and in a right-to-left page the list is right-to-left too.
+
+## 5.11 — Chamber-OS addendum 11 (member directory)
+
+- **DataTable `rowSelectLabel`** (item 75): names each row's checkbox after the row instead of its key — `rowSelectLabel={(r) => 'Select ' + r.company}` — in the grid and in cards. Without it (or when it returns an empty string) the name stays "Select {key}".
+- **Checkbox `aria-describedby`** (item 76): a passed id is kept and the description's own id added after it (`aria-describedby="hint"` + `description` → `"hint {id}-desc"`); with neither there is no attribute. Before, a passed `aria-describedby` was always dropped, with or without a description.
+- **Selection boxes take 24×24** (item 77): the header and row checkboxes in DataTable still draw 16px, but their invisible input reaches 24×24 (WCAG 2.5.8) in the grid and in cards, so a click just outside the box counts.
+- **DataTable `rowHeight="auto"`** (item 78): rows grow to fit what wraps — two badges, a long name — with every cell vertically centred. A row whose content fits keeps the density's height (a pill, one line of text, a small Button or IconButton); padding appears only around content taller than that. Badges and pills side by side keep apart when they wrap. Rows must all be in the DOM, so it's ignored with `height` (virtualized rows are one fixed height; a dev notice says so) — paginate instead. Cards are unchanged. Default: one fixed line per row, long text ends in an ellipsis.
+  ```tsx
+  <DataTable rows={members} rowHeight="auto" columns={[…, { key: 'tags', label: 'TAGS', width: 150, render: (r) => r.tags.map((t) => <Badge key={t}>{t}</Badge>) }]} />
+  ```
+
 ## 5.10.1 — fixes from a new project
 
 - **Switch**: a disabled switch that is on ("always on", enforced by policy) no longer fades into the same grey as an off one. Disabled rows, on or off, now look alike and stay readable: the label turns `aura-fg-secondary`, the description (often the reason it's locked) keeps its colour, the row shows a not-allowed cursor, and only the switch fades — off to the disabled opacity, on to 0.75, at least 3:1 apart in both themes. In forced colours a locked switch is `GrayText`. Use it instead of a Badge for settings people can see but not change.