@dcs-tech/ui 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,131 @@
 # @dcs-tech/ui
 
+## 0.10.0
+
+### Upgrading from 0.9
+
+Most of this release adds to what is there. These can change an existing screen:
+
+- **Bulk actions:** an `onRun` that returns nothing now shows no toast and keeps the rows selected. An action that does its work and returns nothing should return a result, or call `api.clearSelection()`. Rows turned down by `eligible` are then not summarised; the handler gets them as `ctx.skipped`.
+- **Select and Suggest lists** fit their content by default, up to a limit. `listWidth="field"` gives the old width for one field.
+- **Icons** in icon-only buttons and the Sidebar are larger (20px at `small`). The buttons stay the same size. An icon with its own `size` keeps it. Check dense toolbars.
+- **DataTable page size:** `pagination: { pageSize: 10 }` with no `pageSizeOptions` shows 10 rows and offers 10. A `pageSize` outside the app's own options starts on the first option.
+- **DataTable `emptyMessage`** now applies only with no search or filter active. Set `noResultsMessage` for the other case.
+- **DatePicker:** the confirm button's default text is "Apply" (pass `applyLabel="Search"` to keep the old word). In a Form, Tab moves on instead of submitting. A press outside reports `onOpenChange(false, 'blur')`, not `'escape'`.
+- **DropdownMenu:** a controlled menu takes focus when it opens, which can blur a field being edited. A `header` passed as an element no longer gets the forced text style.
+- **Input `type="file"`** no longer takes `value`. Read `event.target.files`.
+- **`reorder` on Select** now really drags, and `fixedItems` also locks those first places.
+- **`fullWidth` on text fields** is deprecated: it warns once and does not change the width. Use `width`.
+
+Removed with no deprecation period, for anyone using the `useSelect` hook directly: `handlers.handleDragStart`, `handleDragOver`, `handleDragEnd`, `handleDrop`, `state.draggedItem` and `draggedOver`. Use `handlers.handleReorder`. Also removed: the DataTable classes `.drag-and-drop-list`, `.drag-and-drop-item` and `.drag-and-drop-handle`; use `.dt-reorder-frame` and `.dt-reorder-item`.
+
+### Minor Changes
+
+- aff428a: Breadcrumbs: new `iconOnly` on `NavItem` shows only a crumb's icon, on the home crumb, any crumb or the last one. The label stays the accessible name as visually hidden text, so a non-string label works, and an item with no icon still shows its label. Only Breadcrumbs reads it.
+- f06bc9d: Card: `selected` shows a card as chosen (and sets `aria-pressed` on a clickable one); `aria-*`, `data-*`, drag events and other element attributes pass through to the root; the title is now a real heading, `h3` by default with `headingLevel` to choose (or `'none'` for a span). The title looks the same at every level. A clickable card is a button, so its title stays a span.
+- b0fa6e8: ChipInput: `tags` and `onTagsChange` make it a field of free-text tags. Enter, a comma or leaving the field adds what is typed, a pasted list is split, duplicates are ignored, and Backspace in the empty input removes the last. `sources` is now optional. Without `tags` it is the format-string editor, unchanged. New label `chipInput.removeTag`.
+- d1e907e: Collapsible: `keepMounted` (on the container or one item) renders closed panels' content too, so an FAQ is in the server-rendered HTML. Closed content stays hidden and out of the tab order. The default is unchanged: content mounts on first expand.
+- 88aaeba: DataTable: a search or filter that leaves no rows now says so, separately from a view with no data. New `noResults` label and `noResultsMessage` view option. `emptyMessage` and the `empty` label keep their meaning but now apply only when no search or filter is active, so an app that set only `emptyMessage` shows the new default text for an empty search.
+- a7d56b9: **DataTable: `toolbarActions`** (view option): an app's own buttons on the toolbar line, such as "Add", whatever is selected. Each has `label`, `icon`, `variant`, `display`, `tooltip`, `disabled`, `onClick`, and is left out by its own `authorize` or by `authorize('toolbarAction', action)` (a new gate). On a phone an action with an icon shows only the icon; when the line runs out of room the buttons move to a second line at the right.
+- 6fefbd7: DatePicker: `picker="month"` and `picker="year"` pick a month or a year with no day. The value is `yyyy-mm` or `yyyy` (`{ from, to }` of the same with `range`) and the field reads by the locale ("Nov 2026"). The panel has a month grid with year navigation or a paged year grid, typing (`11/2026`, `nov`, `2026`), full keyboard navigation (arrows, Home/End, PageUp/PageDown, Enter, Escape, Tab) and `min`/`max` that also take `yyyy-mm` and `yyyy`. Fields and Form get `field: 'date'` (`DateFieldDefinition`), for days, months and years. New `labels.datePicker` words: `previousYear`, `nextYear`, `previousYears`, `nextYears`, `month`, `year`, `from`, `to`, `rangeTo`, `selected`, `chooseMonth`, `chooseYear`.
+- 4f10dfb: DatePicker: the year list now reaches 100 years back and 10 ahead, long enough for a date of birth. New `yearRange` prop (`{ back, ahead }`) changes that; `min` and `max` always cut the list and set any end `yearRange` leaves out. New `autoComplete` prop for the typing boxes, default still `off`.
+- 4e83751: DropdownMenu: rail icons get `selected` (shown and announced as `menuitemcheckbox`); `closeOnSelect` on one icon or row overrides the menu's; `className` and `style` on one icon or row; `onOpen`, for controlled and trigger menus. A `header` that is not plain text no longer gets the forced semibold, secondary colour, nowrap and ellipsis, so a name over an email shows as written; a text header looks the same.
+
+  Keyboard fixes: in a browser the first row never took focus when opened by key (the surface is hidden while measured), so the arrows did nothing. Fixed. A controlled menu now takes focus as it opens and gives it back on close, so its arrows work. Tab closes and carries on from the trigger, also when it was opened by pointer. The icon rail is reachable by arrow keys, and focus follows into and out of a pane.
+
+- f5ef4ac: Add a `width` prop to the text fields (Input, Select, Suggest, DatePicker, ChipInput), to custom
+  widgets through `FieldWrapper`, and to `Fields` / `Form` definitions under `fprop`. Exported type:
+  `FieldWidth`.
+
+  - no `width`: today's field, the row up to `--field-control-max-width` (320px). No existing field
+    changes.
+  - `width="full"`: the row, with no limit.
+  - `width="auto"`: the content. Given less room it fits its parent and the text is cut.
+  - a number or a CSS length: exactly that, and never wider than its parent.
+
+  It works the same in `default`, `inline` and `horizontal` (where it sizes the control column; the
+  label keeps `--field-label-width`) and in every variant. In `cell` it is ignored: the column owns
+  the width. Checkbox, Radio and Switch do not take it.
+
+  **Deprecated:** `fullWidth` on these fields. It keeps working for one release and warns once,
+  naming `width`, when it is passed. It has never changed a field's width, and it still does not:
+  `fullWidth`, `fullWidth={true}` and `fullWidth={false}` all render as a field with no `width`. To
+  fit the content use `width="auto"`; to fill the row, `width="full"`. If both are passed, `width`
+  wins. `fullWidth` on Button, ButtonGroup, Tabs, Checkbox, Radio and Switch is unchanged.
+
+- 6c06908: Form: `dialogSlots` puts the form's header and actions in the header and footer bands of the Dialog it is rendered in, so they stay in view while the fields scroll. Save is tied to the form by the `form` attribute, so submit, Enter and validation keep working. Outside a Dialog it does nothing, and the default is unchanged.
+- 70a858b: `useFormat()`: `dateTime(value)` writes the day in the date format with the time as the locale writes it (`03-11-2026 2:30 pm`), and `shortDate(value)` writes the day with the month as a word (`3 Nov 2026`).
+- 9f8ffb6: Summary funnel cards for figures that are not narrowing steps (an amount per payment method). `showChange: false` hides the change from the step before, on the rows, in the tooltip and the picture, and gives its column to the bars (`Funnel` takes the same prop). `chart: 'bars'` draws the card as bars, and users can pick it in Manage.
+- 69971b5: New `ImageEditor`: crop (drag and resize box, ratios, free, circle mask), zoom, pan, quarter turns, straighten and flip, with mouse, touch and keyboard, in place or in a Dialog. A compact row of icon buttons under the image. A host allows or restricts each tool with `crop`, `zoom`, `pan`, `rotate`, `straighten`, `flip` and `reset`: a restricted tool has no button and no key, and cannot appear in the output, even through `initialTransform`. `crop.minWidth` and `crop.minHeight` refuse an output below them with a message, and nothing is ever enlarged. `output` sets the size limits, type and quality. EXIF orientation is honoured once. A remote image whose server does not allow CORS shows a clear message. `panel` adds the host's own content, such as a preview of the result.
+
+  ImagePicker: `editable` opens each chosen or replacing file in the editor first, so `onAdd` and `onReplace` get the edited file. `editor` passes the editor's options through. `onEdit` adds an Edit action to each tile, and with `editable` and `onReplace` it opens the editor on `item.editSrc` (or `item.src`). Existing callers are unchanged.
+
+  `prepareImage` takes a `transform`, the same one the editor gives, so crop, rotate and flip can run with no UI. `ImagePrepareError` has a `code`. New exports `resolveImageTransform` and `imageOutputSize`, and new labels under `imageEditor`.
+
+- 8b1c25f: ImagePicker: `onReplace` swaps a single image at `max={1}` (click or drop on a Replace tile), `dropZone` draws the add tile as a wide drop zone, `max={Infinity}` means no limit and drops the "2 / 5" count, and `onRemove` is optional (no remove button without it). New labels `image.replace` and `image.drop`.
+- dd19a67: Input: `type="file"` takes `accept` and `multiple`, has a styled choose-file button on the browser's own control, and is no longer controlled, so a re-render cannot clear the chosen file (read `event.target.files`). `type="color"` is a proper swatch with its value beside it. Read-only disables both, since neither has a read-only mode of its own.
+- e699ab8: Select and Suggest lists fit their content. By default a list is as wide as its longest option: never narrower than its field, up to a limit (320px for Select, 480px for Suggest; `--popup-list-width-max` changes it), and always on screen. A row past the limit is cut off, with the full text on hover. The new `listWidth="field"` makes the list exactly the field's width, as does `position.matchWidth: true`. Fields are not changed. Select no longer passes `fullWidth` to the DOM.
+- 16fd40f: New components. `Link`: a styled anchor; `as` takes a router's link. `Alert`: status tones (info, success, warning, danger), optional title, icon, action and dismiss, the right live-region role for each tone, and a page-wide `banner` form. `Pagination`: controlled page controls for anything paged that is not a DataTable, with a page list or a simple "Page 1 of 8", the row range and a size select. `CommandPaletteTrigger`: a ready button for `CommandPalette`, with text and keycap on wide screens and an icon button on small ones. `PageProgress`: a thin bar along the top while a route changes, driven by `active`, showing nothing for a quick navigation and standing still under reduced motion. `NavList`: a vertical list of links for inside a page, over `NavItem` and by the same link rule as `Sidebar`. Their words are in new `UIProvider labels` groups: `link`, `alert`, `pagination`, `pageProgress`, `navList`, and `commandPalette.trigger`.
+- e8bd2f0: One reorder everywhere. `Select`'s `reorder` and the DataTable's Card fields / List fields editor now run on `ReorderList` instead of their own native drag and drop, so rows slide live, and both work on touch and with the keyboard.
+
+  `ReorderList` gains (all additive): `role` and `itemRole`; `axis="wrap"` for chips on several lines; `ReorderGroup` with `onMove`, for rows that travel between lists, with `listId`, `maxItems`, `whenFull` (`reject` or `replace`) and `sortable`, live sliding in the destination, keyboard steps through the lists in order and announcements (new `labels.reorder.movedToList` and `droppedInList`); `autoScroll` and `autoScrollSpeed`; `handleRef`, whose `move(key, step)` moves a row for an owner that keeps the focus elsewhere; and `data-reorder-grab` for a control inside a row that should drag on a press that travels and click otherwise.
+
+  `Select`: the selected options render as a `ReorderList` with the rest below them. A selected row drags from anywhere on it (on touch, its handle at once or the row after a long press). The focus stays on the search box or trigger: Alt+Up / Alt+Down moves the row under the keyboard cursor, and the plain arrows, Enter and Escape are unchanged. Escape during a drag cancels only the drag. Dragging is off while a search narrows the list. `reorder={true}` now drags too (it used to only put the selected options first). `fixedItems` also locks those first places by position. All of `ReorderConfig` is still accepted, and `dragHandleClassName` and `autoScrollSpeed`, which nothing read before, now work. In reorder mode the rows are `role="option"` and the selected ones are `<div>`s inside the ReorderList (new labels `select.selectedOptions` and `select.reorderInstructions`).
+
+  Card fields editor: fields can also be placed at a position within a part, the grip now shows on touch, and each field in the "not shown" pool has a grip for the keyboard. Enter on a pool field still adds it. New label `fieldsMove`. CSS: `.dt-cle-slot--drop` is gone, use `[data-reorder-over]`; `.dt-cle-chip-grip` is gone, the grip is `ReorderList`'s handle.
+
+  Breaking, for anyone using the `useSelect` hook directly: `handlers.handleDragStart`, `handleDragOver`, `handleDragEnd` and `handleDrop` and `state.draggedItem` and `draggedOver` are removed (use `handlers.handleReorder`). The `AutoScrollState` type is still exported, deprecated.
+
+- 8873e83: New `ReorderList`: a drag-to-reorder list where the dragged row lifts with a shadow and follows the pointer while the other rows slide apart. One code path for mouse, touch and pen (a handle drags at once; `dragFrom="row"` asks for a long press on touch, so the page still scrolls). Vertical or horizontal, rows of any size, auto-scroll near the edges of scrolling containers, works inside a Dialog, honours reduced motion. Keyboard: Space or Enter on a focused handle picks up, arrows move, Space or Enter drops, Escape cancels, announced to screen readers through the new `labels.reorder` of `UIProvider`. Controlled, with `items`, `getKey`, `renderItem`, `onReorder`, plus `canDrag` and `isFixed`.
+
+  DataTable now uses it for the column chooser, the export columns, Manage's view tabs and templates, its summary cards and the "Grouped by" chips, so these all slide live and can be reordered with the keyboard and on touch. The private drag list and its classes (`.drag-and-drop-list`, `.drag-and-drop-item`, `.drag-and-drop-handle`) are gone; CSS that reached into them should target `.dt-reorder-frame` and `.dt-reorder-item`.
+
+- 5eeae92: DataTable: `disableTextTransform` on a row action shows its button's label as written. Labels are uppercase otherwise, as on every Button.
+
+### Patch Changes
+
+- aff428a: Breadcrumbs: the home crumb sizes only its icon, so a text label reads at the trail's size. A home crumb with a text label is also named by that label, not by a fixed "Home".
+- a7d56b9: **DataTable: what a bulk action's `onRun` returns now decides the feedback** (behaviour change).
+
+  - **Returns nothing** (or a promise of nothing): the table says nothing and keeps the selection. It used to show "N done" and clear the selection straight away, even when the action had only opened a dialog that still needed the rows. An action that wants the old result returns one: `{}` gives the counted summary. An action that finishes later lets go of the rows with `api.clearSelection()`.
+  - **Returns a result**: reported exactly as before (`done`, `skipped`, `reason`, `message`, `status`, `undo`, `keepSelection`).
+  - **Throws or rejects**: the failure is always reported and the selection stays, as before.
+
+  Rows `eligible` turned down are no longer counted in a toast when `onRun` returns nothing: the action receives them as `skipped`. In server mode the table still fetches the rows again after an action that returned nothing.
+
+- a7d56b9: **DataTable: an explicit `pageSize` wins when the app set no `pageSizeOptions`.** `pagination: { pageSize: 10 }` shows 10 rows (it showed 25), in client and server mode, and the selector offers 10 among the default sizes. The same goes for `initialState.pageSize`, and for a view's `pageSize` when switching to a view with no options of its own. The fallback to the first option now applies only to options the app set itself (on the view's `pagination` or on the `dataSource`).
+
+  The table's page size selector also keeps its sizes in order (10, 25, 50, 100, not 10, 100, 25, 50) and has no search box, like the standalone `Pagination`.
+
+- 88aaeba: DataTable: a `pageSize` that is not in the app's own `pageSizeOptions` now starts on the first option, so the page-size selector no longer shows a placeholder. "All" is skipped when another option exists. This also applies when another view offers different options. With no `pageSizeOptions` from the app, the explicit `pageSize` wins (see below).
+- 88aaeba: DataTable server mode: changing a view's `params` returns to page 1, with no request for the old page of the new params. Params are compared by value, so a new object with the same contents changes nothing, and a restored page index survives the mount.
+- 4d09353: DatePicker: the confirm button's default text is now "Apply", not "Search". `applyLabel` still sets it per field (`''` hides it), and `labels.datePicker.apply` on `UIProvider` sets it for the app. A screen that relied on the default to read "Search" should pass `applyLabel="Search"`.
+- b756194: DatePicker, days: the panel's date and time boxes no longer act on the grid or form around them (an arrow moved the table's cell, Tab moved it twice, Enter submitted the form). A failed Form submit now finds `field: 'date'` and focuses it (`data-name` on the trigger). A read-only or disabled field no longer opens by keyboard or by the `open` prop. Space opens the panel without replacing the box's text with a blank.
+- b929252: DatePicker, days: closing the panel with Enter, Escape or the confirm button puts the focus back on the field, so Enter-to-next carries on in a Form or a table. A press outside now reports `onOpenChange(false, 'blur')` instead of `'escape'`, and leaves the focus where it landed. In a Form, Tab from the panel closes it and moves to the next field; it used to submit the form. Time boxes are still reached with Tab first.
+
+  Fields in a grid: Delete or Backspace no longer empties a read-only or disabled cell. This covers every field that clears through the grid, not only the DatePicker.
+
+- 0665a92: Icons fill their space. An icon-only `Button`'s icon scaled with the button's text, about 13px in a 36px button; it now uses the new `--icon-size-xxs` … `--icon-size-xl` tokens (20px at `small`) and the button stays the same size. Sidebar icons use them too (20px, 16px on child rows), and the box and child indent now follow `--ui-scale`, so they zoom with the text. An icon given its own `size` keeps it.
+- 656912e: Input: a `Button` in `icon.start` or `icon.end` no longer makes the field taller, at any pairing of button size and field size.
+- f5ef4ac: Fix a Select's list running past the right edge of a phone screen when an option is long, and a
+  ChipInput tag longer than its field pushing out of the field. The tag's text is now cut instead.
+- 14d7aba: The build's leak check now also scans `src/`, stories and tests included.
+- a3d762c: Fix `Input type="password"` being taller than other fields at small sizes (32px against 28 at
+  `xxs`, up to 44 against 42 at `medium`). The show/hide button no longer sets the field's height.
+- da337de: DatePicker `picker="month"` and `picker="year"`: one click or Enter chooses a single period and closes the panel, with the focus back on the field; clicking the period already chosen keeps it instead of clearing it. A single value has no confirm button, so the "Search" default no longer appears and `applyLabel=""` is no longer needed. A `range` closes once a click leaves two different ends, and shows a confirm button only when `applyLabel` is passed. `onApply` is called when a click or Enter chooses. Enter now also takes a cell reached with the panel's page buttons or year list, and the year list no longer jumps back to the value.
+- 8324f7b: Fix opening a Select crashing with "Maximum update depth exceeded" on React 18. The list's
+  position is measured on every render, and React 18 kept replaying a waiting update against old
+  state, so the measurement never settled. Suggest's list had the same pattern and is fixed with it.
+  Also fix the `inert` attribute on React 18, where it was dropped with a warning, so leaving
+  surfaces and closed Collapsible content stayed reachable by keyboard.
+- a5e99a5: DataTable: pressing a button, link or field inside a row no longer tints the whole row. The browser's `:active` also matches a parent of the pressed control, so a row looked clicked on every button press. Only a press on the row itself shows the tint and opens the row.
+- 52af1d3: Sidebar: the expand chevrons and the collapse bar's chevron follow `--ui-scale`, so they zoom with the row's icon and text.
+- 7a987e6: Sidebar: the collapsed rail's flyout keeps its title and rows while it animates out. It used to empty at once, so the exit played on a bare strip where the panel had been.
+- 9f8ffb6: - ScrollStrip (Tabs, filter chips, view tabs): while the strip overflows, slim rectangular ‹ › boxes stand either side of it, always there, with the one that has nothing further that way disabled. They go when everything fits.
+  - DatePicker: the preset's name no longer stays after the app changes the value. It stays only if the new dates still match a preset; otherwise the dates show.
+  - Input: the password toggle is an icon, not an emoji.
+- 0dc8be7: Tooltips and the collapsed Sidebar's flyouts no longer flicker. There is one tip at a time, and appearing from nothing or leaving to nothing are the only moves that animate: moving from one trigger to the next swaps in a single frame, with no delay and no fade, and never two tips on screen. In the collapsed Sidebar, flyouts and tips hand over the same way, and a flyout re-entered during its exit no longer restarts its entrance from invisible. A tip the pointer left during its delay was never seen, so it no longer shortens the next tip's wait. Rail tips anchor to their row, so they all line up.
+
 ## 0.9.0
 
 ### Minor Changes

package/README.md

@@ -30,14 +30,24 @@ export const Example = () => (
 
 ## What's in it
 
-- **Fields** — Input, Select, Suggest, Checkbox, Radio, Switch, ChipInput, all
-  sharing one control surface, a 6-step size scale and one state model
-- **Primitives** — Button, Typography, Tooltip
+- **Fields** — Input, Select, Suggest, DatePicker (a day, a range, or `picker="month"` /
+  `"year"`), Checkbox, Radio, Switch, ChipInput (including free-text `tags`), all sharing one
+  control surface, a 6-step size scale and one state model
+- **Images** — ImagePicker, ImageStrip, ImageViewer, and ImageEditor (crop, zoom, rotate,
+  straighten, flip; each tool can be allowed or restricted). `prepareImage` applies the same
+  transform with no UI
+- **Overlays** — Dialog (`useDialog()` for confirms; `DialogHost` if you do not use `UIProvider`),
+  Popover, DropdownMenu, Toast
+- **Primitives** — Button, Typography, Tooltip, Alert (with a page-wide `banner` form)
+- **Navigation** — Link (`as` takes a router's link), Pagination, CommandPaletteTrigger,
+  PageProgress (a route-change bar, driven by `active`), NavList (a vertical link list for
+  inside a page)
 - **Layout** — Collapsible, FieldWrapper
+- **Lists** — ReorderList (drag to reorder: rows slide live, with mouse, touch or keyboard)
 - **Composites** — Form, Fields, EditableTable
 - **Data** — DataTable (client data or a server `dataSource`: views, search, filters,
-  sort, grouping, column chooser, table / card / split layouts, selection + bulk
-  actions, header / footer summaries with charts, export to xlsx / pdf / csv / html /
+  sort, grouping, column chooser, table / card / split layouts, `toolbarActions`, selection + bulk
+  actions (the table reports what `onRun` returns, and nothing if it returns nothing), header / footer summaries with charts, export to xlsx / pdf / csv / html /
   json / xml) and Charts (Chart, ColumnChart, BarList, Donut, Progress, Legend,
   ChartTable, LineChart, Funnel, Gauge, Treemap, … with a picture menu)
 - **Scroll** — one scrollbar rule (thin, hidden until needed) in `style.css`, edge
@@ -129,6 +139,31 @@ Every colour, size and spacing value is a CSS custom property. Override them on
 `variant` is per family — `outlined | filled | standard | underlined` for text
 fields, `outlined | filled | standard` for Checkbox and Radio, none for Switch.
 
+### Field width
+
+A text field fills the space its parent gives it, up to 320px. `width` changes that:
+
+| `width` | The field is |
+| --- | --- |
+| not given | the available space, up to 320px |
+| `"full"` | the whole row, with no limit |
+| `"auto"` | as wide as its content |
+| `240`, `"15rem"` | exactly that, never wider than its parent |
+
+In a table cell (`layout="cell"`) the column decides and `width` is ignored. With `layout="horizontal"`
+it sizes the control; the label keeps its column.
+
+### List width
+
+A Select or Suggest list fits its content: never narrower than its field, up to 320px (Select) or
+480px (Suggest), and always on screen. `listWidth="field"` makes it exactly the field's width.
+
+### Icon size
+
+An icon-only button or a Sidebar row sizes its icon with the `--icon-size-xxs` … `--icon-size-xl`
+tokens, which follow `--ui-scale`. Override them on `:root` to change icon sizes across the app. An
+icon given its own `size` keeps it.
+
 ### Dialog width
 
 `Dialog` takes `size="sm | md | lg | xl | full"` (420 / 560 / 720 / 960 px / the whole