@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/BaseNode/BaseNode.cjs CHANGED
@@ -292,14 +292,6 @@ const BaseNodeComponent = (props)=>{
292
292
  isHovered,
293
293
  dragging
294
294
  ]);
295
- const toolbarPosition = toolbarConfig?.position ?? (toolbarConfig ? react_cjs_namespaceObject.Position.Top : void 0);
296
- const hasHandleButtonsAtToolbar = (0, external_react_namespaceObject.useMemo)(()=>{
297
- if (!toolbarPosition || !handleConfigurations?.length) return false;
298
- return handleConfigurations.some((config)=>config.position === toolbarPosition && false !== config.visible && config.handles.some((h)=>'source' === h.type && false !== h.showButton));
299
- }, [
300
- toolbarPosition,
301
- handleConfigurations
302
- ]);
303
295
  const hasVisibleBottomHandles = (0, external_react_namespaceObject.useMemo)(()=>{
304
296
  if (!handleConfigurations || !Array.isArray(handleConfigurations) || !selected || 'circle' === displayShape) return false;
305
297
  return handleConfigurations.some((config)=>config.position === react_cjs_namespaceObject.Position.Bottom && config.handles.length > 0 && false !== config.visible && (config.handles.some((h)=>'source' === h.type) || config.handles.some((h)=>h.showButton)));
@@ -339,6 +331,54 @@ const BaseNodeComponent = (props)=>{
339
331
  onHandleActionCallback
340
332
  ]);
341
333
  const useSmartHandles = data?.useSmartHandles ?? false;
334
+ const toolbarPosition = toolbarConfig?.position ?? (toolbarConfig ? react_cjs_namespaceObject.Position.Top : void 0);
335
+ const toolbarSideHandleAffordances = (0, external_react_namespaceObject.useMemo)(()=>{
336
+ let hasButton = false;
337
+ let hasLabel = false;
338
+ if (!toolbarPosition || !handleConfigurations?.length) return {
339
+ hasButton,
340
+ hasLabel
341
+ };
342
+ for (const config of handleConfigurations)if (config.position === toolbarPosition && false !== config.visible) for (const handle of config.handles){
343
+ if (false === handle.visible) continue;
344
+ const showButton = useSmartHandles ? handle.showButton : false !== handle.showButton;
345
+ if ('source' === handle.type && showButton) hasButton = true;
346
+ if (handle.label) hasLabel = true;
347
+ }
348
+ return {
349
+ hasButton,
350
+ hasLabel
351
+ };
352
+ }, [
353
+ toolbarPosition,
354
+ handleConfigurations
355
+ ]);
356
+ const offsetToolbar = (0, external_react_namespaceObject.useMemo)(()=>{
357
+ if (multipleNodesSelected) return false;
358
+ const { hasButton, hasLabel } = toolbarSideHandleAffordances;
359
+ const isAddButtonShown = ()=>{
360
+ if (useSmartHandles) return 'design' === mode && !!selected;
361
+ const showAddButton = 'design' === mode && !isConnecting && !dragging;
362
+ if (shouldShowAddButtonFn) return shouldShowAddButtonFn({
363
+ showAddButton,
364
+ selected: !!selected
365
+ });
366
+ return showAddButton && (!!selected || isHovered);
367
+ };
368
+ if (hasButton && isAddButtonShown()) return 'button';
369
+ if (hasLabel) return 'label';
370
+ return false;
371
+ }, [
372
+ toolbarSideHandleAffordances,
373
+ mode,
374
+ multipleNodesSelected,
375
+ useSmartHandles,
376
+ selected,
377
+ isHovered,
378
+ isConnecting,
379
+ dragging,
380
+ shouldShowAddButtonFn
381
+ ]);
342
382
  const buttonHandleElements = (0, useButtonHandles_cjs_namespaceObject.useButtonHandles)({
343
383
  handleConfigurations,
344
384
  shouldShowHandles,
@@ -485,7 +525,7 @@ const BaseNodeComponent = (props)=>{
485
525
  config: toolbarConfig,
486
526
  expanded: selected || isHovered,
487
527
  hidden: dragging || multipleNodesSelected,
488
- offsetToolbar: hasHandleButtonsAtToolbar
528
+ offsetToolbar: offsetToolbar
489
529
  }),
490
530
  handleElements,
491
531
  'ActionNeeded' === executionStatus && (()=>{
package/dist/canvas/components/BaseNode/BaseNode.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BaseNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AA4ChF,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,kBAAkB,CAAC;AAupB1B,eAAO,MAAM,QAAQ,8CAjnBa,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,6CAinBmB,CAAC"}
1
+ {"version":3,"file":"BaseNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AA4ChF,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,kBAAkB,CAAC;AAysB1B,eAAO,MAAM,QAAQ,8CAnqBa,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,6CAmqBmB,CAAC"}
package/dist/canvas/components/BaseNode/BaseNode.js CHANGED
@@ -264,14 +264,6 @@ const BaseNodeComponent = (props)=>{
264
264
  isHovered,
265
265
  dragging
266
266
  ]);
267
- const toolbarPosition = toolbarConfig?.position ?? (toolbarConfig ? Position.Top : void 0);
268
- const hasHandleButtonsAtToolbar = useMemo(()=>{
269
- if (!toolbarPosition || !handleConfigurations?.length) return false;
270
- return handleConfigurations.some((config)=>config.position === toolbarPosition && false !== config.visible && config.handles.some((h)=>'source' === h.type && false !== h.showButton));
271
- }, [
272
- toolbarPosition,
273
- handleConfigurations
274
- ]);
275
267
  const hasVisibleBottomHandles = useMemo(()=>{
276
268
  if (!handleConfigurations || !Array.isArray(handleConfigurations) || !selected || 'circle' === displayShape) return false;
277
269
  return handleConfigurations.some((config)=>config.position === Position.Bottom && config.handles.length > 0 && false !== config.visible && (config.handles.some((h)=>'source' === h.type) || config.handles.some((h)=>h.showButton)));
@@ -311,6 +303,54 @@ const BaseNodeComponent = (props)=>{
311
303
  onHandleActionCallback
312
304
  ]);
313
305
  const useSmartHandles = data?.useSmartHandles ?? false;
306
+ const toolbarPosition = toolbarConfig?.position ?? (toolbarConfig ? Position.Top : void 0);
307
+ const toolbarSideHandleAffordances = useMemo(()=>{
308
+ let hasButton = false;
309
+ let hasLabel = false;
310
+ if (!toolbarPosition || !handleConfigurations?.length) return {
311
+ hasButton,
312
+ hasLabel
313
+ };
314
+ for (const config of handleConfigurations)if (config.position === toolbarPosition && false !== config.visible) for (const handle of config.handles){
315
+ if (false === handle.visible) continue;
316
+ const showButton = useSmartHandles ? handle.showButton : false !== handle.showButton;
317
+ if ('source' === handle.type && showButton) hasButton = true;
318
+ if (handle.label) hasLabel = true;
319
+ }
320
+ return {
321
+ hasButton,
322
+ hasLabel
323
+ };
324
+ }, [
325
+ toolbarPosition,
326
+ handleConfigurations
327
+ ]);
328
+ const offsetToolbar = useMemo(()=>{
329
+ if (multipleNodesSelected) return false;
330
+ const { hasButton, hasLabel } = toolbarSideHandleAffordances;
331
+ const isAddButtonShown = ()=>{
332
+ if (useSmartHandles) return 'design' === mode && !!selected;
333
+ const showAddButton = 'design' === mode && !isConnecting && !dragging;
334
+ if (shouldShowAddButtonFn) return shouldShowAddButtonFn({
335
+ showAddButton,
336
+ selected: !!selected
337
+ });
338
+ return showAddButton && (!!selected || isHovered);
339
+ };
340
+ if (hasButton && isAddButtonShown()) return 'button';
341
+ if (hasLabel) return 'label';
342
+ return false;
343
+ }, [
344
+ toolbarSideHandleAffordances,
345
+ mode,
346
+ multipleNodesSelected,
347
+ useSmartHandles,
348
+ selected,
349
+ isHovered,
350
+ isConnecting,
351
+ dragging,
352
+ shouldShowAddButtonFn
353
+ ]);
314
354
  const buttonHandleElements = useButtonHandles({
315
355
  handleConfigurations,
316
356
  shouldShowHandles,
@@ -457,7 +497,7 @@ const BaseNodeComponent = (props)=>{
457
497
  config: toolbarConfig,
458
498
  expanded: selected || isHovered,
459
499
  hidden: dragging || multipleNodesSelected,
460
- offsetToolbar: hasHandleButtonsAtToolbar
500
+ offsetToolbar: offsetToolbar
461
501
  }),
462
502
  handleElements,
463
503
  'ActionNeeded' === executionStatus && (()=>{
package/dist/canvas/components/Edges/SequenceEdge.cjs CHANGED
@@ -62,6 +62,7 @@ const ARROW_OFFSETS = {
62
62
  function areEdgePropsEqual(prevProps, nextProps) {
63
63
  if (prevProps.id !== nextProps.id) return false;
64
64
  if (prevProps.selected !== nextProps.selected) return false;
65
+ if (prevProps.animated !== nextProps.animated) return false;
65
66
  if (prevProps.source !== nextProps.source) return false;
66
67
  if (prevProps.target !== nextProps.target) return false;
67
68
  if (prevProps.sourcePosition !== nextProps.sourcePosition) return false;
@@ -75,7 +76,7 @@ function areEdgePropsEqual(prevProps, nextProps) {
75
76
  if (Math.abs(prevProps.targetY - nextProps.targetY) > threshold) return false;
76
77
  return true;
77
78
  }
78
- const SequenceEdge_SequenceEdge = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ id, selected, source, sourceX, sourceY, sourcePosition, sourceHandleId, target, targetX, targetY, targetPosition, targetHandleId, style, data }) {
79
+ const SequenceEdge_SequenceEdge = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ id, selected, animated, source, sourceX, sourceY, sourcePosition, sourceHandleId, target, targetX, targetY, targetPosition, targetHandleId, style, data }) {
79
80
  const [isHovered, setIsHovered] = (0, external_react_namespaceObject.useState)(false);
80
81
  const pathElementRef = (0, external_react_namespaceObject.useRef)(null);
81
82
  const { mode } = (0, BaseCanvasModeProvider_cjs_namespaceObject.useBaseCanvasMode)();
@@ -166,7 +167,7 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ (0, external_react_namespaceObje
166
167
  strokeWidth: style?.strokeWidth || 2,
167
168
  style: {
168
169
  stroke: edgeColor,
169
- strokeDasharray: isDiffRemoved ? style?.strokeDasharray || '5,5' : previewEdge ? '5,5' : '0',
170
+ strokeDasharray: animated ? void 0 : isDiffRemoved ? style?.strokeDasharray || '5,5' : previewEdge ? '5,5' : '0',
170
171
  opacity: style?.opacity !== void 0 ? style.opacity : 1,
171
172
  transition: 'stroke 0.2s ease, opacity 0.2s ease'
172
173
  },
package/dist/canvas/components/Edges/SequenceEdge.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SequenceEdge.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Edges/SequenceEdge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,0CAA0C,CAAC;AAoDpF,eAAO,MAAM,YAAY,iDA+MJ,CAAC"}
1
+ {"version":3,"file":"SequenceEdge.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Edges/SequenceEdge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,0CAA0C,CAAC;AAqDpF,eAAO,MAAM,YAAY,iDAkNJ,CAAC"}
package/dist/canvas/components/Edges/SequenceEdge.js CHANGED
@@ -34,6 +34,7 @@ const ARROW_OFFSETS = {
34
34
  function areEdgePropsEqual(prevProps, nextProps) {
35
35
  if (prevProps.id !== nextProps.id) return false;
36
36
  if (prevProps.selected !== nextProps.selected) return false;
37
+ if (prevProps.animated !== nextProps.animated) return false;
37
38
  if (prevProps.source !== nextProps.source) return false;
38
39
  if (prevProps.target !== nextProps.target) return false;
39
40
  if (prevProps.sourcePosition !== nextProps.sourcePosition) return false;
@@ -47,7 +48,7 @@ function areEdgePropsEqual(prevProps, nextProps) {
47
48
  if (Math.abs(prevProps.targetY - nextProps.targetY) > threshold) return false;
48
49
  return true;
49
50
  }
50
- const SequenceEdge_SequenceEdge = /*#__PURE__*/ memo(function({ id, selected, source, sourceX, sourceY, sourcePosition, sourceHandleId, target, targetX, targetY, targetPosition, targetHandleId, style, data }) {
51
+ const SequenceEdge_SequenceEdge = /*#__PURE__*/ memo(function({ id, selected, animated, source, sourceX, sourceY, sourcePosition, sourceHandleId, target, targetX, targetY, targetPosition, targetHandleId, style, data }) {
51
52
  const [isHovered, setIsHovered] = useState(false);
52
53
  const pathElementRef = useRef(null);
53
54
  const { mode } = useBaseCanvasMode();
@@ -138,7 +139,7 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ memo(function({ id, selected, so
138
139
  strokeWidth: style?.strokeWidth || 2,
139
140
  style: {
140
141
  stroke: edgeColor,
141
- strokeDasharray: isDiffRemoved ? style?.strokeDasharray || '5,5' : previewEdge ? '5,5' : '0',
142
+ strokeDasharray: animated ? void 0 : isDiffRemoved ? style?.strokeDasharray || '5,5' : previewEdge ? '5,5' : '0',
142
143
  opacity: style?.opacity !== void 0 ? style.opacity : 1,
143
144
  transition: 'stroke 0.2s ease, opacity 0.2s ease'
144
145
  },
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"}