@pega/cosmos-react-build 9.0.0-build.9.8 → 9.0.0

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

@@ -0,0 +1,144 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp, Card, Text, CardFooter, Icon, Flex } from '@pega/cosmos-react-core';
+const borderRadius = 'border-radius';
+export const StyledCircle = styled.div(({ theme, bgColor }) => {
+    return css `
+    height: calc(4 * ${theme.base.spacing});
+    width: calc(4 * ${theme.base.spacing});
+    background: ${bgColor};
+    border-radius: 50%;
+    align-self: center;
+    &:focus {
+      outline: none;
+      box-shadow: ${theme.base.shadow.focus};
+    }
+  `;
+});
+StyledCircle.defaultProps = defaultThemeProp;
+export const StyledStartNode = styled(Flex) `
+  height: inherit;
+`;
+export const StyledIcon = styled.div(({ theme, bgColor, color }) => {
+    const { base: { 'border-radius': baseRadius }, components: { icon: { 'border-radius-multiplier': borderRadiusMultiplier } } } = theme;
+    return css `
+    min-height: calc(4 * ${theme.base.spacing});
+    min-width: calc(4 * ${theme.base.spacing});
+    margin-inline-end: ${theme.base.spacing};
+    ${bgColor && `background-color: ${bgColor};`}
+    ${color && `color: ${color};`}
+    border-radius: calc(0.5 * ${borderRadiusMultiplier} * ${baseRadius});
+  `;
+});
+StyledIcon.defaultProps = defaultThemeProp;
+export const StyledNodeTemplateHeader = styled.header(({ theme }) => {
+    return css `
+    white-space: nowrap;
+    button {
+      border-radius: ${theme.base[borderRadius]};
+    }
+  `;
+});
+StyledNodeTemplateHeader.defaultProps = defaultThemeProp;
+export const StyledText = styled(Text)(({ error, theme }) => {
+    return css `
+    padding-inline-end: ${theme.base.spacing};
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: ${error
+        ? `calc(0.9 * ${theme.base['content-width'].xs})`
+        : theme.base['content-width'].xs};
+  `;
+});
+StyledText.defaultProps = defaultThemeProp;
+export const StyledNodeTemplate = styled(Card)(({ highlight, theme }) => {
+    return css `
+    width: calc(35 * ${theme.base.spacing});
+    height: calc(15 * ${theme.base.spacing});
+    align-self: center;
+    overflow: hidden;
+    background-color: ${theme.base.palette['primary-background']};
+    border: calc(0.25 * ${theme.base.spacing}) solid transparent;
+
+    ${highlight &&
+        css `
+      &&& {
+        color: ${theme.base.colors.black};
+        background-color: ${theme.base.colors.red['extra-light']};
+        border-radius: calc(0.25 * ${theme.base.spacing});
+        box-shadow: 0 0 0 calc(0.25 * ${theme.base.spacing}) ${theme.base.colors.red.medium};
+      }
+    `}
+
+    &&& {
+      border-radius: ${theme.base[borderRadius]};
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    :focus-visible {
+      box-shadow: ${theme.base.shadow.focus};
+    }
+
+    &[aria-current='location'] {
+      box-shadow: none;
+      border: calc(0.25 * ${theme.base.spacing}) solid ${theme.base.palette.interactive};
+      cursor: pointer;
+    }
+  `;
+});
+StyledNodeTemplate.defaultProps = defaultThemeProp;
+export const StyledNodeTemplateFooter = styled(CardFooter)(({ theme }) => {
+    return css `
+    margin-top: auto;
+    &:not(${StyledNodeTemplate} ${StyledNodeTemplate} > &) {
+      padding: ${theme.base.spacing};
+    }
+  `;
+});
+StyledNodeTemplateFooter.defaultProps = defaultThemeProp;
+export const StyledNodeTemplateContent = styled.div(({ theme }) => {
+    return css `
+    padding: ${theme.base.spacing};
+    padding-block-start: 0;
+    max-height: calc(5 * ${theme.base.spacing});
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  `;
+});
+StyledNodeTemplateContent.defaultProps = defaultThemeProp;
+export const StyledAdditionalData = styled.dl `
+  overflow: hidden;
+`;
+export const StyledAdditionalDataItem = styled.div(({ theme }) => {
+    return css `
+    padding: 0 calc(0.5 * ${theme.base.spacing});
+    background-color: ${theme.base.palette['secondary-background']};
+    border-radius: ${theme.base[borderRadius]};
+  `;
+});
+StyledAdditionalDataItem.defaultProps = defaultThemeProp;
+export const StyledTextWithEllipsis = styled(Text)(() => {
+    return css `
+    overflow: hidden;
+    width: auto;
+    display: inline-block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  `;
+});
+StyledTextWithEllipsis.defaultProps = defaultThemeProp;
+export const StyledErrorIcon = styled(Icon)(({ theme }) => {
+    return css `
+    color: ${theme.base.palette.urgent};
+    margin-inline-end: ${theme.base.spacing};
+  `;
+});
+StyledErrorIcon.defaultProps = defaultThemeProp;
+//# sourceMappingURL=NodeTemplate.styles.js.map

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

@@ -0,0 +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, Icon, Flex } from '@pega/cosmos-react-core';\n\nconst borderRadius = 'border-radius';\nexport const StyledCircle = styled.div<{ bgColor: string }>(({ theme, bgColor }) => {\n  return css`\n    height: calc(4 * ${theme.base.spacing});\n    width: calc(4 * ${theme.base.spacing});\n    background: ${bgColor};\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 StyledStartNode = styled(Flex)`\n  height: inherit;\n`;\n\ninterface StyledIconProps {\n  bgColor?: string;\n  color?: string;\n}\n\nexport const StyledIcon = styled.div<StyledIconProps>(({ theme, bgColor, color }) => {\n  const {\n    base: { 'border-radius': baseRadius },\n    components: {\n      icon: { 'border-radius-multiplier': borderRadiusMultiplier }\n    }\n  } = theme;\n  return css`\n    min-height: calc(4 * ${theme.base.spacing});\n    min-width: calc(4 * ${theme.base.spacing});\n    margin-inline-end: ${theme.base.spacing};\n    ${bgColor && `background-color: ${bgColor};`}\n    ${color && `color: ${color};`}\n    border-radius: calc(0.5 * ${borderRadiusMultiplier} * ${baseRadius});\n  `;\n});\n\nStyledIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNodeTemplateHeader = styled.header(({ theme }) => {\n  return css`\n    white-space: nowrap;\n    button {\n      border-radius: ${theme.base[borderRadius]};\n    }\n  `;\n});\n\nStyledNodeTemplateHeader.defaultProps = defaultThemeProp;\n\nexport const StyledText = styled(Text)<{ error?: string | undefined }>(({ error, theme }) => {\n  return css`\n    padding-inline-end: ${theme.base.spacing};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: ${error\n      ? `calc(0.9 * ${theme.base['content-width'].xs})`\n      : theme.base['content-width'].xs};\n  `;\n});\n\nStyledText.defaultProps = defaultThemeProp;\n\nexport const StyledNodeTemplate = styled(Card)<{ highlight: boolean }>(({ highlight, theme }) => {\n  return css`\n    width: calc(35 * ${theme.base.spacing});\n    height: calc(15 * ${theme.base.spacing});\n    align-self: center;\n    overflow: hidden;\n    background-color: ${theme.base.palette['primary-background']};\n    border: calc(0.25 * ${theme.base.spacing}) solid transparent;\n\n    ${highlight &&\n    css`\n      &&& {\n        color: ${theme.base.colors.black};\n        background-color: ${theme.base.colors.red['extra-light']};\n        border-radius: calc(0.25 * ${theme.base.spacing});\n        box-shadow: 0 0 0 calc(0.25 * ${theme.base.spacing}) ${theme.base.colors.red.medium};\n      }\n    `}\n\n    &&& {\n      border-radius: ${theme.base[borderRadius]};\n    }\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    :focus-visible {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n\n    &[aria-current='location'] {\n      box-shadow: none;\n      border: calc(0.25 * ${theme.base.spacing}) solid ${theme.base.palette.interactive};\n      cursor: pointer;\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 StyledNodeTemplateContent = styled.div(({ theme }) => {\n  return css`\n    padding: ${theme.base.spacing};\n    padding-block-start: 0;\n    max-height: calc(5 * ${theme.base.spacing});\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\nStyledNodeTemplateContent.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[borderRadius]};\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\nexport const StyledErrorIcon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.urgent};\n    margin-inline-end: ${theme.base.spacing};\n  `;\n});\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n"]}

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

@@ -0,0 +1,5 @@
+import type { NodeProps, NodeComponentProps, NodeEvents } from './Node.types';
+export declare const DefaultNode: ({ id, label, type, description, additionalData, actions, onActionClick, onClick, onDelete, reference, error, selected, referencedNode, active, onKeyDown, ...restProps }: NodeComponentProps & NodeEvents) => import("react/jsx-runtime").JSX.Element;
+export declare const StartNode: ({ type, label, active, ...restProps }: NodeProps & NodeEvents) => import("react/jsx-runtime").JSX.Element;
+export declare const EndNode: ({ type, label, active, ...restProps }: NodeProps & NodeEvents) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NodeTemplates.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NodeTemplates.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplates.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EACV,SAAS,EACT,kBAAkB,EAElB,UAAU,EACX,MAAM,cAAc,CAAC;AAmCtB,eAAO,MAAM,WAAW,GAAI,0KAiBzB,kBAAkB,GAAG,UAAU,4CAsJjC,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,uCAKvB,SAAS,GAAG,UAAU,4CAoCxB,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,uCAA+C,SAAS,GAAG,UAAU,4CAmC5F,CAAC"}

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

@@ -0,0 +1,130 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useRef, useEffect, useState } from 'react';
+import { MenuButton, Flex, useI18n, Text, VisuallyHiddenText, useUID, useTheme } from '@pega/cosmos-react-core';
+import { generateDynamicTestId } from '../../../utils/utils';
+import FlowModellerContext from '../FlowModellerContext';
+import IconTile from '../../IconTile';
+import { flowModellerConstants } from '../constants';
+import { StyledCircle, StyledIcon, StyledNodeTemplateHeader, StyledNodeTemplateContent, StyledNodeTemplate, StyledText, StyledTextWithEllipsis, StyledAdditionalData, StyledNodeTemplateFooter, StyledAdditionalDataItem, StyledErrorIcon, StyledStartNode } from './NodeTemplate.styles';
+const focusable = 0;
+const notFocusable = -1;
+const MetaListItem = ({ label, value }) => {
+    return (_jsxs(Flex, { as: StyledAdditionalDataItem, container: { wrap: 'nowrap', pad: 0.25, gap: 0.25 }, item: { grow: 1 }, children: [_jsx(StyledTextWithEllipsis, { as: 'dd', children: label }), _jsx(Text, { role: 'separator', variant: 'secondary', "aria-hidden": 'true', children: ":\u00A0" }), _jsx(StyledTextWithEllipsis, { as: 'dt', children: value })] }));
+};
+const MetaList = ({ metadata }) => {
+    return (_jsxs(Flex, { as: StyledAdditionalData, container: { wrap: 'nowrap', colGap: 1, rowGap: 0.25 }, children: [metadata?.map((data, index) => index >= 2 ? undefined : _jsx(MetaListItem, { ...data }, data.id)), metadata && metadata.length > 2 && (_jsx(Flex, { as: StyledAdditionalDataItem, container: { pad: 0.25 }, item: { grow: 1, shrink: 0 }, children: _jsx(StyledTextWithEllipsis, { as: 'dt', children: `+${metadata.length - 2}` }) }))] }));
+};
+export const DefaultNode = ({ id, label, type, description, additionalData, actions, onActionClick, onClick, onDelete, reference, error, selected, referencedNode, active = false, onKeyDown, ...restProps }) => {
+    const t = useI18n();
+    const nodeRef = useRef(null);
+    const actionMenuRef = useRef(null);
+    const [nodeFocusable, setNodeFocusable] = useState(notFocusable);
+    const [menuButtonFocusable, setMenuButtonFocusable] = useState(notFocusable);
+    useEffect(() => {
+        if (active) {
+            nodeRef.current?.focus();
+        }
+    }, [active]);
+    const actionItems = actions?.map(actionItem => {
+        return {
+            id: actionItem.id,
+            primary: actionItem.text,
+            onClick: (actionId, e) => {
+                e.stopPropagation();
+                onActionClick?.({ actionId, nodeId: id }, e);
+            },
+            onKeyDown: (e) => e.stopPropagation()
+        };
+    });
+    const references = referencedNode && [
+        { id: referencedNode?.id, label: t('go_to_noun'), value: referencedNode?.label }
+    ];
+    if (onDelete !== undefined) {
+        actionItems?.push({
+            id: 'flowmodeller-delete-node',
+            primary: t('delete'),
+            onClick: (actionId, e) => {
+                e.stopPropagation();
+                onDelete?.({ actionId, nodeId: id }, e);
+            },
+            onKeyDown: (e) => e.stopPropagation()
+        });
+    }
+    const handleEnterKeyDown = (e) => {
+        if ((e.key === 'Enter' && !e.shiftKey) || e.key === ' ') {
+            onClick?.(id, e);
+            e.preventDefault();
+        }
+        else if (e.key === 'A' && e.shiftKey) {
+            actionMenuRef.current?.focus();
+        }
+        else {
+            onKeyDown(e);
+        }
+    };
+    const { readOnly, highlights } = useContext(FlowModellerContext);
+    const menuTestId = generateDynamicTestId([label]);
+    return (_jsxs(StyledNodeTemplate, { ...restProps, ref: nodeRef, "aria-label": error ? t('step_name_error', [label]) : label, "aria-current": selected ? 'location' : undefined, onClick: (e) => {
+            if (!e.detail) {
+                return;
+            }
+            onClick?.(id, e);
+            nodeRef.current?.scrollIntoView({
+                block: 'center',
+                behavior: 'smooth'
+            });
+        }, onFocus: () => {
+            setNodeFocusable(focusable);
+        }, onBlur: () => {
+            setNodeFocusable(notFocusable);
+        }, onKeyDown: handleEnterKeyDown, id: `modeller-node-${id}`, highlight: !!highlights?.nodes?.[id], tabIndex: nodeFocusable, children: [_jsxs(Flex, { as: StyledNodeTemplateHeader, container: { alignItems: 'center', pad: 1, justify: 'between' }, children: [_jsxs(Flex, { container: { alignItems: 'center' }, children: [error && _jsx(StyledErrorIcon, { name: 'warn-solid' }), _jsx(Flex, { as: StyledIcon, container: { inline: true, alignItems: 'center', justify: 'center' }, id: id, children: _jsx(IconTile, { name: type?.icon.name, category: type?.icon.category, label: type?.icon.label, inverted: type?.icon.inverted, size: 'l' }) }), _jsx(StyledText, { variant: 'h4', error: error, children: label })] }), !readOnly && actionItems && (_jsx(MenuButton, { testId: menuTestId, ref: actionMenuRef, tabIndex: menuButtonFocusable, portal: true, variant: 'simple', text: t('actions'), icon: 'more', iconOnly: true, onFocus: (e) => {
+                            setMenuButtonFocusable(focusable);
+                            e.stopPropagation();
+                        }, onBlur: (e) => {
+                            setMenuButtonFocusable(notFocusable);
+                            e.stopPropagation();
+                        }, onClick: (e) => {
+                            e.stopPropagation();
+                        }, onKeyDown: (e) => {
+                            if (nodeFocusable === notFocusable && e.key === 'Escape') {
+                                nodeRef.current?.focus();
+                            }
+                            e.stopPropagation();
+                        }, menu: menuButtonFocusable === focusable ? { items: actionItems } : undefined }))] }), description && _jsx(StyledNodeTemplateContent, { children: description }), additionalData && type.minConnectors > 0 && (_jsx(StyledNodeTemplateFooter, { children: _jsx(MetaList, { metadata: additionalData }) })), references && type.minConnectors < 1 && (_jsx(StyledNodeTemplateFooter, { children: _jsx(MetaList, { metadata: references }) }))] }));
+};
+export const StartNode = ({ type, label, active = false, ...restProps }) => {
+    const nodeRef = useRef(null);
+    const descriptionId = useUID();
+    const t = useI18n();
+    const { base: { palette } } = useTheme();
+    useEffect(() => {
+        if (active) {
+            nodeRef.current?.focus();
+            nodeRef.current?.scrollIntoView({
+                block: 'center',
+                behavior: 'auto'
+            });
+        }
+    }, [active]);
+    return (_jsxs(StyledStartNode, { container: { direction: 'column', alignItems: 'center', justify: 'end', rowGap: 1 }, children: [label && _jsx(Text, { variant: 'h4', children: label }), _jsx(StyledCircle, { ...restProps, ref: nodeRef, bgColor: palette.success, tabIndex: 0, "aria-label": label || flowModellerConstants.START_NODE, "aria-describedby": descriptionId, role: 'button', children: _jsx(VisuallyHiddenText, { id: descriptionId, children: t('use_arrow_keys') }) })] }));
+};
+export const EndNode = ({ type, label, active = false, ...restProps }) => {
+    const nodeRef = useRef(null);
+    const [endNodeFocusable, setEndNodeFocusable] = useState(notFocusable);
+    const { base: { palette } } = useTheme();
+    useEffect(() => {
+        if (active) {
+            nodeRef.current?.focus();
+            nodeRef.current?.scrollIntoView({
+                block: 'center',
+                behavior: 'auto'
+            });
+        }
+    }, [active]);
+    return (_jsxs(Flex, { container: { direction: 'column', alignItems: 'center', justify: 'start', rowGap: 1 }, children: [_jsx(StyledCircle, { ...restProps, ref: nodeRef, bgColor: palette.urgent, tabIndex: endNodeFocusable, "aria-label": label || flowModellerConstants.END_NODE, role: 'button', onFocus: () => {
+                    setEndNodeFocusable(focusable);
+                }, onBlur: () => {
+                    setEndNodeFocusable(notFocusable);
+                } }), label && _jsx(Text, { variant: 'h4', children: label })] }));
+};
+//# sourceMappingURL=NodeTemplates.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NodeTemplates.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useRef, useEffect, useState } from 'react';\nimport type { MouseEvent, KeyboardEvent } from 'react';\n\nimport {\n  MenuButton,\n  Flex,\n  useI18n,\n  Text,\n  VisuallyHiddenText,\n  useUID,\n  useTheme\n} from '@pega/cosmos-react-core';\n\nimport { generateDynamicTestId } from '../../../utils/utils';\nimport FlowModellerContext from '../FlowModellerContext';\nimport IconTile from '../../IconTile';\nimport { flowModellerConstants } from '../constants';\n\nimport {\n  StyledCircle,\n  StyledIcon,\n  StyledNodeTemplateHeader,\n  StyledNodeTemplateContent,\n  StyledNodeTemplate,\n  StyledText,\n  StyledTextWithEllipsis,\n  StyledAdditionalData,\n  StyledNodeTemplateFooter,\n  StyledAdditionalDataItem,\n  StyledErrorIcon,\n  StyledStartNode\n} from './NodeTemplate.styles';\nimport type {\n  NodeProps,\n  NodeComponentProps,\n  AdditionalDataItemProps,\n  NodeEvents\n} from './Node.types';\n\nconst focusable = 0;\nconst notFocusable = -1;\n\nconst MetaListItem = ({ label, value }: AdditionalDataItemProps) => {\n  return (\n    <Flex\n      as={StyledAdditionalDataItem}\n      container={{ wrap: 'nowrap', pad: 0.25, gap: 0.25 }}\n      item={{ grow: 1 }}\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  );\n};\n\nconst MetaList = ({ metadata }: { metadata: NodeProps['additionalData'] }) => {\n  return (\n    <Flex as={StyledAdditionalData} container={{ wrap: 'nowrap', colGap: 1, rowGap: 0.25 }}>\n      {metadata?.map((data: AdditionalDataItemProps, index: number) =>\n        index >= 2 ? undefined : <MetaListItem key={data.id} {...data} />\n      )}\n      {metadata && metadata.length > 2 && (\n        <Flex as={StyledAdditionalDataItem} container={{ pad: 0.25 }} item={{ grow: 1, shrink: 0 }}>\n          <StyledTextWithEllipsis as='dt'>{`+${metadata.length - 2}`}</StyledTextWithEllipsis>\n        </Flex>\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  reference,\n  error,\n  selected,\n  referencedNode,\n  active = false,\n  onKeyDown,\n  ...restProps\n}: NodeComponentProps & NodeEvents) => {\n  const t = useI18n();\n\n  const nodeRef = useRef<HTMLDivElement>(null);\n  const actionMenuRef = useRef<HTMLButtonElement>(null);\n  const [nodeFocusable, setNodeFocusable] = useState(notFocusable);\n  const [menuButtonFocusable, setMenuButtonFocusable] = useState(notFocusable);\n\n  useEffect(() => {\n    if (active) {\n      nodeRef.current?.focus();\n    }\n  }, [active]);\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      onKeyDown: (e: MouseEvent) => e.stopPropagation()\n    };\n  });\n\n  const references = referencedNode && [\n    { id: referencedNode?.id, label: t('go_to_noun'), value: referencedNode?.label }\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      onKeyDown: (e: MouseEvent) => e.stopPropagation()\n    });\n  }\n\n  const handleEnterKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if ((e.key === 'Enter' && !e.shiftKey) || e.key === ' ') {\n      onClick?.(id, e);\n      e.preventDefault();\n    } else if (e.key === 'A' && e.shiftKey) {\n      actionMenuRef.current?.focus();\n    } else {\n      onKeyDown(e);\n    }\n  };\n\n  const { readOnly, highlights } = useContext(FlowModellerContext);\n  const menuTestId = generateDynamicTestId([label]);\n\n  return (\n    <StyledNodeTemplate\n      {...restProps}\n      ref={nodeRef}\n      aria-label={error ? t('step_name_error', [label]) : label}\n      aria-current={selected ? 'location' : undefined}\n      onClick={(e: MouseEvent) => {\n        if (!e.detail) {\n          return;\n        }\n        onClick?.(id, e);\n        nodeRef.current?.scrollIntoView({\n          block: 'center',\n          behavior: 'smooth'\n        });\n      }}\n      onFocus={() => {\n        setNodeFocusable(focusable);\n      }}\n      onBlur={() => {\n        setNodeFocusable(notFocusable);\n      }}\n      onKeyDown={handleEnterKeyDown}\n      id={`modeller-node-${id}`}\n      highlight={!!highlights?.nodes?.[id]}\n      tabIndex={nodeFocusable}\n    >\n      <Flex\n        as={StyledNodeTemplateHeader}\n        container={{ alignItems: 'center', pad: 1, justify: 'between' }}\n      >\n        <Flex container={{ alignItems: 'center' }}>\n          {error && <StyledErrorIcon name='warn-solid' />}\n          <Flex\n            as={StyledIcon}\n            container={{ inline: true, alignItems: 'center', justify: 'center' }}\n            id={id}\n          >\n            <IconTile\n              name={type?.icon.name}\n              category={type?.icon.category}\n              label={type?.icon.label}\n              inverted={type?.icon.inverted}\n              size='l'\n            />\n          </Flex>\n          <StyledText variant='h4' error={error}>\n            {label}\n          </StyledText>\n        </Flex>\n        {!readOnly && actionItems && (\n          <MenuButton\n            testId={menuTestId}\n            ref={actionMenuRef}\n            tabIndex={menuButtonFocusable}\n            portal\n            variant='simple'\n            text={t('actions')}\n            icon='more'\n            iconOnly\n            onFocus={(e: KeyboardEvent) => {\n              setMenuButtonFocusable(focusable);\n              e.stopPropagation();\n            }}\n            onBlur={(e: KeyboardEvent) => {\n              setMenuButtonFocusable(notFocusable);\n              e.stopPropagation();\n            }}\n            onClick={(e: MouseEvent) => {\n              e.stopPropagation();\n            }}\n            onKeyDown={(e: KeyboardEvent) => {\n              if (nodeFocusable === notFocusable && e.key === 'Escape') {\n                nodeRef.current?.focus();\n              }\n              e.stopPropagation();\n            }}\n            menu={menuButtonFocusable === focusable ? { items: actionItems } : undefined}\n          />\n        )}\n      </Flex>\n      {description && <StyledNodeTemplateContent>{description}</StyledNodeTemplateContent>}\n      {additionalData && type.minConnectors > 0 && (\n        <StyledNodeTemplateFooter>\n          <MetaList metadata={additionalData} />\n        </StyledNodeTemplateFooter>\n      )}\n      {references && type.minConnectors < 1 && (\n        <StyledNodeTemplateFooter>\n          <MetaList metadata={references} />\n        </StyledNodeTemplateFooter>\n      )}\n    </StyledNodeTemplate>\n  );\n};\n\nexport const StartNode = ({\n  type,\n  label,\n  active = false,\n  ...restProps\n}: NodeProps & NodeEvents) => {\n  const nodeRef = useRef<HTMLDivElement>(null);\n  const descriptionId = useUID();\n  const t = useI18n();\n  const {\n    base: { palette }\n  } = useTheme();\n\n  useEffect(() => {\n    if (active) {\n      nodeRef.current?.focus();\n      nodeRef.current?.scrollIntoView({\n        block: 'center',\n        behavior: 'auto'\n      });\n    }\n  }, [active]);\n\n  return (\n    <StyledStartNode\n      container={{ direction: 'column', alignItems: 'center', justify: 'end', rowGap: 1 }}\n    >\n      {label && <Text variant='h4'>{label}</Text>}\n      <StyledCircle\n        {...restProps}\n        ref={nodeRef}\n        bgColor={palette.success}\n        tabIndex={0}\n        aria-label={label || flowModellerConstants.START_NODE}\n        aria-describedby={descriptionId}\n        role='button'\n      >\n        <VisuallyHiddenText id={descriptionId}>{t('use_arrow_keys')}</VisuallyHiddenText>\n      </StyledCircle>\n    </StyledStartNode>\n  );\n};\n\nexport const EndNode = ({ type, label, active = false, ...restProps }: NodeProps & NodeEvents) => {\n  const nodeRef = useRef<HTMLDivElement>(null);\n  const [endNodeFocusable, setEndNodeFocusable] = useState(notFocusable);\n  const {\n    base: { palette }\n  } = useTheme();\n  useEffect(() => {\n    if (active) {\n      nodeRef.current?.focus();\n      nodeRef.current?.scrollIntoView({\n        block: 'center',\n        behavior: 'auto'\n      });\n    }\n  }, [active]);\n\n  return (\n    <Flex container={{ direction: 'column', alignItems: 'center', justify: 'start', rowGap: 1 }}>\n      <StyledCircle\n        {...restProps}\n        ref={nodeRef}\n        bgColor={palette.urgent}\n        tabIndex={endNodeFocusable}\n        aria-label={label || flowModellerConstants.END_NODE}\n        role='button'\n        onFocus={() => {\n          setEndNodeFocusable(focusable);\n        }}\n        onBlur={() => {\n          setEndNodeFocusable(notFocusable);\n        }}\n      />\n      {label && <Text variant='h4'>{label}</Text>}\n    </Flex>\n  );\n};\n"]}

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

@@ -0,0 +1,10 @@
+import type { NodeEvents, NodeLabels } from './Node/Node.types';
+import type { PlottedGraphNode } from './Renderer/Utils/GraphLayout';
+type NodeProps = PlottedGraphNode & NodeEvents & NodeLabels;
+declare const _default: import("react").NamedExoticComponent<PlottedGraphNode<unknown> & NodeEvents & NodeLabels> & {
+    readonly type: (props: NodeProps) => import("react/jsx-runtime").JSX.Element | null;
+} & {
+    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly string[]>;
+};
+export default _default;
+//# 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":"AAOA,OAAO,KAAK,EAEV,UAAU,EACV,UAAU,EAGX,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGrE,KAAK,SAAS,GAAG,gBAAgB,GAAG,UAAU,GAAG,UAAU,CAAC;;2BAWlC,SAAS;;;;AA8EnC,wBAAiD"}

package/lib/components/FlowModeller/Node.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useCallback } from 'react';
+import { useTestIds, withTestIds } from '@pega/cosmos-react-core';
+import { generateDynamicTestId } from '../../utils/utils';
+import { START_NODETYPE, END_NODETYPE } from './Node/Node.types';
+import { DefaultNode, EndNode, StartNode } from './Node/NodeTemplates';
+import { getNodeTestIds } from './FlowModeller.test-ids';
+const isNodeComponentData = (d) => typeof d === 'object' && d !== null;
+const isFlowNodeType = (t) => t !== undefined && 'id' in t && 'icon' in t && 'defaults' in t;
+const isFullNodeProps = (n) => typeof n === 'object' && n !== null && 'id' in n && 'label' in n;
+const Node = memo((props) => {
+    const { id, type: rawType, label = '', fromNodeLabel, toNodeLabel, data: rawData, referencedNode: rawReferencedNode, ...restProps } = props;
+    const data = isNodeComponentData(rawData) ? rawData : undefined;
+    const type = isFlowNodeType(rawType) ? rawType : undefined;
+    const referencedNode = isFullNodeProps(rawReferencedNode) ? rawReferencedNode : undefined;
+    let stepTestID = '';
+    if (type?.id === START_NODETYPE.id || type?.id === END_NODETYPE.id) {
+        stepTestID = generateDynamicTestId([label]);
+    }
+    else {
+        stepTestID = generateDynamicTestId([
+            fromNodeLabel ? `from-${fromNodeLabel}` : 'from-merge',
+            toNodeLabel ? `to-${toNodeLabel}` : 'to-branch-end',
+            label
+        ]);
+    }
+    const testIds = useTestIds(stepTestID, getNodeTestIds);
+    const clickHandler = useCallback((nodeId, e) => {
+        data?.onClick?.(nodeId, e);
+    }, [data?.onClick]);
+    if (!type) {
+        return null;
+    }
+    if (type.id === START_NODETYPE.id) {
+        return (_jsx(StartNode, { "data-testid": testIds.root, ...restProps, id: id, type: type, label: label.toUpperCase() }));
+    }
+    if (type.id === END_NODETYPE.id) {
+        return (_jsx(EndNode, { "data-testid": testIds.root, ...restProps, id: id, type: type, label: label.toUpperCase() }));
+    }
+    return (_jsx(DefaultNode, { "data-testid": testIds.root, ...restProps, id: id, label: label, type: type, referencedNode: referencedNode, onClick: clickHandler, onDelete: data?.onDelete, onActionClick: data?.onActionClick, actions: data?.actions, selected: data?.selected }));
+});
+export default withTestIds(Node, getNodeTestIds);
+//# 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":"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","sourcesContent":["import { memo, useCallback } from 'react';\nimport type { MouseEvent, KeyboardEvent } from 'react';\n\nimport { useTestIds, withTestIds } from '@pega/cosmos-react-core';\n\nimport { generateDynamicTestId } from '../../utils/utils';\n\nimport type {\n  NodeComponentData,\n  NodeEvents,\n  NodeLabels,\n  NodeProps as FullNodeProps,\n  NodeType as FlowNodeType\n} from './Node/Node.types';\nimport { START_NODETYPE, END_NODETYPE } from './Node/Node.types';\nimport { DefaultNode, EndNode, StartNode } from './Node/NodeTemplates';\nimport type { PlottedGraphNode } from './Renderer/Utils/GraphLayout';\nimport { getNodeTestIds } from './FlowModeller.test-ids';\n\ntype NodeProps = PlottedGraphNode & NodeEvents & NodeLabels;\n\nconst isNodeComponentData = (d: unknown): d is NodeComponentData =>\n  typeof d === 'object' && d !== null;\n\nconst isFlowNodeType = (t: PlottedGraphNode['type']): t is FlowNodeType =>\n  t !== undefined && 'id' in t && 'icon' in t && 'defaults' in t;\n\nconst isFullNodeProps = (n: unknown): n is FullNodeProps =>\n  typeof n === 'object' && n !== null && 'id' in n && 'label' in n;\n\nconst Node = memo((props: NodeProps) => {\n  const {\n    id,\n    type: rawType,\n    label = '',\n    fromNodeLabel,\n    toNodeLabel,\n    data: rawData,\n    referencedNode: rawReferencedNode,\n    ...restProps\n  } = props;\n\n  const data = isNodeComponentData(rawData) ? rawData : undefined;\n  const type = isFlowNodeType(rawType) ? rawType : undefined;\n  const referencedNode = isFullNodeProps(rawReferencedNode) ? rawReferencedNode : undefined;\n\n  let stepTestID = '';\n  if (type?.id === START_NODETYPE.id || type?.id === END_NODETYPE.id) {\n    stepTestID = generateDynamicTestId([label]);\n  } else {\n    stepTestID = generateDynamicTestId([\n      fromNodeLabel ? `from-${fromNodeLabel}` : 'from-merge',\n      toNodeLabel ? `to-${toNodeLabel}` : 'to-branch-end',\n      label\n    ]);\n  }\n  const testIds = useTestIds(stepTestID, getNodeTestIds);\n\n  const clickHandler = useCallback(\n    (nodeId: string, e: MouseEvent<Element> | KeyboardEvent<Element>) => {\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 (\n      <StartNode\n        data-testid={testIds.root}\n        {...restProps}\n        id={id}\n        type={type}\n        label={label.toUpperCase()}\n      />\n    );\n  }\n  if (type.id === END_NODETYPE.id) {\n    return (\n      <EndNode\n        data-testid={testIds.root}\n        {...restProps}\n        id={id}\n        type={type}\n        label={label.toUpperCase()}\n      />\n    );\n  }\n  return (\n    <DefaultNode\n      data-testid={testIds.root}\n      {...restProps}\n      id={id}\n      label={label}\n      type={type}\n      referencedNode={referencedNode}\n      onClick={clickHandler}\n      onDelete={data?.onDelete}\n      onActionClick={data?.onActionClick}\n      actions={data?.actions}\n      selected={data?.selected}\n    />\n  );\n});\n\nexport default withTestIds(Node, getNodeTestIds);\n"]}

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

@@ -0,0 +1,4 @@
+import type { RendererProps } from './Renderer.types';
+declare const Renderer: ({ graphData, connector: Connector, node: Node, selectedNodeId }: RendererProps) => import("react/jsx-runtime").JSX.Element;
+export default Renderer;
+//# sourceMappingURL=Renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Renderer.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AA8CtD,QAAA,MAAM,QAAQ,GAAI,iEAKf,aAAa,4CAuPf,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,198 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { Flex, defaultThemeProp } from '@pega/cosmos-react-core';
+import FlowModellerContext from '../FlowModellerContext';
+import GraphLayout from './Utils/GraphLayout';
+import { DirectedGraph } from './Utils/Graph';
+import GraphTraversal from './Utils/GraphTraversal';
+import { getParentConvergence, groupByPosition, arrowUpKey, arrowDownKey, horizontalNavigation } from './Utils/RendererUtils';
+const StyledWrapper = styled.div `
+  position: relative;
+  width: 100%;
+  height: 100%;
+`;
+const StyledContentWrapper = styled.div(({ theme }) => {
+    return css `
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background-color: ${theme.base.palette['app-background']};
+    > svg {
+      background-color: ${theme.base.palette['app-background']};
+    }
+  `;
+});
+StyledContentWrapper.defaultProps = defaultThemeProp;
+const StyledNodeWrapper = styled(StyledContentWrapper)(() => {
+    return css `
+    width: var(--width);
+    height: var(--height);
+    transform: translate(var(--xPos), var(--yPos));
+  `;
+});
+const StyledRootNodeWrapper = styled.foreignObject `
+  overflow: visible;
+`;
+const Renderer = ({ graphData, connector: Connector, node: Node, selectedNodeId }) => {
+    // apply the plotted positions
+    const { readOnly } = useContext(FlowModellerContext);
+    const graph = new DirectedGraph(graphData);
+    const rootNode = useMemo(() => {
+        const rootNodeId = GraphTraversal.findRootNode(graph);
+        return rootNodeId ? graph.getNode(rootNodeId) : undefined;
+    }, [graph]);
+    const graphDimensions = GraphLayout.plot(graphData, readOnly);
+    const positions = useMemo(() => groupByPosition(graph), [graph]);
+    const [activeGraphItemId, setActiveGraphItemId] = useState();
+    const rendererRef = useRef(null);
+    const prevItem = useRef();
+    const prevSelectedNodeId = useRef();
+    const activeGraphItem = useMemo(() => [...graph.getNodes(), ...graph.getConnectors()].find(data => {
+        return data.id === activeGraphItemId;
+    }), [activeGraphItemId, graph]);
+    useEffect(() => {
+        // Set PREVIOUS Connector - If current focused item is a node, we are saving the previous connector id.
+        let inConnectors = activeGraphItem ? graph.getInConnectors(activeGraphItem.id) : [];
+        if (activeGraphItem &&
+            'dimensions' in activeGraphItem &&
+            activeGraphItem.dimensions?.height &&
+            inConnectors.length) {
+            const prevNode = graph.getNode(inConnectors[0].fromNodeId);
+            inConnectors = !prevNode.dimensions.height
+                ? graph.getInConnectors(prevNode.id)
+                : inConnectors;
+            const parentConvergence = getParentConvergence(prevNode, graph);
+            if (inConnectors.length) {
+                prevItem.current =
+                    !prevNode.dimensions.height && inConnectors.length > 1 && parentConvergence
+                        ? parentConvergence.parent.id
+                        : inConnectors[0].id;
+            }
+        }
+        /** DELETE NODE - If no item is found and prevItem has a value then we assume that a node has been deleted
+         * set activeGraphItemId to prevItem and reset it
+         */
+        if (!activeGraphItem && prevItem.current && !selectedNodeId) {
+            const convergence = GraphTraversal.getConvergenceData(graphData, prevItem.current);
+            setActiveGraphItemId(convergence ? graph.getOutConnectors(convergence.nodeId)[0].id : prevItem.current);
+            prevItem.current = undefined;
+        }
+    }, [activeGraphItemId, graph]);
+    const elementScrollIntoView = (focusElementId) => {
+        const isConnector = graphData?.connectors?.find(item => item.id === focusElementId);
+        const elementRef = isConnector
+            ? rendererRef.current?.querySelector(`[id='${focusElementId}']`)?.nextElementSibling
+            : rendererRef.current?.querySelector(`[id='modeller-node-${focusElementId}']`);
+        if (elementRef) {
+            setTimeout(() => {
+                elementRef.scrollIntoView({
+                    block: 'center',
+                    behavior: 'smooth'
+                });
+            });
+        }
+    };
+    const onKeyDown = (e) => {
+        if (activeGraphItemId &&
+            activeGraphItem &&
+            ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key) &&
+            !selectedNodeId) {
+            let focusElementId;
+            switch (e.key) {
+                case 'ArrowUp':
+                    focusElementId = arrowUpKey({
+                        activeGraphItemId,
+                        graph,
+                        activeGraphItem,
+                        readOnly: readOnly ?? false
+                    });
+                    break;
+                case 'ArrowDown':
+                    focusElementId = arrowDownKey({
+                        activeGraphItemId,
+                        graph,
+                        activeGraphItem,
+                        readOnly: readOnly ?? false
+                    });
+                    break;
+                case 'ArrowLeft':
+                    focusElementId = horizontalNavigation({
+                        keyEvent: 'ArrowLeft',
+                        positions,
+                        activeGraphItem,
+                        graph,
+                        readOnly
+                    });
+                    break;
+                case 'ArrowRight':
+                    focusElementId = horizontalNavigation({
+                        keyEvent: 'ArrowRight',
+                        positions,
+                        activeGraphItem,
+                        graph,
+                        readOnly
+                    });
+                    break;
+                default:
+                    break;
+            }
+            if (focusElementId) {
+                setActiveGraphItemId(focusElementId);
+                elementScrollIntoView(focusElementId);
+            }
+        }
+    };
+    /** Saving the last selectedNodeId in a variable
+     * so on close of workbench the focus can return to the node
+     * might be removed in future when workbench handles re-focusing the target element on close
+     */
+    useEffect(() => {
+        if (selectedNodeId) {
+            prevSelectedNodeId.current = selectedNodeId;
+        }
+        else if (!selectedNodeId && prevSelectedNodeId.current) {
+            setActiveGraphItemId(prevSelectedNodeId.current);
+            prevSelectedNodeId.current = undefined;
+        }
+    }, [selectedNodeId]);
+    const getNodeLabel = (target) => {
+        if (target) {
+            const targetNode = graphData.nodes.find(nodeItem => nodeItem.id === target);
+            return targetNode && 'label' in targetNode ? String(targetNode.label) : undefined;
+        }
+        return target;
+    };
+    return (_jsxs(StyledWrapper, { ref: rendererRef, children: [_jsx(StyledContentWrapper, { children: _jsxs("svg", { width: graphDimensions.width, height: graphDimensions.height, viewBox: `0 0 ${graphDimensions.width} ${graphDimensions.height}`, children: [rootNode && (_jsx(StyledRootNodeWrapper, { width: rootNode.dimensions.width, height: rootNode.dimensions.height, x: rootNode.position.x, y: rootNode.position.y, children: _jsx(Node, { ...rootNode, active: rootNode.id === activeGraphItemId, onFocus: () => {
+                                    setActiveGraphItemId(rootNode.id);
+                                }, onKeyDown: onKeyDown }) })), graphData.connectors.map(item => {
+                            const fromNodeLabel = getNodeLabel(item.fromNodeId);
+                            const toNodeLabel = getNodeLabel(item.toNodeId);
+                            return (_createElement(Connector, { ...item, fromNodeLabel: fromNodeLabel, toNodeLabel: toNodeLabel, key: item.id, active: item.id === activeGraphItemId, onFocus: () => {
+                                    setActiveGraphItemId(item.id);
+                                }, onKeyDown: onKeyDown }));
+                        })] }) }), _jsx(StyledContentWrapper, { children: graphData.nodes
+                    .filter(node => node.id !== rootNode?.id)
+                    .map(item => {
+                    let referencedNode;
+                    if (item.type?.minConnectors === 0 && item.reference) {
+                        referencedNode = graph.getNode(item.reference);
+                    }
+                    const prevNodeId = graphData.connectors.find(connector => connector.toNodeId === item.id)?.fromNodeId;
+                    const fromNodeLabel = getNodeLabel(prevNodeId);
+                    const nextNodeId = graphData.connectors.find(connector => connector.fromNodeId === item.id)?.toNodeId;
+                    const toNodeLabel = getNodeLabel(nextNodeId);
+                    return (_jsx(Flex, { as: StyledNodeWrapper, id: item.id, style: {
+                            '--width': `${item.dimensions.width}px`,
+                            '--height': `${item.dimensions.height}px`,
+                            '--xPos': `${item.position.x}px`,
+                            '--yPos': `${item.position.y}px`
+                        }, container: { justify: 'center' }, children: _jsx(Node, { ...item, fromNodeLabel: fromNodeLabel, toNodeLabel: toNodeLabel, referencedNode: referencedNode, active: item.id === activeGraphItemId, onFocus: () => {
+                                setActiveGraphItemId(item.id);
+                            }, onKeyDown: onKeyDown }) }, item.id));
+                }) })] }));
+};
+export default Renderer;
+//# sourceMappingURL=Renderer.js.map