@pega/cosmos-react-build 3.0.0-dev.27.1 → 3.0.0-dev.27.2

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

@@ -0,0 +1,8 @@
+import { FunctionComponent } from 'react';
+import 'codemirror/addon/edit/closebrackets';
+import 'codemirror/addon/hint/show-hint.js';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { CodeEditorProps } from '../ExpressionBuilder.types';
+declare const CodeEditor: FunctionComponent<CodeEditorProps & ForwardProps>;
+export default CodeEditor;
+//# sourceMappingURL=CodeEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/ExpressionBuilder/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAGf,OAAO,qCAAqC,CAAC;AAC7C,OAAO,oCAAoC,CAAC;AAE5C,OAAO,EAAkC,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEvF,OAAO,EAEL,eAAe,EAGhB,MAAM,4BAA4B,CAAC;AAqCpC,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAoFjE,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,100 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// cSpell:words unfocus
+import { forwardRef, useRef, useState, useEffect, useImperativeHandle } from 'react';
+import { Controlled as ReactCodeMirror } from 'react-codemirror2';
+import { showHint, defineMode } from 'codemirror';
+import 'codemirror/addon/edit/closebrackets';
+import 'codemirror/addon/hint/show-hint.js';
+import { useConsolidatedRef, useElement } from '@pega/cosmos-react-core';
+import { StyledCodeEditor } from '../ExpressionBuilder.styles';
+import getCodeSuggestions from './getCodeSuggestions';
+const defaultConfigOptions = {
+    lineWrapping: true,
+    smartIndent: true,
+    autoCloseTags: true,
+    matchBrackets: true,
+    autoCloseBrackets: true
+};
+defineMode('expression', () => {
+    const currTokens = [
+        {
+            token: /[a-zA-Z_$]*[.]+[a-zA-Z_$][a-zA-Z\d_$]*/i,
+            style: 'ex-properties'
+        },
+        {
+            token: /(^[@]+)(\([\w.-]+:[\w.-]+\))*([\w.]+)(\s*)/i,
+            style: 'ex-functions'
+        }
+    ];
+    return {
+        token(stream) {
+            for (let i = 0; i < currTokens.length; i += 1) {
+                if (stream.match('#') || stream.match('//'))
+                    stream.skipToEnd();
+                else if (stream.match(currTokens[i].token))
+                    return currTokens[i].style;
+            }
+            stream.next();
+            return null;
+        }
+    };
+});
+const CodeEditor = forwardRef(({ fetchSuggestions, autoCompleteTriggers, editorConfigProps, codeEditorHandle, defaultValue = '', ...props }, ref) => {
+    const [value, setCode] = useState(defaultValue);
+    const [suggestions, setList] = useState([]);
+    const [codeMirror, setCodeMirror] = useState(null);
+    const [codeEditorContainer, setCodeEditorContainer] = useElement();
+    const codeEditorConsolidatedRef = useConsolidatedRef(setCodeEditorContainer, ref);
+    const mounted = useRef(false);
+    useImperativeHandle(codeEditorHandle, () => ({
+        insertText: (text) => {
+            if (codeMirror) {
+                const cur = codeMirror.getCursor();
+                codeMirror.replaceRange(text, cur);
+            }
+        },
+        getValue: () => {
+            return codeMirror?.getValue();
+        }
+    }), [codeMirror]);
+    const autoComplete = (codeEditor) => {
+        const hintOptions = {
+            completeSingle: false,
+            completeOnSingleClick: true,
+            closeOnUnfocus: true,
+            suggestions,
+            container: codeEditorContainer
+        };
+        showHint(codeEditor, getCodeSuggestions, hintOptions);
+    };
+    useEffect(() => {
+        if (suggestions.length > 0 && value.length > 0 && codeMirror) {
+            autoComplete(codeMirror);
+        }
+        else {
+            codeMirror?.closeHint();
+        }
+    }, [suggestions]);
+    useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+    return (_jsx(StyledCodeEditor, { ref: codeEditorConsolidatedRef, ...props, children: _jsx(ReactCodeMirror, { value: value, onBeforeChange: async (editor, _data, textvalue) => {
+                setCode(textvalue);
+                const currentCursor = editor.getCursor();
+                const autoCompleteTrigger = editor.getTokenAt(currentCursor)
+                    .string;
+                if (autoCompleteTriggers?.includes(autoCompleteTrigger) && fetchSuggestions) {
+                    const newSuggestions = [...(await fetchSuggestions(autoCompleteTrigger))];
+                    if (mounted.current)
+                        setList(newSuggestions);
+                }
+            }, options: { ...defaultConfigOptions, ...editorConfigProps }, editorDidMount: editor => {
+                editor.setSize('100%', '100%');
+                setCodeMirror(editor);
+            } }) }));
+});
+export default CodeEditor;
+//# sourceMappingURL=CodeEditor.js.map

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

@@ -0,0 +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 { showHint, defineMode, Editor, Position } from 'codemirror';\nimport 'codemirror/addon/edit/closebrackets';\nimport 'codemirror/addon/hint/show-hint.js';\n\nimport { useConsolidatedRef, useElement, ForwardProps } from '@pega/cosmos-react-core';\n\nimport {\n  AutoCompleteTriggerType,\n  CodeEditorProps,\n  EditorState,\n  SuggestionsType\n} from '../ExpressionBuilder.types';\nimport { StyledCodeEditor } from '../ExpressionBuilder.styles';\n\nimport getCodeSuggestions from './getCodeSuggestions';\n\nconst defaultConfigOptions = {\n  lineWrapping: true,\n  smartIndent: true,\n  autoCloseTags: true,\n  matchBrackets: true,\n  autoCloseBrackets: true\n};\n\ndefineMode('expression', () => {\n  const currTokens = [\n    {\n      token: /[a-zA-Z_$]*[.]+[a-zA-Z_$][a-zA-Z\\d_$]*/i,\n      style: 'ex-properties'\n    },\n    {\n      token: /(^[@]+)(\\([\\w.-]+:[\\w.-]+\\))*([\\w.]+)(\\s*)/i,\n      style: 'ex-functions'\n    }\n  ];\n\n  return {\n    token(stream) {\n      for (let i = 0; i < currTokens.length; i += 1) {\n        if (stream.match('#') || stream.match('//')) stream.skipToEnd();\n        else if (stream.match(currTokens[i].token)) return currTokens[i].style;\n      }\n      stream.next();\n      return null;\n    }\n  };\n});\n\nconst CodeEditor: FunctionComponent<CodeEditorProps & ForwardProps> = forwardRef(\n  (\n    {\n      fetchSuggestions,\n      autoCompleteTriggers,\n      editorConfigProps,\n      codeEditorHandle,\n      defaultValue = '',\n      ...props\n    }: PropsWithoutRef<CodeEditorProps>,\n    ref: CodeEditorProps['ref']\n  ) => {\n    const [value, setCode] = useState<string>(defaultValue);\n    const [suggestions, setList] = useState<SuggestionsType[]>([]);\n    const [codeMirror, setCodeMirror] = useState<Editor | null>(null);\n    const [codeEditorContainer, setCodeEditorContainer] = useElement<HTMLDivElement>();\n    const codeEditorConsolidatedRef = useConsolidatedRef(setCodeEditorContainer, ref);\n    const mounted = useRef(false);\n\n    useImperativeHandle<any, EditorState>(\n      codeEditorHandle,\n      () => ({\n        insertText: (text: string) => {\n          if (codeMirror) {\n            const cur: Position = codeMirror.getCursor();\n            codeMirror.replaceRange(text, cur);\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      };\n      showHint(codeEditor, getCodeSuggestions, hintOptions);\n    };\n\n    useEffect(() => {\n      if (suggestions.length > 0 && value.length > 0 && codeMirror) {\n        autoComplete(codeMirror);\n      } else {\n        codeMirror?.closeHint();\n      }\n    }, [suggestions]);\n\n    useEffect(() => {\n      mounted.current = true;\n      return () => {\n        mounted.current = false;\n      };\n    }, []);\n\n    return (\n      <StyledCodeEditor ref={codeEditorConsolidatedRef} {...props}>\n        <ReactCodeMirror\n          value={value}\n          onBeforeChange={async (editor, _data, textvalue) => {\n            setCode(textvalue);\n            const currentCursor = editor.getCursor();\n            const autoCompleteTrigger = editor.getTokenAt(currentCursor)\n              .string as AutoCompleteTriggerType;\n            if (autoCompleteTriggers?.includes(autoCompleteTrigger) && fetchSuggestions) {\n              const newSuggestions = [...(await fetchSuggestions(autoCompleteTrigger))];\n              if (mounted.current) setList(newSuggestions);\n            }\n          }}\n          options={{ ...defaultConfigOptions, ...editorConfigProps }}\n          editorDidMount={editor => {\n            editor.setSize('100%', '100%');\n            setCodeMirror(editor);\n          }}\n        />\n      </StyledCodeEditor>\n    );\n  }\n);\n\nexport default CodeEditor;\n"]}

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

@@ -0,0 +1,13 @@
+import { Editor, Hint, Hints } from 'codemirror';
+import { EditorHintOptions } from '../ExpressionBuilder.types';
+declare const getCodeSuggestions: (codeMirror: Editor, options: EditorHintOptions) => {
+    list: {
+        text: string;
+        displayText: string;
+        render: (Element: HTMLLIElement, _self: Hints, data: Hint) => void;
+    }[];
+    from: import("codemirror").Position;
+    to: import("codemirror").Position;
+};
+export default getCodeSuggestions;
+//# sourceMappingURL=getCodeSuggestions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getCodeSuggestions.d.ts","sourceRoot":"","sources":["../../../../src/components/ExpressionBuilder/CodeEditor/getCodeSuggestions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAO,IAAI,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,QAAA,MAAM,kBAAkB,eAAgB,MAAM,WAAW,iBAAiB;;;;0BAUlD,aAAa,SAAS,KAAK,QAAQ,IAAI;;;;CAe9D,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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

@@ -0,0 +1,27 @@
+import { Pos } from 'codemirror';
+const getCodeSuggestions = (codeMirror, options) => {
+    const { suggestions = [] } = options;
+    const curPos = codeMirror.getCursor();
+    const token = codeMirror.getTokenAt(curPos);
+    token.end = curPos.ch;
+    const suggestionsList = suggestions.map(hint => {
+        return {
+            text: hint.value,
+            displayText: hint.label,
+            render: (Element, _self, data) => {
+                const itemDiv = document.createElement('div');
+                const labelSpan = document.createElement('span');
+                labelSpan.textContent = data.text;
+                itemDiv.appendChild(labelSpan);
+                Element.appendChild(itemDiv);
+            }
+        };
+    });
+    return {
+        list: suggestionsList,
+        from: Pos(curPos.line, token.start),
+        to: Pos(curPos.line, token.end)
+    };
+};
+export default getCodeSuggestions;
+//# sourceMappingURL=getCodeSuggestions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getCodeSuggestions.js","sourceRoot":"","sources":["../../../../src/components/ExpressionBuilder/CodeEditor/getCodeSuggestions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,GAAG,EAAe,MAAM,YAAY,CAAC;AAItD,MAAM,kBAAkB,GAAG,CAAC,UAAkB,EAAE,OAA0B,EAAE,EAAE;IAC5E,MAAM,EAAE,WAAW,GAAG,EAAE,EAAE,GAAG,OAAO,CAAC;IACrC,MAAM,MAAM,GAAG,UAAU,CAAC,SAAS,EAAE,CAAC;IACtC,MAAM,KAAK,GAAG,UAAU,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;IAC5C,KAAK,CAAC,GAAG,GAAG,MAAM,CAAC,EAAE,CAAC;IAEtB,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;QAC7C,OAAO;YACL,IAAI,EAAE,IAAI,CAAC,KAAK;YAChB,WAAW,EAAE,IAAI,CAAC,KAAK;YACvB,MAAM,EAAE,CAAC,OAAsB,EAAE,KAAY,EAAE,IAAU,EAAE,EAAE;gBAC3D,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBAC9C,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;gBACjD,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC;gBAClC,OAAO,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;gBAC/B,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;YAC/B,CAAC;SACF,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO;QACL,IAAI,EAAE,eAAe;QACrB,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;QACnC,EAAE,EAAE,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC;KAChC,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { Editor, Pos, Hint, Hints } from 'codemirror';\n\nimport { EditorHintOptions } from '../ExpressionBuilder.types';\n\nconst getCodeSuggestions = (codeMirror: Editor, options: EditorHintOptions) => {\n  const { suggestions = [] } = options;\n  const curPos = codeMirror.getCursor();\n  const token = codeMirror.getTokenAt(curPos);\n  token.end = curPos.ch;\n\n  const suggestionsList = suggestions.map(hint => {\n    return {\n      text: hint.value,\n      displayText: hint.label,\n      render: (Element: HTMLLIElement, _self: Hints, data: Hint) => {\n        const itemDiv = document.createElement('div');\n        const labelSpan = document.createElement('span');\n        labelSpan.textContent = data.text;\n        itemDiv.appendChild(labelSpan);\n        Element.appendChild(itemDiv);\n      }\n    };\n  });\n\n  return {\n    list: suggestionsList,\n    from: Pos(curPos.line, token.start),\n    to: Pos(curPos.line, token.end)\n  };\n};\n\nexport default getCodeSuggestions;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ExpressionBuilder.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAuB,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAIxF,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CAiI/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"ExpressionBuilder.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,YAAY,EAIb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAEL,sBAAsB,EAEvB,MAAM,2BAA2B,CAAC;AAMnC,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CAqG/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/ExpressionBuilder/ExpressionBuilder.js

@@ -1,56 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { Flex, SearchInput, TextArea, useI18n, VisuallyHiddenText } from '@pega/cosmos-react-core';
+import { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
+import { Flex, SearchInput, useI18n, VisuallyHiddenText } from '@pega/cosmos-react-core';
 import ExpressionList from './ExpressionList';
-import { StyledExpressionBuilder, StyledExpressionEditor } from './ExpressionBuilder.styles';
-const ExpressionBuilder = forwardRef(({ list, search, errors, defaultValue, handle, ...restProps }, ref) => {
+import { StyledExpressionBuilder, StyledCodeEditor } from './ExpressionBuilder.styles';
+import CodeEditor from './CodeEditor/CodeEditor';
+import ExpressionBuilderContext from './ExpressionBuilderContext';
+const ExpressionBuilder = forwardRef(({ list, search, errors, defaultValue, handle, fetchSuggestions, ...restProps }, ref) => {
     const t = useI18n();
-    const textArea = useRef();
-    const [selection, setSelection] = useState({
-        start: 0,
-        end: 0
-    });
+    const codeEditorHandle = useRef(null);
     const getExpression = () => {
-        return textArea.current?.value || '';
+        return codeEditorHandle.current?.getValue() || '';
     };
     useImperativeHandle(handle, () => ({
         getExpression
     }), [getExpression]);
     const addExpression = (expression) => {
-        if (!textArea.current)
-            return;
-        const currentValue = textArea.current.value;
-        const newValue = `${currentValue.slice(0, selection.start)}${expression}${currentValue.slice(selection.end)}`;
-        textArea.current.value = newValue;
-        setSelection(prev => {
-            return { start: prev.start + expression.length, end: prev.start + expression.length };
-        });
-    };
-    const onBlur = () => {
-        if (!textArea.current)
-            return;
-        const lastIndex = textArea.current.value.length >= 0 ? textArea.current.value.length : 0;
-        const selectionStart = textArea.current.selectionStart === null ? lastIndex : textArea.current.selectionStart;
-        const selectionEnd = textArea.current.selectionEnd === null ? lastIndex : textArea.current.selectionEnd;
-        const currentSelection = {
-            start: selectionStart,
-            end: selectionEnd
-        };
-        if (selectionStart > selectionEnd) {
-            currentSelection.start = selectionEnd;
-            currentSelection.end = selectionStart;
-        }
-        setSelection(currentSelection);
+        codeEditorHandle.current?.insertText(expression);
     };
     const onItemAdd = (id) => {
         list.onItemAdd(id, addExpression);
     };
-    useEffect(() => {
-        if (defaultValue && textArea.current) {
-            setSelection({ start: defaultValue.length, end: defaultValue.length });
-            textArea.current.value = defaultValue;
-        }
-    }, []);
+    const ctxValue = useMemo(() => ({
+        accent: search.accent
+    }), [search.accent]);
     return (_jsxs(Flex, { ...restProps, as: StyledExpressionBuilder, ref: ref, container: {
             justify: 'between',
             colGap: 2,
@@ -64,13 +36,15 @@ const ExpressionBuilder = forwardRef(({ list, search, errors, defaultValue, hand
                 }, item: {
                     grow: 1,
                     basis: '50%'
-                }, children: [_jsx(SearchInput, { ...search }), _jsx(ExpressionList, { ...list, onItemAdd: onItemAdd })] }), _jsx(Flex, { as: StyledExpressionEditor, container: {
+                }, children: [_jsx(SearchInput, { ...search }), _jsx(ExpressionBuilderContext.Provider, { value: ctxValue, children: _jsx(ExpressionList, { ...list, onItemAdd: onItemAdd }) })] }), _jsx(Flex, { as: StyledCodeEditor, container: {
                     direction: 'column',
                     justify: 'between'
                 }, item: {
                     grow: 1,
                     basis: '50%'
-                }, children: _jsx(TextArea, { status: errors ? 'error' : undefined, ref: textArea, onBlur: onBlur, label: t('expression_editor'), labelHidden: true, info: errors }) })] }));
+                }, children: _jsx(CodeEditor, { fetchSuggestions: fetchSuggestions, codeEditorHandle: codeEditorHandle, autoCompleteTriggers: ['.', '@'], editorConfigProps: {
+                        mode: 'expression'
+                    }, defaultValue: defaultValue }) })] }));
 });
 export default ExpressionBuilder;
 //# sourceMappingURL=ExpressionBuilder.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExpressionBuilder.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState\n} from 'react';\n\nimport {\n  Flex,\n  ForwardProps,\n  SearchInput,\n  TextArea,\n  useI18n,\n  VisuallyHiddenText\n} from '@pega/cosmos-react-core';\n\nimport { ExpressionItemProps, ExpressionBuilderProps } from './ExpressionBuilder.types';\nimport ExpressionList from './ExpressionList';\nimport { StyledExpressionBuilder, StyledExpressionEditor } from './ExpressionBuilder.styles';\n\nconst ExpressionBuilder: FunctionComponent<ExpressionBuilderProps & ForwardProps> = forwardRef(\n  (\n    {\n      list,\n      search,\n      errors,\n      defaultValue,\n      handle,\n      ...restProps\n    }: PropsWithoutRef<ExpressionBuilderProps>,\n    ref: ExpressionBuilderProps['ref']\n  ) => {\n    const t = useI18n();\n    const textArea = useRef<HTMLInputElement>();\n    const [selection, setSelection] = useState<{ start: number; end: number }>({\n      start: 0,\n      end: 0\n    });\n\n    const getExpression = () => {\n      return textArea.current?.value || '';\n    };\n\n    useImperativeHandle(\n      handle,\n      () => ({\n        getExpression\n      }),\n      [getExpression]\n    );\n\n    const addExpression = (expression: string) => {\n      if (!textArea.current) return;\n      const currentValue = textArea.current.value;\n      const newValue = `${currentValue.slice(0, selection.start)}${expression}${currentValue.slice(\n        selection.end\n      )}`;\n      textArea.current.value = newValue;\n      setSelection(prev => {\n        return { start: prev.start + expression.length, end: prev.start + expression.length };\n      });\n    };\n\n    const onBlur = () => {\n      if (!textArea.current) return;\n      const lastIndex = textArea.current.value.length >= 0 ? textArea.current.value.length : 0;\n      const selectionStart =\n        textArea.current.selectionStart === null ? lastIndex : textArea.current.selectionStart;\n      const selectionEnd =\n        textArea.current.selectionEnd === null ? lastIndex : textArea.current.selectionEnd;\n      const currentSelection = {\n        start: selectionStart,\n        end: selectionEnd\n      };\n      if (selectionStart > selectionEnd) {\n        currentSelection.start = selectionEnd;\n        currentSelection.end = selectionStart;\n      }\n\n      setSelection(currentSelection);\n    };\n\n    const onItemAdd = (id: ExpressionItemProps['id']) => {\n      list.onItemAdd(id, addExpression);\n    };\n\n    useEffect(() => {\n      if (defaultValue && textArea.current) {\n        setSelection({ start: defaultValue.length, end: defaultValue.length });\n        textArea.current.value = defaultValue;\n      }\n    }, []);\n\n    return (\n      <Flex\n        {...restProps}\n        as={StyledExpressionBuilder}\n        ref={ref}\n        container={{\n          justify: 'between',\n          colGap: 2,\n          pad: 1\n        }}\n        item={{\n          grow: 1\n        }}\n      >\n        <VisuallyHiddenText aria-live='polite' role='status'>\n          {t('results_count', [list.items?.length || 0], { count: list.items?.length || 0 })}\n        </VisuallyHiddenText>\n        {/* Column 1 */}\n        <Flex\n          container={{\n            direction: 'column',\n            justify: 'between',\n            gap: 1\n          }}\n          item={{\n            grow: 1,\n            basis: '50%'\n          }}\n        >\n          <SearchInput {...search} />\n          <ExpressionList {...list} onItemAdd={onItemAdd} />\n        </Flex>\n        {/* Column 2 */}\n        <Flex\n          as={StyledExpressionEditor}\n          container={{\n            direction: 'column',\n            justify: 'between'\n          }}\n          item={{\n            grow: 1,\n            basis: '50%'\n          }}\n        >\n          <TextArea\n            status={errors ? 'error' : undefined}\n            ref={textArea}\n            onBlur={onBlur}\n            label={t('expression_editor')}\n            labelHidden\n            info={errors}\n          />\n        </Flex>\n      </Flex>\n    );\n  }\n);\n\nexport default ExpressionBuilder;\n"]}
+{"version":3,"file":"ExpressionBuilder.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useImperativeHandle,\n  useMemo,\n  useRef\n} from 'react';\n\nimport {\n  Flex,\n  ForwardProps,\n  SearchInput,\n  useI18n,\n  VisuallyHiddenText\n} from '@pega/cosmos-react-core';\n\nimport {\n  ExpressionItemProps,\n  ExpressionBuilderProps,\n  EditorState\n} from './ExpressionBuilder.types';\nimport ExpressionList from './ExpressionList';\nimport { StyledExpressionBuilder, StyledCodeEditor } from './ExpressionBuilder.styles';\nimport CodeEditor from './CodeEditor/CodeEditor';\nimport ExpressionBuilderContext from './ExpressionBuilderContext';\n\nconst ExpressionBuilder: FunctionComponent<ExpressionBuilderProps & ForwardProps> = forwardRef(\n  (\n    {\n      list,\n      search,\n      errors,\n      defaultValue,\n      handle,\n      fetchSuggestions,\n      ...restProps\n    }: PropsWithoutRef<ExpressionBuilderProps>,\n    ref: ExpressionBuilderProps['ref']\n  ) => {\n    const t = useI18n();\n    const codeEditorHandle = useRef<EditorState>(null);\n\n    const getExpression = () => {\n      return codeEditorHandle.current?.getValue() || '';\n    };\n\n    useImperativeHandle(\n      handle,\n      () => ({\n        getExpression\n      }),\n      [getExpression]\n    );\n\n    const addExpression = (expression: string) => {\n      codeEditorHandle.current?.insertText(expression);\n    };\n    const onItemAdd = (id: ExpressionItemProps['id']) => {\n      list.onItemAdd(id, addExpression);\n    };\n\n    const ctxValue = useMemo(\n      () => ({\n        accent: search.accent\n      }),\n      [search.accent]\n    );\n\n    return (\n      <Flex\n        {...restProps}\n        as={StyledExpressionBuilder}\n        ref={ref}\n        container={{\n          justify: 'between',\n          colGap: 2,\n          pad: 1\n        }}\n        item={{\n          grow: 1\n        }}\n      >\n        <VisuallyHiddenText aria-live='polite' role='status'>\n          {t('results_count', [list.items?.length || 0], { count: list.items?.length || 0 })}\n        </VisuallyHiddenText>\n        {/* Column 1 */}\n        <Flex\n          container={{\n            direction: 'column',\n            justify: 'between',\n            gap: 1\n          }}\n          item={{\n            grow: 1,\n            basis: '50%'\n          }}\n        >\n          <SearchInput {...search} />\n          <ExpressionBuilderContext.Provider value={ctxValue}>\n            <ExpressionList {...list} onItemAdd={onItemAdd} />\n          </ExpressionBuilderContext.Provider>\n        </Flex>\n        {/* Column 2 */}\n        <Flex\n          as={StyledCodeEditor}\n          container={{\n            direction: 'column',\n            justify: 'between'\n          }}\n          item={{\n            grow: 1,\n            basis: '50%'\n          }}\n        >\n          <CodeEditor\n            fetchSuggestions={fetchSuggestions}\n            codeEditorHandle={codeEditorHandle}\n            autoCompleteTriggers={['.', '@']}\n            editorConfigProps={{\n              mode: 'expression'\n            }}\n            defaultValue={defaultValue}\n          />\n        </Flex>\n      </Flex>\n    );\n  }\n);\n\nexport default ExpressionBuilder;\n"]}

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

@@ -1,8 +1,9 @@
+/// <reference types="react" />
 import { ExpressionItemProps } from './ExpressionBuilder.types';
+export declare const StyledPrimaryText: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledExpressionSummary: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledExpressionList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledExpressionBuilder: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledExpressionEditor: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledParamsGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledInputParamsGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledExpressionDetails: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
@@ -10,4 +11,5 @@ export declare const StyledExpandCollapseContent: import("styled-components").St
 export declare const StyledExpressionItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
     expanded: ExpressionItemProps['expanded'];
 }, never>;
+export declare const StyledCodeEditor: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=ExpressionBuilder.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExpressionBuilder.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.styles.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAEhE,eAAO,MAAM,uBAAuB,yGAKlC,CAAC;AAIH,eAAO,MAAM,oBAAoB,wGAIhC,CAAC;AAEF,eAAO,MAAM,uBAAuB,yGAYlC,CAAC;AAIH,eAAO,MAAM,sBAAsB,yGAMjC,CAAC;AAEH,eAAO,MAAM,iBAAiB,yGAQ5B,CAAC;AAIH,eAAO,MAAM,sBAAsB,yGAIjC,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAAe,CAAC;AAIpD,eAAO,MAAM,2BAA2B,yGAQtC,CAAC;AAIH,eAAO,MAAM,oBAAoB;cACrB,mBAAmB,CAAC,UAAU,CAAC;SAkBzC,CAAC"}
+{"version":3,"file":"ExpressionBuilder.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.styles.ts"],"names":[],"mappings":";AAYA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAEhE,eAAO,MAAM,iBAAiB,mOAE7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,yGAKlC,CAAC;AAIH,eAAO,MAAM,oBAAoB,wGAIhC,CAAC;AAEF,eAAO,MAAM,uBAAuB,yGAalC,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAQ5B,CAAC;AAIH,eAAO,MAAM,sBAAsB,yGAIjC,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAAe,CAAC;AAIpD,eAAO,MAAM,2BAA2B,yGAQtC,CAAC;AAIH,eAAO,MAAM,oBAAoB;cACrB,mBAAmB,CAAC,UAAU,CAAC;SAuBzC,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGA6c3B,CAAC"}

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

@@ -1,7 +1,10 @@
+// cSpell:words vscrollbar hscrollbar
 import styled, { css } from 'styled-components';
-import { defaultThemeProp, StyledButton, StyledText } from '@pega/cosmos-react-core';
+import { defaultThemeProp, StyledButton, StyledLabel, StyledText, Text } from '@pega/cosmos-react-core';
 import StyledTextArea from '@pega/cosmos-react-core/lib/components/TextArea/TextArea.styles';
-import { StyledFormField } from '@pega/cosmos-react-core/lib/components/FormField/FormField';
+export const StyledPrimaryText = styled(Text) `
+  word-break: break-word;
+`;
 export const StyledExpressionSummary = styled.div(({ theme }) => {
     return css `
     padding-block: ${theme.base.spacing};
@@ -16,6 +19,7 @@ export const StyledExpressionList = styled.ul `
 `;
 export const StyledExpressionBuilder = styled.div(({ theme }) => {
     return css `
+    position: relative;
     background-color: ${theme.base.palette['primary-background']};
     min-height: calc(30 * ${theme.base.spacing});
     max-height: 100%;
@@ -28,13 +32,6 @@ export const StyledExpressionBuilder = styled.div(({ theme }) => {
   `;
 });
 StyledExpressionBuilder.defaultProps = defaultThemeProp;
-export const StyledExpressionEditor = styled.div(() => {
-    return css `
-    ${StyledFormField} {
-      flex-grow: 1;
-    }
-  `;
-});
 export const StyledParamsGroup = styled.div(({ theme }) => {
     return css `
     margin-block-start: calc(2 * ${theme.base.spacing});
@@ -79,7 +76,475 @@ export const StyledExpressionItem = styled.li(({ theme, expanded }) => {
     ${StyledExpressionDetails} {
       padding-block-end: calc(2 * ${theme.base.spacing});
     }
+
+    ${StyledLabel} {
+      margin-inline-end: calc(0.5 * ${theme.base.spacing});
+      color: ${theme.base.palette['foreground-color']};
+    }
   `;
 });
 StyledExpressionItem.defaultProps = defaultThemeProp;
+export const StyledCodeEditor = styled.div(({ theme }) => {
+    return css `
+    /* PADDING */
+
+    .CodeMirror-lines {
+      cursor: text;
+      min-height: 0.063rem; /* prevents collapsing before first draw */
+      padding: 0.25rem 0; /* Vertical padding around content */
+    }
+
+    .CodeMirror-scrollbar-filler,
+    .CodeMirror-gutter-filler {
+      background-color: white; /* The little square between H and V scrollbars */
+    }
+
+    /* GUTTER */
+
+    .CodeMirror-gutters {
+      position: absolute;
+      left: 0;
+      top: 0;
+      min-height: 100%;
+      z-index: 3;
+      border-right: 0.063rem solid #dddddd;
+      background-color: #f7f7f7;
+      white-space: nowrap;
+    }
+    .CodeMirror-linenumber {
+      padding: 0 0.125rem 0 0.313rem;
+      min-width: 1.25rem;
+      text-align: right;
+      color: #999999;
+      white-space: nowrap;
+    }
+
+    .CodeMirror-guttermarker {
+      color: black;
+    }
+    .CodeMirror-guttermarker-subtle {
+      color: #999999;
+    }
+
+    /* CURSOR */
+
+    .CodeMirror-cursor {
+      position: absolute;
+      pointer-events: none;
+      border-left: 0.0625rem solid ${theme.base.palette['border-line']};
+      border-right: none;
+      width: 0;
+    }
+
+    /* Shown when moving in bi-directional text */
+    .CodeMirror div.CodeMirror-secondarycursor {
+      border-left: 0.063rem solid silver;
+    }
+    .cm-fat-cursor-mark {
+      background-color: rgba(20, 255, 20, 0.5);
+      -webkit-animation: blink 1.06s steps(1) infinite;
+      -moz-animation: blink 1.06s steps(1) infinite;
+      animation: blink 1.06s steps(1) infinite;
+    }
+    .cm-animate-fat-cursor {
+      width: auto;
+      border: 0;
+      -webkit-animation: blink 1.06s steps(1) infinite;
+      -moz-animation: blink 1.06s steps(1) infinite;
+      animation: blink 1.06s steps(1) infinite;
+      background-color: #77ee77;
+    }
+    @-moz-keyframes blink {
+      50% {
+        background-color: transparent;
+      }
+    }
+    @-webkit-keyframes blink {
+      50% {
+        background-color: transparent;
+      }
+    }
+    @keyframes blink {
+      50% {
+        background-color: transparent;
+      }
+    }
+
+    .cm-tab {
+      display: inline-block;
+      text-decoration: inherit;
+    }
+
+    .CodeMirror-rulers {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: -3.125rem;
+      bottom: 0;
+      overflow: hidden;
+    }
+    .CodeMirror-ruler {
+      border-left: 0.063rem solid #cccccc;
+      top: 0;
+      bottom: 0;
+      position: absolute;
+    }
+
+    /* DEFAULT THEME */
+
+    .cm-s-default .cm-header {
+      color: blue;
+    }
+    .cm-negative {
+      color: #dd4444;
+    }
+    .cm-positive {
+      color: #229922;
+    }
+    .cm-strong {
+      font-weight: bold;
+    }
+    .cm-s-default .cm-quote {
+      color: #009900;
+    }
+    .cm-em {
+      font-style: italic;
+    }
+    .cm-link {
+      text-decoration: underline;
+    }
+    .cm-strikethrough {
+      text-decoration: line-through;
+    }
+
+    .cm-s-default .cm-keyword {
+      color: #770088;
+    }
+    .cm-s-default .cm-atom {
+      color: #221199;
+    }
+    .cm-s-default .cm-number {
+      color: #116644;
+    }
+    .cm-s-default .cm-def {
+      color: #0000ff;
+    }
+    .cm-s-default .cm-variable-2 {
+      color: #0055aa;
+    }
+    .cm-s-default .cm-variable-3,
+    .cm-s-default .cm-type {
+      color: #008855;
+    }
+    .cm-s-default .cm-comment {
+      color: #aa5500;
+    }
+    .cm-s-default .cm-string {
+      color: #aa1111;
+    }
+    .cm-s-default .cm-string-2 {
+      color: #ff5500;
+    }
+    .cm-s-default .cm-meta {
+      color: #555555;
+    }
+    .cm-s-default .cm-qualifier {
+      color: #555555;
+    }
+    .cm-s-default .cm-builtin {
+      color: #3300aa;
+    }
+    .cm-s-default .cm-bracket {
+      color: #999977;
+    }
+    .cm-s-default .cm-tag {
+      color: #117700;
+    }
+    .cm-s-default .cm-attribute {
+      color: #0000cc;
+    }
+    .cm-s-default .cm-hr {
+      color: #999999;
+    }
+    .cm-s-default .cm-link {
+      color: #0000cc;
+    }
+
+    .cm-s-default .cm-error {
+      color: #ff0000;
+    }
+    .cm-invalidchar {
+      color: #ff0000;
+    }
+
+    .CodeMirror-composing {
+      border-bottom: 0.125rem solid;
+    }
+
+    /* Default styles for common addons */
+
+    div.CodeMirror span.CodeMirror-matchingbracket {
+      color: #00bb00;
+    }
+    div.CodeMirror span.CodeMirror-nonmatchingbracket {
+      color: #aa2222;
+    }
+    .CodeMirror-matchingtag {
+      background: rgba(255, 150, 0, 0.3);
+    }
+    .CodeMirror-activeline-background {
+      background: #e8f2ff;
+    }
+
+    /* STOP */
+
+    /* The rest of this file contains styles related to the mechanics of
+   the editor. You probably shouldn't touch them. */
+
+    .CodeMirror-scroll {
+      overflow: scroll !important;
+      margin-bottom: -3.125rem;
+      margin-right: -3.125rem;
+      padding-bottom: 3.125rem;
+      height: 100%;
+      outline: none; /* Prevent dragging from highlighting the element */
+      position: relative;
+    }
+    .CodeMirror-sizer {
+      position: relative;
+      border-right: 3.125rem solid transparent;
+    }
+
+    /* The fake, visible scrollbars. Used to force redraw during scrolling
+   before actual scrolling happens, thus preventing shaking and
+   flickering artifacts. */
+    .CodeMirror-vscrollbar,
+    .CodeMirror-hscrollbar,
+    .CodeMirror-scrollbar-filler,
+    .CodeMirror-gutter-filler {
+      position: absolute;
+      z-index: 6;
+      display: none;
+    }
+    .CodeMirror-vscrollbar {
+      right: 0;
+      top: 0;
+      overflow-x: hidden;
+      overflow-y: scroll;
+    }
+    .CodeMirror-hscrollbar {
+      bottom: 0;
+      left: 0;
+      overflow-y: hidden;
+      overflow-x: scroll;
+    }
+    .CodeMirror-scrollbar-filler {
+      right: 0;
+      bottom: 0;
+    }
+    .CodeMirror-gutter-filler {
+      left: 0;
+      bottom: 0;
+    }
+    .CodeMirror-gutter {
+      white-space: normal;
+      height: 100%;
+      display: inline-block;
+      vertical-align: top;
+      margin-bottom: -3.125rem;
+    }
+    .CodeMirror-gutter-wrapper {
+      position: absolute;
+      z-index: 4;
+      background: none !important;
+      border: none !important;
+    }
+    .CodeMirror-gutter-background {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      z-index: 4;
+    }
+    .CodeMirror-gutter-elt {
+      position: absolute;
+      cursor: default;
+      z-index: 4;
+    }
+    .CodeMirror-gutter-wrapper ::selection {
+      background-color: transparent;
+    }
+    .CodeMirror-gutter-wrapper ::-moz-selection {
+      background-color: transparent;
+    }
+
+    .CodeMirror pre.CodeMirror-line,
+    .CodeMirror pre.CodeMirror-line-like {
+      /* Reset some styles that the rest of the page might have set */
+      -moz-border-radius: 0;
+      -webkit-border-radius: 0;
+      border-radius: 0;
+      border-width: 0;
+      background: transparent;
+      font-family: inherit;
+      font-size: inherit;
+      margin: 0;
+      white-space: pre;
+      word-wrap: normal;
+      line-height: inherit;
+      color: inherit;
+      z-index: 2;
+      position: relative;
+      overflow: visible;
+      -webkit-tap-highlight-color: transparent;
+      -webkit-font-variant-ligatures: contextual;
+      font-variant-ligatures: contextual;
+    }
+    .CodeMirror-wrap pre.CodeMirror-line,
+    .CodeMirror-wrap pre.CodeMirror-line-like {
+      word-wrap: break-word;
+      white-space: pre-wrap;
+      word-break: normal;
+    }
+
+    .CodeMirror-linebackground {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      z-index: 0;
+    }
+
+    .CodeMirror-linewidget {
+      position: relative;
+      z-index: 2;
+      padding: 0.006rem; /* Force widget margins to stay inside of the container */
+    }
+
+    .CodeMirror-rtl pre {
+      direction: rtl;
+    }
+
+    .CodeMirror-code {
+      outline: none;
+    }
+
+    /* Force content-box sizing for the elements where we expect it */
+    .CodeMirror-scroll,
+    .CodeMirror-sizer,
+    .CodeMirror-gutter,
+    .CodeMirror-linenumber {
+      -moz-box-sizing: content-box;
+      box-sizing: content-box;
+    }
+
+    .CodeMirror-measure {
+      position: absolute;
+      width: 100%;
+      height: 0;
+      overflow: hidden;
+      visibility: hidden;
+    }
+
+    .CodeMirror-measure pre {
+      position: static;
+    }
+
+    div.CodeMirror-dragcursors {
+      visibility: visible;
+    }
+
+    .CodeMirror-selected {
+      background: #d9d9d9;
+    }
+    .CodeMirror-focused .CodeMirror-selected {
+      background: #d7d4f0;
+    }
+    .CodeMirror-crosshair {
+      cursor: crosshair;
+    }
+    .CodeMirror-line::selection,
+    .CodeMirror-line > span::selection,
+    .CodeMirror-line > span > span::selection {
+      background: #d7d4f0;
+    }
+    .CodeMirror-line::-moz-selection,
+    .CodeMirror-line > span::-moz-selection,
+    .CodeMirror-line > span > span::-moz-selection {
+      background: #d7d4f0;
+    }
+
+    .cm-searching {
+      background-color: rgba(255, 255, 0, 0.4);
+    }
+
+    /* Used to force a border model for a node */
+    .cm-force-border {
+      padding-right: 0.006rem;
+    }
+
+    /* See issue #2901 */
+    .cm-tab-wrap-hack::after {
+      content: '';
+    }
+
+    /* Help users use markselection to safely style text background */
+    span.CodeMirror-selectedtext {
+      background: none;
+    }
+
+    .CodeMirror {
+      overflow: hidden;
+      font-family: monospace;
+      height: 18.75rem;
+      direction: ltr;
+      position: absolute;
+      background-color: ${theme.base.palette['background-color']};
+      color: ${theme.base.palette['foreground-color']};
+      max-height: 98%;
+      max-width: 49%;
+      border: 0.0625rem solid ${theme.base.palette['border-line']};
+      border-radius: calc(0.5 * ${theme.base['border-radius']});
+    }
+    .cm-ex-properties {
+      color: ${theme.base.palette.success};
+    }
+    .cm-ex-functions {
+      color: ${theme.base.palette.warn};
+    }
+    .CodeMirror-hints {
+      position: absolute;
+      z-index: 10;
+      overflow: hidden;
+      list-style: none;
+      margin: 0;
+      padding: 0.125rem;
+      -webkit-box-shadow: 0.125rem 0.188rem 0.313rem rgba(0, 0, 0, 0.2);
+      -moz-box-shadow: 0.125rem 0.188rem 0.313rem rgba(0, 0, 0, 0.2);
+      box-shadow: 0.125rem 0.188rem 0.313rem rgba(0, 0, 0, 0.2);
+      border-radius: 0.188rem;
+      border: 0.063rem solid silver;
+      background: white;
+      font-size: 90%;
+      font-family: monospace;
+      max-height: 20em;
+      overflow-y: auto;
+    }
+
+    .CodeMirror-hint {
+      margin: 0;
+      padding: 0 0.25rem;
+      border-radius: 0.125rem;
+      white-space: pre;
+      color: black;
+      cursor: pointer;
+    }
+
+    li.CodeMirror-hint-active {
+      background: #0088ff;
+      color: white;
+    }
+  `;
+});
+StyledCodeEditor.defaultProps = defaultThemeProp;
 //# sourceMappingURL=ExpressionBuilder.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExpressionBuilder.styles.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, StyledButton, StyledText } from '@pega/cosmos-react-core';\nimport StyledTextArea from '@pega/cosmos-react-core/lib/components/TextArea/TextArea.styles';\nimport { StyledFormField } from '@pega/cosmos-react-core/lib/components/FormField/FormField';\n\nimport { ExpressionItemProps } from './ExpressionBuilder.types';\n\nexport const StyledExpressionSummary = styled.div(({ theme }) => {\n  return css`\n    padding-block: ${theme.base.spacing};\n    padding-inline: calc(0.5 * ${theme.base.spacing});\n  `;\n});\n\nStyledExpressionSummary.defaultProps = defaultThemeProp;\n\nexport const StyledExpressionList = styled.ul`\n  overflow-y: auto;\n  flex-grow: 1;\n  list-style: none;\n`;\n\nexport const StyledExpressionBuilder = styled.div(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['primary-background']};\n    min-height: calc(30 * ${theme.base.spacing});\n    max-height: 100%;\n    max-width: calc(2 * ${theme.base['content-width'].lg} + 4 * ${theme.base.spacing});\n    min-width: calc(${theme.base['content-width'].lg} + 4 * ${theme.base.spacing});\n\n    ${StyledTextArea} {\n      flex-grow: 1;\n    }\n  `;\n});\n\nStyledExpressionBuilder.defaultProps = defaultThemeProp;\n\nexport const StyledExpressionEditor = styled.div(() => {\n  return css`\n    ${StyledFormField} {\n      flex-grow: 1;\n    }\n  `;\n});\n\nexport const StyledParamsGroup = styled.div(({ theme }) => {\n  return css`\n    margin-block-start: calc(2 * ${theme.base.spacing});\n\n    ${StyledText} {\n      margin-block-end: ${theme.base.spacing};\n    }\n  `;\n});\n\nStyledParamsGroup.defaultProps = defaultThemeProp;\n\nexport const StyledInputParamsGroup = styled(StyledParamsGroup)(({ theme }) => {\n  return css`\n    max-width: ${theme.base['content-width'].lg};\n  `;\n});\n\nStyledInputParamsGroup.defaultProps = defaultThemeProp;\n\nexport const StyledExpressionDetails = styled.div``;\n\nStyledExpressionDetails.defaultProps = defaultThemeProp;\n\nexport const StyledExpandCollapseContent = styled.div(({ theme }) => {\n  return css`\n    padding-inline: calc(2 * ${theme.base.spacing});\n    padding-block-end: calc(2 * ${theme.base.spacing});\n    ${StyledButton} {\n      align-self: flex-end;\n    }\n  `;\n});\n\nStyledExpandCollapseContent.defaultProps = defaultThemeProp;\n\nexport const StyledExpressionItem = styled.li<{\n  expanded: ExpressionItemProps['expanded'];\n}>(({ theme, expanded }) => {\n  return css`\n    list-style: none;\n    background-color: ${theme.base.palette['primary-background']};\n    ${expanded &&\n    css`\n      background-color: ${theme.base.palette['secondary-background']};\n    `}\n\n    :not(:last-child) {\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n\n    ${StyledExpressionDetails} {\n      padding-block-end: calc(2 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledExpressionItem.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"ExpressionBuilder.styles.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// cSpell:words vscrollbar hscrollbar\nimport styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  StyledButton,\n  StyledLabel,\n  StyledText,\n  Text\n} from '@pega/cosmos-react-core';\nimport StyledTextArea from '@pega/cosmos-react-core/lib/components/TextArea/TextArea.styles';\n\nimport { ExpressionItemProps } from './ExpressionBuilder.types';\n\nexport const StyledPrimaryText = styled(Text)`\n  word-break: break-word;\n`;\n\nexport const StyledExpressionSummary = styled.div(({ theme }) => {\n  return css`\n    padding-block: ${theme.base.spacing};\n    padding-inline: calc(0.5 * ${theme.base.spacing});\n  `;\n});\n\nStyledExpressionSummary.defaultProps = defaultThemeProp;\n\nexport const StyledExpressionList = styled.ul`\n  overflow-y: auto;\n  flex-grow: 1;\n  list-style: none;\n`;\n\nexport const StyledExpressionBuilder = styled.div(({ theme }) => {\n  return css`\n    position: relative;\n    background-color: ${theme.base.palette['primary-background']};\n    min-height: calc(30 * ${theme.base.spacing});\n    max-height: 100%;\n    max-width: calc(2 * ${theme.base['content-width'].lg} + 4 * ${theme.base.spacing});\n    min-width: calc(${theme.base['content-width'].lg} + 4 * ${theme.base.spacing});\n\n    ${StyledTextArea} {\n      flex-grow: 1;\n    }\n  `;\n});\n\nStyledExpressionBuilder.defaultProps = defaultThemeProp;\n\nexport const StyledParamsGroup = styled.div(({ theme }) => {\n  return css`\n    margin-block-start: calc(2 * ${theme.base.spacing});\n\n    ${StyledText} {\n      margin-block-end: ${theme.base.spacing};\n    }\n  `;\n});\n\nStyledParamsGroup.defaultProps = defaultThemeProp;\n\nexport const StyledInputParamsGroup = styled(StyledParamsGroup)(({ theme }) => {\n  return css`\n    max-width: ${theme.base['content-width'].lg};\n  `;\n});\n\nStyledInputParamsGroup.defaultProps = defaultThemeProp;\n\nexport const StyledExpressionDetails = styled.div``;\n\nStyledExpressionDetails.defaultProps = defaultThemeProp;\n\nexport const StyledExpandCollapseContent = styled.div(({ theme }) => {\n  return css`\n    padding-inline: calc(2 * ${theme.base.spacing});\n    padding-block-end: calc(2 * ${theme.base.spacing});\n    ${StyledButton} {\n      align-self: flex-end;\n    }\n  `;\n});\n\nStyledExpandCollapseContent.defaultProps = defaultThemeProp;\n\nexport const StyledExpressionItem = styled.li<{\n  expanded: ExpressionItemProps['expanded'];\n}>(({ theme, expanded }) => {\n  return css`\n    list-style: none;\n    background-color: ${theme.base.palette['primary-background']};\n    ${expanded &&\n    css`\n      background-color: ${theme.base.palette['secondary-background']};\n    `}\n\n    :not(:last-child) {\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n\n    ${StyledExpressionDetails} {\n      padding-block-end: calc(2 * ${theme.base.spacing});\n    }\n\n    ${StyledLabel} {\n      margin-inline-end: calc(0.5 * ${theme.base.spacing});\n      color: ${theme.base.palette['foreground-color']};\n    }\n  `;\n});\n\nStyledExpressionItem.defaultProps = defaultThemeProp;\n\nexport const StyledCodeEditor = styled.div(({ theme }) => {\n  return css`\n    /* PADDING */\n\n    .CodeMirror-lines {\n      cursor: text;\n      min-height: 0.063rem; /* prevents collapsing before first draw */\n      padding: 0.25rem 0; /* Vertical padding around content */\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 ${theme.base.palette['border-line']};\n      border-right: none;\n      width: 0;\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-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      height: 18.75rem;\n      direction: ltr;\n      position: absolute;\n      background-color: ${theme.base.palette['background-color']};\n      color: ${theme.base.palette['foreground-color']};\n      max-height: 98%;\n      max-width: 49%;\n      border: 0.0625rem solid ${theme.base.palette['border-line']};\n      border-radius: calc(0.5 * ${theme.base['border-radius']});\n    }\n    .cm-ex-properties {\n      color: ${theme.base.palette.success};\n    }\n    .cm-ex-functions {\n      color: ${theme.base.palette.warn};\n    }\n    .CodeMirror-hints {\n      position: absolute;\n      z-index: 10;\n      overflow: hidden;\n      list-style: none;\n      margin: 0;\n      padding: 0.125rem;\n      -webkit-box-shadow: 0.125rem 0.188rem 0.313rem rgba(0, 0, 0, 0.2);\n      -moz-box-shadow: 0.125rem 0.188rem 0.313rem rgba(0, 0, 0, 0.2);\n      box-shadow: 0.125rem 0.188rem 0.313rem rgba(0, 0, 0, 0.2);\n      border-radius: 0.188rem;\n      border: 0.063rem solid silver;\n      background: white;\n      font-size: 90%;\n      font-family: monospace;\n      max-height: 20em;\n      overflow-y: auto;\n    }\n\n    .CodeMirror-hint {\n      margin: 0;\n      padding: 0 0.25rem;\n      border-radius: 0.125rem;\n      white-space: pre;\n      color: black;\n      cursor: pointer;\n    }\n\n    li.CodeMirror-hint-active {\n      background: #0088ff;\n      color: white;\n    }\n  `;\n});\n\nStyledCodeEditor.defaultProps = defaultThemeProp;\n"]}

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

@@ -1,5 +1,6 @@
 import { ComponentType, Ref } from 'react';
-import { BaseProps, EmptyStateProps, OmitStrict, SearchInputProps, TextAreaProps, FieldValueListProps } from '@pega/cosmos-react-core';
+import { ShowHintOptions, EditorConfiguration } from 'codemirror';
+import { BaseProps, EmptyStateProps, OmitStrict, SearchInputProps, TextAreaProps, FieldValueListProps, MenuProps } from '@pega/cosmos-react-core';
 export interface ExpressionItemProps {
     /** Id of the item */
     id: string;
@@ -17,6 +18,11 @@ export interface ExpressionItemProps {
     expanded?: boolean;
     /** Expression details to show in expanded view */
     details?: ExpressionDetailsProps;
+    /** Matched field to be shown in expression item collapsed mode during search */
+    matchedField?: {
+        name: string;
+        value: string;
+    };
 }
 export interface ExpressionListProps extends BaseProps {
     ref?: Ref<HTMLDivElement>;
@@ -39,6 +45,11 @@ export interface HandleValue {
     /** Returns the expression value */
     getExpression: () => string;
 }
+export declare type AutoCompleteTriggerType = '@' | '.';
+export declare type SuggestionsType = {
+    label: string;
+    value: string;
+};
 export interface ExpressionBuilderProps extends BaseProps {
     ref?: Ref<HTMLDivElement>;
     /** Expression items list */
@@ -46,13 +57,19 @@ export interface ExpressionBuilderProps extends BaseProps {
         onItemAdd: (id: ExpressionItemProps['id'], addExpression: (expression: string) => void) => void;
     };
     /** Search input props */
-    search: Pick<Required<SearchInputProps>, 'filters' | 'onFilterChange' | 'onSearchChange' | 'value'> & Pick<SearchInputProps, 'defaultFilter'>;
-    /** Default expression to set in the text area */
+    search: Pick<Required<SearchInputProps>, 'filters' | 'onFilterChange' | 'onSearchChange' | 'value'> & Pick<SearchInputProps, 'defaultFilter'> & Pick<MenuProps, 'accent'>;
+    /** Default expression to set in the code editor */
     defaultValue?: string;
     /** Compiled error message */
     errors?: TextAreaProps['info'];
     /** Imperative handle */
     handle?: Ref<HandleValue>;
+    /** Fetches suggestion list for suggestions popover */
+    fetchSuggestions?: (autoCompleteTrigger: AutoCompleteTriggerType) => Promise<SuggestionsType[]>;
+    /** characters which triggers suggestions */
+    autoCompleteTriggers?: AutoCompleteTriggerType[];
+    /** Code editor configuration props */
+    editorConfigProps?: EditorConfiguration;
 }
 export interface InputParams<P> {
     id: string;
@@ -69,4 +86,17 @@ export interface ExpressionDetailsProps extends BaseProps {
     /** Ref to the component */
     ref?: Ref<HTMLElement>;
 }
+export declare type EditorState = {
+    getValue: () => string | undefined;
+    insertText: (text: string) => void;
+};
+export interface CodeEditorProps extends OmitStrict<ExpressionBuilderProps, 'list' | 'search'> {
+    ref?: Ref<HTMLDivElement>;
+    codeEditorHandle: Ref<EditorState>;
+    /** Default expression to set in the code editor */
+    defaultValue?: string;
+}
+export interface EditorHintOptions extends ShowHintOptions {
+    suggestions?: SuggestionsType[];
+}
 //# sourceMappingURL=ExpressionBuilder.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExpressionBuilder.types.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ExpressionBuilder.types.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.types.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"ExpressionBuilder.types.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentType, Ref } from 'react';\n\nimport {\n  BaseProps,\n  EmptyStateProps,\n  OmitStrict,\n  SearchInputProps,\n  TextAreaProps,\n  FieldValueListProps\n} from '@pega/cosmos-react-core';\n\nexport interface ExpressionItemProps {\n  /** Id of the item */\n  id: string;\n  /** Item name to be displayed as rule name */\n  primary: string;\n  /** Type of expression item. Eg: Decision, When, Automation etc. */\n  type: string;\n  /** Callback for add event */\n  onAdd: (id: ExpressionItemProps['id']) => void;\n  /** Callback for expand event */\n  onExpand?: (id: ExpressionItemProps['id']) => void;\n  /** Callback for collapse event */\n  onCollapse?: (id: ExpressionItemProps['id']) => void;\n  /** Show the expanded details */\n  expanded?: boolean;\n  /** Expression details to show in expanded view */\n  details?: ExpressionDetailsProps;\n}\n\nexport interface ExpressionListProps extends BaseProps {\n  ref?: Ref<HTMLDivElement>;\n  /** Expression builder items */\n  items?: OmitStrict<ExpressionItemProps, 'onAdd' | 'onExpand' | 'onCollapse' | 'details'>[];\n  /** Callback for item add */\n  onItemAdd: ExpressionItemProps['onAdd'];\n  /** Callback for item expand */\n  onItemExpand?: ExpressionItemProps['onExpand'];\n  /** Callback for item collapse */\n  onItemCollapse?: ExpressionItemProps['onCollapse'];\n  /** No items */\n  emptyText?: EmptyStateProps['message'];\n  /** Expanded items data */\n  details: {\n    [id: string]: ExpressionDetailsProps;\n  };\n}\n\nexport interface HandleValue {\n  /** Returns the expression value */\n  getExpression: () => string;\n}\n\nexport interface ExpressionBuilderProps extends BaseProps {\n  ref?: Ref<HTMLDivElement>;\n  /** Expression items list */\n  list: OmitStrict<ExpressionListProps, 'ref' | 'onItemAdd'> & {\n    onItemAdd: (id: ExpressionItemProps['id'], addExpression: (expression: string) => void) => void;\n  };\n  /** Search input props */\n  search: Pick<\n    Required<SearchInputProps>,\n    'filters' | 'onFilterChange' | 'onSearchChange' | 'value'\n  > &\n    Pick<SearchInputProps, 'defaultFilter'>;\n\n  /** Default expression to set in the text area */\n  defaultValue?: string;\n  /** Compiled error message */\n  errors?: TextAreaProps['info'];\n  /** Imperative handle */\n  handle?: Ref<HandleValue>;\n}\n\nexport interface InputParams<P> {\n  id: string;\n  renderer: ComponentType<P>;\n  rendererProps: P;\n}\n\nexport interface ExpressionDetailsProps extends BaseProps {\n  /** Primary details of the expression */\n  primary: Required<FieldValueListProps['fields']>;\n  /** Output params of the expression */\n  outputParams?: Required<FieldValueListProps['fields']>;\n  /** Input params of the expression */\n  inputParams?: InputParams<any>[];\n  /** Ref to the component */\n  ref?: Ref<HTMLElement>;\n}\n"]}
+{"version":3,"file":"ExpressionBuilder.types.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentType, Ref } from 'react';\nimport { ShowHintOptions, EditorConfiguration } from 'codemirror';\n\nimport {\n  BaseProps,\n  EmptyStateProps,\n  OmitStrict,\n  SearchInputProps,\n  TextAreaProps,\n  FieldValueListProps,\n  MenuProps\n} from '@pega/cosmos-react-core';\n\nexport interface ExpressionItemProps {\n  /** Id of the item */\n  id: string;\n  /** Item name to be displayed as rule name */\n  primary: string;\n  /** Type of expression item. Eg: Decision, When, Automation etc. */\n  type: string;\n  /** Callback for add event */\n  onAdd: (id: ExpressionItemProps['id']) => void;\n  /** Callback for expand event */\n  onExpand?: (id: ExpressionItemProps['id']) => void;\n  /** Callback for collapse event */\n  onCollapse?: (id: ExpressionItemProps['id']) => void;\n  /** Show the expanded details */\n  expanded?: boolean;\n  /** Expression details to show in expanded view */\n  details?: ExpressionDetailsProps;\n  /** Matched field to be shown in expression item collapsed mode during search */\n  matchedField?: { name: string; value: string };\n}\n\nexport interface ExpressionListProps extends BaseProps {\n  ref?: Ref<HTMLDivElement>;\n  /** Expression builder items */\n  items?: OmitStrict<ExpressionItemProps, 'onAdd' | 'onExpand' | 'onCollapse' | 'details'>[];\n  /** Callback for item add */\n  onItemAdd: ExpressionItemProps['onAdd'];\n  /** Callback for item expand */\n  onItemExpand?: ExpressionItemProps['onExpand'];\n  /** Callback for item collapse */\n  onItemCollapse?: ExpressionItemProps['onCollapse'];\n  /** No items */\n  emptyText?: EmptyStateProps['message'];\n  /** Expanded items data */\n  details: {\n    [id: string]: ExpressionDetailsProps;\n  };\n}\n\nexport interface HandleValue {\n  /** Returns the expression value */\n  getExpression: () => string;\n}\n\nexport type AutoCompleteTriggerType = '@' | '.';\n\nexport type SuggestionsType = { label: string; value: string };\n\nexport interface ExpressionBuilderProps extends BaseProps {\n  ref?: Ref<HTMLDivElement>;\n  /** Expression items list */\n  list: OmitStrict<ExpressionListProps, 'ref' | 'onItemAdd'> & {\n    onItemAdd: (id: ExpressionItemProps['id'], addExpression: (expression: string) => void) => void;\n  };\n  /** Search input props */\n  search: Pick<\n    Required<SearchInputProps>,\n    'filters' | 'onFilterChange' | 'onSearchChange' | 'value'\n  > &\n    Pick<SearchInputProps, 'defaultFilter'> &\n    Pick<MenuProps, 'accent'>;\n\n  /** Default expression to set in the code editor */\n  defaultValue?: string;\n  /** Compiled error message */\n  errors?: TextAreaProps['info'];\n  /** Imperative handle */\n  handle?: Ref<HandleValue>;\n  /** Fetches suggestion list for suggestions popover */\n  fetchSuggestions?: (autoCompleteTrigger: AutoCompleteTriggerType) => Promise<SuggestionsType[]>;\n  /** characters which triggers suggestions */\n  autoCompleteTriggers?: AutoCompleteTriggerType[];\n  /** Code editor configuration props */\n  editorConfigProps?: EditorConfiguration;\n}\n\nexport interface InputParams<P> {\n  id: string;\n  renderer: ComponentType<P>;\n  rendererProps: P;\n}\n\nexport interface ExpressionDetailsProps extends BaseProps {\n  /** Primary details of the expression */\n  primary: Required<FieldValueListProps['fields']>;\n  /** Output params of the expression */\n  outputParams?: Required<FieldValueListProps['fields']>;\n  /** Input params of the expression */\n  inputParams?: InputParams<any>[];\n  /** Ref to the component */\n  ref?: Ref<HTMLElement>;\n}\n\nexport type EditorState = {\n  getValue: () => string | undefined;\n  insertText: (text: string) => void;\n};\n\nexport interface CodeEditorProps extends OmitStrict<ExpressionBuilderProps, 'list' | 'search'> {\n  ref?: Ref<HTMLDivElement>;\n  codeEditorHandle: Ref<EditorState>;\n  /** Default expression to set in the code editor */\n  defaultValue?: string;\n}\n\nexport interface EditorHintOptions extends ShowHintOptions {\n  suggestions?: SuggestionsType[];\n}\n"]}

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { MenuProps } from '@pega/cosmos-react-core';
+declare const ExpressionBuilderContext: import("react").Context<{
+    accent: MenuProps['accent'];
+}>;
+export default ExpressionBuilderContext;
+//# sourceMappingURL=ExpressionBuilderContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpressionBuilderContext.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilderContext.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,QAAA,MAAM,wBAAwB;YAA2B,SAAS,CAAC,QAAQ,CAAC;EAE1E,CAAC;AAEH,eAAe,wBAAwB,CAAC"}

package/lib/components/ExpressionBuilder/ExpressionBuilderContext.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpressionBuilderContext.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilderContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,MAAM,wBAAwB,GAAG,aAAa,CAAkC;IAC9E,MAAM,EAAE,SAAS;CAClB,CAAC,CAAC;AAEH,eAAe,wBAAwB,CAAC","sourcesContent":["import { createContext } from 'react';\n\nimport { MenuProps } from '@pega/cosmos-react-core';\n\nconst ExpressionBuilderContext = createContext<{ accent: MenuProps['accent'] }>({\n  accent: undefined\n});\n\nexport default ExpressionBuilderContext;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ExpressionItem.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAEnD,OAAO,EAIL,YAAY,EAMb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAUhE,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CA8EzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ExpressionItem.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAE/D,OAAO,EAIL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAYhE,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAwGzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/ExpressionBuilder/ExpressionItem.js

@@ -1,18 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { Button, ExpandCollapse, Flex, Icon, registerIcon, Text, useDirection, useI18n } from '@pega/cosmos-react-core';
+import { useContext, useMemo } from 'react';
+import { Button, ExpandCollapse, Flex, Icon, Mark, registerIcon, replaceMatchWithElement, StyledLabel, Text, useDirection, useI18n } from '@pega/cosmos-react-core';
 import * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';
 import * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';
-import { StyledExpandCollapseContent, StyledExpressionSummary, StyledExpressionItem } from './ExpressionBuilder.styles';
+import { StyledPrimaryText, StyledExpandCollapseContent, StyledExpressionSummary, StyledExpressionItem } from './ExpressionBuilder.styles';
 import ExpressionDetails from './ExpressionDetails';
+import ExpressionBuilderContext from './ExpressionBuilderContext';
 registerIcon(caretLeftIcon, caretRightIcon);
-const ExpressionItem = ({ id, primary, type, onAdd, onExpand, onCollapse, details, expanded = false, ...restProps }) => {
+const ExpressionItem = ({ id, primary, type, onAdd, onExpand, onCollapse, details, matchedField, expanded = false, ...restProps }) => {
     const { end: caretDirection } = useDirection();
     const t = useI18n();
+    const { accent } = useContext(ExpressionBuilderContext);
+    const accentedText = (text) => {
+        let accentedValue;
+        if (accent) {
+            const accentRegex = typeof accent === 'function' ? accent(text) : accent;
+            const accentedArr = replaceMatchWithElement(text, accentRegex, str => {
+                return _jsx(Mark, { children: str });
+            });
+            if (accentedArr.length > 1)
+                accentedValue = accentedArr;
+            return accentedValue;
+        }
+        return null;
+    };
     const caretIcon = useMemo(() => {
         return expanded ? 'caret-down' : `caret-${caretDirection}`;
     }, [expanded, caretDirection]);
-    return (_jsxs(StyledExpressionItem, { expanded: expanded, children: [_jsxs(Flex, { ...restProps, as: StyledExpressionSummary, id: id, container: { gap: 1, alignItems: 'center' }, children: [_jsx(Button, { icon: true, variant: 'simple', onClick: onCollapse || onExpand
+    const accentedPrimary = accentedText(primary);
+    return (_jsxs(StyledExpressionItem, { expanded: expanded, children: [_jsxs(Flex, { ...restProps, as: StyledExpressionSummary, id: id, container: { gap: 1, alignItems: 'start' }, children: [_jsx(Button, { icon: true, variant: 'simple', onClick: onCollapse || onExpand
                             ? () => {
                                 if (expanded) {
                                     onCollapse?.(id);
@@ -21,7 +37,7 @@ const ExpressionItem = ({ id, primary, type, onAdd, onExpand, onCollapse, detail
                                     onExpand?.(id);
                                 }
                             }
-                            : undefined, "aria-label": `${type}: ${primary}`, "aria-expanded": expanded, label: expanded ? t('collapse') : t('expand'), children: _jsx(Icon, { name: caretIcon }) }), _jsxs(Flex, { container: { alignItems: 'start', direction: 'column' }, item: { grow: 1 }, children: [_jsx(Text, { variant: 'primary', children: primary }), _jsx(Text, { variant: 'secondary', children: type })] }), !expanded && (_jsx(Button, { icon: true, variant: 'simple', onClick: () => onAdd(id), "aria-label": t('add_noun', [`${type}: ${primary}`]), label: t('add'), children: _jsx(Icon, { name: 'plus' }) }))] }), _jsx(ExpandCollapse, { collapsed: !expanded, children: _jsxs(Flex, { as: StyledExpandCollapseContent, container: { direction: 'column' }, children: [details && _jsx(ExpressionDetails, { ...details }), _jsx(Button, { variant: 'primary', onClick: () => onAdd(id), "aria-label": t('add_noun', [`${type}: ${primary}`]), children: t('add') })] }) })] }));
+                            : undefined, "aria-label": `${type}: ${primary}`, "aria-expanded": expanded, label: expanded ? t('collapse') : t('expand'), children: _jsx(Icon, { name: caretIcon }) }), _jsxs(Flex, { container: { alignItems: 'start', direction: 'column' }, item: { grow: 1 }, children: [_jsx(StyledPrimaryText, { variant: 'primary', children: accentedPrimary || primary }), !accentedPrimary && matchedField && !expanded ? (_jsxs("div", { children: [_jsxs(StyledLabel, { as: 'span', children: [matchedField.name, ":"] }), accentedText(matchedField.value) || matchedField.value] })) : (_jsx(Text, { variant: 'secondary', children: type }))] }), !expanded && (_jsx(Button, { icon: true, variant: 'simple', onClick: () => onAdd(id), "aria-label": t('add_noun', [`${type}: ${primary}`]), label: t('add'), children: _jsx(Icon, { name: 'plus' }) }))] }), _jsx(ExpandCollapse, { collapsed: !expanded, children: _jsxs(Flex, { as: StyledExpandCollapseContent, container: { direction: 'column' }, children: [details && _jsx(ExpressionDetails, { ...details }), _jsx(Button, { variant: 'primary', onClick: () => onAdd(id), "aria-label": t('add_noun', [`${type}: ${primary}`]), children: t('add') })] }) })] }));
 };
 export default ExpressionItem;
 //# sourceMappingURL=ExpressionItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExpressionItem.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useMemo } from 'react';\n\nimport {\n  Button,\n  ExpandCollapse,\n  Flex,\n  ForwardProps,\n  Icon,\n  registerIcon,\n  Text,\n  useDirection,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\n\nimport { ExpressionItemProps } from './ExpressionBuilder.types';\nimport {\n  StyledExpandCollapseContent,\n  StyledExpressionSummary,\n  StyledExpressionItem\n} from './ExpressionBuilder.styles';\nimport ExpressionDetails from './ExpressionDetails';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nconst ExpressionItem: FunctionComponent<ExpressionItemProps & ForwardProps> = ({\n  id,\n  primary,\n  type,\n  onAdd,\n  onExpand,\n  onCollapse,\n  details,\n  expanded = false,\n  ...restProps\n}) => {\n  const { end: caretDirection } = useDirection();\n  const t = useI18n();\n\n  const caretIcon = useMemo(() => {\n    return expanded ? 'caret-down' : `caret-${caretDirection}`;\n  }, [expanded, caretDirection]);\n\n  return (\n    <StyledExpressionItem expanded={expanded}>\n      <Flex\n        {...restProps}\n        as={StyledExpressionSummary}\n        id={id}\n        container={{ gap: 1, alignItems: 'center' }}\n      >\n        <Button\n          icon\n          variant='simple'\n          onClick={\n            onCollapse || onExpand\n              ? () => {\n                  if (expanded) {\n                    onCollapse?.(id);\n                  } else {\n                    onExpand?.(id);\n                  }\n                }\n              : undefined\n          }\n          aria-label={`${type}: ${primary}`}\n          aria-expanded={expanded}\n          label={expanded ? t('collapse') : t('expand')}\n        >\n          <Icon name={caretIcon} />\n        </Button>\n\n        <Flex container={{ alignItems: 'start', direction: 'column' }} item={{ grow: 1 }}>\n          <Text variant='primary'>{primary}</Text>\n          <Text variant='secondary'>{type}</Text>\n        </Flex>\n\n        {!expanded && (\n          <Button\n            icon\n            variant='simple'\n            onClick={() => onAdd(id)}\n            aria-label={t('add_noun', [`${type}: ${primary}`])}\n            label={t('add')}\n          >\n            <Icon name='plus' />\n          </Button>\n        )}\n      </Flex>\n      <ExpandCollapse collapsed={!expanded}>\n        <Flex as={StyledExpandCollapseContent} container={{ direction: 'column' }}>\n          {details && <ExpressionDetails {...details} />}\n          <Button\n            variant='primary'\n            onClick={() => onAdd(id)}\n            aria-label={t('add_noun', [`${type}: ${primary}`])}\n          >\n            {t('add')}\n          </Button>\n        </Flex>\n      </ExpandCollapse>\n    </StyledExpressionItem>\n  );\n};\n\nexport default ExpressionItem;\n"]}
+{"version":3,"file":"ExpressionItem.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useContext, useMemo } from 'react';\n\nimport {\n  Button,\n  ExpandCollapse,\n  Flex,\n  ForwardProps,\n  Icon,\n  Mark,\n  registerIcon,\n  replaceMatchWithElement,\n  StyledLabel,\n  Text,\n  useDirection,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\n\nimport { ExpressionItemProps } from './ExpressionBuilder.types';\nimport {\n  StyledPrimaryText,\n  StyledExpandCollapseContent,\n  StyledExpressionSummary,\n  StyledExpressionItem\n} from './ExpressionBuilder.styles';\nimport ExpressionDetails from './ExpressionDetails';\nimport ExpressionBuilderContext from './ExpressionBuilderContext';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nconst ExpressionItem: FunctionComponent<ExpressionItemProps & ForwardProps> = ({\n  id,\n  primary,\n  type,\n  onAdd,\n  onExpand,\n  onCollapse,\n  details,\n  matchedField,\n  expanded = false,\n  ...restProps\n}) => {\n  const { end: caretDirection } = useDirection();\n  const t = useI18n();\n\n  const { accent } = useContext(ExpressionBuilderContext);\n\n  const accentedText = (text: string) => {\n    let accentedValue;\n    if (accent) {\n      const accentRegex = typeof accent === 'function' ? accent(text) : accent;\n      const accentedArr = replaceMatchWithElement(text, accentRegex, str => {\n        return <Mark>{str}</Mark>;\n      });\n\n      if (accentedArr.length > 1) accentedValue = accentedArr;\n      return accentedValue;\n    }\n    return null;\n  };\n\n  const caretIcon = useMemo(() => {\n    return expanded ? 'caret-down' : `caret-${caretDirection}`;\n  }, [expanded, caretDirection]);\n\n  const accentedPrimary = accentedText(primary);\n\n  return (\n    <StyledExpressionItem expanded={expanded}>\n      <Flex\n        {...restProps}\n        as={StyledExpressionSummary}\n        id={id}\n        container={{ gap: 1, alignItems: 'start' }}\n      >\n        <Button\n          icon\n          variant='simple'\n          onClick={\n            onCollapse || onExpand\n              ? () => {\n                  if (expanded) {\n                    onCollapse?.(id);\n                  } else {\n                    onExpand?.(id);\n                  }\n                }\n              : undefined\n          }\n          aria-label={`${type}: ${primary}`}\n          aria-expanded={expanded}\n          label={expanded ? t('collapse') : t('expand')}\n        >\n          <Icon name={caretIcon} />\n        </Button>\n\n        <Flex container={{ alignItems: 'start', direction: 'column' }} item={{ grow: 1 }}>\n          <StyledPrimaryText variant='primary'>{accentedPrimary || primary}</StyledPrimaryText>\n          {!accentedPrimary && matchedField && !expanded ? (\n            <div>\n              <StyledLabel as='span'>{matchedField.name}:</StyledLabel>\n              {accentedText(matchedField.value) || matchedField.value}\n            </div>\n          ) : (\n            <Text variant='secondary'>{type}</Text>\n          )}\n        </Flex>\n\n        {!expanded && (\n          <Button\n            icon\n            variant='simple'\n            onClick={() => onAdd(id)}\n            aria-label={t('add_noun', [`${type}: ${primary}`])}\n            label={t('add')}\n          >\n            <Icon name='plus' />\n          </Button>\n        )}\n      </Flex>\n      <ExpandCollapse collapsed={!expanded}>\n        <Flex as={StyledExpandCollapseContent} container={{ direction: 'column' }}>\n          {details && <ExpressionDetails {...details} />}\n          <Button\n            variant='primary'\n            onClick={() => onAdd(id)}\n            aria-label={t('add_noun', [`${type}: ${primary}`])}\n          >\n            {t('add')}\n          </Button>\n        </Flex>\n      </ExpandCollapse>\n    </StyledExpressionItem>\n  );\n};\n\nexport default ExpressionItem;\n"]}

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

@@ -1,6 +1,7 @@
 export { default } from './ExpressionBuilder';
-export { ExpressionListProps, ExpressionItemProps, ExpressionBuilderProps, HandleValue, InputParams } from './ExpressionBuilder.types';
+export { ExpressionListProps, ExpressionItemProps, ExpressionBuilderProps, HandleValue, InputParams, EditorState } from './ExpressionBuilder.types';
 export { default as ExpressionItem } from './ExpressionItem';
 export { default as ExpressionList } from './ExpressionList';
 export { default as ExpressionDetails } from './ExpressionDetails';
+export { default as CodeEditor } from './CodeEditor/CodeEditor';
 //# sourceMappingURL=index.d.ts.map

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,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"}
+{"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,EACX,WAAW,EACZ,MAAM,2BAA2B,CAAC;AACnC,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

@@ -2,4 +2,5 @@ export { default } from './ExpressionBuilder';
 export { default as ExpressionItem } from './ExpressionItem';
 export { default as ExpressionList } from './ExpressionList';
 export { default as ExpressionDetails } from './ExpressionDetails';
+export { default as CodeEditor } from './CodeEditor/CodeEditor';
 //# sourceMappingURL=index.js.map

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;AAQ9C,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","sourcesContent":["export { default } from './ExpressionBuilder';\nexport {\n  ExpressionListProps,\n  ExpressionItemProps,\n  ExpressionBuilderProps,\n  HandleValue,\n  InputParams\n} from './ExpressionBuilder.types';\nexport { default as ExpressionItem } from './ExpressionItem';\nexport { default as ExpressionList } from './ExpressionList';\nexport { default as ExpressionDetails } from './ExpressionDetails';\n"]}
+{"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  EditorState\n} from './ExpressionBuilder.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-build",
-  "version": "3.0.0-dev.27.1",
+  "version": "3.0.0-dev.27.2",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,15 +20,18 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "3.0.0-dev.27.1",
-    "@pega/cosmos-react-dnd": "3.0.0-dev.27.1",
+    "@pega/cosmos-react-core": "3.0.0-dev.27.2",
+    "@pega/cosmos-react-dnd": "3.0.0-dev.27.2",
+    "@types/codemirror": "^5.60.5",
     "@types/dagre": "^0.7.46",
     "@types/react": "^16.14.24 || ^17.0.38",
     "@types/react-dom": "^16.9.14 || ^17.0.11",
     "@types/styled-components": "^5.1.7",
+    "codemirror": "^5.54.0",
     "dagre": "^0.8.5",
     "polished": "^4.1.0",
     "react": "^16.14.0 || ^17.0.0",
+    "react-codemirror2": "^7.2.1",
     "react-dom": "^16.14.0 || ^17.0.0",
     "styled-components": "^5.2.0",
     "tinymce": "^6.0.3"