@pega/cosmos-react-build 3.0.0-dev.9.1 → 3.0.0-rc.10

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

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

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

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

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

@@ -0,0 +1,35 @@
+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 interface EditorState {
+    getValue: () => string | undefined;
+    insertText: (text: string) => void;
+}
+export interface CodeEditorProps {
+    /** Default expression to set in the code editor */
+    defaultValue?: string;
+    /** Compiled error message */
+    errors?: string;
+    /** Enable read only mode */
+    readOnly?: boolean;
+    /** Fetches suggestion list for suggestions popover */
+    fetchSuggestions?: (autoCompleteTrigger: AutoCompleteTriggerChar, queryString: string) => Promise<SuggestionType[]>;
+    /** characters which triggers suggestions */
+    autoCompleteTriggers?: AutoCompleteTriggerChar[];
+    /** Code editor configuration props */
+    editorConfigProps?: EditorConfiguration;
+    /** To show loader for intellisense popover */
+    loading?: boolean;
+    /** Called when editor content changes. */
+    onChange?: (expression: string) => void;
+    codeEditorHandle: Ref<EditorState>;
+    ref?: Ref<HTMLDivElement>;
+}
+export interface EditorHintOptions extends ShowHintOptions {
+    suggestions?: SuggestionType[];
+    loading?: boolean;
+    triggerCharacterCursorPos?: Position;
+}
+//# sourceMappingURL=CodeEditor.types.d.ts.map

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

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

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=CodeEditor.types.js.map

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

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

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

@@ -0,0 +1,13 @@
+import { Editor } from 'codemirror';
+import { EditorHintOptions } from './CodeEditor.types';
+declare const getCodeSuggestions: (codeMirror: Editor, { suggestions, loading, triggerCharacterCursorPos }: EditorHintOptions) => {
+    list: {
+        text: string;
+        displayText: string;
+        render: (element: HTMLLIElement) => void;
+    }[];
+    from: import("codemirror").Position;
+    to: import("codemirror").Position;
+};
+export default getCodeSuggestions;
+//# sourceMappingURL=getCodeSuggestions.d.ts.map

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

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

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

@@ -0,0 +1,51 @@
+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 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
+} }) => {
+    const currentPosition = codeMirror.getCursor();
+    const filterQuery = codeMirror
+        .getValue()
+        .split('\n')[triggerCharacterCursorPos.line]?.substring(triggerCharacterCursorPos.ch, currentPosition.ch);
+    let filteredList = [];
+    if (loading || suggestions.length === 0) {
+        filteredList = [
+            {
+                text: '',
+                displayText: '',
+                render: (element) => {
+                    ReactDOM.render(_jsx(Flex, { container: {
+                            justify: 'center',
+                            pad: 1
+                        }, children: loading ? (_jsx(Progress, { variant: 'ring', placement: 'inline', visible: loading, as: StyledLoading })) : (_jsx(EmptyState, {})) }), element);
+                }
+            }
+        ];
+    }
+    else {
+        filteredList = suggestions
+            .map(hint => {
+            return {
+                text: hint.id,
+                displayText: hint.primary,
+                render: (element) => {
+                    ReactDOM.render(_createElement(MenuItem, { ...hint, key: hint.id, role: 'menuitem' }), element);
+                }
+            };
+        })
+            .filter(item => item.displayText.toLowerCase().startsWith(filterQuery.toLowerCase()));
+    }
+    return {
+        list: filteredList,
+        from: Pos(currentPosition.line, triggerCharacterCursorPos.ch - 1),
+        to: Pos(currentPosition.line, currentPosition.ch)
+    };
+};
+export default getCodeSuggestions;
+//# sourceMappingURL=getCodeSuggestions.js.map