@uipath/apollo-react 4.20.0-pr644.f72be25 → 4.21.0-pr644.9f93a11

package/dist/canvas/components/AddNodePanel/AddNodePanel.cjs

@@ -31,7 +31,7 @@ const external_react_namespaceObject = require("react");
 const index_cjs_namespaceObject = require("../../core/index.cjs");
 const external_hooks_index_cjs_namespaceObject = require("../../hooks/index.cjs");
 const external_Toolbox_index_cjs_namespaceObject = require("../Toolbox/index.cjs");
-const AddNodePanel_AddNodePanel = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ onNodeSelect, onClose, onSearch, onNodeHover, items, title, loading }) {
+const AddNodePanel_AddNodePanel = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ onNodeSelect, onClose, onSearch, onNodeHover, items, title, loading, renderEmptyState }) {
     const registry = (0, index_cjs_namespaceObject.useOptionalNodeTypeRegistry)();
     const { previewNodeConnectionInfo } = (0, external_hooks_index_cjs_namespaceObject.usePreviewNode)();
     const nodeListOptions = (0, external_react_namespaceObject.useMemo)(()=>{
@@ -75,7 +75,8 @@ const AddNodePanel_AddNodePanel = /*#__PURE__*/ (0, external_react_namespaceObje
         onItemSelect: handleNodeListItemSelect,
         onSearch: handleSearch,
         onClose: onClose,
-        onItemHover: onNodeHover
+        onItemHover: onNodeHover,
+        renderEmptyState: renderEmptyState
     });
 });
 exports.AddNodePanel = __webpack_exports__.AddNodePanel;

package/dist/canvas/components/AddNodePanel/AddNodePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddNodePanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodePanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAU9D,eAAO,MAAM,YAAY,yDA2EvB,CAAC"}
+{"version":3,"file":"AddNodePanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodePanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAU9D,eAAO,MAAM,YAAY,yDA6EvB,CAAC"}

package/dist/canvas/components/AddNodePanel/AddNodePanel.js

@@ -3,7 +3,7 @@ import { memo, useCallback, useMemo } from "react";
 import { useOptionalNodeTypeRegistry } from "../../core/index.js";
 import { usePreviewNode } from "../../hooks/index.js";
 import { Toolbox } from "../Toolbox/index.js";
-const AddNodePanel_AddNodePanel = /*#__PURE__*/ memo(function({ onNodeSelect, onClose, onSearch, onNodeHover, items, title, loading }) {
+const AddNodePanel_AddNodePanel = /*#__PURE__*/ memo(function({ onNodeSelect, onClose, onSearch, onNodeHover, items, title, loading, renderEmptyState }) {
     const registry = useOptionalNodeTypeRegistry();
     const { previewNodeConnectionInfo } = usePreviewNode();
     const nodeListOptions = useMemo(()=>{
@@ -47,7 +47,8 @@ const AddNodePanel_AddNodePanel = /*#__PURE__*/ memo(function({ onNodeSelect, on
         onItemSelect: handleNodeListItemSelect,
         onSearch: handleSearch,
         onClose: onClose,
-        onItemHover: onNodeHover
+        onItemHover: onNodeHover,
+        renderEmptyState: renderEmptyState
     });
 });
 export { AddNodePanel_AddNodePanel as AddNodePanel };

package/dist/canvas/components/AddNodePanel/AddNodePanel.types.d.ts

@@ -1,4 +1,4 @@
-import type { ListItem } from '../Toolbox';
+import type { ListItem, ToolboxEmptyStateRenderer } from '../Toolbox';
 export interface NodeItemData {
     type: string;
     version?: string;
@@ -12,5 +12,6 @@ export interface AddNodePanelProps {
     title?: string;
     items?: ListItem[];
     loading?: boolean;
+    renderEmptyState?: ToolboxEmptyStateRenderer<NodeItemData>;
 }
 //# sourceMappingURL=AddNodePanel.types.d.ts.map

package/dist/canvas/components/AddNodePanel/AddNodePanel.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddNodePanel.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodePanel.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,MAAM,EACb,gBAAgB,EAAE,OAAO,EACzB,YAAY,EAAE,QAAQ,EAAE,KACrB,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"AddNodePanel.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodePanel.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,yBAAyB,EAAE,MAAM,YAAY,CAAC;AAEtE,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,MAAM,EACb,gBAAgB,EAAE,OAAO,EACzB,YAAY,EAAE,QAAQ,EAAE,KACrB,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAOlB,gBAAgB,CAAC,EAAE,yBAAyB,CAAC,YAAY,CAAC,CAAC;CAC5D"}

package/dist/canvas/components/AgentCanvas/agent-flow.manifest.d.ts

@@ -14,11 +14,11 @@ export declare const agentFlowManifest: {
         id: string;
         name: string;
         sortOrder: number;
-        icon: string;
         tags: string[];
         parentId?: string | undefined;
         color?: string | undefined;
         colorDark?: string | undefined;
+        icon?: string | undefined;
     }[];
     nodes: {
         nodeType: string;
@@ -27,8 +27,9 @@ export declare const agentFlowManifest: {
         sortOrder: number;
         display: {
             label: string;
-            icon: string;
+            canvasLabel?: string | undefined;
             description?: string | undefined;
+            icon?: string | undefined;
             shape?: "square" | "circle" | "container" | "rectangle" | undefined;
             color?: string | undefined;
             background?: string | undefined;

package/dist/canvas/components/AgentCanvas/agent-flow.manifest.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"agent-flow.manifest.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AgentCanvas/agent-flow.manifest.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAMnF,eAAO,MAAM,mBAAmB,EAAE,gBAAgB,EAmBjD,CAAC;AAMF,eAAO,MAAM,2BAA2B,EAAE,YAsDzC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,YAqDrC,CAAC;AAMF,eAAO,MAAM,uBAAuB,EAAE,YAwBrC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,YAwBlC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,YAwBjC,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,YAwBxC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,YAwBpC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,YAwBjC,CAAC;AAMF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAa7B,CAAC"}
+{"version":3,"file":"agent-flow.manifest.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AgentCanvas/agent-flow.manifest.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAMnF,eAAO,MAAM,mBAAmB,EAAE,gBAAgB,EAmBjD,CAAC;AAMF,eAAO,MAAM,2BAA2B,EAAE,YAsDzC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,YAqDrC,CAAC;AAMF,eAAO,MAAM,uBAAuB,EAAE,YAwBrC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,YAwBlC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,YAwBjC,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,YAwBxC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,YAwBpC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,YAwBjC,CAAC;AAMF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAa7B,CAAC"}

package/dist/canvas/components/BaseNode/BaseNode.cjs

@@ -43,6 +43,7 @@ const ConnectedHandlesContext_cjs_namespaceObject = require("../BaseCanvas/Conne
 const SelectionStateContext_cjs_namespaceObject = require("../BaseCanvas/SelectionStateContext.cjs");
 const SmartHandle_cjs_namespaceObject = require("../ButtonHandle/SmartHandle.cjs");
 const useButtonHandles_cjs_namespaceObject = require("../ButtonHandle/useButtonHandles.cjs");
+const InitialsBadge_cjs_namespaceObject = require("../shared/InitialsBadge.cjs");
 const external_Toolbar_index_cjs_namespaceObject = require("../Toolbar/index.cjs");
 const external_BaseNodeBadgeSlot_cjs_namespaceObject = require("./BaseNodeBadgeSlot.cjs");
 const external_BaseNodeConfigContext_cjs_namespaceObject = require("./BaseNodeConfigContext.cjs");
@@ -124,11 +125,19 @@ const BaseNodeComponent = (props)=>{
     const isStacked = Boolean(manifest?.drillable || data?.isCollapsed);
     const Icon = (0, external_react_namespaceObject.useMemo)(()=>{
         if (void 0 !== iconComponent) return iconComponent;
-        const IconComponent = (0, icon_registry_cjs_namespaceObject.getIcon)(display.icon);
-        return IconComponent ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(IconComponent, {}) : null;
+        if (display.icon) {
+            const IconComponent = (0, icon_registry_cjs_namespaceObject.getIcon)(display.icon);
+            return IconComponent ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(IconComponent, {}) : null;
+        }
+        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(InitialsBadge_cjs_namespaceObject.InitialsBadge, {
+            name: display.label,
+            size: "var(--icon-size)",
+            "data-testid": "base-node-initials-badge"
+        });
     }, [
         iconComponent,
-        display.icon
+        display.icon,
+        display.label
     ]);
     const handleConfigurations = (0, external_react_namespaceObject.useMemo)(()=>{
         if (handleConfigurationsProp && Array.isArray(handleConfigurationsProp)) return handleConfigurationsProp;

package/dist/canvas/components/BaseNode/BaseNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAuChF,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,kBAAkB,CAAC;AAynB1B,eAAO,MAAM,QAAQ,8CAnlBa,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,6CAmlBhB,CAAC"}
+{"version":3,"file":"BaseNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAwChF,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,kBAAkB,CAAC;AAsoB1B,eAAO,MAAM,QAAQ,8CAhmBa,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,6CAgmBhB,CAAC"}

package/dist/canvas/components/BaseNode/BaseNode.js

@@ -15,6 +15,7 @@ import { useConnectedHandles } from "../BaseCanvas/ConnectedHandlesContext.js";
 import { useSelectionState } from "../BaseCanvas/SelectionStateContext.js";
 import { SmartHandle, SmartHandleProvider } from "../ButtonHandle/SmartHandle.js";
 import { useButtonHandles } from "../ButtonHandle/useButtonHandles.js";
+import { InitialsBadge } from "../shared/InitialsBadge.js";
 import { NodeToolbar } from "../Toolbar/index.js";
 import { BaseBadgeSlot } from "./BaseNodeBadgeSlot.js";
 import { useBaseNodeOverrideConfig } from "./BaseNodeConfigContext.js";
@@ -96,11 +97,19 @@ const BaseNodeComponent = (props)=>{
     const isStacked = Boolean(manifest?.drillable || data?.isCollapsed);
     const Icon = useMemo(()=>{
         if (void 0 !== iconComponent) return iconComponent;
-        const IconComponent = getIcon(display.icon);
-        return IconComponent ? /*#__PURE__*/ jsx(IconComponent, {}) : null;
+        if (display.icon) {
+            const IconComponent = getIcon(display.icon);
+            return IconComponent ? /*#__PURE__*/ jsx(IconComponent, {}) : null;
+        }
+        return /*#__PURE__*/ jsx(InitialsBadge, {
+            name: display.label,
+            size: "var(--icon-size)",
+            "data-testid": "base-node-initials-badge"
+        });
     }, [
         iconComponent,
-        display.icon
+        display.icon,
+        display.label
     ]);
     const handleConfigurations = useMemo(()=>{
         if (handleConfigurationsProp && Array.isArray(handleConfigurationsProp)) return handleConfigurationsProp;

package/dist/canvas/components/BaseNode/BaseNode.types.d.ts

@@ -5,6 +5,7 @@ export type FooterVariant = 'none' | 'button' | 'single' | 'double';
 export interface BaseNodeData extends Record<string, unknown> {
     display?: {
         label?: string;
+        canvasLabel?: string;
         subLabel?: string;
         shape?: NodeShape;
         color?: string;

package/dist/canvas/components/BaseNode/BaseNode.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseNode.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAE9D,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEpE,MAAM,WAAW,YAAa,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC3D,OAAO,CAAC,EAAE;QACR,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,KAAK,CAAC,EAAE,SAAS,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IAOF,eAAe,CAAC,EAAE,OAAO,CAAC;IAM1B,WAAW,CAAC,EAAE,OAAO,CAAC;IAOtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB"}
+{"version":3,"file":"BaseNode.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAE9D,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEpE,MAAM,WAAW,YAAa,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC3D,OAAO,CAAC,EAAE;QACR,KAAK,CAAC,EAAE,MAAM,CAAC;QAMf,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,KAAK,CAAC,EAAE,SAAS,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IAOF,eAAe,CAAC,EAAE,OAAO,CAAC;IAM1B,WAAW,CAAC,EAAE,OAAO,CAAC;IAOtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB"}

package/dist/canvas/components/Toolbox/ListView.cjs

@@ -34,15 +34,9 @@ const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const external_react_namespaceObject = require("react");
 const CanvasThemeContext_cjs_namespaceObject = require("../BaseCanvas/CanvasThemeContext.cjs");
 const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
+const InitialsBadge_cjs_namespaceObject = require("../shared/InitialsBadge.cjs");
 const external_ListView_styles_cjs_namespaceObject = require("./ListView.styles.cjs");
 const DEFAULT_SKELETON_COUNT = 3;
-function getInitial(name) {
-    const trimmed = name.trim();
-    if (!trimmed) return '?';
-    return [
-        ...trimmed
-    ][0] ?? '?';
-}
 function buildRenderedItems(items, enableSections, loadingSkeleton) {
     const result = [];
     const skeletonConfig = 'object' == typeof loadingSkeleton ? loadingSkeleton : loadingSkeleton ? {} : void 0;
@@ -170,10 +164,9 @@ const ListViewRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ in
                         size: 24
                     }),
                     item.icon?.Component && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(item.icon.Component, {}),
-                    !item.icon?.url && !item.icon?.name && !item.icon?.Component && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_styles_cjs_namespaceObject.InitialsBadge, {
-                        "aria-hidden": "true",
-                        "data-testid": "list-item-initials-badge",
-                        children: getInitial(item.name)
+                    !item.icon?.url && !item.icon?.name && !item.icon?.Component && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(InitialsBadge_cjs_namespaceObject.InitialsBadge, {
+                        name: item.name,
+                        "data-testid": "list-item-initials-badge"
                     })
                 ]
             }),
@@ -231,7 +224,7 @@ const ListItemSkeleton = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)
             })
         ]
     });
-const ListViewInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, onScroll, emptyStateMessage = 'No items found', emptyStateIcon = 'search-x', isLoading = false, enableSections = true, loadingSkeleton }, ref) {
+const ListViewInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, onScroll, emptyStateMessage = 'No items found', emptyStateIcon = 'search-x', renderEmptyState, isLoading = false, enableSections = true, loadingSkeleton }, ref) {
     const { isDarkMode } = (0, CanvasThemeContext_cjs_namespaceObject.useCanvasTheme)();
     const activeSkeleton = loadingSkeleton ?? (isLoading && 0 === items.length ? true : void 0);
     const renderedItems = (0, external_react_namespaceObject.useMemo)(()=>buildRenderedItems(items, enableSections, activeSkeleton), [
@@ -259,26 +252,29 @@ const ListViewInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
         onItemClick,
         onItemHover
     ]);
-    if (0 === renderedItems.length) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
-        align: "center",
-        justify: "center",
-        flex: 1,
-        gap: 10,
-        style: {
-            minHeight: '250px'
-        },
-        children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_utils_index_cjs_namespaceObject.CanvasIcon, {
-                icon: emptyStateIcon,
-                size: 48,
-                color: "var(--canvas-foreground-de-emp)"
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                className: "text-xs text-foreground-muted",
-                children: emptyStateMessage
-            })
-        ]
-    });
+    if (0 === renderedItems.length) {
+        if (renderEmptyState) return renderEmptyState();
+        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
+            align: "center",
+            justify: "center",
+            flex: 1,
+            gap: 10,
+            style: {
+                minHeight: '250px'
+            },
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_utils_index_cjs_namespaceObject.CanvasIcon, {
+                    icon: emptyStateIcon,
+                    size: 48,
+                    color: "var(--canvas-foreground-de-emp)"
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                    className: "text-xs text-foreground-muted",
+                    children: emptyStateMessage
+                })
+            ]
+        });
+    }
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_styles_cjs_namespaceObject.StyledList, {
         id: "toolbox-listbox",
         role: "listbox",

package/dist/canvas/components/Toolbox/ListView.d.ts

@@ -53,6 +53,7 @@ interface ListViewProps<T extends ListItem> {
     onScroll?: React.UIEventHandler<HTMLDivElement>;
     emptyStateMessage?: string;
     emptyStateIcon?: string;
+    renderEmptyState?: () => React.ReactElement | null;
     isLoading?: boolean;
     enableSections?: boolean;
     loadingSkeleton?: boolean | ChildrenLoadingSpec;

package/dist/canvas/components/Toolbox/ListView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListView.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListView.tsx"],"names":[],"mappings":"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"}

package/dist/canvas/components/Toolbox/ListView.js

@@ -5,15 +5,9 @@ import { Skeleton } from "@uipath/apollo-wind";
 import { forwardRef, memo, useCallback, useImperativeHandle, useMemo } from "react";
 import { useCanvasTheme } from "../BaseCanvas/CanvasThemeContext.js";
 import { CanvasTooltip } from "../CanvasTooltip.js";
-import { IconContainer, InitialsBadge, ListItemButton, SectionHeader, StyledList } from "./ListView.styles.js";
+import { InitialsBadge } from "../shared/InitialsBadge.js";
+import { IconContainer, ListItemButton, SectionHeader, StyledList } from "./ListView.styles.js";
 const DEFAULT_SKELETON_COUNT = 3;
-function getInitial(name) {
-    const trimmed = name.trim();
-    if (!trimmed) return '?';
-    return [
-        ...trimmed
-    ][0] ?? '?';
-}
 function buildRenderedItems(items, enableSections, loadingSkeleton) {
     const result = [];
     const skeletonConfig = 'object' == typeof loadingSkeleton ? loadingSkeleton : loadingSkeleton ? {} : void 0;
@@ -142,9 +136,8 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
                     }),
                     item.icon?.Component && /*#__PURE__*/ jsx(item.icon.Component, {}),
                     !item.icon?.url && !item.icon?.name && !item.icon?.Component && /*#__PURE__*/ jsx(InitialsBadge, {
-                        "aria-hidden": "true",
-                        "data-testid": "list-item-initials-badge",
-                        children: getInitial(item.name)
+                        name: item.name,
+                        "data-testid": "list-item-initials-badge"
                     })
                 ]
             }),
@@ -202,7 +195,7 @@ const ListItemSkeleton = ()=>/*#__PURE__*/ jsxs("div", {
             })
         ]
     });
-const ListViewInner = /*#__PURE__*/ forwardRef(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, onScroll, emptyStateMessage = 'No items found', emptyStateIcon = 'search-x', isLoading = false, enableSections = true, loadingSkeleton }, ref) {
+const ListViewInner = /*#__PURE__*/ forwardRef(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, onScroll, emptyStateMessage = 'No items found', emptyStateIcon = 'search-x', renderEmptyState, isLoading = false, enableSections = true, loadingSkeleton }, ref) {
     const { isDarkMode } = useCanvasTheme();
     const activeSkeleton = loadingSkeleton ?? (isLoading && 0 === items.length ? true : void 0);
     const renderedItems = useMemo(()=>buildRenderedItems(items, enableSections, activeSkeleton), [
@@ -230,26 +223,29 @@ const ListViewInner = /*#__PURE__*/ forwardRef(function({ items, activeIndex = -
         onItemClick,
         onItemHover
     ]);
-    if (0 === renderedItems.length) return /*#__PURE__*/ jsxs(Column, {
-        align: "center",
-        justify: "center",
-        flex: 1,
-        gap: 10,
-        style: {
-            minHeight: '250px'
-        },
-        children: [
-            /*#__PURE__*/ jsx(CanvasIcon, {
-                icon: emptyStateIcon,
-                size: 48,
-                color: "var(--canvas-foreground-de-emp)"
-            }),
-            /*#__PURE__*/ jsx("span", {
-                className: "text-xs text-foreground-muted",
-                children: emptyStateMessage
-            })
-        ]
-    });
+    if (0 === renderedItems.length) {
+        if (renderEmptyState) return renderEmptyState();
+        return /*#__PURE__*/ jsxs(Column, {
+            align: "center",
+            justify: "center",
+            flex: 1,
+            gap: 10,
+            style: {
+                minHeight: '250px'
+            },
+            children: [
+                /*#__PURE__*/ jsx(CanvasIcon, {
+                    icon: emptyStateIcon,
+                    size: 48,
+                    color: "var(--canvas-foreground-de-emp)"
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    className: "text-xs text-foreground-muted",
+                    children: emptyStateMessage
+                })
+            ]
+        });
+    }
     return /*#__PURE__*/ jsx(StyledList, {
         id: "toolbox-listbox",
         role: "listbox",

package/dist/canvas/components/Toolbox/ListView.styles.cjs

@@ -33,7 +33,6 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    InitialsBadge: ()=>InitialsBadge,
     IconContainer: ()=>IconContainer,
     StyledList: ()=>StyledList,
     SectionHeader: ()=>SectionHeader,
@@ -93,21 +92,6 @@ const IconContainer = styled_default().div`
   // Icons should show below the inset outline
   z-index: -1;
 `;
-const InitialsBadge = styled_default().span`
-  display: flex;
-  width: 24px;
-  height: 24px;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  background: var(--canvas-primary);
-  color: #ffffff;
-  font-size: 12px;
-  font-weight: 800;
-  line-height: 1;
-  text-transform: uppercase;
-  user-select: none;
-`;
 const StyledList = styled_default()(external_react_window_namespaceObject.List)`
   &::-webkit-scrollbar {
     width: 6px;
@@ -144,13 +128,11 @@ const StyledList = styled_default()(external_react_window_namespaceObject.List)`
   }
 `;
 exports.IconContainer = __webpack_exports__.IconContainer;
-exports.InitialsBadge = __webpack_exports__.InitialsBadge;
 exports.ListItemButton = __webpack_exports__.ListItemButton;
 exports.SectionHeader = __webpack_exports__.SectionHeader;
 exports.StyledList = __webpack_exports__.StyledList;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "IconContainer",
-    "InitialsBadge",
     "ListItemButton",
     "SectionHeader",
     "StyledList"

package/dist/canvas/components/Toolbox/ListView.styles.d.ts

@@ -12,9 +12,5 @@ export declare const IconContainer: import("@emotion/styled").StyledComponent<{
 } & {
     bgColor?: string;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const InitialsBadge: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledList: typeof List;
 //# sourceMappingURL=ListView.styles.d.ts.map

package/dist/canvas/components/Toolbox/ListView.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListView.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListView.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,eAAO,MAAM,aAAa;;;yGAazB,CAAC;AAEF,eAAO,MAAM,cAAc;;UAqB1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;cAA0B,MAAM;yGAazD,CAAC;AAQF,eAAO,MAAM,aAAa;;;2GAczB,CAAC;AAEF,eAAO,MAAM,UAAU,EAkClB,OAAO,IAAI,CAAC"}
+{"version":3,"file":"ListView.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListView.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,eAAO,MAAM,aAAa;;;yGAazB,CAAC;AAEF,eAAO,MAAM,cAAc;;UAqB1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;cAA0B,MAAM;yGAazD,CAAC;AAEF,eAAO,MAAM,UAAU,EAkClB,OAAO,IAAI,CAAC"}

package/dist/canvas/components/Toolbox/ListView.styles.js

@@ -51,21 +51,6 @@ const IconContainer = styled.div`
   // Icons should show below the inset outline
   z-index: -1;
 `;
-const InitialsBadge = styled.span`
-  display: flex;
-  width: 24px;
-  height: 24px;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  background: var(--canvas-primary);
-  color: #ffffff;
-  font-size: 12px;
-  font-weight: 800;
-  line-height: 1;
-  text-transform: uppercase;
-  user-select: none;
-`;
 const StyledList = styled(List)`
   &::-webkit-scrollbar {
     width: 6px;
@@ -101,4 +86,4 @@ const StyledList = styled(List)`
     }
   }
 `;
-export { IconContainer, InitialsBadge, ListItemButton, SectionHeader, StyledList };
+export { IconContainer, ListItemButton, SectionHeader, StyledList };

package/dist/canvas/components/Toolbox/Toolbox.cjs

@@ -81,7 +81,7 @@ function searchLeafItems(items, query) {
     }
     return results;
 }
-function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title, initialItems, loading, fullWidth = false, fullHeight = false, quickActions }) {
+function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title, initialItems, loading, fullWidth = false, fullHeight = false, quickActions, renderEmptyState }) {
     const [items, setItems] = (0, external_react_namespaceObject.useState)(initialItems);
     const [search, setSearch] = (0, external_react_namespaceObject.useState)('');
     const [searchLoading, setSearchLoading] = (0, external_react_namespaceObject.useState)(false);
@@ -108,6 +108,13 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     const isSearching = (0, external_react_namespaceObject.useMemo)(()=>search.length > 0, [
         search
     ]);
+    const wrappedRenderEmptyState = (0, external_react_namespaceObject.useMemo)(()=>renderEmptyState && !isSearching ? ()=>renderEmptyState({
+                currentCategory: currentParentItem ?? void 0
+            }) : void 0, [
+        renderEmptyState,
+        isSearching,
+        currentParentItem
+    ]);
     const displayedItems = (0, external_react_namespaceObject.useMemo)(()=>isSearching && !isSearchingInitialItems ? searchedItems : items, [
         isSearching,
         isSearchingInitialItems,
@@ -455,6 +462,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
                             activeIndex: activeIndex,
                             listRef: listRef,
                             emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
+                            renderEmptyState: wrappedRenderEmptyState,
                             onItemClick: handleItemSelect,
                             onItemHover: onItemHover,
                             onScroll: handleListScroll,

package/dist/canvas/components/Toolbox/Toolbox.d.ts

@@ -1,5 +1,8 @@
 import { type ListItem } from './ListView';
 import { type ToolboxQuickAction } from './QuickActionsRow';
+export type ToolboxEmptyStateRenderer<T = any> = (ctx: {
+    currentCategory?: ListItem<T>;
+}) => React.ReactElement | null;
 export type ToolboxSearchHandler<T = any> = (query: string, isTopLevelSearch: boolean, { currentItems, category }: {
     currentItems?: ListItem<T>[];
     category?: string;
@@ -16,6 +19,7 @@ export interface ToolboxProps<T> {
     onBack?: () => void;
     onSearch?: ToolboxSearchHandler<T>;
     quickActions?: ToolboxQuickAction[];
+    renderEmptyState?: ToolboxEmptyStateRenderer<T>;
 }
-export declare function Toolbox<T>({ onClose, onBack, onItemSelect, onSearch, onItemHover, title, initialItems, loading, fullWidth, fullHeight, quickActions, }: ToolboxProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Toolbox<T>({ onClose, onBack, onItemSelect, onSearch, onItemHover, title, initialItems, loading, fullWidth, fullHeight, quickActions, renderEmptyState, }: ToolboxProps<T>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Toolbox.d.ts.map

package/dist/canvas/components/Toolbox/Toolbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbox.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/Toolbox.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,KAAK,QAAQ,EAAkD,MAAM,YAAY,CAAC;AAC3F,OAAO,EAAmB,KAAK,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAwC7E,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,GAAG,IAAI,CAC1C,KAAK,EAAE,MAAM,EACb,gBAAgB,EAAE,OAAO,EACzB,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE;IAAE,YAAY,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,KAC5E,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AAE5B,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAOnC,YAAY,CAAC,EAAE,kBAAkB,EAAE,CAAC;CACrC;AAgDD,wBAAgB,OAAO,CAAC,CAAC,EAAE,EACzB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,KAAK,EACL,YAAY,EACZ,OAAO,EACP,SAAiB,EACjB,UAAkB,EAClB,YAAY,GACb,EAAE,YAAY,CAAC,CAAC,CAAC,2CA+fjB"}
+{"version":3,"file":"Toolbox.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/Toolbox.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,KAAK,QAAQ,EAAkD,MAAM,YAAY,CAAC;AAC3F,OAAO,EAAmB,KAAK,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AA+C7E,MAAM,MAAM,yBAAyB,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE;IACrD,eAAe,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;CAC/B,KAAK,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAEhC,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,GAAG,IAAI,CAC1C,KAAK,EAAE,MAAM,EACb,gBAAgB,EAAE,OAAO,EACzB,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE;IAAE,YAAY,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,KAC5E,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AAE5B,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAOnC,YAAY,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAOpC,gBAAgB,CAAC,EAAE,yBAAyB,CAAC,CAAC,CAAC,CAAC;CACjD;AAgDD,wBAAgB,OAAO,CAAC,CAAC,EAAE,EACzB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,KAAK,EACL,YAAY,EACZ,OAAO,EACP,SAAiB,EACjB,UAAkB,EAClB,YAAY,EACZ,gBAAgB,GACjB,EAAE,YAAY,CAAC,CAAC,CAAC,2CA4gBjB"}

package/dist/canvas/components/Toolbox/Toolbox.js

@@ -53,7 +53,7 @@ function searchLeafItems(items, query) {
     }
     return results;
 }
-function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title, initialItems, loading, fullWidth = false, fullHeight = false, quickActions }) {
+function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title, initialItems, loading, fullWidth = false, fullHeight = false, quickActions, renderEmptyState }) {
     const [items, setItems] = useState(initialItems);
     const [search, setSearch] = useState('');
     const [searchLoading, setSearchLoading] = useState(false);
@@ -80,6 +80,13 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     const isSearching = useMemo(()=>search.length > 0, [
         search
     ]);
+    const wrappedRenderEmptyState = useMemo(()=>renderEmptyState && !isSearching ? ()=>renderEmptyState({
+                currentCategory: currentParentItem ?? void 0
+            }) : void 0, [
+        renderEmptyState,
+        isSearching,
+        currentParentItem
+    ]);
     const displayedItems = useMemo(()=>isSearching && !isSearchingInitialItems ? searchedItems : items, [
         isSearching,
         isSearchingInitialItems,
@@ -427,6 +434,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
                             activeIndex: activeIndex,
                             listRef: listRef,
                             emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
+                            renderEmptyState: wrappedRenderEmptyState,
                             onItemClick: handleItemSelect,
                             onItemHover: onItemHover,
                             onScroll: handleListScroll,