@pega/cosmos-react-build 9.0.0-build.1.0 → 9.0.0-build.10.1

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

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

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

@@ -1,8 +1,11 @@
 import type { ExpressionItemProps } from './ExpressionBuilder.types';
+import type { CodeEditorProps } from './CodeEditor/CodeEditor.types';
 export declare const StyledPrimaryText: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").TextProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledExpressionSummary: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledExpressionExplanation: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledExpressionList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledExpressionBuilder: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledExpressionBuilder: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").FlexProps>, import("styled-components").DefaultTheme, Pick<CodeEditorProps, "showEditorOnly"> & {
+    showGenerateExpression: boolean;
+}, never>;
 export declare const StyledParamsGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledInputParamsGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledExpressionDetails: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
@@ -10,4 +13,17 @@ export declare const StyledExpandCollapseContent: import("styled-components").St
 export declare const StyledExpressionItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
     expanded: ExpressionItemProps["expanded"];
 }, never>;
+export declare const StyledClearButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledExplanationContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledExpressionWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCodeEditorContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    explainEnabled: boolean;
+}, never>;
+export declare const StyledExplainContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledExpressions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFormField: import("styled-components").StyledComponent<import("react").FC<import("@pega/cosmos-react-core").FormFieldProps & import("@pega/cosmos-react-core").ForwardProps> & {
+    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+}, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledGeneratedExpression: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledInsertButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=ExpressionBuilder.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExpressionBuilder.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.styles.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAErE,eAAO,MAAM,iBAAiB,kNAE7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,yGAKlC,CAAC;AAIH,eAAO,MAAM,oBAAoB,wGAIhC,CAAC;AAEF,eAAO,MAAM,uBAAuB,yGASlC,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAQ5B,CAAC;AAIH,eAAO,MAAM,sBAAsB,yGAIjC,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAAe,CAAC;AAIpD,eAAO,MAAM,2BAA2B,yGAQtC,CAAC;AAIH,eAAO,MAAM,oBAAoB;cACrB,mBAAmB,CAAC,UAAU,CAAC;SAuBzC,CAAC"}
+{"version":3,"file":"ExpressionBuilder.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.styles.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAKrE,eAAO,MAAM,iBAAiB,kNAE7B,CAAC;AAEF,eAAO,MAAM,2BAA2B,yGAKtC,CAAC;AAIH,eAAO,MAAM,oBAAoB,wGAWhC,CAAC;AAIF,eAAO,MAAM,uBAAuB;4BACkC,OAAO;SAuB3E,CAAC;AAGH,eAAO,MAAM,iBAAiB,yGAQ5B,CAAC;AAIH,eAAO,MAAM,sBAAsB,yGAIjC,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAAe,CAAC;AAIpD,eAAO,MAAM,2BAA2B,yGAQtC,CAAC;AAIH,eAAO,MAAM,oBAAoB;cACrB,mBAAmB,CAAC,UAAU,CAAC;SAuBzC,CAAC;AAIH,eAAO,MAAM,iBAAiB,4GAE7B,CAAC;AAEF,eAAO,MAAM,0BAA0B,yGAKtC,CAAC;AAEF,eAAO,MAAM,uBAAuB,yGAOnC,CAAC;AAIF,eAAO,MAAM,yBAAyB;oBAAgC,OAAO;SAW5E,CAAC;AAEF,eAAO,MAAM,sBAAsB,yGAElC,CAAC;AAEF,eAAO,MAAM,iBAAiB,yGAE7B,CAAC;AAEF,eAAO,MAAM,eAAe;2BAlDa,CAAC;uDAqDzC,CAAC;AAEF,eAAO,MAAM,yBAAyB,yGASrC,CAAC;AAIF,eAAO,MAAM,kBAAkB,4GAE9B,CAAC"}

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

@@ -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

@@ -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"]}
+{"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

@@ -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

@@ -0,0 +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

@@ -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

@@ -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

@@ -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

@@ -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 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"]}
+{"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

@@ -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

@@ -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"}
+{"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

@@ -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

@@ -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"]}
+{"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

@@ -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

@@ -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"}
+{"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

@@ -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

@@ -1 +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} 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"]}
+{"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"]}