@pega/cosmos-react-build 3.0.0-dev.4.2 → 3.0.0-dev.7.0

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

@@ -1,8 +1,7 @@
-import { ReactNode, Ref } from 'react';
-import { StandardTreeProps, DrawerProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import { Dispatch, ReactNode, Ref, SetStateAction } from 'react';
+import { StandardTreeProps, DrawerProps, NoChildrenProp, AvatarProps, OmitStrict } from '@pega/cosmos-react-core';
 import { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
 import { AppBarProps } from '../AppHeader';
-import { VisualProps } from '../Visual';
 export interface AppShellProps extends NoChildrenProp {
     main: ReactNode;
     appInfo: AppInfoProps;
@@ -25,15 +24,13 @@ export interface UtilItem {
 }
 export interface AppInfoProps {
     text: string;
-    visual: VisualProps;
+    visual?: OmitStrict<AvatarProps, 'name' | 'shape' | 'size' | 'status'>;
+    meta?: string[];
 }
 export interface AppShellContextValue {
     drawerOpen: boolean;
-    setDrawerOpen: (open: boolean) => void;
-    setDrawerData: (data: {
-        label: string;
-        id: string;
-    }) => void;
+    setDrawerOpen: Dispatch<SetStateAction<boolean>>;
+    setDrawerData: Dispatch<SetStateAction<UtilItem | undefined>>;
     drawerData?: {
         label: string;
         id: string;

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzF,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAE5F,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,YAAY,CAAC;IACtB,SAAS,EAAE,WAAW,CAAC;IACvB,UAAU,EAAE,iBAAiB,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/B,WAAW,EAAE,CAAC,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,cAAc,GAAG,aAAa,GAAG,eAAe,GAAG,cAAc,CAAC,CAAC;IAC9F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,aAAa,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7D,UAAU,CAAC,EAAE;QACX,KAAK,EAAE,MAAM,CAAC;QACd,EAAE,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,QAAQ,EAAE,OAAO,oBAAoB,CAAC,MAAM,OAAO,oBAAoB,CAAC,CAAC;CAC1E"}
+{"version":3,"file":"AppShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEjE,OAAO,EACL,iBAAiB,EACjB,WAAW,EACX,cAAc,EACd,WAAW,EACX,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAE5F,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,YAAY,CAAC;IACtB,SAAS,EAAE,WAAW,CAAC;IACvB,UAAU,EAAE,iBAAiB,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/B,WAAW,EAAE,CAAC,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,cAAc,GAAG,aAAa,GAAG,eAAe,GAAG,cAAc,CAAC,CAAC;IAC9F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,UAAU,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC,CAAC;IACvE,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;CACjB;AAED,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACjD,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,GAAG,SAAS,CAAC,CAAC,CAAC;IAC9D,UAAU,CAAC,EAAE;QACX,KAAK,EAAE,MAAM,CAAC;QACd,EAAE,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,QAAQ,EAAE,OAAO,oBAAoB,CAAC,MAAM,OAAO,oBAAoB,CAAC,CAAC;CAC1E"}

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport { StandardTreeProps, DrawerProps, NoChildrenProp } from '@pega/cosmos-react-core';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\n\nimport { AppBarProps } from '../AppHeader';\nimport { VisualProps } from '../Visual';\n\nexport interface AppShellProps extends NoChildrenProp {\n  main: ReactNode;\n  appInfo: AppInfoProps;\n  appHeader: AppBarProps;\n  navigation: StandardTreeProps;\n  hideNav?: boolean;\n  utils?: UtilsProps;\n  ref?: Ref<HTMLElement>;\n}\n\nexport interface UtilsProps {\n  items: UtilItem[];\n  currentItemId?: UtilItem['id'];\n  onItemClick: (id: UtilItem['id']) => void;\n  drawer?: Pick<DrawerProps, 'onBeforeOpen' | 'onAfterOpen' | 'onBeforeClose' | 'onAfterClose'>;\n  devMode?: boolean;\n}\n\nexport interface UtilItem {\n  id: string;\n  label: string;\n}\n\nexport interface AppInfoProps {\n  text: string;\n  visual: VisualProps;\n}\n\nexport interface AppShellContextValue {\n  drawerOpen: boolean;\n  setDrawerOpen: (open: boolean) => void;\n  setDrawerData: (data: { label: string; id: string }) => void;\n  drawerData?: {\n    label: string;\n    id: string;\n  };\n  navState: typeof expandCollapseStates[keyof typeof expandCollapseStates];\n}\n"]}
+{"version":3,"file":"AppShell.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Dispatch, ReactNode, Ref, SetStateAction } from 'react';\n\nimport {\n  StandardTreeProps,\n  DrawerProps,\n  NoChildrenProp,\n  AvatarProps,\n  OmitStrict\n} from '@pega/cosmos-react-core';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\n\nimport { AppBarProps } from '../AppHeader';\n\nexport interface AppShellProps extends NoChildrenProp {\n  main: ReactNode;\n  appInfo: AppInfoProps;\n  appHeader: AppBarProps;\n  navigation: StandardTreeProps;\n  hideNav?: boolean;\n  utils?: UtilsProps;\n  ref?: Ref<HTMLElement>;\n}\n\nexport interface UtilsProps {\n  items: UtilItem[];\n  currentItemId?: UtilItem['id'];\n  onItemClick: (id: UtilItem['id']) => void;\n  drawer?: Pick<DrawerProps, 'onBeforeOpen' | 'onAfterOpen' | 'onBeforeClose' | 'onAfterClose'>;\n  devMode?: boolean;\n}\n\nexport interface UtilItem {\n  id: string;\n  label: string;\n}\n\nexport interface AppInfoProps {\n  text: string;\n  visual?: OmitStrict<AvatarProps, 'name' | 'shape' | 'size' | 'status'>;\n  meta?: string[];\n}\n\nexport interface AppShellContextValue {\n  drawerOpen: boolean;\n  setDrawerOpen: Dispatch<SetStateAction<boolean>>;\n  setDrawerData: Dispatch<SetStateAction<UtilItem | undefined>>;\n  drawerData?: {\n    label: string;\n    id: string;\n  };\n  navState: typeof expandCollapseStates[keyof typeof expandCollapseStates];\n}\n"]}

package/lib/components/DynamicContentEditor/DynamicContentEditor.js

@@ -49,7 +49,7 @@ const DynamicContentEditor = forwardRef(({ form: { dynamicContentPicker, onSubmi
     const modalProps = {
         children: dynamicContentPicker,
         heading: t('rte_insert_field'),
-        actions: (_jsxs(_Fragment, { children: [_jsx(Button, { variant: 'secondary', onClick: () => modalMethods.current?.dismiss(), children: t('cancel') }, void 0), _jsx(Button, { variant: 'primary', onClick: () => onSubmit(insertField), children: t('submit') }, void 0)] }, void 0)),
+        actions: (_jsxs(_Fragment, { children: [_jsx(Button, { variant: 'secondary', onClick: () => modalMethods.current?.dismiss(), children: t('cancel') }), _jsx(Button, { variant: 'primary', onClick: () => onSubmit(insertField), children: t('submit') })] })),
         center: true,
         onAfterClose: () => {
             setBookmark(undefined);
@@ -134,7 +134,7 @@ const DynamicContentEditor = forwardRef(({ form: { dynamicContentPicker, onSubmi
             getBoundingClientRect: () => {
                 return currentCursorPosition;
             }
-        }, placement: 'bottom-start', children: fieldItems && (_jsx(Menu, { ...fieldMenu, as: StyledSearchPopover, focusControlEl: editorRef.current?.element?.querySelector('[role="textbox"]') || undefined, mode: 'action', onItemClick: findAndRenameField }, void 0)) }, void 0));
+        }, placement: 'bottom-start', children: fieldItems && (_jsx(Menu, { ...fieldMenu, as: StyledSearchPopover, focusControlEl: editorRef.current?.element?.querySelector('[role="textbox"]') || undefined, mode: 'action', onItemClick: findAndRenameField })) }));
     useEffect(() => {
         if (currentElementContent)
             modalMethods.current = create(Modal, modalProps);
@@ -207,7 +207,7 @@ const DynamicContentEditor = forwardRef(({ form: { dynamicContentPicker, onSubmi
             ], onInit: setEditor, onChange: onEditorChange, onBlur: () => {
                 onBlur?.();
                 hidePopover();
-            }, onKeyDown: onKeyDown, children: fieldSelectionPopover }, void 0) }, void 0));
+            }, onKeyDown: onKeyDown, children: fieldSelectionPopover }) }));
 });
 export default DynamicContentEditor;
 //# sourceMappingURL=DynamicContentEditor.js.map

package/lib/components/DynamicContentEditor/DynamicContentEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicContentEditor.js","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useContext,\n  useRef,\n  useEffect,\n  useState\n} from 'react';\nimport styled from 'styled-components';\nimport { Bookmark, Editor as TinymceEditor, EditorSelection } from 'tinymce';\n\nimport { Editor, EditorProps } from '@pega/cosmos-react-rte';\nimport {\n  Button,\n  defaultThemeProp,\n  ForwardProps,\n  Menu,\n  MenuItemProps,\n  MenuProps,\n  Modal,\n  ModalManagerContext,\n  ModalMethods,\n  Popover,\n  PropsWithDefaults,\n  StyledPopover,\n  useConsolidatedRef,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport { getKeyCommand } from '@pega/cosmos-react-rte/lib/components/RichTextEditor/Toolbar/utils';\n\nimport { DynamicContentEditorProps, ItemType } from './DynamicContentEditor.types';\nimport PegaCustomElement from './PegaCustomElement';\n\ntype DynamicContentEditorPropsWithDefaults = PropsWithDefaults<DynamicContentEditorProps>;\n\nconst StyledDynamicContentEditor = styled.div<DynamicContentEditorPropsWithDefaults>``;\n\nexport const StyledSearchPopover = styled(StyledPopover)`\n  min-width: 20rem;\n`;\n\nStyledDynamicContentEditor.defaultProps = defaultThemeProp;\n\nconst DynamicContentEditor: FunctionComponent<DynamicContentEditorProps & ForwardProps> =\n  forwardRef(\n    (\n      {\n        form: { dynamicContentPicker, onSubmit },\n        onActiveFieldChange,\n        label,\n        toolbar,\n        fieldItems,\n        defaultValue,\n        onBlur,\n        ...restProps\n      }: PropsWithoutRef<DynamicContentEditorProps>,\n      ref: DynamicContentEditorProps['ref']\n    ) => {\n      const { create } = useContext(ModalManagerContext);\n      const t = useI18n();\n\n      const modalMethods = useRef<ModalMethods>();\n      const [editor, setEditor] = useState<TinymceEditor | undefined>();\n      const [bookmark, setBookmark] = useState<Bookmark | undefined>();\n      const [fieldMenu, setFieldMenu] = useState<MenuProps>({ items: fieldItems || [] });\n      const [currentElementContent, setCurrentElementContent] = useState<string | null>(null);\n      const [currentCursorPosition, setCurrentCursorPosition] = useState({\n        bottom: 0,\n        height: 0,\n        left: 0,\n        right: 0,\n        top: 0,\n        width: 0,\n        x: 0,\n        y: 0,\n        toJSON: () => {}\n      });\n      const [showFieldsPopover, setShowFieldsPopover] = useState<boolean>(false);\n\n      const fieldPopoverRef = useRef<HTMLDivElement>(null);\n      const editorRef = useConsolidatedRef(ref);\n\n      const tooltip = getKeyCommand(\n        navigator.appVersion.includes('Mac'),\n        ({ ctrl }) => `${t('rte_insert_field')} (${ctrl}/)`\n      );\n\n      const insertField = (field: ItemType) => {\n        if (!editor) return;\n\n        const fieldContent = `<pega-reference role=\"button\" contenteditable=\"false\" data-rule-type='field' data-rule-id=${field.id}>${field.text}</pega-reference>`;\n        if (bookmark) {\n          editor.selection.moveToBookmark(bookmark);\n          editor.selection.setContent(fieldContent);\n        } else {\n          editor.insertContent(fieldContent);\n        }\n\n        modalMethods.current?.dismiss();\n      };\n\n      const modalProps = {\n        children: dynamicContentPicker,\n        heading: t('rte_insert_field'),\n        actions: (\n          <>\n            <Button variant='secondary' onClick={() => modalMethods.current?.dismiss()}>\n              {t('cancel')}\n            </Button>\n            <Button variant='primary' onClick={() => onSubmit(insertField)}>\n              {t('submit')}\n            </Button>\n          </>\n        ),\n        center: true,\n        onAfterClose: () => {\n          setBookmark(undefined);\n          setCurrentElementContent('');\n          onActiveFieldChange({ id: '', text: '' });\n        },\n        onBeforeOpen: () => {\n          if (currentElementContent)\n            onActiveFieldChange({ id: currentElementContent, text: currentElementContent });\n        }\n      };\n\n      const findAndRenameField = (fieldId: string) => {\n        if (!editor || !fieldItems) return;\n\n        const selectedRange = editor.selection.getRng();\n        const endOffset = selectedRange.endOffset;\n        const stringToSearch = selectedRange.commonAncestorContainer.nodeValue?.slice(0, endOffset);\n        if (stringToSearch === undefined) return;\n\n        const splitSearch = stringToSearch.split(' ');\n        const fieldString = splitSearch[splitSearch.length - 1];\n        const range = document.createRange();\n\n        const startPos = stringToSearch.lastIndexOf(fieldString);\n        const endPos = startPos + fieldString.length;\n        range.setStart(selectedRange.commonAncestorContainer, startPos);\n        range.setEnd(selectedRange.commonAncestorContainer, endPos);\n        document.getSelection()?.removeAllRanges();\n        document.getSelection()?.addRange(range);\n        const selectedFieldId = fieldItems.find(item => item.id === fieldId)?.id;\n        if (selectedFieldId) {\n          editor.selection.setContent(\n            `<pega-reference contenteditable=\"false\" data-rule-type=\"field\" data-rule-id=${selectedFieldId}>${selectedFieldId}</pega-reference>`\n          );\n          setShowFieldsPopover(false);\n        }\n      };\n\n      const hidePopover = () => {\n        if (fieldPopoverRef) setShowFieldsPopover(false);\n      };\n\n      const filterFieldMenu = (searchString: string) => {\n        setShowFieldsPopover(true);\n        setFieldMenu({ items: fieldItems || [] });\n        if (/\\s/.test(searchString)) {\n          setShowFieldsPopover(false);\n          return;\n        }\n        if (searchString && fieldItems) {\n          const newFieldItems: MenuItemProps[] = fieldItems.filter(item =>\n            item.id.toLowerCase().startsWith(searchString.toLowerCase())\n          );\n          if (newFieldItems) {\n            setShowFieldsPopover(true);\n            setFieldMenu({ items: newFieldItems });\n          } else setShowFieldsPopover(false);\n        }\n      };\n\n      const updateBookmarkAndCurrentElement = (editorSelection: EditorSelection) => {\n        const targetEl = editorSelection.getNode();\n        const fieldValue = targetEl.getAttribute('data-rule-id');\n        setBookmark(editorSelection.getBookmark());\n        setCurrentElementContent(fieldValue);\n      };\n\n      const handleElementClick = ({ target }: MouseEvent) => {\n        if (editor && target instanceof HTMLElement && target.tagName === 'PEGA-REFERENCE') {\n          updateBookmarkAndCurrentElement(editor.selection);\n        }\n        hidePopover();\n      };\n\n      const onInsertField = (incEditor: TinymceEditor) => {\n        const targetEl = incEditor.selection.getNode();\n        if (targetEl.tagName === 'PEGA-REFERENCE') {\n          updateBookmarkAndCurrentElement(incEditor.selection);\n        } else {\n          modalMethods.current = create(Modal, modalProps);\n        }\n      };\n\n      const isPegaRefActive = (incEditor: TinymceEditor) => {\n        const targetEl = incEditor.selection.getNode();\n        return targetEl.tagName === 'PEGA-REFERENCE';\n      };\n\n      const fieldSelectionPopover = (\n        <Popover\n          show={showFieldsPopover}\n          strategy='fixed'\n          ref={fieldPopoverRef}\n          target={{\n            getBoundingClientRect: () => {\n              return currentCursorPosition;\n            }\n          }}\n          placement='bottom-start'\n        >\n          {fieldItems && (\n            <Menu\n              {...fieldMenu}\n              as={StyledSearchPopover}\n              focusControlEl={\n                editorRef.current?.element?.querySelector('[role=\"textbox\"]') || undefined\n              }\n              mode='action'\n              onItemClick={findAndRenameField}\n            />\n          )}\n        </Popover>\n      );\n\n      useEffect(() => {\n        if (currentElementContent) modalMethods.current = create(Modal, modalProps);\n      }, [currentElementContent]);\n\n      useEffect(() => {\n        editorRef.current?.element?.addEventListener('click', handleElementClick);\n        editorRef.current?.insertHtml(defaultValue?.trim() || '', false);\n        return () => {\n          editorRef.current?.element?.removeEventListener('click', handleElementClick);\n        };\n      }, [editor, editorRef.current]);\n\n      useEffect(() => {\n        if (modalMethods.current) {\n          modalMethods.current.update(modalProps);\n        }\n      }, [modalProps]);\n\n      const onEditorChange: EditorProps['onChange'] = (formEditor?: TinymceEditor) => {\n        if (formEditor) {\n          const targetEl = formEditor?.selection?.getBoundingClientRect();\n          const { left = 0, top = 0 } = targetEl;\n          setCurrentCursorPosition({\n            ...formEditor?.selection?.getBoundingClientRect(),\n            x: left,\n            y: top,\n            toJSON: () => {}\n          });\n        }\n\n        if (formEditor?.selection?.isCollapsed()) {\n          // get the full line string\n          const selectedRange = formEditor.selection.getRng();\n          const endOffset = selectedRange.endOffset;\n          const stringToSearch = selectedRange.commonAncestorContainer.nodeValue?.slice(\n            0,\n            endOffset\n          );\n          const fieldString = stringToSearch?.split(' ')[stringToSearch?.split(' ').length - 1];\n          if (\n            fieldString?.startsWith('@') &&\n            fieldString.indexOf('@') === fieldString.lastIndexOf('@')\n          ) {\n            filterFieldMenu(fieldString.slice(1));\n          } else setShowFieldsPopover(false);\n        }\n      };\n\n      const onKeyDown: EditorProps['onKeyDown'] = event => {\n        if (\n          (event?.key === 'Enter' || event?.key === 'ArrowLeft' || event?.key === 'ArrowRight') &&\n          !!fieldPopoverRef.current\n        ) {\n          event?.preventDefault();\n        }\n        if (event?.key === 'Escape' && !!fieldPopoverRef.current) {\n          hidePopover();\n        }\n      };\n\n      return (\n        <>\n          <Editor\n            ref={editorRef}\n            {...restProps}\n            label={label}\n            toolbar={toolbar}\n            customComponents={[\n              {\n                customElement: PegaCustomElement,\n                name: 'pega-reference'\n              }\n            ]}\n            customActions={[\n              {\n                icon: 'code',\n                text: tooltip,\n                onMouseDown: () => {\n                  modalMethods.current = create(Modal, modalProps);\n                },\n                active: isPegaRefActive,\n                shortcut: {\n                  pattern: 'meta+191',\n                  description: tooltip,\n                  command: onInsertField\n                }\n              }\n            ]}\n            onInit={setEditor}\n            onChange={onEditorChange}\n            onBlur={() => {\n              onBlur?.();\n              hidePopover();\n            }}\n            onKeyDown={onKeyDown}\n          >\n            {fieldSelectionPopover}\n          </Editor>\n        </>\n      );\n    }\n  );\n\nexport default DynamicContentEditor;\n"]}
+{"version":3,"file":"DynamicContentEditor.js","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAGV,UAAU,EACV,MAAM,EACN,SAAS,EACT,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAE,MAAM,EAAe,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EACL,MAAM,EACN,gBAAgB,EAEhB,IAAI,EAGJ,KAAK,EACL,mBAAmB,EAEnB,OAAO,EAEP,aAAa,EACb,kBAAkB,EAClB,OAAO,EACR,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,oEAAoE,CAAC;AAGnG,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AAIpD,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAuC,EAAE,CAAC;AAEvF,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA;;CAEvD,CAAC;AAEF,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3D,MAAM,oBAAoB,GACxB,UAAU,CACR,CACE,EACE,IAAI,EAAE,EAAE,oBAAoB,EAAE,QAAQ,EAAE,EACxC,mBAAmB,EACnB,KAAK,EACL,OAAO,EACP,UAAU,EACV,YAAY,EACZ,MAAM,EACN,GAAG,SAAS,EAC+B,EAC7C,GAAqC,EACrC,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IACnD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,YAAY,GAAG,MAAM,EAAgB,CAAC;IAC5C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAA6B,CAAC;IAClE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,EAAwB,CAAC;IACjE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAY,EAAE,KAAK,EAAE,UAAU,IAAI,EAAE,EAAE,CAAC,CAAC;IACnF,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IACxF,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,QAAQ,CAAC;QACjE,MAAM,EAAE,CAAC;QACT,MAAM,EAAE,CAAC;QACT,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;QACR,GAAG,EAAE,CAAC;QACN,KAAK,EAAE,CAAC;QACR,CAAC,EAAE,CAAC;QACJ,CAAC,EAAE,CAAC;QACJ,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;KACjB,CAAC,CAAC;IACH,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAE3E,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACrD,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE1C,MAAM,OAAO,GAAG,aAAa,CAC3B,SAAS,CAAC,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAC,EACpC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,kBAAkB,CAAC,KAAK,IAAI,IAAI,CACpD,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,KAAe,EAAE,EAAE;QACtC,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,MAAM,YAAY,GAAG,6FAA6F,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC,IAAI,mBAAmB,CAAC;QAC5J,IAAI,QAAQ,EAAE;YACZ,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;YAC1C,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;SAC3C;aAAM;YACL,MAAM,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;SACpC;QAED,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC;IAClC,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG;QACjB,QAAQ,EAAE,oBAAoB;QAC9B,OAAO,EAAE,CAAC,CAAC,kBAAkB,CAAC;QAC9B,OAAO,EAAE,CACP,8BACE,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,YACvE,CAAC,CAAC,QAAQ,CAAC,GACL,EACT,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,YAC3D,CAAC,CAAC,QAAQ,CAAC,GACL,IACR,CACJ;QACD,MAAM,EAAE,IAAI;QACZ,YAAY,EAAE,GAAG,EAAE;YACjB,WAAW,CAAC,SAAS,CAAC,CAAC;YACvB,wBAAwB,CAAC,EAAE,CAAC,CAAC;YAC7B,mBAAmB,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;QAC5C,CAAC;QACD,YAAY,EAAE,GAAG,EAAE;YACjB,IAAI,qBAAqB;gBACvB,mBAAmB,CAAC,EAAE,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,qBAAqB,EAAE,CAAC,CAAC;QACpF,CAAC;KACF,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,OAAe,EAAE,EAAE;QAC7C,IAAI,CAAC,MAAM,IAAI,CAAC,UAAU;YAAE,OAAO;QAEnC,MAAM,aAAa,GAAG,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC;QAChD,MAAM,SAAS,GAAG,aAAa,CAAC,SAAS,CAAC;QAC1C,MAAM,cAAc,GAAG,aAAa,CAAC,uBAAuB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;QAC5F,IAAI,cAAc,KAAK,SAAS;YAAE,OAAO;QAEzC,MAAM,WAAW,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC9C,MAAM,WAAW,GAAG,WAAW,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACxD,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;QAErC,MAAM,QAAQ,GAAG,cAAc,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;QACzD,MAAM,MAAM,GAAG,QAAQ,GAAG,WAAW,CAAC,MAAM,CAAC;QAC7C,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,uBAAuB,EAAE,QAAQ,CAAC,CAAC;QAChE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,uBAAuB,EAAE,MAAM,CAAC,CAAC;QAC5D,QAAQ,CAAC,YAAY,EAAE,EAAE,eAAe,EAAE,CAAC;QAC3C,QAAQ,CAAC,YAAY,EAAE,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;QACzC,MAAM,eAAe,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE,EAAE,CAAC;QACzE,IAAI,eAAe,EAAE;YACnB,MAAM,CAAC,SAAS,CAAC,UAAU,CACzB,+EAA+E,eAAe,IAAI,eAAe,mBAAmB,CACrI,CAAC;YACF,oBAAoB,CAAC,KAAK,CAAC,CAAC;SAC7B;IACH,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,eAAe;YAAE,oBAAoB,CAAC,KAAK,CAAC,CAAC;IACnD,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,YAAoB,EAAE,EAAE;QAC/C,oBAAoB,CAAC,IAAI,CAAC,CAAC;QAC3B,YAAY,CAAC,EAAE,KAAK,EAAE,UAAU,IAAI,EAAE,EAAE,CAAC,CAAC;QAC1C,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE;YAC3B,oBAAoB,CAAC,KAAK,CAAC,CAAC;YAC5B,OAAO;SACR;QACD,IAAI,YAAY,IAAI,UAAU,EAAE;YAC9B,MAAM,aAAa,GAAoB,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAC9D,IAAI,CAAC,EAAE,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC,CAC7D,CAAC;YACF,IAAI,aAAa,EAAE;gBACjB,oBAAoB,CAAC,IAAI,CAAC,CAAC;gBAC3B,YAAY,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC,CAAC;aACxC;;gBAAM,oBAAoB,CAAC,KAAK,CAAC,CAAC;SACpC;IACH,CAAC,CAAC;IAEF,MAAM,+BAA+B,GAAG,CAAC,eAAgC,EAAE,EAAE;QAC3E,MAAM,QAAQ,GAAG,eAAe,CAAC,OAAO,EAAE,CAAC;QAC3C,MAAM,UAAU,GAAG,QAAQ,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;QACzD,WAAW,CAAC,eAAe,CAAC,WAAW,EAAE,CAAC,CAAC;QAC3C,wBAAwB,CAAC,UAAU,CAAC,CAAC;IACvC,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,EAAE,MAAM,EAAc,EAAE,EAAE;QACpD,IAAI,MAAM,IAAI,MAAM,YAAY,WAAW,IAAI,MAAM,CAAC,OAAO,KAAK,gBAAgB,EAAE;YAClF,+BAA+B,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;SACnD;QACD,WAAW,EAAE,CAAC;IAChB,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,SAAwB,EAAE,EAAE;QACjD,MAAM,QAAQ,GAAG,SAAS,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;QAC/C,IAAI,QAAQ,CAAC,OAAO,KAAK,gBAAgB,EAAE;YACzC,+BAA+B,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;SACtD;aAAM;YACL,YAAY,CAAC,OAAO,GAAG,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;SAClD;IACH,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,SAAwB,EAAE,EAAE;QACnD,MAAM,QAAQ,GAAG,SAAS,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;QAC/C,OAAO,QAAQ,CAAC,OAAO,KAAK,gBAAgB,CAAC;IAC/C,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG,CAC5B,KAAC,OAAO,IACN,IAAI,EAAE,iBAAiB,EACvB,QAAQ,EAAC,OAAO,EAChB,GAAG,EAAE,eAAe,EACpB,MAAM,EAAE;YACN,qBAAqB,EAAE,GAAG,EAAE;gBAC1B,OAAO,qBAAqB,CAAC;YAC/B,CAAC;SACF,EACD,SAAS,EAAC,cAAc,YAEvB,UAAU,IAAI,CACb,KAAC,IAAI,OACC,SAAS,EACb,EAAE,EAAE,mBAAmB,EACvB,cAAc,EACZ,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,aAAa,CAAC,kBAAkB,CAAC,IAAI,SAAS,EAE5E,IAAI,EAAC,QAAQ,EACb,WAAW,EAAE,kBAAkB,GAC/B,CACH,GACO,CACX,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,qBAAqB;YAAE,YAAY,CAAC,OAAO,GAAG,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;IAC9E,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAE5B,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;QAC1E,SAAS,CAAC,OAAO,EAAE,UAAU,CAAC,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;QACjE,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,mBAAmB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;QAC/E,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;IAEhC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;SACzC;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,cAAc,GAA4B,CAAC,UAA0B,EAAE,EAAE;QAC7E,IAAI,UAAU,EAAE;YACd,MAAM,QAAQ,GAAG,UAAU,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAC;YAChE,MAAM,EAAE,IAAI,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,QAAQ,CAAC;YACvC,wBAAwB,CAAC;gBACvB,GAAG,UAAU,EAAE,SAAS,EAAE,qBAAqB,EAAE;gBACjD,CAAC,EAAE,IAAI;gBACP,CAAC,EAAE,GAAG;gBACN,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;aACjB,CAAC,CAAC;SACJ;QAED,IAAI,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE;YACxC,2BAA2B;YAC3B,MAAM,aAAa,GAAG,UAAU,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC;YACpD,MAAM,SAAS,GAAG,aAAa,CAAC,SAAS,CAAC;YAC1C,MAAM,cAAc,GAAG,aAAa,CAAC,uBAAuB,CAAC,SAAS,EAAE,KAAK,CAC3E,CAAC,EACD,SAAS,CACV,CAAC;YACF,MAAM,WAAW,GAAG,cAAc,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,cAAc,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YACtF,IACE,WAAW,EAAE,UAAU,CAAC,GAAG,CAAC;gBAC5B,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,WAAW,CAAC,WAAW,CAAC,GAAG,CAAC,EACzD;gBACA,eAAe,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;aACvC;;gBAAM,oBAAoB,CAAC,KAAK,CAAC,CAAC;SACpC;IACH,CAAC,CAAC;IAEF,MAAM,SAAS,GAA6B,KAAK,CAAC,EAAE;QAClD,IACE,CAAC,KAAK,EAAE,GAAG,KAAK,OAAO,IAAI,KAAK,EAAE,GAAG,KAAK,WAAW,IAAI,KAAK,EAAE,GAAG,KAAK,YAAY,CAAC;YACrF,CAAC,CAAC,eAAe,CAAC,OAAO,EACzB;YACA,KAAK,EAAE,cAAc,EAAE,CAAC;SACzB;QACD,IAAI,KAAK,EAAE,GAAG,KAAK,QAAQ,IAAI,CAAC,CAAC,eAAe,CAAC,OAAO,EAAE;YACxD,WAAW,EAAE,CAAC;SACf;IACH,CAAC,CAAC;IAEF,OAAO,CACL,4BACE,KAAC,MAAM,IACL,GAAG,EAAE,SAAS,KACV,SAAS,EACb,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE;gBAChB;oBACE,aAAa,EAAE,iBAAiB;oBAChC,IAAI,EAAE,gBAAgB;iBACvB;aACF,EACD,aAAa,EAAE;gBACb;oBACE,IAAI,EAAE,MAAM;oBACZ,IAAI,EAAE,OAAO;oBACb,WAAW,EAAE,GAAG,EAAE;wBAChB,YAAY,CAAC,OAAO,GAAG,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;oBACnD,CAAC;oBACD,MAAM,EAAE,eAAe;oBACvB,QAAQ,EAAE;wBACR,OAAO,EAAE,UAAU;wBACnB,WAAW,EAAE,OAAO;wBACpB,OAAO,EAAE,aAAa;qBACvB;iBACF;aACF,EACD,MAAM,EAAE,SAAS,EACjB,QAAQ,EAAE,cAAc,EACxB,MAAM,EAAE,GAAG,EAAE;gBACX,MAAM,EAAE,EAAE,CAAC;gBACX,WAAW,EAAE,CAAC;YAChB,CAAC,EACD,SAAS,EAAE,SAAS,YAEnB,qBAAqB,GACf,GACR,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,eAAe,oBAAoB,CAAC","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useContext,\n  useRef,\n  useEffect,\n  useState\n} from 'react';\nimport styled from 'styled-components';\nimport { Bookmark, Editor as TinymceEditor, EditorSelection } from 'tinymce';\n\nimport { Editor, EditorProps } from '@pega/cosmos-react-rte';\nimport {\n  Button,\n  defaultThemeProp,\n  ForwardProps,\n  Menu,\n  MenuItemProps,\n  MenuProps,\n  Modal,\n  ModalManagerContext,\n  ModalMethods,\n  Popover,\n  PropsWithDefaults,\n  StyledPopover,\n  useConsolidatedRef,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport { getKeyCommand } from '@pega/cosmos-react-rte/lib/components/RichTextEditor/Toolbar/utils';\n\nimport { DynamicContentEditorProps, ItemType } from './DynamicContentEditor.types';\nimport PegaCustomElement from './PegaCustomElement';\n\ntype DynamicContentEditorPropsWithDefaults = PropsWithDefaults<DynamicContentEditorProps>;\n\nconst StyledDynamicContentEditor = styled.div<DynamicContentEditorPropsWithDefaults>``;\n\nexport const StyledSearchPopover = styled(StyledPopover)`\n  min-width: 20rem;\n`;\n\nStyledDynamicContentEditor.defaultProps = defaultThemeProp;\n\nconst DynamicContentEditor: FunctionComponent<DynamicContentEditorProps & ForwardProps> =\n  forwardRef(\n    (\n      {\n        form: { dynamicContentPicker, onSubmit },\n        onActiveFieldChange,\n        label,\n        toolbar,\n        fieldItems,\n        defaultValue,\n        onBlur,\n        ...restProps\n      }: PropsWithoutRef<DynamicContentEditorProps>,\n      ref: DynamicContentEditorProps['ref']\n    ) => {\n      const { create } = useContext(ModalManagerContext);\n      const t = useI18n();\n\n      const modalMethods = useRef<ModalMethods>();\n      const [editor, setEditor] = useState<TinymceEditor | undefined>();\n      const [bookmark, setBookmark] = useState<Bookmark | undefined>();\n      const [fieldMenu, setFieldMenu] = useState<MenuProps>({ items: fieldItems || [] });\n      const [currentElementContent, setCurrentElementContent] = useState<string | null>(null);\n      const [currentCursorPosition, setCurrentCursorPosition] = useState({\n        bottom: 0,\n        height: 0,\n        left: 0,\n        right: 0,\n        top: 0,\n        width: 0,\n        x: 0,\n        y: 0,\n        toJSON: () => {}\n      });\n      const [showFieldsPopover, setShowFieldsPopover] = useState<boolean>(false);\n\n      const fieldPopoverRef = useRef<HTMLDivElement>(null);\n      const editorRef = useConsolidatedRef(ref);\n\n      const tooltip = getKeyCommand(\n        navigator.appVersion.includes('Mac'),\n        ({ ctrl }) => `${t('rte_insert_field')} (${ctrl}/)`\n      );\n\n      const insertField = (field: ItemType) => {\n        if (!editor) return;\n\n        const fieldContent = `<pega-reference role=\"button\" contenteditable=\"false\" data-rule-type='field' data-rule-id=${field.id}>${field.text}</pega-reference>`;\n        if (bookmark) {\n          editor.selection.moveToBookmark(bookmark);\n          editor.selection.setContent(fieldContent);\n        } else {\n          editor.insertContent(fieldContent);\n        }\n\n        modalMethods.current?.dismiss();\n      };\n\n      const modalProps = {\n        children: dynamicContentPicker,\n        heading: t('rte_insert_field'),\n        actions: (\n          <>\n            <Button variant='secondary' onClick={() => modalMethods.current?.dismiss()}>\n              {t('cancel')}\n            </Button>\n            <Button variant='primary' onClick={() => onSubmit(insertField)}>\n              {t('submit')}\n            </Button>\n          </>\n        ),\n        center: true,\n        onAfterClose: () => {\n          setBookmark(undefined);\n          setCurrentElementContent('');\n          onActiveFieldChange({ id: '', text: '' });\n        },\n        onBeforeOpen: () => {\n          if (currentElementContent)\n            onActiveFieldChange({ id: currentElementContent, text: currentElementContent });\n        }\n      };\n\n      const findAndRenameField = (fieldId: string) => {\n        if (!editor || !fieldItems) return;\n\n        const selectedRange = editor.selection.getRng();\n        const endOffset = selectedRange.endOffset;\n        const stringToSearch = selectedRange.commonAncestorContainer.nodeValue?.slice(0, endOffset);\n        if (stringToSearch === undefined) return;\n\n        const splitSearch = stringToSearch.split(' ');\n        const fieldString = splitSearch[splitSearch.length - 1];\n        const range = document.createRange();\n\n        const startPos = stringToSearch.lastIndexOf(fieldString);\n        const endPos = startPos + fieldString.length;\n        range.setStart(selectedRange.commonAncestorContainer, startPos);\n        range.setEnd(selectedRange.commonAncestorContainer, endPos);\n        document.getSelection()?.removeAllRanges();\n        document.getSelection()?.addRange(range);\n        const selectedFieldId = fieldItems.find(item => item.id === fieldId)?.id;\n        if (selectedFieldId) {\n          editor.selection.setContent(\n            `<pega-reference contenteditable=\"false\" data-rule-type=\"field\" data-rule-id=${selectedFieldId}>${selectedFieldId}</pega-reference>`\n          );\n          setShowFieldsPopover(false);\n        }\n      };\n\n      const hidePopover = () => {\n        if (fieldPopoverRef) setShowFieldsPopover(false);\n      };\n\n      const filterFieldMenu = (searchString: string) => {\n        setShowFieldsPopover(true);\n        setFieldMenu({ items: fieldItems || [] });\n        if (/\\s/.test(searchString)) {\n          setShowFieldsPopover(false);\n          return;\n        }\n        if (searchString && fieldItems) {\n          const newFieldItems: MenuItemProps[] = fieldItems.filter(item =>\n            item.id.toLowerCase().startsWith(searchString.toLowerCase())\n          );\n          if (newFieldItems) {\n            setShowFieldsPopover(true);\n            setFieldMenu({ items: newFieldItems });\n          } else setShowFieldsPopover(false);\n        }\n      };\n\n      const updateBookmarkAndCurrentElement = (editorSelection: EditorSelection) => {\n        const targetEl = editorSelection.getNode();\n        const fieldValue = targetEl.getAttribute('data-rule-id');\n        setBookmark(editorSelection.getBookmark());\n        setCurrentElementContent(fieldValue);\n      };\n\n      const handleElementClick = ({ target }: MouseEvent) => {\n        if (editor && target instanceof HTMLElement && target.tagName === 'PEGA-REFERENCE') {\n          updateBookmarkAndCurrentElement(editor.selection);\n        }\n        hidePopover();\n      };\n\n      const onInsertField = (incEditor: TinymceEditor) => {\n        const targetEl = incEditor.selection.getNode();\n        if (targetEl.tagName === 'PEGA-REFERENCE') {\n          updateBookmarkAndCurrentElement(incEditor.selection);\n        } else {\n          modalMethods.current = create(Modal, modalProps);\n        }\n      };\n\n      const isPegaRefActive = (incEditor: TinymceEditor) => {\n        const targetEl = incEditor.selection.getNode();\n        return targetEl.tagName === 'PEGA-REFERENCE';\n      };\n\n      const fieldSelectionPopover = (\n        <Popover\n          show={showFieldsPopover}\n          strategy='fixed'\n          ref={fieldPopoverRef}\n          target={{\n            getBoundingClientRect: () => {\n              return currentCursorPosition;\n            }\n          }}\n          placement='bottom-start'\n        >\n          {fieldItems && (\n            <Menu\n              {...fieldMenu}\n              as={StyledSearchPopover}\n              focusControlEl={\n                editorRef.current?.element?.querySelector('[role=\"textbox\"]') || undefined\n              }\n              mode='action'\n              onItemClick={findAndRenameField}\n            />\n          )}\n        </Popover>\n      );\n\n      useEffect(() => {\n        if (currentElementContent) modalMethods.current = create(Modal, modalProps);\n      }, [currentElementContent]);\n\n      useEffect(() => {\n        editorRef.current?.element?.addEventListener('click', handleElementClick);\n        editorRef.current?.insertHtml(defaultValue?.trim() || '', false);\n        return () => {\n          editorRef.current?.element?.removeEventListener('click', handleElementClick);\n        };\n      }, [editor, editorRef.current]);\n\n      useEffect(() => {\n        if (modalMethods.current) {\n          modalMethods.current.update(modalProps);\n        }\n      }, [modalProps]);\n\n      const onEditorChange: EditorProps['onChange'] = (formEditor?: TinymceEditor) => {\n        if (formEditor) {\n          const targetEl = formEditor?.selection?.getBoundingClientRect();\n          const { left = 0, top = 0 } = targetEl;\n          setCurrentCursorPosition({\n            ...formEditor?.selection?.getBoundingClientRect(),\n            x: left,\n            y: top,\n            toJSON: () => {}\n          });\n        }\n\n        if (formEditor?.selection?.isCollapsed()) {\n          // get the full line string\n          const selectedRange = formEditor.selection.getRng();\n          const endOffset = selectedRange.endOffset;\n          const stringToSearch = selectedRange.commonAncestorContainer.nodeValue?.slice(\n            0,\n            endOffset\n          );\n          const fieldString = stringToSearch?.split(' ')[stringToSearch?.split(' ').length - 1];\n          if (\n            fieldString?.startsWith('@') &&\n            fieldString.indexOf('@') === fieldString.lastIndexOf('@')\n          ) {\n            filterFieldMenu(fieldString.slice(1));\n          } else setShowFieldsPopover(false);\n        }\n      };\n\n      const onKeyDown: EditorProps['onKeyDown'] = event => {\n        if (\n          (event?.key === 'Enter' || event?.key === 'ArrowLeft' || event?.key === 'ArrowRight') &&\n          !!fieldPopoverRef.current\n        ) {\n          event?.preventDefault();\n        }\n        if (event?.key === 'Escape' && !!fieldPopoverRef.current) {\n          hidePopover();\n        }\n      };\n\n      return (\n        <>\n          <Editor\n            ref={editorRef}\n            {...restProps}\n            label={label}\n            toolbar={toolbar}\n            customComponents={[\n              {\n                customElement: PegaCustomElement,\n                name: 'pega-reference'\n              }\n            ]}\n            customActions={[\n              {\n                icon: 'code',\n                text: tooltip,\n                onMouseDown: () => {\n                  modalMethods.current = create(Modal, modalProps);\n                },\n                active: isPegaRefActive,\n                shortcut: {\n                  pattern: 'meta+191',\n                  description: tooltip,\n                  command: onInsertField\n                }\n              }\n            ]}\n            onInit={setEditor}\n            onChange={onEditorChange}\n            onBlur={() => {\n              onBlur?.();\n              hidePopover();\n            }}\n            onKeyDown={onKeyDown}\n          >\n            {fieldSelectionPopover}\n          </Editor>\n        </>\n      );\n    }\n  );\n\nexport default DynamicContentEditor;\n"]}

package/lib/components/FlowModeller/AddNode.js

@@ -63,6 +63,6 @@ export const StyledConnectorLabel = styled(Text)(({ theme }) => {
 StyledConnectorLabel.defaultProps = defaultThemeProp;
 export const AddButton = ({ addNodeHandler, highlight }) => {
     const t = useI18n();
-    return (_jsx(Flex, { container: { justify: 'center' }, as: StyledWrapper, children: _jsxs(StyledButton, { label: t('add_node'), icon: true, onClick: addNodeHandler, children: [_jsx(StyledDot, { name: 'circle-solid', highlight: highlight }, void 0), _jsx(StyledPlus, { name: 'plus' }, void 0)] }, void 0) }, void 0));
+    return (_jsx(Flex, { container: { justify: 'center' }, as: StyledWrapper, children: _jsxs(StyledButton, { label: t('add_node'), icon: true, onClick: addNodeHandler, children: [_jsx(StyledDot, { name: 'circle-solid', highlight: highlight }), _jsx(StyledPlus, { name: 'plus' })] }) }));
 };
 //# sourceMappingURL=AddNode.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AddNode.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/AddNode.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EACL,MAAM,EACN,gBAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,IAAI,EACL,MAAM,yBAAyB,CAAC;AAIjC,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAyB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IACrF,OAAO,GAAG,CAAA;;aAEC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI;MACnC,SAAS;QACX,GAAG,CAAA;;iBAEU,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI;;KAEtC;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,EAAE,CAAC;AACzC,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;0BACc,KAAK,CAAC,IAAI,CAAC,OAAO;MACtC,aAAa;QACX,GAAG,CAAA;;;OAGJ;;GAEJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;;;;aAIC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;MAC9B,UAAU;;;;;;;oBAOI,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;QACnC,SAAS;;;QAGT,UAAU;;;;GAIf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAQ7C,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAyB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrF,OAAO,GAAG,CAAA;qBACS,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;kBAC9B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI;aACjC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;0BAEV,KAAK,CAAC,IAAI,CAAC,OAAO;GACzC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,SAAS,GAA2D,CAAC,EAChF,cAAc,EACd,SAAS,EACV,EAAE,EAAE;IACH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,aAAa,YACvD,MAAC,YAAY,IAAC,KAAK,EAAE,CAAC,CAAC,UAAU,CAAC,EAAE,IAAI,QAAC,OAAO,EAAE,cAAc,aAC9D,KAAC,SAAS,IAAC,IAAI,EAAC,cAAc,EAAC,SAAS,EAAE,SAAS,WAAI,EACvD,KAAC,UAAU,IAAC,IAAI,EAAC,MAAM,WAAG,YACb,WACV,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { FC, MouseEvent } from 'react';\n\nimport {\n  Button,\n  defaultThemeProp,\n  Flex,\n  Icon,\n  useI18n,\n  StyledTooltip,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport { RendererNodeProps } from './Renderer/Renderer.types';\n\nexport const StyledDot = styled(Icon)<{ highlight: boolean }>(({ theme, highlight }) => {\n  return css`\n    position: absolute;\n    color: ${theme.base.colors.slate.dark};\n    ${highlight &&\n    css`\n       {\n        color: ${theme.base.colors.red.dark};\n      }\n    `}\n  `;\n});\n\nStyledDot.defaultProps = defaultThemeProp;\n\nexport const StyledPlus = styled(Icon)``;\nexport const StyledWrapper = styled.div(({ theme }) => {\n  return css`\n    margin-block-start: ${theme.base.spacing};\n    ${StyledTooltip} {\n      ${css`\n        min-width: 12ch;\n        text-align: center;\n      `}\n    }\n  `;\n});\n\nStyledWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledButton = styled(Button)(({ theme }) => {\n  return css`\n    top: -0.25rem;\n    border: 0;\n    background: transparent;\n    color: ${theme.base.colors.black};\n    ${StyledPlus} {\n      opacity: 0;\n    }\n    &:hover,\n    &:active,\n    &:focus {\n      opacity: 1;\n      background: ${theme.base.colors.white};\n      ${StyledDot} {\n        opacity: 0;\n      }\n      ${StyledPlus} {\n        opacity: 1;\n      }\n    }\n  `;\n});\n\nStyledButton.defaultProps = defaultThemeProp;\n\nexport interface AddNodeProps extends RendererNodeProps {\n  onClick?: (ev: Event) => void;\n  addNodeHandler: (e: MouseEvent<HTMLButtonElement>) => void;\n  highlight?: boolean;\n}\n\nexport const StyledConnectorLabel = styled(Text)<{ highlight: boolean }>(({ theme }) => {\n  return css`\n    border-radius: ${theme.base['border-radius']};\n    background: ${theme.base.colors.slate.dark};\n    color: ${theme.base.colors.white};\n    text-align: center;\n    padding: calc(0.5 * ${theme.base.spacing});\n  `;\n});\n\nStyledConnectorLabel.defaultProps = defaultThemeProp;\n\nexport const AddButton: FC<Pick<AddNodeProps, 'addNodeHandler' | 'highlight'>> = ({\n  addNodeHandler,\n  highlight\n}) => {\n  const t = useI18n();\n\n  return (\n    <Flex container={{ justify: 'center' }} as={StyledWrapper}>\n      <StyledButton label={t('add_node')} icon onClick={addNodeHandler}>\n        <StyledDot name='circle-solid' highlight={highlight} />\n        <StyledPlus name='plus' />\n      </StyledButton>\n    </Flex>\n  );\n};\n"]}
+{"version":3,"file":"AddNode.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/AddNode.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EACL,MAAM,EACN,gBAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,IAAI,EACL,MAAM,yBAAyB,CAAC;AAIjC,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAyB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IACrF,OAAO,GAAG,CAAA;;aAEC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI;MACnC,SAAS;QACX,GAAG,CAAA;;iBAEU,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI;;KAEtC;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,EAAE,CAAC;AACzC,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;0BACc,KAAK,CAAC,IAAI,CAAC,OAAO;MACtC,aAAa;QACX,GAAG,CAAA;;;OAGJ;;GAEJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;;;;aAIC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;MAC9B,UAAU;;;;;;;oBAOI,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;QACnC,SAAS;;;QAGT,UAAU;;;;GAIf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAQ7C,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAyB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrF,OAAO,GAAG,CAAA;qBACS,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;kBAC9B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI;aACjC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;0BAEV,KAAK,CAAC,IAAI,CAAC,OAAO;GACzC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,SAAS,GAA2D,CAAC,EAChF,cAAc,EACd,SAAS,EACV,EAAE,EAAE;IACH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,aAAa,YACvD,MAAC,YAAY,IAAC,KAAK,EAAE,CAAC,CAAC,UAAU,CAAC,EAAE,IAAI,QAAC,OAAO,EAAE,cAAc,aAC9D,KAAC,SAAS,IAAC,IAAI,EAAC,cAAc,EAAC,SAAS,EAAE,SAAS,GAAI,EACvD,KAAC,UAAU,IAAC,IAAI,EAAC,MAAM,GAAG,IACb,GACV,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { FC, MouseEvent } from 'react';\n\nimport {\n  Button,\n  defaultThemeProp,\n  Flex,\n  Icon,\n  useI18n,\n  StyledTooltip,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport { RendererNodeProps } from './Renderer/Renderer.types';\n\nexport const StyledDot = styled(Icon)<{ highlight: boolean }>(({ theme, highlight }) => {\n  return css`\n    position: absolute;\n    color: ${theme.base.colors.slate.dark};\n    ${highlight &&\n    css`\n       {\n        color: ${theme.base.colors.red.dark};\n      }\n    `}\n  `;\n});\n\nStyledDot.defaultProps = defaultThemeProp;\n\nexport const StyledPlus = styled(Icon)``;\nexport const StyledWrapper = styled.div(({ theme }) => {\n  return css`\n    margin-block-start: ${theme.base.spacing};\n    ${StyledTooltip} {\n      ${css`\n        min-width: 12ch;\n        text-align: center;\n      `}\n    }\n  `;\n});\n\nStyledWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledButton = styled(Button)(({ theme }) => {\n  return css`\n    top: -0.25rem;\n    border: 0;\n    background: transparent;\n    color: ${theme.base.colors.black};\n    ${StyledPlus} {\n      opacity: 0;\n    }\n    &:hover,\n    &:active,\n    &:focus {\n      opacity: 1;\n      background: ${theme.base.colors.white};\n      ${StyledDot} {\n        opacity: 0;\n      }\n      ${StyledPlus} {\n        opacity: 1;\n      }\n    }\n  `;\n});\n\nStyledButton.defaultProps = defaultThemeProp;\n\nexport interface AddNodeProps extends RendererNodeProps {\n  onClick?: (ev: Event) => void;\n  addNodeHandler: (e: MouseEvent<HTMLButtonElement>) => void;\n  highlight?: boolean;\n}\n\nexport const StyledConnectorLabel = styled(Text)<{ highlight: boolean }>(({ theme }) => {\n  return css`\n    border-radius: ${theme.base['border-radius']};\n    background: ${theme.base.colors.slate.dark};\n    color: ${theme.base.colors.white};\n    text-align: center;\n    padding: calc(0.5 * ${theme.base.spacing});\n  `;\n});\n\nStyledConnectorLabel.defaultProps = defaultThemeProp;\n\nexport const AddButton: FC<Pick<AddNodeProps, 'addNodeHandler' | 'highlight'>> = ({\n  addNodeHandler,\n  highlight\n}) => {\n  const t = useI18n();\n\n  return (\n    <Flex container={{ justify: 'center' }} as={StyledWrapper}>\n      <StyledButton label={t('add_node')} icon onClick={addNodeHandler}>\n        <StyledDot name='circle-solid' highlight={highlight} />\n        <StyledPlus name='plus' />\n      </StyledButton>\n    </Flex>\n  );\n};\n"]}

package/lib/components/FlowModeller/Connector.js

@@ -28,7 +28,7 @@ const Connector = ({ id, labelLayout, highlight, data, realConnectors }) => {
         refType: 'connector',
         refId
     };
-    return (_jsxs(_Fragment, { children: [labelLayout?.value && (_jsx(Flex, { container: { justify: 'center' }, children: _jsx(StyledLabel, { highlight: highlight, children: labelLayout.value }, void 0) }, void 0)), _jsx(AddButton, { highlight: highlight, addNodeHandler: (e) => data?.onNodeCreate(e.currentTarget, metaData) }, void 0)] }, void 0));
+    return (_jsxs(_Fragment, { children: [labelLayout?.value && (_jsx(Flex, { container: { justify: 'center' }, children: _jsx(StyledLabel, { highlight: highlight, children: labelLayout.value }) })), _jsx(AddButton, { highlight: highlight, addNodeHandler: (e) => data?.onNodeCreate(e.currentTarget, metaData) })] }));
 };
 export default Connector;
 //# sourceMappingURL=Connector.js.map

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

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

package/lib/components/FlowModeller/DeletePopover.js

@@ -97,9 +97,9 @@ const DeletePopover = forwardRef(({ show, target, flowGraphData, rendererGraphDa
                 name: 'offset',
                 options: { offset: [0, 8] }
             }
-        ], children: _jsxs(Flex, { container: { gap: 2, pad: 2, direction: 'column' }, children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'between' }, children: [_jsx(Text, { variant: 'h4', children: t('delete_decision_step_title') }, void 0), _jsx(Button, { variant: 'simple', icon: true, label: t('close'), onClick: onCancelHandler, children: _jsx(Icon, { name: 'times' }, void 0) }, void 0)] }, void 0), _jsx(Text, { children: t('delete_decision_step') }, void 0), _jsxs(Select, { id: 'select-demo', label: t('delete_decision_step_outcome'), required: true, onChange: onChangeHandler, children: [deleteOptions.map((item, index) => {
+        ], children: _jsxs(Flex, { container: { gap: 2, pad: 2, direction: 'column' }, children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'between' }, children: [_jsx(Text, { variant: 'h4', children: t('delete_decision_step_title') }), _jsx(Button, { variant: 'simple', icon: true, label: t('close'), onClick: onCancelHandler, children: _jsx(Icon, { name: 'times' }) })] }), _jsx(Text, { children: t('delete_decision_step') }), _jsxs(Select, { id: 'select-demo', label: t('delete_decision_step_outcome'), required: true, onChange: onChangeHandler, children: [deleteOptions.map((item, index) => {
                             return (_jsx(Option, { selected: currentSelection === index, children: item.connector.label ? item.connector.label : item.connector.id }, item.connector.id));
-                        }), _jsx(Option, { selected: currentSelection === -1, children: t('delete_all_outcomes') }, 'none')] }, void 0), _jsxs(Flex, { container: { direction: 'row', justify: 'between' }, children: [_jsx(Button, { onClick: onCancelHandler, children: t('cancel') }, void 0), _jsx(Button, { variant: 'primary', onClick: submitHandler, children: t('delete') }, void 0)] }, void 0)] }, void 0) }, void 0));
+                        }), _jsx(Option, { selected: currentSelection === -1, children: t('delete_all_outcomes') }, 'none')] }), _jsxs(Flex, { container: { direction: 'row', justify: 'between' }, children: [_jsx(Button, { onClick: onCancelHandler, children: t('cancel') }), _jsx(Button, { variant: 'primary', onClick: submitHandler, children: t('delete') })] })] }) }));
 });
 export default DeletePopover;
 //# sourceMappingURL=DeletePopover.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DeletePopover.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/DeletePopover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, ChangeEventHandler, ChangeEvent, useEffect, forwardRef, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Button,\n  Select,\n  Option,\n  Text,\n  Flex,\n  useI18n,\n  Icon,\n  Popover,\n  PopoverProps\n} from '@pega/cosmos-react-core';\n\nimport { DirectedGraph, GraphData, ConnectorProps } from './Renderer/Utils/Graph';\nimport deleteNodeUtils, { GraphDataAsMap } from './Utils/deleteNodeUtils';\n\nexport interface DeleteNodeOutcome {\n  graphData: GraphData;\n  updates: {\n    connectors: ConnectorProps[];\n  };\n  deletes: GraphDataAsMap;\n}\nexport interface DeleteNodePopoverProps {\n  show: boolean;\n  target: PopoverProps['target'];\n  flowGraphData: GraphData;\n  rendererGraphData: GraphData;\n  nodeId: string;\n  onChange?: (\n    itemsToDelete: GraphDataAsMap,\n    itemsToRetain: GraphDataAsMap | undefined,\n    ev?: ChangeEvent\n  ) => void;\n  ref?: Ref<HTMLDivElement>;\n  onSubmit?: (outcome: DeleteNodeOutcome, ev: Event) => void;\n  onCancel?: () => void;\n}\n\nexport const StyledDeletePopover = styled(Popover)`\n  max-width: 25rem;\n`;\n\nconst DeletePopover = forwardRef(\n  (\n    {\n      show,\n      target,\n      flowGraphData,\n      rendererGraphData,\n      nodeId,\n      onChange,\n      onSubmit,\n      onCancel\n    }: DeleteNodePopoverProps,\n    ref: DeleteNodePopoverProps['ref']\n  ) => {\n    const [currentSelection, setCurrentSelection] = useState<number>(0);\n\n    const t = useI18n();\n\n    const graph = new DirectedGraph(rendererGraphData);\n    const deleteOptionsResult = deleteNodeUtils.getDeleteNodeOptions(graph, nodeId);\n    const deleteOptions = deleteOptionsResult!.options;\n\n    useEffect(() => {\n      const itemsToDelete = deleteOptions[currentSelection].restItems;\n\n      // add the actual node to be deleted also, to the list\n      itemsToDelete.nodes[nodeId] = graph.getNode(nodeId);\n\n      onChange?.(itemsToDelete, deleteOptions[currentSelection].pathItems);\n    }, [rendererGraphData]);\n\n    const onChangeHandler: ChangeEventHandler = (ev: ChangeEvent<HTMLSelectElement>) => {\n      const newSelection =\n        ev.target.selectedIndex >= deleteOptions.length ? -1 : ev.target.selectedIndex;\n\n      setCurrentSelection(newSelection);\n\n      let itemsToDelete = deleteOptionsResult!.allItems;\n      let itemsToRetain;\n\n      if (newSelection !== -1) {\n        itemsToDelete = deleteOptions[newSelection].restItems;\n        itemsToRetain = deleteOptions[newSelection].pathItems;\n      }\n\n      // add the actual node to be deleted also, to the list\n      itemsToDelete.nodes[nodeId] = graph.getNode(nodeId);\n\n      onChange?.(itemsToDelete, itemsToRetain, ev);\n    };\n\n    const submitHandler = (ev: Event) => {\n      const finalGraph = new DirectedGraph(flowGraphData);\n      const finalDeleteOptionsResult = deleteNodeUtils.getDeleteNodeOptions(finalGraph, nodeId);\n\n      let newTargetNode = finalGraph.getNode(finalDeleteOptionsResult!.destinationNodeId);\n      let itemsToDelete = finalDeleteOptionsResult!.allItems;\n\n      const selectedOption = currentSelection === -1 ? undefined : deleteOptions[currentSelection];\n      let finalMetaData = selectedOption;\n\n      if (selectedOption) {\n        finalMetaData = finalDeleteOptionsResult!.options.find(current => {\n          if (selectedOption.connector.id === current.connector.id) {\n            return true;\n          }\n\n          return false;\n        });\n\n        if (finalMetaData) {\n          // get the ref of the first node of the retaining path\n          newTargetNode = finalGraph.getNode(finalMetaData.connector.toNodeId);\n          itemsToDelete = finalMetaData.restItems;\n        }\n      }\n\n      // get the in-connectors of the selected node\n      const nodeInConnectors = finalGraph.getInConnectors(nodeId);\n      // iterate and set the targetNode to the above first node instead of the selected node.\n      nodeInConnectors.forEach(con => {\n        finalGraph.setConnector(con.id, {\n          toNodeId: newTargetNode.id\n        });\n      });\n\n      const resultGraphData = finalGraph.getGraphData();\n\n      itemsToDelete.nodes[nodeId] = finalGraph.getNode(nodeId);\n      // filter the highlighted nodes, including the selected node\n      const nodes = resultGraphData.nodes.filter(item => {\n        return itemsToDelete.nodes[item.id] === undefined;\n      });\n\n      if (finalMetaData) {\n        itemsToDelete.connectors[finalMetaData.connector.id] = finalMetaData.connector;\n      }\n      // filter the highlighted connectors\n      const connectors = resultGraphData.connectors.filter(item => {\n        // if not in items to delete, add to list\n        if (itemsToDelete.connectors[item.id] === undefined) {\n          return true;\n        }\n\n        return false;\n      });\n\n      const outcome: DeleteNodeOutcome = {\n        graphData: {\n          nodes,\n          connectors\n        },\n        updates: {\n          connectors: nodeInConnectors\n        },\n        deletes: itemsToDelete\n      };\n\n      onSubmit?.(outcome, ev);\n    };\n\n    const onCancelHandler = () => {\n      onCancel?.();\n    };\n\n    return (\n      <StyledDeletePopover\n        show={show}\n        target={target}\n        placement='right-end'\n        ref={ref}\n        modifiers={[\n          {\n            name: 'offset',\n            options: { offset: [0, 8] }\n          }\n        ]}\n      >\n        <Flex container={{ gap: 2, pad: 2, direction: 'column' }}>\n          <Flex container={{ alignItems: 'center', justify: 'between' }}>\n            <Text variant='h4'>{t('delete_decision_step_title')}</Text>\n            <Button variant='simple' icon label={t('close')} onClick={onCancelHandler}>\n              <Icon name='times' />\n            </Button>\n          </Flex>\n          <Text>{t('delete_decision_step')}</Text>\n          <Select\n            id='select-demo'\n            label={t('delete_decision_step_outcome')}\n            required\n            onChange={onChangeHandler}\n          >\n            {deleteOptions.map((item, index) => {\n              return (\n                <Option key={item.connector.id} selected={currentSelection === index}>\n                  {item.connector.label ? item.connector.label : item.connector.id}\n                </Option>\n              );\n            })}\n\n            <Option key='none' selected={currentSelection === -1}>\n              {t('delete_all_outcomes')}\n            </Option>\n          </Select>\n\n          <Flex container={{ direction: 'row', justify: 'between' }}>\n            <Button onClick={onCancelHandler}>{t('cancel')}</Button>\n            <Button variant='primary' onClick={submitHandler}>\n              {t('delete')}\n            </Button>\n          </Flex>\n        </Flex>\n      </StyledDeletePopover>\n    );\n  }\n);\n\nexport default DeletePopover;\n"]}
+{"version":3,"file":"DeletePopover.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/DeletePopover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, ChangeEventHandler, ChangeEvent, useEffect, forwardRef, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Button,\n  Select,\n  Option,\n  Text,\n  Flex,\n  useI18n,\n  Icon,\n  Popover,\n  PopoverProps\n} from '@pega/cosmos-react-core';\n\nimport { DirectedGraph, GraphData, ConnectorProps } from './Renderer/Utils/Graph';\nimport deleteNodeUtils, { GraphDataAsMap } from './Utils/deleteNodeUtils';\n\nexport interface DeleteNodeOutcome {\n  graphData: GraphData;\n  updates: {\n    connectors: ConnectorProps[];\n  };\n  deletes: GraphDataAsMap;\n}\nexport interface DeleteNodePopoverProps {\n  show: boolean;\n  target: PopoverProps['target'];\n  flowGraphData: GraphData;\n  rendererGraphData: GraphData;\n  nodeId: string;\n  onChange?: (\n    itemsToDelete: GraphDataAsMap,\n    itemsToRetain: GraphDataAsMap | undefined,\n    ev?: ChangeEvent\n  ) => void;\n  ref?: Ref<HTMLDivElement>;\n  onSubmit?: (outcome: DeleteNodeOutcome, ev: Event) => void;\n  onCancel?: () => void;\n}\n\nexport const StyledDeletePopover = styled(Popover)`\n  max-width: 25rem;\n`;\n\nconst DeletePopover = forwardRef(\n  (\n    {\n      show,\n      target,\n      flowGraphData,\n      rendererGraphData,\n      nodeId,\n      onChange,\n      onSubmit,\n      onCancel\n    }: DeleteNodePopoverProps,\n    ref: DeleteNodePopoverProps['ref']\n  ) => {\n    const [currentSelection, setCurrentSelection] = useState<number>(0);\n\n    const t = useI18n();\n\n    const graph = new DirectedGraph(rendererGraphData);\n    const deleteOptionsResult = deleteNodeUtils.getDeleteNodeOptions(graph, nodeId);\n    const deleteOptions = deleteOptionsResult!.options;\n\n    useEffect(() => {\n      const itemsToDelete = deleteOptions[currentSelection].restItems;\n\n      // add the actual node to be deleted also, to the list\n      itemsToDelete.nodes[nodeId] = graph.getNode(nodeId);\n\n      onChange?.(itemsToDelete, deleteOptions[currentSelection].pathItems);\n    }, [rendererGraphData]);\n\n    const onChangeHandler: ChangeEventHandler = (ev: ChangeEvent<HTMLSelectElement>) => {\n      const newSelection =\n        ev.target.selectedIndex >= deleteOptions.length ? -1 : ev.target.selectedIndex;\n\n      setCurrentSelection(newSelection);\n\n      let itemsToDelete = deleteOptionsResult!.allItems;\n      let itemsToRetain;\n\n      if (newSelection !== -1) {\n        itemsToDelete = deleteOptions[newSelection].restItems;\n        itemsToRetain = deleteOptions[newSelection].pathItems;\n      }\n\n      // add the actual node to be deleted also, to the list\n      itemsToDelete.nodes[nodeId] = graph.getNode(nodeId);\n\n      onChange?.(itemsToDelete, itemsToRetain, ev);\n    };\n\n    const submitHandler = (ev: Event) => {\n      const finalGraph = new DirectedGraph(flowGraphData);\n      const finalDeleteOptionsResult = deleteNodeUtils.getDeleteNodeOptions(finalGraph, nodeId);\n\n      let newTargetNode = finalGraph.getNode(finalDeleteOptionsResult!.destinationNodeId);\n      let itemsToDelete = finalDeleteOptionsResult!.allItems;\n\n      const selectedOption = currentSelection === -1 ? undefined : deleteOptions[currentSelection];\n      let finalMetaData = selectedOption;\n\n      if (selectedOption) {\n        finalMetaData = finalDeleteOptionsResult!.options.find(current => {\n          if (selectedOption.connector.id === current.connector.id) {\n            return true;\n          }\n\n          return false;\n        });\n\n        if (finalMetaData) {\n          // get the ref of the first node of the retaining path\n          newTargetNode = finalGraph.getNode(finalMetaData.connector.toNodeId);\n          itemsToDelete = finalMetaData.restItems;\n        }\n      }\n\n      // get the in-connectors of the selected node\n      const nodeInConnectors = finalGraph.getInConnectors(nodeId);\n      // iterate and set the targetNode to the above first node instead of the selected node.\n      nodeInConnectors.forEach(con => {\n        finalGraph.setConnector(con.id, {\n          toNodeId: newTargetNode.id\n        });\n      });\n\n      const resultGraphData = finalGraph.getGraphData();\n\n      itemsToDelete.nodes[nodeId] = finalGraph.getNode(nodeId);\n      // filter the highlighted nodes, including the selected node\n      const nodes = resultGraphData.nodes.filter(item => {\n        return itemsToDelete.nodes[item.id] === undefined;\n      });\n\n      if (finalMetaData) {\n        itemsToDelete.connectors[finalMetaData.connector.id] = finalMetaData.connector;\n      }\n      // filter the highlighted connectors\n      const connectors = resultGraphData.connectors.filter(item => {\n        // if not in items to delete, add to list\n        if (itemsToDelete.connectors[item.id] === undefined) {\n          return true;\n        }\n\n        return false;\n      });\n\n      const outcome: DeleteNodeOutcome = {\n        graphData: {\n          nodes,\n          connectors\n        },\n        updates: {\n          connectors: nodeInConnectors\n        },\n        deletes: itemsToDelete\n      };\n\n      onSubmit?.(outcome, ev);\n    };\n\n    const onCancelHandler = () => {\n      onCancel?.();\n    };\n\n    return (\n      <StyledDeletePopover\n        show={show}\n        target={target}\n        placement='right-end'\n        ref={ref}\n        modifiers={[\n          {\n            name: 'offset',\n            options: { offset: [0, 8] }\n          }\n        ]}\n      >\n        <Flex container={{ gap: 2, pad: 2, direction: 'column' }}>\n          <Flex container={{ alignItems: 'center', justify: 'between' }}>\n            <Text variant='h4'>{t('delete_decision_step_title')}</Text>\n            <Button variant='simple' icon label={t('close')} onClick={onCancelHandler}>\n              <Icon name='times' />\n            </Button>\n          </Flex>\n          <Text>{t('delete_decision_step')}</Text>\n          <Select\n            id='select-demo'\n            label={t('delete_decision_step_outcome')}\n            required\n            onChange={onChangeHandler}\n          >\n            {deleteOptions.map((item, index) => {\n              return (\n                <Option key={item.connector.id} selected={currentSelection === index}>\n                  {item.connector.label ? item.connector.label : item.connector.id}\n                </Option>\n              );\n            })}\n\n            <Option key='none' selected={currentSelection === -1}>\n              {t('delete_all_outcomes')}\n            </Option>\n          </Select>\n\n          <Flex container={{ direction: 'row', justify: 'between' }}>\n            <Button onClick={onCancelHandler}>{t('cancel')}</Button>\n            <Button variant='primary' onClick={submitHandler}>\n              {t('delete')}\n            </Button>\n          </Flex>\n        </Flex>\n      </StyledDeletePopover>\n    );\n  }\n);\n\nexport default DeletePopover;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"FlowModeller.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAEf,UAAU,EAKX,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,MAAM,EAMP,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EACL,oBAAoB,EAGrB,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EACL,YAAY,EACZ,SAAS,EACT,eAAe,EAGf,QAAQ,EAET,MAAM,mBAAmB,CAAC;AAS3B,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,SAAS,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;IAChD,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,0CAA0C;IAC1C,SAAS,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACtE,kDAAkD;IAClD,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjE,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxD,qBAAqB;IACrB,WAAW,EAAE,eAAe,EAAE,CAAC;CAChC;AAgFD,QAAA,MAAM,YAAY,6FAQf,gBAAgB,iBAAiB,CAAC,gBA6OpC,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"FlowModeller.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAEf,UAAU,EAKX,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,MAAM,EAMP,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EACL,oBAAoB,EAGrB,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EACL,YAAY,EACZ,SAAS,EACT,eAAe,EAGf,QAAQ,EAET,MAAM,mBAAmB,CAAC;AAS3B,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,SAAS,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;IAChD,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,0CAA0C;IAC1C,SAAS,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACtE,kDAAkD;IAClD,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjE,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxD,qBAAqB;IACrB,WAAW,EAAE,eAAe,EAAE,CAAC;CAChC;AAgFD,QAAA,MAAM,YAAY,6FAQf,gBAAgB,iBAAiB,CAAC,gBA8OpC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/FlowModeller/FlowModeller.js

@@ -153,7 +153,7 @@ const FlowModeller = ({ graphData, onNodeActionClick, onNodeAdd, nodeLibrary, on
                 id: createUID(),
                 children: (_jsx(AddButton, { addNodeHandler: (e) => {
                         onNodeCreate(e.currentTarget, metaData);
-                    } }, void 0)),
+                    } })),
                 position: { x: 0, y: 0 },
                 dimensions: { width: 1, height: 0 }
             };
@@ -235,7 +235,7 @@ const FlowModeller = ({ graphData, onNodeActionClick, onNodeAdd, nodeLibrary, on
         };
     }, []);
     const items = nodeLibrary !== undefined ? nodeLibrary : [];
-    return (_jsxs("div", { children: [_jsx(FlowRenderer, { graphData: state.graphData, connector: Connector, node: Node, highlights: state.highlightItems }, void 0), state.showDeletePopover && state.deleteProps && (_jsx(DeletePopover, { show: state.showDeletePopover, ref: setDeletePopoverEl, ...state.deleteProps }, void 0)), _jsx(ItemLibrary, { show: state.showLib, target: state.activeAddBtnMeta.target, placeholder: t('search_nodes'), items: items, onClick: onLibraryItemSelect, ref: setPopoverEl }, void 0)] }, void 0));
+    return (_jsxs("div", { children: [_jsx(FlowRenderer, { graphData: state.graphData, connector: Connector, node: Node, highlights: state.highlightItems }), state.showDeletePopover && state.deleteProps && (_jsx(DeletePopover, { show: state.showDeletePopover, ref: setDeletePopoverEl, ...state.deleteProps })), _jsx(ItemLibrary, { show: state.showLib, target: state.activeAddBtnMeta.target, placeholder: t('search_nodes'), items: items, onClick: onLibraryItemSelect, ref: setPopoverEl, position: 'bottom' })] }));
 };
 export default FlowModeller;
 //# sourceMappingURL=FlowModeller.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FlowModeller.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  PropsWithoutRef,\n  useEffect,\n  MouseEvent,\n  useReducer,\n  Reducer,\n  useCallback,\n  useRef\n} from 'react';\n\nimport {\n  PopoverProps,\n  Action,\n  createUID,\n  useElement,\n  useOuterEvent,\n  useI18n,\n  OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport ItemLibrary, { LibraryItem } from '../ItemLibrary/ItemLibrary';\n\nimport { GraphData, ConnectorProps } from './Renderer/Utils/Graph';\nimport {\n  AddNodeHandlerParams,\n  RendererConnectorProps,\n  RendererNodeProps\n} from './Renderer/Renderer.types';\nimport FlowRenderer from './Renderer/Renderer';\nimport {\n  ActionParams,\n  NodeProps,\n  NodeLibraryItem,\n  START_NODETYPE,\n  STOP_NODETYPE,\n  NodeType,\n  NodeComponentData\n} from './Node/Node.types';\nimport PlaceHolderHelper from './Utils/addNodeUtils';\nimport { AddButton } from './AddNode';\nimport FlowModellerHelper from './helper';\nimport DeletePopover, { DeleteNodePopoverProps, DeleteNodeOutcome } from './DeletePopover';\nimport Connector from './Connector';\nimport Node from './Node';\nimport { DeleteNodeModalOption } from './Utils/deleteNodeUtils';\n\nexport interface FlowModellerProps {\n  graphData: GraphData<NodeProps, ConnectorProps>;\n  /** Node actions */\n  actions?: Action[];\n  /** Callback to add node from connector */\n  onNodeAdd: (nodeType: NodeType, params: AddNodeHandlerParams) => void;\n  /** Callback for handling the click on the node */\n  onNodeClick?: (nodeId: string) => void;\n  /** Callback for actions on Node */\n  onNodeActionClick?: (param: ActionParams, e: MouseEvent) => void;\n  /** Callback for node deletion */\n  onDelete?: (param: ActionParams, e: MouseEvent) => void;\n  /** Types of nodes */\n  nodeLibrary: NodeLibraryItem[];\n}\n\ntype ModellerState = {\n  showLib: boolean;\n  activeItem: Element | null;\n  activeAddBtnMeta: {\n    target: null; // we will maintain ref of an Element\n    meta: AddNodeHandlerParams;\n  };\n  graphData: GraphData<RendererNodeProps, RendererConnectorProps>;\n  highlightItems?: DeleteNodeModalOption['pathItems'];\n  showDeletePopover: boolean;\n  deleteProps:\n    | OmitStrict<DeleteNodePopoverProps & { target: PopoverProps['target'] }, 'show'>\n    | undefined;\n};\n\nconst initState: ModellerState = {\n  showLib: false,\n  activeItem: null,\n  activeAddBtnMeta: {\n    target: null,\n    meta: {\n      refType: 'node',\n      refId: ''\n    }\n  },\n  graphData: { nodes: [], connectors: [] },\n  highlightItems: undefined,\n  showDeletePopover: false,\n  deleteProps: undefined\n};\n\nconst reducer = (state: ModellerState, action: { type: string; payload: any }) => {\n  switch (action.type) {\n    case 'showLibrary':\n      // minor optimization, not to update state.. if no change in the value\n      return action.payload.show === state.showLib\n        ? state\n        : { ...state, showLib: action.payload.show };\n    case 'setActiveItem':\n      return {\n        ...state,\n        activeItem: action.payload.target\n      };\n    case 'setActiveAddButton':\n      state.activeAddBtnMeta = {\n        ...action.payload\n      };\n      return {\n        ...state,\n        showLib: true\n      };\n    case 'setGraphData':\n      return {\n        ...state,\n        graphData: action.payload.graphData\n      };\n    case 'highlight':\n      // minor optimization to avoid unnecessary re-render\n      if (action.payload.hideDeletePopover === !state.showDeletePopover) {\n        return state;\n      }\n\n      return {\n        ...state,\n        highlightItems: action.payload.highlightItems,\n        showDeletePopover: action.payload.hideDeletePopover !== true && state.showDeletePopover\n      };\n    case 'showDeletePopover':\n      return {\n        ...state,\n        showDeletePopover: action.payload.showDeletePopover,\n        deleteProps: action.payload.deleteProps\n      };\n    default:\n      return state;\n  }\n};\n\nconst FlowModeller = ({\n  graphData,\n  onNodeActionClick,\n  onNodeAdd,\n  nodeLibrary,\n  onNodeClick,\n  onDelete,\n  actions\n}: PropsWithoutRef<FlowModellerProps>) => {\n  const [state, dispatch] = useReducer<Reducer<ModellerState, any>>(reducer, initState);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const [deletePopoverEl, setDeletePopoverEl] = useElement<HTMLElement>(null);\n\n  const stateRef = useRef<ModellerState>(initState);\n\n  // stateRef always refers to the same state obj\n  // \"fixed\" callbacks can refer to this object whenever\n  // it need the current value.  Note: the callbacks will not\n  // be reactive - they will not re-run the instant state changes,\n  // but they *will* see the current value whenever they do run\n  stateRef.current = state;\n\n  const t = useI18n();\n\n  const onNodeCreate = (el: HTMLElement | SVGForeignObjectElement, meta: AddNodeHandlerParams) => {\n    dispatch({\n      type: 'setActiveAddButton',\n      payload: {\n        target: el,\n        meta\n      }\n    });\n  };\n\n  const closeMenu = () => {\n    dispatch({\n      type: 'showLibrary',\n      payload: {\n        show: false\n      }\n    });\n  };\n\n  const closeDeleteModel = () => {\n    // un-highlight the nodes and connectors\n    dispatch({\n      type: 'highlight',\n      payload: {\n        highlightItems: undefined,\n        hideDeletePopover: true\n      }\n    });\n  };\n\n  const onDeleteWrapper = useCallback(\n    (params: ActionParams, e: MouseEvent) => {\n      const result: DeleteNodeOutcome | false = FlowModellerHelper.deleteNode(\n        graphData,\n        params.nodeId\n      );\n\n      if (result) {\n        onDelete?.({ ...params, additionalData: result }, e);\n      } else {\n        dispatch({\n          type: 'showDeletePopover',\n          payload: {\n            showDeletePopover: true,\n            deleteProps: {\n              flowGraphData: graphData,\n              rendererGraphData: stateRef.current.graphData,\n              nodeId: params.nodeId,\n              target: {\n                getBoundingClientRect: () =>\n                  document\n                    .getElementById(`modeller-node-${stateRef.current.deleteProps?.nodeId}`)\n                    ?.getBoundingClientRect()\n              } as PopoverProps['target'],\n              onChange: highlights => {\n                dispatch({\n                  type: 'highlight',\n                  payload: {\n                    highlightItems: highlights\n                  }\n                });\n              },\n              onSubmit: outcome => {\n                // un-highlight the nodes and connectors\n                closeDeleteModel();\n                onDelete?.({ ...params, additionalData: outcome }, e);\n              },\n              onCancel: closeDeleteModel\n            } as ModellerState['deleteProps']\n          }\n        });\n      }\n    },\n    [graphData, state.graphData]\n  );\n\n  useEffect(() => {\n    const onGetNewPHNode: (metaData: AddNodeHandlerParams) => RendererNodeProps = metaData => {\n      return {\n        id: createUID(),\n        children: (\n          <AddButton\n            addNodeHandler={(e: MouseEvent<HTMLButtonElement>) => {\n              onNodeCreate(e.currentTarget as HTMLElement, metaData);\n            }}\n          />\n        ),\n        position: { x: 0, y: 0 },\n        dimensions: { width: 1, height: 0 }\n      };\n    };\n\n    const onGetNewPHConnector: (\n      fromNodeId: string,\n      toNodeId: string,\n      metaData: AddNodeHandlerParams\n    ) => RendererConnectorProps = (fromNodeId, toNodeId) => {\n      return {\n        id: createUID(),\n        fromNodeId,\n        toNodeId,\n        points: [],\n        data: {\n          onNodeCreate\n        }\n      };\n    };\n\n    const flowNodes: RendererNodeProps[] = graphData.nodes.map(node => {\n      const flowNode: RendererNodeProps = {\n        ...node,\n        dimensions: {\n          width: 280,\n          height: 120\n        },\n        position: {\n          x: 0,\n          y: 0\n        },\n        data: {\n          isActive: state.activeItem?.id === node.id,\n          actions,\n          onDelete: onDeleteWrapper,\n          onActionClick: onNodeActionClick,\n          onClick: onNodeClick\n        } as NodeComponentData\n      };\n\n      if (node.type.id === START_NODETYPE.id || node.type.id === STOP_NODETYPE.id) {\n        flowNode.dimensions.width = 58;\n        flowNode.dimensions.height = 58;\n      }\n      return flowNode;\n    });\n\n    const connectors: RendererConnectorProps[] = graphData.connectors.map(connector => {\n      return {\n        ...connector,\n        points: [],\n        data: {\n          label: connector.label,\n          onNodeCreate\n        }\n      };\n    });\n\n    // inject the placeholderAddNodes dynamically\n    const newGraphData: GraphData<RendererNodeProps, RendererConnectorProps> =\n      PlaceHolderHelper.injectPlaceholderNodes(\n        { nodes: flowNodes, connectors },\n        onGetNewPHNode,\n        onGetNewPHConnector\n      );\n\n    dispatch({\n      type: 'setGraphData',\n      payload: {\n        graphData: newGraphData\n      }\n    });\n  }, [graphData]);\n\n  /**\n   * Library popover functionality\n   */\n  const onLibraryItemSelect = useCallback(\n    (libItem: LibraryItem) => {\n      const metaData = state.activeAddBtnMeta.meta;\n      closeMenu();\n      onNodeAdd((libItem as NodeLibraryItem).type, metaData);\n    },\n    [state.activeAddBtnMeta]\n  );\n\n  const onKeydown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        closeMenu();\n      }\n    },\n    [closeMenu]\n  );\n\n  useOuterEvent('mousedown', [popoverEl], closeMenu);\n  useOuterEvent('mousedown', [deletePopoverEl], closeDeleteModel);\n\n  useEffect(() => {\n    document.addEventListener('keydown', onKeydown);\n\n    return () => {\n      document.removeEventListener('keydown', onKeydown);\n    };\n  }, []);\n\n  const items: NodeLibraryItem[] = nodeLibrary !== undefined ? nodeLibrary : [];\n\n  return (\n    <div>\n      <FlowRenderer\n        graphData={state.graphData}\n        connector={Connector}\n        node={Node}\n        highlights={state.highlightItems}\n      />\n      {state.showDeletePopover && state.deleteProps && (\n        <DeletePopover\n          show={state.showDeletePopover}\n          ref={setDeletePopoverEl}\n          {...state.deleteProps}\n        />\n      )}\n      <ItemLibrary\n        show={state.showLib}\n        target={state.activeAddBtnMeta.target}\n        placeholder={t('search_nodes')}\n        items={items}\n        onClick={onLibraryItemSelect}\n        ref={setPopoverEl}\n      />\n    </div>\n  );\n};\n\nexport default FlowModeller;\n"]}
+{"version":3,"file":"FlowModeller.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,SAAS,EAET,UAAU,EAEV,WAAW,EACX,MAAM,EACP,MAAM,OAAO,CAAC;AAEf,OAAO,EAGL,SAAS,EACT,UAAU,EACV,aAAa,EACb,OAAO,EAER,MAAM,yBAAyB,CAAC;AAEjC,OAAO,WAA4B,MAAM,4BAA4B,CAAC;AAQtE,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAIL,cAAc,EACd,aAAa,EAGd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,kBAAkB,MAAM,UAAU,CAAC;AAC1C,OAAO,aAA4D,MAAM,iBAAiB,CAAC;AAC3F,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,IAAI,MAAM,QAAQ,CAAC;AAkC1B,MAAM,SAAS,GAAkB;IAC/B,OAAO,EAAE,KAAK;IACd,UAAU,EAAE,IAAI;IAChB,gBAAgB,EAAE;QAChB,MAAM,EAAE,IAAI;QACZ,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;YACf,KAAK,EAAE,EAAE;SACV;KACF;IACD,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;IACxC,cAAc,EAAE,SAAS;IACzB,iBAAiB,EAAE,KAAK;IACxB,WAAW,EAAE,SAAS;CACvB,CAAC;AAEF,MAAM,OAAO,GAAG,CAAC,KAAoB,EAAE,MAAsC,EAAE,EAAE;IAC/E,QAAQ,MAAM,CAAC,IAAI,EAAE;QACnB,KAAK,aAAa;YAChB,sEAAsE;YACtE,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,KAAK,KAAK,CAAC,OAAO;gBAC1C,CAAC,CAAC,KAAK;gBACP,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QACjD,KAAK,eAAe;YAClB,OAAO;gBACL,GAAG,KAAK;gBACR,UAAU,EAAE,MAAM,CAAC,OAAO,CAAC,MAAM;aAClC,CAAC;QACJ,KAAK,oBAAoB;YACvB,KAAK,CAAC,gBAAgB,GAAG;gBACvB,GAAG,MAAM,CAAC,OAAO;aAClB,CAAC;YACF,OAAO;gBACL,GAAG,KAAK;gBACR,OAAO,EAAE,IAAI;aACd,CAAC;QACJ,KAAK,cAAc;YACjB,OAAO;gBACL,GAAG,KAAK;gBACR,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,SAAS;aACpC,CAAC;QACJ,KAAK,WAAW;YACd,oDAAoD;YACpD,IAAI,MAAM,CAAC,OAAO,CAAC,iBAAiB,KAAK,CAAC,KAAK,CAAC,iBAAiB,EAAE;gBACjE,OAAO,KAAK,CAAC;aACd;YAED,OAAO;gBACL,GAAG,KAAK;gBACR,cAAc,EAAE,MAAM,CAAC,OAAO,CAAC,cAAc;gBAC7C,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,iBAAiB,KAAK,IAAI,IAAI,KAAK,CAAC,iBAAiB;aACxF,CAAC;QACJ,KAAK,mBAAmB;YACtB,OAAO;gBACL,GAAG,KAAK;gBACR,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,iBAAiB;gBACnD,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,WAAW;aACxC,CAAC;QACJ;YACE,OAAO,KAAK,CAAC;KAChB;AACH,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,EACpB,SAAS,EACT,iBAAiB,EACjB,SAAS,EACT,WAAW,EACX,WAAW,EACX,QAAQ,EACR,OAAO,EAC4B,EAAE,EAAE;IACvC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,UAAU,CAA8B,OAAO,EAAE,SAAS,CAAC,CAAC;IACtF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,CAAc,IAAI,CAAC,CAAC;IAChE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,UAAU,CAAc,IAAI,CAAC,CAAC;IAE5E,MAAM,QAAQ,GAAG,MAAM,CAAgB,SAAS,CAAC,CAAC;IAElD,+CAA+C;IAC/C,sDAAsD;IACtD,2DAA2D;IAC3D,gEAAgE;IAChE,6DAA6D;IAC7D,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;IAEzB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,YAAY,GAAG,CAAC,EAAyC,EAAE,IAA0B,EAAE,EAAE;QAC7F,QAAQ,CAAC;YACP,IAAI,EAAE,oBAAoB;YAC1B,OAAO,EAAE;gBACP,MAAM,EAAE,EAAE;gBACV,IAAI;aACL;SACF,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,QAAQ,CAAC;YACP,IAAI,EAAE,aAAa;YACnB,OAAO,EAAE;gBACP,IAAI,EAAE,KAAK;aACZ;SACF,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,wCAAwC;QACxC,QAAQ,CAAC;YACP,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE;gBACP,cAAc,EAAE,SAAS;gBACzB,iBAAiB,EAAE,IAAI;aACxB;SACF,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,MAAoB,EAAE,CAAa,EAAE,EAAE;QACtC,MAAM,MAAM,GAA8B,kBAAkB,CAAC,UAAU,CACrE,SAAS,EACT,MAAM,CAAC,MAAM,CACd,CAAC;QAEF,IAAI,MAAM,EAAE;YACV,QAAQ,EAAE,CAAC,EAAE,GAAG,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC;SACtD;aAAM;YACL,QAAQ,CAAC;gBACP,IAAI,EAAE,mBAAmB;gBACzB,OAAO,EAAE;oBACP,iBAAiB,EAAE,IAAI;oBACvB,WAAW,EAAE;wBACX,aAAa,EAAE,SAAS;wBACxB,iBAAiB,EAAE,QAAQ,CAAC,OAAO,CAAC,SAAS;wBAC7C,MAAM,EAAE,MAAM,CAAC,MAAM;wBACrB,MAAM,EAAE;4BACN,qBAAqB,EAAE,GAAG,EAAE,CAC1B,QAAQ;iCACL,cAAc,CAAC,iBAAiB,QAAQ,CAAC,OAAO,CAAC,WAAW,EAAE,MAAM,EAAE,CAAC;gCACxE,EAAE,qBAAqB,EAAE;yBACJ;wBAC3B,QAAQ,EAAE,UAAU,CAAC,EAAE;4BACrB,QAAQ,CAAC;gCACP,IAAI,EAAE,WAAW;gCACjB,OAAO,EAAE;oCACP,cAAc,EAAE,UAAU;iCAC3B;6BACF,CAAC,CAAC;wBACL,CAAC;wBACD,QAAQ,EAAE,OAAO,CAAC,EAAE;4BAClB,wCAAwC;4BACxC,gBAAgB,EAAE,CAAC;4BACnB,QAAQ,EAAE,CAAC,EAAE,GAAG,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC;wBACxD,CAAC;wBACD,QAAQ,EAAE,gBAAgB;qBACK;iBAClC;aACF,CAAC,CAAC;SACJ;IACH,CAAC,EACD,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,CAC7B,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,cAAc,GAA0D,QAAQ,CAAC,EAAE;YACvF,OAAO;gBACL,EAAE,EAAE,SAAS,EAAE;gBACf,QAAQ,EAAE,CACR,KAAC,SAAS,IACR,cAAc,EAAE,CAAC,CAAgC,EAAE,EAAE;wBACnD,YAAY,CAAC,CAAC,CAAC,aAA4B,EAAE,QAAQ,CAAC,CAAC;oBACzD,CAAC,GACD,CACH;gBACD,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;gBACxB,UAAU,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;aACpC,CAAC;QACJ,CAAC,CAAC;QAEF,MAAM,mBAAmB,GAIK,CAAC,UAAU,EAAE,QAAQ,EAAE,EAAE;YACrD,OAAO;gBACL,EAAE,EAAE,SAAS,EAAE;gBACf,UAAU;gBACV,QAAQ;gBACR,MAAM,EAAE,EAAE;gBACV,IAAI,EAAE;oBACJ,YAAY;iBACb;aACF,CAAC;QACJ,CAAC,CAAC;QAEF,MAAM,SAAS,GAAwB,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAChE,MAAM,QAAQ,GAAsB;gBAClC,GAAG,IAAI;gBACP,UAAU,EAAE;oBACV,KAAK,EAAE,GAAG;oBACV,MAAM,EAAE,GAAG;iBACZ;gBACD,QAAQ,EAAE;oBACR,CAAC,EAAE,CAAC;oBACJ,CAAC,EAAE,CAAC;iBACL;gBACD,IAAI,EAAE;oBACJ,QAAQ,EAAE,KAAK,CAAC,UAAU,EAAE,EAAE,KAAK,IAAI,CAAC,EAAE;oBAC1C,OAAO;oBACP,QAAQ,EAAE,eAAe;oBACzB,aAAa,EAAE,iBAAiB;oBAChC,OAAO,EAAE,WAAW;iBACA;aACvB,CAAC;YAEF,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,cAAc,CAAC,EAAE,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,aAAa,CAAC,EAAE,EAAE;gBAC3E,QAAQ,CAAC,UAAU,CAAC,KAAK,GAAG,EAAE,CAAC;gBAC/B,QAAQ,CAAC,UAAU,CAAC,MAAM,GAAG,EAAE,CAAC;aACjC;YACD,OAAO,QAAQ,CAAC;QAClB,CAAC,CAAC,CAAC;QAEH,MAAM,UAAU,GAA6B,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YAChF,OAAO;gBACL,GAAG,SAAS;gBACZ,MAAM,EAAE,EAAE;gBACV,IAAI,EAAE;oBACJ,KAAK,EAAE,SAAS,CAAC,KAAK;oBACtB,YAAY;iBACb;aACF,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,6CAA6C;QAC7C,MAAM,YAAY,GAChB,iBAAiB,CAAC,sBAAsB,CACtC,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,EAChC,cAAc,EACd,mBAAmB,CACpB,CAAC;QAEJ,QAAQ,CAAC;YACP,IAAI,EAAE,cAAc;YACpB,OAAO,EAAE;gBACP,SAAS,EAAE,YAAY;aACxB;SACF,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB;;OAEG;IACH,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,OAAoB,EAAE,EAAE;QACvB,MAAM,QAAQ,GAAG,KAAK,CAAC,gBAAgB,CAAC,IAAI,CAAC;QAC7C,SAAS,EAAE,CAAC;QACZ,SAAS,CAAE,OAA2B,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IACzD,CAAC,EACD,CAAC,KAAK,CAAC,gBAAgB,CAAC,CACzB,CAAC;IAEF,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,CAAgB,EAAE,EAAE;QACnB,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;YACtB,SAAS,EAAE,CAAC;SACb;IACH,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,CAAC;IACnD,aAAa,CAAC,WAAW,EAAE,CAAC,eAAe,CAAC,EAAE,gBAAgB,CAAC,CAAC;IAEhE,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAEhD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,KAAK,GAAsB,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAE9E,OAAO,CACL,0BACE,KAAC,YAAY,IACX,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,KAAK,CAAC,cAAc,GAChC,EACD,KAAK,CAAC,iBAAiB,IAAI,KAAK,CAAC,WAAW,IAAI,CAC/C,KAAC,aAAa,IACZ,IAAI,EAAE,KAAK,CAAC,iBAAiB,EAC7B,GAAG,EAAE,kBAAkB,KACnB,KAAK,CAAC,WAAW,GACrB,CACH,EACD,KAAC,WAAW,IACV,IAAI,EAAE,KAAK,CAAC,OAAO,EACnB,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,EACrC,WAAW,EAAE,CAAC,CAAC,cAAc,CAAC,EAC9B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,mBAAmB,EAC5B,GAAG,EAAE,YAAY,EACjB,QAAQ,EAAC,QAAQ,GACjB,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import {\n  PropsWithoutRef,\n  useEffect,\n  MouseEvent,\n  useReducer,\n  Reducer,\n  useCallback,\n  useRef\n} from 'react';\n\nimport {\n  PopoverProps,\n  Action,\n  createUID,\n  useElement,\n  useOuterEvent,\n  useI18n,\n  OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport ItemLibrary, { LibraryItem } from '../ItemLibrary/ItemLibrary';\n\nimport { GraphData, ConnectorProps } from './Renderer/Utils/Graph';\nimport {\n  AddNodeHandlerParams,\n  RendererConnectorProps,\n  RendererNodeProps\n} from './Renderer/Renderer.types';\nimport FlowRenderer from './Renderer/Renderer';\nimport {\n  ActionParams,\n  NodeProps,\n  NodeLibraryItem,\n  START_NODETYPE,\n  STOP_NODETYPE,\n  NodeType,\n  NodeComponentData\n} from './Node/Node.types';\nimport PlaceHolderHelper from './Utils/addNodeUtils';\nimport { AddButton } from './AddNode';\nimport FlowModellerHelper from './helper';\nimport DeletePopover, { DeleteNodePopoverProps, DeleteNodeOutcome } from './DeletePopover';\nimport Connector from './Connector';\nimport Node from './Node';\nimport { DeleteNodeModalOption } from './Utils/deleteNodeUtils';\n\nexport interface FlowModellerProps {\n  graphData: GraphData<NodeProps, ConnectorProps>;\n  /** Node actions */\n  actions?: Action[];\n  /** Callback to add node from connector */\n  onNodeAdd: (nodeType: NodeType, params: AddNodeHandlerParams) => void;\n  /** Callback for handling the click on the node */\n  onNodeClick?: (nodeId: string) => void;\n  /** Callback for actions on Node */\n  onNodeActionClick?: (param: ActionParams, e: MouseEvent) => void;\n  /** Callback for node deletion */\n  onDelete?: (param: ActionParams, e: MouseEvent) => void;\n  /** Types of nodes */\n  nodeLibrary: NodeLibraryItem[];\n}\n\ntype ModellerState = {\n  showLib: boolean;\n  activeItem: Element | null;\n  activeAddBtnMeta: {\n    target: null; // we will maintain ref of an Element\n    meta: AddNodeHandlerParams;\n  };\n  graphData: GraphData<RendererNodeProps, RendererConnectorProps>;\n  highlightItems?: DeleteNodeModalOption['pathItems'];\n  showDeletePopover: boolean;\n  deleteProps:\n    | OmitStrict<DeleteNodePopoverProps & { target: PopoverProps['target'] }, 'show'>\n    | undefined;\n};\n\nconst initState: ModellerState = {\n  showLib: false,\n  activeItem: null,\n  activeAddBtnMeta: {\n    target: null,\n    meta: {\n      refType: 'node',\n      refId: ''\n    }\n  },\n  graphData: { nodes: [], connectors: [] },\n  highlightItems: undefined,\n  showDeletePopover: false,\n  deleteProps: undefined\n};\n\nconst reducer = (state: ModellerState, action: { type: string; payload: any }) => {\n  switch (action.type) {\n    case 'showLibrary':\n      // minor optimization, not to update state.. if no change in the value\n      return action.payload.show === state.showLib\n        ? state\n        : { ...state, showLib: action.payload.show };\n    case 'setActiveItem':\n      return {\n        ...state,\n        activeItem: action.payload.target\n      };\n    case 'setActiveAddButton':\n      state.activeAddBtnMeta = {\n        ...action.payload\n      };\n      return {\n        ...state,\n        showLib: true\n      };\n    case 'setGraphData':\n      return {\n        ...state,\n        graphData: action.payload.graphData\n      };\n    case 'highlight':\n      // minor optimization to avoid unnecessary re-render\n      if (action.payload.hideDeletePopover === !state.showDeletePopover) {\n        return state;\n      }\n\n      return {\n        ...state,\n        highlightItems: action.payload.highlightItems,\n        showDeletePopover: action.payload.hideDeletePopover !== true && state.showDeletePopover\n      };\n    case 'showDeletePopover':\n      return {\n        ...state,\n        showDeletePopover: action.payload.showDeletePopover,\n        deleteProps: action.payload.deleteProps\n      };\n    default:\n      return state;\n  }\n};\n\nconst FlowModeller = ({\n  graphData,\n  onNodeActionClick,\n  onNodeAdd,\n  nodeLibrary,\n  onNodeClick,\n  onDelete,\n  actions\n}: PropsWithoutRef<FlowModellerProps>) => {\n  const [state, dispatch] = useReducer<Reducer<ModellerState, any>>(reducer, initState);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const [deletePopoverEl, setDeletePopoverEl] = useElement<HTMLElement>(null);\n\n  const stateRef = useRef<ModellerState>(initState);\n\n  // stateRef always refers to the same state obj\n  // \"fixed\" callbacks can refer to this object whenever\n  // it need the current value.  Note: the callbacks will not\n  // be reactive - they will not re-run the instant state changes,\n  // but they *will* see the current value whenever they do run\n  stateRef.current = state;\n\n  const t = useI18n();\n\n  const onNodeCreate = (el: HTMLElement | SVGForeignObjectElement, meta: AddNodeHandlerParams) => {\n    dispatch({\n      type: 'setActiveAddButton',\n      payload: {\n        target: el,\n        meta\n      }\n    });\n  };\n\n  const closeMenu = () => {\n    dispatch({\n      type: 'showLibrary',\n      payload: {\n        show: false\n      }\n    });\n  };\n\n  const closeDeleteModel = () => {\n    // un-highlight the nodes and connectors\n    dispatch({\n      type: 'highlight',\n      payload: {\n        highlightItems: undefined,\n        hideDeletePopover: true\n      }\n    });\n  };\n\n  const onDeleteWrapper = useCallback(\n    (params: ActionParams, e: MouseEvent) => {\n      const result: DeleteNodeOutcome | false = FlowModellerHelper.deleteNode(\n        graphData,\n        params.nodeId\n      );\n\n      if (result) {\n        onDelete?.({ ...params, additionalData: result }, e);\n      } else {\n        dispatch({\n          type: 'showDeletePopover',\n          payload: {\n            showDeletePopover: true,\n            deleteProps: {\n              flowGraphData: graphData,\n              rendererGraphData: stateRef.current.graphData,\n              nodeId: params.nodeId,\n              target: {\n                getBoundingClientRect: () =>\n                  document\n                    .getElementById(`modeller-node-${stateRef.current.deleteProps?.nodeId}`)\n                    ?.getBoundingClientRect()\n              } as PopoverProps['target'],\n              onChange: highlights => {\n                dispatch({\n                  type: 'highlight',\n                  payload: {\n                    highlightItems: highlights\n                  }\n                });\n              },\n              onSubmit: outcome => {\n                // un-highlight the nodes and connectors\n                closeDeleteModel();\n                onDelete?.({ ...params, additionalData: outcome }, e);\n              },\n              onCancel: closeDeleteModel\n            } as ModellerState['deleteProps']\n          }\n        });\n      }\n    },\n    [graphData, state.graphData]\n  );\n\n  useEffect(() => {\n    const onGetNewPHNode: (metaData: AddNodeHandlerParams) => RendererNodeProps = metaData => {\n      return {\n        id: createUID(),\n        children: (\n          <AddButton\n            addNodeHandler={(e: MouseEvent<HTMLButtonElement>) => {\n              onNodeCreate(e.currentTarget as HTMLElement, metaData);\n            }}\n          />\n        ),\n        position: { x: 0, y: 0 },\n        dimensions: { width: 1, height: 0 }\n      };\n    };\n\n    const onGetNewPHConnector: (\n      fromNodeId: string,\n      toNodeId: string,\n      metaData: AddNodeHandlerParams\n    ) => RendererConnectorProps = (fromNodeId, toNodeId) => {\n      return {\n        id: createUID(),\n        fromNodeId,\n        toNodeId,\n        points: [],\n        data: {\n          onNodeCreate\n        }\n      };\n    };\n\n    const flowNodes: RendererNodeProps[] = graphData.nodes.map(node => {\n      const flowNode: RendererNodeProps = {\n        ...node,\n        dimensions: {\n          width: 280,\n          height: 120\n        },\n        position: {\n          x: 0,\n          y: 0\n        },\n        data: {\n          isActive: state.activeItem?.id === node.id,\n          actions,\n          onDelete: onDeleteWrapper,\n          onActionClick: onNodeActionClick,\n          onClick: onNodeClick\n        } as NodeComponentData\n      };\n\n      if (node.type.id === START_NODETYPE.id || node.type.id === STOP_NODETYPE.id) {\n        flowNode.dimensions.width = 58;\n        flowNode.dimensions.height = 58;\n      }\n      return flowNode;\n    });\n\n    const connectors: RendererConnectorProps[] = graphData.connectors.map(connector => {\n      return {\n        ...connector,\n        points: [],\n        data: {\n          label: connector.label,\n          onNodeCreate\n        }\n      };\n    });\n\n    // inject the placeholderAddNodes dynamically\n    const newGraphData: GraphData<RendererNodeProps, RendererConnectorProps> =\n      PlaceHolderHelper.injectPlaceholderNodes(\n        { nodes: flowNodes, connectors },\n        onGetNewPHNode,\n        onGetNewPHConnector\n      );\n\n    dispatch({\n      type: 'setGraphData',\n      payload: {\n        graphData: newGraphData\n      }\n    });\n  }, [graphData]);\n\n  /**\n   * Library popover functionality\n   */\n  const onLibraryItemSelect = useCallback(\n    (libItem: LibraryItem) => {\n      const metaData = state.activeAddBtnMeta.meta;\n      closeMenu();\n      onNodeAdd((libItem as NodeLibraryItem).type, metaData);\n    },\n    [state.activeAddBtnMeta]\n  );\n\n  const onKeydown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        closeMenu();\n      }\n    },\n    [closeMenu]\n  );\n\n  useOuterEvent('mousedown', [popoverEl], closeMenu);\n  useOuterEvent('mousedown', [deletePopoverEl], closeDeleteModel);\n\n  useEffect(() => {\n    document.addEventListener('keydown', onKeydown);\n\n    return () => {\n      document.removeEventListener('keydown', onKeydown);\n    };\n  }, []);\n\n  const items: NodeLibraryItem[] = nodeLibrary !== undefined ? nodeLibrary : [];\n\n  return (\n    <div>\n      <FlowRenderer\n        graphData={state.graphData}\n        connector={Connector}\n        node={Node}\n        highlights={state.highlightItems}\n      />\n      {state.showDeletePopover && state.deleteProps && (\n        <DeletePopover\n          show={state.showDeletePopover}\n          ref={setDeletePopoverEl}\n          {...state.deleteProps}\n        />\n      )}\n      <ItemLibrary\n        show={state.showLib}\n        target={state.activeAddBtnMeta.target}\n        placeholder={t('search_nodes')}\n        items={items}\n        onClick={onLibraryItemSelect}\n        ref={setPopoverEl}\n        position='bottom'\n      />\n    </div>\n  );\n};\n\nexport default FlowModeller;\n"]}

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

@@ -5,8 +5,6 @@ import { ItemVisual, LibraryItem } from '../../ItemLibrary/ItemLibrary';
 export interface NodeType extends ItemVisual {
     id: string;
     name: string;
-    color: string;
-    icon: string;
     minConnectors: number;
     defaults: {
         node: OmitStrict<NodeProps, 'type' | 'id'>;
@@ -55,7 +53,6 @@ export interface ActionParams {
     additionalData?: unknown;
 }
 export interface NodeLibraryItem extends LibraryItem {
-    id: string;
     type: NodeType;
     items?: NodeLibraryItem[];
 }

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

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

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

@@ -1,8 +1,7 @@
-import { themeDefinition } from '@pega/cosmos-react-core';
 export const START_NODETYPE = Object.freeze({
     id: 'start',
     name: 'start',
-    color: themeDefinition.base.colors.green.medium.$value,
+    color: 'green',
     icon: 'circle',
     minConnectors: 1,
     defaults: {
@@ -15,7 +14,7 @@ export const START_NODETYPE = Object.freeze({
 export const STOP_NODETYPE = Object.freeze({
     id: 'stop',
     name: 'stop',
-    color: themeDefinition.base.colors.red.light.$value,
+    color: 'red',
     icon: 'circle',
     minConnectors: 0,
     defaults: {

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

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