@pega/cosmos-react-build 3.0.0-dev.2.1 → 3.0.0-dev.20.0

package/lib/components/FlowModeller/DeletePopover.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, forwardRef } from 'react';
+import styled from 'styled-components';
+import { Button, Select, Option, Text, Flex, useI18n, Icon, Popover } from '@pega/cosmos-react-core';
+import { DirectedGraph } from './Renderer/Utils/Graph';
+import deleteNodeUtils from './Utils/deleteNodeUtils';
+export const StyledDeletePopover = styled(Popover) `
+  max-width: 25rem;
+`;
+const DeletePopover = forwardRef(({ show, target, flowGraphData, rendererGraphData, nodeId, onChange, onSubmit, onCancel }, ref) => {
+    const [currentSelection, setCurrentSelection] = useState(0);
+    const t = useI18n();
+    const graph = new DirectedGraph(rendererGraphData);
+    const deleteOptionsResult = deleteNodeUtils.getDeleteNodeOptions(graph, nodeId);
+    const deleteOptions = deleteOptionsResult.options;
+    const nodeType = graph.getNode(nodeId).type.name;
+    useEffect(() => {
+        if (deleteOptionsResult) {
+            const itemsToDelete = nodeType !== 'Decision'
+                ? deleteOptionsResult.allItems
+                : deleteOptions[currentSelection].restItems;
+            // add the actual node to be deleted also, to the list
+            itemsToDelete.nodes[nodeId] = graph.getNode(nodeId);
+            onChange?.(itemsToDelete, deleteOptions[currentSelection].pathItems);
+        }
+    }, [rendererGraphData]);
+    const onChangeHandler = (ev) => {
+        const newSelection = ev.target.selectedIndex >= deleteOptions.length ? -1 : ev.target.selectedIndex;
+        setCurrentSelection(newSelection);
+        let itemsToDelete;
+        if (deleteOptionsResult)
+            itemsToDelete = deleteOptionsResult.allItems;
+        let itemsToRetain;
+        if (newSelection !== -1) {
+            itemsToDelete = deleteOptions[newSelection].restItems;
+            itemsToRetain = deleteOptions[newSelection].pathItems;
+        }
+        // add the actual node to be deleted also, to the list
+        if (itemsToDelete)
+            itemsToDelete.nodes[nodeId] = graph.getNode(nodeId);
+        if (itemsToDelete)
+            onChange?.(itemsToDelete, itemsToRetain, ev);
+    };
+    const submitHandler = (ev) => {
+        let error = true;
+        const finalGraph = new DirectedGraph(flowGraphData);
+        const finalDeleteOptionsResult = deleteNodeUtils.getDeleteNodeOptions(finalGraph, nodeId);
+        let newTargetNode = finalDeleteOptionsResult?.destinationNodeId
+            ? finalGraph.getNode(finalDeleteOptionsResult.destinationNodeId)
+            : undefined;
+        let itemsToDelete = finalDeleteOptionsResult.allItems;
+        const selectedOption = currentSelection === -1 || nodeType !== 'Decision'
+            ? undefined
+            : finalDeleteOptionsResult?.options[currentSelection];
+        let finalMetaData = selectedOption;
+        if (selectedOption) {
+            const pathConnectors = selectedOption.pathItems.connectors;
+            const connectors = Object.keys(pathConnectors);
+            for (let i = 0; i < connectors.length; i += 1) {
+                const connectorData = pathConnectors[connectors[i]];
+                if (connectorData &&
+                    finalGraph.getNode(connectorData.fromNodeId).type?.minConnectors !== 0 &&
+                    connectorData.toNodeId === finalDeleteOptionsResult.destinationNodeId) {
+                    error = false;
+                    break;
+                }
+            }
+            if (error) {
+                onSubmit?.({
+                    graphData: {
+                        nodes: [],
+                        connectors: []
+                    },
+                    updates: {
+                        connectors: []
+                    },
+                    deletes: { nodes: {}, connectors: {} },
+                    error: true
+                }, ev);
+                return;
+            }
+            finalMetaData = finalDeleteOptionsResult.options.find(current => selectedOption.connector.id === current.connector.id);
+            if (finalMetaData) {
+                // get the ref of the first node of the retaining path
+                newTargetNode = finalGraph.getNode(finalMetaData.connector.toNodeId);
+                itemsToDelete = finalMetaData.restItems;
+            }
+        }
+        // get the in-connectors of the selected node
+        const nodeInConnectors = finalGraph.getInConnectors(nodeId);
+        // iterate and set the targetNode to the above first node instead of the selected node.
+        nodeInConnectors.forEach(con => {
+            finalGraph.setConnector(con.id, {
+                toNodeId: newTargetNode ? newTargetNode.id : undefined
+            });
+        });
+        const resultGraphData = finalGraph.getGraphData();
+        itemsToDelete.nodes[nodeId] = finalGraph.getNode(nodeId);
+        // filter the highlighted nodes, including the selected node
+        const nodes = resultGraphData.nodes.filter(item => {
+            return itemsToDelete.nodes[item.id] === undefined;
+        });
+        if (finalMetaData) {
+            itemsToDelete.connectors[finalMetaData.connector.id] = finalMetaData.connector;
+        }
+        // filter the highlighted connectors
+        const connectors = resultGraphData.connectors.filter(item => {
+            return itemsToDelete.connectors[item.id] === undefined;
+        });
+        const outcome = {
+            graphData: {
+                nodes: nodes,
+                connectors
+            },
+            updates: {
+                connectors: nodeInConnectors
+            },
+            deletes: itemsToDelete,
+            error: false
+        };
+        onSubmit?.(outcome, ev);
+    };
+    const onCancelHandler = () => {
+        onCancel?.();
+    };
+    return (_jsx(StyledDeletePopover, { show: show, target: target, placement: 'right-end', ref: ref, modifiers: [
+            {
+                name: 'offset',
+                options: { offset: [0, 8] }
+            }
+        ], children: _jsxs(Flex, { container: { gap: 2, pad: 2, direction: 'column' }, children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'between' }, children: [_jsx(Text, { variant: 'h4', children: t('delete_step_title') }), _jsx(Button, { variant: 'simple', icon: true, label: t('close'), onClick: onCancelHandler, children: _jsx(Icon, { name: 'times' }) })] }), nodeType === 'Decision' ? (_jsxs(_Fragment, { children: [_jsx(Text, { children: t('delete_decision_step') }), _jsxs(Select, { id: 'select-demo', label: t('delete_step_outcome'), required: true, onChange: onChangeHandler, children: [deleteOptions.map((item, index) => {
+                                    return (_jsx(Option, { selected: currentSelection === index, children: item.connector.label ? item.connector.label : item.connector.id }, item.connector.id));
+                                }), _jsx(Option, { selected: currentSelection === -1, children: t('delete_all_outcomes') }, 'none')] })] })) : (_jsx(Text, { children: t('delete_step') })), _jsxs(Flex, { container: { direction: 'row', justify: 'between' }, children: [_jsx(Button, { onClick: onCancelHandler, children: t('cancel') }), _jsx(Button, { variant: 'primary', onClick: submitHandler, children: t('delete') })] })] }) }));
+});
+export default DeletePopover;
+//# sourceMappingURL=DeletePopover.js.map

package/lib/components/FlowModeller/DeletePopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeletePopover.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/DeletePopover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAmC,SAAS,EAAE,UAAU,EAAO,MAAM,OAAO,CAAC;AAC9F,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,MAAM,EACN,MAAM,EACN,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,OAAO,EAER,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,aAAa,EAAa,MAAM,wBAAwB,CAAC;AAClE,OAAO,eAIN,MAAM,yBAAyB,CAAC;AAmBjC,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA;;CAEjD,CAAC;AAEF,MAAM,aAAa,GAAG,UAAU,CAC9B,CACE,EACE,IAAI,EACJ,MAAM,EACN,aAAa,EACb,iBAAiB,EACjB,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,QAAQ,EACe,EACzB,GAAkC,EAClC,EAAE;IACF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IAEpE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAEnD,MAAM,mBAAmB,GAAG,eAAe,CAAC,oBAAoB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAEhF,MAAM,aAAa,GAA4B,mBAAmB,CAAC,OAAO,CAAC;IAC3E,MAAM,QAAQ,GAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAe,CAAC,IAAI,CAAC,IAAI,CAAC;IAEhE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,mBAAmB,EAAE;YACvB,MAAM,aAAa,GACjB,QAAQ,KAAK,UAAU;gBACrB,CAAC,CAAC,mBAAmB,CAAC,QAAQ;gBAC9B,CAAC,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC,SAAS,CAAC;YAEhD,sDAAsD;YACtD,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;YAEpD,QAAQ,EAAE,CAAC,aAAa,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC,SAAS,CAAC,CAAC;SACtE;IACH,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAExB,MAAM,eAAe,GAAuB,CAAC,EAAkC,EAAE,EAAE;QACjF,MAAM,YAAY,GAChB,EAAE,CAAC,MAAM,CAAC,aAAa,IAAI,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,aAAa,CAAC;QAEjF,mBAAmB,CAAC,YAAY,CAAC,CAAC;QAElC,IAAI,aAAa,CAAC;QAClB,IAAI,mBAAmB;YAAE,aAAa,GAAG,mBAAmB,CAAC,QAAQ,CAAC;QAEtE,IAAI,aAAa,CAAC;QAElB,IAAI,YAAY,KAAK,CAAC,CAAC,EAAE;YACvB,aAAa,GAAG,aAAa,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC;YACtD,aAAa,GAAG,aAAa,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC;SACvD;QAED,sDAAsD;QACtD,IAAI,aAAa;YAAE,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QAEvE,IAAI,aAAa;YAAE,QAAQ,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,EAAE,CAAC,CAAC;IAClE,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,EAAS,EAAE,EAAE;QAClC,IAAI,KAAK,GAAG,IAAI,CAAC;QACjB,MAAM,UAAU,GAAG,IAAI,aAAa,CAAC,aAAa,CAAC,CAAC;QACpD,MAAM,wBAAwB,GAAG,eAAe,CAAC,oBAAoB,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;QAE1F,IAAI,aAAa,GAAG,wBAAwB,EAAE,iBAAiB;YAC7D,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,wBAAwB,CAAC,iBAAiB,CAAC;YAChE,CAAC,CAAC,SAAS,CAAC;QACd,IAAI,aAAa,GAAG,wBAAwB,CAAC,QAAQ,CAAC;QAEtD,MAAM,cAAc,GAClB,gBAAgB,KAAK,CAAC,CAAC,IAAI,QAAQ,KAAK,UAAU;YAChD,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,wBAAwB,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;QAC1D,IAAI,aAAa,GAAG,cAAc,CAAC;QAEnC,IAAI,cAAc,EAAE;YAClB,MAAM,cAAc,GAAG,cAAc,CAAC,SAAS,CAAC,UAAU,CAAC;YAC3D,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YAC/C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE;gBAC7C,MAAM,aAAa,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;gBACpD,IACE,aAAa;oBACb,UAAU,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,IAAI,EAAE,aAAa,KAAK,CAAC;oBACtE,aAAa,CAAC,QAAQ,KAAK,wBAAwB,CAAC,iBAAiB,EACrE;oBACA,KAAK,GAAG,KAAK,CAAC;oBACd,MAAM;iBACP;aACF;YACD,IAAI,KAAK,EAAE;gBACT,QAAQ,EAAE,CACR;oBACE,SAAS,EAAE;wBACT,KAAK,EAAE,EAAE;wBACT,UAAU,EAAE,EAAE;qBACf;oBACD,OAAO,EAAE;wBACP,UAAU,EAAE,EAAE;qBACf;oBACD,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;oBACtC,KAAK,EAAE,IAAI;iBACZ,EACD,EAAE,CACH,CAAC;gBACF,OAAO;aACR;YAED,aAAa,GAAG,wBAAwB,CAAC,OAAO,CAAC,IAAI,CACnD,OAAO,CAAC,EAAE,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,KAAK,OAAO,CAAC,SAAS,CAAC,EAAE,CAChE,CAAC;YAEF,IAAI,aAAa,EAAE;gBACjB,sDAAsD;gBACtD,aAAa,GAAG,UAAU,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;gBACrE,aAAa,GAAG,aAAa,CAAC,SAAS,CAAC;aACzC;SACF;QAED,6CAA6C;QAC7C,MAAM,gBAAgB,GAAG,UAAU,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;QAE5D,uFAAuF;QAEvF,gBAAgB,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YAC7B,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,EAAE;gBAC9B,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;aACvD,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,MAAM,eAAe,GAAG,UAAU,CAAC,YAAY,EAAE,CAAC;QAElD,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,UAAU,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QAEzD,4DAA4D;QAC5D,MAAM,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;YAChD,OAAO,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,SAAS,CAAC;QACpD,CAAC,CAAC,CAAC;QAEH,IAAI,aAAa,EAAE;YACjB,aAAa,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,SAAS,CAAC;SAChF;QAED,oCAAoC;QACpC,MAAM,UAAU,GAAG,eAAe,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;YAC1D,OAAO,aAAa,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,SAAS,CAAC;QACzD,CAAC,CAAC,CAAC;QAEH,MAAM,OAAO,GAAsB;YACjC,SAAS,EAAE;gBACT,KAAK,EAAE,KAAoB;gBAC3B,UAAU;aACX;YACD,OAAO,EAAE;gBACP,UAAU,EAAE,gBAAgB;aAC7B;YACD,OAAO,EAAE,aAAa;YACtB,KAAK,EAAE,KAAK;SACb,CAAC;QACF,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,QAAQ,EAAE,EAAE,CAAC;IACf,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,mBAAmB,IAClB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,SAAS,EAAC,WAAW,EACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT;gBACE,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE;aAC5B;SACF,YAED,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aACtD,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,aAC3D,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,mBAAmB,CAAC,GAAQ,EAClD,KAAC,MAAM,IAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,QAAC,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,eAAe,YACvE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,IACJ,EACN,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,CACzB,8BACE,KAAC,IAAI,cAAE,CAAC,CAAC,sBAAsB,CAAC,GAAQ,EACxC,MAAC,MAAM,IACL,EAAE,EAAC,aAAa,EAChB,KAAK,EAAE,CAAC,CAAC,qBAAqB,CAAC,EAC/B,QAAQ,QACR,QAAQ,EAAE,eAAe,aAExB,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;oCACjC,OAAO,CACL,KAAC,MAAM,IAAyB,QAAQ,EAAE,gBAAgB,KAAK,KAAK,YACjE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,IADrD,IAAI,CAAC,SAAS,CAAC,EAAE,CAErB,CACV,CAAC;gCACJ,CAAC,CAAC,EAEF,KAAC,MAAM,IAAY,QAAQ,EAAE,gBAAgB,KAAK,CAAC,CAAC,YACjD,CAAC,CAAC,qBAAqB,CAAC,IADf,MAAM,CAET,IACF,IACR,CACJ,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,cAAE,CAAC,CAAC,aAAa,CAAC,GAAQ,CAChC,EAED,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,aACvD,KAAC,MAAM,IAAC,OAAO,EAAE,eAAe,YAAG,CAAC,CAAC,QAAQ,CAAC,GAAU,EACxD,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,aAAa,YAC7C,CAAC,CAAC,QAAQ,CAAC,GACL,IACJ,IACF,GACa,CACvB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { useState, ChangeEventHandler, ChangeEvent, useEffect, forwardRef, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Button,\n  Select,\n  Option,\n  Text,\n  Flex,\n  useI18n,\n  Icon,\n  Popover,\n  PopoverProps\n} from '@pega/cosmos-react-core';\n\nimport { DirectedGraph, GraphData } from './Renderer/Utils/Graph';\nimport deleteNodeUtils, {\n  GraphDataAsMap,\n  DeleteNodeOutcome,\n  DeleteNodeModalOption\n} from './Utils/deleteNodeUtils';\nimport { NodeProps } from './Node/Node.types';\n\nexport interface DeleteNodePopoverProps {\n  show: boolean;\n  target: PopoverProps['target'];\n  flowGraphData: GraphData;\n  rendererGraphData: GraphData;\n  nodeId: string;\n  onChange?: (\n    itemsToDelete: GraphDataAsMap,\n    itemsToRetain: GraphDataAsMap | undefined,\n    ev?: ChangeEvent\n  ) => void;\n  ref?: Ref<HTMLDivElement>;\n  onSubmit?: (outcome: DeleteNodeOutcome, ev: Event) => void;\n  onCancel?: () => void;\n}\n\nexport const StyledDeletePopover = styled(Popover)`\n  max-width: 25rem;\n`;\n\nconst DeletePopover = forwardRef(\n  (\n    {\n      show,\n      target,\n      flowGraphData,\n      rendererGraphData,\n      nodeId,\n      onChange,\n      onSubmit,\n      onCancel\n    }: DeleteNodePopoverProps,\n    ref: DeleteNodePopoverProps['ref']\n  ) => {\n    const [currentSelection, setCurrentSelection] = useState<number>(0);\n\n    const t = useI18n();\n\n    const graph = new DirectedGraph(rendererGraphData);\n\n    const deleteOptionsResult = deleteNodeUtils.getDeleteNodeOptions(graph, nodeId);\n\n    const deleteOptions: DeleteNodeModalOption[] = deleteOptionsResult.options;\n    const nodeType = (graph.getNode(nodeId) as NodeProps).type.name;\n\n    useEffect(() => {\n      if (deleteOptionsResult) {\n        const itemsToDelete: GraphDataAsMap =\n          nodeType !== 'Decision'\n            ? deleteOptionsResult.allItems\n            : deleteOptions[currentSelection].restItems;\n\n        // add the actual node to be deleted also, to the list\n        itemsToDelete.nodes[nodeId] = graph.getNode(nodeId);\n\n        onChange?.(itemsToDelete, deleteOptions[currentSelection].pathItems);\n      }\n    }, [rendererGraphData]);\n\n    const onChangeHandler: ChangeEventHandler = (ev: ChangeEvent<HTMLSelectElement>) => {\n      const newSelection =\n        ev.target.selectedIndex >= deleteOptions.length ? -1 : ev.target.selectedIndex;\n\n      setCurrentSelection(newSelection);\n\n      let itemsToDelete;\n      if (deleteOptionsResult) itemsToDelete = deleteOptionsResult.allItems;\n\n      let itemsToRetain;\n\n      if (newSelection !== -1) {\n        itemsToDelete = deleteOptions[newSelection].restItems;\n        itemsToRetain = deleteOptions[newSelection].pathItems;\n      }\n\n      // add the actual node to be deleted also, to the list\n      if (itemsToDelete) itemsToDelete.nodes[nodeId] = graph.getNode(nodeId);\n\n      if (itemsToDelete) onChange?.(itemsToDelete, itemsToRetain, ev);\n    };\n\n    const submitHandler = (ev: Event) => {\n      let error = true;\n      const finalGraph = new DirectedGraph(flowGraphData);\n      const finalDeleteOptionsResult = deleteNodeUtils.getDeleteNodeOptions(finalGraph, nodeId);\n\n      let newTargetNode = finalDeleteOptionsResult?.destinationNodeId\n        ? finalGraph.getNode(finalDeleteOptionsResult.destinationNodeId)\n        : undefined;\n      let itemsToDelete = finalDeleteOptionsResult.allItems;\n\n      const selectedOption =\n        currentSelection === -1 || nodeType !== 'Decision'\n          ? undefined\n          : finalDeleteOptionsResult?.options[currentSelection];\n      let finalMetaData = selectedOption;\n\n      if (selectedOption) {\n        const pathConnectors = selectedOption.pathItems.connectors;\n        const connectors = Object.keys(pathConnectors);\n        for (let i = 0; i < connectors.length; i += 1) {\n          const connectorData = pathConnectors[connectors[i]];\n          if (\n            connectorData &&\n            finalGraph.getNode(connectorData.fromNodeId).type?.minConnectors !== 0 &&\n            connectorData.toNodeId === finalDeleteOptionsResult.destinationNodeId\n          ) {\n            error = false;\n            break;\n          }\n        }\n        if (error) {\n          onSubmit?.(\n            {\n              graphData: {\n                nodes: [],\n                connectors: []\n              },\n              updates: {\n                connectors: []\n              },\n              deletes: { nodes: {}, connectors: {} },\n              error: true\n            },\n            ev\n          );\n          return;\n        }\n\n        finalMetaData = finalDeleteOptionsResult.options.find(\n          current => selectedOption.connector.id === current.connector.id\n        );\n\n        if (finalMetaData) {\n          // get the ref of the first node of the retaining path\n          newTargetNode = finalGraph.getNode(finalMetaData.connector.toNodeId);\n          itemsToDelete = finalMetaData.restItems;\n        }\n      }\n\n      // get the in-connectors of the selected node\n      const nodeInConnectors = finalGraph.getInConnectors(nodeId);\n\n      // iterate and set the targetNode to the above first node instead of the selected node.\n\n      nodeInConnectors.forEach(con => {\n        finalGraph.setConnector(con.id, {\n          toNodeId: newTargetNode ? newTargetNode.id : undefined\n        });\n      });\n\n      const resultGraphData = finalGraph.getGraphData();\n\n      itemsToDelete.nodes[nodeId] = finalGraph.getNode(nodeId);\n\n      // filter the highlighted nodes, including the selected node\n      const nodes = resultGraphData.nodes.filter(item => {\n        return itemsToDelete.nodes[item.id] === undefined;\n      });\n\n      if (finalMetaData) {\n        itemsToDelete.connectors[finalMetaData.connector.id] = finalMetaData.connector;\n      }\n\n      // filter the highlighted connectors\n      const connectors = resultGraphData.connectors.filter(item => {\n        return itemsToDelete.connectors[item.id] === undefined;\n      });\n\n      const outcome: DeleteNodeOutcome = {\n        graphData: {\n          nodes: nodes as NodeProps[],\n          connectors\n        },\n        updates: {\n          connectors: nodeInConnectors\n        },\n        deletes: itemsToDelete,\n        error: false\n      };\n      onSubmit?.(outcome, ev);\n    };\n\n    const onCancelHandler = () => {\n      onCancel?.();\n    };\n\n    return (\n      <StyledDeletePopover\n        show={show}\n        target={target}\n        placement='right-end'\n        ref={ref}\n        modifiers={[\n          {\n            name: 'offset',\n            options: { offset: [0, 8] }\n          }\n        ]}\n      >\n        <Flex container={{ gap: 2, pad: 2, direction: 'column' }}>\n          <Flex container={{ alignItems: 'center', justify: 'between' }}>\n            <Text variant='h4'>{t('delete_step_title')}</Text>\n            <Button variant='simple' icon label={t('close')} onClick={onCancelHandler}>\n              <Icon name='times' />\n            </Button>\n          </Flex>\n          {nodeType === 'Decision' ? (\n            <>\n              <Text>{t('delete_decision_step')}</Text>\n              <Select\n                id='select-demo'\n                label={t('delete_step_outcome')}\n                required\n                onChange={onChangeHandler}\n              >\n                {deleteOptions.map((item, index) => {\n                  return (\n                    <Option key={item.connector.id} selected={currentSelection === index}>\n                      {item.connector.label ? item.connector.label : item.connector.id}\n                    </Option>\n                  );\n                })}\n\n                <Option key='none' selected={currentSelection === -1}>\n                  {t('delete_all_outcomes')}\n                </Option>\n              </Select>\n            </>\n          ) : (\n            <Text>{t('delete_step')}</Text>\n          )}\n\n          <Flex container={{ direction: 'row', justify: 'between' }}>\n            <Button onClick={onCancelHandler}>{t('cancel')}</Button>\n            <Button variant='primary' onClick={submitHandler}>\n              {t('delete')}\n            </Button>\n          </Flex>\n        </Flex>\n      </StyledDeletePopover>\n    );\n  }\n);\n\nexport default DeletePopover;\n"]}

package/lib/components/FlowModeller/FlowModeller.d.ts

@@ -1,21 +1,5 @@
-import { PropsWithoutRef, MouseEvent } from 'react';
-import { Action } from '@pega/cosmos-react-core';
-import { GraphData, ConnectorProps } from './Renderer/Utils/Graph';
-import { AddNodeHandlerParams } from './Renderer/Renderer.types';
-import { ActionParams, NodeProps, NodeLibraryItem, NodeType } from './Node/Node.types';
-export interface FlowModellerProps {
-    graphData: GraphData<NodeProps, ConnectorProps>;
-    /** Node actions */
-    actions?: Action[];
-    /** Callback to add node from connector */
-    onNodeAdd: (nodeType: NodeType, params: AddNodeHandlerParams) => void;
-    /** Callback for handling the click on the node */
-    onNodeClick?: (nodeId: string) => void;
-    /** Callback for actions on Node */
-    onNodeActionClick?: (param: ActionParams, e: MouseEvent) => void;
-    /** Types of nodes */
-    nodeLibrary: NodeLibraryItem[];
-}
-declare const FlowModeller: ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, nodeLibrary, actions }: PropsWithoutRef<FlowModellerProps>) => JSX.Element;
+import { PropsWithoutRef } from 'react';
+import { FlowModellerProps } from './FlowModeller.types';
+declare const FlowModeller: ({ graphData, highlightData, onNodeActionClick, onNodeAdd, nodeLibrary, onNodeClick, onDelete, actions, readOnly }: PropsWithoutRef<FlowModellerProps>) => JSX.Element;
 export default FlowModeller;
 //# sourceMappingURL=FlowModeller.d.ts.map

package/lib/components/FlowModeller/FlowModeller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlowModeller.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAEf,UAAU,EAMX,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,MAAM,EAQP,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EACL,oBAAoB,EAGrB,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EACL,YAAY,EACZ,SAAS,EACT,eAAe,EAGf,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAO3B,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,SAAS,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;IAChD,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,0CAA0C;IAC1C,SAAS,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACtE,kDAAkD;IAClD,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjE,qBAAqB;IACrB,WAAW,EAAE,eAAe,EAAE,CAAC;CAChC;AAsED,QAAA,MAAM,YAAY,mFAOf,gBAAgB,iBAAiB,CAAC,gBA0MpC,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"FlowModeller.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAQhB,MAAM,OAAO,CAAC;AA+Bf,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAsFzD,QAAA,MAAM,YAAY,sHAUf,gBAAgB,iBAAiB,CAAC,gBA8SpC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/FlowModeller/FlowModeller.js

@@ -1,15 +1,21 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useReducer, useCallback } from 'react';
-import styled, { css } from 'styled-components';
-import { createUID, useElement, useOuterEvent, Flex, Text, defaultThemeProp, useI18n } from '@pega/cosmos-react-core';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useReducer, useCallback, useRef, useMemo } from 'react';
+import { createUID, useElement, useOuterEvent, useI18n } from '@pega/cosmos-react-core';
 import ItemLibrary from '../ItemLibrary/ItemLibrary';
+import { DirectedGraph } from './Renderer/Utils/Graph';
 import FlowRenderer from './Renderer/Renderer';
-import { StartNode, EndNode, DefaultNode } from './Node/NodeTemplates';
 import { START_NODETYPE, STOP_NODETYPE } from './Node/Node.types';
-import PlaceHolderHelper, { isPlaceHolderConnector } from './Utils/AddNodeUtils';
+import PlaceHolderHelper from './Utils/addNodeUtils';
 import { AddButton } from './AddNode';
+import FlowModellerHelper from './helper';
+import DeletePopover from './DeletePopover';
+import Connector from './Connector';
+import Node from './Node';
+import FlowModellerContext from './FlowModellerContext';
 const initState = {
     showLib: false,
+    activeItem: null,
+    allowNonBranchNode: false,
     activeAddBtnMeta: {
         target: null,
         meta: {
@@ -18,8 +24,9 @@ const initState = {
         }
     },
     graphData: { nodes: [], connectors: [] },
-    connectorComponent: () => _jsx(_Fragment, {}, void 0),
-    nodeComponent: () => _jsx(_Fragment, {}, void 0)
+    highlightItems: undefined,
+    showDeletePopover: false,
+    deleteProps: undefined
 };
 const reducer = (state, action) => {
     switch (action.type) {
@@ -27,50 +34,109 @@ const reducer = (state, action) => {
             // minor optimization, not to update state.. if no change in the value
             return action.payload.show === state.showLib
                 ? state
-                : { ...state, showLib: action.payload.show };
+                : { ...state, showLib: action.payload.show, allowNonBranchNode: false };
+        case 'setActiveItem':
+            return {
+                ...state,
+                activeItem: action.payload.target
+            };
         case 'setActiveAddButton':
             state.activeAddBtnMeta = {
                 ...action.payload
             };
             return {
                 ...state,
-                showLib: true
+                showLib: true,
+                allowNonBranchNode: action.payload.allowNonBranchNode
             };
         case 'setGraphData':
             return {
                 ...state,
                 graphData: action.payload.graphData,
-                connectorComponent: action.payload.connectorComponent,
-                nodeComponent: action.payload.nodeComponent
+                highlightItems: action.payload.highlightItems
+            };
+        case 'highlight':
+            // minor optimization to avoid unnecessary re-render
+            if (action.payload.hideDeletePopover === !state.showDeletePopover) {
+                return state;
+            }
+            return {
+                ...state,
+                highlightItems: action.payload.highlightItems,
+                showDeletePopover: action.payload.hideDeletePopover !== true && state.showDeletePopover
+            };
+        case 'showDeletePopover':
+            return {
+                ...state,
+                showDeletePopover: action.payload.showDeletePopover,
+                deleteProps: action.payload.deleteProps
             };
         default:
             return state;
     }
 };
-const StyledLabel = styled(Text)(({ theme }) => {
-    return css `
-    border-radius: ${theme.base['border-radius']};
-    background: ${theme.base.colors.slate.dark};
-    color: ${theme.base.colors.white};
-    text-align: center;
-    padding: calc(0.5 * ${theme.base.spacing});
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 32ch;
-    white-space: nowrap;
-  `;
-});
-StyledLabel.defaultProps = defaultThemeProp;
-const FlowModeller = ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, nodeLibrary, actions }) => {
+const FlowModeller = ({ graphData, highlightData, onNodeActionClick, onNodeAdd, nodeLibrary, onNodeClick, onDelete, actions, readOnly }) => {
     const [state, dispatch] = useReducer(reducer, initState);
     const [popoverEl, setPopoverEl] = useElement(null);
+    const [deletePopoverEl, setDeletePopoverEl] = useElement(null);
+    const stateRef = useRef(initState);
+    // stateRef always refers to the same state obj
+    // "fixed" callbacks can refer to this object whenever
+    // it need the current value.  Note: the callbacks will not
+    // be reactive - they will not re-run the instant state changes,
+    // but they *will* see the current value whenever they do run
+    stateRef.current = state;
     const t = useI18n();
     const onNodeCreate = (el, meta) => {
+        const graph = new DirectedGraph(graphData);
+        let isAllowNonBranchNode = false;
+        if (meta.refType === 'connector') {
+            if (!Array.isArray(meta.refId))
+                meta.refId = [meta.refId];
+            const connectorData = graph.getConnector(meta.refId[0]);
+            const toNode = graph.getNode(connectorData.toNodeId);
+            const inConnectors = graph.getInConnectors(toNode.id);
+            let hiddenConnectorsCount = 0;
+            inConnectors.forEach(connector => {
+                const node = graph.getNode(connector.fromNodeId);
+                if (node.type.minConnectors === 0)
+                    hiddenConnectorsCount += 1;
+            });
+            const isPlaceholderConnector = meta.refId.length > 1;
+            /** if node is being added on a placeholder connector then reduce number of in connectors of destination node
+             * by total number of connectors converging/joining to form placeholder connector and add one to the in connector count
+             */
+            const inConnectorsCount = isPlaceholderConnector
+                ? inConnectors.length - meta.refId.length + 1
+                : inConnectors.length;
+            /** if node is being added on a placeholder connector then reduce number of hidden connectors of destination node
+             * by total number of connectors converging/joining to from placeholder connector and are originating from go to nodes
+             */
+            if (isPlaceholderConnector) {
+                meta.refId.forEach(connector => {
+                    if (graph.getNode(graph.getConnector(connector).fromNodeId).type.minConnectors === 0)
+                        hiddenConnectorsCount -= 1;
+                });
+            }
+            /** check destination/target node in connectors count is more than one
+             * check non-hidden/visible connectors among in connectors of destination/target node are more than 1
+             * check connectors converging/joining to form a placeholder connector are not equal to total number of in connectors
+             */
+            if (inConnectorsCount > 1 &&
+                inConnectorsCount - hiddenConnectorsCount > 1 &&
+                inConnectors.length !== meta.refId.length) {
+                isAllowNonBranchNode = true;
+            }
+            else {
+                isAllowNonBranchNode = false;
+            }
+        }
         dispatch({
             type: 'setActiveAddButton',
             payload: {
                 target: el,
-                meta
+                meta,
+                allowNonBranchNode: isAllowNonBranchNode
             }
         });
     };
@@ -82,13 +148,73 @@ const FlowModeller = ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, no
             }
         });
     };
+    const closeDeleteModel = () => {
+        // un-highlight the nodes and connectors
+        dispatch({
+            type: 'highlight',
+            payload: {
+                highlightItems: undefined,
+                hideDeletePopover: true
+            }
+        });
+    };
+    const onDeleteWrapper = (params, e) => {
+        const result = FlowModellerHelper.deleteNode(graphData, params.nodeId);
+        if (result) {
+            if (!result.updates && result.error) {
+                onDelete?.({ ...params, additionalData: result }, t('delete_referenced_step_error'), e);
+            }
+            else if (result.error) {
+                onDelete?.({ ...params, additionalData: result }, t('delete_step_error'), e);
+            }
+            onDelete?.({ ...params, additionalData: result }, '', e);
+        }
+        else {
+            dispatch({
+                type: 'showDeletePopover',
+                payload: {
+                    showDeletePopover: true,
+                    deleteProps: {
+                        flowGraphData: graphData,
+                        rendererGraphData: stateRef.current.graphData,
+                        nodeId: params.nodeId,
+                        target: {
+                            getBoundingClientRect: () => document
+                                .getElementById(`modeller-node-${stateRef.current.deleteProps?.nodeId}`)
+                                ?.getBoundingClientRect()
+                        },
+                        onChange: highlights => {
+                            dispatch({
+                                type: 'highlight',
+                                payload: {
+                                    highlightItems: highlights
+                                }
+                            });
+                        },
+                        onSubmit: outcome => {
+                            // un-highlight the nodes and connectors
+                            closeDeleteModel();
+                            if (outcome.error) {
+                                onDelete?.({ ...params, additionalData: outcome }, t('delete_step_error'), e);
+                            }
+                            else {
+                                onDelete?.({ ...params, additionalData: outcome }, '', e);
+                            }
+                        },
+                        onCancel: closeDeleteModel
+                    }
+                }
+            });
+        }
+    };
     useEffect(() => {
+        const graph = new DirectedGraph(graphData);
         const onGetNewPHNode = metaData => {
             return {
                 id: createUID(),
                 children: (_jsx(AddButton, { addNodeHandler: (e) => {
                         onNodeCreate(e.currentTarget, metaData);
-                    } }, void 0)),
+                    } })),
                 position: { x: 0, y: 0 },
                 dimensions: { width: 1, height: 0 }
             };
@@ -98,33 +224,12 @@ const FlowModeller = ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, no
                 id: createUID(),
                 fromNodeId,
                 toNodeId,
-                points: []
-            };
-        };
-        const Connector = props => {
-            const { id, labelLayout } = props;
-            const refId = isPlaceHolderConnector(props)
-                ? props.realConnectors
-                : id.toString();
-            const metaData = {
-                refType: 'connector',
-                refId
+                points: [],
+                data: {
+                    onNodeCreate,
+                    type: 'default'
+                }
             };
-            return (_jsxs(_Fragment, { children: [labelLayout?.value && (_jsx(Flex, { container: { justify: 'center' }, children: _jsx(StyledLabel, { children: labelLayout.value }, void 0) }, void 0)), _jsx(AddButton, { addNodeHandler: (e) => {
-                            onNodeCreate(e.currentTarget, metaData);
-                        } }, void 0)] }, void 0));
-        };
-        const Node = ({ id, type, label, description, additionalData }) => {
-            if (!type) {
-                return _jsx("div", {}, void 0);
-            }
-            if (type?.id === START_NODETYPE.id) {
-                return _jsx(StartNode, { id: id, type: type, label: label.toUpperCase() }, void 0);
-            }
-            if (type?.id === STOP_NODETYPE.id) {
-                return _jsx(EndNode, { id: id, type: type, label: label.toUpperCase() }, void 0);
-            }
-            return (_jsx(DefaultNode, { id: id, label: label, type: type, description: description, onActionClick: onNodeActionClick, onClick: onNodeClick, actions: actions, additionalData: additionalData }, void 0));
         };
         const flowNodes = graphData.nodes.map(node => {
             const flowNode = {
@@ -136,6 +241,13 @@ const FlowModeller = ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, no
                 position: {
                     x: 0,
                     y: 0
+                },
+                data: {
+                    isActive: state.activeItem?.id === node.id,
+                    actions,
+                    onDelete: onDeleteWrapper,
+                    onActionClick: onNodeActionClick,
+                    onClick: onNodeClick
                 }
             };
             if (node.type.id === START_NODETYPE.id || node.type.id === STOP_NODETYPE.id) {
@@ -145,11 +257,15 @@ const FlowModeller = ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, no
             return flowNode;
         });
         const connectors = graphData.connectors.map(connector => {
+            const nodeData = graph.getNode(connector.fromNodeId);
+            const isBranchNode = nodeData.type.minConnectors === 0;
             return {
                 ...connector,
                 points: [],
                 data: {
-                    label: connector.label
+                    label: connector.label,
+                    onNodeCreate,
+                    type: !isBranchNode ? 'default' : 'hidden'
                 }
             };
         });
@@ -158,9 +274,7 @@ const FlowModeller = ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, no
         dispatch({
             type: 'setGraphData',
             payload: {
-                graphData: newGraphData,
-                connectorComponent: Connector,
-                nodeComponent: Node
+                graphData: newGraphData
             }
         });
     }, [graphData]);
@@ -178,14 +292,24 @@ const FlowModeller = ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, no
         }
     }, [closeMenu]);
     useOuterEvent('mousedown', [popoverEl], closeMenu);
+    useOuterEvent('mousedown', [deletePopoverEl], closeDeleteModel);
     useEffect(() => {
         document.addEventListener('keydown', onKeydown);
         return () => {
             document.removeEventListener('keydown', onKeydown);
         };
     }, []);
-    const items = nodeLibrary !== undefined ? nodeLibrary : [];
-    return (_jsxs("div", { children: [_jsx(FlowRenderer, { graphData: state.graphData, connector: state.connectorComponent, node: state.nodeComponent }, void 0), _jsx(ItemLibrary, { show: state.showLib, target: state.activeAddBtnMeta.target, placeholder: t('search_nodes'), items: items, onClick: onLibraryItemSelect, ref: setPopoverEl }, void 0)] }, void 0));
+    let items = nodeLibrary !== undefined ? nodeLibrary : [];
+    if (!state.allowNonBranchNode) {
+        items = items.filter(shapeTypes => {
+            if (shapeTypes.type) {
+                return shapeTypes.type.minConnectors !== 0;
+            }
+            return true;
+        });
+    }
+    const ctxValue = useMemo(() => ({ readOnly, highlights: highlightData ?? state.highlightItems }), [readOnly, state.highlightItems, highlightData]);
+    return (_jsxs("div", { children: [_jsx(FlowModellerContext.Provider, { value: ctxValue, children: _jsx(FlowRenderer, { graphData: state.graphData, connector: Connector, node: Node }) }), state.showDeletePopover && state.deleteProps && (_jsx(DeletePopover, { show: state.showDeletePopover, ref: setDeletePopoverEl, ...state.deleteProps })), _jsx(ItemLibrary, { show: state.showLib, target: state.activeAddBtnMeta.target, placeholder: t('search_nodes'), items: items, onClick: onLibraryItemSelect, ref: setPopoverEl, position: 'bottom' })] }));
 };
 export default FlowModeller;
 //# sourceMappingURL=FlowModeller.js.map