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

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

@@ -1,14 +1,17 @@
+/// <reference types="react" />
 import { NodeType } from './Node.types';
 export declare const StyledCircle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledLabel: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {
     nodeType: NodeType;
 }, never>;
 export declare const StyledIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledCardHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledNodeTemplateHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledText: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledCard: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledCardFooter: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardFooterProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledCardContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledNodeTemplate: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {
+    highlight: boolean;
+}, never>;
+export declare const StyledNodeTemplateFooter: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardFooterProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledNodeTempleteContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledAdditionalData: import("styled-components").StyledComponent<"dl", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledAdditionalDataItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledTextWithEllipsis: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;

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

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

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

@@ -40,7 +40,7 @@ export const StyledIcon = styled.div(({ theme }) => {
   `;
 });
 StyledIcon.defaultProps = defaultThemeProp;
-export const StyledCardHeader = styled.header(({ theme }) => {
+export const StyledNodeTemplateHeader = styled.header(({ theme }) => {
     return css `
     white-space: nowrap;
     button {
@@ -49,22 +49,31 @@ export const StyledCardHeader = styled.header(({ theme }) => {
     }
   `;
 });
-StyledCardHeader.defaultProps = defaultThemeProp;
+StyledNodeTemplateHeader.defaultProps = defaultThemeProp;
 export const StyledText = styled(Text)(({ theme }) => {
     return css `
     padding-inline-end: ${theme.base.spacing};
     overflow: hidden;
-    min-width: 12rem;
     text-overflow: ellipsis;
+    max-width: 24ch;
   `;
 });
 StyledText.defaultProps = defaultThemeProp;
-export const StyledCard = styled(Card)(({ theme }) => {
+export const StyledNodeTemplate = styled(Card)(({ highlight, theme }) => {
     return css `
     width: 17.5rem;
     height: 7.5rem;
     align-self: center;
     overflow: hidden;
+    ${highlight &&
+        css `
+      &&& {
+        color: ${theme.base.colors.black};
+        background-color: ${theme.base.colors.red['extra-light']};
+        border-radius: 0.25rem;
+        box-shadow: 0 0 0 0.125rem ${theme.base.colors.red.medium};
+      }
+    `}
     &&& {
       border-radius: ${theme.base['border-radius']};
     }
@@ -72,7 +81,7 @@ export const StyledCard = styled(Card)(({ theme }) => {
     &:hover {
       box-shadow: ${theme.base.shadow.focus};
       cursor: pointer;
-      ${StyledCardHeader} {
+      ${StyledNodeTemplateHeader} {
         button {
           visibility: visible;
         }
@@ -80,16 +89,17 @@ export const StyledCard = styled(Card)(({ theme }) => {
     }
   `;
 });
-export const StyledCardFooter = styled(CardFooter)(() => {
+StyledNodeTemplate.defaultProps = defaultThemeProp;
+export const StyledNodeTemplateFooter = styled(CardFooter)(({ theme }) => {
     return css `
     margin-top: auto;
-    &:not(${StyledCard} ${StyledCard} > &) {
-      padding: 0.5rem;
+    &:not(${StyledNodeTemplate} ${StyledNodeTemplate} > &) {
+      padding: ${theme.base.spacing};
     }
   `;
 });
-StyledCard.defaultProps = defaultThemeProp;
-export const StyledCardContent = styled.div(({ theme }) => {
+StyledNodeTemplateFooter.defaultProps = defaultThemeProp;
+export const StyledNodeTempleteContent = styled.div(({ theme }) => {
     return css `
     padding: ${theme.base.spacing};
     padding-block-start: 0;
@@ -103,7 +113,7 @@ export const StyledCardContent = styled.div(({ theme }) => {
     word-wrap: break-word;
   `;
 });
-StyledCardContent.defaultProps = defaultThemeProp;
+StyledNodeTempleteContent.defaultProps = defaultThemeProp;
 export const StyledAdditionalData = styled.dl `
   overflow: hidden;
 `;

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

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

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

@@ -1,6 +1,6 @@
 import { PropsWithoutRef } from 'react';
 import { NodeProps, NodeComponentProps } from './Node.types';
-export declare const DefaultNode: import("react").ForwardRefExoticComponent<Pick<NodeComponentProps, "description" | "data" | "label" | "id" | "type" | "onClick" | "actions" | "additionalData" | "onActionClick"> & import("react").RefAttributes<HTMLElement>>;
+export declare const DefaultNode: ({ id, label, type, description, additionalData, actions, onActionClick, onClick, onDelete, highlight, error, ...restProps }: NodeComponentProps) => JSX.Element;
 export declare const StartNode: ({ type, label }: PropsWithoutRef<NodeProps>) => JSX.Element;
 export declare const EndNode: ({ type, label }: PropsWithoutRef<NodeProps>) => JSX.Element;
 //# sourceMappingURL=NodeTemplates.d.ts.map

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;AA2Bf,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAA2B,MAAM,cAAc,CAAC;AA8DtF,eAAO,MAAM,WAAW,iOAuGvB,CAAC;AAEF,eAAO,MAAM,SAAS,oBAAqB,gBAAgB,SAAS,CAAC,gBAmBpE,CAAC;AAEF,eAAO,MAAM,OAAO,oBAAqB,gBAAgB,SAAS,CAAC,gBAmBlE,CAAC"}
+{"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"}

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

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, forwardRef } from 'react';
+import { useCallback, useEffect } from 'react';
 import { readableColor } from 'polished';
 import { MenuButton, Icon, Flex, Tooltip, useElement, useI18n, cap, Text } from '@pega/cosmos-react-core';
-import { StyledLabel, StyledCircle, StyledIcon, StyledCardHeader, StyledCardContent, StyledCard, StyledText, StyledTextWithEllipsis, StyledAdditionalData, StyledCardFooter, StyledAdditionalDataItem } from './NodeTemplate.styles';
+import { colorMap } from '../../../utils';
+import { StyledLabel, StyledCircle, StyledIcon, StyledNodeTemplateHeader, StyledNodeTempleteContent, StyledNodeTemplate, StyledText, StyledTextWithEllipsis, StyledAdditionalData, StyledNodeTemplateFooter, StyledAdditionalDataItem } from './NodeTemplate.styles';
 const MetaListItem = ({ label, value }) => {
     const [nodeAdditionalDataItem, setNodeAdditionalDataItem] = useElement();
-    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { as: StyledAdditionalDataItem, container: { wrap: 'nowrap', pad: 0.25, gap: 0.25 }, item: { grow: 1 }, ref: setNodeAdditionalDataItem, children: [_jsx(StyledTextWithEllipsis, { as: 'dd', children: label }, void 0), _jsx(Text, { role: 'separator', variant: 'secondary', "aria-hidden": 'true', children: ":\u00A0" }, void 0), _jsx(StyledTextWithEllipsis, { as: 'dt', children: value }, void 0)] }, void 0), _jsx(Tooltip, { target: nodeAdditionalDataItem, hideDelay: 'none', children: `${label}:${value}` }, void 0)] }, void 0));
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { as: StyledAdditionalDataItem, container: { wrap: 'nowrap', pad: 0.25, gap: 0.25 }, item: { grow: 1 }, ref: setNodeAdditionalDataItem, children: [_jsx(StyledTextWithEllipsis, { as: 'dd', children: label }), _jsx(Text, { role: 'separator', variant: 'secondary', "aria-hidden": 'true', children: ":\u00A0" }), _jsx(StyledTextWithEllipsis, { as: 'dt', children: value })] }), _jsx(Tooltip, { target: nodeAdditionalDataItem, hideDelay: 'none', children: `${label}:${value}` })] }));
 };
 const MetaList = ({ metadata }) => {
     const [nodeAdditionalData, setNodeAdditionalData] = useElement();
@@ -21,9 +22,9 @@ const MetaList = ({ metadata }) => {
                     return;
                 }
                 return _jsx(MetaListItem, { ...data }, data.id);
-            }), metadata && metadata.length > 2 && (_jsxs(_Fragment, { children: [_jsx(Flex, { as: StyledAdditionalDataItem, container: { pad: 0.25 }, item: { grow: 1, shrink: 0 }, ref: setNodeAdditionalData, children: _jsx(StyledTextWithEllipsis, { as: 'dt', children: `+${metadata?.length - 2}` }, void 0) }, void 0), additionalDataValue && (_jsx(Tooltip, { target: nodeAdditionalData, hideDelay: 'none', children: additionalDataValue }, void 0))] }, void 0))] }, void 0));
+            }), metadata && metadata.length > 2 && (_jsxs(_Fragment, { children: [_jsx(Flex, { as: StyledAdditionalDataItem, container: { pad: 0.25 }, item: { grow: 1, shrink: 0 }, ref: setNodeAdditionalData, children: _jsx(StyledTextWithEllipsis, { as: 'dt', children: `+${metadata?.length - 2}` }) }), additionalDataValue && (_jsx(Tooltip, { target: nodeAdditionalData, hideDelay: 'none', children: additionalDataValue }))] }))] }));
 };
-export const DefaultNode = forwardRef(({ id, label, type, description, additionalData, actions, onActionClick, onClick, ...restProps }, ref) => {
+export const DefaultNode = ({ id, label, type, description, additionalData, actions, onActionClick, onClick, onDelete, highlight, error, ...restProps }) => {
     const t = useI18n();
     const actionItems = actions?.map(actionItem => {
         return {
@@ -35,30 +36,48 @@ export const DefaultNode = forwardRef(({ id, label, type, description, additiona
             }
         };
     });
+    if (onDelete !== undefined) {
+        actionItems?.push({
+            id: 'flowmodeller-delete-node',
+            primary: t('delete'),
+            onClick: (actionId, e) => {
+                e.stopPropagation();
+                onDelete?.({ actionId, nodeId: id }, e);
+            }
+        });
+    }
     const handleEnterKeyDown = useCallback((e) => {
         if (e.key === 'Enter' && !e.shiftKey) {
-            onClick?.(id);
+            onClick?.(id, e);
         }
     }, [onClick]);
     const [nodeLabel, setNodeLabel] = useElement();
     const [nodeDescription, setNodeDescription] = useElement();
     const [nodeIcon, setNodeIcon] = useElement();
-    const color = readableColor(type.color);
-    return (_jsxs(StyledCard, { "aria-label": label, onClick: () => onClick?.(id), onKeyDown: handleEnterKeyDown, ref: ref, ...restProps, children: [_jsxs(Flex, { as: StyledCardHeader, container: { alignItems: 'center', pad: 1 }, children: [_jsx(StyledIcon, { id: id, style: {
-                            '--bg-color': type.color,
-                            '--fg-color': color
-                        }, ref: setNodeIcon, children: _jsx(Icon, { name: type.icon }, void 0) }, void 0), _jsx(Tooltip, { target: nodeIcon, hideDelay: 'none', children: cap(type.name) }, void 0), _jsx(StyledText, { variant: 'h4', ref: setNodeLabel, children: label }, void 0), _jsx(Tooltip, { describeTarget: false, target: nodeLabel, hideDelay: 'none', children: label }, void 0), actionItems && (_jsx(MenuButton, { portal: true, variant: 'simple', text: t('actions'), icon: 'more', iconOnly: true, onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), menu: {
+    const [nodeErrorToolTip, setNodeErrorToolTip] = useElement();
+    const color = readableColor(colorMap[type.color]);
+    useEffect(() => {
+        if (error) {
+            setNodeDescription(null);
+            setNodeLabel(null);
+            setNodeIcon(null);
+        }
+    }, [error]);
+    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: {
                             items: actionItems
-                        } }, void 0))] }, void 0), description && (_jsxs(_Fragment, { children: [_jsx(StyledCardContent, { ref: setNodeDescription, children: description }, void 0), _jsx(Tooltip, { describeTarget: false, target: nodeDescription, hideDelay: 'none', children: description }, void 0)] }, void 0)), additionalData && (_jsx(StyledCardFooter, { children: _jsx(MetaList, { metadata: additionalData }, void 0) }, void 0))] }, void 0));
-});
+                        } }))] }), 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 }))] }));
+};
 export const StartNode = ({ type, label }) => {
-    return (_jsxs(Flex, { container: { justify: 'center', direction: 'column' }, children: [_jsx(Flex, { as: StyledLabel, nodeType: type, children: label }, void 0), _jsx(Flex, { as: StyledCircle, style: {
-                    '--bg-color': type.color
-                }, tabIndex: '0', "aria-label": label, role: 'button' }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { justify: 'center', direction: 'column' }, children: [_jsx(Flex, { as: StyledLabel, nodeType: type, children: label }), _jsx(Flex, { as: StyledCircle, style: {
+                    '--bg-color': colorMap[type.color]
+                }, tabIndex: '0', "aria-label": label, role: 'button' })] }));
 };
 export const EndNode = ({ type, label }) => {
     return (_jsxs(Flex, { container: { justify: 'center', direction: 'column' }, children: [_jsx(Flex, { as: StyledCircle, style: {
-                    '--bg-color': type.color
-                }, tabIndex: '0', "aria-label": label, role: 'button' }, void 0), _jsx(Flex, { as: StyledLabel, nodeType: type, children: label }, void 0)] }, void 0));
+                    '--bg-color': colorMap[type.color]
+                }, tabIndex: '0', "aria-label": label, role: 'button' }), _jsx(Flex, { as: StyledLabel, nodeType: type, children: label })] }));
 };
 //# sourceMappingURL=NodeTemplates.js.map

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

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

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

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { Node as GraphNode } from './Renderer/Utils/Graph';
+declare const Node: FC<GraphNode>;
+export default Node;
+//# sourceMappingURL=Node.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Node.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/Node.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAiC,MAAM,OAAO,CAAC;AAU1D,OAAO,EAAE,IAAI,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAE3D,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAoCtB,CAAC;AAEH,eAAe,IAAI,CAAC"}

package/lib/components/FlowModeller/Node.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useCallback } from 'react';
+import { START_NODETYPE, STOP_NODETYPE } from './Node/Node.types';
+import { DefaultNode, EndNode, StartNode } from './Node/NodeTemplates';
+const Node = memo(props => {
+    const { id, type, label, description, additionalData, highlight, data, error } = props;
+    const clickHandler = useCallback((nodeId, e) => {
+        data?.onClick?.(nodeId, e);
+    }, [data?.onClick]);
+    if (!type) {
+        return null;
+    }
+    if (type?.id === START_NODETYPE.id) {
+        return _jsx(StartNode, { id: id, type: type, label: label.toUpperCase() });
+    }
+    if (type?.id === STOP_NODETYPE.id) {
+        return _jsx(EndNode, { id: id, type: type, label: label.toUpperCase() });
+    }
+    return (_jsx(DefaultNode, { id: id, label: label, type: type, description: description, onClick: clickHandler, onDelete: data?.onDelete, onActionClick: data?.onActionClick, actions: data?.actions, additionalData: additionalData, highlight: highlight, error: error }));
+});
+export default Node;
+//# sourceMappingURL=Node.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Node.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/Node.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,IAAI,EAAE,WAAW,EAAc,MAAM,OAAO,CAAC;AAE1D,OAAO,EAIL,cAAc,EACd,aAAa,EACd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGvE,MAAM,IAAI,GAAkB,IAAI,CAAC,KAAK,CAAC,EAAE;IACvC,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,GAC5E,KAAsD,CAAC;IAEzD,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,MAAc,EAAE,CAAa,EAAE,EAAE;QAChC,IAAI,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IAC7B,CAAC,EACD,CAAC,IAAI,EAAE,OAAO,CAAC,CAChB,CAAC;IAEF,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,IAAI,CAAC;KACb;IAED,IAAI,IAAI,EAAE,EAAE,KAAK,cAAc,CAAC,EAAE,EAAE;QAClC,OAAO,KAAC,SAAS,IAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,WAAW,EAAE,GAAI,CAAC;KACtE;IACD,IAAI,IAAI,EAAE,EAAE,KAAK,aAAa,CAAC,EAAE,EAAE;QACjC,OAAO,KAAC,OAAO,IAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,WAAW,EAAE,GAAI,CAAC;KACpE;IACD,OAAO,CACL,KAAC,WAAW,IACV,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,YAA6C,EACtD,QAAQ,EAAE,IAAI,EAAE,QAAQ,EACxB,aAAa,EAAE,IAAI,EAAE,aAAa,EAClC,OAAO,EAAE,IAAI,EAAE,OAAO,EACtB,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,IAAI,CAAC","sourcesContent":["import { FC, memo, useCallback, MouseEvent } from 'react';\n\nimport {\n  ModellerNodeComponentProps,\n  NodeComponentData,\n  NodeComponentProps,\n  START_NODETYPE,\n  STOP_NODETYPE\n} from './Node/Node.types';\nimport { DefaultNode, EndNode, StartNode } from './Node/NodeTemplates';\nimport { Node as GraphNode } from './Renderer/Utils/Graph';\n\nconst Node: FC<GraphNode> = memo(props => {\n  const { id, type, label, description, additionalData, highlight, data, error } =\n    props as ModellerNodeComponentProps<NodeComponentData>;\n\n  const clickHandler = useCallback(\n    (nodeId: string, e: MouseEvent) => {\n      data?.onClick?.(nodeId, e);\n    },\n    [data?.onClick]\n  );\n\n  if (!type) {\n    return null;\n  }\n\n  if (type?.id === START_NODETYPE.id) {\n    return <StartNode id={id} type={type} label={label.toUpperCase()} />;\n  }\n  if (type?.id === STOP_NODETYPE.id) {\n    return <EndNode id={id} type={type} label={label.toUpperCase()} />;\n  }\n  return (\n    <DefaultNode\n      id={id}\n      label={label}\n      type={type}\n      description={description}\n      onClick={clickHandler as NodeComponentProps['onClick']}\n      onDelete={data?.onDelete}\n      onActionClick={data?.onActionClick}\n      actions={data?.actions}\n      additionalData={additionalData}\n      highlight={highlight}\n      error={error}\n    />\n  );\n});\n\nexport default Node;\n"]}

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

@@ -1,4 +1,5 @@
 import { FC, ComponentType } from 'react';
+import { ConnectorProps as GraphConnectorProps } from './Utils/Graph';
 import { RendererConnectorProps } from './Renderer.types';
 export interface ConnectorProps {
     items: RendererConnectorProps[];
@@ -7,6 +8,7 @@ export interface ConnectorProps {
         height: number;
     };
     content?: ComponentType<RendererConnectorProps>;
+    highlights?: Record<string, GraphConnectorProps>;
 }
 declare const Connectors: FC<ConnectorProps>;
 export default Connectors;

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

@@ -1 +1 @@
-{"version":3,"file":"Connectors.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Connectors.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAyD1D,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,sBAAsB,EAAE,CAAC;IAChC,UAAU,EAAE;QACV,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,OAAO,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;CACjD;AACD,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,cAAc,CAqClC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Connectors.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Connectors.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,cAAc,IAAI,mBAAmB,EAAE,MAAM,eAAe,CAAC;AACtE,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAyD1D,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,sBAAsB,EAAE,CAAC;IAChC,UAAU,EAAE;QACV,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,OAAO,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;CAClD;AACD,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,cAAc,CA2ClC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/FlowModeller/Renderer/Connectors.js

@@ -37,11 +37,13 @@ const StyledConnectorContainer = styled.div `
   top: 0;
   left: 0;
 `;
-const Connectors = ({ items, dimensions, content: Content }) => {
+const Connectors = ({ items, dimensions, content: Content, highlights }) => {
     const theme = useTheme();
     return (_jsx(StyledConnectorContainer, { children: _jsx("svg", { width: dimensions.width, height: dimensions.height, xmlns: 'http://www.w3.org/2000/svg', viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, children: items.map(item => {
-                return (_jsxs("g", { children: [_jsx("path", { id: item.id, d: genLine(item.points), stroke: theme.base.colors.slate.dark, strokeWidth: '1', fill: 'none' }, void 0), item.labelLayout && (_jsx("foreignObject", { x: item.labelLayout.x - item.labelLayout.width, y: item.points.length > 10 ? item.points[3].y - 15 : item.labelLayout.y - 7.5, width: item.labelLayout.width, height: item.labelLayout.height, children: Content && _jsx(Content, { ...item }, void 0) }, void 0))] }, item.id));
-            }) }, void 0) }, void 0));
+                return (_jsxs("g", { children: [_jsx("path", { id: item.id, d: genLine(item.points), stroke: highlights && highlights[item.id]
+                                ? theme.base.colors.red.medium
+                                : theme.base.colors.slate.dark, strokeWidth: highlights && highlights[item.id] ? 2 : 1, fill: 'none' }), item.labelLayout && (_jsx("foreignObject", { x: item.labelLayout.x - item.labelLayout.width, y: item.points.length > 10 ? item.points[3].y - 15 : item.labelLayout.y - 7.5, width: item.labelLayout.width, height: item.labelLayout.height, children: Content && (_jsx(Content, { ...item, highlight: !!(highlights && highlights[item.id]) })) }))] }, item.id));
+            }) }) }));
 };
 export default Connectors;
 //# sourceMappingURL=Connectors.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Connectors.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Connectors.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AASnD,MAAM,YAAY,GAAG,EAAE,CAAC;AACxB,MAAM,OAAO,GAAG,CAAC,MAAgB,EAAE,EAAE;IACnC,MAAM,OAAO,GAAW,MAAM;SAC3B,GAAG,CAAC,CAAC,KAAa,EAAE,GAAW,EAAE,GAAa,EAAE,EAAE;QACjD,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,KAAK,CAAC;QACvB,MAAM,IAAI,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;QAC1B,MAAM,IAAI,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;QAC1B,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;QAE1B,sDAAsD;QACtD,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI;YAAE,OAAO,IAAI,CAAC;QAEhC,kEAAkE;QAClE,IAAI,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC;YAAE,OAAO,IAAI,CAAC;QAExD,IAAI,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;YAClB,iBAAiB;YACjB,OAAO,IAAI,CAAC,IACV,CAAC,GAAG,YACN,IAAI,YAAY,IAAI,YAAY,WAAW,YAAY,IAAI,YAAY,EAAE,CAAC;QAE5E,gBAAgB;QAChB,IAAI,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;YAClB,OAAO,IAAI,CAAC,IACV,CAAC,GAAG,YACN,IAAI,YAAY,IAAI,YAAY,UAAU,YAAY,IAAI,YAAY,EAAE,CAAC;QAE3E,aAAa;QACb,IAAI,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;YAClB,OAAO,IACL,CAAC,GAAG,YACN,IAAI,CAAC,IAAI,YAAY,IAAI,YAAY,WAAW,YAAY,IAAI,YAAY,EAAE,CAAC;QAEjF,cAAc;QACd,IAAI,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;YAClB,OAAO,IACL,CAAC,GAAG,YACN,IAAI,CAAC,IAAI,YAAY,IAAI,YAAY,UAAU,YAAY,IAAI,YAAY,EAAE,CAAC;QAEhF,OAAO,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;IACtB,CAAC,CAAC;SACD,IAAI,CAAC,EAAE,CAAC,CAAC;IACZ,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;AACjC,CAAC,CAAC;AAEF,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI1C,CAAC;AASF,MAAM,UAAU,GAAuB,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE;IACjF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,OAAO,CACL,KAAC,wBAAwB,cACvB,cACE,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,MAAM,EAAE,UAAU,CAAC,MAAM,EACzB,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAE,OAAO,UAAU,CAAC,KAAK,IAAI,UAAU,CAAC,MAAM,EAAE,YAEtD,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;gBAChB,OAAO,CACL,wBACE,eACE,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EACvB,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,EACpC,WAAW,EAAC,GAAG,EACf,IAAI,EAAC,MAAM,WACX,EACD,IAAI,CAAC,WAAW,IAAI,CACnB,wBACE,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,EAC9C,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,GAAG,GAAG,EAC7E,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,EAC7B,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,MAAM,YAE9B,OAAO,IAAI,KAAC,OAAO,OAAK,IAAI,WAAI,WACnB,CACjB,KAjBK,IAAI,CAAC,EAAE,CAkBX,CACL,CAAC;YACJ,CAAC,CAAC,WACE,WACmB,CAC5B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { FC, ComponentType } from 'react';\nimport styled from 'styled-components';\n\nimport { useTheme } from '@pega/cosmos-react-core';\n\nimport { RendererConnectorProps } from './Renderer.types';\n\ninterface Points {\n  x: number;\n  y: number;\n}\n\nconst CURVE_RADIUS = 16;\nconst genLine = (points: Points[]) => {\n  const lineStr: string = points\n    .map((point: Points, idx: number, arr: Points[]) => {\n      const { x, y } = point;\n      const prev = arr[idx - 1];\n      const next = arr[idx + 1];\n      const line = `L${x},${y}`;\n\n      // if the point is extream end, no need to add a curve\n      if (!prev || !next) return line;\n\n      // if point is colinear with prev and next, no need to add a curve\n      if (prev.x === next.x || prev.y === next.y) return line;\n\n      if (point.x > next.x)\n        // BOTTOM-RIGHT ↲\n        return `L${x},${\n          y - CURVE_RADIUS\n        }a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 1 -${CURVE_RADIUS},${CURVE_RADIUS}`;\n\n      // BOTTOM-LEFT ↳\n      if (point.x < next.x)\n        return `L${x},${\n          y - CURVE_RADIUS\n        }a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 0 ${CURVE_RADIUS},${CURVE_RADIUS}`;\n\n      // TOP-LEFT ↱\n      if (point.x < prev.x)\n        return `L${\n          x + CURVE_RADIUS\n        },${y}a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 0 -${CURVE_RADIUS},${CURVE_RADIUS}`;\n\n      // TOP-RIGHT ↴\n      if (point.x > prev.x)\n        return `L${\n          x - CURVE_RADIUS\n        },${y}a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 1 ${CURVE_RADIUS},${CURVE_RADIUS}`;\n\n      return `L${x},${y}`;\n    })\n    .join('');\n  return `M${lineStr.substr(1)}`;\n};\n\nconst StyledConnectorContainer = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n`;\nexport interface ConnectorProps {\n  items: RendererConnectorProps[];\n  dimensions: {\n    width: number;\n    height: number;\n  };\n  content?: ComponentType<RendererConnectorProps>;\n}\nconst Connectors: FC<ConnectorProps> = ({ items, dimensions, content: Content }) => {\n  const theme = useTheme();\n\n  return (\n    <StyledConnectorContainer>\n      <svg\n        width={dimensions.width}\n        height={dimensions.height}\n        xmlns='http://www.w3.org/2000/svg'\n        viewBox={`0 0 ${dimensions.width} ${dimensions.height}`}\n      >\n        {items.map(item => {\n          return (\n            <g key={item.id}>\n              <path\n                id={item.id}\n                d={genLine(item.points)}\n                stroke={theme.base.colors.slate.dark}\n                strokeWidth='1'\n                fill='none'\n              />\n              {item.labelLayout && (\n                <foreignObject\n                  x={item.labelLayout.x - item.labelLayout.width}\n                  y={item.points.length > 10 ? item.points[3].y - 15 : item.labelLayout.y - 7.5}\n                  width={item.labelLayout.width}\n                  height={item.labelLayout.height}\n                >\n                  {Content && <Content {...item} />}\n                </foreignObject>\n              )}\n            </g>\n          );\n        })}\n      </svg>\n    </StyledConnectorContainer>\n  );\n};\n\nexport default Connectors;\n"]}
+{"version":3,"file":"Connectors.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Connectors.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, ComponentType } from 'react';\nimport styled from 'styled-components';\n\nimport { useTheme } from '@pega/cosmos-react-core';\n\nimport { ConnectorProps as GraphConnectorProps } from './Utils/Graph';\nimport { RendererConnectorProps } from './Renderer.types';\n\ninterface Points {\n  x: number;\n  y: number;\n}\n\nconst CURVE_RADIUS = 16;\nconst genLine = (points: Points[]) => {\n  const lineStr: string = points\n    .map((point: Points, idx: number, arr: Points[]) => {\n      const { x, y } = point;\n      const prev = arr[idx - 1];\n      const next = arr[idx + 1];\n      const line = `L${x},${y}`;\n\n      // if the point is extream end, no need to add a curve\n      if (!prev || !next) return line;\n\n      // if point is colinear with prev and next, no need to add a curve\n      if (prev.x === next.x || prev.y === next.y) return line;\n\n      if (point.x > next.x)\n        // BOTTOM-RIGHT ↲\n        return `L${x},${\n          y - CURVE_RADIUS\n        }a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 1 -${CURVE_RADIUS},${CURVE_RADIUS}`;\n\n      // BOTTOM-LEFT ↳\n      if (point.x < next.x)\n        return `L${x},${\n          y - CURVE_RADIUS\n        }a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 0 ${CURVE_RADIUS},${CURVE_RADIUS}`;\n\n      // TOP-LEFT ↱\n      if (point.x < prev.x)\n        return `L${\n          x + CURVE_RADIUS\n        },${y}a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 0 -${CURVE_RADIUS},${CURVE_RADIUS}`;\n\n      // TOP-RIGHT ↴\n      if (point.x > prev.x)\n        return `L${\n          x - CURVE_RADIUS\n        },${y}a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 1 ${CURVE_RADIUS},${CURVE_RADIUS}`;\n\n      return `L${x},${y}`;\n    })\n    .join('');\n  return `M${lineStr.substr(1)}`;\n};\n\nconst StyledConnectorContainer = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n`;\nexport interface ConnectorProps {\n  items: RendererConnectorProps[];\n  dimensions: {\n    width: number;\n    height: number;\n  };\n  content?: ComponentType<RendererConnectorProps>;\n  highlights?: Record<string, GraphConnectorProps>;\n}\nconst Connectors: FC<ConnectorProps> = ({ items, dimensions, content: Content, highlights }) => {\n  const theme = useTheme();\n\n  return (\n    <StyledConnectorContainer>\n      <svg\n        width={dimensions.width}\n        height={dimensions.height}\n        xmlns='http://www.w3.org/2000/svg'\n        viewBox={`0 0 ${dimensions.width} ${dimensions.height}`}\n      >\n        {items.map(item => {\n          return (\n            <g key={item.id}>\n              <path\n                id={item.id}\n                d={genLine(item.points)}\n                stroke={\n                  highlights && highlights[item.id]\n                    ? theme.base.colors.red.medium\n                    : theme.base.colors.slate.dark\n                }\n                strokeWidth={highlights && highlights[item.id] ? 2 : 1}\n                fill='none'\n              />\n              {item.labelLayout && (\n                <foreignObject\n                  x={item.labelLayout.x - item.labelLayout.width}\n                  y={item.points.length > 10 ? item.points[3].y - 15 : item.labelLayout.y - 7.5}\n                  width={item.labelLayout.width}\n                  height={item.labelLayout.height}\n                >\n                  {Content && (\n                    <Content {...item} highlight={!!(highlights && highlights[item.id])} />\n                  )}\n                </foreignObject>\n              )}\n            </g>\n          );\n        })}\n      </svg>\n    </StyledConnectorContainer>\n  );\n};\n\nexport default Connectors;\n"]}

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

@@ -1,8 +1,10 @@
 import { ComponentType, FC } from 'react';
+import { Node as GraphNode } from './Utils/Graph';
 import { RendererNodeProps } from './Renderer.types';
 export interface NodesProps {
     items: RendererNodeProps[];
     content?: ComponentType<RendererNodeProps>;
+    highlights?: Record<string, GraphNode>;
 }
 declare const Nodes: FC<NodesProps>;
 export default Nodes;

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

@@ -1 +1 @@
-{"version":3,"file":"Nodes.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Nodes.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAoBrD,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,OAAO,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;CAC5C;AACD,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAmBzB,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Nodes.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Nodes.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,IAAI,IAAI,SAAS,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAqBrD,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,OAAO,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACxC;AACD,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAmBzB,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/components/FlowModeller/Renderer/Nodes.js

@@ -16,10 +16,10 @@ const StyledNodeContainer = styled.div `
   top: 0;
   left: 0;
 `;
-const Nodes = ({ items, content: Node }) => {
+const Nodes = ({ items, content: Node, highlights }) => {
     return (_jsx(StyledNodeContainer, { children: items.map(item => {
-            return (_jsx(Flex, { as: StyledNodeWrapper, id: item.id, dimensions: item.dimensions, position: item.position, container: { justify: 'center' }, children: Node && _jsx(Node, { ...item }, void 0) }, item.id));
-        }) }, void 0));
+            return (_jsx(Flex, { as: StyledNodeWrapper, id: `render-node-${item.id}`, dimensions: item.dimensions, position: item.position, container: { justify: 'center' }, children: Node && _jsx(Node, { ...item, highlight: !!(highlights && highlights[item.id]) }) }, item.id));
+        }) }));
 };
 export default Nodes;
 //# sourceMappingURL=Nodes.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Nodes.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Nodes.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAI/C,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAGjC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC9B,OAAO,GAAG,CAAA;;;;aAIC,UAAU,CAAC,KAAK;cACf,UAAU,CAAC,MAAM;2BACJ,QAAQ,CAAC,CAAC,OAAO,QAAQ,CAAC,CAAC;GACnD,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIrC,CAAC;AAKF,MAAM,KAAK,GAAmB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE;IACzD,OAAO,CACL,KAAC,mBAAmB,cACjB,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAChB,OAAO,CACL,KAAC,IAAI,IAEH,EAAE,EAAE,iBAAiB,EACrB,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,YAE/B,IAAI,IAAI,KAAC,IAAI,OAAK,IAAI,WAAI,IAPtB,IAAI,CAAC,EAAE,CAQP,CACR,CAAC;QACJ,CAAC,CAAC,WACkB,CACvB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import { ComponentType, FC } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex } from '@pega/cosmos-react-core';\n\nimport { RendererNodeProps } from './Renderer.types';\n\nconst StyledNodeWrapper = styled.div<{\n  dimensions: RendererNodeProps['dimensions'];\n  position: RendererNodeProps['position'];\n}>(({ dimensions, position }) => {\n  return css`\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: ${dimensions.width}px;\n    height: ${dimensions.height}px;\n    transform: translate(${position.x}px, ${position.y}px);\n  `;\n});\nconst StyledNodeContainer = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n`;\nexport interface NodesProps {\n  items: RendererNodeProps[];\n  content?: ComponentType<RendererNodeProps>;\n}\nconst Nodes: FC<NodesProps> = ({ items, content: Node }) => {\n  return (\n    <StyledNodeContainer>\n      {items.map(item => {\n        return (\n          <Flex\n            key={item.id}\n            as={StyledNodeWrapper}\n            id={item.id}\n            dimensions={item.dimensions}\n            position={item.position}\n            container={{ justify: 'center' }}\n          >\n            {Node && <Node {...item} />}\n          </Flex>\n        );\n      })}\n    </StyledNodeContainer>\n  );\n};\n\nexport default Nodes;\n"]}
+{"version":3,"file":"Nodes.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Nodes.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAK/C,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAGjC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC9B,OAAO,GAAG,CAAA;;;;aAIC,UAAU,CAAC,KAAK;cACf,UAAU,CAAC,MAAM;2BACJ,QAAQ,CAAC,CAAC,OAAO,QAAQ,CAAC,CAAC;GACnD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIrC,CAAC;AAMF,MAAM,KAAK,GAAmB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE;IACrE,OAAO,CACL,KAAC,mBAAmB,cACjB,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAChB,OAAO,CACL,KAAC,IAAI,IAEH,EAAE,EAAE,iBAAiB,EACrB,EAAE,EAAE,eAAe,IAAI,CAAC,EAAE,EAAE,EAC5B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,YAE/B,IAAI,IAAI,KAAC,IAAI,OAAK,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,UAAU,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,GAAI,IAPxE,IAAI,CAAC,EAAE,CAQP,CACR,CAAC;QACJ,CAAC,CAAC,GACkB,CACvB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import { ComponentType, FC } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex } from '@pega/cosmos-react-core';\n\nimport { Node as GraphNode } from './Utils/Graph';\nimport { RendererNodeProps } from './Renderer.types';\n\nconst StyledNodeWrapper = styled.div<{\n  dimensions: RendererNodeProps['dimensions'];\n  position: RendererNodeProps['position'];\n}>(({ dimensions, position }) => {\n  return css`\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: ${dimensions.width}px;\n    height: ${dimensions.height}px;\n    transform: translate(${position.x}px, ${position.y}px);\n  `;\n});\n\nconst StyledNodeContainer = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n`;\nexport interface NodesProps {\n  items: RendererNodeProps[];\n  content?: ComponentType<RendererNodeProps>;\n  highlights?: Record<string, GraphNode>;\n}\nconst Nodes: FC<NodesProps> = ({ items, content: Node, highlights }) => {\n  return (\n    <StyledNodeContainer>\n      {items.map(item => {\n        return (\n          <Flex\n            key={item.id}\n            as={StyledNodeWrapper}\n            id={`render-node-${item.id}`}\n            dimensions={item.dimensions}\n            position={item.position}\n            container={{ justify: 'center' }}\n          >\n            {Node && <Node {...item} highlight={!!(highlights && highlights[item.id])} />}\n          </Flex>\n        );\n      })}\n    </StyledNodeContainer>\n  );\n};\n\nexport default Nodes;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAI3B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAUjD,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAU/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAI3B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAUjD,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAe/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/FlowModeller/Renderer/Renderer.js

@@ -8,10 +8,10 @@ const StyledWrapper = styled.div `
   width: 100%;
   height: 100%;
 `;
-const Renderer = ({ graphData, connector, node }) => {
+const Renderer = ({ graphData, connector, node, highlights }) => {
     // apply the plotted positions
     const graphDimensions = GraphLayout.plot(graphData);
-    return (_jsxs(StyledWrapper, { children: [_jsx(Connectors, { items: graphData.connectors, content: connector, dimensions: graphDimensions }, void 0), _jsx(Nodes, { items: graphData.nodes, content: node }, void 0)] }, void 0));
+    return (_jsxs(StyledWrapper, { children: [_jsx(Connectors, { items: graphData.connectors, content: connector, dimensions: graphDimensions, highlights: highlights?.connectors }), _jsx(Nodes, { items: graphData.nodes, content: node, highlights: highlights?.nodes })] }));
 };
 export default Renderer;
 //# sourceMappingURL=Renderer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Renderer.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Renderer.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,WAAW,MAAM,qBAAqB,CAAC;AAE9C,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI/B,CAAC;AAEF,MAAM,QAAQ,GAAsB,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE;IACrE,8BAA8B;IAC9B,MAAM,eAAe,GAAG,WAAW,CAAC,IAAI,CAA6B,SAAS,CAAC,CAAC;IAEhF,OAAO,CACL,MAAC,aAAa,eACZ,KAAC,UAAU,IAAC,KAAK,EAAE,SAAS,CAAC,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,eAAe,WAAI,EAC5F,KAAC,KAAK,IAAC,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,WAAI,YAClC,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { FC } from 'react';\nimport styled from 'styled-components';\n\nimport Connectors from './Connectors';\nimport { RendererProps } from './Renderer.types';\nimport Nodes from './Nodes';\nimport GraphLayout from './Utils/GraphLayout';\n\nconst StyledWrapper = styled.div`\n  position: relative;\n  width: 100%;\n  height: 100%;\n`;\n\nconst Renderer: FC<RendererProps> = ({ graphData, connector, node }) => {\n  // apply the plotted positions\n  const graphDimensions = GraphLayout.plot<RendererProps['graphData']>(graphData);\n\n  return (\n    <StyledWrapper>\n      <Connectors items={graphData.connectors} content={connector} dimensions={graphDimensions} />\n      <Nodes items={graphData.nodes} content={node} />\n    </StyledWrapper>\n  );\n};\n\nexport default Renderer;\n"]}
+{"version":3,"file":"Renderer.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Renderer.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,WAAW,MAAM,qBAAqB,CAAC;AAE9C,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI/B,CAAC;AAEF,MAAM,QAAQ,GAAsB,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE;IACjF,8BAA8B;IAC9B,MAAM,eAAe,GAAG,WAAW,CAAC,IAAI,CAA6B,SAAS,CAAC,CAAC;IAEhF,OAAO,CACL,MAAC,aAAa,eACZ,KAAC,UAAU,IACT,KAAK,EAAE,SAAS,CAAC,UAAU,EAC3B,OAAO,EAAE,SAAS,EAClB,UAAU,EAAE,eAAe,EAC3B,UAAU,EAAE,UAAU,EAAE,UAAU,GAClC,EACF,KAAC,KAAK,IAAC,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,GAAI,IACjE,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { FC } from 'react';\nimport styled from 'styled-components';\n\nimport Connectors from './Connectors';\nimport { RendererProps } from './Renderer.types';\nimport Nodes from './Nodes';\nimport GraphLayout from './Utils/GraphLayout';\n\nconst StyledWrapper = styled.div`\n  position: relative;\n  width: 100%;\n  height: 100%;\n`;\n\nconst Renderer: FC<RendererProps> = ({ graphData, connector, node, highlights }) => {\n  // apply the plotted positions\n  const graphDimensions = GraphLayout.plot<RendererProps['graphData']>(graphData);\n\n  return (\n    <StyledWrapper>\n      <Connectors\n        items={graphData.connectors}\n        content={connector}\n        dimensions={graphDimensions}\n        highlights={highlights?.connectors}\n      />\n      <Nodes items={graphData.nodes} content={node} highlights={highlights?.nodes} />\n    </StyledWrapper>\n  );\n};\n\nexport default Renderer;\n"]}

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

@@ -1,18 +1,24 @@
-import { ComponentType } from 'react';
-import { GraphData } from './Utils/Graph';
+import { FC } from 'react';
+import { ConnectorProps, Node, GraphData } from './Utils/Graph';
 import { PlottedGraphConnector, PlottedGraphNode } from './Utils/GraphLayout';
 export interface AddNodeHandlerParams {
     refType: 'node' | 'connector';
     refId: string | string[];
 }
 export interface RendererNodeProps extends PlottedGraphNode {
+    highlight?: boolean;
 }
 export interface RendererConnectorProps extends PlottedGraphConnector {
+    highlight?: boolean;
 }
 export interface RendererProps {
     graphData: GraphData<RendererNodeProps, RendererConnectorProps>;
     disableAutoLayout?: boolean;
-    connector?: ComponentType<RendererConnectorProps>;
-    node?: ComponentType<RendererNodeProps>;
+    highlights?: {
+        nodes: Record<string, Node>;
+        connectors: Record<string, ConnectorProps>;
+    };
+    connector?: FC<RendererConnectorProps>;
+    node?: FC<Node>;
 }
 //# sourceMappingURL=Renderer.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Renderer.types.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Renderer.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE9E,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,GAAG,WAAW,CAAC;IAC9B,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC1B;AAED,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;CAAG;AAE9D,MAAM,WAAW,sBAAuB,SAAQ,qBAAqB;CAAG;AAExE,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,SAAS,CAAC,iBAAiB,EAAE,sBAAsB,CAAC,CAAC;IAChE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAClD,IAAI,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;CACzC"}
+{"version":3,"file":"Renderer.types.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Renderer.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE9E,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,GAAG,WAAW,CAAC;IAC9B,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC1B;AAED,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,sBAAuB,SAAQ,qBAAqB;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,SAAS,CAAC,iBAAiB,EAAE,sBAAsB,CAAC,CAAC;IAChE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,UAAU,CAAC,EAAE;QACX,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QAC5B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;KAC5C,CAAC;IACF,SAAS,CAAC,EAAE,EAAE,CAAC,sBAAsB,CAAC,CAAC;IACvC,IAAI,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC;CACjB"}

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

@@ -1 +1 @@
-{"version":3,"file":"Renderer.types.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Renderer.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentType } from 'react';\n\nimport { GraphData } from './Utils/Graph';\nimport { PlottedGraphConnector, PlottedGraphNode } from './Utils/GraphLayout';\n\nexport interface AddNodeHandlerParams {\n  refType: 'node' | 'connector';\n  refId: string | string[];\n}\n\nexport interface RendererNodeProps extends PlottedGraphNode {}\n\nexport interface RendererConnectorProps extends PlottedGraphConnector {}\n\nexport interface RendererProps {\n  graphData: GraphData<RendererNodeProps, RendererConnectorProps>;\n  disableAutoLayout?: boolean;\n  connector?: ComponentType<RendererConnectorProps>;\n  node?: ComponentType<RendererNodeProps>;\n}\n"]}
+{"version":3,"file":"Renderer.types.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Renderer.types.ts"],"names":[],"mappings":"","sourcesContent":["import { FC } from 'react';\n\nimport { ConnectorProps, Node, GraphData } from './Utils/Graph';\nimport { PlottedGraphConnector, PlottedGraphNode } from './Utils/GraphLayout';\n\nexport interface AddNodeHandlerParams {\n  refType: 'node' | 'connector';\n  refId: string | string[];\n}\n\nexport interface RendererNodeProps extends PlottedGraphNode {\n  highlight?: boolean;\n}\n\nexport interface RendererConnectorProps extends PlottedGraphConnector {\n  highlight?: boolean;\n}\n\nexport interface RendererProps {\n  graphData: GraphData<RendererNodeProps, RendererConnectorProps>;\n  disableAutoLayout?: boolean;\n  highlights?: {\n    nodes: Record<string, Node>;\n    connectors: Record<string, ConnectorProps>;\n  };\n  connector?: FC<RendererConnectorProps>;\n  node?: FC<Node>;\n}\n"]}

package/lib/components/FlowModeller/Renderer/Utils/Graph.d.ts

@@ -47,8 +47,8 @@ export declare class DirectedGraph<T extends Node = Node, U extends ConnectorPro
         fromNodeId?: string;
         toNodeId?: string;
     }): DirectedGraph<T, U>;
-    getInConnectors(toNodeId: string, fromNodeId?: string): ConnectorProps[];
-    getOutConnectors(fromNodeId: string, toNodeId?: string): ConnectorProps[];
-    getAllNodeConnectors(nodeId: string): ConnectorProps<unknown>[] | undefined;
+    getInConnectors(toNodeId: string, fromNodeId?: string): U[];
+    getOutConnectors(fromNodeId: string, toNodeId?: string): U[];
+    getAllNodeConnectors(nodeId: string): U[] | undefined;
 }
 //# sourceMappingURL=Graph.d.ts.map