@uipath/apollo-react 3.44.2 → 3.44.3

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.
@@ -61,7 +61,7 @@ const StageNodeComponent = (props)=>{
61
61
  const isException = stageDetails?.isException;
62
62
  const isReadOnly = !!stageDetails?.isReadOnly;
63
63
  const icon = stageDetails?.icon;
64
- const selectedTasks = stageDetails?.selectedTasks;
64
+ const selectedTaskId = stageDetails?.selectedTaskId;
65
65
  const defaultContent = stageDetails?.defaultContent || 'Add first task';
66
66
  const status = execution?.stageStatus?.status;
67
67
  const statusLabel = execution?.stageStatus?.label;
@@ -89,17 +89,24 @@ const StageNodeComponent = (props)=>{
89
89
  const [isAddingTask, setIsAddingTask] = (0, external_react_namespaceObject.useState)(false);
90
90
  const [isReplacingTask, setIsReplacingTask] = (0, external_react_namespaceObject.useState)(false);
91
91
  (0, external_react_namespaceObject.useEffect)(()=>{
92
- if (pendingReplaceTask?.groupIndex != null && pendingReplaceTask?.taskIndex != null) {
93
- const taskGroup = tasks[pendingReplaceTask.groupIndex];
94
- taskStateReference.current = {
95
- isParallel: (taskGroup?.length ?? 0) > 1,
96
- groupIndex: pendingReplaceTask.groupIndex,
97
- taskIndex: pendingReplaceTask.taskIndex
98
- };
99
- setIsReplacingTask(true);
100
- } else setIsReplacingTask(false);
92
+ if (pendingReplaceTask) {
93
+ const match = tasks.flatMap((group, gi)=>group.map((task, ti)=>({
94
+ task,
95
+ groupIndex: gi,
96
+ taskIndex: ti
97
+ }))).find(({ task })=>task.id === selectedTaskId);
98
+ if (match) {
99
+ taskStateReference.current = {
100
+ isParallel: (tasks[match.groupIndex]?.length ?? 0) > 1,
101
+ groupIndex: match.groupIndex,
102
+ taskIndex: match.taskIndex
103
+ };
104
+ setIsReplacingTask(true);
105
+ }
106
+ }
101
107
  }, [
102
108
  pendingReplaceTask,
109
+ selectedTaskId,
103
110
  tasks
104
111
  ]);
105
112
  const [activeDragId, setActiveDragId] = (0, external_react_namespaceObject.useState)(null);
@@ -202,7 +209,11 @@ const StageNodeComponent = (props)=>{
202
209
  const contextMenuItems = (0, external_react_namespaceObject.useCallback)((isParallel, groupIndex, taskIndex, tasksLength, taskGroupLength, isAboveParallel, isBelowParallel)=>{
203
210
  const items = [];
204
211
  if (onReplaceTaskFromToolbox) {
205
- items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getMenuItem)('replace-task', 'Replace task', ()=>setIsReplacingTask(true)));
212
+ items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getMenuItem)('replace-task', 'Replace task', ()=>{
213
+ const taskId = tasks[groupIndex]?.[taskIndex]?.id;
214
+ if (taskId) onTaskClick?.(taskId);
215
+ setIsReplacingTask(true);
216
+ }));
206
217
  items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getDivider)());
207
218
  }
208
219
  if (onTaskGroupModification) {
@@ -215,8 +226,10 @@ const StageNodeComponent = (props)=>{
215
226
  return items;
216
227
  }, [
217
228
  onReplaceTaskFromToolbox,
229
+ onTaskClick,
218
230
  onTaskGroupModification,
219
- reGroupTaskFunction
231
+ reGroupTaskFunction,
232
+ tasks
220
233
  ]);
221
234
  const { setSelectedNodeId } = (0, hooks_index_cjs_namespaceObject.useNodeSelection)();
222
235
  const handleStageClick = (0, external_react_namespaceObject.useCallback)(()=>{
@@ -254,17 +267,10 @@ const StageNodeComponent = (props)=>{
254
267
  id
255
268
  ]);
256
269
  const handleReplaceTaskToolboxItemSelected = (0, external_react_namespaceObject.useCallback)((item)=>{
257
- setIsReplacingTask(true);
258
- const groupIndex = taskStateReference.current.groupIndex;
259
- const taskIndex = taskStateReference.current.taskIndex;
260
- const taskId = tasks[groupIndex]?.[taskIndex]?.id;
261
- if (taskId) onTaskClick?.(taskId);
262
270
  onReplaceTaskFromToolbox?.(item, taskStateReference.current.groupIndex, taskStateReference.current.taskIndex);
263
271
  setIsReplacingTask(false);
264
272
  }, [
265
- onReplaceTaskFromToolbox,
266
- onTaskClick,
267
- tasks
273
+ onReplaceTaskFromToolbox
268
274
  ]);
269
275
  const handleConfigurations = (0, external_react_namespaceObject.useMemo)(()=>isException ? [] : [
270
276
  {
@@ -526,7 +532,7 @@ const StageNodeComponent = (props)=>{
526
532
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_DraggableTask_cjs_namespaceObject.DraggableTask, {
527
533
  task: task,
528
534
  taskExecution: taskExecution,
529
- isSelected: !!selectedTasks?.includes(task.id),
535
+ isSelected: selectedTaskId === task.id,
530
536
  isParallel: isParallel,
531
537
  contextMenuItems: contextMenuItems(isParallel, groupIndex, taskIndex, tasks.length, taskGroup.length, (tasks[groupIndex - 1]?.length ?? 0) > 1, (tasks[groupIndex + 1]?.length ?? 0) > 1),
532
538
  onTaskClick: handleTaskClick,
@@ -1 +1 @@
1
- {"version":3,"file":"StageNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.tsx"],"names":[],"mappings":"AAsDA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAkpBxD,eAAO,MAAM,SAAS,8CAxoBa,cAAc,6CAwoBA,CAAC"}
1
+ {"version":3,"file":"StageNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.tsx"],"names":[],"mappings":"AAsDA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAspBxD,eAAO,MAAM,SAAS,8CA5oBa,cAAc,6CA4oBA,CAAC"}
@@ -33,7 +33,7 @@ const StageNodeComponent = (props)=>{
33
33
  const isException = stageDetails?.isException;
34
34
  const isReadOnly = !!stageDetails?.isReadOnly;
35
35
  const icon = stageDetails?.icon;
36
- const selectedTasks = stageDetails?.selectedTasks;
36
+ const selectedTaskId = stageDetails?.selectedTaskId;
37
37
  const defaultContent = stageDetails?.defaultContent || 'Add first task';
38
38
  const status = execution?.stageStatus?.status;
39
39
  const statusLabel = execution?.stageStatus?.label;
@@ -61,17 +61,24 @@ const StageNodeComponent = (props)=>{
61
61
  const [isAddingTask, setIsAddingTask] = useState(false);
62
62
  const [isReplacingTask, setIsReplacingTask] = useState(false);
63
63
  useEffect(()=>{
64
- if (pendingReplaceTask?.groupIndex != null && pendingReplaceTask?.taskIndex != null) {
65
- const taskGroup = tasks[pendingReplaceTask.groupIndex];
66
- taskStateReference.current = {
67
- isParallel: (taskGroup?.length ?? 0) > 1,
68
- groupIndex: pendingReplaceTask.groupIndex,
69
- taskIndex: pendingReplaceTask.taskIndex
70
- };
71
- setIsReplacingTask(true);
72
- } else setIsReplacingTask(false);
64
+ if (pendingReplaceTask) {
65
+ const match = tasks.flatMap((group, gi)=>group.map((task, ti)=>({
66
+ task,
67
+ groupIndex: gi,
68
+ taskIndex: ti
69
+ }))).find(({ task })=>task.id === selectedTaskId);
70
+ if (match) {
71
+ taskStateReference.current = {
72
+ isParallel: (tasks[match.groupIndex]?.length ?? 0) > 1,
73
+ groupIndex: match.groupIndex,
74
+ taskIndex: match.taskIndex
75
+ };
76
+ setIsReplacingTask(true);
77
+ }
78
+ }
73
79
  }, [
74
80
  pendingReplaceTask,
81
+ selectedTaskId,
75
82
  tasks
76
83
  ]);
77
84
  const [activeDragId, setActiveDragId] = useState(null);
@@ -174,7 +181,11 @@ const StageNodeComponent = (props)=>{
174
181
  const contextMenuItems = useCallback((isParallel, groupIndex, taskIndex, tasksLength, taskGroupLength, isAboveParallel, isBelowParallel)=>{
175
182
  const items = [];
176
183
  if (onReplaceTaskFromToolbox) {
177
- items.push(getMenuItem('replace-task', 'Replace task', ()=>setIsReplacingTask(true)));
184
+ items.push(getMenuItem('replace-task', 'Replace task', ()=>{
185
+ const taskId = tasks[groupIndex]?.[taskIndex]?.id;
186
+ if (taskId) onTaskClick?.(taskId);
187
+ setIsReplacingTask(true);
188
+ }));
178
189
  items.push(getDivider());
179
190
  }
180
191
  if (onTaskGroupModification) {
@@ -187,8 +198,10 @@ const StageNodeComponent = (props)=>{
187
198
  return items;
188
199
  }, [
189
200
  onReplaceTaskFromToolbox,
201
+ onTaskClick,
190
202
  onTaskGroupModification,
191
- reGroupTaskFunction
203
+ reGroupTaskFunction,
204
+ tasks
192
205
  ]);
193
206
  const { setSelectedNodeId } = useNodeSelection();
194
207
  const handleStageClick = useCallback(()=>{
@@ -226,17 +239,10 @@ const StageNodeComponent = (props)=>{
226
239
  id
227
240
  ]);
228
241
  const handleReplaceTaskToolboxItemSelected = useCallback((item)=>{
229
- setIsReplacingTask(true);
230
- const groupIndex = taskStateReference.current.groupIndex;
231
- const taskIndex = taskStateReference.current.taskIndex;
232
- const taskId = tasks[groupIndex]?.[taskIndex]?.id;
233
- if (taskId) onTaskClick?.(taskId);
234
242
  onReplaceTaskFromToolbox?.(item, taskStateReference.current.groupIndex, taskStateReference.current.taskIndex);
235
243
  setIsReplacingTask(false);
236
244
  }, [
237
- onReplaceTaskFromToolbox,
238
- onTaskClick,
239
- tasks
245
+ onReplaceTaskFromToolbox
240
246
  ]);
241
247
  const handleConfigurations = useMemo(()=>isException ? [] : [
242
248
  {
@@ -498,7 +504,7 @@ const StageNodeComponent = (props)=>{
498
504
  return /*#__PURE__*/ jsx(DraggableTask, {
499
505
  task: task,
500
506
  taskExecution: taskExecution,
501
- isSelected: !!selectedTasks?.includes(task.id),
507
+ isSelected: selectedTaskId === task.id,
502
508
  isParallel: isParallel,
503
509
  contextMenuItems: contextMenuItems(isParallel, groupIndex, taskIndex, tasks.length, taskGroup.length, (tasks[groupIndex - 1]?.length ?? 0) > 1, (tasks[groupIndex + 1]?.length ?? 0) > 1),
504
510
  onTaskClick: handleTaskClick,
@@ -1339,6 +1339,13 @@ const initialTasksForAddReplace = [
1339
1339
  label: 'Document Review',
1340
1340
  icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
1341
1341
  }
1342
+ ],
1343
+ [
1344
+ {
1345
+ id: 'task-3',
1346
+ label: 'Process Validation',
1347
+ icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessIcon, {})
1348
+ }
1342
1349
  ]
1343
1350
  ];
1344
1351
  const availableTaskOptions = [
@@ -1408,7 +1415,7 @@ const AddAndReplaceTasksStory = ()=>{
1408
1415
  const edgeTypes = (0, external_react_namespaceObject.useMemo)(()=>({
1409
1416
  stage: external_StageEdge_cjs_namespaceObject.StageEdge
1410
1417
  }), []);
1411
- const [pendingReplaceTask, setPendingReplaceTask] = (0, external_react_namespaceObject.useState)();
1418
+ const [pendingReplaceTask, setPendingReplaceTask] = (0, external_react_namespaceObject.useState)(false);
1412
1419
  const [selectedTaskId, setSelectedTaskId] = (0, external_react_namespaceObject.useState)();
1413
1420
  const [menuAnchorEl, setMenuAnchorEl] = (0, external_react_namespaceObject.useState)(null);
1414
1421
  const [nodesState, setNodes, onNodesChange] = (0, react_cjs_namespaceObject.useNodesState)([
@@ -1482,7 +1489,8 @@ const AddAndReplaceTasksStory = ()=>{
1482
1489
  }
1483
1490
  };
1484
1491
  }));
1485
- setPendingReplaceTask(void 0);
1492
+ setPendingReplaceTask(false);
1493
+ setSelectedTaskId(void 0);
1486
1494
  }, [
1487
1495
  setNodes
1488
1496
  ]);
@@ -1511,17 +1519,28 @@ const AddAndReplaceTasksStory = ()=>{
1511
1519
  const handleTaskClick = (0, external_react_namespaceObject.useCallback)((taskId)=>{
1512
1520
  setSelectedTaskId(taskId);
1513
1521
  }, []);
1522
+ const handlePaneClick = (0, external_react_namespaceObject.useCallback)(()=>{
1523
+ setSelectedTaskId(void 0);
1524
+ setPendingReplaceTask(false);
1525
+ }, []);
1526
+ const handleNodesChange = (0, external_react_namespaceObject.useCallback)((...args)=>{
1527
+ onNodesChange(...args);
1528
+ const deselected = args[0].some((c)=>'select' === c.type && 'add-replace-stage' === c.id && !c.selected);
1529
+ if (deselected) {
1530
+ setPendingReplaceTask(false);
1531
+ setSelectedTaskId(void 0);
1532
+ }
1533
+ }, [
1534
+ onNodesChange
1535
+ ]);
1514
1536
  const currentTasks = nodesState.find((n)=>'add-replace-stage' === n.id)?.data.stageDetails.tasks || [];
1515
- const taskMenuItems = (0, external_react_namespaceObject.useMemo)(()=>currentTasks.flatMap((group, groupIndex)=>group.map((task, taskIndex)=>({
1537
+ const taskMenuItems = (0, external_react_namespaceObject.useMemo)(()=>currentTasks.flatMap((group)=>group.map((task)=>({
1516
1538
  title: task.label,
1517
1539
  variant: 'item',
1518
1540
  startIcon: task.icon,
1519
1541
  onClick: ()=>{
1520
1542
  setSelectedTaskId(task.id);
1521
- setPendingReplaceTask({
1522
- groupIndex,
1523
- taskIndex
1524
- });
1543
+ setPendingReplaceTask(true);
1525
1544
  setMenuAnchorEl(null);
1526
1545
  }
1527
1546
  }))), [
@@ -1531,12 +1550,12 @@ const AddAndReplaceTasksStory = ()=>{
1531
1550
  ...node,
1532
1551
  data: {
1533
1552
  ...node.data,
1534
- pendingReplaceTask: pendingReplaceTask,
1553
+ ...selectedTaskId && {
1554
+ pendingReplaceTask
1555
+ },
1535
1556
  stageDetails: {
1536
1557
  ...node.data.stageDetails,
1537
- selectedTasks: selectedTaskId ? [
1538
- selectedTaskId
1539
- ] : void 0
1558
+ selectedTaskId
1540
1559
  },
1541
1560
  onAddTaskFromToolbox: handleAddTask,
1542
1561
  onReplaceTaskFromToolbox: handleReplaceTask,
@@ -1556,13 +1575,14 @@ const AddAndReplaceTasksStory = ()=>{
1556
1575
  setEdges
1557
1576
  ]);
1558
1577
  const replaceButtonLabel = (0, external_react_namespaceObject.useMemo)(()=>{
1559
- if (pendingReplaceTask) {
1560
- const taskBeingReplaced = currentTasks[pendingReplaceTask.groupIndex]?.[pendingReplaceTask.taskIndex];
1578
+ if (pendingReplaceTask && selectedTaskId) {
1579
+ const taskBeingReplaced = currentTasks.flat().find((t)=>t.id === selectedTaskId);
1561
1580
  if (taskBeingReplaced) return `Replacing Task: ${taskBeingReplaced.label}`;
1562
1581
  }
1563
1582
  return 'Replace Task';
1564
1583
  }, [
1565
1584
  pendingReplaceTask,
1585
+ selectedTaskId,
1566
1586
  currentTasks
1567
1587
  ]);
1568
1588
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
@@ -1574,9 +1594,10 @@ const AddAndReplaceTasksStory = ()=>{
1574
1594
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_BaseCanvas_index_cjs_namespaceObject.BaseCanvas, {
1575
1595
  nodes: nodesWithMetadata,
1576
1596
  edges: edges,
1577
- onNodesChange: onNodesChange,
1597
+ onNodesChange: handleNodesChange,
1578
1598
  onEdgesChange: onEdgesChange,
1579
1599
  onConnect: onConnect,
1600
+ onPaneClick: handlePaneClick,
1580
1601
  nodeTypes: nodeTypes,
1581
1602
  edgeTypes: edgeTypes,
1582
1603
  mode: "design",
@@ -1 +1 @@
1
- {"version":3,"file":"StageNode.stories.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAyBvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA0FD,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA4CnC,eAAO,MAAM,OAAO,EAAE,KA2DrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAsE3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA8M7B,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KA+HvC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAoKpC,CAAC;AA8GF,eAAO,MAAM,uBAAuB,EAAE,KAOrC,CAAC;AA6TF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;AAuHF,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC"}
1
+ {"version":3,"file":"StageNode.stories.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAyBvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA0FD,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA4CnC,eAAO,MAAM,OAAO,EAAE,KA2DrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAsE3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA8M7B,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KA+HvC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAoKpC,CAAC;AA8GF,eAAO,MAAM,uBAAuB,EAAE,KAOrC,CAAC;AAkVF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;AAuHF,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC"}
@@ -1303,6 +1303,13 @@ const initialTasksForAddReplace = [
1303
1303
  label: 'Document Review',
1304
1304
  icon: /*#__PURE__*/ jsx(DocumentIcon, {})
1305
1305
  }
1306
+ ],
1307
+ [
1308
+ {
1309
+ id: 'task-3',
1310
+ label: 'Process Validation',
1311
+ icon: /*#__PURE__*/ jsx(ProcessIcon, {})
1312
+ }
1306
1313
  ]
1307
1314
  ];
1308
1315
  const availableTaskOptions = [
@@ -1372,7 +1379,7 @@ const AddAndReplaceTasksStory = ()=>{
1372
1379
  const edgeTypes = useMemo(()=>({
1373
1380
  stage: StageEdge
1374
1381
  }), []);
1375
- const [pendingReplaceTask, setPendingReplaceTask] = useState();
1382
+ const [pendingReplaceTask, setPendingReplaceTask] = useState(false);
1376
1383
  const [selectedTaskId, setSelectedTaskId] = useState();
1377
1384
  const [menuAnchorEl, setMenuAnchorEl] = useState(null);
1378
1385
  const [nodesState, setNodes, onNodesChange] = useNodesState([
@@ -1446,7 +1453,8 @@ const AddAndReplaceTasksStory = ()=>{
1446
1453
  }
1447
1454
  };
1448
1455
  }));
1449
- setPendingReplaceTask(void 0);
1456
+ setPendingReplaceTask(false);
1457
+ setSelectedTaskId(void 0);
1450
1458
  }, [
1451
1459
  setNodes
1452
1460
  ]);
@@ -1475,17 +1483,28 @@ const AddAndReplaceTasksStory = ()=>{
1475
1483
  const handleTaskClick = useCallback((taskId)=>{
1476
1484
  setSelectedTaskId(taskId);
1477
1485
  }, []);
1486
+ const handlePaneClick = useCallback(()=>{
1487
+ setSelectedTaskId(void 0);
1488
+ setPendingReplaceTask(false);
1489
+ }, []);
1490
+ const handleNodesChange = useCallback((...args)=>{
1491
+ onNodesChange(...args);
1492
+ const deselected = args[0].some((c)=>'select' === c.type && 'add-replace-stage' === c.id && !c.selected);
1493
+ if (deselected) {
1494
+ setPendingReplaceTask(false);
1495
+ setSelectedTaskId(void 0);
1496
+ }
1497
+ }, [
1498
+ onNodesChange
1499
+ ]);
1478
1500
  const currentTasks = nodesState.find((n)=>'add-replace-stage' === n.id)?.data.stageDetails.tasks || [];
1479
- const taskMenuItems = useMemo(()=>currentTasks.flatMap((group, groupIndex)=>group.map((task, taskIndex)=>({
1501
+ const taskMenuItems = useMemo(()=>currentTasks.flatMap((group)=>group.map((task)=>({
1480
1502
  title: task.label,
1481
1503
  variant: 'item',
1482
1504
  startIcon: task.icon,
1483
1505
  onClick: ()=>{
1484
1506
  setSelectedTaskId(task.id);
1485
- setPendingReplaceTask({
1486
- groupIndex,
1487
- taskIndex
1488
- });
1507
+ setPendingReplaceTask(true);
1489
1508
  setMenuAnchorEl(null);
1490
1509
  }
1491
1510
  }))), [
@@ -1495,12 +1514,12 @@ const AddAndReplaceTasksStory = ()=>{
1495
1514
  ...node,
1496
1515
  data: {
1497
1516
  ...node.data,
1498
- pendingReplaceTask: pendingReplaceTask,
1517
+ ...selectedTaskId && {
1518
+ pendingReplaceTask
1519
+ },
1499
1520
  stageDetails: {
1500
1521
  ...node.data.stageDetails,
1501
- selectedTasks: selectedTaskId ? [
1502
- selectedTaskId
1503
- ] : void 0
1522
+ selectedTaskId
1504
1523
  },
1505
1524
  onAddTaskFromToolbox: handleAddTask,
1506
1525
  onReplaceTaskFromToolbox: handleReplaceTask,
@@ -1520,13 +1539,14 @@ const AddAndReplaceTasksStory = ()=>{
1520
1539
  setEdges
1521
1540
  ]);
1522
1541
  const replaceButtonLabel = useMemo(()=>{
1523
- if (pendingReplaceTask) {
1524
- const taskBeingReplaced = currentTasks[pendingReplaceTask.groupIndex]?.[pendingReplaceTask.taskIndex];
1542
+ if (pendingReplaceTask && selectedTaskId) {
1543
+ const taskBeingReplaced = currentTasks.flat().find((t)=>t.id === selectedTaskId);
1525
1544
  if (taskBeingReplaced) return `Replacing Task: ${taskBeingReplaced.label}`;
1526
1545
  }
1527
1546
  return 'Replace Task';
1528
1547
  }, [
1529
1548
  pendingReplaceTask,
1549
+ selectedTaskId,
1530
1550
  currentTasks
1531
1551
  ]);
1532
1552
  return /*#__PURE__*/ jsx("div", {
@@ -1538,9 +1558,10 @@ const AddAndReplaceTasksStory = ()=>{
1538
1558
  children: /*#__PURE__*/ jsxs(BaseCanvas, {
1539
1559
  nodes: nodesWithMetadata,
1540
1560
  edges: edges,
1541
- onNodesChange: onNodesChange,
1561
+ onNodesChange: handleNodesChange,
1542
1562
  onEdgesChange: onEdgesChange,
1543
1563
  onConnect: onConnect,
1564
+ onPaneClick: handlePaneClick,
1544
1565
  nodeTypes: nodeTypes,
1545
1566
  edgeTypes: edgeTypes,
1546
1567
  mode: "design",
@@ -23,10 +23,7 @@ export interface StageNodeProps extends NodeProps {
23
23
  dragging: boolean;
24
24
  selected: boolean;
25
25
  id: string;
26
- pendingReplaceTask?: {
27
- groupIndex: number;
28
- taskIndex: number;
29
- };
26
+ pendingReplaceTask?: boolean;
30
27
  stageDetails: {
31
28
  label: string;
32
29
  defaultContent?: string;
@@ -38,7 +35,7 @@ export interface StageNodeProps extends NodeProps {
38
35
  isException?: boolean;
39
36
  isReadOnly?: boolean;
40
37
  tasks: StageTaskItem[][];
41
- selectedTasks?: string[];
38
+ selectedTaskId?: string;
42
39
  };
43
40
  addTaskLabel?: string;
44
41
  addTaskLoading?: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"StageNode.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAC1E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAChF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,KAAK,EAAE,QAAQ,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAEjE,aAAK,mBAAmB;IACtB,SAAS,cAAc;IACvB,SAAS,cAAc;IACvB,aAAa,kBAAkB;IAC/B,MAAM,WAAW;IACjB,UAAU,eAAe;IACzB,WAAW,gBAAgB;IAC3B,MAAM,WAAW;IACjB,UAAU,eAAe;CAC1B;AAED,MAAM,MAAM,WAAW,GAAG,GAAG,mBAAmB,EAAE,CAAC;AACnD,MAAM,MAAM,eAAe,GAAG,GAAG,mBAAmB,EAAE,CAAC;AAEvD,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC3B;AAED,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,kBAAkB,CAAC,EAAE;QACnB,UAAU,EAAE,MAAM,CAAC;QACnB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,YAAY,EAAE;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;QAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,oBAAoB,CAAC,EAAE,OAAO,CAAC;QAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,KAAK,EAAE,aAAa,EAAE,EAAE,CAAC;QACzB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;KAC1B,CAAC;IACF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,QAAQ,EAAE,CAAC;IACzB,SAAS,CAAC,EAAE;QACV,WAAW,EAAE;YACX,MAAM,CAAC,EAAE,WAAW,CAAC;YACrB,KAAK,CAAC,EAAE,MAAM,CAAC;YACf,QAAQ,CAAC,EAAE,MAAM,CAAC;SACnB,CAAC;QACF,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;KAChD,CAAC;IACF,SAAS,CAAC,EAAE,YAAY,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,oBAAoB,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpD,mBAAmB,CAAC,EAAE,oBAAoB,CAAC;IAC3C,WAAW,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,uBAAuB,CAAC,EAAE,CACxB,qBAAqB,EAAE,qBAAqB,EAC5C,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,MAAM,KACd,IAAI,CAAC;IACV,kBAAkB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,aAAa,CAAC,EAAE,CAAC,cAAc,EAAE,aAAa,EAAE,EAAE,KAAK,IAAI,CAAC;IAC5D,wBAAwB,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/F;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}
1
+ {"version":3,"file":"StageNode.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.types.ts"],"names":[],"mappings":"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"}
@@ -71,6 +71,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
71
71
  const [isTransitioning, setIsTransitioning] = (0, external_react_namespaceObject.useState)(false);
72
72
  const [animationDirection, setAnimationDirection] = (0, external_react_namespaceObject.useState)('forward');
73
73
  const navigationStack = (0, index_cjs_namespaceObject.useNavigationStack)();
74
+ const containerRef = (0, external_react_namespaceObject.useRef)(null);
74
75
  const transitionTimeoutRef = (0, external_react_namespaceObject.useRef)(void 0);
75
76
  const searchIdRef = (0, external_react_namespaceObject.useRef)(0);
76
77
  const initialItemsRef = (0, external_react_namespaceObject.useRef)(initialItems);
@@ -214,8 +215,15 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
214
215
  } else if (navigationStack.canGoBack) handleBackTransition();
215
216
  else onClose();
216
217
  };
218
+ const handleClickOutside = (e)=>{
219
+ if (containerRef.current && !containerRef.current.contains(e.target)) onClose();
220
+ };
217
221
  document.addEventListener('keydown', handleKeyDown);
218
- return ()=>document.removeEventListener('keydown', handleKeyDown);
222
+ document.addEventListener('mousedown', handleClickOutside);
223
+ return ()=>{
224
+ document.removeEventListener('keydown', handleKeyDown);
225
+ document.removeEventListener('mousedown', handleClickOutside);
226
+ };
219
227
  }, [
220
228
  isSearching,
221
229
  navigationStack.canGoBack,
@@ -224,39 +232,42 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
224
232
  startTransition,
225
233
  handleBackTransition
226
234
  ]);
227
- return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_layouts_index_cjs_namespaceObject.Column, {
228
- px: 20,
229
- py: 12,
230
- gap: 12,
231
- w: 320,
232
- h: 440,
233
- children: [
234
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Header_cjs_namespaceObject.Header, {
235
- title: currentParentItem?.name || title,
236
- onBack: handleBackTransition,
237
- showBackButton: navigationStack.canGoBack
238
- }),
239
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_SearchBox_cjs_namespaceObject.SearchBox, {
240
- value: search,
241
- onChange: handleSearch,
242
- clear: clearSearch,
243
- placeholder: "Search"
244
- }),
245
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_styles_cjs_namespaceObject.AnimatedContainer, {
246
- children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_styles_cjs_namespaceObject.AnimatedContent, {
247
- entering: isTransitioning,
248
- direction: animationDirection,
249
- children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_cjs_namespaceObject.ListView, {
250
- isLoading: childrenLoading || searchLoading || loading,
251
- items: isSearching && !isSearchingInitialItems ? searchedItems : items,
252
- emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
253
- enableSections: !isSearching,
254
- onItemClick: handleItemSelect,
255
- onItemHover: onItemHover
235
+ return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
236
+ ref: containerRef,
237
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_layouts_index_cjs_namespaceObject.Column, {
238
+ px: 20,
239
+ py: 12,
240
+ gap: 12,
241
+ w: 320,
242
+ h: 440,
243
+ children: [
244
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Header_cjs_namespaceObject.Header, {
245
+ title: currentParentItem?.name || title,
246
+ onBack: handleBackTransition,
247
+ showBackButton: navigationStack.canGoBack
248
+ }),
249
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_SearchBox_cjs_namespaceObject.SearchBox, {
250
+ value: search,
251
+ onChange: handleSearch,
252
+ clear: clearSearch,
253
+ placeholder: "Search"
254
+ }),
255
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_styles_cjs_namespaceObject.AnimatedContainer, {
256
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_styles_cjs_namespaceObject.AnimatedContent, {
257
+ entering: isTransitioning,
258
+ direction: animationDirection,
259
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_cjs_namespaceObject.ListView, {
260
+ isLoading: childrenLoading || searchLoading || loading,
261
+ items: isSearching && !isSearchingInitialItems ? searchedItems : items,
262
+ emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
263
+ enableSections: !isSearching,
264
+ onItemClick: handleItemSelect,
265
+ onItemHover: onItemHover
266
+ })
256
267
  })
257
268
  })
258
- })
259
- ]
269
+ ]
270
+ })
260
271
  });
261
272
  }
262
273
  exports.Toolbox = __webpack_exports__.Toolbox;
@@ -1 +1 @@
1
- {"version":3,"file":"Toolbox.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/Toolbox.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,QAAQ,EAAY,MAAM,YAAY,CAAC;AAuCrD,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,GAAG,IAAI,CAC1C,KAAK,EAAE,MAAM,EACb,gBAAgB,EAAE,OAAO,EACzB,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE;IAAE,YAAY,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,KAC5E,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AAE5B,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;CACpC;AAoBD,wBAAgB,OAAO,CAAC,CAAC,EAAE,EACzB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,KAAK,EACL,YAAY,EACZ,OAAO,GACR,EAAE,YAAY,CAAC,CAAC,CAAC,2CAuPjB"}
1
+ {"version":3,"file":"Toolbox.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/Toolbox.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,QAAQ,EAAY,MAAM,YAAY,CAAC;AAuCrD,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,GAAG,IAAI,CAC1C,KAAK,EAAE,MAAM,EACb,gBAAgB,EAAE,OAAO,EACzB,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE;IAAE,YAAY,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,KAC5E,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AAE5B,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;CACpC;AAoBD,wBAAgB,OAAO,CAAC,CAAC,EAAE,EACzB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,KAAK,EACL,YAAY,EACZ,OAAO,GACR,EAAE,YAAY,CAAC,CAAC,CAAC,2CAoQjB"}
@@ -43,6 +43,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
43
43
  const [isTransitioning, setIsTransitioning] = useState(false);
44
44
  const [animationDirection, setAnimationDirection] = useState('forward');
45
45
  const navigationStack = useNavigationStack();
46
+ const containerRef = useRef(null);
46
47
  const transitionTimeoutRef = useRef(void 0);
47
48
  const searchIdRef = useRef(0);
48
49
  const initialItemsRef = useRef(initialItems);
@@ -186,8 +187,15 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
186
187
  } else if (navigationStack.canGoBack) handleBackTransition();
187
188
  else onClose();
188
189
  };
190
+ const handleClickOutside = (e)=>{
191
+ if (containerRef.current && !containerRef.current.contains(e.target)) onClose();
192
+ };
189
193
  document.addEventListener('keydown', handleKeyDown);
190
- return ()=>document.removeEventListener('keydown', handleKeyDown);
194
+ document.addEventListener('mousedown', handleClickOutside);
195
+ return ()=>{
196
+ document.removeEventListener('keydown', handleKeyDown);
197
+ document.removeEventListener('mousedown', handleClickOutside);
198
+ };
191
199
  }, [
192
200
  isSearching,
193
201
  navigationStack.canGoBack,
@@ -196,39 +204,42 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
196
204
  startTransition,
197
205
  handleBackTransition
198
206
  ]);
199
- return /*#__PURE__*/ jsxs(Column, {
200
- px: 20,
201
- py: 12,
202
- gap: 12,
203
- w: 320,
204
- h: 440,
205
- children: [
206
- /*#__PURE__*/ jsx(Header, {
207
- title: currentParentItem?.name || title,
208
- onBack: handleBackTransition,
209
- showBackButton: navigationStack.canGoBack
210
- }),
211
- /*#__PURE__*/ jsx(SearchBox, {
212
- value: search,
213
- onChange: handleSearch,
214
- clear: clearSearch,
215
- placeholder: "Search"
216
- }),
217
- /*#__PURE__*/ jsx(AnimatedContainer, {
218
- children: /*#__PURE__*/ jsx(AnimatedContent, {
219
- entering: isTransitioning,
220
- direction: animationDirection,
221
- children: /*#__PURE__*/ jsx(ListView, {
222
- isLoading: childrenLoading || searchLoading || loading,
223
- items: isSearching && !isSearchingInitialItems ? searchedItems : items,
224
- emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
225
- enableSections: !isSearching,
226
- onItemClick: handleItemSelect,
227
- onItemHover: onItemHover
207
+ return /*#__PURE__*/ jsx("div", {
208
+ ref: containerRef,
209
+ children: /*#__PURE__*/ jsxs(Column, {
210
+ px: 20,
211
+ py: 12,
212
+ gap: 12,
213
+ w: 320,
214
+ h: 440,
215
+ children: [
216
+ /*#__PURE__*/ jsx(Header, {
217
+ title: currentParentItem?.name || title,
218
+ onBack: handleBackTransition,
219
+ showBackButton: navigationStack.canGoBack
220
+ }),
221
+ /*#__PURE__*/ jsx(SearchBox, {
222
+ value: search,
223
+ onChange: handleSearch,
224
+ clear: clearSearch,
225
+ placeholder: "Search"
226
+ }),
227
+ /*#__PURE__*/ jsx(AnimatedContainer, {
228
+ children: /*#__PURE__*/ jsx(AnimatedContent, {
229
+ entering: isTransitioning,
230
+ direction: animationDirection,
231
+ children: /*#__PURE__*/ jsx(ListView, {
232
+ isLoading: childrenLoading || searchLoading || loading,
233
+ items: isSearching && !isSearchingInitialItems ? searchedItems : items,
234
+ emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
235
+ enableSections: !isSearching,
236
+ onItemClick: handleItemSelect,
237
+ onItemHover: onItemHover
238
+ })
228
239
  })
229
240
  })
230
- })
231
- ]
241
+ ]
242
+ })
232
243
  });
233
244
  }
234
245
  export { Toolbox };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uipath/apollo-react",
3
- "version": "3.44.2",
3
+ "version": "3.44.3",
4
4
  "description": "Apollo Design System - React component library with Material UI theming",
5
5
  "repository": {
6
6
  "type": "git",