@uipath/apollo-react 4.16.1 → 4.17.0-pr605.41c0b8c

package/dist/canvas/components/LoopNode/LoopNode.js

@@ -2,10 +2,10 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { NodeResizeControl, useStore, useUpdateNodeInternals } from "../../xyflow/react.js";
 import { cn } from "@uipath/apollo-wind";
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
-import { DEFAULT_CONTAINER_HEIGHT, DEFAULT_CONTAINER_WIDTH } from "../../constants.js";
 import { useOptionalNodeTypeRegistry } from "../../core/index.js";
 import { useElementValidationStatus, useNodeExecutionState } from "../../hooks/index.js";
 import { resolveAdornments } from "../../utils/adornment-resolver.js";
+import { DEFAULT_CONTAINER_HEIGHT, DEFAULT_CONTAINER_MIN_HEIGHT, DEFAULT_CONTAINER_MIN_WIDTH, DEFAULT_CONTAINER_WIDTH } from "../../utils/container.js";
 import { CanvasIcon } from "../../utils/icon-registry.js";
 import { resolveDisplay, resolveHandles } from "../../utils/manifest-resolver.js";
 import { selectIsConnecting, snapToGrid } from "../../utils/NodeUtils.js";
@@ -18,8 +18,9 @@ import { getStatusBorder } from "../BaseNode/BaseNodeContainer.js";
 import { MissingManifestNode } from "../BaseNode/BaseNodeMissingManifest.js";
 import { ButtonHandles } from "../ButtonHandle/index.js";
 import { NodeToolbar } from "../Toolbar/index.js";
-import { DEFAULT_CONTAINER_MIN_HEIGHT, DEFAULT_CONTAINER_MIN_WIDTH, DEFAULT_LOOP_ICON, DEFAULT_LOOP_TITLE } from "./LoopNode.constants.js";
 import { resolveContainerHandleGroups } from "./LoopNode.helpers.js";
+const DEFAULT_LOOP_ICON = 'repeat';
+const DEFAULT_LOOP_TITLE = 'Loop';
 const EMPTY_DATA = {};
 const RESIZE_CONTROLS = [
     {
@@ -186,7 +187,7 @@ function LoopNodeComponent(props) {
     ]);
     const handleMouseEnter = useCallback(()=>setIsHovered(true), []);
     const handleMouseLeave = useCallback(()=>setIsHovered(false), []);
-    const handleOuterHandleAction = useCallback((_event)=>{
+    const handleHandleAction = useCallback((_event)=>{
         setIsHovered(false);
     }, []);
     const shouldShowHandles = (isConnecting || selected || isHovered) && !dragging;
@@ -264,7 +265,7 @@ function LoopNodeComponent(props) {
                 nodeWidth: containerWidth,
                 nodeHeight: containerHeight,
                 connectedHandleIds: connectedHandleIds,
-                onOuterHandleAction: handleOuterHandleAction
+                onHandleAction: handleHandleAction
             })
         ]
     });
@@ -376,24 +377,29 @@ function HandleGroups({ groups, ...handleGroupProps }) {
             }, `${group.boundary}:${group.position}:${groupIndex}`))
     });
 }
-function HandleGroup({ nodeId, group, selected, hovered, shouldShowHandles, showAddButton, showNotches, nodeWidth, nodeHeight, connectedHandleIds, onOuterHandleAction }) {
+function HandleGroup({ nodeId, group, selected, hovered, shouldShowHandles, showAddButton, showNotches, nodeWidth, nodeHeight, connectedHandleIds, onHandleAction }) {
     const groupVisible = shouldShowHandles && (group.visible ?? true);
     const position = group.position;
     const enhancedHandles = useMemo(()=>group.handles.map((handle)=>{
-            const isInnerSourceHandle = 'inner' === group.boundary && 'source' === handle.type;
-            const shouldResetHoverOnAction = 'outer' === group.boundary && 'source' === handle.type && handle.showButton;
+            const showHandle = connectedHandleIds.has(handle.id) || groupVisible;
+            if ('inner' === group.boundary) return {
+                ...handle,
+                showHandle,
+                showButton: false,
+                onAction: void 0
+            };
             return {
                 ...handle,
-                showHandle: connectedHandleIds.has(handle.id) || groupVisible,
-                showButton: isInnerSourceHandle ? false : handle.showButton,
-                onAction: handle.onAction ?? (shouldResetHoverOnAction ? onOuterHandleAction : void 0)
+                showHandle,
+                showButton: handle.showButton,
+                onAction: handle.onAction ?? onHandleAction
             };
         }), [
         group.boundary,
         group.handles,
         connectedHandleIds,
         groupVisible,
-        onOuterHandleAction
+        onHandleAction
     ]);
     return /*#__PURE__*/ jsx(ButtonHandles, {
         nodeId: nodeId,

package/dist/canvas/components/LoopNode/LoopNodePreview.cjs

@@ -39,15 +39,28 @@ function showCenteredContainerPreview({ containerId, reactFlowInstance, previewH
         x: (0, NodeUtils_cjs_namespaceObject.snapToGrid)(containerAbsolutePosition.x + relativeCenter.x),
         y: (0, NodeUtils_cjs_namespaceObject.snapToGrid)(containerAbsolutePosition.y + relativeCenter.y)
     };
-    (0, createPreviewGraph_cjs_namespaceObject.showPreviewGraph)({
+    const placement = {
+        containerId,
         sourceNodeId: containerId,
-        sourceHandleId: previewHandles.sourceHandleId,
+        targetNodeId: containerId,
+        mode: 'first-child'
+    };
+    (0, createPreviewGraph_cjs_namespaceObject.showPreviewGraph)({
+        source: {
+            nodeId: containerId,
+            handleId: previewHandles.sourceHandleId
+        },
         reactFlowInstance,
         position: previewCenter,
         positionMode: 'center',
         handlePosition: previewHandles.sourceHandlePosition,
-        targetNodeId: containerId,
-        targetHandleId: previewHandles.targetHandleId,
+        target: {
+            nodeId: containerId,
+            handleId: previewHandles.targetHandleId
+        },
+        data: {
+            placement
+        },
         containerId,
         trailingEdgeId
     });

package/dist/canvas/components/LoopNode/LoopNodePreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoopNodePreview.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/LoopNodePreview.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0CAA0C,CAAC;AAGlF,OAAO,EACL,KAAK,iCAAiC,EAEvC,MAAM,oBAAoB,CAAC;AAE5B,wBAAgB,4BAA4B,CAAC,EAC3C,WAAW,EACX,iBAAiB,EACjB,cAAc,EACd,cAAc,GACf,EAAE;IACD,WAAW,EAAE,MAAM,CAAC;IACpB,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,cAAc,EAAE,iCAAiC,CAAC;IAClD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,QAwBA"}
+{"version":3,"file":"LoopNodePreview.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/LoopNodePreview.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0CAA0C,CAAC;AAIlF,OAAO,EACL,KAAK,iCAAiC,EAEvC,MAAM,oBAAoB,CAAC;AAE5B,wBAAgB,4BAA4B,CAAC,EAC3C,WAAW,EACX,iBAAiB,EACjB,cAAc,EACd,cAAc,GACf,EAAE;IACD,WAAW,EAAE,MAAM,CAAC;IACpB,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,cAAc,EAAE,iCAAiC,CAAC;IAClD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,QAmCA"}

package/dist/canvas/components/LoopNode/LoopNodePreview.js

@@ -11,15 +11,28 @@ function showCenteredContainerPreview({ containerId, reactFlowInstance, previewH
         x: snapToGrid(containerAbsolutePosition.x + relativeCenter.x),
         y: snapToGrid(containerAbsolutePosition.y + relativeCenter.y)
     };
-    showPreviewGraph({
+    const placement = {
+        containerId,
         sourceNodeId: containerId,
-        sourceHandleId: previewHandles.sourceHandleId,
+        targetNodeId: containerId,
+        mode: 'first-child'
+    };
+    showPreviewGraph({
+        source: {
+            nodeId: containerId,
+            handleId: previewHandles.sourceHandleId
+        },
         reactFlowInstance,
         position: previewCenter,
         positionMode: 'center',
         handlePosition: previewHandles.sourceHandlePosition,
-        targetNodeId: containerId,
-        targetHandleId: previewHandles.targetHandleId,
+        target: {
+            nodeId: containerId,
+            handleId: previewHandles.targetHandleId
+        },
+        data: {
+            placement
+        },
         containerId,
         trailingEdgeId
     });

package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.cjs

@@ -29,14 +29,20 @@ __webpack_require__.d(__webpack_exports__, {
 const react_cjs_namespaceObject = require("../../../xyflow/react.cjs");
 const external_react_namespaceObject = require("react");
 const external_constants_cjs_namespaceObject = require("../../../constants.cjs");
+const index_cjs_namespaceObject = require("../../../core/index.cjs");
 const createPreviewGraph_cjs_namespaceObject = require("../../../utils/createPreviewGraph.cjs");
 const createPreviewNode_cjs_namespaceObject = require("../../../utils/createPreviewNode.cjs");
 const BaseCanvasModeProvider_cjs_namespaceObject = require("../../BaseCanvas/BaseCanvasModeProvider.cjs");
+const LoopNode_helpers_cjs_namespaceObject = require("../../LoopNode/LoopNode.helpers.cjs");
 const external_useEdgeToolbarPositioning_cjs_namespaceObject = require("./useEdgeToolbarPositioning.cjs");
 function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target, sourceHandleId, targetHandleId, sourcePosition, targetPosition, ignoredNodeTypes }) {
     const reactFlow = (0, react_cjs_namespaceObject.useReactFlow)();
+    const registry = (0, index_cjs_namespaceObject.useOptionalNodeTypeRegistry)();
     const { mode } = (0, BaseCanvasModeProvider_cjs_namespaceObject.useBaseCanvasMode)();
     const isDesignMode = 'design' === mode;
+    const getManifestForNode = (0, external_react_namespaceObject.useCallback)((node)=>node.type ? registry?.getManifest(node.type) : void 0, [
+        registry
+    ]);
     const previewEdge = (0, createPreviewNode_cjs_namespaceObject.isPreviewEdge)({
         id: edgeId,
         source,
@@ -48,36 +54,41 @@ function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target
         targetPosition
     });
     const handleAddNodeOnEdge = (0, external_react_namespaceObject.useCallback)((position)=>{
-        const originalEdge = {
-            id: edgeId,
-            source,
-            sourceHandle: sourceHandleId,
-            target,
-            targetHandle: targetHandleId,
-            type: 'default'
+        const originalEdge = reactFlow.getEdges().find((edge)=>edge.id === edgeId);
+        const sourceEndpoint = {
+            nodeId: source,
+            handleId: sourceHandleId ?? external_constants_cjs_namespaceObject.DEFAULT_SOURCE_HANDLE_ID
         };
+        const containerOverrides = registry ? (0, LoopNode_helpers_cjs_namespaceObject.resolveContainerAddNodePreview)({
+            source: sourceEndpoint,
+            sourceHandleType: 'source',
+            reactFlowInstance: reactFlow,
+            getManifestForNode
+        }) : null;
         (0, createPreviewGraph_cjs_namespaceObject.showPreviewGraph)({
-            sourceNodeId: source,
-            sourceHandleId: sourceHandleId ?? external_constants_cjs_namespaceObject.DEFAULT_SOURCE_HANDLE_ID,
+            source: sourceEndpoint,
             reactFlowInstance: reactFlow,
             position,
+            positionMode: 'drop',
             data: {
                 originalEdge
             },
             sourceHandleType: 'source',
             handlePosition: sourcePosition,
             ignoredNodeTypes: ignoredNodeTypes ?? [],
-            targetNodeId: target,
-            targetHandleId,
-            removedEdgeIds: [
-                edgeId
-            ]
+            target: {
+                nodeId: target,
+                handleId: targetHandleId
+            },
+            ...containerOverrides ?? {}
         });
     }, [
         sourcePosition,
         source,
         sourceHandleId,
         reactFlow,
+        registry,
+        getManifestForNode,
         target,
         targetHandleId,
         edgeId,

package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useEdgeToolbarState.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,QAAQ,EAAgB,MAAM,0CAA0C,CAAC;AAMlG,OAAO,KAAK,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAGtF,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC9D,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,cAAc,EAAE,QAAQ,CAAC;IACzB,cAAc,EAAE,QAAQ,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,OAAO,CAAC;IACrB,kBAAkB,EAAE,uBAAuB,GAAG,IAAI,CAAC;IACnD,MAAM,EAAE,iBAAiB,CAAC;IAC1B,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC3D;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,cAAc,EACd,SAAS,EACT,MAAM,EACN,MAAM,EACN,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,gBAAgB,GACjB,EAAE,wBAAwB,GAAG,gBAAgB,CAgF7C"}
+{"version":3,"file":"useEdgeToolbarState.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,QAAQ,EAAgB,MAAM,0CAA0C,CAAC;AAQlG,OAAO,KAAK,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAGtF,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC9D,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,cAAc,EAAE,QAAQ,CAAC;IACzB,cAAc,EAAE,QAAQ,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,OAAO,CAAC;IACrB,kBAAkB,EAAE,uBAAuB,GAAG,IAAI,CAAC;IACnD,MAAM,EAAE,iBAAiB,CAAC;IAC1B,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC3D;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,cAAc,EACd,SAAS,EACT,MAAM,EACN,MAAM,EACN,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,gBAAgB,GACjB,EAAE,wBAAwB,GAAG,gBAAgB,CA6F7C"}

package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.js

@@ -1,14 +1,20 @@
 import { useReactFlow } from "../../../xyflow/react.js";
 import { useCallback, useMemo } from "react";
 import { DEFAULT_SOURCE_HANDLE_ID } from "../../../constants.js";
+import { useOptionalNodeTypeRegistry } from "../../../core/index.js";
 import { showPreviewGraph } from "../../../utils/createPreviewGraph.js";
 import { isPreviewEdge } from "../../../utils/createPreviewNode.js";
 import { useBaseCanvasMode } from "../../BaseCanvas/BaseCanvasModeProvider.js";
+import { resolveContainerAddNodePreview } from "../../LoopNode/LoopNode.helpers.js";
 import { useEdgeToolbarPositioning } from "./useEdgeToolbarPositioning.js";
 function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target, sourceHandleId, targetHandleId, sourcePosition, targetPosition, ignoredNodeTypes }) {
     const reactFlow = useReactFlow();
+    const registry = useOptionalNodeTypeRegistry();
     const { mode } = useBaseCanvasMode();
     const isDesignMode = 'design' === mode;
+    const getManifestForNode = useCallback((node)=>node.type ? registry?.getManifest(node.type) : void 0, [
+        registry
+    ]);
     const previewEdge = isPreviewEdge({
         id: edgeId,
         source,
@@ -20,36 +26,41 @@ function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target
         targetPosition
     });
     const handleAddNodeOnEdge = useCallback((position)=>{
-        const originalEdge = {
-            id: edgeId,
-            source,
-            sourceHandle: sourceHandleId,
-            target,
-            targetHandle: targetHandleId,
-            type: 'default'
+        const originalEdge = reactFlow.getEdges().find((edge)=>edge.id === edgeId);
+        const sourceEndpoint = {
+            nodeId: source,
+            handleId: sourceHandleId ?? DEFAULT_SOURCE_HANDLE_ID
         };
+        const containerOverrides = registry ? resolveContainerAddNodePreview({
+            source: sourceEndpoint,
+            sourceHandleType: 'source',
+            reactFlowInstance: reactFlow,
+            getManifestForNode
+        }) : null;
         showPreviewGraph({
-            sourceNodeId: source,
-            sourceHandleId: sourceHandleId ?? DEFAULT_SOURCE_HANDLE_ID,
+            source: sourceEndpoint,
             reactFlowInstance: reactFlow,
             position,
+            positionMode: 'drop',
             data: {
                 originalEdge
             },
             sourceHandleType: 'source',
             handlePosition: sourcePosition,
             ignoredNodeTypes: ignoredNodeTypes ?? [],
-            targetNodeId: target,
-            targetHandleId,
-            removedEdgeIds: [
-                edgeId
-            ]
+            target: {
+                nodeId: target,
+                handleId: targetHandleId
+            },
+            ...containerOverrides ?? {}
         });
     }, [
         sourcePosition,
         source,
         sourceHandleId,
         reactFlow,
+        registry,
+        getManifestForNode,
         target,
         targetHandleId,
         edgeId,

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,