@espressif/dashboard-ui-components 1.1.1 → 1.1.2

package/CHANGELOG.md

@@ -4,6 +4,18 @@ 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/).
 
+## [Unreleased]
+
+### Added
+- `DataTable`: `noResultsAction` renders a call-to-action (e.g. an "Add device"
+  button) below the description in the empty state — the missing piece for the
+  common "no users found, create user" pattern. Alongside it, `noResultsHeading`
+  and `noResultsDescription` now accept `ReactNode` as well as `string`, and
+  `noResultsIllustration` / `hideNoResultsIllustration` let you swap or drop the
+  empty-state graphic. Purely additive: existing string usages keep working
+  unchanged, and the default illustration/heading/description stay the same when
+  nothing is passed.
+
 ## [1.1.1] - 2026-08-04
 
 A patch release with no API changes: a much smaller published bundle, a wider default

package/dist/{chunk-IT5T6Y4V.js → chunk-J7YNQMAC.js}

@@ -1,4 +1,4 @@
-import { ProgressBar } from './chunk-E6IO2DVV.js';
+import { ProgressBar } from './chunk-MOYKF2ZC.js';
 import { Card, CardContent } from './chunk-JPMN2UMF.js';
 import { Tooltip2 } from './chunk-34PXJOCS.js';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-E6IO2DVV.js → chunk-MOYKF2ZC.js}

@@ -38474,6 +38474,9 @@ function DataTableBody({
   pageSize,
   noResultsHeading,
   noResultsDescription,
+  noResultsAction,
+  noResultsIllustration,
+  hideNoResultsIllustration,
   onRowClick,
   showBorder = false,
   tableRowClassName,
@@ -38496,6 +38499,9 @@ function DataTableBody({
       {
         heading: noResultsHeading,
         description: noResultsDescription,
+        action: noResultsAction,
+        illustration: noResultsIllustration,
+        hideIllustration: hideNoResultsIllustration,
         className: "border-0 shadow-none"
       }
     ) }) }) }) });
@@ -38551,6 +38557,9 @@ function DataTable({
   columnVisibilityLabel = "Columns",
   noResultsHeading = "No results",
   noResultsDescription = "No results found. Try adjusting your search or filter to find what you're looking for.",
+  noResultsAction,
+  noResultsIllustration,
+  hideNoResultsIllustration,
   pageLabel,
   previousLabel = "Previous",
   nextLabel = "Next",
@@ -38690,6 +38699,9 @@ function DataTable({
               pageSize,
               noResultsHeading,
               noResultsDescription,
+              noResultsAction,
+              noResultsIllustration,
+              hideNoResultsIllustration,
               onRowClick,
               showBorder,
               tableRowClassName,

package/dist/common/index.js

@@ -1,5 +1,5 @@
-export { CopyrightCard, PageLoader } from '../chunk-IT5T6Y4V.js';
-export { AnimatedRainmakerLogo } from '../chunk-E6IO2DVV.js';
+export { CopyrightCard, PageLoader } from '../chunk-J7YNQMAC.js';
+export { AnimatedRainmakerLogo } from '../chunk-MOYKF2ZC.js';
 import '../chunk-JPMN2UMF.js';
 export { AppLogo, FooterCard, MyAccountMenu, ProfileCard } from '../chunk-SYEKNRS5.js';
 import '../chunk-34PXJOCS.js';

package/dist/components/index.d.ts

@@ -17709,8 +17709,11 @@ interface DataTableProps<TData, TValue> {
     pageSizeOptions?: readonly number[];
     showColumnVisibilitySelector?: boolean;
     columnVisibilityLabel?: string;
-    noResultsHeading?: string;
-    noResultsDescription?: string;
+    noResultsHeading?: string | ReactNode;
+    noResultsDescription?: string | ReactNode;
+    noResultsAction?: ReactNode;
+    noResultsIllustration?: ReactNode;
+    hideNoResultsIllustration?: boolean;
     pageLabel?: string;
     previousLabel?: string;
     nextLabel?: string;
@@ -17730,7 +17733,7 @@ interface DataTableProps<TData, TValue> {
     className?: string;
     hidePaginationControls?: boolean;
 }
-declare function DataTable<TData, TValue>({ columns, data, tableActionsContent, isFetching, pageIndex, hasNextPage, hasPrevPage, onNextPage, onPrevPage, pageSize, onPageSizeChange, pageSizeOptions, showColumnVisibilitySelector, columnVisibilityLabel, noResultsHeading, noResultsDescription, pageLabel, previousLabel, nextLabel, pageSizeOptionLabel, onRowClick, showBorder, rowSelection, onRowSelectionChange, getRowId, enableMultiRowSelection, enableRowSelection, tableRowClassName, getRowClassName, className, hidePaginationControls, }: DataTableProps<TData, TValue>): React$1.JSX.Element;
+declare function DataTable<TData, TValue>({ columns, data, tableActionsContent, isFetching, pageIndex, hasNextPage, hasPrevPage, onNextPage, onPrevPage, pageSize, onPageSizeChange, pageSizeOptions, showColumnVisibilitySelector, columnVisibilityLabel, noResultsHeading, noResultsDescription, noResultsAction, noResultsIllustration, hideNoResultsIllustration, pageLabel, previousLabel, nextLabel, pageSizeOptionLabel, onRowClick, showBorder, rowSelection, onRowSelectionChange, getRowId, enableMultiRowSelection, enableRowSelection, tableRowClassName, getRowClassName, className, hidePaginationControls, }: DataTableProps<TData, TValue>): React$1.JSX.Element;
 
 interface DeviceIconProps {
     type: string;

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, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CircularProgress, Code, CollapsibleCard, ComposedChart, ConfirmationDialog, ContentContainer, CopiableText, DEFAULT_CHART_SERIES_COLORS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, DatePicker, DateRangePicker, DeviceIcon, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DonutChart, DynamicList, FileUpload, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FullSizeError, FullscreenDialog, IconAvatar, IconTextActionCard, Illustration, InlineError, KeyValueManager, LineChart, ListDetails, LottieAnimationContainer, MarkdownContent, MonospaceContent, no_data_card_default as NoDataCard, OverflowBadgeList, PRESET_IDS, PRESET_LABELS, PageContainer, PageContainerSkeleton, Pagination, PopCollectionItem, PreviewCard, PreviewCardBackdrop, PreviewCardPanel, PreviewCardTrigger, ProgressBar, RadioGroup, RequirementList, ScrollableSections, SearchBox, SectionCard, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableCardList, SimpleCard, SimpleClickableCard, SimpleInfoCard, SimpleList, SimplePaginatedList, SimplifiedDate, Spinner, StatCard, 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, toast, typographyDefaultElement, typographyVariantClasses, useFormField, userTypeBadgeRegistry, userTypeBadgeSizeVariants, userTypeBadgeUserTypes } from '../chunk-E6IO2DVV.js';
+export { Accordion, AdvancedSearchBox, Alert, AnimatedCard, AreaChart, AsyncCombobox, AsyncMultiSelect, BarChart, BasicDetailsCard, CHART_CATEGORY_COLORS, CHART_SERIES_COLORS, Calendar, CalendarDayButton, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CircularProgress, Code, CollapsibleCard, ComposedChart, ConfirmationDialog, ContentContainer, CopiableText, DEFAULT_CHART_SERIES_COLORS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, DatePicker, DateRangePicker, DeviceIcon, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DonutChart, DynamicList, FileUpload, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FullSizeError, FullscreenDialog, IconAvatar, IconTextActionCard, Illustration, InlineError, KeyValueManager, LineChart, ListDetails, LottieAnimationContainer, MarkdownContent, MonospaceContent, no_data_card_default as NoDataCard, OverflowBadgeList, PRESET_IDS, PRESET_LABELS, PageContainer, PageContainerSkeleton, Pagination, PopCollectionItem, PreviewCard, PreviewCardBackdrop, PreviewCardPanel, PreviewCardTrigger, ProgressBar, RadioGroup, RequirementList, ScrollableSections, SearchBox, SectionCard, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableCardList, SimpleCard, SimpleClickableCard, SimpleInfoCard, SimpleList, SimplePaginatedList, SimplifiedDate, Spinner, StatCard, 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, toast, typographyDefaultElement, typographyVariantClasses, useFormField, userTypeBadgeRegistry, userTypeBadgeSizeVariants, userTypeBadgeUserTypes } from '../chunk-MOYKF2ZC.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-JPMN2UMF.js';
 export { Avatar, Button, CopyButton, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, 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-34PXJOCS.js';
 export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Collapsible, CollapsibleContent, CollapsibleTrigger, Separator, Skeleton, buttonVariants, useIsMobile } from '../chunk-F5P6S7K2.js';

package/dist/index.js

@@ -1,5 +1,5 @@
-export { CopyrightCard, PageLoader } from './chunk-IT5T6Y4V.js';
-export { Accordion, AdvancedSearchBox, Alert, AnimatedCard, AnimatedRainmakerLogo, AreaChart, AsyncCombobox, AsyncMultiSelect, BarChart, BasicDetailsCard, CHART_CATEGORY_COLORS, CHART_SERIES_COLORS, Calendar, CalendarDayButton, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CircularProgress, Code, CollapsibleCard, ComposedChart, ConfirmationDialog, ContentContainer, CopiableText, DEFAULT_CHART_SERIES_COLORS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, DatePicker, DateRangePicker, DeviceIcon, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DonutChart, DynamicList, FileUpload, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FullSizeError, FullscreenDialog, IconAvatar, IconTextActionCard, Illustration, InlineError, KeyValueManager, LineChart, ListDetails, LottieAnimationContainer, MarkdownContent, MonospaceContent, no_data_card_default as NoDataCard, OverflowBadgeList, PRESET_IDS, PRESET_LABELS, PageContainer, PageContainerSkeleton, Pagination, PopCollectionItem, PreviewCard, PreviewCardBackdrop, PreviewCardPanel, PreviewCardTrigger, ProgressBar, RadioGroup, RequirementList, ScrollableSections, SearchBox, SectionCard, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableCardList, SimpleCard, SimpleClickableCard, SimpleInfoCard, SimpleList, SimplePaginatedList, SimplifiedDate, Spinner, StatCard, 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, toast, typographyDefaultElement, typographyVariantClasses, useFormField, userTypeBadgeRegistry, userTypeBadgeSizeVariants, userTypeBadgeUserTypes } from './chunk-E6IO2DVV.js';
+export { CopyrightCard, PageLoader } from './chunk-J7YNQMAC.js';
+export { Accordion, AdvancedSearchBox, Alert, AnimatedCard, AnimatedRainmakerLogo, AreaChart, AsyncCombobox, AsyncMultiSelect, BarChart, BasicDetailsCard, CHART_CATEGORY_COLORS, CHART_SERIES_COLORS, Calendar, CalendarDayButton, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CircularProgress, Code, CollapsibleCard, ComposedChart, ConfirmationDialog, ContentContainer, CopiableText, DEFAULT_CHART_SERIES_COLORS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, DatePicker, DateRangePicker, DeviceIcon, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DonutChart, DynamicList, FileUpload, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FullSizeError, FullscreenDialog, IconAvatar, IconTextActionCard, Illustration, InlineError, KeyValueManager, LineChart, ListDetails, LottieAnimationContainer, MarkdownContent, MonospaceContent, no_data_card_default as NoDataCard, OverflowBadgeList, PRESET_IDS, PRESET_LABELS, PageContainer, PageContainerSkeleton, Pagination, PopCollectionItem, PreviewCard, PreviewCardBackdrop, PreviewCardPanel, PreviewCardTrigger, ProgressBar, RadioGroup, RequirementList, ScrollableSections, SearchBox, SectionCard, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableCardList, SimpleCard, SimpleClickableCard, SimpleInfoCard, SimpleList, SimplePaginatedList, SimplifiedDate, Spinner, StatCard, 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, toast, typographyDefaultElement, typographyVariantClasses, useFormField, userTypeBadgeRegistry, userTypeBadgeSizeVariants, userTypeBadgeUserTypes } from './chunk-MOYKF2ZC.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-JPMN2UMF.js';
 export { AccountMenu, EntryLayout, Footer as WorkspaceFooter, Header as WorkspaceHeader, WorkspaceLayout } from './chunk-WK4PTIOA.js';
 export { AppLogo, FooterCard, MyAccountMenu, ProfileCard } from './chunk-SYEKNRS5.js';

package/package.json

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