@pega/cosmos-react-build 9.0.0-build.3.0 → 9.0.0-build.3.2
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.
- package/lib/components/Expression/Expression.test-ids.d.ts +1 -0
- package/lib/components/Expression/Expression.test-ids.d.ts.map +1 -1
- package/lib/components/Expression/Expression.test-ids.js +6 -0
- package/lib/components/Expression/Expression.test-ids.js.map +1 -1
- package/lib/components/ExpressionBuilder/CodeEditor/CodeEditor.d.ts.map +1 -1
- package/lib/components/ExpressionBuilder/CodeEditor/CodeEditor.js +1 -0
- package/lib/components/ExpressionBuilder/CodeEditor/CodeEditor.js.map +1 -1
- package/lib/components/ExpressionBuilder/CodeEditor/CodeEditor.styles.d.ts.map +1 -1
- package/lib/components/ExpressionBuilder/CodeEditor/CodeEditor.styles.js +1 -0
- package/lib/components/ExpressionBuilder/CodeEditor/CodeEditor.styles.js.map +1 -1
- package/lib/components/ExpressionBuilder/ExpressionBuilder.d.ts +4 -2
- package/lib/components/ExpressionBuilder/ExpressionBuilder.d.ts.map +1 -1
- package/lib/components/ExpressionBuilder/ExpressionBuilder.js +66 -25
- package/lib/components/ExpressionBuilder/ExpressionBuilder.js.map +1 -1
- package/lib/components/ExpressionBuilder/ExpressionBuilder.styles.d.ts +18 -2
- package/lib/components/ExpressionBuilder/ExpressionBuilder.styles.d.ts.map +1 -1
- package/lib/components/ExpressionBuilder/ExpressionBuilder.styles.js +80 -13
- package/lib/components/ExpressionBuilder/ExpressionBuilder.styles.js.map +1 -1
- package/lib/components/ExpressionBuilder/ExpressionBuilder.test-ids.d.ts +5 -0
- package/lib/components/ExpressionBuilder/ExpressionBuilder.test-ids.d.ts.map +1 -0
- package/lib/components/ExpressionBuilder/ExpressionBuilder.test-ids.js +22 -0
- package/lib/components/ExpressionBuilder/ExpressionBuilder.test-ids.js.map +1 -0
- package/lib/components/ExpressionBuilder/ExpressionBuilder.types.d.ts +33 -5
- package/lib/components/ExpressionBuilder/ExpressionBuilder.types.d.ts.map +1 -1
- package/lib/components/ExpressionBuilder/ExpressionBuilder.types.js.map +1 -1
- package/lib/components/ExpressionBuilder/ExpressionDetails.d.ts +4 -2
- package/lib/components/ExpressionBuilder/ExpressionDetails.d.ts.map +1 -1
- package/lib/components/ExpressionBuilder/ExpressionDetails.js +6 -4
- package/lib/components/ExpressionBuilder/ExpressionDetails.js.map +1 -1
- package/lib/components/ExpressionBuilder/ExpressionItem.d.ts +4 -2
- package/lib/components/ExpressionBuilder/ExpressionItem.d.ts.map +1 -1
- package/lib/components/ExpressionBuilder/ExpressionItem.js +8 -6
- package/lib/components/ExpressionBuilder/ExpressionItem.js.map +1 -1
- package/lib/components/ExpressionBuilder/ExpressionList.d.ts +4 -2
- package/lib/components/ExpressionBuilder/ExpressionList.d.ts.map +1 -1
- package/lib/components/ExpressionBuilder/ExpressionList.js +17 -5
- package/lib/components/ExpressionBuilder/ExpressionList.js.map +1 -1
- package/lib/components/ExpressionBuilder/index.d.ts +1 -0
- package/lib/components/ExpressionBuilder/index.d.ts.map +1 -1
- package/lib/components/ExpressionBuilder/index.js +1 -0
- package/lib/components/ExpressionBuilder/index.js.map +1 -1
- package/package.json +4 -4
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import type { ExpressionItemProps } from './ExpressionBuilder.types';
|
|
2
|
+
import type { CodeEditorProps } from './CodeEditor/CodeEditor.types';
|
|
2
3
|
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>;
|
|
3
|
-
export declare const
|
|
4
|
+
export declare const StyledExpressionExplanation: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
4
5
|
export declare const StyledExpressionList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
|
|
5
|
-
export declare const StyledExpressionBuilder: import("styled-components").StyledComponent<"
|
|
6
|
+
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"> & {
|
|
7
|
+
showGenerateExpression: boolean;
|
|
8
|
+
}, never>;
|
|
6
9
|
export declare const StyledParamsGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
7
10
|
export declare const StyledInputParamsGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
8
11
|
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
|
|
|
10
13
|
export declare const StyledExpressionItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
|
|
11
14
|
expanded: ExpressionItemProps["expanded"];
|
|
12
15
|
}, never>;
|
|
16
|
+
export declare const StyledClearButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
|
|
17
|
+
export declare const StyledExplanationContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
18
|
+
export declare const StyledExpressionWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
19
|
+
export declare const StyledCodeEditorContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
20
|
+
explainEnabled: boolean;
|
|
21
|
+
}, never>;
|
|
22
|
+
export declare const StyledExplainContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
23
|
+
export declare const StyledExpressions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
24
|
+
export declare const StyledFormField: import("styled-components").StyledComponent<import("react").FC<import("@pega/cosmos-react-core").FormFieldProps & import("@pega/cosmos-react-core").ForwardProps> & {
|
|
25
|
+
getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
|
|
26
|
+
}, import("styled-components").DefaultTheme, {}, never>;
|
|
27
|
+
export declare const StyledGeneratedExpression: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
28
|
+
export declare const StyledInsertButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
|
|
13
29
|
//# sourceMappingURL=ExpressionBuilder.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpressionBuilder.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionBuilder.styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"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"}
|
|
@@ -1,28 +1,45 @@
|
|
|
1
1
|
import styled, { css } from 'styled-components';
|
|
2
|
-
import { defaultThemeProp, StyledButton, StyledLabel, StyledText, Text } from '@pega/cosmos-react-core';
|
|
2
|
+
import { defaultThemeProp, StyledButton, StyledLabel, StyledText, Text, Flex, FormField } from '@pega/cosmos-react-core';
|
|
3
|
+
const contentWidth = 'content-width';
|
|
4
|
+
const borderLine = 'border-line';
|
|
3
5
|
export const StyledPrimaryText = styled(Text) `
|
|
4
6
|
word-break: break-word;
|
|
5
7
|
`;
|
|
6
|
-
export const
|
|
8
|
+
export const StyledExpressionExplanation = styled.div(({ theme }) => {
|
|
7
9
|
return css `
|
|
8
10
|
padding-block: ${theme.base.spacing};
|
|
9
11
|
padding-inline: calc(0.5 * ${theme.base.spacing});
|
|
10
12
|
`;
|
|
11
13
|
});
|
|
12
|
-
|
|
13
|
-
export const StyledExpressionList = styled.ul `
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
StyledExpressionExplanation.defaultProps = defaultThemeProp;
|
|
15
|
+
export const StyledExpressionList = styled.ul(({ theme: { base: { spacing } } }) => css `
|
|
16
|
+
overflow-y: auto;
|
|
17
|
+
flex-grow: 1;
|
|
18
|
+
list-style: none;
|
|
19
|
+
padding-inline-end: ${spacing};
|
|
20
|
+
`);
|
|
21
|
+
StyledExpressionList.defaultProps = defaultThemeProp;
|
|
22
|
+
export const StyledExpressionBuilder = styled(Flex)(({ theme, showEditorOnly, showGenerateExpression }) => {
|
|
19
23
|
return css `
|
|
20
24
|
position: relative;
|
|
21
25
|
background-color: ${theme.base.palette['primary-background']};
|
|
22
26
|
min-height: calc(30 * ${theme.base.spacing});
|
|
23
27
|
max-height: 100%;
|
|
24
|
-
|
|
25
|
-
|
|
28
|
+
${showGenerateExpression &&
|
|
29
|
+
css `
|
|
30
|
+
${StyledExpressionList} {
|
|
31
|
+
overflow-y: unset;
|
|
32
|
+
}
|
|
33
|
+
`}
|
|
34
|
+
${showEditorOnly
|
|
35
|
+
? css `
|
|
36
|
+
width: max-content;
|
|
37
|
+
`
|
|
38
|
+
: css `
|
|
39
|
+
min-width: calc(${theme.base[contentWidth].lg} + 4 * ${theme.base.spacing});
|
|
40
|
+
`}
|
|
41
|
+
border: 0.0625rem solid ${theme.base.palette[borderLine]};
|
|
42
|
+
border-radius: calc(0.5 * ${theme.base['border-radius']});
|
|
26
43
|
`;
|
|
27
44
|
});
|
|
28
45
|
StyledExpressionBuilder.defaultProps = defaultThemeProp;
|
|
@@ -38,7 +55,7 @@ export const StyledParamsGroup = styled.div(({ theme }) => {
|
|
|
38
55
|
StyledParamsGroup.defaultProps = defaultThemeProp;
|
|
39
56
|
export const StyledInputParamsGroup = styled(StyledParamsGroup)(({ theme }) => {
|
|
40
57
|
return css `
|
|
41
|
-
max-width: ${theme.base[
|
|
58
|
+
max-width: ${theme.base[contentWidth].lg};
|
|
42
59
|
`;
|
|
43
60
|
});
|
|
44
61
|
StyledInputParamsGroup.defaultProps = defaultThemeProp;
|
|
@@ -64,7 +81,7 @@ export const StyledExpressionItem = styled.li(({ theme, expanded }) => {
|
|
|
64
81
|
`}
|
|
65
82
|
|
|
66
83
|
:not(:last-child) {
|
|
67
|
-
border-bottom: 0.0625rem solid ${theme.base.palette[
|
|
84
|
+
border-bottom: 0.0625rem solid ${theme.base.palette[borderLine]};
|
|
68
85
|
}
|
|
69
86
|
|
|
70
87
|
${StyledExpressionDetails} {
|
|
@@ -78,4 +95,54 @@ export const StyledExpressionItem = styled.li(({ theme, expanded }) => {
|
|
|
78
95
|
`;
|
|
79
96
|
});
|
|
80
97
|
StyledExpressionItem.defaultProps = defaultThemeProp;
|
|
98
|
+
export const StyledClearButton = styled.button `
|
|
99
|
+
align-self: flex-end;
|
|
100
|
+
`;
|
|
101
|
+
export const StyledExplanationContainer = styled.div `
|
|
102
|
+
position: relative;
|
|
103
|
+
> div:nth-child(2) {
|
|
104
|
+
margin-block: 0;
|
|
105
|
+
}
|
|
106
|
+
`;
|
|
107
|
+
export const StyledExpressionWrapper = styled.div(({ theme }) => css `
|
|
108
|
+
overflow-y: auto;
|
|
109
|
+
border-inline-start: 0.0625rem solid ${theme.base.palette[borderLine]};
|
|
110
|
+
justify-content: space-between;
|
|
111
|
+
flex-wrap: nowrap;
|
|
112
|
+
`);
|
|
113
|
+
StyledExpressionWrapper.defaultProps = defaultThemeProp;
|
|
114
|
+
export const StyledCodeEditorContainer = styled.div(({ explainEnabled }) => {
|
|
115
|
+
return css `
|
|
116
|
+
${explainEnabled &&
|
|
117
|
+
css `
|
|
118
|
+
min-height: 10rem;
|
|
119
|
+
overflow-y: auto;
|
|
120
|
+
flex-grow: 1;
|
|
121
|
+
`}
|
|
122
|
+
`;
|
|
123
|
+
});
|
|
124
|
+
export const StyledExplainContainer = styled.div `
|
|
125
|
+
min-height: 2rem;
|
|
126
|
+
`;
|
|
127
|
+
export const StyledExpressions = styled.div `
|
|
128
|
+
overflow-y: auto;
|
|
129
|
+
`;
|
|
130
|
+
export const StyledFormField = styled(FormField) `
|
|
131
|
+
height: inherit;
|
|
132
|
+
width: 100%;
|
|
133
|
+
`;
|
|
134
|
+
export const StyledGeneratedExpression = styled.div `
|
|
135
|
+
position: relative;
|
|
136
|
+
> div:nth-child(3) {
|
|
137
|
+
margin-block: 0;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.react-codemirror2 {
|
|
141
|
+
height: ${props => props.theme.components['text-area']['min-height']};
|
|
142
|
+
}
|
|
143
|
+
`;
|
|
144
|
+
StyledGeneratedExpression.defaultProps = defaultThemeProp;
|
|
145
|
+
export const StyledInsertButton = styled.button `
|
|
146
|
+
align-self: flex-end;
|
|
147
|
+
`;
|
|
81
148
|
//# sourceMappingURL=ExpressionBuilder.styles.js.map
|
|
@@ -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,
|
|
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"]}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
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"]>;
|
|
2
|
+
export declare const getExpressionListTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<never[]>;
|
|
3
|
+
export declare const getExpressionDetailsTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["primary-fields", "output-params"]>;
|
|
4
|
+
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"]>;
|
|
5
|
+
//# sourceMappingURL=ExpressionBuilder.test-ids.d.ts.map
|
|
@@ -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"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { createTestIds } from '@pega/cosmos-react-core';
|
|
2
|
+
export const getExpressionBuilderIds = createTestIds('expression-builder', [
|
|
3
|
+
'search',
|
|
4
|
+
'explanation',
|
|
5
|
+
'explain',
|
|
6
|
+
'clear',
|
|
7
|
+
'insert',
|
|
8
|
+
'generate',
|
|
9
|
+
'generated-expression',
|
|
10
|
+
'describe-expression'
|
|
11
|
+
]);
|
|
12
|
+
export const getExpressionListTestIds = createTestIds('list', []);
|
|
13
|
+
export const getExpressionDetailsTestIds = createTestIds('content', [
|
|
14
|
+
'primary-fields',
|
|
15
|
+
'output-params'
|
|
16
|
+
]);
|
|
17
|
+
export const getExpressionItemsTestIds = createTestIds('item', [
|
|
18
|
+
'collapse-item-button',
|
|
19
|
+
'add-item-button',
|
|
20
|
+
'add-item'
|
|
21
|
+
]);
|
|
22
|
+
//# sourceMappingURL=ExpressionBuilder.test-ids.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { ComponentType, Ref } from 'react';
|
|
2
|
-
import type { BaseProps, EmptyStateProps, OmitStrict, SearchInputProps, FieldValueListProps, MenuProps } from '@pega/cosmos-react-core';
|
|
2
|
+
import type { BaseProps, EmptyStateProps, OmitStrict, SearchInputProps, FieldValueListProps, MenuProps, TestIdProp, FormControlProps, TextAreaProps } from '@pega/cosmos-react-core';
|
|
3
3
|
import type { CodeEditorProps, CustomPositionProps } from './CodeEditor/CodeEditor.types';
|
|
4
|
-
export interface ExpressionItemProps {
|
|
4
|
+
export interface ExpressionItemProps extends TestIdProp {
|
|
5
5
|
/** Id of the item */
|
|
6
6
|
id: string;
|
|
7
7
|
/** Item name to be displayed as rule name */
|
|
@@ -24,7 +24,7 @@ export interface ExpressionItemProps {
|
|
|
24
24
|
value: string;
|
|
25
25
|
};
|
|
26
26
|
}
|
|
27
|
-
export interface ExpressionListProps extends BaseProps {
|
|
27
|
+
export interface ExpressionListProps extends BaseProps, TestIdProp {
|
|
28
28
|
ref?: Ref<HTMLUListElement>;
|
|
29
29
|
/** Expression builder items */
|
|
30
30
|
items?: OmitStrict<ExpressionItemProps, 'onAdd' | 'onExpand' | 'onCollapse' | 'details'>[];
|
|
@@ -47,7 +47,9 @@ export interface HandleValue {
|
|
|
47
47
|
/** Insert the expression value */
|
|
48
48
|
insertExpression?: (expression: string, replaceContent?: boolean, customCursorPosition?: CustomPositionProps) => void;
|
|
49
49
|
}
|
|
50
|
-
export interface ExpressionBuilderProps extends BaseProps,
|
|
50
|
+
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'> {
|
|
51
|
+
/** Placeholder text for the editor */
|
|
52
|
+
placeholder?: string;
|
|
51
53
|
ref?: Ref<HTMLDivElement>;
|
|
52
54
|
/** Expression items list */
|
|
53
55
|
list: OmitStrict<ExpressionListProps, 'ref' | 'onItemAdd'> & {
|
|
@@ -57,13 +59,39 @@ export interface ExpressionBuilderProps extends BaseProps, OmitStrict<CodeEditor
|
|
|
57
59
|
search: Pick<Required<SearchInputProps>, 'filters' | 'onFilterChange' | 'onSearchChange' | 'value'> & Pick<SearchInputProps, 'defaultFilter'> & Pick<MenuProps, 'accent'>;
|
|
58
60
|
/** Imperative handle */
|
|
59
61
|
handle?: Ref<HandleValue>;
|
|
62
|
+
/** Show only editor instead of expression list and expression details */
|
|
63
|
+
showEditorOnly?: boolean;
|
|
64
|
+
/** Expression explanation */
|
|
65
|
+
generateExplanation: {
|
|
66
|
+
loadingExplanation?: boolean;
|
|
67
|
+
/** Explain expression */
|
|
68
|
+
onExplain: () => void;
|
|
69
|
+
/** Clearing explanation */
|
|
70
|
+
onClearExplanation: () => void;
|
|
71
|
+
/** Explanation of expression generated from AI */
|
|
72
|
+
explanation?: string;
|
|
73
|
+
};
|
|
74
|
+
generateExpression?: {
|
|
75
|
+
/** Describe expression textarea */
|
|
76
|
+
describeExpressionTextArea?: Pick<TextAreaProps, 'additionalInfo' | 'placeholder' | 'defaultValue'> & {
|
|
77
|
+
error?: string;
|
|
78
|
+
};
|
|
79
|
+
/** Generate expression callback */
|
|
80
|
+
onGenerateExpression: (prompt: string) => void;
|
|
81
|
+
/** Expression generation in-progress */
|
|
82
|
+
loadingExpression?: boolean;
|
|
83
|
+
/** Expression generated from AI */
|
|
84
|
+
generatedExpression?: string;
|
|
85
|
+
/** Insert expression callback */
|
|
86
|
+
onInsert: (generatedExpression: string) => void;
|
|
87
|
+
};
|
|
60
88
|
}
|
|
61
89
|
export interface InputParams<P> {
|
|
62
90
|
id: string;
|
|
63
91
|
renderer: ComponentType<P>;
|
|
64
92
|
rendererProps: P;
|
|
65
93
|
}
|
|
66
|
-
export interface ExpressionDetailsProps extends BaseProps {
|
|
94
|
+
export interface ExpressionDetailsProps extends BaseProps, TestIdProp {
|
|
67
95
|
/** Primary details of the expression */
|
|
68
96
|
primary: Required<FieldValueListProps['fields']>;
|
|
69
97
|
/** Output params of the expression */
|
|
@@ -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,
|
|
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,EACT,UAAU,EACV,gBAAgB,EAChB,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAE1F,MAAM,WAAW,mBAAoB,SAAQ,UAAU;IACrD,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,EAAE,UAAU;IAChE,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,EACV,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,OAAO,GAAG,gBAAgB,CAAC,EAC/D,IAAI,CACF,eAAe,EACb,cAAc,GACd,QAAQ,GACR,UAAU,GACV,kBAAkB,GAClB,sBAAsB,GACtB,SAAS,GACT,QAAQ,GACR,UAAU,GACV,cAAc,GACd,cAAc,GACd,kBAAkB,CACrB;IACH,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,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;IAC1B,yEAAyE;IACzE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,6BAA6B;IAC7B,mBAAmB,EAAE;QACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,yBAAyB;QACzB,SAAS,EAAE,MAAM,IAAI,CAAC;QACtB,2BAA2B;QAC3B,kBAAkB,EAAE,MAAM,IAAI,CAAC;QAC/B,kDAAkD;QAClD,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,kBAAkB,CAAC,EAAE;QACnB,mCAAmC;QACnC,0BAA0B,CAAC,EAAE,IAAI,CAC/B,aAAa,EACb,gBAAgB,GAAG,aAAa,GAAG,cAAc,CAClD,GAAG;YACF,KAAK,CAAC,EAAE,MAAM,CAAC;SAChB,CAAC;QACF,mCAAmC;QACnC,oBAAoB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;QAC/C,wCAAwC;QACxC,iBAAiB,CAAC,EAAE,OAAO,CAAC;QAC5B,mCAAmC;QACnC,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,iCAAiC;QACjC,QAAQ,EAAE,CAAC,mBAAmB,EAAE,MAAM,KAAK,IAAI,CAAC;KACjD,CAAC;CACH;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,EAAE,UAAU;IACnE,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 +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
|
|
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"]}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
|
|
2
2
|
import type { ExpressionDetailsProps } from './ExpressionBuilder.types';
|
|
3
|
-
declare const
|
|
4
|
-
|
|
3
|
+
declare const _default: ForwardRefForwardPropsComponent<ExpressionDetailsProps> & {
|
|
4
|
+
getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["primary-fields", "output-params"]>;
|
|
5
|
+
};
|
|
6
|
+
export default _default;
|
|
5
7
|
//# sourceMappingURL=ExpressionDetails.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpressionDetails.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionDetails.tsx"],"names":[],"mappings":"
|
|
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"}
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
|
-
import { FieldValueList, Flex, Text, useI18n } from '@pega/cosmos-react-core';
|
|
3
|
+
import { FieldValueList, Flex, Text, useI18n, withTestIds, useTestIds } from '@pega/cosmos-react-core';
|
|
4
4
|
import { StyledExpressionDetails, StyledInputParamsGroup, StyledParamsGroup } from './ExpressionBuilder.styles';
|
|
5
|
-
|
|
5
|
+
import { getExpressionDetailsTestIds } from './ExpressionBuilder.test-ids';
|
|
6
|
+
const ExpressionDetails = forwardRef(function ExpressionDetails({ testId, primary, inputParams, outputParams, ...restProps }, ref) {
|
|
6
7
|
const t = useI18n();
|
|
7
|
-
|
|
8
|
+
const testIds = useTestIds(testId, getExpressionDetailsTestIds);
|
|
9
|
+
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 }) => {
|
|
8
10
|
return _jsx(Renderer, { ...rendererProps }, id);
|
|
9
11
|
}) })] }))] }));
|
|
10
12
|
});
|
|
11
|
-
export default ExpressionDetails;
|
|
13
|
+
export default withTestIds(ExpressionDetails, getExpressionDetailsTestIds);
|
|
12
14
|
//# sourceMappingURL=ExpressionDetails.js.map
|
|
@@ -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,
|
|
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"]}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import type { FunctionComponent } from 'react';
|
|
2
2
|
import type { ForwardProps } from '@pega/cosmos-react-core';
|
|
3
3
|
import type { ExpressionItemProps } from './ExpressionBuilder.types';
|
|
4
|
-
declare const
|
|
5
|
-
|
|
4
|
+
declare const _default: FunctionComponent<ExpressionItemProps & ForwardProps> & {
|
|
5
|
+
getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["collapse-item-button", "add-item-button", "add-item"]>;
|
|
6
|
+
};
|
|
7
|
+
export default _default;
|
|
6
8
|
//# sourceMappingURL=ExpressionItem.d.ts.map
|
|
@@ -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;
|
|
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"}
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useContext, useMemo } from 'react';
|
|
3
|
-
import { Button, ExpandCollapse, Flex, Icon, Mark, registerIcon, replaceMatchWithElement, StyledLabel, Text, useDirection, useI18n } from '@pega/cosmos-react-core';
|
|
3
|
+
import { Button, ExpandCollapse, Flex, Icon, Mark, registerIcon, replaceMatchWithElement, StyledLabel, Text, useDirection, useI18n, useTestIds, withTestIds } from '@pega/cosmos-react-core';
|
|
4
4
|
import * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';
|
|
5
5
|
import * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';
|
|
6
|
-
import { StyledPrimaryText, StyledExpandCollapseContent,
|
|
6
|
+
import { StyledPrimaryText, StyledExpandCollapseContent, StyledExpressionExplanation, StyledExpressionItem } from './ExpressionBuilder.styles';
|
|
7
7
|
import ExpressionDetails from './ExpressionDetails';
|
|
8
8
|
import ExpressionBuilderContext from './ExpressionBuilderContext';
|
|
9
|
+
import { getExpressionItemsTestIds } from './ExpressionBuilder.test-ids';
|
|
9
10
|
registerIcon(caretLeftIcon, caretRightIcon);
|
|
10
|
-
const ExpressionItem = ({ id, primary, type, onAdd, onExpand, onCollapse, details, matchedField, expanded = false, ...restProps }) => {
|
|
11
|
+
const ExpressionItem = ({ id, testId, primary, type, onAdd, onExpand, onCollapse, details, matchedField, expanded = false, ...restProps }) => {
|
|
11
12
|
const { end: caretDirection } = useDirection();
|
|
12
13
|
const t = useI18n();
|
|
14
|
+
const testIds = useTestIds(testId, getExpressionItemsTestIds);
|
|
13
15
|
const { accent } = useContext(ExpressionBuilderContext);
|
|
14
16
|
const accentedText = (text) => {
|
|
15
17
|
if (accent) {
|
|
@@ -24,7 +26,7 @@ const ExpressionItem = ({ id, primary, type, onAdd, onExpand, onCollapse, detail
|
|
|
24
26
|
return expanded ? 'caret-down' : `caret-${caretDirection}`;
|
|
25
27
|
}, [expanded, caretDirection]);
|
|
26
28
|
const accentedMeta = matchedField && !expanded ? accentedText(matchedField.value) : undefined;
|
|
27
|
-
return (_jsxs(StyledExpressionItem, { expanded: expanded, children: [_jsxs(Flex, { ...restProps, as:
|
|
29
|
+
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
|
|
28
30
|
? () => {
|
|
29
31
|
if (expanded) {
|
|
30
32
|
onCollapse?.(id);
|
|
@@ -33,7 +35,7 @@ const ExpressionItem = ({ id, primary, type, onAdd, onExpand, onCollapse, detail
|
|
|
33
35
|
onExpand?.(id);
|
|
34
36
|
}
|
|
35
37
|
}
|
|
36
|
-
: 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') })] }) })] }));
|
|
38
|
+
: 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') })] }) })] }));
|
|
37
39
|
};
|
|
38
|
-
export default ExpressionItem;
|
|
40
|
+
export default withTestIds(ExpressionItem, getExpressionItemsTestIds);
|
|
39
41
|
//# sourceMappingURL=ExpressionItem.js.map
|
|
@@ -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,
|
|
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"]}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
|
|
2
2
|
import type { ExpressionListProps } from './ExpressionBuilder.types';
|
|
3
|
-
declare const
|
|
4
|
-
|
|
3
|
+
declare const _default: ForwardRefForwardPropsComponent<ExpressionListProps> & {
|
|
4
|
+
getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<never[]>;
|
|
5
|
+
};
|
|
6
|
+
export default _default;
|
|
5
7
|
//# sourceMappingURL=ExpressionList.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpressionList.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionBuilder/ExpressionList.tsx"],"names":[],"mappings":"
|
|
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"}
|
|
@@ -1,10 +1,21 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { createElement as _createElement } from "react";
|
|
3
|
-
import { forwardRef, useState } from 'react';
|
|
4
|
-
import { EmptyState } from '@pega/cosmos-react-core';
|
|
3
|
+
import { forwardRef, useState, useRef, useEffect } from 'react';
|
|
4
|
+
import { EmptyState, useItemIntersection, useConsolidatedRef, useTestIds, withTestIds } from '@pega/cosmos-react-core';
|
|
5
5
|
import ExpressionItem from './ExpressionItem';
|
|
6
6
|
import { StyledExpressionList } from './ExpressionBuilder.styles';
|
|
7
|
-
|
|
7
|
+
import { getExpressionListTestIds } from './ExpressionBuilder.test-ids';
|
|
8
|
+
const LIST_OFFSET = 20;
|
|
9
|
+
const ExpressionList = forwardRef(function ExpressionList({ testId, items = [], emptyText, onItemAdd, onItemExpand, onItemCollapse, details, ...restProps }, ref) {
|
|
10
|
+
const [count, setCount] = useState(Math.min(LIST_OFFSET, items.length));
|
|
11
|
+
const listRef = useRef(null);
|
|
12
|
+
useEffect(() => {
|
|
13
|
+
setCount(Math.min(LIST_OFFSET, items.length));
|
|
14
|
+
}, [items]);
|
|
15
|
+
const consolidatedRef = useConsolidatedRef(ref, listRef);
|
|
16
|
+
useItemIntersection(consolidatedRef, count - 1, () => {
|
|
17
|
+
setCount(prev => Math.min(items.length, prev + LIST_OFFSET));
|
|
18
|
+
}, ':scope > li');
|
|
8
19
|
const [expandedItems, setExpandedItems] = useState([]);
|
|
9
20
|
const handleItemExpand = (id) => {
|
|
10
21
|
setExpandedItems(prev => {
|
|
@@ -24,9 +35,10 @@ const ExpressionList = forwardRef(function ExpressionList({ items, emptyText, on
|
|
|
24
35
|
return prev.filter(itemId => itemId !== id);
|
|
25
36
|
});
|
|
26
37
|
};
|
|
27
|
-
|
|
38
|
+
const testIds = useTestIds(testId, getExpressionListTestIds);
|
|
39
|
+
return (_jsx(StyledExpressionList, { ...restProps, ref: consolidatedRef, "data-testid": testIds.root, children: items && items.length > 0 ? (items.slice(0, count).map(item => {
|
|
28
40
|
return (_createElement(ExpressionItem, { ...item, onAdd: onItemAdd, onExpand: handleItemExpand, onCollapse: handleItemCollapse, expanded: expandedItems.includes(item.id), key: item.id, details: details?.[item.id] }));
|
|
29
41
|
})) : (_jsx(EmptyState, { message: emptyText })) }));
|
|
30
42
|
});
|
|
31
|
-
export default ExpressionList;
|
|
43
|
+
export default withTestIds(ExpressionList, getExpressionListTestIds);
|
|
32
44
|
//# sourceMappingURL=ExpressionList.js.map
|