@uipath/apollo-react 4.41.0 → 4.42.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 (13) hide show
  1. package/dist/canvas/components/BaseNode/BaseNode.cjs +49 -9
  2. package/dist/canvas/components/BaseNode/BaseNode.d.ts.map +1 -1
  3. package/dist/canvas/components/BaseNode/BaseNode.js +49 -9
  4. package/dist/canvas/components/Edges/SequenceEdge.cjs +3 -2
  5. package/dist/canvas/components/Edges/SequenceEdge.d.ts.map +1 -1
  6. package/dist/canvas/components/Edges/SequenceEdge.js +3 -2
  7. package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.cjs +127 -110
  8. package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.d.ts.map +1 -1
  9. package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.js +127 -110
  10. package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.types.d.ts +1 -1
  11. package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.types.d.ts.map +1 -1
  12. package/dist/canvas/styles/tailwind.canvas.css +1 -1
  13. package/package.json +1 -1
package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.js CHANGED
@@ -15,12 +15,21 @@ const POSITIONER_POSITION_CLASS = {
15
15
  left: 'left-[calc(-52px-var(--toolbar-offset,0px))] top-0 bottom-0 flex-col',
16
16
  right: 'right-[calc(-52px-var(--toolbar-offset,0px))] top-0 bottom-0 flex-col'
17
17
  };
18
- const TOOLBAR_OFFSET = 48;
18
+ const TOOLBAR_OFFSET = {
19
+ button: 48,
20
+ label: 24
21
+ };
19
22
  const POSITIONER_ALIGN_CLASS = {
20
23
  start: 'justify-start',
21
24
  center: 'justify-center',
22
25
  end: 'justify-end'
23
26
  };
27
+ const POSITIONER_BRIDGE_CLASS = {
28
+ top: 'top-full left-0 right-0 h-[calc(12px+var(--toolbar-offset,0px))]',
29
+ bottom: 'bottom-full left-0 right-0 h-[calc(12px+var(--toolbar-offset,0px))]',
30
+ left: 'left-full top-0 bottom-0 w-[calc(12px+var(--toolbar-offset,0px))]',
31
+ right: 'right-full top-0 bottom-0 w-[calc(12px+var(--toolbar-offset,0px))]'
32
+ };
24
33
  const CONTAINER_BASE_CLASS = "flex items-center gap-1 p-1 shrink-0 bg-(--canvas-background-raised) border border-(--canvas-background-overlay) rounded-xl shadow-[0_2px_6px_rgba(0,0,0,0.08)] pointer-events-auto";
25
34
  const CONTAINER_DIRECTION_CLASS = {
26
35
  top: 'flex-row min-h-10',
@@ -44,6 +53,7 @@ const NodeToolbarComponent = ({ nodeId, config, expanded, hidden, offsetToolbar,
44
53
  });
45
54
  const position = config.position || 'top';
46
55
  const align = config.align || 'center';
56
+ const offsetMode = true === offsetToolbar ? 'button' : offsetToolbar || void 0;
47
57
  const positionerClassName = useMemo(()=>cn(POSITIONER_BASE_CLASS, POSITIONER_POSITION_CLASS[position], POSITIONER_ALIGN_CLASS[align]), [
48
58
  position,
49
59
  align
@@ -55,12 +65,12 @@ const NodeToolbarComponent = ({ nodeId, config, expanded, hidden, offsetToolbar,
55
65
  separatorOrientation
56
66
  ]);
57
67
  const offsetStyle = useMemo(()=>{
58
- if (!offsetToolbar) return;
68
+ if (!offsetMode) return;
59
69
  return {
60
- '--toolbar-offset': `${TOOLBAR_OFFSET}px`
70
+ '--toolbar-offset': `${TOOLBAR_OFFSET[offsetMode]}px`
61
71
  };
62
72
  }, [
63
- offsetToolbar
73
+ offsetMode
64
74
  ]);
65
75
  const toolbarAnimationVariants = useMemo(()=>{
66
76
  const offsetAxis = 'top' === position || 'bottom' === position ? 'y' : 'x';
@@ -91,119 +101,126 @@ const NodeToolbarComponent = ({ nodeId, config, expanded, hidden, offsetToolbar,
91
101
  ]);
92
102
  if (0 === config.actions.length && (!config.overflowActions || 0 === config.overflowActions.length)) return null;
93
103
  const toolbarContent = /*#__PURE__*/ jsx(AnimatePresence, {
94
- children: 'hidden' !== displayState && /*#__PURE__*/ jsx("div", {
104
+ children: 'hidden' !== displayState && /*#__PURE__*/ jsxs("div", {
95
105
  className: positionerClassName,
96
106
  style: offsetStyle,
97
- children: /*#__PURE__*/ jsxs(motion.div, {
98
- layout: "position",
99
- className: containerClassName,
100
- initial: toolbarAnimationVariants.initial,
101
- animate: toolbarAnimationVariants.animate,
102
- exit: toolbarAnimationVariants.exit,
103
- transition: {
104
- duration: 0.15,
105
- ease: 'easeOut'
106
- },
107
- role: "toolbar",
108
- children: [
109
- actionsToDisplay.map((item, i)=>isSeparator(item) ? /*#__PURE__*/ jsx("div", {
110
- className: separatorClassName
111
- }, `separator-${i}`) : /*#__PURE__*/ jsx(ToolbarButton, {
112
- action: item,
113
- layoutId: item.isPinned ? `toolbar-btn-${nodeId}-${item.id}` : void 0
114
- }, item.id)),
115
- shouldShowOverflow && /*#__PURE__*/ jsxs(Fragment, {
116
- children: [
117
- actionsToDisplay.length > 0 && /*#__PURE__*/ jsx("div", {
107
+ children: [
108
+ 'button' !== offsetMode && /*#__PURE__*/ jsx("div", {
109
+ "aria-hidden": true,
110
+ "data-testid": "node-toolbar-hover-bridge",
111
+ className: cn('absolute pointer-events-auto cursor-default', POSITIONER_BRIDGE_CLASS[position])
112
+ }),
113
+ /*#__PURE__*/ jsxs(motion.div, {
114
+ layout: "position",
115
+ className: containerClassName,
116
+ initial: toolbarAnimationVariants.initial,
117
+ animate: toolbarAnimationVariants.animate,
118
+ exit: toolbarAnimationVariants.exit,
119
+ transition: {
120
+ duration: 0.15,
121
+ ease: 'easeOut'
122
+ },
123
+ role: "toolbar",
124
+ children: [
125
+ actionsToDisplay.map((item, i)=>isSeparator(item) ? /*#__PURE__*/ jsx("div", {
118
126
  className: separatorClassName
119
- }),
120
- /*#__PURE__*/ jsxs("div", {
121
- className: "relative",
122
- children: [
123
- /*#__PURE__*/ jsx(CanvasTooltip, {
124
- content: config.overflowLabel ?? 'More options',
125
- placement: "top",
126
- children: /*#__PURE__*/ jsx(ToolbarIconButton, {
127
- ref: buttonRef,
128
- type: "button",
129
- className: "nodrag nopan",
130
- onClick: toggleDropdown,
131
- "aria-label": config.overflowLabel ?? 'More options',
132
- "aria-expanded": isDropdownOpen,
133
- "aria-haspopup": "menu",
134
- children: /*#__PURE__*/ jsx(CanvasIcon, {
135
- icon: "ellipsis-vertical",
136
- size: 16
127
+ }, `separator-${i}`) : /*#__PURE__*/ jsx(ToolbarButton, {
128
+ action: item,
129
+ layoutId: item.isPinned ? `toolbar-btn-${nodeId}-${item.id}` : void 0
130
+ }, item.id)),
131
+ shouldShowOverflow && /*#__PURE__*/ jsxs(Fragment, {
132
+ children: [
133
+ actionsToDisplay.length > 0 && /*#__PURE__*/ jsx("div", {
134
+ className: separatorClassName
135
+ }),
136
+ /*#__PURE__*/ jsxs("div", {
137
+ className: "relative",
138
+ children: [
139
+ /*#__PURE__*/ jsx(CanvasTooltip, {
140
+ content: config.overflowLabel ?? 'More options',
141
+ placement: "top",
142
+ children: /*#__PURE__*/ jsx(ToolbarIconButton, {
143
+ ref: buttonRef,
144
+ type: "button",
145
+ className: "nodrag nopan",
146
+ onClick: toggleDropdown,
147
+ "aria-label": config.overflowLabel ?? 'More options',
148
+ "aria-expanded": isDropdownOpen,
149
+ "aria-haspopup": "menu",
150
+ children: /*#__PURE__*/ jsx(CanvasIcon, {
151
+ icon: "ellipsis-vertical",
152
+ size: 16
153
+ })
137
154
  })
138
- })
139
- }),
140
- /*#__PURE__*/ jsx(AnimatePresence, {
141
- children: isDropdownOpen && /*#__PURE__*/ jsx(motion.div, {
142
- ref: dropdownRef,
143
- className: DROPDOWN_MENU_CLASS,
144
- initial: {
145
- opacity: 0,
146
- x: -8
147
- },
148
- animate: {
149
- opacity: 1,
150
- x: 0
151
- },
152
- exit: {
153
- opacity: 0,
154
- x: -8
155
- },
156
- transition: {
157
- duration: 0.15
158
- },
159
- role: "menu",
160
- "aria-label": config.overflowLabel ?? 'More options',
161
- children: overflowActionsToDisplay.map((item, i)=>{
162
- if (isSeparator(item)) return /*#__PURE__*/ jsx("div", {
163
- className: cn(SEPARATOR_BASE_CLASS, SEPARATOR_HORIZONTAL_CLASS)
164
- }, `separator-${i}`);
165
- return /*#__PURE__*/ jsxs("button", {
166
- type: "button",
167
- className: cn(DROPDOWN_ITEM_BASE_CLASS, item.disabled ? DROPDOWN_ITEM_DISABLED_CLASS : DROPDOWN_ITEM_ENABLED_CLASS, 'nodrag nopan'),
168
- onClick: (e)=>{
169
- e.stopPropagation();
170
- e.preventDefault();
171
- if (!item.disabled) {
172
- item.onClick();
173
- setIsDropdownOpen(false);
174
- }
175
- },
176
- "aria-label": item.label,
177
- "aria-disabled": item.disabled,
178
- disabled: item.disabled,
179
- role: "menuitem",
180
- children: [
181
- item.icon && 'string' == typeof item.icon && /*#__PURE__*/ jsx("span", {
182
- style: {
183
- flex: 'unset',
184
- display: 'inline-flex'
185
- },
186
- children: /*#__PURE__*/ jsx(CanvasIcon, {
187
- icon: item.icon,
188
- size: 16
155
+ }),
156
+ /*#__PURE__*/ jsx(AnimatePresence, {
157
+ children: isDropdownOpen && /*#__PURE__*/ jsx(motion.div, {
158
+ ref: dropdownRef,
159
+ className: DROPDOWN_MENU_CLASS,
160
+ initial: {
161
+ opacity: 0,
162
+ x: -8
163
+ },
164
+ animate: {
165
+ opacity: 1,
166
+ x: 0
167
+ },
168
+ exit: {
169
+ opacity: 0,
170
+ x: -8
171
+ },
172
+ transition: {
173
+ duration: 0.15
174
+ },
175
+ role: "menu",
176
+ "aria-label": config.overflowLabel ?? 'More options',
177
+ children: overflowActionsToDisplay.map((item, i)=>{
178
+ if (isSeparator(item)) return /*#__PURE__*/ jsx("div", {
179
+ className: cn(SEPARATOR_BASE_CLASS, SEPARATOR_HORIZONTAL_CLASS)
180
+ }, `separator-${i}`);
181
+ return /*#__PURE__*/ jsxs("button", {
182
+ type: "button",
183
+ className: cn(DROPDOWN_ITEM_BASE_CLASS, item.disabled ? DROPDOWN_ITEM_DISABLED_CLASS : DROPDOWN_ITEM_ENABLED_CLASS, 'nodrag nopan'),
184
+ onClick: (e)=>{
185
+ e.stopPropagation();
186
+ e.preventDefault();
187
+ if (!item.disabled) {
188
+ item.onClick();
189
+ setIsDropdownOpen(false);
190
+ }
191
+ },
192
+ "aria-label": item.label,
193
+ "aria-disabled": item.disabled,
194
+ disabled: item.disabled,
195
+ role: "menuitem",
196
+ children: [
197
+ item.icon && 'string' == typeof item.icon && /*#__PURE__*/ jsx("span", {
198
+ style: {
199
+ flex: 'unset',
200
+ display: 'inline-flex'
201
+ },
202
+ children: /*#__PURE__*/ jsx(CanvasIcon, {
203
+ icon: item.icon,
204
+ size: 16
205
+ })
206
+ }),
207
+ item.icon && 'string' != typeof item.icon && item.icon,
208
+ /*#__PURE__*/ jsx("span", {
209
+ className: "flex-1 text-(--canvas-foreground)",
210
+ children: item.label
189
211
  })
190
- }),
191
- item.icon && 'string' != typeof item.icon && item.icon,
192
- /*#__PURE__*/ jsx("span", {
193
- className: "flex-1 text-(--canvas-foreground)",
194
- children: item.label
195
- })
196
- ]
197
- }, item.id);
212
+ ]
213
+ }, item.id);
214
+ })
198
215
  })
199
216
  })
200
- })
201
- ]
202
- })
203
- ]
204
- })
205
- ]
206
- })
217
+ ]
218
+ })
219
+ ]
220
+ })
221
+ ]
222
+ })
223
+ ]
207
224
  })
208
225
  });
209
226
  if (portalToNodeOverlay) return /*#__PURE__*/ jsx(NodeViewportOverlay, {
package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.types.d.ts CHANGED
@@ -11,7 +11,7 @@ export interface NodeToolbarProps {
11
11
  config: NodeToolbarConfig;
12
12
  expanded: boolean;
13
13
  hidden?: boolean;
14
- offsetToolbar?: boolean;
14
+ offsetToolbar?: boolean | 'button' | 'label';
15
15
  portalToNodeOverlay?: boolean;
16
16
  }
17
17
  //# sourceMappingURL=NodeToolbar.types.d.ts.map
package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NodeToolbar.types.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/NodeToolbar/NodeToolbar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,eAAe,CAAC,EAAE,aAAa,EAAE,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC/C,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAElB,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B"}
1
+ {"version":3,"file":"NodeToolbar.types.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/NodeToolbar/NodeToolbar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,eAAe,CAAC,EAAE,aAAa,EAAE,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC/C,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAElB,MAAM,CAAC,EAAE,OAAO,CAAC;IAOjB,aAAa,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAE7C,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B"}