@uipath/apollo-react 4.40.0 → 4.41.1

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 (24) 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/StageNode/StageNode.styles.cjs +4 -2
  5. package/dist/canvas/components/StageNode/StageNode.styles.d.ts.map +1 -1
  6. package/dist/canvas/components/StageNode/StageNode.styles.js +4 -2
  7. package/dist/canvas/components/StageNode/StageNode.types.cjs +2 -0
  8. package/dist/canvas/components/StageNode/StageNode.types.d.ts +4 -1
  9. package/dist/canvas/components/StageNode/StageNode.types.d.ts.map +1 -1
  10. package/dist/canvas/components/StageNode/StageNode.types.js +2 -0
  11. package/dist/canvas/components/StageNode/StageNodeHeader.cjs +52 -4
  12. package/dist/canvas/components/StageNode/StageNodeHeader.d.ts.map +1 -1
  13. package/dist/canvas/components/StageNode/StageNodeHeader.js +52 -4
  14. package/dist/canvas/components/StageNode/useStageNodeLabels.cjs +8 -0
  15. package/dist/canvas/components/StageNode/useStageNodeLabels.d.ts +2 -0
  16. package/dist/canvas/components/StageNode/useStageNodeLabels.d.ts.map +1 -1
  17. package/dist/canvas/components/StageNode/useStageNodeLabels.js +8 -0
  18. package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.cjs +127 -110
  19. package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.d.ts.map +1 -1
  20. package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.js +127 -110
  21. package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.types.d.ts +1 -1
  22. package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.types.d.ts.map +1 -1
  23. package/dist/canvas/styles/tailwind.canvas.css +1 -1
  24. package/package.json +1 -1
package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.cjs CHANGED
@@ -43,12 +43,21 @@ const POSITIONER_POSITION_CLASS = {
43
43
  left: 'left-[calc(-52px-var(--toolbar-offset,0px))] top-0 bottom-0 flex-col',
44
44
  right: 'right-[calc(-52px-var(--toolbar-offset,0px))] top-0 bottom-0 flex-col'
45
45
  };
46
- const TOOLBAR_OFFSET = 48;
46
+ const TOOLBAR_OFFSET = {
47
+ button: 48,
48
+ label: 24
49
+ };
47
50
  const POSITIONER_ALIGN_CLASS = {
48
51
  start: 'justify-start',
49
52
  center: 'justify-center',
50
53
  end: 'justify-end'
51
54
  };
55
+ const POSITIONER_BRIDGE_CLASS = {
56
+ top: 'top-full left-0 right-0 h-[calc(12px+var(--toolbar-offset,0px))]',
57
+ bottom: 'bottom-full left-0 right-0 h-[calc(12px+var(--toolbar-offset,0px))]',
58
+ left: 'left-full top-0 bottom-0 w-[calc(12px+var(--toolbar-offset,0px))]',
59
+ right: 'right-full top-0 bottom-0 w-[calc(12px+var(--toolbar-offset,0px))]'
60
+ };
52
61
  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";
53
62
  const CONTAINER_DIRECTION_CLASS = {
54
63
  top: 'flex-row min-h-10',
@@ -72,6 +81,7 @@ const NodeToolbarComponent = ({ nodeId, config, expanded, hidden, offsetToolbar,
72
81
  });
73
82
  const position = config.position || 'top';
74
83
  const align = config.align || 'center';
84
+ const offsetMode = true === offsetToolbar ? 'button' : offsetToolbar || void 0;
75
85
  const positionerClassName = (0, external_react_namespaceObject.useMemo)(()=>(0, apollo_wind_namespaceObject.cn)(POSITIONER_BASE_CLASS, POSITIONER_POSITION_CLASS[position], POSITIONER_ALIGN_CLASS[align]), [
76
86
  position,
77
87
  align
@@ -83,12 +93,12 @@ const NodeToolbarComponent = ({ nodeId, config, expanded, hidden, offsetToolbar,
83
93
  separatorOrientation
84
94
  ]);
85
95
  const offsetStyle = (0, external_react_namespaceObject.useMemo)(()=>{
86
- if (!offsetToolbar) return;
96
+ if (!offsetMode) return;
87
97
  return {
88
- '--toolbar-offset': `${TOOLBAR_OFFSET}px`
98
+ '--toolbar-offset': `${TOOLBAR_OFFSET[offsetMode]}px`
89
99
  };
90
100
  }, [
91
- offsetToolbar
101
+ offsetMode
92
102
  ]);
93
103
  const toolbarAnimationVariants = (0, external_react_namespaceObject.useMemo)(()=>{
94
104
  const offsetAxis = 'top' === position || 'bottom' === position ? 'y' : 'x';
@@ -119,119 +129,126 @@ const NodeToolbarComponent = ({ nodeId, config, expanded, hidden, offsetToolbar,
119
129
  ]);
120
130
  if (0 === config.actions.length && (!config.overflowActions || 0 === config.overflowActions.length)) return null;
121
131
  const toolbarContent = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.AnimatePresence, {
122
- children: 'hidden' !== displayState && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
132
+ children: 'hidden' !== displayState && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
123
133
  className: positionerClassName,
124
134
  style: offsetStyle,
125
- children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_namespaceObject.motion.div, {
126
- layout: "position",
127
- className: containerClassName,
128
- initial: toolbarAnimationVariants.initial,
129
- animate: toolbarAnimationVariants.animate,
130
- exit: toolbarAnimationVariants.exit,
131
- transition: {
132
- duration: 0.15,
133
- ease: 'easeOut'
134
- },
135
- role: "toolbar",
136
- children: [
137
- actionsToDisplay.map((item, i)=>(0, external_NodeToolbar_utils_cjs_namespaceObject.isSeparator)(item) ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
138
- className: separatorClassName
139
- }, `separator-${i}`) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ToolbarButton, {
140
- action: item,
141
- layoutId: item.isPinned ? `toolbar-btn-${nodeId}-${item.id}` : void 0
142
- }, item.id)),
143
- shouldShowOverflow && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
144
- children: [
145
- actionsToDisplay.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
135
+ children: [
136
+ 'button' !== offsetMode && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
137
+ "aria-hidden": true,
138
+ "data-testid": "node-toolbar-hover-bridge",
139
+ className: (0, apollo_wind_namespaceObject.cn)('absolute pointer-events-auto cursor-default', POSITIONER_BRIDGE_CLASS[position])
140
+ }),
141
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_namespaceObject.motion.div, {
142
+ layout: "position",
143
+ className: containerClassName,
144
+ initial: toolbarAnimationVariants.initial,
145
+ animate: toolbarAnimationVariants.animate,
146
+ exit: toolbarAnimationVariants.exit,
147
+ transition: {
148
+ duration: 0.15,
149
+ ease: 'easeOut'
150
+ },
151
+ role: "toolbar",
152
+ children: [
153
+ actionsToDisplay.map((item, i)=>(0, external_NodeToolbar_utils_cjs_namespaceObject.isSeparator)(item) ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
146
154
  className: separatorClassName
147
- }),
148
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
149
- className: "relative",
150
- children: [
151
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
152
- content: config.overflowLabel ?? 'More options',
153
- placement: "top",
154
- children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ToolbarIconButton, {
155
- ref: buttonRef,
156
- type: "button",
157
- className: "nodrag nopan",
158
- onClick: toggleDropdown,
159
- "aria-label": config.overflowLabel ?? 'More options',
160
- "aria-expanded": isDropdownOpen,
161
- "aria-haspopup": "menu",
162
- children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
163
- icon: "ellipsis-vertical",
164
- size: 16
155
+ }, `separator-${i}`) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ToolbarButton, {
156
+ action: item,
157
+ layoutId: item.isPinned ? `toolbar-btn-${nodeId}-${item.id}` : void 0
158
+ }, item.id)),
159
+ shouldShowOverflow && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
160
+ children: [
161
+ actionsToDisplay.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
162
+ className: separatorClassName
163
+ }),
164
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
165
+ className: "relative",
166
+ children: [
167
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
168
+ content: config.overflowLabel ?? 'More options',
169
+ placement: "top",
170
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ToolbarIconButton, {
171
+ ref: buttonRef,
172
+ type: "button",
173
+ className: "nodrag nopan",
174
+ onClick: toggleDropdown,
175
+ "aria-label": config.overflowLabel ?? 'More options',
176
+ "aria-expanded": isDropdownOpen,
177
+ "aria-haspopup": "menu",
178
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
179
+ icon: "ellipsis-vertical",
180
+ size: 16
181
+ })
165
182
  })
166
- })
167
- }),
168
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.AnimatePresence, {
169
- children: isDropdownOpen && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.motion.div, {
170
- ref: dropdownRef,
171
- className: DROPDOWN_MENU_CLASS,
172
- initial: {
173
- opacity: 0,
174
- x: -8
175
- },
176
- animate: {
177
- opacity: 1,
178
- x: 0
179
- },
180
- exit: {
181
- opacity: 0,
182
- x: -8
183
- },
184
- transition: {
185
- duration: 0.15
186
- },
187
- role: "menu",
188
- "aria-label": config.overflowLabel ?? 'More options',
189
- children: overflowActionsToDisplay.map((item, i)=>{
190
- if ((0, external_NodeToolbar_utils_cjs_namespaceObject.isSeparator)(item)) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
191
- className: (0, apollo_wind_namespaceObject.cn)(SEPARATOR_BASE_CLASS, SEPARATOR_HORIZONTAL_CLASS)
192
- }, `separator-${i}`);
193
- return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
194
- type: "button",
195
- className: (0, apollo_wind_namespaceObject.cn)(DROPDOWN_ITEM_BASE_CLASS, item.disabled ? DROPDOWN_ITEM_DISABLED_CLASS : DROPDOWN_ITEM_ENABLED_CLASS, 'nodrag nopan'),
196
- onClick: (e)=>{
197
- e.stopPropagation();
198
- e.preventDefault();
199
- if (!item.disabled) {
200
- item.onClick();
201
- setIsDropdownOpen(false);
202
- }
203
- },
204
- "aria-label": item.label,
205
- "aria-disabled": item.disabled,
206
- disabled: item.disabled,
207
- role: "menuitem",
208
- children: [
209
- item.icon && 'string' == typeof item.icon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
210
- style: {
211
- flex: 'unset',
212
- display: 'inline-flex'
213
- },
214
- children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
215
- icon: item.icon,
216
- size: 16
183
+ }),
184
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.AnimatePresence, {
185
+ children: isDropdownOpen && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.motion.div, {
186
+ ref: dropdownRef,
187
+ className: DROPDOWN_MENU_CLASS,
188
+ initial: {
189
+ opacity: 0,
190
+ x: -8
191
+ },
192
+ animate: {
193
+ opacity: 1,
194
+ x: 0
195
+ },
196
+ exit: {
197
+ opacity: 0,
198
+ x: -8
199
+ },
200
+ transition: {
201
+ duration: 0.15
202
+ },
203
+ role: "menu",
204
+ "aria-label": config.overflowLabel ?? 'More options',
205
+ children: overflowActionsToDisplay.map((item, i)=>{
206
+ if ((0, external_NodeToolbar_utils_cjs_namespaceObject.isSeparator)(item)) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
207
+ className: (0, apollo_wind_namespaceObject.cn)(SEPARATOR_BASE_CLASS, SEPARATOR_HORIZONTAL_CLASS)
208
+ }, `separator-${i}`);
209
+ return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
210
+ type: "button",
211
+ className: (0, apollo_wind_namespaceObject.cn)(DROPDOWN_ITEM_BASE_CLASS, item.disabled ? DROPDOWN_ITEM_DISABLED_CLASS : DROPDOWN_ITEM_ENABLED_CLASS, 'nodrag nopan'),
212
+ onClick: (e)=>{
213
+ e.stopPropagation();
214
+ e.preventDefault();
215
+ if (!item.disabled) {
216
+ item.onClick();
217
+ setIsDropdownOpen(false);
218
+ }
219
+ },
220
+ "aria-label": item.label,
221
+ "aria-disabled": item.disabled,
222
+ disabled: item.disabled,
223
+ role: "menuitem",
224
+ children: [
225
+ item.icon && 'string' == typeof item.icon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
226
+ style: {
227
+ flex: 'unset',
228
+ display: 'inline-flex'
229
+ },
230
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
231
+ icon: item.icon,
232
+ size: 16
233
+ })
234
+ }),
235
+ item.icon && 'string' != typeof item.icon && item.icon,
236
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
237
+ className: "flex-1 text-(--canvas-foreground)",
238
+ children: item.label
217
239
  })
218
- }),
219
- item.icon && 'string' != typeof item.icon && item.icon,
220
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
221
- className: "flex-1 text-(--canvas-foreground)",
222
- children: item.label
223
- })
224
- ]
225
- }, item.id);
240
+ ]
241
+ }, item.id);
242
+ })
226
243
  })
227
244
  })
228
- })
229
- ]
230
- })
231
- ]
232
- })
233
- ]
234
- })
245
+ ]
246
+ })
247
+ ]
248
+ })
249
+ ]
250
+ })
251
+ ]
235
252
  })
236
253
  });
237
254
  if (portalToNodeOverlay) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodeViewportOverlay_cjs_namespaceObject.NodeViewportOverlay, {
package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NodeToolbar.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/NodeToolbar/NodeToolbar.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAyP5D,eAAO,MAAM,WAAW,kHA1LrB,gBAAgB,oDA0LkC,CAAC"}
1
+ {"version":3,"file":"NodeToolbar.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/NodeToolbar/NodeToolbar.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAwR5D,eAAO,MAAM,WAAW,kHAxMrB,gBAAgB,oDAwMkC,CAAC"}
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"}