npm - @pega/cosmos-react-build - Versions diffs - 9.0.0-build.9.9 → 9.0.0 - Mend

@pega/cosmos-react-build 9.0.0-build.9.9 → 9.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 (270) hide show

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":["import styled, { createGlobalStyle, css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport { defaultThemeProp, calculateFontSize, Flex, Icon } from '@pega/cosmos-react-core';\nimport { StyledFormField } from '@pega/cosmos-react-core/lib/components/FormField/FormField';\n\nimport type { CodeEditorProps, SuggestionType } from './CodeEditor.types';\n\nconst primaryBackground = 'primary-background';\nconst contentWidth = 'content-width';\n\nexport const StyledLoading = styled.div`\n font-size: 1.5rem;\n`;\n\nexport const StyledWarnIcon = styled(Icon)(({ theme }) => {\n return css`\n color: ${theme.base.palette.urgent};\n `;\n});\n\nStyledWarnIcon.defaultProps = defaultThemeProp;\n\nexport const StyledPopover = styled.div(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n font-size: ${fontSize.xxs};\n max-width: ${theme.base[contentWidth].sm};\n padding: ${theme.base.spacing};\n white-space: pre-line;\n word-break: break-word;\n pointer-events: none;\n `;\n});\n\nStyledPopover.defaultProps = defaultThemeProp;\n\nexport const StyledList = styled.div(({ theme }) => {\n return css`\n padding-inline-start: calc(0.25 * ${theme.base.spacing});\n `;\n});\nStyledList.defaultProps = defaultThemeProp;\n\nexport const StyledCodeEditor = styled(Flex)<\n Pick<CodeEditorProps, 'showEditorOnly' \| 'editorConfigProps' \| 'isSingleLine'> & {\n isLoading?: boolean;\n errors?: string;\n readOnly?: boolean;\n suggestions: SuggestionType[];\n }\n>(({\n theme: {\n base,\n components: {\n 'form-control': {\n 'background-color': formControlBgColor,\n ':read-only': { 'background-color': readOnlyBackgroundColor }\n },\n 'form-field': {\n error: { 'status-color': errorBackground }\n },\n input\n }\n },\n errors,\n readOnly,\n showEditorOnly,\n editorConfigProps,\n isSingleLine = false\n}) => {\n const jsonMode = editorConfigProps?.mode === 'application/json';\n\n return css`\n width: 100%;\n ${showEditorOnly &&\n css`\n max-height: 10rem;\n width: 27vw;\n `}\n position: relative;\n ${!showEditorOnly &&\n css`\n max-height: 100%;\n `}\n overflow-y: auto;\n ${StyledFormField} {\n flex-grow: 1;\n }\n\n /* PADDING /\n .react-codemirror2 {\n flex-grow: 1;\n ${isSingleLine\n ? css`\n min-height: ${input.height};\n & {\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n }\n `\n : css`\n min-height: 3.75rem;\n `}\n overflow-y: auto;\n ${readOnly &&\n !jsonMode &&\n css`\n max-height: 5.625rem;\n `}\n }\n\n .CodeMirror-placeholder {\n opacity: ${base.transparency['transparent-3']};\n }\n\n .CodeMirror-lines {\n cursor: text;\n min-height: 0.063rem; /* prevents collapsing before first draw /\n padding: ${base.spacing} 0;\n }\n\n ${editorConfigProps?.theme === 'eclipse' &&\n css`\n .cm-s-eclipse .cm-string {\n color: ${base.palette.urgent};\n }\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 padding: 0 ${base.spacing};\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 ${isSingleLine &&\n css`\n white-space: nowrap;\n height: auto;\n padding-inline-end: ${base.spacing};\n `}\n overflow: hidden;\n font-family: monospace;\n direction: ltr;\n position: relative;\n background-color: ${formControlBgColor};\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-additional-operators {\n color: ${base.palette.interactive};\n }\n .cm-ex-operator {\n color: ${base.palette.warn};\n font-weight: bold;\n }\n .cm-ex-comment {\n color: ${base.palette.info};\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 .cm-ex-underline-error {\n text-decoration: underline;\n text-decoration-style: wavy;\n text-decoration-color: ${base.colors.red.medium};\n }\n `;\n});\n\nStyledCodeEditor.defaultProps = defaultThemeProp;\n\nexport const StyledSuggestions = createGlobalStyle<{\n isLoading?: boolean;\n suggestions: SuggestionType[];\n}>(({ theme: { base }, isLoading, suggestions }) => {\n const activeColor = mix(0.85, base.palette[primaryBackground], base.palette.interactive);\n\n const hoverColor = mix(0.95, base.palette[primaryBackground], base.palette.interactive);\n\n const fontSizes = calculateFontSize(base['font-size'], base['font-scale']);\n return css`\n .CodeMirror-hints {\n position: absolute;\n z-index: calc(${base['z-index'].backdrop} + 1);\n transition: height ${base.animation.speed} ${base.animation.timing.ease};\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[primaryBackground]};\n font-size: ${fontSizes.s};\n max-height: 12rem;\n overflow-y: auto;\n min-width: ${base[contentWidth].xs};\n }\n\n .CodeMirror-hint {\n width: calc(1.5 * ${base[contentWidth].xs});\n cursor: pointer;\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 body .CodeMirror-lint-tooltip {\n z-index: ${base['z-index'].tooltip};\n }\n\n ${!isLoading &&\n suggestions?.length > 0 &&\n css`\n li.CodeMirror-hint-active {\n background-color: ${activeColor};\n }\n `}\n `;\n});\n\nStyledSuggestions.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"CodeEditor.styles.js","sourceRoot":"","sources":["../../../../src/components/ExpressionBuilder/CodeEditor/CodeEditor.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { createGlobalStyle, css } from 'styled-components';\nimport { mix, transparentize } from 'polished';\n\nimport { defaultThemeProp, calculateFontSize, Flex, Icon } from '@pega/cosmos-react-core';\nimport { StyledFormField } from '@pega/cosmos-react-core/lib/components/FormField/FormField';\n\nimport type { CodeEditorProps, SuggestionType } from './CodeEditor.types';\n\nconst primaryBackground = 'primary-background';\nconst contentWidth = 'content-width';\n\nexport const StyledLoading = styled.div`\n font-size: 1.5rem;\n`;\n\nexport const StyledWarnIcon = styled(Icon)(({ theme }) => {\n return css`\n color: ${theme.base.palette.urgent};\n `;\n});\n\nStyledWarnIcon.defaultProps = defaultThemeProp;\n\nexport const StyledPopover = styled.div(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n font-size: ${fontSize.xxs};\n max-width: ${theme.base[contentWidth].sm};\n padding: ${theme.base.spacing};\n white-space: pre-line;\n word-break: break-word;\n pointer-events: none;\n `;\n});\n\nStyledPopover.defaultProps = defaultThemeProp;\n\nexport const StyledList = styled.div(({ theme }) => {\n return css`\n padding-inline-start: calc(0.25 * ${theme.base.spacing});\n `;\n});\nStyledList.defaultProps = defaultThemeProp;\n\nexport const StyledCodeEditor = styled(Flex)<\n Pick<CodeEditorProps, 'showEditorOnly' \| 'editorConfigProps' \| 'isSingleLine'> & {\n isLoading?: boolean;\n errors?: string;\n readOnly?: boolean;\n suggestions: SuggestionType[];\n }\n>(({\n theme: {\n base,\n components: {\n 'form-control': {\n 'background-color': formControlBgColor,\n ':read-only': { 'background-color': readOnlyBackgroundColor }\n },\n 'form-field': {\n error: { 'status-color': errorBackground }\n },\n input\n }\n },\n errors,\n readOnly,\n showEditorOnly,\n editorConfigProps,\n isSingleLine = false\n}) => {\n const jsonMode = editorConfigProps?.mode === 'application/json';\n\n return css`\n width: 100%;\n ${showEditorOnly &&\n css`\n max-height: 10rem;\n width: 27vw;\n `}\n position: relative;\n ${!showEditorOnly &&\n css`\n max-height: 100%;\n `}\n overflow-y: auto;\n ${StyledFormField} {\n flex-grow: 1;\n }\n\n /* PADDING /\n .react-codemirror2 {\n flex-grow: 1;\n ${isSingleLine\n ? css`\n min-height: ${input.height};\n & {\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n }\n `\n : css`\n min-height: 3.75rem;\n `}\n overflow-y: auto;\n ${readOnly &&\n !jsonMode &&\n css`\n max-height: 5.625rem;\n `}\n }\n\n .CodeMirror-placeholder {\n opacity: ${base.transparency['transparent-3']};\n }\n\n .CodeMirror-lines {\n cursor: text;\n min-height: 0.063rem; /* prevents collapsing before first draw /\n padding: ${base.spacing} 0;\n }\n\n ${editorConfigProps?.theme === 'eclipse' &&\n css`\n .cm-s-eclipse {\n .cm-string {\n color: ${base.palette.pending};\n &.cm-property {\n color: ${base.palette['foreground-color']};\n }\n }\n .cm-operator {\n color: ${base.palette.info};\n }\n .cm-variable,\n .cm-variable-2,\n .cm-variable-3 {\n color: ${base.palette['foreground-color']};\n }\n .cm-atom,\n .cm-keyword {\n color: ${base.palette.warn};\n }\n .cm-number {\n color: ${base.palette.success};\n }\n }\n `}\n\n .CodeMirror-scrollbar-filler,\n .CodeMirror-gutter-filler {\n background-color: ${base.palette[\n 'primary-background'\n ]}; / 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 ${base.palette['border-line']};\n background-color: ${base.palette['secondary-background']};\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: ${transparentize(0.5, base.palette['foreground-color'])};\n white-space: nowrap;\n }\n\n .CodeMirror-guttermarker {\n color: ${base.palette['foreground-color']};\n }\n .CodeMirror-guttermarker-subtle {\n color: ${transparentize(0.5, base.palette['foreground-color'])};\n }\n\n / CURSOR /\n\n .CodeMirror-cursor {\n position: absolute;\n pointer-events: none;\n border-left: 0.0625rem solid ${base.palette.interactive};\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 ${base.palette['secondary-background']};\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 ${base.palette['border-line']};\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: ${base.palette.skeleton};\n }\n .cm-s-default .cm-tag {\n color: ${base.palette.info};\n }\n .cm-s-default .cm-attribute {\n color: ${base.palette.interactive};\n }\n .cm-s-default .cm-hr {\n color: ${base.palette['border-line']};\n }\n .cm-s-default .cm-link {\n color: ${base.palette.interactive};\n }\n\n .cm-s-default .cm-error {\n color: ${base.palette.urgent};\n }\n .cm-invalidchar {\n color: ${base.palette.urgent};\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: ${base.palette.success} !important;\n outline: 0.0625rem dotted ${base.palette.success};\n }\n div.CodeMirror span.CodeMirror-nonmatchingbracket {\n color: ${base.palette.urgent} !important;\n outline: 0.0625rem dotted ${base.palette.urgent};\n }\n .CodeMirror-matchingtag {\n background: ${transparentize(0.5, base.palette.warn)};\n }\n .CodeMirror-activeline-background {\n background: ${base.palette['secondary-background']};\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 padding: 0 ${base.spacing};\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: ${transparentize(0.8, base.palette.interactive)};\n }\n .CodeMirror-focused .CodeMirror-selected {\n background: ${transparentize(0.8, base.palette.interactive)};\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: ${transparentize(0.8, base.palette.interactive)};\n }\n .CodeMirror-line::-moz-selection,\n .CodeMirror-line > span::-moz-selection,\n .CodeMirror-line > span > span::-moz-selection {\n background: ${transparentize(0.8, base.palette.interactive)};\n }\n\n .cm-searching {\n background-color: ${transparentize(0.5, base.palette['foreground-color'])};\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 ${isSingleLine &&\n css`\n white-space: nowrap;\n height: auto;\n padding-inline-end: ${base.spacing};\n `}\n overflow: hidden;\n font-family: monospace;\n direction: ltr;\n position: relative;\n background-color: ${formControlBgColor};\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-additional-operators {\n color: ${base.palette.interactive};\n }\n .cm-ex-operator {\n color: ${base.palette.warn};\n font-weight: bold;\n }\n .cm-ex-comment {\n color: ${transparentize(0.2, base.palette.info)};\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 .cm-ex-underline-error {\n text-decoration: underline;\n text-decoration-style: wavy;\n text-decoration-color: ${base.palette.urgent};\n }\n `;\n});\n\nStyledCodeEditor.defaultProps = defaultThemeProp;\n\nexport const StyledSuggestions = createGlobalStyle<{\n isLoading?: boolean;\n suggestions: SuggestionType[];\n}>(({ theme: { base } = defaultThemeProp.theme, isLoading, suggestions }) => {\n const activeColor = mix(0.85, base.palette[primaryBackground], base.palette.interactive);\n\n const hoverColor = mix(0.95, base.palette[primaryBackground], base.palette.interactive);\n\n const fontSizes = calculateFontSize(base['font-size'], base['font-scale']);\n return css`\n .CodeMirror-hints {\n position: absolute;\n z-index: calc(${base['z-index'].backdrop} + 1);\n transition: height ${base.animation.speed} ${base.animation.timing.ease};\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[primaryBackground]};\n font-size: ${fontSizes.s};\n max-height: 12rem;\n overflow-y: auto;\n min-width: ${base[contentWidth].xs};\n }\n\n .CodeMirror-hint {\n width: calc(1.5 * ${base[contentWidth].xs});\n cursor: pointer;\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 body .CodeMirror-lint-tooltip {\n z-index: ${base['z-index'].tooltip};\n }\n\n ${!isLoading &&\n suggestions?.length > 0 &&\n css`\n li.CodeMirror-hint-active {\n background-color: ${activeColor};\n }\n `}\n `;\n});\n"]}

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

@@ -1,6 +1,6 @@
 import type { Ref } from 'react';
 import type { ShowHintOptions, EditorConfiguration, Position } from 'codemirror';
-import type { MenuItemProps, TestIdProp } from '@pega/cosmos-react-core';
+import type { DefaultSettableTheme, MenuItemProps, TestIdProp } from '@pega/cosmos-react-core';
 export type AutoCompleteTriggerChar = '@' | '.' | ':' | '#' | '(' | ')' | '[' | ']';
 export type SuggestionType = Pick<MenuItemProps, 'primary' | 'secondary' | 'id'>;
 export interface CustomPositionProps {
@@ -58,5 +58,6 @@ export interface EditorHintOptions extends ShowHintOptions {
     suggestions?: SuggestionType[];
     loading?: boolean;
     triggerCharacterCursorPos?: Position;
+    theme?: DefaultSettableTheme;
 }
 //# sourceMappingURL=CodeEditor.types.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeEditor.types.d.ts","sourceRoot":"","sources":["../../../../src/components/ExpressionBuilder/CodeEditor/CodeEditor.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,eAAe,EAAE,mBAAmB,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEjF,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;~~AAEzE~~,MAAM,MAAM,uBAAuB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEpF,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,WAAW,GAAG,IAAI,CAAC,CAAC;AAEjF,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,GAAG,CAAC,EAAE,QAAQ,CAAC;CAChB;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IACnC,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,OAAO,EAAE,eAAe,CAAC,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACnG;AAED,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,MAAM,CAAC,CAAC;AAE3D,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,QAAQ,CAAC;IACf,EAAE,EAAE,QAAQ,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,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,GAAG,SAAS,CAAC,CAAC;IAC3C,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,yCAAyC;IACzC,MAAM,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,SAAS,EAAE,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/E,+BAA+B;IAC/B,YAAY,CAAC,EAAE;QAAE,KAAK,EAAE,UAAU,CAAC;QAAC,GAAG,EAAE,UAAU,CAAC;QAAC,QAAQ,EAAE,MAAM,EAAE,CAAA;KAAE,EAAE,CAAC;IAC5E,4CAA4C;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,6EAA6E;IAC7E,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;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":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeEditor.types.js","sourceRoot":"","sources":["../../../../src/components/ExpressionBuilder/CodeEditor/CodeEditor.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref } from 'react';\nimport type { ShowHintOptions, EditorConfiguration, Position } from 'codemirror';\n\nimport type { MenuItemProps, TestIdProp } from '@pega/cosmos-react-core';\n\nexport type AutoCompleteTriggerChar = '@' \| '.' \| ':' \| '#' \| '(' \| ')' \| '[' \| ']';\n\nexport type SuggestionType = Pick<MenuItemProps, 'primary' \| 'secondary' \| 'id'>;\n\nexport interface CustomPositionProps {\n start?: Position;\n end?: Position;\n}\n\nexport interface EditorState {\n getValue: () => string \| undefined;\n insertText: (text: string, resetContent?: boolean, customPositions?: CustomPositionProps) => void;\n}\n\nexport type CursorPosition = Pick<Position, 'ch' \| 'line'>;\n\nexport interface ErrorRange {\n line: number;\n ch: number;\n}\n\nexport interface LintError {\n from: Position;\n to: Position;\n message: string;\n}\n\nexport interface CodeEditorProps extends TestIdProp {\n /** Default expression to set in the code editor /\n defaultValue?: string;\n /* Compiled error message /\n errors?: string;\n /* Enable read only mode /\n readOnly?: boolean;\n /* Fetches suggestion list for suggestions popover /\n fetchSuggestions?: (\n autoCompleteTrigger: AutoCompleteTriggerChar,\n cursorPosition: CursorPosition\n ) => Promise<SuggestionType[] \| undefined>;\n /* characters which triggers suggestions /\n autoCompleteTriggers?: AutoCompleteTriggerChar[];\n /* Code editor configuration props /\n editorConfigProps?: EditorConfiguration;\n /* To show loader for intellisense popover /\n loading?: boolean;\n /* Called when editor loses the focus /\n onBlur?: (expression: string) => void;\n /* Called when editor content changes. /\n onChange?: (expression: string, errors?: LintError[], source?: string) => void;\n /* underlined error message /\n inLineErrors?: { start: ErrorRange; end: ErrorRange; messages: string[] }[];\n /* For single line code editor rendering /\n isSingleLine?: boolean;\n codeEditorHandle: Ref<EditorState>;\n ref?: Ref<HTMLDivElement>;\n showEditorOnly?: boolean;\n /* Information to announce to screen reader users on focusing CodeEditor. */\n 'aria-describedby'?: string;\n}\n\nexport interface EditorHintOptions extends ShowHintOptions {\n suggestions?: SuggestionType[];\n loading?: boolean;\n triggerCharacterCursorPos?: Position;\n}\n"]}
1	+ {"version":3,"file":"CodeEditor.types.js","sourceRoot":"","sources":["../../../../src/components/ExpressionBuilder/CodeEditor/CodeEditor.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref } from 'react';\nimport type { ShowHintOptions, EditorConfiguration, Position } from 'codemirror';\n\nimport type { DefaultSettableTheme, MenuItemProps, TestIdProp } from '@pega/cosmos-react-core';\n\nexport type AutoCompleteTriggerChar = '@' \| '.' \| ':' \| '#' \| '(' \| ')' \| '[' \| ']';\n\nexport type SuggestionType = Pick<MenuItemProps, 'primary' \| 'secondary' \| 'id'>;\n\nexport interface CustomPositionProps {\n start?: Position;\n end?: Position;\n}\n\nexport interface EditorState {\n getValue: () => string \| undefined;\n insertText: (text: string, resetContent?: boolean, customPositions?: CustomPositionProps) => void;\n}\n\nexport type CursorPosition = Pick<Position, 'ch' \| 'line'>;\n\nexport interface ErrorRange {\n line: number;\n ch: number;\n}\n\nexport interface LintError {\n from: Position;\n to: Position;\n message: string;\n}\n\nexport interface CodeEditorProps extends TestIdProp {\n /** Default expression to set in the code editor /\n defaultValue?: string;\n /* Compiled error message /\n errors?: string;\n /* Enable read only mode /\n readOnly?: boolean;\n /* Fetches suggestion list for suggestions popover /\n fetchSuggestions?: (\n autoCompleteTrigger: AutoCompleteTriggerChar,\n cursorPosition: CursorPosition\n ) => Promise<SuggestionType[] \| undefined>;\n /* characters which triggers suggestions /\n autoCompleteTriggers?: AutoCompleteTriggerChar[];\n /* Code editor configuration props /\n editorConfigProps?: EditorConfiguration;\n /* To show loader for intellisense popover /\n loading?: boolean;\n /* Called when editor loses the focus /\n onBlur?: (expression: string) => void;\n /* Called when editor content changes. /\n onChange?: (expression: string, errors?: LintError[], source?: string) => void;\n /* underlined error message /\n inLineErrors?: { start: ErrorRange; end: ErrorRange; messages: string[] }[];\n /* For single line code editor rendering /\n isSingleLine?: boolean;\n codeEditorHandle: Ref<EditorState>;\n ref?: Ref<HTMLDivElement>;\n showEditorOnly?: boolean;\n /* Information to announce to screen reader users on focusing CodeEditor. */\n 'aria-describedby'?: string;\n}\n\nexport interface EditorHintOptions extends ShowHintOptions {\n suggestions?: SuggestionType[];\n loading?: boolean;\n triggerCharacterCursorPos?: Position;\n theme?: DefaultSettableTheme;\n}\n"]}

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

@@ -1,6 +1,6 @@
 import type { Editor } from 'codemirror';
 import type { EditorHintOptions } from './CodeEditor.types';
-declare const getCodeSuggestions: (codeMirror: Editor, { suggestions, loading, triggerCharacterCursorPos }: EditorHintOptions) => {
+declare const getCodeSuggestions: (codeMirror: Editor, { suggestions, loading, triggerCharacterCursorPos, theme }: EditorHintOptions) => {
     list: {
         text: string;
         displayText: string;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"getCodeSuggestions.d.ts","sourceRoot":"","sources":["../../../../src/components/ExpressionBuilder/CodeEditor/getCodeSuggestions.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAKzC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAG5D,QAAA,MAAM,kBAAkB,GACtB,YAAY,MAAM,EAClB,~~qDAOG~~,iBAAiB;;cASZ,MAAM;qBACC,MAAM;gBACX,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI;;;;~~CA+C3C~~,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
1	+ {"version":3,"file":"getCodeSuggestions.d.ts","sourceRoot":"","sources":["../../../../src/components/ExpressionBuilder/CodeEditor/getCodeSuggestions.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAKzC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAG5D,QAAA,MAAM,kBAAkB,GACtB,YAAY,MAAM,EAClB,4DAQG,iBAAiB;;cASZ,MAAM;qBACC,MAAM;gBACX,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI;;;;CA2D3C,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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

@@ -2,13 +2,13 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import ReactDOM from 'react-dom';
 import { Pos } from 'codemirror';
-import { Progress, Flex, EmptyState } from '@pega/cosmos-react-core';
+import { Progress, Flex, EmptyState, ThemeOverride } from '@pega/cosmos-react-core';
 import MenuItem from '@pega/cosmos-react-core/lib/components/Menu/MenuItem';
 import { StyledLoading } from './CodeEditor.styles';
 const getCodeSuggestions = (codeMirror, { suggestions = [], loading = false, triggerCharacterCursorPos = {
     ch: 0,
     line: 0
-} }) => {
+}, theme = {} }) => {
     const currentPosition = codeMirror.getCursor();
     const filterQuery = codeMirror
         .getValue()
@@ -21,10 +21,10 @@ const getCodeSuggestions = (codeMirror, { suggestions = [], loading = false, tri
                 displayText: '',
                 render: (element) => {
                     element.style.pointerEvents = 'none';
-                    ReactDOM.render(_jsx(Flex, { container: {
-                            justify: 'center',
-                            pad: 1
-                        }, children: loading ? (_jsx(Progress, { variant: 'ring', placement: 'inline', visible: loading, as: StyledLoading })) : (_jsx(EmptyState, {})) }), element);
+                    ReactDOM.render(_jsx(ThemeOverride, { theme: theme, children: _jsx(Flex, { container: {
+                                justify: 'center',
+                                pad: 1
+                            }, children: loading ? (_jsx(Progress, { variant: 'ring', placement: 'inline', visible: loading, as: StyledLoading })) : (_jsx(EmptyState, {})) }) }), element);
                 }
             }
         ];
@@ -36,7 +36,7 @@ const getCodeSuggestions = (codeMirror, { suggestions = [], loading = false, tri
                 text: hint.id,
                 displayText: hint.primary,
                 render: (element) => {
-                    ReactDOM.render(_createElement(MenuItem, { ...hint, key: hint.id, role: 'menuitem' }), element);
+                    ReactDOM.render(_jsx(ThemeOverride, { theme: theme, children: _createElement(MenuItem, { ...hint, key: hint.id, role: 'menuitem' }) }), element);
                 }
             };
         })

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

	@@ -1 +1 @@
1	- {"version":3,"file":"getCodeSuggestions.js","sourceRoot":"","sources":["../../../../src/components/ExpressionBuilder/CodeEditor/getCodeSuggestions.tsx"],"names":[],"mappings":";;AAAA,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAGjC,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;~~AACrE~~,OAAO,QAAQ,MAAM,sDAAsD,CAAC;AAG5E,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,MAAM,kBAAkB,GAAG,CACzB,UAAkB,EAClB,EACE,WAAW,GAAG,EAAE,EAChB,OAAO,GAAG,KAAK,EACf,yBAAyB,GAAG;IAC1B,EAAE,EAAE,CAAC;IACL,IAAI,EAAE,CAAC;CACR,~~EACiB~~,EACpB,EAAE;IACF,MAAM,eAAe,GAAG,UAAU,CAAC,SAAS,EAAE,CAAC;IAC/C,MAAM,WAAW,GAAG,UAAU;SAC3B,QAAQ,EAAE;SACV,KAAK,CAAC,IAAI,CAAC,CACX,yBAAyB,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,yBAAyB,CAAC,EAAE,EAAE,eAAe,CAAC,EAAE,CAAC,CAAC;IAEhG,IAAI,YAAY,GAIV,EAAE,CAAC;IAET,IAAI,OAAO,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACxC,YAAY,GAAG;YACb;gBACE,IAAI,EAAE,EAAE;gBACR,WAAW,EAAE,EAAE;gBACf,MAAM,EAAE,CAAC,OAAsB,EAAE,EAAE;oBACjC,OAAO,CAAC,KAAK,CAAC,aAAa,GAAG,MAAM,CAAC;oBACrC,QAAQ,CAAC,MAAM,CACb,KAAC,IAAI,IACH,SAAS,EAAE;~~4BACT~~,OAAO,EAAE,QAAQ;~~4BACjB~~,GAAG,EAAE,CAAC;~~yBACP~~,YAEA,OAAO,CAAC,CAAC,CAAC,CACT,KAAC,QAAQ,~~IAAC~~,OAAO,EAAC,MAAM,~~EAAC~~,SAAS,EAAC,QAAQ,~~EAAC~~,OAAO,EAAE,OAAO,~~EAAE~~,EAAE,EAAE,aAAa,~~GAAI~~,~~CACpF~~,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,KAAG,CACf,GACI,~~EACP~~,OAAO,CACR,CAAC;gBACJ,CAAC;aACF;SACF,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,YAAY,GAAG,WAAW;aACvB,GAAG,CAAC,IAAI,CAAC,EAAE;YACV,OAAO;gBACL,IAAI,EAAE,IAAI,CAAC,EAAE;gBACb,WAAW,EAAE,IAAI,CAAC,OAAO;gBACzB,MAAM,EAAE,CAAC,OAAsB,EAAE,EAAE;oBACjC,QAAQ,CAAC,MAAM,~~CAAC~~,eAAC,QAAQ,OAAK,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAC,UAAU,GAAG,~~EAAE~~,OAAO,~~CAAC~~,CAAC;~~gBACjF~~,CAAC;aACF,CAAC;QACJ,CAAC,CAAC;aACD,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;IAC1F,CAAC;IAED,OAAO;QACL,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,GAAG,CAAC,eAAe,CAAC,IAAI,EAAE,yBAAyB,CAAC,EAAE,GAAG,CAAC,CAAC;QACjE,EAAE,EAAE,GAAG,CAAC,eAAe,CAAC,IAAI,EAAE,eAAe,CAAC,EAAE,CAAC;KAClD,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import ReactDOM from 'react-dom';\nimport { Pos } from 'codemirror';\nimport type { Editor } from 'codemirror';\n\nimport { Progress, Flex, EmptyState } from '@pega/cosmos-react-core';\nimport MenuItem from '@pega/cosmos-react-core/lib/components/Menu/MenuItem';\n\nimport type { EditorHintOptions } from './CodeEditor.types';\nimport { StyledLoading } from './CodeEditor.styles';\n\nconst getCodeSuggestions = (\n codeMirror: Editor,\n {\n suggestions = [],\n loading = false,\n triggerCharacterCursorPos = {\n ch: 0,\n line: 0\n }\n }: EditorHintOptions\n) => {\n const currentPosition = codeMirror.getCursor();\n const filterQuery = codeMirror\n .getValue()\n .split('\\n')\n [triggerCharacterCursorPos.line]?.substring(triggerCharacterCursorPos.ch, currentPosition.ch);\n\n let filteredList: {\n text: string;\n displayText: string;\n render: (element: HTMLLIElement) => void;\n }[] = [];\n\n if (loading \|\| suggestions.length === 0) {\n filteredList = [\n {\n text: '',\n displayText: '',\n render: (element: HTMLLIElement) => {\n element.style.pointerEvents = 'none';\n ReactDOM.render(\n <Flex\n container={{\n justify: 'center',\n pad: 1\n }}\n >\n {loading ? (\n <Progress variant='ring' placement='inline' visible={loading} as={StyledLoading} />\n ) : (\n <EmptyState />\n )}\n </~~Flex~~>,\n element\n );\n }\n }\n ];\n } else {\n filteredList = suggestions\n .map(hint => {\n return {\n text: hint.id,\n displayText: hint.primary,\n render: (element: HTMLLIElement) => {\n ReactDOM.render(<MenuItem {...hint} key={hint.id} role='menuitem' ~~/>,~~ element);\n }\n };\n })\n .filter(item => item.displayText.toLowerCase().startsWith(filterQuery.toLowerCase()));\n }\n\n return {\n list: filteredList,\n from: Pos(currentPosition.line, triggerCharacterCursorPos.ch - 1),\n to: Pos(currentPosition.line, currentPosition.ch)\n };\n};\n\nexport default getCodeSuggestions;\n"]}
1	+ {"version":3,"file":"getCodeSuggestions.js","sourceRoot":"","sources":["../../../../src/components/ExpressionBuilder/CodeEditor/getCodeSuggestions.tsx"],"names":[],"mappings":";;AAAA,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAGjC,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACpF,OAAO,QAAQ,MAAM,sDAAsD,CAAC;AAG5E,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,MAAM,kBAAkB,GAAG,CACzB,UAAkB,EAClB,EACE,WAAW,GAAG,EAAE,EAChB,OAAO,GAAG,KAAK,EACf,yBAAyB,GAAG;IAC1B,EAAE,EAAE,CAAC;IACL,IAAI,EAAE,CAAC;CACR,EACD,KAAK,GAAG,EAAE,EACQ,EACpB,EAAE;IACF,MAAM,eAAe,GAAG,UAAU,CAAC,SAAS,EAAE,CAAC;IAC/C,MAAM,WAAW,GAAG,UAAU;SAC3B,QAAQ,EAAE;SACV,KAAK,CAAC,IAAI,CAAC,CACX,yBAAyB,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,yBAAyB,CAAC,EAAE,EAAE,eAAe,CAAC,EAAE,CAAC,CAAC;IAEhG,IAAI,YAAY,GAIV,EAAE,CAAC;IAET,IAAI,OAAO,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACxC,YAAY,GAAG;YACb;gBACE,IAAI,EAAE,EAAE;gBACR,WAAW,EAAE,EAAE;gBACf,MAAM,EAAE,CAAC,OAAsB,EAAE,EAAE;oBACjC,OAAO,CAAC,KAAK,CAAC,aAAa,GAAG,MAAM,CAAC;oBACrC,QAAQ,CAAC,MAAM,CACb,KAAC,aAAa,IAAC,KAAK,EAAE,KAAK,YACzB,KAAC,IAAI,IACH,SAAS,EAAE;gCACT,OAAO,EAAE,QAAQ;gCACjB,GAAG,EAAE,CAAC;6BACP,YAEA,OAAO,CAAC,CAAC,CAAC,CACT,KAAC,QAAQ,IACP,OAAO,EAAC,MAAM,EACd,SAAS,EAAC,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,aAAa,GACjB,CACH,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,KAAG,CACf,GACI,GACO,EAChB,OAAO,CACR,CAAC;gBACJ,CAAC;aACF;SACF,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,YAAY,GAAG,WAAW;aACvB,GAAG,CAAC,IAAI,CAAC,EAAE;YACV,OAAO;gBACL,IAAI,EAAE,IAAI,CAAC,EAAE;gBACb,WAAW,EAAE,IAAI,CAAC,OAAO;gBACzB,MAAM,EAAE,CAAC,OAAsB,EAAE,EAAE;oBACjC,QAAQ,CAAC,MAAM,CACb,KAAC,aAAa,IAAC,KAAK,EAAE,KAAK,YACzB,eAAC,QAAQ,OAAK,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAC,UAAU,GAAG,GACtC,EAChB,OAAO,CACR,CAAC;gBACJ,CAAC;aACF,CAAC;QACJ,CAAC,CAAC;aACD,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;IAC1F,CAAC;IAED,OAAO;QACL,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,GAAG,CAAC,eAAe,CAAC,IAAI,EAAE,yBAAyB,CAAC,EAAE,GAAG,CAAC,CAAC;QACjE,EAAE,EAAE,GAAG,CAAC,eAAe,CAAC,IAAI,EAAE,eAAe,CAAC,EAAE,CAAC;KAClD,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import ReactDOM from 'react-dom';\nimport { Pos } from 'codemirror';\nimport type { Editor } from 'codemirror';\n\nimport { Progress, Flex, EmptyState, ThemeOverride } from '@pega/cosmos-react-core';\nimport MenuItem from '@pega/cosmos-react-core/lib/components/Menu/MenuItem';\n\nimport type { EditorHintOptions } from './CodeEditor.types';\nimport { StyledLoading } from './CodeEditor.styles';\n\nconst getCodeSuggestions = (\n codeMirror: Editor,\n {\n suggestions = [],\n loading = false,\n triggerCharacterCursorPos = {\n ch: 0,\n line: 0\n },\n theme = {}\n }: EditorHintOptions\n) => {\n const currentPosition = codeMirror.getCursor();\n const filterQuery = codeMirror\n .getValue()\n .split('\\n')\n [triggerCharacterCursorPos.line]?.substring(triggerCharacterCursorPos.ch, currentPosition.ch);\n\n let filteredList: {\n text: string;\n displayText: string;\n render: (element: HTMLLIElement) => void;\n }[] = [];\n\n if (loading \|\| suggestions.length === 0) {\n filteredList = [\n {\n text: '',\n displayText: '',\n render: (element: HTMLLIElement) => {\n element.style.pointerEvents = 'none';\n ReactDOM.render(\n <ThemeOverride theme={theme}>\n <Flex\n container={{\n justify: 'center',\n pad: 1\n }}\n >\n {loading ? (\n <Progress\n variant='ring'\n placement='inline'\n visible={loading}\n as={StyledLoading}\n />\n ) : (\n <EmptyState />\n )}\n </Flex>\n </ThemeOverride>,\n element\n );\n }\n }\n ];\n } else {\n filteredList = suggestions\n .map(hint => {\n return {\n text: hint.id,\n displayText: hint.primary,\n render: (element: HTMLLIElement) => {\n ReactDOM.render(\n <ThemeOverride theme={theme}>\n <MenuItem {...hint} key={hint.id} role='menuitem' />\n </ThemeOverride>,\n element\n );\n }\n };\n })\n .filter(item => item.displayText.toLowerCase().startsWith(filterQuery.toLowerCase()));\n }\n\n return {\n list: filteredList,\n from: Pos(currentPosition.line, triggerCharacterCursorPos.ch - 1),\n to: Pos(currentPosition.line, currentPosition.ch)\n };\n};\n\nexport default getCodeSuggestions;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpressionBuilder.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.tsx"],"names":[],"mappings":"~~AAmBA~~,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAE/E,OAAO,KAAK,EAAuB,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;;;;~~AAsU7F~~,wBAAuE"}
1	+ {"version":3,"file":"ExpressionBuilder.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAE/E,OAAO,KAAK,EAAuB,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;;;;AAiV7F,wBAAuE"}

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useImperativeHandle, useMemo, useRef, useEffect } from 'react';
-import { Flex, SearchInput, useI18n, VisuallyHiddenText, withTestIds, useTestIds, useLiveLog, useAfterInitialEffect, Label, Text, Progress, AIButton, Button, TextArea } from '@pega/cosmos-react-core';
+import { Flex, SearchInput, useI18n, VisuallyHiddenText, withTestIds, useTestIds, useLiveLog, useAfterInitialEffect, Text, Progress, AIButton, Button, TextArea } from '@pega/cosmos-react-core';
 import ExpressionList from './ExpressionList';
-import { StyledExpressionWrapper, StyledClearButton, StyledExplanationContainer, StyledExpressionBuilder, StyledCodeEditorContainer, StyledExplainContainer, StyledExpressions, StyledFormField, StyledGeneratedExpression, StyledInsertButton } from './ExpressionBuilder.styles';
+import { StyledExpressionWrapper, StyledClearButton, StyledExplanationContainer, StyledExpressionBuilder, StyledCodeEditorContainer, StyledExplainContainer, StyledExpressions, StyledFormField, StyledGeneratedExpression, StyledInsertButton, StyledVerifyGeneratedExp } from './ExpressionBuilder.styles';
 import CodeEditor from './CodeEditor/CodeEditor';
 import ExpressionBuilderContext from './ExpressionBuilderContext';
 import { getExpressionBuilderIds } from './ExpressionBuilder.test-ids';
@@ -12,6 +12,7 @@ const ExpressionBuilder = forwardRef(({ testId, list, search, errors, defaultVal
     const textAreaRef = useRef(null);
     const codeEditorHandle = useRef(null);
     const generatedExpressionHandler = useRef(null);
+    const scrollableRef = useRef(null);
     const testIds = useTestIds(testId, getExpressionBuilderIds);
     const { describeExpressionTextArea, onGenerateExpression, loadingExpression = false, generatedExpression, onInsert } = generateExpression || {};
     const getExpression = () => {
@@ -66,10 +67,10 @@ const ExpressionBuilder = forwardRef(({ testId, list, search, errors, defaultVal
                         }, item: {
                             grow: 1,
                             basis: '50%'
-                        }, as: generateExpression ? StyledExpressions : undefined, children: [generateExpression && (_jsxs(_Fragment, { children: [_jsx(TextArea, { label: t('describe_expression'), defaultValue: describeExpressionTextArea?.defaultValue, autoResize: false, additionalInfo: describeExpressionTextArea?.additionalInfo, placeholder: describeExpressionTextArea?.placeholder, info: describeExpressionTextArea?.error, status: describeExpressionTextArea?.error ? 'error' : undefined, testId: testIds.describeExpression, ref: textAreaRef, row: 3 }), _jsx(Flex, { container: true, item: { alignSelf: 'end' }, children: loadingExpression ? (_jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [t('generating_expression'), _jsx(Progress, { placement: 'inline' })] })) : (onGenerateExpression && (_jsx(AIButton, { onClick: () => onGenerateExpression(textAreaRef.current?.value || ''), label: t('generate'), variant: 'secondary', "data-testid": testIds.generate }))) }), _jsxs(Flex, { container: { direction: 'column' }, item: { grow: 1 }, as: StyledGeneratedExpression, children: [_jsx(Label, { children: t('generated_expression') }), _jsx(CodeEditor, { codeEditorHandle: generatedExpressionHandler, editorConfigProps: {
-                                                    mode: 'expression',
-                                                    readOnly: true
-                                                }, readOnly: true, testId: testIds.generatedExpression }), _jsx(Text, { variant: 'secondary', children: t('verify_ai_generated_expression') }), loadingExpression && _jsx(Progress, { variant: 'ring', placement: 'local' })] }), onInsert && (_jsx(Button, { as: StyledInsertButton, onClick: () => onInsert(generatedExpressionHandler.current?.getValue() ?? ''), "data-testid": testIds.insert, children: t('insert') })), _jsx(Text, { variant: 'h4', children: t('library') })] })), _jsx(SearchInput, { testId: testIds.search, ...search }), _jsx(ExpressionBuilderContext.Provider, { value: ctxValue, children: _jsx(ExpressionList, { testId: testIds.root, ...list, onItemAdd: onItemAdd }) })] })] })), _jsxs(Flex, { container: {
+                        }, as: generateExpression ? StyledExpressions : undefined, ref: scrollableRef, children: [generateExpression && (_jsxs(_Fragment, { children: [_jsx(TextArea, { label: t('describe_expression'), defaultValue: describeExpressionTextArea?.defaultValue, autoResize: false, additionalInfo: describeExpressionTextArea?.additionalInfo, placeholder: describeExpressionTextArea?.placeholder, info: describeExpressionTextArea?.error, status: describeExpressionTextArea?.error ? 'error' : undefined, testId: testIds.describeExpression, ref: textAreaRef, row: 3 }), _jsx(Flex, { container: true, item: { alignSelf: 'end' }, children: loadingExpression ? (_jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [t('generating_expression'), _jsx(Progress, { placement: 'inline' })] })) : (onGenerateExpression && (_jsx(AIButton, { onClick: () => onGenerateExpression(textAreaRef.current?.value || ''), label: t('generate'), variant: 'secondary', "data-testid": testIds.generate }))) }), _jsxs(Flex, { container: { direction: 'column' }, item: { grow: 1 }, as: StyledGeneratedExpression, children: [_jsx(StyledFormField, { label: t('generated_expression'), children: _jsx(CodeEditor, { codeEditorHandle: generatedExpressionHandler, editorConfigProps: {
+                                                        mode: 'expression',
+                                                        readOnly: true
+                                                    }, readOnly: true, testId: testIds.generatedExpression }) }), _jsx(StyledVerifyGeneratedExp, { variant: 'secondary', children: t('verify_ai_generated_expression') }), loadingExpression && _jsx(Progress, { variant: 'ring', placement: 'local' })] }), onInsert && (_jsx(Button, { as: StyledInsertButton, onClick: () => onInsert(generatedExpressionHandler.current?.getValue() ?? ''), "data-testid": testIds.insert, children: t('insert') })), _jsx(Text, { variant: 'h4', children: t('library') })] })), _jsx(SearchInput, { testId: testIds.search, ...search }), _jsx(ExpressionBuilderContext.Provider, { value: ctxValue, children: _jsx(ExpressionList, { testId: testIds.root, ...list, onItemAdd: onItemAdd, scrollableRef: scrollableRef }) })] })] })), _jsxs(Flex, { container: {
                     direction: 'column',
                     gap: 1,
                     pad: [1, 2, 1, 1]

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":"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","sourcesContent":["import { forwardRef, useImperativeHandle, useMemo, useRef, useEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport {\n Flex,\n SearchInput,\n useI18n,\n VisuallyHiddenText,\n withTestIds,\n useTestIds,\n useLiveLog,\n useAfterInitialEffect,\n Label,\n Text,\n Progress,\n AIButton,\n Button,\n TextArea\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\n\nimport type { ExpressionItemProps, ExpressionBuilderProps } from './ExpressionBuilder.types';\nimport type { EditorState } from './CodeEditor/CodeEditor.types';\nimport ExpressionList from './ExpressionList';\nimport {\n StyledExpressionWrapper,\n StyledClearButton,\n StyledExplanationContainer,\n StyledExpressionBuilder,\n StyledCodeEditorContainer,\n StyledExplainContainer,\n StyledExpressions,\n StyledFormField,\n StyledGeneratedExpression,\n StyledInsertButton\n} from './ExpressionBuilder.styles';\nimport CodeEditor from './CodeEditor/CodeEditor';\nimport ExpressionBuilderContext from './ExpressionBuilderContext';\nimport { getExpressionBuilderIds } from './ExpressionBuilder.test-ids';\n\nconst ExpressionBuilder: ForwardRefForwardPropsComponent<ExpressionBuilderProps> = forwardRef(\n (\n {\n testId,\n list,\n search,\n errors,\n defaultValue,\n handle,\n showEditorOnly = false,\n fetchSuggestions,\n loading,\n readOnly,\n onChange,\n inLineErrors,\n placeholder,\n generateExplanation,\n label,\n required,\n additionalInfo,\n generateExpression,\n ...restProps\n }: PropsWithoutRef<ExpressionBuilderProps>,\n ref: ExpressionBuilderProps['ref']\n ) => {\n const t = useI18n();\n const { announcePolite } = useLiveLog();\n const textAreaRef = useRef<HTMLTextAreaElement \| null>(null);\n const codeEditorHandle = useRef<EditorState>(null);\n const generatedExpressionHandler = useRef<EditorState>(null);\n const testIds = useTestIds(testId, getExpressionBuilderIds);\n const {\n describeExpressionTextArea,\n onGenerateExpression,\n loadingExpression = false,\n generatedExpression,\n onInsert\n } = generateExpression \|\| {};\n\n const getExpression = () => {\n return codeEditorHandle.current?.getValue() \|\| '';\n };\n\n const insertExpression = (text: string, replaceContent?: boolean) => {\n return codeEditorHandle.current?.insertText(text, replaceContent);\n };\n\n useImperativeHandle(\n handle,\n () => ({\n getExpression,\n ...(!!generateExpression && { insertExpression })\n }),\n [getExpression, insertExpression]\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 useAfterInitialEffect(() => {\n if (generateExplanation?.loadingExplanation) {\n announcePolite({ message: t('generating_explanation') });\n } else if (generateExplanation?.explanation) {\n announcePolite({ message: t('explanation_generated') });\n }\n }, [generateExplanation?.loadingExplanation, generateExplanation?.explanation]);\n\n useAfterInitialEffect(() => {\n if (loadingExpression) {\n announcePolite({ message: t('generating_expression') });\n }\n if (generatedExpression && !loadingExpression) {\n announcePolite({ message: t('expression_generated') });\n }\n }, [loadingExpression, generatedExpression]);\n\n useEffect(() => {\n if (generatedExpression !== undefined) {\n generatedExpressionHandler.current?.insertText(generatedExpression, true);\n }\n }, [generatedExpression]);\n\n return (\n <StyledExpressionBuilder\n data-testid={testIds.root}\n {...restProps}\n ref={ref}\n container={{\n justify: 'between'\n }}\n item={{\n grow: 1\n }}\n showEditorOnly={showEditorOnly}\n showGenerateExpression={!!generateExpression}\n >\n {/* Results count and Column 1 /}\n {!readOnly && !showEditorOnly && (\n <>\n <VisuallyHiddenText aria-live='polite' role='status'>\n {t('results_count', [list.items?.length \|\| 0], { count: list.items?.length \|\| 0 })}\n </VisuallyHiddenText>\n <Flex\n container={{\n direction: 'column',\n justify: 'between',\n gap: 1,\n pad: [1, 1, 1, 2]\n }}\n item={{\n grow: 1,\n basis: '50%'\n }}\n as={generateExpression ? StyledExpressions : undefined}\n >\n {generateExpression && (\n <>\n <TextArea\n label={t('describe_expression')}\n defaultValue={describeExpressionTextArea?.defaultValue}\n autoResize={false}\n additionalInfo={describeExpressionTextArea?.additionalInfo}\n placeholder={describeExpressionTextArea?.placeholder}\n info={describeExpressionTextArea?.error}\n status={describeExpressionTextArea?.error ? 'error' : undefined}\n testId={testIds.describeExpression}\n ref={textAreaRef}\n row={3}\n />\n\n <Flex container item={{ alignSelf: 'end' }}>\n {loadingExpression ? (\n <Flex container={{ gap: 1, alignItems: 'center' }}>\n {t('generating_expression')}\n <Progress placement='inline' />\n </Flex>\n ) : (\n onGenerateExpression && (\n <AIButton\n onClick={() => onGenerateExpression(textAreaRef.current?.value \|\| '')}\n label={t('generate')}\n variant='secondary'\n data-testid={testIds.generate}\n />\n )\n )}\n </Flex>\n\n <Flex\n container={{ direction: 'column' }}\n item={{ grow: 1 }}\n as={StyledGeneratedExpression}\n >\n <Label>{t('generated_expression')}</Label>\n <CodeEditor\n codeEditorHandle={generatedExpressionHandler}\n editorConfigProps={{\n mode: 'expression',\n readOnly: true\n }}\n readOnly\n testId={testIds.generatedExpression}\n />\n <Text variant='secondary'>{t('verify_ai_generated_expression')}</Text>\n {loadingExpression && <Progress variant='ring' placement='local' />}\n </Flex>\n\n {onInsert && (\n <Button\n as={StyledInsertButton}\n onClick={() => onInsert(generatedExpressionHandler.current?.getValue() ?? '')}\n data-testid={testIds.insert}\n >\n {t('insert')}\n </Button>\n )}\n\n <Text variant='h4'>{t('library')}</Text>\n </>\n )}\n <SearchInput testId={testIds.search} {...search} />\n <ExpressionBuilderContext.Provider value={ctxValue}>\n <ExpressionList testId={testIds.root} {...list} onItemAdd={onItemAdd} />\n </ExpressionBuilderContext.Provider>\n </Flex>\n </>\n )}\n {/ Column 2 */}\n <Flex\n container={{\n direction: 'column',\n gap: 1,\n pad: [1, 2, 1, 1]\n }}\n item={{\n grow: 1,\n basis: '50%'\n }}\n as={StyledExpressionWrapper}\n >\n <Flex\n container\n as={StyledCodeEditorContainer}\n explainEnabled={!!generateExplanation?.onExplain}\n >\n {label ? (\n <StyledFormField label={label} additionalInfo={additionalInfo} required={required}>\n <CodeEditor\n testId={testIds.root}\n fetchSuggestions={fetchSuggestions}\n codeEditorHandle={codeEditorHandle}\n autoCompleteTriggers={['.', '@', ':', '#', '(', ')']}\n editorConfigProps={{\n mode: 'expression',\n readOnly,\n lineNumbers: true,\n placeholder\n }}\n defaultValue={defaultValue}\n loading={loading}\n errors={errors}\n readOnly={readOnly}\n onChange={onChange}\n aria-label={t('expression_editor')}\n showEditorOnly={showEditorOnly}\n inLineErrors={inLineErrors}\n />\n </StyledFormField>\n ) : (\n <CodeEditor\n testId={testIds.root}\n fetchSuggestions={fetchSuggestions}\n codeEditorHandle={codeEditorHandle}\n autoCompleteTriggers={['.', '@', ':', '#', '(', ')']}\n editorConfigProps={{\n mode: 'expression',\n readOnly,\n lineNumbers: true,\n placeholder\n }}\n defaultValue={defaultValue}\n loading={loading}\n errors={errors}\n readOnly={readOnly}\n onChange={onChange}\n aria-label={t('expression_editor')}\n showEditorOnly={showEditorOnly}\n inLineErrors={inLineErrors}\n />\n )}\n </Flex>\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Flex container item={{ alignSelf: 'end' }} as={StyledExplainContainer}>\n {generateExplanation?.loadingExplanation ? (\n <Flex container={{ gap: 1, alignItems: 'center' }}>\n {t('generating_explanation')}\n <Progress placement='inline' />\n </Flex>\n ) : (\n <AIButton\n onClick={generateExplanation?.onExplain}\n label={t('explain')}\n variant='secondary'\n data-testid={testIds.explain}\n />\n )}\n </Flex>\n <Flex as={StyledExplanationContainer} container={{ direction: 'column' }}>\n <TextArea\n label={t('generated_explanation')}\n value={generateExplanation?.explanation}\n autoResize={false}\n testId={testIds.explanation}\n readOnly\n />\n {generateExplanation?.loadingExplanation && (\n <Progress variant='ring' placement='local' />\n )}\n </Flex>\n\n {generateExplanation?.onClearExplanation && (\n <Button\n as={StyledClearButton}\n onClick={generateExplanation.onClearExplanation}\n data-testid={testIds.clear}\n >\n {t('clear')}\n </Button>\n )}\n </Flex>\n </Flex>\n </StyledExpressionBuilder>\n );\n }\n);\n\nexport default withTestIds(ExpressionBuilder, getExpressionBuilderIds);\n"]}
1	+ {"version":3,"file":"ExpressionBuilder.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useImperativeHandle, useMemo, useRef, useEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport {\n Flex,\n SearchInput,\n useI18n,\n VisuallyHiddenText,\n withTestIds,\n useTestIds,\n useLiveLog,\n useAfterInitialEffect,\n Text,\n Progress,\n AIButton,\n Button,\n TextArea\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\n\nimport type { ExpressionItemProps, ExpressionBuilderProps } from './ExpressionBuilder.types';\nimport type { EditorState } from './CodeEditor/CodeEditor.types';\nimport ExpressionList from './ExpressionList';\nimport {\n StyledExpressionWrapper,\n StyledClearButton,\n StyledExplanationContainer,\n StyledExpressionBuilder,\n StyledCodeEditorContainer,\n StyledExplainContainer,\n StyledExpressions,\n StyledFormField,\n StyledGeneratedExpression,\n StyledInsertButton,\n StyledVerifyGeneratedExp\n} from './ExpressionBuilder.styles';\nimport CodeEditor from './CodeEditor/CodeEditor';\nimport ExpressionBuilderContext from './ExpressionBuilderContext';\nimport { getExpressionBuilderIds } from './ExpressionBuilder.test-ids';\n\nconst ExpressionBuilder: ForwardRefForwardPropsComponent<ExpressionBuilderProps> = forwardRef(\n (\n {\n testId,\n list,\n search,\n errors,\n defaultValue,\n handle,\n showEditorOnly = false,\n fetchSuggestions,\n loading,\n readOnly,\n onChange,\n inLineErrors,\n placeholder,\n generateExplanation,\n label,\n required,\n additionalInfo,\n generateExpression,\n ...restProps\n }: PropsWithoutRef<ExpressionBuilderProps>,\n ref: ExpressionBuilderProps['ref']\n ) => {\n const t = useI18n();\n const { announcePolite } = useLiveLog();\n const textAreaRef = useRef<HTMLTextAreaElement \| null>(null);\n const codeEditorHandle = useRef<EditorState>(null);\n const generatedExpressionHandler = useRef<EditorState>(null);\n const scrollableRef = useRef<HTMLDivElement>(null);\n const testIds = useTestIds(testId, getExpressionBuilderIds);\n const {\n describeExpressionTextArea,\n onGenerateExpression,\n loadingExpression = false,\n generatedExpression,\n onInsert\n } = generateExpression \|\| {};\n\n const getExpression = () => {\n return codeEditorHandle.current?.getValue() \|\| '';\n };\n\n const insertExpression = (text: string, replaceContent?: boolean) => {\n return codeEditorHandle.current?.insertText(text, replaceContent);\n };\n\n useImperativeHandle(\n handle,\n () => ({\n getExpression,\n ...(!!generateExpression && { insertExpression })\n }),\n [getExpression, insertExpression]\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 useAfterInitialEffect(() => {\n if (generateExplanation?.loadingExplanation) {\n announcePolite({ message: t('generating_explanation') });\n } else if (generateExplanation?.explanation) {\n announcePolite({ message: t('explanation_generated') });\n }\n }, [generateExplanation?.loadingExplanation, generateExplanation?.explanation]);\n\n useAfterInitialEffect(() => {\n if (loadingExpression) {\n announcePolite({ message: t('generating_expression') });\n }\n if (generatedExpression && !loadingExpression) {\n announcePolite({ message: t('expression_generated') });\n }\n }, [loadingExpression, generatedExpression]);\n\n useEffect(() => {\n if (generatedExpression !== undefined) {\n generatedExpressionHandler.current?.insertText(generatedExpression, true);\n }\n }, [generatedExpression]);\n\n return (\n <StyledExpressionBuilder\n data-testid={testIds.root}\n {...restProps}\n ref={ref}\n container={{\n justify: 'between'\n }}\n item={{\n grow: 1\n }}\n showEditorOnly={showEditorOnly}\n showGenerateExpression={!!generateExpression}\n >\n {/* Results count and Column 1 /}\n {!readOnly && !showEditorOnly && (\n <>\n <VisuallyHiddenText aria-live='polite' role='status'>\n {t('results_count', [list.items?.length \|\| 0], { count: list.items?.length \|\| 0 })}\n </VisuallyHiddenText>\n <Flex\n container={{\n direction: 'column',\n justify: 'between',\n gap: 1,\n pad: [1, 1, 1, 2]\n }}\n item={{\n grow: 1,\n basis: '50%'\n }}\n as={generateExpression ? StyledExpressions : undefined}\n ref={scrollableRef}\n >\n {generateExpression && (\n <>\n <TextArea\n label={t('describe_expression')}\n defaultValue={describeExpressionTextArea?.defaultValue}\n autoResize={false}\n additionalInfo={describeExpressionTextArea?.additionalInfo}\n placeholder={describeExpressionTextArea?.placeholder}\n info={describeExpressionTextArea?.error}\n status={describeExpressionTextArea?.error ? 'error' : undefined}\n testId={testIds.describeExpression}\n ref={textAreaRef}\n row={3}\n />\n\n <Flex container item={{ alignSelf: 'end' }}>\n {loadingExpression ? (\n <Flex container={{ gap: 1, alignItems: 'center' }}>\n {t('generating_expression')}\n <Progress placement='inline' />\n </Flex>\n ) : (\n onGenerateExpression && (\n <AIButton\n onClick={() => onGenerateExpression(textAreaRef.current?.value \|\| '')}\n label={t('generate')}\n variant='secondary'\n data-testid={testIds.generate}\n />\n )\n )}\n </Flex>\n\n <Flex\n container={{ direction: 'column' }}\n item={{ grow: 1 }}\n as={StyledGeneratedExpression}\n >\n <StyledFormField label={t('generated_expression')}>\n <CodeEditor\n codeEditorHandle={generatedExpressionHandler}\n editorConfigProps={{\n mode: 'expression',\n readOnly: true\n }}\n readOnly\n testId={testIds.generatedExpression}\n />\n </StyledFormField>\n <StyledVerifyGeneratedExp variant='secondary'>\n {t('verify_ai_generated_expression')}\n </StyledVerifyGeneratedExp>\n {loadingExpression && <Progress variant='ring' placement='local' />}\n </Flex>\n\n {onInsert && (\n <Button\n as={StyledInsertButton}\n onClick={() => onInsert(generatedExpressionHandler.current?.getValue() ?? '')}\n data-testid={testIds.insert}\n >\n {t('insert')}\n </Button>\n )}\n\n <Text variant='h4'>{t('library')}</Text>\n </>\n )}\n <SearchInput testId={testIds.search} {...search} />\n <ExpressionBuilderContext.Provider value={ctxValue}>\n <ExpressionList\n testId={testIds.root}\n {...list}\n onItemAdd={onItemAdd}\n scrollableRef={scrollableRef}\n />\n </ExpressionBuilderContext.Provider>\n </Flex>\n </>\n )}\n {/ Column 2 */}\n <Flex\n container={{\n direction: 'column',\n gap: 1,\n pad: [1, 2, 1, 1]\n }}\n item={{\n grow: 1,\n basis: '50%'\n }}\n as={StyledExpressionWrapper}\n >\n <Flex\n container\n as={StyledCodeEditorContainer}\n explainEnabled={!!generateExplanation?.onExplain}\n >\n {label ? (\n <StyledFormField label={label} additionalInfo={additionalInfo} required={required}>\n <CodeEditor\n testId={testIds.root}\n fetchSuggestions={fetchSuggestions}\n codeEditorHandle={codeEditorHandle}\n autoCompleteTriggers={['.', '@', ':', '#', '(', ')']}\n editorConfigProps={{\n mode: 'expression',\n readOnly,\n lineNumbers: true,\n placeholder\n }}\n defaultValue={defaultValue}\n loading={loading}\n errors={errors}\n readOnly={readOnly}\n onChange={onChange}\n aria-label={t('expression_editor')}\n showEditorOnly={showEditorOnly}\n inLineErrors={inLineErrors}\n />\n </StyledFormField>\n ) : (\n <CodeEditor\n testId={testIds.root}\n fetchSuggestions={fetchSuggestions}\n codeEditorHandle={codeEditorHandle}\n autoCompleteTriggers={['.', '@', ':', '#', '(', ')']}\n editorConfigProps={{\n mode: 'expression',\n readOnly,\n lineNumbers: true,\n placeholder\n }}\n defaultValue={defaultValue}\n loading={loading}\n errors={errors}\n readOnly={readOnly}\n onChange={onChange}\n aria-label={t('expression_editor')}\n showEditorOnly={showEditorOnly}\n inLineErrors={inLineErrors}\n />\n )}\n </Flex>\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Flex container item={{ alignSelf: 'end' }} as={StyledExplainContainer}>\n {generateExplanation?.loadingExplanation ? (\n <Flex container={{ gap: 1, alignItems: 'center' }}>\n {t('generating_explanation')}\n <Progress placement='inline' />\n </Flex>\n ) : (\n <AIButton\n onClick={generateExplanation?.onExplain}\n label={t('explain')}\n variant='secondary'\n data-testid={testIds.explain}\n />\n )}\n </Flex>\n <Flex as={StyledExplanationContainer} container={{ direction: 'column' }}>\n <TextArea\n label={t('generated_explanation')}\n value={generateExplanation?.explanation}\n autoResize={false}\n testId={testIds.explanation}\n readOnly\n />\n {generateExplanation?.loadingExplanation && (\n <Progress variant='ring' placement='local' />\n )}\n </Flex>\n\n {generateExplanation?.onClearExplanation && (\n <Button\n as={StyledClearButton}\n onClick={generateExplanation.onClearExplanation}\n data-testid={testIds.clear}\n >\n {t('clear')}\n </Button>\n )}\n </Flex>\n </Flex>\n </StyledExpressionBuilder>\n );\n }\n);\n\nexport default withTestIds(ExpressionBuilder, getExpressionBuilderIds);\n"]}