@espressif/dashboard-ui-components 1.8.0 → 1.9.1

package/CHANGELOG.md

@@ -4,6 +4,32 @@ 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.9.1] - 2026-10-09
+
+### Added
+- **`StatusBadge`** — `labelClassName` styles the label. With
+  `labelClassName="max-sm:sr-only"` and `className="max-sm:pr-0.5"` the
+  badge shows only its icon on phones, and the label stays available to
+  screen readers.
+
+## [1.9.0] - 2026-10-09
+
+### Added
+- **`DataTable`** — `meta.fill` gives a column the width the other columns
+  leave, and its content never widens the table. Render the cell with
+  `truncate` and a long free-text value (a description, notes) ends in an
+  ellipsis at the column edge instead of making a phone-width table scroll.
+  Combined with `wrap`, the text wraps within that width, keeping `wrap`'s
+  16rem minimum.
+
+### Fixed
+- **`Alert`, `IconTextActionCard`** — actions that don't fit beside the text
+  now wrap onto their own line, aligned to the end, instead of squeezing the
+  title and description down to one character per line. The text keeps at
+  least 12rem (icon included) before the actions wrap. Wrapping follows the
+  card's own width, so it also applies inside dialogs and side panels. Cards
+  without actions are unchanged.
+
 ## [1.8.0] - 2026-10-08
 
 A minor release focused on small screens. `Tabs`, `DataTable`, `SimpleList`,

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

@@ -1,4 +1,4 @@
-import { ProgressBar } from './chunk-7GVOSWCQ.js';
+import { ProgressBar } from './chunk-XFYL5IZU.js';
 import { Card, CardContent } from './chunk-ABBHGIFI.js';
 import { Tooltip2 } from './chunk-ZFYUONPY.js';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-7GVOSWCQ.js → chunk-XFYL5IZU.js}

@@ -57820,6 +57820,9 @@ function DataTableBody({
               // One line by default: narrow screens scroll the table rather
               // than squashing every column into a stack of words.
               getColumnMeta(cell.column)?.wrap ? "min-w-64 whitespace-normal" : "whitespace-nowrap",
+              // `max-w-0` drops the content from the column's width; `w-full`
+              // then hands the column the table's leftover width.
+              getColumnMeta(cell.column)?.fill && "w-full max-w-0",
               showBorder && cellIndex === 0 && "pl-4",
               sticky.className
             ),
@@ -58527,6 +58530,7 @@ var StatusBadge = React11.forwardRef(
     size = "default",
     isLoading = false,
     className,
+    labelClassName,
     ...props
   }, ref) => {
     const iconPx = ICON_PX[size];
@@ -58542,7 +58546,7 @@ var StatusBadge = React11.forwardRef(
         ),
         children: [
           isLoading ? /* @__PURE__ */ jsx(Spinner, { size: iconPx, "aria-hidden": true }) : renderStatusBadgeIcon(Icon2, iconPx),
-          /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: label })
+          /* @__PURE__ */ jsx("span", { className: cn("min-w-0 truncate", labelClassName), children: label })
         ]
       }
     ) });
@@ -59956,6 +59960,9 @@ function trailingLeadAndSlot(options) {
     }
   );
 }
+var ACTIONS_ROW_CLASS = "flex-wrap";
+var ACTIONS_LEADING_BASIS_CLASS = "basis-48";
+var ACTIONS_SLOT_CLASS = "relative z-10 ml-auto max-w-full shrink-0";
 function shellPresetRing(color) {
   const c = color ?? "gray";
   return isPresetColor(c) ? PRESET_RING_CLASSES[c] : "";
@@ -60069,7 +60076,7 @@ var IconTextActionCard = React11.forwardRef(
           !showActionsSlot ? s.gap : void 0,
           variant === "gradient" && "relative z-10",
           !showActionsSlot && "w-full min-w-0",
-          showActionsSlot && "min-w-0"
+          showActionsSlot && ["min-w-0", ACTIONS_LEADING_BASIS_CLASS]
         ),
         children: leadingMain
       }
@@ -60105,6 +60112,7 @@ var IconTextActionCard = React11.forwardRef(
           "aria-disabled": disabled === true ? true : void 0,
           className: cn(
             "relative isolate inline-flex w-full max-w-full cursor-default items-center overflow-hidden rounded-xl text-left ring-offset-background",
+            ACTIONS_ROW_CLASS,
             showActionsSlot && "group",
             variant === "gradient" && "group",
             disabled && "pointer-events-none opacity-50",
@@ -60122,7 +60130,7 @@ var IconTextActionCard = React11.forwardRef(
               "div",
               {
                 className: cn(
-                  "relative z-10 shrink-0",
+                  ACTIONS_SLOT_CLASS,
                   showActionsOnlyOnHover && "pointer-events-none opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100"
                 ),
                 children: actions
@@ -60139,6 +60147,7 @@ var IconTextActionCard = React11.forwardRef(
           ref,
           className: cn(
             "relative isolate inline-flex w-full max-w-full items-center overflow-hidden rounded-xl ring-offset-background",
+            ACTIONS_ROW_CLASS,
             ringTransitionClass,
             showActionsSlot && "group",
             variant === "gradient" && "group",
@@ -60166,7 +60175,8 @@ var IconTextActionCard = React11.forwardRef(
                   "-m-0 inline-flex min-h-0 min-w-0 flex-1 cursor-pointer items-center rounded-none border-0 bg-transparent text-left outline-none focus-visible:outline-none",
                   s.gap,
                   variant === "gradient" && "relative z-10",
-                  "min-w-0"
+                  "min-w-0",
+                  ACTIONS_LEADING_BASIS_CLASS
                 ),
                 children: leadingMain
               }
@@ -60175,7 +60185,7 @@ var IconTextActionCard = React11.forwardRef(
               "div",
               {
                 className: cn(
-                  "relative z-10 shrink-0",
+                  ACTIONS_SLOT_CLASS,
                   showActionsOnlyOnHover && "pointer-events-none opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100"
                 ),
                 children: actions

package/dist/common/index.js

@@ -1,5 +1,5 @@
-export { CopyrightCard, PageLoader } from '../chunk-DI4PTWVR.js';
-export { AnimatedRainmakerLogo } from '../chunk-7GVOSWCQ.js';
+export { CopyrightCard, PageLoader } from '../chunk-HIUBSBAP.js';
+export { AnimatedRainmakerLogo } from '../chunk-XFYL5IZU.js';
 import '../chunk-ABBHGIFI.js';
 export { AppLogo, FooterCard, MyAccountMenu, ProfileCard } from '../chunk-P6F6UWV2.js';
 import '../chunk-ZFYUONPY.js';

package/dist/components/index.d.ts

@@ -18226,6 +18226,14 @@ interface DataTableColumnMeta {
      * long free-text columns such as descriptions.
      */
     wrap?: boolean;
+    /**
+     * Give the column whatever width the other columns leave, and never let its
+     * content widen the table. Pair it with a cell that truncates (`truncate`)
+     * so a long value ends in an ellipsis at the column edge instead of making
+     * the table scroll. With `wrap`, the text wraps within that width instead,
+     * but keeps `wrap`'s 16rem minimum.
+     */
+    fill?: boolean;
     /**
      * Hide the column while the table is narrower than this: a size from
      * Tailwind's container scale (`sm` 24rem/384px, `md` 28rem/448px, `lg`
@@ -18384,6 +18392,12 @@ interface StatusBadgeProps extends HTMLAttributes<HTMLDivElement> {
     size?: Size;
     /** When true, swaps `icon` for a `Spinner` of matching pixel size. */
     isLoading?: boolean;
+    /**
+     * Extra classes for the label. Pass `max-sm:sr-only` (with
+     * `className="max-sm:pr-0.5"` to even the padding) for an icon-only badge
+     * on phones whose label stays available to screen readers.
+     */
+    labelClassName?: string;
 }
 
 declare const statusBadgeSizeVariants: (props?: ({

package/dist/components/index.js

@@ -1,4 +1,4 @@
-export { Accordion, AdvancedSearchBox, Alert, AnimatedCard, AreaChart, AsyncCombobox, AsyncMultiSelect, BarChart, BasicDetailsCard, CHART_CATEGORY_COLORS, CHART_SERIES_COLORS, Calendar, CalendarDayButton, Carousel, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CircularProgress, Code, CodeEditor, CollapsibleCard, ComposedChart, ConfirmationDialog, ContentContainer, CopiableText, DEFAULT_CHART_SERIES_COLORS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, DatePicker, DateRangePicker, DateTimePicker, DeviceIcon, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DonutChart, DynamicList, FileInput, FileUpload, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FullSizeError, FullscreenDialog, IconAvatar, IconTextActionCard, Illustration, InlineError, InputOTP, InputOTPSeparator, KeyValueManager, LineChart, ListDetails, LottieAnimationContainer, MarkdownContent, MonospaceContent, NavBar, no_data_card_default as NoDataCard, OverflowBadgeList, PRESET_IDS, PRESET_LABELS, PageContainer, PageContainerSkeleton, Pagination, PopCollectionItem, PreviewCard, PreviewCardBackdrop, PreviewCardPanel, PreviewCardTrigger, ProgressBar, ROLLING_PRESET_IDS, RadioGroup, RequirementList, ScrollableSections, SearchBox, SectionCard, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableCardList, SimpleCard, SimpleClickableCard, SimpleInfoCard, SimpleList, SimplePaginatedList, SimplifiedDate, Spinner, StatCard, StatusBadge, StatusCardList, Switch, TYPOGRAPHY_VARIANTS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSkeleton, Tabs, TabsContent, TabsContents, TabsList, TabsTrigger, Tag, TagInput, Textarea, TimePicker, Toast, Toaster, TogglableItemsList, ToggleGroup, ToggleGroupItem, TransferList, TreemapChart, Typography, UserTypeBadge, VerificationInProgress, VerticalStepper, animatedCardAnimations, animatedCardTypeKeys, buildSeriesChartConfig, computeDateRange, getChartSeriesColor, illustrationRegistry, illustrationsById, parseSvgViewBoxAspectRatio, statusBadgeSizeVariants, toast, typographyDefaultElement, typographyVariantClasses, useFormField, userTypeBadgeRegistry, userTypeBadgeSizeVariants, userTypeBadgeUserTypes } from '../chunk-7GVOSWCQ.js';
+export { Accordion, AdvancedSearchBox, Alert, AnimatedCard, AreaChart, AsyncCombobox, AsyncMultiSelect, BarChart, BasicDetailsCard, CHART_CATEGORY_COLORS, CHART_SERIES_COLORS, Calendar, CalendarDayButton, Carousel, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CircularProgress, Code, CodeEditor, CollapsibleCard, ComposedChart, ConfirmationDialog, ContentContainer, CopiableText, DEFAULT_CHART_SERIES_COLORS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, DatePicker, DateRangePicker, DateTimePicker, DeviceIcon, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DonutChart, DynamicList, FileInput, FileUpload, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FullSizeError, FullscreenDialog, IconAvatar, IconTextActionCard, Illustration, InlineError, InputOTP, InputOTPSeparator, KeyValueManager, LineChart, ListDetails, LottieAnimationContainer, MarkdownContent, MonospaceContent, NavBar, no_data_card_default as NoDataCard, OverflowBadgeList, PRESET_IDS, PRESET_LABELS, PageContainer, PageContainerSkeleton, Pagination, PopCollectionItem, PreviewCard, PreviewCardBackdrop, PreviewCardPanel, PreviewCardTrigger, ProgressBar, ROLLING_PRESET_IDS, RadioGroup, RequirementList, ScrollableSections, SearchBox, SectionCard, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableCardList, SimpleCard, SimpleClickableCard, SimpleInfoCard, SimpleList, SimplePaginatedList, SimplifiedDate, Spinner, StatCard, StatusBadge, StatusCardList, Switch, TYPOGRAPHY_VARIANTS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSkeleton, Tabs, TabsContent, TabsContents, TabsList, TabsTrigger, Tag, TagInput, Textarea, TimePicker, Toast, Toaster, TogglableItemsList, ToggleGroup, ToggleGroupItem, TransferList, TreemapChart, Typography, UserTypeBadge, VerificationInProgress, VerticalStepper, animatedCardAnimations, animatedCardTypeKeys, buildSeriesChartConfig, computeDateRange, getChartSeriesColor, illustrationRegistry, illustrationsById, parseSvgViewBoxAspectRatio, statusBadgeSizeVariants, toast, typographyDefaultElement, typographyVariantClasses, useFormField, userTypeBadgeRegistry, userTypeBadgeSizeVariants, userTypeBadgeUserTypes } from '../chunk-XFYL5IZU.js';
 export { Badge, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Label, PRESET_GRADIENT_BACKDROP, PRESET_GRADIENT_FRAME, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, VARIANTS, VARIANT_GRADIENT_BACKDROP_BASE, VARIANT_GRADIENT_DURATION_CLASS, VARIANT_GRADIENT_HOVER_OVERLAY_CLASS, VARIANT_GRADIENT_TRANSITION_DURATION_MS, arbitraryGradientBackgroundImage, badgeVariants, buttonGroupVariants, resolveVariantStyles } from '../chunk-ABBHGIFI.js';
 export { Avatar, Button, CopyButton, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FlashButton, GlitchText, GradientText, HighlightText, Input, InputPassword, InvertButton, LIST_CLASS_NAMES, Link, List, Menu, ScrollArea, ScrollBar, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, ShimmeringText, Sidebar2 as Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, Sidebar as SidebarPrimitive, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Tooltip2 as Tooltip, TooltipContent, TooltipProvider, Tooltip as TooltipRoot, TooltipTrigger, isSidebarGroup, parseTextMarkup, useSidebar } from '../chunk-ZFYUONPY.js';
 export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Collapsible, CollapsibleContent, CollapsibleTrigger, Separator, Skeleton, buttonVariants, useIsMobile } from '../chunk-OKB2WTX7.js';

package/dist/index.js

@@ -1,5 +1,5 @@
-export { CopyrightCard, PageLoader } from './chunk-DI4PTWVR.js';
-export { Accordion, AdvancedSearchBox, Alert, AnimatedCard, AnimatedRainmakerLogo, AreaChart, AsyncCombobox, AsyncMultiSelect, BarChart, BasicDetailsCard, CHART_CATEGORY_COLORS, CHART_SERIES_COLORS, Calendar, CalendarDayButton, Carousel, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CircularProgress, Code, CodeEditor, CollapsibleCard, ComposedChart, ConfirmationDialog, ContentContainer, CopiableText, DEFAULT_CHART_SERIES_COLORS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, DatePicker, DateRangePicker, DateTimePicker, DeviceIcon, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DonutChart, DynamicList, FileInput, FileUpload, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FullSizeError, FullscreenDialog, IconAvatar, IconTextActionCard, Illustration, InlineError, InputOTP, InputOTPSeparator, KeyValueManager, LineChart, ListDetails, LottieAnimationContainer, MarkdownContent, MonospaceContent, NavBar, no_data_card_default as NoDataCard, OverflowBadgeList, PRESET_IDS, PRESET_LABELS, PageContainer, PageContainerSkeleton, Pagination, PopCollectionItem, PreviewCard, PreviewCardBackdrop, PreviewCardPanel, PreviewCardTrigger, ProgressBar, ROLLING_PRESET_IDS, RadioGroup, RequirementList, ScrollableSections, SearchBox, SectionCard, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableCardList, SimpleCard, SimpleClickableCard, SimpleInfoCard, SimpleList, SimplePaginatedList, SimplifiedDate, Spinner, StatCard, StatusBadge, StatusCardList, Switch, TYPOGRAPHY_VARIANTS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSkeleton, Tabs, TabsContent, TabsContents, TabsList, TabsTrigger, Tag, TagInput, Textarea, TimePicker, Toast, Toaster, TogglableItemsList, ToggleGroup, ToggleGroupItem, TransferList, TreemapChart, Typography, UserTypeBadge, VerificationInProgress, VerticalStepper, animatedCardAnimations, animatedCardTypeKeys, buildSeriesChartConfig, computeDateRange, getChartSeriesColor, illustrationRegistry, illustrationsById, parseSvgViewBoxAspectRatio, statusBadgeSizeVariants, toast, typographyDefaultElement, typographyVariantClasses, useFormField, userTypeBadgeRegistry, userTypeBadgeSizeVariants, userTypeBadgeUserTypes } from './chunk-7GVOSWCQ.js';
+export { CopyrightCard, PageLoader } from './chunk-HIUBSBAP.js';
+export { Accordion, AdvancedSearchBox, Alert, AnimatedCard, AnimatedRainmakerLogo, AreaChart, AsyncCombobox, AsyncMultiSelect, BarChart, BasicDetailsCard, CHART_CATEGORY_COLORS, CHART_SERIES_COLORS, Calendar, CalendarDayButton, Carousel, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CircularProgress, Code, CodeEditor, CollapsibleCard, ComposedChart, ConfirmationDialog, ContentContainer, CopiableText, DEFAULT_CHART_SERIES_COLORS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, DatePicker, DateRangePicker, DateTimePicker, DeviceIcon, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DonutChart, DynamicList, FileInput, FileUpload, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FullSizeError, FullscreenDialog, IconAvatar, IconTextActionCard, Illustration, InlineError, InputOTP, InputOTPSeparator, KeyValueManager, LineChart, ListDetails, LottieAnimationContainer, MarkdownContent, MonospaceContent, NavBar, no_data_card_default as NoDataCard, OverflowBadgeList, PRESET_IDS, PRESET_LABELS, PageContainer, PageContainerSkeleton, Pagination, PopCollectionItem, PreviewCard, PreviewCardBackdrop, PreviewCardPanel, PreviewCardTrigger, ProgressBar, ROLLING_PRESET_IDS, RadioGroup, RequirementList, ScrollableSections, SearchBox, SectionCard, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableCardList, SimpleCard, SimpleClickableCard, SimpleInfoCard, SimpleList, SimplePaginatedList, SimplifiedDate, Spinner, StatCard, StatusBadge, StatusCardList, Switch, TYPOGRAPHY_VARIANTS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSkeleton, Tabs, TabsContent, TabsContents, TabsList, TabsTrigger, Tag, TagInput, Textarea, TimePicker, Toast, Toaster, TogglableItemsList, ToggleGroup, ToggleGroupItem, TransferList, TreemapChart, Typography, UserTypeBadge, VerificationInProgress, VerticalStepper, animatedCardAnimations, animatedCardTypeKeys, buildSeriesChartConfig, computeDateRange, getChartSeriesColor, illustrationRegistry, illustrationsById, parseSvgViewBoxAspectRatio, statusBadgeSizeVariants, toast, typographyDefaultElement, typographyVariantClasses, useFormField, userTypeBadgeRegistry, userTypeBadgeSizeVariants, userTypeBadgeUserTypes } from './chunk-XFYL5IZU.js';
 export { Badge, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Label, PRESET_GRADIENT_BACKDROP, PRESET_GRADIENT_FRAME, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, VARIANTS, VARIANT_GRADIENT_BACKDROP_BASE, VARIANT_GRADIENT_DURATION_CLASS, VARIANT_GRADIENT_HOVER_OVERLAY_CLASS, VARIANT_GRADIENT_TRANSITION_DURATION_MS, arbitraryGradientBackgroundImage, badgeVariants, buttonGroupVariants, resolveVariantStyles } from './chunk-ABBHGIFI.js';
 export { AccountMenu, EntryLayout, Footer as WorkspaceFooter, Header as WorkspaceHeader, WorkspaceLayout } from './chunk-XW6Z6VO4.js';
 export { AppLogo, FooterCard, MyAccountMenu, ProfileCard } from './chunk-P6F6UWV2.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@espressif/dashboard-ui-components",
-  "version": "1.8.0",
+  "version": "1.9.1",
   "description": "Reusable React UI components, page layouts, and utilities — Espressif's dashboard design system.",
   "keywords": [
     "react",