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

package/lib/components/FlowModeller/helper.js

@@ -1,73 +1,89 @@
 import { createUID } from '@pega/cosmos-react-core';
 import { DirectedGraph } from './Renderer/Utils/Graph';
-import { STOP_NODETYPE } from './Node/Node.types';
 import GraphTraversal from './Renderer/Utils/GraphTraversal';
+import deleteNodeUtils from './Utils/deleteNodeUtils';
 const helpers = {
-    addBranch(graphData, nodeId, label, getNewConnector) {
+    addConnector(graphData, nodeId, label, getNewConnector) {
         const graph = new DirectedGraph(graphData);
-        const convergeData = GraphTraversal.getConvergenceData(graphData, nodeId);
-        if (convergeData) {
+        const convergenceData = GraphTraversal.getConvergenceData(graphData, nodeId);
+        const outConnectors = graph.getOutConnectors(nodeId);
+        const convergenceNodeId = convergenceData ? convergenceData.nodeId : undefined;
+        const targetNodeId = outConnectors.length < 2 ? outConnectors[0].toNodeId : convergenceNodeId;
+        if (targetNodeId) {
             const newConnector = getNewConnector
-                ? getNewConnector(nodeId, convergeData.nodeId)
+                ? getNewConnector(nodeId, targetNodeId)
                 : {
                     id: createUID(),
                     fromNodeId: nodeId,
-                    toNodeId: convergeData.nodeId,
+                    toNodeId: targetNodeId,
                     label: label || ''
                 };
             graph.addConnector(newConnector);
+            return {
+                graphData: graph.getGraphData(),
+                connector: newConnector
+            };
         }
-        else {
-            throw new Error('Invalid node, either the node does not exist or it does not support branches');
-        }
-        return graph.getGraphData();
-    },
-    deleteNode(graphData, nodeId) {
-        const graph = new DirectedGraph(graphData);
-        const outConnectors = graph.getOutConnectors(nodeId);
-        if (outConnectors.length > 1) {
-            return null;
-        }
-        const inConnectors = graph.getInConnectors(nodeId);
-        inConnectors.forEach(con => {
-            graph.setConnector(con.id, {
-                toNodeId: outConnectors[0].toNodeId
-            });
-        });
-        graph.removeConnector(outConnectors[0].id);
-        graph.deleteNode(nodeId, true);
-        return graph.getGraphData();
+        return { graphData: { nodes: [], connectors: [] }, connector: {} };
     },
     deleteConnector: (graphData, connector) => {
-        const graph = new DirectedGraph(graphData);
         const nodeId = connector.fromNodeId;
-        const outConnectors = graph.getOutConnectors(nodeId);
-        const toNode = graph.getNode(connector.toNodeId);
-        const inConnectors = graph.getInConnectors(connector.toNodeId);
-        let isRemoved = false;
-        if (inConnectors.length >= 2) {
-            graph.removeConnector(connector.id);
-            isRemoved = true;
-        }
-        if (toNode.type.id === STOP_NODETYPE.id && outConnectors.length > 1 && !isRemoved) {
-            graph.removeConnector(connector.id);
-            isRemoved = true;
-        }
-        if (outConnectors.length > 1 && !isRemoved) {
-            outConnectors.forEach(item => {
-                if (connector.toNodeId === item.toNodeId && item.id !== connector.id) {
-                    // Connector without any node
-                    graph.removeConnector(connector.id);
-                    isRemoved = true;
+        const graph = new DirectedGraph(graphData);
+        const deleteOptionsResult = deleteNodeUtils.getDeleteNodeOptions(graph, nodeId);
+        const deleteOptions = deleteOptionsResult.options;
+        let itemsToDelete = deleteOptionsResult.allItems;
+        const targetNodeId = deleteOptionsResult?.destinationNodeId
+            ? deleteOptionsResult.destinationNodeId
+            : '';
+        const targetBranch = deleteOptions.find(deleteOption => connector.id === deleteOption.connector.id);
+        let flowConnectorExists = false;
+        if (targetBranch) {
+            itemsToDelete = targetBranch?.pathItems;
+            let visibleInConnectors = graph.getInConnectors(targetNodeId);
+            /** From the rest of the connectors check if any connector originating from a shape other than go to and
+             * is having the toNode as destination node ensuring the flow to continue
+             */
+            const restConnectors = targetBranch.restItems.connectors;
+            const connectors = Object.keys(restConnectors);
+            for (let i = 0; i < connectors.length; i += 1) {
+                const connectorData = restConnectors[connectors[i]];
+                if (connectorData &&
+                    graph.getNode(connectorData.fromNodeId).type.minConnectors !== 0 &&
+                    connectorData.toNodeId === deleteOptionsResult.destinationNodeId) {
+                    flowConnectorExists = true;
+                    break;
                 }
-            });
-        }
-        if (isRemoved) {
-            return graph.getGraphData();
+                if (connectorData &&
+                    graph.getNode(connectorData.fromNodeId).type.minConnectors === 0 &&
+                    connectorData.toNodeId === deleteOptionsResult.destinationNodeId) {
+                    visibleInConnectors = visibleInConnectors.filter(con => {
+                        return (graph.getNode(con.fromNodeId).type.minConnectors !== 0 &&
+                            con.id !== connectorData.id &&
+                            !targetBranch.pathItems.connectors[con.id]);
+                    });
+                }
+            }
+            if (!flowConnectorExists && visibleInConnectors.length >= 1) {
+                flowConnectorExists = true;
+            }
         }
-        return null;
+        // filter the highlighted nodes, including the selected node
+        const nodes = graphData.nodes.filter(item => !itemsToDelete.nodes[item.id]);
+        // filter the highlighted connectors
+        const connectors = graphData.connectors.filter(item => !itemsToDelete.connectors[item.id]);
+        const outcome = {
+            graphData: {
+                nodes,
+                connectors
+            },
+            deletes: itemsToDelete,
+            error: false
+        };
+        if (!flowConnectorExists)
+            outcome.error = true;
+        return outcome;
     },
-    addNode: ({ graphData, nodeType, metaData, getNewNode, getNewConnector, connectorsCount }) => {
+    addNode: ({ graphData, nodeType, isBranchNode, metaData, getNewNode, getNewConnector, connectorsCount }) => {
         const graph = new DirectedGraph(graphData);
         const newNode = getNewNode
             ? getNewNode()
@@ -107,7 +123,8 @@ const helpers = {
             minConnectors = connectorsCount;
         }
         else {
-            minConnectors = nodeType.minConnectors !== undefined ? nodeType.minConnectors : 1;
+            minConnectors =
+                nodeType.minConnectors !== undefined && !isBranchNode ? nodeType.minConnectors : 1;
         }
         for (let i = 0; i < minConnectors; i += 1) {
             const newConnector = getNewConnector
@@ -116,12 +133,54 @@ const helpers = {
                     id: createUID(),
                     fromNodeId: newNode.id,
                     toNodeId,
-                    label: nodeType.defaults?.connector[i].label
+                    label: !isBranchNode ? nodeType.defaults?.connector[i].label : ''
                 };
             graph.addConnector(newConnector);
         }
-        // return the updated graphData
-        return graph.getGraphData();
+        return {
+            graphData: graph.getGraphData(),
+            node: newNode
+        };
+    },
+    deleteNode(graphData, nodeId) {
+        const graph = new DirectedGraph(graphData);
+        const node = graph.getNode(nodeId);
+        const outConnectors = graph.getOutConnectors(nodeId);
+        const nodes = graph.getNodes();
+        const outcome = {
+            graphData: graph.getGraphData(),
+            deletes: {
+                nodes: {
+                    [nodeId]: node
+                },
+                connectors: {}
+            },
+            error: false
+        };
+        for (let i = 0; i < nodes.length; i += 1) {
+            if (nodes[i].type.minConnectors === 0 && nodes[i].reference === nodeId) {
+                outcome.error = true;
+                return outcome;
+            }
+        }
+        if (outConnectors.length > 1) {
+            return false;
+        }
+        const inConnectors = graph.getInConnectors(nodeId);
+        const connectorUpdates = [];
+        inConnectors.forEach(con => {
+            graph.setConnector(con.id, {
+                toNodeId: outConnectors[0].toNodeId
+            });
+            connectorUpdates.push(con);
+        });
+        graph.removeConnector(outConnectors[0].id);
+        graph.deleteNode(nodeId, true);
+        outcome.graphData = graph.getGraphData();
+        outcome.updates = {
+            connectors: connectorUpdates
+        };
+        return outcome;
     }
 };
 export default helpers;

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

@@ -1 +1 @@
-{"version":3,"file":"helper.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/helper.ts"],"names":[],"mappings":"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","sourcesContent":["import { createUID } from '@pega/cosmos-react-core';\n\nimport { DirectedGraph, GraphData, ConnectorProps } from './Renderer/Utils/Graph';\nimport { AddNodeHandlerParams } from './Renderer/Renderer.types';\nimport { NodeProps, NodeType, STOP_NODETYPE } from './Node/Node.types';\nimport GraphTraversal from './Renderer/Utils/GraphTraversal';\n\ninterface NodeDataType {\n  nodes: NodeProps[];\n  connectors: ConnectorProps[];\n}\n\nexport interface AddHelperParams {\n  nodeType: NodeType;\n  graphData: GraphData<NodeProps, ConnectorProps>;\n  metaData: AddNodeHandlerParams;\n  connectorsCount?: number;\n  getNewNode?: () => NodeProps;\n  getNewConnector?: (fromNodeId: string, toNodeId: string) => ConnectorProps;\n}\n\nconst helpers = {\n  addBranch(\n    graphData: NodeDataType,\n    nodeId: string,\n    label?: string,\n    getNewConnector?: AddHelperParams['getNewConnector']\n  ) {\n    const graph = new DirectedGraph<NodeProps, ConnectorProps>(graphData);\n    const convergeData = GraphTraversal.getConvergenceData(graphData, nodeId);\n\n    if (convergeData) {\n      const newConnector = getNewConnector\n        ? getNewConnector(nodeId, convergeData.nodeId)\n        : {\n            id: createUID(),\n            fromNodeId: nodeId,\n            toNodeId: convergeData.nodeId,\n            label: label || ''\n          };\n\n      graph.addConnector(newConnector);\n    } else {\n      throw new Error(\n        'Invalid node, either the node does not exist or it does not support branches'\n      );\n    }\n\n    return graph.getGraphData();\n  },\n  deleteNode(graphData: NodeDataType, nodeId: string) {\n    const graph = new DirectedGraph<NodeProps, ConnectorProps>(graphData);\n    const outConnectors = graph.getOutConnectors(nodeId);\n\n    if (outConnectors.length > 1) {\n      return null;\n    }\n\n    const inConnectors = graph.getInConnectors(nodeId);\n\n    inConnectors.forEach(con => {\n      graph.setConnector(con.id, {\n        toNodeId: outConnectors[0].toNodeId\n      });\n    });\n\n    graph.removeConnector(outConnectors[0].id);\n\n    graph.deleteNode(nodeId, true);\n\n    return graph.getGraphData();\n  },\n  deleteConnector: (graphData: NodeDataType, connector: ConnectorProps) => {\n    const graph = new DirectedGraph<NodeProps, ConnectorProps>(graphData);\n    const nodeId = connector.fromNodeId;\n    const outConnectors = graph.getOutConnectors(nodeId);\n    const toNode = graph.getNode(connector.toNodeId);\n    const inConnectors = graph.getInConnectors(connector.toNodeId);\n    let isRemoved = false;\n    if (inConnectors.length >= 2) {\n      graph.removeConnector(connector.id);\n      isRemoved = true;\n    }\n    if (toNode.type.id === STOP_NODETYPE.id && outConnectors.length > 1 && !isRemoved) {\n      graph.removeConnector(connector.id);\n      isRemoved = true;\n    }\n\n    if (outConnectors.length > 1 && !isRemoved) {\n      outConnectors.forEach(item => {\n        if (connector.toNodeId === item.toNodeId && item.id !== connector.id) {\n          // Connector without any node\n          graph.removeConnector(connector.id);\n          isRemoved = true;\n        }\n      });\n    }\n    if (isRemoved) {\n      return graph.getGraphData();\n    }\n    return null;\n  },\n  addNode: ({\n    graphData,\n    nodeType,\n    metaData,\n    getNewNode,\n    getNewConnector,\n    connectorsCount\n  }: AddHelperParams) => {\n    const graph = new DirectedGraph(graphData);\n\n    const newNode = getNewNode\n      ? getNewNode()\n      : {\n          ...nodeType.defaults.node,\n          id: createUID(),\n          type: nodeType\n        };\n\n    // add new node\n    graph.addNode(newNode);\n\n    let toNodeId = '';\n    if (metaData.refType === 'connector') {\n      if (!Array.isArray(metaData.refId)) {\n        metaData.refId = [metaData.refId];\n      }\n\n      metaData.refId.forEach(conId => {\n        const refConnector = graph.getConnector(conId);\n\n        // backup current connectors toNodeId\n        toNodeId = refConnector.toNodeId;\n\n        // update the actual connector\n        graph.setConnector(conId, {\n          toNodeId: newNode.id\n        });\n      });\n    } else if (metaData.refType === 'node') {\n      toNodeId = metaData.refId as string;\n\n      // iterate and update all in-connectors to point to the new node\n      graph.getInConnectors(metaData.refId as string).forEach(con => {\n        graph.setConnector(con.id, {\n          toNodeId: newNode.id\n        });\n      });\n    }\n\n    let minConnectors = 1;\n    if (connectorsCount !== undefined) {\n      minConnectors = connectorsCount;\n    } else {\n      minConnectors = nodeType.minConnectors !== undefined ? nodeType.minConnectors : 1;\n    }\n\n    for (let i = 0; i < minConnectors; i += 1) {\n      const newConnector = getNewConnector\n        ? getNewConnector(newNode.id, toNodeId)\n        : {\n            id: createUID(),\n            fromNodeId: newNode.id,\n            toNodeId,\n            label: nodeType.defaults?.connector[i].label\n          };\n      graph.addConnector(newConnector);\n    }\n    // return the updated graphData\n    return graph.getGraphData();\n  }\n};\n\nexport default helpers;\n"]}
+{"version":3,"file":"helper.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/helper.ts"],"names":[],"mappings":"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","sourcesContent":["import { createUID } from '@pega/cosmos-react-core';\n\nimport { DirectedGraph, GraphData, ConnectorProps } from './Renderer/Utils/Graph';\nimport { AddNodeHandlerParams } from './Renderer/Renderer.types';\nimport { NodeProps, NodeType } from './Node/Node.types';\nimport GraphTraversal from './Renderer/Utils/GraphTraversal';\nimport deleteNodeUtils, { DeleteNodeOutcome, GraphDataAsMap } from './Utils/deleteNodeUtils';\n\nexport interface AddHelperParams {\n  nodeType: NodeType;\n  graphData: GraphData<NodeProps, ConnectorProps>;\n  metaData: AddNodeHandlerParams;\n  connectorsCount?: number;\n  getNewNode?: () => NodeProps;\n  isBranchNode: boolean;\n  getNewConnector?: (fromNodeId: string, toNodeId: string) => ConnectorProps;\n}\n\nconst helpers = {\n  addConnector(\n    graphData: GraphData<NodeProps, ConnectorProps>,\n    nodeId: string,\n    label?: string,\n    getNewConnector?: AddHelperParams['getNewConnector']\n  ) {\n    const graph = new DirectedGraph<NodeProps, ConnectorProps>(graphData);\n    const convergenceData = GraphTraversal.getConvergenceData(graphData, nodeId);\n    const outConnectors = graph.getOutConnectors(nodeId);\n    const convergenceNodeId = convergenceData ? convergenceData.nodeId : undefined;\n    const targetNodeId = outConnectors.length < 2 ? outConnectors[0].toNodeId : convergenceNodeId;\n\n    if (targetNodeId) {\n      const newConnector = getNewConnector\n        ? getNewConnector(nodeId, targetNodeId)\n        : {\n            id: createUID(),\n            fromNodeId: nodeId,\n            toNodeId: targetNodeId,\n            label: label || ''\n          };\n\n      graph.addConnector(newConnector);\n\n      return {\n        graphData: graph.getGraphData(),\n        connector: newConnector\n      };\n    }\n    return { graphData: { nodes: [], connectors: [] }, connector: {} };\n  },\n\n  deleteConnector: (graphData: GraphData<NodeProps, ConnectorProps>, connector: ConnectorProps) => {\n    const nodeId = connector.fromNodeId;\n    const graph = new DirectedGraph(graphData);\n    const deleteOptionsResult = deleteNodeUtils.getDeleteNodeOptions(graph, nodeId);\n    const deleteOptions = deleteOptionsResult.options;\n    let itemsToDelete: GraphDataAsMap = deleteOptionsResult.allItems;\n    const targetNodeId = deleteOptionsResult?.destinationNodeId\n      ? deleteOptionsResult.destinationNodeId\n      : '';\n\n    const targetBranch = deleteOptions.find(\n      deleteOption => connector.id === deleteOption.connector.id\n    );\n    let flowConnectorExists = false;\n\n    if (targetBranch) {\n      itemsToDelete = targetBranch?.pathItems;\n      let visibleInConnectors = graph.getInConnectors(targetNodeId);\n\n      /** From the rest of the connectors check if any connector originating from a shape other than go to and\n       * is having the toNode as destination node ensuring the flow to continue\n       */\n      const restConnectors = targetBranch.restItems.connectors;\n      const connectors = Object.keys(restConnectors);\n      for (let i = 0; i < connectors.length; i += 1) {\n        const connectorData = restConnectors[connectors[i]];\n        if (\n          connectorData &&\n          graph.getNode(connectorData.fromNodeId).type.minConnectors !== 0 &&\n          connectorData.toNodeId === deleteOptionsResult.destinationNodeId\n        ) {\n          flowConnectorExists = true;\n          break;\n        }\n        if (\n          connectorData &&\n          graph.getNode(connectorData.fromNodeId).type.minConnectors === 0 &&\n          connectorData.toNodeId === deleteOptionsResult.destinationNodeId\n        ) {\n          visibleInConnectors = visibleInConnectors.filter(con => {\n            return (\n              graph.getNode(con.fromNodeId).type.minConnectors !== 0 &&\n              con.id !== connectorData.id &&\n              !targetBranch.pathItems.connectors[con.id]\n            );\n          });\n        }\n      }\n\n      if (!flowConnectorExists && visibleInConnectors.length >= 1) {\n        flowConnectorExists = true;\n      }\n    }\n    // filter the highlighted nodes, including the selected node\n    const nodes = graphData.nodes.filter(item => !itemsToDelete.nodes[item.id]);\n    // filter the highlighted connectors\n    const connectors = graphData.connectors.filter(item => !itemsToDelete.connectors[item.id]);\n\n    const outcome: DeleteNodeOutcome = {\n      graphData: {\n        nodes,\n        connectors\n      },\n      deletes: itemsToDelete,\n      error: false\n    };\n    if (!flowConnectorExists) outcome.error = true;\n    return outcome;\n  },\n\n  addNode: ({\n    graphData,\n    nodeType,\n    isBranchNode,\n    metaData,\n    getNewNode,\n    getNewConnector,\n    connectorsCount\n  }: AddHelperParams) => {\n    const graph = new DirectedGraph(graphData);\n    const newNode = getNewNode\n      ? getNewNode()\n      : {\n          ...nodeType.defaults.node,\n          id: createUID(),\n          type: nodeType\n        };\n    // add new node\n    graph.addNode(newNode);\n\n    let toNodeId = '';\n    if (metaData.refType === 'connector') {\n      if (!Array.isArray(metaData.refId)) {\n        metaData.refId = [metaData.refId];\n      }\n      metaData.refId.forEach(conId => {\n        const refConnector = graph.getConnector(conId);\n        // backup current connectors toNodeId\n        toNodeId = refConnector.toNodeId;\n        // update the actual connector\n        graph.setConnector(conId, {\n          toNodeId: newNode.id\n        });\n      });\n    } else if (metaData.refType === 'node') {\n      toNodeId = metaData.refId as string;\n      // iterate and update all in-connectors to point to the new node\n      graph.getInConnectors(metaData.refId as string).forEach(con => {\n        graph.setConnector(con.id, {\n          toNodeId: newNode.id\n        });\n      });\n    }\n\n    let minConnectors = 1;\n    if (connectorsCount !== undefined) {\n      minConnectors = connectorsCount;\n    } else {\n      minConnectors =\n        nodeType.minConnectors !== undefined && !isBranchNode ? nodeType.minConnectors : 1;\n    }\n    for (let i = 0; i < minConnectors; i += 1) {\n      const newConnector = getNewConnector\n        ? getNewConnector(newNode.id, toNodeId)\n        : {\n            id: createUID(),\n            fromNodeId: newNode.id,\n            toNodeId,\n            label: !isBranchNode ? nodeType.defaults?.connector[i].label : ''\n          };\n      graph.addConnector(newConnector);\n    }\n\n    return {\n      graphData: graph.getGraphData(),\n      node: newNode\n    };\n  },\n\n  deleteNode(\n    graphData: GraphData<NodeProps, ConnectorProps>,\n    nodeId: string\n  ): DeleteNodeOutcome | false {\n    const graph = new DirectedGraph<NodeProps, ConnectorProps>(graphData);\n    const node = graph.getNode(nodeId);\n    const outConnectors = graph.getOutConnectors(nodeId);\n    const nodes = graph.getNodes();\n\n    const outcome: DeleteNodeOutcome = {\n      graphData: graph.getGraphData(),\n      deletes: {\n        nodes: {\n          [nodeId]: node\n        },\n        connectors: {}\n      },\n      error: false\n    };\n\n    for (let i = 0; i < nodes.length; i += 1) {\n      if (nodes[i].type.minConnectors === 0 && nodes[i].reference === nodeId) {\n        outcome.error = true;\n        return outcome;\n      }\n    }\n\n    if (outConnectors.length > 1) {\n      return false;\n    }\n\n    const inConnectors = graph.getInConnectors(nodeId);\n\n    const connectorUpdates: ConnectorProps[] = [];\n\n    inConnectors.forEach(con => {\n      graph.setConnector(con.id, {\n        toNodeId: outConnectors[0].toNodeId\n      });\n\n      connectorUpdates.push(con);\n    });\n\n    graph.removeConnector(outConnectors[0].id);\n    graph.deleteNode(nodeId, true);\n\n    outcome.graphData = graph.getGraphData();\n    outcome.updates = {\n      connectors: connectorUpdates\n    };\n    return outcome;\n  }\n};\n\nexport default helpers;\n"]}

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

@@ -1,10 +1,15 @@
-export { default, FlowModellerProps } from './FlowModeller';
+export { default } from './FlowModeller';
+export { FlowModellerProps } from './FlowModeller.types';
 export { ActionParams, NodeProps, NodeType, NodeLibraryItem, START_NODETYPE, STOP_NODETYPE } from './Node/Node.types';
 export { default as FlowRenderer } from './Renderer/Renderer';
-export { RendererProps, RendererConnectorProps, RendererNodeProps, AddNodeHandlerParams } from './Renderer/Renderer.types';
+export { RendererProps, AddNodeHandlerParams } from './Renderer/Renderer.types';
 export { DirectedGraph, GraphData, ConnectorProps } from './Renderer/Utils/Graph';
 export { default as GraphTraversal } from './Renderer/Utils/GraphTraversal';
 export { PlottedGraphConnector, PlottedGraphNode } from './Renderer/Utils/GraphLayout';
-export { default as PlaceHolderHelper, isPlaceHolderConnector, isPlaceHolderNode, PlaceHolderConnector, PlaceHolderNode } from './Utils/AddNodeUtils';
+export { default as PlaceHolderHelper, isPlaceHolderConnector, isPlaceHolderNode, PlaceHolderConnector, PlaceHolderNode } from './Utils/addNodeUtils';
 export { default as FlowModellerHelper } from './helper';
+export { default as DeletePopover } from './DeletePopover';
+export { default as Connector } from './Connector';
+export { default as Node } from './Node';
+export { default as deleteNodeUtils, DeleteNodeOutcome } from './Utils/deleteNodeUtils';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EACL,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,eAAe,EACf,cAAc,EACd,aAAa,EACd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EACL,aAAa,EACb,sBAAsB,EACtB,iBAAiB,EACjB,oBAAoB,EACrB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAC5E,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AACvF,OAAO,EACL,OAAO,IAAI,iBAAiB,EAC5B,sBAAsB,EACtB,iBAAiB,EACjB,oBAAoB,EACpB,eAAe,EAChB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EACL,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,eAAe,EACf,cAAc,EACd,aAAa,EACd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAChF,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAC5E,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AACvF,OAAO,EACL,OAAO,IAAI,iBAAiB,EAC5B,sBAAsB,EACtB,iBAAiB,EACjB,oBAAoB,EACpB,eAAe,EAChB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,UAAU,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC"}

package/lib/components/FlowModeller/index.js

@@ -3,6 +3,10 @@ export { START_NODETYPE, STOP_NODETYPE } from './Node/Node.types';
 export { default as FlowRenderer } from './Renderer/Renderer';
 export { DirectedGraph } from './Renderer/Utils/Graph';
 export { default as GraphTraversal } from './Renderer/Utils/GraphTraversal';
-export { default as PlaceHolderHelper, isPlaceHolderConnector, isPlaceHolderNode } from './Utils/AddNodeUtils';
+export { default as PlaceHolderHelper, isPlaceHolderConnector, isPlaceHolderNode } from './Utils/addNodeUtils';
 export { default as FlowModellerHelper } from './helper';
+export { default as DeletePopover } from './DeletePopover';
+export { default as Connector } from './Connector';
+export { default as Node } from './Node';
+export { default as deleteNodeUtils } from './Utils/deleteNodeUtils';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAqB,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAKL,cAAc,EACd,aAAa,EACd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAO9D,OAAO,EAAE,aAAa,EAA6B,MAAM,wBAAwB,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAE5E,OAAO,EACL,OAAO,IAAI,iBAAiB,EAC5B,sBAAsB,EACtB,iBAAiB,EAGlB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,UAAU,CAAC","sourcesContent":["export { default, FlowModellerProps } from './FlowModeller';\nexport {\n  ActionParams,\n  NodeProps,\n  NodeType,\n  NodeLibraryItem,\n  START_NODETYPE,\n  STOP_NODETYPE\n} from './Node/Node.types';\nexport { default as FlowRenderer } from './Renderer/Renderer';\nexport {\n  RendererProps,\n  RendererConnectorProps,\n  RendererNodeProps,\n  AddNodeHandlerParams\n} from './Renderer/Renderer.types';\nexport { DirectedGraph, GraphData, ConnectorProps } from './Renderer/Utils/Graph';\nexport { default as GraphTraversal } from './Renderer/Utils/GraphTraversal';\nexport { PlottedGraphConnector, PlottedGraphNode } from './Renderer/Utils/GraphLayout';\nexport {\n  default as PlaceHolderHelper,\n  isPlaceHolderConnector,\n  isPlaceHolderNode,\n  PlaceHolderConnector,\n  PlaceHolderNode\n} from './Utils/AddNodeUtils';\nexport { default as FlowModellerHelper } from './helper';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAKL,cAAc,EACd,aAAa,EACd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAE9D,OAAO,EAAE,aAAa,EAA6B,MAAM,wBAAwB,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAE5E,OAAO,EACL,OAAO,IAAI,iBAAiB,EAC5B,sBAAsB,EACtB,iBAAiB,EAGlB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,UAAU,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,eAAe,EAAqB,MAAM,yBAAyB,CAAC","sourcesContent":["export { default } from './FlowModeller';\nexport { FlowModellerProps } from './FlowModeller.types';\nexport {\n  ActionParams,\n  NodeProps,\n  NodeType,\n  NodeLibraryItem,\n  START_NODETYPE,\n  STOP_NODETYPE\n} from './Node/Node.types';\nexport { default as FlowRenderer } from './Renderer/Renderer';\nexport { RendererProps, AddNodeHandlerParams } from './Renderer/Renderer.types';\nexport { DirectedGraph, GraphData, ConnectorProps } from './Renderer/Utils/Graph';\nexport { default as GraphTraversal } from './Renderer/Utils/GraphTraversal';\nexport { PlottedGraphConnector, PlottedGraphNode } from './Renderer/Utils/GraphLayout';\nexport {\n  default as PlaceHolderHelper,\n  isPlaceHolderConnector,\n  isPlaceHolderNode,\n  PlaceHolderConnector,\n  PlaceHolderNode\n} from './Utils/addNodeUtils';\nexport { default as FlowModellerHelper } from './helper';\nexport { default as DeletePopover } from './DeletePopover';\nexport { default as Connector } from './Connector';\nexport { default as Node } from './Node';\nexport { default as deleteNodeUtils, DeleteNodeOutcome } from './Utils/deleteNodeUtils';\n"]}

package/lib/components/ItemLibrary/ItemLibrary.d.ts

@@ -1,15 +1,15 @@
 import { FC, Ref } from 'react';
-import { SearchInputProps, ForwardProps, MenuItemProps } from '@pega/cosmos-react-core';
-export declare const StyledIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export interface ItemVisual {
-    color: string;
-    icon: string;
-}
+import { SearchInputProps, ForwardProps, MenuItemProps, PopoverProps } from '@pega/cosmos-react-core';
+import { ColorName } from '../../utils';
 export interface LibraryItem extends MenuItemProps {
     id: string;
     type: ItemVisual;
     items?: LibraryItem[];
 }
+export interface ItemVisual {
+    color: ColorName;
+    icon: string;
+}
 export interface ItemLibraryProps<T extends LibraryItem = LibraryItem> {
     show: boolean;
     target: HTMLElement | null;
@@ -17,7 +17,9 @@ export interface ItemLibraryProps<T extends LibraryItem = LibraryItem> {
     onClick?: (libItem: T) => void;
     ref?: Ref<HTMLDivElement>;
     placeholder?: SearchInputProps['placeholder'];
+    position?: PopoverProps['placement'];
 }
+export declare const StyledIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 declare const ItemLibrary: FC<ItemLibraryProps & ForwardProps>;
 export default ItemLibrary;
 //# sourceMappingURL=ItemLibrary.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ItemLibrary.d.ts","sourceRoot":"","sources":["../../../src/components/ItemLibrary/ItemLibrary.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAGF,GAAG,EAOJ,MAAM,OAAO,CAAC;AAIf,OAAO,EACL,gBAAgB,EAChB,YAAY,EAKZ,aAAa,EAMd,MAAM,yBAAyB,CAAC;AAEjC,eAAO,MAAM,UAAU,yGAWrB,CAAC;AAIH,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,WAAY,SAAQ,aAAa;IAChD,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;CACvB;AAMD,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW;IACnE,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;CAC/C;AAED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CAyFpD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ItemLibrary.d.ts","sourceRoot":"","sources":["../../../src/components/ItemLibrary/ItemLibrary.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAGF,GAAG,EAOJ,MAAM,OAAO,CAAC;AAIf,OAAO,EACL,gBAAgB,EAChB,YAAY,EAKZ,aAAa,EAMb,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAY,SAAS,EAAE,MAAM,aAAa,CAAC;AAElD,MAAM,WAAW,WAAY,SAAQ,aAAa;IAChD,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;CACvB;AACD,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AACD,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW;IACnE,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;CACtC;AAED,eAAO,MAAM,UAAU,yGAWrB,CAAC;AAIH,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CAkGpD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/ItemLibrary/ItemLibrary.js

@@ -3,6 +3,7 @@ import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'r
 import styled, { css } from 'styled-components';
 import { readableColor } from 'polished';
 import { Icon, Menu, menuHelpers, Popover, SearchInput, cap, createStringMatcher, defaultThemeProp } from '@pega/cosmos-react-core';
+import { colorMap } from '../../utils';
 export const StyledIcon = styled.div(({ theme }) => {
     return css `
     min-height: 2rem;
@@ -16,10 +17,7 @@ export const StyledIcon = styled.div(({ theme }) => {
   `;
 });
 StyledIcon.defaultProps = defaultThemeProp;
-const StyledPopover = styled(Popover) `
-  min-width: 40ch;
-`;
-const ItemLibrary = forwardRef(({ show, target, items, onClick, placeholder }, ref) => {
+const ItemLibrary = forwardRef(({ show, target, items, onClick, placeholder, position = 'bottom-start' }, ref) => {
     const [search, setSearch] = useState('');
     const searchEleRef = useRef(null);
     useEffect(() => {
@@ -43,9 +41,9 @@ const ItemLibrary = forwardRef(({ show, target, items, onClick, placeholder }, r
             return {
                 ...node,
                 visual: nodeItem.type ? (_jsx(StyledIcon, { id: node.id, style: {
-                        '--bg-color': nodeItem.type.color,
-                        '--fg-color': readableColor(nodeItem.type.color)
-                    }, children: _jsx(Icon, { name: nodeItem.type.icon }, void 0) }, void 0)) : undefined,
+                        '--bg-color': colorMap[nodeItem.type.color],
+                        '--fg-color': readableColor(colorMap[nodeItem.type.color])
+                    }, children: _jsx(Icon, { name: nodeItem.type.icon }) })) : undefined,
                 count: node.items ? node.items.length : undefined,
                 secondary: node.secondary,
                 selected: selectable ? !!node.selected : undefined
@@ -58,7 +56,7 @@ const ItemLibrary = forwardRef(({ show, target, items, onClick, placeholder }, r
             onClick(selectedNode);
         }
     }, [onClick]);
-    return (_jsx(_Fragment, { children: show && (_jsx(StyledPopover, { show: show, target: target, ref: ref, children: _jsx(Menu, { items: itemsToRender, onItemClick: onItemSelect, header: _jsx(SearchInput, { ref: searchEleRef, onSearchChange: setSearch, value: search, searchInputAriaLabel: placeholder, placeholder: placeholder }, void 0) }, void 0) }, void 0)) }, void 0));
+    return (_jsx(_Fragment, { children: show && (_jsx(Popover, { show: show, placement: position, target: target, ref: ref, children: _jsx(Menu, { items: itemsToRender, onItemClick: onItemSelect, header: _jsx(SearchInput, { ref: searchEleRef, onSearchChange: setSearch, value: search, searchInputAriaLabel: placeholder, placeholder: placeholder }), focusControlEl: searchEleRef.current || undefined }) })) }));
 });
 export default ItemLibrary;
 //# sourceMappingURL=ItemLibrary.js.map

package/lib/components/ItemLibrary/ItemLibrary.js.map

@@ -1 +1 @@
-{"version":3,"file":"ItemLibrary.js","sourceRoot":"","sources":["../../../src/components/ItemLibrary/ItemLibrary.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,UAAU,EAGV,WAAW,EACX,SAAS,EACT,OAAO,EACP,MAAM,EACN,QAAQ,EAET,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EAGL,IAAI,EACJ,IAAI,EAEJ,WAAW,EAEX,OAAO,EACP,WAAW,EACX,GAAG,EACH,mBAAmB,EACnB,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjD,OAAO,GAAG,CAAA;;;0BAGc,KAAK,CAAC,IAAI,CAAC,OAAO;yBACnB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;qBAItB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;GAC7C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAa3C,MAAM,aAAa,GAAmB,MAAM,CAAC,OAAO,CAAC,CAAA;;CAEpD,CAAC;AAWF,MAAM,WAAW,GAAwC,UAAU,CACjE,CACE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAqC,EAChF,GAA4B,EAC5B,EAAE;IACF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEzC,MAAM,YAAY,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEpD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,EAAE;YACR,SAAS,CAAC,EAAE,CAAC,CAAC;YACd,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;SAChC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;IAEjC,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,mBAAmB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EACxE,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,MAAM,aAAa,GAAuC,OAAO,CAAC,GAAG,EAAE;QACrE,OAAO,WAAW,CAAC,OAAO,CACxB,WAAW;YACT,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAiB,EAAE,EAAE;gBAC/D,OAAO,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACnC,CAAC,CAAC;YACJ,CAAC,CAAC,KAAK,EACT,IAAI,CAAC,EAAE;YACL,IAAI,UAAU,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;gBACf,UAAU,GAAG,IAAI,CAAC;aACnB;YAED,MAAM,QAAQ,GAAgB,IAAmB,CAAC;YAClD,OAAO;gBACL,GAAG,IAAI;gBACP,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CACtB,KAAC,UAAU,IACT,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,KAAK,EACH;wBACE,YAAY,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK;wBACjC,YAAY,EAAE,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;qBAChC,YAGpB,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,WAAI,WACvB,CACd,CAAC,CAAC,CAAC,SAAS;gBACb,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;gBACjD,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;aACnD,CAAC;QACJ,CAAC,CACF,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC;IAEzB,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,EAAuB,EAAE,EAAE;QAC1B,MAAM,YAAY,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAgB,CAAC;QACnE,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,YAAY,CAAC,CAAC;SACvB;IACH,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IACF,OAAO,CACL,4BACG,IAAI,IAAI,CACP,KAAC,aAAa,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,YACjD,KAAC,IAAI,IACH,KAAK,EAAE,aAAa,EACpB,WAAW,EAAE,YAAY,EACzB,MAAM,EACJ,KAAC,WAAW,IACV,GAAG,EAAE,YAAY,EACjB,cAAc,EAAE,SAAS,EACzB,KAAK,EAAE,MAAM,EACb,oBAAoB,EAAE,WAAW,EACjC,WAAW,EAAE,WAAW,WACxB,WAEJ,WACY,CACjB,WACA,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import {\n  FC,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  CSSProperties\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  SearchInputProps,\n  ForwardProps,\n  Icon,\n  Menu,\n  MenuGroupProps,\n  menuHelpers,\n  MenuItemProps,\n  Popover,\n  SearchInput,\n  cap,\n  createStringMatcher,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\n\nexport const StyledIcon = styled.div(({ theme }) => {\n  return css`\n    min-height: 2rem;\n    min-width: 2rem;\n    padding: calc(0.5 * ${theme.base.spacing});\n    margin-inline-end: ${theme.base.spacing};\n    text-align: center;\n    background-color: var(--bg-color);\n    color: var(--fg-color);\n    border-radius: ${theme.base['border-radius']};\n  `;\n});\n\nStyledIcon.defaultProps = defaultThemeProp;\n\nexport interface ItemVisual {\n  color: string;\n  icon: string;\n}\n\nexport interface LibraryItem extends MenuItemProps {\n  id: string;\n  type: ItemVisual;\n  items?: LibraryItem[];\n}\n\nconst StyledPopover: typeof Popover = styled(Popover)`\n  min-width: 40ch;\n`;\n\nexport interface ItemLibraryProps<T extends LibraryItem = LibraryItem> {\n  show: boolean;\n  target: HTMLElement | null;\n  items: T[];\n  onClick?: (libItem: T) => void;\n  ref?: Ref<HTMLDivElement>;\n  placeholder?: SearchInputProps['placeholder'];\n}\n\nconst ItemLibrary: FC<ItemLibraryProps & ForwardProps> = forwardRef(\n  (\n    { show, target, items, onClick, placeholder }: PropsWithoutRef<ItemLibraryProps>,\n    ref: ItemLibraryProps['ref']\n  ) => {\n    const [search, setSearch] = useState('');\n\n    const searchEleRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n      if (show) {\n        setSearch('');\n        searchEleRef?.current?.focus();\n      }\n    }, [show, searchEleRef.current]);\n\n    const searchRegex = useMemo(\n      () => (search ? createStringMatcher(cap(search), 'contains', '') : null),\n      [search]\n    );\n\n    const itemsToRender: (MenuItemProps | MenuGroupProps)[] = useMemo(() => {\n      return menuHelpers.mapTree(\n        searchRegex\n          ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n              return searchRegex.test(primary);\n            })\n          : items,\n        node => {\n          let selectable = false;\n          if (!node.items) {\n            selectable = true;\n          }\n\n          const nodeItem: LibraryItem = node as LibraryItem;\n          return {\n            ...node,\n            visual: nodeItem.type ? (\n              <StyledIcon\n                id={node.id}\n                style={\n                  {\n                    '--bg-color': nodeItem.type.color,\n                    '--fg-color': readableColor(nodeItem.type.color)\n                  } as CSSProperties\n                }\n              >\n                <Icon name={nodeItem.type.icon} />\n              </StyledIcon>\n            ) : undefined,\n            count: node.items ? node.items.length : undefined,\n            secondary: node.secondary,\n            selected: selectable ? !!node.selected : undefined\n          };\n        }\n      );\n    }, [items, searchRegex]);\n\n    const onItemSelect = useCallback(\n      (id: MenuItemProps['id']) => {\n        const selectedNode = menuHelpers.getItem(items, id) as LibraryItem;\n        if (onClick) {\n          onClick(selectedNode);\n        }\n      },\n      [onClick]\n    );\n    return (\n      <>\n        {show && (\n          <StyledPopover show={show} target={target} ref={ref}>\n            <Menu\n              items={itemsToRender}\n              onItemClick={onItemSelect}\n              header={\n                <SearchInput\n                  ref={searchEleRef}\n                  onSearchChange={setSearch}\n                  value={search}\n                  searchInputAriaLabel={placeholder}\n                  placeholder={placeholder}\n                />\n              }\n            />\n          </StyledPopover>\n        )}\n      </>\n    );\n  }\n);\n\nexport default ItemLibrary;\n"]}
+{"version":3,"file":"ItemLibrary.js","sourceRoot":"","sources":["../../../src/components/ItemLibrary/ItemLibrary.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  CSSProperties\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  SearchInputProps,\n  ForwardProps,\n  Icon,\n  Menu,\n  MenuGroupProps,\n  menuHelpers,\n  MenuItemProps,\n  Popover,\n  SearchInput,\n  cap,\n  createStringMatcher,\n  defaultThemeProp,\n  PopoverProps\n} from '@pega/cosmos-react-core';\n\nimport { colorMap, ColorName } from '../../utils';\n\nexport interface LibraryItem extends MenuItemProps {\n  id: string;\n  type: ItemVisual;\n  items?: LibraryItem[];\n}\nexport interface ItemVisual {\n  color: ColorName;\n  icon: string;\n}\nexport interface ItemLibraryProps<T extends LibraryItem = LibraryItem> {\n  show: boolean;\n  target: HTMLElement | null;\n  items: T[];\n  onClick?: (libItem: T) => void;\n  ref?: Ref<HTMLDivElement>;\n  placeholder?: SearchInputProps['placeholder'];\n  position?: PopoverProps['placement'];\n}\n\nexport const StyledIcon = styled.div(({ theme }) => {\n  return css`\n    min-height: 2rem;\n    min-width: 2rem;\n    padding: calc(0.5 * ${theme.base.spacing});\n    margin-inline-end: ${theme.base.spacing};\n    text-align: center;\n    background-color: var(--bg-color);\n    color: var(--fg-color);\n    border-radius: ${theme.base['border-radius']};\n  `;\n});\n\nStyledIcon.defaultProps = defaultThemeProp;\n\nconst ItemLibrary: FC<ItemLibraryProps & ForwardProps> = forwardRef(\n  (\n    {\n      show,\n      target,\n      items,\n      onClick,\n      placeholder,\n      position = 'bottom-start'\n    }: PropsWithoutRef<ItemLibraryProps>,\n    ref: ItemLibraryProps['ref']\n  ) => {\n    const [search, setSearch] = useState('');\n\n    const searchEleRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n      if (show) {\n        setSearch('');\n        searchEleRef?.current?.focus();\n      }\n    }, [show, searchEleRef.current]);\n\n    const searchRegex = useMemo(\n      () => (search ? createStringMatcher(cap(search), 'contains', '') : null),\n      [search]\n    );\n\n    const itemsToRender: (MenuItemProps | MenuGroupProps)[] = useMemo(() => {\n      return menuHelpers.mapTree(\n        searchRegex\n          ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n              return searchRegex.test(primary);\n            })\n          : items,\n        node => {\n          let selectable = false;\n          if (!node.items) {\n            selectable = true;\n          }\n\n          const nodeItem: LibraryItem = node as LibraryItem;\n          return {\n            ...node,\n            visual: nodeItem.type ? (\n              <StyledIcon\n                id={node.id}\n                style={\n                  {\n                    '--bg-color': colorMap[nodeItem.type.color],\n                    '--fg-color': readableColor(colorMap[nodeItem.type.color])\n                  } as CSSProperties\n                }\n              >\n                <Icon name={nodeItem.type.icon} />\n              </StyledIcon>\n            ) : undefined,\n            count: node.items ? node.items.length : undefined,\n            secondary: node.secondary,\n            selected: selectable ? !!node.selected : undefined\n          };\n        }\n      );\n    }, [items, searchRegex]);\n\n    const onItemSelect = useCallback(\n      (id: MenuItemProps['id']) => {\n        const selectedNode = menuHelpers.getItem(items, id) as LibraryItem;\n        if (onClick) {\n          onClick(selectedNode);\n        }\n      },\n      [onClick]\n    );\n\n    return (\n      <>\n        {show && (\n          <Popover show={show} placement={position} target={target} ref={ref}>\n            <Menu\n              items={itemsToRender}\n              onItemClick={onItemSelect}\n              header={\n                <SearchInput\n                  ref={searchEleRef}\n                  onSearchChange={setSearch}\n                  value={search}\n                  searchInputAriaLabel={placeholder}\n                  placeholder={placeholder}\n                />\n              }\n              focusControlEl={searchEleRef.current || undefined}\n            />\n          </Popover>\n        )}\n      </>\n    );\n  }\n);\n\nexport default ItemLibrary;\n"]}

package/lib/components/LifeCycle/Category.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Category.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Category.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAc,GAAG,EAAyC,MAAM,OAAO,CAAC;AAGlG,OAAO,EACL,YAAY,EACZ,SAAS,EAST,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAEL,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EAEpB,MAAM,mBAAmB,CAAC;AAC3B,OAAa,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEzC,MAAM,WAAW,eAAgB,SAAQ,mBAAmB;IAE1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,EAAE,cAAc;IAC9D,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAE5B,IAAI,EAAE,iBAAiB,CAAC;IAExB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,0BAA0B;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,6CAA6C;IAC7C,SAAS,EAAE,cAAc,CAAC;IAC1B,2BAA2B;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,cAAc;eAA0B,OAAO;SAQ1D,CAAC;AAEH,eAAO,MAAM,UAAU;eAA0B,eAAe,GAAG,SAAS;QAAM,MAAM;SAUvF,CAAC;AAEF,eAAO,MAAM,mBAAmB,yGA0B9B,CAAC;AAEH,eAAO,MAAM,aAAa,yGAaxB,CAAC;AAIH,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA+G7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Category.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Category.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAc,GAAG,EAAyC,MAAM,OAAO,CAAC;AAGlG,OAAO,EACL,YAAY,EACZ,SAAS,EAQT,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAEL,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EAEpB,MAAM,mBAAmB,CAAC;AAC3B,OAAa,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEzC,MAAM,WAAW,eAAgB,SAAQ,mBAAmB;IAE1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,EAAE,cAAc;IAC9D,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAE5B,IAAI,EAAE,iBAAiB,CAAC;IAExB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,0BAA0B;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,6CAA6C;IAC7C,SAAS,EAAE,cAAc,CAAC;IAC1B,2BAA2B;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,cAAc;eAA0B,OAAO;SAQ1D,CAAC;AAIH,eAAO,MAAM,UAAU;eAA0B,eAAe,GAAG,SAAS;QAAM,MAAM;SAWvF,CAAC;AAIF,eAAO,MAAM,mBAAmB,yGA0B9B,CAAC;AAIH,eAAO,MAAM,aAAa,yGAaxB,CAAC;AAIH,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAmH7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/LifeCycle/Category.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, Fragment } from 'react';
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { Flex, Button, Icon, Tooltip, useElement, useI18n, createUID, defaultThemeProp } from '@pega/cosmos-react-core';
+import { Flex, Button, Icon, Tooltip, useElement, useI18n, defaultThemeProp } from '@pega/cosmos-react-core';
 import Task from './Task';
 export const StyledCategory = styled.h3(({ showTitle, theme }) => {
     return css `
@@ -12,15 +12,18 @@ export const StyledCategory = styled.h3(({ showTitle, theme }) => {
     margin: ${theme.base.spacing} 0 0 0;
   `;
 });
+StyledCategory.defaultProps = defaultThemeProp;
 export const StyledList = styled.ol(({ category, theme, id }) => {
     return css `
       margin-block-start: ${theme.base.spacing};
       margin-block-end: calc(2 * ${theme.base.spacing});
+      list-style-type: none;
       ${category?.elementId !== id &&
         ` min-height: ${category?.height ? `${category.height}px` : 'auto'};
   `}
     `;
 });
+StyledList.defaultProps = defaultThemeProp;
 export const StyledParallelTitle = styled.div(({ theme }) => {
     return css `
     position: relative;
@@ -48,6 +51,7 @@ export const StyledParallelTitle = styled.div(({ theme }) => {
     }
   `;
 });
+StyledParallelTitle.defaultProps = defaultThemeProp;
 export const StyledAddTask = styled.div(({ theme }) => {
     return css `
     > button {
@@ -78,21 +82,21 @@ const Category = forwardRef(({ item, showTitle = false, stageItem, category, id,
         };
         task?.addTask.onAddTask?.(param, e);
     };
-    return (_jsxs(_Fragment, { children: [category?.label && (_jsx(StyledCategory, { showTitle: showTitle, tabIndex: -1, id: item?.categoryId, children: category?.label }, void 0)), _jsxs(StyledList, { ref: ref, role: 'gridcell', category: category, id: item?.id, "data-id": item?.categoryId, children: [item &&
+    return (_jsxs(_Fragment, { children: [category?.label && (_jsx(StyledCategory, { showTitle: showTitle, tabIndex: -1, id: item?.categoryId, children: category?.label })), _jsxs(StyledList, { ref: ref, role: 'gridcell', category: category, id: item?.id, "data-id": item?.categoryId, children: [item &&
                         item.tasks.length !== 0 &&
-                        item.tasks.map((TaskItem, index) => {
-                            if (Array.isArray(TaskItem)) {
-                                if (task && task.addTask && task.addTask.showOnce && TaskItem.length !== 0) {
+                        item.tasks.map((taskItem, i) => {
+                            if (Array.isArray(taskItem)) {
+                                if (task && task.addTask && task.addTask.showOnce && taskItem.length !== 0) {
                                     showAddTaskButton = false;
                                 }
-                                /* Using creatUID instead of useUID, since it is a list item and multiple ref is trying to get created which causes issue */
-                                const parallelListItemId = createUID();
-                                return (_jsxs(Fragment, { children: [index !== 0 && (_jsx(Flex, { as: StyledParallelTitle, container: { justify: 'center' }, children: _jsx("span", { children: t('parallel') }, void 0) }, void 0)), TaskItem.map((parallelTask) => {
-                                            return (_jsx(Task, { id: parallelTask.id, value: parallelTask.label, item: parallelTask, visual: parallelTask.visual, stageItem: stageItem, categoryItem: item, error: parallelTask.error, ...task, ...restProps }, parallelTask.id));
-                                        })] }, parallelListItemId));
+                                return (
+                                // eslint-disable-next-line react/no-array-index-key
+                                _jsxs("li", { children: [i !== 0 && (_jsx(Flex, { as: StyledParallelTitle, container: { justify: 'center' }, children: _jsx("span", { children: t('parallel') }) })), taskItem.length > 0 && (_jsx("ol", { children: taskItem.map((parallelTask) => {
+                                                return (_jsx(Task, { id: parallelTask.id, value: parallelTask.label, item: parallelTask, visual: parallelTask.visual, stageItem: stageItem, categoryItem: item, error: parallelTask.error, ...task, ...restProps }, parallelTask.id));
+                                            }) }))] }, i));
                             }
-                            return (_jsx(Task, { id: TaskItem.id, value: TaskItem.label, item: TaskItem, visual: TaskItem.visual, stageItem: stageItem, categoryItem: item, onAddStep: task?.onAddStep, error: TaskItem.error, ...task, ...restProps }, TaskItem.id));
-                        }), (showAddTaskButton || !item) && (_jsxs(_Fragment, { children: [_jsx(Flex, { as: StyledAddTask, children: _jsxs(Button, { variant: 'simple', icon: true, ref: setAddTaskEl, onClick: onAddTaskClick, children: [_jsx(Icon, { name: 'plus' }, void 0), _jsx(Flex, { children: task?.addTask.title }, void 0)] }, void 0) }, void 0), _jsx(Tooltip, { target: addTaskEl, "aria-hidden": 'true', children: `${t('add')} ${task?.addTask.title}` }, void 0)] }, void 0))] }, void 0)] }, void 0));
+                            return (_jsx(Task, { id: taskItem.id, value: taskItem.label, item: taskItem, visual: taskItem.visual, stageItem: stageItem, categoryItem: item, onAddStep: task?.onAddStep, error: taskItem.error, ...task, ...restProps }, taskItem.id));
+                        }), (showAddTaskButton || !item) && (_jsxs(_Fragment, { children: [_jsx(Flex, { as: StyledAddTask, children: _jsxs(Button, { variant: 'simple', icon: true, ref: setAddTaskEl, onClick: onAddTaskClick, children: [_jsx(Icon, { name: 'plus' }), _jsx(Flex, { children: task?.addTask.title })] }) }), _jsx(Tooltip, { target: addTaskEl, "aria-hidden": 'true', children: `${t('add')} ${task?.addTask.title}` })] }))] })] }));
 });
 export default Category;
 //# sourceMappingURL=Category.js.map

package/lib/components/LifeCycle/Category.js.map

@@ -1 +1 @@
-{"version":3,"file":"Category.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Category.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, forwardRef, Ref, Fragment, PropsWithoutRef, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  ForwardProps,\n  BaseProps,\n  Flex,\n  Button,\n  Icon,\n  Tooltip,\n  useElement,\n  useI18n,\n  createUID,\n  defaultThemeProp,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport {\n  TaskItemProps,\n  StageItemProps,\n  CategoryItemProps,\n  CategoriesItemProps,\n  LifeCycleActionParam\n} from './LifeCycle.types';\nimport Task, { TaskProps } from './Task';\n\nexport interface CategoriesProps extends CategoriesItemProps {\n  /* height property used to manipulate height of catergory dom */\n  height?: number;\n  elementId?: string;\n}\n\nexport interface CategoryProps extends BaseProps, NoChildrenProp {\n  ref?: Ref<HTMLOListElement>;\n  /* Pass the category items */\n  item: CategoryItemProps;\n  /* Enable the title for categories */\n  showTitle?: boolean;\n  /* Props of the categoryColumn */\n  category?: CategoriesProps;\n  /** Task component prop */\n  task: TaskProps;\n  /** Stage data - to be passed in callbacks */\n  stageItem: StageItemProps;\n  /** Id for the component */\n  id?: string;\n}\n\nexport const StyledCategory = styled.h3<{ showTitle: boolean }>(({ showTitle, theme }) => {\n  return css`\n    ${!showTitle &&\n    css`\n      visibility: hidden;\n    `}\n    margin: ${theme.base.spacing} 0 0 0;\n  `;\n});\n\nexport const StyledList = styled.ol<{ category?: CategoriesProps | undefined; id: string }>(\n  ({ category, theme, id }) => {\n    return css`\n      margin-block-start: ${theme.base.spacing};\n      margin-block-end: calc(2 * ${theme.base.spacing});\n      ${category?.elementId !== id &&\n      ` min-height: ${category?.height ? `${category.height}px` : 'auto'};\n  `}\n    `;\n  }\n);\n\nexport const StyledParallelTitle = styled.div(({ theme }) => {\n  return css`\n    position: relative;\n    z-index: 1;\n    margin-block-end: 0.5rem;\n    text-align: center;\n    &::before {\n      border-block-start: calc(0.2 * ${theme.base.spacing}) solid ${theme.base.colors.slate.medium};\n      content: '';\n      margin: 0 auto;\n      position: absolute;\n      top: 50%;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      width: 100%;\n      z-index: -1;\n    }\n    span {\n      background: ${theme.base.colors.slate.medium};\n      padding: 0 ${theme.base.spacing};\n      border-radius: calc(0.25 * ${theme.base['border-radius']});\n      color: ${theme.base.colors.white};\n      text-transform: uppercase;\n    }\n  `;\n});\n\nexport const StyledAddTask = styled.div(({ theme }) => {\n  return css`\n    > button {\n      background: ${theme.base.palette['secondary-background']};\n      border-radius: calc(0.5 * ${theme.base['border-radius']});\n      width: 100%;\n      justify-content: flex-start;\n      padding: calc(1 * ${theme.base.spacing}) calc(1.75 * ${theme.base.spacing});\n      > div {\n        margin: 0 calc(2 * ${theme.base.spacing});\n      }\n    }\n  `;\n});\n\nStyledAddTask.defaultProps = defaultThemeProp;\n\nconst Category: FunctionComponent<CategoryProps & ForwardProps> = forwardRef(\n  (\n    {\n      item,\n      showTitle = false,\n      stageItem,\n      category,\n      id,\n      task,\n      ...restProps\n    }: PropsWithoutRef<CategoryProps>,\n    ref: CategoryProps['ref']\n  ) => {\n    const [addTaskEl, setAddTaskEl] = useElement();\n    let showAddTaskButton = true;\n    const t = useI18n();\n\n    if (task?.addTask?.showOnce && item?.tasks?.length !== 0) {\n      showAddTaskButton = false;\n    }\n    /* Call back for click of add task button */\n    const onAddTaskClick = (e: MouseEvent<HTMLButtonElement>) => {\n      const param: LifeCycleActionParam = {\n        category: item,\n        stage: stageItem\n      };\n      task?.addTask.onAddTask?.(param, e);\n    };\n\n    return (\n      <>\n        {category?.label && (\n          <StyledCategory showTitle={showTitle} tabIndex={-1} id={item?.categoryId}>\n            {category?.label}\n          </StyledCategory>\n        )}\n        <StyledList\n          ref={ref}\n          role='gridcell'\n          category={category}\n          id={item?.id}\n          data-id={item?.categoryId}\n        >\n          {item &&\n            item.tasks.length !== 0 &&\n            item.tasks.map((TaskItem: TaskItemProps | TaskItemProps[], index: number) => {\n              if (Array.isArray(TaskItem)) {\n                if (task && task.addTask && task.addTask.showOnce && TaskItem.length !== 0) {\n                  showAddTaskButton = false;\n                }\n                /* Using creatUID instead of useUID, since it is a list item and multiple ref is trying to get created which causes issue */\n                const parallelListItemId = createUID();\n                return (\n                  <Fragment key={parallelListItemId}>\n                    {index !== 0 && (\n                      <Flex as={StyledParallelTitle} container={{ justify: 'center' }}>\n                        <span>{t('parallel')}</span>\n                      </Flex>\n                    )}\n                    {TaskItem.map((parallelTask: TaskItemProps) => {\n                      return (\n                        <Task\n                          key={parallelTask.id}\n                          id={parallelTask.id}\n                          value={parallelTask.label}\n                          item={parallelTask}\n                          visual={parallelTask.visual}\n                          stageItem={stageItem}\n                          categoryItem={item}\n                          error={parallelTask.error}\n                          {...task}\n                          {...restProps}\n                        />\n                      );\n                    })}\n                  </Fragment>\n                );\n              }\n              return (\n                <Task\n                  key={TaskItem.id}\n                  id={TaskItem.id}\n                  value={TaskItem.label}\n                  item={TaskItem}\n                  visual={TaskItem.visual}\n                  stageItem={stageItem}\n                  categoryItem={item}\n                  onAddStep={task?.onAddStep}\n                  error={TaskItem.error}\n                  {...task}\n                  {...restProps}\n                />\n              );\n            })}\n          {(showAddTaskButton || !item) && (\n            <>\n              <Flex as={StyledAddTask}>\n                <Button variant='simple' icon ref={setAddTaskEl} onClick={onAddTaskClick}>\n                  <Icon name='plus' />\n                  <Flex>{task?.addTask.title}</Flex>\n                </Button>\n              </Flex>\n              <Tooltip target={addTaskEl} aria-hidden='true'>\n                {`${t('add')} ${task?.addTask.title}`}\n              </Tooltip>\n            </>\n          )}\n        </StyledList>\n      </>\n    );\n  }\n);\n\nexport default Category;\n"]}
+{"version":3,"file":"Category.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Category.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, forwardRef, Ref, Fragment, PropsWithoutRef, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  ForwardProps,\n  BaseProps,\n  Flex,\n  Button,\n  Icon,\n  Tooltip,\n  useElement,\n  useI18n,\n  defaultThemeProp,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport {\n  TaskItemProps,\n  StageItemProps,\n  CategoryItemProps,\n  CategoriesItemProps,\n  LifeCycleActionParam\n} from './LifeCycle.types';\nimport Task, { TaskProps } from './Task';\n\nexport interface CategoriesProps extends CategoriesItemProps {\n  /* height property used to manipulate height of catergory dom */\n  height?: number;\n  elementId?: string;\n}\n\nexport interface CategoryProps extends BaseProps, NoChildrenProp {\n  ref?: Ref<HTMLOListElement>;\n  /* Pass the category items */\n  item: CategoryItemProps;\n  /* Enable the title for categories */\n  showTitle?: boolean;\n  /* Props of the categoryColumn */\n  category?: CategoriesProps;\n  /** Task component prop */\n  task: TaskProps;\n  /** Stage data - to be passed in callbacks */\n  stageItem: StageItemProps;\n  /** Id for the component */\n  id?: string;\n}\n\nexport const StyledCategory = styled.h3<{ showTitle: boolean }>(({ showTitle, theme }) => {\n  return css`\n    ${!showTitle &&\n    css`\n      visibility: hidden;\n    `}\n    margin: ${theme.base.spacing} 0 0 0;\n  `;\n});\n\nStyledCategory.defaultProps = defaultThemeProp;\n\nexport const StyledList = styled.ol<{ category?: CategoriesProps | undefined; id: string }>(\n  ({ category, theme, id }) => {\n    return css`\n      margin-block-start: ${theme.base.spacing};\n      margin-block-end: calc(2 * ${theme.base.spacing});\n      list-style-type: none;\n      ${category?.elementId !== id &&\n      ` min-height: ${category?.height ? `${category.height}px` : 'auto'};\n  `}\n    `;\n  }\n);\n\nStyledList.defaultProps = defaultThemeProp;\n\nexport const StyledParallelTitle = styled.div(({ theme }) => {\n  return css`\n    position: relative;\n    z-index: 1;\n    margin-block-end: 0.5rem;\n    text-align: center;\n    &::before {\n      border-block-start: calc(0.2 * ${theme.base.spacing}) solid ${theme.base.colors.slate.medium};\n      content: '';\n      margin: 0 auto;\n      position: absolute;\n      top: 50%;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      width: 100%;\n      z-index: -1;\n    }\n    span {\n      background: ${theme.base.colors.slate.medium};\n      padding: 0 ${theme.base.spacing};\n      border-radius: calc(0.25 * ${theme.base['border-radius']});\n      color: ${theme.base.colors.white};\n      text-transform: uppercase;\n    }\n  `;\n});\n\nStyledParallelTitle.defaultProps = defaultThemeProp;\n\nexport const StyledAddTask = styled.div(({ theme }) => {\n  return css`\n    > button {\n      background: ${theme.base.palette['secondary-background']};\n      border-radius: calc(0.5 * ${theme.base['border-radius']});\n      width: 100%;\n      justify-content: flex-start;\n      padding: calc(1 * ${theme.base.spacing}) calc(1.75 * ${theme.base.spacing});\n      > div {\n        margin: 0 calc(2 * ${theme.base.spacing});\n      }\n    }\n  `;\n});\n\nStyledAddTask.defaultProps = defaultThemeProp;\n\nconst Category: FunctionComponent<CategoryProps & ForwardProps> = forwardRef(\n  (\n    {\n      item,\n      showTitle = false,\n      stageItem,\n      category,\n      id,\n      task,\n      ...restProps\n    }: PropsWithoutRef<CategoryProps>,\n    ref: CategoryProps['ref']\n  ) => {\n    const [addTaskEl, setAddTaskEl] = useElement();\n    let showAddTaskButton = true;\n    const t = useI18n();\n\n    if (task?.addTask?.showOnce && item?.tasks?.length !== 0) {\n      showAddTaskButton = false;\n    }\n    /* Call back for click of add task button */\n    const onAddTaskClick = (e: MouseEvent<HTMLButtonElement>) => {\n      const param: LifeCycleActionParam = {\n        category: item,\n        stage: stageItem\n      };\n      task?.addTask.onAddTask?.(param, e);\n    };\n\n    return (\n      <>\n        {category?.label && (\n          <StyledCategory showTitle={showTitle} tabIndex={-1} id={item?.categoryId}>\n            {category?.label}\n          </StyledCategory>\n        )}\n        <StyledList\n          ref={ref}\n          role='gridcell'\n          category={category}\n          id={item?.id}\n          data-id={item?.categoryId}\n        >\n          {item &&\n            item.tasks.length !== 0 &&\n            item.tasks.map((taskItem: TaskItemProps | TaskItemProps[], i: number) => {\n              if (Array.isArray(taskItem)) {\n                if (task && task.addTask && task.addTask.showOnce && taskItem.length !== 0) {\n                  showAddTaskButton = false;\n                }\n\n                return (\n                  // eslint-disable-next-line react/no-array-index-key\n                  <li key={i}>\n                    {i !== 0 && (\n                      <Flex as={StyledParallelTitle} container={{ justify: 'center' }}>\n                        <span>{t('parallel')}</span>\n                      </Flex>\n                    )}\n                    {taskItem.length > 0 && (\n                      <ol>\n                        {taskItem.map((parallelTask: TaskItemProps) => {\n                          return (\n                            <Task\n                              key={parallelTask.id}\n                              id={parallelTask.id}\n                              value={parallelTask.label}\n                              item={parallelTask}\n                              visual={parallelTask.visual}\n                              stageItem={stageItem}\n                              categoryItem={item}\n                              error={parallelTask.error}\n                              {...task}\n                              {...restProps}\n                            />\n                          );\n                        })}\n                      </ol>\n                    )}\n                  </li>\n                );\n              }\n              return (\n                <Task\n                  key={taskItem.id}\n                  id={taskItem.id}\n                  value={taskItem.label}\n                  item={taskItem}\n                  visual={taskItem.visual}\n                  stageItem={stageItem}\n                  categoryItem={item}\n                  onAddStep={task?.onAddStep}\n                  error={taskItem.error}\n                  {...task}\n                  {...restProps}\n                />\n              );\n            })}\n          {(showAddTaskButton || !item) && (\n            <>\n              <Flex as={StyledAddTask}>\n                <Button variant='simple' icon ref={setAddTaskEl} onClick={onAddTaskClick}>\n                  <Icon name='plus' />\n                  <Flex>{task?.addTask.title}</Flex>\n                </Button>\n              </Flex>\n              <Tooltip target={addTaskEl} aria-hidden='true'>\n                {`${t('add')} ${task?.addTask.title}`}\n              </Tooltip>\n            </>\n          )}\n        </StyledList>\n      </>\n    );\n  }\n);\n\nexport default Category;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"LifeCycle.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAIJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,SAAS,EACT,YAAY,EAKZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEnC,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAE/D,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAE1B,KAAK,EAAE,cAAc,EAAE,CAAC;IAExB,cAAc,CAAC,EAAE,cAAc,EAAE,CAAC;IAElC,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB,KAAK,EAAE,UAAU,CAAC;IAElB,cAAc,EAAE,UAAU,CAAC;IAE3B,UAAU,EAAE,eAAe,EAAE,CAAC;IAE9B,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB,UAAU,EAAE,MAAM,IAAI,CAAC;IAEvB,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACjC;AAeD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAkI/D,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"LifeCycle.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAIJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,SAAS,EACT,YAAY,EAKZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEnC,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAE/D,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAE1B,KAAK,EAAE,cAAc,EAAE,CAAC;IAExB,cAAc,CAAC,EAAE,cAAc,EAAE,CAAC;IAElC,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB,KAAK,EAAE,UAAU,CAAC;IAElB,cAAc,EAAE,UAAU,CAAC;IAE3B,UAAU,EAAE,eAAe,EAAE,CAAC;IAE9B,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB,UAAU,EAAE,MAAM,IAAI,CAAC;IAEvB,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACjC;AAaD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAkI/D,CAAC;AAEF,eAAe,SAAS,CAAC"}