@uipath/apollo-react 4.16.0 → 4.17.0-pr605.1e1e7d4

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
                         })
                     })
                 })

package/dist/canvas/constants.cjs

@@ -25,8 +25,6 @@ var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     CANVAS_COMPACT_BREAKPOINT: ()=>CANVAS_COMPACT_BREAKPOINT,
-    DEFAULT_CONTAINER_HEIGHT: ()=>DEFAULT_CONTAINER_HEIGHT,
-    DEFAULT_CONTAINER_WIDTH: ()=>DEFAULT_CONTAINER_WIDTH,
     DEFAULT_NODE_SIZE: ()=>DEFAULT_NODE_SIZE,
     DEFAULT_RECTANGLE_NODE_WIDTH: ()=>DEFAULT_RECTANGLE_NODE_WIDTH,
     DEFAULT_SOURCE_HANDLE_ID: ()=>DEFAULT_SOURCE_HANDLE_ID,
@@ -60,8 +58,6 @@ const PREVIEW_EDGE_ID = 'preview-edge-id';
 const DEFAULT_SOURCE_HANDLE_ID = 'output';
 const DEFAULT_NODE_SIZE = 96;
 const GRID_SPACING = 16;
-const DEFAULT_CONTAINER_WIDTH = 35 * GRID_SPACING;
-const DEFAULT_CONTAINER_HEIGHT = 20 * GRID_SPACING;
 const CANVAS_COMPACT_BREAKPOINT = 600;
 const TOOLBOX_WIDTH = 320;
 const TOOLBOX_HEIGHT = 440;
@@ -86,8 +82,6 @@ const NODE_BADGE_SIZE = 20;
 const NODE_BADGE_INSET_SQUARE = 6;
 const NODE_BADGE_INSET_CIRCLE = 12;
 exports.CANVAS_COMPACT_BREAKPOINT = __webpack_exports__.CANVAS_COMPACT_BREAKPOINT;
-exports.DEFAULT_CONTAINER_HEIGHT = __webpack_exports__.DEFAULT_CONTAINER_HEIGHT;
-exports.DEFAULT_CONTAINER_WIDTH = __webpack_exports__.DEFAULT_CONTAINER_WIDTH;
 exports.DEFAULT_NODE_SIZE = __webpack_exports__.DEFAULT_NODE_SIZE;
 exports.DEFAULT_RECTANGLE_NODE_WIDTH = __webpack_exports__.DEFAULT_RECTANGLE_NODE_WIDTH;
 exports.DEFAULT_SOURCE_HANDLE_ID = __webpack_exports__.DEFAULT_SOURCE_HANDLE_ID;
@@ -117,8 +111,6 @@ exports.TOOLBOX_PADDING_Y = __webpack_exports__.TOOLBOX_PADDING_Y;
 exports.TOOLBOX_WIDTH = __webpack_exports__.TOOLBOX_WIDTH;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "CANVAS_COMPACT_BREAKPOINT",
-    "DEFAULT_CONTAINER_HEIGHT",
-    "DEFAULT_CONTAINER_WIDTH",
     "DEFAULT_NODE_SIZE",
     "DEFAULT_RECTANGLE_NODE_WIDTH",
     "DEFAULT_SOURCE_HANDLE_ID",

package/dist/canvas/constants.d.ts

@@ -3,8 +3,6 @@ export declare const PREVIEW_EDGE_ID = "preview-edge-id";
 export declare const DEFAULT_SOURCE_HANDLE_ID = "output";
 export declare const DEFAULT_NODE_SIZE = 96;
 export declare const GRID_SPACING = 16;
-export declare const DEFAULT_CONTAINER_WIDTH: number;
-export declare const DEFAULT_CONTAINER_HEIGHT: number;
 export declare const CANVAS_COMPACT_BREAKPOINT = 600;
 export declare const TOOLBOX_WIDTH = 320;
 export declare const TOOLBOX_HEIGHT = 440;

package/dist/canvas/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/canvas/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,wBAAwB,WAAW,CAAC;AACjD,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,YAAY,KAAK,CAAC;AAG/B,eAAO,MAAM,uBAAuB,QAAoB,CAAC;AACzD,eAAO,MAAM,wBAAwB,QAAoB,CAAC;AAG1D,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAG7C,eAAO,MAAM,aAAa,MAAM,CAAC;AAEjC,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,WAAW,KAAK,CAAC;AAU9B,eAAO,MAAM,4BAA4B,KAAK,CAAC;AAG/C,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAGhD,eAAO,MAAM,mBAAmB,QAAmB,CAAC;AACpD,eAAO,MAAM,yBAAyB,QAAmB,CAAC;AAC1D,eAAO,MAAM,yBAAyB,QAAoB,CAAC;AAC3D,eAAO,MAAM,yBAAyB,QAAoB,CAAC;AAO3D,eAAO,MAAM,2BAA2B,QAAyB,CAAC;AAClE,eAAO,MAAM,sBAAsB,QAAyB,CAAC;AAC7D,eAAO,MAAM,qBAAqB,QAAyB,CAAC;AAC5D,eAAO,MAAM,uBAAuB,QAAyB,CAAC;AAC9D,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAGlC,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAGvC,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAC1C,eAAO,MAAM,oCAAoC,MAAM,CAAC;AAGxD,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,uBAAuB,IAAI,CAAC;AACzC,eAAO,MAAM,uBAAuB,KAAK,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/canvas/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,wBAAwB,WAAW,CAAC;AACjD,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,YAAY,KAAK,CAAC;AAG/B,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAG7C,eAAO,MAAM,aAAa,MAAM,CAAC;AAEjC,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,WAAW,KAAK,CAAC;AAU9B,eAAO,MAAM,4BAA4B,KAAK,CAAC;AAG/C,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAGhD,eAAO,MAAM,mBAAmB,QAAmB,CAAC;AACpD,eAAO,MAAM,yBAAyB,QAAmB,CAAC;AAC1D,eAAO,MAAM,yBAAyB,QAAoB,CAAC;AAC3D,eAAO,MAAM,yBAAyB,QAAoB,CAAC;AAO3D,eAAO,MAAM,2BAA2B,QAAyB,CAAC;AAClE,eAAO,MAAM,sBAAsB,QAAyB,CAAC;AAC7D,eAAO,MAAM,qBAAqB,QAAyB,CAAC;AAC5D,eAAO,MAAM,uBAAuB,QAAyB,CAAC;AAC9D,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAGlC,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAGvC,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAC1C,eAAO,MAAM,oCAAoC,MAAM,CAAC;AAGxD,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,uBAAuB,IAAI,CAAC;AACzC,eAAO,MAAM,uBAAuB,KAAK,CAAC"}

package/dist/canvas/constants.js

@@ -3,8 +3,6 @@ const PREVIEW_EDGE_ID = 'preview-edge-id';
 const DEFAULT_SOURCE_HANDLE_ID = 'output';
 const DEFAULT_NODE_SIZE = 96;
 const GRID_SPACING = 16;
-const DEFAULT_CONTAINER_WIDTH = 35 * GRID_SPACING;
-const DEFAULT_CONTAINER_HEIGHT = 20 * GRID_SPACING;
 const CANVAS_COMPACT_BREAKPOINT = 600;
 const TOOLBOX_WIDTH = 320;
 const TOOLBOX_HEIGHT = 440;
@@ -28,4 +26,4 @@ const NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES = -40;
 const NODE_BADGE_SIZE = 20;
 const NODE_BADGE_INSET_SQUARE = 6;
 const NODE_BADGE_INSET_CIRCLE = 12;
-export { CANVAS_COMPACT_BREAKPOINT, DEFAULT_CONTAINER_HEIGHT, DEFAULT_CONTAINER_WIDTH, DEFAULT_NODE_SIZE, DEFAULT_RECTANGLE_NODE_WIDTH, DEFAULT_SOURCE_HANDLE_ID, FLOATING_CANVAS_PANEL_OFFSET, GRID_SPACING, NODE_BADGE_INSET_CIRCLE, NODE_BADGE_INSET_SQUARE, NODE_BADGE_SIZE, NODE_BORDER_SIZE, NODE_CONTAINER_RADIUS_RATIO, NODE_ERROR_ICON_SIZE, NODE_HEIGHT_DEFAULT, NODE_HEIGHT_FOOTER_BUTTON, NODE_HEIGHT_FOOTER_DOUBLE, NODE_HEIGHT_FOOTER_SINGLE, NODE_INNER_ICON_RATIO, NODE_INNER_RADIUS_RATIO, NODE_INNER_SHAPE_RATIO, NODE_TEXT_BOTTOM_OFFSET, NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES, PREVIEW_EDGE_ID, PREVIEW_NODE_ID, TOOLBOX_GAP, TOOLBOX_HEIGHT, TOOLBOX_PADDING_X, TOOLBOX_PADDING_Y, TOOLBOX_WIDTH };
+export { CANVAS_COMPACT_BREAKPOINT, DEFAULT_NODE_SIZE, DEFAULT_RECTANGLE_NODE_WIDTH, DEFAULT_SOURCE_HANDLE_ID, FLOATING_CANVAS_PANEL_OFFSET, GRID_SPACING, NODE_BADGE_INSET_CIRCLE, NODE_BADGE_INSET_SQUARE, NODE_BADGE_SIZE, NODE_BORDER_SIZE, NODE_CONTAINER_RADIUS_RATIO, NODE_ERROR_ICON_SIZE, NODE_HEIGHT_DEFAULT, NODE_HEIGHT_FOOTER_BUTTON, NODE_HEIGHT_FOOTER_DOUBLE, NODE_HEIGHT_FOOTER_SINGLE, NODE_INNER_ICON_RATIO, NODE_INNER_RADIUS_RATIO, NODE_INNER_SHAPE_RATIO, NODE_TEXT_BOTTOM_OFFSET, NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES, PREVIEW_EDGE_ID, PREVIEW_NODE_ID, TOOLBOX_GAP, TOOLBOX_HEIGHT, TOOLBOX_PADDING_X, TOOLBOX_PADDING_Y, TOOLBOX_WIDTH };

package/dist/canvas/hooks/useAddNodeOnConnectEnd.cjs

@@ -49,8 +49,10 @@ function useAddNodeOnConnectEnd(ignoredNodeTypes = EMPTY_IGNORED_NODE_TYPES) {
         if (!clientPosition) return;
         const flowDropPosition = reactFlowInstance.screenToFlowPosition(clientPosition);
         (0, index_cjs_namespaceObject.showPreviewGraph)({
-            sourceNodeId: connectionState.fromNode.id,
-            sourceHandleId: connectionState.fromHandle.id ?? 'output',
+            source: {
+                nodeId: connectionState.fromNode.id,
+                handleId: connectionState.fromHandle.id ?? 'output'
+            },
             reactFlowInstance,
             position: flowDropPosition,
             sourceHandleType: connectionState.fromHandle.type,

package/dist/canvas/hooks/useAddNodeOnConnectEnd.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAddNodeOnConnectEnd.d.ts","sourceRoot":"","sources":["../../../src/canvas/hooks/useAddNodeOnConnectEnd.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAgB,MAAM,0CAA0C,CAAC;AAoB3F,wBAAgB,sBAAsB,CAAC,gBAAgB,GAAE,MAAM,EAA6B,gBA+B3F"}
+{"version":3,"file":"useAddNodeOnConnectEnd.d.ts","sourceRoot":"","sources":["../../../src/canvas/hooks/useAddNodeOnConnectEnd.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAgB,MAAM,0CAA0C,CAAC;AAoB3F,wBAAgB,sBAAsB,CAAC,gBAAgB,GAAE,MAAM,EAA6B,gBAiC3F"}

package/dist/canvas/hooks/useAddNodeOnConnectEnd.js

@@ -21,8 +21,10 @@ function useAddNodeOnConnectEnd(ignoredNodeTypes = EMPTY_IGNORED_NODE_TYPES) {
         if (!clientPosition) return;
         const flowDropPosition = reactFlowInstance.screenToFlowPosition(clientPosition);
         showPreviewGraph({
-            sourceNodeId: connectionState.fromNode.id,
-            sourceHandleId: connectionState.fromHandle.id ?? 'output',
+            source: {
+                nodeId: connectionState.fromNode.id,
+                handleId: connectionState.fromHandle.id ?? 'output'
+            },
             reactFlowInstance,
             position: flowDropPosition,
             sourceHandleType: connectionState.fromHandle.type,

package/dist/canvas/storybook-utils/hooks/useCanvasStory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCanvasStory.d.ts","sourceRoot":"","sources":["../../../../src/canvas/storybook-utils/hooks/useCanvasStory.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,UAAU,EACV,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,SAAS,EACV,MAAM,0CAA0C,CAAC;AAClD,OAAO,EAAW,aAAa,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AAMjG,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAKjD,MAAM,WAAW,qBAAqB;IAIpC,YAAY,EAAE,IAAI,EAAE,CAAC;IAMrB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IAMtB,aAAa,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAKlC,mBAAmB,CAAC,EAAE,SAAS,CAAC;CACjC;AAKD,MAAM,WAAW,oBAAoB;IAEnC,KAAK,EAAE,IAAI,EAAE,CAAC;IAEd,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAEvD,aAAa,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;IAGnD,KAAK,EAAE,IAAI,EAAE,CAAC;IAEd,SAAS,EAAE,SAAS,CAAC;IAErB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAEvD,aAAa,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;IAGnD,SAAS,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAG5C,gBAAgB,EAAE,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;IAEzD,SAAS,EAAE,SAAS,CAAC;IAMrB,WAAW,EAAE;QACX,KAAK,EAAE,IAAI,EAAE,CAAC;QACd,KAAK,EAAE,IAAI,EAAE,CAAC;QACd,aAAa,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;QACnD,aAAa,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;QACnD,SAAS,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;QAC5C,SAAS,EAAE,SAAS,CAAC;QACrB,SAAS,EAAE,SAAS,CAAC;KACtB,CAAC;CACH;AA8BD,wBAAgB,cAAc,CAAC,OAAO,EAAE,qBAAqB,GAAG,oBAAoB,CA8DnF;AAYD,wBAAgB,wBAAwB,CAAC,aAAa,GAAE,SAAS,CAAC,MAAM,CAAY,GAAG,SAAS,CAY/F"}
+{"version":3,"file":"useCanvasStory.d.ts","sourceRoot":"","sources":["../../../../src/canvas/storybook-utils/hooks/useCanvasStory.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,UAAU,EACV,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,SAAS,EACV,MAAM,0CAA0C,CAAC;AAClD,OAAO,EAAW,aAAa,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AAMjG,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAMjD,MAAM,WAAW,qBAAqB;IAIpC,YAAY,EAAE,IAAI,EAAE,CAAC;IAMrB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IAMtB,aAAa,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAKlC,mBAAmB,CAAC,EAAE,SAAS,CAAC;CACjC;AAKD,MAAM,WAAW,oBAAoB;IAEnC,KAAK,EAAE,IAAI,EAAE,CAAC;IAEd,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAEvD,aAAa,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;IAGnD,KAAK,EAAE,IAAI,EAAE,CAAC;IAEd,SAAS,EAAE,SAAS,CAAC;IAErB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAEvD,aAAa,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;IAGnD,SAAS,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAG5C,gBAAgB,EAAE,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;IAEzD,SAAS,EAAE,SAAS,CAAC;IAMrB,WAAW,EAAE;QACX,KAAK,EAAE,IAAI,EAAE,CAAC;QACd,KAAK,EAAE,IAAI,EAAE,CAAC;QACd,aAAa,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;QACnD,aAAa,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;QACnD,SAAS,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;QAC5C,SAAS,EAAE,SAAS,CAAC;QACrB,SAAS,EAAE,SAAS,CAAC;KACtB,CAAC;CACH;AA8BD,wBAAgB,cAAc,CAAC,OAAO,EAAE,qBAAqB,GAAG,oBAAoB,CA8DnF;AAYD,wBAAgB,wBAAwB,CAAC,aAAa,GAAE,SAAS,CAAC,MAAM,CAAY,GAAG,SAAS,CAY/F"}