@pega/cosmos-react-build 5.0.0-dev.4.9 → 5.0.0-dev.6.0

package/lib/components/DynamicContentEditor/PegaCustomElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PegaCustomElement.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/PegaCustomElement.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,yBAAyB,4MAYpC,CAAC;AAEH,eAAO,MAAM,0BAA0B,QAAS,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQhE,CAAC"}

package/lib/components/DynamicContentEditor/PegaCustomElement.js

@@ -0,0 +1,23 @@
+export const pegaReferenceElementStyle = `pega-reference {
+  color:#076bc9;
+  cursor:pointer;
+}
+pega-reference:hover{
+  text-decoration:underline;
+}
+pega-reference::before{
+  content: '['
+}
+pega-reference::after{
+  content: ']'
+}`;
+export const createPegaReferenceElement = (win) => {
+    return class PegaReferenceElement extends win.HTMLElement {
+        connectedCallback() {
+            const template = document.createElement('template');
+            const temp = document.importNode(template.content, true);
+            this.append(temp);
+        }
+    };
+};
+//# sourceMappingURL=PegaCustomElement.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PegaCustomElement.js","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/PegaCustomElement.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,yBAAyB,GAAG;;;;;;;;;;;;EAYvC,CAAC;AAEH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,GAAsB,EAAE,EAAE;IACnE,OAAO,MAAM,oBAAqB,SAAQ,GAAG,CAAC,WAAW;QACvD,iBAAiB;YACf,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YACpD,MAAM,IAAI,GAAG,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;YACzD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QACpB,CAAC;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["export const pegaReferenceElementStyle = `pega-reference {\n  color:#076bc9;\n  cursor:pointer;\n}\npega-reference:hover{\n  text-decoration:underline;\n}\npega-reference::before{\n  content: '['\n}\npega-reference::after{\n  content: ']'\n}`;\n\nexport const createPegaReferenceElement = (win: typeof globalThis) => {\n  return class PegaReferenceElement extends win.HTMLElement {\n    connectedCallback() {\n      const template = document.createElement('template');\n      const temp = document.importNode(template.content, true);\n      this.append(temp);\n    }\n  };\n};\n"]}

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

@@ -0,0 +1,3 @@
+export { default } from './DynamicContentEditor';
+export type { DynamicContentEditorProps, ItemType } from './DynamicContentEditor.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,YAAY,EAAE,yBAAyB,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC"}

package/lib/components/DynamicContentEditor/index.js

@@ -0,0 +1,2 @@
+export { default } from './DynamicContentEditor';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export { default } from './DynamicContentEditor';\nexport type { DynamicContentEditorProps, ItemType } from './DynamicContentEditor.types';\n"]}

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

@@ -0,0 +1,8 @@
+import type { FunctionComponent } from 'react';
+import 'codemirror/addon/edit/closebrackets';
+import 'codemirror/addon/hint/show-hint.js';
+import type { ForwardProps } from '@pega/cosmos-react-core';
+import type { CodeEditorProps } from './CodeEditor.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":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAIhE,OAAO,qCAAqC,CAAC;AAC7C,OAAO,oCAAoC,CAAC;AAG5C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAG5D,OAAO,KAAK,EAEV,eAAe,EAGhB,MAAM,oBAAoB,CAAC;AA0E5B,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAsJjE,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,176 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 { StyledFormFieldInfo } from '@pega/cosmos-react-core/lib/components/FormField/FormField';
+import { StyledCodeEditor } from './CodeEditor.styles';
+import getCodeSuggestions from './getCodeSuggestions';
+defineMode('expression', () => {
+    const tokens = [
+        // 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' },
+        // Below regex is used to identify the spaces
+        { token: / /, style: 'ex-space' }
+    ];
+    return {
+        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
+            for (const element of tokens) {
+                const match = stream.match(element.token, false);
+                if (match) {
+                    if (stream.pos === stream.start) {
+                        stream.next();
+                    }
+                    return element.style;
+                }
+            }
+            stream.next();
+            return null;
+        }
+    };
+});
+const defaultConfigOptions = {
+    lineWrapping: true,
+    smartIndent: true,
+    autoCloseBrackets: true,
+    extraKeys: { Tab: false, 'Shift-Tab': false }
+};
+const CodeEditor = forwardRef(function CodeEditor({ fetchSuggestions, autoCompleteTriggers, editorConfigProps, codeEditorHandle, defaultValue = '', loading = false, readOnly, errors, onChange, ...props }, ref) {
+    const [value, setCode] = useState(defaultValue);
+    const [suggestions, setSuggestions] = useState([]);
+    const [codeMirror, setCodeMirror] = useState(null);
+    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) => {
+            if (codeMirror) {
+                if (codeMirror.getSelection()) {
+                    codeMirror.replaceSelection(text);
+                }
+                else {
+                    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,
+            loading,
+            triggerCharacterCursorPos: suggestionTrigger?.cursorPosition
+        };
+        showHint(codeEditor, getCodeSuggestions, hintOptions);
+    };
+    const onBeforeChange = async (editor, _data, textvalue) => {
+        setCode(textvalue);
+        onChange?.(textvalue);
+        const currentCursor = editor.getCursor();
+        const currentCharacter = editor
+            .getTokenAt(currentCursor)
+            .string.trim();
+        let newSuggestions = [];
+        if (autoCompleteTriggers?.includes(currentCharacter) && fetchSuggestions) {
+            setSuggestionTrigger({
+                character: currentCharacter,
+                cursorPosition: currentCursor
+            });
+            newSuggestions = [
+                ...(await fetchSuggestions(currentCharacter, {
+                    line: currentCursor.line,
+                    ch: currentCursor.ch
+                }))
+            ];
+            if (mounted.current) {
+                setSuggestions(newSuggestions);
+            }
+        }
+    };
+    useEffect(() => {
+        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 {
+            codeMirror?.closeHint();
+            showPopover(false);
+        }
+    }, [suggestions, loading]);
+    useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+    return (_jsxs(StyledCodeEditor, { container: {
+            direction: 'column',
+            justify: 'between'
+        }, item: {
+            grow: 1
+        }, 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 })] }));
+});
+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 { forwardRef, useRef, useState, useEffect, useImperativeHandle } from 'react';\nimport type { FunctionComponent, PropsWithoutRef } from 'react';\nimport { Controlled as ReactCodeMirror } from 'react-codemirror2';\nimport { showHint, defineMode } from 'codemirror';\nimport type { Editor, Position, EditorChange, EditorConfiguration } from 'codemirror';\nimport 'codemirror/addon/edit/closebrackets';\nimport 'codemirror/addon/hint/show-hint.js';\n\nimport { useConsolidatedRef, useElement } from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\nimport { StyledFormFieldInfo } from '@pega/cosmos-react-core/lib/components/FormField/FormField';\n\nimport type {\n  AutoCompleteTriggerChar,\n  CodeEditorProps,\n  EditorState,\n  SuggestionType\n} from './CodeEditor.types';\nimport { StyledCodeEditor } from './CodeEditor.styles';\nimport getCodeSuggestions from './getCodeSuggestions';\n\ndefineMode('expression', () => {\n  const tokens = [\n    // Below regex is used to identify the context\n    { token: /\\w+@/, style: 'ex-context' },\n    // Below regex is used to identify the RuleType\n    { token: /\\w+:/, style: 'ex-context' },\n    // Below regex is used to identify the RuleName\n    { token: /\\w+[(]/, style: 'ex-ruleName' },\n    // Below regex is used to identify the delimeters\n    { token: /[:.(),]/, style: 'ex-delimeter' },\n    // Below regex is used to identify the operators\n    { token: /[-+\\\\/*=<>@]+/, style: 'ex-operator' },\n    // Below regex is used to identify the spaces\n    { token: / /, style: 'ex-space' }\n  ];\n\n  return {\n    startState() {\n      return { inString: false };\n    },\n    token(stream, state) {\n      // Used to identify the constants in the expression\n      const nextChar = stream.peek();\n      if (!state.inString && (nextChar === \"'\" || nextChar === '\"')) {\n        stream.next(); // Skip quote\n        state.inString = true; // Update state\n      }\n\n      if (state.inString) {\n        if (nextChar && stream.skipTo(nextChar)) {\n          // Quote found on this line\n          stream.next(); // Skip quote\n          state.inString = false; // Clear flag\n        } else {\n          stream.skipToEnd(); // Rest of line is string\n        }\n        return nextChar === '\"' ? 'ex-constant' : 'ex-context'; // Token style\n      }\n\n      if (stream.peek() === '.') {\n        stream.next();\n        if (stream.match(/.\\w+\\(/)) return 'ex-delimeter';\n      }\n\n      // Used to match the regex in the expression\n      for (const element of tokens) {\n        const match = stream.match(element.token, false);\n        if (match) {\n          if (stream.pos === stream.start) {\n            stream.next();\n          }\n          return element.style;\n        }\n      }\n      stream.next();\n      return null;\n    }\n  };\n});\n\nconst defaultConfigOptions: Pick<\n  EditorConfiguration,\n  'lineWrapping' | 'smartIndent' | 'autoCloseBrackets' | 'extraKeys'\n> = {\n  lineWrapping: true,\n  smartIndent: true,\n  autoCloseBrackets: true,\n  extraKeys: { Tab: false, 'Shift-Tab': false }\n};\n\nconst CodeEditor: FunctionComponent<CodeEditorProps & ForwardProps> = forwardRef(\n  function CodeEditor(\n    {\n      fetchSuggestions,\n      autoCompleteTriggers,\n      editorConfigProps,\n      codeEditorHandle,\n      defaultValue = '',\n      loading = false,\n      readOnly,\n      errors,\n      onChange,\n      ...props\n    }: PropsWithoutRef<CodeEditorProps>,\n    ref: CodeEditorProps['ref']\n  ) {\n    const [value, setCode] = useState<string>(defaultValue);\n    const [suggestions, setSuggestions] = useState<SuggestionType[]>([]);\n    const [codeMirror, setCodeMirror] = useState<Editor | null>(null);\n    const [codeEditorContainer, setCodeEditorContainer] = useElement<HTMLDivElement>();\n    const codeEditorConsolidatedRef = useConsolidatedRef(setCodeEditorContainer, ref);\n    const [suggestionTrigger, setSuggestionTrigger] = useState<{\n      character: AutoCompleteTriggerChar;\n      cursorPosition: Position;\n    } | null>(null);\n    const [popover, showPopover] = useState(false);\n    const mounted = useRef(false);\n\n    useImperativeHandle<any, EditorState>(\n      codeEditorHandle,\n      () => ({\n        insertText: (text: string) => {\n          if (codeMirror) {\n            if (codeMirror.getSelection()) {\n              codeMirror.replaceSelection(text);\n            } else {\n              const cur: Position = codeMirror.getCursor();\n              codeMirror.replaceRange(text, cur);\n            }\n          }\n        },\n        getValue: () => {\n          return codeMirror?.getValue();\n        }\n      }),\n      [codeMirror]\n    );\n\n    const autoComplete = (codeEditor: Editor) => {\n      const hintOptions = {\n        completeSingle: false,\n        completeOnSingleClick: true,\n        closeOnUnfocus: true,\n        suggestions,\n        container: codeEditorContainer,\n        loading,\n        triggerCharacterCursorPos: suggestionTrigger?.cursorPosition\n      };\n      showHint(codeEditor, getCodeSuggestions, hintOptions);\n    };\n\n    const onBeforeChange = async (editor: Editor, _data: EditorChange, textvalue: string) => {\n      setCode(textvalue);\n      onChange?.(textvalue);\n      const currentCursor = editor.getCursor();\n      const currentCharacter = editor\n        .getTokenAt(currentCursor)\n        .string.trim() as AutoCompleteTriggerChar;\n\n      let newSuggestions: SuggestionType[] = [];\n\n      if (autoCompleteTriggers?.includes(currentCharacter) && fetchSuggestions) {\n        setSuggestionTrigger({\n          character: currentCharacter,\n          cursorPosition: currentCursor\n        });\n\n        newSuggestions = [\n          ...(await fetchSuggestions(currentCharacter, {\n            line: currentCursor.line,\n            ch: currentCursor.ch\n          }))\n        ];\n        if (mounted.current) {\n          setSuggestions(newSuggestions);\n        }\n      }\n    };\n\n    useEffect(() => {\n      if (!popover) return;\n      const isSuggestionTriggerPresent =\n        suggestionTrigger &&\n        codeMirror\n          ?.getTokenAt(suggestionTrigger.cursorPosition)\n          .string.includes(suggestionTrigger.character);\n\n      if (!isSuggestionTriggerPresent) {\n        codeMirror?.closeHint();\n        showPopover(false);\n        setSuggestionTrigger(null);\n      }\n    }, [onBeforeChange]);\n\n    useEffect(() => {\n      if (codeMirror && (suggestionTrigger || loading)) {\n        autoComplete(codeMirror);\n        showPopover(true);\n      } else {\n        codeMirror?.closeHint();\n        showPopover(false);\n      }\n    }, [suggestions, loading]);\n\n    useEffect(() => {\n      mounted.current = true;\n      return () => {\n        mounted.current = false;\n      };\n    }, []);\n\n    return (\n      <StyledCodeEditor\n        container={{\n          direction: 'column',\n          justify: 'between'\n        }}\n        item={{\n          grow: 1\n        }}\n        ref={codeEditorConsolidatedRef}\n        errors={errors}\n        readOnly={readOnly}\n        isLoading={loading}\n        suggestions={suggestions}\n        {...props}\n      >\n        <ReactCodeMirror\n          value={value}\n          onBeforeChange={onBeforeChange}\n          options={{ ...defaultConfigOptions, ...editorConfigProps }}\n          editorDidMount={editor => {\n            editor.setSize('100%', '100%');\n            setCodeMirror(editor);\n          }}\n        />\n        {errors && <StyledFormFieldInfo status='error'>{errors}</StyledFormFieldInfo>}\n      </StyledCodeEditor>\n    );\n  }\n);\n\nexport default CodeEditor;\n"]}

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { 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

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