@pega/cosmos-react-build 2.1.1 → 3.0.0-dev.1.0

package/lib/components/AppShell/AppShellContext.js

@@ -2,10 +2,7 @@ import { createContext } from 'react';
 const AppShellContext = createContext({
     drawerOpen: false,
     setDrawerOpen: () => { },
-    drawerData: {
-        id: '',
-        label: ''
-    },
+    drawerData: undefined,
     setDrawerData: () => { },
     navState: 'expanded'
 });

package/lib/components/AppShell/AppShellContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShellContext.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,MAAM,eAAe,GAAG,aAAa,CAAuB;IAC1D,UAAU,EAAE,KAAK;IACjB,aAAa,EAAE,GAAG,EAAE,GAAE,CAAC;IACvB,UAAU,EAAE;QACV,EAAE,EAAE,EAAE;QACN,KAAK,EAAE,EAAE;KACV;IACD,aAAa,EAAE,GAAG,EAAE,GAAE,CAAC;IACvB,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC;AAEH,eAAe,eAAe,CAAC","sourcesContent":["import { createContext } from 'react';\n\nimport { AppShellContextValue } from './AppShell.types';\n\nconst AppShellContext = createContext<AppShellContextValue>({\n  drawerOpen: false,\n  setDrawerOpen: () => {},\n  drawerData: {\n    id: '',\n    label: ''\n  },\n  setDrawerData: () => {},\n  navState: 'expanded'\n});\n\nexport default AppShellContext;\n"]}
+{"version":3,"file":"AppShellContext.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,MAAM,eAAe,GAAG,aAAa,CAAuB;IAC1D,UAAU,EAAE,KAAK;IACjB,aAAa,EAAE,GAAG,EAAE,GAAE,CAAC;IACvB,UAAU,EAAE,SAAS;IACrB,aAAa,EAAE,GAAG,EAAE,GAAE,CAAC;IACvB,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC;AAEH,eAAe,eAAe,CAAC","sourcesContent":["import { createContext } from 'react';\n\nimport { AppShellContextValue } from './AppShell.types';\n\nconst AppShellContext = createContext<AppShellContextValue>({\n  drawerOpen: false,\n  setDrawerOpen: () => {},\n  drawerData: undefined,\n  setDrawerData: () => {},\n  navState: 'expanded'\n});\n\nexport default AppShellContext;\n"]}

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

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

package/lib/components/FlowModeller/FlowModeller.js

@@ -1,11 +1,11 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useReducer, useCallback } from 'react';
 import styled, { css } from 'styled-components';
-import { createUID, useElement, useOuterEvent, Flex, Text, defaultThemeProp } from '@pega/cosmos-react-core';
+import { createUID, useElement, useOuterEvent, Flex, Text, defaultThemeProp, useI18n } from '@pega/cosmos-react-core';
+import ItemLibrary from '../ItemLibrary/ItemLibrary';
 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 = {
@@ -64,6 +64,7 @@ StyledLabel.defaultProps = defaultThemeProp;
 const FlowModeller = ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, nodeLibrary, actions }) => {
     const [state, dispatch] = useReducer(reducer, initState);
     const [popoverEl, setPopoverEl] = useElement(null);
+    const t = useI18n();
     const onNodeCreate = (el, meta) => {
         dispatch({
             type: 'setActiveAddButton',
@@ -184,7 +185,7 @@ const FlowModeller = ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, no
         };
     }, []);
     const items = nodeLibrary !== undefined ? nodeLibrary : [];
-    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));
+    return (_jsxs("div", { children: [_jsx(FlowRenderer, { graphData: state.graphData, connector: state.connectorComponent, node: state.nodeComponent }, void 0), _jsx(ItemLibrary, { show: state.showLib, target: state.activeAddBtnMeta.target, placeholder: t('search_nodes'), items: items, onClick: onLibraryItemSelect, ref: setPopoverEl }, void 0)] }, void 0));
 };
 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 {\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"]}
+{"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  useI18n\n} from '@pega/cosmos-react-core';\n\nimport ItemLibrary, { LibraryItem } from '../ItemLibrary/ItemLibrary';\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 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 t = useI18n();\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: LibraryItem) => {\n      const metaData = state.activeAddBtnMeta.meta;\n      closeMenu();\n      onNodeAdd((libItem as NodeLibraryItem).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      <ItemLibrary\n        show={state.showLib}\n        target={state.activeAddBtnMeta.target}\n        placeholder={t('search_nodes')}\n        items={items}\n        onClick={onLibraryItemSelect}\n        ref={setPopoverEl}\n      />\n    </div>\n  );\n};\n\nexport default FlowModeller;\n"]}

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

@@ -1,7 +1,8 @@
 import { Ref, MouseEvent } from 'react';
-import { Action, MenuItemProps, OmitStrict } from '@pega/cosmos-react-core';
+import { Action, OmitStrict } from '@pega/cosmos-react-core';
 import { Node } from '../Renderer/Utils/Graph';
-export interface NodeType {
+import { ItemVisual, LibraryItem } from '../../ItemLibrary/ItemLibrary';
+export interface NodeType extends ItemVisual {
     id: string;
     name: string;
     color: string;
@@ -44,7 +45,7 @@ export interface ActionParams {
     actionId: string;
     nodeId: NodeProps['id'];
 }
-export interface NodeLibraryItem extends MenuItemProps {
+export interface NodeLibraryItem extends LibraryItem {
     id: string;
     type: NodeType;
     items?: NodeLibraryItem[];

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

@@ -1 +1 @@
-{"version":3,"file":"Node.types.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/Node.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AAE7F,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,MAAM,WAAW,QAAQ;IAEvB,EAAE,EAAE,MAAM,CAAC;IAEX,IAAI,EAAE,MAAM,CAAC;IAEb,KAAK,EAAE,MAAM,CAAC;IAEd,IAAI,EAAE,MAAM,CAAC;IAEb,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE;QACR,IAAI,EAAE,UAAU,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC;QAC3C,SAAS,EAAE;YACT,KAAK,EAAE,MAAM,CAAC;SACf,EAAE,CAAC;KACL,CAAC;CACH;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI;IACrC,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,cAAc,CAAC,EAAE,uBAAuB,EAAE,CAAC;IAE3C,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,0CAA0C;IAC1C,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC9D,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC5C,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,sBAAsB;IACtB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,WAAW,uBAAuB;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AACD,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;CACzB;AAED,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc,EAAE,QAY3B,CAAC;AAEH,eAAO,MAAM,aAAa,EAAE,QAY1B,CAAC"}
+{"version":3,"file":"Node.types.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/Node.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AAE9E,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAExE,MAAM,WAAW,QAAS,SAAQ,UAAU;IAE1C,EAAE,EAAE,MAAM,CAAC;IAEX,IAAI,EAAE,MAAM,CAAC;IAEb,KAAK,EAAE,MAAM,CAAC;IAEd,IAAI,EAAE,MAAM,CAAC;IAEb,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE;QACR,IAAI,EAAE,UAAU,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC;QAC3C,SAAS,EAAE;YACT,KAAK,EAAE,MAAM,CAAC;SACf,EAAE,CAAC;KACL,CAAC;CACH;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI;IACrC,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,cAAc,CAAC,EAAE,uBAAuB,EAAE,CAAC;IAE3C,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,0CAA0C;IAC1C,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC9D,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC5C,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,sBAAsB;IACtB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,WAAW,uBAAuB;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AACD,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;CACzB;AAED,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc,EAAE,QAY3B,CAAC;AAEH,eAAO,MAAM,aAAa,EAAE,QAY1B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Node.types.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/Node.types.ts"],"names":[],"mappings":"AAEA,OAAO,EAAqC,eAAe,EAAE,MAAM,yBAAyB,CAAC;AA+D7F,MAAM,CAAC,MAAM,cAAc,GAAa,MAAM,CAAC,MAAM,CAAC;IACpD,EAAE,EAAE,OAAO;IACX,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;IACtD,IAAI,EAAE,QAAQ;IACd,aAAa,EAAE,CAAC;IAChB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,KAAK,EAAE,OAAO;SACf;QACD,SAAS,EAAE,EAAE;KACd;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,aAAa,GAAa,MAAM,CAAC,MAAM,CAAC;IACnD,EAAE,EAAE,MAAM;IACV,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM;IACnD,IAAI,EAAE,QAAQ;IACd,aAAa,EAAE,CAAC;IAChB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,KAAK,EAAE,MAAM;SACd;QACD,SAAS,EAAE,EAAE;KACd;CACF,CAAC,CAAC","sourcesContent":["import { Ref, MouseEvent } from 'react';\n\nimport { Action, MenuItemProps, OmitStrict, themeDefinition } from '@pega/cosmos-react-core';\n\nimport { Node } from '../Renderer/Utils/Graph';\n\nexport interface NodeType {\n  /* node type id. this must be unique */\n  id: string;\n  /* human readable name of the type */\n  name: string;\n  /* color that represents the type */\n  color: string;\n  /* icon that represents the type */\n  icon: string;\n  /* min no. of connectors */\n  minConnectors: number;\n  defaults: {\n    node: OmitStrict<NodeProps, 'type' | 'id'>;\n    connector: {\n      label: string;\n    }[];\n  };\n}\n\nexport interface NodeProps extends Node {\n  /** Unique id for Node */\n  id: string;\n  /** Label for Node */\n  label: string;\n  /** Description for Node */\n  description?: string;\n  /** Additional data for Node */\n  additionalData?: AdditionalDataItemProps[];\n  /* type of the Node */\n  type: NodeType;\n}\n\nexport interface NodeComponentProps extends NodeProps {\n  /** Callback for the node actions click */\n  onActionClick?: (params: ActionParams, e: MouseEvent) => void;\n  /** Callback for the node click */\n  onClick?: (nodeId: NodeProps['id']) => void;\n  /** Actions for the node click */\n  actions?: Action[];\n  /** Ref of the node */\n  ref?: Ref<HTMLElement>;\n}\n\nexport interface AdditionalDataItemProps {\n  id: string;\n  label: string;\n  value: string;\n}\nexport interface ActionParams {\n  actionId: string;\n  nodeId: NodeProps['id'];\n}\n\nexport interface NodeLibraryItem extends MenuItemProps {\n  id: string;\n  type: NodeType;\n  items?: NodeLibraryItem[];\n}\n\nexport const START_NODETYPE: NodeType = Object.freeze({\n  id: 'start',\n  name: 'start',\n  color: themeDefinition.base.colors.green.medium.$value,\n  icon: 'circle',\n  minConnectors: 1,\n  defaults: {\n    node: {\n      label: 'Start'\n    },\n    connector: []\n  }\n});\n\nexport const STOP_NODETYPE: NodeType = Object.freeze({\n  id: 'stop',\n  name: 'stop',\n  color: themeDefinition.base.colors.red.light.$value,\n  icon: 'circle',\n  minConnectors: 0,\n  defaults: {\n    node: {\n      label: 'Stop'\n    },\n    connector: []\n  }\n});\n"]}
+{"version":3,"file":"Node.types.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/Node.types.ts"],"names":[],"mappings":"AAEA,OAAO,EAAsB,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAgE9E,MAAM,CAAC,MAAM,cAAc,GAAa,MAAM,CAAC,MAAM,CAAC;IACpD,EAAE,EAAE,OAAO;IACX,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;IACtD,IAAI,EAAE,QAAQ;IACd,aAAa,EAAE,CAAC;IAChB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,KAAK,EAAE,OAAO;SACf;QACD,SAAS,EAAE,EAAE;KACd;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,aAAa,GAAa,MAAM,CAAC,MAAM,CAAC;IACnD,EAAE,EAAE,MAAM;IACV,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM;IACnD,IAAI,EAAE,QAAQ;IACd,aAAa,EAAE,CAAC;IAChB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,KAAK,EAAE,MAAM;SACd;QACD,SAAS,EAAE,EAAE;KACd;CACF,CAAC,CAAC","sourcesContent":["import { Ref, MouseEvent } from 'react';\n\nimport { Action, OmitStrict, themeDefinition } from '@pega/cosmos-react-core';\n\nimport { Node } from '../Renderer/Utils/Graph';\nimport { ItemVisual, LibraryItem } from '../../ItemLibrary/ItemLibrary';\n\nexport interface NodeType extends ItemVisual {\n  /* node type id. this must be unique */\n  id: string;\n  /* human readable name of the type */\n  name: string;\n  /* color that represents the type */\n  color: string;\n  /* icon that represents the type */\n  icon: string;\n  /* min no. of connectors */\n  minConnectors: number;\n  defaults: {\n    node: OmitStrict<NodeProps, 'type' | 'id'>;\n    connector: {\n      label: string;\n    }[];\n  };\n}\n\nexport interface NodeProps extends Node {\n  /** Unique id for Node */\n  id: string;\n  /** Label for Node */\n  label: string;\n  /** Description for Node */\n  description?: string;\n  /** Additional data for Node */\n  additionalData?: AdditionalDataItemProps[];\n  /* type of the Node */\n  type: NodeType;\n}\n\nexport interface NodeComponentProps extends NodeProps {\n  /** Callback for the node actions click */\n  onActionClick?: (params: ActionParams, e: MouseEvent) => void;\n  /** Callback for the node click */\n  onClick?: (nodeId: NodeProps['id']) => void;\n  /** Actions for the node click */\n  actions?: Action[];\n  /** Ref of the node */\n  ref?: Ref<HTMLElement>;\n}\n\nexport interface AdditionalDataItemProps {\n  id: string;\n  label: string;\n  value: string;\n}\nexport interface ActionParams {\n  actionId: string;\n  nodeId: NodeProps['id'];\n}\n\nexport interface NodeLibraryItem extends LibraryItem {\n  id: string;\n  type: NodeType;\n  items?: NodeLibraryItem[];\n}\n\nexport const START_NODETYPE: NodeType = Object.freeze({\n  id: 'start',\n  name: 'start',\n  color: themeDefinition.base.colors.green.medium.$value,\n  icon: 'circle',\n  minConnectors: 1,\n  defaults: {\n    node: {\n      label: 'Start'\n    },\n    connector: []\n  }\n});\n\nexport const STOP_NODETYPE: NodeType = Object.freeze({\n  id: 'stop',\n  name: 'stop',\n  color: themeDefinition.base.colors.red.light.$value,\n  icon: 'circle',\n  minConnectors: 0,\n  defaults: {\n    node: {\n      label: 'Stop'\n    },\n    connector: []\n  }\n});\n"]}

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

@@ -0,0 +1,23 @@
+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;
+}
+export interface LibraryItem extends MenuItemProps {
+    id: string;
+    type: ItemVisual;
+    items?: LibraryItem[];
+}
+export interface ItemLibraryProps<T extends LibraryItem = LibraryItem> {
+    show: boolean;
+    target: HTMLElement | null;
+    items: T[];
+    onClick?: (libItem: T) => void;
+    ref?: Ref<HTMLDivElement>;
+    placeholder?: SearchInputProps['placeholder'];
+}
+declare const ItemLibrary: FC<ItemLibraryProps & ForwardProps>;
+export default ItemLibrary;
+//# sourceMappingURL=ItemLibrary.d.ts.map

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

@@ -0,0 +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"}

package/lib/components/{FlowModeller/NodeLibrary.js → ItemLibrary/ItemLibrary.js}

@@ -1,15 +1,26 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { readableColor } from 'polished';
-import { Icon, Menu, menuHelpers, Popover, SearchInput, useI18n, cap, createStringMatcher } from '@pega/cosmos-react-core';
-import { StyledIcon } from './Node/NodeTemplate.styles';
+import { Icon, Menu, menuHelpers, Popover, SearchInput, cap, createStringMatcher, defaultThemeProp } from '@pega/cosmos-react-core';
+export const StyledIcon = styled.div(({ theme }) => {
+    return css `
+    min-height: 2rem;
+    min-width: 2rem;
+    padding: calc(0.5 * ${theme.base.spacing});
+    margin-inline-end: ${theme.base.spacing};
+    text-align: center;
+    background-color: var(--bg-color);
+    color: var(--fg-color);
+    border-radius: ${theme.base['border-radius']};
+  `;
+});
+StyledIcon.defaultProps = defaultThemeProp;
 const StyledPopover = styled(Popover) `
   min-width: 40ch;
 `;
-const NodeLibrary = forwardRef(({ show, target, items, onClick }, ref) => {
+const ItemLibrary = forwardRef(({ show, target, items, onClick, placeholder }, ref) => {
     const [search, setSearch] = useState('');
-    const t = useI18n();
     const searchEleRef = useRef(null);
     useEffect(() => {
         if (show) {
@@ -43,9 +54,11 @@ const NodeLibrary = forwardRef(({ show, target, items, onClick }, ref) => {
     }, [items, searchRegex]);
     const onItemSelect = useCallback((id) => {
         const selectedNode = menuHelpers.getItem(items, id);
-        onClick(selectedNode);
+        if (onClick) {
+            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: t('search_nodes'), placeholder: t('search_nodes') }, void 0) }, void 0) }, void 0)) }, void 0));
+    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));
 });
-export default NodeLibrary;
-//# sourceMappingURL=NodeLibrary.js.map
+export default ItemLibrary;
+//# sourceMappingURL=ItemLibrary.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,3 @@
+export { default as ItemLibrary } from './ItemLibrary';
+export * from './ItemLibrary';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ItemLibrary/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,cAAc,eAAe,CAAC"}

package/lib/components/ItemLibrary/index.js

@@ -0,0 +1,3 @@
+export { default as ItemLibrary } from './ItemLibrary';
+export * from './ItemLibrary';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ItemLibrary/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,cAAc,eAAe,CAAC","sourcesContent":["export { default as ItemLibrary } from './ItemLibrary';\nexport * from './ItemLibrary';\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,CA4H/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;AAeD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAkI/D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/LifeCycle/LifeCycle.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp, Flex, Button, Icon, useI18n } from '@pega/cosmos-react-core';
@@ -63,10 +64,10 @@ const LifeCycle = forwardRef(({ items, categories, alternateItems = [], onAddSta
     });
     return (_jsxs(Flex, { container: { itemGap: 2 }, ref: ref, children: [_jsxs(Flex, { as: StyledLifeCycle, ref: lifeCycleEl, container: true, role: 'grid', "aria-label": t('stage'), children: [items.map((stageItem, index, stageArray) => {
                         const listId = stageItem.id;
-                        return (_jsx(LifeCycleList, { id: listId, item: stageItem, isFirstItem: index === 0, isLastItem: index === stageArray.length - 1, ref: setRef, stage: stage, categories: categoriesState, ...restProps }, listId));
-                    }), _jsx(StyledAddButton, { variant: 'simple', label: t('add_stage'), icon: true, onClick: onAddStage, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0)] }, void 0), alternateItems.length !== 0 && (_jsxs(Flex, { as: StyledLifeCycle, container: true, ref: lifeCycleEl, role: 'grid', "aria-label": t('alternate_stage'), children: [alternateItems.map((stageItem) => {
+                        return (_createElement(LifeCycleList, { ...restProps, key: listId, id: listId, item: stageItem, isFirstItem: index === 0, isLastItem: index === stageArray.length - 1, ref: setRef, stage: stage, prevStageVariant: stageArray[index - 1]?.type, categories: categoriesState }));
+                    }), _jsx(StyledAddButton, { variant: 'simple', label: t('add_stage'), icon: true, onClick: onAddStage, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0)] }, void 0), alternateItems.length !== 0 && (_jsxs(Flex, { as: StyledLifeCycle, container: true, ref: lifeCycleEl, role: 'grid', "aria-label": t('alternate_stage'), children: [alternateItems.map((stageItem, index, stageArray) => {
                         const listId = stageItem.id;
-                        return (_jsx(LifeCycleList, { id: listId, item: stageItem, ref: setRef, categories: categoriesState, stageVariant: 'alternate', stage: alternateStage, ...restProps }, listId));
+                        return (_createElement(LifeCycleList, { ...restProps, key: listId, id: listId, item: stageItem, isFirstItem: index === 0, isLastItem: index === stageArray.length - 1, ref: setRef, categories: categoriesState, stageVariant: 'alternate', prevStageVariant: stageArray[index - 1]?.type, stage: alternateStage }));
                     }), _jsx(StyledAddButton, { variant: 'simple', label: t('add_alternate_stage'), icon: true, onClick: onAddAlternateStage, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0)] }, void 0))] }, void 0));
 });
 export default LifeCycle;

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

@@ -1 +1 @@
-{"version":3,"file":"LifeCycle.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useLayoutEffect,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  BaseProps,\n  ForwardProps,\n  Flex,\n  Button,\n  Icon,\n  useI18n,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport LifeCycleList from './LifeCycleList';\nimport { StageItemProps } from './LifeCycle.types';\nimport { StageProps } from './Stage';\nimport { CategoriesProps } from './Category';\nimport { TaskProps } from './Task';\nimport { StepProps } from './Step';\n\nexport interface LifeCycleProps extends BaseProps, NoChildrenProp {\n  /* Pass reference to the LifeCycleComponent */\n  ref?: Ref<HTMLDivElement>;\n  /* Array of stages and its contents */\n  items: StageItemProps[];\n  /* Array of alternate stages and its contents */\n  alternateItems?: StageItemProps[];\n  /* Props for the task component */\n  task: TaskProps[];\n  /* Props for the Stage component */\n  stage: StageProps;\n  /* Props for the AlternatStage component */\n  alternateStage: StageProps;\n  /* Props for the Cluster component */\n  categories: CategoriesProps[];\n  /* Props for the Step component */\n  step: StepProps[];\n  /* Call back function for on AddState */\n  onAddStage: () => void;\n  /* Call back function to add alternate stages */\n  onAddAlternateStage: () => void;\n}\n\nconst StyledLifeCycle = styled.ol``;\n\nStyledLifeCycle.defaultProps = defaultThemeProp;\n\nconst StyledAddButton = styled(Button)(({ theme }) => {\n  return css`\n    align-self: flex-start;\n    margin-block-start: calc(${theme.base.spacing} / 2);\n  `;\n});\n\nStyledAddButton.defaultProps = defaultThemeProp;\n\nconst LifeCycle: FunctionComponent<LifeCycleProps & ForwardProps> = forwardRef(\n  (\n    {\n      items,\n      categories,\n      alternateItems = [],\n      onAddStage,\n      onAddAlternateStage,\n      stage,\n      alternateStage,\n      ...restProps\n    }: PropsWithoutRef<LifeCycleProps>,\n    ref: LifeCycleProps['ref']\n  ) => {\n    const lifeCycleEl = useRef(null);\n    const t = useI18n();\n    const [categoriesState, setcategoriesState] = useState(categories);\n    const categoryElements: HTMLElement[] = [];\n    const setRef = (element: HTMLOListElement) => {\n      if (element) {\n        categoryElements.push(element);\n      }\n    };\n\n    useLayoutEffect(() => {\n      let isHeightChanged = false;\n      const categoriesColumn = [...categories];\n      if (categoriesColumn && categoriesColumn.length > 0) {\n        categoriesColumn.forEach((categoryItem, index) => {\n          const categoryElm = [...categoryElements];\n          let isActiveElement = false;\n          const categoryComponent = categoryElm.filter((element: HTMLElement) => {\n            if (element.getAttribute('data-id') === categoryItem.id) {\n              if (categoryItem.elementId === element.getAttribute('id')) {\n                isActiveElement = true;\n              }\n              return true;\n            }\n            return false;\n          });\n          if (!isActiveElement) {\n            categoryItem.elementId = '';\n            categoryItem.height = 0;\n          }\n          categoryComponent.forEach(categoryElement => {\n            const columnHeight = categoryItem?.height ?? 0;\n            const height = categoryElement.scrollHeight;\n            const elementId = categoryElement.getAttribute('id');\n            if (\n              height > columnHeight ||\n              (categoryItem.elementId === elementId && height !== columnHeight)\n            ) {\n              isHeightChanged = true;\n              categoriesColumn[index].height = height;\n              if (elementId) categoriesColumn[index].elementId = elementId;\n            }\n          });\n        });\n        if (isHeightChanged) {\n          isHeightChanged = false;\n          setcategoriesState(categoriesColumn);\n        }\n      }\n    });\n\n    return (\n      <Flex container={{ itemGap: 2 }} ref={ref}>\n        <Flex as={StyledLifeCycle} ref={lifeCycleEl} container role='grid' aria-label={t('stage')}>\n          {items.map((stageItem: StageItemProps, index: number, stageArray: StageItemProps[]) => {\n            const listId = stageItem.id;\n            return (\n              <LifeCycleList\n                key={listId}\n                id={listId}\n                item={stageItem}\n                isFirstItem={index === 0}\n                isLastItem={index === stageArray.length - 1}\n                ref={setRef}\n                stage={stage}\n                categories={categoriesState}\n                {...restProps}\n              />\n            );\n          })}\n          <StyledAddButton variant='simple' label={t('add_stage')} icon onClick={onAddStage}>\n            <Icon name='plus' />\n          </StyledAddButton>\n        </Flex>\n        {alternateItems.length !== 0 && (\n          <Flex\n            as={StyledLifeCycle}\n            container\n            ref={lifeCycleEl}\n            role='grid'\n            aria-label={t('alternate_stage')}\n          >\n            {alternateItems.map((stageItem: StageItemProps) => {\n              const listId = stageItem.id;\n              return (\n                <LifeCycleList\n                  key={listId}\n                  id={listId}\n                  item={stageItem}\n                  ref={setRef}\n                  categories={categoriesState}\n                  stageVariant='alternate'\n                  stage={alternateStage}\n                  {...restProps}\n                />\n              );\n            })}\n            <StyledAddButton\n              variant='simple'\n              label={t('add_alternate_stage')}\n              icon\n              onClick={onAddAlternateStage}\n            >\n              <Icon name='plus' />\n            </StyledAddButton>\n          </Flex>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default LifeCycle;\n"]}
+{"version":3,"file":"LifeCycle.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useLayoutEffect,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  BaseProps,\n  ForwardProps,\n  Flex,\n  Button,\n  Icon,\n  useI18n,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport LifeCycleList from './LifeCycleList';\nimport { StageItemProps } from './LifeCycle.types';\nimport { StageProps } from './Stage';\nimport { CategoriesProps } from './Category';\nimport { TaskProps } from './Task';\nimport { StepProps } from './Step';\n\nexport interface LifeCycleProps extends BaseProps, NoChildrenProp {\n  /* Pass reference to the LifeCycleComponent */\n  ref?: Ref<HTMLDivElement>;\n  /* Array of stages and its contents */\n  items: StageItemProps[];\n  /* Array of alternate stages and its contents */\n  alternateItems?: StageItemProps[];\n  /* Props for the task component */\n  task: TaskProps[];\n  /* Props for the Stage component */\n  stage: StageProps;\n  /* Props for the AlternatStage component */\n  alternateStage: StageProps;\n  /* Props for the Cluster component */\n  categories: CategoriesProps[];\n  /* Props for the Step component */\n  step: StepProps[];\n  /* Call back function for on AddState */\n  onAddStage: () => void;\n  /* Call back function to add alternate stages */\n  onAddAlternateStage: () => void;\n}\n\nconst StyledLifeCycle = styled.ol``;\n\nStyledLifeCycle.defaultProps = defaultThemeProp;\n\nconst StyledAddButton = styled(Button)(({ theme }) => {\n  return css`\n    align-self: flex-start;\n    margin-block-start: calc(${theme.base.spacing} / 2);\n  `;\n});\n\nStyledAddButton.defaultProps = defaultThemeProp;\n\nconst LifeCycle: FunctionComponent<LifeCycleProps & ForwardProps> = forwardRef(\n  (\n    {\n      items,\n      categories,\n      alternateItems = [],\n      onAddStage,\n      onAddAlternateStage,\n      stage,\n      alternateStage,\n      ...restProps\n    }: PropsWithoutRef<LifeCycleProps>,\n    ref: LifeCycleProps['ref']\n  ) => {\n    const lifeCycleEl = useRef(null);\n    const t = useI18n();\n    const [categoriesState, setcategoriesState] = useState(categories);\n    const categoryElements: HTMLElement[] = [];\n    const setRef = (element: HTMLOListElement) => {\n      if (element) {\n        categoryElements.push(element);\n      }\n    };\n\n    useLayoutEffect(() => {\n      let isHeightChanged = false;\n      const categoriesColumn = [...categories];\n      if (categoriesColumn && categoriesColumn.length > 0) {\n        categoriesColumn.forEach((categoryItem, index) => {\n          const categoryElm = [...categoryElements];\n          let isActiveElement = false;\n          const categoryComponent = categoryElm.filter((element: HTMLElement) => {\n            if (element.getAttribute('data-id') === categoryItem.id) {\n              if (categoryItem.elementId === element.getAttribute('id')) {\n                isActiveElement = true;\n              }\n              return true;\n            }\n            return false;\n          });\n          if (!isActiveElement) {\n            categoryItem.elementId = '';\n            categoryItem.height = 0;\n          }\n          categoryComponent.forEach(categoryElement => {\n            const columnHeight = categoryItem?.height ?? 0;\n            const height = categoryElement.scrollHeight;\n            const elementId = categoryElement.getAttribute('id');\n            if (\n              height > columnHeight ||\n              (categoryItem.elementId === elementId && height !== columnHeight)\n            ) {\n              isHeightChanged = true;\n              categoriesColumn[index].height = height;\n              if (elementId) categoriesColumn[index].elementId = elementId;\n            }\n          });\n        });\n        if (isHeightChanged) {\n          isHeightChanged = false;\n          setcategoriesState(categoriesColumn);\n        }\n      }\n    });\n\n    return (\n      <Flex container={{ itemGap: 2 }} ref={ref}>\n        <Flex as={StyledLifeCycle} ref={lifeCycleEl} container role='grid' aria-label={t('stage')}>\n          {items.map((stageItem: StageItemProps, index: number, stageArray: StageItemProps[]) => {\n            const listId = stageItem.id;\n            return (\n              <LifeCycleList\n                {...restProps}\n                key={listId}\n                id={listId}\n                item={stageItem}\n                isFirstItem={index === 0}\n                isLastItem={index === stageArray.length - 1}\n                ref={setRef}\n                stage={stage}\n                prevStageVariant={stageArray[index - 1]?.type}\n                categories={categoriesState}\n              />\n            );\n          })}\n          <StyledAddButton variant='simple' label={t('add_stage')} icon onClick={onAddStage}>\n            <Icon name='plus' />\n          </StyledAddButton>\n        </Flex>\n        {alternateItems.length !== 0 && (\n          <Flex\n            as={StyledLifeCycle}\n            container\n            ref={lifeCycleEl}\n            role='grid'\n            aria-label={t('alternate_stage')}\n          >\n            {alternateItems.map(\n              (stageItem: StageItemProps, index: number, stageArray: StageItemProps[]) => {\n                const listId = stageItem.id;\n                return (\n                  <LifeCycleList\n                    {...restProps}\n                    key={listId}\n                    id={listId}\n                    item={stageItem}\n                    isFirstItem={index === 0}\n                    isLastItem={index === stageArray.length - 1}\n                    ref={setRef}\n                    categories={categoriesState}\n                    stageVariant='alternate'\n                    prevStageVariant={stageArray[index - 1]?.type}\n                    stage={alternateStage}\n                  />\n                );\n              }\n            )}\n            <StyledAddButton\n              variant='simple'\n              label={t('add_alternate_stage')}\n              icon\n              onClick={onAddAlternateStage}\n            >\n              <Icon name='plus' />\n            </StyledAddButton>\n          </Flex>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default LifeCycle;\n"]}

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

@@ -3,6 +3,7 @@ import { Action, StatusProps } from '@pega/cosmos-react-core';
 export interface VisualColorProps {
     color: 'magenta' | 'studio' | 'congressBlue' | 'Japaneselaurel' | 'violet' | 'yellow' | 'orange' | 'darkyellow';
 }
+export declare type StageType = 'start' | 'default' | 'default-wait' | 'resolution' | 'alternate' | 'alternate-wait';
 export interface StepItemProps {
     id: string;
     label: string;
@@ -31,7 +32,7 @@ export interface StageItemProps {
     id: string;
     label: string;
     categories: CategoryItemProps[];
-    type: 'start' | 'default' | 'resolution' | 'alternate';
+    type: StageType;
     error: string;
 }
 export interface CategoryItemProps {
@@ -53,4 +54,14 @@ export interface LifeCycleActionParam {
 export interface LifeCycleAction extends Omit<Action, 'onClick'> {
     onClick: (param: LifeCycleActionParam, e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>) => void;
 }
+export interface StageInfo {
+    id: StageType;
+    visual: {
+        bgColor: string;
+        bgHover: string;
+        tailPointed?: boolean;
+        headPointed?: boolean;
+    };
+}
+export declare const getStageInfo: (currentType: StageType, prevType: StageType | null, isLastItem: boolean | undefined) => StageInfo;
 //# sourceMappingURL=LifeCycle.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LifeCycle.types.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EACD,SAAS,GACT,QAAQ,GACR,cAAc,GACd,gBAAgB,GAChB,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,YAAY,CAAC;CAClB;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE;QACN,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;QACjC,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,MAAM,EAAE;QAAE,IAAI,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,cAAc;IAE7B,EAAE,EAAE,MAAM,CAAC;IAEX,KAAK,EAAE,MAAM,CAAC;IAEd,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAEhC,IAAI,EAAE,OAAO,GAAG,SAAS,GAAG,YAAY,GAAG,WAAW,CAAC;IACvD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAEhC,EAAE,EAAE,MAAM,CAAC;IAEX,UAAU,EAAE,MAAM,CAAC;IAEnB,KAAK,EAAE,aAAa,EAAE,GAAG,aAAa,EAAE,EAAE,CAAC;CAC5C;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC;IAC9D,OAAO,EAAE,CACP,KAAK,EAAE,oBAAoB,EAC3B,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,gBAAgB,CAAC,KACpE,IAAI,CAAC;CACX"}
+{"version":3,"file":"LifeCycle.types.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAsB,MAAM,yBAAyB,CAAC;AAElF,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EACD,SAAS,GACT,QAAQ,GACR,cAAc,GACd,gBAAgB,GAChB,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,YAAY,CAAC;CAClB;AAED,oBAAY,SAAS,GACjB,OAAO,GACP,SAAS,GACT,cAAc,GACd,YAAY,GACZ,WAAW,GACX,gBAAgB,CAAC;AAErB,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE;QACN,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;QACjC,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,MAAM,EAAE;QAAE,IAAI,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,cAAc;IAE7B,EAAE,EAAE,MAAM,CAAC;IAEX,KAAK,EAAE,MAAM,CAAC;IAEd,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAEhC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAEhC,EAAE,EAAE,MAAM,CAAC;IAEX,UAAU,EAAE,MAAM,CAAC;IAEnB,KAAK,EAAE,aAAa,EAAE,GAAG,aAAa,EAAE,EAAE,CAAC;CAC5C;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC;IAC9D,OAAO,EAAE,CACP,KAAK,EAAE,oBAAoB,EAC3B,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,gBAAgB,CAAC,KACpE,IAAI,CAAC;CACX;AAED,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,SAAS,CAAC;IACd,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;QAChB,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB,CAAC;CACH;AA6DD,eAAO,MAAM,YAAY,gBACV,SAAS,YACZ,SAAS,GAAG,IAAI,cACd,OAAO,GAAG,SAAS,cAoBhC,CAAC"}

package/lib/components/LifeCycle/LifeCycle.types.js

@@ -1,2 +1,79 @@
-export {};
+import { WorkTheme as Theme } from '@pega/cosmos-react-core';
+const StageTypeDefaults = {
+    start: {
+        id: 'start',
+        visual: {
+            bgColor: Theme.base.colors.blue.dark,
+            bgHover: Theme.base.colors.blue.medium,
+            tailPointed: false,
+            headPointed: true
+        }
+    },
+    default: {
+        id: 'default',
+        visual: {
+            bgColor: Theme.base.colors.blue.medium,
+            bgHover: Theme.base.colors.blue.light,
+            tailPointed: true,
+            headPointed: true
+        }
+    },
+    'default-wait': {
+        id: 'default-wait',
+        visual: {
+            bgColor: Theme.base.colors.blue.medium,
+            bgHover: Theme.base.colors.blue.light,
+            tailPointed: true,
+            headPointed: false
+        }
+    },
+    resolution: {
+        id: 'resolution',
+        visual: {
+            bgColor: Theme.base.colors.green.medium,
+            bgHover: Theme.base.colors.green.light,
+            tailPointed: true,
+            headPointed: false
+        }
+    },
+    alternate: {
+        id: 'alternate',
+        visual: {
+            bgColor: Theme.base.colors.red.dark,
+            bgHover: Theme.base.colors.red.medium,
+            tailPointed: false,
+            headPointed: false
+        }
+    },
+    'alternate-wait': {
+        id: 'alternate-wait',
+        visual: {
+            bgColor: Theme.base.colors.red.dark,
+            bgHover: Theme.base.colors.red.medium,
+            tailPointed: false,
+            headPointed: false
+        }
+    }
+};
+// calculates the final stage info based on prev type and returns the final stage info
+// second param is mandatory for accurate results, optional only for the first stage
+export const getStageInfo = (currentType, prevType, isLastItem) => {
+    const currentStageInfo = StageTypeDefaults[currentType] || StageTypeDefaults.default;
+    // cloning, to avoid getting modified
+    const result = {
+        ...currentStageInfo,
+        visual: {
+            ...currentStageInfo.visual
+        }
+    };
+    if (prevType) {
+        const prevStageInfo = StageTypeDefaults[prevType] || StageTypeDefaults.start;
+        result.visual.tailPointed =
+            currentStageInfo.visual.tailPointed && prevStageInfo.visual.headPointed;
+    }
+    if (isLastItem) {
+        result.visual.headPointed = false;
+    }
+    return result;
+};
 //# sourceMappingURL=LifeCycle.types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LifeCycle.types.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent } from 'react';\n\nimport { Action, StatusProps } from '@pega/cosmos-react-core';\n\nexport interface VisualColorProps {\n  color:\n    | 'magenta'\n    | 'studio'\n    | 'congressBlue'\n    | 'Japaneselaurel'\n    | 'violet'\n    | 'yellow'\n    | 'orange'\n    | 'darkyellow';\n}\n\nexport interface StepItemProps {\n  id: string;\n  label: string;\n  visual: {\n    color: VisualColorProps['color'];\n    icon: string;\n    label: string;\n    imgurl: string;\n  };\n  status: { type?: StatusProps['variant'] | ''; label: string };\n  error: string;\n}\n\nexport interface TaskItemProps {\n  id: string;\n  label: string;\n  visual: {\n    imgurl: string;\n  };\n  error: string;\n  steps: StepItemProps[];\n}\n\nexport interface StageItemProps {\n  /* Data model should have id of the stage item */\n  id: string;\n  /* Data model should have the stage label */\n  label: string;\n  /* Data model should have the categoryData array */\n  categories: CategoryItemProps[];\n  /* Data model should have the stageType as below */\n  type: 'start' | 'default' | 'resolution' | 'alternate';\n  error: string;\n}\n\nexport interface CategoryItemProps {\n  /* Data model should have id of the stage item */\n  id: string;\n  /* Data model should have id of the stage item */\n  categoryId: string;\n  /* Data model should have the categoryData array */\n  tasks: TaskItemProps[] | TaskItemProps[][];\n}\n\nexport interface CategoriesItemProps {\n  label: string;\n  id: string;\n}\n\nexport interface LifeCycleActionParam {\n  value?: string;\n  stage?: StageItemProps;\n  task?: TaskItemProps;\n  category?: CategoryItemProps;\n  step?: StepItemProps;\n}\n\nexport interface LifeCycleAction extends Omit<Action, 'onClick'> {\n  onClick: (\n    param: LifeCycleActionParam,\n    e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>\n  ) => void;\n}\n"]}
+{"version":3,"file":"LifeCycle.types.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.types.ts"],"names":[],"mappings":"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","sourcesContent":["import { MouseEvent } from 'react';\n\nimport { Action, StatusProps, WorkTheme as Theme } from '@pega/cosmos-react-core';\n\nexport interface VisualColorProps {\n  color:\n    | 'magenta'\n    | 'studio'\n    | 'congressBlue'\n    | 'Japaneselaurel'\n    | 'violet'\n    | 'yellow'\n    | 'orange'\n    | 'darkyellow';\n}\n\nexport type StageType =\n  | 'start'\n  | 'default'\n  | 'default-wait'\n  | 'resolution'\n  | 'alternate'\n  | 'alternate-wait';\n\nexport interface StepItemProps {\n  id: string;\n  label: string;\n  visual: {\n    color: VisualColorProps['color'];\n    icon: string;\n    label: string;\n    imgurl: string;\n  };\n  status: { type?: StatusProps['variant'] | ''; label: string };\n  error: string;\n}\n\nexport interface TaskItemProps {\n  id: string;\n  label: string;\n  visual: {\n    imgurl: string;\n  };\n  error: string;\n  steps: StepItemProps[];\n}\n\nexport interface StageItemProps {\n  /* Data model should have id of the stage item */\n  id: string;\n  /* Data model should have the stage label */\n  label: string;\n  /* Data model should have the categoryData array */\n  categories: CategoryItemProps[];\n  /* Data model should have the stageType as below */\n  type: StageType;\n  error: string;\n}\n\nexport interface CategoryItemProps {\n  /* Data model should have id of the stage item */\n  id: string;\n  /* Data model should have id of the stage item */\n  categoryId: string;\n  /* Data model should have the categoryData array */\n  tasks: TaskItemProps[] | TaskItemProps[][];\n}\n\nexport interface CategoriesItemProps {\n  label: string;\n  id: string;\n}\n\nexport interface LifeCycleActionParam {\n  value?: string;\n  stage?: StageItemProps;\n  task?: TaskItemProps;\n  category?: CategoryItemProps;\n  step?: StepItemProps;\n}\n\nexport interface LifeCycleAction extends Omit<Action, 'onClick'> {\n  onClick: (\n    param: LifeCycleActionParam,\n    e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>\n  ) => void;\n}\n\nexport interface StageInfo {\n  id: StageType;\n  visual: {\n    bgColor: string;\n    bgHover: string;\n    tailPointed?: boolean;\n    headPointed?: boolean;\n  };\n}\n\nconst StageTypeDefaults: Record<StageType, StageInfo> = {\n  start: {\n    id: 'start',\n    visual: {\n      bgColor: Theme.base.colors.blue.dark,\n      bgHover: Theme.base.colors.blue.medium,\n      tailPointed: false,\n      headPointed: true\n    }\n  },\n  default: {\n    id: 'default',\n    visual: {\n      bgColor: Theme.base.colors.blue.medium,\n      bgHover: Theme.base.colors.blue.light,\n      tailPointed: true,\n      headPointed: true\n    }\n  },\n  'default-wait': {\n    id: 'default-wait',\n    visual: {\n      bgColor: Theme.base.colors.blue.medium,\n      bgHover: Theme.base.colors.blue.light,\n      tailPointed: true,\n      headPointed: false\n    }\n  },\n  resolution: {\n    id: 'resolution',\n    visual: {\n      bgColor: Theme.base.colors.green.medium,\n      bgHover: Theme.base.colors.green.light,\n      tailPointed: true,\n      headPointed: false\n    }\n  },\n  alternate: {\n    id: 'alternate',\n    visual: {\n      bgColor: Theme.base.colors.red.dark,\n      bgHover: Theme.base.colors.red.medium,\n      tailPointed: false,\n      headPointed: false\n    }\n  },\n  'alternate-wait': {\n    id: 'alternate-wait',\n    visual: {\n      bgColor: Theme.base.colors.red.dark,\n      bgHover: Theme.base.colors.red.medium,\n      tailPointed: false,\n      headPointed: false\n    }\n  }\n};\n\n// calculates the final stage info based on prev type and returns the final stage info\n// second param is mandatory for accurate results, optional only for the first stage\nexport const getStageInfo = (\n  currentType: StageType,\n  prevType: StageType | null,\n  isLastItem: boolean | undefined\n) => {\n  const currentStageInfo = StageTypeDefaults[currentType] || StageTypeDefaults.default;\n  // cloning, to avoid getting modified\n  const result: StageInfo = {\n    ...currentStageInfo,\n    visual: {\n      ...currentStageInfo.visual\n    }\n  };\n\n  if (prevType) {\n    const prevStageInfo = StageTypeDefaults[prevType] || StageTypeDefaults.start;\n    result.visual.tailPointed =\n      currentStageInfo.visual.tailPointed && prevStageInfo.visual.headPointed;\n  }\n  if (isLastItem) {\n    result.visual.headPointed = false;\n  }\n  return result;\n};\n"]}

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

@@ -1,6 +1,6 @@
 import { FunctionComponent, Ref } from 'react';
 import type { NoChildrenProp } from '@pega/cosmos-react-core';
-import { StageItemProps } from './LifeCycle.types';
+import { StageItemProps, StageType } from './LifeCycle.types';
 import { StageProps } from './Stage';
 import { CategoriesProps } from './Category';
 import { TaskProps } from './Task';
@@ -14,7 +14,8 @@ export interface LifeCycleListProps extends NoChildrenProp {
     item: StageItemProps;
     isFirstItem?: boolean;
     isLastItem?: boolean;
-    stageVariant?: 'start' | 'default' | 'resolution' | 'alternate';
+    stageVariant?: StageType;
+    prevStageVariant: StageType;
     id?: string;
 }
 declare const LifeCycleList: FunctionComponent<LifeCycleListProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"LifeCycleList.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycleList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG9D,OAAO,EAAE,cAAc,EAAqB,MAAM,mBAAmB,CAAC;AACtE,OAAc,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAiB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEnC,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IAExD,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAE5B,UAAU,EAAE,eAAe,EAAE,CAAC;IAE9B,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC;IAEnB,IAAI,EAAE,cAAc,CAAC;IAErB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,YAAY,GAAG,WAAW,CAAC;IAEhE,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAoBD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CAiGxD,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"LifeCycleList.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycleList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG9D,OAAO,EAAE,cAAc,EAAmC,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC/F,OAAc,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAiB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEnC,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IAExD,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAE5B,UAAU,EAAE,eAAe,EAAE,CAAC;IAE9B,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC;IAEnB,IAAI,EAAE,cAAc,CAAC;IAErB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,gBAAgB,EAAE,SAAS,CAAC;IAE5B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAoBD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CAiGxD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/LifeCycle/LifeCycleList.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { createUID, useDirection } from '@pega/cosmos-react-core';
+import { getStageInfo } from './LifeCycle.types';
 import Stage from './Stage';
 import Category from './Category';
 const StyledLifeCycleList = styled.li(({ theme, lastItem }) => {
@@ -22,7 +23,7 @@ const StyledLifeCycleList = styled.li(({ theme, lastItem }) => {
     `}
   `;
 });
-const LifeCycleList = forwardRef(({ item, isFirstItem, categories, isLastItem, stage: stageProps, task, step, stageVariant, id, ...restProps }, ref) => {
+const LifeCycleList = forwardRef(({ item, isFirstItem, isLastItem, categories, stage: stageProps, task, step, prevStageVariant, stageVariant, id, ...restProps }, ref) => {
     const showTitle = isFirstItem || false;
     let sortedCategory = [];
     const listId = id || createUID();
@@ -43,7 +44,8 @@ const LifeCycleList = forwardRef(({ item, isFirstItem, categories, isLastItem, s
     if (categories && categories.length !== 0) {
         sortedCategory = catgoryItem(item.categories);
     }
-    return (_jsxs(StyledLifeCycleList, { role: 'row', lastItem: isLastItem, children: [_jsx(Stage, { value: item.label, variant: stageVariant || (item.type ? item.type : 'default'), item: item, tailPointed: isFirstItem, headPointed: isLastItem, error: item.error, id: item.id, ...stageProps }, void 0), sortedCategory.length !== 0 &&
+    const stageInfo = getStageInfo(item.type, prevStageVariant, isLastItem);
+    return (_jsxs(StyledLifeCycleList, { role: 'row', lastItem: isLastItem, children: [_jsx(Stage, { value: item.label, stageInfo: stageInfo, item: item, error: item.error, id: item.id, ...stageProps }, void 0), sortedCategory.length !== 0 &&
                 sortedCategory.map((categoryItem, categoryindex) => {
                     const taskProps = task[categoryindex];
                     let stepProps;