@pega/cosmos-react-build 4.0.0-dev.2.0 → 4.0.0-dev.20.0

package/lib/components/ExpressionBuilder/CodeEditor/CodeEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.js","sourceRoot":"","sources":["../../../../src/components/ExpressionBuilder/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["// cSpell:words unfocus\nimport {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useRef,\n  useState,\n  useEffect,\n  useImperativeHandle\n} from 'react';\nimport { Controlled as ReactCodeMirror } from 'react-codemirror2';\nimport {\n  showHint,\n  defineMode,\n  Editor,\n  Position,\n  EditorChange,\n  EditorConfiguration\n} from 'codemirror';\nimport 'codemirror/addon/edit/closebrackets';\nimport 'codemirror/addon/hint/show-hint.js';\n\nimport { useConsolidatedRef, useElement, ForwardProps } from '@pega/cosmos-react-core';\nimport { StyledFormFieldInfo } from '@pega/cosmos-react-core/lib/components/FormField/FormField';\n\nimport {\n  AutoCompleteTriggerChar,\n  CodeEditorProps,\n  EditorState,\n  SuggestionType\n} from './CodeEditor.types';\nimport { StyledCodeEditor } from './CodeEditor.styles';\nimport getCodeSuggestions from './getCodeSuggestions';\n\ndefineMode('expression', () => {\n  const tokens = [\n    /* Below regex is used to identify the context  */\n    { token: /\\w+@/, style: 'ex-context' },\n    /* Below regex is used to identify the RuleType   */\n    { token: /\\w+:/, style: 'ex-context' },\n    /* Below regex is used to identify the RuleName  */\n    { token: /\\w+[(]/, style: 'ex-ruleName' },\n    /* Below regex is used to identify the delimeters  */\n    { token: /[:.(),]/, style: 'ex-delimeter' },\n    /* Below regex is used to identify the operators  */\n    { token: /[-+\\\\/*=<>@]+/, style: 'ex-operator' }\n  ];\n\n  return {\n    startState() {\n      return { inString: false };\n    },\n    token(stream, state) {\n      /* Used to identify the constants in the expression  */\n      const nextChar = stream.peek();\n      if (!state.inString && (nextChar === \"'\" || nextChar === '\"')) {\n        stream.next(); // Skip quote\n        state.inString = true; // Update state\n      }\n\n      if (state.inString) {\n        if (nextChar && stream.skipTo(nextChar)) {\n          // Quote found on this line\n          stream.next(); // Skip quote\n          state.inString = false; // Clear flag\n        } else {\n          stream.skipToEnd(); // Rest of line is string\n        }\n        return nextChar === '\"' ? 'ex-constant' : 'ex-context'; // Token style\n      }\n\n      if (stream.peek() === '.') {\n        stream.next();\n        if (stream.match(/.\\w+\\(/)) return 'ex-delimeter';\n      }\n\n      /* Used to match the regex in the expression  */\n      // eslint-disable-next-line no-restricted-syntax\n      for (const element of tokens) {\n        const match = stream.match(element.token, false);\n        if (match) {\n          if (stream.pos === stream.start) {\n            stream.next();\n          }\n          return element.style;\n        }\n      }\n      stream.next();\n      return null;\n    }\n  };\n});\n\nconst defaultConfigOptions: Pick<\n  EditorConfiguration,\n  'lineWrapping' | 'smartIndent' | 'autoCloseBrackets' | 'extraKeys'\n> = {\n  lineWrapping: true,\n  smartIndent: true,\n  autoCloseBrackets: true,\n  extraKeys: { Tab: false, 'Shift-Tab': false }\n};\n\nconst CodeEditor: FunctionComponent<CodeEditorProps & ForwardProps> = forwardRef(\n  (\n    {\n      fetchSuggestions,\n      autoCompleteTriggers,\n      editorConfigProps,\n      codeEditorHandle,\n      defaultValue = '',\n      loading = false,\n      readOnly,\n      errors,\n      onChange,\n      ...props\n    }: PropsWithoutRef<CodeEditorProps>,\n    ref: CodeEditorProps['ref']\n  ) => {\n    const [value, setCode] = useState<string>(defaultValue);\n    const [suggestions, setSuggestions] = useState<SuggestionType[]>([]);\n    const [codeMirror, setCodeMirror] = useState<Editor | null>(null);\n    const [codeEditorContainer, setCodeEditorContainer] = useElement<HTMLDivElement>();\n    const codeEditorConsolidatedRef = useConsolidatedRef(setCodeEditorContainer, ref);\n    const [suggestionTrigger, setSuggestionTrigger] = useState<{\n      character: AutoCompleteTriggerChar;\n      cursorPosition: Position;\n    } | null>(null);\n    const [popover, showPopover] = useState(false);\n    const mounted = useRef(false);\n\n    useImperativeHandle<any, EditorState>(\n      codeEditorHandle,\n      () => ({\n        insertText: (text: string) => {\n          if (codeMirror) {\n            if (codeMirror.getSelection()) {\n              codeMirror.replaceSelection(text);\n            } else {\n              const cur: Position = codeMirror.getCursor();\n              codeMirror.replaceRange(text, cur);\n            }\n          }\n        },\n        getValue: () => {\n          return codeMirror?.getValue();\n        }\n      }),\n      [codeMirror]\n    );\n\n    const autoComplete = (codeEditor: Editor) => {\n      const hintOptions = {\n        completeSingle: false,\n        completeOnSingleClick: true,\n        closeOnUnfocus: true,\n        suggestions,\n        container: codeEditorContainer,\n        loading,\n        triggerCharacterCursorPos: suggestionTrigger?.cursorPosition\n      };\n      showHint(codeEditor, getCodeSuggestions, hintOptions);\n    };\n\n    const onBeforeChange = async (editor: Editor, _data: EditorChange, textvalue: string) => {\n      setCode(textvalue);\n      onChange?.(textvalue);\n      const currentCursor = editor.getCursor();\n      const currentCharacter = editor\n        .getTokenAt(currentCursor)\n        .string.trim() as AutoCompleteTriggerChar;\n\n      let newSuggestions: SuggestionType[] = [];\n\n      if (autoCompleteTriggers?.includes(currentCharacter) && fetchSuggestions) {\n        setSuggestionTrigger({\n          character: currentCharacter,\n          cursorPosition: currentCursor\n        });\n\n        /* Used to find the query token which is present before the triggering character\n          to get updated list.  */\n        const cursorLineText = editor.getValue().split('\\n')[currentCursor.line];\n        const textTillCursorPos = cursorLineText.substring(0, currentCursor.ch);\n        let start = textTillCursorPos?.lastIndexOf(' ');\n        if (start === -1) {\n          start = 0;\n        }\n        const currentWord = textTillCursorPos.substring(start, currentCursor.ch);\n\n        let regexp;\n        if (currentCharacter === '.') {\n          regexp = /[\\w$]*(\\.+[\\w$)[\\](]*)+/g;\n        } else {\n          regexp = /[\\w@'-]*[@:]/g;\n        }\n\n        const tokenArray = [...currentWord.matchAll(regexp)];\n        let queryToken = '';\n        if (tokenArray.length > 0) {\n          const queryString = tokenArray[tokenArray.length - 1][0];\n          queryToken = queryString.substring(0, queryString.length - 1);\n        }\n\n        newSuggestions = [...(await fetchSuggestions(currentCharacter, queryToken))];\n        if (mounted.current) {\n          setSuggestions(newSuggestions);\n        }\n      }\n    };\n\n    useEffect(() => {\n      if (!popover) return;\n      const isSuggestionTriggerPresent =\n        suggestionTrigger &&\n        codeMirror\n          ?.getTokenAt(suggestionTrigger.cursorPosition)\n          .string.includes(suggestionTrigger.character);\n\n      if (!isSuggestionTriggerPresent) {\n        codeMirror?.closeHint();\n        showPopover(false);\n        setSuggestionTrigger(null);\n      }\n    }, [onBeforeChange]);\n\n    useEffect(() => {\n      if (codeMirror && (suggestionTrigger || loading)) {\n        autoComplete(codeMirror);\n        showPopover(true);\n      } else {\n        codeMirror?.closeHint();\n        showPopover(false);\n      }\n    }, [suggestions, loading]);\n\n    useEffect(() => {\n      mounted.current = true;\n      return () => {\n        mounted.current = false;\n      };\n    }, []);\n\n    return (\n      <StyledCodeEditor\n        container={{\n          direction: 'column',\n          justify: 'between'\n        }}\n        item={{\n          grow: 1\n        }}\n        ref={codeEditorConsolidatedRef}\n        errors={errors}\n        readOnly={readOnly}\n        isLoading={loading}\n        suggestions={suggestions}\n        {...props}\n      >\n        <ReactCodeMirror\n          value={value}\n          onBeforeChange={onBeforeChange}\n          options={{ ...defaultConfigOptions, ...editorConfigProps }}\n          editorDidMount={editor => {\n            editor.setSize('100%', '100%');\n            setCodeMirror(editor);\n          }}\n        />\n        {errors && <StyledFormFieldInfo status='error'>{errors}</StyledFormFieldInfo>}\n      </StyledCodeEditor>\n    );\n  }\n);\n\nexport default CodeEditor;\n"]}
+{"version":3,"file":"CodeEditor.js","sourceRoot":"","sources":["../../../../src/components/ExpressionBuilder/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":";AAAA,uBAAuB;AACvB,OAAO,EACL,UAAU,EAGV,MAAM,EACN,QAAQ,EACR,SAAS,EACT,mBAAmB,EACpB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAClE,OAAO,EACL,QAAQ,EACR,UAAU,EAKX,MAAM,YAAY,CAAC;AACpB,OAAO,qCAAqC,CAAC;AAC7C,OAAO,oCAAoC,CAAC;AAE5C,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAgB,MAAM,yBAAyB,CAAC;AACvF,OAAO,EAAE,mBAAmB,EAAE,MAAM,4DAA4D,CAAC;AAQjG,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AAEtD,UAAU,CAAC,YAAY,EAAE,GAAG,EAAE;IAC5B,MAAM,MAAM,GAAG;QACb,8CAA8C;QAC9C,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE;QACtC,+CAA+C;QAC/C,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE;QACtC,+CAA+C;QAC/C,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE;QACzC,iDAAiD;QACjD,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,EAAE;QAC3C,gDAAgD;QAChD,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,aAAa,EAAE;QAChD,6CAA6C;QAC7C,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE;KAClC,CAAC;IAEF,OAAO;QACL,UAAU;YACR,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;QAC7B,CAAC;QACD,KAAK,CAAC,MAAM,EAAE,KAAK;YACjB,mDAAmD;YACnD,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,EAAE,CAAC;YAC/B,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,QAAQ,KAAK,GAAG,IAAI,QAAQ,KAAK,GAAG,CAAC,EAAE;gBAC7D,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,aAAa;gBAC5B,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,eAAe;aACvC;YAED,IAAI,KAAK,CAAC,QAAQ,EAAE;gBAClB,IAAI,QAAQ,IAAI,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE;oBACvC,2BAA2B;oBAC3B,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,aAAa;oBAC5B,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAC,aAAa;iBACtC;qBAAM;oBACL,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,yBAAyB;iBAC9C;gBACD,OAAO,QAAQ,KAAK,GAAG,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,cAAc;aACvE;YAED,IAAI,MAAM,CAAC,IAAI,EAAE,KAAK,GAAG,EAAE;gBACzB,MAAM,CAAC,IAAI,EAAE,CAAC;gBACd,IAAI,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC;oBAAE,OAAO,cAAc,CAAC;aACnD;YAED,4CAA4C;YAC5C,KAAK,MAAM,OAAO,IAAI,MAAM,EAAE;gBAC5B,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;gBACjD,IAAI,KAAK,EAAE;oBACT,IAAI,MAAM,CAAC,GAAG,KAAK,MAAM,CAAC,KAAK,EAAE;wBAC/B,MAAM,CAAC,IAAI,EAAE,CAAC;qBACf;oBACD,OAAO,OAAO,CAAC,KAAK,CAAC;iBACtB;aACF;YACD,MAAM,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,IAAI,CAAC;QACd,CAAC;KACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,oBAAoB,GAGtB;IACF,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,IAAI;IACjB,iBAAiB,EAAE,IAAI;IACvB,SAAS,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE;CAC9C,CAAC;AAEF,MAAM,UAAU,GAAsD,UAAU,CAC9E,CACE,EACE,gBAAgB,EAChB,oBAAoB,EACpB,iBAAiB,EACjB,gBAAgB,EAChB,YAAY,GAAG,EAAE,EACjB,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,GAAG,KAAK,EACyB,EACnC,GAA2B,EAC3B,EAAE;IACF,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAS,YAAY,CAAC,CAAC;IACxD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAmB,EAAE,CAAC,CAAC;IACrE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAClE,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,UAAU,EAAkB,CAAC;IACnF,MAAM,yBAAyB,GAAG,kBAAkB,CAAC,sBAAsB,EAAE,GAAG,CAAC,CAAC;IAClF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAGhD,IAAI,CAAC,CAAC;IAChB,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC/C,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAE9B,mBAAmB,CACjB,gBAAgB,EAChB,GAAG,EAAE,CAAC,CAAC;QACL,UAAU,EAAE,CAAC,IAAY,EAAE,EAAE;YAC3B,IAAI,UAAU,EAAE;gBACd,IAAI,UAAU,CAAC,YAAY,EAAE,EAAE;oBAC7B,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;iBACnC;qBAAM;oBACL,MAAM,GAAG,GAAa,UAAU,CAAC,SAAS,EAAE,CAAC;oBAC7C,UAAU,CAAC,YAAY,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;iBACpC;aACF;QACH,CAAC;QACD,QAAQ,EAAE,GAAG,EAAE;YACb,OAAO,UAAU,EAAE,QAAQ,EAAE,CAAC;QAChC,CAAC;KACF,CAAC,EACF,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,UAAkB,EAAE,EAAE;QAC1C,MAAM,WAAW,GAAG;YAClB,cAAc,EAAE,KAAK;YACrB,qBAAqB,EAAE,IAAI;YAC3B,cAAc,EAAE,IAAI;YACpB,WAAW;YACX,SAAS,EAAE,mBAAmB;YAC9B,OAAO;YACP,yBAAyB,EAAE,iBAAiB,EAAE,cAAc;SAC7D,CAAC;QACF,QAAQ,CAAC,UAAU,EAAE,kBAAkB,EAAE,WAAW,CAAC,CAAC;IACxD,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,KAAK,EAAE,MAAc,EAAE,KAAmB,EAAE,SAAiB,EAAE,EAAE;QACtF,OAAO,CAAC,SAAS,CAAC,CAAC;QACnB,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC;QACtB,MAAM,aAAa,GAAG,MAAM,CAAC,SAAS,EAAE,CAAC;QACzC,MAAM,gBAAgB,GAAG,MAAM;aAC5B,UAAU,CAAC,aAAa,CAAC;aACzB,MAAM,CAAC,IAAI,EAA6B,CAAC;QAE5C,IAAI,cAAc,GAAqB,EAAE,CAAC;QAE1C,IAAI,oBAAoB,EAAE,QAAQ,CAAC,gBAAgB,CAAC,IAAI,gBAAgB,EAAE;YACxE,oBAAoB,CAAC;gBACnB,SAAS,EAAE,gBAAgB;gBAC3B,cAAc,EAAE,aAAa;aAC9B,CAAC,CAAC;YAEH,cAAc,GAAG;gBACf,GAAG,CAAC,MAAM,gBAAgB,CAAC,gBAAgB,EAAE;oBAC3C,IAAI,EAAE,aAAa,CAAC,IAAI;oBACxB,EAAE,EAAE,aAAa,CAAC,EAAE;iBACrB,CAAC,CAAC;aACJ,CAAC;YACF,IAAI,OAAO,CAAC,OAAO,EAAE;gBACnB,cAAc,CAAC,cAAc,CAAC,CAAC;aAChC;SACF;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO;YAAE,OAAO;QACrB,MAAM,0BAA0B,GAC9B,iBAAiB;YACjB,UAAU;gBACR,EAAE,UAAU,CAAC,iBAAiB,CAAC,cAAc,CAAC;iBAC7C,MAAM,CAAC,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC;QAElD,IAAI,CAAC,0BAA0B,EAAE;YAC/B,UAAU,EAAE,SAAS,EAAE,CAAC;YACxB,WAAW,CAAC,KAAK,CAAC,CAAC;YACnB,oBAAoB,CAAC,IAAI,CAAC,CAAC;SAC5B;IACH,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,IAAI,CAAC,iBAAiB,IAAI,OAAO,CAAC,EAAE;YAChD,YAAY,CAAC,UAAU,CAAC,CAAC;YACzB,WAAW,CAAC,IAAI,CAAC,CAAC;SACnB;aAAM;YACL,UAAU,EAAE,SAAS,EAAE,CAAC;YACxB,WAAW,CAAC,KAAK,CAAC,CAAC;SACpB;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;IAE3B,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QACvB,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,MAAC,gBAAgB,IACf,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,OAAO,EAAE,SAAS;SACnB,EACD,IAAI,EAAE;YACJ,IAAI,EAAE,CAAC;SACR,EACD,GAAG,EAAE,yBAAyB,EAC9B,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,OAAO,EAClB,WAAW,EAAE,WAAW,KACpB,KAAK,aAET,KAAC,eAAe,IACd,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,EAAE,GAAG,oBAAoB,EAAE,GAAG,iBAAiB,EAAE,EAC1D,cAAc,EAAE,MAAM,CAAC,EAAE;oBACvB,MAAM,CAAC,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;oBAC/B,aAAa,CAAC,MAAM,CAAC,CAAC;gBACxB,CAAC,GACD,EACD,MAAM,IAAI,KAAC,mBAAmB,IAAC,MAAM,EAAC,OAAO,YAAE,MAAM,GAAuB,IAC5D,CACpB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["// cspell:words unfocus\nimport {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useRef,\n  useState,\n  useEffect,\n  useImperativeHandle\n} from 'react';\nimport { Controlled as ReactCodeMirror } from 'react-codemirror2';\nimport {\n  showHint,\n  defineMode,\n  Editor,\n  Position,\n  EditorChange,\n  EditorConfiguration\n} from 'codemirror';\nimport 'codemirror/addon/edit/closebrackets';\nimport 'codemirror/addon/hint/show-hint.js';\n\nimport { useConsolidatedRef, useElement, ForwardProps } from '@pega/cosmos-react-core';\nimport { StyledFormFieldInfo } from '@pega/cosmos-react-core/lib/components/FormField/FormField';\n\nimport {\n  AutoCompleteTriggerChar,\n  CodeEditorProps,\n  EditorState,\n  SuggestionType\n} from './CodeEditor.types';\nimport { StyledCodeEditor } from './CodeEditor.styles';\nimport getCodeSuggestions from './getCodeSuggestions';\n\ndefineMode('expression', () => {\n  const tokens = [\n    // Below regex is used to identify the context\n    { token: /\\w+@/, style: 'ex-context' },\n    // Below regex is used to identify the RuleType\n    { token: /\\w+:/, style: 'ex-context' },\n    // Below regex is used to identify the RuleName\n    { token: /\\w+[(]/, style: 'ex-ruleName' },\n    // Below regex is used to identify the delimeters\n    { token: /[:.(),]/, style: 'ex-delimeter' },\n    // Below regex is used to identify the operators\n    { token: /[-+\\\\/*=<>@]+/, style: 'ex-operator' },\n    // Below regex is used to identify the spaces\n    { token: / /, style: 'ex-space' }\n  ];\n\n  return {\n    startState() {\n      return { inString: false };\n    },\n    token(stream, state) {\n      // Used to identify the constants in the expression\n      const nextChar = stream.peek();\n      if (!state.inString && (nextChar === \"'\" || nextChar === '\"')) {\n        stream.next(); // Skip quote\n        state.inString = true; // Update state\n      }\n\n      if (state.inString) {\n        if (nextChar && stream.skipTo(nextChar)) {\n          // Quote found on this line\n          stream.next(); // Skip quote\n          state.inString = false; // Clear flag\n        } else {\n          stream.skipToEnd(); // Rest of line is string\n        }\n        return nextChar === '\"' ? 'ex-constant' : 'ex-context'; // Token style\n      }\n\n      if (stream.peek() === '.') {\n        stream.next();\n        if (stream.match(/.\\w+\\(/)) return 'ex-delimeter';\n      }\n\n      // Used to match the regex in the expression\n      for (const element of tokens) {\n        const match = stream.match(element.token, false);\n        if (match) {\n          if (stream.pos === stream.start) {\n            stream.next();\n          }\n          return element.style;\n        }\n      }\n      stream.next();\n      return null;\n    }\n  };\n});\n\nconst defaultConfigOptions: Pick<\n  EditorConfiguration,\n  'lineWrapping' | 'smartIndent' | 'autoCloseBrackets' | 'extraKeys'\n> = {\n  lineWrapping: true,\n  smartIndent: true,\n  autoCloseBrackets: true,\n  extraKeys: { Tab: false, 'Shift-Tab': false }\n};\n\nconst CodeEditor: FunctionComponent<CodeEditorProps & ForwardProps> = forwardRef(\n  (\n    {\n      fetchSuggestions,\n      autoCompleteTriggers,\n      editorConfigProps,\n      codeEditorHandle,\n      defaultValue = '',\n      loading = false,\n      readOnly,\n      errors,\n      onChange,\n      ...props\n    }: PropsWithoutRef<CodeEditorProps>,\n    ref: CodeEditorProps['ref']\n  ) => {\n    const [value, setCode] = useState<string>(defaultValue);\n    const [suggestions, setSuggestions] = useState<SuggestionType[]>([]);\n    const [codeMirror, setCodeMirror] = useState<Editor | null>(null);\n    const [codeEditorContainer, setCodeEditorContainer] = useElement<HTMLDivElement>();\n    const codeEditorConsolidatedRef = useConsolidatedRef(setCodeEditorContainer, ref);\n    const [suggestionTrigger, setSuggestionTrigger] = useState<{\n      character: AutoCompleteTriggerChar;\n      cursorPosition: Position;\n    } | null>(null);\n    const [popover, showPopover] = useState(false);\n    const mounted = useRef(false);\n\n    useImperativeHandle<any, EditorState>(\n      codeEditorHandle,\n      () => ({\n        insertText: (text: string) => {\n          if (codeMirror) {\n            if (codeMirror.getSelection()) {\n              codeMirror.replaceSelection(text);\n            } else {\n              const cur: Position = codeMirror.getCursor();\n              codeMirror.replaceRange(text, cur);\n            }\n          }\n        },\n        getValue: () => {\n          return codeMirror?.getValue();\n        }\n      }),\n      [codeMirror]\n    );\n\n    const autoComplete = (codeEditor: Editor) => {\n      const hintOptions = {\n        completeSingle: false,\n        completeOnSingleClick: true,\n        closeOnUnfocus: true,\n        suggestions,\n        container: codeEditorContainer,\n        loading,\n        triggerCharacterCursorPos: suggestionTrigger?.cursorPosition\n      };\n      showHint(codeEditor, getCodeSuggestions, hintOptions);\n    };\n\n    const onBeforeChange = async (editor: Editor, _data: EditorChange, textvalue: string) => {\n      setCode(textvalue);\n      onChange?.(textvalue);\n      const currentCursor = editor.getCursor();\n      const currentCharacter = editor\n        .getTokenAt(currentCursor)\n        .string.trim() as AutoCompleteTriggerChar;\n\n      let newSuggestions: SuggestionType[] = [];\n\n      if (autoCompleteTriggers?.includes(currentCharacter) && fetchSuggestions) {\n        setSuggestionTrigger({\n          character: currentCharacter,\n          cursorPosition: currentCursor\n        });\n\n        newSuggestions = [\n          ...(await fetchSuggestions(currentCharacter, {\n            line: currentCursor.line,\n            ch: currentCursor.ch\n          }))\n        ];\n        if (mounted.current) {\n          setSuggestions(newSuggestions);\n        }\n      }\n    };\n\n    useEffect(() => {\n      if (!popover) return;\n      const isSuggestionTriggerPresent =\n        suggestionTrigger &&\n        codeMirror\n          ?.getTokenAt(suggestionTrigger.cursorPosition)\n          .string.includes(suggestionTrigger.character);\n\n      if (!isSuggestionTriggerPresent) {\n        codeMirror?.closeHint();\n        showPopover(false);\n        setSuggestionTrigger(null);\n      }\n    }, [onBeforeChange]);\n\n    useEffect(() => {\n      if (codeMirror && (suggestionTrigger || loading)) {\n        autoComplete(codeMirror);\n        showPopover(true);\n      } else {\n        codeMirror?.closeHint();\n        showPopover(false);\n      }\n    }, [suggestions, loading]);\n\n    useEffect(() => {\n      mounted.current = true;\n      return () => {\n        mounted.current = false;\n      };\n    }, []);\n\n    return (\n      <StyledCodeEditor\n        container={{\n          direction: 'column',\n          justify: 'between'\n        }}\n        item={{\n          grow: 1\n        }}\n        ref={codeEditorConsolidatedRef}\n        errors={errors}\n        readOnly={readOnly}\n        isLoading={loading}\n        suggestions={suggestions}\n        {...props}\n      >\n        <ReactCodeMirror\n          value={value}\n          onBeforeChange={onBeforeChange}\n          options={{ ...defaultConfigOptions, ...editorConfigProps }}\n          editorDidMount={editor => {\n            editor.setSize('100%', '100%');\n            setCodeMirror(editor);\n          }}\n        />\n        {errors && <StyledFormFieldInfo status='error'>{errors}</StyledFormFieldInfo>}\n      </StyledCodeEditor>\n    );\n  }\n);\n\nexport default CodeEditor;\n"]}

package/lib/components/ExpressionBuilder/CodeEditor/CodeEditor.styles.js

@@ -1,4 +1,4 @@
-// cSpell:words vscrollbar hscrollbar
+// cspell:words vscrollbar hscrollbar
 import styled, { css } from 'styled-components';
 import { mix } from 'polished';
 import { defaultThemeProp, calculateFontSize, Flex } from '@pega/cosmos-react-core';
@@ -464,7 +464,7 @@ export const StyledCodeEditor = styled(Flex)(({ theme: { base, components: { 'fo
       }
 
       .cm-ex-context {
-        color: ${base.palette['brand-primary']};
+        color: ${base.palette.interactive};
       }
       .cm-ex-operator {
         color: ${base.palette.warn};
@@ -517,13 +517,13 @@ export const StyledCodeEditor = styled(Flex)(({ theme: { base, components: { 'fo
         padding-inline: ${base.spacing};
       }
 
-      li.CodeMirror-hint-active {
-        ${!isLoading &&
+      ${!isLoading &&
         suggestions?.length > 0 &&
         css `
+        li.CodeMirror-hint-active {
           background-color: ${activeColor};
-        `}
-      }
+        }
+      `}
     `;
 });
 StyledCodeEditor.defaultProps = defaultThemeProp;

package/lib/components/ExpressionBuilder/CodeEditor/CodeEditor.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.styles.js","sourceRoot":"","sources":["../../../../src/components/ExpressionBuilder/CodeEditor/CodeEditor.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// cSpell:words vscrollbar hscrollbar\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport { defaultThemeProp, calculateFontSize, Flex } from '@pega/cosmos-react-core';\nimport { StyledFormField } from '@pega/cosmos-react-core/lib/components/FormField/FormField';\n\nimport { SuggestionType } from './CodeEditor.types';\n\nexport const StyledLoading = styled.div`\n  font-size: 1.5rem;\n`;\n\nexport const StyledCodeEditor = styled(Flex)<{\n  isLoading?: boolean;\n  errors?: string;\n  readOnly?: boolean;\n  suggestions: SuggestionType[];\n}>(\n  ({\n    theme: {\n      base,\n      components: {\n        'form-control': {\n          ':read-only': { 'background-color': readOnlyBackgroundColor }\n        },\n        'form-field': {\n          error: { 'status-color': errorBackground }\n        }\n      }\n    },\n    errors,\n    isLoading,\n    suggestions,\n    readOnly\n  }) => {\n    const activeColor = mix(0.85, base.palette['primary-background'], base.palette.interactive);\n\n    const hoverColor = mix(0.95, base.palette['primary-background'], base.palette.interactive);\n\n    const fontSizes = calculateFontSize(base['font-size'], base['font-scale']);\n    return css`\n      position: relative;\n      max-height: 100%;\n      overflow-y: auto;\n      ${StyledFormField} {\n        flex-grow: 1;\n      }\n\n      /* PADDING */\n      .react-codemirror2 {\n        flex-grow: 1;\n        min-height: 3.75rem;\n        overflow-y: auto;\n        ${readOnly &&\n        css`\n          max-height: 5.625rem;\n        `}\n      }\n\n      .CodeMirror-lines {\n        cursor: text;\n        min-height: 0.063rem; /* prevents collapsing before first draw */\n        padding: ${base.spacing};\n      }\n\n      .CodeMirror-scrollbar-filler,\n      .CodeMirror-gutter-filler {\n        background-color: white; /* The little square between H and V scrollbars */\n      }\n\n      /* GUTTER */\n\n      .CodeMirror-gutters {\n        position: absolute;\n        left: 0;\n        top: 0;\n        min-height: 100%;\n        z-index: 3;\n        border-right: 0.063rem solid #dddddd;\n        background-color: #f7f7f7;\n        white-space: nowrap;\n      }\n      .CodeMirror-linenumber {\n        padding: 0 0.125rem 0 0.313rem;\n        min-width: 1.25rem;\n        text-align: right;\n        color: #999999;\n        white-space: nowrap;\n      }\n\n      .CodeMirror-guttermarker {\n        color: black;\n      }\n      .CodeMirror-guttermarker-subtle {\n        color: #999999;\n      }\n\n      /* CURSOR */\n\n      .CodeMirror-cursor {\n        position: absolute;\n        pointer-events: none;\n        border-left: 0.0625rem solid ${base.palette.dark};\n        border-right: none;\n        width: 0;\n        ${readOnly &&\n        css`\n          display: none;\n        `}\n      }\n\n      /* Shown when moving in bi-directional text */\n      .CodeMirror div.CodeMirror-secondarycursor {\n        border-left: 0.063rem solid silver;\n      }\n      .cm-fat-cursor-mark {\n        background-color: rgba(20, 255, 20, 0.5);\n        -webkit-animation: blink 1.06s steps(1) infinite;\n        -moz-animation: blink 1.06s steps(1) infinite;\n        animation: blink 1.06s steps(1) infinite;\n      }\n      .cm-animate-fat-cursor {\n        width: auto;\n        border: 0;\n        -webkit-animation: blink 1.06s steps(1) infinite;\n        -moz-animation: blink 1.06s steps(1) infinite;\n        animation: blink 1.06s steps(1) infinite;\n        background-color: #77ee77;\n      }\n      @-moz-keyframes blink {\n        50% {\n          background-color: transparent;\n        }\n      }\n      @-webkit-keyframes blink {\n        50% {\n          background-color: transparent;\n        }\n      }\n      @keyframes blink {\n        50% {\n          background-color: transparent;\n        }\n      }\n\n      .cm-tab {\n        display: inline-block;\n        text-decoration: inherit;\n      }\n\n      .CodeMirror-rulers {\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: -3.125rem;\n        bottom: 0;\n        overflow: hidden;\n      }\n      .CodeMirror-ruler {\n        border-left: 0.063rem solid #cccccc;\n        top: 0;\n        bottom: 0;\n        position: absolute;\n      }\n\n      /* DEFAULT THEME */\n\n      .cm-s-default .cm-header {\n        color: blue;\n      }\n      .cm-negative {\n        color: #dd4444;\n      }\n      .cm-positive {\n        color: #229922;\n      }\n      .cm-strong {\n        font-weight: bold;\n      }\n      .cm-s-default .cm-quote {\n        color: #009900;\n      }\n      .cm-em {\n        font-style: italic;\n      }\n      .cm-link {\n        text-decoration: underline;\n      }\n      .cm-strikethrough {\n        text-decoration: line-through;\n      }\n\n      .cm-s-default .cm-keyword {\n        color: #770088;\n      }\n      .cm-s-default .cm-atom {\n        color: #221199;\n      }\n      .cm-s-default .cm-number {\n        color: #116644;\n      }\n      .cm-s-default .cm-def {\n        color: #0000ff;\n      }\n      .cm-s-default .cm-variable-2 {\n        color: #0055aa;\n      }\n      .cm-s-default .cm-variable-3,\n      .cm-s-default .cm-type {\n        color: #008855;\n      }\n      .cm-s-default .cm-comment {\n        color: #aa5500;\n      }\n      .cm-s-default .cm-string {\n        color: #aa1111;\n      }\n      .cm-s-default .cm-string-2 {\n        color: #ff5500;\n      }\n      .cm-s-default .cm-meta {\n        color: #555555;\n      }\n      .cm-s-default .cm-qualifier {\n        color: #555555;\n      }\n      .cm-s-default .cm-builtin {\n        color: #3300aa;\n      }\n      .cm-s-default .cm-bracket {\n        color: #999977;\n      }\n      .cm-s-default .cm-tag {\n        color: #117700;\n      }\n      .cm-s-default .cm-attribute {\n        color: #0000cc;\n      }\n      .cm-s-default .cm-hr {\n        color: #999999;\n      }\n      .cm-s-default .cm-link {\n        color: #0000cc;\n      }\n\n      .cm-s-default .cm-error {\n        color: #ff0000;\n      }\n      .cm-invalidchar {\n        color: #ff0000;\n      }\n\n      .CodeMirror-composing {\n        border-bottom: 0.125rem solid;\n      }\n\n      /* Default styles for common addons */\n\n      div.CodeMirror span.CodeMirror-matchingbracket {\n        color: #00bb00;\n      }\n      div.CodeMirror span.CodeMirror-nonmatchingbracket {\n        color: #aa2222;\n      }\n      .CodeMirror-matchingtag {\n        background: rgba(255, 150, 0, 0.3);\n      }\n      .CodeMirror-activeline-background {\n        background: #e8f2ff;\n      }\n\n      /* STOP */\n\n      /* The rest of this file contains styles related to the mechanics of\n   the editor. You probably shouldn't touch them. */\n\n      .CodeMirror-scroll {\n        overflow: scroll !important;\n        margin-bottom: -3.125rem;\n        margin-right: -3.125rem;\n        padding-bottom: 3.125rem;\n        height: 100%;\n        outline: none; /* Prevent dragging from highlighting the element */\n        position: relative;\n      }\n      .CodeMirror-sizer {\n        position: relative;\n        border-right: 3.125rem solid transparent;\n      }\n\n      /* The fake, visible scrollbars. Used to force redraw during scrolling\n   before actual scrolling happens, thus preventing shaking and\n   flickering artifacts. */\n      .CodeMirror-vscrollbar,\n      .CodeMirror-hscrollbar,\n      .CodeMirror-scrollbar-filler,\n      .CodeMirror-gutter-filler {\n        position: absolute;\n        z-index: 6;\n        display: none;\n      }\n      .CodeMirror-vscrollbar {\n        right: 0;\n        top: 0;\n        overflow-x: hidden;\n        overflow-y: scroll;\n      }\n      .CodeMirror-hscrollbar {\n        bottom: 0;\n        left: 0;\n        overflow-y: hidden;\n        overflow-x: scroll;\n      }\n      .CodeMirror-scrollbar-filler {\n        right: 0;\n        bottom: 0;\n      }\n      .CodeMirror-gutter-filler {\n        left: 0;\n        bottom: 0;\n      }\n      .CodeMirror-gutter {\n        white-space: normal;\n        height: 100%;\n        display: inline-block;\n        vertical-align: top;\n        margin-bottom: -3.125rem;\n      }\n      .CodeMirror-gutter-wrapper {\n        position: absolute;\n        z-index: 4;\n        background: none !important;\n        border: none !important;\n      }\n      .CodeMirror-gutter-background {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        z-index: 4;\n      }\n      .CodeMirror-gutter-elt {\n        position: absolute;\n        cursor: default;\n        z-index: 4;\n      }\n      .CodeMirror-gutter-wrapper ::selection {\n        background-color: transparent;\n      }\n      .CodeMirror-gutter-wrapper ::-moz-selection {\n        background-color: transparent;\n      }\n\n      .CodeMirror pre.CodeMirror-line,\n      .CodeMirror pre.CodeMirror-line-like {\n        /* Reset some styles that the rest of the page might have set */\n        -moz-border-radius: 0;\n        -webkit-border-radius: 0;\n        border-radius: 0;\n        border-width: 0;\n        background: transparent;\n        font-family: inherit;\n        font-size: inherit;\n        margin: 0;\n        white-space: pre;\n        word-wrap: normal;\n        line-height: inherit;\n        color: inherit;\n        z-index: 2;\n        position: relative;\n        overflow: visible;\n        -webkit-tap-highlight-color: transparent;\n        -webkit-font-variant-ligatures: contextual;\n        font-variant-ligatures: contextual;\n      }\n      .CodeMirror-wrap pre.CodeMirror-line,\n      .CodeMirror-wrap pre.CodeMirror-line-like {\n        word-wrap: break-word;\n        white-space: pre-wrap;\n        word-break: normal;\n      }\n\n      .CodeMirror-linebackground {\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        z-index: 0;\n      }\n\n      .CodeMirror-linewidget {\n        position: relative;\n        z-index: 2;\n        padding: 0.006rem; /* Force widget margins to stay inside of the container */\n      }\n\n      .CodeMirror-rtl pre {\n        direction: rtl;\n      }\n\n      .CodeMirror-code {\n        outline: none;\n      }\n\n      /* Force content-box sizing for the elements where we expect it */\n      .CodeMirror-scroll,\n      .CodeMirror-sizer,\n      .CodeMirror-gutter,\n      .CodeMirror-linenumber {\n        -moz-box-sizing: content-box;\n        box-sizing: content-box;\n      }\n\n      .CodeMirror-measure {\n        position: absolute;\n        width: 100%;\n        height: 0;\n        overflow: hidden;\n        visibility: hidden;\n      }\n\n      .CodeMirror-measure pre {\n        position: static;\n      }\n\n      div.CodeMirror-dragcursors {\n        visibility: visible;\n      }\n\n      .CodeMirror-selected {\n        background: #d9d9d9;\n      }\n      .CodeMirror-focused .CodeMirror-selected {\n        background: #d7d4f0;\n      }\n      .CodeMirror-focused {\n        border-color: ${base.palette.interactive} !important;\n      }\n      .CodeMirror:not(.CodeMirror-focused) .CodeMirror-cursors {\n        visibility: hidden;\n      }\n      .CodeMirror-crosshair {\n        cursor: crosshair;\n      }\n      .CodeMirror-line::selection,\n      .CodeMirror-line > span::selection,\n      .CodeMirror-line > span > span::selection {\n        background: #d7d4f0;\n      }\n      .CodeMirror-line::-moz-selection,\n      .CodeMirror-line > span::-moz-selection,\n      .CodeMirror-line > span > span::-moz-selection {\n        background: #d7d4f0;\n      }\n\n      .cm-searching {\n        background-color: rgba(255, 255, 0, 0.4);\n      }\n\n      /* Used to force a border model for a node */\n      .cm-force-border {\n        padding-right: 0.006rem;\n      }\n\n      /* See issue #2901 */\n      .cm-tab-wrap-hack::after {\n        content: '';\n      }\n\n      /* Help users use markselection to safely style text background */\n      span.CodeMirror-selectedtext {\n        background: none;\n      }\n\n      .CodeMirror {\n        overflow: hidden;\n        font-family: monospace;\n        direction: ltr;\n        position: relative;\n        background-color: ${base.palette['background-color']};\n        color: ${base.palette['foreground-color']};\n        border: 0.0625rem solid ${base.palette['border-line']};\n        border-radius: calc(0.5 * ${base['border-radius']});\n        ${errors &&\n        css`\n          border-color: ${errorBackground};\n        `}\n        ${readOnly &&\n        css`\n          background-color: ${readOnlyBackgroundColor};\n        `}\n      }\n\n      .cm-ex-context {\n        color: ${base.palette['brand-primary']};\n      }\n      .cm-ex-operator {\n        color: ${base.palette.warn};\n        font-weight: bold;\n      }\n      .cm-ex-ruleName {\n        color: ${base.palette.success};\n      }\n      .cm-ex-delimeter {\n        color: ${base.palette['foreground-color']};\n      }\n      .cm-ex-constant {\n        color: ${base.palette.pending};\n      }\n\n      .CodeMirror-hints {\n        position: absolute;\n        z-index: 10;\n        transition: height ${base.animation.speed} ${base.animation.timing.ease};\n        padding: 0;\n        border-radius: calc(0.5 * ${base['border-radius']});\n        box-shadow: ${base.shadow.low};\n        border: 0.0625rem solid ${base.palette['border-line']};\n        background-color: ${base.palette['primary-background']};\n        font-size: ${fontSizes.s};\n        max-height: 12rem;\n        overflow-y: auto;\n        min-width: 8rem;\n      }\n\n      .CodeMirror-hint {\n        ${(isLoading || suggestions?.length === 0) &&\n        css`\n          pointer-events: none;\n        `}\n        min-height: 1.2rem;\n        width: calc(1.5 * ${base['content-width'].xs});\n        cursor: pointer;\n        @media (pointer: coarse) {\n          min-height: 1.2rem;\n        }\n        line-height: 1.2rem;\n        &:focus-within {\n          background-color: ${activeColor};\n        }\n\n        &:hover:not([aria-disabled='true']) {\n          background-color: ${hoverColor};\n        }\n        padding-inline: ${base.spacing};\n      }\n\n      li.CodeMirror-hint-active {\n        ${!isLoading &&\n        suggestions?.length > 0 &&\n        css`\n          background-color: ${activeColor};\n        `}\n      }\n    `;\n  }\n);\n\nStyledCodeEditor.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"CodeEditor.styles.js","sourceRoot":"","sources":["../../../../src/components/ExpressionBuilder/CodeEditor/CodeEditor.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// cspell:words vscrollbar hscrollbar\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport { defaultThemeProp, calculateFontSize, Flex } from '@pega/cosmos-react-core';\nimport { StyledFormField } from '@pega/cosmos-react-core/lib/components/FormField/FormField';\n\nimport { SuggestionType } from './CodeEditor.types';\n\nexport const StyledLoading = styled.div`\n  font-size: 1.5rem;\n`;\n\nexport const StyledCodeEditor = styled(Flex)<{\n  isLoading?: boolean;\n  errors?: string;\n  readOnly?: boolean;\n  suggestions: SuggestionType[];\n}>(\n  ({\n    theme: {\n      base,\n      components: {\n        'form-control': {\n          ':read-only': { 'background-color': readOnlyBackgroundColor }\n        },\n        'form-field': {\n          error: { 'status-color': errorBackground }\n        }\n      }\n    },\n    errors,\n    isLoading,\n    suggestions,\n    readOnly\n  }) => {\n    const activeColor = mix(0.85, base.palette['primary-background'], base.palette.interactive);\n\n    const hoverColor = mix(0.95, base.palette['primary-background'], base.palette.interactive);\n\n    const fontSizes = calculateFontSize(base['font-size'], base['font-scale']);\n    return css`\n      position: relative;\n      max-height: 100%;\n      overflow-y: auto;\n      ${StyledFormField} {\n        flex-grow: 1;\n      }\n\n      /* PADDING */\n      .react-codemirror2 {\n        flex-grow: 1;\n        min-height: 3.75rem;\n        overflow-y: auto;\n        ${readOnly &&\n        css`\n          max-height: 5.625rem;\n        `}\n      }\n\n      .CodeMirror-lines {\n        cursor: text;\n        min-height: 0.063rem; /* prevents collapsing before first draw */\n        padding: ${base.spacing};\n      }\n\n      .CodeMirror-scrollbar-filler,\n      .CodeMirror-gutter-filler {\n        background-color: white; /* The little square between H and V scrollbars */\n      }\n\n      /* GUTTER */\n\n      .CodeMirror-gutters {\n        position: absolute;\n        left: 0;\n        top: 0;\n        min-height: 100%;\n        z-index: 3;\n        border-right: 0.063rem solid #dddddd;\n        background-color: #f7f7f7;\n        white-space: nowrap;\n      }\n      .CodeMirror-linenumber {\n        padding: 0 0.125rem 0 0.313rem;\n        min-width: 1.25rem;\n        text-align: right;\n        color: #999999;\n        white-space: nowrap;\n      }\n\n      .CodeMirror-guttermarker {\n        color: black;\n      }\n      .CodeMirror-guttermarker-subtle {\n        color: #999999;\n      }\n\n      /* CURSOR */\n\n      .CodeMirror-cursor {\n        position: absolute;\n        pointer-events: none;\n        border-left: 0.0625rem solid ${base.palette.dark};\n        border-right: none;\n        width: 0;\n        ${readOnly &&\n        css`\n          display: none;\n        `}\n      }\n\n      /* Shown when moving in bi-directional text */\n      .CodeMirror div.CodeMirror-secondarycursor {\n        border-left: 0.063rem solid silver;\n      }\n      .cm-fat-cursor-mark {\n        background-color: rgba(20, 255, 20, 0.5);\n        -webkit-animation: blink 1.06s steps(1) infinite;\n        -moz-animation: blink 1.06s steps(1) infinite;\n        animation: blink 1.06s steps(1) infinite;\n      }\n      .cm-animate-fat-cursor {\n        width: auto;\n        border: 0;\n        -webkit-animation: blink 1.06s steps(1) infinite;\n        -moz-animation: blink 1.06s steps(1) infinite;\n        animation: blink 1.06s steps(1) infinite;\n        background-color: #77ee77;\n      }\n      @-moz-keyframes blink {\n        50% {\n          background-color: transparent;\n        }\n      }\n      @-webkit-keyframes blink {\n        50% {\n          background-color: transparent;\n        }\n      }\n      @keyframes blink {\n        50% {\n          background-color: transparent;\n        }\n      }\n\n      .cm-tab {\n        display: inline-block;\n        text-decoration: inherit;\n      }\n\n      .CodeMirror-rulers {\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: -3.125rem;\n        bottom: 0;\n        overflow: hidden;\n      }\n      .CodeMirror-ruler {\n        border-left: 0.063rem solid #cccccc;\n        top: 0;\n        bottom: 0;\n        position: absolute;\n      }\n\n      /* DEFAULT THEME */\n\n      .cm-s-default .cm-header {\n        color: blue;\n      }\n      .cm-negative {\n        color: #dd4444;\n      }\n      .cm-positive {\n        color: #229922;\n      }\n      .cm-strong {\n        font-weight: bold;\n      }\n      .cm-s-default .cm-quote {\n        color: #009900;\n      }\n      .cm-em {\n        font-style: italic;\n      }\n      .cm-link {\n        text-decoration: underline;\n      }\n      .cm-strikethrough {\n        text-decoration: line-through;\n      }\n\n      .cm-s-default .cm-keyword {\n        color: #770088;\n      }\n      .cm-s-default .cm-atom {\n        color: #221199;\n      }\n      .cm-s-default .cm-number {\n        color: #116644;\n      }\n      .cm-s-default .cm-def {\n        color: #0000ff;\n      }\n      .cm-s-default .cm-variable-2 {\n        color: #0055aa;\n      }\n      .cm-s-default .cm-variable-3,\n      .cm-s-default .cm-type {\n        color: #008855;\n      }\n      .cm-s-default .cm-comment {\n        color: #aa5500;\n      }\n      .cm-s-default .cm-string {\n        color: #aa1111;\n      }\n      .cm-s-default .cm-string-2 {\n        color: #ff5500;\n      }\n      .cm-s-default .cm-meta {\n        color: #555555;\n      }\n      .cm-s-default .cm-qualifier {\n        color: #555555;\n      }\n      .cm-s-default .cm-builtin {\n        color: #3300aa;\n      }\n      .cm-s-default .cm-bracket {\n        color: #999977;\n      }\n      .cm-s-default .cm-tag {\n        color: #117700;\n      }\n      .cm-s-default .cm-attribute {\n        color: #0000cc;\n      }\n      .cm-s-default .cm-hr {\n        color: #999999;\n      }\n      .cm-s-default .cm-link {\n        color: #0000cc;\n      }\n\n      .cm-s-default .cm-error {\n        color: #ff0000;\n      }\n      .cm-invalidchar {\n        color: #ff0000;\n      }\n\n      .CodeMirror-composing {\n        border-bottom: 0.125rem solid;\n      }\n\n      /* Default styles for common addons */\n\n      div.CodeMirror span.CodeMirror-matchingbracket {\n        color: #00bb00;\n      }\n      div.CodeMirror span.CodeMirror-nonmatchingbracket {\n        color: #aa2222;\n      }\n      .CodeMirror-matchingtag {\n        background: rgba(255, 150, 0, 0.3);\n      }\n      .CodeMirror-activeline-background {\n        background: #e8f2ff;\n      }\n\n      /* STOP */\n\n      /* The rest of this file contains styles related to the mechanics of\n   the editor. You probably shouldn't touch them. */\n\n      .CodeMirror-scroll {\n        overflow: scroll !important;\n        margin-bottom: -3.125rem;\n        margin-right: -3.125rem;\n        padding-bottom: 3.125rem;\n        height: 100%;\n        outline: none; /* Prevent dragging from highlighting the element */\n        position: relative;\n      }\n      .CodeMirror-sizer {\n        position: relative;\n        border-right: 3.125rem solid transparent;\n      }\n\n      /* The fake, visible scrollbars. Used to force redraw during scrolling\n   before actual scrolling happens, thus preventing shaking and\n   flickering artifacts. */\n      .CodeMirror-vscrollbar,\n      .CodeMirror-hscrollbar,\n      .CodeMirror-scrollbar-filler,\n      .CodeMirror-gutter-filler {\n        position: absolute;\n        z-index: 6;\n        display: none;\n      }\n      .CodeMirror-vscrollbar {\n        right: 0;\n        top: 0;\n        overflow-x: hidden;\n        overflow-y: scroll;\n      }\n      .CodeMirror-hscrollbar {\n        bottom: 0;\n        left: 0;\n        overflow-y: hidden;\n        overflow-x: scroll;\n      }\n      .CodeMirror-scrollbar-filler {\n        right: 0;\n        bottom: 0;\n      }\n      .CodeMirror-gutter-filler {\n        left: 0;\n        bottom: 0;\n      }\n      .CodeMirror-gutter {\n        white-space: normal;\n        height: 100%;\n        display: inline-block;\n        vertical-align: top;\n        margin-bottom: -3.125rem;\n      }\n      .CodeMirror-gutter-wrapper {\n        position: absolute;\n        z-index: 4;\n        background: none !important;\n        border: none !important;\n      }\n      .CodeMirror-gutter-background {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        z-index: 4;\n      }\n      .CodeMirror-gutter-elt {\n        position: absolute;\n        cursor: default;\n        z-index: 4;\n      }\n      .CodeMirror-gutter-wrapper ::selection {\n        background-color: transparent;\n      }\n      .CodeMirror-gutter-wrapper ::-moz-selection {\n        background-color: transparent;\n      }\n\n      .CodeMirror pre.CodeMirror-line,\n      .CodeMirror pre.CodeMirror-line-like {\n        /* Reset some styles that the rest of the page might have set */\n        -moz-border-radius: 0;\n        -webkit-border-radius: 0;\n        border-radius: 0;\n        border-width: 0;\n        background: transparent;\n        font-family: inherit;\n        font-size: inherit;\n        margin: 0;\n        white-space: pre;\n        word-wrap: normal;\n        line-height: inherit;\n        color: inherit;\n        z-index: 2;\n        position: relative;\n        overflow: visible;\n        -webkit-tap-highlight-color: transparent;\n        -webkit-font-variant-ligatures: contextual;\n        font-variant-ligatures: contextual;\n      }\n      .CodeMirror-wrap pre.CodeMirror-line,\n      .CodeMirror-wrap pre.CodeMirror-line-like {\n        word-wrap: break-word;\n        white-space: pre-wrap;\n        word-break: normal;\n      }\n\n      .CodeMirror-linebackground {\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        z-index: 0;\n      }\n\n      .CodeMirror-linewidget {\n        position: relative;\n        z-index: 2;\n        padding: 0.006rem; /* Force widget margins to stay inside of the container */\n      }\n\n      .CodeMirror-rtl pre {\n        direction: rtl;\n      }\n\n      .CodeMirror-code {\n        outline: none;\n      }\n\n      /* Force content-box sizing for the elements where we expect it */\n      .CodeMirror-scroll,\n      .CodeMirror-sizer,\n      .CodeMirror-gutter,\n      .CodeMirror-linenumber {\n        -moz-box-sizing: content-box;\n        box-sizing: content-box;\n      }\n\n      .CodeMirror-measure {\n        position: absolute;\n        width: 100%;\n        height: 0;\n        overflow: hidden;\n        visibility: hidden;\n      }\n\n      .CodeMirror-measure pre {\n        position: static;\n      }\n\n      div.CodeMirror-dragcursors {\n        visibility: visible;\n      }\n\n      .CodeMirror-selected {\n        background: #d9d9d9;\n      }\n      .CodeMirror-focused .CodeMirror-selected {\n        background: #d7d4f0;\n      }\n      .CodeMirror-focused {\n        border-color: ${base.palette.interactive} !important;\n      }\n      .CodeMirror:not(.CodeMirror-focused) .CodeMirror-cursors {\n        visibility: hidden;\n      }\n      .CodeMirror-crosshair {\n        cursor: crosshair;\n      }\n      .CodeMirror-line::selection,\n      .CodeMirror-line > span::selection,\n      .CodeMirror-line > span > span::selection {\n        background: #d7d4f0;\n      }\n      .CodeMirror-line::-moz-selection,\n      .CodeMirror-line > span::-moz-selection,\n      .CodeMirror-line > span > span::-moz-selection {\n        background: #d7d4f0;\n      }\n\n      .cm-searching {\n        background-color: rgba(255, 255, 0, 0.4);\n      }\n\n      /* Used to force a border model for a node */\n      .cm-force-border {\n        padding-right: 0.006rem;\n      }\n\n      /* See issue #2901 */\n      .cm-tab-wrap-hack::after {\n        content: '';\n      }\n\n      /* Help users use markselection to safely style text background */\n      span.CodeMirror-selectedtext {\n        background: none;\n      }\n\n      .CodeMirror {\n        overflow: hidden;\n        font-family: monospace;\n        direction: ltr;\n        position: relative;\n        background-color: ${base.palette['background-color']};\n        color: ${base.palette['foreground-color']};\n        border: 0.0625rem solid ${base.palette['border-line']};\n        border-radius: calc(0.5 * ${base['border-radius']});\n        ${errors &&\n        css`\n          border-color: ${errorBackground};\n        `}\n        ${readOnly &&\n        css`\n          background-color: ${readOnlyBackgroundColor};\n        `}\n      }\n\n      .cm-ex-context {\n        color: ${base.palette.interactive};\n      }\n      .cm-ex-operator {\n        color: ${base.palette.warn};\n        font-weight: bold;\n      }\n      .cm-ex-ruleName {\n        color: ${base.palette.success};\n      }\n      .cm-ex-delimeter {\n        color: ${base.palette['foreground-color']};\n      }\n      .cm-ex-constant {\n        color: ${base.palette.pending};\n      }\n\n      .CodeMirror-hints {\n        position: absolute;\n        z-index: 10;\n        transition: height ${base.animation.speed} ${base.animation.timing.ease};\n        padding: 0;\n        border-radius: calc(0.5 * ${base['border-radius']});\n        box-shadow: ${base.shadow.low};\n        border: 0.0625rem solid ${base.palette['border-line']};\n        background-color: ${base.palette['primary-background']};\n        font-size: ${fontSizes.s};\n        max-height: 12rem;\n        overflow-y: auto;\n        min-width: 8rem;\n      }\n\n      .CodeMirror-hint {\n        ${(isLoading || suggestions?.length === 0) &&\n        css`\n          pointer-events: none;\n        `}\n        min-height: 1.2rem;\n        width: calc(1.5 * ${base['content-width'].xs});\n        cursor: pointer;\n        @media (pointer: coarse) {\n          min-height: 1.2rem;\n        }\n        line-height: 1.2rem;\n        &:focus-within {\n          background-color: ${activeColor};\n        }\n\n        &:hover:not([aria-disabled='true']) {\n          background-color: ${hoverColor};\n        }\n        padding-inline: ${base.spacing};\n      }\n\n      ${!isLoading &&\n      suggestions?.length > 0 &&\n      css`\n        li.CodeMirror-hint-active {\n          background-color: ${activeColor};\n        }\n      `}\n    `;\n  }\n);\n\nStyledCodeEditor.defaultProps = defaultThemeProp;\n"]}

package/lib/components/ExpressionBuilder/CodeEditor/CodeEditor.types.d.ts

@@ -1,12 +1,13 @@
 import { Ref } from 'react';
 import { ShowHintOptions, EditorConfiguration, Position } from 'codemirror';
 import { MenuItemProps } from '@pega/cosmos-react-core';
-export declare type AutoCompleteTriggerChar = '@' | '.' | ':';
-export declare type SuggestionType = Pick<MenuItemProps, 'primary' | 'secondary' | 'id'>;
+export type AutoCompleteTriggerChar = '@' | '.' | ':';
+export type SuggestionType = Pick<MenuItemProps, 'primary' | 'secondary' | 'id'>;
 export interface EditorState {
     getValue: () => string | undefined;
     insertText: (text: string) => void;
 }
+export type CursorPosition = Pick<Position, 'ch' | 'line'>;
 export interface CodeEditorProps {
     /** Default expression to set in the code editor */
     defaultValue?: string;
@@ -15,7 +16,7 @@ export interface CodeEditorProps {
     /** Enable read only mode */
     readOnly?: boolean;
     /** Fetches suggestion list for suggestions popover */
-    fetchSuggestions?: (autoCompleteTrigger: AutoCompleteTriggerChar, queryString: string) => Promise<SuggestionType[]>;
+    fetchSuggestions?: (autoCompleteTrigger: AutoCompleteTriggerChar, cursorPosition: CursorPosition) => Promise<SuggestionType[]>;
     /** characters which triggers suggestions */
     autoCompleteTriggers?: AutoCompleteTriggerChar[];
     /** Code editor configuration props */

package/lib/components/ExpressionBuilder/CodeEditor/CodeEditor.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.types.d.ts","sourceRoot":"","sources":["../../../../src/components/ExpressionBuilder/CodeEditor/CodeEditor.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE5E,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,oBAAY,uBAAuB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEtD,oBAAY,cAAc,GAAG,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,WAAW,GAAG,IAAI,CAAC,CAAC;AAEjF,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IACnC,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,MAAM,WAAW,eAAe;IAC9B,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,CACjB,mBAAmB,EAAE,uBAAuB,EAC5C,WAAW,EAAE,MAAM,KAChB,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;IAC/B,4CAA4C;IAC5C,oBAAoB,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACjD,sCAAsC;IACtC,iBAAiB,CAAC,EAAE,mBAAmB,CAAC;IACxC,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gBAAgB,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,WAAW,CAAC,EAAE,cAAc,EAAE,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB,CAAC,EAAE,QAAQ,CAAC;CACtC"}
+{"version":3,"file":"CodeEditor.types.d.ts","sourceRoot":"","sources":["../../../../src/components/ExpressionBuilder/CodeEditor/CodeEditor.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE5E,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,MAAM,uBAAuB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,WAAW,GAAG,IAAI,CAAC,CAAC;AAEjF,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IACnC,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,MAAM,CAAC,CAAC;AAE3D,MAAM,WAAW,eAAe;IAC9B,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,CACjB,mBAAmB,EAAE,uBAAuB,EAC5C,cAAc,EAAE,cAAc,KAC3B,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;IAC/B,4CAA4C;IAC5C,oBAAoB,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACjD,sCAAsC;IACtC,iBAAiB,CAAC,EAAE,mBAAmB,CAAC;IACxC,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gBAAgB,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,WAAW,CAAC,EAAE,cAAc,EAAE,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB,CAAC,EAAE,QAAQ,CAAC;CACtC"}

package/lib/components/ExpressionBuilder/CodeEditor/CodeEditor.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.types.js","sourceRoot":"","sources":["../../../../src/components/ExpressionBuilder/CodeEditor/CodeEditor.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref } from 'react';\nimport { ShowHintOptions, EditorConfiguration, Position } from 'codemirror';\n\nimport { MenuItemProps } from '@pega/cosmos-react-core';\n\nexport type AutoCompleteTriggerChar = '@' | '.' | ':';\n\nexport type SuggestionType = Pick<MenuItemProps, 'primary' | 'secondary' | 'id'>;\n\nexport interface EditorState {\n  getValue: () => string | undefined;\n  insertText: (text: string) => void;\n}\n\nexport interface CodeEditorProps {\n  /** Default expression to set in the code editor */\n  defaultValue?: string;\n  /** Compiled error message */\n  errors?: string;\n  /** Enable read only mode */\n  readOnly?: boolean;\n  /** Fetches suggestion list for suggestions popover */\n  fetchSuggestions?: (\n    autoCompleteTrigger: AutoCompleteTriggerChar,\n    queryString: string\n  ) => Promise<SuggestionType[]>;\n  /** characters which triggers suggestions */\n  autoCompleteTriggers?: AutoCompleteTriggerChar[];\n  /** Code editor configuration props */\n  editorConfigProps?: EditorConfiguration;\n  /** To show loader for intellisense popover */\n  loading?: boolean;\n  /** Called when editor content changes. */\n  onChange?: (expression: string) => void;\n  codeEditorHandle: Ref<EditorState>;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface EditorHintOptions extends ShowHintOptions {\n  suggestions?: SuggestionType[];\n  loading?: boolean;\n  triggerCharacterCursorPos?: Position;\n}\n"]}
+{"version":3,"file":"CodeEditor.types.js","sourceRoot":"","sources":["../../../../src/components/ExpressionBuilder/CodeEditor/CodeEditor.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref } from 'react';\nimport { ShowHintOptions, EditorConfiguration, Position } from 'codemirror';\n\nimport { MenuItemProps } from '@pega/cosmos-react-core';\n\nexport type AutoCompleteTriggerChar = '@' | '.' | ':';\n\nexport type SuggestionType = Pick<MenuItemProps, 'primary' | 'secondary' | 'id'>;\n\nexport interface EditorState {\n  getValue: () => string | undefined;\n  insertText: (text: string) => void;\n}\n\nexport type CursorPosition = Pick<Position, 'ch' | 'line'>;\n\nexport interface CodeEditorProps {\n  /** Default expression to set in the code editor */\n  defaultValue?: string;\n  /** Compiled error message */\n  errors?: string;\n  /** Enable read only mode */\n  readOnly?: boolean;\n  /** Fetches suggestion list for suggestions popover */\n  fetchSuggestions?: (\n    autoCompleteTrigger: AutoCompleteTriggerChar,\n    cursorPosition: CursorPosition\n  ) => Promise<SuggestionType[]>;\n  /** characters which triggers suggestions */\n  autoCompleteTriggers?: AutoCompleteTriggerChar[];\n  /** Code editor configuration props */\n  editorConfigProps?: EditorConfiguration;\n  /** To show loader for intellisense popover */\n  loading?: boolean;\n  /** Called when editor content changes. */\n  onChange?: (expression: string) => void;\n  codeEditorHandle: Ref<EditorState>;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface EditorHintOptions extends ShowHintOptions {\n  suggestions?: SuggestionType[];\n  loading?: boolean;\n  triggerCharacterCursorPos?: Position;\n}\n"]}

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

@@ -1,6 +1,6 @@
 export { default } from './ExpressionBuilder';
 export { ExpressionListProps, ExpressionItemProps, ExpressionBuilderProps, HandleValue, InputParams } from './ExpressionBuilder.types';
-export { EditorState, CodeEditorProps } from './CodeEditor/CodeEditor.types';
+export { EditorState, CodeEditorProps, AutoCompleteTriggerChar, SuggestionType, CursorPosition } from './CodeEditor/CodeEditor.types';
 export { default as ExpressionItem } from './ExpressionItem';
 export { default as ExpressionList } from './ExpressionList';
 export { default as ExpressionDetails } from './ExpressionDetails';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,sBAAsB,EACtB,WAAW,EACX,WAAW,EACZ,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,sBAAsB,EACtB,WAAW,EACX,WAAW,EACZ,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,WAAW,EACX,eAAe,EACf,uBAAuB,EACvB,cAAc,EACd,cAAc,EACf,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAS9C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["export { default } from './ExpressionBuilder';\nexport {\n  ExpressionListProps,\n  ExpressionItemProps,\n  ExpressionBuilderProps,\n  HandleValue,\n  InputParams\n} from './ExpressionBuilder.types';\nexport { EditorState, CodeEditorProps } from './CodeEditor/CodeEditor.types';\nexport { default as ExpressionItem } from './ExpressionItem';\nexport { default as ExpressionList } from './ExpressionList';\nexport { default as ExpressionDetails } from './ExpressionDetails';\nexport { default as CodeEditor } from './CodeEditor/CodeEditor';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAe9C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["export { default } from './ExpressionBuilder';\nexport {\n  ExpressionListProps,\n  ExpressionItemProps,\n  ExpressionBuilderProps,\n  HandleValue,\n  InputParams\n} from './ExpressionBuilder.types';\nexport {\n  EditorState,\n  CodeEditorProps,\n  AutoCompleteTriggerChar,\n  SuggestionType,\n  CursorPosition\n} from './CodeEditor/CodeEditor.types';\nexport { default as ExpressionItem } from './ExpressionItem';\nexport { default as ExpressionList } from './ExpressionList';\nexport { default as ExpressionDetails } from './ExpressionDetails';\nexport { default as CodeEditor } from './CodeEditor/CodeEditor';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"AddNode.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/AddNode.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAmC,MAAM,OAAO,CAAC;AAYxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhE,eAAO,MAAM,SAAS;eAA6B,OAAO;SAWxD,CAAC;AAIH,eAAO,MAAM,UAAU,mOAEtB,CAAC;AAEF,eAAO,MAAM,aAAa,yGAUxB,CAAC;AAIH,eAAO,MAAM,YAAY,qOA0BvB,CAAC;AAIH,MAAM,WAAW,YAAa,SAAQ,gBAAgB;IACpD,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,KAAK,IAAI,CAAC;IAC9B,cAAc,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,oBAAoB;eAA6B,OAAO;SAQnE,CAAC;AAIH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,gBAAgB,GAAG,WAAW,CAAC,CAgC5E,CAAC"}
+{"version":3,"file":"AddNode.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/AddNode.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAmC,MAAM,OAAO,CAAC;AAYxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhE,eAAO,MAAM,SAAS;eAA6B,OAAO;SAWxD,CAAC;AAIH,eAAO,MAAM,UAAU,mOAEtB,CAAC;AAEF,eAAO,MAAM,aAAa,yGASxB,CAAC;AAIH,eAAO,MAAM,YAAY,qOA0BvB,CAAC;AAIH,MAAM,WAAW,YAAa,SAAQ,gBAAgB;IACpD,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,KAAK,IAAI,CAAC;IAC9B,cAAc,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,oBAAoB;eAA6B,OAAO;SAQnE,CAAC;AAIH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,gBAAgB,GAAG,WAAW,CAAC,CAgC5E,CAAC"}

package/lib/components/FlowModeller/AddNode.js

@@ -22,11 +22,10 @@ export const StyledPlus = styled(Icon) `
 export const StyledWrapper = styled.div(({ theme }) => {
     return css `
     margin-block-start: ${theme.base.spacing};
+
     ${StyledTooltip} {
-      ${css `
-        min-width: 12ch;
-        text-align: center;
-      `}
+      min-width: 12ch;
+      text-align: center;
     }
   `;
 });

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;AAChD,OAAO,EAAkB,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAExE,OAAO,EACL,MAAM,EACN,gBAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,IAAI,EACL,MAAM,yBAAyB,CAAC;AAGjC,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AAExD,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;;CAErC,CAAC;AAEF,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;;;oBAGhB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;QACnC,SAAS;;;QAGT,UAAU;;;;;oBAKE,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;IACpB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,EAAE,eAAe,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAE5D,MAAM,mBAAmB,GAAG,CAAC,CAAgC,EAAE,EAAE;QAC/D,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACvB,cAAc,CAAC,CAAC,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,eAAe,EAAE;YACpB,gBAAgB,CAAC,KAAK,CAAC,CAAC;SACzB;IACH,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,aAAa,YACvD,MAAC,YAAY,IACX,KAAK,EAAE,CAAC,CAAC,UAAU,CAAC,mBACL,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAC7C,IAAI,QACJ,OAAO,EAAE,mBAAmB,aAE5B,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, useContext, useState, useEffect } 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 { PlottedGraphNode } from './Renderer/Utils/GraphLayout';\nimport FlowModellerContext from './FlowModellerContext';\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)`\n  opacity: 0;\n`;\n\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    &:hover,\n    &:focus {\n      background: ${theme.base.colors.white};\n      ${StyledDot} {\n        opacity: 0;\n      }\n      ${StyledPlus} {\n        opacity: 1;\n      }\n    }\n    &[aria-haspopup='menu'] {\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 PlottedGraphNode {\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  const [hasMenuActive, setHasMenuActive] = useState(false);\n  const { showNodeLibrary } = useContext(FlowModellerContext);\n\n  const addNodeClickHandler = (e: MouseEvent<HTMLButtonElement>) => {\n    setHasMenuActive(true);\n    addNodeHandler(e);\n  };\n\n  useEffect(() => {\n    if (!showNodeLibrary) {\n      setHasMenuActive(false);\n    }\n  }, [showNodeLibrary]);\n\n  return (\n    <Flex container={{ justify: 'center' }} as={StyledWrapper}>\n      <StyledButton\n        label={t('add_node')}\n        aria-haspopup={hasMenuActive ? 'menu' : false}\n        icon\n        onClick={addNodeClickHandler}\n      >\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":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { FC, MouseEvent, useContext, useState, useEffect } 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 { PlottedGraphNode } from './Renderer/Utils/GraphLayout';\nimport FlowModellerContext from './FlowModellerContext';\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)`\n  opacity: 0;\n`;\n\nexport const StyledWrapper = styled.div(({ theme }) => {\n  return css`\n    margin-block-start: ${theme.base.spacing};\n\n    ${StyledTooltip} {\n      min-width: 12ch;\n      text-align: center;\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    &:hover,\n    &:focus {\n      background: ${theme.base.colors.white};\n      ${StyledDot} {\n        opacity: 0;\n      }\n      ${StyledPlus} {\n        opacity: 1;\n      }\n    }\n    &[aria-haspopup='menu'] {\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 PlottedGraphNode {\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  const [hasMenuActive, setHasMenuActive] = useState(false);\n  const { showNodeLibrary } = useContext(FlowModellerContext);\n\n  const addNodeClickHandler = (e: MouseEvent<HTMLButtonElement>) => {\n    setHasMenuActive(true);\n    addNodeHandler(e);\n  };\n\n  useEffect(() => {\n    if (!showNodeLibrary) {\n      setHasMenuActive(false);\n    }\n  }, [showNodeLibrary]);\n\n  return (\n    <Flex container={{ justify: 'center' }} as={StyledWrapper}>\n      <StyledButton\n        label={t('add_node')}\n        aria-haspopup={hasMenuActive ? 'menu' : false}\n        icon\n        onClick={addNodeClickHandler}\n      >\n        <StyledDot name='circle-solid' highlight={highlight} />\n        <StyledPlus name='plus' />\n      </StyledButton>\n    </Flex>\n  );\n};\n"]}

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { PlaceHolderConnector } from './Utils/addNodeUtils';
 import { PlottedGraphConnector } from './Renderer/Utils/GraphLayout';
-declare type ConnectorProps = Pick<PlottedGraphConnector, 'id' | 'data' | 'labelLayout' | 'points'> & Partial<Pick<PlaceHolderConnector, 'realConnectors'>>;
-declare const Connector: ({ id, labelLayout, data, realConnectors, points }: ConnectorProps) => JSX.Element;
+type ConnectorProps = Pick<PlottedGraphConnector, 'id' | 'data' | 'labelLayout' | 'points'> & Partial<Pick<PlaceHolderConnector, 'realConnectors'>>;
+declare const Connector: ({ id, labelLayout, data, realConnectors, points }: ConnectorProps) => JSX.Element | null;
 export default Connector;
 //# sourceMappingURL=Connector.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Connector.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/Connector.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAE5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AA0ErE,aAAK,cAAc,GAAG,IAAI,CAAC,qBAAqB,EAAE,IAAI,GAAG,MAAM,GAAG,aAAa,GAAG,QAAQ,CAAC,GACzF,OAAO,CAAC,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,CAAC,CAAC;AAExD,QAAA,MAAM,SAAS,sDAAuD,cAAc,gBAoDnF,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Connector.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/Connector.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAE5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AA0ErE,KAAK,cAAc,GAAG,IAAI,CAAC,qBAAqB,EAAE,IAAI,GAAG,MAAM,GAAG,aAAa,GAAG,QAAQ,CAAC,GACzF,OAAO,CAAC,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,CAAC,CAAC;AAExD,QAAA,MAAM,SAAS,sDAAuD,cAAc,uBA8CnF,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/FlowModeller/Connector.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp, Flex, Text, useTheme } from '@pega/cosmos-react-core';
@@ -63,9 +63,7 @@ const Connector = ({ id, labelLayout, data, realConnectors, points }) => {
         refType: 'connector',
         refId
     };
-    return (_jsx(_Fragment, { children: data.type === 'default' && (_jsxs("g", { children: [_jsx("path", { id: id, d: genLine(points), stroke: highlights?.connectors?.[id]
-                        ? theme.base.colors.red.medium
-                        : theme.base.colors.slate.dark, strokeWidth: highlights?.connectors?.[id] ? 2 : 1, fill: 'none' }), labelLayout && (_jsxs("foreignObject", { x: labelLayout.x - labelLayout.width, y: points[3].y - 20, width: labelLayout.width, height: labelLayout.height, children: [labelLayout?.value && (_jsx(Flex, { container: { justify: 'center' }, children: _jsx(StyledLabel, { highlight: !!highlights?.connectors?.[id], children: labelLayout.value }) })), !readOnly && (_jsx(AddButton, { highlight: !!highlights?.connectors?.[id], addNodeHandler: (e) => data?.onNodeCreate(e.currentTarget, metaData) }))] }))] }, id)) }));
+    return data.type === 'default' ? (_jsxs("g", { children: [_jsx("path", { id: id, d: genLine(points), stroke: highlights?.connectors?.[id] ? theme.base.colors.red.medium : theme.base.colors.slate.dark, strokeWidth: highlights?.connectors?.[id] ? 2 : 1, fill: 'none' }), labelLayout && (_jsxs("foreignObject", { x: labelLayout.x - labelLayout.width, y: points[3].y - 20, width: labelLayout.width, height: labelLayout.height, children: [labelLayout?.value && (_jsx(Flex, { container: { justify: 'center' }, children: _jsx(StyledLabel, { highlight: !!highlights?.connectors?.[id], children: labelLayout.value }) })), !readOnly && (_jsx(AddButton, { highlight: !!highlights?.connectors?.[id], addNodeHandler: (e) => data?.onNodeCreate(e.currentTarget, metaData) }))] }))] }, id)) : null;
 };
 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":"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","sourcesContent":["import { MouseEvent, useContext } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Flex, Text, useTheme } from '@pega/cosmos-react-core';\n\nimport { AddButton } from './AddNode';\nimport { AddNodeHandlerParams } from './Renderer/Renderer.types';\nimport { PlaceHolderConnector } from './Utils/addNodeUtils';\nimport FlowModellerContext from './FlowModellerContext';\nimport { PlottedGraphConnector } from './Renderer/Utils/GraphLayout';\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\ninterface Points {\n  x: number;\n  y: number;\n}\n\nconst curveRadius = 12;\nconst genLine = (points: Points[]) => {\n  const lineStr: string = points\n    .map((point: Points, idx: number, arr: Points[]) => {\n      const { x, y } = point;\n      const prev = arr[idx - 1];\n      const next = arr[idx + 1];\n      const line = `L${x},${y}`;\n\n      // if the point is extreme end, no need to add a curve\n      if (!prev || !next) return line;\n\n      // if point is colinear with prev and next, no need to add a curve\n      if (prev.x === next.x || prev.y === next.y) return line;\n\n      if (point.x > next.x)\n        // BOTTOM-RIGHT ↲\n        return `L${x},${\n          y - curveRadius\n        }a${curveRadius},${curveRadius} 0 0 1 -${curveRadius},${curveRadius}`;\n\n      // BOTTOM-LEFT ↳\n      if (point.x < next.x)\n        return `L${x},${\n          y - curveRadius\n        }a${curveRadius},${curveRadius} 0 0 0 ${curveRadius},${curveRadius}`;\n\n      // TOP-LEFT ↱\n      if (point.x < prev.x)\n        return `L${\n          x + curveRadius\n        },${y}a${curveRadius},${curveRadius} 0 0 0 -${curveRadius},${curveRadius}`;\n\n      // TOP-RIGHT ↴\n      if (point.x > prev.x)\n        return `L${\n          x - curveRadius\n        },${y}a${curveRadius},${curveRadius} 0 0 1 ${curveRadius},${curveRadius}`;\n\n      return `L${x},${y}`;\n    })\n    .join('');\n  return `M${lineStr.substr(1)}`;\n};\n\ntype ConnectorProps = Pick<PlottedGraphConnector, 'id' | 'data' | 'labelLayout' | 'points'> &\n  Partial<Pick<PlaceHolderConnector, 'realConnectors'>>;\n\nconst Connector = ({ id, labelLayout, data, realConnectors, points }: ConnectorProps) => {\n  const refId = realConnectors || id;\n  const { readOnly, highlights } = useContext(FlowModellerContext);\n  const theme = useTheme();\n\n  const metaData: AddNodeHandlerParams = {\n    refType: 'connector',\n    refId\n  };\n  return (\n    <>\n      {data.type === 'default' && (\n        <g key={id}>\n          <path\n            id={id}\n            d={genLine(points)}\n            stroke={\n              highlights?.connectors?.[id]\n                ? theme.base.colors.red.medium\n                : theme.base.colors.slate.dark\n            }\n            strokeWidth={highlights?.connectors?.[id] ? 2 : 1}\n            fill='none'\n          />\n          {labelLayout && (\n            <foreignObject\n              x={labelLayout.x - labelLayout.width}\n              y={points[3].y - 20}\n              width={labelLayout.width}\n              height={labelLayout.height}\n            >\n              {labelLayout?.value && (\n                <Flex container={{ justify: 'center' }}>\n                  <StyledLabel highlight={!!highlights?.connectors?.[id]}>\n                    {labelLayout.value}\n                  </StyledLabel>\n                </Flex>\n              )}\n              {!readOnly && (\n                <AddButton\n                  highlight={!!highlights?.connectors?.[id]}\n                  addNodeHandler={(e: MouseEvent<HTMLButtonElement>) =>\n                    data?.onNodeCreate(e.currentTarget, metaData)\n                  }\n                />\n              )}\n            </foreignObject>\n          )}\n        </g>\n      )}\n    </>\n  );\n};\n\nexport default Connector;\n"]}
+{"version":3,"file":"Connector.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/Connector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MouseEvent, useContext } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Flex, Text, useTheme } from '@pega/cosmos-react-core';\n\nimport { AddButton } from './AddNode';\nimport { AddNodeHandlerParams } from './Renderer/Renderer.types';\nimport { PlaceHolderConnector } from './Utils/addNodeUtils';\nimport FlowModellerContext from './FlowModellerContext';\nimport { PlottedGraphConnector } from './Renderer/Utils/GraphLayout';\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\ninterface Points {\n  x: number;\n  y: number;\n}\n\nconst curveRadius = 12;\nconst genLine = (points: Points[]) => {\n  const lineStr: string = points\n    .map((point: Points, idx: number, arr: Points[]) => {\n      const { x, y } = point;\n      const prev = arr[idx - 1];\n      const next = arr[idx + 1];\n      const line = `L${x},${y}`;\n\n      // if the point is extreme end, no need to add a curve\n      if (!prev || !next) return line;\n\n      // if point is colinear with prev and next, no need to add a curve\n      if (prev.x === next.x || prev.y === next.y) return line;\n\n      if (point.x > next.x)\n        // BOTTOM-RIGHT ↲\n        return `L${x},${\n          y - curveRadius\n        }a${curveRadius},${curveRadius} 0 0 1 -${curveRadius},${curveRadius}`;\n\n      // BOTTOM-LEFT ↳\n      if (point.x < next.x)\n        return `L${x},${\n          y - curveRadius\n        }a${curveRadius},${curveRadius} 0 0 0 ${curveRadius},${curveRadius}`;\n\n      // TOP-LEFT ↱\n      if (point.x < prev.x)\n        return `L${\n          x + curveRadius\n        },${y}a${curveRadius},${curveRadius} 0 0 0 -${curveRadius},${curveRadius}`;\n\n      // TOP-RIGHT ↴\n      if (point.x > prev.x)\n        return `L${\n          x - curveRadius\n        },${y}a${curveRadius},${curveRadius} 0 0 1 ${curveRadius},${curveRadius}`;\n\n      return `L${x},${y}`;\n    })\n    .join('');\n  return `M${lineStr.substr(1)}`;\n};\n\ntype ConnectorProps = Pick<PlottedGraphConnector, 'id' | 'data' | 'labelLayout' | 'points'> &\n  Partial<Pick<PlaceHolderConnector, 'realConnectors'>>;\n\nconst Connector = ({ id, labelLayout, data, realConnectors, points }: ConnectorProps) => {\n  const refId = realConnectors || id;\n  const { readOnly, highlights } = useContext(FlowModellerContext);\n  const theme = useTheme();\n\n  const metaData: AddNodeHandlerParams = {\n    refType: 'connector',\n    refId\n  };\n  return data.type === 'default' ? (\n    <g key={id}>\n      <path\n        id={id}\n        d={genLine(points)}\n        stroke={\n          highlights?.connectors?.[id] ? theme.base.colors.red.medium : theme.base.colors.slate.dark\n        }\n        strokeWidth={highlights?.connectors?.[id] ? 2 : 1}\n        fill='none'\n      />\n      {labelLayout && (\n        <foreignObject\n          x={labelLayout.x - labelLayout.width}\n          y={points[3].y - 20}\n          width={labelLayout.width}\n          height={labelLayout.height}\n        >\n          {labelLayout?.value && (\n            <Flex container={{ justify: 'center' }}>\n              <StyledLabel highlight={!!highlights?.connectors?.[id]}>\n                {labelLayout.value}\n              </StyledLabel>\n            </Flex>\n          )}\n          {!readOnly && (\n            <AddButton\n              highlight={!!highlights?.connectors?.[id]}\n              addNodeHandler={(e: MouseEvent<HTMLButtonElement>) =>\n                data?.onNodeCreate(e.currentTarget, metaData)\n              }\n            />\n          )}\n        </foreignObject>\n      )}\n    </g>\n  ) : null;\n};\n\nexport default Connector;\n"]}

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

@@ -2,18 +2,18 @@ import { ChangeEvent, Ref } from 'react';
 import { PopoverProps } from '@pega/cosmos-react-core';
 import { GraphData } from './Renderer/Utils/Graph';
 import { GraphDataAsMap, DeleteNodeOutcome } from './Utils/deleteNodeUtils';
-export interface DeleteNodePopoverProps {
+export interface DeletePopoverProps {
     show: boolean;
     target: PopoverProps['target'];
     flowGraphData: GraphData;
     rendererGraphData: GraphData;
     nodeId: string;
     onChange?: (itemsToDelete: GraphDataAsMap, itemsToRetain: GraphDataAsMap | undefined, ev?: ChangeEvent) => void;
-    ref?: Ref<HTMLDivElement>;
     onSubmit?: (outcome: DeleteNodeOutcome, ev: Event) => void;
     onCancel?: () => void;
+    ref?: Ref<HTMLDivElement>;
 }
 export declare const StyledDeletePopover: import("styled-components").StyledComponent<(<Modifiers extends string = string>(props: PopoverProps<Modifiers> & import("@pega/cosmos-react-core").ForwardProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null), import("styled-components").DefaultTheme, {}, never>;
-declare const DeletePopover: import("react").ForwardRefExoticComponent<Pick<DeleteNodePopoverProps, "show" | "target" | "onChange" | "onSubmit" | "onCancel" | "flowGraphData" | "rendererGraphData" | "nodeId"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const DeletePopover: import("react").ForwardRefExoticComponent<Pick<DeletePopoverProps, "show" | "target" | "onChange" | "onSubmit" | "onCancel" | "flowGraphData" | "rendererGraphData" | "nodeId"> & import("react").RefAttributes<HTMLDivElement>>;
 export default DeletePopover;
 //# sourceMappingURL=DeletePopover.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DeletePopover.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/DeletePopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgC,WAAW,EAAyB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG9F,OAAO,EASL,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAiB,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAwB,EACtB,cAAc,EACd,iBAAiB,EAElB,MAAM,yBAAyB,CAAC;AAGjC,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAC/B,aAAa,EAAE,SAAS,CAAC;IACzB,iBAAiB,EAAE,SAAS,CAAC;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CACT,aAAa,EAAE,cAAc,EAC7B,aAAa,EAAE,cAAc,GAAG,SAAS,EACzC,EAAE,CAAC,EAAE,WAAW,KACb,IAAI,CAAC;IACV,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,EAAE,EAAE,EAAE,KAAK,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,eAAO,MAAM,mBAAmB,2TAE/B,CAAC;AAEF,QAAA,MAAM,aAAa,sOA+NlB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"DeletePopover.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/DeletePopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,WAAW,EAIX,GAAG,EACJ,MAAM,OAAO,CAAC;AAGf,OAAO,EASL,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAiB,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAwB,EACtB,cAAc,EACd,iBAAiB,EAElB,MAAM,yBAAyB,CAAC;AAGjC,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAC/B,aAAa,EAAE,SAAS,CAAC;IACzB,iBAAiB,EAAE,SAAS,CAAC;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CACT,aAAa,EAAE,cAAc,EAC7B,aAAa,EAAE,cAAc,GAAG,SAAS,EACzC,EAAE,CAAC,EAAE,WAAW,KACb,IAAI,CAAC;IACV,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,EAAE,EAAE,EAAE,KAAK,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,mBAAmB,2TAE/B,CAAC;AAEF,QAAA,MAAM,aAAa,kOA+NlB,CAAC;AAEF,eAAe,aAAa,CAAC"}

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 } from './Renderer/Utils/Graph';\nimport deleteNodeUtils, {\n  GraphDataAsMap,\n  DeleteNodeOutcome,\n  DeleteNodeModalOption\n} from './Utils/deleteNodeUtils';\nimport { NodeProps } from './Node/Node.types';\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\n    const deleteOptionsResult = deleteNodeUtils.getDeleteNodeOptions(graph, nodeId);\n\n    const deleteOptions: DeleteNodeModalOption[] = deleteOptionsResult.options;\n    const nodeType = (graph.getNode(nodeId) as NodeProps).type.name;\n\n    useEffect(() => {\n      if (deleteOptionsResult) {\n        const itemsToDelete: GraphDataAsMap =\n          nodeType !== 'Decision'\n            ? deleteOptionsResult.allItems\n            : 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      }\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;\n      if (deleteOptionsResult) itemsToDelete = deleteOptionsResult.allItems;\n\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      if (itemsToDelete) itemsToDelete.nodes[nodeId] = graph.getNode(nodeId);\n\n      if (itemsToDelete) onChange?.(itemsToDelete, itemsToRetain, ev);\n    };\n\n    const submitHandler = (ev: Event) => {\n      let error = true;\n      const finalGraph = new DirectedGraph(flowGraphData);\n      const finalDeleteOptionsResult = deleteNodeUtils.getDeleteNodeOptions(finalGraph, nodeId);\n\n      let newTargetNode = finalDeleteOptionsResult?.destinationNodeId\n        ? finalGraph.getNode(finalDeleteOptionsResult.destinationNodeId)\n        : undefined;\n      let itemsToDelete = finalDeleteOptionsResult.allItems;\n\n      const selectedOption =\n        currentSelection === -1 || nodeType !== 'Decision'\n          ? undefined\n          : finalDeleteOptionsResult?.options[currentSelection];\n      let finalMetaData = selectedOption;\n\n      if (selectedOption) {\n        const pathConnectors = selectedOption.pathItems.connectors;\n        const connectors = Object.keys(pathConnectors);\n        for (let i = 0; i < connectors.length; i += 1) {\n          const connectorData = pathConnectors[connectors[i]];\n          if (\n            connectorData &&\n            finalGraph.getNode(connectorData.fromNodeId).type?.minConnectors !== 0 &&\n            connectorData.toNodeId === finalDeleteOptionsResult.destinationNodeId\n          ) {\n            error = false;\n            break;\n          }\n        }\n        if (error) {\n          onSubmit?.(\n            {\n              graphData: {\n                nodes: [],\n                connectors: []\n              },\n              updates: {\n                connectors: []\n              },\n              deletes: { nodes: {}, connectors: {} },\n              error: true\n            },\n            ev\n          );\n          return;\n        }\n\n        finalMetaData = finalDeleteOptionsResult.options.find(\n          current => selectedOption.connector.id === current.connector.id\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\n      // iterate and set the targetNode to the above first node instead of the selected node.\n\n      nodeInConnectors.forEach(con => {\n        finalGraph.setConnector(con.id, {\n          toNodeId: newTargetNode ? newTargetNode.id : undefined\n        });\n      });\n\n      const resultGraphData = finalGraph.getGraphData();\n\n      itemsToDelete.nodes[nodeId] = finalGraph.getNode(nodeId);\n\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\n      // filter the highlighted connectors\n      const connectors = resultGraphData.connectors.filter(item => {\n        return itemsToDelete.connectors[item.id] === undefined;\n      });\n\n      const outcome: DeleteNodeOutcome = {\n        graphData: {\n          nodes: nodes as NodeProps[],\n          connectors\n        },\n        updates: {\n          connectors: nodeInConnectors\n        },\n        deletes: itemsToDelete,\n        error: false\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_step_title')}</Text>\n            <Button variant='simple' icon label={t('close')} onClick={onCancelHandler}>\n              <Icon name='times' />\n            </Button>\n          </Flex>\n          {nodeType === 'Decision' ? (\n            <>\n              <Text>{t('delete_decision_step')}</Text>\n              <Select\n                id='select-demo'\n                label={t('delete_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          ) : (\n            <Text>{t('delete_step')}</Text>\n          )}\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 {\n  useState,\n  ChangeEventHandler,\n  ChangeEvent,\n  useEffect,\n  forwardRef,\n  PropsWithoutRef,\n  Ref\n} 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 } from './Renderer/Utils/Graph';\nimport deleteNodeUtils, {\n  GraphDataAsMap,\n  DeleteNodeOutcome,\n  DeleteNodeModalOption\n} from './Utils/deleteNodeUtils';\nimport { NodeProps } from './Node/Node.types';\n\nexport interface DeletePopoverProps {\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  onSubmit?: (outcome: DeleteNodeOutcome, ev: Event) => void;\n  onCancel?: () => void;\n  ref?: Ref<HTMLDivElement>;\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    }: PropsWithoutRef<DeletePopoverProps>,\n    ref: DeletePopoverProps['ref']\n  ) => {\n    const [currentSelection, setCurrentSelection] = useState<number>(0);\n\n    const t = useI18n();\n\n    const graph = new DirectedGraph(rendererGraphData);\n\n    const deleteOptionsResult = deleteNodeUtils.getDeleteNodeOptions(graph, nodeId);\n\n    const deleteOptions: DeleteNodeModalOption[] = deleteOptionsResult.options;\n    const nodeType = (graph.getNode(nodeId) as NodeProps).type.name;\n\n    useEffect(() => {\n      if (deleteOptionsResult) {\n        const itemsToDelete: GraphDataAsMap =\n          nodeType !== 'Decision'\n            ? deleteOptionsResult.allItems\n            : 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      }\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;\n      if (deleteOptionsResult) itemsToDelete = deleteOptionsResult.allItems;\n\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      if (itemsToDelete) itemsToDelete.nodes[nodeId] = graph.getNode(nodeId);\n\n      if (itemsToDelete) onChange?.(itemsToDelete, itemsToRetain, ev);\n    };\n\n    const submitHandler = (ev: Event) => {\n      let error = true;\n      const finalGraph = new DirectedGraph(flowGraphData);\n      const finalDeleteOptionsResult = deleteNodeUtils.getDeleteNodeOptions(finalGraph, nodeId);\n\n      let newTargetNode = finalDeleteOptionsResult?.destinationNodeId\n        ? finalGraph.getNode(finalDeleteOptionsResult.destinationNodeId)\n        : undefined;\n      let itemsToDelete = finalDeleteOptionsResult.allItems;\n\n      const selectedOption =\n        currentSelection === -1 || nodeType !== 'Decision'\n          ? undefined\n          : finalDeleteOptionsResult?.options[currentSelection];\n      let finalMetaData = selectedOption;\n\n      if (selectedOption) {\n        const pathConnectors = selectedOption.pathItems.connectors;\n        const connectors = Object.keys(pathConnectors);\n        for (let i = 0; i < connectors.length; i += 1) {\n          const connectorData = pathConnectors[connectors[i]];\n          if (\n            connectorData &&\n            finalGraph.getNode(connectorData.fromNodeId).type?.minConnectors !== 0 &&\n            connectorData.toNodeId === finalDeleteOptionsResult.destinationNodeId\n          ) {\n            error = false;\n            break;\n          }\n        }\n        if (error) {\n          onSubmit?.(\n            {\n              graphData: {\n                nodes: [],\n                connectors: []\n              },\n              updates: {\n                connectors: []\n              },\n              deletes: { nodes: {}, connectors: {} },\n              error: true\n            },\n            ev\n          );\n          return;\n        }\n\n        finalMetaData = finalDeleteOptionsResult.options.find(\n          current => selectedOption.connector.id === current.connector.id\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\n      // iterate and set the targetNode to the above first node instead of the selected node.\n\n      nodeInConnectors.forEach(con => {\n        finalGraph.setConnector(con.id, {\n          toNodeId: newTargetNode ? newTargetNode.id : undefined\n        });\n      });\n\n      const resultGraphData = finalGraph.getGraphData();\n\n      itemsToDelete.nodes[nodeId] = finalGraph.getNode(nodeId);\n\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\n      // filter the highlighted connectors\n      const connectors = resultGraphData.connectors.filter(item => {\n        return itemsToDelete.connectors[item.id] === undefined;\n      });\n\n      const outcome: DeleteNodeOutcome = {\n        graphData: {\n          nodes: nodes as NodeProps[],\n          connectors\n        },\n        updates: {\n          connectors: nodeInConnectors\n        },\n        deletes: itemsToDelete,\n        error: false\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_step_title')}</Text>\n            <Button variant='simple' icon label={t('close')} onClick={onCancelHandler}>\n              <Icon name='times' />\n            </Button>\n          </Flex>\n          {nodeType === 'Decision' ? (\n            <>\n              <Text>{t('delete_decision_step')}</Text>\n              <Select\n                id='select-demo'\n                label={t('delete_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          ) : (\n            <Text>{t('delete_step')}</Text>\n          )}\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,EAQhB,MAAM,OAAO,CAAC;AA+Bf,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAsFzD,QAAA,MAAM,YAAY,sIAWf,gBAAgB,iBAAiB,CAAC,gBAkTpC,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"FlowModeller.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAQhB,MAAM,OAAO,CAAC;AA+Bf,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAsFzD,QAAA,MAAM,YAAY,sIAWf,gBAAgB,iBAAiB,CAAC,gBAgTpC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/FlowModeller/FlowModeller.js

@@ -278,9 +278,7 @@ const FlowModeller = ({ graphData, highlightData, onNodeActionClick, onNodeAdd,
             }
         });
     }, [graphData, selectedNodeId]);
-    /**
-     * Library popover functionality
-     */
+    // Library popover functionality
     const onLibraryItemSelect = useCallback((libItem) => {
         const metaData = state.activeAddBtnMeta.meta;
         closeMenu();