@espressif/dashboard-ui-components 1.9.1 → 1.10.0

package/CHANGELOG.md

@@ -4,6 +4,120 @@ 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.10.0] - 2026-10-11
+
+### Changed
+- **`TabsList`** — below 768px the list takes the full width, so tabs that
+  fit share the row evenly instead of sitting at its start. Tabs that don't
+  fit still scroll sideways as before. From 768px up the list stays as wide as
+  its tabs. `fullWidth={false}` keeps the old behaviour on small screens.
+- **`ListDetails`** — below 768px the items are now picked from a menu
+  button showing the selected title, between previous/next arrows, instead of
+  the sideways-scrolling strip. The menu lists every item with the `footer` at
+  its bottom, so footer actions such as "Load more" are reachable on phones
+  (the strip hid the footer); it stays open while the footer adds items.
+  `mobileNavigation="strip"` restores the strip. From 768px up the layout is
+  unchanged.
+- **`SearchBox`, `AdvancedSearchBox`** — the search text is 16px below 768px
+  (was 12px for `size="sm"`, 14px otherwise), matching `Input`. iOS Safari
+  zooms the page into a focused field with smaller text. From 768px up the
+  sizes are unchanged.
+- **`PageContainer`** — below the `md` breakpoint (768px), the header region
+  (back link, `heading`, `actions`) is no longer always pinned. It scrolls
+  away with the content, so phones get the full screen height for the page,
+  and slides back in, pinned at the top, when the user scrolls up by 24px
+  (see `revealHeadingOnScrollUp`). From 768px up it stays pinned as before.
+  `elevateHeading` adds its shadow only where the header is pinned.
+- **`PageContainer`, `ContentContainer`** — padding is `p-3` below 768px and
+  `p-6` from 768px up (was `p-6` everywhere), so phones keep more of their
+  width for content. A `className` padding override still wins.
+- **`PageContainer`** — the heading row wraps: `actions` that don't fit beside
+  the heading move onto their own line, end-aligned, instead of squeezing the
+  heading.
+- **`Sheet`** — left and right sheets are capped to the viewport width
+  (`max-w-full`); they stay 350px wide where that fits.
+- **`Toast`** — minimum and maximum widths are capped to the viewport width
+  minus 2rem, so a toast no longer runs off a 320–360px screen.
+- **`TransferList`** — below 768px the two lists stack, and the move buttons
+  sit in a row between them with their arrows pointing down and up.
+- **`DataTable`** — every row now has the named group `group/data-table-row`
+  (clickable rows keep their unnamed `group` too).
+
+### Added
+- **`TabsList`** — `fullWidth` (default `true`): stretch the list across the
+  row below 768px.
+- **`IconTextActionCard`, `Alert`** — `actionsPlacement="below"` puts the
+  `actions` on their own line below the text, end-aligned, at every width.
+  The default `"auto"` keeps them beside the text when they fit and wraps them
+  below otherwise. On a dismissible `Alert` the close button shares the
+  actions' line.
+- **`ListDetails`** — `mobileNavigation` (`"dropdown"` default, or
+  `"strip"`) and `labels` (`previousItem`, `nextItem`, `chooseItem`) for the
+  small-screen picker's accessible names.
+- **`PageContainer`** — `stickyHeadingOnMobile` keeps the header pinned below
+  768px too, restoring the previous behaviour for a page that needs it.
+- **`PageContainer`** — `revealHeadingOnScrollUp` (default `true`) slides the
+  header back in, pinned at the top, when the user scrolls up by 24px on a
+  phone, and slides it away again on the next scroll down. Moving keyboard
+  focus into the header also reveals it, and it stays while a menu or popover
+  inside it is open. Animation follows `prefers-reduced-motion`. Set it to
+  `false` to let the header scroll away for good. Ignored when
+  `stickyHeadingOnMobile` is set.
+- **`Button`** — `iconOnlyBelow="sm" | "md"` shows only the icons below that
+  viewport breakpoint. The label stays in the DOM as screen-reader text, so it
+  is still the button's accessible name. Without an `endIcon` the button turns
+  square (36px, 40px for `size="lg"`); with one (a menu chevron) only the
+  padding tightens.
+- **`FiltersBar`** — lays out a list page's `search`, `actions` and `filters`.
+  When the bar is narrower than 768px, search and actions share the first row
+  and the filters sit in a second row that scrolls sideways; from 768px up
+  everything shares one wrapping row. Without `filters` it is a single row.
+  `searchClassName` replaces the default search width.
+- **`CopiableText`** — `hideActionsOnTouch` hides the copy button (and any
+  `actions`) on touch screens. Use it in table rows that open a details page
+  offering the same copy action, so a tap on the text opens the row.
+- **`DataTableRowActions`** — wrap a row's action cell in it. The actions hide
+  until the row is hovered, but only on devices that can hover, so touch
+  screens always show them; keyboard focus and an open menu or dialog keep
+  them visible. Its clicks and key presses don't reach `onRowClick`, so Enter
+  on an action no longer also opens the row. `alwaysVisible` and
+  `alwaysVisibleBelow="md"` turn the hiding off everywhere or on narrow
+  viewports.
+
+### Fixed
+- **`ComposedChart`** — a series without `yAxisId` no longer crashes the chart
+  ("Invariant failed"); it is plotted against the left axis, the documented
+  default.
+- **`Dialog`, `FullscreenDialog`** — the close button stacks above the
+  dialog's content, so a sticky header inside the content (e.g. a wizard's
+  step band with `z-index`) can no longer cover it.
+- **`IconTextActionCard`** (`showActionsOnlyOnHover`), **`CopiableText`**,
+  **`KeyValueManager`** table — actions that appeared only on hover were
+  invisible on touch screens. They are now hidden only on devices that can
+  hover, and `IconTextActionCard` also shows them while focus is inside.
+- **`CopiableText`** — on touch screens the copy button now sits beside the
+  text, which truncates before it, instead of covering the end of the text.
+  On devices that can hover it still appears over the text on hover.
+- **`SectionCard`** — header `actions` that don't fit beside the title now
+  wrap onto their own line instead of squeezing the title down to one
+  character per line. The title block keeps at least 12rem (icon included)
+  before the actions wrap, and a wrapped actions line isn't padded twice.
+  Headers whose actions fit are laid out exactly as before.
+- **Charts** — the legend wraps onto more lines when it's wider than the
+  chart, instead of overflowing with its first and last items clipped. Give a
+  fixed-height chart room for the extra lines on narrow screens.
+- **`DateRangePicker`** — when the custom-range calendar fits beside the
+  preset menu on neither side (phones, narrow windows), or would run past the
+  bottom of the screen (phones in landscape), it now opens inside the menu in
+  place of the presets, one month wide, capped to the screen height and
+  scrollable, instead of off screen.
+  Tapping Custom again goes back to the presets. On touch screens a tap on
+  Custom now opens the calendar; hover-to-open is limited to a mouse, since
+  a tap's emulated hover opened it and the tap itself closed it again.
+- **`IconTextActionCard`, `SimpleClickableCard`** — `truncateTitle` and
+  `truncateDescription` now end the text in an ellipsis; the text was clipped
+  without one.
+
 ## [1.9.1] - 2026-10-09
 
 ### Added

package/dist/{chunk-XW6Z6VO4.js → chunk-2GDYZAKR.js}

@@ -1,6 +1,6 @@
-import { FooterCard, MyAccountMenu, ProfileCard, AppLogo } from './chunk-P6F6UWV2.js';
-import { useSidebar, SidebarTrigger, DropdownMenuItem, SidebarProvider, Sidebar2, SidebarInset, parseTextMarkup, isPathPrefixOf, isSidebarGroup } from './chunk-ZFYUONPY.js';
-import { Button, Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from './chunk-OKB2WTX7.js';
+import { FooterCard, MyAccountMenu, ProfileCard, AppLogo } from './chunk-TMORRNEB.js';
+import { useSidebar, SidebarTrigger, DropdownMenuItem, SidebarProvider, Sidebar2, SidebarInset, parseTextMarkup, isPathPrefixOf, isSidebarGroup } from './chunk-Z4776NRY.js';
+import { Button, Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from './chunk-XNLCVHBC.js';
 import { cn } from './chunk-VU4CZ76T.js';
 import { Menu, Palette, Check, Globe, LogOut } from 'lucide-react';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-ABBHGIFI.js → chunk-ALCWXFUC.js}

@@ -1,10 +1,10 @@
-import { Separator } from './chunk-OKB2WTX7.js';
+import { Separator } from './chunk-XNLCVHBC.js';
 import { cn, isPresetColor, resolveColor } from './chunk-VU4CZ76T.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { cva } from 'class-variance-authority';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { Slot } from '@radix-ui/react-slot';
 import { useInView } from 'motion/react';
 
@@ -503,6 +503,46 @@ var CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 CardFooter.displayName = "CardFooter";
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverAnchor = PopoverPrimitive.Anchor;
+var PopoverContent = React.forwardRef(
+  ({
+    className,
+    align = "center",
+    sideOffset = 4,
+    portal = true,
+    onWheel,
+    onTouchMove,
+    ...props
+  }, ref) => {
+    const handleWheel = (event) => {
+      onWheel?.(event);
+      event.stopPropagation();
+    };
+    const handleTouchMove = (event) => {
+      onTouchMove?.(event);
+      event.stopPropagation();
+    };
+    const content = /* @__PURE__ */ jsx(
+      PopoverPrimitive.Content,
+      {
+        ref,
+        align,
+        sideOffset,
+        onWheel: handleWheel,
+        onTouchMove: handleTouchMove,
+        className: cn(
+          "z-50 w-72 rounded-2xl border bg-popover p-4 text-popover-foreground shadow-lg outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
+          className
+        ),
+        ...props
+      }
+    );
+    return portal ? /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: content }) : content;
+  }
+);
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 var labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
@@ -613,46 +653,6 @@ function Badge({
     }
   );
 }
-var Popover = PopoverPrimitive.Root;
-var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverAnchor = PopoverPrimitive.Anchor;
-var PopoverContent = React.forwardRef(
-  ({
-    className,
-    align = "center",
-    sideOffset = 4,
-    portal = true,
-    onWheel,
-    onTouchMove,
-    ...props
-  }, ref) => {
-    const handleWheel = (event) => {
-      onWheel?.(event);
-      event.stopPropagation();
-    };
-    const handleTouchMove = (event) => {
-      onTouchMove?.(event);
-      event.stopPropagation();
-    };
-    const content = /* @__PURE__ */ jsx(
-      PopoverPrimitive.Content,
-      {
-        ref,
-        align,
-        sideOffset,
-        onWheel: handleWheel,
-        onTouchMove: handleTouchMove,
-        className: cn(
-          "z-50 w-72 rounded-2xl border bg-popover p-4 text-popover-foreground shadow-lg outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
-          className
-        ),
-        ...props
-      }
-    );
-    return portal ? /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: content }) : content;
-  }
-);
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 var buttonGroupVariants = cva(
   "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {

package/dist/{chunk-HIUBSBAP.js → chunk-CDHBLANU.js}

@@ -1,6 +1,6 @@
-import { ProgressBar } from './chunk-XFYL5IZU.js';
-import { Card, CardContent } from './chunk-ABBHGIFI.js';
-import { Tooltip2 } from './chunk-ZFYUONPY.js';
+import { ProgressBar } from './chunk-LUESSJAF.js';
+import { Card, CardContent } from './chunk-ALCWXFUC.js';
+import { Tooltip2 } from './chunk-Z4776NRY.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 function CopyrightCard({