@uipath/apollo-react 3.33.2 → 3.34.0-pr221.1e152f4

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 (14) hide show
  1. package/dist/canvas/components/CanvasPositionControls.cjs +9 -7
  2. package/dist/canvas/components/CanvasPositionControls.d.ts +5 -1
  3. package/dist/canvas/components/CanvasPositionControls.d.ts.map +1 -1
  4. package/dist/canvas/components/CanvasPositionControls.js +8 -6
  5. package/dist/canvas/components/StageNode/StageNode.cjs +16 -10
  6. package/dist/canvas/components/StageNode/StageNode.d.ts.map +1 -1
  7. package/dist/canvas/components/StageNode/StageNode.js +17 -11
  8. package/dist/canvas/components/StageNode/StageNode.stories.cjs +145 -0
  9. package/dist/canvas/components/StageNode/StageNode.stories.d.ts +1 -0
  10. package/dist/canvas/components/StageNode/StageNode.stories.d.ts.map +1 -1
  11. package/dist/canvas/components/StageNode/StageNode.stories.js +143 -1
  12. package/dist/canvas/components/StageNode/StageNode.types.d.ts +1 -0
  13. package/dist/canvas/components/StageNode/StageNode.types.d.ts.map +1 -1
  14. package/package.json +3 -3
package/dist/canvas/components/CanvasPositionControls.cjs CHANGED
@@ -36,21 +36,23 @@ __webpack_require__.d(__webpack_exports__, {
36
36
  CanvasPositionControls: ()=>CanvasPositionControls
37
37
  });
38
38
  const jsx_runtime_namespaceObject = require("react/jsx-runtime");
39
+ const apollo_core_namespaceObject = require("@uipath/apollo-core");
40
+ var apollo_core_default = /*#__PURE__*/ __webpack_require__.n(apollo_core_namespaceObject);
39
41
  const index_cjs_namespaceObject = require("../icons/index.cjs");
40
42
  const external_layouts_index_cjs_namespaceObject = require("../layouts/index.cjs");
41
43
  const react_cjs_namespaceObject = require("../xyflow/react.cjs");
42
44
  const external_material_index_cjs_namespaceObject = require("../../material/index.cjs");
43
45
  const external_react_namespaceObject = require("react");
44
46
  const BaseCanvas_constants_cjs_namespaceObject = require("./BaseCanvas/BaseCanvas.constants.cjs");
45
- const apollo_core_namespaceObject = require("@uipath/apollo-core");
46
- var apollo_core_default = /*#__PURE__*/ __webpack_require__.n(apollo_core_namespaceObject);
47
- const CanvasPositionControls = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ orientation = 'horizontal', fitViewOptions, translations, onOrganize })=>{
47
+ const CanvasPositionControls = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ orientation = 'horizontal', fitViewOptions, zoomInOptions, zoomOutOptions, translations, onOrganize })=>{
48
48
  const { zoomIn, zoomOut, fitView } = (0, react_cjs_namespaceObject.useReactFlow)();
49
- const handleZoomIn = (0, external_react_namespaceObject.useCallback)(()=>zoomIn(), [
50
- zoomIn
49
+ const handleZoomIn = (0, external_react_namespaceObject.useCallback)(()=>zoomIn(zoomInOptions), [
50
+ zoomIn,
51
+ zoomInOptions
51
52
  ]);
52
- const handleZoomOut = (0, external_react_namespaceObject.useCallback)(()=>zoomOut(), [
53
- zoomOut
53
+ const handleZoomOut = (0, external_react_namespaceObject.useCallback)(()=>zoomOut(zoomOutOptions), [
54
+ zoomOut,
55
+ zoomOutOptions
54
56
  ]);
55
57
  const handleFitToView = (0, external_react_namespaceObject.useCallback)(()=>fitView(fitViewOptions ?? BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.fitViewOptions), [
56
58
  fitView,
package/dist/canvas/components/CanvasPositionControls.d.ts CHANGED
@@ -1,10 +1,14 @@
1
+ import { type ViewportHelperFunctionOptions as BaseCanvasZoomOptions } from '../xyflow/react.ts';
1
2
  import type { CanvasTranslations } from '../types';
2
3
  import type { BaseCanvasFitViewOptions } from './BaseCanvas/BaseCanvas.types';
4
+ export type { BaseCanvasZoomOptions };
3
5
  export interface CanvasPositionControlsProps {
4
6
  orientation?: 'horizontal' | 'vertical';
5
7
  fitViewOptions?: BaseCanvasFitViewOptions;
8
+ zoomInOptions?: BaseCanvasZoomOptions;
9
+ zoomOutOptions?: BaseCanvasZoomOptions;
6
10
  translations: CanvasTranslations;
7
11
  onOrganize?: () => void;
8
12
  }
9
- export declare const CanvasPositionControls: import("react").MemoExoticComponent<({ orientation, fitViewOptions, translations, onOrganize, }: CanvasPositionControlsProps) => import("react/jsx-runtime").JSX.Element>;
13
+ export declare const CanvasPositionControls: import("react").MemoExoticComponent<({ orientation, fitViewOptions, zoomInOptions, zoomOutOptions, translations, onOrganize, }: CanvasPositionControlsProps) => import("react/jsx-runtime").JSX.Element>;
10
14
  //# sourceMappingURL=CanvasPositionControls.d.ts.map
package/dist/canvas/components/CanvasPositionControls.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CanvasPositionControls.d.ts","sourceRoot":"","sources":["../../../src/canvas/components/CanvasPositionControls.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAEnD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAE9E,MAAM,WAAW,2BAA2B;IAC1C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,cAAc,CAAC,EAAE,wBAAwB,CAAC;IAC1C,YAAY,EAAE,kBAAkB,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,sBAAsB,mGAM9B,2BAA2B,6CA2D/B,CAAC"}
1
+ {"version":3,"file":"CanvasPositionControls.d.ts","sourceRoot":"","sources":["../../../src/canvas/components/CanvasPositionControls.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,6BAA6B,IAAI,qBAAqB,EAE5D,MAAM,0CAA0C,CAAC;AAGlD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAEnD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,YAAY,EAAE,qBAAqB,EAAE,CAAC;AAEtC,MAAM,WAAW,2BAA2B;IAC1C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,cAAc,CAAC,EAAE,wBAAwB,CAAC;IAC1C,aAAa,CAAC,EAAE,qBAAqB,CAAC;IACtC,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC,YAAY,EAAE,kBAAkB,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,sBAAsB,kIAQ9B,2BAA2B,6CA2D/B,CAAC"}
package/dist/canvas/components/CanvasPositionControls.js CHANGED
@@ -1,18 +1,20 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
+ import apollo_core from "@uipath/apollo-core";
2
3
  import { OrganizeIcon, ZoomToFitIcon } from "../icons/index.js";
3
4
  import { Column, Row } from "../layouts/index.js";
4
5
  import { useReactFlow } from "../xyflow/react.js";
5
6
  import { ApIcon, ApIconButton, ApTooltip } from "../../material/index.js";
6
7
  import { memo, useCallback } from "react";
7
8
  import { BASE_CANVAS_DEFAULTS } from "./BaseCanvas/BaseCanvas.constants.js";
8
- import apollo_core from "@uipath/apollo-core";
9
- const CanvasPositionControls = /*#__PURE__*/ memo(({ orientation = 'horizontal', fitViewOptions, translations, onOrganize })=>{
9
+ const CanvasPositionControls = /*#__PURE__*/ memo(({ orientation = 'horizontal', fitViewOptions, zoomInOptions, zoomOutOptions, translations, onOrganize })=>{
10
10
  const { zoomIn, zoomOut, fitView } = useReactFlow();
11
- const handleZoomIn = useCallback(()=>zoomIn(), [
12
- zoomIn
11
+ const handleZoomIn = useCallback(()=>zoomIn(zoomInOptions), [
12
+ zoomIn,
13
+ zoomInOptions
13
14
  ]);
14
- const handleZoomOut = useCallback(()=>zoomOut(), [
15
- zoomOut
15
+ const handleZoomOut = useCallback(()=>zoomOut(zoomOutOptions), [
16
+ zoomOut,
17
+ zoomOutOptions
16
18
  ]);
17
19
  const handleFitToView = useCallback(()=>fitView(fitViewOptions ?? BASE_CANVAS_DEFAULTS.fitViewOptions), [
18
20
  fitView,
package/dist/canvas/components/StageNode/StageNode.cjs CHANGED
@@ -47,7 +47,7 @@ const external_StageNode_styles_cjs_namespaceObject = require("./StageNode.style
47
47
  const external_StageNode_utils_cjs_namespaceObject = require("./StageNode.utils.cjs");
48
48
  const external_StageNodeTaskUtilities_cjs_namespaceObject = require("./StageNodeTaskUtilities.cjs");
49
49
  const StageNodeComponent = (props)=>{
50
- const { dragging, selected, id, width, execution, stageDetails, addTaskLabel = 'Add task', replaceTaskLabel = 'Replace task', taskOptions = [], menuItems, onStageClick, onTaskAdd, onAddTaskFromToolbox, onTaskToolboxSearch, onTaskClick, onTaskGroupModification, onStageTitleChange, onTaskReorder, onTaskReplace } = props;
50
+ const { dragging, selected, id, width, execution, stageDetails, addTaskLabel = 'Add task', addTaskLoading = false, replaceTaskLabel = 'Replace task', taskOptions = [], menuItems, onStageClick, onTaskAdd, onAddTaskFromToolbox, onTaskToolboxSearch, onTaskClick, onTaskGroupModification, onStageTitleChange, onTaskReorder, onTaskReplace } = props;
51
51
  const taskWidth = width ? width - external_StageNode_styles_cjs_namespaceObject.STAGE_CONTENT_INSET : void 0;
52
52
  const tasks = (0, external_react_namespaceObject.useMemo)(()=>stageDetails?.tasks || [], [
53
53
  stageDetails?.tasks
@@ -449,14 +449,19 @@ const StageNodeComponent = (props)=>{
449
449
  })
450
450
  }),
451
451
  (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTooltip, {
452
- content: addTaskLabel,
452
+ content: addTaskLoading ? 'Loading...' : addTaskLabel,
453
453
  placement: "top",
454
- children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIconButton, {
455
- onClick: handleTaskAddClick,
456
- size: "small",
457
- children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
458
- name: "add",
459
- size: "20px"
454
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
455
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIconButton, {
456
+ onClick: handleTaskAddClick,
457
+ size: "small",
458
+ disabled: addTaskLoading,
459
+ children: addTaskLoading ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApCircularProgress, {
460
+ size: 20
461
+ }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
462
+ name: "add",
463
+ size: "20px"
464
+ })
460
465
  })
461
466
  })
462
467
  })
@@ -545,10 +550,11 @@ const StageNodeComponent = (props)=>{
545
550
  }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Column, {
546
551
  py: 2,
547
552
  children: (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApLink, {
548
- onClick: handleTaskAddClick,
553
+ onClick: addTaskLoading ? void 0 : handleTaskAddClick,
549
554
  variant: apollo_core_namespaceObject.FontVariantToken.fontSizeS,
550
555
  style: {
551
- maxWidth: 'fit-content'
556
+ maxWidth: 'fit-content',
557
+ pointerEvents: addTaskLoading ? 'none' : void 0
552
558
  },
553
559
  children: defaultContent
554
560
  }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
package/dist/canvas/components/StageNode/StageNode.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"StageNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.tsx"],"names":[],"mappings":"AAqDA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AA8mBxD,eAAO,MAAM,SAAS,8CApmBa,cAAc,6CAomBA,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;AAynBxD,eAAO,MAAM,SAAS,8CA/mBa,cAAc,6CA+mBA,CAAC"}
package/dist/canvas/components/StageNode/StageNode.js CHANGED
@@ -4,7 +4,7 @@ import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrate
4
4
  import { FontVariantToken, Padding, Spacing } from "@uipath/apollo-core";
5
5
  import { Column, Row } from "../../layouts/index.js";
6
6
  import { Position, useStore, useViewport } from "../../xyflow/react.js";
7
- import { ApIcon, ApIconButton, ApLink, ApTooltip, ApTypography } from "../../../material/index.js";
7
+ import { ApCircularProgress, ApIcon, ApIconButton, ApLink, ApTooltip, ApTypography } from "../../../material/index.js";
8
8
  import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
9
9
  import { createPortal } from "react-dom";
10
10
  import { useConnectedHandles } from "../BaseCanvas/ConnectedHandlesContext.js";
@@ -19,7 +19,7 @@ import { INDENTATION_WIDTH, STAGE_CONTENT_INSET, StageContainer, StageContent, S
19
19
  import { flattenTasks, getProjection, reorderTasks } from "./StageNode.utils.js";
20
20
  import { getContextMenuItems, getMenuItem } from "./StageNodeTaskUtilities.js";
21
21
  const StageNodeComponent = (props)=>{
22
- const { dragging, selected, id, width, execution, stageDetails, addTaskLabel = 'Add task', replaceTaskLabel = 'Replace task', taskOptions = [], menuItems, onStageClick, onTaskAdd, onAddTaskFromToolbox, onTaskToolboxSearch, onTaskClick, onTaskGroupModification, onStageTitleChange, onTaskReorder, onTaskReplace } = props;
22
+ const { dragging, selected, id, width, execution, stageDetails, addTaskLabel = 'Add task', addTaskLoading = false, replaceTaskLabel = 'Replace task', taskOptions = [], menuItems, onStageClick, onTaskAdd, onAddTaskFromToolbox, onTaskToolboxSearch, onTaskClick, onTaskGroupModification, onStageTitleChange, onTaskReorder, onTaskReplace } = props;
23
23
  const taskWidth = width ? width - STAGE_CONTENT_INSET : void 0;
24
24
  const tasks = useMemo(()=>stageDetails?.tasks || [], [
25
25
  stageDetails?.tasks
@@ -421,14 +421,19 @@ const StageNodeComponent = (props)=>{
421
421
  })
422
422
  }),
423
423
  (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly && /*#__PURE__*/ jsx(ApTooltip, {
424
- content: addTaskLabel,
424
+ content: addTaskLoading ? 'Loading...' : addTaskLabel,
425
425
  placement: "top",
426
- children: /*#__PURE__*/ jsx(ApIconButton, {
427
- onClick: handleTaskAddClick,
428
- size: "small",
429
- children: /*#__PURE__*/ jsx(ApIcon, {
430
- name: "add",
431
- size: "20px"
426
+ children: /*#__PURE__*/ jsx("span", {
427
+ children: /*#__PURE__*/ jsx(ApIconButton, {
428
+ onClick: handleTaskAddClick,
429
+ size: "small",
430
+ disabled: addTaskLoading,
431
+ children: addTaskLoading ? /*#__PURE__*/ jsx(ApCircularProgress, {
432
+ size: 20
433
+ }) : /*#__PURE__*/ jsx(ApIcon, {
434
+ name: "add",
435
+ size: "20px"
436
+ })
432
437
  })
433
438
  })
434
439
  })
@@ -517,10 +522,11 @@ const StageNodeComponent = (props)=>{
517
522
  }) : /*#__PURE__*/ jsx(Column, {
518
523
  py: 2,
519
524
  children: (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly ? /*#__PURE__*/ jsx(ApLink, {
520
- onClick: handleTaskAddClick,
525
+ onClick: addTaskLoading ? void 0 : handleTaskAddClick,
521
526
  variant: FontVariantToken.fontSizeS,
522
527
  style: {
523
- maxWidth: 'fit-content'
528
+ maxWidth: 'fit-content',
529
+ pointerEvents: addTaskLoading ? 'none' : void 0
524
530
  },
525
531
  children: defaultContent
526
532
  }) : /*#__PURE__*/ jsx(ApTypography, {
package/dist/canvas/components/StageNode/StageNode.stories.cjs CHANGED
@@ -28,6 +28,7 @@ __webpack_require__.d(__webpack_exports__, {
28
28
  default: ()=>StageNode_stories,
29
29
  LoanProcessingWorkflow: ()=>LoanProcessingWorkflow,
30
30
  InteractiveTaskManagement: ()=>InteractiveTaskManagement,
31
+ AddTaskLoading: ()=>AddTaskLoading,
31
32
  WithTaskIcons: ()=>WithTaskIcons,
32
33
  Default: ()=>Default,
33
34
  ExecutionStatus: ()=>ExecutionStatus,
@@ -1529,7 +1530,150 @@ const AddAndReplaceTasks = {
1529
1530
  render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(AddAndReplaceTasksStory, {}),
1530
1531
  args: {}
1531
1532
  };
1533
+ const AddTaskLoadingStory = ()=>{
1534
+ const StageNodeWrapper = (0, external_react_namespaceObject.useMemo)(()=>function(props) {
1535
+ return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_cjs_namespaceObject.StageNode, {
1536
+ ...props,
1537
+ ...props.data
1538
+ });
1539
+ }, []);
1540
+ const nodeTypes = (0, external_react_namespaceObject.useMemo)(()=>({
1541
+ stage: StageNodeWrapper
1542
+ }), [
1543
+ StageNodeWrapper
1544
+ ]);
1545
+ const edgeTypes = (0, external_react_namespaceObject.useMemo)(()=>({
1546
+ stage: external_StageEdge_cjs_namespaceObject.StageEdge
1547
+ }), []);
1548
+ const initialNodes = (0, external_react_namespaceObject.useMemo)(()=>[
1549
+ {
1550
+ id: 'loading-stage-empty',
1551
+ type: 'stage',
1552
+ position: {
1553
+ x: 48,
1554
+ y: 96
1555
+ },
1556
+ width: 304,
1557
+ data: {
1558
+ stageDetails: {
1559
+ label: 'Empty Stage (click +)',
1560
+ tasks: []
1561
+ },
1562
+ addTaskLoading: false
1563
+ }
1564
+ },
1565
+ {
1566
+ id: 'loading-stage-with-tasks',
1567
+ type: 'stage',
1568
+ position: {
1569
+ x: 400,
1570
+ y: 96
1571
+ },
1572
+ width: 304,
1573
+ data: {
1574
+ stageDetails: {
1575
+ label: 'With Tasks (click +)',
1576
+ tasks: [
1577
+ [
1578
+ {
1579
+ id: 'task-1',
1580
+ label: 'Existing Task',
1581
+ icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
1582
+ }
1583
+ ],
1584
+ [
1585
+ {
1586
+ id: 'task-2',
1587
+ label: 'Another Task',
1588
+ icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
1589
+ }
1590
+ ]
1591
+ ]
1592
+ },
1593
+ addTaskLoading: false
1594
+ }
1595
+ }
1596
+ ], []);
1597
+ const [nodesState, setNodes, onNodesChange] = (0, react_cjs_namespaceObject.useNodesState)(initialNodes);
1598
+ const [edges, setEdges, onEdgesChange] = (0, react_cjs_namespaceObject.useEdgesState)([]);
1599
+ const setNodeLoading = (0, external_react_namespaceObject.useCallback)((nodeId, loading)=>{
1600
+ setNodes((nds)=>nds.map((node)=>node.id === nodeId ? {
1601
+ ...node,
1602
+ data: {
1603
+ ...node.data,
1604
+ addTaskLoading: loading
1605
+ }
1606
+ } : node));
1607
+ }, [
1608
+ setNodes
1609
+ ]);
1610
+ const handleTaskAddForNode = (0, external_react_namespaceObject.useCallback)((nodeId)=>{
1611
+ setNodeLoading(nodeId, true);
1612
+ setTimeout(()=>{
1613
+ setNodeLoading(nodeId, false);
1614
+ }, 3000);
1615
+ }, [
1616
+ setNodeLoading
1617
+ ]);
1618
+ const nodesWithHandler = (0, external_react_namespaceObject.useMemo)(()=>nodesState.map((node)=>({
1619
+ ...node,
1620
+ data: {
1621
+ ...node.data,
1622
+ onTaskAdd: ()=>handleTaskAddForNode(node.id)
1623
+ }
1624
+ })), [
1625
+ nodesState,
1626
+ handleTaskAddForNode
1627
+ ]);
1628
+ const onConnect = (0, external_react_namespaceObject.useCallback)((connection)=>setEdges((eds)=>(0, react_cjs_namespaceObject.addEdge)(connection, eds)), [
1629
+ setEdges
1630
+ ]);
1631
+ return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
1632
+ style: {
1633
+ width: '100vw',
1634
+ height: '100vh'
1635
+ },
1636
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.ReactFlowProvider, {
1637
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.BaseCanvas, {
1638
+ nodes: nodesWithHandler,
1639
+ edges: edges,
1640
+ onNodesChange: onNodesChange,
1641
+ onEdgesChange: onEdgesChange,
1642
+ onConnect: onConnect,
1643
+ nodeTypes: nodeTypes,
1644
+ edgeTypes: edgeTypes,
1645
+ mode: "design",
1646
+ connectionMode: react_cjs_namespaceObject.ConnectionMode.Strict,
1647
+ defaultEdgeOptions: {
1648
+ type: 'stage'
1649
+ },
1650
+ connectionLineComponent: external_StageConnectionEdge_cjs_namespaceObject.StageConnectionEdge,
1651
+ elevateEdgesOnSelect: true,
1652
+ defaultViewport: {
1653
+ x: 0,
1654
+ y: 0,
1655
+ zoom: 1.5
1656
+ },
1657
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.Panel, {
1658
+ position: "bottom-right",
1659
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasPositionControls_cjs_namespaceObject.CanvasPositionControls, {
1660
+ translations: external_types_cjs_namespaceObject.DefaultCanvasTranslations
1661
+ })
1662
+ })
1663
+ })
1664
+ })
1665
+ });
1666
+ };
1667
+ const AddTaskLoading = {
1668
+ name: 'Add Task Loading State',
1669
+ parameters: {
1670
+ useCustomRender: true
1671
+ },
1672
+ render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(AddTaskLoadingStory, {}),
1673
+ args: {}
1674
+ };
1532
1675
  exports.AddAndReplaceTasks = __webpack_exports__.AddAndReplaceTasks;
1676
+ exports.AddTaskLoading = __webpack_exports__.AddTaskLoading;
1533
1677
  exports.Default = __webpack_exports__.Default;
1534
1678
  exports.DraggableTaskReordering = __webpack_exports__.DraggableTaskReordering;
1535
1679
  exports.ExecutionStatus = __webpack_exports__.ExecutionStatus;
@@ -1539,6 +1683,7 @@ exports.WithTaskIcons = __webpack_exports__.WithTaskIcons;
1539
1683
  exports["default"] = __webpack_exports__["default"];
1540
1684
  for(var __webpack_i__ in __webpack_exports__)if (-1 === [
1541
1685
  "AddAndReplaceTasks",
1686
+ "AddTaskLoading",
1542
1687
  "Default",
1543
1688
  "DraggableTaskReordering",
1544
1689
  "ExecutionStatus",
package/dist/canvas/components/StageNode/StageNode.stories.d.ts CHANGED
@@ -10,4 +10,5 @@ export declare const InteractiveTaskManagement: Story;
10
10
  export declare const LoanProcessingWorkflow: Story;
11
11
  export declare const DraggableTaskReordering: Story;
12
12
  export declare const AddAndReplaceTasks: Story;
13
+ export declare const AddTaskLoading: Story;
13
14
  //# sourceMappingURL=StageNode.stories.d.ts.map
package/dist/canvas/components/StageNode/StageNode.stories.d.ts.map CHANGED
@@ -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;AAuBvD,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;AAyLF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,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;AAuBvD,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;AAyLF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;AAyHF,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC"}
package/dist/canvas/components/StageNode/StageNode.stories.js CHANGED
@@ -1494,4 +1494,146 @@ const AddAndReplaceTasks = {
1494
1494
  render: ()=>/*#__PURE__*/ jsx(AddAndReplaceTasksStory, {}),
1495
1495
  args: {}
1496
1496
  };
1497
- export { AddAndReplaceTasks, Default, DraggableTaskReordering, ExecutionStatus, InteractiveTaskManagement, LoanProcessingWorkflow, WithTaskIcons, StageNode_stories as default };
1497
+ const AddTaskLoadingStory = ()=>{
1498
+ const StageNodeWrapper = useMemo(()=>function(props) {
1499
+ return /*#__PURE__*/ jsx(StageNode, {
1500
+ ...props,
1501
+ ...props.data
1502
+ });
1503
+ }, []);
1504
+ const nodeTypes = useMemo(()=>({
1505
+ stage: StageNodeWrapper
1506
+ }), [
1507
+ StageNodeWrapper
1508
+ ]);
1509
+ const edgeTypes = useMemo(()=>({
1510
+ stage: StageEdge
1511
+ }), []);
1512
+ const initialNodes = useMemo(()=>[
1513
+ {
1514
+ id: 'loading-stage-empty',
1515
+ type: 'stage',
1516
+ position: {
1517
+ x: 48,
1518
+ y: 96
1519
+ },
1520
+ width: 304,
1521
+ data: {
1522
+ stageDetails: {
1523
+ label: 'Empty Stage (click +)',
1524
+ tasks: []
1525
+ },
1526
+ addTaskLoading: false
1527
+ }
1528
+ },
1529
+ {
1530
+ id: 'loading-stage-with-tasks',
1531
+ type: 'stage',
1532
+ position: {
1533
+ x: 400,
1534
+ y: 96
1535
+ },
1536
+ width: 304,
1537
+ data: {
1538
+ stageDetails: {
1539
+ label: 'With Tasks (click +)',
1540
+ tasks: [
1541
+ [
1542
+ {
1543
+ id: 'task-1',
1544
+ label: 'Existing Task',
1545
+ icon: /*#__PURE__*/ jsx(VerificationIcon, {})
1546
+ }
1547
+ ],
1548
+ [
1549
+ {
1550
+ id: 'task-2',
1551
+ label: 'Another Task',
1552
+ icon: /*#__PURE__*/ jsx(DocumentIcon, {})
1553
+ }
1554
+ ]
1555
+ ]
1556
+ },
1557
+ addTaskLoading: false
1558
+ }
1559
+ }
1560
+ ], []);
1561
+ const [nodesState, setNodes, onNodesChange] = useNodesState(initialNodes);
1562
+ const [edges, setEdges, onEdgesChange] = useEdgesState([]);
1563
+ const setNodeLoading = useCallback((nodeId, loading)=>{
1564
+ setNodes((nds)=>nds.map((node)=>node.id === nodeId ? {
1565
+ ...node,
1566
+ data: {
1567
+ ...node.data,
1568
+ addTaskLoading: loading
1569
+ }
1570
+ } : node));
1571
+ }, [
1572
+ setNodes
1573
+ ]);
1574
+ const handleTaskAddForNode = useCallback((nodeId)=>{
1575
+ setNodeLoading(nodeId, true);
1576
+ setTimeout(()=>{
1577
+ setNodeLoading(nodeId, false);
1578
+ }, 3000);
1579
+ }, [
1580
+ setNodeLoading
1581
+ ]);
1582
+ const nodesWithHandler = useMemo(()=>nodesState.map((node)=>({
1583
+ ...node,
1584
+ data: {
1585
+ ...node.data,
1586
+ onTaskAdd: ()=>handleTaskAddForNode(node.id)
1587
+ }
1588
+ })), [
1589
+ nodesState,
1590
+ handleTaskAddForNode
1591
+ ]);
1592
+ const onConnect = useCallback((connection)=>setEdges((eds)=>addEdge(connection, eds)), [
1593
+ setEdges
1594
+ ]);
1595
+ return /*#__PURE__*/ jsx("div", {
1596
+ style: {
1597
+ width: '100vw',
1598
+ height: '100vh'
1599
+ },
1600
+ children: /*#__PURE__*/ jsx(ReactFlowProvider, {
1601
+ children: /*#__PURE__*/ jsx(BaseCanvas, {
1602
+ nodes: nodesWithHandler,
1603
+ edges: edges,
1604
+ onNodesChange: onNodesChange,
1605
+ onEdgesChange: onEdgesChange,
1606
+ onConnect: onConnect,
1607
+ nodeTypes: nodeTypes,
1608
+ edgeTypes: edgeTypes,
1609
+ mode: "design",
1610
+ connectionMode: ConnectionMode.Strict,
1611
+ defaultEdgeOptions: {
1612
+ type: 'stage'
1613
+ },
1614
+ connectionLineComponent: StageConnectionEdge,
1615
+ elevateEdgesOnSelect: true,
1616
+ defaultViewport: {
1617
+ x: 0,
1618
+ y: 0,
1619
+ zoom: 1.5
1620
+ },
1621
+ children: /*#__PURE__*/ jsx(Panel, {
1622
+ position: "bottom-right",
1623
+ children: /*#__PURE__*/ jsx(CanvasPositionControls, {
1624
+ translations: DefaultCanvasTranslations
1625
+ })
1626
+ })
1627
+ })
1628
+ })
1629
+ });
1630
+ };
1631
+ const AddTaskLoading = {
1632
+ name: 'Add Task Loading State',
1633
+ parameters: {
1634
+ useCustomRender: true
1635
+ },
1636
+ render: ()=>/*#__PURE__*/ jsx(AddTaskLoadingStory, {}),
1637
+ args: {}
1638
+ };
1639
+ export { AddAndReplaceTasks, AddTaskLoading, Default, DraggableTaskReordering, ExecutionStatus, InteractiveTaskManagement, LoanProcessingWorkflow, WithTaskIcons, StageNode_stories as default };
package/dist/canvas/components/StageNode/StageNode.types.d.ts CHANGED
@@ -37,6 +37,7 @@ export interface StageNodeProps extends NodeProps {
37
37
  selectedTasks?: string[];
38
38
  };
39
39
  addTaskLabel?: string;
40
+ addTaskLoading?: boolean;
40
41
  replaceTaskLabel?: string;
41
42
  taskOptions?: ListItem[];
42
43
  execution?: {
package/dist/canvas/components/StageNode/StageNode.types.d.ts.map CHANGED
@@ -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,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,KAAK,EAAE,QAAQ,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AACjE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAE7E,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,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,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,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACpF;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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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uipath/apollo-react",
3
- "version": "3.33.2",
3
+ "version": "3.34.0-pr221.1e152f4",
4
4
  "description": "Apollo Design System - React component library with Material UI theming",
5
5
  "repository": {
6
6
  "type": "git",
@@ -198,8 +198,8 @@
198
198
  "use-sync-external-store": "^1.2.0",
199
199
  "zod": "^4.3.5",
200
200
  "zustand": "^5.0.9",
201
- "@uipath/apollo-wind": "0.9.1",
202
- "@uipath/apollo-core": "5.7.0"
201
+ "@uipath/apollo-core": "5.7.0",
202
+ "@uipath/apollo-wind": "0.9.1"
203
203
  },
204
204
  "devDependencies": {
205
205
  "@lingui/cli": "^5.6.1",