@uipath/apollo-react 4.8.1 → 4.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/canvas/components/AddNodePanel/AddNodePreview.cjs +38 -43
  2. package/dist/canvas/components/AddNodePanel/AddNodePreview.d.ts.map +1 -1
  3. package/dist/canvas/components/AddNodePanel/AddNodePreview.js +40 -35
  4. package/dist/canvas/components/BaseCanvas/CanvasBackground.cjs +1 -0
  5. package/dist/canvas/components/BaseCanvas/CanvasBackground.d.ts.map +1 -1
  6. package/dist/canvas/components/BaseCanvas/CanvasBackground.js +1 -0
  7. package/dist/canvas/styles/reactflow-reset.css +8 -0
  8. package/package.json +1 -1
package/dist/canvas/components/AddNodePanel/AddNodePreview.cjs CHANGED
@@ -1,14 +1,5 @@
1
1
  "use strict";
2
2
  var __webpack_require__ = {};
3
- (()=>{
4
- __webpack_require__.n = (module)=>{
5
- var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
6
- __webpack_require__.d(getter, {
7
- a: getter
8
- });
9
- return getter;
10
- };
11
- })();
12
3
  (()=>{
13
4
  __webpack_require__.d = (exports1, definition)=>{
14
5
  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__, {
36
27
  AddNodePreview: ()=>AddNodePreview
37
28
  });
38
29
  const jsx_runtime_namespaceObject = require("react/jsx-runtime");
39
- const styled_namespaceObject = require("@emotion/styled");
40
- var styled_default = /*#__PURE__*/ __webpack_require__.n(styled_namespaceObject);
41
30
  const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
31
+ const external_react_namespaceObject = require("react");
42
32
  const external_constants_cjs_namespaceObject = require("../../constants.cjs");
43
33
  const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
44
- const PreviewContainer = styled_default().div`
45
- width: ${(props)=>props.width ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE}px;
46
- height: ${(props)=>props.height ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE}px;
47
- border-radius: 16px;
48
- background: var(--canvas-background-secondary);
49
- border: 2px dashed
50
- ${(props)=>props.selected ? 'var(--canvas-selection-indicator)' : 'var(--canvas-border-de-emp)'};
51
- display: flex;
52
- flex-direction: column;
53
- align-items: center;
54
- text-align: center;
55
- justify-content: center;
56
- opacity: ${(props)=>props.selected ? 0.8 : 0.6};
57
- `;
58
- const getIcon = (iconName)=>{
59
- if (iconName) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
60
- icon: iconName,
61
- size: 40,
62
- color: "var(--canvas-foreground-de-emp)"
63
- });
64
- return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
65
- icon: "ellipsis",
66
- size: 40,
67
- color: "var(--canvas-foreground-de-emp)"
68
- });
69
- };
34
+ const BaseNodeInnerShape_cjs_namespaceObject = require("../BaseNode/BaseNodeInnerShape.cjs");
70
35
  const AddNodePreview = ({ selected, data, width, height })=>{
71
36
  const nodeData = data;
72
- const icon = getIcon(nodeData?.iconName);
37
+ const icon = (0, external_react_namespaceObject.useMemo)(()=>{
38
+ const IconComponent = (0, icon_registry_cjs_namespaceObject.getIcon)(nodeData?.iconName ?? 'square-dashed');
39
+ return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(IconComponent, {});
40
+ }, [
41
+ nodeData?.iconName
42
+ ]);
73
43
  const inputPosition = nodeData?.inputHandlePosition ?? react_cjs_namespaceObject.Position.Left;
74
44
  const outputPosition = nodeData?.outputHandlePosition ?? react_cjs_namespaceObject.Position.Right;
45
+ const containerWidth = width ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE;
46
+ const containerHeight = height ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE;
47
+ const containerStyle = (0, external_react_namespaceObject.useMemo)(()=>{
48
+ const basis = Math.min(containerWidth, containerHeight);
49
+ const gap = basis * (1 - external_constants_cjs_namespaceObject.NODE_INNER_SHAPE_RATIO);
50
+ const innerW = containerWidth - gap;
51
+ const innerH = containerHeight - gap;
52
+ return {
53
+ '--node-w': `${containerWidth}px`,
54
+ '--node-h': `${containerHeight}px`,
55
+ '--node-radius': `${basis * external_constants_cjs_namespaceObject.NODE_CONTAINER_RADIUS_RATIO}px`,
56
+ '--inner-w': `${innerW}px`,
57
+ '--inner-h': `${innerH}px`,
58
+ '--inner-radius': `${basis * external_constants_cjs_namespaceObject.NODE_INNER_RADIUS_RATIO}px`,
59
+ '--icon-size': `${basis * external_constants_cjs_namespaceObject.NODE_INNER_ICON_RATIO}px`,
60
+ borderColor: selected ? 'var(--canvas-selection-indicator)' : 'var(--canvas-border-de-emp)',
61
+ opacity: selected ? 0.8 : 0.6,
62
+ strokeWidth: 1.5
63
+ };
64
+ }, [
65
+ containerWidth,
66
+ containerHeight,
67
+ selected
68
+ ]);
75
69
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
76
70
  children: [
77
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(PreviewContainer, {
78
- selected: selected,
79
- width: width,
80
- height: height,
81
- children: icon
71
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
72
+ className: " relative flex flex-col items-center justify-center bg-surface-overlay w-(--node-w) h-(--node-h) rounded-(--node-radius) border border-dashed ",
73
+ style: containerStyle,
74
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(BaseNodeInnerShape_cjs_namespaceObject.BaseInnerShape, {
75
+ children: icon
76
+ })
82
77
  }),
83
78
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.Handle, {
84
79
  type: "target",
package/dist/canvas/components/AddNodePanel/AddNodePreview.d.ts.map CHANGED
@@ -1 +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"}
1
+ {"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 CHANGED
@@ -1,46 +1,51 @@
1
1
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
- import styled from "@emotion/styled";
3
2
  import { Handle, Position } from "../../xyflow/react.js";
4
- import { DEFAULT_NODE_SIZE } from "../../constants.js";
5
- import { CanvasIcon } from "../../utils/icon-registry.js";
6
- const PreviewContainer = styled.div`
7
- width: ${(props)=>props.width ?? DEFAULT_NODE_SIZE}px;
8
- height: ${(props)=>props.height ?? DEFAULT_NODE_SIZE}px;
9
- border-radius: 16px;
10
- background: var(--canvas-background-secondary);
11
- border: 2px dashed
12
- ${(props)=>props.selected ? 'var(--canvas-selection-indicator)' : 'var(--canvas-border-de-emp)'};
13
- display: flex;
14
- flex-direction: column;
15
- align-items: center;
16
- text-align: center;
17
- justify-content: center;
18
- opacity: ${(props)=>props.selected ? 0.8 : 0.6};
19
- `;
20
- const getIcon = (iconName)=>{
21
- if (iconName) return /*#__PURE__*/ jsx(CanvasIcon, {
22
- icon: iconName,
23
- size: 40,
24
- color: "var(--canvas-foreground-de-emp)"
25
- });
26
- return /*#__PURE__*/ jsx(CanvasIcon, {
27
- icon: "ellipsis",
28
- size: 40,
29
- color: "var(--canvas-foreground-de-emp)"
30
- });
31
- };
3
+ import { useMemo } from "react";
4
+ import { DEFAULT_NODE_SIZE, NODE_CONTAINER_RADIUS_RATIO, NODE_INNER_ICON_RATIO, NODE_INNER_RADIUS_RATIO, NODE_INNER_SHAPE_RATIO } from "../../constants.js";
5
+ import { getIcon } from "../../utils/icon-registry.js";
6
+ import { BaseInnerShape } from "../BaseNode/BaseNodeInnerShape.js";
32
7
  const AddNodePreview = ({ selected, data, width, height })=>{
33
8
  const nodeData = data;
34
- const icon = getIcon(nodeData?.iconName);
9
+ const icon = useMemo(()=>{
10
+ const IconComponent = getIcon(nodeData?.iconName ?? 'square-dashed');
11
+ return /*#__PURE__*/ jsx(IconComponent, {});
12
+ }, [
13
+ nodeData?.iconName
14
+ ]);
35
15
  const inputPosition = nodeData?.inputHandlePosition ?? Position.Left;
36
16
  const outputPosition = nodeData?.outputHandlePosition ?? Position.Right;
17
+ const containerWidth = width ?? DEFAULT_NODE_SIZE;
18
+ const containerHeight = height ?? DEFAULT_NODE_SIZE;
19
+ const containerStyle = useMemo(()=>{
20
+ const basis = Math.min(containerWidth, containerHeight);
21
+ const gap = basis * (1 - NODE_INNER_SHAPE_RATIO);
22
+ const innerW = containerWidth - gap;
23
+ const innerH = containerHeight - gap;
24
+ return {
25
+ '--node-w': `${containerWidth}px`,
26
+ '--node-h': `${containerHeight}px`,
27
+ '--node-radius': `${basis * NODE_CONTAINER_RADIUS_RATIO}px`,
28
+ '--inner-w': `${innerW}px`,
29
+ '--inner-h': `${innerH}px`,
30
+ '--inner-radius': `${basis * NODE_INNER_RADIUS_RATIO}px`,
31
+ '--icon-size': `${basis * NODE_INNER_ICON_RATIO}px`,
32
+ borderColor: selected ? 'var(--canvas-selection-indicator)' : 'var(--canvas-border-de-emp)',
33
+ opacity: selected ? 0.8 : 0.6,
34
+ strokeWidth: 1.5
35
+ };
36
+ }, [
37
+ containerWidth,
38
+ containerHeight,
39
+ selected
40
+ ]);
37
41
  return /*#__PURE__*/ jsxs(Fragment, {
38
42
  children: [
39
- /*#__PURE__*/ jsx(PreviewContainer, {
40
- selected: selected,
41
- width: width,
42
- height: height,
43
- children: icon
43
+ /*#__PURE__*/ jsx("div", {
44
+ className: " relative flex flex-col items-center justify-center bg-surface-overlay w-(--node-w) h-(--node-h) rounded-(--node-radius) border border-dashed ",
45
+ style: containerStyle,
46
+ children: /*#__PURE__*/ jsx(BaseInnerShape, {
47
+ children: icon
48
+ })
44
49
  }),
45
50
  /*#__PURE__*/ jsx(Handle, {
46
51
  type: "target",
package/dist/canvas/components/BaseCanvas/CanvasBackground.cjs CHANGED
@@ -30,6 +30,7 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
30
30
  const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
31
31
  const external_BaseCanvas_constants_cjs_namespaceObject = require("./BaseCanvas.constants.cjs");
32
32
  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, {
33
+ className: "apollo-canvas-background",
33
34
  color: color,
34
35
  bgColor: bgColor,
35
36
  variant: variant,
package/dist/canvas/components/BaseCanvas/CanvasBackground.d.ts.map CHANGED
@@ -1 +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"}
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,CAkB5D,CAAC"}
package/dist/canvas/components/BaseCanvas/CanvasBackground.js CHANGED
@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
2
2
  import { Background } from "../../xyflow/react.js";
3
3
  import { BASE_CANVAS_DEFAULTS } from "./BaseCanvas.constants.js";
4
4
  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, {
5
+ className: "apollo-canvas-background",
5
6
  color: color,
6
7
  bgColor: bgColor,
7
8
  variant: variant,
package/dist/canvas/styles/reactflow-reset.css CHANGED
@@ -10,3 +10,11 @@
10
10
  padding: 0 !important;
11
11
  }
12
12
 
13
+ .future-dark .apollo-canvas-background {
14
+ background-image: linear-gradient(135deg, var(--canvas-background-overlay, var(--surface-overlay)) 0%, var(--canvas-background, var(--surface)) 100%);
15
+ }
16
+
17
+ .future-light .apollo-canvas-background {
18
+ background-image: linear-gradient(135deg, var(--canvas-background, var(--surface)) 0%, var(--canvas-background-overlay, var(--surface-overlay)) 100%);
19
+ }
20
+
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uipath/apollo-react",
3
- "version": "4.8.1",
3
+ "version": "4.9.0",
4
4
  "description": "Apollo Design System - React component library with Material UI theming",
5
5
  "repository": {
6
6
  "type": "git",