@pega/cosmos-react-build 2.0.0-rc.5 → 2.1.2

package/lib/components/FlowModeller/FlowModeller.js

@@ -1,12 +1,13 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useReducer, useCallback } from 'react';
-import { useElement, useOuterEvent } from '@pega/cosmos-react-core';
-import { DirectedGraph } from './Renderer/Utils/Graph';
-import { AddButton } from './Renderer/AddNode';
+import styled, { css } from 'styled-components';
+import { createUID, useElement, useOuterEvent, Flex, Text, defaultThemeProp } from '@pega/cosmos-react-core';
 import FlowRenderer from './Renderer/Renderer';
 import { StartNode, EndNode, DefaultNode } from './Node/NodeTemplates';
 import { START_NODETYPE, STOP_NODETYPE } from './Node/Node.types';
 import NodeLibrary from './NodeLibrary';
+import PlaceHolderHelper, { isPlaceHolderConnector } from './Utils/AddNodeUtils';
+import { AddButton } from './AddNode';
 const initState = {
     showLib: false,
     activeAddBtnMeta: {
@@ -16,7 +17,9 @@ const initState = {
             refId: ''
         }
     },
-    graphData: { nodes: [], connectors: [] }
+    graphData: { nodes: [], connectors: [] },
+    connectorComponent: () => _jsx(_Fragment, {}, void 0),
+    nodeComponent: () => _jsx(_Fragment, {}, void 0)
 };
 const reducer = (state, action) => {
     switch (action.type) {
@@ -30,87 +33,101 @@ const reducer = (state, action) => {
                 ...action.payload
             };
             return {
-                ...state
+                ...state,
+                showLib: true
             };
         case 'setGraphData':
             return {
                 ...state,
-                graphData: action.payload
+                graphData: action.payload.graphData,
+                connectorComponent: action.payload.connectorComponent,
+                nodeComponent: action.payload.nodeComponent
             };
         default:
             return state;
     }
 };
-const injectPlaceholderNodes = (graphData, onAddNode) => {
-    const targetGraph = new DirectedGraph(graphData);
-    // iterate all nodes with more than one in-connectors and insert addNode.
-    targetGraph.getNodes().forEach(node => {
-        if (targetGraph.getPrevNodesCount(node.id) > 1) {
-            const metaData = {
-                refType: 'node',
-                refId: node.id
-            };
-            // create a new placeholder node
-            const addShapeNode = {
-                id: `temp-${node.id}`,
+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 [state, dispatch] = useReducer(reducer, initState);
+    const [popoverEl, setPopoverEl] = useElement(null);
+    const onNodeCreate = (el, meta) => {
+        dispatch({
+            type: 'setActiveAddButton',
+            payload: {
+                target: el,
+                meta
+            }
+        });
+    };
+    const closeMenu = () => {
+        dispatch({
+            type: 'showLibrary',
+            payload: {
+                show: false
+            }
+        });
+    };
+    useEffect(() => {
+        const onGetNewPHNode = metaData => {
+            return {
+                id: createUID(),
                 children: (_jsx(AddButton, { addNodeHandler: (e) => {
-                        onAddNode(e.target, metaData);
+                        onNodeCreate(e.currentTarget, metaData);
                     } }, void 0)),
                 position: { x: 0, y: 0 },
-                dimensions: { width: 20, height: 16 }
+                dimensions: { width: 1, height: 0 }
             };
-            targetGraph.addNode(addShapeNode);
-            // connect all in-connectors to a new node and create a new connector that connects from new node to the actual toNodeId.
-            targetGraph.getInConnectors(node.id).forEach(con => {
-                con.toNodeId = addShapeNode.id;
-            });
-            const newConnector = {
-                id: `placeholder-${addShapeNode.id}-${node.id}`,
-                fromNodeId: addShapeNode.id,
-                toNodeId: node.id,
+        };
+        const onGetNewPHConnector = (fromNodeId, toNodeId) => {
+            return {
+                id: createUID(),
+                fromNodeId,
+                toNodeId,
                 points: []
             };
-            targetGraph.addConnector(newConnector);
-        }
-    });
-    // iterate all connectors and inject addNodes.
-    targetGraph.getConnectors().forEach((con) => {
-        // Condition to skip processing placeholder connectors created in the previous step
-        if (con.id.startsWith('placeholder-')) {
-            return;
-        }
-        const metaData = {
-            refType: 'connector',
-            refId: con.id
         };
-        const addShapeNode = {
-            id: `temp-con-${con.id}`,
-            children: (_jsx(AddButton, { addNodeHandler: (e) => {
-                    onAddNode(e.target, metaData);
-                } }, void 0)),
-            position: { x: 0, y: 0 },
-            dimensions: { width: 20, height: 16 }
+        const Connector = props => {
+            const { id, labelLayout } = props;
+            const refId = isPlaceHolderConnector(props)
+                ? props.realConnectors
+                : id.toString();
+            const metaData = {
+                refType: 'connector',
+                refId
+            };
+            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));
         };
-        targetGraph.addNode(addShapeNode);
-        const newConnector = {
-            id: `con-${con.id}`,
-            fromNodeId: addShapeNode.id,
-            toNodeId: con.toNodeId,
-            points: []
+        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));
         };
-        targetGraph.addConnector(newConnector);
-        con.toNodeId = addShapeNode.id;
-    });
-    return targetGraph.getGraphData();
-};
-const FlowModeller = ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, nodeLibrary, actions }) => {
-    const [state, dispatch] = useReducer(reducer, initState);
-    const [popoverEl, setPopoverEl] = useElement(null);
-    useEffect(() => {
         const flowNodes = graphData.nodes.map(node => {
             const flowNode = {
                 ...node,
-                children: _jsx(_Fragment, {}, void 0),
                 dimensions: {
                     width: 280,
                     height: 120
@@ -120,18 +137,9 @@ const FlowModeller = ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, no
                     y: 0
                 }
             };
-            if (node.type.id === START_NODETYPE.id) {
-                flowNode.dimensions.width = 50;
-                flowNode.dimensions.height = 50;
-                flowNode.children = (_jsx(StartNode, { id: node.id, type: node.type, label: node.label.toUpperCase() }, void 0));
-            }
-            else if (node.type.id === STOP_NODETYPE.id) {
-                flowNode.dimensions.width = 50;
-                flowNode.dimensions.height = 50;
-                flowNode.children = (_jsx(EndNode, { id: node.id, type: node.type, label: node.label.toUpperCase() }, void 0));
-            }
-            else {
-                flowNode.children = (_jsx(DefaultNode, { id: node.id, label: node.label, type: node.type, description: node.description, onActionClick: onNodeActionClick, onClick: onNodeClick, actions: actions, additionalData: node.additionalData }, void 0));
+            if (node.type.id === START_NODETYPE.id || node.type.id === STOP_NODETYPE.id) {
+                flowNode.dimensions.width = 58;
+                flowNode.dimensions.height = 58;
             }
             return flowNode;
         });
@@ -144,27 +152,25 @@ const FlowModeller = ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, no
                 }
             };
         });
+        // inject the placeholderAddNodes dynamically
+        const newGraphData = PlaceHolderHelper.injectPlaceholderNodes({ nodes: flowNodes, connectors }, onGetNewPHNode, onGetNewPHConnector);
         dispatch({
             type: 'setGraphData',
-            payload: { nodes: flowNodes, connectors }
+            payload: {
+                graphData: newGraphData,
+                connectorComponent: Connector,
+                nodeComponent: Node
+            }
         });
     }, [graphData]);
     /**
      * Library popover functionality
      */
-    const closeMenu = () => {
-        dispatch({
-            type: 'showLibrary',
-            payload: {
-                show: false
-            }
-        });
-    };
     const onLibraryItemSelect = useCallback((libItem) => {
-        onNodeAdd(libItem.type, state.activeAddBtnMeta.meta);
+        const metaData = state.activeAddBtnMeta.meta;
         closeMenu();
-    }, [state.activeAddBtnMeta] // TODO VERIFY whether this parameter helps or not
-    );
+        onNodeAdd(libItem.type, metaData);
+    }, [state.activeAddBtnMeta]);
     const onKeydown = useCallback((e) => {
         if (e.key === 'Escape') {
             closeMenu();
@@ -178,24 +184,7 @@ const FlowModeller = ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, no
         };
     }, []);
     const items = nodeLibrary !== undefined ? nodeLibrary : [];
-    const onNodeCreate = (el, meta) => {
-        dispatch({
-            type: 'setActiveAddButton',
-            payload: {
-                target: el,
-                meta
-            }
-        });
-        // TODO try to merge both the above and below dispatches into one
-        dispatch({
-            type: 'showLibrary',
-            payload: {
-                show: true
-            }
-        });
-    };
-    const newGraphData = injectPlaceholderNodes(state.graphData, onNodeCreate);
-    return (_jsxs("div", { children: [_jsx(FlowRenderer, { graphData: newGraphData }, void 0), _jsx(NodeLibrary, { show: state.showLib, target: state.activeAddBtnMeta.target, items: items, onClick: onLibraryItemSelect, ref: setPopoverEl }, void 0)] }, void 0));
+    return (_jsxs("div", { children: [_jsx(FlowRenderer, { graphData: state.graphData, connector: state.connectorComponent, node: state.nodeComponent }, void 0), _jsx(NodeLibrary, { show: state.showLib, target: state.activeAddBtnMeta.target, items: items, onClick: onLibraryItemSelect, ref: setPopoverEl }, void 0)] }, void 0));
 };
 export default FlowModeller;
 //# sourceMappingURL=FlowModeller.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FlowModeller.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PropsWithoutRef, useEffect, MouseEvent, useReducer, Reducer, useCallback } from 'react';\n\nimport { Action, NoChildrenProp, useElement, useOuterEvent } from '@pega/cosmos-react-core';\n\nimport { DirectedGraph, GraphData, ConnectorProps } from './Renderer/Utils/Graph';\nimport { AddButton } from './Renderer/AddNode';\nimport {\n  AddNodeHandlerParams,\n  RendererConnectorProps,\n  RendererNodeProps\n} from './Renderer/Renderer.types';\nimport FlowRenderer from './Renderer/Renderer';\nimport { StartNode, EndNode, DefaultNode } from './Node/NodeTemplates';\nimport {\n  ActionParams,\n  NodeProps,\n  NodeLibraryItem,\n  START_NODETYPE,\n  STOP_NODETYPE,\n  NodeType\n} from './Node/Node.types';\nimport NodeLibrary from './NodeLibrary';\n\nexport interface FlowModellerProps extends NoChildrenProp {\n  graphData: GraphData<NodeProps, ConnectorProps>;\n  /** Node actions */\n  actions?: Action[];\n  /** Callback to add node from connector */\n  onNodeAdd: (nodeType: NodeType, params: AddNodeHandlerParams) => void;\n  /** Callback for handling the click on the node */\n  onNodeClick?: (nodeId: string) => void;\n  /** Callback for actions on Node */\n  onNodeActionClick?: (param: ActionParams, e: MouseEvent) => void;\n  /** Types of nodes */\n  nodeLibrary: NodeLibraryItem[];\n}\n\ntype ModellerState = {\n  showLib: boolean;\n  activeAddBtnMeta: {\n    target: null; // we will maintain ref of an Element\n    meta: AddNodeHandlerParams;\n  };\n  graphData: GraphData<RendererNodeProps, RendererConnectorProps>;\n};\n\nconst initState: ModellerState = {\n  showLib: false,\n  activeAddBtnMeta: {\n    target: null,\n    meta: {\n      refType: 'node',\n      refId: ''\n    }\n  },\n  graphData: { nodes: [], connectors: [] }\n};\n\nconst reducer = (state: ModellerState, action: { type: string; payload: any }) => {\n  switch (action.type) {\n    case 'showLibrary':\n      // minor optimization, not to update state.. if no change in the value\n      return action.payload.show === state.showLib\n        ? state\n        : { ...state, showLib: action.payload.show };\n    case 'setActiveAddButton':\n      state.activeAddBtnMeta = {\n        ...action.payload\n      };\n      return {\n        ...state\n      };\n    case 'setGraphData':\n      return {\n        ...state,\n        graphData: action.payload\n      };\n    default:\n      return state;\n  }\n};\n\ninterface AddNodeProps extends RendererNodeProps {\n  onClick?: (ev: Event) => void;\n}\n\nconst injectPlaceholderNodes: (\n  graphData: GraphData<RendererNodeProps, RendererConnectorProps>,\n  onAddNode: (el: HTMLElement, meta: AddNodeHandlerParams) => void\n) => GraphData<RendererNodeProps, RendererConnectorProps> = (graphData, onAddNode) => {\n  const targetGraph = new DirectedGraph(graphData);\n\n  // iterate all nodes with more than one in-connectors and insert addNode.\n  targetGraph.getNodes().forEach(node => {\n    if (targetGraph.getPrevNodesCount(node.id) > 1) {\n      const metaData: AddNodeHandlerParams = {\n        refType: 'node',\n        refId: node.id\n      };\n\n      // create a new placeholder node\n      const addShapeNode: AddNodeProps = {\n        id: `temp-${node.id}`,\n        children: (\n          <AddButton\n            addNodeHandler={(e: MouseEvent<HTMLButtonElement>) => {\n              onAddNode(e.target as HTMLElement, metaData);\n            }}\n          />\n        ),\n        position: { x: 0, y: 0 },\n        dimensions: { width: 20, height: 16 }\n      };\n\n      targetGraph.addNode(addShapeNode);\n\n      // connect all in-connectors to a new node and create a new connector that connects from new node to the actual toNodeId.\n      targetGraph.getInConnectors(node.id).forEach(con => {\n        con.toNodeId = addShapeNode.id;\n      });\n\n      const newConnector: RendererConnectorProps = {\n        id: `placeholder-${addShapeNode.id}-${node.id}`,\n        fromNodeId: addShapeNode.id,\n        toNodeId: node.id,\n        points: []\n      };\n\n      targetGraph.addConnector(newConnector);\n    }\n  });\n\n  // iterate all connectors and inject addNodes.\n  targetGraph.getConnectors().forEach((con: RendererConnectorProps) => {\n    // Condition to skip processing placeholder connectors created in the previous step\n    if (con.id.startsWith('placeholder-')) {\n      return;\n    }\n\n    const metaData: AddNodeHandlerParams = {\n      refType: 'connector',\n      refId: con.id\n    };\n\n    const addShapeNode: AddNodeProps = {\n      id: `temp-con-${con.id}`,\n      children: (\n        <AddButton\n          addNodeHandler={(e: MouseEvent<HTMLButtonElement>) => {\n            onAddNode(e.target as HTMLElement, metaData);\n          }}\n        />\n      ),\n      position: { x: 0, y: 0 },\n      dimensions: { width: 20, height: 16 }\n    };\n\n    targetGraph.addNode(addShapeNode);\n\n    const newConnector: RendererConnectorProps = {\n      id: `con-${con.id}`,\n      fromNodeId: addShapeNode.id,\n      toNodeId: con.toNodeId,\n      points: []\n    };\n\n    targetGraph.addConnector(newConnector);\n    con.toNodeId = addShapeNode.id;\n  });\n\n  return targetGraph.getGraphData();\n};\n\nconst FlowModeller = ({\n  graphData,\n  onNodeActionClick,\n  onNodeClick,\n  onNodeAdd,\n  nodeLibrary,\n  actions\n}: PropsWithoutRef<FlowModellerProps>) => {\n  const [state, dispatch] = useReducer<Reducer<ModellerState, any>>(reducer, initState);\n\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n\n  useEffect(() => {\n    const flowNodes: RendererNodeProps[] = graphData.nodes.map(node => {\n      const flowNode: RendererNodeProps = {\n        ...node,\n        children: <></>,\n        dimensions: {\n          width: 280,\n          height: 120\n        },\n        position: {\n          x: 0,\n          y: 0\n        }\n      };\n\n      if (node.type.id === START_NODETYPE.id) {\n        flowNode.dimensions.width = 50;\n        flowNode.dimensions.height = 50;\n\n        flowNode.children = (\n          <StartNode id={node.id} type={node.type} label={node.label.toUpperCase()} />\n        );\n      } else if (node.type.id === STOP_NODETYPE.id) {\n        flowNode.dimensions.width = 50;\n        flowNode.dimensions.height = 50;\n\n        flowNode.children = (\n          <EndNode id={node.id} type={node.type} label={node.label.toUpperCase()} />\n        );\n      } else {\n        flowNode.children = (\n          <DefaultNode\n            id={node.id}\n            label={node.label}\n            type={node.type}\n            description={node.description}\n            onActionClick={onNodeActionClick}\n            onClick={onNodeClick}\n            actions={actions}\n            additionalData={node.additionalData}\n          />\n        );\n      }\n\n      return flowNode;\n    });\n\n    const connectors: RendererConnectorProps[] = graphData.connectors.map(connector => {\n      return {\n        ...connector,\n        points: [],\n        data: {\n          label: connector.label\n        }\n      };\n    });\n\n    dispatch({\n      type: 'setGraphData',\n      payload: { nodes: flowNodes, connectors }\n    });\n  }, [graphData]);\n\n  /**\n   * Library popover functionality\n   */\n  const closeMenu = () => {\n    dispatch({\n      type: 'showLibrary',\n      payload: {\n        show: false\n      }\n    });\n  };\n\n  const onLibraryItemSelect = useCallback(\n    (libItem: NodeLibraryItem) => {\n      onNodeAdd(libItem.type, state.activeAddBtnMeta.meta);\n\n      closeMenu();\n    },\n    [state.activeAddBtnMeta] // TODO VERIFY whether this parameter helps or not\n  );\n\n  const onKeydown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        closeMenu();\n      }\n    },\n    [closeMenu]\n  );\n\n  useOuterEvent('mousedown', [popoverEl], closeMenu);\n\n  useEffect(() => {\n    document.addEventListener('keydown', onKeydown);\n    return () => {\n      document.removeEventListener('keydown', onKeydown);\n    };\n  }, []);\n\n  const items: NodeLibraryItem[] = nodeLibrary !== undefined ? nodeLibrary : [];\n\n  const onNodeCreate = (el: HTMLElement, meta: AddNodeHandlerParams) => {\n    dispatch({\n      type: 'setActiveAddButton',\n      payload: {\n        target: el,\n        meta\n      }\n    });\n\n    // TODO try to merge both the above and below dispatches into one\n    dispatch({\n      type: 'showLibrary',\n      payload: {\n        show: true\n      }\n    });\n  };\n\n  const newGraphData: GraphData<RendererNodeProps, RendererConnectorProps> = injectPlaceholderNodes(\n    state.graphData,\n    onNodeCreate\n  );\n\n  return (\n    <div>\n      <FlowRenderer graphData={newGraphData} />\n      <NodeLibrary\n        show={state.showLib}\n        target={state.activeAddBtnMeta.target}\n        items={items}\n        onClick={onLibraryItemSelect}\n        ref={setPopoverEl}\n      />\n    </div>\n  );\n};\n\nexport default FlowModeller;\n"]}
+{"version":3,"file":"FlowModeller.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  PropsWithoutRef,\n  useEffect,\n  MouseEvent,\n  useReducer,\n  FC,\n  Reducer,\n  useCallback,\n  ComponentType\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Action,\n  createUID,\n  useElement,\n  useOuterEvent,\n  Flex,\n  Text,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\n\nimport { GraphData, ConnectorProps } from './Renderer/Utils/Graph';\nimport {\n  AddNodeHandlerParams,\n  RendererConnectorProps,\n  RendererNodeProps\n} from './Renderer/Renderer.types';\nimport FlowRenderer from './Renderer/Renderer';\nimport { StartNode, EndNode, DefaultNode } from './Node/NodeTemplates';\nimport {\n  ActionParams,\n  NodeProps,\n  NodeLibraryItem,\n  START_NODETYPE,\n  STOP_NODETYPE,\n  NodeType\n} from './Node/Node.types';\nimport NodeLibrary from './NodeLibrary';\nimport PlaceHolderHelper, {\n  isPlaceHolderConnector,\n  PlaceHolderConnector\n} from './Utils/AddNodeUtils';\nimport { AddButton } from './AddNode';\n\nexport interface FlowModellerProps {\n  graphData: GraphData<NodeProps, ConnectorProps>;\n  /** Node actions */\n  actions?: Action[];\n  /** Callback to add node from connector */\n  onNodeAdd: (nodeType: NodeType, params: AddNodeHandlerParams) => void;\n  /** Callback for handling the click on the node */\n  onNodeClick?: (nodeId: string) => void;\n  /** Callback for actions on Node */\n  onNodeActionClick?: (param: ActionParams, e: MouseEvent) => void;\n  /** Types of nodes */\n  nodeLibrary: NodeLibraryItem[];\n}\n\ntype ModellerState = {\n  showLib: boolean;\n  activeAddBtnMeta: {\n    target: null; // we will maintain ref of an Element\n    meta: AddNodeHandlerParams;\n  };\n  graphData: GraphData<RendererNodeProps, RendererConnectorProps>;\n  connectorComponent: ComponentType<RendererConnectorProps>;\n  nodeComponent: ComponentType<RendererNodeProps>;\n};\n\nconst initState: ModellerState = {\n  showLib: false,\n  activeAddBtnMeta: {\n    target: null,\n    meta: {\n      refType: 'node',\n      refId: ''\n    }\n  },\n  graphData: { nodes: [], connectors: [] },\n  connectorComponent: () => <></>,\n  nodeComponent: () => <></>\n};\n\nconst reducer = (state: ModellerState, action: { type: string; payload: any }) => {\n  switch (action.type) {\n    case 'showLibrary':\n      // minor optimization, not to update state.. if no change in the value\n      return action.payload.show === state.showLib\n        ? state\n        : { ...state, showLib: action.payload.show };\n    case 'setActiveAddButton':\n      state.activeAddBtnMeta = {\n        ...action.payload\n      };\n      return {\n        ...state,\n        showLib: true\n      };\n    case 'setGraphData':\n      return {\n        ...state,\n        graphData: action.payload.graphData,\n        connectorComponent: action.payload.connectorComponent,\n        nodeComponent: action.payload.nodeComponent\n      };\n    default:\n      return state;\n  }\n};\n\nconst StyledLabel = styled(Text)(({ theme }) => {\n  return css`\n    border-radius: ${theme.base['border-radius']};\n    background: ${theme.base.colors.slate.dark};\n    color: ${theme.base.colors.white};\n    text-align: center;\n    padding: calc(0.5 * ${theme.base.spacing});\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 32ch;\n    white-space: nowrap;\n  `;\n});\n\nStyledLabel.defaultProps = defaultThemeProp;\n\nconst FlowModeller = ({\n  graphData,\n  onNodeActionClick,\n  onNodeClick,\n  onNodeAdd,\n  nodeLibrary,\n  actions\n}: PropsWithoutRef<FlowModellerProps>) => {\n  const [state, dispatch] = useReducer<Reducer<ModellerState, any>>(reducer, initState);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n\n  const onNodeCreate = (el: HTMLElement | SVGForeignObjectElement, meta: AddNodeHandlerParams) => {\n    dispatch({\n      type: 'setActiveAddButton',\n      payload: {\n        target: el,\n        meta\n      }\n    });\n  };\n\n  const closeMenu = () => {\n    dispatch({\n      type: 'showLibrary',\n      payload: {\n        show: false\n      }\n    });\n  };\n\n  useEffect(() => {\n    const onGetNewPHNode: (metaData: AddNodeHandlerParams) => RendererNodeProps = metaData => {\n      return {\n        id: createUID(),\n        children: (\n          <AddButton\n            addNodeHandler={(e: MouseEvent<HTMLButtonElement>) => {\n              onNodeCreate(e.currentTarget as HTMLElement, metaData);\n            }}\n          />\n        ),\n        position: { x: 0, y: 0 },\n        dimensions: { width: 1, height: 0 }\n      };\n    };\n\n    const onGetNewPHConnector: (\n      fromNodeId: string,\n      toNodeId: string,\n      metaData: AddNodeHandlerParams\n    ) => RendererConnectorProps = (fromNodeId, toNodeId) => {\n      return {\n        id: createUID(),\n        fromNodeId,\n        toNodeId,\n        points: []\n      };\n    };\n\n    const Connector: FC<RendererConnectorProps> = props => {\n      const { id, labelLayout } = props;\n\n      const refId = isPlaceHolderConnector(props)\n        ? (props as PlaceHolderConnector).realConnectors\n        : id.toString();\n\n      const metaData: AddNodeHandlerParams = {\n        refType: 'connector',\n        refId\n      };\n\n      return (\n        <>\n          {labelLayout?.value && (\n            <Flex container={{ justify: 'center' }}>\n              <StyledLabel>{labelLayout.value}</StyledLabel>\n            </Flex>\n          )}\n          <AddButton\n            addNodeHandler={(e: MouseEvent<HTMLButtonElement>) => {\n              onNodeCreate(e.currentTarget, metaData);\n            }}\n          />\n        </>\n      );\n    };\n    const Node: FC<NodeProps> = ({ id, type, label, description, additionalData }) => {\n      if (!type) {\n        return <div />;\n      }\n      if (type?.id === START_NODETYPE.id) {\n        return <StartNode id={id} type={type} label={label.toUpperCase()} />;\n      }\n      if (type?.id === STOP_NODETYPE.id) {\n        return <EndNode id={id} type={type} label={label.toUpperCase()} />;\n      }\n      return (\n        <DefaultNode\n          id={id}\n          label={label}\n          type={type}\n          description={description}\n          onActionClick={onNodeActionClick}\n          onClick={onNodeClick}\n          actions={actions}\n          additionalData={additionalData}\n        />\n      );\n    };\n\n    const flowNodes: RendererNodeProps[] = graphData.nodes.map(node => {\n      const flowNode: RendererNodeProps = {\n        ...node,\n        dimensions: {\n          width: 280,\n          height: 120\n        },\n        position: {\n          x: 0,\n          y: 0\n        }\n      };\n\n      if (node.type.id === START_NODETYPE.id || node.type.id === STOP_NODETYPE.id) {\n        flowNode.dimensions.width = 58;\n        flowNode.dimensions.height = 58;\n      }\n      return flowNode;\n    });\n\n    const connectors: RendererConnectorProps[] = graphData.connectors.map(connector => {\n      return {\n        ...connector,\n        points: [],\n        data: {\n          label: connector.label\n        }\n      };\n    });\n\n    // inject the placeholderAddNodes dynamically\n    const newGraphData: GraphData<RendererNodeProps, RendererConnectorProps> =\n      PlaceHolderHelper.injectPlaceholderNodes(\n        { nodes: flowNodes, connectors },\n        onGetNewPHNode,\n        onGetNewPHConnector\n      );\n\n    dispatch({\n      type: 'setGraphData',\n      payload: {\n        graphData: newGraphData,\n        connectorComponent: Connector,\n        nodeComponent: Node\n      }\n    });\n  }, [graphData]);\n\n  /**\n   * Library popover functionality\n   */\n  const onLibraryItemSelect = useCallback(\n    (libItem: NodeLibraryItem) => {\n      const metaData = state.activeAddBtnMeta.meta;\n      closeMenu();\n      onNodeAdd(libItem.type, metaData);\n    },\n    [state.activeAddBtnMeta]\n  );\n\n  const onKeydown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        closeMenu();\n      }\n    },\n    [closeMenu]\n  );\n\n  useOuterEvent('mousedown', [popoverEl], closeMenu);\n\n  useEffect(() => {\n    document.addEventListener('keydown', onKeydown);\n    return () => {\n      document.removeEventListener('keydown', onKeydown);\n    };\n  }, []);\n\n  const items: NodeLibraryItem[] = nodeLibrary !== undefined ? nodeLibrary : [];\n\n  return (\n    <div>\n      <FlowRenderer\n        graphData={state.graphData}\n        connector={state.connectorComponent}\n        node={state.nodeComponent}\n      />\n      <NodeLibrary\n        show={state.showLib}\n        target={state.activeAddBtnMeta.target}\n        items={items}\n        onClick={onLibraryItemSelect}\n        ref={setPopoverEl}\n      />\n    </div>\n  );\n};\n\nexport default FlowModeller;\n"]}

package/lib/components/FlowModeller/Node/NodeTemplate.styles.d.ts

@@ -1,13 +1,9 @@
 import { NodeType } from './Node.types';
-export declare const StyledCircle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    color: NodeType['color'];
-}, never>;
-export declare const StyledLabel: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").LabelProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {
-    type: NodeType;
-}, never>;
-export declare const StyledIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    color: string;
+export declare const StyledCircle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledLabel: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {
+    nodeType: NodeType;
 }, never>;
+export declare const StyledIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledCardHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledText: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledCard: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;

package/lib/components/FlowModeller/Node/NodeTemplate.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeTemplate.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplate.styles.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,eAAO,MAAM,YAAY;WAAuB,QAAQ,CAAC,OAAO,CAAC;SAY/D,CAAC;AAIH,eAAO,MAAM,WAAW;UAAyB,QAAQ;SAWvD,CAAC;AAIH,eAAO,MAAM,UAAU;WAAuB,MAAM;SAalD,CAAC;AAIH,eAAO,MAAM,gBAAgB,4GAQ3B,CAAC;AAIH,eAAO,MAAM,UAAU,mOAOrB,CAAC;AAIH,eAAO,MAAM,UAAU,mOAoBrB,CAAC;AAEH,eAAO,MAAM,gBAAgB,yOAO3B,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAW5B,CAAC;AAIH,eAAO,MAAM,oBAAoB,wGAEhC,CAAC;AAEF,eAAO,MAAM,wBAAwB,yGAMnC,CAAC;AAGH,eAAO,MAAM,sBAAsB,mOAQjC,CAAC"}
+{"version":3,"file":"NodeTemplate.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplate.styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,eAAO,MAAM,YAAY,yGAYvB,CAAC;AAIH,eAAO,MAAM,WAAW;cAA4B,QAAQ;SAW1D,CAAC;AAIH,eAAO,MAAM,UAAU,yGAWrB,CAAC;AAIH,eAAO,MAAM,gBAAgB,4GAQ3B,CAAC;AAIH,eAAO,MAAM,UAAU,mOAOrB,CAAC;AAIH,eAAO,MAAM,UAAU,mOAoBrB,CAAC;AAEH,eAAO,MAAM,gBAAgB,yOAO3B,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAa5B,CAAC;AAIH,eAAO,MAAM,oBAAoB,wGAEhC,CAAC;AAEF,eAAO,MAAM,wBAAwB,yGAMnC,CAAC;AAGH,eAAO,MAAM,sBAAsB,mOAQjC,CAAC"}

package/lib/components/FlowModeller/Node/NodeTemplate.styles.js

@@ -1,11 +1,10 @@
 import styled, { css } from 'styled-components';
-import { readableColor } from 'polished';
-import { Label, defaultThemeProp, Card, Text, CardFooter } from '@pega/cosmos-react-core';
-export const StyledCircle = styled.div(({ theme, color }) => {
+import { defaultThemeProp, Card, Text, CardFooter } from '@pega/cosmos-react-core';
+export const StyledCircle = styled.div(({ theme }) => {
     return css `
     height: 2rem;
     width: 2rem;
-    background: ${color};
+    background: var(--bg-color);
     border-radius: 50%;
     align-self: center;
     &:focus {
@@ -15,10 +14,10 @@ export const StyledCircle = styled.div(({ theme, color }) => {
   `;
 });
 StyledCircle.defaultProps = defaultThemeProp;
-export const StyledLabel = styled(Label)(({ type, theme }) => {
+export const StyledLabel = styled(Text)(({ nodeType, theme }) => {
     return css `
     align-self: center;
-    ${type.name === 'start'
+    ${nodeType.name === 'start'
         ? css `
           padding-block-end: ${theme.base.spacing};
         `
@@ -28,16 +27,15 @@ export const StyledLabel = styled(Label)(({ type, theme }) => {
   `;
 });
 StyledLabel.defaultProps = defaultThemeProp;
-export const StyledIcon = styled.div(({ theme, color }) => {
-    const contrastColor = readableColor(color);
+export const StyledIcon = styled.div(({ theme }) => {
     return css `
     min-height: 2rem;
     min-width: 2rem;
-    background: ${color};
     padding: calc(0.5 * ${theme.base.spacing});
     margin-inline-end: ${theme.base.spacing};
     text-align: center;
-    color: ${contrastColor};
+    background-color: var(--bg-color);
+    color: var(--fg-color);
     border-radius: ${theme.base['border-radius']};
   `;
 });
@@ -101,6 +99,8 @@ export const StyledCardContent = styled.div(({ theme }) => {
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
+    white-space: pre-wrap;
+    word-wrap: break-word;
   `;
 });
 StyledCardContent.defaultProps = defaultThemeProp;

package/lib/components/FlowModeller/Node/NodeTemplate.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"NodeTemplate.styles.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplate.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport { Label, defaultThemeProp, Card, Text, CardFooter } from '@pega/cosmos-react-core';\n\nimport { NodeType } from './Node.types';\n\nexport const StyledCircle = styled.div<{ color: NodeType['color'] }>(({ theme, color }) => {\n  return css`\n    height: 2rem;\n    width: 2rem;\n    background: ${color};\n    border-radius: 50%;\n    align-self: center;\n    &:focus {\n      outline: none;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledCircle.defaultProps = defaultThemeProp;\n\nexport const StyledLabel = styled(Label)<{ type: NodeType }>(({ type, theme }) => {\n  return css`\n    align-self: center;\n    ${type.name === 'start'\n      ? css`\n          padding-block-end: ${theme.base.spacing};\n        `\n      : css`\n          padding-block-start: ${theme.base.spacing};\n        `}\n  `;\n});\n\nStyledLabel.defaultProps = defaultThemeProp;\n\nexport const StyledIcon = styled.div<{ color: string }>(({ theme, color }) => {\n  const contrastColor = readableColor(color);\n\n  return css`\n    min-height: 2rem;\n    min-width: 2rem;\n    background: ${color};\n    padding: calc(0.5 * ${theme.base.spacing});\n    margin-inline-end: ${theme.base.spacing};\n    text-align: center;\n    color: ${contrastColor};\n    border-radius: ${theme.base['border-radius']};\n  `;\n});\n\nStyledIcon.defaultProps = defaultThemeProp;\n\nexport const StyledCardHeader = styled.header(({ theme }) => {\n  return css`\n    white-space: nowrap;\n    button {\n      visibility: hidden;\n      border-radius: ${theme.base['border-radius']};\n    }\n  `;\n});\n\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nexport const StyledText = styled(Text)(({ theme }) => {\n  return css`\n    padding-inline-end: ${theme.base.spacing};\n    overflow: hidden;\n    min-width: 12rem;\n    text-overflow: ellipsis;\n  `;\n});\n\nStyledText.defaultProps = defaultThemeProp;\n\nexport const StyledCard = styled(Card)(({ theme }) => {\n  return css`\n    width: 17.5rem;\n    height: 7.5rem;\n    align-self: center;\n    overflow: hidden;\n    &&& {\n      border-radius: ${theme.base['border-radius']};\n    }\n    &:focus-within,\n    &:hover {\n      box-shadow: ${theme.base.shadow.focus};\n      cursor: pointer;\n      ${StyledCardHeader} {\n        button {\n          visibility: visible;\n        }\n      }\n    }\n  `;\n});\n\nexport const StyledCardFooter = styled(CardFooter)(() => {\n  return css`\n    margin-top: auto;\n    &:not(${StyledCard} ${StyledCard} > &) {\n      padding: 0.5rem;\n    }\n  `;\n});\n\nStyledCard.defaultProps = defaultThemeProp;\n\nexport const StyledCardContent = styled.div(({ theme }) => {\n  return css`\n    padding: ${theme.base.spacing};\n    padding-block-start: 0;\n    max-height: 2.5rem;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  `;\n});\n\nStyledCardContent.defaultProps = defaultThemeProp;\n\nexport const StyledAdditionalData = styled.dl`\n  overflow: hidden;\n`;\n\nexport const StyledAdditionalDataItem = styled.div(({ theme }) => {\n  return css`\n    padding: 0 calc(0.5 * ${theme.base.spacing});\n    background-color: ${theme.base.palette['secondary-background']};\n    border-radius: ${theme.base['border-radius']};\n  `;\n});\nStyledAdditionalDataItem.defaultProps = defaultThemeProp;\n\nexport const StyledTextWithEllipsis = styled(Text)(() => {\n  return css`\n    overflow: hidden;\n    width: auto;\n    display: inline-block;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  `;\n});\nStyledTextWithEllipsis.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"NodeTemplate.styles.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplate.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Card, Text, CardFooter } from '@pega/cosmos-react-core';\n\nimport { NodeType } from './Node.types';\n\nexport const StyledCircle = styled.div(({ theme }) => {\n  return css`\n    height: 2rem;\n    width: 2rem;\n    background: var(--bg-color);\n    border-radius: 50%;\n    align-self: center;\n    &:focus {\n      outline: none;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledCircle.defaultProps = defaultThemeProp;\n\nexport const StyledLabel = styled(Text)<{ nodeType: NodeType }>(({ nodeType, theme }) => {\n  return css`\n    align-self: center;\n    ${nodeType.name === 'start'\n      ? css`\n          padding-block-end: ${theme.base.spacing};\n        `\n      : css`\n          padding-block-start: ${theme.base.spacing};\n        `}\n  `;\n});\n\nStyledLabel.defaultProps = defaultThemeProp;\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 const StyledCardHeader = styled.header(({ theme }) => {\n  return css`\n    white-space: nowrap;\n    button {\n      visibility: hidden;\n      border-radius: ${theme.base['border-radius']};\n    }\n  `;\n});\n\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nexport const StyledText = styled(Text)(({ theme }) => {\n  return css`\n    padding-inline-end: ${theme.base.spacing};\n    overflow: hidden;\n    min-width: 12rem;\n    text-overflow: ellipsis;\n  `;\n});\n\nStyledText.defaultProps = defaultThemeProp;\n\nexport const StyledCard = styled(Card)(({ theme }) => {\n  return css`\n    width: 17.5rem;\n    height: 7.5rem;\n    align-self: center;\n    overflow: hidden;\n    &&& {\n      border-radius: ${theme.base['border-radius']};\n    }\n    &:focus-within,\n    &:hover {\n      box-shadow: ${theme.base.shadow.focus};\n      cursor: pointer;\n      ${StyledCardHeader} {\n        button {\n          visibility: visible;\n        }\n      }\n    }\n  `;\n});\n\nexport const StyledCardFooter = styled(CardFooter)(() => {\n  return css`\n    margin-top: auto;\n    &:not(${StyledCard} ${StyledCard} > &) {\n      padding: 0.5rem;\n    }\n  `;\n});\n\nStyledCard.defaultProps = defaultThemeProp;\n\nexport const StyledCardContent = styled.div(({ theme }) => {\n  return css`\n    padding: ${theme.base.spacing};\n    padding-block-start: 0;\n    max-height: 2.5rem;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n  `;\n});\n\nStyledCardContent.defaultProps = defaultThemeProp;\n\nexport const StyledAdditionalData = styled.dl`\n  overflow: hidden;\n`;\n\nexport const StyledAdditionalDataItem = styled.div(({ theme }) => {\n  return css`\n    padding: 0 calc(0.5 * ${theme.base.spacing});\n    background-color: ${theme.base.palette['secondary-background']};\n    border-radius: ${theme.base['border-radius']};\n  `;\n});\nStyledAdditionalDataItem.defaultProps = defaultThemeProp;\n\nexport const StyledTextWithEllipsis = styled(Text)(() => {\n  return css`\n    overflow: hidden;\n    width: auto;\n    display: inline-block;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  `;\n});\nStyledTextWithEllipsis.defaultProps = defaultThemeProp;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"NodeTemplates.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplates.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAA0D,MAAM,OAAO,CAAC;AA0BhG,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAA2B,MAAM,cAAc,CAAC;AA8DtF,eAAO,MAAM,WAAW,iOA8FvB,CAAC;AAEF,eAAO,MAAM,SAAS,oBAAqB,gBAAgB,SAAS,CAAC,gBASpE,CAAC;AAEF,eAAO,MAAM,OAAO,oBAAqB,gBAAgB,SAAS,CAAC,gBASlE,CAAC"}
+{"version":3,"file":"NodeTemplates.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplates.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAOhB,MAAM,OAAO,CAAC;AA2Bf,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAA2B,MAAM,cAAc,CAAC;AA8DtF,eAAO,MAAM,WAAW,iOAuGvB,CAAC;AAEF,eAAO,MAAM,SAAS,oBAAqB,gBAAgB,SAAS,CAAC,gBAmBpE,CAAC;AAEF,eAAO,MAAM,OAAO,oBAAqB,gBAAgB,SAAS,CAAC,gBAmBlE,CAAC"}

package/lib/components/FlowModeller/Node/NodeTemplates.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, forwardRef } from 'react';
+import { readableColor } from 'polished';
 import { MenuButton, Icon, Flex, Tooltip, useElement, useI18n, cap, Text } from '@pega/cosmos-react-core';
 import { StyledLabel, StyledCircle, StyledIcon, StyledCardHeader, StyledCardContent, StyledCard, StyledText, StyledTextWithEllipsis, StyledAdditionalData, StyledCardFooter, StyledAdditionalDataItem } from './NodeTemplate.styles';
 const MetaListItem = ({ label, value }) => {
@@ -42,14 +43,22 @@ export const DefaultNode = forwardRef(({ id, label, type, description, additiona
     const [nodeLabel, setNodeLabel] = useElement();
     const [nodeDescription, setNodeDescription] = useElement();
     const [nodeIcon, setNodeIcon] = useElement();
-    return (_jsxs(StyledCard, { "aria-label": label, onClick: () => onClick?.(id), onKeyDown: handleEnterKeyDown, ref: ref, ...restProps, children: [_jsxs(Flex, { as: StyledCardHeader, container: { alignItems: 'center', pad: 1 }, children: [_jsx(StyledIcon, { id: id, color: type.color, ref: setNodeIcon, children: _jsx(Icon, { name: type.icon }, void 0) }, void 0), _jsx(Tooltip, { target: nodeIcon, hideDelay: 'none', children: cap(type.name) }, void 0), _jsx(StyledText, { variant: 'h4', ref: setNodeLabel, children: label }, void 0), _jsx(Tooltip, { describeTarget: false, target: nodeLabel, hideDelay: 'none', children: label }, void 0), actionItems && (_jsx(MenuButton, { portal: true, variant: 'simple', text: t('actions'), icon: 'more', iconOnly: true, onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), menu: {
+    const color = readableColor(type.color);
+    return (_jsxs(StyledCard, { "aria-label": label, onClick: () => onClick?.(id), onKeyDown: handleEnterKeyDown, ref: ref, ...restProps, children: [_jsxs(Flex, { as: StyledCardHeader, container: { alignItems: 'center', pad: 1 }, children: [_jsx(StyledIcon, { id: id, style: {
+                            '--bg-color': type.color,
+                            '--fg-color': color
+                        }, ref: setNodeIcon, children: _jsx(Icon, { name: type.icon }, void 0) }, void 0), _jsx(Tooltip, { target: nodeIcon, hideDelay: 'none', children: cap(type.name) }, void 0), _jsx(StyledText, { variant: 'h4', ref: setNodeLabel, children: label }, void 0), _jsx(Tooltip, { describeTarget: false, target: nodeLabel, hideDelay: 'none', children: label }, void 0), actionItems && (_jsx(MenuButton, { portal: true, variant: 'simple', text: t('actions'), icon: 'more', iconOnly: true, onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), menu: {
                             items: actionItems
                         } }, void 0))] }, void 0), description && (_jsxs(_Fragment, { children: [_jsx(StyledCardContent, { ref: setNodeDescription, children: description }, void 0), _jsx(Tooltip, { describeTarget: false, target: nodeDescription, hideDelay: 'none', children: description }, void 0)] }, void 0)), additionalData && (_jsx(StyledCardFooter, { children: _jsx(MetaList, { metadata: additionalData }, void 0) }, void 0))] }, void 0));
 });
 export const StartNode = ({ type, label }) => {
-    return (_jsxs(Flex, { container: { justify: 'center', direction: 'column' }, children: [_jsx(Flex, { as: StyledLabel, type: type, children: label }, void 0), _jsx(Flex, { as: StyledCircle, color: type.color, tabIndex: '0', "aria-label": label, role: 'button' }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { justify: 'center', direction: 'column' }, children: [_jsx(Flex, { as: StyledLabel, nodeType: type, children: label }, void 0), _jsx(Flex, { as: StyledCircle, style: {
+                    '--bg-color': type.color
+                }, tabIndex: '0', "aria-label": label, role: 'button' }, void 0)] }, void 0));
 };
 export const EndNode = ({ type, label }) => {
-    return (_jsxs(Flex, { container: { justify: 'center', direction: 'column' }, children: [_jsx(Flex, { as: StyledCircle, color: type.color, tabIndex: '0', "aria-label": label, role: 'button' }, void 0), _jsx(Flex, { as: StyledLabel, type: type, children: label }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { justify: 'center', direction: 'column' }, children: [_jsx(Flex, { as: StyledCircle, style: {
+                    '--bg-color': type.color
+                }, tabIndex: '0', "aria-label": label, role: 'button' }, void 0), _jsx(Flex, { as: StyledLabel, nodeType: type, children: label }, void 0)] }, void 0));
 };
 //# sourceMappingURL=NodeTemplates.js.map

package/lib/components/FlowModeller/Node/NodeTemplates.js.map

@@ -1 +1 @@
-{"version":3,"file":"NodeTemplates.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PropsWithoutRef, useCallback, MouseEvent, KeyboardEvent, forwardRef, FC } from 'react';\n\nimport {\n  MenuButton,\n  Icon,\n  Flex,\n  Tooltip,\n  useElement,\n  useI18n,\n  cap,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport {\n  StyledLabel,\n  StyledCircle,\n  StyledIcon,\n  StyledCardHeader,\n  StyledCardContent,\n  StyledCard,\n  StyledText,\n  StyledTextWithEllipsis,\n  StyledAdditionalData,\n  StyledCardFooter,\n  StyledAdditionalDataItem\n} from './NodeTemplate.styles';\nimport { NodeProps, NodeComponentProps, AdditionalDataItemProps } from './Node.types';\n\nconst MetaListItem = ({ label, value }: AdditionalDataItemProps) => {\n  const [nodeAdditionalDataItem, setNodeAdditionalDataItem] = useElement();\n  return (\n    <>\n      <Flex\n        as={StyledAdditionalDataItem}\n        container={{ wrap: 'nowrap', pad: 0.25, gap: 0.25 }}\n        item={{ grow: 1 }}\n        ref={setNodeAdditionalDataItem}\n      >\n        <StyledTextWithEllipsis as='dd'>{label}</StyledTextWithEllipsis>\n        <Text role='separator' variant='secondary' aria-hidden='true'>\n          :&nbsp;\n        </Text>\n        <StyledTextWithEllipsis as='dt'>{value}</StyledTextWithEllipsis>\n      </Flex>\n      <Tooltip target={nodeAdditionalDataItem} hideDelay='none'>\n        {`${label}:${value}`}\n      </Tooltip>\n    </>\n  );\n};\n\nconst MetaList: FC<{ metadata: NodeProps['additionalData'] }> = ({ metadata }) => {\n  const [nodeAdditionalData, setNodeAdditionalData] = useElement();\n  let additionalDataValue = '';\n  metadata?.forEach((item: AdditionalDataItemProps, index: number) => {\n    if (index > 1) {\n      additionalDataValue += `${item.label}: ${item.value}\n      `;\n    }\n  });\n  return (\n    <Flex as={StyledAdditionalData} container={{ wrap: 'nowrap', colGap: 1, rowGap: 0.25 }}>\n      {metadata?.map((data: AdditionalDataItemProps, index: number) => {\n        if (index >= 2) {\n          return;\n        }\n        return <MetaListItem key={data.id} {...data} />;\n      })}\n      {metadata && metadata.length > 2 && (\n        <>\n          <Flex\n            as={StyledAdditionalDataItem}\n            container={{ pad: 0.25 }}\n            item={{ grow: 1, shrink: 0 }}\n            ref={setNodeAdditionalData}\n          >\n            <StyledTextWithEllipsis as='dt'>{`+${metadata?.length - 2}`}</StyledTextWithEllipsis>\n          </Flex>\n          {additionalDataValue && (\n            <Tooltip target={nodeAdditionalData} hideDelay='none'>\n              {additionalDataValue}\n            </Tooltip>\n          )}\n        </>\n      )}\n    </Flex>\n  );\n};\nexport const DefaultNode = forwardRef(\n  (\n    {\n      id,\n      label,\n      type,\n      description,\n      additionalData,\n      actions,\n      onActionClick,\n      onClick,\n      ...restProps\n    }: PropsWithoutRef<NodeComponentProps>,\n    ref: NodeComponentProps['ref']\n  ) => {\n    const t = useI18n();\n    const actionItems = actions?.map(actionItem => {\n      return {\n        id: actionItem.id,\n        primary: actionItem.text,\n        onClick: (actionId: string, e: MouseEvent) => {\n          e.stopPropagation();\n          onActionClick?.({ actionId, nodeId: id }, e);\n        }\n      };\n    });\n\n    const handleEnterKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        if (e.key === 'Enter' && !e.shiftKey) {\n          onClick?.(id);\n        }\n      },\n      [onClick]\n    );\n\n    const [nodeLabel, setNodeLabel] = useElement();\n    const [nodeDescription, setNodeDescription] = useElement();\n\n    const [nodeIcon, setNodeIcon] = useElement();\n\n    return (\n      <StyledCard\n        aria-label={label}\n        onClick={() => onClick?.(id)}\n        onKeyDown={handleEnterKeyDown}\n        ref={ref}\n        {...restProps}\n      >\n        <Flex as={StyledCardHeader} container={{ alignItems: 'center', pad: 1 }}>\n          <StyledIcon id={id} color={type.color} ref={setNodeIcon}>\n            <Icon name={type.icon} />\n          </StyledIcon>\n          <Tooltip target={nodeIcon} hideDelay='none'>\n            {cap(type.name)}\n          </Tooltip>\n          <StyledText variant='h4' ref={setNodeLabel}>\n            {label}\n          </StyledText>\n          <Tooltip describeTarget={false} target={nodeLabel} hideDelay='none'>\n            {label}\n          </Tooltip>\n\n          {actionItems && (\n            <MenuButton\n              portal\n              variant='simple'\n              text={t('actions')}\n              icon='more'\n              iconOnly\n              onClick={(e: MouseEvent) => e.stopPropagation()}\n              onKeyDown={(e: KeyboardEvent) => e.stopPropagation()}\n              menu={{\n                items: actionItems\n              }}\n            />\n          )}\n        </Flex>\n        {description && (\n          <>\n            <StyledCardContent ref={setNodeDescription}>{description}</StyledCardContent>\n            <Tooltip describeTarget={false} target={nodeDescription} hideDelay='none'>\n              {description}\n            </Tooltip>\n          </>\n        )}\n        {additionalData && (\n          <StyledCardFooter>\n            <MetaList metadata={additionalData} />\n          </StyledCardFooter>\n        )}\n      </StyledCard>\n    );\n  }\n);\n\nexport const StartNode = ({ type, label }: PropsWithoutRef<NodeProps>) => {\n  return (\n    <Flex container={{ justify: 'center', direction: 'column' }}>\n      <Flex as={StyledLabel} type={type}>\n        {label}\n      </Flex>\n      <Flex as={StyledCircle} color={type.color} tabIndex='0' aria-label={label} role='button' />\n    </Flex>\n  );\n};\n\nexport const EndNode = ({ type, label }: PropsWithoutRef<NodeProps>) => {\n  return (\n    <Flex container={{ justify: 'center', direction: 'column' }}>\n      <Flex as={StyledCircle} color={type.color} tabIndex='0' aria-label={label} role='button' />\n      <Flex as={StyledLabel} type={type}>\n        {label}\n      </Flex>\n    </Flex>\n  );\n};\n"]}
+{"version":3,"file":"NodeTemplates.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  PropsWithoutRef,\n  CSSProperties,\n  useCallback,\n  MouseEvent,\n  KeyboardEvent,\n  forwardRef,\n  FC\n} from 'react';\nimport { readableColor } from 'polished';\n\nimport {\n  MenuButton,\n  Icon,\n  Flex,\n  Tooltip,\n  useElement,\n  useI18n,\n  cap,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport {\n  StyledLabel,\n  StyledCircle,\n  StyledIcon,\n  StyledCardHeader,\n  StyledCardContent,\n  StyledCard,\n  StyledText,\n  StyledTextWithEllipsis,\n  StyledAdditionalData,\n  StyledCardFooter,\n  StyledAdditionalDataItem\n} from './NodeTemplate.styles';\nimport { NodeProps, NodeComponentProps, AdditionalDataItemProps } from './Node.types';\n\nconst MetaListItem = ({ label, value }: AdditionalDataItemProps) => {\n  const [nodeAdditionalDataItem, setNodeAdditionalDataItem] = useElement();\n  return (\n    <>\n      <Flex\n        as={StyledAdditionalDataItem}\n        container={{ wrap: 'nowrap', pad: 0.25, gap: 0.25 }}\n        item={{ grow: 1 }}\n        ref={setNodeAdditionalDataItem}\n      >\n        <StyledTextWithEllipsis as='dd'>{label}</StyledTextWithEllipsis>\n        <Text role='separator' variant='secondary' aria-hidden='true'>\n          :&nbsp;\n        </Text>\n        <StyledTextWithEllipsis as='dt'>{value}</StyledTextWithEllipsis>\n      </Flex>\n      <Tooltip target={nodeAdditionalDataItem} hideDelay='none'>\n        {`${label}:${value}`}\n      </Tooltip>\n    </>\n  );\n};\n\nconst MetaList: FC<{ metadata: NodeProps['additionalData'] }> = ({ metadata }) => {\n  const [nodeAdditionalData, setNodeAdditionalData] = useElement();\n  let additionalDataValue = '';\n  metadata?.forEach((item: AdditionalDataItemProps, index: number) => {\n    if (index > 1) {\n      additionalDataValue += `${item.label}: ${item.value}\n      `;\n    }\n  });\n  return (\n    <Flex as={StyledAdditionalData} container={{ wrap: 'nowrap', colGap: 1, rowGap: 0.25 }}>\n      {metadata?.map((data: AdditionalDataItemProps, index: number) => {\n        if (index >= 2) {\n          return;\n        }\n        return <MetaListItem key={data.id} {...data} />;\n      })}\n      {metadata && metadata.length > 2 && (\n        <>\n          <Flex\n            as={StyledAdditionalDataItem}\n            container={{ pad: 0.25 }}\n            item={{ grow: 1, shrink: 0 }}\n            ref={setNodeAdditionalData}\n          >\n            <StyledTextWithEllipsis as='dt'>{`+${metadata?.length - 2}`}</StyledTextWithEllipsis>\n          </Flex>\n          {additionalDataValue && (\n            <Tooltip target={nodeAdditionalData} hideDelay='none'>\n              {additionalDataValue}\n            </Tooltip>\n          )}\n        </>\n      )}\n    </Flex>\n  );\n};\nexport const DefaultNode = forwardRef(\n  (\n    {\n      id,\n      label,\n      type,\n      description,\n      additionalData,\n      actions,\n      onActionClick,\n      onClick,\n      ...restProps\n    }: PropsWithoutRef<NodeComponentProps>,\n    ref: NodeComponentProps['ref']\n  ) => {\n    const t = useI18n();\n    const actionItems = actions?.map(actionItem => {\n      return {\n        id: actionItem.id,\n        primary: actionItem.text,\n        onClick: (actionId: string, e: MouseEvent) => {\n          e.stopPropagation();\n          onActionClick?.({ actionId, nodeId: id }, e);\n        }\n      };\n    });\n\n    const handleEnterKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        if (e.key === 'Enter' && !e.shiftKey) {\n          onClick?.(id);\n        }\n      },\n      [onClick]\n    );\n\n    const [nodeLabel, setNodeLabel] = useElement();\n    const [nodeDescription, setNodeDescription] = useElement();\n\n    const [nodeIcon, setNodeIcon] = useElement();\n    const color = readableColor(type.color);\n    return (\n      <StyledCard\n        aria-label={label}\n        onClick={() => onClick?.(id)}\n        onKeyDown={handleEnterKeyDown}\n        ref={ref}\n        {...restProps}\n      >\n        <Flex as={StyledCardHeader} container={{ alignItems: 'center', pad: 1 }}>\n          <StyledIcon\n            id={id}\n            style={\n              {\n                '--bg-color': type.color,\n                '--fg-color': color\n              } as CSSProperties\n            }\n            ref={setNodeIcon}\n          >\n            <Icon name={type.icon} />\n          </StyledIcon>\n          <Tooltip target={nodeIcon} hideDelay='none'>\n            {cap(type.name)}\n          </Tooltip>\n          <StyledText variant='h4' ref={setNodeLabel}>\n            {label}\n          </StyledText>\n          <Tooltip describeTarget={false} target={nodeLabel} hideDelay='none'>\n            {label}\n          </Tooltip>\n\n          {actionItems && (\n            <MenuButton\n              portal\n              variant='simple'\n              text={t('actions')}\n              icon='more'\n              iconOnly\n              onClick={(e: MouseEvent) => e.stopPropagation()}\n              onKeyDown={(e: KeyboardEvent) => e.stopPropagation()}\n              menu={{\n                items: actionItems\n              }}\n            />\n          )}\n        </Flex>\n        {description && (\n          <>\n            <StyledCardContent ref={setNodeDescription}>{description}</StyledCardContent>\n            <Tooltip describeTarget={false} target={nodeDescription} hideDelay='none'>\n              {description}\n            </Tooltip>\n          </>\n        )}\n        {additionalData && (\n          <StyledCardFooter>\n            <MetaList metadata={additionalData} />\n          </StyledCardFooter>\n        )}\n      </StyledCard>\n    );\n  }\n);\n\nexport const StartNode = ({ type, label }: PropsWithoutRef<NodeProps>) => {\n  return (\n    <Flex container={{ justify: 'center', direction: 'column' }}>\n      <Flex as={StyledLabel} nodeType={type}>\n        {label}\n      </Flex>\n      <Flex\n        as={StyledCircle}\n        style={\n          {\n            '--bg-color': type.color\n          } as CSSProperties\n        }\n        tabIndex='0'\n        aria-label={label}\n        role='button'\n      />\n    </Flex>\n  );\n};\n\nexport const EndNode = ({ type, label }: PropsWithoutRef<NodeProps>) => {\n  return (\n    <Flex container={{ justify: 'center', direction: 'column' }}>\n      <Flex\n        as={StyledCircle}\n        style={\n          {\n            '--bg-color': type.color\n          } as CSSProperties\n        }\n        tabIndex='0'\n        aria-label={label}\n        role='button'\n      />\n      <Flex as={StyledLabel} nodeType={type}>\n        {label}\n      </Flex>\n    </Flex>\n  );\n};\n"]}

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

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, Ref } from 'react';
 import { ForwardProps } from '@pega/cosmos-react-core';
 import { NodeLibraryItem } from './Node/Node.types';
 export interface NodeLibraryProps {
@@ -6,6 +6,7 @@ export interface NodeLibraryProps {
     target: HTMLElement | null;
     items: NodeLibraryItem[];
     onClick: (libItem: NodeLibraryItem) => void;
+    ref?: Ref<HTMLDivElement>;
 }
 declare const NodeLibrary: FC<NodeLibraryProps & ForwardProps>;
 export default NodeLibrary;

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

@@ -1 +1 @@
-{"version":3,"file":"NodeLibrary.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/NodeLibrary.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EASH,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,YAAY,EAUb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAOpD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,OAAO,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;CAC7C;AAED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CA4EpD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"NodeLibrary.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/NodeLibrary.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAGF,GAAG,EAOJ,MAAM,OAAO,CAAC;AAIf,OAAO,EACL,YAAY,EAWb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAOpD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,OAAO,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CAwFpD,CAAC;AAEF,eAAe,WAAW,CAAC"}