@uipath/apollo-react 3.44.0 → 3.44.2-pr255.af80ea0

package/dist/canvas/components/TaskNode/TaskNode.cjs

@@ -0,0 +1,235 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    TaskNodeContent: ()=>TaskNodeContent,
+    TaskNode: ()=>TaskNode
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const apollo_core_namespaceObject = require("@uipath/apollo-core");
+const index_cjs_namespaceObject = require("../../layouts/index.cjs");
+const external_material_index_cjs_namespaceObject = require("../../../material/index.cjs");
+const external_react_namespaceObject = require("react");
+const external_ExecutionStatusIcon_index_cjs_namespaceObject = require("../ExecutionStatusIcon/index.cjs");
+const StageNode_styles_cjs_namespaceObject = require("../StageNode/StageNode.styles.cjs");
+const TaskMenu_cjs_namespaceObject = require("../StageNode/TaskMenu.cjs");
+const external_TaskNodeContext_cjs_namespaceObject = require("./TaskNodeContext.cjs");
+const DefaultTaskIcon = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("svg", {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("rect", {
+                x: "3",
+                y: "3",
+                width: "7",
+                height: "7",
+                rx: "1"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("rect", {
+                x: "14",
+                y: "3",
+                width: "7",
+                height: "7",
+                rx: "1"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("rect", {
+                x: "3",
+                y: "14",
+                width: "7",
+                height: "7",
+                rx: "1"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("rect", {
+                x: "14",
+                y: "14",
+                width: "7",
+                height: "7",
+                rx: "1"
+            })
+        ]
+    });
+const generateBadgeText = (taskExecution)=>{
+    if (!taskExecution.badge) return;
+    if (taskExecution.retryCount && taskExecution.retryCount > 1) return `${taskExecution.badge} x${taskExecution.retryCount}`;
+    return taskExecution.badge;
+};
+const TaskNodeContent = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ taskId, data, isDragging, isHovered })=>{
+    const { label, iconElement, execution, contextMenuItems, onMenuOpenChange } = data;
+    const showMenu = isHovered && contextMenuItems && contextMenuItems.length > 0;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
+        flex: 1,
+        style: {
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+        },
+        gap: apollo_core_namespaceObject.Padding.PadXs,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
+                align: "center",
+                justify: "space-between",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
+                        gap: apollo_core_namespaceObject.Spacing.SpacingXs,
+                        align: "center",
+                        style: {
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            flex: 1
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StageNode_styles_cjs_namespaceObject.StageTaskIcon, {
+                                children: iconElement ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DefaultTaskIcon, {})
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTooltip, {
+                                content: label,
+                                placement: "top",
+                                smartTooltip: true,
+                                ...isDragging && {
+                                    isOpen: false
+                                },
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
+                                    variant: apollo_core_namespaceObject.FontVariantToken.fontSizeM,
+                                    color: "var(--uix-canvas-foreground)",
+                                    style: {
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap'
+                                    },
+                                    children: label
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
+                        align: "center",
+                        gap: apollo_core_namespaceObject.Spacing.SpacingXs,
+                        children: [
+                            showMenu && contextMenuItems && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TaskMenu_cjs_namespaceObject.TaskMenu, {
+                                taskId: taskId,
+                                contextMenuItems: contextMenuItems,
+                                onMenuOpenChange: onMenuOpenChange
+                            }),
+                            execution?.status && 'NotExecuted' !== execution.status && (execution.message ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTooltip, {
+                                content: execution.message,
+                                placement: "top",
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ExecutionStatusIcon_index_cjs_namespaceObject.ExecutionStatusIcon, {
+                                    status: execution.status
+                                })
+                            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ExecutionStatusIcon_index_cjs_namespaceObject.ExecutionStatusIcon, {
+                                status: execution.status
+                            }))
+                        ]
+                    })
+                ]
+            }),
+            execution && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
+                align: "center",
+                justify: "space-between",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
+                        gap: '2px',
+                        children: [
+                            execution?.duration && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
+                                variant: apollo_core_namespaceObject.FontVariantToken.fontSizeS,
+                                color: "var(--uix-canvas-foreground-de-emp)",
+                                children: execution.duration
+                            }),
+                            execution?.retryDuration && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StageNode_styles_cjs_namespaceObject.StageTaskRetryDuration, {
+                                status: execution.badgeStatus ?? 'warning',
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
+                                    variant: apollo_core_namespaceObject.FontVariantToken.fontSizeS,
+                                    color: "inherit",
+                                    children: `(+${execution.retryDuration})`
+                                })
+                            })
+                        ]
+                    }),
+                    execution?.badge && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApBadge, {
+                        size: external_material_index_cjs_namespaceObject.BadgeSize.SMALL,
+                        status: execution.badgeStatus,
+                        label: generateBadgeText(execution) ?? ''
+                    })
+                ]
+            })
+        ]
+    });
+});
+TaskNodeContent.displayName = 'TaskNodeContent';
+const TaskNodeComponent = ({ id, data, selected, dragging })=>{
+    const [isHovered, setIsHovered] = (0, external_react_namespaceObject.useState)(false);
+    const isParallel = (0, external_TaskNodeContext_cjs_namespaceObject.useIsTaskParallel)(id);
+    const context = (0, external_TaskNodeContext_cjs_namespaceObject.useOptionalTaskNodeContext)();
+    const hasExecution = !!data.execution;
+    const handleMouseEnter = (0, external_react_namespaceObject.useCallback)(()=>setIsHovered(true), []);
+    const handleMouseLeave = (0, external_react_namespaceObject.useCallback)(()=>setIsHovered(false), []);
+    const handleClick = (0, external_react_namespaceObject.useCallback)(()=>{
+        const clickHandler = context?.onTaskClick || data.onTaskClick;
+        const selectHandler = context?.onTaskSelect || data.onTaskSelect;
+        clickHandler?.(id);
+        selectHandler?.(id);
+    }, [
+        context,
+        id,
+        data.onTaskClick,
+        data.onTaskSelect
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StageNode_styles_cjs_namespaceObject.StageTask, {
+        "data-testid": `task-node-${id}`,
+        selected: selected || isHovered,
+        status: data.execution?.status,
+        isParallel: isParallel,
+        isDragEnabled: false,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onClick: handleClick,
+        style: {
+            cursor: context?.isReadOnly ? 'default' : hasExecution ? 'default' : 'pointer',
+            boxShadow: selected ? '0 0 0 2px var(--uix-canvas-secondary-pressed)' : void 0,
+            width: data.width ? `${data.width}px` : void 0
+        },
+        className: hasExecution ? 'nodrag nopan' : 'nopan',
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TaskNodeContent, {
+            taskId: id,
+            data: data,
+            isDragging: dragging,
+            isHovered: isHovered
+        })
+    });
+};
+const TaskNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(TaskNodeComponent);
+TaskNode.displayName = 'TaskNode';
+exports.TaskNode = __webpack_exports__.TaskNode;
+exports.TaskNodeContent = __webpack_exports__.TaskNodeContent;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "TaskNode",
+    "TaskNodeContent"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/TaskNode/TaskNode.d.ts

@@ -0,0 +1,11 @@
+import type { TaskNodeData, TaskNodeProps } from './TaskNode.types';
+interface TaskContentProps {
+    taskId: string;
+    data: TaskNodeData;
+    isDragging?: boolean;
+    isHovered?: boolean;
+}
+export declare const TaskNodeContent: import("react").MemoExoticComponent<({ taskId, data, isDragging, isHovered }: TaskContentProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const TaskNode: import("react").MemoExoticComponent<({ id, data, selected, dragging }: TaskNodeProps) => import("react/jsx-runtime").JSX.Element>;
+export {};
+//# sourceMappingURL=TaskNode.d.ts.map

package/dist/canvas/components/TaskNode/TaskNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/TaskNode/TaskNode.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AA8BpE,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,YAAY,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAKD,eAAO,MAAM,eAAe,gFAAkD,gBAAgB,6CAiF5F,CAAC;AA8DH,eAAO,MAAM,QAAQ,yEA9CwC,aAAa,6CA8C3B,CAAC"}

package/dist/canvas/components/TaskNode/TaskNode.js

@@ -0,0 +1,198 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FontVariantToken, Padding, Spacing } from "@uipath/apollo-core";
+import { Column, Row } from "../../layouts/index.js";
+import { ApBadge, ApTooltip, ApTypography, BadgeSize } from "../../../material/index.js";
+import { memo, useCallback, useState } from "react";
+import { ExecutionStatusIcon } from "../ExecutionStatusIcon/index.js";
+import { StageTask, StageTaskIcon, StageTaskRetryDuration } from "../StageNode/StageNode.styles.js";
+import { TaskMenu } from "../StageNode/TaskMenu.js";
+import { useIsTaskParallel, useOptionalTaskNodeContext } from "./TaskNodeContext.js";
+const DefaultTaskIcon = ()=>/*#__PURE__*/ jsxs("svg", {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        children: [
+            /*#__PURE__*/ jsx("rect", {
+                x: "3",
+                y: "3",
+                width: "7",
+                height: "7",
+                rx: "1"
+            }),
+            /*#__PURE__*/ jsx("rect", {
+                x: "14",
+                y: "3",
+                width: "7",
+                height: "7",
+                rx: "1"
+            }),
+            /*#__PURE__*/ jsx("rect", {
+                x: "3",
+                y: "14",
+                width: "7",
+                height: "7",
+                rx: "1"
+            }),
+            /*#__PURE__*/ jsx("rect", {
+                x: "14",
+                y: "14",
+                width: "7",
+                height: "7",
+                rx: "1"
+            })
+        ]
+    });
+const generateBadgeText = (taskExecution)=>{
+    if (!taskExecution.badge) return;
+    if (taskExecution.retryCount && taskExecution.retryCount > 1) return `${taskExecution.badge} x${taskExecution.retryCount}`;
+    return taskExecution.badge;
+};
+const TaskNodeContent = /*#__PURE__*/ memo(({ taskId, data, isDragging, isHovered })=>{
+    const { label, iconElement, execution, contextMenuItems, onMenuOpenChange } = data;
+    const showMenu = isHovered && contextMenuItems && contextMenuItems.length > 0;
+    return /*#__PURE__*/ jsxs(Column, {
+        flex: 1,
+        style: {
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+        },
+        gap: Padding.PadXs,
+        children: [
+            /*#__PURE__*/ jsxs(Row, {
+                align: "center",
+                justify: "space-between",
+                children: [
+                    /*#__PURE__*/ jsxs(Row, {
+                        gap: Spacing.SpacingXs,
+                        align: "center",
+                        style: {
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            flex: 1
+                        },
+                        children: [
+                            /*#__PURE__*/ jsx(StageTaskIcon, {
+                                children: iconElement ?? /*#__PURE__*/ jsx(DefaultTaskIcon, {})
+                            }),
+                            /*#__PURE__*/ jsx(ApTooltip, {
+                                content: label,
+                                placement: "top",
+                                smartTooltip: true,
+                                ...isDragging && {
+                                    isOpen: false
+                                },
+                                children: /*#__PURE__*/ jsx(ApTypography, {
+                                    variant: FontVariantToken.fontSizeM,
+                                    color: "var(--uix-canvas-foreground)",
+                                    style: {
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap'
+                                    },
+                                    children: label
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(Row, {
+                        align: "center",
+                        gap: Spacing.SpacingXs,
+                        children: [
+                            showMenu && contextMenuItems && /*#__PURE__*/ jsx(TaskMenu, {
+                                taskId: taskId,
+                                contextMenuItems: contextMenuItems,
+                                onMenuOpenChange: onMenuOpenChange
+                            }),
+                            execution?.status && 'NotExecuted' !== execution.status && (execution.message ? /*#__PURE__*/ jsx(ApTooltip, {
+                                content: execution.message,
+                                placement: "top",
+                                children: /*#__PURE__*/ jsx(ExecutionStatusIcon, {
+                                    status: execution.status
+                                })
+                            }) : /*#__PURE__*/ jsx(ExecutionStatusIcon, {
+                                status: execution.status
+                            }))
+                        ]
+                    })
+                ]
+            }),
+            execution && /*#__PURE__*/ jsxs(Row, {
+                align: "center",
+                justify: "space-between",
+                children: [
+                    /*#__PURE__*/ jsxs(Row, {
+                        gap: '2px',
+                        children: [
+                            execution?.duration && /*#__PURE__*/ jsx(ApTypography, {
+                                variant: FontVariantToken.fontSizeS,
+                                color: "var(--uix-canvas-foreground-de-emp)",
+                                children: execution.duration
+                            }),
+                            execution?.retryDuration && /*#__PURE__*/ jsx(StageTaskRetryDuration, {
+                                status: execution.badgeStatus ?? 'warning',
+                                children: /*#__PURE__*/ jsx(ApTypography, {
+                                    variant: FontVariantToken.fontSizeS,
+                                    color: "inherit",
+                                    children: `(+${execution.retryDuration})`
+                                })
+                            })
+                        ]
+                    }),
+                    execution?.badge && /*#__PURE__*/ jsx(ApBadge, {
+                        size: BadgeSize.SMALL,
+                        status: execution.badgeStatus,
+                        label: generateBadgeText(execution) ?? ''
+                    })
+                ]
+            })
+        ]
+    });
+});
+TaskNodeContent.displayName = 'TaskNodeContent';
+const TaskNodeComponent = ({ id, data, selected, dragging })=>{
+    const [isHovered, setIsHovered] = useState(false);
+    const isParallel = useIsTaskParallel(id);
+    const context = useOptionalTaskNodeContext();
+    const hasExecution = !!data.execution;
+    const handleMouseEnter = useCallback(()=>setIsHovered(true), []);
+    const handleMouseLeave = useCallback(()=>setIsHovered(false), []);
+    const handleClick = useCallback(()=>{
+        const clickHandler = context?.onTaskClick || data.onTaskClick;
+        const selectHandler = context?.onTaskSelect || data.onTaskSelect;
+        clickHandler?.(id);
+        selectHandler?.(id);
+    }, [
+        context,
+        id,
+        data.onTaskClick,
+        data.onTaskSelect
+    ]);
+    return /*#__PURE__*/ jsx(StageTask, {
+        "data-testid": `task-node-${id}`,
+        selected: selected || isHovered,
+        status: data.execution?.status,
+        isParallel: isParallel,
+        isDragEnabled: false,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onClick: handleClick,
+        style: {
+            cursor: context?.isReadOnly ? 'default' : hasExecution ? 'default' : 'pointer',
+            boxShadow: selected ? '0 0 0 2px var(--uix-canvas-secondary-pressed)' : void 0,
+            width: data.width ? `${data.width}px` : void 0
+        },
+        className: hasExecution ? 'nodrag nopan' : 'nopan',
+        children: /*#__PURE__*/ jsx(TaskNodeContent, {
+            taskId: id,
+            data: data,
+            isDragging: dragging,
+            isHovered: isHovered
+        })
+    });
+};
+const TaskNode = /*#__PURE__*/ memo(TaskNodeComponent);
+TaskNode.displayName = 'TaskNode';
+export { TaskNode, TaskNodeContent };