@pega/cosmos-react-build 3.0.0-dev.12.0 → 3.0.0-dev.13.0

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

@@ -1 +1 @@
-{"version":3,"file":"Connector.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/Connector.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAwB,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACzF,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAwB5D,aAAK,cAAc,GAAG,IAAI,CAAC,sBAAsB,EAAE,IAAI,GAAG,MAAM,GAAG,aAAa,GAAG,WAAW,CAAC,GAC7F,OAAO,CAAC,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,CAAC,CAAC;AAExD,QAAA,MAAM,SAAS,yDAA0D,cAAc,gBAuBtF,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Connector.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/Connector.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAwB,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACzF,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAyB5D,aAAK,cAAc,GAAG,IAAI,CAAC,sBAAsB,EAAE,IAAI,GAAG,MAAM,GAAG,aAAa,GAAG,WAAW,CAAC,GAC7F,OAAO,CAAC,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,CAAC,CAAC;AAExD,QAAA,MAAM,SAAS,yDAA0D,cAAc,gBA0BtF,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/FlowModeller/Connector.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp, Flex, Text } from '@pega/cosmos-react-core';
 import { AddButton } from './AddNode';
+import FlowModellerContext from './FlowModellerContext';
 const StyledLabel = styled(Text)(({ theme, highlight }) => {
     return css `
     border-radius: ${theme.base['border-radius']};
@@ -24,11 +26,12 @@ const StyledLabel = styled(Text)(({ theme, highlight }) => {
 StyledLabel.defaultProps = defaultThemeProp;
 const Connector = ({ id, labelLayout, highlight, data, realConnectors }) => {
     const refId = realConnectors || id;
+    const { readOnly } = useContext(FlowModellerContext);
     const metaData = {
         refType: 'connector',
         refId
     };
-    return (_jsxs(_Fragment, { children: [labelLayout?.value && (_jsx(Flex, { container: { justify: 'center' }, children: _jsx(StyledLabel, { highlight: highlight, children: labelLayout.value }) })), _jsx(AddButton, { highlight: highlight, addNodeHandler: (e) => data?.onNodeCreate(e.currentTarget, metaData) })] }));
+    return (_jsxs(_Fragment, { children: [labelLayout?.value && (_jsx(Flex, { container: { justify: 'center' }, children: _jsx(StyledLabel, { highlight: highlight, children: labelLayout.value }) })), !readOnly && (_jsx(AddButton, { highlight: highlight, addNodeHandler: (e) => data?.onNodeCreate(e.currentTarget, metaData) }))] }));
 };
 export default Connector;
 //# sourceMappingURL=Connector.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Connector.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/Connector.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEvE,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAItC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAyB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IAChF,OAAO,GAAG,CAAA;qBACS,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;kBAC9B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI;MACxC,SAAS;QACX,GAAG,CAAA;;4BAEqB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI;;KAEjD;aACQ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;0BAEV,KAAK,CAAC,IAAI,CAAC,OAAO,KAAK,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;GAKhE,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAK5C,MAAM,SAAS,GAAG,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,cAAc,EAAkB,EAAE,EAAE;IACzF,MAAM,KAAK,GAAG,cAAc,IAAI,EAAE,CAAC;IAEnC,MAAM,QAAQ,GAAyB;QACrC,OAAO,EAAE,WAAW;QACpB,KAAK;KACN,CAAC;IAEF,OAAO,CACL,8BACG,WAAW,EAAE,KAAK,IAAI,CACrB,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,YACpC,KAAC,WAAW,IAAC,SAAS,EAAE,SAAS,YAAG,WAAW,CAAC,KAAK,GAAe,GAC/D,CACR,EACD,KAAC,SAAS,IACR,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,CAAC,CAAgC,EAAE,EAAE,CACnD,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,aAAa,EAAE,QAAQ,CAAC,GAE/C,IACD,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Flex, Text } from '@pega/cosmos-react-core';\n\nimport { AddButton } from './AddNode';\nimport { AddNodeHandlerParams, RendererConnectorProps } from './Renderer/Renderer.types';\nimport { PlaceHolderConnector } from './Utils/addNodeUtils';\n\nconst StyledLabel = styled(Text)<{ highlight: boolean }>(({ theme, highlight }) => {\n  return css`\n    border-radius: ${theme.base['border-radius']};\n    background: ${theme.base.colors.slate.dark};\n    ${highlight &&\n    css`\n       {\n        background-color: ${theme.base.colors.red.dark};\n      }\n    `}\n    color: ${theme.base.colors.white};\n    text-align: center;\n    padding: calc(0.5 * ${theme.base.spacing}) ${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\ntype ConnectorProps = Pick<RendererConnectorProps, 'id' | 'data' | 'labelLayout' | 'highlight'> &\n  Partial<Pick<PlaceHolderConnector, 'realConnectors'>>;\n\nconst Connector = ({ id, labelLayout, highlight, data, realConnectors }: ConnectorProps) => {\n  const refId = realConnectors || id;\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 highlight={highlight}>{labelLayout.value}</StyledLabel>\n        </Flex>\n      )}\n      <AddButton\n        highlight={highlight}\n        addNodeHandler={(e: MouseEvent<HTMLButtonElement>) =>\n          data?.onNodeCreate(e.currentTarget, metaData)\n        }\n      />\n    </>\n  );\n};\n\nexport default Connector;\n"]}
+{"version":3,"file":"Connector.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/Connector.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAc,UAAU,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEvE,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAGtC,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AAExD,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAyB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IAChF,OAAO,GAAG,CAAA;qBACS,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;kBAC9B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI;MACxC,SAAS;QACX,GAAG,CAAA;;4BAEqB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI;;KAEjD;aACQ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;0BAEV,KAAK,CAAC,IAAI,CAAC,OAAO,KAAK,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;GAKhE,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAK5C,MAAM,SAAS,GAAG,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,cAAc,EAAkB,EAAE,EAAE;IACzF,MAAM,KAAK,GAAG,cAAc,IAAI,EAAE,CAAC;IACnC,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAErD,MAAM,QAAQ,GAAyB;QACrC,OAAO,EAAE,WAAW;QACpB,KAAK;KACN,CAAC;IAEF,OAAO,CACL,8BACG,WAAW,EAAE,KAAK,IAAI,CACrB,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,YACpC,KAAC,WAAW,IAAC,SAAS,EAAE,SAAS,YAAG,WAAW,CAAC,KAAK,GAAe,GAC/D,CACR,EACA,CAAC,QAAQ,IAAI,CACZ,KAAC,SAAS,IACR,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,CAAC,CAAgC,EAAE,EAAE,CACnD,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,aAAa,EAAE,QAAQ,CAAC,GAE/C,CACH,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { MouseEvent, useContext } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Flex, Text } from '@pega/cosmos-react-core';\n\nimport { AddButton } from './AddNode';\nimport { AddNodeHandlerParams, RendererConnectorProps } from './Renderer/Renderer.types';\nimport { PlaceHolderConnector } from './Utils/addNodeUtils';\nimport FlowModellerContext from './FlowModellerContext';\n\nconst StyledLabel = styled(Text)<{ highlight: boolean }>(({ theme, highlight }) => {\n  return css`\n    border-radius: ${theme.base['border-radius']};\n    background: ${theme.base.colors.slate.dark};\n    ${highlight &&\n    css`\n       {\n        background-color: ${theme.base.colors.red.dark};\n      }\n    `}\n    color: ${theme.base.colors.white};\n    text-align: center;\n    padding: calc(0.5 * ${theme.base.spacing}) ${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\ntype ConnectorProps = Pick<RendererConnectorProps, 'id' | 'data' | 'labelLayout' | 'highlight'> &\n  Partial<Pick<PlaceHolderConnector, 'realConnectors'>>;\n\nconst Connector = ({ id, labelLayout, highlight, data, realConnectors }: ConnectorProps) => {\n  const refId = realConnectors || id;\n  const { readOnly } = useContext(FlowModellerContext);\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 highlight={highlight}>{labelLayout.value}</StyledLabel>\n        </Flex>\n      )}\n      {!readOnly && (\n        <AddButton\n          highlight={highlight}\n          addNodeHandler={(e: MouseEvent<HTMLButtonElement>) =>\n            data?.onNodeCreate(e.currentTarget, metaData)\n          }\n        />\n      )}\n    </>\n  );\n};\n\nexport default Connector;\n"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"FlowModeller.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAEf,UAAU,EAKX,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,MAAM,EAMP,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EACL,oBAAoB,EAGpB,aAAa,EACd,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EACL,YAAY,EACZ,SAAS,EACT,eAAe,EAGf,QAAQ,EAET,MAAM,mBAAmB,CAAC;AAS3B,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,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxD,qBAAqB;IACrB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,iBAAiB;IACjB,aAAa,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CAC7C;AAiFD,QAAA,MAAM,YAAY,4GASf,gBAAgB,iBAAiB,CAAC,gBA8OpC,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"FlowModeller.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAQhB,MAAM,OAAO,CAAC;AAmCf,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAiFzD,QAAA,MAAM,YAAY,sHAUf,gBAAgB,iBAAiB,CAAC,gBAiPpC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/FlowModeller/FlowModeller.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useReducer, useCallback, useRef } from 'react';
+import { useEffect, useReducer, useCallback, useRef, useMemo } from 'react';
 import { createUID, useElement, useOuterEvent, useI18n } from '@pega/cosmos-react-core';
 import ItemLibrary from '../ItemLibrary/ItemLibrary';
 import FlowRenderer from './Renderer/Renderer';
@@ -10,6 +10,7 @@ import FlowModellerHelper from './helper';
 import DeletePopover from './DeletePopover';
 import Connector from './Connector';
 import Node from './Node';
+import FlowModellerContext from './FlowModellerContext';
 const initState = {
     showLib: false,
     activeItem: null,
@@ -71,7 +72,7 @@ const reducer = (state, action) => {
             return state;
     }
 };
-const FlowModeller = ({ graphData, highlightData, onNodeActionClick, onNodeAdd, nodeLibrary, onNodeClick, onDelete, actions }) => {
+const FlowModeller = ({ graphData, highlightData, onNodeActionClick, onNodeAdd, nodeLibrary, onNodeClick, onDelete, actions, readOnly }) => {
     const [state, dispatch] = useReducer(reducer, initState);
     const [popoverEl, setPopoverEl] = useElement(null);
     const [deletePopoverEl, setDeletePopoverEl] = useElement(null);
@@ -236,7 +237,8 @@ const FlowModeller = ({ graphData, highlightData, onNodeActionClick, onNodeAdd,
         };
     }, []);
     const items = nodeLibrary !== undefined ? nodeLibrary : [];
-    return (_jsxs("div", { children: [_jsx(FlowRenderer, { graphData: state.graphData, connector: Connector, node: Node, highlights: highlightData ?? state.highlightItems }), state.showDeletePopover && state.deleteProps && (_jsx(DeletePopover, { show: state.showDeletePopover, ref: setDeletePopoverEl, ...state.deleteProps })), _jsx(ItemLibrary, { show: state.showLib, target: state.activeAddBtnMeta.target, placeholder: t('search_nodes'), items: items, onClick: onLibraryItemSelect, ref: setPopoverEl, position: 'bottom' })] }));
+    const ctxValue = useMemo(() => ({ readOnly }), [readOnly]);
+    return (_jsxs("div", { children: [_jsx(FlowModellerContext.Provider, { value: ctxValue, children: _jsx(FlowRenderer, { graphData: state.graphData, connector: Connector, node: Node, highlights: highlightData ?? state.highlightItems }) }), state.showDeletePopover && state.deleteProps && (_jsx(DeletePopover, { show: state.showDeletePopover, ref: setDeletePopoverEl, ...state.deleteProps })), _jsx(ItemLibrary, { show: state.showLib, target: state.activeAddBtnMeta.target, placeholder: t('search_nodes'), items: items, onClick: onLibraryItemSelect, ref: setPopoverEl, position: 'bottom' })] }));
 };
 export default FlowModeller;
 //# sourceMappingURL=FlowModeller.js.map

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  Reducer,\n  useCallback,\n  useRef\n} from 'react';\n\nimport {\n  PopoverProps,\n  Action,\n  createUID,\n  useElement,\n  useOuterEvent,\n  useI18n,\n  OmitStrict\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  RendererProps\n} from './Renderer/Renderer.types';\nimport FlowRenderer from './Renderer/Renderer';\nimport {\n  ActionParams,\n  NodeProps,\n  NodeLibraryItem,\n  START_NODETYPE,\n  STOP_NODETYPE,\n  NodeType,\n  NodeComponentData\n} from './Node/Node.types';\nimport PlaceHolderHelper from './Utils/addNodeUtils';\nimport { AddButton } from './AddNode';\nimport FlowModellerHelper from './helper';\nimport DeletePopover, { DeleteNodePopoverProps } from './DeletePopover';\nimport Connector from './Connector';\nimport Node from './Node';\nimport { DeleteNodeModalOption, DeleteNodeOutcome } from './Utils/deleteNodeUtils';\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  /** Callback for node deletion */\n  onDelete?: (param: ActionParams, e: MouseEvent) => void;\n  /** Types of nodes */\n  nodeLibrary: NodeLibraryItem[];\n  /** Highlights */\n  highlightData?: RendererProps['highlights'];\n}\n\ntype ModellerState = {\n  showLib: boolean;\n  activeItem: Element | null;\n  activeAddBtnMeta: {\n    target: null; // we will maintain ref of an Element\n    meta: AddNodeHandlerParams;\n  };\n  graphData: GraphData<RendererNodeProps, RendererConnectorProps>;\n  highlightItems?: DeleteNodeModalOption['pathItems'];\n  showDeletePopover: boolean;\n  deleteProps:\n    | OmitStrict<DeleteNodePopoverProps & { target: PopoverProps['target'] }, 'show'>\n    | undefined;\n};\n\nconst initState: ModellerState = {\n  showLib: false,\n  activeItem: null,\n  activeAddBtnMeta: {\n    target: null,\n    meta: {\n      refType: 'node',\n      refId: ''\n    }\n  },\n  graphData: { nodes: [], connectors: [] },\n  highlightItems: undefined,\n  showDeletePopover: false,\n  deleteProps: undefined\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 'setActiveItem':\n      return {\n        ...state,\n        activeItem: action.payload.target\n      };\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        highlightItems: action.payload.highlightItems\n      };\n    case 'highlight':\n      // minor optimization to avoid unnecessary re-render\n      if (action.payload.hideDeletePopover === !state.showDeletePopover) {\n        return state;\n      }\n\n      return {\n        ...state,\n        highlightItems: action.payload.highlightItems,\n        showDeletePopover: action.payload.hideDeletePopover !== true && state.showDeletePopover\n      };\n    case 'showDeletePopover':\n      return {\n        ...state,\n        showDeletePopover: action.payload.showDeletePopover,\n        deleteProps: action.payload.deleteProps\n      };\n    default:\n      return state;\n  }\n};\n\nconst FlowModeller = ({\n  graphData,\n  highlightData,\n  onNodeActionClick,\n  onNodeAdd,\n  nodeLibrary,\n  onNodeClick,\n  onDelete,\n  actions\n}: PropsWithoutRef<FlowModellerProps>) => {\n  const [state, dispatch] = useReducer<Reducer<ModellerState, any>>(reducer, initState);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const [deletePopoverEl, setDeletePopoverEl] = useElement<HTMLElement>(null);\n\n  const stateRef = useRef<ModellerState>(initState);\n\n  // stateRef always refers to the same state obj\n  // \"fixed\" callbacks can refer to this object whenever\n  // it need the current value.  Note: the callbacks will not\n  // be reactive - they will not re-run the instant state changes,\n  // but they *will* see the current value whenever they do run\n  stateRef.current = state;\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  const closeDeleteModel = () => {\n    // un-highlight the nodes and connectors\n    dispatch({\n      type: 'highlight',\n      payload: {\n        highlightItems: undefined,\n        hideDeletePopover: true\n      }\n    });\n  };\n\n  const onDeleteWrapper = useCallback(\n    (params: ActionParams, e: MouseEvent) => {\n      const result: DeleteNodeOutcome | false = FlowModellerHelper.deleteNode(\n        graphData,\n        params.nodeId\n      );\n\n      if (result) {\n        onDelete?.({ ...params, additionalData: result }, e);\n      } else {\n        dispatch({\n          type: 'showDeletePopover',\n          payload: {\n            showDeletePopover: true,\n            deleteProps: {\n              flowGraphData: graphData,\n              rendererGraphData: stateRef.current.graphData,\n              nodeId: params.nodeId,\n              target: {\n                getBoundingClientRect: () =>\n                  document\n                    .getElementById(`modeller-node-${stateRef.current.deleteProps?.nodeId}`)\n                    ?.getBoundingClientRect()\n              } as PopoverProps['target'],\n              onChange: highlights => {\n                dispatch({\n                  type: 'highlight',\n                  payload: {\n                    highlightItems: highlights\n                  }\n                });\n              },\n              onSubmit: outcome => {\n                // un-highlight the nodes and connectors\n                closeDeleteModel();\n                onDelete?.({ ...params, additionalData: outcome }, e);\n              },\n              onCancel: closeDeleteModel\n            } as ModellerState['deleteProps']\n          }\n        });\n      }\n    },\n    [graphData, state.graphData]\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        data: {\n          onNodeCreate\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        data: {\n          isActive: state.activeItem?.id === node.id,\n          actions,\n          onDelete: onDeleteWrapper,\n          onActionClick: onNodeActionClick,\n          onClick: onNodeClick\n        } as NodeComponentData\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          onNodeCreate\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      }\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  useOuterEvent('mousedown', [deletePopoverEl], closeDeleteModel);\n\n  useEffect(() => {\n    document.addEventListener('keydown', onKeydown);\n\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={Connector}\n        node={Node}\n        highlights={highlightData ?? state.highlightItems}\n      />\n      {state.showDeletePopover && state.deleteProps && (\n        <DeletePopover\n          show={state.showDeletePopover}\n          ref={setDeletePopoverEl}\n          {...state.deleteProps}\n        />\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        position='bottom'\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  Reducer,\n  useCallback,\n  useRef,\n  useMemo\n} from 'react';\n\nimport {\n  PopoverProps,\n  createUID,\n  useElement,\n  useOuterEvent,\n  useI18n,\n  OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport ItemLibrary, { LibraryItem } from '../ItemLibrary/ItemLibrary';\n\nimport { GraphData } from './Renderer/Utils/Graph';\nimport {\n  AddNodeHandlerParams,\n  RendererConnectorProps,\n  RendererNodeProps\n} from './Renderer/Renderer.types';\nimport FlowRenderer from './Renderer/Renderer';\nimport {\n  ActionParams,\n  NodeLibraryItem,\n  START_NODETYPE,\n  STOP_NODETYPE,\n  NodeComponentData\n} from './Node/Node.types';\nimport PlaceHolderHelper from './Utils/addNodeUtils';\nimport { AddButton } from './AddNode';\nimport FlowModellerHelper from './helper';\nimport DeletePopover, { DeleteNodePopoverProps } from './DeletePopover';\nimport Connector from './Connector';\nimport Node from './Node';\nimport { DeleteNodeModalOption, DeleteNodeOutcome } from './Utils/deleteNodeUtils';\nimport FlowModellerContext from './FlowModellerContext';\nimport { FlowModellerProps } from './FlowModeller.types';\n\ntype ModellerState = {\n  showLib: boolean;\n  activeItem: Element | null;\n  activeAddBtnMeta: {\n    target: null; // we will maintain ref of an Element\n    meta: AddNodeHandlerParams;\n  };\n  graphData: GraphData<RendererNodeProps, RendererConnectorProps>;\n  highlightItems?: DeleteNodeModalOption['pathItems'];\n  showDeletePopover: boolean;\n  deleteProps:\n    | OmitStrict<DeleteNodePopoverProps & { target: PopoverProps['target'] }, 'show'>\n    | undefined;\n};\n\nconst initState: ModellerState = {\n  showLib: false,\n  activeItem: null,\n  activeAddBtnMeta: {\n    target: null,\n    meta: {\n      refType: 'node',\n      refId: ''\n    }\n  },\n  graphData: { nodes: [], connectors: [] },\n  highlightItems: undefined,\n  showDeletePopover: false,\n  deleteProps: undefined\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 'setActiveItem':\n      return {\n        ...state,\n        activeItem: action.payload.target\n      };\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        highlightItems: action.payload.highlightItems\n      };\n    case 'highlight':\n      // minor optimization to avoid unnecessary re-render\n      if (action.payload.hideDeletePopover === !state.showDeletePopover) {\n        return state;\n      }\n\n      return {\n        ...state,\n        highlightItems: action.payload.highlightItems,\n        showDeletePopover: action.payload.hideDeletePopover !== true && state.showDeletePopover\n      };\n    case 'showDeletePopover':\n      return {\n        ...state,\n        showDeletePopover: action.payload.showDeletePopover,\n        deleteProps: action.payload.deleteProps\n      };\n    default:\n      return state;\n  }\n};\n\nconst FlowModeller = ({\n  graphData,\n  highlightData,\n  onNodeActionClick,\n  onNodeAdd,\n  nodeLibrary,\n  onNodeClick,\n  onDelete,\n  actions,\n  readOnly\n}: PropsWithoutRef<FlowModellerProps>) => {\n  const [state, dispatch] = useReducer<Reducer<ModellerState, any>>(reducer, initState);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const [deletePopoverEl, setDeletePopoverEl] = useElement<HTMLElement>(null);\n  const stateRef = useRef<ModellerState>(initState);\n\n  // stateRef always refers to the same state obj\n  // \"fixed\" callbacks can refer to this object whenever\n  // it need the current value.  Note: the callbacks will not\n  // be reactive - they will not re-run the instant state changes,\n  // but they *will* see the current value whenever they do run\n  stateRef.current = state;\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  const closeDeleteModel = () => {\n    // un-highlight the nodes and connectors\n    dispatch({\n      type: 'highlight',\n      payload: {\n        highlightItems: undefined,\n        hideDeletePopover: true\n      }\n    });\n  };\n\n  const onDeleteWrapper = useCallback(\n    (params: ActionParams, e: MouseEvent) => {\n      const result: DeleteNodeOutcome | false = FlowModellerHelper.deleteNode(\n        graphData,\n        params.nodeId\n      );\n\n      if (result) {\n        onDelete?.({ ...params, additionalData: result }, e);\n      } else {\n        dispatch({\n          type: 'showDeletePopover',\n          payload: {\n            showDeletePopover: true,\n            deleteProps: {\n              flowGraphData: graphData,\n              rendererGraphData: stateRef.current.graphData,\n              nodeId: params.nodeId,\n              target: {\n                getBoundingClientRect: () =>\n                  document\n                    .getElementById(`modeller-node-${stateRef.current.deleteProps?.nodeId}`)\n                    ?.getBoundingClientRect()\n              } as PopoverProps['target'],\n              onChange: highlights => {\n                dispatch({\n                  type: 'highlight',\n                  payload: {\n                    highlightItems: highlights\n                  }\n                });\n              },\n              onSubmit: outcome => {\n                // un-highlight the nodes and connectors\n                closeDeleteModel();\n                onDelete?.({ ...params, additionalData: outcome }, e);\n              },\n              onCancel: closeDeleteModel\n            } as ModellerState['deleteProps']\n          }\n        });\n      }\n    },\n    [graphData, state.graphData]\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        data: {\n          onNodeCreate\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        data: {\n          isActive: state.activeItem?.id === node.id,\n          actions,\n          onDelete: onDeleteWrapper,\n          onActionClick: onNodeActionClick,\n          onClick: onNodeClick\n        } as NodeComponentData\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          onNodeCreate\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      }\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  useOuterEvent('mousedown', [deletePopoverEl], closeDeleteModel);\n\n  useEffect(() => {\n    document.addEventListener('keydown', onKeydown);\n\n    return () => {\n      document.removeEventListener('keydown', onKeydown);\n    };\n  }, []);\n\n  const items: NodeLibraryItem[] = nodeLibrary !== undefined ? nodeLibrary : [];\n\n  const ctxValue = useMemo(() => ({ readOnly }), [readOnly]);\n\n  return (\n    <div>\n      <FlowModellerContext.Provider value={ctxValue}>\n        <FlowRenderer\n          graphData={state.graphData}\n          connector={Connector}\n          node={Node}\n          highlights={highlightData ?? state.highlightItems}\n        />\n      </FlowModellerContext.Provider>\n      {state.showDeletePopover && state.deleteProps && (\n        <DeletePopover\n          show={state.showDeletePopover}\n          ref={setDeletePopoverEl}\n          {...state.deleteProps}\n        />\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        position='bottom'\n      />\n    </div>\n  );\n};\n\nexport default FlowModeller;\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlowModeller.types.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAEvF,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,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxD,qBAAqB;IACrB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,iBAAiB;IACjB,aAAa,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IAC5C,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=FlowModeller.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlowModeller.types.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent } from 'react';\n\nimport { Action } from '@pega/cosmos-react-core';\n\nimport { GraphData, ConnectorProps } from './Renderer/Utils/Graph';\nimport { AddNodeHandlerParams, RendererProps } from './Renderer/Renderer.types';\nimport { ActionParams, NodeProps, NodeLibraryItem, NodeType } from './Node/Node.types';\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  /** Callback for node deletion */\n  onDelete?: (param: ActionParams, e: MouseEvent) => void;\n  /** Types of nodes */\n  nodeLibrary: NodeLibraryItem[];\n  /** Highlights */\n  highlightData?: RendererProps['highlights'];\n  /** To make FlowModeller readOnly state */\n  readOnly?: boolean;\n}\n"]}

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { FlowModellerProps } from './FlowModeller.types';
+declare const FlowModellerContext: import("react").Context<Pick<FlowModellerProps, "readOnly">>;
+export default FlowModellerContext;
+//# sourceMappingURL=FlowModellerContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlowModellerContext.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModellerContext.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEzD,QAAA,MAAM,mBAAmB,8DAEvB,CAAC;AAEH,eAAe,mBAAmB,CAAC"}

package/lib/components/FlowModeller/FlowModellerContext.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+const FlowModellerContext = createContext({
+    readOnly: false
+});
+export default FlowModellerContext;
+//# sourceMappingURL=FlowModellerContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlowModellerContext.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModellerContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,MAAM,mBAAmB,GAAG,aAAa,CAAsC;IAC7E,QAAQ,EAAE,KAAK;CAChB,CAAC,CAAC;AAEH,eAAe,mBAAmB,CAAC","sourcesContent":["import { createContext } from 'react';\n\nimport { FlowModellerProps } from './FlowModeller.types';\n\nconst FlowModellerContext = createContext<Pick<FlowModellerProps, 'readOnly'>>({\n  readOnly: false\n});\n\nexport default FlowModellerContext;\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,EACL,eAAe,EAOhB,MAAM,OAAO,CAAC;AA6Bf,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAA2B,MAAM,cAAc,CAAC;AA8DtF,eAAO,MAAM,WAAW,gIAarB,kBAAkB,gBA6HpB,CAAC;AAEF,eAAO,MAAM,SAAS,oBAAqB,gBAAgB,SAAS,CAAC,gBAmBpE,CAAC;AAEF,eAAO,MAAM,OAAO,oBAAqB,gBAAgB,SAAS,CAAC,gBAmBlE,CAAC"}
+{"version":3,"file":"NodeTemplates.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplates.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAQhB,MAAM,OAAO,CAAC;AA8Bf,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAA2B,MAAM,cAAc,CAAC;AA8DtF,eAAO,MAAM,WAAW,gIAarB,kBAAkB,gBA6HpB,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,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useContext } from 'react';
 import { readableColor } from 'polished';
 import { MenuButton, Icon, Flex, Tooltip, useElement, useI18n, cap, Text } from '@pega/cosmos-react-core';
 import { colorMap } from '../../../utils';
+import FlowModellerContext from '../FlowModellerContext';
 import { StyledLabel, StyledCircle, StyledIcon, StyledNodeTemplateHeader, StyledNodeTempleteContent, StyledNodeTemplate, StyledText, StyledTextWithEllipsis, StyledAdditionalData, StyledNodeTemplateFooter, StyledAdditionalDataItem } from './NodeTemplate.styles';
 const MetaListItem = ({ label, value }) => {
     const [nodeAdditionalDataItem, setNodeAdditionalDataItem] = useElement();
@@ -56,6 +57,7 @@ export const DefaultNode = ({ id, label, type, description, additionalData, acti
     const [nodeIcon, setNodeIcon] = useElement();
     const [nodeErrorToolTip, setNodeErrorToolTip] = useElement();
     const color = readableColor(colorMap[type.color]);
+    const { readOnly } = useContext(FlowModellerContext);
     useEffect(() => {
         if (error) {
             setNodeDescription(null);
@@ -66,7 +68,7 @@ export const DefaultNode = ({ id, label, type, description, additionalData, acti
     return (_jsxs(StyledNodeTemplate, { "aria-label": error || label, onClick: (e) => onClick?.(id, e), onKeyDown: handleEnterKeyDown, ref: setNodeErrorToolTip, highlight: error ? true : highlight, error: error, id: `modeller-node-${id}`, ...restProps, children: [_jsxs(Flex, { as: StyledNodeTemplateHeader, container: { alignItems: 'center', pad: 1, justify: 'between' }, children: [_jsxs(Flex, { container: { alignItems: 'center' }, children: [_jsx(StyledIcon, { id: id, style: {
                                     '--bg-color': colorMap[type.color],
                                     '--fg-color': color
-                                }, ref: setNodeIcon, children: _jsx(Icon, { name: type.icon }) }), _jsx(Tooltip, { target: nodeIcon, hideDelay: 'none', children: cap(type.name) }), _jsx(StyledText, { variant: 'h4', ref: setNodeLabel, children: label }), _jsx(Tooltip, { describeTarget: false, target: nodeLabel, hideDelay: 'none', children: label })] }), actionItems && (_jsx(MenuButton, { portal: true, variant: 'simple', text: t('actions'), icon: 'more', iconOnly: true, onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), menu: {
+                                }, ref: setNodeIcon, children: _jsx(Icon, { name: type.icon }) }), _jsx(Tooltip, { target: nodeIcon, hideDelay: 'none', children: cap(type.name) }), _jsx(StyledText, { variant: 'h4', ref: setNodeLabel, children: label }), _jsx(Tooltip, { describeTarget: false, target: nodeLabel, hideDelay: 'none', children: label })] }), !readOnly && 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
                         } }))] }), description && (_jsxs(_Fragment, { children: [_jsx(StyledNodeTempleteContent, { ref: setNodeDescription, children: description }), _jsx(Tooltip, { describeTarget: false, target: nodeDescription, hideDelay: 'none', children: description })] })), additionalData && (_jsx(StyledNodeTemplateFooter, { children: _jsx(MetaList, { metadata: additionalData }) })), error && (_jsx(Tooltip, { target: nodeErrorToolTip, hideDelay: 'none', children: error }))] }));
 };

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 {\n  PropsWithoutRef,\n  CSSProperties,\n  useCallback,\n  MouseEvent,\n  KeyboardEvent,\n  FC,\n  useEffect\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 { colorMap } from '../../../utils';\n\nimport {\n  StyledLabel,\n  StyledCircle,\n  StyledIcon,\n  StyledNodeTemplateHeader,\n  StyledNodeTempleteContent,\n  StyledNodeTemplate,\n  StyledText,\n  StyledTextWithEllipsis,\n  StyledAdditionalData,\n  StyledNodeTemplateFooter,\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 = ({\n  id,\n  label,\n  type,\n  description,\n  additionalData,\n  actions,\n  onActionClick,\n  onClick,\n  onDelete,\n  highlight,\n  error,\n  ...restProps\n}: NodeComponentProps) => {\n  const t = useI18n();\n\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  if (onDelete !== undefined) {\n    actionItems?.push({\n      id: 'flowmodeller-delete-node',\n      primary: t('delete'),\n      onClick: (actionId: string, e: MouseEvent) => {\n        e.stopPropagation();\n        onDelete?.({ 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, e);\n      }\n    },\n    [onClick]\n  );\n\n  const [nodeLabel, setNodeLabel] = useElement();\n  const [nodeDescription, setNodeDescription] = useElement();\n\n  const [nodeIcon, setNodeIcon] = useElement();\n  const [nodeErrorToolTip, setNodeErrorToolTip] = useElement();\n  const color = readableColor(colorMap[type.color]);\n\n  useEffect(() => {\n    if (error) {\n      setNodeDescription(null);\n      setNodeLabel(null);\n      setNodeIcon(null);\n    }\n  }, [error]);\n\n  return (\n    <StyledNodeTemplate\n      aria-label={error || label}\n      onClick={(e: MouseEvent) => onClick?.(id, e)}\n      onKeyDown={handleEnterKeyDown}\n      ref={setNodeErrorToolTip}\n      highlight={error ? true : highlight}\n      error={error}\n      id={`modeller-node-${id}`}\n      {...restProps}\n    >\n      <Flex\n        as={StyledNodeTemplateHeader}\n        container={{ alignItems: 'center', pad: 1, justify: 'between' }}\n      >\n        <Flex container={{ alignItems: 'center' }}>\n          <StyledIcon\n            id={id}\n            style={\n              {\n                '--bg-color': colorMap[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        </Flex>\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          <StyledNodeTempleteContent ref={setNodeDescription}>\n            {description}\n          </StyledNodeTempleteContent>\n          <Tooltip describeTarget={false} target={nodeDescription} hideDelay='none'>\n            {description}\n          </Tooltip>\n        </>\n      )}\n      {additionalData && (\n        <StyledNodeTemplateFooter>\n          <MetaList metadata={additionalData} />\n        </StyledNodeTemplateFooter>\n      )}\n      {error && (\n        <Tooltip target={nodeErrorToolTip} hideDelay='none'>\n          {error}\n        </Tooltip>\n      )}\n    </StyledNodeTemplate>\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': colorMap[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': colorMap[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"]}
+{"version":3,"file":"NodeTemplates.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplates.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,WAAW,EAIX,SAAS,EACT,UAAU,EACX,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EACL,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,UAAU,EACV,OAAO,EACP,GAAG,EACH,IAAI,EACL,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,mBAAmB,MAAM,wBAAwB,CAAC;AAEzD,OAAO,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,wBAAwB,EACxB,yBAAyB,EACzB,kBAAkB,EAClB,UAAU,EACV,sBAAsB,EACtB,oBAAoB,EACpB,wBAAwB,EACxB,wBAAwB,EACzB,MAAM,uBAAuB,CAAC;AAG/B,MAAM,YAAY,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,EAA2B,EAAE,EAAE;IACjE,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,UAAU,EAAE,CAAC;IACzE,OAAO,CACL,8BACE,MAAC,IAAI,IACH,EAAE,EAAE,wBAAwB,EAC5B,SAAS,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,EACnD,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,GAAG,EAAE,yBAAyB,aAE9B,KAAC,sBAAsB,IAAC,EAAE,EAAC,IAAI,YAAE,KAAK,GAA0B,EAChE,KAAC,IAAI,IAAC,IAAI,EAAC,WAAW,EAAC,OAAO,EAAC,WAAW,iBAAa,MAAM,wBAEtD,EACP,KAAC,sBAAsB,IAAC,EAAE,EAAC,IAAI,YAAE,KAAK,GAA0B,IAC3D,EACP,KAAC,OAAO,IAAC,MAAM,EAAE,sBAAsB,EAAE,SAAS,EAAC,MAAM,YACtD,GAAG,KAAK,IAAI,KAAK,EAAE,GACZ,IACT,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAkD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC/E,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,UAAU,EAAE,CAAC;IACjE,IAAI,mBAAmB,GAAG,EAAE,CAAC;IAC7B,QAAQ,EAAE,OAAO,CAAC,CAAC,IAA6B,EAAE,KAAa,EAAE,EAAE;QACjE,IAAI,KAAK,GAAG,CAAC,EAAE;YACb,mBAAmB,IAAI,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK;OAClD,CAAC;SACH;IACH,CAAC,CAAC,CAAC;IACH,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,oBAAoB,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,aACnF,QAAQ,EAAE,GAAG,CAAC,CAAC,IAA6B,EAAE,KAAa,EAAE,EAAE;gBAC9D,IAAI,KAAK,IAAI,CAAC,EAAE;oBACd,OAAO;iBACR;gBACD,OAAO,KAAC,YAAY,OAAmB,IAAI,IAAjB,IAAI,CAAC,EAAE,CAAc,CAAC;YAClD,CAAC,CAAC,EACD,QAAQ,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,CAClC,8BACE,KAAC,IAAI,IACH,EAAE,EAAE,wBAAwB,EAC5B,SAAS,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,EACxB,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAC5B,GAAG,EAAE,qBAAqB,YAE1B,KAAC,sBAAsB,IAAC,EAAE,EAAC,IAAI,YAAE,IAAI,QAAQ,EAAE,MAAM,GAAG,CAAC,EAAE,GAA0B,GAChF,EACN,mBAAmB,IAAI,CACtB,KAAC,OAAO,IAAC,MAAM,EAAE,kBAAkB,EAAE,SAAS,EAAC,MAAM,YAClD,mBAAmB,GACZ,CACX,IACA,CACJ,IACI,CACR,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,EAAE,EACF,KAAK,EACL,IAAI,EACJ,WAAW,EACX,cAAc,EACd,OAAO,EACP,aAAa,EACb,OAAO,EACP,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACO,EAAE,EAAE;IACvB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,WAAW,GAAG,OAAO,EAAE,GAAG,CAAC,UAAU,CAAC,EAAE;QAC5C,OAAO;YACL,EAAE,EAAE,UAAU,CAAC,EAAE;YACjB,OAAO,EAAE,UAAU,CAAC,IAAI;YACxB,OAAO,EAAE,CAAC,QAAgB,EAAE,CAAa,EAAE,EAAE;gBAC3C,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,aAAa,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;YAC/C,CAAC;SACF,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,IAAI,QAAQ,KAAK,SAAS,EAAE;QAC1B,WAAW,EAAE,IAAI,CAAC;YAChB,EAAE,EAAE,0BAA0B;YAC9B,OAAO,EAAE,CAAC,CAAC,QAAQ,CAAC;YACpB,OAAO,EAAE,CAAC,QAAgB,EAAE,CAAa,EAAE,EAAE;gBAC3C,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;YAC1C,CAAC;SACF,CAAC,CAAC;KACJ;IAED,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,CAAgB,EAAE,EAAE;QACnB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE;YACpC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;SAClB;IACH,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,EAAE,CAAC;IAC/C,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,UAAU,EAAE,CAAC;IAE3D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,UAAU,EAAE,CAAC;IAC7C,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,UAAU,EAAE,CAAC;IAC7D,MAAM,KAAK,GAAG,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAClD,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAErD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,EAAE;YACT,kBAAkB,CAAC,IAAI,CAAC,CAAC;YACzB,YAAY,CAAC,IAAI,CAAC,CAAC;YACnB,WAAW,CAAC,IAAI,CAAC,CAAC;SACnB;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,MAAC,kBAAkB,kBACL,KAAK,IAAI,KAAK,EAC1B,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAC5C,SAAS,EAAE,kBAAkB,EAC7B,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACnC,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,iBAAiB,EAAE,EAAE,KACrB,SAAS,aAEb,MAAC,IAAI,IACH,EAAE,EAAE,wBAAwB,EAC5B,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,aAE/D,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,aACvC,KAAC,UAAU,IACT,EAAE,EAAE,EAAE,EACN,KAAK,EACH;oCACE,YAAY,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;oCAClC,YAAY,EAAE,KAAK;iCACH,EAEpB,GAAG,EAAE,WAAW,YAEhB,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,GACd,EACb,KAAC,OAAO,IAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAC,MAAM,YACxC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,GACP,EACV,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,EAAC,GAAG,EAAE,YAAY,YACvC,KAAK,GACK,EACb,KAAC,OAAO,IAAC,cAAc,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,YAChE,KAAK,GACE,IACL,EACN,CAAC,QAAQ,IAAI,WAAW,IAAI,CAC3B,KAAC,UAAU,IACT,MAAM,QACN,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,EAClB,IAAI,EAAC,MAAM,EACX,QAAQ,QACR,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EAC/C,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACpD,IAAI,EAAE;4BACJ,KAAK,EAAE,WAAW;yBACnB,GACD,CACH,IACI,EACN,WAAW,IAAI,CACd,8BACE,KAAC,yBAAyB,IAAC,GAAG,EAAE,kBAAkB,YAC/C,WAAW,GACc,EAC5B,KAAC,OAAO,IAAC,cAAc,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,EAAC,MAAM,YACtE,WAAW,GACJ,IACT,CACJ,EACA,cAAc,IAAI,CACjB,KAAC,wBAAwB,cACvB,KAAC,QAAQ,IAAC,QAAQ,EAAE,cAAc,GAAI,GACb,CAC5B,EACA,KAAK,IAAI,CACR,KAAC,OAAO,IAAC,MAAM,EAAE,gBAAgB,EAAE,SAAS,EAAC,MAAM,YAChD,KAAK,GACE,CACX,IACkB,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAA8B,EAAE,EAAE;IACvE,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,aACzD,KAAC,IAAI,IAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,YAClC,KAAK,GACD,EACP,KAAC,IAAI,IACH,EAAE,EAAE,YAAY,EAChB,KAAK,EACH;oBACE,YAAY,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;iBAClB,EAEpB,QAAQ,EAAC,GAAG,gBACA,KAAK,EACjB,IAAI,EAAC,QAAQ,GACb,IACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAA8B,EAAE,EAAE;IACrE,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,aACzD,KAAC,IAAI,IACH,EAAE,EAAE,YAAY,EAChB,KAAK,EACH;oBACE,YAAY,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;iBAClB,EAEpB,QAAQ,EAAC,GAAG,gBACA,KAAK,EACjB,IAAI,EAAC,QAAQ,GACb,EACF,KAAC,IAAI,IAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,YAClC,KAAK,GACD,IACF,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\n  PropsWithoutRef,\n  CSSProperties,\n  useCallback,\n  MouseEvent,\n  KeyboardEvent,\n  FC,\n  useEffect,\n  useContext\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 { colorMap } from '../../../utils';\nimport FlowModellerContext from '../FlowModellerContext';\n\nimport {\n  StyledLabel,\n  StyledCircle,\n  StyledIcon,\n  StyledNodeTemplateHeader,\n  StyledNodeTempleteContent,\n  StyledNodeTemplate,\n  StyledText,\n  StyledTextWithEllipsis,\n  StyledAdditionalData,\n  StyledNodeTemplateFooter,\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 = ({\n  id,\n  label,\n  type,\n  description,\n  additionalData,\n  actions,\n  onActionClick,\n  onClick,\n  onDelete,\n  highlight,\n  error,\n  ...restProps\n}: NodeComponentProps) => {\n  const t = useI18n();\n\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  if (onDelete !== undefined) {\n    actionItems?.push({\n      id: 'flowmodeller-delete-node',\n      primary: t('delete'),\n      onClick: (actionId: string, e: MouseEvent) => {\n        e.stopPropagation();\n        onDelete?.({ 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, e);\n      }\n    },\n    [onClick]\n  );\n\n  const [nodeLabel, setNodeLabel] = useElement();\n  const [nodeDescription, setNodeDescription] = useElement();\n\n  const [nodeIcon, setNodeIcon] = useElement();\n  const [nodeErrorToolTip, setNodeErrorToolTip] = useElement();\n  const color = readableColor(colorMap[type.color]);\n  const { readOnly } = useContext(FlowModellerContext);\n\n  useEffect(() => {\n    if (error) {\n      setNodeDescription(null);\n      setNodeLabel(null);\n      setNodeIcon(null);\n    }\n  }, [error]);\n\n  return (\n    <StyledNodeTemplate\n      aria-label={error || label}\n      onClick={(e: MouseEvent) => onClick?.(id, e)}\n      onKeyDown={handleEnterKeyDown}\n      ref={setNodeErrorToolTip}\n      highlight={error ? true : highlight}\n      error={error}\n      id={`modeller-node-${id}`}\n      {...restProps}\n    >\n      <Flex\n        as={StyledNodeTemplateHeader}\n        container={{ alignItems: 'center', pad: 1, justify: 'between' }}\n      >\n        <Flex container={{ alignItems: 'center' }}>\n          <StyledIcon\n            id={id}\n            style={\n              {\n                '--bg-color': colorMap[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        </Flex>\n        {!readOnly && 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          <StyledNodeTempleteContent ref={setNodeDescription}>\n            {description}\n          </StyledNodeTempleteContent>\n          <Tooltip describeTarget={false} target={nodeDescription} hideDelay='none'>\n            {description}\n          </Tooltip>\n        </>\n      )}\n      {additionalData && (\n        <StyledNodeTemplateFooter>\n          <MetaList metadata={additionalData} />\n        </StyledNodeTemplateFooter>\n      )}\n      {error && (\n        <Tooltip target={nodeErrorToolTip} hideDelay='none'>\n          {error}\n        </Tooltip>\n      )}\n    </StyledNodeTemplate>\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': colorMap[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': colorMap[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/helper.d.ts

@@ -11,7 +11,10 @@ export interface AddHelperParams {
     getNewConnector?: (fromNodeId: string, toNodeId: string) => ConnectorProps;
 }
 declare const helpers: {
-    addConnector(graphData: GraphData<NodeProps, ConnectorProps>, nodeId: string, label?: string | undefined, getNewConnector?: AddHelperParams['getNewConnector']): GraphData<NodeProps, ConnectorProps<unknown>>;
+    addConnector(graphData: GraphData<NodeProps, ConnectorProps>, nodeId: string, label?: string | undefined, getNewConnector?: AddHelperParams['getNewConnector']): {
+        graphData: GraphData<NodeProps, ConnectorProps<unknown>>;
+        connector: ConnectorProps<unknown>;
+    };
     deleteConnector: (graphData: GraphData<NodeProps, ConnectorProps>, connector: ConnectorProps) => DeleteNodeOutcome;
     addNode: ({ graphData, nodeType, metaData, getNewNode, getNewConnector, connectorsCount }: AddHelperParams) => GraphData<NodeProps, ConnectorProps<unknown>>;
     deleteNode(graphData: GraphData<NodeProps, ConnectorProps>, nodeId: string): DeleteNodeOutcome | false;

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

@@ -1 +1 @@
-{"version":3,"file":"helper.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/helper.ts"],"names":[],"mappings":"AAEA,OAAO,EAAiB,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAClF,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAExD,OAAwB,EAAE,iBAAiB,EAAkB,MAAM,yBAAyB,CAAC;AAE7F,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,QAAQ,CAAC;IACnB,SAAS,EAAE,SAAS,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;IAChD,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,SAAS,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,cAAc,CAAC;CAC5E;AAED,QAAA,MAAM,OAAO;4BAEE,UAAU,SAAS,EAAE,cAAc,CAAC,UACvC,MAAM,gDAEI,eAAe,CAAC,iBAAiB,CAAC;iCAwBzB,UAAU,SAAS,EAAE,cAAc,CAAC,aAAa,cAAc;+FAiDzF,eAAe;0BAgEL,UAAU,SAAS,EAAE,cAAc,CAAC,UACvC,MAAM,GACb,iBAAiB,GAAG,KAAK;CAwC7B,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"helper.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/helper.ts"],"names":[],"mappings":"AAEA,OAAO,EAAiB,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAClF,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAExD,OAAwB,EAAE,iBAAiB,EAAkB,MAAM,yBAAyB,CAAC;AAE7F,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,QAAQ,CAAC;IACnB,SAAS,EAAE,SAAS,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;IAChD,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,SAAS,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,cAAc,CAAC;CAC5E;AAED,QAAA,MAAM,OAAO;4BAEE,UAAU,SAAS,EAAE,cAAc,CAAC,UACvC,MAAM,gDAEI,eAAe,CAAC,iBAAiB,CAAC;;;;iCA2BzB,UAAU,SAAS,EAAE,cAAc,CAAC,aAAa,cAAc;+FAiDzF,eAAe;0BAgEL,UAAU,SAAS,EAAE,cAAc,CAAC,UACvC,MAAM,GACb,iBAAiB,GAAG,KAAK;CAwC7B,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/FlowModeller/helper.js

@@ -6,8 +6,9 @@ const helpers = {
     addConnector(graphData, nodeId, label, getNewConnector) {
         const graph = new DirectedGraph(graphData);
         const convergeData = GraphTraversal.getConvergenceData(graphData, nodeId);
+        let newConnector;
         if (convergeData) {
-            const newConnector = getNewConnector
+            newConnector = getNewConnector
                 ? getNewConnector(nodeId, convergeData.nodeId)
                 : {
                     id: createUID(),
@@ -20,7 +21,10 @@ const helpers = {
         else {
             throw new Error('Invalid node, either the node does not exist or it does not support branches');
         }
-        return graph.getGraphData();
+        return {
+            graphData: graph.getGraphData(),
+            connector: newConnector
+        };
     },
     deleteConnector: (graphData, connector) => {
         const nodeId = connector.fromNodeId;

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

@@ -1 +1 @@
-{"version":3,"file":"helper.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/helper.ts"],"names":[],"mappings":"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","sourcesContent":["import { createUID } from '@pega/cosmos-react-core';\n\nimport { DirectedGraph, GraphData, ConnectorProps } from './Renderer/Utils/Graph';\nimport { AddNodeHandlerParams } from './Renderer/Renderer.types';\nimport { NodeProps, NodeType } from './Node/Node.types';\nimport GraphTraversal from './Renderer/Utils/GraphTraversal';\nimport deleteNodeUtils, { DeleteNodeOutcome, GraphDataAsMap } from './Utils/deleteNodeUtils';\n\nexport interface AddHelperParams {\n  nodeType: NodeType;\n  graphData: GraphData<NodeProps, ConnectorProps>;\n  metaData: AddNodeHandlerParams;\n  connectorsCount?: number;\n  getNewNode?: () => NodeProps;\n  getNewConnector?: (fromNodeId: string, toNodeId: string) => ConnectorProps;\n}\n\nconst helpers = {\n  addConnector(\n    graphData: GraphData<NodeProps, ConnectorProps>,\n    nodeId: string,\n    label?: string,\n    getNewConnector?: AddHelperParams['getNewConnector']\n  ) {\n    const graph = new DirectedGraph<NodeProps, ConnectorProps>(graphData);\n    const convergeData = GraphTraversal.getConvergenceData(graphData, nodeId);\n\n    if (convergeData) {\n      const newConnector = getNewConnector\n        ? getNewConnector(nodeId, convergeData.nodeId)\n        : {\n            id: createUID(),\n            fromNodeId: nodeId,\n            toNodeId: convergeData.nodeId,\n            label: label || ''\n          };\n\n      graph.addConnector(newConnector);\n    } else {\n      throw new Error(\n        'Invalid node, either the node does not exist or it does not support branches'\n      );\n    }\n\n    return graph.getGraphData();\n  },\n  deleteConnector: (graphData: GraphData<NodeProps, ConnectorProps>, connector: ConnectorProps) => {\n    const nodeId = connector.fromNodeId;\n\n    const graph = new DirectedGraph(graphData);\n    const deleteOptionsResult = deleteNodeUtils.getDeleteNodeOptions(graph, nodeId);\n    const deleteOptions = deleteOptionsResult!.options;\n    let targetBranch = null;\n    let itemsToDelete: GraphDataAsMap = deleteOptionsResult!.allItems;\n    targetBranch = deleteOptions.find(current => {\n      if (connector.id === current.connector.id) {\n        return true;\n      }\n\n      return false;\n    });\n    if (targetBranch) {\n      itemsToDelete = targetBranch?.pathItems;\n    }\n    const resultGraphData = graph.getGraphData();\n    // filter the highlighted nodes, including the selected node\n    const nodes = resultGraphData.nodes.filter(item => {\n      return itemsToDelete.nodes[item.id] === undefined;\n    });\n    // filter the highlighted connectors\n    const connectors = resultGraphData.connectors.filter(item => {\n      // if not in items to delete, add to list\n      if (itemsToDelete.connectors[item.id] === undefined) {\n        return true;\n      }\n\n      return false;\n    });\n\n    const outcome: DeleteNodeOutcome = {\n      graphData: {\n        nodes: nodes as NodeProps[],\n        connectors\n      },\n      deletes: itemsToDelete\n    };\n    return outcome;\n  },\n  addNode: ({\n    graphData,\n    nodeType,\n    metaData,\n    getNewNode,\n    getNewConnector,\n    connectorsCount\n  }: AddHelperParams) => {\n    const graph = new DirectedGraph(graphData);\n\n    const newNode = getNewNode\n      ? getNewNode()\n      : {\n          ...nodeType.defaults.node,\n          id: createUID(),\n          type: nodeType\n        };\n\n    // add new node\n    graph.addNode(newNode);\n\n    let toNodeId = '';\n    if (metaData.refType === 'connector') {\n      if (!Array.isArray(metaData.refId)) {\n        metaData.refId = [metaData.refId];\n      }\n\n      metaData.refId.forEach(conId => {\n        const refConnector = graph.getConnector(conId);\n\n        // backup current connectors toNodeId\n        toNodeId = refConnector.toNodeId;\n\n        // update the actual connector\n        graph.setConnector(conId, {\n          toNodeId: newNode.id\n        });\n      });\n    } else if (metaData.refType === 'node') {\n      toNodeId = metaData.refId as string;\n\n      // iterate and update all in-connectors to point to the new node\n      graph.getInConnectors(metaData.refId as string).forEach(con => {\n        graph.setConnector(con.id, {\n          toNodeId: newNode.id\n        });\n      });\n    }\n\n    let minConnectors = 1;\n    if (connectorsCount !== undefined) {\n      minConnectors = connectorsCount;\n    } else {\n      minConnectors = nodeType.minConnectors !== undefined ? nodeType.minConnectors : 1;\n    }\n\n    for (let i = 0; i < minConnectors; i += 1) {\n      const newConnector = getNewConnector\n        ? getNewConnector(newNode.id, toNodeId)\n        : {\n            id: createUID(),\n            fromNodeId: newNode.id,\n            toNodeId,\n            label: nodeType.defaults?.connector[i].label\n          };\n      graph.addConnector(newConnector);\n    }\n    // return the updated graphData\n    return graph.getGraphData();\n  },\n  deleteNode(\n    graphData: GraphData<NodeProps, ConnectorProps>,\n    nodeId: string\n  ): DeleteNodeOutcome | false {\n    const graph = new DirectedGraph<NodeProps, ConnectorProps>(graphData);\n    const outConnectors = graph.getOutConnectors(nodeId);\n\n    if (outConnectors.length > 1) {\n      return false;\n    }\n\n    const inConnectors = graph.getInConnectors(nodeId);\n\n    const connectorUpdates: ConnectorProps[] = [];\n\n    inConnectors.forEach(con => {\n      graph.setConnector(con.id, {\n        toNodeId: outConnectors[0].toNodeId\n      });\n\n      connectorUpdates.push(con);\n    });\n\n    graph.removeConnector(outConnectors[0].id);\n\n    const node = graph.getNode(nodeId);\n    graph.deleteNode(nodeId, true);\n\n    const outcome: DeleteNodeOutcome = {\n      graphData: graph.getGraphData(),\n      deletes: {\n        nodes: {\n          [nodeId]: node\n        },\n        connectors: {}\n      },\n      updates: {\n        connectors: connectorUpdates\n      }\n    };\n\n    return outcome;\n  }\n};\n\nexport default helpers;\n"]}
+{"version":3,"file":"helper.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/helper.ts"],"names":[],"mappings":"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","sourcesContent":["import { createUID } from '@pega/cosmos-react-core';\n\nimport { DirectedGraph, GraphData, ConnectorProps } from './Renderer/Utils/Graph';\nimport { AddNodeHandlerParams } from './Renderer/Renderer.types';\nimport { NodeProps, NodeType } from './Node/Node.types';\nimport GraphTraversal from './Renderer/Utils/GraphTraversal';\nimport deleteNodeUtils, { DeleteNodeOutcome, GraphDataAsMap } from './Utils/deleteNodeUtils';\n\nexport interface AddHelperParams {\n  nodeType: NodeType;\n  graphData: GraphData<NodeProps, ConnectorProps>;\n  metaData: AddNodeHandlerParams;\n  connectorsCount?: number;\n  getNewNode?: () => NodeProps;\n  getNewConnector?: (fromNodeId: string, toNodeId: string) => ConnectorProps;\n}\n\nconst helpers = {\n  addConnector(\n    graphData: GraphData<NodeProps, ConnectorProps>,\n    nodeId: string,\n    label?: string,\n    getNewConnector?: AddHelperParams['getNewConnector']\n  ) {\n    const graph = new DirectedGraph<NodeProps, ConnectorProps>(graphData);\n    const convergeData = GraphTraversal.getConvergenceData(graphData, nodeId);\n    let newConnector;\n    if (convergeData) {\n      newConnector = getNewConnector\n        ? getNewConnector(nodeId, convergeData.nodeId)\n        : {\n            id: createUID(),\n            fromNodeId: nodeId,\n            toNodeId: convergeData.nodeId,\n            label: label || ''\n          };\n\n      graph.addConnector(newConnector);\n    } else {\n      throw new Error(\n        'Invalid node, either the node does not exist or it does not support branches'\n      );\n    }\n\n    return {\n      graphData: graph.getGraphData(),\n      connector: newConnector\n    };\n  },\n  deleteConnector: (graphData: GraphData<NodeProps, ConnectorProps>, connector: ConnectorProps) => {\n    const nodeId = connector.fromNodeId;\n\n    const graph = new DirectedGraph(graphData);\n    const deleteOptionsResult = deleteNodeUtils.getDeleteNodeOptions(graph, nodeId);\n    const deleteOptions = deleteOptionsResult!.options;\n    let targetBranch = null;\n    let itemsToDelete: GraphDataAsMap = deleteOptionsResult!.allItems;\n    targetBranch = deleteOptions.find(current => {\n      if (connector.id === current.connector.id) {\n        return true;\n      }\n\n      return false;\n    });\n    if (targetBranch) {\n      itemsToDelete = targetBranch?.pathItems;\n    }\n    const resultGraphData = graph.getGraphData();\n    // filter the highlighted nodes, including the selected node\n    const nodes = resultGraphData.nodes.filter(item => {\n      return itemsToDelete.nodes[item.id] === undefined;\n    });\n    // filter the highlighted connectors\n    const connectors = resultGraphData.connectors.filter(item => {\n      // if not in items to delete, add to list\n      if (itemsToDelete.connectors[item.id] === undefined) {\n        return true;\n      }\n\n      return false;\n    });\n\n    const outcome: DeleteNodeOutcome = {\n      graphData: {\n        nodes: nodes as NodeProps[],\n        connectors\n      },\n      deletes: itemsToDelete\n    };\n    return outcome;\n  },\n  addNode: ({\n    graphData,\n    nodeType,\n    metaData,\n    getNewNode,\n    getNewConnector,\n    connectorsCount\n  }: AddHelperParams) => {\n    const graph = new DirectedGraph(graphData);\n\n    const newNode = getNewNode\n      ? getNewNode()\n      : {\n          ...nodeType.defaults.node,\n          id: createUID(),\n          type: nodeType\n        };\n\n    // add new node\n    graph.addNode(newNode);\n\n    let toNodeId = '';\n    if (metaData.refType === 'connector') {\n      if (!Array.isArray(metaData.refId)) {\n        metaData.refId = [metaData.refId];\n      }\n\n      metaData.refId.forEach(conId => {\n        const refConnector = graph.getConnector(conId);\n\n        // backup current connectors toNodeId\n        toNodeId = refConnector.toNodeId;\n\n        // update the actual connector\n        graph.setConnector(conId, {\n          toNodeId: newNode.id\n        });\n      });\n    } else if (metaData.refType === 'node') {\n      toNodeId = metaData.refId as string;\n\n      // iterate and update all in-connectors to point to the new node\n      graph.getInConnectors(metaData.refId as string).forEach(con => {\n        graph.setConnector(con.id, {\n          toNodeId: newNode.id\n        });\n      });\n    }\n\n    let minConnectors = 1;\n    if (connectorsCount !== undefined) {\n      minConnectors = connectorsCount;\n    } else {\n      minConnectors = nodeType.minConnectors !== undefined ? nodeType.minConnectors : 1;\n    }\n\n    for (let i = 0; i < minConnectors; i += 1) {\n      const newConnector = getNewConnector\n        ? getNewConnector(newNode.id, toNodeId)\n        : {\n            id: createUID(),\n            fromNodeId: newNode.id,\n            toNodeId,\n            label: nodeType.defaults?.connector[i].label\n          };\n      graph.addConnector(newConnector);\n    }\n    // return the updated graphData\n    return graph.getGraphData();\n  },\n  deleteNode(\n    graphData: GraphData<NodeProps, ConnectorProps>,\n    nodeId: string\n  ): DeleteNodeOutcome | false {\n    const graph = new DirectedGraph<NodeProps, ConnectorProps>(graphData);\n    const outConnectors = graph.getOutConnectors(nodeId);\n\n    if (outConnectors.length > 1) {\n      return false;\n    }\n\n    const inConnectors = graph.getInConnectors(nodeId);\n\n    const connectorUpdates: ConnectorProps[] = [];\n\n    inConnectors.forEach(con => {\n      graph.setConnector(con.id, {\n        toNodeId: outConnectors[0].toNodeId\n      });\n\n      connectorUpdates.push(con);\n    });\n\n    graph.removeConnector(outConnectors[0].id);\n\n    const node = graph.getNode(nodeId);\n    graph.deleteNode(nodeId, true);\n\n    const outcome: DeleteNodeOutcome = {\n      graphData: graph.getGraphData(),\n      deletes: {\n        nodes: {\n          [nodeId]: node\n        },\n        connectors: {}\n      },\n      updates: {\n        connectors: connectorUpdates\n      }\n    };\n\n    return outcome;\n  }\n};\n\nexport default helpers;\n"]}

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

@@ -1,4 +1,5 @@
-export { default, FlowModellerProps } from './FlowModeller';
+export { default } from './FlowModeller';
+export { FlowModellerProps } from './FlowModeller.types';
 export { ActionParams, NodeProps, NodeType, NodeLibraryItem, START_NODETYPE, STOP_NODETYPE } from './Node/Node.types';
 export { default as FlowRenderer } from './Renderer/Renderer';
 export { RendererProps, RendererConnectorProps, RendererNodeProps, AddNodeHandlerParams } from './Renderer/Renderer.types';

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

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

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

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

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

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

package/lib/components/ItemLibrary/ItemLibrary.js

@@ -17,9 +17,6 @@ export const StyledIcon = styled.div(({ theme }) => {
   `;
 });
 StyledIcon.defaultProps = defaultThemeProp;
-const StyledPopover = styled(Popover) `
-  min-width: 40ch;
-`;
 const ItemLibrary = forwardRef(({ show, target, items, onClick, placeholder, position = 'bottom-start' }, ref) => {
     const [search, setSearch] = useState('');
     const searchEleRef = useRef(null);
@@ -59,7 +56,7 @@ const ItemLibrary = forwardRef(({ show, target, items, onClick, placeholder, pos
             onClick(selectedNode);
         }
     }, [onClick]);
-    return (_jsx(_Fragment, { children: show && (_jsx(StyledPopover, { show: show, placement: position, target: target, ref: ref, children: _jsx(Menu, { items: itemsToRender, onItemClick: onItemSelect, header: _jsx(SearchInput, { ref: searchEleRef, onSearchChange: setSearch, value: search, searchInputAriaLabel: placeholder, placeholder: placeholder }), focusControlEl: searchEleRef.current || undefined }) })) }));
+    return (_jsx(_Fragment, { children: show && (_jsx(Popover, { show: show, placement: position, target: target, ref: ref, children: _jsx(Menu, { items: itemsToRender, onItemClick: onItemSelect, header: _jsx(SearchInput, { ref: searchEleRef, onSearchChange: setSearch, value: search, searchInputAriaLabel: placeholder, placeholder: placeholder }), focusControlEl: searchEleRef.current || undefined }) })) }));
 });
 export default ItemLibrary;
 //# sourceMappingURL=ItemLibrary.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ItemLibrary.js","sourceRoot":"","sources":["../../../src/components/ItemLibrary/ItemLibrary.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  CSSProperties\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  SearchInputProps,\n  ForwardProps,\n  Icon,\n  Menu,\n  MenuGroupProps,\n  menuHelpers,\n  MenuItemProps,\n  Popover,\n  SearchInput,\n  cap,\n  createStringMatcher,\n  defaultThemeProp,\n  PopoverProps\n} from '@pega/cosmos-react-core';\n\nimport { colorMap, ColorName } from '../../utils';\n\nexport interface LibraryItem extends MenuItemProps {\n  id: string;\n  type: ItemVisual;\n  items?: LibraryItem[];\n}\nexport interface ItemVisual {\n  color: ColorName;\n  icon: string;\n}\nexport interface ItemLibraryProps<T extends LibraryItem = LibraryItem> {\n  show: boolean;\n  target: HTMLElement | null;\n  items: T[];\n  onClick?: (libItem: T) => void;\n  ref?: Ref<HTMLDivElement>;\n  placeholder?: SearchInputProps['placeholder'];\n  position?: PopoverProps['placement'];\n}\n\nexport const StyledIcon = styled.div(({ theme }) => {\n  return css`\n    min-height: 2rem;\n    min-width: 2rem;\n    padding: calc(0.5 * ${theme.base.spacing});\n    margin-inline-end: ${theme.base.spacing};\n    text-align: center;\n    background-color: var(--bg-color);\n    color: var(--fg-color);\n    border-radius: ${theme.base['border-radius']};\n  `;\n});\n\nStyledIcon.defaultProps = defaultThemeProp;\n\nconst StyledPopover: typeof Popover = styled(Popover)`\n  min-width: 40ch;\n`;\n\nconst ItemLibrary: FC<ItemLibraryProps & ForwardProps> = forwardRef(\n  (\n    {\n      show,\n      target,\n      items,\n      onClick,\n      placeholder,\n      position = 'bottom-start'\n    }: PropsWithoutRef<ItemLibraryProps>,\n    ref: ItemLibraryProps['ref']\n  ) => {\n    const [search, setSearch] = useState('');\n\n    const searchEleRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n      if (show) {\n        setSearch('');\n        searchEleRef?.current?.focus();\n      }\n    }, [show, searchEleRef.current]);\n\n    const searchRegex = useMemo(\n      () => (search ? createStringMatcher(cap(search), 'contains', '') : null),\n      [search]\n    );\n\n    const itemsToRender: (MenuItemProps | MenuGroupProps)[] = useMemo(() => {\n      return menuHelpers.mapTree(\n        searchRegex\n          ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n              return searchRegex.test(primary);\n            })\n          : items,\n        node => {\n          let selectable = false;\n          if (!node.items) {\n            selectable = true;\n          }\n\n          const nodeItem: LibraryItem = node as LibraryItem;\n          return {\n            ...node,\n            visual: nodeItem.type ? (\n              <StyledIcon\n                id={node.id}\n                style={\n                  {\n                    '--bg-color': colorMap[nodeItem.type.color],\n                    '--fg-color': readableColor(colorMap[nodeItem.type.color])\n                  } as CSSProperties\n                }\n              >\n                <Icon name={nodeItem.type.icon} />\n              </StyledIcon>\n            ) : undefined,\n            count: node.items ? node.items.length : undefined,\n            secondary: node.secondary,\n            selected: selectable ? !!node.selected : undefined\n          };\n        }\n      );\n    }, [items, searchRegex]);\n\n    const onItemSelect = useCallback(\n      (id: MenuItemProps['id']) => {\n        const selectedNode = menuHelpers.getItem(items, id) as LibraryItem;\n        if (onClick) {\n          onClick(selectedNode);\n        }\n      },\n      [onClick]\n    );\n    return (\n      <>\n        {show && (\n          <StyledPopover show={show} placement={position} target={target} ref={ref}>\n            <Menu\n              items={itemsToRender}\n              onItemClick={onItemSelect}\n              header={\n                <SearchInput\n                  ref={searchEleRef}\n                  onSearchChange={setSearch}\n                  value={search}\n                  searchInputAriaLabel={placeholder}\n                  placeholder={placeholder}\n                />\n              }\n              focusControlEl={searchEleRef.current || undefined}\n            />\n          </StyledPopover>\n        )}\n      </>\n    );\n  }\n);\n\nexport default ItemLibrary;\n"]}
+{"version":3,"file":"ItemLibrary.js","sourceRoot":"","sources":["../../../src/components/ItemLibrary/ItemLibrary.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  CSSProperties\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  SearchInputProps,\n  ForwardProps,\n  Icon,\n  Menu,\n  MenuGroupProps,\n  menuHelpers,\n  MenuItemProps,\n  Popover,\n  SearchInput,\n  cap,\n  createStringMatcher,\n  defaultThemeProp,\n  PopoverProps\n} from '@pega/cosmos-react-core';\n\nimport { colorMap, ColorName } from '../../utils';\n\nexport interface LibraryItem extends MenuItemProps {\n  id: string;\n  type: ItemVisual;\n  items?: LibraryItem[];\n}\nexport interface ItemVisual {\n  color: ColorName;\n  icon: string;\n}\nexport interface ItemLibraryProps<T extends LibraryItem = LibraryItem> {\n  show: boolean;\n  target: HTMLElement | null;\n  items: T[];\n  onClick?: (libItem: T) => void;\n  ref?: Ref<HTMLDivElement>;\n  placeholder?: SearchInputProps['placeholder'];\n  position?: PopoverProps['placement'];\n}\n\nexport const StyledIcon = styled.div(({ theme }) => {\n  return css`\n    min-height: 2rem;\n    min-width: 2rem;\n    padding: calc(0.5 * ${theme.base.spacing});\n    margin-inline-end: ${theme.base.spacing};\n    text-align: center;\n    background-color: var(--bg-color);\n    color: var(--fg-color);\n    border-radius: ${theme.base['border-radius']};\n  `;\n});\n\nStyledIcon.defaultProps = defaultThemeProp;\n\nconst ItemLibrary: FC<ItemLibraryProps & ForwardProps> = forwardRef(\n  (\n    {\n      show,\n      target,\n      items,\n      onClick,\n      placeholder,\n      position = 'bottom-start'\n    }: PropsWithoutRef<ItemLibraryProps>,\n    ref: ItemLibraryProps['ref']\n  ) => {\n    const [search, setSearch] = useState('');\n\n    const searchEleRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n      if (show) {\n        setSearch('');\n        searchEleRef?.current?.focus();\n      }\n    }, [show, searchEleRef.current]);\n\n    const searchRegex = useMemo(\n      () => (search ? createStringMatcher(cap(search), 'contains', '') : null),\n      [search]\n    );\n\n    const itemsToRender: (MenuItemProps | MenuGroupProps)[] = useMemo(() => {\n      return menuHelpers.mapTree(\n        searchRegex\n          ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n              return searchRegex.test(primary);\n            })\n          : items,\n        node => {\n          let selectable = false;\n          if (!node.items) {\n            selectable = true;\n          }\n\n          const nodeItem: LibraryItem = node as LibraryItem;\n          return {\n            ...node,\n            visual: nodeItem.type ? (\n              <StyledIcon\n                id={node.id}\n                style={\n                  {\n                    '--bg-color': colorMap[nodeItem.type.color],\n                    '--fg-color': readableColor(colorMap[nodeItem.type.color])\n                  } as CSSProperties\n                }\n              >\n                <Icon name={nodeItem.type.icon} />\n              </StyledIcon>\n            ) : undefined,\n            count: node.items ? node.items.length : undefined,\n            secondary: node.secondary,\n            selected: selectable ? !!node.selected : undefined\n          };\n        }\n      );\n    }, [items, searchRegex]);\n\n    const onItemSelect = useCallback(\n      (id: MenuItemProps['id']) => {\n        const selectedNode = menuHelpers.getItem(items, id) as LibraryItem;\n        if (onClick) {\n          onClick(selectedNode);\n        }\n      },\n      [onClick]\n    );\n\n    return (\n      <>\n        {show && (\n          <Popover show={show} placement={position} target={target} ref={ref}>\n            <Menu\n              items={itemsToRender}\n              onItemClick={onItemSelect}\n              header={\n                <SearchInput\n                  ref={searchEleRef}\n                  onSearchChange={setSearch}\n                  value={search}\n                  searchInputAriaLabel={placeholder}\n                  placeholder={placeholder}\n                />\n              }\n              focusControlEl={searchEleRef.current || undefined}\n            />\n          </Popover>\n        )}\n      </>\n    );\n  }\n);\n\nexport default ItemLibrary;\n"]}

package/lib/components/ObjectPreview/ObjectPreview.d.ts

@@ -4,7 +4,7 @@ import { PageHeaderProps } from '@pega/cosmos-react-build/lib/components/PageTem
 export interface ObjectPreviewProps extends Pick<DrawerProps, 'onAfterOpen' | 'onAfterClose' | 'onBeforeOpen' | 'onBeforeClose'> {
     open?: boolean;
     header: OmitStrict<PageHeaderProps, 'status'>;
-    primaryAction: Action;
+    primaryAction?: Action;
     secondaryAction?: Action;
     additionalActions?: ActionsProps;
     content: ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"ObjectPreview.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectPreview/ObjectPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAEF,eAAe,EACf,SAAS,EACT,GAAG,EAIJ,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,MAAM,EAEN,YAAY,EAGZ,YAAY,EAGZ,UAAU,EAIV,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,eAAe,EAGhB,MAAM,qEAAqE,CAAC;AAE7E,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,aAAa,GAAG,cAAc,GAAG,cAAc,GAAG,eAAe,CAAC;IAC5F,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,UAAU,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;IAC9C,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,YAAY,CAAC;IACjC,OAAO,EAAE,SAAS,CAAC;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AA+CD,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,GAAG,YAAY,CAyCzE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ObjectPreview.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectPreview/ObjectPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAEF,eAAe,EACf,SAAS,EACT,GAAG,EAIJ,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,MAAM,EAEN,YAAY,EAGZ,YAAY,EAGZ,UAAU,EAIV,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,eAAe,EAGhB,MAAM,qEAAqE,CAAC;AAE7E,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,aAAa,GAAG,cAAc,GAAG,cAAc,GAAG,eAAe,CAAC;IAC5F,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,UAAU,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;IAC9C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,YAAY,CAAC;IACjC,OAAO,EAAE,SAAS,CAAC;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAiDD,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,GAAG,YAAY,CAyCzE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/ObjectPreview/ObjectPreview.js

@@ -9,7 +9,7 @@ const StyledObjectPreview = styled(Drawer) `
 `;
 const PreviewHeader = ({ header, primaryAction, secondaryAction, additionalActions, onDismiss, dismissButtonRef }) => {
     const t = useI18n();
-    return (_jsxs(Flex, { container: { direction: 'column', rowGap: 1 }, children: [_jsxs(Flex, { container: { justify: 'between' }, children: [_jsx(Button, { icon: true, variant: 'simple', ref: dismissButtonRef, label: t('dismiss_label_a11y'), onClick: onDismiss, children: _jsx(Icon, { name: 'times' }) }), _jsxs(Flex, { container: true, children: [secondaryAction && (_jsx(Button, { onClick: secondaryAction.onClick, children: secondaryAction.text })), _jsx(Button, { variant: 'primary', onClick: primaryAction.onClick, children: primaryAction.text }), additionalActions && _jsx(Actions, { ...additionalActions })] })] }), _jsx(PageHeader, { ...header, titleTag: 'h2' })] }));
+    return (_jsxs(Flex, { container: { direction: 'column', rowGap: 1 }, children: [_jsxs(Flex, { container: { justify: 'between' }, children: [_jsx(Button, { icon: true, variant: 'simple', ref: dismissButtonRef, label: t('dismiss_label_a11y'), onClick: onDismiss, children: _jsx(Icon, { name: 'times' }) }), _jsxs(Flex, { container: true, children: [secondaryAction && (_jsx(Button, { onClick: secondaryAction.onClick, children: secondaryAction.text })), primaryAction && (_jsx(Button, { variant: 'primary', onClick: primaryAction.onClick, children: primaryAction.text })), additionalActions && _jsx(Actions, { ...additionalActions })] })] }), _jsx(PageHeader, { ...header, titleTag: 'h2' })] }));
 };
 const ObjectPreview = forwardRef(({ content, header, open, onAfterOpen, onAfterClose, onBeforeOpen, onBeforeClose, ...restprops }, ref) => {
     const contentRef = useConsolidatedRef(ref);

package/lib/components/ObjectPreview/ObjectPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectPreview.js","sourceRoot":"","sources":["../../../src/components/ObjectPreview/ObjectPreview.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  forwardRef,\n  PropsWithoutRef,\n  ReactNode,\n  Ref,\n  useRef,\n  useEffect,\n  RefObject\n} from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Action,\n  Actions,\n  ActionsProps,\n  Button,\n  Flex,\n  ForwardProps,\n  Icon,\n  OneColumnPage,\n  OmitStrict,\n  Drawer,\n  useI18n,\n  useConsolidatedRef,\n  DrawerProps\n} from '@pega/cosmos-react-core';\nimport {\n  PageHeaderProps,\n  PageHeader,\n  StyledPage\n} from '@pega/cosmos-react-build/lib/components/PageTemplates/PageTemplates';\n\nexport interface ObjectPreviewProps\n  extends Pick<DrawerProps, 'onAfterOpen' | 'onAfterClose' | 'onBeforeOpen' | 'onBeforeClose'> {\n  open?: boolean;\n  header: OmitStrict<PageHeaderProps, 'status'>;\n  primaryAction: Action;\n  secondaryAction?: Action;\n  additionalActions?: ActionsProps;\n  content: ReactNode;\n  onDismiss: () => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledObjectPreview = styled(Drawer)`\n  height: calc(100vh - 3rem);\n  top: 3rem;\n`;\n\nconst PreviewHeader: FC<\n  OmitStrict<ObjectPreviewProps, 'ref' | 'content' | 'open'> & {\n    dismissButtonRef: RefObject<HTMLButtonElement>;\n  }\n> = ({\n  header,\n  primaryAction,\n  secondaryAction,\n  additionalActions,\n  onDismiss,\n  dismissButtonRef\n}) => {\n  const t = useI18n();\n  return (\n    <Flex container={{ direction: 'column', rowGap: 1 }}>\n      <Flex container={{ justify: 'between' }}>\n        <Button\n          icon\n          variant='simple'\n          ref={dismissButtonRef}\n          label={t('dismiss_label_a11y')}\n          onClick={onDismiss}\n        >\n          <Icon name='times' />\n        </Button>\n        <Flex container>\n          {secondaryAction && (\n            <Button onClick={secondaryAction.onClick}>{secondaryAction.text}</Button>\n          )}\n          <Button variant='primary' onClick={primaryAction.onClick}>\n            {primaryAction.text}\n          </Button>\n          {additionalActions && <Actions {...additionalActions} />}\n        </Flex>\n      </Flex>\n      <PageHeader {...header} titleTag='h2' />\n    </Flex>\n  );\n};\n\nconst ObjectPreview: FC<PropsWithoutRef<ObjectPreviewProps> & ForwardProps> = forwardRef(\n  (\n    { content, header, open, onAfterOpen, onAfterClose, onBeforeOpen, onBeforeClose, ...restprops },\n    ref: ObjectPreviewProps['ref']\n  ) => {\n    const contentRef = useConsolidatedRef<HTMLDivElement>(ref);\n    const dismissButtonRef = useRef<HTMLButtonElement>(null);\n\n    useEffect(() => {\n      if (open && contentRef.current) {\n        contentRef.current?.querySelector('button')?.focus();\n      }\n    }, [open]);\n\n    return (\n      <StyledObjectPreview\n        ref={contentRef}\n        open={!!open}\n        nullWhenClosed\n        position='fixed'\n        size='30%'\n        shadow\n        placement='right'\n        onAfterOpen={onAfterOpen}\n        onAfterClose={onAfterClose}\n        onBeforeOpen={onBeforeOpen}\n        onBeforeClose={onBeforeClose}\n      >\n        <OneColumnPage\n          ref={contentRef}\n          title={header.title}\n          as={StyledPage}\n          header={\n            <PreviewHeader dismissButtonRef={dismissButtonRef} header={header} {...restprops} />\n          }\n          scrollContent\n          a={content}\n        />\n      </StyledObjectPreview>\n    );\n  }\n);\n\nexport default ObjectPreview;\n"]}
+{"version":3,"file":"ObjectPreview.js","sourceRoot":"","sources":["../../../src/components/ObjectPreview/ObjectPreview.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  forwardRef,\n  PropsWithoutRef,\n  ReactNode,\n  Ref,\n  useRef,\n  useEffect,\n  RefObject\n} from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Action,\n  Actions,\n  ActionsProps,\n  Button,\n  Flex,\n  ForwardProps,\n  Icon,\n  OneColumnPage,\n  OmitStrict,\n  Drawer,\n  useI18n,\n  useConsolidatedRef,\n  DrawerProps\n} from '@pega/cosmos-react-core';\nimport {\n  PageHeaderProps,\n  PageHeader,\n  StyledPage\n} from '@pega/cosmos-react-build/lib/components/PageTemplates/PageTemplates';\n\nexport interface ObjectPreviewProps\n  extends Pick<DrawerProps, 'onAfterOpen' | 'onAfterClose' | 'onBeforeOpen' | 'onBeforeClose'> {\n  open?: boolean;\n  header: OmitStrict<PageHeaderProps, 'status'>;\n  primaryAction?: Action;\n  secondaryAction?: Action;\n  additionalActions?: ActionsProps;\n  content: ReactNode;\n  onDismiss: () => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledObjectPreview = styled(Drawer)`\n  height: calc(100vh - 3rem);\n  top: 3rem;\n`;\n\nconst PreviewHeader: FC<\n  OmitStrict<ObjectPreviewProps, 'ref' | 'content' | 'open'> & {\n    dismissButtonRef: RefObject<HTMLButtonElement>;\n  }\n> = ({\n  header,\n  primaryAction,\n  secondaryAction,\n  additionalActions,\n  onDismiss,\n  dismissButtonRef\n}) => {\n  const t = useI18n();\n  return (\n    <Flex container={{ direction: 'column', rowGap: 1 }}>\n      <Flex container={{ justify: 'between' }}>\n        <Button\n          icon\n          variant='simple'\n          ref={dismissButtonRef}\n          label={t('dismiss_label_a11y')}\n          onClick={onDismiss}\n        >\n          <Icon name='times' />\n        </Button>\n        <Flex container>\n          {secondaryAction && (\n            <Button onClick={secondaryAction.onClick}>{secondaryAction.text}</Button>\n          )}\n          {primaryAction && (\n            <Button variant='primary' onClick={primaryAction.onClick}>\n              {primaryAction.text}\n            </Button>\n          )}\n          {additionalActions && <Actions {...additionalActions} />}\n        </Flex>\n      </Flex>\n      <PageHeader {...header} titleTag='h2' />\n    </Flex>\n  );\n};\n\nconst ObjectPreview: FC<PropsWithoutRef<ObjectPreviewProps> & ForwardProps> = forwardRef(\n  (\n    { content, header, open, onAfterOpen, onAfterClose, onBeforeOpen, onBeforeClose, ...restprops },\n    ref: ObjectPreviewProps['ref']\n  ) => {\n    const contentRef = useConsolidatedRef<HTMLDivElement>(ref);\n    const dismissButtonRef = useRef<HTMLButtonElement>(null);\n\n    useEffect(() => {\n      if (open && contentRef.current) {\n        contentRef.current?.querySelector('button')?.focus();\n      }\n    }, [open]);\n\n    return (\n      <StyledObjectPreview\n        ref={contentRef}\n        open={!!open}\n        nullWhenClosed\n        position='fixed'\n        size='30%'\n        shadow\n        placement='right'\n        onAfterOpen={onAfterOpen}\n        onAfterClose={onAfterClose}\n        onBeforeOpen={onBeforeOpen}\n        onBeforeClose={onBeforeClose}\n      >\n        <OneColumnPage\n          ref={contentRef}\n          title={header.title}\n          as={StyledPage}\n          header={\n            <PreviewHeader dismissButtonRef={dismissButtonRef} header={header} {...restprops} />\n          }\n          scrollContent\n          a={content}\n        />\n      </StyledObjectPreview>\n    );\n  }\n);\n\nexport default ObjectPreview;\n"]}

package/lib/components/PageTemplates/PageTemplates.js

@@ -4,7 +4,7 @@ import styled, { css } from 'styled-components';
 import { OneColumnPage as CoreOneColumnPage, TabbedPage as CoreTabbedPage, Flex, Status, SummaryItem, Text, Button, Popover, FieldValueList, Icon, defaultThemeProp, useI18n, useDirection, useElement, useOuterEvent, StyledSummaryItemActions, registerIcon, StyledRegion, MetaList, StyledBreadcrumbs, StyledPageHeader } from '@pega/cosmos-react-core';
 import * as nodesDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/nodes-down.icon';
 import * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';
-import { StyledForm } from '@pega/cosmos-react-core/lib/components/Form/Form';
+import { StyledForm } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm';
 import { StyledWorkbench } from '../Workbench/Workbench.styles';
 registerIcon(nodesDownIcon, informationIcon);
 const StyledTextWithEllipsis = styled(Text) `

package/lib/components/PageTemplates/PageTemplates.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  PropsWithoutRef,\n  Ref,\n  FunctionComponent,\n  forwardRef,\n  useState,\n  useEffect,\n  MouseEvent,\n  useMemo\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  OneColumnPage as CoreOneColumnPage,\n  OneColumnPageProps as CoreOneColumnPageProps,\n  TabbedPage as CoreTabbedPage,\n  TabbedPageProps as CoreTabbedPageProps,\n  FieldValueListProps,\n  Flex,\n  Status,\n  SummaryItem,\n  Text,\n  Button,\n  Popover,\n  FieldValueList,\n  Icon,\n  ForwardProps,\n  defaultThemeProp,\n  useI18n,\n  useDirection,\n  useElement,\n  useOuterEvent,\n  PageTemplateProps,\n  OmitStrict,\n  StyledSummaryItemActions,\n  StatusProps,\n  registerIcon,\n  StyledRegion,\n  MetaList,\n  StyledBreadcrumbs,\n  StyledPageHeader\n} from '@pega/cosmos-react-core';\nimport * as nodesDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/nodes-down.icon';\nimport * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';\nimport { StyledForm } from '@pega/cosmos-react-core/lib/components/Form/Form';\n\nimport { StyledWorkbench } from '../Workbench/Workbench.styles';\n\nregisterIcon(nodesDownIcon, informationIcon);\n\nexport interface PageHeaderProps extends Pick<PageTemplateProps, 'title' | 'actions'> {\n  metadata?: FieldValueListProps['fields'];\n  status?: { type: StatusProps['variant']; label: string };\n  titleTag?: 'h1' | 'h2';\n  additionalInfo?: {\n    title: string;\n    description?: string;\n    fields: FieldValueListProps['fields'];\n    onEdit?: (e: MouseEvent<HTMLButtonElement>) => void;\n  };\n}\n\ntype OmittedPageProps = 'header' | 'scrollContent';\n\nexport interface OneColumnPageProps\n  extends OmitStrict<CoreOneColumnPageProps, OmittedPageProps>,\n    PageHeaderProps {}\n\nexport interface TabbedPageProps\n  extends OmitStrict<CoreTabbedPageProps, OmittedPageProps>,\n    PageHeaderProps {}\n\nconst StyledTextWithEllipsis: typeof Text = styled(Text)`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  line-height: 1.15;\n`;\n\nconst StyledInfoPopover: typeof Popover = styled(Popover)`\n  max-width: 60ch;\n  overflow-wrap: break-word;\n`;\n\nconst StyledHeaderContent = styled(SummaryItem)`\n  ${StyledSummaryItemActions} {\n    align-self: start;\n  }\n`;\n\nexport const StyledPage = styled.div(\n  ({\n    theme: {\n      base: {\n        spacing,\n        palette: { 'primary-background': primaryBackground }\n      }\n    }\n  }) => {\n    return css`\n      background: ${primaryBackground};\n      height: 100%;\n\n      ${StyledRegion} ${StyledWorkbench} {\n        position: absolute;\n        width: 100%;\n        margin: 0 calc(-2 * ${spacing});\n      }\n\n      ${StyledRegion} ${StyledForm} {\n        max-width: 80ch;\n      }\n\n      ${StyledPageHeader} > ${StyledBreadcrumbs} {\n        margin-block-end: 0;\n      }\n    `;\n  }\n);\n\nStyledPage.defaultProps = defaultThemeProp;\n\nexport const PageHeader = ({\n  title,\n  metadata,\n  additionalInfo,\n  actions,\n  status,\n  titleTag\n}: PageHeaderProps) => {\n  const [open, setOpen] = useState(false);\n  const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n  const [buttonEl, setButtonEl] = useElement<HTMLElement>();\n  const t = useI18n();\n  const { rtl } = useDirection();\n\n  useOuterEvent('mousedown', [popoverEl, buttonEl], () => {\n    if (open) setOpen(false);\n  });\n\n  useEffect(() => {\n    const closePopover = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        setOpen(false);\n        if (e.currentTarget === popoverEl) {\n          e.stopPropagation();\n          buttonEl?.focus();\n        }\n      }\n    };\n\n    document.addEventListener('keydown', closePopover);\n    popoverEl?.addEventListener('keydown', closePopover);\n\n    return () => {\n      document.removeEventListener('keydown', closePopover);\n      popoverEl?.removeEventListener('keydown', closePopover);\n    };\n  }, [popoverEl]);\n\n  const metaListItems = useMemo(\n    () => metadata?.map(({ name, value }) => `${name}: ${value}`),\n    [metadata]\n  );\n\n  return (\n    <StyledHeaderContent\n      container\n      primary={\n        <Flex container={{ alignItems: 'center', gap: 0.5, wrap: 'wrap' }}>\n          <Flex container={{ gap: 0.5 }} item={{ shrink: 0 }}>\n            <StyledTextWithEllipsis variant='h1' forwardedAs={titleTag}>\n              {title}\n            </StyledTextWithEllipsis>\n            {additionalInfo && (\n              <>\n                <Button\n                  label={t('additional_info')}\n                  variant='simple'\n                  icon\n                  ref={setButtonEl}\n                  onClick={() => setOpen(cur => !cur)}\n                >\n                  <Icon name='information' />\n                </Button>\n                <StyledInfoPopover\n                  ref={setPopoverRef}\n                  show={open}\n                  target={buttonEl}\n                  placement={rtl ? 'bottom-end' : 'bottom-start'}\n                >\n                  <Flex container={{ direction: 'column', alignItems: 'start', gap: 2, pad: 2 }}>\n                    <Flex container={{ direction: 'column', gap: 1 }}>\n                      <Text variant='h3'>{additionalInfo.title}</Text>\n                      {additionalInfo.description && (\n                        <Text as='p'>{additionalInfo.description}</Text>\n                      )}\n                      <FieldValueList variant='inline' fields={additionalInfo.fields} />\n                    </Flex>\n                    {additionalInfo.onEdit && (\n                      <Button\n                        onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                          setOpen(false);\n                          additionalInfo.onEdit?.(e);\n                        }}\n                      >\n                        {t('edit_details')}\n                      </Button>\n                    )}\n                  </Flex>\n                </StyledInfoPopover>\n              </>\n            )}\n          </Flex>\n          {status && <Status variant={status.type}>{status.label}</Status>}\n        </Flex>\n      }\n      secondary={metaListItems && <MetaList items={metaListItems} />}\n      actions={actions}\n    />\n  );\n};\n\nexport const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps> = forwardRef(\n  ({ tabs, ...restProps }: PropsWithoutRef<TabbedPageProps>, ref: Ref<HTMLDivElement>) => {\n    return (\n      <CoreTabbedPage\n        {...restProps}\n        as={StyledPage}\n        header={<PageHeader {...restProps} />}\n        tabs={tabs}\n        ref={ref}\n        scrollContent\n      />\n    );\n  }\n);\n\nexport const OneColumnPage: FunctionComponent<OneColumnPageProps & ForwardProps> = forwardRef(\n  (\n    {\n      a,\n\n      ...restProps\n    }: PropsWithoutRef<OneColumnPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    return (\n      <CoreOneColumnPage\n        {...restProps}\n        as={StyledPage}\n        header={<PageHeader {...restProps} />}\n        scrollContent\n        a={a}\n        ref={ref}\n      />\n    );\n  }\n);\n"]}
+{"version":3,"file":"PageTemplates.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  PropsWithoutRef,\n  Ref,\n  FunctionComponent,\n  forwardRef,\n  useState,\n  useEffect,\n  MouseEvent,\n  useMemo\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  OneColumnPage as CoreOneColumnPage,\n  OneColumnPageProps as CoreOneColumnPageProps,\n  TabbedPage as CoreTabbedPage,\n  TabbedPageProps as CoreTabbedPageProps,\n  FieldValueListProps,\n  Flex,\n  Status,\n  SummaryItem,\n  Text,\n  Button,\n  Popover,\n  FieldValueList,\n  Icon,\n  ForwardProps,\n  defaultThemeProp,\n  useI18n,\n  useDirection,\n  useElement,\n  useOuterEvent,\n  PageTemplateProps,\n  OmitStrict,\n  StyledSummaryItemActions,\n  StatusProps,\n  registerIcon,\n  StyledRegion,\n  MetaList,\n  StyledBreadcrumbs,\n  StyledPageHeader\n} from '@pega/cosmos-react-core';\nimport * as nodesDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/nodes-down.icon';\nimport * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';\nimport { StyledForm } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm';\n\nimport { StyledWorkbench } from '../Workbench/Workbench.styles';\n\nregisterIcon(nodesDownIcon, informationIcon);\n\nexport interface PageHeaderProps extends Pick<PageTemplateProps, 'title' | 'actions'> {\n  metadata?: FieldValueListProps['fields'];\n  status?: { type: StatusProps['variant']; label: string };\n  titleTag?: 'h1' | 'h2';\n  additionalInfo?: {\n    title: string;\n    description?: string;\n    fields: FieldValueListProps['fields'];\n    onEdit?: (e: MouseEvent<HTMLButtonElement>) => void;\n  };\n}\n\ntype OmittedPageProps = 'header' | 'scrollContent';\n\nexport interface OneColumnPageProps\n  extends OmitStrict<CoreOneColumnPageProps, OmittedPageProps>,\n    PageHeaderProps {}\n\nexport interface TabbedPageProps\n  extends OmitStrict<CoreTabbedPageProps, OmittedPageProps>,\n    PageHeaderProps {}\n\nconst StyledTextWithEllipsis: typeof Text = styled(Text)`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  line-height: 1.15;\n`;\n\nconst StyledInfoPopover: typeof Popover = styled(Popover)`\n  max-width: 60ch;\n  overflow-wrap: break-word;\n`;\n\nconst StyledHeaderContent = styled(SummaryItem)`\n  ${StyledSummaryItemActions} {\n    align-self: start;\n  }\n`;\n\nexport const StyledPage = styled.div(\n  ({\n    theme: {\n      base: {\n        spacing,\n        palette: { 'primary-background': primaryBackground }\n      }\n    }\n  }) => {\n    return css`\n      background: ${primaryBackground};\n      height: 100%;\n\n      ${StyledRegion} ${StyledWorkbench} {\n        position: absolute;\n        width: 100%;\n        margin: 0 calc(-2 * ${spacing});\n      }\n\n      ${StyledRegion} ${StyledForm} {\n        max-width: 80ch;\n      }\n\n      ${StyledPageHeader} > ${StyledBreadcrumbs} {\n        margin-block-end: 0;\n      }\n    `;\n  }\n);\n\nStyledPage.defaultProps = defaultThemeProp;\n\nexport const PageHeader = ({\n  title,\n  metadata,\n  additionalInfo,\n  actions,\n  status,\n  titleTag\n}: PageHeaderProps) => {\n  const [open, setOpen] = useState(false);\n  const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n  const [buttonEl, setButtonEl] = useElement<HTMLElement>();\n  const t = useI18n();\n  const { rtl } = useDirection();\n\n  useOuterEvent('mousedown', [popoverEl, buttonEl], () => {\n    if (open) setOpen(false);\n  });\n\n  useEffect(() => {\n    const closePopover = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        setOpen(false);\n        if (e.currentTarget === popoverEl) {\n          e.stopPropagation();\n          buttonEl?.focus();\n        }\n      }\n    };\n\n    document.addEventListener('keydown', closePopover);\n    popoverEl?.addEventListener('keydown', closePopover);\n\n    return () => {\n      document.removeEventListener('keydown', closePopover);\n      popoverEl?.removeEventListener('keydown', closePopover);\n    };\n  }, [popoverEl]);\n\n  const metaListItems = useMemo(\n    () => metadata?.map(({ name, value }) => `${name}: ${value}`),\n    [metadata]\n  );\n\n  return (\n    <StyledHeaderContent\n      container\n      primary={\n        <Flex container={{ alignItems: 'center', gap: 0.5, wrap: 'wrap' }}>\n          <Flex container={{ gap: 0.5 }} item={{ shrink: 0 }}>\n            <StyledTextWithEllipsis variant='h1' forwardedAs={titleTag}>\n              {title}\n            </StyledTextWithEllipsis>\n            {additionalInfo && (\n              <>\n                <Button\n                  label={t('additional_info')}\n                  variant='simple'\n                  icon\n                  ref={setButtonEl}\n                  onClick={() => setOpen(cur => !cur)}\n                >\n                  <Icon name='information' />\n                </Button>\n                <StyledInfoPopover\n                  ref={setPopoverRef}\n                  show={open}\n                  target={buttonEl}\n                  placement={rtl ? 'bottom-end' : 'bottom-start'}\n                >\n                  <Flex container={{ direction: 'column', alignItems: 'start', gap: 2, pad: 2 }}>\n                    <Flex container={{ direction: 'column', gap: 1 }}>\n                      <Text variant='h3'>{additionalInfo.title}</Text>\n                      {additionalInfo.description && (\n                        <Text as='p'>{additionalInfo.description}</Text>\n                      )}\n                      <FieldValueList variant='inline' fields={additionalInfo.fields} />\n                    </Flex>\n                    {additionalInfo.onEdit && (\n                      <Button\n                        onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                          setOpen(false);\n                          additionalInfo.onEdit?.(e);\n                        }}\n                      >\n                        {t('edit_details')}\n                      </Button>\n                    )}\n                  </Flex>\n                </StyledInfoPopover>\n              </>\n            )}\n          </Flex>\n          {status && <Status variant={status.type}>{status.label}</Status>}\n        </Flex>\n      }\n      secondary={metaListItems && <MetaList items={metaListItems} />}\n      actions={actions}\n    />\n  );\n};\n\nexport const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps> = forwardRef(\n  ({ tabs, ...restProps }: PropsWithoutRef<TabbedPageProps>, ref: Ref<HTMLDivElement>) => {\n    return (\n      <CoreTabbedPage\n        {...restProps}\n        as={StyledPage}\n        header={<PageHeader {...restProps} />}\n        tabs={tabs}\n        ref={ref}\n        scrollContent\n      />\n    );\n  }\n);\n\nexport const OneColumnPage: FunctionComponent<OneColumnPageProps & ForwardProps> = forwardRef(\n  (\n    {\n      a,\n\n      ...restProps\n    }: PropsWithoutRef<OneColumnPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    return (\n      <CoreOneColumnPage\n        {...restProps}\n        as={StyledPage}\n        header={<PageHeader {...restProps} />}\n        scrollContent\n        a={a}\n        ref={ref}\n      />\n    );\n  }\n);\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-build",
-  "version": "3.0.0-dev.12.0",
+  "version": "3.0.0-dev.13.0",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,8 +20,8 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "3.0.0-dev.12.0",
-    "@pega/cosmos-react-dnd": "3.0.0-dev.12.0",
+    "@pega/cosmos-react-core": "3.0.0-dev.13.0",
+    "@pega/cosmos-react-dnd": "3.0.0-dev.13.0",
     "@types/dagre": "^0.7.46",
     "@types/react": "^16.14.24 || ^17.0.38",
     "@types/react-dom": "^16.9.14 || ^17.0.11",
@@ -43,6 +43,8 @@
     "@storybook/react": "^6.4.19",
     "@storybook/testing-react": "^1.2.4",
     "@storybook/theming": "^6.4.19",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.3",
     "enzyme": "^3.11.0",
     "typescript": "~4.6.2"
   }