@uipath/apollo-react 6.75.0 → 6.76.0

package/dist/canvas/components/CanvasDiffView/CanvasDiffView.cjs

@@ -0,0 +1,470 @@
+"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 ("u" > 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__, {
+    CanvasDiffView: ()=>CanvasDiffView
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
+const index_cjs_namespaceObject = require("../../../i18n/index.cjs");
+const KIND_DOT_CLASS = {
+    added: 'bg-success',
+    removed: 'bg-error',
+    changed: 'bg-warning'
+};
+const noopViewportChange = ()=>{};
+function viewportsEqual(a, b) {
+    return !!a && a.x === b.x && a.y === b.y && a.zoom === b.zoom;
+}
+function highlightForSide(highlight, side) {
+    const hidden = 'before' === side ? 'added' : 'removed';
+    const keep = (kinds)=>new Map([
+            ...kinds
+        ].filter(([, kind])=>kind !== hidden));
+    return {
+        nodeKind: keep(highlight.nodeKind),
+        edgeKind: keep(highlight.edgeKind)
+    };
+}
+function useSummaryItems(summary) {
+    const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
+    return (0, external_react_namespaceObject.useMemo)(()=>{
+        const items = [
+            {
+                key: 'addedNodes',
+                kind: 'added',
+                label: _({
+                    id: 'canvas.diff_view.added_nodes',
+                    message: '{count, plural, one {# node added} other {# nodes added}}',
+                    values: {
+                        count: summary.addedNodes
+                    }
+                })
+            },
+            {
+                key: 'removedNodes',
+                kind: 'removed',
+                label: _({
+                    id: 'canvas.diff_view.removed_nodes',
+                    message: '{count, plural, one {# node removed} other {# nodes removed}}',
+                    values: {
+                        count: summary.removedNodes
+                    }
+                })
+            },
+            {
+                key: 'changedNodes',
+                kind: 'changed',
+                label: _({
+                    id: 'canvas.diff_view.changed_nodes',
+                    message: '{count, plural, one {# node changed} other {# nodes changed}}',
+                    values: {
+                        count: summary.changedNodes
+                    }
+                })
+            },
+            {
+                key: 'addedEdges',
+                kind: 'added',
+                label: _({
+                    id: 'canvas.diff_view.added_edges',
+                    message: '{count, plural, one {# connection added} other {# connections added}}',
+                    values: {
+                        count: summary.addedEdges
+                    }
+                })
+            },
+            {
+                key: 'removedEdges',
+                kind: 'removed',
+                label: _({
+                    id: 'canvas.diff_view.removed_edges',
+                    message: '{count, plural, one {# connection removed} other {# connections removed}}',
+                    values: {
+                        count: summary.removedEdges
+                    }
+                })
+            },
+            {
+                key: 'changedEdges',
+                kind: 'changed',
+                label: _({
+                    id: 'canvas.diff_view.changed_edges',
+                    message: '{count, plural, one {# connection changed} other {# connections changed}}',
+                    values: {
+                        count: summary.changedEdges
+                    }
+                })
+            }
+        ];
+        return items.filter((item)=>summary[item.key] > 0);
+    }, [
+        _,
+        summary
+    ]);
+}
+function formatList(items, locale) {
+    try {
+        return new Intl.ListFormat(locale, {
+            style: 'long',
+            type: 'conjunction'
+        }).format(items);
+    } catch  {
+        return items.join(', ');
+    }
+}
+function SummaryRow({ label, showLabel, summary, phaseId }) {
+    const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
+    const items = useSummaryItems(summary);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        "data-change-phase": phaseId,
+        className: "flex flex-wrap items-center gap-x-3 gap-y-1",
+        children: [
+            showLabel && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "font-medium text-foreground",
+                children: label
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("ul", {
+                "aria-label": label,
+                className: "flex flex-wrap items-center gap-x-3 gap-y-1",
+                children: 0 === items.length ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("li", {
+                    children: _({
+                        id: 'canvas.diff_view.no_changes',
+                        message: 'No changes'
+                    })
+                }) : items.map((item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("li", {
+                        "data-change-kind": item.kind,
+                        className: "inline-flex items-center gap-1.5",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                "aria-hidden": "true",
+                                className: (0, apollo_wind_namespaceObject.cn)('inline-block size-2 rounded-full', KIND_DOT_CLASS[item.kind])
+                            }),
+                            item.label
+                        ]
+                    }, item.key))
+            })
+        ]
+    });
+}
+function DiffPane({ ctx, label, renderPane, panelSlot }) {
+    const panel = panelSlot?.(ctx);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("section", {
+        "aria-label": label,
+        "data-diff-side": ctx.side,
+        className: "relative flex h-full min-h-0 w-full",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "relative h-full min-w-0 flex-1",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        className: "pointer-events-none absolute left-3 top-2 z-10 rounded bg-surface-raised px-1.5 py-0.5 text-[11px] font-medium uppercase tracking-wide text-foreground-muted",
+                        children: label
+                    }),
+                    renderPane(ctx)
+                ]
+            }),
+            null != panel && false !== panel && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "h-full shrink-0 overflow-auto border-l border-border-subtle",
+                children: panel
+            })
+        ]
+    });
+}
+function useReviewState(model) {
+    const [review, setReview] = (0, external_react_namespaceObject.useState)({
+        model,
+        key: 0
+    });
+    const [selectedNodeId, setSelectedNodeId] = (0, external_react_namespaceObject.useState)();
+    const [viewport, setViewport] = (0, external_react_namespaceObject.useState)();
+    if (review.model !== model) {
+        setReview({
+            model,
+            key: review.key + 1
+        });
+        setSelectedNodeId(void 0);
+        setViewport(void 0);
+    }
+    const onViewportChange = (0, external_react_namespaceObject.useCallback)((next)=>{
+        setViewport((prev)=>viewportsEqual(prev, next) ? prev : next);
+    }, []);
+    return {
+        reviewKey: review.key,
+        selectedNodeId,
+        setSelectedNodeId,
+        viewport,
+        onViewportChange
+    };
+}
+function CanvasDiffView({ model, renderPane, panelSlot, codeView, headerActions, title, headingLevel = 2, onKeep, onRevert, keepLabel, revertLabel, showBefore = true, orientation: orientationProp, onOrientationChange, selection, syncViewport = true, className }) {
+    const { _, locale } = (0, index_cjs_namespaceObject.useSafeLingui)();
+    const [internalOrientation, setInternalOrientation] = (0, external_react_namespaceObject.useState)('vertical');
+    const orientation = orientationProp ?? internalOrientation;
+    const toggleOrientation = (0, external_react_namespaceObject.useCallback)(()=>{
+        const next = 'vertical' === orientation ? 'horizontal' : 'vertical';
+        if (void 0 === orientationProp) setInternalOrientation(next);
+        onOrientationChange?.(next);
+    }, [
+        orientation,
+        orientationProp,
+        onOrientationChange
+    ]);
+    const review = useReviewState(model);
+    const selectedNodeId = selection ? selection.selectedNodeId : review.selectedNodeId;
+    const onSelectNode = selection?.onChange ?? review.setSelectedNodeId;
+    const viewport = syncViewport ? review.viewport : void 0;
+    const onViewportChange = syncViewport ? review.onViewportChange : noopViewportChange;
+    const [view, setView] = (0, external_react_namespaceObject.useState)('visual');
+    const showCode = void 0 !== codeView && 'code' === view;
+    const overallItems = useSummaryItems(model.summary);
+    const announcement = overallItems.length > 0 ? formatList(overallItems.map((item)=>item.label), locale) : _({
+        id: 'canvas.diff_view.no_changes',
+        message: 'No changes'
+    });
+    const projections = (0, external_react_namespaceObject.useMemo)(()=>{
+        const project = (side)=>({
+                highlight: highlightForSide(model.highlight, side),
+                changePhases: model.changePhases?.map((phase)=>({
+                        ...phase,
+                        highlight: highlightForSide(phase.highlight, side)
+                    }))
+            });
+        return {
+            before: project('before'),
+            after: project('after')
+        };
+    }, [
+        model
+    ]);
+    const fitLeader = 0 === model.after.nodes.length && model.before.nodes.length > 0 ? 'before' : 'after';
+    const buildContext = (0, external_react_namespaceObject.useCallback)((side)=>({
+            side,
+            nodes: model[side].nodes,
+            edges: model[side].edges,
+            data: model[side].data,
+            highlight: projections[side].highlight,
+            changePhases: projections[side].changePhases,
+            selectedNodeId,
+            onSelectNode,
+            viewport,
+            onViewportChange,
+            fitViewOnMount: void 0 === viewport && (side === fitLeader || !syncViewport)
+        }), [
+        model,
+        projections,
+        selectedNodeId,
+        onSelectNode,
+        viewport,
+        onViewportChange,
+        syncViewport,
+        fitLeader
+    ]);
+    const beforeContext = (0, external_react_namespaceObject.useMemo)(()=>buildContext('before'), [
+        buildContext
+    ]);
+    const afterContext = (0, external_react_namespaceObject.useMemo)(()=>buildContext('after'), [
+        buildContext
+    ]);
+    const beforeLabel = _({
+        id: 'canvas.diff_view.before_label',
+        message: 'Before'
+    });
+    const afterLabel = _({
+        id: 'canvas.diff_view.after_label',
+        message: 'After'
+    });
+    const summaryLabel = _({
+        id: 'canvas.diff_view.summary_label',
+        message: 'Change summary'
+    });
+    const orientationLabel = 'vertical' === orientation ? _({
+        id: 'canvas.diff_view.show_side_by_side',
+        message: 'Show side by side'
+    }) : _({
+        id: 'canvas.diff_view.show_stacked',
+        message: 'Show stacked'
+    });
+    const visualViewLabel = _({
+        id: 'canvas.diff_view.visual_view',
+        message: 'Visual diff'
+    });
+    const codeViewLabel = _({
+        id: 'canvas.diff_view.code_view',
+        message: 'Code diff'
+    });
+    const Heading = `h${headingLevel}`;
+    let body;
+    body = showCode ? codeView : showBefore ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.ResizablePanelGroup, {
+        orientation: orientation,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.ResizablePanel, {
+                id: "canvas-diff-before",
+                defaultSize: "50%",
+                minSize: "20%",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DiffPane, {
+                    ctx: beforeContext,
+                    label: beforeLabel,
+                    renderPane: renderPane,
+                    panelSlot: panelSlot
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.ResizableHandle, {
+                withHandle: true
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.ResizablePanel, {
+                id: "canvas-diff-after",
+                defaultSize: "50%",
+                minSize: "20%",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DiffPane, {
+                    ctx: afterContext,
+                    label: afterLabel,
+                    renderPane: renderPane,
+                    panelSlot: panelSlot
+                })
+            })
+        ]
+    }, review.reviewKey) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DiffPane, {
+        ctx: afterContext,
+        label: afterLabel,
+        renderPane: renderPane,
+        panelSlot: panelSlot
+    }, review.reviewKey);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        "data-testid": "canvas-diff-view",
+        "data-orientation": orientation,
+        className: (0, apollo_wind_namespaceObject.cn)('flex h-full w-full flex-col bg-surface text-foreground', className),
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("header", {
+                className: "flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-border-subtle px-4 py-2",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "flex min-w-0 flex-wrap items-center gap-x-4 gap-y-1",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Heading, {
+                                className: "shrink-0 text-sm font-semibold",
+                                children: title ?? _({
+                                    id: 'canvas.diff_view.title',
+                                    message: 'Proposed changes'
+                                })
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-foreground-muted",
+                                children: model.changePhases && model.changePhases.length > 0 ? model.changePhases.map((phase)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SummaryRow, {
+                                        phaseId: phase.id,
+                                        label: phase.label,
+                                        showLabel: true,
+                                        summary: phase.summary
+                                    }, phase.id)) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SummaryRow, {
+                                    label: summaryLabel,
+                                    summary: model.summary
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "flex shrink-0 items-center gap-2",
+                        children: [
+                            void 0 !== codeView && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.ToggleGroup, {
+                                type: "single",
+                                size: "sm",
+                                variant: "outline",
+                                value: view,
+                                onValueChange: (next)=>next && setView(next),
+                                "aria-label": _({
+                                    id: 'canvas.diff_view.view_toggle',
+                                    message: 'Diff view'
+                                }),
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.ToggleGroupItem, {
+                                        value: "visual",
+                                        "aria-label": visualViewLabel,
+                                        title: visualViewLabel,
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Workflow, {
+                                            className: "size-4"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.ToggleGroupItem, {
+                                        value: "code",
+                                        "aria-label": codeViewLabel,
+                                        title: codeViewLabel,
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Code2, {
+                                            className: "size-4"
+                                        })
+                                    })
+                                ]
+                            }),
+                            showBefore && !showCode && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+                                variant: "ghost",
+                                size: "xs",
+                                icon: true,
+                                onClick: toggleOrientation,
+                                "aria-label": orientationLabel,
+                                title: orientationLabel,
+                                children: 'vertical' === orientation ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Columns2, {}) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Rows2, {})
+                            }),
+                            headerActions,
+                            onRevert && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+                                variant: "outline",
+                                size: "xs",
+                                onClick: onRevert,
+                                children: revertLabel ?? _({
+                                    id: 'canvas.diff_view.revert',
+                                    message: 'Revert'
+                                })
+                            }),
+                            onKeep && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+                                size: "xs",
+                                onClick: onKeep,
+                                children: keepLabel ?? _({
+                                    id: 'canvas.diff_view.keep',
+                                    message: 'Keep'
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("output", {
+                "aria-live": "polite",
+                className: "sr-only",
+                children: announcement
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "relative min-h-0 flex-1",
+                children: body
+            })
+        ]
+    });
+}
+exports.CanvasDiffView = __webpack_exports__.CanvasDiffView;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "CanvasDiffView"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,3 @@
+import type { CanvasDiffViewProps } from './CanvasDiffView.types';
+export declare function CanvasDiffView<Node, Edge>({ model, renderPane, panelSlot, codeView, headerActions, title, headingLevel, onKeep, onRevert, keepLabel, revertLabel, showBefore, orientation: orientationProp, onOrientationChange, selection, syncViewport, className, }: CanvasDiffViewProps<Node, Edge>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CanvasDiffView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasDiffView.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/CanvasDiffView/CanvasDiffView.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAEV,mBAAmB,EAQpB,MAAM,wBAAwB,CAAC;AAkMhC,wBAAgB,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,EACzC,KAAK,EACL,UAAU,EACV,SAAS,EACT,QAAQ,EACR,aAAa,EACb,KAAK,EACL,YAAgB,EAChB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,WAAW,EACX,UAAiB,EACjB,WAAW,EAAE,eAAe,EAC5B,mBAAmB,EACnB,SAAS,EACT,YAAmB,EACnB,SAAS,GACV,EAAE,mBAAmB,CAAC,IAAI,EAAE,IAAI,CAAC,2CAsMjC"}