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

@pega/cosmos-react-build 8.8.0 → 9.0.0-build.10.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 (316) hide show

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

@@ -1,28 +1,45 @@
 import styled, { css } from 'styled-components';
-import { defaultThemeProp, StyledButton, StyledLabel, StyledText, Text } from '@pega/cosmos-react-core';
+import { defaultThemeProp, StyledButton, StyledLabel, StyledText, Text, Flex, FormField } from '@pega/cosmos-react-core';
+const contentWidth = 'content-width';
+const borderLine = 'border-line';
 export const StyledPrimaryText = styled(Text) `
   word-break: break-word;
 `;
-export const StyledExpressionSummary = styled.div(({ theme }) => {
+export const StyledExpressionExplanation = styled.div(({ theme }) => {
     return css `
     padding-block: ${theme.base.spacing};
     padding-inline: calc(0.5 * ${theme.base.spacing});
   `;
 });
-StyledExpressionSummary.defaultProps = defaultThemeProp;
-export const StyledExpressionList = styled.ul `
-  overflow-y: auto;
-  flex-grow: 1;
-  list-style: none;
-`;
-export const StyledExpressionBuilder = styled.div(({ theme }) => {
+StyledExpressionExplanation.defaultProps = defaultThemeProp;
+export const StyledExpressionList = styled.ul(({ theme: { base: { spacing } } }) => css `
+    overflow-y: auto;
+    flex-grow: 1;
+    list-style: none;
+    padding-inline-end: ${spacing};
+  `);
+StyledExpressionList.defaultProps = defaultThemeProp;
+export const StyledExpressionBuilder = styled(Flex)(({ theme, showEditorOnly, showGenerateExpression }) => {
     return css `
     position: relative;
     background-color: ${theme.base.palette['primary-background']};
     min-height: calc(30 * ${theme.base.spacing});
     max-height: 100%;
-    max-width: calc(2 * ${theme.base['content-width'].lg} + 4 * ${theme.base.spacing});
-    min-width: calc(${theme.base['content-width'].lg} + 4 * ${theme.base.spacing});
+    ${showGenerateExpression &&
+        css `
+      ${StyledExpressionList} {
+        overflow-y: unset;
+      }
+    `}
+    ${showEditorOnly
+        ? css `
+          width: max-content;
+        `
+        : css `
+          min-width: calc(${theme.base[contentWidth].lg} + 4 * ${theme.base.spacing});
+        `}
+    border: 0.0625rem solid ${theme.base.palette[borderLine]};
+    border-radius: calc(0.5 * ${theme.base['border-radius']});
   `;
 });
 StyledExpressionBuilder.defaultProps = defaultThemeProp;
@@ -38,7 +55,7 @@ export const StyledParamsGroup = styled.div(({ theme }) => {
 StyledParamsGroup.defaultProps = defaultThemeProp;
 export const StyledInputParamsGroup = styled(StyledParamsGroup)(({ theme }) => {
     return css `
-    max-width: ${theme.base['content-width'].lg};
+    max-width: ${theme.base[contentWidth].lg};
   `;
 });
 StyledInputParamsGroup.defaultProps = defaultThemeProp;
@@ -64,7 +81,7 @@ export const StyledExpressionItem = styled.li(({ theme, expanded }) => {
     `}
     :not(:last-child) {
-      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
+      border-bottom: 0.0625rem solid ${theme.base.palette[borderLine]};
     }
     ${StyledExpressionDetails} {
@@ -78,4 +95,54 @@ export const StyledExpressionItem = styled.li(({ theme, expanded }) => {
   `;
 });
 StyledExpressionItem.defaultProps = defaultThemeProp;
+export const StyledClearButton = styled.button `
+  align-self: flex-end;
+`;
+export const StyledExplanationContainer = styled.div `
+  position: relative;
+  > div:nth-child(2) {
+    margin-block: 0;
+  }
+`;
+export const StyledExpressionWrapper = styled.div(({ theme }) => css `
+    overflow-y: auto;
+    border-inline-start: 0.0625rem solid ${theme.base.palette[borderLine]};
+    justify-content: space-between;
+    flex-wrap: nowrap;
+  `);
+StyledExpressionWrapper.defaultProps = defaultThemeProp;
+export const StyledCodeEditorContainer = styled.div(({ explainEnabled }) => {
+    return css `
+      ${explainEnabled &&
+        css `
+        min-height: 10rem;
+        overflow-y: auto;
+        flex-grow: 1;
+      `}
+    `;
+});
+export const StyledExplainContainer = styled.div `
+  min-height: 2rem;
+`;
+export const StyledExpressions = styled.div `
+  overflow-y: auto;
+`;
+export const StyledFormField = styled(FormField) `
+  height: inherit;
+  width: 100%;
+`;
+export const StyledGeneratedExpression = styled.div `
+  position: relative;
+  > div:nth-child(3) {
+    margin-block: 0;
+  }
+  .react-codemirror2 {
+    height: ${props => props.theme.components['text-area']['min-height']};
+  }
+`;
+StyledGeneratedExpression.defaultProps = defaultThemeProp;
+export const StyledInsertButton = styled.button `
+  align-self: flex-end;
+`;
 //# sourceMappingURL=ExpressionBuilder.styles.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpressionBuilder.styles.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.styles.ts"],"names":[],"mappings":"AAAA,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;~~AAIjC~~,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~~;~~GAC7E~~,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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n StyledButton,\n StyledLabel,\n StyledText,\n Text\n} from '@pega/cosmos-react-core';\n\nimport type { 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});\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"]}
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 {\n defaultThemeProp,\n StyledButton,\n StyledLabel,\n StyledText,\n Text,\n Flex,\n FormField\n} from '@pega/cosmos-react-core';\n\nimport type { ExpressionItemProps } from './ExpressionBuilder.types';\nimport type { CodeEditorProps } from './CodeEditor/CodeEditor.types';\n\nconst contentWidth = 'content-width';\nconst borderLine = 'border-line';\n\nexport const StyledPrimaryText = styled(Text)`\n word-break: break-word;\n`;\n\nexport const StyledExpressionExplanation = styled.div(({ theme }) => {\n return css`\n padding-block: ${theme.base.spacing};\n padding-inline: calc(0.5 * ${theme.base.spacing});\n `;\n});\n\nStyledExpressionExplanation.defaultProps = defaultThemeProp;\n\nexport const StyledExpressionList = styled.ul(\n ({\n theme: {\n base: { spacing }\n }\n }) => css`\n overflow-y: auto;\n flex-grow: 1;\n list-style: none;\n padding-inline-end: ${spacing};\n `\n);\n\nStyledExpressionList.defaultProps = defaultThemeProp;\n\nexport const StyledExpressionBuilder = styled(Flex)<\n Pick<CodeEditorProps, 'showEditorOnly'> & { showGenerateExpression: boolean }\n>(({ theme, showEditorOnly, showGenerateExpression }) => {\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 ${showGenerateExpression &&\n css`\n ${StyledExpressionList} {\n overflow-y: unset;\n }\n `}\n ${showEditorOnly\n ? css`\n width: max-content;\n `\n : css`\n min-width: calc(${theme.base[contentWidth].lg} + 4 * ${theme.base.spacing});\n `}\n border: 0.0625rem solid ${theme.base.palette[borderLine]};\n border-radius: calc(0.5 * ${theme.base['border-radius']});\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[contentWidth].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[borderLine]};\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 StyledClearButton = styled.button`\n align-self: flex-end;\n`;\n\nexport const StyledExplanationContainer = styled.div`\n position: relative;\n > div:nth-child(2) {\n margin-block: 0;\n }\n`;\n\nexport const StyledExpressionWrapper = styled.div(\n ({ theme }) => css`\n overflow-y: auto;\n border-inline-start: 0.0625rem solid ${theme.base.palette[borderLine]};\n justify-content: space-between;\n flex-wrap: nowrap;\n `\n);\n\nStyledExpressionWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledCodeEditorContainer = styled.div<{ explainEnabled: boolean }>(\n ({ explainEnabled }) => {\n return css`\n ${explainEnabled &&\n css`\n min-height: 10rem;\n overflow-y: auto;\n flex-grow: 1;\n `}\n `;\n }\n);\n\nexport const StyledExplainContainer = styled.div`\n min-height: 2rem;\n`;\n\nexport const StyledExpressions = styled.div`\n overflow-y: auto;\n`;\n\nexport const StyledFormField = styled(FormField)`\n height: inherit;\n width: 100%;\n`;\n\nexport const StyledGeneratedExpression = styled.div`\n position: relative;\n > div:nth-child(3) {\n margin-block: 0;\n }\n\n .react-codemirror2 {\n height: ${props => props.theme.components['text-area']['min-height']};\n }\n`;\n\nStyledGeneratedExpression.defaultProps = defaultThemeProp;\n\nexport const StyledInsertButton = styled.button`\n align-self: flex-end;\n`;\n"]}

package/lib/components/ExpressionBuilder/ExpressionBuilder.test-ids.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export declare const getExpressionBuilderIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["search", "explanation", "explain", "clear", "insert", "generate", "generated-expression", "describe-expression"]>;
+export declare const getExpressionListTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<never[]>;
+export declare const getExpressionDetailsTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["primary-fields", "output-params"]>;
+export declare const getExpressionItemsTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["collapse-item-button", "add-item-button", "add-item"]>;
+//# sourceMappingURL=ExpressionBuilder.test-ids.d.ts.map

package/lib/components/ExpressionBuilder/ExpressionBuilder.test-ids.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"ExpressionBuilder.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,uBAAuB,uPASzB,CAAC;AAEZ,eAAO,MAAM,wBAAwB,mIAA4B,CAAC;AAElE,eAAO,MAAM,2BAA2B,wKAG7B,CAAC;AAEZ,eAAO,MAAM,yBAAyB,4LAI3B,CAAC"}

package/lib/components/ExpressionBuilder/ExpressionBuilder.test-ids.js ADDED Viewed

@@ -0,0 +1,22 @@
+import { createTestIds } from '@pega/cosmos-react-core';
+export const getExpressionBuilderIds = createTestIds('expression-builder', [
+    'search',
+    'explanation',
+    'explain',
+    'clear',
+    'insert',
+    'generate',
+    'generated-expression',
+    'describe-expression'
+]);
+export const getExpressionListTestIds = createTestIds('list', []);
+export const getExpressionDetailsTestIds = createTestIds('content', [
+    'primary-fields',
+    'output-params'
+]);
+export const getExpressionItemsTestIds = createTestIds('item', [
+    'collapse-item-button',
+    'add-item-button',
+    'add-item'
+]);
+//# sourceMappingURL=ExpressionBuilder.test-ids.js.map

package/lib/components/ExpressionBuilder/ExpressionBuilder.test-ids.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ExpressionBuilder.test-ids.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,uBAAuB,GAAG,aAAa,CAAC,oBAAoB,EAAE;IACzE,QAAQ;IACR,aAAa;IACb,SAAS;IACT,OAAO;IACP,QAAQ;IACR,UAAU;IACV,sBAAsB;IACtB,qBAAqB;CACb,CAAC,CAAC;AAEZ,MAAM,CAAC,MAAM,wBAAwB,GAAG,aAAa,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;AAElE,MAAM,CAAC,MAAM,2BAA2B,GAAG,aAAa,CAAC,SAAS,EAAE;IAClE,gBAAgB;IAChB,eAAe;CACP,CAAC,CAAC;AAEZ,MAAM,CAAC,MAAM,yBAAyB,GAAG,aAAa,CAAC,MAAM,EAAE;IAC7D,sBAAsB;IACtB,iBAAiB;IACjB,UAAU;CACF,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nexport const getExpressionBuilderIds = createTestIds('expression-builder', [\n 'search',\n 'explanation',\n 'explain',\n 'clear',\n 'insert',\n 'generate',\n 'generated-expression',\n 'describe-expression'\n] as const);\n\nexport const getExpressionListTestIds = createTestIds('list', []);\n\nexport const getExpressionDetailsTestIds = createTestIds('content', [\n 'primary-fields',\n 'output-params'\n] as const);\n\nexport const getExpressionItemsTestIds = createTestIds('item', [\n 'collapse-item-button',\n 'add-item-button',\n 'add-item'\n] as const);\n"]}

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

@@ -1,7 +1,7 @@
 import type { ComponentType, Ref } from 'react';
-import type { BaseProps, EmptyStateProps, OmitStrict, SearchInputProps, FieldValueListProps, MenuProps } from '@pega/cosmos-react-core';
+import type { BaseProps, EmptyStateProps, OmitStrict, SearchInputProps, FieldValueListProps, MenuProps, TestIdProp, FormControlProps, TextAreaProps } from '@pega/cosmos-react-core';
 import type { CodeEditorProps, CustomPositionProps } from './CodeEditor/CodeEditor.types';
-export interface ExpressionItemProps {
+export interface ExpressionItemProps extends TestIdProp {
     /** Id of the item */
     id: string;
     /** Item name to be displayed as rule name */
@@ -24,7 +24,7 @@ export interface ExpressionItemProps {
         value: string;
     };
 }
-export interface ExpressionListProps extends BaseProps {
+export interface ExpressionListProps extends BaseProps, TestIdProp {
     ref?: Ref<HTMLUListElement>;
     /** Expression builder items */
     items?: OmitStrict<ExpressionItemProps, 'onAdd' | 'onExpand' | 'onCollapse' | 'details'>[];
@@ -47,7 +47,9 @@ export interface HandleValue {
     /** Insert the expression value */
     insertExpression?: (expression: string, replaceContent?: boolean, customCursorPosition?: CustomPositionProps) => void;
 }
-export interface ExpressionBuilderProps extends BaseProps, OmitStrict<CodeEditorProps, 'ref' | 'codeEditorHandle'> {
+export interface ExpressionBuilderProps extends BaseProps, TestIdProp, Pick<FormControlProps, 'required' | 'label' | 'additionalInfo'>, Pick<CodeEditorProps, 'defaultValue' | 'errors' | 'readOnly' | 'fetchSuggestions' | 'autoCompleteTriggers' | 'loading' | 'onBlur' | 'onChange' | 'inLineErrors' | 'isSingleLine' | 'aria-describedby'> {
+    /** Placeholder text for the editor */
+    placeholder?: string;
     ref?: Ref<HTMLDivElement>;
     /** Expression items list */
     list: OmitStrict<ExpressionListProps, 'ref' | 'onItemAdd'> & {
@@ -57,13 +59,39 @@ export interface ExpressionBuilderProps extends BaseProps, OmitStrict<CodeEditor
     search: Pick<Required<SearchInputProps>, 'filters' | 'onFilterChange' | 'onSearchChange' | 'value'> & Pick<SearchInputProps, 'defaultFilter'> & Pick<MenuProps, 'accent'>;
     /** Imperative handle */
     handle?: Ref<HandleValue>;
+    /** Show only editor instead of expression list and expression details */
+    showEditorOnly?: boolean;
+    /** Expression explanation */
+    generateExplanation: {
+        loadingExplanation?: boolean;
+        /** Explain expression */
+        onExplain: () => void;
+        /** Clearing explanation */
+        onClearExplanation: () => void;
+        /** Explanation of expression generated from AI */
+        explanation?: string;
+    };
+    generateExpression?: {
+        /** Describe expression textarea */
+        describeExpressionTextArea?: Pick<TextAreaProps, 'additionalInfo' | 'placeholder' | 'defaultValue'> & {
+            error?: string;
+        };
+        /** Generate expression callback */
+        onGenerateExpression: (prompt: string) => void;
+        /** Expression generation in-progress */
+        loadingExpression?: boolean;
+        /** Expression generated from AI */
+        generatedExpression?: string;
+        /** Insert expression callback */
+        onInsert: (generatedExpression: string) => void;
+    };
 }
 export interface InputParams<P> {
     id: string;
     renderer: ComponentType<P>;
     rendererProps: P;
 }
-export interface ExpressionDetailsProps extends BaseProps {
+export interface ExpressionDetailsProps extends BaseProps, TestIdProp {
     /** Primary details of the expression */
     primary: Required<FieldValueListProps['fields']>;
     /** Output params of the expression */

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpressionBuilder.types.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,KAAK,EACV,SAAS,EACT,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,mBAAmB,EACnB,SAAS,EACV,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAE1F,MAAM,WAAW,~~mBAAmB~~;~~IAClC~~,qBAAqB;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,6CAA6C;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAC;IACb,6BAA6B;IAC7B,KAAK,EAAE,CAAC,EAAE,EAAE,mBAAmB,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC/C,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,mBAAmB,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IACnD,kCAAkC;IAClC,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,mBAAmB,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IACrD,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,gFAAgF;IAChF,YAAY,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAChD;AAED,MAAM,WAAW,mBAAoB,SAAQ,SAAS;~~IACpD~~,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,UAAU,CAAC,mBAAmB,EAAE,OAAO,GAAG,UAAU,GAAG,YAAY,GAAG,SAAS,CAAC,EAAE,CAAC;IAC3F,4BAA4B;IAC5B,SAAS,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACxC,+BAA+B;IAC/B,YAAY,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;IAC/C,iCAAiC;IACjC,cAAc,CAAC,EAAE,mBAAmB,CAAC,YAAY,CAAC,CAAC;IACnD,eAAe;IACf,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACvC,0BAA0B;IAC1B,OAAO,EAAE;QACP,CAAC,EAAE,EAAE,MAAM,GAAG,sBAAsB,CAAC;KACtC,CAAC;CACH;AAED,MAAM,WAAW,WAAW;IAC1B,mCAAmC;IACnC,aAAa,EAAE,MAAM,MAAM,CAAC;IAC5B,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,CACjB,UAAU,EAAE,MAAM,EAClB,cAAc,CAAC,EAAE,OAAO,EACxB,oBAAoB,CAAC,EAAE,mBAAmB,KACvC,IAAI,CAAC;CACX;AAED,MAAM,WAAW,sBACf,SAAQ,SAAS,EACf,UAAU,CAAC,~~eAAe~~,EAAE,~~KAAK~~,GAAG,kBAAkB,CAAC;~~IACzD~~,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,4BAA4B;IAC5B,IAAI,EAAE,UAAU,CAAC,mBAAmB,EAAE,KAAK,GAAG,WAAW,CAAC,GAAG;QAC3D,SAAS,EAAE,CAAC,EAAE,EAAE,mBAAmB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,KAAK,IAAI,CAAC;KACjG,CAAC;IACF,yBAAyB;IACzB,MAAM,EAAE,IAAI,CACV,QAAQ,CAAC,gBAAgB,CAAC,EAC1B,SAAS,GAAG,gBAAgB,GAAG,gBAAgB,GAAG,OAAO,CAC1D,GACC,IAAI,CAAC,gBAAgB,EAAE,eAAe,CAAC,GACvC,IAAI,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IAE5B,wBAAwB;IACxB,MAAM,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;~~CAC3B~~;AAED,MAAM,WAAW,WAAW,CAAC,CAAC;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAC3B,aAAa,EAAE,CAAC,CAAC;CAClB;AAED,MAAM,WAAW,sBAAuB,SAAQ,SAAS;~~IACvD~~,wCAAwC;IACxC,OAAO,EAAE,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC,CAAC;IACjD,sCAAsC;IACtC,YAAY,CAAC,EAAE,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC,CAAC;IACvD,qCAAqC;IACrC,WAAW,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC;IACjC,2BAA2B;IAC3B,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB"}
1	+ {"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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpressionBuilder.types.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentType, Ref } from 'react';\n\nimport type {\n BaseProps,\n EmptyStateProps,\n OmitStrict,\n SearchInputProps,\n FieldValueListProps,\n MenuProps\n} from '@pega/cosmos-react-core';\n\nimport type { CodeEditorProps, CustomPositionProps } from './CodeEditor/CodeEditor.types';\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<HTMLUListElement>;\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 /* Insert the expression value /\n insertExpression?: (\n expression: string,\n replaceContent?: boolean,\n customCursorPosition?: CustomPositionProps\n ) => void;\n}\n\nexport interface ExpressionBuilderProps\n extends BaseProps,\n ~~OmitStrict~~<~~CodeEditorProps~~, '~~ref~~' \| '~~codeEditorHandle~~'> {\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 /* 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"]}
1	+ {"version":3,"file":"ExpressionBuilder.types.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentType, Ref } from 'react';\n\nimport type {\n BaseProps,\n EmptyStateProps,\n OmitStrict,\n SearchInputProps,\n FieldValueListProps,\n MenuProps,\n TestIdProp,\n FormControlProps,\n TextAreaProps\n} from '@pega/cosmos-react-core';\n\nimport type { CodeEditorProps, CustomPositionProps } from './CodeEditor/CodeEditor.types';\n\nexport interface ExpressionItemProps extends TestIdProp {\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, TestIdProp {\n ref?: Ref<HTMLUListElement>;\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 /* Insert the expression value /\n insertExpression?: (\n expression: string,\n replaceContent?: boolean,\n customCursorPosition?: CustomPositionProps\n ) => void;\n}\n\nexport interface ExpressionBuilderProps\n extends BaseProps,\n TestIdProp,\n Pick<FormControlProps, 'required' \| 'label' \| 'additionalInfo'>,\n Pick<\n CodeEditorProps,\n \| 'defaultValue'\n \| 'errors'\n \| 'readOnly'\n \| 'fetchSuggestions'\n \| 'autoCompleteTriggers'\n \| 'loading'\n \| 'onBlur'\n \| 'onChange'\n \| 'inLineErrors'\n \| 'isSingleLine'\n \| 'aria-describedby'\n > {\n /* Placeholder text for the editor /\n placeholder?: string;\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 /* Imperative handle /\n handle?: Ref<HandleValue>;\n /* Show only editor instead of expression list and expression details /\n showEditorOnly?: boolean;\n /* Expression explanation /\n generateExplanation: {\n loadingExplanation?: boolean;\n /* Explain expression /\n onExplain: () => void;\n /* Clearing explanation /\n onClearExplanation: () => void;\n /* Explanation of expression generated from AI /\n explanation?: string;\n };\n generateExpression?: {\n /* Describe expression textarea /\n describeExpressionTextArea?: Pick<\n TextAreaProps,\n 'additionalInfo' \| 'placeholder' \| 'defaultValue'\n > & {\n error?: string;\n };\n /* Generate expression callback /\n onGenerateExpression: (prompt: string) => void;\n /* Expression generation in-progress /\n loadingExpression?: boolean;\n /* Expression generated from AI /\n generatedExpression?: string;\n /* Insert expression callback /\n onInsert: (generatedExpression: string) => void;\n };\n}\n\nexport interface InputParams<P> {\n id: string;\n renderer: ComponentType<P>;\n rendererProps: P;\n}\n\nexport interface ExpressionDetailsProps extends BaseProps, TestIdProp {\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"]}

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

@@ -1,5 +1,7 @@
 import type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
 import type { ExpressionDetailsProps } from './ExpressionBuilder.types';
-declare const ExpressionDetails: ForwardRefForwardPropsComponent<ExpressionDetailsProps>;
-export default ExpressionDetails;
+declare const _default: ForwardRefForwardPropsComponent<ExpressionDetailsProps> & {
+    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["primary-fields", "output-params"]>;
+};
+export default _default;
 //# sourceMappingURL=ExpressionDetails.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpressionDetails.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionDetails.tsx"],"names":[],"mappings":"~~AAIA~~,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAE/E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC~~;AAOxE~~,~~QAAA,MAAM,iBAAiB,EAAE,+BAA+B,CAAC,sBAAsB,CAiC9E,CAAC;AAEF,eAAe,iBAAiB,CAAC~~"}
1	+ {"version":3,"file":"ExpressionDetails.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionDetails.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAE/E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;;;;AAmDxE,wBAA2E"}

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

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { FieldValueList, Flex, Text, useI18n } from '@pega/cosmos-react-core';
+import { FieldValueList, Flex, Text, useI18n, withTestIds, useTestIds } from '@pega/cosmos-react-core';
 import { StyledExpressionDetails, StyledInputParamsGroup, StyledParamsGroup } from './ExpressionBuilder.styles';
-const ExpressionDetails = forwardRef(function ExpressionDetails({ primary, inputParams, outputParams, ...restProps }, ref) {
+import { getExpressionDetailsTestIds } from './ExpressionBuilder.test-ids';
+const ExpressionDetails = forwardRef(function ExpressionDetails({ testId, primary, inputParams, outputParams, ...restProps }, ref) {
     const t = useI18n();
-    return (_jsxs(Flex, { ...restProps, ref: ref, container: { direction: 'column' }, as: StyledExpressionDetails, children: [_jsx(FieldValueList, { fields: primary }), outputParams && (_jsxs(StyledParamsGroup, { children: [_jsx(Text, { variant: 'h4', children: t('output_parameters') }), _jsx(FieldValueList, { fields: outputParams })] })), inputParams && (_jsxs(StyledInputParamsGroup, { children: [_jsx(Text, { variant: 'h4', children: t('input_parameters') }), _jsx(Flex, { container: { direction: 'column', gap: 1 }, children: inputParams.map(({ id, renderer: Renderer, rendererProps }) => {
+    const testIds = useTestIds(testId, getExpressionDetailsTestIds);
+    return (_jsxs(Flex, { "data-testid": testIds.root, ...restProps, ref: ref, container: { direction: 'column' }, as: StyledExpressionDetails, children: [_jsx(FieldValueList, { testId: testIds.primaryFields, fields: primary }), outputParams && (_jsxs(StyledParamsGroup, { children: [_jsx(Text, { variant: 'h4', children: t('output_parameters') }), _jsx(FieldValueList, { testId: testIds.outputParams, fields: outputParams })] })), inputParams && (_jsxs(StyledInputParamsGroup, { children: [_jsx(Text, { variant: 'h4', children: t('input_parameters') }), _jsx(Flex, { container: { direction: 'column', gap: 1 }, children: inputParams.map(({ id, renderer: Renderer, rendererProps }) => {
                             return _jsx(Renderer, { ...rendererProps }, id);
                         }) })] }))] }));
 });
-export default ExpressionDetails;
+export default withTestIds(ExpressionDetails, getExpressionDetailsTestIds);
 //# sourceMappingURL=ExpressionDetails.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpressionDetails.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionDetails.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,~~EAAE~~,cAAc,~~EAAE~~,IAAI,~~EAAE~~,IAAI,~~EAAE~~,OAAO,~~EAAE~~,MAAM,yBAAyB,CAAC;~~AAI9E~~,OAAO,EACL,uBAAuB,EACvB,sBAAsB,EACtB,iBAAiB,EAClB,MAAM,4BAA4B,CAAC;~~AAEpC~~,MAAM,iBAAiB,GAA4D,UAAU,CAC3F,SAAS,iBAAiB,CACxB,~~EAAE~~,OAAO,~~EAAE~~,WAAW,~~EAAE~~,YAAY,~~EAAE~~,GAAG,SAAS,~~EAA2C~~,~~EAC7F~~,GAAkC;IAElC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,CACL,MAAC,IAAI,~~OACC~~,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,EAAE,EAAE,uBAAuB,aAE3B,KAAC,cAAc,IAAC,MAAM,EAAE,OAAO,GAAI,~~EAClC~~,YAAY,IAAI,CACf,MAAC,iBAAiB,eAChB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,mBAAmB,CAAC,GAAQ,EAClD,KAAC,cAAc,IAAC,MAAM,EAAE,YAAY,GAAI,~~IACtB~~,CACrB,EACA,WAAW,IAAI,CACd,MAAC,sBAAsB,eACrB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,kBAAkB,CAAC,GAAQ,EACjD,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,YAC7C,WAAW,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,EAAE;4BAC7D,OAAO,KAAC,QAAQ,OAAc,aAAa,IAArB,EAAE,CAAuB,CAAC;wBAClD,CAAC,CAAC,GACG,IACgB,CAC1B,IACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport { FieldValueList, Flex, Text, useI18n } from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\n\nimport type { ExpressionDetailsProps } from './ExpressionBuilder.types';\nimport {\n StyledExpressionDetails,\n StyledInputParamsGroup,\n StyledParamsGroup\n} from './ExpressionBuilder.styles';\n\nconst ExpressionDetails: ForwardRefForwardPropsComponent<ExpressionDetailsProps> = forwardRef(\n function ExpressionDetails(\n { primary, inputParams, outputParams, ...restProps }: PropsWithoutRef<ExpressionDetailsProps>,\n ref: ExpressionDetailsProps['ref']\n ) {\n const t = useI18n();\n return (\n <Flex\n {...restProps}\n ref={ref}\n container={{ direction: 'column' }}\n as={StyledExpressionDetails}\n >\n <FieldValueList fields={primary} />\n {outputParams && (\n <StyledParamsGroup>\n <Text variant='h4'>{t('output_parameters')}</Text>\n <FieldValueList fields={outputParams} />\n </StyledParamsGroup>\n )}\n {inputParams && (\n <StyledInputParamsGroup>\n <Text variant='h4'>{t('input_parameters')}</Text>\n <Flex container={{ direction: 'column', gap: 1 }}>\n {inputParams.map(({ id, renderer: Renderer, rendererProps }) => {\n return <Renderer key={id} {...rendererProps} />;\n })}\n </Flex>\n </StyledInputParamsGroup>\n )}\n </Flex>\n );\n }\n);\n\nexport default ExpressionDetails;\n"]}
1	+ {"version":3,"file":"ExpressionDetails.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionDetails.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EACL,cAAc,EACd,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,WAAW,EACX,UAAU,EACX,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EACL,uBAAuB,EACvB,sBAAsB,EACtB,iBAAiB,EAClB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,2BAA2B,EAAE,MAAM,8BAA8B,CAAC;AAE3E,MAAM,iBAAiB,GAA4D,UAAU,CAC3F,SAAS,iBAAiB,CACxB,EACE,MAAM,EACN,OAAO,EACP,WAAW,EACX,YAAY,EACZ,GAAG,SAAS,EAC4B,EAC1C,GAAkC;IAElC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAgB,EAAE,2BAA2B,CAAC,CAAC;IAC1E,OAAO,CACL,MAAC,IAAI,mBACU,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,EAAE,EAAE,uBAAuB,aAE3B,KAAC,cAAc,IAAC,MAAM,EAAE,OAAO,CAAC,aAAa,EAAE,MAAM,EAAE,OAAO,GAAI,EACjE,YAAY,IAAI,CACf,MAAC,iBAAiB,eAChB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,mBAAmB,CAAC,GAAQ,EAClD,KAAC,cAAc,IAAC,MAAM,EAAE,OAAO,CAAC,YAAY,EAAE,MAAM,EAAE,YAAY,GAAI,IACpD,CACrB,EACA,WAAW,IAAI,CACd,MAAC,sBAAsB,eACrB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,kBAAkB,CAAC,GAAQ,EACjD,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,YAC7C,WAAW,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,EAAE;4BAC7D,OAAO,KAAC,QAAQ,OAAc,aAAa,IAArB,EAAE,CAAuB,CAAC;wBAClD,CAAC,CAAC,GACG,IACgB,CAC1B,IACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC,iBAAiB,EAAE,2BAA2B,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport {\n FieldValueList,\n Flex,\n Text,\n useI18n,\n withTestIds,\n useTestIds\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\n\nimport type { ExpressionDetailsProps } from './ExpressionBuilder.types';\nimport {\n StyledExpressionDetails,\n StyledInputParamsGroup,\n StyledParamsGroup\n} from './ExpressionBuilder.styles';\nimport { getExpressionDetailsTestIds } from './ExpressionBuilder.test-ids';\n\nconst ExpressionDetails: ForwardRefForwardPropsComponent<ExpressionDetailsProps> = forwardRef(\n function ExpressionDetails(\n {\n testId,\n primary,\n inputParams,\n outputParams,\n ...restProps\n }: PropsWithoutRef<ExpressionDetailsProps>,\n ref: ExpressionDetailsProps['ref']\n ) {\n const t = useI18n();\n const testIds = useTestIds(testId as string, getExpressionDetailsTestIds);\n return (\n <Flex\n data-testid={testIds.root}\n {...restProps}\n ref={ref}\n container={{ direction: 'column' }}\n as={StyledExpressionDetails}\n >\n <FieldValueList testId={testIds.primaryFields} fields={primary} />\n {outputParams && (\n <StyledParamsGroup>\n <Text variant='h4'>{t('output_parameters')}</Text>\n <FieldValueList testId={testIds.outputParams} fields={outputParams} />\n </StyledParamsGroup>\n )}\n {inputParams && (\n <StyledInputParamsGroup>\n <Text variant='h4'>{t('input_parameters')}</Text>\n <Flex container={{ direction: 'column', gap: 1 }}>\n {inputParams.map(({ id, renderer: Renderer, rendererProps }) => {\n return <Renderer key={id} {...rendererProps} />;\n })}\n </Flex>\n </StyledInputParamsGroup>\n )}\n </Flex>\n );\n }\n);\n\nexport default withTestIds(ExpressionDetails, getExpressionDetailsTestIds);\n"]}

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

@@ -1,6 +1,8 @@
 import type { FunctionComponent } from 'react';
 import type { ForwardProps } from '@pega/cosmos-react-core';
 import type { ExpressionItemProps } from './ExpressionBuilder.types';
-declare const ExpressionItem: FunctionComponent<ExpressionItemProps & ForwardProps>;
-export default ExpressionItem;
+declare const _default: FunctionComponent<ExpressionItemProps & ForwardProps> & {
+    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["collapse-item-button", "add-item-button", "add-item"]>;
+};
+export default _default;
 //# sourceMappingURL=ExpressionItem.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpressionItem.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;~~AAe~~/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAI5D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC~~;AAYrE~~,~~QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAsGzE,CAAC;AAEF,eAAe,cAAc,CAAC~~"}
1	+ {"version":3,"file":"ExpressionItem.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAiB/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAI5D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;;;;AA2HrE,wBAAsE"}

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

@@ -1,15 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useMemo } from 'react';
-import { Button, ExpandCollapse, Flex, Icon, Mark, registerIcon, replaceMatchWithElement, StyledLabel, Text, useDirection, useI18n } from '@pega/cosmos-react-core';
+import { Button, ExpandCollapse, Flex, Icon, Mark, registerIcon, replaceMatchWithElement, StyledLabel, Text, useDirection, useI18n, useTestIds, withTestIds } from '@pega/cosmos-react-core';
 import * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';
 import * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';
-import { StyledPrimaryText, StyledExpandCollapseContent, StyledExpressionSummary, StyledExpressionItem } from './ExpressionBuilder.styles';
+import { StyledPrimaryText, StyledExpandCollapseContent, StyledExpressionExplanation, StyledExpressionItem } from './ExpressionBuilder.styles';
 import ExpressionDetails from './ExpressionDetails';
 import ExpressionBuilderContext from './ExpressionBuilderContext';
+import { getExpressionItemsTestIds } from './ExpressionBuilder.test-ids';
 registerIcon(caretLeftIcon, caretRightIcon);
-const ExpressionItem = ({ id, primary, type, onAdd, onExpand, onCollapse, details, matchedField, expanded = false, ...restProps }) => {
+const ExpressionItem = ({ id, testId, primary, type, onAdd, onExpand, onCollapse, details, matchedField, expanded = false, ...restProps }) => {
     const { end: caretDirection } = useDirection();
     const t = useI18n();
+    const testIds = useTestIds(testId, getExpressionItemsTestIds);
     const { accent } = useContext(ExpressionBuilderContext);
     const accentedText = (text) => {
         if (accent) {
@@ -24,7 +26,7 @@ const ExpressionItem = ({ id, primary, type, onAdd, onExpand, onCollapse, detail
         return expanded ? 'caret-down' : `caret-${caretDirection}`;
     }, [expanded, caretDirection]);
     const accentedMeta = matchedField && !expanded ? accentedText(matchedField.value) : undefined;
-    return (_jsxs(StyledExpressionItem, { expanded: expanded, children: [_jsxs(Flex, { ...restProps, as: StyledExpressionSummary, id: id, container: { gap: 1, alignItems: 'start' }, children: [_jsx(Button, { icon: true, variant: 'simple', onClick: onCollapse || onExpand
+    return (_jsxs(StyledExpressionItem, { expanded: expanded, children: [_jsxs(Flex, { "data-testid": testIds.root, ...restProps, as: StyledExpressionExplanation, id: id, container: { gap: 1, alignItems: 'start' }, children: [_jsx(Button, { "data-testid": testIds.collapseItemButton, icon: true, variant: 'simple', onClick: onCollapse || onExpand
                             ? () => {
                                 if (expanded) {
                                     onCollapse?.(id);
@@ -33,7 +35,7 @@ const ExpressionItem = ({ id, primary, type, onAdd, onExpand, onCollapse, detail
                                     onExpand?.(id);
                                 }
                             }
-                            : undefined, "aria-label": `${type}: ${primary}`, "aria-expanded": expanded, label: expanded ? t('collapse') : t('expand'), children: _jsx(Icon, { name: caretIcon }) }), _jsxs(Flex, { container: { alignItems: 'start', direction: 'column' }, item: { grow: 1 }, children: [_jsx(StyledPrimaryText, { variant: 'primary', children: !matchedField ? accentedText(primary) : primary }), accentedMeta ? (_jsxs("div", { children: [_jsxs(StyledLabel, { as: 'span', children: [matchedField?.name, ":"] }), accentedMeta] })) : (_jsx(Text, { variant: 'secondary', children: type }))] }), !expanded && (_jsx(Button, { icon: true, variant: 'simple', onClick: () => onAdd(id), "aria-label": t('add_noun', [`${type}: ${primary}`]), label: t('add'), children: _jsx(Icon, { name: 'plus' }) }))] }), _jsx(ExpandCollapse, { collapsed: !expanded, children: _jsxs(Flex, { as: StyledExpandCollapseContent, container: { direction: 'column' }, children: [details && _jsx(ExpressionDetails, { ...details }), _jsx(Button, { variant: 'primary', onClick: () => onAdd(id), "aria-label": t('add_noun', [`${type}: ${primary}`]), children: t('add') })] }) })] }));
+                            : undefined, "aria-label": `${type}: ${primary}`, "aria-expanded": expanded, label: expanded ? t('collapse') : t('expand'), children: _jsx(Icon, { name: caretIcon }) }), _jsxs(Flex, { container: { alignItems: 'start', direction: 'column' }, item: { grow: 1 }, children: [_jsx(StyledPrimaryText, { variant: 'primary', children: !matchedField ? accentedText(primary) : primary }), accentedMeta ? (_jsxs("div", { children: [_jsxs(StyledLabel, { as: 'span', children: [matchedField?.name, ":"] }), accentedMeta] })) : (_jsx(Text, { variant: 'secondary', children: type }))] }), !expanded && (_jsx(Button, { "data-testid": testIds.addItemButton, icon: true, variant: 'simple', onClick: () => onAdd(id), "aria-label": t('add_noun', [`${type}: ${primary}`]), label: t('add'), children: _jsx(Icon, { name: 'plus' }) }))] }), _jsx(ExpandCollapse, { collapsed: !expanded, children: _jsxs(Flex, { as: StyledExpandCollapseContent, container: { direction: 'column' }, children: [details && _jsx(ExpressionDetails, { testId: testIds.root, ...details }), _jsx(Button, { "data-testid": testIds.addItem, variant: 'primary', onClick: () => onAdd(id), "aria-label": t('add_noun', [`${type}: ${primary}`]), children: t('add') })] }) })] }));
 };
-export default ExpressionItem;
+export default withTestIds(ExpressionItem, getExpressionItemsTestIds);
 //# sourceMappingURL=ExpressionItem.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpressionItem.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,EACL,MAAM,EACN,cAAc,EACd,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,uBAAuB,EACvB,WAAW,EACX,IAAI,EACJ,YAAY,EACZ,OAAO,~~EACR~~,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,cAAc,MAAM,oEAAoE,CAAC;AACrG,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AAGnG,OAAO,EACL,iBAAiB,EACjB,2BAA2B,EAC3B,~~uBAAuB~~,~~EACvB~~,oBAAoB,EACrB,MAAM,4BAA4B,CAAC;AACpC,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AACpD,OAAO,wBAAwB,MAAM,4BAA4B,CAAC;~~AAElE~~,YAAY,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC;AAE5C,MAAM,cAAc,GAA0D,CAAC,EAC7E,EAAE,EACF,OAAO,EACP,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,UAAU,EACV,OAAO,EACP,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,GAAG,SAAS,EACb,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,EAAE,cAAc,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;~~IAEpB~~,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,wBAAwB,CAAC,CAAC;IAExD,MAAM,YAAY,GAAG,CAAC,IAAY,EAAE,EAAE;QACpC,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,WAAW,GAAG,OAAO,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;YACzE,OAAO,uBAAuB,CAAC,IAAI,EAAE,WAAW,EAAE,GAAG,CAAC,EAAE;gBACtD,OAAO,KAAC,IAAI,cAAE,GAAG,GAAQ,CAAC;YAC5B,CAAC,CAAC,CAAC;QACL,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,OAAO,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,cAAc,EAAE,CAAC;IAC7D,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC;IAE/B,MAAM,YAAY,GAAG,YAAY,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE9F,OAAO,CACL,MAAC,oBAAoB,IAAC,QAAQ,EAAE,QAAQ,aACtC,MAAC,IAAI,~~OACC~~,SAAS,EACb,EAAE,EAAE,~~uBAAuB~~,~~EAC3B~~,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,aAE1C,KAAC,MAAM,~~IACL~~,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,OAAO,EACL,UAAU,IAAI,QAAQ;4BACpB,CAAC,CAAC,GAAG,EAAE;gCACH,IAAI,QAAQ,EAAE,CAAC;oCACb,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC;gCACnB,CAAC;qCAAM,CAAC;oCACN,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;gCACjB,CAAC;4BACH,CAAC;4BACH,CAAC,CAAC,SAAS,gBAEH,GAAG,IAAI,KAAK,OAAO,EAAE,mBAClB,QAAQ,EACvB,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,YAE7C,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,GAAI,GAClB,EAET,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aAC9E,KAAC,iBAAiB,IAAC,OAAO,EAAC,SAAS,YACjC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,GAC9B,EACnB,YAAY,CAAC,CAAC,CAAC,CACd,0BACE,MAAC,WAAW,IAAC,EAAE,EAAC,MAAM,aAAE,YAAY,EAAE,IAAI,SAAgB,EACzD,YAAY,IACT,CACP,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,IAAI,GAAQ,CACxC,IACI,EAEN,CAAC,QAAQ,IAAI,CACZ,KAAC,MAAM,~~IACL~~,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,gBACZ,CAAC,CAAC,UAAU,EAAE,CAAC,GAAG,IAAI,KAAK,OAAO,EAAE,CAAC,CAAC,EAClD,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,YAEf,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACb,CACV,IACI,EACP,KAAC,cAAc,IAAC,SAAS,EAAE,CAAC,QAAQ,YAClC,MAAC,IAAI,IAAC,EAAE,EAAE,2BAA2B,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,aACtE,OAAO,IAAI,KAAC,iBAAiB,~~OAAK~~,OAAO,GAAI,~~EAC9C~~,KAAC,MAAM,~~IACL~~,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,gBACZ,CAAC,CAAC,UAAU,EAAE,CAAC,GAAG,IAAI,KAAK,OAAO,EAAE,CAAC,CAAC,YAEjD,CAAC,CAAC,KAAK,CAAC,GACF,IACJ,GACQ,IACI,CACxB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { useContext, useMemo } from 'react';\nimport type { FunctionComponent } from 'react';\n\nimport {\n Button,\n ExpandCollapse,\n Flex,\n Icon,\n Mark,\n registerIcon,\n replaceMatchWithElement,\n StyledLabel,\n Text,\n useDirection,\n useI18n\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\nimport * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\n\nimport type { ExpressionItemProps } from './ExpressionBuilder.types';\nimport {\n StyledPrimaryText,\n StyledExpandCollapseContent,\n ~~StyledExpressionSummary~~,\n StyledExpressionItem\n} from './ExpressionBuilder.styles';\nimport ExpressionDetails from './ExpressionDetails';\nimport ExpressionBuilderContext from './ExpressionBuilderContext';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nconst ExpressionItem: FunctionComponent<ExpressionItemProps & ForwardProps> = ({\n id,\n primary,\n type,\n onAdd,\n onExpand,\n onCollapse,\n details,\n matchedField,\n expanded = false,\n ...restProps\n}) => {\n const { end: caretDirection } = useDirection();\n const t = useI18n();\n\n const { accent } = useContext(ExpressionBuilderContext);\n\n const accentedText = (text: string) => {\n if (accent) {\n const accentRegex = typeof accent === 'function' ? accent(text) : accent;\n return replaceMatchWithElement(text, accentRegex, str => {\n return <Mark>{str}</Mark>;\n });\n }\n return text;\n };\n\n const caretIcon = useMemo(() => {\n return expanded ? 'caret-down' : `caret-${caretDirection}`;\n }, [expanded, caretDirection]);\n\n const accentedMeta = matchedField && !expanded ? accentedText(matchedField.value) : undefined;\n\n return (\n <StyledExpressionItem expanded={expanded}>\n <Flex\n {...restProps}\n as={~~StyledExpressionSummary~~}\n id={id}\n container={{ gap: 1, alignItems: 'start' }}\n >\n <Button\n icon\n variant='simple'\n onClick={\n onCollapse \|\| onExpand\n ? () => {\n if (expanded) {\n onCollapse?.(id);\n } else {\n onExpand?.(id);\n }\n }\n : undefined\n }\n aria-label={`${type}: ${primary}`}\n aria-expanded={expanded}\n label={expanded ? t('collapse') : t('expand')}\n >\n <Icon name={caretIcon} />\n </Button>\n\n <Flex container={{ alignItems: 'start', direction: 'column' }} item={{ grow: 1 }}>\n <StyledPrimaryText variant='primary'>\n {!matchedField ? accentedText(primary) : primary}\n </StyledPrimaryText>\n {accentedMeta ? (\n <div>\n <StyledLabel as='span'>{matchedField?.name}:</StyledLabel>\n {accentedMeta}\n </div>\n ) : (\n <Text variant='secondary'>{type}</Text>\n )}\n </Flex>\n\n {!expanded && (\n <Button\n icon\n variant='simple'\n onClick={() => onAdd(id)}\n aria-label={t('add_noun', [`${type}: ${primary}`])}\n label={t('add')}\n >\n <Icon name='plus' />\n </Button>\n )}\n </Flex>\n <ExpandCollapse collapsed={!expanded}>\n <Flex as={StyledExpandCollapseContent} container={{ direction: 'column' }}>\n {details && <ExpressionDetails {...details} />}\n <Button\n variant='primary'\n onClick={() => onAdd(id)}\n aria-label={t('add_noun', [`${type}: ${primary}`])}\n >\n {t('add')}\n </Button>\n </Flex>\n </ExpandCollapse>\n </StyledExpressionItem>\n );\n};\n\nexport default ExpressionItem;\n"]}
1	+ {"version":3,"file":"ExpressionItem.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useMemo } from 'react';\nimport type { FunctionComponent } from 'react';\n\nimport {\n Button,\n ExpandCollapse,\n Flex,\n Icon,\n Mark,\n registerIcon,\n replaceMatchWithElement,\n StyledLabel,\n Text,\n useDirection,\n useI18n,\n useTestIds,\n withTestIds\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\nimport * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\n\nimport type { ExpressionItemProps } from './ExpressionBuilder.types';\nimport {\n StyledPrimaryText,\n StyledExpandCollapseContent,\n StyledExpressionExplanation,\n StyledExpressionItem\n} from './ExpressionBuilder.styles';\nimport ExpressionDetails from './ExpressionDetails';\nimport ExpressionBuilderContext from './ExpressionBuilderContext';\nimport { getExpressionItemsTestIds } from './ExpressionBuilder.test-ids';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nconst ExpressionItem: FunctionComponent<ExpressionItemProps & ForwardProps> = ({\n id,\n testId,\n primary,\n type,\n onAdd,\n onExpand,\n onCollapse,\n details,\n matchedField,\n expanded = false,\n ...restProps\n}) => {\n const { end: caretDirection } = useDirection();\n const t = useI18n();\n const testIds = useTestIds(testId, getExpressionItemsTestIds);\n\n const { accent } = useContext(ExpressionBuilderContext);\n\n const accentedText = (text: string) => {\n if (accent) {\n const accentRegex = typeof accent === 'function' ? accent(text) : accent;\n return replaceMatchWithElement(text, accentRegex, str => {\n return <Mark>{str}</Mark>;\n });\n }\n return text;\n };\n\n const caretIcon = useMemo(() => {\n return expanded ? 'caret-down' : `caret-${caretDirection}`;\n }, [expanded, caretDirection]);\n\n const accentedMeta = matchedField && !expanded ? accentedText(matchedField.value) : undefined;\n\n return (\n <StyledExpressionItem expanded={expanded}>\n <Flex\n data-testid={testIds.root}\n {...restProps}\n as={StyledExpressionExplanation}\n id={id}\n container={{ gap: 1, alignItems: 'start' }}\n >\n <Button\n data-testid={testIds.collapseItemButton}\n icon\n variant='simple'\n onClick={\n onCollapse \|\| onExpand\n ? () => {\n if (expanded) {\n onCollapse?.(id);\n } else {\n onExpand?.(id);\n }\n }\n : undefined\n }\n aria-label={`${type}: ${primary}`}\n aria-expanded={expanded}\n label={expanded ? t('collapse') : t('expand')}\n >\n <Icon name={caretIcon} />\n </Button>\n\n <Flex container={{ alignItems: 'start', direction: 'column' }} item={{ grow: 1 }}>\n <StyledPrimaryText variant='primary'>\n {!matchedField ? accentedText(primary) : primary}\n </StyledPrimaryText>\n {accentedMeta ? (\n <div>\n <StyledLabel as='span'>{matchedField?.name}:</StyledLabel>\n {accentedMeta}\n </div>\n ) : (\n <Text variant='secondary'>{type}</Text>\n )}\n </Flex>\n\n {!expanded && (\n <Button\n data-testid={testIds.addItemButton}\n icon\n variant='simple'\n onClick={() => onAdd(id)}\n aria-label={t('add_noun', [`${type}: ${primary}`])}\n label={t('add')}\n >\n <Icon name='plus' />\n </Button>\n )}\n </Flex>\n <ExpandCollapse collapsed={!expanded}>\n <Flex as={StyledExpandCollapseContent} container={{ direction: 'column' }}>\n {details && <ExpressionDetails testId={testIds.root} {...details} />}\n <Button\n data-testid={testIds.addItem}\n variant='primary'\n onClick={() => onAdd(id)}\n aria-label={t('add_noun', [`${type}: ${primary}`])}\n >\n {t('add')}\n </Button>\n </Flex>\n </ExpandCollapse>\n </StyledExpressionItem>\n );\n};\n\nexport default withTestIds(ExpressionItem, getExpressionItemsTestIds);\n"]}

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

@@ -1,5 +1,7 @@
 import type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
 import type { ExpressionListProps } from './ExpressionBuilder.types';
-declare const ExpressionList: ForwardRefForwardPropsComponent<ExpressionListProps>;
-export default ExpressionList;
+declare const _default: ForwardRefForwardPropsComponent<ExpressionListProps> & {
+    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<never[]>;
+};
+export default _default;
 //# sourceMappingURL=ExpressionList.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpressionList.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionList.tsx"],"names":[],"mappings":"~~AAIA~~,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAE/E,OAAO,KAAK,EAAuB,mBAAmB,EAAE,MAAM,2BAA2B,CAAC~~;AAI1F~~,~~QAAA,MAAM,cAAc,EAAE,+BAA+B,CAAC,mBAAmB,CAuDxE,CAAC;AAEF,eAAe,cAAc,CAAC~~"}
1	+ {"version":3,"file":"ExpressionList.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionList.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAE/E,OAAO,KAAK,EAAuB,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;;;;AAiF1F,wBAAqE"}

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

@@ -1,10 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import { forwardRef, useState } from 'react';
-import { EmptyState } from '@pega/cosmos-react-core';
+import { forwardRef, useState, useRef, useEffect } from 'react';
+import { EmptyState, useItemIntersection, useConsolidatedRef, useTestIds, withTestIds } from '@pega/cosmos-react-core';
 import ExpressionItem from './ExpressionItem';
 import { StyledExpressionList } from './ExpressionBuilder.styles';
-const ExpressionList = forwardRef(function ExpressionList({ items, emptyText, onItemAdd, onItemExpand, onItemCollapse, details, ...restProps }, ref) {
+import { getExpressionListTestIds } from './ExpressionBuilder.test-ids';
+const LIST_OFFSET = 20;
+const ExpressionList = forwardRef(function ExpressionList({ testId, items = [], emptyText, onItemAdd, onItemExpand, onItemCollapse, details, ...restProps }, ref) {
+    const [count, setCount] = useState(Math.min(LIST_OFFSET, items.length));
+    const listRef = useRef(null);
+    useEffect(() => {
+        setCount(Math.min(LIST_OFFSET, items.length));
+    }, [items]);
+    const consolidatedRef = useConsolidatedRef(ref, listRef);
+    useItemIntersection(consolidatedRef, count - 1, () => {
+        setCount(prev => Math.min(items.length, prev + LIST_OFFSET));
+    }, ':scope > li');
     const [expandedItems, setExpandedItems] = useState([]);
     const handleItemExpand = (id) => {
         setExpandedItems(prev => {
@@ -24,9 +35,10 @@ const ExpressionList = forwardRef(function ExpressionList({ items, emptyText, on
             return prev.filter(itemId => itemId !== id);
         });
     };
-    return (_jsx(StyledExpressionList, { ...restProps, ref: ref, children: items && items.length > 0 ? (items.map(item => {
+    const testIds = useTestIds(testId, getExpressionListTestIds);
+    return (_jsx(StyledExpressionList, { ...restProps, ref: consolidatedRef, "data-testid": testIds.root, children: items && items.length > 0 ? (items.slice(0, count).map(item => {
             return (_createElement(ExpressionItem, { ...item, onAdd: onItemAdd, onExpand: handleItemExpand, onCollapse: handleItemCollapse, expanded: expandedItems.includes(item.id), key: item.id, details: details?.[item.id] }));
         })) : (_jsx(EmptyState, { message: emptyText })) }));
 });
-export default ExpressionList;
+export default withTestIds(ExpressionList, getExpressionListTestIds);
 //# sourceMappingURL=ExpressionList.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpressionList.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionList.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;~~AAG7C~~,OAAO,~~EAAE~~,UAAU,~~EAAE~~,MAAM,yBAAyB,CAAC;~~AAIrD~~,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;~~AAElE~~,MAAM,cAAc,GAAyD,UAAU,CACrF,SAAS,cAAc,CACrB,EACE,KAAK,~~EACL~~,SAAS,EACT,SAAS,EACT,YAAY,EACZ,cAAc,EACd,OAAO,EACP,GAAG,SAAS,EACyB,EACvC,GAA+B;IAE/B,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAA8B,EAAE,CAAC,CAAC;IAEpF,MAAM,gBAAgB,GAAG,CAAC,EAA6B,EAAE,EAAE;QACzD,gBAAgB,CAAC,IAAI,CAAC,EAAE;YACtB,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;YACnC,IAAI,SAAS,KAAK,CAAC,CAAC;gBAAE,OAAO,IAAI,CAAC;YAClC,YAAY,EAAE,CAAC,EAAE,CAAC,CAAC;YACnB,OAAO,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,CAAC;QACvB,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,EAA6B,EAAE,EAAE;QAC3D,gBAAgB,CAAC,IAAI,CAAC,EAAE;YACtB,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;YACnC,IAAI,SAAS,KAAK,CAAC,CAAC;gBAAE,OAAO,IAAI,CAAC;YAClC,cAAc,EAAE,CAAC,EAAE,CAAC,CAAC;YACrB,OAAO,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC;QAC9C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;~~IAEF~~,OAAO,CACL,KAAC,oBAAoB,OAAK,SAAS,EAAE,GAAG,EAAE,~~GAAG~~,~~YAC1C~~,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC3B,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;~~YACf~~,OAAO,CACL,eAAC,cAAc,OACT,IAAI,EACR,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,gBAAgB,EAC1B,UAAU,EAAE,kBAAkB,EAC9B,QAAQ,EAAE,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EACzC,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,OAAO,EAAE,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,GAC3B,CACH,CAAC;QACJ,CAAC,CAAC,CACH,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,OAAO,EAAE,SAAS,GAAI,CACnC,GACoB,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { forwardRef, useState } ~~from~~ ~~'react';\nimport~~ type { PropsWithoutRef } from 'react';\n\nimport { EmptyState } from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\n\nimport type { ExpressionItemProps, ExpressionListProps } from './ExpressionBuilder.types';\nimport ExpressionItem from './ExpressionItem';\nimport { StyledExpressionList } from './ExpressionBuilder.styles';\n\nconst ExpressionList: ForwardRefForwardPropsComponent<ExpressionListProps> = forwardRef(\n function ExpressionList(\n {\n items,\n emptyText,\n onItemAdd,\n onItemExpand,\n onItemCollapse,\n details,\n ...restProps\n }: PropsWithoutRef<ExpressionListProps>,\n ref: ExpressionListProps['ref']\n ) {\n const [expandedItems, setExpandedItems] = useState<ExpressionItemProps['id'][]>([]);\n\n const handleItemExpand = (id: ExpressionItemProps['id']) => {\n setExpandedItems(prev => {\n const itemIndex = prev.indexOf(id);\n if (itemIndex !== -1) return prev;\n onItemExpand?.(id);\n return [...prev, id];\n });\n };\n\n const handleItemCollapse = (id: ExpressionItemProps['id']) => {\n setExpandedItems(prev => {\n const itemIndex = prev.indexOf(id);\n if (itemIndex === -1) return prev;\n onItemCollapse?.(id);\n return prev.filter(itemId => itemId !== id);\n });\n };\n\n return (\n <StyledExpressionList {...restProps} ref={~~ref~~}>\n {items && items.length > 0 ? (\n items.map(item => {\n return (\n <ExpressionItem\n {...item}\n onAdd={onItemAdd}\n onExpand={handleItemExpand}\n onCollapse={handleItemCollapse}\n expanded={expandedItems.includes(item.id)}\n key={item.id}\n details={details?.[item.id]}\n />\n );\n })\n ) : (\n <EmptyState message={emptyText} />\n )}\n </StyledExpressionList>\n );\n }\n);\n\nexport default ExpressionList;\n"]}
1	+ {"version":3,"file":"ExpressionList.js","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useRef, useEffect, type PropsWithoutRef } from 'react';\n\nimport {\n EmptyState,\n useItemIntersection,\n useConsolidatedRef,\n useTestIds,\n withTestIds\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\n\nimport type { ExpressionItemProps, ExpressionListProps } from './ExpressionBuilder.types';\nimport ExpressionItem from './ExpressionItem';\nimport { StyledExpressionList } from './ExpressionBuilder.styles';\nimport { getExpressionListTestIds } from './ExpressionBuilder.test-ids';\n\nconst LIST_OFFSET = 20;\nconst ExpressionList: ForwardRefForwardPropsComponent<ExpressionListProps> = forwardRef(\n function ExpressionList(\n {\n testId,\n items = [],\n emptyText,\n onItemAdd,\n onItemExpand,\n onItemCollapse,\n details,\n ...restProps\n }: PropsWithoutRef<ExpressionListProps>,\n ref: ExpressionListProps['ref']\n ) {\n const [count, setCount] = useState(Math.min(LIST_OFFSET, items.length));\n const listRef = useRef<HTMLUListElement>(null);\n\n useEffect(() => {\n setCount(Math.min(LIST_OFFSET, items.length));\n }, [items]);\n\n const consolidatedRef = useConsolidatedRef(ref, listRef);\n\n useItemIntersection(\n consolidatedRef,\n count - 1,\n () => {\n setCount(prev => Math.min(items.length, prev + LIST_OFFSET));\n },\n ':scope > li'\n );\n const [expandedItems, setExpandedItems] = useState<ExpressionItemProps['id'][]>([]);\n\n const handleItemExpand = (id: ExpressionItemProps['id']) => {\n setExpandedItems(prev => {\n const itemIndex = prev.indexOf(id);\n if (itemIndex !== -1) return prev;\n onItemExpand?.(id);\n return [...prev, id];\n });\n };\n\n const handleItemCollapse = (id: ExpressionItemProps['id']) => {\n setExpandedItems(prev => {\n const itemIndex = prev.indexOf(id);\n if (itemIndex === -1) return prev;\n onItemCollapse?.(id);\n return prev.filter(itemId => itemId !== id);\n });\n };\n const testIds = useTestIds(testId, getExpressionListTestIds);\n return (\n <StyledExpressionList {...restProps} ref={consolidatedRef} data-testid={testIds.root}>\n {items && items.length > 0 ? (\n items.slice(0, count).map(item => {\n return (\n <ExpressionItem\n {...item}\n onAdd={onItemAdd}\n onExpand={handleItemExpand}\n onCollapse={handleItemCollapse}\n expanded={expandedItems.includes(item.id)}\n key={item.id}\n details={details?.[item.id]}\n />\n );\n })\n ) : (\n <EmptyState message={emptyText} />\n )}\n </StyledExpressionList>\n );\n }\n);\n\nexport default withTestIds(ExpressionList, getExpressionListTestIds);\n"]}

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

@@ -5,4 +5,5 @@ export { default as ExpressionItem } from './ExpressionItem';
 export { default as ExpressionList } from './ExpressionList';
 export { default as ExpressionDetails } from './ExpressionDetails';
 export { default as CodeEditor } from './CodeEditor/CodeEditor';
+export { default as ExpressionBuilderContext } from './ExpressionBuilderContext';
 //# sourceMappingURL=index.d.ts.map

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

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

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

@@ -3,4 +3,5 @@ export { default as ExpressionItem } from './ExpressionItem';
 export { default as ExpressionList } from './ExpressionList';
 export { default as ExpressionDetails } from './ExpressionDetails';
 export { default as CodeEditor } from './CodeEditor/CodeEditor';
+export { default as ExpressionBuilderContext } from './ExpressionBuilderContext';
 //# sourceMappingURL=index.js.map