npm - @pega/cosmos-react-build - Versions diffs - 3.0.0-dev.10.1 → 3.0.0-dev.13.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (55) hide show

package/lib/components/AppHeader/AppHeader.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAoB,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAI7F,eAAO,MAAM,eAAe,~~4GAS1B~~,CAAC;AAIH,eAAO,MAAM,WAAW,EAAE,OAAO,IAU/B,CAAC;AAIH,eAAO,MAAM,oBAAoB,EAAE,OAAO,IAKxC,CAAC;AAIH,eAAO,MAAM,iBAAiB,0QAM5B,CAAC;AAIH,eAAO,MAAM,UAAU,EAAE,OAAO,IAqB9B,CAAC;AAIH,eAAO,MAAM,oBAAoB,EAAE,OAAO,IAmBzC,CAAC;AAIF,eAAO,MAAM,qBAAqB,EAAE,OAAO,IAYzC,CAAC;AAIH,eAAO,MAAM,mBAAmB,EAAE,OAAO,MAExC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,OAAO,MAQnC,CAAC"}
1	+ {"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAoB,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAI7F,eAAO,MAAM,eAAe,4GAU1B,CAAC;AAIH,eAAO,MAAM,WAAW,EAAE,OAAO,IAU/B,CAAC;AAIH,eAAO,MAAM,oBAAoB,EAAE,OAAO,IAKxC,CAAC;AAIH,eAAO,MAAM,iBAAiB,0QAM5B,CAAC;AAIH,eAAO,MAAM,UAAU,EAAE,OAAO,IAqB9B,CAAC;AAIH,eAAO,MAAM,oBAAoB,EAAE,OAAO,IAmBzC,CAAC;AAIF,eAAO,MAAM,qBAAqB,EAAE,OAAO,IAYzC,CAAC;AAIH,eAAO,MAAM,mBAAmB,EAAE,OAAO,MAExC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,OAAO,MAQnC,CAAC"}

package/lib/components/AppHeader/AppHeader.styles.js CHANGED Viewed

@@ -8,7 +8,8 @@ export const StyledAppHeader = styled.header(({ theme }) => {
     padding: 0 calc(2 * ${theme.base.spacing});
     border-bottom: 0.0625rem solid ${theme.base.colors.gray.light};
     background-color: ${theme.base.palette['primary-background']};
-    position: relative;
+    position: sticky;
+    top: 0;
     z-index: calc(${theme.base['z-index'].drawer + 1});
   `;
 });

package/lib/components/AppHeader/AppHeader.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAC7F,OAAO,UAAU,MAAM,0DAA0D,CAAC;AAClF,OAAO,EAAE,yBAAyB,EAAE,MAAM,iEAAiE,CAAC;AAE5G,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzD,OAAO,GAAG,CAAA;;0BAEc,KAAK,CAAC,IAAI,CAAC,OAAO;qCACP,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;wBACzC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC~~;;oBAE5C~~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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { Avatar, defaultThemeProp, Flex, Text, Tabs, Button } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';\n\nexport const StyledAppHeader = styled.header(({ theme }) => {\n return css`\n height: 3rem;\n padding: 0 calc(2 * ${theme.base.spacing});\n border-bottom: 0.0625rem solid ${theme.base.colors.gray.light};\n background-color: ${theme.base.palette['primary-background']};\n position: ~~relative~~;\n z-index: calc(${theme.base['z-index'].drawer + 1});\n `;\n});\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTitle: typeof Text = styled(Text)(({ theme }) => {\n return css`\n max-width: 25ch;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n color: ${theme.base.palette['foreground-color']};\n font-weight: ${theme.base['font-weight'].bold};\n margin-inline-start: calc(0.75 * ${theme.base.spacing});\n `;\n});\n\nStyledTitle.defaultProps = defaultThemeProp;\n\nexport const StyledBrandContainer: typeof Flex = styled(Flex)(({ theme }) => {\n return css`\n padding-block: ${theme.base.spacing};\n text-decoration: none;\n `;\n});\n\nStyledBrandContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBrandButton = styled(BareButton)(({ theme }) => {\n return css`\n &:not([disabled]):focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledBrandButton.defaultProps = defaultThemeProp;\n\nexport const StyledTabs: typeof Tabs = styled(Tabs)(({ theme }) => {\n return css`\n margin-inline-start: calc(2 * ${theme.base.spacing});\n margin-inline-end: calc(2 * ${theme.base.spacing});\n border: none;\n min-height: 3rem;\n button {\n height: auto;\n span:first-of-type {\n text-transform: none;\n }\n }\n button[aria-selected='false'] > span {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n }\n button:hover,\n button:focus,\n button:active {\n box-shadow: none;\n }\n `;\n});\n\nStyledTabs.defaultProps = defaultThemeProp;\n\nexport const StyledUtilsContainer: typeof Flex = styled(Flex)<{ isMediumOrAbove: boolean }>(\n ({ theme, isMediumOrAbove }) => {\n return css`\n margin-inline-start: auto;\n padding-block: ${theme.base.spacing};\n width: auto;\n min-width: ${isMediumOrAbove ? '32%' : 'auto'};\n & > div,\n & > span {\n margin-inline-start: ${theme.base.spacing};\n }\n & > div:last-child {\n margin-inline-end: 0;\n }\n ${StyledAppHeaderSearchForm} {\n margin-inline-end: ${theme.base.spacing};\n }\n `;\n }\n);\n\nStyledUtilsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBranchContainer: typeof Flex = styled(Flex)(({ theme }) => {\n return css`\n span {\n white-space: nowrap;\n max-width: 25ch;\n overflow: hidden;\n text-overflow: ellipsis;\n font-weight: ${theme.base['font-weight']['semi-bold']};\n margin-inline-start: calc(0.5 * ${theme.base.spacing});\n margin-inline-end: calc(0.75 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledBranchContainer.defaultProps = defaultThemeProp;\n\nexport const StyledPreviewButton: typeof Button = styled(Button)`\n flex-shrink: 0;\n`;\n\nexport const StyledAppAvatar: typeof Avatar = styled(Avatar)(({ theme }) => {\n return css`\n width: 1.5rem;\n height: 1.5rem;\n && {\n margin-inline-start: calc(2 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledAppAvatar.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { Avatar, defaultThemeProp, Flex, Text, Tabs, Button } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';\n\nexport const StyledAppHeader = styled.header(({ theme }) => {\n return css`\n height: 3rem;\n padding: 0 calc(2 * ${theme.base.spacing});\n border-bottom: 0.0625rem solid ${theme.base.colors.gray.light};\n background-color: ${theme.base.palette['primary-background']};\n position: sticky;\n top: 0;\n z-index: calc(${theme.base['z-index'].drawer + 1});\n `;\n});\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTitle: typeof Text = styled(Text)(({ theme }) => {\n return css`\n max-width: 25ch;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n color: ${theme.base.palette['foreground-color']};\n font-weight: ${theme.base['font-weight'].bold};\n margin-inline-start: calc(0.75 * ${theme.base.spacing});\n `;\n});\n\nStyledTitle.defaultProps = defaultThemeProp;\n\nexport const StyledBrandContainer: typeof Flex = styled(Flex)(({ theme }) => {\n return css`\n padding-block: ${theme.base.spacing};\n text-decoration: none;\n `;\n});\n\nStyledBrandContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBrandButton = styled(BareButton)(({ theme }) => {\n return css`\n &:not([disabled]):focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledBrandButton.defaultProps = defaultThemeProp;\n\nexport const StyledTabs: typeof Tabs = styled(Tabs)(({ theme }) => {\n return css`\n margin-inline-start: calc(2 * ${theme.base.spacing});\n margin-inline-end: calc(2 * ${theme.base.spacing});\n border: none;\n min-height: 3rem;\n button {\n height: auto;\n span:first-of-type {\n text-transform: none;\n }\n }\n button[aria-selected='false'] > span {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n }\n button:hover,\n button:focus,\n button:active {\n box-shadow: none;\n }\n `;\n});\n\nStyledTabs.defaultProps = defaultThemeProp;\n\nexport const StyledUtilsContainer: typeof Flex = styled(Flex)<{ isMediumOrAbove: boolean }>(\n ({ theme, isMediumOrAbove }) => {\n return css`\n margin-inline-start: auto;\n padding-block: ${theme.base.spacing};\n width: auto;\n min-width: ${isMediumOrAbove ? '32%' : 'auto'};\n & > div,\n & > span {\n margin-inline-start: ${theme.base.spacing};\n }\n & > div:last-child {\n margin-inline-end: 0;\n }\n ${StyledAppHeaderSearchForm} {\n margin-inline-end: ${theme.base.spacing};\n }\n `;\n }\n);\n\nStyledUtilsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBranchContainer: typeof Flex = styled(Flex)(({ theme }) => {\n return css`\n span {\n white-space: nowrap;\n max-width: 25ch;\n overflow: hidden;\n text-overflow: ellipsis;\n font-weight: ${theme.base['font-weight']['semi-bold']};\n margin-inline-start: calc(0.5 * ${theme.base.spacing});\n margin-inline-end: calc(0.75 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledBranchContainer.defaultProps = defaultThemeProp;\n\nexport const StyledPreviewButton: typeof Button = styled(Button)`\n flex-shrink: 0;\n`;\n\nexport const StyledAppAvatar: typeof Avatar = styled(Avatar)(({ theme }) => {\n return css`\n width: 1.5rem;\n height: 1.5rem;\n && {\n margin-inline-start: calc(2 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledAppAvatar.defaultProps = defaultThemeProp;\n"]}

package/lib/components/DynamicContentEditor/DynamicContentEditor.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DynamicContentEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAKf,OAAO,EAGL,YAAY,EAab,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,yBAAyB,EAAY,MAAM,8BAA8B,CAAC;AAOnF,eAAO,MAAM,mBAAmB;;SAE/B,CAAC;AAIF,QAAA,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,GAAG,YAAY,~~CAuTnF~~,CAAC;AAEJ,eAAe,oBAAoB,CAAC"}
1	+ {"version":3,"file":"DynamicContentEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAKf,OAAO,EAGL,YAAY,EAab,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,yBAAyB,EAAY,MAAM,8BAA8B,CAAC;AAOnF,eAAO,MAAM,mBAAmB;;SAE/B,CAAC;AAIF,QAAA,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,GAAG,YAAY,CAwTnF,CAAC;AAEJ,eAAe,oBAAoB,CAAC"}

package/lib/components/DynamicContentEditor/DynamicContentEditor.js CHANGED Viewed

@@ -210,6 +210,7 @@ const DynamicContentEditor = forwardRef(({ form: { dynamicContentPicker, onSubmi
                 {
                     createCustomElement: createPegaReferenceElement,
                     name: 'pega-reference',
+                    extensionAttributes: ['contenteditable'],
                     style: pegaReferenceElementStyle
                 }
             ], customActions: [

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

	@@ -1 +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 menuHelpers,\n MenuProps,\n Modal,\n ModalManagerContext,\n ModalMethods,\n Popover,\n PropsWithDefaults,\n StyledPopover,\n useConsolidatedRef,\n useI18n,\n useUID\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 { pegaReferenceElementStyle, createPegaReferenceElement } 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 menuID = useUID();\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 [fieldMenuItems, setFieldMenuItems] = useState<MenuProps['items']>(fieldItems \|\| []);\n const [currentElementId, setCurrentElementId] = useState('');\n const [currentElementContent, setCurrentElementContent] = useState('');\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 setCurrentElementId('');\n setCurrentElementContent('');\n onActiveFieldChange({ id: '', text: '' });\n },\n onBeforeOpen: () => {\n if (currentElementId) {\n onActiveFieldChange({ id: currentElementId, text: currentElementContent });\n }\n }\n };\n\n const findAndRenameField = (fieldId: string) => {\n if (!editor \|\| !fieldMenuItems) 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 = editor.getDoc().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 editor.getDoc().getSelection()?.removeAllRanges();\n editor.getDoc().getSelection()?.addRange(range);\n\n const selectedField = menuHelpers.getItem(fieldMenuItems, fieldId);\n if (selectedField) {\n editor.selection.setContent(\n `<pega-reference role=\"button\" contenteditable=\"false\" data-rule-type=\"field\" data-rule-id=${selectedField.id}>${selectedField.primary}</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 setFieldMenuItems(fieldItems \|\| []);\n if (/\\s/.test(searchString)) {\n setShowFieldsPopover(false);\n return;\n }\n if (searchString && fieldMenuItems) {\n const newFieldMenuItems: MenuProps['items'] = menuHelpers\n .flatten(fieldMenuItems)\n .filter(({ primary }) =>\n primary.toLowerCase().startsWith(searchString.toLocaleLowerCase())\n );\n if (newFieldMenuItems) {\n setShowFieldsPopover(true);\n setFieldMenuItems(newFieldMenuItems);\n } else setShowFieldsPopover(false);\n }\n };\n\n const updateBookmarkAndCurrentElement = (editorSelection: EditorSelection) => {\n const targetEl = editorSelection.getNode() as HTMLElement;\n const fieldId = targetEl.getAttribute('data-rule-id');\n const fieldValue = targetEl.innerText;\n setBookmark(editorSelection.getBookmark());\n setCurrentElementId(fieldId \|\| '');\n setCurrentElementContent(fieldValue);\n };\n\n const handleElementClick = ({ target }: MouseEvent) => {\n if (editor && target && (target as HTMLElement).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 modifiers={[\n {\n name: 'offset',\n options: {\n offset: () => {\n const iframe = editorRef.current?.element?.querySelector('iframe');\n const iframeRect = iframe?.getBoundingClientRect();\n const x = iframeRect?.x ?? 0;\n const y = iframeRect?.y ?? 0;\n return [x, y];\n }\n }\n }\n ]}\n placement='bottom-start'\n >\n {fieldMenuItems && (\n <Menu\n id={menuID}\n items={fieldMenuItems}\n as={StyledSearchPopover}\n focusControlEl={editor?.getBody() \|\| undefined}\n mode='action'\n onItemClick={findAndRenameField}\n variant='drill-down'\n />\n )}\n </Popover>\n );\n\n useEffect(() => {\n if (currentElementId) modalMethods.current = create(Modal, modalProps);\n }, [currentElementId]);\n\n useEffect(() => {\n editor?.getDoc().addEventListener('click', handleElementClick);\n editorRef.current?.insertHtml(defaultValue?.trim() \|\| '', false);\n return () => {\n editor?.getDoc().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 createCustomElement: createPegaReferenceElement,\n name: 'pega-reference',\n style: pegaReferenceElementStyle\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"]}
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 menuHelpers,\n MenuProps,\n Modal,\n ModalManagerContext,\n ModalMethods,\n Popover,\n PropsWithDefaults,\n StyledPopover,\n useConsolidatedRef,\n useI18n,\n useUID\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 { pegaReferenceElementStyle, createPegaReferenceElement } 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 menuID = useUID();\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 [fieldMenuItems, setFieldMenuItems] = useState<MenuProps['items']>(fieldItems \|\| []);\n const [currentElementId, setCurrentElementId] = useState('');\n const [currentElementContent, setCurrentElementContent] = useState('');\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 setCurrentElementId('');\n setCurrentElementContent('');\n onActiveFieldChange({ id: '', text: '' });\n },\n onBeforeOpen: () => {\n if (currentElementId) {\n onActiveFieldChange({ id: currentElementId, text: currentElementContent });\n }\n }\n };\n\n const findAndRenameField = (fieldId: string) => {\n if (!editor \|\| !fieldMenuItems) 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 = editor.getDoc().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 editor.getDoc().getSelection()?.removeAllRanges();\n editor.getDoc().getSelection()?.addRange(range);\n\n const selectedField = menuHelpers.getItem(fieldMenuItems, fieldId);\n if (selectedField) {\n editor.selection.setContent(\n `<pega-reference role=\"button\" contenteditable=\"false\" data-rule-type=\"field\" data-rule-id=${selectedField.id}>${selectedField.primary}</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 setFieldMenuItems(fieldItems \|\| []);\n if (/\\s/.test(searchString)) {\n setShowFieldsPopover(false);\n return;\n }\n if (searchString && fieldMenuItems) {\n const newFieldMenuItems: MenuProps['items'] = menuHelpers\n .flatten(fieldMenuItems)\n .filter(({ primary }) =>\n primary.toLowerCase().startsWith(searchString.toLocaleLowerCase())\n );\n if (newFieldMenuItems) {\n setShowFieldsPopover(true);\n setFieldMenuItems(newFieldMenuItems);\n } else setShowFieldsPopover(false);\n }\n };\n\n const updateBookmarkAndCurrentElement = (editorSelection: EditorSelection) => {\n const targetEl = editorSelection.getNode() as HTMLElement;\n const fieldId = targetEl.getAttribute('data-rule-id');\n const fieldValue = targetEl.innerText;\n setBookmark(editorSelection.getBookmark());\n setCurrentElementId(fieldId \|\| '');\n setCurrentElementContent(fieldValue);\n };\n\n const handleElementClick = ({ target }: MouseEvent) => {\n if (editor && target && (target as HTMLElement).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 modifiers={[\n {\n name: 'offset',\n options: {\n offset: () => {\n const iframe = editorRef.current?.element?.querySelector('iframe');\n const iframeRect = iframe?.getBoundingClientRect();\n const x = iframeRect?.x ?? 0;\n const y = iframeRect?.y ?? 0;\n return [x, y];\n }\n }\n }\n ]}\n placement='bottom-start'\n >\n {fieldMenuItems && (\n <Menu\n id={menuID}\n items={fieldMenuItems}\n as={StyledSearchPopover}\n focusControlEl={editor?.getBody() \|\| undefined}\n mode='action'\n onItemClick={findAndRenameField}\n variant='drill-down'\n />\n )}\n </Popover>\n );\n\n useEffect(() => {\n if (currentElementId) modalMethods.current = create(Modal, modalProps);\n }, [currentElementId]);\n\n useEffect(() => {\n editor?.getDoc().addEventListener('click', handleElementClick);\n editorRef.current?.insertHtml(defaultValue?.trim() \|\| '', false);\n return () => {\n editor?.getDoc().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 createCustomElement: createPegaReferenceElement,\n name: 'pega-reference',\n extensionAttributes: ['contenteditable'],\n style: pegaReferenceElementStyle\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/Connector.d.ts.map CHANGED Viewed

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

package/lib/components/FlowModeller/Connector.js CHANGED Viewed

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

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

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

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

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

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

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

package/lib/components/FlowModeller/FlowModeller.js CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FlowModeller.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n PropsWithoutRef,\n useEffect,\n MouseEvent,\n useReducer,\n Reducer,\n useCallback,\n useRef\n} from 'react';\n\nimport {\n PopoverProps,\n Action,\n createUID,\n useElement,\n useOuterEvent,\n useI18n,\n OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport ItemLibrary, { LibraryItem } from '../ItemLibrary/ItemLibrary';\n\nimport { GraphData, ConnectorProps } from './Renderer/Utils/Graph';\nimport {\n AddNodeHandlerParams,\n RendererConnectorProps,\n RendererNodeProps,\n RendererProps\n} from './Renderer/Renderer.types';\nimport FlowRenderer from './Renderer/Renderer';\nimport {\n ActionParams,\n NodeProps,\n NodeLibraryItem,\n START_NODETYPE,\n STOP_NODETYPE,\n NodeType,\n NodeComponentData\n} from './Node/Node.types';\nimport PlaceHolderHelper from './Utils/addNodeUtils';\nimport { AddButton } from './AddNode';\nimport FlowModellerHelper from './helper';\nimport DeletePopover, { DeleteNodePopoverProps } from './DeletePopover';\nimport Connector from './Connector';\nimport Node from './Node';\nimport { DeleteNodeModalOption, DeleteNodeOutcome } from './Utils/deleteNodeUtils';\n\nexport interface FlowModellerProps {\n graphData: GraphData<NodeProps, ConnectorProps>;\n /** Node actions /\n actions?: Action[];\n /* Callback to add node from connector /\n onNodeAdd: (nodeType: NodeType, params: AddNodeHandlerParams) => void;\n /* Callback for handling the click on the node /\n onNodeClick?: (nodeId: string) => void;\n /* Callback for actions on Node /\n onNodeActionClick?: (param: ActionParams, e: MouseEvent) => void;\n /* Callback for node deletion /\n onDelete?: (param: ActionParams, e: MouseEvent) => void;\n /* Types of nodes /\n nodeLibrary: NodeLibraryItem[];\n /* Highlights /\n highlightData?: RendererProps['highlights'];\n}\n\ntype ModellerState = {\n showLib: boolean;\n activeItem: Element \| null;\n activeAddBtnMeta: {\n target: null; // we will maintain ref of an Element\n meta: AddNodeHandlerParams;\n };\n graphData: GraphData<RendererNodeProps, RendererConnectorProps>;\n highlightItems?: DeleteNodeModalOption['pathItems'];\n showDeletePopover: boolean;\n deleteProps:\n \| OmitStrict<DeleteNodePopoverProps & { target: PopoverProps['target'] }, 'show'>\n \| undefined;\n};\n\nconst initState: ModellerState = {\n showLib: false,\n activeItem: null,\n activeAddBtnMeta: {\n target: null,\n meta: {\n refType: 'node',\n refId: ''\n }\n },\n graphData: { nodes: [], connectors: [] },\n highlightItems: undefined,\n showDeletePopover: false,\n deleteProps: undefined\n};\n\nconst reducer = (state: ModellerState, action: { type: string; payload: any }) => {\n switch (action.type) {\n case 'showLibrary':\n // minor optimization, not to update state.. if no change in the value\n return action.payload.show === state.showLib\n ? state\n : { ...state, showLib: action.payload.show };\n case 'setActiveItem':\n return {\n ...state,\n activeItem: action.payload.target\n };\n case 'setActiveAddButton':\n state.activeAddBtnMeta = {\n ...action.payload\n };\n return {\n ...state,\n showLib: true\n };\n case 'setGraphData':\n return {\n ...state,\n graphData: action.payload.graphData,\n highlightItems: action.payload.highlightItems\n };\n case 'highlight':\n // minor optimization to avoid unnecessary re-render\n if (action.payload.hideDeletePopover === !state.showDeletePopover) {\n return state;\n }\n\n return {\n ...state,\n highlightItems: action.payload.highlightItems,\n showDeletePopover: action.payload.hideDeletePopover !== true && state.showDeletePopover\n };\n case 'showDeletePopover':\n return {\n ...state,\n showDeletePopover: action.payload.showDeletePopover,\n deleteProps: action.payload.deleteProps\n };\n default:\n return state;\n }\n};\n\nconst FlowModeller = ({\n graphData,\n highlightData,\n onNodeActionClick,\n onNodeAdd,\n nodeLibrary,\n onNodeClick,\n onDelete,\n actions\n}: PropsWithoutRef<FlowModellerProps>) => {\n const [state, dispatch] = useReducer<Reducer<ModellerState, any>>(reducer, initState);\n const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n const [deletePopoverEl, setDeletePopoverEl] = useElement<HTMLElement>(null);\n\n const stateRef = useRef<ModellerState>(initState);\n\n // stateRef always refers to the same state obj\n // \"fixed\" callbacks can refer to this object whenever\n // it need the current value. Note: the callbacks will not\n // be reactive - they will not re-run the instant state changes,\n // but they will* see the current value whenever they do run\n stateRef.current = state;\n\n const t = useI18n();\n\n const onNodeCreate = (el: HTMLElement \| SVGForeignObjectElement, meta: AddNodeHandlerParams) => {\n dispatch({\n type: 'setActiveAddButton',\n payload: {\n target: el,\n meta\n }\n });\n };\n\n const closeMenu = () => {\n dispatch({\n type: 'showLibrary',\n payload: {\n show: false\n }\n });\n };\n\n const closeDeleteModel = () => {\n // un-highlight the nodes and connectors\n dispatch({\n type: 'highlight',\n payload: {\n highlightItems: undefined,\n hideDeletePopover: true\n }\n });\n };\n\n const onDeleteWrapper = useCallback(\n (params: ActionParams, e: MouseEvent) => {\n const result: DeleteNodeOutcome \| false = FlowModellerHelper.deleteNode(\n graphData,\n params.nodeId\n );\n\n if (result) {\n onDelete?.({ ...params, additionalData: result }, e);\n } else {\n dispatch({\n type: 'showDeletePopover',\n payload: {\n showDeletePopover: true,\n deleteProps: {\n flowGraphData: graphData,\n rendererGraphData: stateRef.current.graphData,\n nodeId: params.nodeId,\n target: {\n getBoundingClientRect: () =>\n document\n .getElementById(`modeller-node-${stateRef.current.deleteProps?.nodeId}`)\n ?.getBoundingClientRect()\n } as PopoverProps['target'],\n onChange: highlights => {\n dispatch({\n type: 'highlight',\n payload: {\n highlightItems: highlights\n }\n });\n },\n onSubmit: outcome => {\n // un-highlight the nodes and connectors\n closeDeleteModel();\n onDelete?.({ ...params, additionalData: outcome }, e);\n },\n onCancel: closeDeleteModel\n } as ModellerState['deleteProps']\n }\n });\n }\n },\n [graphData, state.graphData]\n );\n\n useEffect(() => {\n const onGetNewPHNode: (metaData: AddNodeHandlerParams) => RendererNodeProps = metaData => {\n return {\n id: createUID(),\n children: (\n <AddButton\n addNodeHandler={(e: MouseEvent<HTMLButtonElement>) => {\n onNodeCreate(e.currentTarget as HTMLElement, metaData);\n }}\n />\n ),\n position: { x: 0, y: 0 },\n dimensions: { width: 1, height: 0 }\n };\n };\n\n const onGetNewPHConnector: (\n fromNodeId: string,\n toNodeId: string,\n metaData: AddNodeHandlerParams\n ) => RendererConnectorProps = (fromNodeId, toNodeId) => {\n return {\n id: createUID(),\n fromNodeId,\n toNodeId,\n points: [],\n data: {\n onNodeCreate\n }\n };\n };\n\n const flowNodes: RendererNodeProps[] = graphData.nodes.map(node => {\n const flowNode: RendererNodeProps = {\n ...node,\n dimensions: {\n width: 280,\n height: 120\n },\n position: {\n x: 0,\n y: 0\n },\n data: {\n isActive: state.activeItem?.id === node.id,\n actions,\n onDelete: onDeleteWrapper,\n onActionClick: onNodeActionClick,\n onClick: onNodeClick\n } as NodeComponentData\n };\n\n if (node.type.id === START_NODETYPE.id \|\| node.type.id === STOP_NODETYPE.id) {\n flowNode.dimensions.width = 58;\n flowNode.dimensions.height = 58;\n }\n return flowNode;\n });\n\n const connectors: RendererConnectorProps[] = graphData.connectors.map(connector => {\n return {\n ...connector,\n points: [],\n data: {\n label: connector.label,\n onNodeCreate\n }\n };\n });\n\n // inject the placeholderAddNodes dynamically\n const newGraphData: GraphData<RendererNodeProps, RendererConnectorProps> =\n PlaceHolderHelper.injectPlaceholderNodes(\n { nodes: flowNodes, connectors },\n onGetNewPHNode,\n onGetNewPHConnector\n );\n\n dispatch({\n type: 'setGraphData',\n payload: {\n graphData: newGraphData\n }\n });\n }, [graphData]);\n\n /*\n Library popover functionality\n */\n const onLibraryItemSelect = useCallback(\n (libItem: LibraryItem) => {\n const metaData = state.activeAddBtnMeta.meta;\n closeMenu();\n onNodeAdd((libItem as NodeLibraryItem).type, metaData);\n },\n [state.activeAddBtnMeta]\n );\n\n const onKeydown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n closeMenu();\n }\n },\n [closeMenu]\n );\n\n useOuterEvent('mousedown', [popoverEl], closeMenu);\n useOuterEvent('mousedown', [deletePopoverEl], closeDeleteModel);\n\n useEffect(() => {\n document.addEventListener('keydown', onKeydown);\n\n return () => {\n document.removeEventListener('keydown', onKeydown);\n };\n }, []);\n\n const items: NodeLibraryItem[] = nodeLibrary !== undefined ? nodeLibrary : [];\n\n return (\n <div>\n <FlowRenderer\n graphData={state.graphData}\n connector={Connector}\n node={Node}\n highlights={highlightData ?? state.highlightItems}\n />\n {state.showDeletePopover && state.deleteProps && (\n <DeletePopover\n show={state.showDeletePopover}\n ref={setDeletePopoverEl}\n {...state.deleteProps}\n />\n )}\n <ItemLibrary\n show={state.showLib}\n target={state.activeAddBtnMeta.target}\n placeholder={t('search_nodes')}\n items={items}\n onClick={onLibraryItemSelect}\n ref={setPopoverEl}\n position='bottom'\n />\n </div>\n );\n};\n\nexport default FlowModeller;\n"]}
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 useMemo\n} from 'react';\n\nimport {\n PopoverProps,\n createUID,\n useElement,\n useOuterEvent,\n useI18n,\n OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport ItemLibrary, { LibraryItem } from '../ItemLibrary/ItemLibrary';\n\nimport { GraphData } from './Renderer/Utils/Graph';\nimport {\n AddNodeHandlerParams,\n RendererConnectorProps,\n RendererNodeProps\n} from './Renderer/Renderer.types';\nimport FlowRenderer from './Renderer/Renderer';\nimport {\n ActionParams,\n NodeLibraryItem,\n START_NODETYPE,\n STOP_NODETYPE,\n NodeComponentData\n} from './Node/Node.types';\nimport PlaceHolderHelper from './Utils/addNodeUtils';\nimport { AddButton } from './AddNode';\nimport FlowModellerHelper from './helper';\nimport DeletePopover, { DeleteNodePopoverProps } from './DeletePopover';\nimport Connector from './Connector';\nimport Node from './Node';\nimport { DeleteNodeModalOption, DeleteNodeOutcome } from './Utils/deleteNodeUtils';\nimport FlowModellerContext from './FlowModellerContext';\nimport { FlowModellerProps } from './FlowModeller.types';\n\ntype ModellerState = {\n showLib: boolean;\n activeItem: Element \| null;\n activeAddBtnMeta: {\n target: null; // we will maintain ref of an Element\n meta: AddNodeHandlerParams;\n };\n graphData: GraphData<RendererNodeProps, RendererConnectorProps>;\n highlightItems?: DeleteNodeModalOption['pathItems'];\n showDeletePopover: boolean;\n deleteProps:\n \| OmitStrict<DeleteNodePopoverProps & { target: PopoverProps['target'] }, 'show'>\n \| undefined;\n};\n\nconst initState: ModellerState = {\n showLib: false,\n activeItem: null,\n activeAddBtnMeta: {\n target: null,\n meta: {\n refType: 'node',\n refId: ''\n }\n },\n graphData: { nodes: [], connectors: [] },\n highlightItems: undefined,\n showDeletePopover: false,\n deleteProps: undefined\n};\n\nconst reducer = (state: ModellerState, action: { type: string; payload: any }) => {\n switch (action.type) {\n case 'showLibrary':\n // minor optimization, not to update state.. if no change in the value\n return action.payload.show === state.showLib\n ? state\n : { ...state, showLib: action.payload.show };\n case 'setActiveItem':\n return {\n ...state,\n activeItem: action.payload.target\n };\n case 'setActiveAddButton':\n state.activeAddBtnMeta = {\n ...action.payload\n };\n return {\n ...state,\n showLib: true\n };\n case 'setGraphData':\n return {\n ...state,\n graphData: action.payload.graphData,\n highlightItems: action.payload.highlightItems\n };\n case 'highlight':\n // minor optimization to avoid unnecessary re-render\n if (action.payload.hideDeletePopover === !state.showDeletePopover) {\n return state;\n }\n\n return {\n ...state,\n highlightItems: action.payload.highlightItems,\n showDeletePopover: action.payload.hideDeletePopover !== true && state.showDeletePopover\n };\n case 'showDeletePopover':\n return {\n ...state,\n showDeletePopover: action.payload.showDeletePopover,\n deleteProps: action.payload.deleteProps\n };\n default:\n return state;\n }\n};\n\nconst FlowModeller = ({\n graphData,\n highlightData,\n onNodeActionClick,\n onNodeAdd,\n nodeLibrary,\n onNodeClick,\n onDelete,\n actions,\n readOnly\n}: PropsWithoutRef<FlowModellerProps>) => {\n const [state, dispatch] = useReducer<Reducer<ModellerState, any>>(reducer, initState);\n const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n const [deletePopoverEl, setDeletePopoverEl] = useElement<HTMLElement>(null);\n const stateRef = useRef<ModellerState>(initState);\n\n // stateRef always refers to the same state obj\n // \"fixed\" callbacks can refer to this object whenever\n // it need the current value. Note: the callbacks will not\n // be reactive - they will not re-run the instant state changes,\n // but they will see the current value whenever they do run\n stateRef.current = state;\n\n const t = useI18n();\n\n const onNodeCreate = (el: HTMLElement \| SVGForeignObjectElement, meta: AddNodeHandlerParams) => {\n dispatch({\n type: 'setActiveAddButton',\n payload: {\n target: el,\n meta\n }\n });\n };\n\n const closeMenu = () => {\n dispatch({\n type: 'showLibrary',\n payload: {\n show: false\n }\n });\n };\n\n const closeDeleteModel = () => {\n // un-highlight the nodes and connectors\n dispatch({\n type: 'highlight',\n payload: {\n highlightItems: undefined,\n hideDeletePopover: true\n }\n });\n };\n\n const onDeleteWrapper = useCallback(\n (params: ActionParams, e: MouseEvent) => {\n const result: DeleteNodeOutcome \| false = FlowModellerHelper.deleteNode(\n graphData,\n params.nodeId\n );\n\n if (result) {\n onDelete?.({ ...params, additionalData: result }, e);\n } else {\n dispatch({\n type: 'showDeletePopover',\n payload: {\n showDeletePopover: true,\n deleteProps: {\n flowGraphData: graphData,\n rendererGraphData: stateRef.current.graphData,\n nodeId: params.nodeId,\n target: {\n getBoundingClientRect: () =>\n document\n .getElementById(`modeller-node-${stateRef.current.deleteProps?.nodeId}`)\n ?.getBoundingClientRect()\n } as PopoverProps['target'],\n onChange: highlights => {\n dispatch({\n type: 'highlight',\n payload: {\n highlightItems: highlights\n }\n });\n },\n onSubmit: outcome => {\n // un-highlight the nodes and connectors\n closeDeleteModel();\n onDelete?.({ ...params, additionalData: outcome }, e);\n },\n onCancel: closeDeleteModel\n } as ModellerState['deleteProps']\n }\n });\n }\n },\n [graphData, state.graphData]\n );\n\n useEffect(() => {\n const onGetNewPHNode: (metaData: AddNodeHandlerParams) => RendererNodeProps = metaData => {\n return {\n id: createUID(),\n children: (\n <AddButton\n addNodeHandler={(e: MouseEvent<HTMLButtonElement>) => {\n onNodeCreate(e.currentTarget as HTMLElement, metaData);\n }}\n />\n ),\n position: { x: 0, y: 0 },\n dimensions: { width: 1, height: 0 }\n };\n };\n\n const onGetNewPHConnector: (\n fromNodeId: string,\n toNodeId: string,\n metaData: AddNodeHandlerParams\n ) => RendererConnectorProps = (fromNodeId, toNodeId) => {\n return {\n id: createUID(),\n fromNodeId,\n toNodeId,\n points: [],\n data: {\n onNodeCreate\n }\n };\n };\n\n const flowNodes: RendererNodeProps[] = graphData.nodes.map(node => {\n const flowNode: RendererNodeProps = {\n ...node,\n dimensions: {\n width: 280,\n height: 120\n },\n position: {\n x: 0,\n y: 0\n },\n data: {\n isActive: state.activeItem?.id === node.id,\n actions,\n onDelete: onDeleteWrapper,\n onActionClick: onNodeActionClick,\n onClick: onNodeClick\n } as NodeComponentData\n };\n\n if (node.type.id === START_NODETYPE.id \|\| node.type.id === STOP_NODETYPE.id) {\n flowNode.dimensions.width = 58;\n flowNode.dimensions.height = 58;\n }\n return flowNode;\n });\n\n const connectors: RendererConnectorProps[] = graphData.connectors.map(connector => {\n return {\n ...connector,\n points: [],\n data: {\n label: connector.label,\n onNodeCreate\n }\n };\n });\n\n // inject the placeholderAddNodes dynamically\n const newGraphData: GraphData<RendererNodeProps, RendererConnectorProps> =\n PlaceHolderHelper.injectPlaceholderNodes(\n { nodes: flowNodes, connectors },\n onGetNewPHNode,\n onGetNewPHConnector\n );\n\n dispatch({\n type: 'setGraphData',\n payload: {\n graphData: newGraphData\n }\n });\n }, [graphData]);\n\n /*\n Library popover functionality\n */\n const onLibraryItemSelect = useCallback(\n (libItem: LibraryItem) => {\n const metaData = state.activeAddBtnMeta.meta;\n closeMenu();\n onNodeAdd((libItem as NodeLibraryItem).type, metaData);\n },\n [state.activeAddBtnMeta]\n );\n\n const onKeydown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n closeMenu();\n }\n },\n [closeMenu]\n );\n\n useOuterEvent('mousedown', [popoverEl], closeMenu);\n useOuterEvent('mousedown', [deletePopoverEl], closeDeleteModel);\n\n useEffect(() => {\n document.addEventListener('keydown', onKeydown);\n\n return () => {\n document.removeEventListener('keydown', onKeydown);\n };\n }, []);\n\n const items: NodeLibraryItem[] = nodeLibrary !== undefined ? nodeLibrary : [];\n\n const ctxValue = useMemo(() => ({ readOnly }), [readOnly]);\n\n return (\n <div>\n <FlowModellerContext.Provider value={ctxValue}>\n <FlowRenderer\n graphData={state.graphData}\n connector={Connector}\n node={Node}\n highlights={highlightData ?? state.highlightItems}\n />\n </FlowModellerContext.Provider>\n {state.showDeletePopover && state.deleteProps && (\n <DeletePopover\n show={state.showDeletePopover}\n ref={setDeletePopoverEl}\n {...state.deleteProps}\n />\n )}\n <ItemLibrary\n show={state.showLib}\n target={state.activeAddBtnMeta.target}\n placeholder={t('search_nodes')}\n items={items}\n onClick={onLibraryItemSelect}\n ref={setPopoverEl}\n position='bottom'\n />\n </div>\n );\n};\n\nexport default FlowModeller;\n"]}

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

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

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

@@ -0,0 +1 @@

+ {"version":3,"file":"FlowModeller.types.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAEvF,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,SAAS,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;IAChD,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,0CAA0C;IAC1C,SAAS,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACtE,kDAAkD;IAClD,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjE,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxD,qBAAqB;IACrB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,iBAAiB;IACjB,aAAa,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IAC5C,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

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

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

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

@@ -0,0 +1 @@

+ {"version":3,"file":"FlowModeller.types.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent } from 'react';\n\nimport { Action } from '@pega/cosmos-react-core';\n\nimport { GraphData, ConnectorProps } from './Renderer/Utils/Graph';\nimport { AddNodeHandlerParams, RendererProps } from './Renderer/Renderer.types';\nimport { ActionParams, NodeProps, NodeLibraryItem, NodeType } from './Node/Node.types';\n\nexport interface FlowModellerProps {\n graphData: GraphData<NodeProps, ConnectorProps>;\n /** Node actions */\n actions?: Action[];\n /** Callback to add node from connector */\n onNodeAdd: (nodeType: NodeType, params: AddNodeHandlerParams) => void;\n /** Callback for handling the click on the node */\n onNodeClick?: (nodeId: string) => void;\n /** Callback for actions on Node */\n onNodeActionClick?: (param: ActionParams, e: MouseEvent) => void;\n /** Callback for node deletion */\n onDelete?: (param: ActionParams, e: MouseEvent) => void;\n /** Types of nodes */\n nodeLibrary: NodeLibraryItem[];\n /** Highlights */\n highlightData?: RendererProps['highlights'];\n /** To make FlowModeller readOnly state */\n readOnly?: boolean;\n}\n"]}

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

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

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

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

package/lib/components/FlowModeller/FlowModellerContext.js ADDED Viewed

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

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

@@ -0,0 +1 @@

+ {"version":3,"file":"FlowModellerContext.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModellerContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,MAAM,mBAAmB,GAAG,aAAa,CAAsC;IAC7E,QAAQ,EAAE,KAAK;CAChB,CAAC,CAAC;AAEH,eAAe,mBAAmB,CAAC","sourcesContent":["import { createContext } from 'react';\n\nimport { FlowModellerProps } from './FlowModeller.types';\n\nconst FlowModellerContext = createContext<Pick<FlowModellerProps, 'readOnly'>>({\n readOnly: false\n});\n\nexport default FlowModellerContext;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NodeTemplates.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplates.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,~~EAOhB~~,MAAM,OAAO,CAAC;~~AA6Bf~~,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAA2B,MAAM,cAAc,CAAC;AA8DtF,eAAO,MAAM,WAAW,gIAarB,kBAAkB,gBA6HpB,CAAC;AAEF,eAAO,MAAM,SAAS,oBAAqB,gBAAgB,SAAS,CAAC,gBAmBpE,CAAC;AAEF,eAAO,MAAM,OAAO,oBAAqB,gBAAgB,SAAS,CAAC,gBAmBlE,CAAC"}
1	+ {"version":3,"file":"NodeTemplates.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplates.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAQhB,MAAM,OAAO,CAAC;AA8Bf,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAA2B,MAAM,cAAc,CAAC;AA8DtF,eAAO,MAAM,WAAW,gIAarB,kBAAkB,gBA6HpB,CAAC;AAEF,eAAO,MAAM,SAAS,oBAAqB,gBAAgB,SAAS,CAAC,gBAmBpE,CAAC;AAEF,eAAO,MAAM,OAAO,oBAAqB,gBAAgB,SAAS,CAAC,gBAmBlE,CAAC"}

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useContext } from 'react';
 import { readableColor } from 'polished';
 import { MenuButton, Icon, Flex, Tooltip, useElement, useI18n, cap, Text } from '@pega/cosmos-react-core';
 import { colorMap } from '../../../utils';
+import FlowModellerContext from '../FlowModellerContext';
 import { StyledLabel, StyledCircle, StyledIcon, StyledNodeTemplateHeader, StyledNodeTempleteContent, StyledNodeTemplate, StyledText, StyledTextWithEllipsis, StyledAdditionalData, StyledNodeTemplateFooter, StyledAdditionalDataItem } from './NodeTemplate.styles';
 const MetaListItem = ({ label, value }) => {
     const [nodeAdditionalDataItem, setNodeAdditionalDataItem] = useElement();
@@ -56,6 +57,7 @@ export const DefaultNode = ({ id, label, type, description, additionalData, acti
     const [nodeIcon, setNodeIcon] = useElement();
     const [nodeErrorToolTip, setNodeErrorToolTip] = useElement();
     const color = readableColor(colorMap[type.color]);
+    const { readOnly } = useContext(FlowModellerContext);
     useEffect(() => {
         if (error) {
             setNodeDescription(null);
@@ -66,7 +68,7 @@ export const DefaultNode = ({ id, label, type, description, additionalData, acti
     return (_jsxs(StyledNodeTemplate, { "aria-label": error || label, onClick: (e) => onClick?.(id, e), onKeyDown: handleEnterKeyDown, ref: setNodeErrorToolTip, highlight: error ? true : highlight, error: error, id: `modeller-node-${id}`, ...restProps, children: [_jsxs(Flex, { as: StyledNodeTemplateHeader, container: { alignItems: 'center', pad: 1, justify: 'between' }, children: [_jsxs(Flex, { container: { alignItems: 'center' }, children: [_jsx(StyledIcon, { id: id, style: {
                                     '--bg-color': colorMap[type.color],
                                     '--fg-color': color
-                                }, ref: setNodeIcon, children: _jsx(Icon, { name: type.icon }) }), _jsx(Tooltip, { target: nodeIcon, hideDelay: 'none', children: cap(type.name) }), _jsx(StyledText, { variant: 'h4', ref: setNodeLabel, children: label }), _jsx(Tooltip, { describeTarget: false, target: nodeLabel, hideDelay: 'none', children: label })] }), actionItems && (_jsx(MenuButton, { portal: true, variant: 'simple', text: t('actions'), icon: 'more', iconOnly: true, onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), menu: {
+                                }, ref: setNodeIcon, children: _jsx(Icon, { name: type.icon }) }), _jsx(Tooltip, { target: nodeIcon, hideDelay: 'none', children: cap(type.name) }), _jsx(StyledText, { variant: 'h4', ref: setNodeLabel, children: label }), _jsx(Tooltip, { describeTarget: false, target: nodeLabel, hideDelay: 'none', children: label })] }), !readOnly && actionItems && (_jsx(MenuButton, { portal: true, variant: 'simple', text: t('actions'), icon: 'more', iconOnly: true, onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), menu: {
                             items: actionItems
                         } }))] }), description && (_jsxs(_Fragment, { children: [_jsx(StyledNodeTempleteContent, { ref: setNodeDescription, children: description }), _jsx(Tooltip, { describeTarget: false, target: nodeDescription, hideDelay: 'none', children: description })] })), additionalData && (_jsx(StyledNodeTemplateFooter, { children: _jsx(MetaList, { metadata: additionalData }) })), error && (_jsx(Tooltip, { target: nodeErrorToolTip, hideDelay: 'none', children: error }))] }));
 };

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

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

package/lib/components/FlowModeller/helper.d.ts CHANGED Viewed

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

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

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