@espressif/dashboard-ui-components 1.6.0 → 1.8.0

package/CHANGELOG.md

@@ -4,6 +4,164 @@ 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`
+and element icons to `StatusBadge`, with fixes to the collapsed `Sidebar`
+flyout menus and the `WorkspaceLayout` account menu. No breaking changes.
+
+### Added
+- **`OverflowBadgeList`** — per-item icons and colours. `items` now also
+  accepts `{ id?, label, icon?, color? }` objects (exported as
+  `OverflowBadgeListItem`), which can be mixed with plain strings. Each
+  object item renders its own `icon` and uses its own `color` in place of
+  `badgeColor`, so a list can show, for example, a brand icon per
+  integration and grey out inactive entries. Plain-string items behave as
+  before: the list-level `icon` appears on the first badge only.
+- **`StatusBadge`** — `icon` also accepts a pre-built element (such as a
+  custom SVG brand icon) in addition to a Lucide component. Elements are
+  rendered as-is, so the caller sets their size. The type is exported as
+  `StatusBadgeIcon`. No breaking changes.
+
+### Changed
+- **`IconTextActionCard`, `SimpleClickableCard`, `SimpleInfoCard`** — a
+  `title` passed as a ReactNode now gets the same title typography (size and
+  weight for the card `size`) as a string title, instead of inheriting the
+  surrounding text style. It is still wrapped in a `div`, so block content
+  stays valid. Elements inside the title that set their own font size or
+  weight are unaffected; plain text inside it becomes the title weight.
+
+### Fixed
+- **`StatusBadge` / `OverflowBadgeList`** — badges with an icon no longer
+  sit higher than badges without one.
+- **`Sidebar` / `WorkspaceLayout`** — collapsed sidebar flyout menus:
+  - Choosing an item no longer brings back the group's label tooltip.
+    Closing the flyout with Escape or the keyboard still returns focus to
+    the group icon.
+  - Clicking anywhere on a row now navigates and closes the flyout.
+    Previously, with a router `linkComponent`, clicking the empty part of a
+    row navigated but left the flyout open, and clicking the row's edge
+    closed it without navigating.
+  - Choosing an item with Enter or Space now navigates to it. Previously the
+    flyout closed without navigating.
+- **`WorkspaceLayout`** — clicking the profile card in the account menu
+  (when `onProfileCardClick` is set) now closes the menu after the callback
+  runs. The card also highlights on hover like the other menu rows and can
+  be reached with the arrow keys and chosen with Enter or Space.
+
+### Internal
+Nothing in this section affects the published package.
+
+- Demo: the landing page's right panel now plays a looping, silent showreel
+  of the library's components, rendered from the real components by
+  `demo/video` (`npm run video:beats` / `npm run video:render`).
+- Demo: the `OverflowBadgeList` page gains a per-item icons example, and the
+  `WorkspaceLayout` page wires `onProfileCardClick` / `onLogoutClick` and
+  documents `onProfileCardClick`.
+- Tests for `IconTextActionCard`, `OverflowBadgeList`, `Sidebar` and the
+  `WorkspaceLayout` account menu.
+
 ## [1.6.0] - 2026-09-25
 
 A minor release adding an editable code field (`CodeEditor`), a warning