npm - @pega/cosmos-react-build - Versions diffs - 3.0.0-rc.3 → 3.0.0-rc.5 - Mend

@pega/cosmos-react-build 3.0.0-rc.3 → 3.0.0-rc.5

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

Files changed (67) hide show

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

	@@ -1 +1 @@
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;AAUf,OAAO,qCAAqC,CAAC;AAC7C,OAAO,oCAAoC,CAAC;AAE5C,OAAO,EAAkC,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGvF,OAAO,EAEL,eAAe,EAGhB,MAAM,oBAAoB,CAAC;~~AAuC5B~~,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,~~CA8HjE~~,CAAC;AAEF,eAAe,UAAU,CAAC"}
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;AAUf,OAAO,qCAAqC,CAAC;AAC7C,OAAO,oCAAoC,CAAC;AAE5C,OAAO,EAAkC,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGvF,OAAO,EAEL,eAAe,EAGhB,MAAM,oBAAoB,CAAC;AAyE5B,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAkKjE,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -11,23 +11,54 @@ import { StyledCodeEditor } from './CodeEditor.styles';
 import getCodeSuggestions from './getCodeSuggestions';
 defineMode('expression', () => {
     const tokens = [
-        {
-            token: /[a-zA-Z_$]*\.[\w$]+/,
-            style: 'ex-properties'
-        },
-        {
-            token: /(^@+)(\([\w.-]+:[\w.-]+\))*([\w.]+)(\s*)/,
-            style: 'ex-functions'
-        }
+        /* Below regex is used to identify the context  */
+        { token: /\w+@/, style: 'ex-context' },
+        /* Below regex is used to identify the RuleType   */
+        { token: /\w+:/, style: 'ex-context' },
+        /* Below regex is used to identify the RuleName  */
+        { token: /\w+[(]/, style: 'ex-ruleName' },
+        /* Below regex is used to identify the delimeters  */
+        { token: /[:.(),]/, style: 'ex-delimeter' },
+        /* Below regex is used to identify the operators  */
+        { token: /[-+\\/*=<>@]+/, style: 'ex-operator' }
     ];
     return {
-        token(stream) {
+        startState() {
+            return { inString: false };
+        },
+        token(stream, state) {
+            /* Used to identify the constants in the expression  */
+            const nextChar = stream.peek();
+            if (!state.inString && (nextChar === "'" || nextChar === '"')) {
+                stream.next(); // Skip quote
+                state.inString = true; // Update state
+            }
+            if (state.inString) {
+                if (nextChar && stream.skipTo(nextChar)) {
+                    // Quote found on this line
+                    stream.next(); // Skip quote
+                    state.inString = false; // Clear flag
+                }
+                else {
+                    stream.skipToEnd(); // Rest of line is string
+                }
+                return nextChar === '"' ? 'ex-constant' : 'ex-context'; // Token style
+            }
+            if (stream.peek() === '.') {
+                stream.next();
+                if (stream.match(/.\w+\(/))
+                    return 'ex-delimeter';
+            }
+            /* Used to match the regex in the expression  */
             // eslint-disable-next-line no-restricted-syntax
             for (const element of tokens) {
-                if (stream.match('#') || stream.match('//'))
-                    stream.skipToEnd();
-                else if (stream.match(element.token))
+                const match = stream.match(element.token, false);
+                if (match) {
+                    if (stream.pos === stream.start) {
+                        stream.next();
+                    }
                     return element.style;
+                }
             }
             stream.next();
             return null;
@@ -44,9 +75,10 @@ const CodeEditor = forwardRef(({ fetchSuggestions, autoCompleteTriggers, editorC
     const [value, setCode] = useState(defaultValue);
     const [suggestions, setSuggestions] = useState([]);
     const [codeMirror, setCodeMirror] = useState(null);
-    const [autoCompleteTrigger, setAutoCompleteTrigger] = useState('');
     const [codeEditorContainer, setCodeEditorContainer] = useElement();
     const codeEditorConsolidatedRef = useConsolidatedRef(setCodeEditorContainer, ref);
+    const [suggestionTrigger, setSuggestionTrigger] = useState(null);
+    const [popover, showPopover] = useState(false);
     const mounted = useRef(false);
     useImperativeHandle(codeEditorHandle, () => ({
         insertText: (text) => {
@@ -67,7 +99,7 @@ const CodeEditor = forwardRef(({ fetchSuggestions, autoCompleteTriggers, editorC
             suggestions,
             container: codeEditorContainer,
             loading,
-            autoCompleteTrigger
+            triggerCharacterCursorPos: suggestionTrigger?.cursorPosition
         };
         showHint(codeEditor, getCodeSuggestions, hintOptions);
     };
@@ -75,35 +107,62 @@ const CodeEditor = forwardRef(({ fetchSuggestions, autoCompleteTriggers, editorC
         setCode(textvalue);
         onChange?.(textvalue);
         const currentCursor = editor.getCursor();
-        const textTillCursorPos = editor.getValue().split('\n')[currentCursor.line];
-        let start = textTillCursorPos?.lastIndexOf(' ');
-        if (start === -1) {
-            start = 0;
-        }
-        const currentWord = textTillCursorPos.substring(start, currentCursor.ch);
-        /* Below regex is used to find the query token which is present before the triggering character
-            to send update list.  */
-        const regexp = /[\w$]*(\.+[\w$)(\][]*)+/g;
-        const tokenArray = [...currentWord.matchAll(regexp)];
-        const autoCompleteTriggerChar = editor.getTokenAt(currentCursor)
-            .string;
-        if (!codeMirror?.getTokenAt(codeMirror.getCursor()).string.includes(autoCompleteTrigger))
-            setSuggestions([]);
-        if (autoCompleteTriggers?.includes(autoCompleteTriggerChar) && fetchSuggestions) {
-            setAutoCompleteTrigger(autoCompleteTriggerChar);
-            const newSuggestions = [
-                ...(await fetchSuggestions(autoCompleteTriggerChar, tokenArray.length === 0 ? '' : tokenArray[tokenArray.length - 1][0]))
-            ];
-            if (mounted.current)
+        const currentCharacter = editor.getTokenAt(currentCursor).string;
+        let newSuggestions = [];
+        if (autoCompleteTriggers?.includes(currentCharacter) && fetchSuggestions) {
+            setSuggestionTrigger({
+                character: currentCharacter,
+                cursorPosition: currentCursor
+            });
+            /* Used to find the query token which is present before the triggering character
+              to get updated list.  */
+            const textTillCursorPos = editor.getValue().split('\n')[currentCursor.line];
+            let start = textTillCursorPos?.lastIndexOf(' ');
+            if (start === -1) {
+                start = 0;
+            }
+            const currentWord = textTillCursorPos.substring(start, currentCursor.ch);
+            let regexp;
+            if (currentCharacter === '.') {
+                regexp = /[\w$]*(\.+[\w$)[\](]*)+/g;
+            }
+            else {
+                regexp = /[\w@'-]*[@:]/g;
+            }
+            const tokenArray = [...currentWord.matchAll(regexp)];
+            let queryToken = '';
+            if (tokenArray.length > 0) {
+                const queryString = tokenArray[tokenArray.length - 1][0];
+                queryToken = queryString.substring(0, queryString.length - 1);
+            }
+            newSuggestions = [...(await fetchSuggestions(currentCharacter, queryToken))];
+            if (mounted.current) {
                 setSuggestions(newSuggestions);
+            }
         }
     };
     useEffect(() => {
-        if (codeMirror && ((suggestions.length > 0 && value.length > 0) || loading)) {
+        if (!popover)
+            return;
+        const isSuggestionTriggerPresent = suggestionTrigger &&
+            codeMirror
+                ?.getTokenAt(suggestionTrigger.cursorPosition)
+                .string.includes(suggestionTrigger.character);
+        if (!isSuggestionTriggerPresent) {
+            codeMirror?.closeHint();
+            showPopover(false);
+            setSuggestionTrigger(null);
+        }
+    }, [onBeforeChange]);
+    useEffect(() => {
+        if (codeMirror && (suggestionTrigger || loading)) {
             autoComplete(codeMirror);
+            showPopover(true);
         }
-        else
+        else {
             codeMirror?.closeHint();
+            showPopover(false);
+        }
     }, [suggestions, loading]);
     useEffect(() => {
         mounted.current = true;
@@ -116,7 +175,7 @@ const CodeEditor = forwardRef(({ fetchSuggestions, autoCompleteTriggers, editorC
             justify: 'between'
         }, item: {
             grow: 1
-        }, ref: codeEditorConsolidatedRef, errors: errors, readOnly: readOnly, isLoading: loading, ...props, children: [_jsx(ReactCodeMirror, { value: value, onBeforeChange: onBeforeChange, options: { ...defaultConfigOptions, ...editorConfigProps }, editorDidMount: editor => {
+        }, ref: codeEditorConsolidatedRef, errors: errors, readOnly: readOnly, isLoading: loading, suggestions: suggestions, ...props, children: [_jsx(ReactCodeMirror, { value: value, onBeforeChange: onBeforeChange, options: { ...defaultConfigOptions, ...editorConfigProps }, editorDidMount: editor => {
                     editor.setSize('100%', '100%');
                     setCodeMirror(editor);
                 } }), errors && _jsx(StyledFormFieldInfo, { status: 'error', children: errors })] }));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeEditor.js","sourceRoot":"","sources":["../../../../src/components/ExpressionBuilder/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["// cSpell:words unfocus\nimport {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n useRef,\n useState,\n useEffect,\n useImperativeHandle\n} from 'react';\nimport { Controlled as ReactCodeMirror } from 'react-codemirror2';\nimport {\n showHint,\n defineMode,\n Editor,\n Position,\n EditorChange,\n EditorConfiguration\n} from 'codemirror';\nimport 'codemirror/addon/edit/closebrackets';\nimport 'codemirror/addon/hint/show-hint.js';\n\nimport { useConsolidatedRef, useElement, ForwardProps } from '@pega/cosmos-react-core';\nimport { StyledFormFieldInfo } from '@pega/cosmos-react-core/lib/components/FormField/FormField';\n\nimport {\n AutoCompleteTriggerType,\n CodeEditorProps,\n EditorState,\n SuggestionsType\n} from './CodeEditor.types';\nimport { StyledCodeEditor } from './CodeEditor.styles';\nimport getCodeSuggestions from './getCodeSuggestions';\n\ndefineMode('expression', () => {\n const tokens = [\n {\n token: /[a-zA-Z_$]\\.[\\w$]+/,\n style: 'ex-properties'\n },\n {\n token: /(^@+)(\$[\\w.-]+:[\\w.-]+\$)([\\w.]+)(\\s)/,\n style: 'ex-functions'\n }\n ];\n\n return {\n token(stream) {\n // eslint-disable-next-line no-restricted-syntax\n for (const element of tokens) {\n if (stream.match('#') \|\| stream.match('//')) stream.skipToEnd();\n else if (stream.match(element.token)) return element.style;\n }\n stream.next();\n return null;\n }\n };\n});\n\nconst defaultConfigOptions: Pick<\n EditorConfiguration,\n 'lineWrapping' \| 'smartIndent' \| 'autoCloseBrackets' \| 'extraKeys'\n> = {\n lineWrapping: true,\n smartIndent: true,\n autoCloseBrackets: true,\n extraKeys: { Tab: false, 'Shift-Tab': false }\n};\n\nconst CodeEditor: FunctionComponent<CodeEditorProps & ForwardProps> = forwardRef(\n (\n {\n fetchSuggestions,\n autoCompleteTriggers,\n editorConfigProps,\n codeEditorHandle,\n defaultValue = '',\n loading = false,\n readOnly,\n errors,\n onChange,\n ...props\n }: PropsWithoutRef<CodeEditorProps>,\n ref: CodeEditorProps['ref']\n ) => {\n const [value, setCode] = useState<string>(defaultValue);\n const [suggestions, setSuggestions] = useState<SuggestionsType[]>([]);\n const [codeMirror, setCodeMirror] = useState<Editor \| null>(null);\n const [autoCompleteTrigger, setAutoCompleteTrigger] = useState('');\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 loading,\n autoCompleteTrigger\n };\n showHint(codeEditor, getCodeSuggestions, hintOptions);\n };\n\n const onBeforeChange = async (editor: Editor, _data: EditorChange, textvalue: string) => {\n setCode(textvalue);\n onChange?.(textvalue);\n const currentCursor = editor.getCursor();\n const textTillCursorPos = editor.getValue().split('\\n')[currentCursor.line];\n let start = textTillCursorPos?.lastIndexOf(' ');\n if (start === -1) {\n start = 0;\n }\n const currentWord = textTillCursorPos.substring(start, currentCursor.ch);\n / Below regex is used to find the query token which is present before the triggering character\n to send update list. /\n const regexp = /[\\w$](\\.+[\\w$)(\\][]*)+/g;\n const tokenArray = [...currentWord.matchAll(regexp)];\n const autoCompleteTriggerChar = editor.getTokenAt(currentCursor)\n .string as AutoCompleteTriggerType;\n\n if (!codeMirror?.getTokenAt(codeMirror.getCursor()).string.includes(autoCompleteTrigger))\n setSuggestions([]);\n\n if (autoCompleteTriggers?.includes(autoCompleteTriggerChar) && fetchSuggestions) {\n setAutoCompleteTrigger(autoCompleteTriggerChar);\n const newSuggestions = [\n ...(await fetchSuggestions(\n autoCompleteTriggerChar,\n tokenArray.length === 0 ? '' : tokenArray[tokenArray.length - 1][0]\n ))\n ];\n if (mounted.current) setSuggestions(newSuggestions);\n }\n };\n\n useEffect(() => {\n if (codeMirror && ((suggestions.length > 0 && value.length > 0) \|\| loading)) {\n autoComplete(codeMirror);\n } else codeMirror?.closeHint();\n }, [suggestions, loading]);\n\n useEffect(() => {\n mounted.current = true;\n return () => {\n mounted.current = false;\n };\n }, []);\n\n return (\n <StyledCodeEditor\n container={{\n direction: 'column',\n justify: 'between'\n }}\n item={{\n grow: 1\n }}\n ref={codeEditorConsolidatedRef}\n errors={errors}\n readOnly={readOnly}\n isLoading={loading}\n {...props}\n >\n <ReactCodeMirror\n value={value}\n onBeforeChange={onBeforeChange}\n options={{ ...defaultConfigOptions, ...editorConfigProps }}\n editorDidMount={editor => {\n editor.setSize('100%', '100%');\n setCodeMirror(editor);\n }}\n />\n {errors && <StyledFormFieldInfo status='error'>{errors}</StyledFormFieldInfo>}\n </StyledCodeEditor>\n );\n }\n);\n\nexport default CodeEditor;\n"]}
1	+ {"version":3,"file":"CodeEditor.js","sourceRoot":"","sources":["../../../../src/components/ExpressionBuilder/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["// cSpell:words unfocus\nimport {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n useRef,\n useState,\n useEffect,\n useImperativeHandle\n} from 'react';\nimport { Controlled as ReactCodeMirror } from 'react-codemirror2';\nimport {\n showHint,\n defineMode,\n Editor,\n Position,\n EditorChange,\n EditorConfiguration\n} from 'codemirror';\nimport 'codemirror/addon/edit/closebrackets';\nimport 'codemirror/addon/hint/show-hint.js';\n\nimport { useConsolidatedRef, useElement, ForwardProps } from '@pega/cosmos-react-core';\nimport { StyledFormFieldInfo } from '@pega/cosmos-react-core/lib/components/FormField/FormField';\n\nimport {\n AutoCompleteTriggerChar,\n CodeEditorProps,\n EditorState,\n SuggestionType\n} from './CodeEditor.types';\nimport { StyledCodeEditor } from './CodeEditor.styles';\nimport getCodeSuggestions from './getCodeSuggestions';\n\ndefineMode('expression', () => {\n const tokens = [\n /* Below regex is used to identify the context /\n { token: /\\w+@/, style: 'ex-context' },\n / Below regex is used to identify the RuleType /\n { token: /\\w+:/, style: 'ex-context' },\n / Below regex is used to identify the RuleName /\n { token: /\\w+[(]/, style: 'ex-ruleName' },\n / Below regex is used to identify the delimeters /\n { token: /[:.(),]/, style: 'ex-delimeter' },\n / Below regex is used to identify the operators /\n { token: /[-+\\\\/=<>@]+/, style: 'ex-operator' }\n ];\n\n return {\n startState() {\n return { inString: false };\n },\n token(stream, state) {\n /* Used to identify the constants in the expression /\n const nextChar = stream.peek();\n if (!state.inString && (nextChar === \"'\" \|\| nextChar === '\"')) {\n stream.next(); // Skip quote\n state.inString = true; // Update state\n }\n\n if (state.inString) {\n if (nextChar && stream.skipTo(nextChar)) {\n // Quote found on this line\n stream.next(); // Skip quote\n state.inString = false; // Clear flag\n } else {\n stream.skipToEnd(); // Rest of line is string\n }\n return nextChar === '\"' ? 'ex-constant' : 'ex-context'; // Token style\n }\n\n if (stream.peek() === '.') {\n stream.next();\n if (stream.match(/.\\w+\\(/)) return 'ex-delimeter';\n }\n\n / Used to match the regex in the expression /\n // eslint-disable-next-line no-restricted-syntax\n for (const element of tokens) {\n const match = stream.match(element.token, false);\n if (match) {\n if (stream.pos === stream.start) {\n stream.next();\n }\n return element.style;\n }\n }\n stream.next();\n return null;\n }\n };\n});\n\nconst defaultConfigOptions: Pick<\n EditorConfiguration,\n 'lineWrapping' \| 'smartIndent' \| 'autoCloseBrackets' \| 'extraKeys'\n> = {\n lineWrapping: true,\n smartIndent: true,\n autoCloseBrackets: true,\n extraKeys: { Tab: false, 'Shift-Tab': false }\n};\n\nconst CodeEditor: FunctionComponent<CodeEditorProps & ForwardProps> = forwardRef(\n (\n {\n fetchSuggestions,\n autoCompleteTriggers,\n editorConfigProps,\n codeEditorHandle,\n defaultValue = '',\n loading = false,\n readOnly,\n errors,\n onChange,\n ...props\n }: PropsWithoutRef<CodeEditorProps>,\n ref: CodeEditorProps['ref']\n ) => {\n const [value, setCode] = useState<string>(defaultValue);\n const [suggestions, setSuggestions] = useState<SuggestionType[]>([]);\n const [codeMirror, setCodeMirror] = useState<Editor \| null>(null);\n const [codeEditorContainer, setCodeEditorContainer] = useElement<HTMLDivElement>();\n const codeEditorConsolidatedRef = useConsolidatedRef(setCodeEditorContainer, ref);\n const [suggestionTrigger, setSuggestionTrigger] = useState<{\n character: AutoCompleteTriggerChar;\n cursorPosition: Position;\n } \| null>(null);\n const [popover, showPopover] = useState(false);\n const mounted = useRef(false);\n\n useImperativeHandle<any, EditorState>(\n codeEditorHandle,\n () => ({\n insertText: (text: string) => {\n if (codeMirror) {\n 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 loading,\n triggerCharacterCursorPos: suggestionTrigger?.cursorPosition\n };\n showHint(codeEditor, getCodeSuggestions, hintOptions);\n };\n\n const onBeforeChange = async (editor: Editor, _data: EditorChange, textvalue: string) => {\n setCode(textvalue);\n onChange?.(textvalue);\n const currentCursor = editor.getCursor();\n const currentCharacter = editor.getTokenAt(currentCursor).string as AutoCompleteTriggerChar;\n\n let newSuggestions: SuggestionType[] = [];\n\n if (autoCompleteTriggers?.includes(currentCharacter) && fetchSuggestions) {\n setSuggestionTrigger({\n character: currentCharacter,\n cursorPosition: currentCursor\n });\n\n / Used to find the query token which is present before the triggering character\n to get updated list. /\n const textTillCursorPos = editor.getValue().split('\\n')[currentCursor.line];\n let start = textTillCursorPos?.lastIndexOf(' ');\n if (start === -1) {\n start = 0;\n }\n const currentWord = textTillCursorPos.substring(start, currentCursor.ch);\n\n let regexp;\n if (currentCharacter === '.') {\n regexp = /[\\w$](\\.+[\\w$)[\\](])+/g;\n } else {\n regexp = /[\\w@'-][@:]/g;\n }\n\n const tokenArray = [...currentWord.matchAll(regexp)];\n let queryToken = '';\n if (tokenArray.length > 0) {\n const queryString = tokenArray[tokenArray.length - 1][0];\n queryToken = queryString.substring(0, queryString.length - 1);\n }\n\n newSuggestions = [...(await fetchSuggestions(currentCharacter, queryToken))];\n if (mounted.current) {\n setSuggestions(newSuggestions);\n }\n }\n };\n\n useEffect(() => {\n if (!popover) return;\n const isSuggestionTriggerPresent =\n suggestionTrigger &&\n codeMirror\n ?.getTokenAt(suggestionTrigger.cursorPosition)\n .string.includes(suggestionTrigger.character);\n\n if (!isSuggestionTriggerPresent) {\n codeMirror?.closeHint();\n showPopover(false);\n setSuggestionTrigger(null);\n }\n }, [onBeforeChange]);\n\n useEffect(() => {\n if (codeMirror && (suggestionTrigger \|\| loading)) {\n autoComplete(codeMirror);\n showPopover(true);\n } else {\n codeMirror?.closeHint();\n showPopover(false);\n }\n }, [suggestions, loading]);\n\n useEffect(() => {\n mounted.current = true;\n return () => {\n mounted.current = false;\n };\n }, []);\n\n return (\n <StyledCodeEditor\n container={{\n direction: 'column',\n justify: 'between'\n }}\n item={{\n grow: 1\n }}\n ref={codeEditorConsolidatedRef}\n errors={errors}\n readOnly={readOnly}\n isLoading={loading}\n suggestions={suggestions}\n {...props}\n >\n <ReactCodeMirror\n value={value}\n onBeforeChange={onBeforeChange}\n options={{ ...defaultConfigOptions, ...editorConfigProps }}\n editorDidMount={editor => {\n editor.setSize('100%', '100%');\n setCodeMirror(editor);\n }}\n />\n {errors && <StyledFormFieldInfo status='error'>{errors}</StyledFormFieldInfo>}\n </StyledCodeEditor>\n );\n }\n);\n\nexport default CodeEditor;\n"]}

package/lib/components/ExpressionBuilder/CodeEditor/CodeEditor.styles.d.ts CHANGED Viewed

@@ -1,8 +1,10 @@
 /// <reference types="react" />
+import { SuggestionType } from './CodeEditor.types';
 export declare const StyledLoading: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledCodeEditor: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").FlexProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {
     isLoading?: boolean | undefined;
     errors?: string | undefined;
     readOnly?: boolean | undefined;
+    suggestions: SuggestionType[];
 }, never>;
 //# sourceMappingURL=CodeEditor.styles.d.ts.map

package/lib/components/ExpressionBuilder/CodeEditor/CodeEditor.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeEditor.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ExpressionBuilder/CodeEditor/CodeEditor.styles.ts"],"names":[],"mappings":";AAOA,eAAO,MAAM,aAAa,yGAEzB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;~~SAihB5B~~,CAAC"}
1	+ {"version":3,"file":"CodeEditor.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ExpressionBuilder/CodeEditor/CodeEditor.styles.ts"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,eAAO,MAAM,aAAa,yGAEzB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;iBAId,cAAc,EAAE;SA4hB9B,CAAC"}

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

@@ -6,7 +6,7 @@ import { StyledFormField } from '@pega/cosmos-react-core/lib/components/FormFiel
 export const StyledLoading = styled.div `
   font-size: 1.5rem;
 `;
-export const StyledCodeEditor = styled(Flex)(({ theme: { base, components: { 'form-control': { ':read-only': { 'background-color': readOnlyBackgroundColor } }, 'form-field': { error: { 'status-color': errorBackground } } } }, errors, isLoading, readOnly }) => {
+export const StyledCodeEditor = styled(Flex)(({ theme: { base, components: { 'form-control': { ':read-only': { 'background-color': readOnlyBackgroundColor } }, 'form-field': { error: { 'status-color': errorBackground } } } }, errors, isLoading, suggestions, readOnly }) => {
     const activeColor = mix(0.85, base.palette['primary-background'], base.palette.interactive);
     const hoverColor = mix(0.95, base.palette['primary-background'], base.palette.interactive);
     const fontSizes = calculateFontSize(base['font-size'], base['font-scale']);
@@ -462,12 +462,24 @@ export const StyledCodeEditor = styled(Flex)(({ theme: { base, components: { 'fo
           background-color: ${readOnlyBackgroundColor};
         `}
       }
-      .cm-ex-properties {
-        color: ${base.palette.success};
+      .cm-ex-context {
+        color: ${base.palette['brand-primary']};
       }
-      .cm-ex-functions {
+      .cm-ex-operator {
         color: ${base.palette.warn};
+        font-weight: bold;
+      }
+      .cm-ex-ruleName {
+        color: ${base.palette.success};
       }
+      .cm-ex-delimeter {
+        color: ${base.palette['foreground-color']};
+      }
+      .cm-ex-constant {
+        color: ${base.palette.pending};
+      }
       .CodeMirror-hints {
         position: absolute;
         z-index: 10;
@@ -478,23 +490,23 @@ export const StyledCodeEditor = styled(Flex)(({ theme: { base, components: { 'fo
         border: 0.0625rem solid ${base.palette['border-line']};
         background-color: ${base.palette['primary-background']};
         font-size: ${fontSizes.s};
-        font-family: monospace;
-        max-height: 10em;
+        max-height: 12rem;
         overflow-y: auto;
         min-width: 8rem;
       }
       .CodeMirror-hint {
-        ${isLoading &&
+        ${(isLoading || suggestions?.length === 0) &&
         css `
           pointer-events: none;
         `}
-        min-height: ${base['hit-area']['compact-min']};
+        min-height: 1.2rem;
+        width: calc(1.5 * ${base['content-width'].xs});
         cursor: pointer;
         @media (pointer: coarse) {
-          min-height: ${base['hit-area']['compact-min']};
+          min-height: 1.2rem;
         }
-        line-height: ${base['hit-area']['compact-min']};
+        line-height: 1.2rem;
         &:focus-within {
           background-color: ${activeColor};
         }
@@ -507,6 +519,7 @@ export const StyledCodeEditor = styled(Flex)(({ theme: { base, components: { 'fo
       li.CodeMirror-hint-active {
         ${!isLoading &&
+        suggestions?.length > 0 &&
         css `
           background-color: ${activeColor};
         `}

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

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

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

@@ -1,10 +1,8 @@
 import { Ref } from 'react';
-import { ShowHintOptions, EditorConfiguration } from 'codemirror';
-export declare type AutoCompleteTriggerType = '@' | '.';
-export declare type SuggestionsType = {
-    label: string;
-    value: string;
-};
+import { ShowHintOptions, EditorConfiguration, Position } from 'codemirror';
+import { MenuItemProps } from '@pega/cosmos-react-core';
+export declare type AutoCompleteTriggerChar = '@' | '.' | ':';
+export declare type SuggestionType = Pick<MenuItemProps, 'primary' | 'secondary' | 'id'>;
 export interface EditorState {
     getValue: () => string | undefined;
     insertText: (text: string) => void;
@@ -17,9 +15,9 @@ export interface CodeEditorProps {
     /** Enable read only mode */
     readOnly?: boolean;
     /** Fetches suggestion list for suggestions popover */
-    fetchSuggestions?: (autoCompleteTrigger: AutoCompleteTriggerType, queryString: string) => Promise<SuggestionsType[]>;
+    fetchSuggestions?: (autoCompleteTrigger: AutoCompleteTriggerChar, queryString: string) => Promise<SuggestionType[]>;
     /** characters which triggers suggestions */
-    autoCompleteTriggers?: AutoCompleteTriggerType[];
+    autoCompleteTriggers?: AutoCompleteTriggerChar[];
     /** Code editor configuration props */
     editorConfigProps?: EditorConfiguration;
     /** To show loader for intellisense popover */
@@ -30,8 +28,8 @@ export interface CodeEditorProps {
     ref?: Ref<HTMLDivElement>;
 }
 export interface EditorHintOptions extends ShowHintOptions {
-    suggestions?: SuggestionsType[];
+    suggestions?: SuggestionType[];
     loading?: boolean;
-    autoCompleteTrigger?: AutoCompleteTriggerType;
+    triggerCharacterCursorPos?: Position;
 }
 //# sourceMappingURL=CodeEditor.types.d.ts.map

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

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

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

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

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

@@ -1,10 +1,10 @@
-import { Editor, Hint, Hints } from 'codemirror';
+import { Editor } from 'codemirror';
 import { EditorHintOptions } from './CodeEditor.types';
-declare const getCodeSuggestions: (codeMirror: Editor, { suggestions, loading, autoCompleteTrigger }: EditorHintOptions) => {
+declare const getCodeSuggestions: (codeMirror: Editor, { suggestions, loading, triggerCharacterCursorPos }: EditorHintOptions) => {
     list: {
         text: string;
         displayText: string;
-        render: (element: HTMLLIElement, _: Hints, listItem: Hint) => void;
+        render: (element: HTMLLIElement) => void;
     }[];
     from: import("codemirror").Position;
     to: import("codemirror").Position;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"getCodeSuggestions.d.ts","sourceRoot":"","sources":["../../../../src/components/ExpressionBuilder/CodeEditor/getCodeSuggestions.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAO,~~IAAI,EAAE,KAAK,EAAE,~~MAAM,YAAY,CAAC;~~AAItD~~,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAGvD,QAAA,MAAM,kBAAkB,eACV,MAAM,~~iDAC0C~~,iBAAiB~~;;;;0BA+BjD~~,aAAa,KAAK,~~KAAK,YAAY,~~IAAI;;;;~~CAkBpE~~,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
1	+ {"version":3,"file":"getCodeSuggestions.d.ts","sourceRoot":"","sources":["../../../../src/components/ExpressionBuilder/CodeEditor/getCodeSuggestions.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAO,MAAM,YAAY,CAAC;AAKzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAGvD,QAAA,MAAM,kBAAkB,eACV,MAAM,uDAQf,iBAAiB;;cASZ,MAAM;qBACC,MAAM;0BACD,aAAa,KAAK,IAAI;;;;CA8C3C,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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

@@ -1,15 +1,21 @@
+import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import ReactDOM from 'react-dom';
 import { Pos } from 'codemirror';
-import { Progress, Flex } from '@pega/cosmos-react-core';
+import { Progress, Flex, EmptyState } from '@pega/cosmos-react-core';
+import MenuItem from '@pega/cosmos-react-core/lib/components/Menu/MenuItem';
 import { StyledLoading } from './CodeEditor.styles';
-const getCodeSuggestions = (codeMirror, { suggestions = [], loading = false, autoCompleteTrigger }) => {
+const getCodeSuggestions = (codeMirror, { suggestions = [], loading = false, triggerCharacterCursorPos = {
+    ch: 0,
+    line: 0
+} }) => {
     const currentPosition = codeMirror.getCursor();
-    const word = codeMirror.getTokenAt(currentPosition);
-    const tokens = word.string.split(autoCompleteTrigger);
-    const prefixToken = tokens.slice(0, tokens.length - 1).join();
-    const filteredList = loading
-        ? [
+    const filterQuery = codeMirror
+        .getValue()
+        .split('\n')[triggerCharacterCursorPos.line]?.substring(triggerCharacterCursorPos.ch, currentPosition.ch);
+    let filteredList = [];
+    if (loading || suggestions.length === 0) {
+        filteredList = [
             {
                 text: '',
                 displayText: '',
@@ -17,29 +23,28 @@ const getCodeSuggestions = (codeMirror, { suggestions = [], loading = false, aut
                     ReactDOM.render(_jsx(Flex, { container: {
                             justify: 'center',
                             pad: 1
-                        }, children: _jsx(Progress, { variant: 'ring', placement: 'inline', visible: loading, as: StyledLoading }) }), element);
+                        }, children: loading ? (_jsx(Progress, { variant: 'ring', placement: 'inline', visible: loading, as: StyledLoading })) : (_jsx(EmptyState, {})) }), element);
                 }
             }
-        ]
-        : suggestions
+        ];
+    }
+    else {
+        filteredList = suggestions
             .map(hint => {
             return {
-                text: prefixToken.concat(hint.value),
-                displayText: hint.label,
-                render: (element, _, listItem) => {
-                    const itemDiv = document.createElement('div');
-                    const labelSpan = document.createElement('span');
-                    labelSpan.textContent = listItem.displayText;
-                    itemDiv.appendChild(labelSpan);
-                    element.appendChild(itemDiv);
+                text: hint.id,
+                displayText: hint.primary,
+                render: (element) => {
+                    ReactDOM.render(_createElement(MenuItem, { ...hint, key: hint.id, role: 'menuitem' }), element);
                 }
             };
         })
-            .filter(item => item.displayText.toLowerCase().startsWith(tokens[tokens.length - 1].toLowerCase()));
+            .filter(item => item.displayText.toLowerCase().startsWith(filterQuery.toLowerCase()));
+    }
     return {
         list: filteredList,
-        from: Pos(currentPosition.line, word.start + prefixToken.length),
-        to: Pos(currentPosition.line, word.end)
+        from: Pos(currentPosition.line, triggerCharacterCursorPos.ch - 1),
+        to: Pos(currentPosition.line, currentPosition.ch)
     };
 };
 export default getCodeSuggestions;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"getCodeSuggestions.js","sourceRoot":"","sources":["../../../../src/components/ExpressionBuilder/CodeEditor/getCodeSuggestions.tsx"],"names":[],"mappings":";AAAA,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,EAAU,GAAG,~~EAAe~~,MAAM,YAAY,CAAC;~~AAEtD~~,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;~~AAGzD~~,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,MAAM,kBAAkB,GAAG,CACzB,UAAkB,EAClB,~~EAAE~~,WAAW,GAAG,EAAE,~~EAAE~~,OAAO,GAAG,KAAK,EAAE,~~mBAAmB~~,~~EAAqB~~,~~EAC7E~~,EAAE;IACF,MAAM,eAAe,GAAG,UAAU,CAAC,SAAS,EAAE,CAAC;IAC/C,MAAM,~~IAAI~~,GAAG,UAAU,~~CAAC~~,~~UAAU~~,CAAC,~~eAAe~~,CAAC,~~CAAC;IACpD~~,~~MAAM~~,~~MAAM~~,~~GAAG,~~IAAI,CAAC,~~MAAM~~,~~CAAC~~,~~KAAK,~~CAAC,~~mBAAoB~~,CAAC,~~CAAC;IACvD~~,~~MAAM~~,~~WAAW~~,~~GAAG,MAAM,~~CAAC,~~KAAK~~,CAAC,CAAC,~~EAAE~~,~~MAAM~~,~~CAAC~~,~~MAAM~~,~~GAAG,~~CAAC,~~CAAC~~,~~CAAC~~,IAAI,~~EAAE~~,CAAC~~;IAC9D~~,MAAM,~~YAAY~~,~~GAAG~~,~~OAAO~~;~~QAC1B~~,~~CAAC~~,~~CAAC~~;~~YACE~~;gBACE,IAAI,EAAE,EAAE;gBACR,WAAW,EAAE,EAAE;gBACf,MAAM,EAAE,CAAC,OAAsB,EAAE,EAAE;oBACjC,QAAQ,CAAC,MAAM,CACb,KAAC,IAAI,IACH,SAAS,EAAE;4BACT,OAAO,EAAE,QAAQ;4BACjB,GAAG,EAAE,CAAC;yBACP,~~YAED~~,KAAC,QAAQ,IAAC,OAAO,EAAC,MAAM,EAAC,SAAS,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,aAAa,GAAI,~~GAC9E~~,EACP,OAAO,CACR,CAAC;gBACJ,CAAC;aACF;SACF~~;QACH~~,CAAC,~~CAAC~~,WAAW;~~aACR~~,GAAG,CAAC,IAAI,CAAC,EAAE;YACV,OAAO;gBACL,IAAI,EAAE,~~WAAW,CAAC,MAAM,CAAC,~~IAAI,CAAC,~~KAAK,CAAC~~;~~gBACpC~~,WAAW,EAAE,IAAI,CAAC,~~KAAK~~;~~gBACvB~~,MAAM,EAAE,CAAC,OAAsB,EAAE,~~CAAQ,~~EAAE~~,QAAc,EAAE,EAAE~~;~~oBAC3D~~,~~MAAM,OAAO,GAAG,~~QAAQ,CAAC,~~aAAa~~,CAAC,~~KAAK~~,~~CAAC~~,~~CAAC;oBAC9C~~,~~MAAM~~,~~SAAS~~,GAAG,~~QAAQ~~,~~CAAC~~,~~aAAa,~~CAAC,~~MAAM~~,~~CAAC~~,~~CAAC;oBACjD~~,~~SAAS~~,~~CAAC~~,~~WAAW,~~GAAG,~~QAAQ~~,~~CAAC,WAAY,CAAC;oBAC9C,~~OAAO,CAAC,~~WAAW,~~CAAC~~,SAAS,CAAC,CAAC~~;~~oBAC/B~~,~~OAAO,~~CAAC~~,WAAW,CAAC,OAAO,CAAC,CAAC~~;~~gBAC/B,CAAC;~~aACF,CAAC;QACJ,CAAC,CAAC;aACD,MAAM,CAAC,IAAI,CAAC,EAAE,~~CACb~~,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,~~MAAM~~,CAAC,~~MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,~~WAAW,EAAE,CAAC,~~CACnF~~,CAAC;~~IAER~~,OAAO;QACL,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,GAAG,CAAC,eAAe,CAAC,IAAI,EAAE,~~IAAI~~,CAAC,~~KAAK~~,GAAG,~~WAAW,~~CAAC,~~MAAM,~~CAAC;~~QAChE~~,EAAE,EAAE,GAAG,CAAC,eAAe,CAAC,IAAI,EAAE,~~IAAI~~,CAAC,~~GAAG~~,CAAC;~~KACxC~~,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import ReactDOM from 'react-dom';\nimport { Editor, Pos, ~~Hint, Hints~~ } from 'codemirror';\n\nimport { Progress, Flex } from '@pega/cosmos-react-core';\n\nimport { EditorHintOptions } from './CodeEditor.types';\nimport { StyledLoading } from './CodeEditor.styles';\n\nconst getCodeSuggestions = (\n codeMirror: Editor,\n { suggestions = [], loading = false, ~~autoCompleteTrigger~~ }: EditorHintOptions\n) => {\n const currentPosition = codeMirror.getCursor();\n const ~~word~~ = codeMirror.~~getTokenAt~~(currentPosition);\n ~~const~~ ~~tokens~~ = ~~word.~~string~~.split~~(~~autoCompleteTrigger!~~);\n ~~const~~ ~~prefixToken~~ = ~~tokens.slice~~(0, ~~tokens~~.length - 1)~~.join();\~~n ~~const~~ filteredList = ~~loading\n ?~~ [\n {\n text: '',\n displayText: '',\n render: (element: HTMLLIElement) => {\n ReactDOM.render(\n <Flex\n container={{\n justify: 'center',\n pad: 1\n }}\n >\n <Progress variant='ring' placement='inline' visible={loading} as={StyledLoading} />\n </Flex>,\n element\n );\n }\n }\n ]\n : suggestions\n .map(hint => {\n return {\n text: ~~prefixToken.concat(~~hint.~~value)~~,\n displayText: hint.~~label~~,\n render: (element: HTMLLIElement~~, _: Hints, listItem: Hint~~) => {\n ~~const~~ ~~itemDiv~~ = ~~document~~.~~createElement('div');\n const~~ ~~labelSpan~~ = ~~document.createElement(~~'~~span~~'~~);\n labelSpan.textContent~~ = ~~listItem.displayText!;\n itemDiv.appendChild(labelSpan);\n~~ element~~.appendChild(itemDiv~~);\n }\n };\n })\n .filter(item ~~=>\n~~ item.displayText.toLowerCase().startsWith(~~tokens[tokens~~.~~length - 1].~~toLowerCase())\n );\n\n return {\n list: filteredList,\n from: Pos(currentPosition.line, ~~word~~.~~start~~ + ~~prefixToken.length~~),\n to: Pos(currentPosition.line, ~~word~~.~~end~~)\n };\n};\n\nexport default getCodeSuggestions;\n"]}
1	+ {"version":3,"file":"getCodeSuggestions.js","sourceRoot":"","sources":["../../../../src/components/ExpressionBuilder/CodeEditor/getCodeSuggestions.tsx"],"names":[],"mappings":";;AAAA,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,EAAU,GAAG,EAAE,MAAM,YAAY,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,QAAQ,MAAM,sDAAsD,CAAC;AAG5E,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,MAAM,kBAAkB,GAAG,CACzB,UAAkB,EAClB,EACE,WAAW,GAAG,EAAE,EAChB,OAAO,GAAG,KAAK,EACf,yBAAyB,GAAG;IAC1B,EAAE,EAAE,CAAC;IACL,IAAI,EAAE,CAAC;CACR,EACiB,EACpB,EAAE;IACF,MAAM,eAAe,GAAG,UAAU,CAAC,SAAS,EAAE,CAAC;IAC/C,MAAM,WAAW,GAAG,UAAU;SAC3B,QAAQ,EAAE;SACV,KAAK,CAAC,IAAI,CAAC,CACX,yBAAyB,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,yBAAyB,CAAC,EAAE,EAAE,eAAe,CAAC,EAAE,CAAC,CAAC;IAEhG,IAAI,YAAY,GAIV,EAAE,CAAC;IAET,IAAI,OAAO,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE;QACvC,YAAY,GAAG;YACb;gBACE,IAAI,EAAE,EAAE;gBACR,WAAW,EAAE,EAAE;gBACf,MAAM,EAAE,CAAC,OAAsB,EAAE,EAAE;oBACjC,QAAQ,CAAC,MAAM,CACb,KAAC,IAAI,IACH,SAAS,EAAE;4BACT,OAAO,EAAE,QAAQ;4BACjB,GAAG,EAAE,CAAC;yBACP,YAEA,OAAO,CAAC,CAAC,CAAC,CACT,KAAC,QAAQ,IAAC,OAAO,EAAC,MAAM,EAAC,SAAS,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,aAAa,GAAI,CACpF,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,KAAG,CACf,GACI,EACP,OAAO,CACR,CAAC;gBACJ,CAAC;aACF;SACF,CAAC;KACH;SAAM;QACL,YAAY,GAAG,WAAW;aACvB,GAAG,CAAC,IAAI,CAAC,EAAE;YACV,OAAO;gBACL,IAAI,EAAE,IAAI,CAAC,EAAE;gBACb,WAAW,EAAE,IAAI,CAAC,OAAO;gBACzB,MAAM,EAAE,CAAC,OAAsB,EAAE,EAAE;oBACjC,QAAQ,CAAC,MAAM,CAAC,eAAC,QAAQ,OAAK,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAC,UAAU,GAAG,EAAE,OAAO,CAAC,CAAC;gBACjF,CAAC;aACF,CAAC;QACJ,CAAC,CAAC;aACD,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;KACzF;IAED,OAAO;QACL,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,GAAG,CAAC,eAAe,CAAC,IAAI,EAAE,yBAAyB,CAAC,EAAE,GAAG,CAAC,CAAC;QACjE,EAAE,EAAE,GAAG,CAAC,eAAe,CAAC,IAAI,EAAE,eAAe,CAAC,EAAE,CAAC;KAClD,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import ReactDOM from 'react-dom';\nimport { Editor, Pos } from 'codemirror';\n\nimport { Progress, Flex, EmptyState } from '@pega/cosmos-react-core';\nimport MenuItem from '@pega/cosmos-react-core/lib/components/Menu/MenuItem';\n\nimport { EditorHintOptions } from './CodeEditor.types';\nimport { StyledLoading } from './CodeEditor.styles';\n\nconst getCodeSuggestions = (\n codeMirror: Editor,\n {\n suggestions = [],\n loading = false,\n triggerCharacterCursorPos = {\n ch: 0,\n line: 0\n }\n }: EditorHintOptions\n) => {\n const currentPosition = codeMirror.getCursor();\n const filterQuery = codeMirror\n .getValue()\n .split('\\n')\n [triggerCharacterCursorPos.line]?.substring(triggerCharacterCursorPos.ch, currentPosition.ch);\n\n let filteredList: {\n text: string;\n displayText: string;\n render: (element: HTMLLIElement) => void;\n }[] = [];\n\n if (loading \|\| suggestions.length === 0) {\n filteredList = [\n {\n text: '',\n displayText: '',\n render: (element: HTMLLIElement) => {\n ReactDOM.render(\n <Flex\n container={{\n justify: 'center',\n pad: 1\n }}\n >\n {loading ? (\n <Progress variant='ring' placement='inline' visible={loading} as={StyledLoading} />\n ) : (\n <EmptyState />\n )}\n </Flex>,\n element\n );\n }\n }\n ];\n } else {\n filteredList = suggestions\n .map(hint => {\n return {\n text: hint.id,\n displayText: hint.primary,\n render: (element: HTMLLIElement) => {\n ReactDOM.render(<MenuItem {...hint} key={hint.id} role='menuitem' />, element);\n }\n };\n })\n .filter(item => item.displayText.toLowerCase().startsWith(filterQuery.toLowerCase()));\n }\n\n return {\n list: filteredList,\n from: Pos(currentPosition.line, triggerCharacterCursorPos.ch - 1),\n to: Pos(currentPosition.line, currentPosition.ch)\n };\n};\n\nexport default getCodeSuggestions;\n"]}