npm - @pega/cosmos-react-build - Versions diffs - 4.0.0-dev.9.1 → 4.0.0 - Mend

@pega/cosmos-react-build 4.0.0-dev.9.1 → 4.0.0

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

Files changed (164) hide show

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

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

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

	@@ -1 +1 @@
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,~~OAAO~~,EAAE,yBAAyB,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC"}
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.map CHANGED Viewed

	@@ -1 +1 @@
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 { DynamicContentEditorProps, ItemType } from './DynamicContentEditor.types';\n"]}
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.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;~~AA2E5B~~,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAsJjE,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;AA0E5B,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAsJjE,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// cSpell:words unfocus
+// cspell:words unfocus
 import { forwardRef, useRef, useState, useEffect, useImperativeHandle } from 'react';
 import { Controlled as ReactCodeMirror } from 'react-codemirror2';
 import { showHint, defineMode } from 'codemirror';
@@ -11,17 +11,17 @@ import { StyledCodeEditor } from './CodeEditor.styles';
 import getCodeSuggestions from './getCodeSuggestions';
 defineMode('expression', () => {
     const tokens = [
-        /* Below regex is used to identify the context  */
+        // Below regex is used to identify the context
         { token: /\w+@/, style: 'ex-context' },
-        /* Below regex is used to identify the RuleType   */
+        // Below regex is used to identify the RuleType
         { token: /\w+:/, style: 'ex-context' },
-        /* Below regex is used to identify the RuleName  */
+        // Below regex is used to identify the RuleName
         { token: /\w+[(]/, style: 'ex-ruleName' },
-        /* Below regex is used to identify the delimeters  */
+        // Below regex is used to identify the delimeters
         { token: /[:.(),]/, style: 'ex-delimeter' },
-        /* Below regex is used to identify the operators  */
+        // Below regex is used to identify the operators
         { token: /[-+\\/*=<>@]+/, style: 'ex-operator' },
-        /* Below regex is used to identify the spaces  */
+        // Below regex is used to identify the spaces
         { token: / /, style: 'ex-space' }
     ];
     return {
@@ -29,7 +29,7 @@ defineMode('expression', () => {
             return { inString: false };
         },
         token(stream, state) {
-            /* Used to identify the constants in the expression  */
+            // Used to identify the constants in the expression
             const nextChar = stream.peek();
             if (!state.inString && (nextChar === "'" || nextChar === '"')) {
                 stream.next(); // Skip quote
@@ -51,8 +51,7 @@ defineMode('expression', () => {
                 if (stream.match(/.\w+\(/))
                     return 'ex-delimeter';
             }
-            /* Used to match the regex in the expression  */
-            // eslint-disable-next-line no-restricted-syntax
+            // Used to match the regex in the expression
             for (const element of tokens) {
                 const match = stream.match(element.token, false);
                 if (match) {
@@ -73,7 +72,7 @@ const defaultConfigOptions = {
     autoCloseBrackets: true,
     extraKeys: { Tab: false, 'Shift-Tab': false }
 };
-const CodeEditor = forwardRef(({ fetchSuggestions, autoCompleteTriggers, editorConfigProps, codeEditorHandle, defaultValue = '', loading = false, readOnly, errors, onChange, ...props }, ref) => {
+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);

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 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 // eslint-disable-next-line no-restricted-syntax\n for (const element of tokens) {\n const match = stream.match(element.token, false);\n if (match) {\n if (stream.pos === stream.start) {\n stream.next();\n }\n return element.style;\n }\n }\n stream.next();\n return null;\n }\n };\n});\n\nconst defaultConfigOptions: Pick<\n EditorConfiguration,\n 'lineWrapping' \| 'smartIndent' \| 'autoCloseBrackets' \| 'extraKeys'\n> = {\n lineWrapping: true,\n smartIndent: true,\n autoCloseBrackets: true,\n extraKeys: { Tab: false, 'Shift-Tab': false }\n};\n\nconst CodeEditor: FunctionComponent<CodeEditorProps & ForwardProps> = forwardRef(\n (\n {\n fetchSuggestions,\n autoCompleteTriggers,\n editorConfigProps,\n codeEditorHandle,\n defaultValue = '',\n loading = false,\n readOnly,\n errors,\n onChange,\n ...props\n }: PropsWithoutRef<CodeEditorProps>,\n ref: CodeEditorProps['ref']\n ) => {\n const [value, setCode] = useState<string>(defaultValue);\n const [suggestions, setSuggestions] = useState<SuggestionType[]>([]);\n const [codeMirror, setCodeMirror] = useState<Editor \| null>(null);\n const [codeEditorContainer, setCodeEditorContainer] = useElement<HTMLDivElement>();\n const codeEditorConsolidatedRef = useConsolidatedRef(setCodeEditorContainer, ref);\n const [suggestionTrigger, setSuggestionTrigger] = useState<{\n character: AutoCompleteTriggerChar;\n cursorPosition: Position;\n } \| null>(null);\n const [popover, showPopover] = useState(false);\n const mounted = useRef(false);\n\n useImperativeHandle<any, EditorState>(\n codeEditorHandle,\n () => ({\n insertText: (text: string) => {\n if (codeMirror) {\n if (codeMirror.getSelection()) {\n codeMirror.replaceSelection(text);\n } else {\n const cur: Position = codeMirror.getCursor();\n codeMirror.replaceRange(text, cur);\n }\n }\n },\n getValue: () => {\n return codeMirror?.getValue();\n }\n }),\n [codeMirror]\n );\n\n const autoComplete = (codeEditor: Editor) => {\n const hintOptions = {\n completeSingle: false,\n completeOnSingleClick: true,\n closeOnUnfocus: true,\n suggestions,\n container: codeEditorContainer,\n loading,\n triggerCharacterCursorPos: suggestionTrigger?.cursorPosition\n };\n showHint(codeEditor, getCodeSuggestions, hintOptions);\n };\n\n const onBeforeChange = async (editor: Editor, _data: EditorChange, textvalue: string) => {\n setCode(textvalue);\n onChange?.(textvalue);\n const currentCursor = editor.getCursor();\n const currentCharacter = editor\n .getTokenAt(currentCursor)\n .string.trim() as AutoCompleteTriggerChar;\n\n let newSuggestions: SuggestionType[] = [];\n\n if (autoCompleteTriggers?.includes(currentCharacter) && fetchSuggestions) {\n setSuggestionTrigger({\n character: currentCharacter,\n cursorPosition: currentCursor\n });\n\n 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"]}
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 // 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.js CHANGED Viewed

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

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

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

@@ -1,13 +1,13 @@
 import { Ref } from 'react';
 import { ShowHintOptions, EditorConfiguration, Position } from 'codemirror';
 import { MenuItemProps } from '@pega/cosmos-react-core';
-export declare type AutoCompleteTriggerChar = '@' | '.' | ':';
-export declare type SuggestionType = Pick<MenuItemProps, 'primary' | 'secondary' | 'id'>;
+export type AutoCompleteTriggerChar = '@' | '.' | ':';
+export type SuggestionType = Pick<MenuItemProps, 'primary' | 'secondary' | 'id'>;
 export interface EditorState {
     getValue: () => string | undefined;
     insertText: (text: string) => void;
 }
-export declare type CursorPosition = Pick<Position, 'ch' | 'line'>;
+export type CursorPosition = Pick<Position, 'ch' | 'line'>;
 export interface CodeEditorProps {
     /** Default expression to set in the code editor */
     defaultValue?: string;

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,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,~~oBAAY~~,cAAc,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,MAAM,CAAC,CAAC;AAE3D,MAAM,WAAW,eAAe;IAC9B,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,CACjB,mBAAmB,EAAE,uBAAuB,EAC5C,cAAc,EAAE,cAAc,KAC3B,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;IAC/B,4CAA4C;IAC5C,oBAAoB,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACjD,sCAAsC;IACtC,iBAAiB,CAAC,EAAE,mBAAmB,CAAC;IACxC,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gBAAgB,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,WAAW,CAAC,EAAE,cAAc,EAAE,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB,CAAC,EAAE,QAAQ,CAAC;CACtC"}
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,MAAM,MAAM,uBAAuB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,WAAW,GAAG,IAAI,CAAC,CAAC;AAEjF,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IACnC,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,MAAM,CAAC,CAAC;AAE3D,MAAM,WAAW,eAAe;IAC9B,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,CACjB,mBAAmB,EAAE,uBAAuB,EAC5C,cAAc,EAAE,cAAc,KAC3B,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;IAC/B,4CAA4C;IAC5C,oBAAoB,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACjD,sCAAsC;IACtC,iBAAiB,CAAC,EAAE,mBAAmB,CAAC;IACxC,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gBAAgB,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,WAAW,CAAC,EAAE,cAAc,EAAE,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB,CAAC,EAAE,QAAQ,CAAC;CACtC"}

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

@@ -5,7 +5,7 @@ import ExpressionList from './ExpressionList';
 import { StyledExpressionBuilder } from './ExpressionBuilder.styles';
 import CodeEditor from './CodeEditor/CodeEditor';
 import ExpressionBuilderContext from './ExpressionBuilderContext';
-const ExpressionBuilder = forwardRef(({ list, search, errors, defaultValue, handle, fetchSuggestions, loading, readOnly, onChange, ...restProps }, ref) => {
+const ExpressionBuilder = forwardRef(function ExpressionBuilder({ list, search, errors, defaultValue, handle, fetchSuggestions, loading, readOnly, onChange, ...restProps }, ref) {
     const t = useI18n();
     const codeEditorHandle = useRef(null);
     const getExpression = () => {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpressionBuilder.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAGV,mBAAmB,EACnB,OAAO,EACP,MAAM,EACP,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,IAAI,EAEJ,WAAW,EACX,OAAO,EACP,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAIjC,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,wBAAwB,MAAM,4BAA4B,CAAC;AAElE,MAAM,iBAAiB,GAA6D,UAAU,CAC5F,~~CACE~~,EACE,IAAI,EACJ,MAAM,EACN,MAAM,EACN,YAAY,EACZ,MAAM,EACN,gBAAgB,EAChB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,GAAG,SAAS,EAC4B,EAC1C,GAAkC~~,EAClC,EAAE~~;~~IACF~~,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,gBAAgB,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAEnD,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,OAAO,gBAAgB,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IACpD,CAAC,CAAC;IAEF,mBAAmB,CACjB,MAAM,EACN,GAAG,EAAE,CAAC,CAAC;QACL,aAAa;KACd,CAAC,EACF,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,UAAkB,EAAE,EAAE;QAC3C,gBAAgB,CAAC,OAAO,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IACnD,CAAC,CAAC;IACF,MAAM,SAAS,GAAG,CAAC,EAA6B,EAAE,EAAE;QAClD,IAAI,CAAC,SAAS,CAAC,EAAE,EAAE,aAAa,CAAC,CAAC;IACpC,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,OAAO,CACtB,GAAG,EAAE,CAAC,CAAC;QACL,MAAM,EAAE,MAAM,CAAC,MAAM;KACtB,CAAC,EACF,CAAC,MAAM,CAAC,MAAM,CAAC,CAChB,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,EAAE,EAAE,uBAAuB,EAC3B,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,OAAO,EAAE,SAAS;YAClB,MAAM,EAAE,CAAC;YACT,GAAG,EAAE,CAAC;SACP,EACD,IAAI,EAAE;YACJ,IAAI,EAAE,CAAC;SACR,aAEA,CAAC,QAAQ,IAAI,CACZ,KAAC,kBAAkB,iBAAW,QAAQ,EAAC,IAAI,EAAC,QAAQ,YACjD,CAAC,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC,EAAE,CAAC,GAC/D,CACtB,EAEA,CAAC,QAAQ,IAAI,CACZ,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;oBACnB,OAAO,EAAE,SAAS;oBAClB,GAAG,EAAE,CAAC;iBACP,EACD,IAAI,EAAE;oBACJ,IAAI,EAAE,CAAC;oBACP,KAAK,EAAE,KAAK;iBACb,aAED,KAAC,WAAW,OAAK,MAAM,GAAI,EAC3B,KAAC,wBAAwB,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,YAChD,KAAC,cAAc,OAAK,IAAI,EAAE,SAAS,EAAE,SAAS,GAAI,GAChB,IAC/B,CACR,EAED,KAAC,IAAI,IACH,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;oBACnB,OAAO,EAAE,SAAS;iBACnB,EACD,IAAI,EAAE;oBACJ,IAAI,EAAE,CAAC;oBACP,KAAK,EAAE,KAAK;iBACb,YAED,KAAC,UAAU,IACT,gBAAgB,EAAE,gBAAgB,EAClC,gBAAgB,EAAE,gBAAgB,EAClC,oBAAoB,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,EACrC,iBAAiB,EAAE;wBACjB,IAAI,EAAE,YAAY;wBAClB,QAAQ;qBACT,EACD,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,gBACN,CAAC,CAAC,mBAAmB,CAAC,GAClC,GACG,IACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n useImperativeHandle,\n useMemo,\n useRef\n} from 'react';\n\nimport {\n Flex,\n ForwardProps,\n SearchInput,\n useI18n,\n VisuallyHiddenText\n} from '@pega/cosmos-react-core';\n\nimport { ExpressionItemProps, ExpressionBuilderProps } from './ExpressionBuilder.types';\nimport { EditorState } from './CodeEditor/CodeEditor.types';\nimport ExpressionList from './ExpressionList';\nimport { StyledExpressionBuilder } from './ExpressionBuilder.styles';\nimport CodeEditor from './CodeEditor/CodeEditor';\nimport ExpressionBuilderContext from './ExpressionBuilderContext';\n\nconst ExpressionBuilder: FunctionComponent<ExpressionBuilderProps & ForwardProps> = forwardRef(\n (\n {\n list,\n search,\n errors,\n defaultValue,\n handle,\n fetchSuggestions,\n loading,\n readOnly,\n onChange,\n ...restProps\n }: PropsWithoutRef<ExpressionBuilderProps>,\n ref: ExpressionBuilderProps['ref']\n ) => {\n const t = useI18n();\n const codeEditorHandle = useRef<EditorState>(null);\n\n const getExpression = () => {\n return codeEditorHandle.current?.getValue() \|\| '';\n };\n\n useImperativeHandle(\n handle,\n () => ({\n getExpression\n }),\n [getExpression]\n );\n\n const addExpression = (expression: string) => {\n codeEditorHandle.current?.insertText(expression);\n };\n const onItemAdd = (id: ExpressionItemProps['id']) => {\n list.onItemAdd(id, addExpression);\n };\n\n const ctxValue = useMemo(\n () => ({\n accent: search.accent\n }),\n [search.accent]\n );\n\n return (\n <Flex\n {...restProps}\n as={StyledExpressionBuilder}\n ref={ref}\n container={{\n justify: 'between',\n colGap: 2,\n pad: 1\n }}\n item={{\n grow: 1\n }}\n >\n {!readOnly && (\n <VisuallyHiddenText aria-live='polite' role='status'>\n {t('results_count', [list.items?.length \|\| 0], { count: list.items?.length \|\| 0 })}\n </VisuallyHiddenText>\n )}\n {/* Column 1 /}\n {!readOnly && (\n <Flex\n container={{\n direction: 'column',\n justify: 'between',\n gap: 1\n }}\n item={{\n grow: 1,\n basis: '50%'\n }}\n >\n <SearchInput {...search} />\n <ExpressionBuilderContext.Provider value={ctxValue}>\n <ExpressionList {...list} onItemAdd={onItemAdd} />\n </ExpressionBuilderContext.Provider>\n </Flex>\n )}\n {/ Column 2 */}\n <Flex\n container={{\n direction: 'column',\n justify: 'between'\n }}\n item={{\n grow: 1,\n basis: '50%'\n }}\n >\n <CodeEditor\n fetchSuggestions={fetchSuggestions}\n codeEditorHandle={codeEditorHandle}\n autoCompleteTriggers={['.', '@', ':']}\n editorConfigProps={{\n mode: 'expression',\n readOnly\n }}\n defaultValue={defaultValue}\n loading={loading}\n errors={errors}\n readOnly={readOnly}\n onChange={onChange}\n aria-label={t('expression_editor')}\n />\n </Flex>\n </Flex>\n );\n }\n);\n\nexport default ExpressionBuilder;\n"]}
1	+ {"version":3,"file":"ExpressionBuilder.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n useImperativeHandle,\n useMemo,\n useRef\n} from 'react';\n\nimport {\n Flex,\n ForwardProps,\n SearchInput,\n useI18n,\n VisuallyHiddenText\n} from '@pega/cosmos-react-core';\n\nimport { ExpressionItemProps, ExpressionBuilderProps } from './ExpressionBuilder.types';\nimport { EditorState } from './CodeEditor/CodeEditor.types';\nimport ExpressionList from './ExpressionList';\nimport { StyledExpressionBuilder } from './ExpressionBuilder.styles';\nimport CodeEditor from './CodeEditor/CodeEditor';\nimport ExpressionBuilderContext from './ExpressionBuilderContext';\n\nconst ExpressionBuilder: FunctionComponent<ExpressionBuilderProps & ForwardProps> = forwardRef(\n function ExpressionBuilder(\n {\n list,\n search,\n errors,\n defaultValue,\n handle,\n fetchSuggestions,\n loading,\n readOnly,\n onChange,\n ...restProps\n }: PropsWithoutRef<ExpressionBuilderProps>,\n ref: ExpressionBuilderProps['ref']\n ) {\n const t = useI18n();\n const codeEditorHandle = useRef<EditorState>(null);\n\n const getExpression = () => {\n return codeEditorHandle.current?.getValue() \|\| '';\n };\n\n useImperativeHandle(\n handle,\n () => ({\n getExpression\n }),\n [getExpression]\n );\n\n const addExpression = (expression: string) => {\n codeEditorHandle.current?.insertText(expression);\n };\n const onItemAdd = (id: ExpressionItemProps['id']) => {\n list.onItemAdd(id, addExpression);\n };\n\n const ctxValue = useMemo(\n () => ({\n accent: search.accent\n }),\n [search.accent]\n );\n\n return (\n <Flex\n {...restProps}\n as={StyledExpressionBuilder}\n ref={ref}\n container={{\n justify: 'between',\n colGap: 2,\n pad: 1\n }}\n item={{\n grow: 1\n }}\n >\n {!readOnly && (\n <VisuallyHiddenText aria-live='polite' role='status'>\n {t('results_count', [list.items?.length \|\| 0], { count: list.items?.length \|\| 0 })}\n </VisuallyHiddenText>\n )}\n {/* Column 1 /}\n {!readOnly && (\n <Flex\n container={{\n direction: 'column',\n justify: 'between',\n gap: 1\n }}\n item={{\n grow: 1,\n basis: '50%'\n }}\n >\n <SearchInput {...search} />\n <ExpressionBuilderContext.Provider value={ctxValue}>\n <ExpressionList {...list} onItemAdd={onItemAdd} />\n </ExpressionBuilderContext.Provider>\n </Flex>\n )}\n {/ Column 2 */}\n <Flex\n container={{\n direction: 'column',\n justify: 'between'\n }}\n item={{\n grow: 1,\n basis: '50%'\n }}\n >\n <CodeEditor\n fetchSuggestions={fetchSuggestions}\n codeEditorHandle={codeEditorHandle}\n autoCompleteTriggers={['.', '@', ':']}\n editorConfigProps={{\n mode: 'expression',\n readOnly\n }}\n defaultValue={defaultValue}\n loading={loading}\n errors={errors}\n readOnly={readOnly}\n onChange={onChange}\n aria-label={t('expression_editor')}\n />\n </Flex>\n </Flex>\n );\n }\n);\n\nexport default ExpressionBuilder;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpressionDetails.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAwB,YAAY,EAAiB,MAAM,yBAAyB,CAAC;AAE5F,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAOnE,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,~~CA8B~~/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
1	+ {"version":3,"file":"ExpressionDetails.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAwB,YAAY,EAAiB,MAAM,yBAAyB,CAAC;AAE5F,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAOnE,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CAiC/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { FieldValueList, Flex, Text, useI18n } from '@pega/cosmos-react-core';
 import { StyledExpressionDetails, StyledInputParamsGroup, StyledParamsGroup } from './ExpressionBuilder.styles';
-const ExpressionDetails = forwardRef(({ primary, inputParams, outputParams, ...restProps }, ref) => {
+const ExpressionDetails = forwardRef(function ExpressionDetails({ primary, inputParams, outputParams, ...restProps }, ref) {
     const t = useI18n();
     return (_jsxs(Flex, { ...restProps, ref: ref, container: { direction: 'column' }, as: StyledExpressionDetails, children: [_jsx(FieldValueList, { fields: primary }), outputParams && (_jsxs(StyledParamsGroup, { children: [_jsx(Text, { variant: 'h4', children: t('output_parameters') }), _jsx(FieldValueList, { fields: outputParams })] })), inputParams && (_jsxs(StyledInputParamsGroup, { children: [_jsx(Text, { variant: 'h4', children: t('input_parameters') }), _jsx(Flex, { container: { direction: 'column', gap: 1 }, children: inputParams.map(({ id, renderer: Renderer, rendererProps }) => {
                             return _jsx(Renderer, { ...rendererProps }, id);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpressionDetails.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionDetails.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAE,IAAI,EAAgB,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAG5F,OAAO,EACL,uBAAuB,EACvB,sBAAsB,EACtB,iBAAiB,EAClB,MAAM,4BAA4B,CAAC;AAEpC,MAAM,iBAAiB,GAA6D,UAAU,CAC5F,~~CAAC~~,EAAE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,SAAS,EAAE,~~EAAE~~,GAAkC~~,EAAE,EAAE~~;~~IAC3F~~,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,EAAE,EAAE,uBAAuB,aAE3B,KAAC,cAAc,IAAC,MAAM,EAAE,OAAO,GAAI,EAClC,YAAY,IAAI,CACf,MAAC,iBAAiB,eAChB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,mBAAmB,CAAC,GAAQ,EAClD,KAAC,cAAc,IAAC,MAAM,EAAE,YAAY,GAAI,IACtB,CACrB,EACA,WAAW,IAAI,CACd,MAAC,sBAAsB,eACrB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,kBAAkB,CAAC,GAAQ,EACjD,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,YAC7C,WAAW,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,EAAE;4BAC7D,OAAO,KAAC,QAAQ,OAAc,aAAa,IAArB,EAAE,CAAuB,CAAC;wBAClD,CAAC,CAAC,GACG,IACgB,CAC1B,IACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { forwardRef, FunctionComponent } from 'react';\n\nimport { FieldValueList, Flex, ForwardProps, Text, useI18n } from '@pega/cosmos-react-core';\n\nimport { ExpressionDetailsProps } from './ExpressionBuilder.types';\nimport {\n StyledExpressionDetails,\n StyledInputParamsGroup,\n StyledParamsGroup\n} from './ExpressionBuilder.styles';\n\nconst ExpressionDetails: FunctionComponent<ExpressionDetailsProps & ForwardProps> = forwardRef(\n ({ primary, inputParams, outputParams, ...restProps }, ref: ExpressionDetailsProps['ref']) => {\n const t = useI18n();\n return (\n <Flex\n {...restProps}\n ref={ref}\n container={{ direction: 'column' }}\n as={StyledExpressionDetails}\n >\n <FieldValueList fields={primary} />\n {outputParams && (\n <StyledParamsGroup>\n <Text variant='h4'>{t('output_parameters')}</Text>\n <FieldValueList fields={outputParams} />\n </StyledParamsGroup>\n )}\n {inputParams && (\n <StyledInputParamsGroup>\n <Text variant='h4'>{t('input_parameters')}</Text>\n <Flex container={{ direction: 'column', gap: 1 }}>\n {inputParams.map(({ id, renderer: Renderer, rendererProps }) => {\n return <Renderer key={id} {...rendererProps} />;\n })}\n </Flex>\n </StyledInputParamsGroup>\n )}\n </Flex>\n );\n }\n);\n\nexport default ExpressionDetails;\n"]}
1	+ {"version":3,"file":"ExpressionDetails.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionDetails.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAE,IAAI,EAAgB,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAG5F,OAAO,EACL,uBAAuB,EACvB,sBAAsB,EACtB,iBAAiB,EAClB,MAAM,4BAA4B,CAAC;AAEpC,MAAM,iBAAiB,GAA6D,UAAU,CAC5F,SAAS,iBAAiB,CACxB,EAAE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,SAAS,EAAE,EACpD,GAAkC;IAElC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,EAAE,EAAE,uBAAuB,aAE3B,KAAC,cAAc,IAAC,MAAM,EAAE,OAAO,GAAI,EAClC,YAAY,IAAI,CACf,MAAC,iBAAiB,eAChB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,mBAAmB,CAAC,GAAQ,EAClD,KAAC,cAAc,IAAC,MAAM,EAAE,YAAY,GAAI,IACtB,CACrB,EACA,WAAW,IAAI,CACd,MAAC,sBAAsB,eACrB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,kBAAkB,CAAC,GAAQ,EACjD,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,YAC7C,WAAW,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,EAAE;4BAC7D,OAAO,KAAC,QAAQ,OAAc,aAAa,IAArB,EAAE,CAAuB,CAAC;wBAClD,CAAC,CAAC,GACG,IACgB,CAC1B,IACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { forwardRef, FunctionComponent } from 'react';\n\nimport { FieldValueList, Flex, ForwardProps, Text, useI18n } from '@pega/cosmos-react-core';\n\nimport { ExpressionDetailsProps } from './ExpressionBuilder.types';\nimport {\n StyledExpressionDetails,\n StyledInputParamsGroup,\n StyledParamsGroup\n} from './ExpressionBuilder.styles';\n\nconst ExpressionDetails: FunctionComponent<ExpressionDetailsProps & ForwardProps> = forwardRef(\n function ExpressionDetails(\n { primary, inputParams, outputParams, ...restProps },\n ref: ExpressionDetailsProps['ref']\n ) {\n const t = useI18n();\n return (\n <Flex\n {...restProps}\n ref={ref}\n container={{ direction: 'column' }}\n as={StyledExpressionDetails}\n >\n <FieldValueList fields={primary} />\n {outputParams && (\n <StyledParamsGroup>\n <Text variant='h4'>{t('output_parameters')}</Text>\n <FieldValueList fields={outputParams} />\n </StyledParamsGroup>\n )}\n {inputParams && (\n <StyledInputParamsGroup>\n <Text variant='h4'>{t('input_parameters')}</Text>\n <Flex container={{ direction: 'column', gap: 1 }}>\n {inputParams.map(({ id, renderer: Renderer, rendererProps }) => {\n return <Renderer key={id} {...rendererProps} />;\n })}\n </Flex>\n </StyledInputParamsGroup>\n )}\n </Flex>\n );\n }\n);\n\nexport default ExpressionDetails;\n"]}

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

@@ -4,7 +4,7 @@ import { forwardRef, useState } from 'react';
 import { EmptyState } from '@pega/cosmos-react-core';
 import ExpressionItem from './ExpressionItem';
 import { StyledExpressionList } from './ExpressionBuilder.styles';
-const ExpressionList = forwardRef(({ items, emptyText, onItemAdd, onItemExpand, onItemCollapse, details, ...restProps }, ref) => {
+const ExpressionList = forwardRef(function ExpressionList({ items, emptyText, onItemAdd, onItemExpand, onItemCollapse, details, ...restProps }, ref) {
     const [expandedItems, setExpandedItems] = useState([]);
     const handleItemExpand = (id) => {
         setExpandedItems(prev => {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpressionList.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionList.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAqB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,UAAU,EAAgB,MAAM,yBAAyB,CAAC;AAGnE,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAElE,MAAM,cAAc,GAA0D,UAAU,CACtF,~~CACE~~,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,EACpF,GAA+B~~,EAC~~/B,~~EAAE;IACF,~~MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAA8B,EAAE,CAAC,CAAC;IAEpF,MAAM,gBAAgB,GAAG,CAAC,EAA6B,EAAE,EAAE;QACzD,gBAAgB,CAAC,IAAI,CAAC,EAAE;YACtB,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;YACnC,IAAI,SAAS,KAAK,CAAC,CAAC;gBAAE,OAAO,IAAI,CAAC;YAClC,YAAY,EAAE,CAAC,EAAE,CAAC,CAAC;YACnB,OAAO,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,CAAC;QACvB,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,EAA6B,EAAE,EAAE;QAC3D,gBAAgB,CAAC,IAAI,CAAC,EAAE;YACtB,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;YACnC,IAAI,SAAS,KAAK,CAAC,CAAC;gBAAE,OAAO,IAAI,CAAC;YAClC,cAAc,EAAE,CAAC,EAAE,CAAC,CAAC;YACrB,OAAO,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC;QAC9C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,oBAAoB,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,YAC1C,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC3B,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YACf,OAAO,CACL,eAAC,cAAc,OACT,IAAI,EACR,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,gBAAgB,EAC1B,UAAU,EAAE,kBAAkB,EAC9B,QAAQ,EAAE,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EACzC,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,OAAO,EAAE,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,GAC3B,CACH,CAAC;QACJ,CAAC,CAAC,CACH,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,OAAO,EAAE,SAAS,GAAI,CACnC,GACoB,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, useState } from 'react';\n\nimport { EmptyState, ForwardProps } from '@pega/cosmos-react-core';\n\nimport { ExpressionItemProps, ExpressionListProps } from './ExpressionBuilder.types';\nimport ExpressionItem from './ExpressionItem';\nimport { StyledExpressionList } from './ExpressionBuilder.styles';\n\nconst ExpressionList: FunctionComponent<ExpressionListProps & ForwardProps> = forwardRef(\n (\n { items, emptyText, onItemAdd, onItemExpand, onItemCollapse, details, ...restProps },\n ref: ExpressionListProps['ref']\n ) => {\n const [expandedItems, setExpandedItems] = useState<ExpressionItemProps['id'][]>([]);\n\n const handleItemExpand = (id: ExpressionItemProps['id']) => {\n setExpandedItems(prev => {\n const itemIndex = prev.indexOf(id);\n if (itemIndex !== -1) return prev;\n onItemExpand?.(id);\n return [...prev, id];\n });\n };\n\n const handleItemCollapse = (id: ExpressionItemProps['id']) => {\n setExpandedItems(prev => {\n const itemIndex = prev.indexOf(id);\n if (itemIndex === -1) return prev;\n onItemCollapse?.(id);\n return prev.filter(itemId => itemId !== id);\n });\n };\n\n return (\n <StyledExpressionList {...restProps} ref={ref}>\n {items && items.length > 0 ? (\n items.map(item => {\n return (\n <ExpressionItem\n {...item}\n onAdd={onItemAdd}\n onExpand={handleItemExpand}\n onCollapse={handleItemCollapse}\n expanded={expandedItems.includes(item.id)}\n key={item.id}\n details={details?.[item.id]}\n />\n );\n })\n ) : (\n <EmptyState message={emptyText} />\n )}\n </StyledExpressionList>\n );\n }\n);\n\nexport default ExpressionList;\n"]}
1	+ {"version":3,"file":"ExpressionList.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionList.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAqB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,UAAU,EAAgB,MAAM,yBAAyB,CAAC;AAGnE,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAElE,MAAM,cAAc,GAA0D,UAAU,CACtF,SAAS,cAAc,CACrB,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,EACpF,GAA+B;IAE/B,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAA8B,EAAE,CAAC,CAAC;IAEpF,MAAM,gBAAgB,GAAG,CAAC,EAA6B,EAAE,EAAE;QACzD,gBAAgB,CAAC,IAAI,CAAC,EAAE;YACtB,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;YACnC,IAAI,SAAS,KAAK,CAAC,CAAC;gBAAE,OAAO,IAAI,CAAC;YAClC,YAAY,EAAE,CAAC,EAAE,CAAC,CAAC;YACnB,OAAO,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,CAAC;QACvB,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,EAA6B,EAAE,EAAE;QAC3D,gBAAgB,CAAC,IAAI,CAAC,EAAE;YACtB,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;YACnC,IAAI,SAAS,KAAK,CAAC,CAAC;gBAAE,OAAO,IAAI,CAAC;YAClC,cAAc,EAAE,CAAC,EAAE,CAAC,CAAC;YACrB,OAAO,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC;QAC9C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,oBAAoB,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,YAC1C,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC3B,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YACf,OAAO,CACL,eAAC,cAAc,OACT,IAAI,EACR,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,gBAAgB,EAC1B,UAAU,EAAE,kBAAkB,EAC9B,QAAQ,EAAE,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EACzC,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,OAAO,EAAE,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,GAC3B,CACH,CAAC;QACJ,CAAC,CAAC,CACH,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,OAAO,EAAE,SAAS,GAAI,CACnC,GACoB,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, useState } from 'react';\n\nimport { EmptyState, ForwardProps } from '@pega/cosmos-react-core';\n\nimport { ExpressionItemProps, ExpressionListProps } from './ExpressionBuilder.types';\nimport ExpressionItem from './ExpressionItem';\nimport { StyledExpressionList } from './ExpressionBuilder.styles';\n\nconst ExpressionList: FunctionComponent<ExpressionListProps & ForwardProps> = forwardRef(\n function ExpressionList(\n { items, emptyText, onItemAdd, onItemExpand, onItemCollapse, details, ...restProps },\n ref: ExpressionListProps['ref']\n ) {\n const [expandedItems, setExpandedItems] = useState<ExpressionItemProps['id'][]>([]);\n\n const handleItemExpand = (id: ExpressionItemProps['id']) => {\n setExpandedItems(prev => {\n const itemIndex = prev.indexOf(id);\n if (itemIndex !== -1) return prev;\n onItemExpand?.(id);\n return [...prev, id];\n });\n };\n\n const handleItemCollapse = (id: ExpressionItemProps['id']) => {\n setExpandedItems(prev => {\n const itemIndex = prev.indexOf(id);\n if (itemIndex === -1) return prev;\n onItemCollapse?.(id);\n return prev.filter(itemId => itemId !== id);\n });\n };\n\n return (\n <StyledExpressionList {...restProps} ref={ref}>\n {items && items.length > 0 ? (\n items.map(item => {\n return (\n <ExpressionItem\n {...item}\n onAdd={onItemAdd}\n onExpand={handleItemExpand}\n onCollapse={handleItemCollapse}\n expanded={expandedItems.includes(item.id)}\n key={item.id}\n details={details?.[item.id]}\n />\n );\n })\n ) : (\n <EmptyState message={emptyText} />\n )}\n </StyledExpressionList>\n );\n }\n);\n\nexport default ExpressionList;\n"]}

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

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

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

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

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

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

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AddNode.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/AddNode.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAkB,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAExE,OAAO,EACL,MAAM,EACN,gBAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,IAAI,EACL,MAAM,yBAAyB,CAAC;AAGjC,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AAExD,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAyB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IACrF,OAAO,GAAG,CAAA;;aAEC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI;MACnC,SAAS;QACX,GAAG,CAAA;;iBAEU,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI;;KAEtC;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAErC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;0BACc,KAAK,CAAC,IAAI,CAAC,OAAO~~;MACtC~~,aAAa~~;QACX~~,~~GAAG,CAAA;;;OAGJ;;GAEJ,~~CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;;;;aAIC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;oBAGhB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;QACnC,SAAS;;;QAGT,UAAU;;;;;oBAKE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;QACnC,SAAS;;;QAGT,UAAU;;;;GAIf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAQ7C,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAyB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrF,OAAO,GAAG,CAAA;qBACS,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;kBAC9B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI;aACjC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;0BAEV,KAAK,CAAC,IAAI,CAAC,OAAO;GACzC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,SAAS,GAA2D,CAAC,EAChF,cAAc,EACd,SAAS,EACV,EAAE,EAAE;IACH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,EAAE,eAAe,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAE5D,MAAM,mBAAmB,GAAG,CAAC,CAAgC,EAAE,EAAE;QAC/D,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACvB,cAAc,CAAC,CAAC,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,eAAe,EAAE;YACpB,gBAAgB,CAAC,KAAK,CAAC,CAAC;SACzB;IACH,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,aAAa,YACvD,MAAC,YAAY,IACX,KAAK,EAAE,CAAC,CAAC,UAAU,CAAC,mBACL,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAC7C,IAAI,QACJ,OAAO,EAAE,mBAAmB,aAE5B,KAAC,SAAS,IAAC,IAAI,EAAC,cAAc,EAAC,SAAS,EAAE,SAAS,GAAI,EACvD,KAAC,UAAU,IAAC,IAAI,EAAC,MAAM,GAAG,IACb,GACV,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { FC, MouseEvent, useContext, useState, useEffect } from 'react';\n\nimport {\n Button,\n defaultThemeProp,\n Flex,\n Icon,\n useI18n,\n StyledTooltip,\n Text\n} from '@pega/cosmos-react-core';\n\nimport { PlottedGraphNode } from './Renderer/Utils/GraphLayout';\nimport FlowModellerContext from './FlowModellerContext';\n\nexport const StyledDot = styled(Icon)<{ highlight: boolean }>(({ theme, highlight }) => {\n return css`\n position: absolute;\n color: ${theme.base.colors.slate.dark};\n ${highlight &&\n css`\n {\n color: ${theme.base.colors.red.dark};\n }\n `}\n `;\n});\n\nStyledDot.defaultProps = defaultThemeProp;\n\nexport const StyledPlus = styled(Icon)`\n opacity: 0;\n`;\n\nexport const StyledWrapper = styled.div(({ theme }) => {\n return css`\n margin-block-start: ${theme.base.spacing};\n ${StyledTooltip} {\n ~~${css`\n~~ min-width: 12ch;\n text-align: center;\n ~~`}\n~~ }\n `;\n});\n\nStyledWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledButton = styled(Button)(({ theme }) => {\n return css`\n top: -0.25rem;\n border: 0;\n background: transparent;\n color: ${theme.base.colors.black};\n &:hover,\n &:focus {\n background: ${theme.base.colors.white};\n ${StyledDot} {\n opacity: 0;\n }\n ${StyledPlus} {\n opacity: 1;\n }\n }\n &[aria-haspopup='menu'] {\n background: ${theme.base.colors.white};\n ${StyledDot} {\n opacity: 0;\n }\n ${StyledPlus} {\n opacity: 1;\n }\n }\n `;\n});\n\nStyledButton.defaultProps = defaultThemeProp;\n\nexport interface AddNodeProps extends PlottedGraphNode {\n onClick?: (ev: Event) => void;\n addNodeHandler: (e: MouseEvent<HTMLButtonElement>) => void;\n highlight?: boolean;\n}\n\nexport const StyledConnectorLabel = styled(Text)<{ highlight: boolean }>(({ theme }) => {\n return css`\n border-radius: ${theme.base['border-radius']};\n background: ${theme.base.colors.slate.dark};\n color: ${theme.base.colors.white};\n text-align: center;\n padding: calc(0.5 * ${theme.base.spacing});\n `;\n});\n\nStyledConnectorLabel.defaultProps = defaultThemeProp;\n\nexport const AddButton: FC<Pick<AddNodeProps, 'addNodeHandler' \| 'highlight'>> = ({\n addNodeHandler,\n highlight\n}) => {\n const t = useI18n();\n const [hasMenuActive, setHasMenuActive] = useState(false);\n const { showNodeLibrary } = useContext(FlowModellerContext);\n\n const addNodeClickHandler = (e: MouseEvent<HTMLButtonElement>) => {\n setHasMenuActive(true);\n addNodeHandler(e);\n };\n\n useEffect(() => {\n if (!showNodeLibrary) {\n setHasMenuActive(false);\n }\n }, [showNodeLibrary]);\n\n return (\n <Flex container={{ justify: 'center' }} as={StyledWrapper}>\n <StyledButton\n label={t('add_node')}\n aria-haspopup={hasMenuActive ? 'menu' : false}\n icon\n onClick={addNodeClickHandler}\n >\n <StyledDot name='circle-solid' highlight={highlight} />\n <StyledPlus name='plus' />\n </StyledButton>\n </Flex>\n );\n};\n"]}
1	+ {"version":3,"file":"AddNode.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/AddNode.tsx"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { FC, MouseEvent, useContext, useState, useEffect } from 'react';\n\nimport {\n Button,\n defaultThemeProp,\n Flex,\n Icon,\n useI18n,\n StyledTooltip,\n Text\n} from '@pega/cosmos-react-core';\n\nimport { PlottedGraphNode } from './Renderer/Utils/GraphLayout';\nimport FlowModellerContext from './FlowModellerContext';\n\nexport const StyledDot = styled(Icon)<{ highlight: boolean }>(({ theme, highlight }) => {\n return css`\n position: absolute;\n color: ${theme.base.colors.slate.dark};\n ${highlight &&\n css`\n {\n color: ${theme.base.colors.red.dark};\n }\n `}\n `;\n});\n\nStyledDot.defaultProps = defaultThemeProp;\n\nexport const StyledPlus = styled(Icon)`\n opacity: 0;\n`;\n\nexport const StyledWrapper = styled.div(({ theme }) => {\n return css`\n margin-block-start: ${theme.base.spacing};\n\n ${StyledTooltip} {\n min-width: 12ch;\n text-align: center;\n }\n `;\n});\n\nStyledWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledButton = styled(Button)(({ theme }) => {\n return css`\n top: -0.25rem;\n border: 0;\n background: transparent;\n color: ${theme.base.colors.black};\n &:hover,\n &:focus {\n background: ${theme.base.colors.white};\n ${StyledDot} {\n opacity: 0;\n }\n ${StyledPlus} {\n opacity: 1;\n }\n }\n &[aria-haspopup='menu'] {\n background: ${theme.base.colors.white};\n ${StyledDot} {\n opacity: 0;\n }\n ${StyledPlus} {\n opacity: 1;\n }\n }\n `;\n});\n\nStyledButton.defaultProps = defaultThemeProp;\n\nexport interface AddNodeProps extends PlottedGraphNode {\n onClick?: (ev: Event) => void;\n addNodeHandler: (e: MouseEvent<HTMLButtonElement>) => void;\n highlight?: boolean;\n}\n\nexport const StyledConnectorLabel = styled(Text)<{ highlight: boolean }>(({ theme }) => {\n return css`\n border-radius: ${theme.base['border-radius']};\n background: ${theme.base.colors.slate.dark};\n color: ${theme.base.colors.white};\n text-align: center;\n padding: calc(0.5 * ${theme.base.spacing});\n `;\n});\n\nStyledConnectorLabel.defaultProps = defaultThemeProp;\n\nexport const AddButton: FC<Pick<AddNodeProps, 'addNodeHandler' \| 'highlight'>> = ({\n addNodeHandler,\n highlight\n}) => {\n const t = useI18n();\n const [hasMenuActive, setHasMenuActive] = useState(false);\n const { showNodeLibrary } = useContext(FlowModellerContext);\n\n const addNodeClickHandler = (e: MouseEvent<HTMLButtonElement>) => {\n setHasMenuActive(true);\n addNodeHandler(e);\n };\n\n useEffect(() => {\n if (!showNodeLibrary) {\n setHasMenuActive(false);\n }\n }, [showNodeLibrary]);\n\n return (\n <Flex container={{ justify: 'center' }} as={StyledWrapper}>\n <StyledButton\n label={t('add_node')}\n aria-haspopup={hasMenuActive ? 'menu' : false}\n icon\n onClick={addNodeClickHandler}\n >\n <StyledDot name='circle-solid' highlight={highlight} />\n <StyledPlus name='plus' />\n </StyledButton>\n </Flex>\n );\n};\n"]}

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp, Flex, Text, useTheme } from '@pega/cosmos-react-core';
@@ -63,9 +63,7 @@ const Connector = ({ id, labelLayout, data, realConnectors, points }) => {
         refType: 'connector',
         refId
     };
-    return (_jsx(_Fragment, { children: data.type === 'default' && (_jsxs("g", { children: [_jsx("path", { id: id, d: genLine(points), stroke: highlights?.connectors?.[id]
-                        ? theme.base.colors.red.medium
-                        : theme.base.colors.slate.dark, strokeWidth: highlights?.connectors?.[id] ? 2 : 1, fill: 'none' }), labelLayout && (_jsxs("foreignObject", { x: labelLayout.x - labelLayout.width, y: points[3].y - 20, width: labelLayout.width, height: labelLayout.height, children: [labelLayout?.value && (_jsx(Flex, { container: { justify: 'center' }, children: _jsx(StyledLabel, { highlight: !!highlights?.connectors?.[id], children: labelLayout.value }) })), !readOnly && (_jsx(AddButton, { highlight: !!highlights?.connectors?.[id], addNodeHandler: (e) => data?.onNodeCreate(e.currentTarget, metaData) }))] }))] }, id)) }));
+    return data.type === 'default' ? (_jsxs("g", { children: [_jsx("path", { id: id, d: genLine(points), stroke: highlights?.connectors?.[id] ? theme.base.colors.red.medium : theme.base.colors.slate.dark, strokeWidth: highlights?.connectors?.[id] ? 2 : 1, fill: 'none' }), labelLayout && (_jsxs("foreignObject", { x: labelLayout.x - labelLayout.width, y: points[3].y - 20, width: labelLayout.width, height: labelLayout.height, children: [labelLayout?.value && (_jsx(Flex, { container: { justify: 'center' }, children: _jsx(StyledLabel, { highlight: !!highlights?.connectors?.[id], children: labelLayout.value }) })), !readOnly && (_jsx(AddButton, { highlight: !!highlights?.connectors?.[id], addNodeHandler: (e) => data?.onNodeCreate(e.currentTarget, metaData) }))] }))] }, id)) : null;
 };
 export default Connector;
 //# sourceMappingURL=Connector.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Connector.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/Connector.tsx"],"names":[],"mappings":"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~~CACL,4BACG,~~IAAI,CAAC,IAAI,KAAK,SAAS,~~IAAI~~,~~CAC1B~~,wBACE,eACE,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,EAClB,MAAM,EACJ,UAAU,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC~~;wBAC1B~~,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM~~;wBAC9B~~,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,~~EAElC~~,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACjD,IAAI,EAAC,MAAM,GACX,EACD,WAAW,IAAI,CACd,yBACE,CAAC,EAAE,WAAW,CAAC,CAAC,GAAG,WAAW,CAAC,KAAK,EACpC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,EACnB,KAAK,EAAE,WAAW,CAAC,KAAK,EACxB,MAAM,EAAE,WAAW,CAAC,MAAM,aAEzB,WAAW,EAAE,KAAK,IAAI,CACrB,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,YACpC,KAAC,WAAW,IAAC,SAAS,EAAE,CAAC,CAAC,UAAU,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,YACnD,WAAW,CAAC,KAAK,GACN,GACT,CACR,EACA,CAAC,QAAQ,IAAI,CACZ,KAAC,SAAS,IACR,SAAS,EAAE,CAAC,CAAC,UAAU,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,EACzC,cAAc,EAAE,CAAC,CAAgC,EAAE,EAAE,CACnD,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,aAAa,EAAE,QAAQ,CAAC,GAE/C,CACH,IACa,CACjB,~~KAnCK~~,EAAE,~~CAoCN~~,CACL,~~GACA~~,~~CACJ~~,CAAC;~~AACJ~~,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { MouseEvent, useContext } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Flex, Text, useTheme } from '@pega/cosmos-react-core';\n\nimport { AddButton } from './AddNode';\nimport { AddNodeHandlerParams } from './Renderer/Renderer.types';\nimport { PlaceHolderConnector } from './Utils/addNodeUtils';\nimport FlowModellerContext from './FlowModellerContext';\nimport { PlottedGraphConnector } from './Renderer/Utils/GraphLayout';\n\nconst StyledLabel = styled(Text)<{ highlight: boolean }>(({ theme, highlight }) => {\n return css`\n border-radius: ${theme.base['border-radius']};\n background: ${theme.base.colors.slate.dark};\n ${highlight &&\n css`\n {\n background-color: ${theme.base.colors.red.dark};\n }\n `}\n color: ${theme.base.colors.white};\n text-align: center;\n padding: calc(0.5 * ${theme.base.spacing}) ${theme.base.spacing};\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 32ch;\n white-space: nowrap;\n `;\n});\n\nStyledLabel.defaultProps = defaultThemeProp;\n\ninterface Points {\n x: number;\n y: number;\n}\n\nconst curveRadius = 12;\nconst genLine = (points: Points[]) => {\n const lineStr: string = points\n .map((point: Points, idx: number, arr: Points[]) => {\n const { x, y } = point;\n const prev = arr[idx - 1];\n const next = arr[idx + 1];\n const line = `L${x},${y}`;\n\n // if the point is extreme end, no need to add a curve\n if (!prev \|\| !next) return line;\n\n // if point is colinear with prev and next, no need to add a curve\n if (prev.x === next.x \|\| prev.y === next.y) return line;\n\n if (point.x > next.x)\n // BOTTOM-RIGHT ↲\n return `L${x},${\n y - curveRadius\n }a${curveRadius},${curveRadius} 0 0 1 -${curveRadius},${curveRadius}`;\n\n // BOTTOM-LEFT ↳\n if (point.x < next.x)\n return `L${x},${\n y - curveRadius\n }a${curveRadius},${curveRadius} 0 0 0 ${curveRadius},${curveRadius}`;\n\n // TOP-LEFT ↱\n if (point.x < prev.x)\n return `L${\n x + curveRadius\n },${y}a${curveRadius},${curveRadius} 0 0 0 -${curveRadius},${curveRadius}`;\n\n // TOP-RIGHT ↴\n if (point.x > prev.x)\n return `L${\n x - curveRadius\n },${y}a${curveRadius},${curveRadius} 0 0 1 ${curveRadius},${curveRadius}`;\n\n return `L${x},${y}`;\n })\n .join('');\n return `M${lineStr.substr(1)}`;\n};\n\ntype ConnectorProps = Pick<PlottedGraphConnector, 'id' \| 'data' \| 'labelLayout' \| 'points'> &\n Partial<Pick<PlaceHolderConnector, 'realConnectors'>>;\n\nconst Connector = ({ id, labelLayout, data, realConnectors, points }: ConnectorProps) => {\n const refId = realConnectors \|\| id;\n const { readOnly, highlights } = useContext(FlowModellerContext);\n const theme = useTheme();\n\n const metaData: AddNodeHandlerParams = {\n refType: 'connector',\n refId\n };\n return ~~(\n <>\n {~~data.type === 'default' && (\n <g key={id}>\n <path\n id={id}\n d={genLine(points)}\n stroke={\n highlights?.connectors?.[id]\n ? theme.base.colors.red.medium\n : theme.base.colors.slate.dark\n }\n strokeWidth={highlights?.connectors?.[id] ? 2 : 1}\n fill='none'\n />\n {labelLayout && (\n <foreignObject\n x={labelLayout.x - labelLayout.width}\n y={points[3].y - 20}\n width={labelLayout.width}\n height={labelLayout.height}\n >\n {labelLayout?.value && (\n <Flex container={{ justify: 'center' }}>\n <StyledLabel highlight={!!highlights?.connectors?.[id]}>\n {labelLayout.value}\n </StyledLabel>\n </Flex>\n )}\n {!readOnly && (\n <AddButton\n highlight={!!highlights?.connectors?.[id]}\n addNodeHandler={(e: MouseEvent<HTMLButtonElement>) =>\n data?.onNodeCreate(e.currentTarget, metaData)\n ~~}\n />\n~~ )}\n ~~</foreignObject>\~~n )}\n </g>\n )}\n ~~</>\~~n );\n};\n\nexport default Connector;\n"]}
1	+ {"version":3,"file":"Connector.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/Connector.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAc,UAAU,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEjF,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAGtC,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AAGxD,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAyB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IAChF,OAAO,GAAG,CAAA;qBACS,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;kBAC9B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI;MACxC,SAAS;QACX,GAAG,CAAA;;4BAEqB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI;;KAEjD;aACQ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;0BAEV,KAAK,CAAC,IAAI,CAAC,OAAO,KAAK,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;GAKhE,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAO5C,MAAM,WAAW,GAAG,EAAE,CAAC;AACvB,MAAM,OAAO,GAAG,CAAC,MAAgB,EAAE,EAAE;IACnC,MAAM,OAAO,GAAW,MAAM;SAC3B,GAAG,CAAC,CAAC,KAAa,EAAE,GAAW,EAAE,GAAa,EAAE,EAAE;QACjD,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,KAAK,CAAC;QACvB,MAAM,IAAI,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;QAC1B,MAAM,IAAI,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;QAC1B,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;QAE1B,sDAAsD;QACtD,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI;YAAE,OAAO,IAAI,CAAC;QAEhC,kEAAkE;QAClE,IAAI,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC;YAAE,OAAO,IAAI,CAAC;QAExD,IAAI,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;YAClB,iBAAiB;YACjB,OAAO,IAAI,CAAC,IACV,CAAC,GAAG,WACN,IAAI,WAAW,IAAI,WAAW,WAAW,WAAW,IAAI,WAAW,EAAE,CAAC;QAExE,gBAAgB;QAChB,IAAI,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;YAClB,OAAO,IAAI,CAAC,IACV,CAAC,GAAG,WACN,IAAI,WAAW,IAAI,WAAW,UAAU,WAAW,IAAI,WAAW,EAAE,CAAC;QAEvE,aAAa;QACb,IAAI,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;YAClB,OAAO,IACL,CAAC,GAAG,WACN,IAAI,CAAC,IAAI,WAAW,IAAI,WAAW,WAAW,WAAW,IAAI,WAAW,EAAE,CAAC;QAE7E,cAAc;QACd,IAAI,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;YAClB,OAAO,IACL,CAAC,GAAG,WACN,IAAI,CAAC,IAAI,WAAW,IAAI,WAAW,UAAU,WAAW,IAAI,WAAW,EAAE,CAAC;QAE5E,OAAO,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;IACtB,CAAC,CAAC;SACD,IAAI,CAAC,EAAE,CAAC,CAAC;IACZ,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;AACjC,CAAC,CAAC;AAKF,MAAM,SAAS,GAAG,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,EAAkB,EAAE,EAAE;IACtF,MAAM,KAAK,GAAG,cAAc,IAAI,EAAE,CAAC;IACnC,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IACjE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,QAAQ,GAAyB;QACrC,OAAO,EAAE,WAAW;QACpB,KAAK;KACN,CAAC;IACF,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CAC/B,wBACE,eACE,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,EAClB,MAAM,EACJ,UAAU,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,EAE5F,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACjD,IAAI,EAAC,MAAM,GACX,EACD,WAAW,IAAI,CACd,yBACE,CAAC,EAAE,WAAW,CAAC,CAAC,GAAG,WAAW,CAAC,KAAK,EACpC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,EACnB,KAAK,EAAE,WAAW,CAAC,KAAK,EACxB,MAAM,EAAE,WAAW,CAAC,MAAM,aAEzB,WAAW,EAAE,KAAK,IAAI,CACrB,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,YACpC,KAAC,WAAW,IAAC,SAAS,EAAE,CAAC,CAAC,UAAU,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,YACnD,WAAW,CAAC,KAAK,GACN,GACT,CACR,EACA,CAAC,QAAQ,IAAI,CACZ,KAAC,SAAS,IACR,SAAS,EAAE,CAAC,CAAC,UAAU,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,EACzC,cAAc,EAAE,CAAC,CAAgC,EAAE,EAAE,CACnD,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,aAAa,EAAE,QAAQ,CAAC,GAE/C,CACH,IACa,CACjB,KAjCK,EAAE,CAkCN,CACL,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { MouseEvent, useContext } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Flex, Text, useTheme } from '@pega/cosmos-react-core';\n\nimport { AddButton } from './AddNode';\nimport { AddNodeHandlerParams } from './Renderer/Renderer.types';\nimport { PlaceHolderConnector } from './Utils/addNodeUtils';\nimport FlowModellerContext from './FlowModellerContext';\nimport { PlottedGraphConnector } from './Renderer/Utils/GraphLayout';\n\nconst StyledLabel = styled(Text)<{ highlight: boolean }>(({ theme, highlight }) => {\n return css`\n border-radius: ${theme.base['border-radius']};\n background: ${theme.base.colors.slate.dark};\n ${highlight &&\n css`\n {\n background-color: ${theme.base.colors.red.dark};\n }\n `}\n color: ${theme.base.colors.white};\n text-align: center;\n padding: calc(0.5 * ${theme.base.spacing}) ${theme.base.spacing};\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 32ch;\n white-space: nowrap;\n `;\n});\n\nStyledLabel.defaultProps = defaultThemeProp;\n\ninterface Points {\n x: number;\n y: number;\n}\n\nconst curveRadius = 12;\nconst genLine = (points: Points[]) => {\n const lineStr: string = points\n .map((point: Points, idx: number, arr: Points[]) => {\n const { x, y } = point;\n const prev = arr[idx - 1];\n const next = arr[idx + 1];\n const line = `L${x},${y}`;\n\n // if the point is extreme end, no need to add a curve\n if (!prev \|\| !next) return line;\n\n // if point is colinear with prev and next, no need to add a curve\n if (prev.x === next.x \|\| prev.y === next.y) return line;\n\n if (point.x > next.x)\n // BOTTOM-RIGHT ↲\n return `L${x},${\n y - curveRadius\n }a${curveRadius},${curveRadius} 0 0 1 -${curveRadius},${curveRadius}`;\n\n // BOTTOM-LEFT ↳\n if (point.x < next.x)\n return `L${x},${\n y - curveRadius\n }a${curveRadius},${curveRadius} 0 0 0 ${curveRadius},${curveRadius}`;\n\n // TOP-LEFT ↱\n if (point.x < prev.x)\n return `L${\n x + curveRadius\n },${y}a${curveRadius},${curveRadius} 0 0 0 -${curveRadius},${curveRadius}`;\n\n // TOP-RIGHT ↴\n if (point.x > prev.x)\n return `L${\n x - curveRadius\n },${y}a${curveRadius},${curveRadius} 0 0 1 ${curveRadius},${curveRadius}`;\n\n return `L${x},${y}`;\n })\n .join('');\n return `M${lineStr.substr(1)}`;\n};\n\ntype ConnectorProps = Pick<PlottedGraphConnector, 'id' \| 'data' \| 'labelLayout' \| 'points'> &\n Partial<Pick<PlaceHolderConnector, 'realConnectors'>>;\n\nconst Connector = ({ id, labelLayout, data, realConnectors, points }: ConnectorProps) => {\n const refId = realConnectors \|\| id;\n const { readOnly, highlights } = useContext(FlowModellerContext);\n const theme = useTheme();\n\n const metaData: AddNodeHandlerParams = {\n refType: 'connector',\n refId\n };\n return data.type === 'default' ? (\n <g key={id}>\n <path\n id={id}\n d={genLine(points)}\n stroke={\n highlights?.connectors?.[id] ? theme.base.colors.red.medium : theme.base.colors.slate.dark\n }\n strokeWidth={highlights?.connectors?.[id] ? 2 : 1}\n fill='none'\n />\n {labelLayout && (\n <foreignObject\n x={labelLayout.x - labelLayout.width}\n y={points[3].y - 20}\n width={labelLayout.width}\n height={labelLayout.height}\n >\n {labelLayout?.value && (\n <Flex container={{ justify: 'center' }}>\n <StyledLabel highlight={!!highlights?.connectors?.[id]}>\n {labelLayout.value}\n </StyledLabel>\n </Flex>\n )}\n {!readOnly && (\n <AddButton\n highlight={!!highlights?.connectors?.[id]}\n addNodeHandler={(e: MouseEvent<HTMLButtonElement>) =>\n data?.onNodeCreate(e.currentTarget, metaData)\n }\n />\n )}\n </foreignObject>\n )}\n </g>\n ) : null;\n};\n\nexport default Connector;\n"]}