@uipath/apollo-react 4.16.0 → 4.17.0

package/dist/canvas/components/CanvasTooltip.cjs

@@ -102,6 +102,8 @@ function CanvasTooltip({ content, placement = 'top', smartTooltip = false, delay
     ]);
     const effectiveOpen = isTooltipHidden ? false : isOpen ?? hoverOpen;
     const hasProvider = (0, external_react_namespaceObject.useContext)(HasTooltipProviderContext);
+    const isEmptyContent = null == content || false === content || 'string' == typeof content && '' === content.trim();
+    if (isEmptyContent) return children;
     const tooltip = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(tooltip_namespaceObject.Tooltip, {
         open: effectiveOpen,
         onOpenChange: handleOpenChange,

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

@@ -1,4 +1,4 @@
-import { type PropsWithChildren, type ReactNode } from 'react';
+import React, { type PropsWithChildren, type ReactNode } from 'react';
 export declare function CanvasTooltipProviderMarker({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
 type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
 interface CanvasTooltipProps extends PropsWithChildren {
@@ -9,6 +9,6 @@ interface CanvasTooltipProps extends PropsWithChildren {
     isOpen?: boolean;
     hide?: boolean;
 }
-export declare function CanvasTooltip({ content, placement, smartTooltip, delay, isOpen, hide, children, }: Readonly<CanvasTooltipProps>): import("react/jsx-runtime").JSX.Element;
+export declare function CanvasTooltip({ content, placement, smartTooltip, delay, isOpen, hide, children, }: Readonly<CanvasTooltipProps>): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
 export type { CanvasTooltipProps };
 //# sourceMappingURL=CanvasTooltip.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CanvasTooltip.d.ts","sourceRoot":"","sources":["../../../src/canvas/components/CanvasTooltip.tsx"],"names":[],"mappings":"AAOA,OAAc,EAEZ,KAAK,iBAAiB,EACtB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AASf,wBAAgB,2BAA2B,CAAC,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CAI1E;AAED,KAAK,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAE5D,UAAU,kBAAmB,SAAQ,iBAAiB;IAEpD,OAAO,EAAE,SAAS,CAAC;IAEnB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAE7B,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AASD,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,SAAiB,EACjB,YAAoB,EACpB,KAAa,EACb,MAAM,EACN,IAAI,EACJ,QAAQ,GACT,EAAE,QAAQ,CAAC,kBAAkB,CAAC,2CA2F9B;AAED,YAAY,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"CanvasTooltip.d.ts","sourceRoot":"","sources":["../../../src/canvas/components/CanvasTooltip.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,EAEZ,KAAK,iBAAiB,EACtB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AASf,wBAAgB,2BAA2B,CAAC,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CAI1E;AAED,KAAK,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAE5D,UAAU,kBAAmB,SAAQ,iBAAiB;IAEpD,OAAO,EAAE,SAAS,CAAC;IAEnB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAE7B,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AASD,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,SAAiB,EACjB,YAAoB,EACpB,KAAa,EACb,MAAM,EACN,IAAI,EACJ,QAAQ,GACT,EAAE,QAAQ,CAAC,kBAAkB,CAAC,yTAkG9B;AAED,YAAY,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/canvas/components/CanvasTooltip.js

@@ -63,6 +63,8 @@ function CanvasTooltip({ content, placement = 'top', smartTooltip = false, delay
     ]);
     const effectiveOpen = isTooltipHidden ? false : isOpen ?? hoverOpen;
     const hasProvider = useContext(HasTooltipProviderContext);
+    const isEmptyContent = null == content || false === content || 'string' == typeof content && '' === content.trim();
+    if (isEmptyContent) return children;
     const tooltip = /*#__PURE__*/ jsxs(Tooltip, {
         open: effectiveOpen,
         onOpenChange: handleOpenChange,

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

@@ -35,14 +35,22 @@ const external_react_namespaceObject = require("react");
 const CanvasThemeContext_cjs_namespaceObject = require("../BaseCanvas/CanvasThemeContext.cjs");
 const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
 const external_ListView_styles_cjs_namespaceObject = require("./ListView.styles.cjs");
-function buildRenderedItems(items, enableSections) {
+const DEFAULT_SKELETON_COUNT = 3;
+function buildRenderedItems(items, enableSections, loadingSkeleton) {
     const result = [];
-    if (0 === items.length) return result;
+    const skeletonConfig = 'object' == typeof loadingSkeleton ? loadingSkeleton : loadingSkeleton ? {} : void 0;
+    const baseSkeletonCount = skeletonConfig?.count ?? DEFAULT_SKELETON_COUNT;
+    const pushSkeletons = (count)=>{
+        for(let i = 0; i < count; i++)result.push({
+            type: 'skeleton'
+        });
+    };
     if (!enableSections) {
         for (const item of items)result.push({
             type: 'item',
             item
         });
+        if (skeletonConfig && !skeletonConfig.sections) pushSkeletons(baseSkeletonCount);
         return result;
     }
     const [itemsWithSection, itemsWithoutSection] = (0, external_utils_index_cjs_namespaceObject.partition)(items, (item)=>!!item.section);
@@ -50,18 +58,36 @@ function buildRenderedItems(items, enableSections) {
         type: 'item',
         item
     });
-    if (0 === itemsWithSection.length) return result;
-    const sections = Array.from(new Set(itemsWithSection.map((item)=>item.section)));
-    for (const section of sections){
+    const itemsBySection = new Map();
+    for (const item of itemsWithSection){
+        const name = item.section;
+        const bucket = itemsBySection.get(name);
+        if (bucket) bucket.push(item);
+        else itemsBySection.set(name, [
+            item
+        ]);
+    }
+    const skeletonBySection = new Map(skeletonConfig?.sections?.map((s)=>[
+            s.name,
+            s
+        ]) ?? []);
+    const sectionNames = [
+        ...itemsBySection.keys()
+    ];
+    for (const s of skeletonConfig?.sections ?? [])if (!itemsBySection.has(s.name)) sectionNames.push(s.name);
+    for (const sectionName of sectionNames){
         result.push({
             type: 'section',
-            sectionName: section
+            sectionName
         });
-        for (const item of itemsWithSection.filter((item)=>item.section === section))result.push({
+        for (const item of itemsBySection.get(sectionName) ?? [])result.push({
             type: 'item',
             item
         });
+        const skeletonForSection = skeletonBySection.get(sectionName);
+        if (skeletonForSection) pushSkeletons(skeletonForSection.count ?? baseSkeletonCount);
     }
+    if (skeletonConfig && !skeletonConfig.sections) pushSkeletons(baseSkeletonCount);
     return result;
 }
 const IconContainerMemoized = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(external_ListView_styles_cjs_namespaceObject.IconContainer);
@@ -100,6 +126,10 @@ const ListViewRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ in
             children: renderItem.sectionName
         })
     });
+    if ('skeleton' === renderItem.type) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        style: style,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ListItemSkeleton, {})
+    });
     const item = renderItem.item;
     const bgColor = isDarkMode ? item.colorDark ?? item.color : item.color;
     const isActive = index === activeIndex;
@@ -167,11 +197,35 @@ const ListViewRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ in
         ]
     });
 });
-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 }, ref) {
+const ListItemSkeleton = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "flex items-center gap-2.5 h-8",
+        role: "presentation",
+        "aria-hidden": "true",
+        "data-testid": "list-item-skeleton",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Skeleton, {
+                className: "h-8 w-8 shrink-0 rounded-lg"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex-1 space-y-1.5 min-w-0",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Skeleton, {
+                        className: "h-3.5 w-1/3"
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Skeleton, {
+                        className: "h-3 w-2/3"
+                    })
+                ]
+            })
+        ]
+    });
+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 { isDarkMode } = (0, CanvasThemeContext_cjs_namespaceObject.useCanvasTheme)();
-    const renderedItems = (0, external_react_namespaceObject.useMemo)(()=>buildRenderedItems(items, enableSections), [
+    const activeSkeleton = loadingSkeleton ?? (isLoading && 0 === items.length ? true : void 0);
+    const renderedItems = (0, external_react_namespaceObject.useMemo)(()=>buildRenderedItems(items, enableSections, activeSkeleton), [
         items,
-        enableSections
+        enableSections,
+        activeSkeleton
     ]);
     (0, external_react_namespaceObject.useImperativeHandle)(ref, ()=>({
             renderedItems
@@ -193,15 +247,7 @@ const ListViewInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
         onItemClick,
         onItemHover
     ]);
-    if (isLoading && 0 === items.length) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Column, {
-        gap: 8,
-        children: [
-            ...Array(3)
-        ].map((_, index)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Skeleton, {
-                className: "h-8 w-full"
-            }, index))
-    });
-    if (0 === items.length) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
+    if (0 === renderedItems.length) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
         align: "center",
         justify: "center",
         flex: 1,
@@ -224,6 +270,7 @@ const ListViewInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_styles_cjs_namespaceObject.StyledList, {
         id: "toolbox-listbox",
         role: "listbox",
+        "aria-busy": activeSkeleton ? true : void 0,
         listRef: listRef,
         rowProps: rowProps,
         rowComponent: ListViewRow,

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

@@ -4,6 +4,13 @@ export interface ListItemIcon {
     url?: string;
     Component?: React.ComponentType;
 }
+export type ChildrenLoadingSpec = {
+    count?: number;
+    sections?: {
+        name: string;
+        count?: number;
+    }[];
+};
 export type ListItem<T = any> = {
     id: string;
     name: string;
@@ -14,6 +21,7 @@ export type ListItem<T = any> = {
     color?: string;
     colorDark?: string;
     children?: ListItem<T>[] | ((id: string, name: string) => Promise<ListItem<T>[]>);
+    childrenLoading?: boolean | ChildrenLoadingSpec;
 };
 export type RenderItem<T extends ListItem> = {
     type: 'section';
@@ -21,8 +29,10 @@ export type RenderItem<T extends ListItem> = {
 } | {
     type: 'item';
     item: T;
+} | {
+    type: 'skeleton';
 };
-export declare function buildRenderedItems<T extends ListItem>(items: T[], enableSections: boolean): RenderItem<T>[];
+export declare function buildRenderedItems<T extends ListItem>(items: T[], enableSections: boolean, loadingSkeleton?: boolean | ChildrenLoadingSpec): RenderItem<T>[];
 export interface ListViewRowProps<T extends ListItem> {
     renderedItems: RenderItem<T>[];
     activeIndex: number;
@@ -45,6 +55,7 @@ interface ListViewProps<T extends ListItem> {
     emptyStateIcon?: string;
     isLoading?: boolean;
     enableSections?: boolean;
+    loadingSkeleton?: boolean | ChildrenLoadingSpec;
 }
 export declare const ListView: <T extends ListItem>(props: ListViewProps<T> & {
     ref?: React.Ref<ListViewHandle<T>>;

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":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAqB,MAAM,cAAc,CAAC;AAKzE,MAAM,WAAW,YAAY;IAI3B,IAAI,CAAC,EAAE,MAAM,CAAC;IAId,GAAG,CAAC,EAAE,MAAM,CAAC;IAIb,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACjC;AAED,MAAM,MAAM,QAAQ,CAAC,CAAC,GAAG,GAAG,IAAI;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,CAAC,CAAC;IACR,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CACnF,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,QAAQ,IACrC;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,GACxC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,CAAC,CAAA;CAAE,CAAC;AAE9B,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,QAAQ,EACnD,KAAK,EAAE,CAAC,EAAE,EACV,cAAc,EAAE,OAAO,GACtB,UAAU,CAAC,CAAC,CAAC,EAAE,CAqCjB;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,QAAQ;IAClD,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;CACjC;AA8FD,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ;IAC3D,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;CAChC;AAED,UAAU,aAAa,CAAC,CAAC,SAAS,QAAQ;IACxC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACpD,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IAChD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAmED,eAAO,MAAM,QAAQ,EAA0B,CAAC,CAAC,SAAS,QAAQ,EAChE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;CAAE,KAC7D,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC"}
+{"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

@@ -6,14 +6,22 @@ import { forwardRef, memo, useCallback, useImperativeHandle, useMemo } from "rea
 import { useCanvasTheme } from "../BaseCanvas/CanvasThemeContext.js";
 import { CanvasTooltip } from "../CanvasTooltip.js";
 import { IconContainer, ListItemButton, SectionHeader, StyledList } from "./ListView.styles.js";
-function buildRenderedItems(items, enableSections) {
+const DEFAULT_SKELETON_COUNT = 3;
+function buildRenderedItems(items, enableSections, loadingSkeleton) {
     const result = [];
-    if (0 === items.length) return result;
+    const skeletonConfig = 'object' == typeof loadingSkeleton ? loadingSkeleton : loadingSkeleton ? {} : void 0;
+    const baseSkeletonCount = skeletonConfig?.count ?? DEFAULT_SKELETON_COUNT;
+    const pushSkeletons = (count)=>{
+        for(let i = 0; i < count; i++)result.push({
+            type: 'skeleton'
+        });
+    };
     if (!enableSections) {
         for (const item of items)result.push({
             type: 'item',
             item
         });
+        if (skeletonConfig && !skeletonConfig.sections) pushSkeletons(baseSkeletonCount);
         return result;
     }
     const [itemsWithSection, itemsWithoutSection] = partition(items, (item)=>!!item.section);
@@ -21,18 +29,36 @@ function buildRenderedItems(items, enableSections) {
         type: 'item',
         item
     });
-    if (0 === itemsWithSection.length) return result;
-    const sections = Array.from(new Set(itemsWithSection.map((item)=>item.section)));
-    for (const section of sections){
+    const itemsBySection = new Map();
+    for (const item of itemsWithSection){
+        const name = item.section;
+        const bucket = itemsBySection.get(name);
+        if (bucket) bucket.push(item);
+        else itemsBySection.set(name, [
+            item
+        ]);
+    }
+    const skeletonBySection = new Map(skeletonConfig?.sections?.map((s)=>[
+            s.name,
+            s
+        ]) ?? []);
+    const sectionNames = [
+        ...itemsBySection.keys()
+    ];
+    for (const s of skeletonConfig?.sections ?? [])if (!itemsBySection.has(s.name)) sectionNames.push(s.name);
+    for (const sectionName of sectionNames){
         result.push({
             type: 'section',
-            sectionName: section
+            sectionName
         });
-        for (const item of itemsWithSection.filter((item)=>item.section === section))result.push({
+        for (const item of itemsBySection.get(sectionName) ?? [])result.push({
             type: 'item',
             item
         });
+        const skeletonForSection = skeletonBySection.get(sectionName);
+        if (skeletonForSection) pushSkeletons(skeletonForSection.count ?? baseSkeletonCount);
     }
+    if (skeletonConfig && !skeletonConfig.sections) pushSkeletons(baseSkeletonCount);
     return result;
 }
 const IconContainerMemoized = /*#__PURE__*/ memo(IconContainer);
@@ -71,6 +97,10 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
             children: renderItem.sectionName
         })
     });
+    if ('skeleton' === renderItem.type) return /*#__PURE__*/ jsx("div", {
+        style: style,
+        children: /*#__PURE__*/ jsx(ListItemSkeleton, {})
+    });
     const item = renderItem.item;
     const bgColor = isDarkMode ? item.colorDark ?? item.color : item.color;
     const isActive = index === activeIndex;
@@ -138,11 +168,35 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
         ]
     });
 });
-const ListViewInner = /*#__PURE__*/ forwardRef(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, onScroll, emptyStateMessage = 'No items found', emptyStateIcon = 'search-x', isLoading = false, enableSections = true }, ref) {
+const ListItemSkeleton = ()=>/*#__PURE__*/ jsxs("div", {
+        className: "flex items-center gap-2.5 h-8",
+        role: "presentation",
+        "aria-hidden": "true",
+        "data-testid": "list-item-skeleton",
+        children: [
+            /*#__PURE__*/ jsx(Skeleton, {
+                className: "h-8 w-8 shrink-0 rounded-lg"
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex-1 space-y-1.5 min-w-0",
+                children: [
+                    /*#__PURE__*/ jsx(Skeleton, {
+                        className: "h-3.5 w-1/3"
+                    }),
+                    /*#__PURE__*/ jsx(Skeleton, {
+                        className: "h-3 w-2/3"
+                    })
+                ]
+            })
+        ]
+    });
+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 { isDarkMode } = useCanvasTheme();
-    const renderedItems = useMemo(()=>buildRenderedItems(items, enableSections), [
+    const activeSkeleton = loadingSkeleton ?? (isLoading && 0 === items.length ? true : void 0);
+    const renderedItems = useMemo(()=>buildRenderedItems(items, enableSections, activeSkeleton), [
         items,
-        enableSections
+        enableSections,
+        activeSkeleton
     ]);
     useImperativeHandle(ref, ()=>({
             renderedItems
@@ -164,15 +218,7 @@ const ListViewInner = /*#__PURE__*/ forwardRef(function({ items, activeIndex = -
         onItemClick,
         onItemHover
     ]);
-    if (isLoading && 0 === items.length) return /*#__PURE__*/ jsx(Column, {
-        gap: 8,
-        children: [
-            ...Array(3)
-        ].map((_, index)=>/*#__PURE__*/ jsx(Skeleton, {
-                className: "h-8 w-full"
-            }, index))
-    });
-    if (0 === items.length) return /*#__PURE__*/ jsxs(Column, {
+    if (0 === renderedItems.length) return /*#__PURE__*/ jsxs(Column, {
         align: "center",
         justify: "center",
         flex: 1,
@@ -195,6 +241,7 @@ const ListViewInner = /*#__PURE__*/ forwardRef(function({ items, activeIndex = -
     return /*#__PURE__*/ jsx(StyledList, {
         id: "toolbox-listbox",
         role: "listbox",
+        "aria-busy": activeSkeleton ? true : void 0,
         listRef: listRef,
         rowProps: rowProps,
         rowComponent: ListViewRow,

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

@@ -84,7 +84,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     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);
-    const [childrenLoading, setChildrenLoading] = (0, external_react_namespaceObject.useState)(false);
+    const [awaitingChildren, setAwaitingChildren] = (0, external_react_namespaceObject.useState)(false);
     const [isSearchingInitialItems, setIsSearchingInitialItems] = (0, external_react_namespaceObject.useState)(true);
     const [searchedItems, setSearchedItems] = (0, external_react_namespaceObject.useState)([]);
     const [currentParentItem, setCurrentParentItem] = (0, external_react_namespaceObject.useState)(null);
@@ -206,7 +206,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     ]);
     const handleItemSelect = (0, external_react_namespaceObject.useCallback)(async (item, index)=>{
         if (!item.children) return void onItemSelect(item);
-        setChildrenLoading(true);
+        setAwaitingChildren(true);
         const nestedItems = 'function' == typeof item.children ? await item.children(item.id, item.name) : item.children;
         const savedIndex = isSearching ? SEARCH_BAR_INDEX : index ?? activeIndex;
         const savedScrollTop = isSearching ? 0 : lastScrollTopRef.current;
@@ -229,7 +229,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
             lastScrollTopRef.current = 0;
         });
         startTransition('forward');
-        setChildrenLoading(false);
+        setAwaitingChildren(false);
     }, [
         navigationStack,
         currentParentItem,
@@ -446,7 +446,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
                         direction: animationDirection,
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_cjs_namespaceObject.ListView, {
                             ref: listViewRef,
-                            isLoading: childrenLoading || searchLoading || loading,
+                            isLoading: awaitingChildren || searchLoading || loading,
                             items: displayedItems,
                             activeIndex: activeIndex,
                             listRef: listRef,
@@ -454,7 +454,8 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
                             onItemClick: handleItemSelect,
                             onItemHover: onItemHover,
                             onScroll: handleListScroll,
-                            enableSections: !isSearching
+                            enableSections: !isSearching,
+                            loadingSkeleton: isSearching ? void 0 : currentParentItem?.childrenLoading
                         })
                     })
                 })

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;AAwC3F,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;CACpC;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,GACnB,EAAE,YAAY,CAAC,CAAC,CAAC,2CAwfjB"}
+{"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;AAwC3F,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;CACpC;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,GACnB,EAAE,YAAY,CAAC,CAAC,CAAC,2CA8fjB"}

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

@@ -56,7 +56,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     const [items, setItems] = useState(initialItems);
     const [search, setSearch] = useState('');
     const [searchLoading, setSearchLoading] = useState(false);
-    const [childrenLoading, setChildrenLoading] = useState(false);
+    const [awaitingChildren, setAwaitingChildren] = useState(false);
     const [isSearchingInitialItems, setIsSearchingInitialItems] = useState(true);
     const [searchedItems, setSearchedItems] = useState([]);
     const [currentParentItem, setCurrentParentItem] = useState(null);
@@ -178,7 +178,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
     ]);
     const handleItemSelect = useCallback(async (item, index)=>{
         if (!item.children) return void onItemSelect(item);
-        setChildrenLoading(true);
+        setAwaitingChildren(true);
         const nestedItems = 'function' == typeof item.children ? await item.children(item.id, item.name) : item.children;
         const savedIndex = isSearching ? SEARCH_BAR_INDEX : index ?? activeIndex;
         const savedScrollTop = isSearching ? 0 : lastScrollTopRef.current;
@@ -201,7 +201,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
             lastScrollTopRef.current = 0;
         });
         startTransition('forward');
-        setChildrenLoading(false);
+        setAwaitingChildren(false);
     }, [
         navigationStack,
         currentParentItem,
@@ -418,7 +418,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
                         direction: animationDirection,
                         children: /*#__PURE__*/ jsx(ListView, {
                             ref: listViewRef,
-                            isLoading: childrenLoading || searchLoading || loading,
+                            isLoading: awaitingChildren || searchLoading || loading,
                             items: displayedItems,
                             activeIndex: activeIndex,
                             listRef: listRef,
@@ -426,7 +426,8 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
                             onItemClick: handleItemSelect,
                             onItemHover: onItemHover,
                             onScroll: handleListScroll,
-                            enableSections: !isSearching
+                            enableSections: !isSearching,
+                            loadingSkeleton: isSearching ? void 0 : currentParentItem?.childrenLoading
                         })
                     })
                 })