@uipath/apollo-react 4.5.4-pr525.f7c19ae → 4.6.0-pr525.51f590d

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

@@ -27,8 +27,9 @@ __webpack_require__.d(__webpack_exports__, {
     BaseBadgeSlot: ()=>BaseBadgeSlot
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
 const external_constants_cjs_namespaceObject = require("../../constants.cjs");
-const BaseBadgeSlot = ({ position, shape, children })=>{
+const BaseBadgeSlot = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ position, shape, children })=>{
     const offset = 'circle' === shape ? external_constants_cjs_namespaceObject.NODE_BADGE_INSET_CIRCLE : external_constants_cjs_namespaceObject.NODE_BADGE_INSET_SQUARE;
     const style = {
         width: external_constants_cjs_namespaceObject.NODE_BADGE_SIZE,
@@ -57,7 +58,7 @@ const BaseBadgeSlot = ({ position, shape, children })=>{
         style: style,
         children: children
     });
-};
+});
 exports.BaseBadgeSlot = __webpack_exports__.BaseBadgeSlot;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "BaseBadgeSlot"

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

@@ -4,6 +4,6 @@ interface BaseBadgeSlotProps {
     shape?: NodeShape;
     children: React.ReactNode;
 }
-export declare const BaseBadgeSlot: ({ position, shape, children }: BaseBadgeSlotProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BaseBadgeSlot: import("react").MemoExoticComponent<({ position, shape, children }: BaseBadgeSlotProps) => import("react/jsx-runtime").JSX.Element>;
 export {};
 //# sourceMappingURL=BaseNodeBadgeSlot.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BaseNodeBadgeSlot.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeBadgeSlot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,GAAI,+BAA+B,kBAAkB,4CA0B9E,CAAC"}
+{"version":3,"file":"BaseNodeBadgeSlot.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeBadgeSlot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,sEAAwC,kBAAkB,6CA0BlF,CAAC"}

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

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
 import { NODE_BADGE_INSET_CIRCLE, NODE_BADGE_INSET_SQUARE, NODE_BADGE_SIZE } from "../../constants.js";
-const BaseBadgeSlot = ({ position, shape, children })=>{
+const BaseBadgeSlot = /*#__PURE__*/ memo(({ position, shape, children })=>{
     const offset = 'circle' === shape ? NODE_BADGE_INSET_CIRCLE : NODE_BADGE_INSET_SQUARE;
     const style = {
         width: NODE_BADGE_SIZE,
@@ -29,5 +30,5 @@ const BaseBadgeSlot = ({ position, shape, children })=>{
         style: style,
         children: children
     });
-};
+});
 export { BaseBadgeSlot };

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

@@ -29,6 +29,7 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
+const external_react_namespaceObject = require("react");
 const external_constants_cjs_namespaceObject = require("../../constants.cjs");
 const getStatusBorder = (status)=>{
     switch(status){
@@ -36,7 +37,7 @@ const getStatusBorder = (status)=>{
             return 'border-info animate-glow [--glow-color:var(--info)]';
         case 'Completed':
         case 'add':
-            return 'border-success animate-glow [--glow-color:var(--success)]';
+            return 'border-success';
         case 'Paused':
         case 'Warning':
         case 'WARNING':
@@ -59,19 +60,35 @@ const BaseContainer = ({ isSelected, isHovered, shape, interactionState, executi
     const radiusBasis = 'rectangle' === shape ? numericHeight ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE : Math.min(numericWidth ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE, numericHeight ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE);
     const containerRadius = radiusBasis * external_constants_cjs_namespaceObject.NODE_CONTAINER_RADIUS_RATIO;
     const activeStatus = suggestionType ?? validationStatus ?? executionStatus;
+    const className = (0, external_react_namespaceObject.useMemo)(()=>(0, apollo_wind_namespaceObject.cn)('relative flex items-center cursor-pointer bg-surface-overlay border-2 border-border', 'circle' === shape ? 'rounded-full' : '', 'rectangle' === shape ? 'flex-row justify-start gap-3 p-2' : 'flex-col justify-center', hasFooter && 'flex-wrap rounded-2xl', getStatusBorder(activeStatus), !isSelected && isHovered && 'border-foreground-muted', isSelected && 'border-brand', isSelected && isHovered && 'border-foreground-accent-muted', 'disabled' === interactionState && 'opacity-50 cursor-not-allowed', 'drag' === interactionState && 'cursor-grabbing opacity-80'), [
+        shape,
+        hasFooter,
+        activeStatus,
+        isSelected,
+        isHovered,
+        interactionState
+    ]);
+    const style = (0, external_react_namespaceObject.useMemo)(()=>({
+            width,
+            height,
+            background,
+            borderRadius: 'circle' === shape || hasFooter ? void 0 : containerRadius
+        }), [
+        width,
+        height,
+        background,
+        shape,
+        hasFooter,
+        containerRadius
+    ]);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         "data-testid": "base-container",
         "data-execution-status": executionStatus,
         "data-interaction-state": interactionState,
         "data-validation-status": validationStatus,
         "data-suggestion-type": suggestionType,
-        className: (0, apollo_wind_namespaceObject.cn)('relative flex items-center cursor-pointer bg-surface-overlay border-2 border-border', 'circle' === shape ? 'rounded-full' : '', 'rectangle' === shape ? 'flex-row justify-start gap-3 p-2' : 'flex-col justify-center', hasFooter && 'flex-wrap rounded-2xl', getStatusBorder(activeStatus), !isSelected && isHovered && 'border-foreground-muted', isSelected && 'border-brand', isSelected && isHovered && 'border-foreground-accent-muted', 'disabled' === interactionState && 'opacity-50 cursor-not-allowed', 'drag' === interactionState && 'cursor-grabbing opacity-80'),
-        style: {
-            width,
-            height,
-            background,
-            borderRadius: 'circle' === shape || hasFooter ? void 0 : containerRadius
-        },
+        className: className,
+        style: style,
         "aria-busy": loading || void 0,
         children: children
     });

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

@@ -1 +1 @@
-{"version":3,"file":"BaseNodeContainer.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeContainer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAEjE,eAAO,MAAM,eAAe,GAC1B,SAAS,mBAAmB,GAAG,uBAAuB,GAAG,cAAc,KACtE,MAsBF,CAAC;AAEF,UAAU,kBAAkB;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,gBAAgB,CAAC,EAAE,uBAAuB,CAAC;IAC3C,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AACD,eAAO,MAAM,aAAa,GAAI,iKAc3B,kBAAkB,4CA4CpB,CAAC"}
+{"version":3,"file":"BaseNodeContainer.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeContainer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAEjE,eAAO,MAAM,eAAe,GAC1B,SAAS,mBAAmB,GAAG,uBAAuB,GAAG,cAAc,KACtE,MAsBF,CAAC;AAEF,UAAU,kBAAkB;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,gBAAgB,CAAC,EAAE,uBAAuB,CAAC;IAC3C,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AACD,eAAO,MAAM,aAAa,GAAI,iKAc3B,kBAAkB,4CA2DpB,CAAC"}

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

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "@uipath/apollo-wind";
+import { useMemo } from "react";
 import { DEFAULT_NODE_SIZE, NODE_CONTAINER_RADIUS_RATIO } from "../../constants.js";
 const getStatusBorder = (status)=>{
     switch(status){
@@ -7,7 +8,7 @@ const getStatusBorder = (status)=>{
             return 'border-info animate-glow [--glow-color:var(--info)]';
         case 'Completed':
         case 'add':
-            return 'border-success animate-glow [--glow-color:var(--success)]';
+            return 'border-success';
         case 'Paused':
         case 'Warning':
         case 'WARNING':
@@ -30,19 +31,35 @@ const BaseContainer = ({ isSelected, isHovered, shape, interactionState, executi
     const radiusBasis = 'rectangle' === shape ? numericHeight ?? DEFAULT_NODE_SIZE : Math.min(numericWidth ?? DEFAULT_NODE_SIZE, numericHeight ?? DEFAULT_NODE_SIZE);
     const containerRadius = radiusBasis * NODE_CONTAINER_RADIUS_RATIO;
     const activeStatus = suggestionType ?? validationStatus ?? executionStatus;
+    const className = useMemo(()=>cn('relative flex items-center cursor-pointer bg-surface-overlay border-2 border-border', 'circle' === shape ? 'rounded-full' : '', 'rectangle' === shape ? 'flex-row justify-start gap-3 p-2' : 'flex-col justify-center', hasFooter && 'flex-wrap rounded-2xl', getStatusBorder(activeStatus), !isSelected && isHovered && 'border-foreground-muted', isSelected && 'border-brand', isSelected && isHovered && 'border-foreground-accent-muted', 'disabled' === interactionState && 'opacity-50 cursor-not-allowed', 'drag' === interactionState && 'cursor-grabbing opacity-80'), [
+        shape,
+        hasFooter,
+        activeStatus,
+        isSelected,
+        isHovered,
+        interactionState
+    ]);
+    const style = useMemo(()=>({
+            width,
+            height,
+            background,
+            borderRadius: 'circle' === shape || hasFooter ? void 0 : containerRadius
+        }), [
+        width,
+        height,
+        background,
+        shape,
+        hasFooter,
+        containerRadius
+    ]);
     return /*#__PURE__*/ jsx("div", {
         "data-testid": "base-container",
         "data-execution-status": executionStatus,
         "data-interaction-state": interactionState,
         "data-validation-status": validationStatus,
         "data-suggestion-type": suggestionType,
-        className: cn('relative flex items-center cursor-pointer bg-surface-overlay border-2 border-border', 'circle' === shape ? 'rounded-full' : '', 'rectangle' === shape ? 'flex-row justify-start gap-3 p-2' : 'flex-col justify-center', hasFooter && 'flex-wrap rounded-2xl', getStatusBorder(activeStatus), !isSelected && isHovered && 'border-foreground-muted', isSelected && 'border-brand', isSelected && isHovered && 'border-foreground-accent-muted', 'disabled' === interactionState && 'opacity-50 cursor-not-allowed', 'drag' === interactionState && 'cursor-grabbing opacity-80'),
-        style: {
-            width,
-            height,
-            background,
-            borderRadius: 'circle' === shape || hasFooter ? void 0 : containerRadius
-        },
+        className: className,
+        style: style,
         "aria-busy": loading || void 0,
         children: children
     });

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

@@ -28,24 +28,39 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
+const external_react_namespaceObject = require("react");
 const external_constants_cjs_namespaceObject = require("../../constants.cjs");
-const BaseInnerShape = ({ shape, color, background, hasFooter, loading, containerWidth = external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE, containerHeight = external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE, children })=>{
+const CssUtil_cjs_namespaceObject = require("../../utils/CssUtil.cjs");
+const BaseInnerShape = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ shape, color, background, hasFooter, loading, containerWidth = external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE, containerHeight = external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE, children })=>{
     const effectiveContainerHeight = hasFooter ? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE : containerHeight;
     const effectiveContainerWidth = hasFooter ? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE : containerWidth;
     const basis = 'rectangle' === shape ? effectiveContainerHeight : Math.min(effectiveContainerWidth, effectiveContainerHeight);
     const innerSize = basis * external_constants_cjs_namespaceObject.NODE_INNER_SHAPE_RATIO;
     const iconSize = basis * external_constants_cjs_namespaceObject.NODE_INNER_ICON_RATIO;
     const innerRadius = basis * external_constants_cjs_namespaceObject.NODE_INNER_RADIUS_RATIO;
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: (0, apollo_wind_namespaceObject.cn)('flex items-center justify-center overflow-hidden bg-surface text-foreground', 'circle' === shape ? 'rounded-full' : '', hasFooter ? 'rounded-2xl' : '', '[&>svg]:w-(--canvas-icon-size) [&>svg]:h-(--canvas-icon-size)', '[&>img]:w-(--canvas-icon-size) [&>img]:h-(--canvas-icon-size) [&>img]:object-contain'),
-        style: {
+    const className = (0, external_react_namespaceObject.useMemo)(()=>(0, CssUtil_cjs_namespaceObject.cx)('flex items-center justify-center overflow-hidden bg-surface text-foreground', 'circle' === shape ? 'rounded-full' : '', hasFooter ? 'rounded-2xl' : '', '[&>svg]:w-(--canvas-icon-size) [&>svg]:h-(--canvas-icon-size)', '[&>img]:w-(--canvas-icon-size) [&>img]:h-(--canvas-icon-size) [&>img]:object-contain'), [
+        shape,
+        hasFooter
+    ]);
+    const style = (0, external_react_namespaceObject.useMemo)(()=>({
             width: innerSize,
             height: innerSize,
             borderRadius: 'circle' === shape || hasFooter ? void 0 : innerRadius,
             color,
             background,
             '--canvas-icon-size': `${iconSize}px`
-        },
+        }), [
+        innerSize,
+        innerRadius,
+        shape,
+        hasFooter,
+        color,
+        background,
+        iconSize
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: className,
+        style: style,
         children: loading ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Skeleton, {
             "data-testid": "skeleton-icon",
             className: "rounded-lg",
@@ -55,7 +70,7 @@ const BaseInnerShape = ({ shape, color, background, hasFooter, loading, containe
             }
         }) : children
     });
-};
+});
 exports.BaseInnerShape = __webpack_exports__.BaseInnerShape;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "BaseInnerShape"

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

@@ -9,6 +9,6 @@ interface BaseInnerShapeProps {
     containerHeight?: number;
     children: React.ReactNode;
 }
-export declare const BaseInnerShape: ({ shape, color, background, hasFooter, loading, containerWidth, containerHeight, children, }: BaseInnerShapeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BaseInnerShape: import("react").MemoExoticComponent<({ shape, color, background, hasFooter, loading, containerWidth, containerHeight, children, }: BaseInnerShapeProps) => import("react/jsx-runtime").JSX.Element>;
 export {};
 //# sourceMappingURL=BaseNodeInnerShape.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BaseNodeInnerShape.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeInnerShape.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,UAAU,mBAAmB;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AACD,eAAO,MAAM,cAAc,GAAI,8FAS5B,mBAAmB,4CAgDrB,CAAC"}
+{"version":3,"file":"BaseNodeInnerShape.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeInnerShape.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,UAAU,mBAAmB;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AACD,eAAO,MAAM,cAAc,qIAUtB,mBAAmB,6CAuDvB,CAAC"}

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

@@ -1,23 +1,38 @@
 import { jsx } from "react/jsx-runtime";
-import { Skeleton, cn } from "@uipath/apollo-wind";
+import { Skeleton } from "@uipath/apollo-wind";
+import { memo, useMemo } from "react";
 import { DEFAULT_NODE_SIZE, NODE_INNER_ICON_RATIO, NODE_INNER_RADIUS_RATIO, NODE_INNER_SHAPE_RATIO } from "../../constants.js";
-const BaseInnerShape = ({ shape, color, background, hasFooter, loading, containerWidth = DEFAULT_NODE_SIZE, containerHeight = DEFAULT_NODE_SIZE, children })=>{
+import { cx } from "../../utils/CssUtil.js";
+const BaseInnerShape = /*#__PURE__*/ memo(({ shape, color, background, hasFooter, loading, containerWidth = DEFAULT_NODE_SIZE, containerHeight = DEFAULT_NODE_SIZE, children })=>{
     const effectiveContainerHeight = hasFooter ? DEFAULT_NODE_SIZE : containerHeight;
     const effectiveContainerWidth = hasFooter ? DEFAULT_NODE_SIZE : containerWidth;
     const basis = 'rectangle' === shape ? effectiveContainerHeight : Math.min(effectiveContainerWidth, effectiveContainerHeight);
     const innerSize = basis * NODE_INNER_SHAPE_RATIO;
     const iconSize = basis * NODE_INNER_ICON_RATIO;
     const innerRadius = basis * NODE_INNER_RADIUS_RATIO;
-    return /*#__PURE__*/ jsx("div", {
-        className: cn('flex items-center justify-center overflow-hidden bg-surface text-foreground', 'circle' === shape ? 'rounded-full' : '', hasFooter ? 'rounded-2xl' : '', '[&>svg]:w-(--canvas-icon-size) [&>svg]:h-(--canvas-icon-size)', '[&>img]:w-(--canvas-icon-size) [&>img]:h-(--canvas-icon-size) [&>img]:object-contain'),
-        style: {
+    const className = useMemo(()=>cx('flex items-center justify-center overflow-hidden bg-surface text-foreground', 'circle' === shape ? 'rounded-full' : '', hasFooter ? 'rounded-2xl' : '', '[&>svg]:w-(--canvas-icon-size) [&>svg]:h-(--canvas-icon-size)', '[&>img]:w-(--canvas-icon-size) [&>img]:h-(--canvas-icon-size) [&>img]:object-contain'), [
+        shape,
+        hasFooter
+    ]);
+    const style = useMemo(()=>({
             width: innerSize,
             height: innerSize,
             borderRadius: 'circle' === shape || hasFooter ? void 0 : innerRadius,
             color,
             background,
             '--canvas-icon-size': `${iconSize}px`
-        },
+        }), [
+        innerSize,
+        innerRadius,
+        shape,
+        hasFooter,
+        color,
+        background,
+        iconSize
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        className: className,
+        style: style,
         children: loading ? /*#__PURE__*/ jsx(Skeleton, {
             "data-testid": "skeleton-icon",
             className: "rounded-lg",
@@ -27,5 +42,5 @@ const BaseInnerShape = ({ shape, color, background, hasFooter, loading, containe
             }
         }) : children
     });
-};
+});
 export { BaseInnerShape };

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

@@ -28,9 +28,9 @@ __webpack_require__.d(__webpack_exports__, {
     NodeLabel: ()=>NodeLabel
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const external_react_namespaceObject = require("react");
 const external_constants_cjs_namespaceObject = require("../../constants.cjs");
+const CssUtil_cjs_namespaceObject = require("../../utils/CssUtil.cjs");
 const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
 const BaseTextContainer = ({ hasBottomHandles, shape, children })=>{
     if ('rectangle' === shape) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
@@ -38,7 +38,7 @@ const BaseTextContainer = ({ hasBottomHandles, shape, children })=>{
         children: children
     });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: (0, apollo_wind_namespaceObject.cn)('absolute left-1/2 w-[150%] flex flex-col z-10 transition-transform duration-200', hasBottomHandles ? 'items-start text-left translate-x-[20%] translate-y-1/2' : 'items-center text-center -translate-x-1/2 translate-y-full'),
+        className: (0, CssUtil_cjs_namespaceObject.cx)('absolute left-1/2 w-[150%] flex flex-col z-10 transition-transform duration-200', hasBottomHandles ? 'items-start text-left translate-x-[20%] translate-y-1/2' : 'items-center text-center -translate-x-1/2 translate-y-full'),
         style: {
             bottom: hasBottomHandles ? external_constants_cjs_namespaceObject.NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES : external_constants_cjs_namespaceObject.NODE_TEXT_BOTTOM_OFFSET
         },
@@ -58,7 +58,7 @@ const ConditionalTooltip = ({ content, children })=>{
 const Header = ({ shape, backgroundColor, onDoubleClick, children, 'data-testid': dataTestId })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         "data-testid": dataTestId,
         onDoubleClick: onDoubleClick,
-        className: (0, apollo_wind_namespaceObject.cn)('text-center text-sm leading-[18px] font-semibold text-foreground overflow-hidden', backgroundColor && 'px-1.5 py-0.5 rounded-sm', 'rectangle' === shape ? 'w-full text-left whitespace-nowrap text-ellipsis' : 'break-all line-clamp-3'),
+        className: (0, CssUtil_cjs_namespaceObject.cx)('text-center text-sm leading-[18px] font-semibold text-foreground overflow-hidden', backgroundColor && 'px-1.5 py-0.5 rounded-sm', 'rectangle' === shape ? 'w-full text-left whitespace-nowrap text-ellipsis' : 'wrap-break-word line-clamp-3'),
         style: backgroundColor ? {
             backgroundColor
         } : void 0,
@@ -67,7 +67,7 @@ const Header = ({ shape, backgroundColor, onDoubleClick, children, 'data-testid'
 const SubHeader = ({ shape, onDoubleClick, children, 'data-testid': dataTestId })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         "data-testid": dataTestId,
         onDoubleClick: onDoubleClick,
-        className: (0, apollo_wind_namespaceObject.cn)('text-center text-xs leading-[18px] text-foreground-muted break-all overflow-hidden', 'rectangle' === shape ? 'w-full text-left line-clamp-2' : 'line-clamp-5'),
+        className: (0, CssUtil_cjs_namespaceObject.cx)('text-center text-xs leading-[18px] text-foreground-muted wrap-break-word overflow-hidden', 'rectangle' === shape ? 'w-full text-left line-clamp-2' : 'line-clamp-5'),
         children: children
     });
 const EditableLabel = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(({ shape, backgroundColor, variant, value, placeholder, rows, onChange, onKeyDown, onBlur, 'aria-label': ariaLabel }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("textarea", {
@@ -79,7 +79,7 @@ const EditableLabel = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
         onChange: onChange,
         onKeyDown: onKeyDown,
         onBlur: onBlur,
-        className: (0, apollo_wind_namespaceObject.cn)('nodrag nowheel resize-none font-[inherit] text-foreground border-none rounded-sm outline-1 outline-dashed outline-border-de-emp max-w-full', 'subtext' === variant ? 'text-xs leading-[18px] font-normal mb-0' : 'text-sm leading-[18px] font-semibold mb-0.5', 'rectangle' === shape ? 'field-sizing-fixed w-full' : 'field-sizing-content text-center', backgroundColor && 'px-1.5 py-0.5'),
+        className: (0, CssUtil_cjs_namespaceObject.cx)('nodrag nowheel resize-none font-[inherit] text-foreground border-none rounded-sm outline-1 outline-dashed outline-border-de-emp max-w-full', 'subtext' === variant ? 'text-xs leading-[18px] font-normal mb-0' : 'text-sm leading-[18px] font-semibold mb-0.5', 'rectangle' === shape ? 'field-sizing-fixed w-full' : 'field-sizing-content text-center', backgroundColor && 'px-1.5 py-0.5'),
         style: backgroundColor ? {
             backgroundColor
         } : void 0

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

@@ -1 +1 @@
-{"version":3,"file":"NodeLabel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/NodeLabel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,UAAU,sBAAsB;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,GAAI,wCAI/B,sBAAsB,4CAmBxB,CAAC;AA+IF,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAClE;AA+KD,eAAO,MAAM,SAAS,mLAjKnB,cAAc,6CAiK+B,CAAC"}
+{"version":3,"file":"NodeLabel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/NodeLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,UAAU,sBAAsB;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,GAAI,wCAI/B,sBAAsB,4CAmBxB,CAAC;AA+IF,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAClE;AA+KD,eAAO,MAAM,SAAS,mLAjKnB,cAAc,6CAiK+B,CAAC"}

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

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "@uipath/apollo-wind";
 import { forwardRef, memo, useCallback, useEffect, useRef, useState } from "react";
 import { NODE_TEXT_BOTTOM_OFFSET, NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES } from "../../constants.js";
+import { cx } from "../../utils/CssUtil.js";
 import { CanvasTooltip } from "../CanvasTooltip.js";
 const BaseTextContainer = ({ hasBottomHandles, shape, children })=>{
     if ('rectangle' === shape) return /*#__PURE__*/ jsx("div", {
@@ -9,7 +9,7 @@ const BaseTextContainer = ({ hasBottomHandles, shape, children })=>{
         children: children
     });
     return /*#__PURE__*/ jsx("div", {
-        className: cn('absolute left-1/2 w-[150%] flex flex-col z-10 transition-transform duration-200', hasBottomHandles ? 'items-start text-left translate-x-[20%] translate-y-1/2' : 'items-center text-center -translate-x-1/2 translate-y-full'),
+        className: cx('absolute left-1/2 w-[150%] flex flex-col z-10 transition-transform duration-200', hasBottomHandles ? 'items-start text-left translate-x-[20%] translate-y-1/2' : 'items-center text-center -translate-x-1/2 translate-y-full'),
         style: {
             bottom: hasBottomHandles ? NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES : NODE_TEXT_BOTTOM_OFFSET
         },
@@ -29,7 +29,7 @@ const ConditionalTooltip = ({ content, children })=>{
 const Header = ({ shape, backgroundColor, onDoubleClick, children, 'data-testid': dataTestId })=>/*#__PURE__*/ jsx("div", {
         "data-testid": dataTestId,
         onDoubleClick: onDoubleClick,
-        className: cn('text-center text-sm leading-[18px] font-semibold text-foreground overflow-hidden', backgroundColor && 'px-1.5 py-0.5 rounded-sm', 'rectangle' === shape ? 'w-full text-left whitespace-nowrap text-ellipsis' : 'break-all line-clamp-3'),
+        className: cx('text-center text-sm leading-[18px] font-semibold text-foreground overflow-hidden', backgroundColor && 'px-1.5 py-0.5 rounded-sm', 'rectangle' === shape ? 'w-full text-left whitespace-nowrap text-ellipsis' : 'wrap-break-word line-clamp-3'),
         style: backgroundColor ? {
             backgroundColor
         } : void 0,
@@ -38,7 +38,7 @@ const Header = ({ shape, backgroundColor, onDoubleClick, children, 'data-testid'
 const SubHeader = ({ shape, onDoubleClick, children, 'data-testid': dataTestId })=>/*#__PURE__*/ jsx("div", {
         "data-testid": dataTestId,
         onDoubleClick: onDoubleClick,
-        className: cn('text-center text-xs leading-[18px] text-foreground-muted break-all overflow-hidden', 'rectangle' === shape ? 'w-full text-left line-clamp-2' : 'line-clamp-5'),
+        className: cx('text-center text-xs leading-[18px] text-foreground-muted wrap-break-word overflow-hidden', 'rectangle' === shape ? 'w-full text-left line-clamp-2' : 'line-clamp-5'),
         children: children
     });
 const EditableLabel = /*#__PURE__*/ forwardRef(({ shape, backgroundColor, variant, value, placeholder, rows, onChange, onKeyDown, onBlur, 'aria-label': ariaLabel }, ref)=>/*#__PURE__*/ jsx("textarea", {
@@ -50,7 +50,7 @@ const EditableLabel = /*#__PURE__*/ forwardRef(({ shape, backgroundColor, varian
         onChange: onChange,
         onKeyDown: onKeyDown,
         onBlur: onBlur,
-        className: cn('nodrag nowheel resize-none font-[inherit] text-foreground border-none rounded-sm outline-1 outline-dashed outline-border-de-emp max-w-full', 'subtext' === variant ? 'text-xs leading-[18px] font-normal mb-0' : 'text-sm leading-[18px] font-semibold mb-0.5', 'rectangle' === shape ? 'field-sizing-fixed w-full' : 'field-sizing-content text-center', backgroundColor && 'px-1.5 py-0.5'),
+        className: cx('nodrag nowheel resize-none font-[inherit] text-foreground border-none rounded-sm outline-1 outline-dashed outline-border-de-emp max-w-full', 'subtext' === variant ? 'text-xs leading-[18px] font-normal mb-0' : 'text-sm leading-[18px] font-semibold mb-0.5', 'rectangle' === shape ? 'field-sizing-fixed w-full' : 'field-sizing-content text-center', backgroundColor && 'px-1.5 py-0.5'),
         style: backgroundColor ? {
             backgroundColor
         } : void 0

package/dist/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.cjs

@@ -60,13 +60,14 @@ const PanelContainer = styled_default().div`
   transition: opacity 0.2s ease-in-out;
   border-left: ${(props)=>props.isPinned ? '1px solid var(--canvas-border-de-emp)' : 'none'};
 `;
-function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'right-start', offset = 20, isPinned = false, useFixedPosition = false, portalToBody = false, title, header, headerActions, children, onClose, scrollKey, onMouseEnter, onMouseLeave }) {
+function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'right-start', offset = 20, fallbackPlacement, isPinned = false, useFixedPosition = false, portalToBody = false, title, header, headerActions, children, onClose, scrollKey, onMouseEnter, onMouseLeave }) {
     const { computedAnchor, floatingStyles, refs, mergedReferenceRef } = (0, external_useFloatingPosition_cjs_namespaceObject.useFloatingPosition)({
         open,
         nodeId,
         anchorRect,
         placement,
-        offset
+        offset,
+        fallbackPlacement
     });
     if (!open || !computedAnchor) return null;
     if (useFixedPosition && anchorRect) {

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

@@ -7,6 +7,7 @@ export type FloatingCanvasPanelProps = {
     anchorRect?: AnchorRect;
     placement?: Placement;
     offset?: number;
+    fallbackPlacement?: 'none' | 'start' | 'end';
     isPinned?: boolean;
     useFixedPosition?: boolean;
     portalToBody?: boolean;
@@ -19,5 +20,5 @@ export type FloatingCanvasPanelProps = {
     onMouseEnter?: () => void;
     onMouseLeave?: () => void;
 };
-export declare function FloatingCanvasPanel({ open, nodeId, anchorRect, placement, offset, isPinned, useFixedPosition, portalToBody, title, header, headerActions, children, onClose, scrollKey, onMouseEnter, onMouseLeave, }: FloatingCanvasPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function FloatingCanvasPanel({ open, nodeId, anchorRect, placement, offset, fallbackPlacement, isPinned, useFixedPosition, portalToBody, title, header, headerActions, children, onClose, scrollKey, onMouseEnter, onMouseLeave, }: FloatingCanvasPanelProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=FloatingCanvasPanel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingCanvasPanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,KAAK,UAAU,EAAuB,MAAM,uBAAuB,CAAC;AAoB7E,MAAM,MAAM,wBAAwB,GAAG;IAErC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAOnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAM3B,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,IAAW,EACX,MAAM,EACN,UAAU,EACV,SAAyB,EACzB,MAAW,EACX,QAAgB,EAChB,gBAAwB,EACxB,YAAoB,EACpB,KAAK,EACL,MAAM,EACN,aAAa,EACb,QAAQ,EACR,OAAO,EACP,SAAS,EACT,YAAY,EACZ,YAAY,GACb,EAAE,wBAAwB,kDA4I1B"}
+{"version":3,"file":"FloatingCanvasPanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,KAAK,UAAU,EAAuB,MAAM,uBAAuB,CAAC;AAoB7E,MAAM,MAAM,wBAAwB,GAAG;IAErC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAShB,iBAAiB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IAOnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAM3B,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,IAAW,EACX,MAAM,EACN,UAAU,EACV,SAAyB,EACzB,MAAW,EACX,iBAAiB,EACjB,QAAgB,EAChB,gBAAwB,EACxB,YAAoB,EACpB,KAAK,EACL,MAAM,EACN,aAAa,EACb,QAAQ,EACR,OAAO,EACP,SAAS,EACT,YAAY,EACZ,YAAY,GACb,EAAE,wBAAwB,kDA6I1B"}

package/dist/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.js

@@ -22,13 +22,14 @@ const PanelContainer = styled.div`
   transition: opacity 0.2s ease-in-out;
   border-left: ${(props)=>props.isPinned ? '1px solid var(--canvas-border-de-emp)' : 'none'};
 `;
-function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'right-start', offset = 20, isPinned = false, useFixedPosition = false, portalToBody = false, title, header, headerActions, children, onClose, scrollKey, onMouseEnter, onMouseLeave }) {
+function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'right-start', offset = 20, fallbackPlacement, isPinned = false, useFixedPosition = false, portalToBody = false, title, header, headerActions, children, onClose, scrollKey, onMouseEnter, onMouseLeave }) {
     const { computedAnchor, floatingStyles, refs, mergedReferenceRef } = useFloatingPosition({
         open,
         nodeId,
         anchorRect,
         placement,
-        offset
+        offset,
+        fallbackPlacement
     });
     if (!open || !computedAnchor) return null;
     if (useFixedPosition && anchorRect) {

package/dist/canvas/components/FloatingCanvasPanel/useFloatingPosition.cjs

@@ -29,7 +29,7 @@ __webpack_require__.d(__webpack_exports__, {
 const react_namespaceObject = require("@floating-ui/react");
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
 const external_react_namespaceObject = require("react");
-function useFloatingPosition({ open = true, nodeId, anchorRect, placement = 'right-start', offset: offsetValue = 20 }) {
+function useFloatingPosition({ open = true, nodeId, anchorRect, placement = 'right-start', offset: offsetValue = 20, fallbackPlacement = 'none' }) {
     const referenceRef = (0, external_react_namespaceObject.useRef)(null);
     const internalNode = (0, react_cjs_namespaceObject.useInternalNode)(nodeId || '');
     const computedAnchor = (0, external_react_namespaceObject.useMemo)(()=>{
@@ -56,7 +56,9 @@ function useFloatingPosition({ open = true, nodeId, anchorRect, placement = 'rig
         open: !!open && !!computedAnchor,
         middleware: [
             (0, react_namespaceObject.offset)(offsetValue),
-            (0, react_namespaceObject.flip)()
+            (0, react_namespaceObject.flip)({
+                fallbackAxisSideDirection: fallbackPlacement
+            })
         ],
         whileElementsMounted: react_namespaceObject.autoUpdate
     });

package/dist/canvas/components/FloatingCanvasPanel/useFloatingPosition.d.ts

@@ -12,6 +12,7 @@ export interface UseFloatingPositionOptions {
     anchorRect?: AnchorRect;
     placement?: Placement;
     offset?: number;
+    fallbackPlacement?: 'none' | 'start' | 'end';
 }
 export interface UseFloatingPositionReturn {
     computedAnchor: AnchorRect | null;
@@ -22,5 +23,5 @@ export interface UseFloatingPositionReturn {
     };
     mergedReferenceRef: ((instance: Element | null) => void) | null;
 }
-export declare function useFloatingPosition({ open, nodeId, anchorRect, placement, offset: offsetValue, }: UseFloatingPositionOptions): UseFloatingPositionReturn;
+export declare function useFloatingPosition({ open, nodeId, anchorRect, placement, offset: offsetValue, fallbackPlacement, }: UseFloatingPositionOptions): UseFloatingPositionReturn;
 //# sourceMappingURL=useFloatingPosition.d.ts.map

package/dist/canvas/components/FloatingCanvasPanel/useFloatingPosition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFloatingPosition.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/useFloatingPosition.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EAGf,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,WAAW,EAA8B,MAAM,OAAO,CAAC;AAEzF,MAAM,MAAM,UAAU,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAEjF,MAAM,WAAW,0BAA0B;IACzC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,yBAAyB;IACxC,cAAc,EAAE,UAAU,GAAG,IAAI,CAAC;IAClC,cAAc,EAAE,aAAa,CAAC;IAC9B,IAAI,EAAE;QACJ,YAAY,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;QACnC,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;KACvC,CAAC;IACF,kBAAkB,EAAE,CAAC,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;CACjE;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAW,EACX,MAAM,EACN,UAAU,EACV,SAAyB,EACzB,MAAM,EAAE,WAAgB,GACzB,EAAE,0BAA0B,GAAG,yBAAyB,CA8CxD"}
+{"version":3,"file":"useFloatingPosition.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/useFloatingPosition.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EAGf,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,WAAW,EAA8B,MAAM,OAAO,CAAC;AAEzF,MAAM,MAAM,UAAU,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAEjF,MAAM,WAAW,0BAA0B;IACzC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iBAAiB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;CAC9C;AAED,MAAM,WAAW,yBAAyB;IACxC,cAAc,EAAE,UAAU,GAAG,IAAI,CAAC;IAClC,cAAc,EAAE,aAAa,CAAC;IAC9B,IAAI,EAAE;QACJ,YAAY,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;QACnC,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;KACvC,CAAC;IACF,kBAAkB,EAAE,CAAC,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;CACjE;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAW,EACX,MAAM,EACN,UAAU,EACV,SAAyB,EACzB,MAAM,EAAE,WAAgB,EACxB,iBAA0B,GAC3B,EAAE,0BAA0B,GAAG,yBAAyB,CA8CxD"}

package/dist/canvas/components/FloatingCanvasPanel/useFloatingPosition.js

@@ -1,7 +1,7 @@
 import { autoUpdate, flip, offset, useFloating, useMergeRefs } from "@floating-ui/react";
 import { useInternalNode } from "../../xyflow/react.js";
 import { useEffect, useMemo, useRef } from "react";
-function useFloatingPosition({ open = true, nodeId, anchorRect, placement = 'right-start', offset: offsetValue = 20 }) {
+function useFloatingPosition({ open = true, nodeId, anchorRect, placement = 'right-start', offset: offsetValue = 20, fallbackPlacement = 'none' }) {
     const referenceRef = useRef(null);
     const internalNode = useInternalNode(nodeId || '');
     const computedAnchor = useMemo(()=>{
@@ -28,7 +28,9 @@ function useFloatingPosition({ open = true, nodeId, anchorRect, placement = 'rig
         open: !!open && !!computedAnchor,
         middleware: [
             offset(offsetValue),
-            flip()
+            flip({
+                fallbackAxisSideDirection: fallbackPlacement
+            })
         ],
         whileElementsMounted: autoUpdate
     });