@espressif/dashboard-ui-components 1.7.0 → 1.8.0

package/CHANGELOG.md

@@ -4,6 +4,107 @@ All notable changes to this project are documented here. The format is based on
 [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project adheres
 to [Semantic Versioning](https://semver.org/).
 
+## [1.8.0] - 2026-10-08
+
+A minor release focused on small screens. `Tabs`, `DataTable`, `SimpleList`,
+`DynamicList`, `ListDetails`, `KeyValueManager` and `Pagination` now adapt
+to phone widths, and `ScrollArea` no longer stretches to fit wide content.
+`DataTable` gains sticky, wrapping and width-based hidden columns, and a
+new `rm-dashboard-update` illustration is added. No breaking API changes,
+but one default changed: `DataTable` cells now stay on one line, so long
+free-text columns need `meta: { wrap: true }` to keep wrapping.
+
+### Added
+- **`Illustration`** — new `rm-dashboard-update` illustration: the RainMaker
+  cloud delivering update packages to a dashboard on a laptop. It is a
+  companion to `rm-data-download` (same canvas, cloud and connector) and,
+  like it, plays SMIL animations with `animated`: packages fly in, each one
+  refreshes a stat card, the chart regrows, the progress bar fills and a sync
+  badge spins. Colours come from the theme tokens, so it works in dark mode.
+- **`DataTable`** — responsive column options through `meta` (typed as the
+  exported `DataTableColumnMeta`): `sticky: true` pins leading columns to
+  the left edge while the table scrolls horizontally (the row-selection
+  checkbox column is pinned with them), and `wrap: true` lets a long
+  free-text column wrap. Pinned cells use the page background; tables on
+  another surface set `--data-table-sticky-bg` to match it.
+- **`DataTable`** — `meta.hideBelow` hides lower-priority columns while the
+  table is narrow. It takes a size from Tailwind's container scale (`sm`
+  384px … `7xl` 1280px, typed as `DataTableBreakpoint`) or a width in pixels,
+  and measures the table's own width rather than the viewport, so it also
+  works in sheets and split panes. A phone-width table is below `sm`, so
+  `hideBelow: "sm"` hides a column on phones. Hidden columns stay in the
+  Columns menu; visibility is only re-applied when the width crosses a
+  breakpoint, so a column the user brings back stays visible.
+- **`ScrollArea`** — `orientation` prop (`"vertical"` default,
+  `"horizontal"`, `"both"`) choosing which directions scroll and which
+  scrollbars render. Types exported as `ScrollAreaProps` and
+  `ScrollAreaOrientation`.
+- **`Table`** — optional `containerRef` and `containerClassName` props for
+  the scroll container that wraps the `<table>`.
+
+### Changed
+- **`Tabs`** — when the triggers don't fit, `TabsList` now scrolls
+  horizontally instead of overflowing the page. Edges fade where tabs are
+  hidden, chevron buttons page through them on mouse and trackpad devices
+  (touch devices swipe), and the selected tab is kept in view. Lists with
+  `aria-orientation="vertical"` are unchanged.
+- **`DataTable`** — on narrow screens the table now scrolls horizontally
+  instead of squashing its columns. Body cells stay on one line by default
+  (as header cells already did), and shadows at the edges show when columns
+  are scrolled out of view. Long free-text columns that used to wrap now
+  extend the row; add `meta: { wrap: true }` to keep them wrapping. The
+  toolbar also wraps, so `tableActionsContent` moves above the Columns
+  button when there is no room for both.
+- **`SimpleList`, `DynamicList`** — `direction="row"` (list-level or, in
+  `SimpleList`, per item) now applies from the `sm` breakpoint (640px) up.
+  On phones, label and value stack like a column row instead of squeezing
+  onto one line. `DynamicList`'s `keyWidth` split applies from `sm` up.
+- **`ListDetails`** — below the `md` breakpoint (768px) the layout stacks:
+  the items become a single scrollable row with arrow buttons and edge
+  fades, the selected item is kept in view, and its details show below.
+  The `footer` is hidden on these screens. String titles in the row are
+  capped at 12rem and truncated, and the default chevron is omitted there
+  (a custom `endIcon` still shows). From `md` up the layout is unchanged.
+- **`KeyValueManager`** — on small screens (below the `sm` breakpoint,
+  640px) search and Add become icon buttons. The search icon expands the
+  search box across the toolbar (hiding Add) and focuses it; a close
+  button, or Escape, clears the search and returns to the icons. Rows show
+  as key/value cards without the column header, with the delete button
+  always visible. New `labels.closeSearch` names the close button.
+- **`Pagination`** — in containers narrower than 28rem the Previous and
+  Next buttons become icon-only (their labels stay available to screen
+  readers), and the page-size selector wraps onto its own line when the row
+  still doesn't fit.
+
+### Fixed
+- **`ScrollArea`** — content wider than the area no longer stretches it
+  and gets clipped. A vertical area (the default) now keeps its content at
+  the area's width, so wide children such as `DataTable` scroll sideways on
+  their own. Areas that pass `<ScrollBar orientation="horizontal" />` as a
+  child keep scrolling horizontally as before; prefer `orientation`.
+- **`BasicDetailsCard`** — a small gap (0.25rem) now separates the primary
+  and secondary text, which previously touched. This also spaces out
+  `DynamicList` rows and the small-screen `KeyValueManager` rows that use it.
+- **`KeyValueManager`** — the row delete button, shown on hover, is now
+  also visible when focused with the keyboard.
+- **`Tabs`** — the animated highlight stays aligned with its tab when the
+  tab list's container is scrolled.
+
+### Internal
+Nothing in this section affects the published package.
+
+- A shared `useScrollOverflow` hook (not exported) tracks hidden content on
+  either side of a horizontal scroller for `Tabs`, `DataTable` and
+  `ListDetails`.
+- Demo: new examples for `Tabs` (many tabs, plus tab-count and icon
+  controls on the playground), `DataTable` (wide table, phone width,
+  several pinned columns, wrapping, clickable rows, tinted surface and a
+  resizable `hideBelow` table), `Pagination` (narrow containers) and
+  `ScrollArea` (wide content, horizontal scrolling). The demo's API tables
+  mark free-text columns as `wrap`.
+- Tests for `DataTable` column `meta` (`sticky`, `wrap`, `hideBelow`),
+  `ListDetails`, `KeyValueManager` and `ScrollArea`.
+
 ## [1.7.0] - 2026-10-06
 
 A minor release adding per-item icons and colours to `OverflowBadgeList`