@uipath/apollo-react 4.8.0 → 4.9.0

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

@@ -1,14 +1,5 @@
 "use strict";
 var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.n = (module)=>{
-        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
-        __webpack_require__.d(getter, {
-            a: getter
-        });
-        return getter;
-    };
-})();
 (()=>{
     __webpack_require__.d = (exports1, definition)=>{
         for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
@@ -36,49 +27,53 @@ __webpack_require__.d(__webpack_exports__, {
     AddNodePreview: ()=>AddNodePreview
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const styled_namespaceObject = require("@emotion/styled");
-var styled_default = /*#__PURE__*/ __webpack_require__.n(styled_namespaceObject);
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
+const external_react_namespaceObject = require("react");
 const external_constants_cjs_namespaceObject = require("../../constants.cjs");
 const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
-const PreviewContainer = styled_default().div`
-  width: ${(props)=>props.width ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE}px;
-  height: ${(props)=>props.height ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE}px;
-  border-radius: 16px;
-  background: var(--canvas-background-secondary);
-  border: 2px dashed
-    ${(props)=>props.selected ? 'var(--canvas-selection-indicator)' : 'var(--canvas-border-de-emp)'};
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  justify-content: center;
-  opacity: ${(props)=>props.selected ? 0.8 : 0.6};
-`;
-const getIcon = (iconName)=>{
-    if (iconName) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
-        icon: iconName,
-        size: 40,
-        color: "var(--canvas-foreground-de-emp)"
-    });
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
-        icon: "ellipsis",
-        size: 40,
-        color: "var(--canvas-foreground-de-emp)"
-    });
-};
+const BaseNodeInnerShape_cjs_namespaceObject = require("../BaseNode/BaseNodeInnerShape.cjs");
 const AddNodePreview = ({ selected, data, width, height })=>{
     const nodeData = data;
-    const icon = getIcon(nodeData?.iconName);
+    const icon = (0, external_react_namespaceObject.useMemo)(()=>{
+        const IconComponent = (0, icon_registry_cjs_namespaceObject.getIcon)(nodeData?.iconName ?? 'square-dashed');
+        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(IconComponent, {});
+    }, [
+        nodeData?.iconName
+    ]);
     const inputPosition = nodeData?.inputHandlePosition ?? react_cjs_namespaceObject.Position.Left;
     const outputPosition = nodeData?.outputHandlePosition ?? react_cjs_namespaceObject.Position.Right;
+    const containerWidth = width ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE;
+    const containerHeight = height ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE;
+    const containerStyle = (0, external_react_namespaceObject.useMemo)(()=>{
+        const basis = Math.min(containerWidth, containerHeight);
+        const gap = basis * (1 - external_constants_cjs_namespaceObject.NODE_INNER_SHAPE_RATIO);
+        const innerW = containerWidth - gap;
+        const innerH = containerHeight - gap;
+        return {
+            '--node-w': `${containerWidth}px`,
+            '--node-h': `${containerHeight}px`,
+            '--node-radius': `${basis * external_constants_cjs_namespaceObject.NODE_CONTAINER_RADIUS_RATIO}px`,
+            '--inner-w': `${innerW}px`,
+            '--inner-h': `${innerH}px`,
+            '--inner-radius': `${basis * external_constants_cjs_namespaceObject.NODE_INNER_RADIUS_RATIO}px`,
+            '--icon-size': `${basis * external_constants_cjs_namespaceObject.NODE_INNER_ICON_RATIO}px`,
+            borderColor: selected ? 'var(--canvas-selection-indicator)' : 'var(--canvas-border-de-emp)',
+            opacity: selected ? 0.8 : 0.6,
+            strokeWidth: 1.5
+        };
+    }, [
+        containerWidth,
+        containerHeight,
+        selected
+    ]);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(PreviewContainer, {
-                selected: selected,
-                width: width,
-                height: height,
-                children: icon
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: " relative flex flex-col items-center justify-center bg-surface-overlay w-(--node-w) h-(--node-h) rounded-(--node-radius) border border-dashed ",
+                style: containerStyle,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(BaseNodeInnerShape_cjs_namespaceObject.BaseInnerShape, {
+                    children: icon
+                })
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.Handle, {
                 type: "target",

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

@@ -1 +1 @@
-{"version":3,"file":"AddNodePreview.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodePreview.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAC1E,OAAO,EAAU,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqB/B,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB,CAAC,EAAE,QAAQ,CAAC;IAC/B,oBAAoB,CAAC,EAAE,QAAQ,CAAC;CACjC;AAUD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAsC9C,CAAC"}
+{"version":3,"file":"AddNodePreview.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodePreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAC1E,OAAO,EAAU,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB,CAAC,EAAE,QAAQ,CAAC;IAC/B,oBAAoB,CAAC,EAAE,QAAQ,CAAC;CACjC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAwE9C,CAAC"}

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

@@ -1,46 +1,51 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import styled from "@emotion/styled";
 import { Handle, Position } from "../../xyflow/react.js";
-import { DEFAULT_NODE_SIZE } from "../../constants.js";
-import { CanvasIcon } from "../../utils/icon-registry.js";
-const PreviewContainer = styled.div`
-  width: ${(props)=>props.width ?? DEFAULT_NODE_SIZE}px;
-  height: ${(props)=>props.height ?? DEFAULT_NODE_SIZE}px;
-  border-radius: 16px;
-  background: var(--canvas-background-secondary);
-  border: 2px dashed
-    ${(props)=>props.selected ? 'var(--canvas-selection-indicator)' : 'var(--canvas-border-de-emp)'};
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  justify-content: center;
-  opacity: ${(props)=>props.selected ? 0.8 : 0.6};
-`;
-const getIcon = (iconName)=>{
-    if (iconName) return /*#__PURE__*/ jsx(CanvasIcon, {
-        icon: iconName,
-        size: 40,
-        color: "var(--canvas-foreground-de-emp)"
-    });
-    return /*#__PURE__*/ jsx(CanvasIcon, {
-        icon: "ellipsis",
-        size: 40,
-        color: "var(--canvas-foreground-de-emp)"
-    });
-};
+import { useMemo } from "react";
+import { DEFAULT_NODE_SIZE, NODE_CONTAINER_RADIUS_RATIO, NODE_INNER_ICON_RATIO, NODE_INNER_RADIUS_RATIO, NODE_INNER_SHAPE_RATIO } from "../../constants.js";
+import { getIcon } from "../../utils/icon-registry.js";
+import { BaseInnerShape } from "../BaseNode/BaseNodeInnerShape.js";
 const AddNodePreview = ({ selected, data, width, height })=>{
     const nodeData = data;
-    const icon = getIcon(nodeData?.iconName);
+    const icon = useMemo(()=>{
+        const IconComponent = getIcon(nodeData?.iconName ?? 'square-dashed');
+        return /*#__PURE__*/ jsx(IconComponent, {});
+    }, [
+        nodeData?.iconName
+    ]);
     const inputPosition = nodeData?.inputHandlePosition ?? Position.Left;
     const outputPosition = nodeData?.outputHandlePosition ?? Position.Right;
+    const containerWidth = width ?? DEFAULT_NODE_SIZE;
+    const containerHeight = height ?? DEFAULT_NODE_SIZE;
+    const containerStyle = useMemo(()=>{
+        const basis = Math.min(containerWidth, containerHeight);
+        const gap = basis * (1 - NODE_INNER_SHAPE_RATIO);
+        const innerW = containerWidth - gap;
+        const innerH = containerHeight - gap;
+        return {
+            '--node-w': `${containerWidth}px`,
+            '--node-h': `${containerHeight}px`,
+            '--node-radius': `${basis * NODE_CONTAINER_RADIUS_RATIO}px`,
+            '--inner-w': `${innerW}px`,
+            '--inner-h': `${innerH}px`,
+            '--inner-radius': `${basis * NODE_INNER_RADIUS_RATIO}px`,
+            '--icon-size': `${basis * NODE_INNER_ICON_RATIO}px`,
+            borderColor: selected ? 'var(--canvas-selection-indicator)' : 'var(--canvas-border-de-emp)',
+            opacity: selected ? 0.8 : 0.6,
+            strokeWidth: 1.5
+        };
+    }, [
+        containerWidth,
+        containerHeight,
+        selected
+    ]);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            /*#__PURE__*/ jsx(PreviewContainer, {
-                selected: selected,
-                width: width,
-                height: height,
-                children: icon
+            /*#__PURE__*/ jsx("div", {
+                className: " relative flex flex-col items-center justify-center bg-surface-overlay w-(--node-w) h-(--node-h) rounded-(--node-radius) border border-dashed ",
+                style: containerStyle,
+                children: /*#__PURE__*/ jsx(BaseInnerShape, {
+                    children: icon
+                })
             }),
             /*#__PURE__*/ jsx(Handle, {
                 type: "target",

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

@@ -14,11 +14,11 @@ export declare const agentFlowManifest: {
         id: string;
         name: string;
         sortOrder: number;
-        color: string;
-        colorDark: string;
         icon: string;
         tags: string[];
         parentId?: string | undefined;
+        color?: string | undefined;
+        colorDark?: string | undefined;
     }[];
     nodes: {
         nodeType: string;

package/dist/canvas/components/BaseCanvas/CanvasBackground.cjs

@@ -30,6 +30,7 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
 const external_BaseCanvas_constants_cjs_namespaceObject = require("./BaseCanvas.constants.cjs");
 const CanvasBackground = ({ color = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.background.color, bgColor = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.background.bgColor, variant = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.background.variant, gap = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.background.gap, size = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.background.size })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.Background, {
+        className: "apollo-canvas-background",
         color: color,
         bgColor: bgColor,
         variant: variant,

package/dist/canvas/components/BaseCanvas/CanvasBackground.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasBackground.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseCanvas/CanvasBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,iBAAiB,EAAE,MAAM,0CAA0C,CAAC;AAG9F,UAAU,qBAAqB;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAiB5D,CAAC"}
+{"version":3,"file":"CanvasBackground.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseCanvas/CanvasBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,iBAAiB,EAAE,MAAM,0CAA0C,CAAC;AAG9F,UAAU,qBAAqB;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAkB5D,CAAC"}

package/dist/canvas/components/BaseCanvas/CanvasBackground.js

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { Background } from "../../xyflow/react.js";
 import { BASE_CANVAS_DEFAULTS } from "./BaseCanvas.constants.js";
 const CanvasBackground = ({ color = BASE_CANVAS_DEFAULTS.background.color, bgColor = BASE_CANVAS_DEFAULTS.background.bgColor, variant = BASE_CANVAS_DEFAULTS.background.variant, gap = BASE_CANVAS_DEFAULTS.background.gap, size = BASE_CANVAS_DEFAULTS.background.size })=>/*#__PURE__*/ jsx(Background, {
+        className: "apollo-canvas-background",
         color: color,
         bgColor: bgColor,
         variant: variant,

package/dist/canvas/schema/node-definition/category-manifest.cjs

@@ -32,8 +32,8 @@ const categoryManifestSchema = external_zod_namespaceObject.z.object({
     name: external_zod_namespaceObject.z.string().min(1),
     parentId: external_zod_namespaceObject.z.string().optional(),
     sortOrder: external_zod_namespaceObject.z.number().int().nonnegative(),
-    color: external_zod_namespaceObject.z.string().min(1),
-    colorDark: external_zod_namespaceObject.z.string().min(1),
+    color: external_zod_namespaceObject.z.string().min(1).optional(),
+    colorDark: external_zod_namespaceObject.z.string().min(1).optional(),
     icon: external_zod_namespaceObject.z.string().min(1),
     tags: external_zod_namespaceObject.z.array(external_zod_namespaceObject.z.string())
 });

package/dist/canvas/schema/node-definition/category-manifest.d.ts

@@ -4,8 +4,8 @@ export declare const categoryManifestSchema: z.ZodObject<{
     name: z.ZodString;
     parentId: z.ZodOptional<z.ZodString>;
     sortOrder: z.ZodNumber;
-    color: z.ZodString;
-    colorDark: z.ZodString;
+    color: z.ZodOptional<z.ZodString>;
+    colorDark: z.ZodOptional<z.ZodString>;
     icon: z.ZodString;
     tags: z.ZodArray<z.ZodString>;
 }, z.core.$strip>;

package/dist/canvas/schema/node-definition/category-manifest.js

@@ -4,8 +4,8 @@ const categoryManifestSchema = z.object({
     name: z.string().min(1),
     parentId: z.string().optional(),
     sortOrder: z.number().int().nonnegative(),
-    color: z.string().min(1),
-    colorDark: z.string().min(1),
+    color: z.string().min(1).optional(),
+    colorDark: z.string().min(1).optional(),
     icon: z.string().min(1),
     tags: z.array(z.string())
 });

package/dist/canvas/storybook-utils/manifests/index.d.ts

@@ -6,11 +6,11 @@ export declare const defaultWorkflowManifest: {
         id: string;
         name: string;
         sortOrder: number;
-        color: string;
-        colorDark: string;
         icon: string;
         tags: string[];
         parentId?: string | undefined;
+        color?: string | undefined;
+        colorDark?: string | undefined;
     }[];
     nodes: {
         nodeType: string;

package/dist/canvas/styles/reactflow-reset.css

@@ -10,3 +10,11 @@
   padding: 0 !important;
 }
 
+.future-dark .apollo-canvas-background {
+  background-image: linear-gradient(135deg, var(--canvas-background-overlay, var(--surface-overlay)) 0%, var(--canvas-background, var(--surface)) 100%);
+}
+
+.future-light .apollo-canvas-background {
+  background-image: linear-gradient(135deg, var(--canvas-background, var(--surface)) 0%, var(--canvas-background-overlay, var(--surface-overlay)) 100%);
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-react",
-  "version": "4.8.0",
+  "version": "4.9.0",
   "description": "Apollo Design System - React component library with Material UI theming",
   "repository": {
     "type": "git",