@uipath/apollo-react 3.53.0 → 3.54.0-pr354.0df89c3

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 (46) hide show
  1. package/dist/canvas/components/AddNodePanel/AddNodePanel.cjs +21 -8
  2. package/dist/canvas/components/AddNodePanel/AddNodePanel.d.ts.map +1 -1
  3. package/dist/canvas/components/AddNodePanel/AddNodePanel.js +11 -8
  4. package/dist/canvas/components/BaseNode/BaseNode.styles.cjs +4 -52
  5. package/dist/canvas/components/BaseNode/BaseNode.styles.d.ts.map +1 -1
  6. package/dist/canvas/components/BaseNode/BaseNode.styles.js +2 -50
  7. package/dist/canvas/components/GroupNode/GroupNode.cjs +147 -75
  8. package/dist/canvas/components/GroupNode/GroupNode.d.ts.map +1 -1
  9. package/dist/canvas/components/GroupNode/GroupNode.js +147 -75
  10. package/dist/canvas/components/GroupNode/GroupNode.stories.cjs +610 -13
  11. package/dist/canvas/components/GroupNode/GroupNode.stories.d.ts +5 -0
  12. package/dist/canvas/components/GroupNode/GroupNode.stories.d.ts.map +1 -1
  13. package/dist/canvas/components/GroupNode/GroupNode.stories.js +589 -7
  14. package/dist/canvas/components/GroupNode/GroupNode.styles.cjs +6 -2
  15. package/dist/canvas/components/GroupNode/GroupNode.styles.d.ts +1 -0
  16. package/dist/canvas/components/GroupNode/GroupNode.styles.d.ts.map +1 -1
  17. package/dist/canvas/components/GroupNode/GroupNode.styles.js +6 -2
  18. package/dist/canvas/components/GroupNode/GroupNode.types.d.ts +1 -0
  19. package/dist/canvas/components/GroupNode/GroupNode.types.d.ts.map +1 -1
  20. package/dist/canvas/components/GroupNode/GroupNodeConfigContext.cjs +45 -0
  21. package/dist/canvas/components/GroupNode/GroupNodeConfigContext.d.ts +11 -0
  22. package/dist/canvas/components/GroupNode/GroupNodeConfigContext.d.ts.map +1 -0
  23. package/dist/canvas/components/GroupNode/GroupNodeConfigContext.js +8 -0
  24. package/dist/canvas/components/GroupNode/index.cjs +9 -2
  25. package/dist/canvas/components/GroupNode/index.d.ts +2 -0
  26. package/dist/canvas/components/GroupNode/index.d.ts.map +1 -1
  27. package/dist/canvas/components/GroupNode/index.js +2 -1
  28. package/dist/canvas/components/Toolbox/ListView.cjs +54 -34
  29. package/dist/canvas/components/Toolbox/ListView.d.ts +12 -2
  30. package/dist/canvas/components/Toolbox/ListView.d.ts.map +1 -1
  31. package/dist/canvas/components/Toolbox/ListView.js +51 -34
  32. package/dist/canvas/components/Toolbox/ListView.styles.cjs +7 -1
  33. package/dist/canvas/components/Toolbox/ListView.styles.d.ts.map +1 -1
  34. package/dist/canvas/components/Toolbox/ListView.styles.js +7 -1
  35. package/dist/canvas/components/Toolbox/SearchBox.cjs +12 -4
  36. package/dist/canvas/components/Toolbox/SearchBox.d.ts +3 -0
  37. package/dist/canvas/components/Toolbox/SearchBox.d.ts.map +1 -1
  38. package/dist/canvas/components/Toolbox/SearchBox.js +12 -4
  39. package/dist/canvas/components/Toolbox/Toolbox.cjs +140 -4
  40. package/dist/canvas/components/Toolbox/Toolbox.d.ts.map +1 -1
  41. package/dist/canvas/components/Toolbox/Toolbox.js +140 -4
  42. package/dist/canvas/styles/execution-status.cjs +88 -0
  43. package/dist/canvas/styles/execution-status.d.ts +8 -0
  44. package/dist/canvas/styles/execution-status.d.ts.map +1 -0
  45. package/dist/canvas/styles/execution-status.js +51 -0
  46. package/package.json +2 -2
package/dist/canvas/components/GroupNode/GroupNode.js CHANGED
@@ -4,87 +4,148 @@ import { ApIcon } from "../../../material/components/index.js";
4
4
  import { memo, useCallback } from "react";
5
5
  import { GRID_SPACING } from "../../constants.js";
6
6
  import { BottomCornerIndicators, GroupContainer, GroupContent, GroupControls, GroupHeader, GroupHeaderButton, GroupHeaderSeparator, GroupIconWrapper, GroupTitle, ResizeHandle, TopCornerIndicators } from "./GroupNode.styles.js";
7
+ import { useGroupNodeConfig } from "./GroupNodeConfigContext.js";
7
8
  const minWidth = 12 * GRID_SPACING;
8
9
  const minHeight = 12 * GRID_SPACING;
10
+ const COLLAPSED_HEADER_HEIGHT = 64;
9
11
  const GroupNodeComponent = ({ id, data, selected })=>{
10
- const { updateNodeData } = useReactFlow();
12
+ const { setNodes, setEdges, getNodes } = useReactFlow();
13
+ const { headerActions, executionStatus, onMoreOptions, hideMoreOptions, hideCollapseButton } = useGroupNodeConfig();
11
14
  const title = data.title || 'Group';
12
- const iconName = data.iconName || 'folder';
15
+ const iconName = data.iconName;
13
16
  const backgroundColor = data.backgroundColor;
14
17
  const borderColor = data.borderColor;
15
18
  const collapsed = data.collapsed || false;
16
19
  const handleToggleCollapse = useCallback(()=>{
17
- updateNodeData(id, {
18
- collapsed: !collapsed
19
- });
20
+ const willCollapse = !collapsed;
21
+ const childNodeIds = new Set(getNodes().filter((n)=>n.parentId === id).map((n)=>n.id));
22
+ if (willCollapse) setNodes((nodes)=>nodes.map((node)=>{
23
+ if (node.id === id) {
24
+ const styleHeight = node.style?.height;
25
+ const parsedStyleHeight = 'number' == typeof styleHeight ? styleHeight : 'string' == typeof styleHeight ? parseFloat(styleHeight) || void 0 : void 0;
26
+ const currentHeight = node.height ?? node.measured?.height ?? parsedStyleHeight ?? minHeight;
27
+ return {
28
+ ...node,
29
+ height: COLLAPSED_HEADER_HEIGHT,
30
+ style: {
31
+ ...node.style,
32
+ height: COLLAPSED_HEADER_HEIGHT
33
+ },
34
+ data: {
35
+ ...node.data,
36
+ collapsed: true,
37
+ expandedHeight: currentHeight
38
+ }
39
+ };
40
+ }
41
+ if (childNodeIds.has(node.id)) return {
42
+ ...node,
43
+ hidden: true
44
+ };
45
+ return node;
46
+ }));
47
+ else {
48
+ const expandedHeight = data.expandedHeight ?? minHeight;
49
+ setNodes((nodes)=>nodes.map((node)=>{
50
+ if (node.id === id) return {
51
+ ...node,
52
+ height: expandedHeight,
53
+ style: {
54
+ ...node.style,
55
+ height: expandedHeight
56
+ },
57
+ data: {
58
+ ...node.data,
59
+ collapsed: false
60
+ }
61
+ };
62
+ if (childNodeIds.has(node.id)) return {
63
+ ...node,
64
+ hidden: false
65
+ };
66
+ return node;
67
+ }));
68
+ }
69
+ setEdges((edges)=>edges.map((edge)=>childNodeIds.has(edge.source) || childNodeIds.has(edge.target) ? {
70
+ ...edge,
71
+ hidden: willCollapse
72
+ } : edge));
20
73
  }, [
21
74
  id,
22
75
  collapsed,
23
- updateNodeData
76
+ data.expandedHeight,
77
+ getNodes,
78
+ setNodes,
79
+ setEdges
24
80
  ]);
25
81
  return /*#__PURE__*/ jsxs(Fragment, {
26
82
  children: [
27
- /*#__PURE__*/ jsx(NodeResizeControl, {
28
- style: {
29
- background: 'transparent',
30
- border: 'none',
31
- zIndex: 100
32
- },
33
- position: "top-left",
34
- minWidth: minWidth,
35
- minHeight: minHeight,
36
- children: /*#__PURE__*/ jsx(ResizeHandle, {
37
- selected: selected,
38
- cursor: "nwse-resize"
39
- })
40
- }),
41
- /*#__PURE__*/ jsx(NodeResizeControl, {
42
- style: {
43
- background: 'transparent',
44
- border: 'none',
45
- zIndex: 100
46
- },
47
- position: "top-right",
48
- minWidth: minWidth,
49
- minHeight: minHeight,
50
- children: /*#__PURE__*/ jsx(ResizeHandle, {
51
- selected: selected,
52
- cursor: "nesw-resize"
53
- })
54
- }),
55
- /*#__PURE__*/ jsx(NodeResizeControl, {
56
- style: {
57
- background: 'transparent',
58
- border: 'none',
59
- zIndex: 100
60
- },
61
- position: "bottom-left",
62
- minWidth: minWidth,
63
- minHeight: minHeight,
64
- children: /*#__PURE__*/ jsx(ResizeHandle, {
65
- selected: selected,
66
- cursor: "nesw-resize"
67
- })
68
- }),
69
- /*#__PURE__*/ jsx(NodeResizeControl, {
70
- style: {
71
- background: 'transparent',
72
- border: 'none',
73
- zIndex: 100
74
- },
75
- position: "bottom-right",
76
- minWidth: minWidth,
77
- minHeight: minHeight,
78
- children: /*#__PURE__*/ jsx(ResizeHandle, {
79
- selected: selected,
80
- cursor: "nwse-resize"
81
- })
83
+ !collapsed && /*#__PURE__*/ jsxs(Fragment, {
84
+ children: [
85
+ /*#__PURE__*/ jsx(NodeResizeControl, {
86
+ style: {
87
+ background: 'transparent',
88
+ border: 'none',
89
+ zIndex: 100
90
+ },
91
+ position: "top-left",
92
+ minWidth: minWidth,
93
+ minHeight: minHeight,
94
+ children: /*#__PURE__*/ jsx(ResizeHandle, {
95
+ selected: selected,
96
+ cursor: "nwse-resize"
97
+ })
98
+ }),
99
+ /*#__PURE__*/ jsx(NodeResizeControl, {
100
+ style: {
101
+ background: 'transparent',
102
+ border: 'none',
103
+ zIndex: 100
104
+ },
105
+ position: "top-right",
106
+ minWidth: minWidth,
107
+ minHeight: minHeight,
108
+ children: /*#__PURE__*/ jsx(ResizeHandle, {
109
+ selected: selected,
110
+ cursor: "nesw-resize"
111
+ })
112
+ }),
113
+ /*#__PURE__*/ jsx(NodeResizeControl, {
114
+ style: {
115
+ background: 'transparent',
116
+ border: 'none',
117
+ zIndex: 100
118
+ },
119
+ position: "bottom-left",
120
+ minWidth: minWidth,
121
+ minHeight: minHeight,
122
+ children: /*#__PURE__*/ jsx(ResizeHandle, {
123
+ selected: selected,
124
+ cursor: "nesw-resize"
125
+ })
126
+ }),
127
+ /*#__PURE__*/ jsx(NodeResizeControl, {
128
+ style: {
129
+ background: 'transparent',
130
+ border: 'none',
131
+ zIndex: 100
132
+ },
133
+ position: "bottom-right",
134
+ minWidth: minWidth,
135
+ minHeight: minHeight,
136
+ children: /*#__PURE__*/ jsx(ResizeHandle, {
137
+ selected: selected,
138
+ cursor: "nwse-resize"
139
+ })
140
+ })
141
+ ]
82
142
  }),
83
143
  /*#__PURE__*/ jsxs(GroupContainer, {
84
144
  backgroundColor: backgroundColor,
85
145
  borderColor: borderColor,
86
146
  selected: selected,
87
147
  collapsed: collapsed,
148
+ executionStatus: executionStatus,
88
149
  children: [
89
150
  /*#__PURE__*/ jsx(TopCornerIndicators, {
90
151
  selected: selected
@@ -94,7 +155,7 @@ const GroupNodeComponent = ({ id, data, selected })=>{
94
155
  }),
95
156
  /*#__PURE__*/ jsxs(GroupHeader, {
96
157
  children: [
97
- /*#__PURE__*/ jsx(GroupIconWrapper, {
158
+ iconName && /*#__PURE__*/ jsx(GroupIconWrapper, {
98
159
  children: /*#__PURE__*/ jsx(ApIcon, {
99
160
  name: iconName,
100
161
  size: "16px"
@@ -105,22 +166,33 @@ const GroupNodeComponent = ({ id, data, selected })=>{
105
166
  }),
106
167
  /*#__PURE__*/ jsxs(GroupControls, {
107
168
  children: [
108
- /*#__PURE__*/ jsx(GroupHeaderSeparator, {}),
109
- /*#__PURE__*/ jsx(GroupHeaderButton, {
110
- type: "button",
111
- className: "nodrag nopan",
112
- onClick: handleToggleCollapse,
113
- "aria-label": collapsed ? 'Expand group' : 'Collapse group',
114
- title: collapsed ? 'Expand group' : 'Collapse group',
115
- children: /*#__PURE__*/ jsx(ApIcon, {
116
- variant: "outlined",
117
- name: collapsed ? 'expand_more' : 'expand_less',
118
- size: "16px"
119
- })
169
+ headerActions && /*#__PURE__*/ jsxs(Fragment, {
170
+ children: [
171
+ /*#__PURE__*/ jsx(GroupHeaderSeparator, {}),
172
+ headerActions
173
+ ]
174
+ }),
175
+ !hideCollapseButton && /*#__PURE__*/ jsxs(Fragment, {
176
+ children: [
177
+ /*#__PURE__*/ jsx(GroupHeaderSeparator, {}),
178
+ /*#__PURE__*/ jsx(GroupHeaderButton, {
179
+ type: "button",
180
+ className: "nodrag nopan",
181
+ onClick: handleToggleCollapse,
182
+ "aria-label": collapsed ? 'Expand group' : 'Collapse group',
183
+ title: collapsed ? 'Expand group' : 'Collapse group',
184
+ children: /*#__PURE__*/ jsx(ApIcon, {
185
+ variant: "outlined",
186
+ name: collapsed ? 'expand_more' : 'expand_less',
187
+ size: "16px"
188
+ })
189
+ })
190
+ ]
120
191
  }),
121
- /*#__PURE__*/ jsx(GroupHeaderButton, {
192
+ !hideMoreOptions && /*#__PURE__*/ jsx(GroupHeaderButton, {
122
193
  type: "button",
123
194
  className: "nodrag nopan",
195
+ onClick: onMoreOptions,
124
196
  "aria-label": "More options",
125
197
  title: "More options",
126
198
  children: /*#__PURE__*/ jsx(ApIcon, {