@pega/cosmos-react-build 3.0.0-dev.26.0 → 3.0.0-dev.27.2

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

@@ -1,7 +1,10 @@
+// cSpell:words vscrollbar hscrollbar
 import styled, { css } from 'styled-components';
-import { defaultThemeProp, StyledButton, StyledText } from '@pega/cosmos-react-core';
+import { defaultThemeProp, StyledButton, StyledLabel, StyledText, Text } from '@pega/cosmos-react-core';
 import StyledTextArea from '@pega/cosmos-react-core/lib/components/TextArea/TextArea.styles';
-import { StyledFormField } from '@pega/cosmos-react-core/lib/components/FormField/FormField';
+export const StyledPrimaryText = styled(Text) `
+  word-break: break-word;
+`;
 export const StyledExpressionSummary = styled.div(({ theme }) => {
     return css `
     padding-block: ${theme.base.spacing};
@@ -16,6 +19,7 @@ export const StyledExpressionList = styled.ul `
 `;
 export const StyledExpressionBuilder = styled.div(({ theme }) => {
     return css `
+    position: relative;
     background-color: ${theme.base.palette['primary-background']};
     min-height: calc(30 * ${theme.base.spacing});
     max-height: 100%;
@@ -28,13 +32,6 @@ export const StyledExpressionBuilder = styled.div(({ theme }) => {
   `;
 });
 StyledExpressionBuilder.defaultProps = defaultThemeProp;
-export const StyledExpressionEditor = styled.div(() => {
-    return css `
-    ${StyledFormField} {
-      flex-grow: 1;
-    }
-  `;
-});
 export const StyledParamsGroup = styled.div(({ theme }) => {
     return css `
     margin-block-start: calc(2 * ${theme.base.spacing});
@@ -79,7 +76,475 @@ export const StyledExpressionItem = styled.li(({ theme, expanded }) => {
     ${StyledExpressionDetails} {
       padding-block-end: calc(2 * ${theme.base.spacing});
     }
+
+    ${StyledLabel} {
+      margin-inline-end: calc(0.5 * ${theme.base.spacing});
+      color: ${theme.base.palette['foreground-color']};
+    }
   `;
 });
 StyledExpressionItem.defaultProps = defaultThemeProp;
+export const StyledCodeEditor = styled.div(({ theme }) => {
+    return css `
+    /* PADDING */
+
+    .CodeMirror-lines {
+      cursor: text;
+      min-height: 0.063rem; /* prevents collapsing before first draw */
+      padding: 0.25rem 0; /* Vertical padding around content */
+    }
+
+    .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 ${theme.base.palette['border-line']};
+      border-right: none;
+      width: 0;
+    }
+
+    /* 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-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;
+      height: 18.75rem;
+      direction: ltr;
+      position: absolute;
+      background-color: ${theme.base.palette['background-color']};
+      color: ${theme.base.palette['foreground-color']};
+      max-height: 98%;
+      max-width: 49%;
+      border: 0.0625rem solid ${theme.base.palette['border-line']};
+      border-radius: calc(0.5 * ${theme.base['border-radius']});
+    }
+    .cm-ex-properties {
+      color: ${theme.base.palette.success};
+    }
+    .cm-ex-functions {
+      color: ${theme.base.palette.warn};
+    }
+    .CodeMirror-hints {
+      position: absolute;
+      z-index: 10;
+      overflow: hidden;
+      list-style: none;
+      margin: 0;
+      padding: 0.125rem;
+      -webkit-box-shadow: 0.125rem 0.188rem 0.313rem rgba(0, 0, 0, 0.2);
+      -moz-box-shadow: 0.125rem 0.188rem 0.313rem rgba(0, 0, 0, 0.2);
+      box-shadow: 0.125rem 0.188rem 0.313rem rgba(0, 0, 0, 0.2);
+      border-radius: 0.188rem;
+      border: 0.063rem solid silver;
+      background: white;
+      font-size: 90%;
+      font-family: monospace;
+      max-height: 20em;
+      overflow-y: auto;
+    }
+
+    .CodeMirror-hint {
+      margin: 0;
+      padding: 0 0.25rem;
+      border-radius: 0.125rem;
+      white-space: pre;
+      color: black;
+      cursor: pointer;
+    }
+
+    li.CodeMirror-hint-active {
+      background: #0088ff;
+      color: white;
+    }
+  `;
+});
+StyledCodeEditor.defaultProps = defaultThemeProp;
 //# sourceMappingURL=ExpressionBuilder.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExpressionBuilder.styles.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, StyledButton, StyledText } from '@pega/cosmos-react-core';\nimport StyledTextArea from '@pega/cosmos-react-core/lib/components/TextArea/TextArea.styles';\nimport { StyledFormField } from '@pega/cosmos-react-core/lib/components/FormField/FormField';\n\nimport { ExpressionItemProps } from './ExpressionBuilder.types';\n\nexport const StyledExpressionSummary = styled.div(({ theme }) => {\n  return css`\n    padding-block: ${theme.base.spacing};\n    padding-inline: calc(0.5 * ${theme.base.spacing});\n  `;\n});\n\nStyledExpressionSummary.defaultProps = defaultThemeProp;\n\nexport const StyledExpressionList = styled.ul`\n  overflow-y: auto;\n  flex-grow: 1;\n  list-style: none;\n`;\n\nexport const StyledExpressionBuilder = styled.div(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['primary-background']};\n    min-height: calc(30 * ${theme.base.spacing});\n    max-height: 100%;\n    max-width: calc(2 * ${theme.base['content-width'].lg} + 4 * ${theme.base.spacing});\n    min-width: calc(${theme.base['content-width'].lg} + 4 * ${theme.base.spacing});\n\n    ${StyledTextArea} {\n      flex-grow: 1;\n    }\n  `;\n});\n\nStyledExpressionBuilder.defaultProps = defaultThemeProp;\n\nexport const StyledExpressionEditor = styled.div(() => {\n  return css`\n    ${StyledFormField} {\n      flex-grow: 1;\n    }\n  `;\n});\n\nexport const StyledParamsGroup = styled.div(({ theme }) => {\n  return css`\n    margin-block-start: calc(2 * ${theme.base.spacing});\n\n    ${StyledText} {\n      margin-block-end: ${theme.base.spacing};\n    }\n  `;\n});\n\nStyledParamsGroup.defaultProps = defaultThemeProp;\n\nexport const StyledInputParamsGroup = styled(StyledParamsGroup)(({ theme }) => {\n  return css`\n    max-width: ${theme.base['content-width'].lg};\n  `;\n});\n\nStyledInputParamsGroup.defaultProps = defaultThemeProp;\n\nexport const StyledExpressionDetails = styled.div``;\n\nStyledExpressionDetails.defaultProps = defaultThemeProp;\n\nexport const StyledExpandCollapseContent = styled.div(({ theme }) => {\n  return css`\n    padding-inline: calc(2 * ${theme.base.spacing});\n    padding-block-end: calc(2 * ${theme.base.spacing});\n    ${StyledButton} {\n      align-self: flex-end;\n    }\n  `;\n});\n\nStyledExpandCollapseContent.defaultProps = defaultThemeProp;\n\nexport const StyledExpressionItem = styled.li<{\n  expanded: ExpressionItemProps['expanded'];\n}>(({ theme, expanded }) => {\n  return css`\n    list-style: none;\n    background-color: ${theme.base.palette['primary-background']};\n    ${expanded &&\n    css`\n      background-color: ${theme.base.palette['secondary-background']};\n    `}\n\n    :not(:last-child) {\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n\n    ${StyledExpressionDetails} {\n      padding-block-end: calc(2 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledExpressionItem.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"ExpressionBuilder.styles.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.styles.ts"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,WAAW,EACX,UAAU,EACV,IAAI,EACL,MAAM,yBAAyB,CAAC;AACjC,OAAO,cAAc,MAAM,iEAAiE,CAAC;AAI7F,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAE5C,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,OAAO,GAAG,CAAA;qBACS,KAAK,CAAC,IAAI,CAAC,OAAO;iCACN,KAAK,CAAC,IAAI,CAAC,OAAO;GAChD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,EAAE,CAAA;;;;CAI5C,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,OAAO,GAAG,CAAA;;wBAEY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;4BACpC,KAAK,CAAC,IAAI,CAAC,OAAO;;0BAEpB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,UAAU,KAAK,CAAC,IAAI,CAAC,OAAO;sBAC9D,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,UAAU,KAAK,CAAC,IAAI,CAAC,OAAO;;MAE1E,cAAc;;;GAGjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACxD,OAAO,GAAG,CAAA;mCACuB,KAAK,CAAC,IAAI,CAAC,OAAO;;MAE/C,UAAU;0BACU,KAAK,CAAC,IAAI,CAAC,OAAO;;GAEzC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5E,OAAO,GAAG,CAAA;iBACK,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;GAC5C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEpD,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,2BAA2B,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClE,OAAO,GAAG,CAAA;+BACmB,KAAK,CAAC,IAAI,CAAC,OAAO;kCACf,KAAK,CAAC,IAAI,CAAC,OAAO;MAC9C,YAAY;;;GAGf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,2BAA2B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5D,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,EAAE,CAE1C,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IACzB,OAAO,GAAG,CAAA;;wBAEY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;MAC1D,QAAQ;QACV,GAAG,CAAA;0BACmB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC;KAC/D;;;uCAGkC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;MAGlE,uBAAuB;oCACO,KAAK,CAAC,IAAI,CAAC,OAAO;;;MAGhD,WAAW;sCACqB,KAAK,CAAC,IAAI,CAAC,OAAO;eACzC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;GAElD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qCA8CyB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAgX5C,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;eACjD,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;;gCAGrB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;kCAC/B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;eAG9C,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO;;;eAG1B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCnC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["// cSpell:words vscrollbar hscrollbar\nimport styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  StyledButton,\n  StyledLabel,\n  StyledText,\n  Text\n} from '@pega/cosmos-react-core';\nimport StyledTextArea from '@pega/cosmos-react-core/lib/components/TextArea/TextArea.styles';\n\nimport { ExpressionItemProps } from './ExpressionBuilder.types';\n\nexport const StyledPrimaryText = styled(Text)`\n  word-break: break-word;\n`;\n\nexport const StyledExpressionSummary = styled.div(({ theme }) => {\n  return css`\n    padding-block: ${theme.base.spacing};\n    padding-inline: calc(0.5 * ${theme.base.spacing});\n  `;\n});\n\nStyledExpressionSummary.defaultProps = defaultThemeProp;\n\nexport const StyledExpressionList = styled.ul`\n  overflow-y: auto;\n  flex-grow: 1;\n  list-style: none;\n`;\n\nexport const StyledExpressionBuilder = styled.div(({ theme }) => {\n  return css`\n    position: relative;\n    background-color: ${theme.base.palette['primary-background']};\n    min-height: calc(30 * ${theme.base.spacing});\n    max-height: 100%;\n    max-width: calc(2 * ${theme.base['content-width'].lg} + 4 * ${theme.base.spacing});\n    min-width: calc(${theme.base['content-width'].lg} + 4 * ${theme.base.spacing});\n\n    ${StyledTextArea} {\n      flex-grow: 1;\n    }\n  `;\n});\n\nStyledExpressionBuilder.defaultProps = defaultThemeProp;\n\nexport const StyledParamsGroup = styled.div(({ theme }) => {\n  return css`\n    margin-block-start: calc(2 * ${theme.base.spacing});\n\n    ${StyledText} {\n      margin-block-end: ${theme.base.spacing};\n    }\n  `;\n});\n\nStyledParamsGroup.defaultProps = defaultThemeProp;\n\nexport const StyledInputParamsGroup = styled(StyledParamsGroup)(({ theme }) => {\n  return css`\n    max-width: ${theme.base['content-width'].lg};\n  `;\n});\n\nStyledInputParamsGroup.defaultProps = defaultThemeProp;\n\nexport const StyledExpressionDetails = styled.div``;\n\nStyledExpressionDetails.defaultProps = defaultThemeProp;\n\nexport const StyledExpandCollapseContent = styled.div(({ theme }) => {\n  return css`\n    padding-inline: calc(2 * ${theme.base.spacing});\n    padding-block-end: calc(2 * ${theme.base.spacing});\n    ${StyledButton} {\n      align-self: flex-end;\n    }\n  `;\n});\n\nStyledExpandCollapseContent.defaultProps = defaultThemeProp;\n\nexport const StyledExpressionItem = styled.li<{\n  expanded: ExpressionItemProps['expanded'];\n}>(({ theme, expanded }) => {\n  return css`\n    list-style: none;\n    background-color: ${theme.base.palette['primary-background']};\n    ${expanded &&\n    css`\n      background-color: ${theme.base.palette['secondary-background']};\n    `}\n\n    :not(:last-child) {\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n\n    ${StyledExpressionDetails} {\n      padding-block-end: calc(2 * ${theme.base.spacing});\n    }\n\n    ${StyledLabel} {\n      margin-inline-end: calc(0.5 * ${theme.base.spacing});\n      color: ${theme.base.palette['foreground-color']};\n    }\n  `;\n});\n\nStyledExpressionItem.defaultProps = defaultThemeProp;\n\nexport const StyledCodeEditor = styled.div(({ theme }) => {\n  return css`\n    /* PADDING */\n\n    .CodeMirror-lines {\n      cursor: text;\n      min-height: 0.063rem; /* prevents collapsing before first draw */\n      padding: 0.25rem 0; /* Vertical padding around content */\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 ${theme.base.palette['border-line']};\n      border-right: none;\n      width: 0;\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-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      height: 18.75rem;\n      direction: ltr;\n      position: absolute;\n      background-color: ${theme.base.palette['background-color']};\n      color: ${theme.base.palette['foreground-color']};\n      max-height: 98%;\n      max-width: 49%;\n      border: 0.0625rem solid ${theme.base.palette['border-line']};\n      border-radius: calc(0.5 * ${theme.base['border-radius']});\n    }\n    .cm-ex-properties {\n      color: ${theme.base.palette.success};\n    }\n    .cm-ex-functions {\n      color: ${theme.base.palette.warn};\n    }\n    .CodeMirror-hints {\n      position: absolute;\n      z-index: 10;\n      overflow: hidden;\n      list-style: none;\n      margin: 0;\n      padding: 0.125rem;\n      -webkit-box-shadow: 0.125rem 0.188rem 0.313rem rgba(0, 0, 0, 0.2);\n      -moz-box-shadow: 0.125rem 0.188rem 0.313rem rgba(0, 0, 0, 0.2);\n      box-shadow: 0.125rem 0.188rem 0.313rem rgba(0, 0, 0, 0.2);\n      border-radius: 0.188rem;\n      border: 0.063rem solid silver;\n      background: white;\n      font-size: 90%;\n      font-family: monospace;\n      max-height: 20em;\n      overflow-y: auto;\n    }\n\n    .CodeMirror-hint {\n      margin: 0;\n      padding: 0 0.25rem;\n      border-radius: 0.125rem;\n      white-space: pre;\n      color: black;\n      cursor: pointer;\n    }\n\n    li.CodeMirror-hint-active {\n      background: #0088ff;\n      color: white;\n    }\n  `;\n});\n\nStyledCodeEditor.defaultProps = defaultThemeProp;\n"]}

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

@@ -1,5 +1,6 @@
 import { ComponentType, Ref } from 'react';
-import { BaseProps, EmptyStateProps, OmitStrict, SearchInputProps, TextAreaProps, FieldValueListProps } from '@pega/cosmos-react-core';
+import { ShowHintOptions, EditorConfiguration } from 'codemirror';
+import { BaseProps, EmptyStateProps, OmitStrict, SearchInputProps, TextAreaProps, FieldValueListProps, MenuProps } from '@pega/cosmos-react-core';
 export interface ExpressionItemProps {
     /** Id of the item */
     id: string;
@@ -17,6 +18,11 @@ export interface ExpressionItemProps {
     expanded?: boolean;
     /** Expression details to show in expanded view */
     details?: ExpressionDetailsProps;
+    /** Matched field to be shown in expression item collapsed mode during search */
+    matchedField?: {
+        name: string;
+        value: string;
+    };
 }
 export interface ExpressionListProps extends BaseProps {
     ref?: Ref<HTMLDivElement>;
@@ -39,6 +45,11 @@ export interface HandleValue {
     /** Returns the expression value */
     getExpression: () => string;
 }
+export declare type AutoCompleteTriggerType = '@' | '.';
+export declare type SuggestionsType = {
+    label: string;
+    value: string;
+};
 export interface ExpressionBuilderProps extends BaseProps {
     ref?: Ref<HTMLDivElement>;
     /** Expression items list */
@@ -46,13 +57,19 @@ export interface ExpressionBuilderProps extends BaseProps {
         onItemAdd: (id: ExpressionItemProps['id'], addExpression: (expression: string) => void) => void;
     };
     /** Search input props */
-    search: Pick<Required<SearchInputProps>, 'filters' | 'onFilterChange' | 'onSearchChange' | 'value'> & Pick<SearchInputProps, 'defaultFilter'>;
-    /** Default expression to set in the text area */
+    search: Pick<Required<SearchInputProps>, 'filters' | 'onFilterChange' | 'onSearchChange' | 'value'> & Pick<SearchInputProps, 'defaultFilter'> & Pick<MenuProps, 'accent'>;
+    /** Default expression to set in the code editor */
     defaultValue?: string;
     /** Compiled error message */
     errors?: TextAreaProps['info'];
     /** Imperative handle */
     handle?: Ref<HandleValue>;
+    /** Fetches suggestion list for suggestions popover */
+    fetchSuggestions?: (autoCompleteTrigger: AutoCompleteTriggerType) => Promise<SuggestionsType[]>;
+    /** characters which triggers suggestions */
+    autoCompleteTriggers?: AutoCompleteTriggerType[];
+    /** Code editor configuration props */
+    editorConfigProps?: EditorConfiguration;
 }
 export interface InputParams<P> {
     id: string;
@@ -69,4 +86,17 @@ export interface ExpressionDetailsProps extends BaseProps {
     /** Ref to the component */
     ref?: Ref<HTMLElement>;
 }
+export declare type EditorState = {
+    getValue: () => string | undefined;
+    insertText: (text: string) => void;
+};
+export interface CodeEditorProps extends OmitStrict<ExpressionBuilderProps, 'list' | 'search'> {
+    ref?: Ref<HTMLDivElement>;
+    codeEditorHandle: Ref<EditorState>;
+    /** Default expression to set in the code editor */
+    defaultValue?: string;
+}
+export interface EditorHintOptions extends ShowHintOptions {
+    suggestions?: SuggestionsType[];
+}
 //# sourceMappingURL=ExpressionBuilder.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExpressionBuilder.types.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ExpressionBuilder.types.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.types.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"ExpressionBuilder.types.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentType, Ref } from 'react';\n\nimport {\n  BaseProps,\n  EmptyStateProps,\n  OmitStrict,\n  SearchInputProps,\n  TextAreaProps,\n  FieldValueListProps\n} from '@pega/cosmos-react-core';\n\nexport interface ExpressionItemProps {\n  /** Id of the item */\n  id: string;\n  /** Item name to be displayed as rule name */\n  primary: string;\n  /** Type of expression item. Eg: Decision, When, Automation etc. */\n  type: string;\n  /** Callback for add event */\n  onAdd: (id: ExpressionItemProps['id']) => void;\n  /** Callback for expand event */\n  onExpand?: (id: ExpressionItemProps['id']) => void;\n  /** Callback for collapse event */\n  onCollapse?: (id: ExpressionItemProps['id']) => void;\n  /** Show the expanded details */\n  expanded?: boolean;\n  /** Expression details to show in expanded view */\n  details?: ExpressionDetailsProps;\n}\n\nexport interface ExpressionListProps extends BaseProps {\n  ref?: Ref<HTMLDivElement>;\n  /** Expression builder items */\n  items?: OmitStrict<ExpressionItemProps, 'onAdd' | 'onExpand' | 'onCollapse' | 'details'>[];\n  /** Callback for item add */\n  onItemAdd: ExpressionItemProps['onAdd'];\n  /** Callback for item expand */\n  onItemExpand?: ExpressionItemProps['onExpand'];\n  /** Callback for item collapse */\n  onItemCollapse?: ExpressionItemProps['onCollapse'];\n  /** No items */\n  emptyText?: EmptyStateProps['message'];\n  /** Expanded items data */\n  details: {\n    [id: string]: ExpressionDetailsProps;\n  };\n}\n\nexport interface HandleValue {\n  /** Returns the expression value */\n  getExpression: () => string;\n}\n\nexport interface ExpressionBuilderProps extends BaseProps {\n  ref?: Ref<HTMLDivElement>;\n  /** Expression items list */\n  list: OmitStrict<ExpressionListProps, 'ref' | 'onItemAdd'> & {\n    onItemAdd: (id: ExpressionItemProps['id'], addExpression: (expression: string) => void) => void;\n  };\n  /** Search input props */\n  search: Pick<\n    Required<SearchInputProps>,\n    'filters' | 'onFilterChange' | 'onSearchChange' | 'value'\n  > &\n    Pick<SearchInputProps, 'defaultFilter'>;\n\n  /** Default expression to set in the text area */\n  defaultValue?: string;\n  /** Compiled error message */\n  errors?: TextAreaProps['info'];\n  /** Imperative handle */\n  handle?: Ref<HandleValue>;\n}\n\nexport interface InputParams<P> {\n  id: string;\n  renderer: ComponentType<P>;\n  rendererProps: P;\n}\n\nexport interface ExpressionDetailsProps extends BaseProps {\n  /** Primary details of the expression */\n  primary: Required<FieldValueListProps['fields']>;\n  /** Output params of the expression */\n  outputParams?: Required<FieldValueListProps['fields']>;\n  /** Input params of the expression */\n  inputParams?: InputParams<any>[];\n  /** Ref to the component */\n  ref?: Ref<HTMLElement>;\n}\n"]}
+{"version":3,"file":"ExpressionBuilder.types.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentType, Ref } from 'react';\nimport { ShowHintOptions, EditorConfiguration } from 'codemirror';\n\nimport {\n  BaseProps,\n  EmptyStateProps,\n  OmitStrict,\n  SearchInputProps,\n  TextAreaProps,\n  FieldValueListProps,\n  MenuProps\n} from '@pega/cosmos-react-core';\n\nexport interface ExpressionItemProps {\n  /** Id of the item */\n  id: string;\n  /** Item name to be displayed as rule name */\n  primary: string;\n  /** Type of expression item. Eg: Decision, When, Automation etc. */\n  type: string;\n  /** Callback for add event */\n  onAdd: (id: ExpressionItemProps['id']) => void;\n  /** Callback for expand event */\n  onExpand?: (id: ExpressionItemProps['id']) => void;\n  /** Callback for collapse event */\n  onCollapse?: (id: ExpressionItemProps['id']) => void;\n  /** Show the expanded details */\n  expanded?: boolean;\n  /** Expression details to show in expanded view */\n  details?: ExpressionDetailsProps;\n  /** Matched field to be shown in expression item collapsed mode during search */\n  matchedField?: { name: string; value: string };\n}\n\nexport interface ExpressionListProps extends BaseProps {\n  ref?: Ref<HTMLDivElement>;\n  /** Expression builder items */\n  items?: OmitStrict<ExpressionItemProps, 'onAdd' | 'onExpand' | 'onCollapse' | 'details'>[];\n  /** Callback for item add */\n  onItemAdd: ExpressionItemProps['onAdd'];\n  /** Callback for item expand */\n  onItemExpand?: ExpressionItemProps['onExpand'];\n  /** Callback for item collapse */\n  onItemCollapse?: ExpressionItemProps['onCollapse'];\n  /** No items */\n  emptyText?: EmptyStateProps['message'];\n  /** Expanded items data */\n  details: {\n    [id: string]: ExpressionDetailsProps;\n  };\n}\n\nexport interface HandleValue {\n  /** Returns the expression value */\n  getExpression: () => string;\n}\n\nexport type AutoCompleteTriggerType = '@' | '.';\n\nexport type SuggestionsType = { label: string; value: string };\n\nexport interface ExpressionBuilderProps extends BaseProps {\n  ref?: Ref<HTMLDivElement>;\n  /** Expression items list */\n  list: OmitStrict<ExpressionListProps, 'ref' | 'onItemAdd'> & {\n    onItemAdd: (id: ExpressionItemProps['id'], addExpression: (expression: string) => void) => void;\n  };\n  /** Search input props */\n  search: Pick<\n    Required<SearchInputProps>,\n    'filters' | 'onFilterChange' | 'onSearchChange' | 'value'\n  > &\n    Pick<SearchInputProps, 'defaultFilter'> &\n    Pick<MenuProps, 'accent'>;\n\n  /** Default expression to set in the code editor */\n  defaultValue?: string;\n  /** Compiled error message */\n  errors?: TextAreaProps['info'];\n  /** Imperative handle */\n  handle?: Ref<HandleValue>;\n  /** Fetches suggestion list for suggestions popover */\n  fetchSuggestions?: (autoCompleteTrigger: AutoCompleteTriggerType) => Promise<SuggestionsType[]>;\n  /** characters which triggers suggestions */\n  autoCompleteTriggers?: AutoCompleteTriggerType[];\n  /** Code editor configuration props */\n  editorConfigProps?: EditorConfiguration;\n}\n\nexport interface InputParams<P> {\n  id: string;\n  renderer: ComponentType<P>;\n  rendererProps: P;\n}\n\nexport interface ExpressionDetailsProps extends BaseProps {\n  /** Primary details of the expression */\n  primary: Required<FieldValueListProps['fields']>;\n  /** Output params of the expression */\n  outputParams?: Required<FieldValueListProps['fields']>;\n  /** Input params of the expression */\n  inputParams?: InputParams<any>[];\n  /** Ref to the component */\n  ref?: Ref<HTMLElement>;\n}\n\nexport type EditorState = {\n  getValue: () => string | undefined;\n  insertText: (text: string) => void;\n};\n\nexport interface CodeEditorProps extends OmitStrict<ExpressionBuilderProps, 'list' | 'search'> {\n  ref?: Ref<HTMLDivElement>;\n  codeEditorHandle: Ref<EditorState>;\n  /** Default expression to set in the code editor */\n  defaultValue?: string;\n}\n\nexport interface EditorHintOptions extends ShowHintOptions {\n  suggestions?: SuggestionsType[];\n}\n"]}

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { MenuProps } from '@pega/cosmos-react-core';
+declare const ExpressionBuilderContext: import("react").Context<{
+    accent: MenuProps['accent'];
+}>;
+export default ExpressionBuilderContext;
+//# sourceMappingURL=ExpressionBuilderContext.d.ts.map

package/lib/components/ExpressionBuilder/ExpressionBuilderContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpressionBuilderContext.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilderContext.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,QAAA,MAAM,wBAAwB;YAA2B,SAAS,CAAC,QAAQ,CAAC;EAE1E,CAAC;AAEH,eAAe,wBAAwB,CAAC"}