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

@pega/cosmos-react-build 9.0.0-build.9.9 → 9.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (270) hide show

package/lib/components/BackgroundPicker/BackgroundPicker.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BackgroundPicker.styles.d.ts","sourceRoot":"","sources":["../../../src/components/BackgroundPicker/BackgroundPicker.styles.ts"],"names":[],"mappings":"~~AAAA~~,~~OAAe,EAAO,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAkBnE,~~OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,0BAA0B,CAAC;AAElF,eAAO,MAAM,sBAAsB,~~0IAiGlC~~,CAAC;AAIF,eAAO,MAAM,kBAAkB;~~WASpB~~,MAAM;~~WACN~~,~~YAAY;SAiCtB,~~CAAC;AAIF,eAAO,MAAM,sBAAsB,~~6EAOjC~~,CAAC;AAIH,eAAO,MAAM,aAAa;gBAA4B,MAAM;~~SAM1D~~,CAAC;AAEH,eAAO,MAAM,UAAU,~~sLAQtB,~~CAAC;AAEF,eAAO,MAAM,kBAAkB,~~sLAU7B,~~CAAC;AAIH,eAAO,MAAM,UAAU,~~sLAEtB,~~CAAC"}
1	+ {"version":3,"file":"BackgroundPicker.styles.d.ts","sourceRoot":"","sources":["../../../src/components/BackgroundPicker/BackgroundPicker.styles.ts"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,0BAA0B,CAAC;AAElF,eAAO,MAAM,sBAAsB,oSAiGlC,CAAC;AAIF,eAAO,MAAM,kBAAkB;WAAuB,MAAM;YAwC3D,CAAC;AAIF,eAAO,MAAM,sBAAsB,6NAOjC,CAAC;AAIH,eAAO,MAAM,aAAa;gBAA4B,MAAM;YAM1D,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sOAQtB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sOAU7B,CAAC;AAIH,eAAO,MAAM,UAAU;;yLAEtB,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BackgroundPicker.styles.js","sourceRoot":"","sources":["../../../src/components/BackgroundPicker/BackgroundPicker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,~~EAAqB~~,MAAM,mBAAmB,CAAC;~~AACnE~~,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGpD,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,UAAU,EACV,QAAQ,EACT,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAC5F,OAAO,WAAW,MAAM,2DAA2D,CAAC;AACpF,OAAO,EAAE,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAI7E,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAG9C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EACP,MAAM,EAAE,EAAE,MAAM,EAAE,EAClB,MAAM,EAAE,EAAE,KAAK,EAAE,EACjB,aAAa,EAAE,UAAU,EACzB,WAAW,EAAE,QAAQ,EACrB,YAAY,EAAE,SAAS,EACxB,EACD,UAAU,EAAE,EACV,KAAK,EAAE,EAAE,MAAM,EAAE,EACjB,cAAc,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,EAC7E,EACF,EACD,UAAU,EACV,KAAK,EACN,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEzD,OAAO,GAAG,CAAA;QACN,iBAAiB;;wBAED,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,cAAc,WAAW,GAAG,CAAC,CAAC,CAAC,WAAW;wBAC7D,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;;UAEnD,KAAK,KAAK,MAAM;QAClB,GAAG,CAAA;0BACe,MAAM,CAAC,MAAM;SAC9B;;UAEC,CAAC,UAAU;QACb,GAAG,CAAA;iCACsB,OAAO;SAC/B;;UAEC,CAAC,UAAU;QACb,GAAG,CAAA;gCACqB,OAAO;SAC9B;;;wBAGe,KAAK;;;;;YAKjB,KAAK,KAAK,MAAM;QAClB,GAAG,CAAA;4BACe,MAAM,CAAC,IAAI;WAC5B;;;;YAIC,YAAY;;;2BAGG,MAAM,WAAW,WAAW;;cAEzC,UAAU;QACV,CAAC,CAAC,GAAG,CAAA;gCACa,MAAM,WAAW,WAAW;iBAC3C;QACH,CAAC,CAAC,GAAG,CAAA;oCACiB,MAAM,MAAM,WAAW;uCACpB,OAAO;uCACP,WAAW,UAAU,WAAW;iBACtD;;;;qBAII,MAAM;sBACL,MAAM;;;;;;;;;uBASL,SAAS,CAAC,CAAC;yBACT,UAAU;;;;;yBAKV,SAAS,CAAC,CAAC;2BACT,UAAU;;;;KAIhC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAC1C,CAAC,EACC,KAAK,EACL,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,MAAM,EAAE,EAAE,MAAM,EAAE,EACnB,EACF,~~EAIF~~,EAAE,EAAE;IACH,MAAM,GAAG,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC;IAE9C,IAAI,UAAU,GAAG,KAAK,CAAC;IACvB,IAAI,KAAK,KAAK,MAAM,EAAE,CAAC;QACrB,UAAU,GAAG,aAAa,CAAC;IAC7B,CAAC;SAAM,IAAI,KAAK,KAAK,aAAa,IAAI,CAAC,GAAG,IAAK,GAAiB,CAAC,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC;QAC9E,8CAA8C;QAC9C,UAAU;YACR,qFAAqF,CAAC;IAC1F,CAAC;IAED,OAAO,GAAG,CAAA;;;;UAIJ,UAAU;;;;gBAIJ,MAAM,CAAC,IAAI;;;;;;;;sBAQL,UAAU;;KAE3B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,OAAO,GAAG,CAAA;;cAEE,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;8BACd,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;GAE5D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAyB,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE;IACjF,OAAO,GAAG,CAAA;kBACM,UAAU;;;GAGzB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAClC,UAAU;;;;QAIN,iBAAiB;;;CAGxB,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAC9C,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;MACN,WAAW;wBACO,OAAO;;GAE5B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAClC,gBAAgB;CACnB,CAAC","sourcesContent":["import styled, { css, ~~type DefaultTheme~~ } from 'styled-components';\nimport { hideVisually, parseToRgb } from 'polished';\nimport type { RgbaColor } from 'polished/lib/types/color';\n\nimport {\n calculateFontSize,\n StyledFormControl,\n defaultThemeProp,\n Flex,\n StyledCard,\n Text,\n StyledIcon,\n tryCatch\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport StyledInput from '@pega/cosmos-react-core/lib/components/Input/Input.styles';\nimport { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\n\nimport type { BackgroundPickerPropsWithDefaults } from './BackgroundPicker.types';\n\nexport const StyledBackgroundPicker = styled.div<\n Pick<BackgroundPickerPropsWithDefaults, 'swatchOnly' \| 'value'>\n>(\n ({\n theme: {\n base: {\n spacing,\n colors: { purple },\n shadow: { focus },\n 'font-family': fontFamily,\n 'font-size': fontSize,\n 'font-scale': fontScale\n },\n components: {\n input: { height },\n 'form-control': { 'border-width': borderWidth, 'border-color': borderColor }\n }\n },\n swatchOnly,\n value\n }) => {\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n ${StyledFormControl} {\n overflow: hidden;\n border-width: ${value === 'auto' ? `calc(1.5 * ${borderWidth})` : borderWidth};\n border-style: ${value === 'auto' ? 'dotted' : 'solid'};\n\n ${value === 'auto' &&\n css`\n border-color: ${purple.medium};\n `}\n\n ${!swatchOnly &&\n css`\n min-width: calc(16 * ${spacing});\n `}\n\n ${!swatchOnly &&\n css`\n padding-inline-end: ${spacing};\n `}\n\n &:focus-within {\n box-shadow: ${focus};\n border: none;\n }\n\n &:hover:not([readonly]):not([disabled]):not(:focus, :focus-within) {\n ${value === 'auto' &&\n css`\n border-color: ${purple.dark};\n `}\n }\n\n & > input {\n ${hideVisually}\n\n & + div {\n height: calc(${height} - (2 * ${borderWidth}));\n\n ${swatchOnly\n ? css`\n width: calc(${height} - (2 * ${borderWidth}));\n `\n : css`\n min-width: calc(${height} - ${borderWidth});\n margin-inline-end: ${spacing};\n border-inline-end: ${borderWidth} solid ${borderColor};\n `}\n }\n\n &:focus + div {\n width: ${height};\n height: ${height};\n }\n }\n\n & input {\n height: 2rem;\n min-height: 2rem;\n color: #000000;\n background-color: #ffffff;\n font-size: ${fontSizes.s};\n font-family: ${fontFamily};\n\n & + label {\n font-weight: 600;\n color: rgba(0, 0, 0, 0.6);\n font-size: ${fontSizes.s};\n font-family: ${fontFamily};\n }\n }\n }\n `;\n }\n);\n\nStyledBackgroundPicker.defaultProps = defaultThemeProp;\n\nexport const ColorSwatchPreview = styled.div(\n ({\n value,\n theme: {\n base: {\n colors: { purple }\n }\n }\n }~~: {\n value: string;\n theme: DefaultTheme;\n }~~) => {\n const rgb = tryCatch(() => parseToRgb(value));\n\n let background = value;\n if (value === 'auto') {\n background = 'transparent';\n } else if (value === 'transparent' \|\| (rgb && (rgb as RgbaColor).alpha === 0)) {\n // Red slash to denote transparent or no color\n background =\n 'linear-gradient(137deg,#ffffff 0%,#ffffff 50%,#ff0000 54%,#ffffff 58%,#ffffff 100%)';\n }\n\n return css`\n background: repeating-conic-gradient(#dddddd 0% 25%, transparent 0% 50%) 0 0 / 0.5rem 0.5rem;\n position: relative;\n\n & ${StyledIcon} {\n width: 50%;\n height: 50%;\n z-index: 1;\n fill: ${purple.dark};\n }\n\n &::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n background: ${background};\n }\n `;\n }\n);\n\nColorSwatchPreview.defaultProps = defaultThemeProp;\n\nexport const StyledPreviewContainer = styled.div(({ theme }) => {\n return css`\n background: repeating-conic-gradient(#dddddd 0% 25%, transparent 0% 50%) 0 0 / 0.5rem 0.5rem;\n height: ${theme.base['content-width'].xs};\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n position: relative;\n `;\n});\n\nStyledPreviewContainer.defaultProps = defaultThemeProp;\n\nexport const StyledPreview = styled.div<{ background: string }>(({ background }) => {\n return css`\n background: ${background};\n width: 100%;\n height: 100%;\n `;\n});\n\nexport const StyledFlex = styled(Flex)`\n ${StyledCard} {\n width: 100%;\n }\n\n &&& ${StyledCardContent} {\n padding: 0;\n }\n`;\n\nexport const StyledTableWrapper = styled(Flex)(({\n theme: {\n base: { spacing }\n }\n}) => {\n return css`\n ${StyledInput} {\n width: calc(6 * ${spacing});\n }\n `;\n});\n\nStyledTableWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledText = styled(Text)`\n ${ellipsisOverflow}\n`;\n"]}
1	+ {"version":3,"file":"BackgroundPicker.styles.js","sourceRoot":"","sources":["../../../src/components/BackgroundPicker/BackgroundPicker.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { hideVisually, parseToRgb } from 'polished';\nimport type { RgbaColor } from 'polished/lib/types/color';\n\nimport {\n calculateFontSize,\n StyledFormControl,\n defaultThemeProp,\n Flex,\n StyledCard,\n Text,\n StyledIcon,\n tryCatch\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport StyledInput from '@pega/cosmos-react-core/lib/components/Input/Input.styles';\nimport { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\n\nimport type { BackgroundPickerPropsWithDefaults } from './BackgroundPicker.types';\n\nexport const StyledBackgroundPicker = styled.div<\n Pick<BackgroundPickerPropsWithDefaults, 'swatchOnly' \| 'value'>\n>(\n ({\n theme: {\n base: {\n spacing,\n colors: { purple },\n shadow: { focus },\n 'font-family': fontFamily,\n 'font-size': fontSize,\n 'font-scale': fontScale\n },\n components: {\n input: { height },\n 'form-control': { 'border-width': borderWidth, 'border-color': borderColor }\n }\n },\n swatchOnly,\n value\n }) => {\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n ${StyledFormControl} {\n overflow: hidden;\n border-width: ${value === 'auto' ? `calc(1.5 * ${borderWidth})` : borderWidth};\n border-style: ${value === 'auto' ? 'dotted' : 'solid'};\n\n ${value === 'auto' &&\n css`\n border-color: ${purple.medium};\n `}\n\n ${!swatchOnly &&\n css`\n min-width: calc(16 * ${spacing});\n `}\n\n ${!swatchOnly &&\n css`\n padding-inline-end: ${spacing};\n `}\n\n &:focus-within {\n box-shadow: ${focus};\n border: none;\n }\n\n &:hover:not([readonly]):not([disabled]):not(:focus, :focus-within) {\n ${value === 'auto' &&\n css`\n border-color: ${purple.dark};\n `}\n }\n\n & > input {\n ${hideVisually}\n\n & + div {\n height: calc(${height} - (2 * ${borderWidth}));\n\n ${swatchOnly\n ? css`\n width: calc(${height} - (2 * ${borderWidth}));\n `\n : css`\n min-width: calc(${height} - ${borderWidth});\n margin-inline-end: ${spacing};\n border-inline-end: ${borderWidth} solid ${borderColor};\n `}\n }\n\n &:focus + div {\n width: ${height};\n height: ${height};\n }\n }\n\n & input {\n height: 2rem;\n min-height: 2rem;\n color: #000000;\n background-color: #ffffff;\n font-size: ${fontSizes.s};\n font-family: ${fontFamily};\n\n & + label {\n font-weight: 600;\n color: rgba(0, 0, 0, 0.6);\n font-size: ${fontSizes.s};\n font-family: ${fontFamily};\n }\n }\n }\n `;\n }\n);\n\nStyledBackgroundPicker.defaultProps = defaultThemeProp;\n\nexport const ColorSwatchPreview = styled.div<{ value: string }>(\n ({\n value,\n theme: {\n base: {\n colors: { purple }\n }\n }\n }) => {\n const rgb = tryCatch(() => parseToRgb(value));\n\n let background = value;\n if (value === 'auto') {\n background = 'transparent';\n } else if (value === 'transparent' \|\| (rgb && (rgb as RgbaColor).alpha === 0)) {\n // Red slash to denote transparent or no color\n background =\n 'linear-gradient(137deg,#ffffff 0%,#ffffff 50%,#ff0000 54%,#ffffff 58%,#ffffff 100%)';\n }\n\n return css`\n background: repeating-conic-gradient(#dddddd 0% 25%, transparent 0% 50%) 0 0 / 0.5rem 0.5rem;\n position: relative;\n\n & ${StyledIcon} {\n width: 50%;\n height: 50%;\n z-index: 1;\n fill: ${purple.dark};\n }\n\n &::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n background: ${background};\n }\n `;\n }\n);\n\nColorSwatchPreview.defaultProps = defaultThemeProp;\n\nexport const StyledPreviewContainer = styled.div(({ theme }) => {\n return css`\n background: repeating-conic-gradient(#dddddd 0% 25%, transparent 0% 50%) 0 0 / 0.5rem 0.5rem;\n height: ${theme.base['content-width'].xs};\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n position: relative;\n `;\n});\n\nStyledPreviewContainer.defaultProps = defaultThemeProp;\n\nexport const StyledPreview = styled.div<{ background: string }>(({ background }) => {\n return css`\n background: ${background};\n width: 100%;\n height: 100%;\n `;\n});\n\nexport const StyledFlex = styled(Flex)`\n ${StyledCard} {\n width: 100%;\n }\n\n &&& ${StyledCardContent} {\n padding: 0;\n }\n`;\n\nexport const StyledTableWrapper = styled(Flex)(({\n theme: {\n base: { spacing }\n }\n}) => {\n return css`\n ${StyledInput} {\n width: calc(6 * ${spacing});\n }\n `;\n});\n\nStyledTableWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledText = styled(Text)`\n ${ellipsisOverflow}\n`;\n"]}

package/lib/components/DynamicContentEditor/DynamicContentEditor.d.ts CHANGED Viewed

@@ -1,9 +1,13 @@
 import type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
 import type { DynamicContentEditorProps } from './DynamicContentEditor.types';
-export declare const StyledSearchPopover: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+export declare const StyledSearchPopover: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "offset" | "portal"> & {
     offset?: number;
     portal?: boolean;
-}, never>;
-declare const DynamicContentEditor: ForwardRefForwardPropsComponent<DynamicContentEditorProps>;
-export default DynamicContentEditor;
+}, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+declare const _default: ForwardRefForwardPropsComponent<DynamicContentEditorProps> & {
+    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["root", "insert-field", "insert-field-modal", "insert-field-modal-cancel", "insert-field-modal-submit"]>;
+};
+export default _default;
 //# sourceMappingURL=DynamicContentEditor.d.ts.map

package/lib/components/DynamicContentEditor/DynamicContentEditor.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DynamicContentEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.tsx"],"names":[],"mappings":"~~AAoBA~~,OAAO,KAAK,EACV,+BAA+B,~~EAIhC~~,MAAM,yBAAyB,CAAC;~~AAGjC~~,OAAO,KAAK,EAAE,yBAAyB,~~EAAY~~,MAAM,8BAA8B,CAAC;~~AAOxF~~,eAAO,MAAM,mBAAmB~~;;;SAE~~/B,CAAC~~;AAIF~~,~~QAAA,MAAM,oBAAoB,EAAE,+BAA+B,CAAC,yBAAyB,CA0TpF,CAAC;AAEF,eAAe,oBAAoB,CAAC~~"}
1	+ {"version":3,"file":"DynamicContentEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EACV,+BAA+B,EAGhC,MAAM,yBAAyB,CAAC;AAKjC,OAAO,KAAK,EAAE,yBAAyB,EAAwB,MAAM,8BAA8B,CAAC;AAUpG,eAAO,MAAM,mBAAmB;;;;;mBAE/B,CAAC;;;;AAoWF,wBAAiF"}

package/lib/components/DynamicContentEditor/DynamicContentEditor.js CHANGED Viewed

@@ -2,21 +2,25 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { forwardRef, useRef, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Editor } from '@pega/cosmos-react-rte';
-import { Button, defaultThemeProp, Menu, menuHelpers, Modal, Popover, StyledPopover, useModalManager, useConsolidatedRef, useI18n, useUID } from '@pega/cosmos-react-core';
+import { Button, defaultThemeProp, Menu, menuHelpers, Modal, Popover, StyledPopover, useModalManager, useConsolidatedRef, useI18n, useUID, useTestIds, withTestIds, registerIcon } from '@pega/cosmos-react-core';
+import * as codeIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/code.icon';
 import { getKeyCommand } from '@pega/cosmos-react-rte/lib/components/RichTextEditor/Toolbar/utils';
+import { isFieldMenuItem } from './DynamicContentEditor.types';
 import { pegaReferenceElementStyle, createPegaReferenceElement } from './PegaCustomElement';
+import { getDynamicContentEditorTestIds } from './DynamicContentEditor.test-ids';
+registerIcon(codeIcon);
 const StyledDynamicContentEditor = styled.div ``;
 export const StyledSearchPopover = styled(StyledPopover) `
   min-width: 20rem;
 `;
 StyledDynamicContentEditor.defaultProps = defaultThemeProp;
-const DynamicContentEditor = forwardRef(function DynamicContentEditor({ form: { dynamicContentPicker, onSubmit }, onActiveFieldChange, label, toolbar, fieldItems, defaultValue, onBlur, ...restProps }, ref) {
+const DynamicContentEditor = forwardRef(function DynamicContentEditor({ testId, form: { dynamicContentPicker, onSubmit }, onActiveFieldChange, label, toolbar, fieldItems, defaultValue, onBlur, onKeyDown: onKeyDownProp, customActions = [], customComponents = [], ...restProps }, ref) {
+    const testIds = useTestIds(testId, getDynamicContentEditorTestIds);
     const menuID = useUID();
     const { create } = useModalManager();
     const t = useI18n();
     const modalMethods = useRef();
-    const [editor, setEditor] = useState();
-    const [bookmark, setBookmark] = useState();
+    const [editor, setEditor] = useState(null);
     const [fieldMenuItems, setFieldMenuItems] = useState(fieldItems || []);
     const [currentElementId, setCurrentElementId] = useState('');
     const [currentElementContent, setCurrentElementContent] = useState('');
@@ -39,52 +43,39 @@ const DynamicContentEditor = forwardRef(function DynamicContentEditor({ form: {
         if (!editor)
             return;
         const fieldContent = `<pega-reference role="button" contenteditable="false" data-rule-type='field' data-rule-id=${field.id}>${field.text}</pega-reference>`;
-        if (bookmark) {
-            editor.selection.moveToBookmark(bookmark);
-            editor.selection.setContent(fieldContent);
-        }
-        else {
-            editor.insertContent(fieldContent);
-        }
+        editor.chain().focus().insertContent(fieldContent).run();
         modalMethods.current?.dismiss();
     };
     const modalProps = {
+        'data-testid': testIds.insertFieldModal,
         children: dynamicContentPicker,
         heading: t('rte_insert_field'),
-        actions: (_jsxs(_Fragment, { children: [_jsx(Button, { variant: 'secondary', onClick: () => modalMethods.current?.dismiss(), children: t('cancel') }), _jsx(Button, { variant: 'primary', onClick: () => onSubmit(insertField), children: t('submit') })] })),
+        actions: (_jsxs(_Fragment, { children: [_jsx(Button, { "data-testid": testIds.insertFieldModalCancel, variant: 'secondary', onClick: () => modalMethods.current?.dismiss(), children: t('cancel') }), _jsx(Button, { "data-testid": testIds.insertFieldModalSubmit, variant: 'primary', onClick: () => onSubmit(insertField), children: t('submit') })] })),
         center: true,
         onAfterClose: () => {
-            setBookmark(undefined);
             setCurrentElementId('');
             setCurrentElementContent('');
             onActiveFieldChange({ id: '', text: '' });
         },
         onBeforeOpen: () => {
             if (currentElementId) {
-                onActiveFieldChange({ id: currentElementId, text: currentElementContent });
+                onActiveFieldChange({
+                    id: currentElementId,
+                    text: currentElementContent
+                });
             }
         }
     };
     const findAndRenameField = (fieldId) => {
         if (!editor || !fieldMenuItems)
             return;
-        const selectedRange = editor.selection.getRng();
-        const endOffset = selectedRange.endOffset;
-        const stringToSearch = selectedRange.commonAncestorContainer.nodeValue?.slice(0, endOffset);
-        if (stringToSearch === undefined)
-            return;
-        const splitSearch = stringToSearch.split(' ');
-        const fieldString = splitSearch[splitSearch.length - 1];
-        const range = editor.getDoc().createRange();
-        const startPos = stringToSearch.lastIndexOf(fieldString);
-        const endPos = startPos + fieldString.length;
-        range.setStart(selectedRange.commonAncestorContainer, startPos);
-        range.setEnd(selectedRange.commonAncestorContainer, endPos);
-        editor.getDoc().getSelection()?.removeAllRanges();
-        editor.getDoc().getSelection()?.addRange(range);
         const selectedField = menuHelpers.getItem(fieldMenuItems, fieldId);
-        if (selectedField) {
-            editor.selection.setContent(`<pega-reference role="button" contenteditable="false" data-rule-type="field" data-rule-id=".${selectedField.id}">${selectedField.primary}</pega-reference>`);
+        if (selectedField && isFieldMenuItem(selectedField)) {
+            editor
+                .chain()
+                .focus()
+                .insertContent(`<pega-reference role="button" contenteditable="false" data-rule-type="field" data-rule-id=".${selectedField.id}">${selectedField.primary}</pega-reference>`)
+                .run();
             setShowFieldsPopover(false);
         }
     };
@@ -111,34 +102,40 @@ const DynamicContentEditor = forwardRef(function DynamicContentEditor({ form: {
                 setShowFieldsPopover(false);
         }
     };
-    const updateBookmarkAndCurrentElement = (editorSelection) => {
-        const targetEl = editorSelection.getNode();
+    const updateCurrentElement = (targetEl) => {
         const fieldId = targetEl.getAttribute('data-rule-id');
         const fieldValue = targetEl.innerText;
-        setBookmark(editorSelection.getBookmark());
         setCurrentElementId(fieldId || '');
         setCurrentElementContent(fieldValue);
     };
     const handleElementClick = ({ target }) => {
         if (editor && target && target.tagName === 'PEGA-REFERENCE') {
-            updateBookmarkAndCurrentElement(editor.selection);
+            updateCurrentElement(target);
         }
         hidePopover();
     };
-    const onInsertField = (incEditor) => {
-        const targetEl = incEditor.selection.getNode();
-        if (targetEl.tagName === 'PEGA-REFERENCE') {
-            updateBookmarkAndCurrentElement(incEditor.selection);
+    const onInsertField = () => {
+        if (!editor)
+            return;
+        // Get the DOM element at the current selection
+        const { from } = editor.state.selection;
+        const domAtPos = editor.view.domAtPos(from);
+        const targetEl = domAtPos.node.parentElement;
+        if (targetEl?.tagName === 'PEGA-REFERENCE') {
+            updateCurrentElement(targetEl);
         }
         else {
             modalMethods.current = create(Modal, modalProps);
         }
     };
-    const isPegaRefActive = (incEditor) => {
-        const targetEl = incEditor.selection.getNode();
-        return targetEl.tagName === 'PEGA-REFERENCE';
+    const isPegaRefActive = () => {
+        if (!editor)
+            return false;
+        // Check if the selected node is a pega-reference element
+        const { $from } = editor.state.selection;
+        return $from.parent.type.name === 'pega-reference';
     };
-    const fieldSelectionPopover = (_jsx(Popover, { show: showFieldsPopover, strategy: 'fixed', ref: fieldPopoverRef, target: {
+    const fieldSelectionPopover = (_jsx(Popover, { show: showFieldsPopover, strategy: 'fixed', ref: fieldPopoverRef, "aria-label": t('rte_insert_field'), target: {
             getBoundingClientRect() {
                 return currentCursorPosition;
             }
@@ -155,48 +152,68 @@ const DynamicContentEditor = forwardRef(function DynamicContentEditor({ form: {
                     }
                 }
             }
-        ], placement: 'bottom-start', children: fieldMenuItems && (_jsx(Menu, { id: menuID, items: fieldMenuItems, as: StyledSearchPopover, focusControlEl: editor?.getBody() || undefined, mode: 'action', onItemClick: findAndRenameField, variant: 'drill-down' })) }));
+        ], placement: 'bottom-start', children: fieldMenuItems && (_jsx(Menu, { id: menuID, items: fieldMenuItems, as: StyledSearchPopover, focusControlEl: editor?.view.dom || undefined, mode: 'action', onItemClick: findAndRenameField, variant: 'drill-down' })) }));
     useEffect(() => {
         if (currentElementId && currentElementContent)
             modalMethods.current = create(Modal, modalProps);
     }, [currentElementId, currentElementContent]);
-    useEffect(() => {
-        editor?.getDoc().addEventListener('click', handleElementClick);
-        return () => {
-            editor?.getDoc().removeEventListener('click', handleElementClick);
-        };
-    }, [editor, editorRef.current]);
     useEffect(() => {
         if (modalMethods.current) {
             modalMethods.current.update(modalProps);
         }
     }, [modalProps]);
+    // Set up click listener on iframe document for pega-reference interactions
+    useEffect(() => {
+        const iframe = editorRef.current?.element?.querySelector('iframe');
+        const iframeDoc = iframe?.contentDocument;
+        if (!iframeDoc)
+            return;
+        const clickListener = (e) => {
+            handleElementClick(e);
+        };
+        iframeDoc.addEventListener('click', clickListener);
+        return () => {
+            iframeDoc.removeEventListener('click', clickListener);
+        };
+    }, [editor]);
     const onEditorChange = (formEditor) => {
         if (formEditor) {
-            const targetEl = formEditor.selection.getBoundingClientRect();
-            const { left = 0, top = 0 } = targetEl ?? {};
+            // Get cursor position from Tiptap editor
+            const { selection } = formEditor.state;
+            const { from } = selection;
+            // Get the coordinates of the cursor position
+            const coords = formEditor.view.coordsAtPos(from);
             setCurrentCursorPosition({
-                ...formEditor.selection.getBoundingClientRect(),
-                x: left,
-                y: top,
+                bottom: coords.bottom,
+                height: coords.bottom - coords.top,
+                left: coords.left,
+                right: coords.right,
+                top: coords.top,
+                width: coords.right - coords.left,
+                x: coords.left,
+                y: coords.top,
                 toJSON: () => { }
             });
-            if (formEditor.selection.isCollapsed()) {
-                // get the full line string
-                const selectedRange = formEditor.selection.getRng();
-                const endOffset = selectedRange.endOffset;
-                const stringToSearch = selectedRange.commonAncestorContainer.nodeValue?.slice(0, endOffset);
-                const fieldString = stringToSearch?.split(' ')[stringToSearch.split(' ').length - 1];
-                if (fieldString?.startsWith('@') &&
-                    fieldString.indexOf('@') === fieldString.lastIndexOf('@')) {
-                    filterFieldMenu(fieldString.slice(1));
+            if (selection.empty) {
+                // Get text before cursor to check for @ mentions
+                const textBefore = formEditor.state.doc.textBetween(Math.max(0, from - 50), // Look back up to 50 characters
+                from, ' ');
+                // Get the last word (after last space)
+                const words = textBefore.split(' ');
+                const lastWord = words[words.length - 1];
+                if (lastWord?.startsWith('@') && lastWord.indexOf('@') === lastWord.lastIndexOf('@')) {
+                    filterFieldMenu(lastWord.slice(1));
                 }
-                else
+                else {
                     setShowFieldsPopover(false);
+                }
             }
         }
     };
     const onKeyDown = event => {
+        if (onKeyDownProp) {
+            onKeyDownProp(event);
+        }
         if ((event?.key === 'Enter' ||
             event?.key === 'ArrowLeft' ||
             event?.key === 'ArrowRight' ||
@@ -209,15 +226,17 @@ const DynamicContentEditor = forwardRef(function DynamicContentEditor({ form: {
             hidePopover();
         }
     };
-    return (_jsx(Editor, { ref: editorRef, ...restProps, label: label, toolbar: toolbar, customComponents: [
+    return (_jsx(Editor, { "data-testid": testIds.root, ref: editorRef, ...restProps, label: label, toolbar: toolbar, customComponents: [
             {
                 createCustomElement: createPegaReferenceElement,
                 name: 'pega-reference',
                 extensionAttributes: ['contenteditable'],
                 style: pegaReferenceElementStyle
-            }
+            },
+            ...customComponents
         ], customActions: [
             {
+                'data-testid': testIds.insertField,
                 icon: 'code',
                 text: tooltip,
                 onMouseDown: () => {
@@ -229,11 +248,12 @@ const DynamicContentEditor = forwardRef(function DynamicContentEditor({ form: {
                     description: tooltip,
                     command: onInsertField
                 }
-            }
+            },
+            ...customActions
         ], onInit: setEditor, onChange: onEditorChange, onBlur: () => {
             onBlur?.();
             hidePopover();
         }, onKeyDown: onKeyDown, defaultValue: defaultValue, children: fieldSelectionPopover }));
 });
-export default DynamicContentEditor;
+export default withTestIds(DynamicContentEditor, getDynamicContentEditorTestIds);
 //# sourceMappingURL=DynamicContentEditor.js.map

package/lib/components/DynamicContentEditor/DynamicContentEditor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DynamicContentEditor.js","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useEffect, useState } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\nimport type { Bookmark, Editor as TinyMCEEditor, EditorSelection } from 'tinymce';\n\nimport { Editor } from '@pega/cosmos-react-rte';\nimport type { EditorProps } from '@pega/cosmos-react-rte';\nimport {\n Button,\n defaultThemeProp,\n Menu,\n menuHelpers,\n Modal,\n Popover,\n StyledPopover,\n useModalManager,\n useConsolidatedRef,\n useI18n,\n useUID\n} from '@pega/cosmos-react-core';\nimport type {\n ForwardRefForwardPropsComponent,\n MenuProps,\n ModalMethods,\n PropsWithDefaults\n} from '@pega/cosmos-react-core';\nimport { getKeyCommand } from '@pega/cosmos-react-rte/lib/components/RichTextEditor/Toolbar/utils';\n\nimport type { DynamicContentEditorProps, ItemType } from './DynamicContentEditor.types';\nimport { pegaReferenceElementStyle, createPegaReferenceElement } from './PegaCustomElement';\n\ntype DynamicContentEditorPropsWithDefaults = PropsWithDefaults<DynamicContentEditorProps>;\n\nconst StyledDynamicContentEditor = styled.div<DynamicContentEditorPropsWithDefaults>``;\n\nexport const StyledSearchPopover = styled(StyledPopover)`\n min-width: 20rem;\n`;\n\nStyledDynamicContentEditor.defaultProps = defaultThemeProp;\n\nconst DynamicContentEditor: ForwardRefForwardPropsComponent<DynamicContentEditorProps> = forwardRef(\n function DynamicContentEditor(\n {\n form: { dynamicContentPicker, onSubmit },\n onActiveFieldChange,\n label,\n toolbar,\n fieldItems,\n defaultValue,\n onBlur,\n ...restProps\n }: PropsWithoutRef<DynamicContentEditorProps>,\n ref: DynamicContentEditorProps['ref']\n ) {\n const menuID = useUID();\n const { create } = useModalManager();\n const t = useI18n();\n\n const modalMethods = useRef<ModalMethods>();\n const [editor, setEditor] = useState<TinyMCEEditor \| undefined>();\n const [bookmark, setBookmark] = useState<Bookmark \| undefined>();\n const [fieldMenuItems, setFieldMenuItems] = useState<MenuProps['items']>(fieldItems \|\| []);\n const [currentElementId, setCurrentElementId] = useState('');\n const [currentElementContent, setCurrentElementContent] = useState('');\n const [currentCursorPosition, setCurrentCursorPosition] = useState({\n bottom: 0,\n height: 0,\n left: 0,\n right: 0,\n top: 0,\n width: 0,\n x: 0,\n y: 0,\n toJSON: () => {}\n });\n const [showFieldsPopover, setShowFieldsPopover] = useState<boolean>(false);\n\n const fieldPopoverRef = useRef<HTMLDivElement>(null);\n const editorRef = useConsolidatedRef(ref);\n\n const tooltip = getKeyCommand(\n navigator.appVersion.includes('Mac'),\n ({ ctrl }) => `${t('rte_insert_field')} (${ctrl}/)`\n );\n\n const insertField = (field: ItemType) => {\n if (!editor) return;\n\n const fieldContent = `<pega-reference role=\"button\" contenteditable=\"false\" data-rule-type='field' data-rule-id=${field.id}>${field.text}</pega-reference>`;\n if (bookmark) {\n editor.selection.moveToBookmark(bookmark);\n editor.selection.setContent(fieldContent);\n } else {\n editor.insertContent(fieldContent);\n }\n\n modalMethods.current?.dismiss();\n };\n\n const modalProps = {\n children: dynamicContentPicker,\n heading: t('rte_insert_field'),\n actions: (\n <>\n <Button variant='secondary' onClick={() => modalMethods.current?.dismiss()}>\n {t('cancel')}\n </Button>\n <Button variant='primary' onClick={() => onSubmit(insertField)}>\n {t('submit')}\n </Button>\n </>\n ),\n center: true,\n onAfterClose: () => {\n setBookmark(undefined);\n setCurrentElementId('');\n setCurrentElementContent('');\n onActiveFieldChange({ id: '', text: '' });\n },\n onBeforeOpen: () => {\n if (currentElementId) {\n onActiveFieldChange({ id: currentElementId, text: currentElementContent });\n }\n }\n };\n\n const findAndRenameField = (fieldId: string) => {\n if (!editor \|\| !fieldMenuItems) return;\n\n const selectedRange = editor.selection.getRng();\n const endOffset = selectedRange.endOffset;\n const stringToSearch = selectedRange.commonAncestorContainer.nodeValue?.slice(0, endOffset);\n if (stringToSearch === undefined) return;\n\n const splitSearch = stringToSearch.split(' ');\n const fieldString = splitSearch[splitSearch.length - 1];\n const range = editor.getDoc().createRange();\n\n const startPos = stringToSearch.lastIndexOf(fieldString);\n const endPos = startPos + fieldString.length;\n range.setStart(selectedRange.commonAncestorContainer, startPos);\n range.setEnd(selectedRange.commonAncestorContainer, endPos);\n editor.getDoc().getSelection()?.removeAllRanges();\n editor.getDoc().getSelection()?.addRange(range);\n\n const selectedField = menuHelpers.getItem(fieldMenuItems, fieldId);\n if (selectedField) {\n editor.selection.setContent(\n `<pega-reference role=\"button\" contenteditable=\"false\" data-rule-type=\"field\" data-rule-id=\".${selectedField.id}\">${selectedField.primary}</pega-reference>`\n );\n setShowFieldsPopover(false);\n }\n };\n\n const hidePopover = () => {\n if (fieldPopoverRef) setShowFieldsPopover(false);\n };\n\n const filterFieldMenu = (searchString: string) => {\n setShowFieldsPopover(true);\n setFieldMenuItems(fieldItems \|\| []);\n if (/\\s/.test(searchString)) {\n setShowFieldsPopover(false);\n return;\n }\n if (searchString && fieldMenuItems) {\n const newFieldMenuItems: MenuProps['items'] = menuHelpers\n .flatten(fieldMenuItems)\n .filter(({ primary }) =>\n primary.toLowerCase().startsWith(searchString.toLocaleLowerCase())\n );\n if (newFieldMenuItems) {\n setShowFieldsPopover(true);\n setFieldMenuItems(newFieldMenuItems);\n } else setShowFieldsPopover(false);\n }\n };\n\n const updateBookmarkAndCurrentElement = (editorSelection: EditorSelection) => {\n const targetEl = editorSelection.getNode() as HTMLElement;\n const fieldId = targetEl.getAttribute('data-rule-id');\n const fieldValue = targetEl.innerText;\n setBookmark(editorSelection.getBookmark());\n setCurrentElementId(fieldId \|\| '');\n setCurrentElementContent(fieldValue);\n };\n\n const handleElementClick = ({ target }: MouseEvent) => {\n if (editor && target && (target as HTMLElement).tagName === 'PEGA-REFERENCE') {\n updateBookmarkAndCurrentElement(editor.selection);\n }\n hidePopover();\n };\n\n const onInsertField = (incEditor: TinyMCEEditor) => {\n const targetEl = incEditor.selection.getNode();\n if (targetEl.tagName === 'PEGA-REFERENCE') {\n updateBookmarkAndCurrentElement(incEditor.selection);\n } else {\n modalMethods.current = create(Modal, modalProps);\n }\n };\n\n const isPegaRefActive = (incEditor: TinyMCEEditor) => {\n const targetEl = incEditor.selection.getNode();\n return targetEl.tagName === 'PEGA-REFERENCE';\n };\n\n const fieldSelectionPopover = (\n <Popover\n show={showFieldsPopover}\n strategy='fixed'\n ref={fieldPopoverRef}\n target={{\n getBoundingClientRect() {\n return currentCursorPosition;\n }\n }}\n modifiers={[\n {\n name: 'offset',\n options: {\n offset: () => {\n const iframe = editorRef.current?.element?.querySelector('iframe');\n const iframeRect = iframe?.getBoundingClientRect();\n const x = iframeRect?.x ?? 0;\n const y = iframeRect?.y ?? 0;\n return [x, y] satisfies [number, number];\n }\n }\n }\n ]}\n placement='bottom-start'\n >\n {fieldMenuItems && (\n <Menu\n id={menuID}\n items={fieldMenuItems}\n as={StyledSearchPopover}\n focusControlEl={editor?.getBody() \|\| undefined}\n mode='action'\n onItemClick={findAndRenameField}\n variant='drill-down'\n />\n )}\n </Popover>\n );\n\n useEffect(() => {\n if (currentElementId && currentElementContent)\n modalMethods.current = create(Modal, modalProps);\n }, [currentElementId, currentElementContent]);\n\n useEffect(() => {\n editor?.getDoc().addEventListener('click', handleElementClick);\n return () => {\n editor?.getDoc().removeEventListener('click', handleElementClick);\n };\n }, [editor, editorRef.current]);\n\n useEffect(() => {\n if (modalMethods.current) {\n modalMethods.current.update(modalProps);\n }\n }, [modalProps]);\n\n const onEditorChange: EditorProps['onChange'] = (formEditor?: TinyMCEEditor) => {\n if (formEditor) {\n const targetEl = formEditor.selection.getBoundingClientRect();\n const { left = 0, top = 0 } = targetEl ?? {};\n setCurrentCursorPosition({\n ...formEditor.selection.getBoundingClientRect(),\n x: left,\n y: top,\n toJSON: () => {}\n });\n\n if (formEditor.selection.isCollapsed()) {\n // get the full line string\n const selectedRange = formEditor.selection.getRng();\n const endOffset = selectedRange.endOffset;\n const stringToSearch = selectedRange.commonAncestorContainer.nodeValue?.slice(\n 0,\n endOffset\n );\n const fieldString = stringToSearch?.split(' ')[stringToSearch.split(' ').length - 1];\n if (\n fieldString?.startsWith('@') &&\n fieldString.indexOf('@') === fieldString.lastIndexOf('@')\n ) {\n filterFieldMenu(fieldString.slice(1));\n } else setShowFieldsPopover(false);\n }\n }\n };\n\n const onKeyDown: EditorProps['onKeyDown'] = event => {\n if (\n (event?.key === 'Enter' \|\|\n event?.key === 'ArrowLeft' \|\|\n event?.key === 'ArrowRight' \|\|\n event?.key === 'ArrowDown' \|\|\n event?.key === 'ArrowUp') &&\n !!fieldPopoverRef.current\n ) {\n event?.preventDefault();\n }\n if (event?.key === 'Escape' && !!fieldPopoverRef.current) {\n hidePopover();\n }\n };\n\n return (\n <Editor\n ref={editorRef}\n {...restProps}\n label={label}\n toolbar={toolbar}\n customComponents={[\n {\n createCustomElement: createPegaReferenceElement,\n name: 'pega-reference',\n extensionAttributes: ['contenteditable'],\n style: pegaReferenceElementStyle\n }\n ]}\n customActions={[\n {\n icon: 'code',\n text: tooltip,\n onMouseDown: () => {\n modalMethods.current = create(Modal, modalProps);\n },\n active: isPegaRefActive,\n shortcut: {\n pattern: 'meta+191',\n description: tooltip,\n command: onInsertField\n }\n }\n ]}\n onInit={setEditor}\n onChange={onEditorChange}\n onBlur={() => {\n onBlur?.();\n hidePopover();\n }}\n onKeyDown={onKeyDown}\n defaultValue={defaultValue}\n >\n {fieldSelectionPopover}\n </Editor>\n );\n }\n);\n\nexport default DynamicContentEditor;\n"]}
1	+ {"version":3,"file":"DynamicContentEditor.js","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useEffect, useState } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\nimport type { Editor as TiptapEditor } from '@tiptap/core';\n\nimport { Editor } from '@pega/cosmos-react-rte';\nimport type { EditorProps } from '@pega/cosmos-react-rte';\nimport {\n Button,\n defaultThemeProp,\n Menu,\n menuHelpers,\n Modal,\n Popover,\n StyledPopover,\n useModalManager,\n useConsolidatedRef,\n useI18n,\n useUID,\n useTestIds,\n withTestIds,\n registerIcon\n} from '@pega/cosmos-react-core';\nimport type {\n ForwardRefForwardPropsComponent,\n ModalMethods,\n PropsWithDefaults\n} from '@pega/cosmos-react-core';\nimport * as codeIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/code.icon';\nimport { getKeyCommand } from '@pega/cosmos-react-rte/lib/components/RichTextEditor/Toolbar/utils';\n\nimport { isFieldMenuItem } from './DynamicContentEditor.types';\nimport type { DynamicContentEditorProps, FieldItems, ItemType } from './DynamicContentEditor.types';\nimport { pegaReferenceElementStyle, createPegaReferenceElement } from './PegaCustomElement';\nimport { getDynamicContentEditorTestIds } from './DynamicContentEditor.test-ids';\n\nregisterIcon(codeIcon);\n\ntype DynamicContentEditorPropsWithDefaults = PropsWithDefaults<DynamicContentEditorProps>;\n\nconst StyledDynamicContentEditor = styled.div<DynamicContentEditorPropsWithDefaults>``;\n\nexport const StyledSearchPopover = styled(StyledPopover)`\n min-width: 20rem;\n`;\n\nStyledDynamicContentEditor.defaultProps = defaultThemeProp;\n\nconst DynamicContentEditor: ForwardRefForwardPropsComponent<DynamicContentEditorProps> = forwardRef(\n function DynamicContentEditor(\n {\n testId,\n form: { dynamicContentPicker, onSubmit },\n onActiveFieldChange,\n label,\n toolbar,\n fieldItems,\n defaultValue,\n onBlur,\n onKeyDown: onKeyDownProp,\n customActions = [],\n customComponents = [],\n ...restProps\n }: PropsWithoutRef<DynamicContentEditorProps>,\n ref: DynamicContentEditorProps['ref']\n ) {\n const testIds = useTestIds(testId, getDynamicContentEditorTestIds);\n const menuID = useUID();\n const { create } = useModalManager();\n const t = useI18n();\n\n const modalMethods = useRef<ModalMethods>();\n const [editor, setEditor] = useState<TiptapEditor \| null>(null);\n const [fieldMenuItems, setFieldMenuItems] = useState<FieldItems[]>(fieldItems \|\| []);\n const [currentElementId, setCurrentElementId] = useState('');\n const [currentElementContent, setCurrentElementContent] = useState('');\n const [currentCursorPosition, setCurrentCursorPosition] = useState({\n bottom: 0,\n height: 0,\n left: 0,\n right: 0,\n top: 0,\n width: 0,\n x: 0,\n y: 0,\n toJSON: () => {}\n });\n const [showFieldsPopover, setShowFieldsPopover] = useState<boolean>(false);\n\n const fieldPopoverRef = useRef<HTMLDivElement>(null);\n const editorRef = useConsolidatedRef(ref);\n\n const tooltip = getKeyCommand(\n navigator.appVersion.includes('Mac'),\n ({ ctrl }) => `${t('rte_insert_field')} (${ctrl}/)`\n );\n\n const insertField = (field: ItemType) => {\n if (!editor) return;\n\n const fieldContent = `<pega-reference role=\"button\" contenteditable=\"false\" data-rule-type='field' data-rule-id=${field.id}>${field.text}</pega-reference>`;\n\n editor.chain().focus().insertContent(fieldContent).run();\n modalMethods.current?.dismiss();\n };\n\n const modalProps = {\n 'data-testid': testIds.insertFieldModal,\n children: dynamicContentPicker,\n heading: t('rte_insert_field'),\n actions: (\n <>\n <Button\n data-testid={testIds.insertFieldModalCancel}\n variant='secondary'\n onClick={() => modalMethods.current?.dismiss()}\n >\n {t('cancel')}\n </Button>\n <Button\n data-testid={testIds.insertFieldModalSubmit}\n variant='primary'\n onClick={() => onSubmit(insertField)}\n >\n {t('submit')}\n </Button>\n </>\n ),\n center: true,\n onAfterClose: () => {\n setCurrentElementId('');\n setCurrentElementContent('');\n onActiveFieldChange({ id: '', text: '' });\n },\n onBeforeOpen: () => {\n if (currentElementId) {\n onActiveFieldChange({\n id: currentElementId,\n text: currentElementContent\n });\n }\n }\n };\n\n const findAndRenameField = (fieldId: string) => {\n if (!editor \|\| !fieldMenuItems) return;\n\n const selectedField = menuHelpers.getItem(fieldMenuItems, fieldId);\n if (selectedField && isFieldMenuItem(selectedField)) {\n editor\n .chain()\n .focus()\n .insertContent(\n `<pega-reference role=\"button\" contenteditable=\"false\" data-rule-type=\"field\" data-rule-id=\".${selectedField.id}\">${selectedField.primary}</pega-reference>`\n )\n .run();\n setShowFieldsPopover(false);\n }\n };\n\n const hidePopover = () => {\n if (fieldPopoverRef) setShowFieldsPopover(false);\n };\n\n const filterFieldMenu = (searchString: string) => {\n setShowFieldsPopover(true);\n setFieldMenuItems(fieldItems \|\| []);\n if (/\\s/.test(searchString)) {\n setShowFieldsPopover(false);\n return;\n }\n if (searchString && fieldMenuItems) {\n const newFieldMenuItems: FieldItems[] = menuHelpers\n .flatten(fieldMenuItems)\n .filter(({ primary }) =>\n primary.toLowerCase().startsWith(searchString.toLocaleLowerCase())\n );\n if (newFieldMenuItems) {\n setShowFieldsPopover(true);\n setFieldMenuItems(newFieldMenuItems);\n } else setShowFieldsPopover(false);\n }\n };\n\n const updateCurrentElement = (targetEl: HTMLElement) => {\n const fieldId = targetEl.getAttribute('data-rule-id');\n const fieldValue = targetEl.innerText;\n setCurrentElementId(fieldId \|\| '');\n setCurrentElementContent(fieldValue);\n };\n\n const handleElementClick = ({ target }: MouseEvent) => {\n if (editor && target && (target as HTMLElement).tagName === 'PEGA-REFERENCE') {\n updateCurrentElement(target as HTMLElement);\n }\n hidePopover();\n };\n\n const onInsertField = () => {\n if (!editor) return;\n\n // Get the DOM element at the current selection\n const { from } = editor.state.selection;\n const domAtPos = editor.view.domAtPos(from);\n const targetEl = domAtPos.node.parentElement;\n\n if (targetEl?.tagName === 'PEGA-REFERENCE') {\n updateCurrentElement(targetEl);\n } else {\n modalMethods.current = create(Modal, modalProps);\n }\n };\n\n const isPegaRefActive = () => {\n if (!editor) return false;\n\n // Check if the selected node is a pega-reference element\n const { $from } = editor.state.selection;\n return $from.parent.type.name === 'pega-reference';\n };\n\n const fieldSelectionPopover = (\n <Popover\n show={showFieldsPopover}\n strategy='fixed'\n ref={fieldPopoverRef}\n aria-label={t('rte_insert_field')}\n target={{\n getBoundingClientRect() {\n return currentCursorPosition;\n }\n }}\n modifiers={[\n {\n name: 'offset',\n options: {\n offset: () => {\n const iframe = editorRef.current?.element?.querySelector('iframe');\n const iframeRect = iframe?.getBoundingClientRect();\n const x = iframeRect?.x ?? 0;\n const y = iframeRect?.y ?? 0;\n return [x, y] satisfies [number, number];\n }\n }\n }\n ]}\n placement='bottom-start'\n >\n {fieldMenuItems && (\n <Menu\n id={menuID}\n items={fieldMenuItems}\n as={StyledSearchPopover}\n focusControlEl={editor?.view.dom \|\| undefined}\n mode='action'\n onItemClick={findAndRenameField}\n variant='drill-down'\n />\n )}\n </Popover>\n );\n\n useEffect(() => {\n if (currentElementId && currentElementContent)\n modalMethods.current = create(Modal, modalProps);\n }, [currentElementId, currentElementContent]);\n\n useEffect(() => {\n if (modalMethods.current) {\n modalMethods.current.update(modalProps);\n }\n }, [modalProps]);\n\n // Set up click listener on iframe document for pega-reference interactions\n useEffect(() => {\n const iframe = editorRef.current?.element?.querySelector('iframe');\n const iframeDoc = iframe?.contentDocument;\n if (!iframeDoc) return;\n\n const clickListener = (e: MouseEvent) => {\n handleElementClick(e);\n };\n\n iframeDoc.addEventListener('click', clickListener);\n\n return () => {\n iframeDoc.removeEventListener('click', clickListener);\n };\n }, [editor]);\n\n const onEditorChange: EditorProps['onChange'] = (formEditor?: TiptapEditor) => {\n if (formEditor) {\n // Get cursor position from Tiptap editor\n const { selection } = formEditor.state;\n const { from } = selection;\n\n // Get the coordinates of the cursor position\n const coords = formEditor.view.coordsAtPos(from);\n\n setCurrentCursorPosition({\n bottom: coords.bottom,\n height: coords.bottom - coords.top,\n left: coords.left,\n right: coords.right,\n top: coords.top,\n width: coords.right - coords.left,\n x: coords.left,\n y: coords.top,\n toJSON: () => {}\n });\n\n if (selection.empty) {\n // Get text before cursor to check for @ mentions\n const textBefore = formEditor.state.doc.textBetween(\n Math.max(0, from - 50), // Look back up to 50 characters\n from,\n ' '\n );\n\n // Get the last word (after last space)\n const words = textBefore.split(' ');\n const lastWord = words[words.length - 1];\n\n if (lastWord?.startsWith('@') && lastWord.indexOf('@') === lastWord.lastIndexOf('@')) {\n filterFieldMenu(lastWord.slice(1));\n } else {\n setShowFieldsPopover(false);\n }\n }\n }\n };\n\n const onKeyDown: EditorProps['onKeyDown'] = event => {\n if (onKeyDownProp) {\n onKeyDownProp(event);\n }\n\n if (\n (event?.key === 'Enter' \|\|\n event?.key === 'ArrowLeft' \|\|\n event?.key === 'ArrowRight' \|\|\n event?.key === 'ArrowDown' \|\|\n event?.key === 'ArrowUp') &&\n !!fieldPopoverRef.current\n ) {\n event?.preventDefault();\n }\n if (event?.key === 'Escape' && !!fieldPopoverRef.current) {\n hidePopover();\n }\n };\n\n return (\n <Editor\n data-testid={testIds.root}\n ref={editorRef}\n {...restProps}\n label={label}\n toolbar={toolbar}\n customComponents={[\n {\n createCustomElement: createPegaReferenceElement,\n name: 'pega-reference',\n extensionAttributes: ['contenteditable'],\n style: pegaReferenceElementStyle\n },\n ...customComponents\n ]}\n customActions={[\n {\n 'data-testid': testIds.insertField,\n icon: 'code',\n text: tooltip,\n onMouseDown: () => {\n modalMethods.current = create(Modal, modalProps);\n },\n active: isPegaRefActive,\n shortcut: {\n pattern: 'meta+191',\n description: tooltip,\n command: onInsertField\n }\n },\n ...customActions\n ]}\n onInit={setEditor}\n onChange={onEditorChange}\n onBlur={() => {\n onBlur?.();\n hidePopover();\n }}\n onKeyDown={onKeyDown}\n defaultValue={defaultValue}\n >\n {fieldSelectionPopover}\n </Editor>\n );\n }\n);\n\nexport default withTestIds(DynamicContentEditor, getDynamicContentEditorTestIds);\n"]}

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

	@@ -0,0 +1,2 @@
1	+ export declare const getDynamicContentEditorTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["root", "insert-field", "insert-field-modal", "insert-field-modal-cancel", "insert-field-modal-submit"]>;
2	+ //# sourceMappingURL=DynamicContentEditor.test-ids.d.ts.map

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

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"DynamicContentEditor.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,8BAA8B,6OAMhC,CAAC"}

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

@@ -0,0 +1,9 @@
+import { createTestIds } from '@pega/cosmos-react-core';
+export const getDynamicContentEditorTestIds = createTestIds('dynamic-content-editor', [
+    'root',
+    'insert-field',
+    'insert-field-modal',
+    'insert-field-modal-cancel',
+    'insert-field-modal-submit'
+]);
+//# sourceMappingURL=DynamicContentEditor.test-ids.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"DynamicContentEditor.test-ids.js","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,8BAA8B,GAAG,aAAa,CAAC,wBAAwB,EAAE;IACpF,MAAM;IACN,cAAc;IACd,oBAAoB;IACpB,2BAA2B;IAC3B,2BAA2B;CACnB,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nexport const getDynamicContentEditorTestIds = createTestIds('dynamic-content-editor', [\n 'root',\n 'insert-field',\n 'insert-field-modal',\n 'insert-field-modal-cancel',\n 'insert-field-modal-submit'\n] as const);\n"]}

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

@@ -1,11 +1,20 @@
 import type { ReactNode } from 'react';
+import type { TestIdProp } from '@pega/cosmos-react-core';
+import type { MenuGroupProps, MenuItemProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';
 import type { EditorProps } from '@pega/cosmos-react-rte';
-import type { MenuProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';
 export type ItemType = {
     id: string;
     text: string;
 };
-export interface DynamicContentEditorProps extends EditorProps {
+export type FieldMenuItem = MenuItemProps & {
+    items?: FieldItems[];
+};
+export type FieldMenuGroup = MenuGroupProps & {
+    items?: FieldItems[];
+};
+export type FieldItems = FieldMenuItem | FieldMenuGroup;
+export declare const isFieldMenuItem: (item: FieldItems) => item is FieldMenuItem;
+export interface DynamicContentEditorProps extends EditorProps, TestIdProp {
     /** Insert field form */
     form: {
         onSubmit: (insertField: (selectedField: ItemType) => void) => void;
@@ -13,7 +22,7 @@ export interface DynamicContentEditorProps extends EditorProps {
     };
     onActiveFieldChange: (field: ItemType) => void;
     /** Property selection array */
-    fieldItems?: MenuProps['items'];
+    fieldItems?: FieldItems[];
     defaultValue?: string;
     onBlur?: () => void;
 }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DynamicContentEditor.types.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;~~AAEvC~~,OAAO,KAAK,EAAE,~~WAAW~~,EAAE,MAAM,~~wBAAwB~~,CAAC;AAC1D,OAAO,KAAK,EAAE,~~SAAS~~,EAAE,MAAM,~~wDAAwD~~,CAAC;~~AAExF~~,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,yBAA0B,SAAQ,WAAW;~~IAC5D~~,wBAAwB;IACxB,IAAI,EAAE;QACJ,QAAQ,EAAE,CAAC,WAAW,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,KAAK,IAAI,CAAC;QACnE,oBAAoB,EAAE,SAAS,CAAC;KACjC,CAAC;IACF,mBAAmB,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC/C,+BAA+B;IAC/B,UAAU,CAAC,EAAE,~~SAAS~~,~~CAAC~~,~~OAAO,~~CAAC~~,CAAC~~;~~IAChC~~,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,gCAAiC,SAAQ,yBAAyB;IACjF,gBAAgB,CAAC,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;CACtD"}
1	+ {"version":3,"file":"DynamicContentEditor.types.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,KAAK,EACV,cAAc,EACd,aAAa,EACd,MAAM,wDAAwD,CAAC;AAChE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAE1D,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,aAAa,GAAG;IAC1C,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,cAAc,GAAG;IAC5C,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,aAAa,GAAG,cAAc,CAAC;AAExD,eAAO,MAAM,eAAe,GAAI,MAAM,UAAU,KAAG,IAAI,IAAI,aACjC,CAAC;AAE3B,MAAM,WAAW,yBAA0B,SAAQ,WAAW,EAAE,UAAU;IACxE,wBAAwB;IACxB,IAAI,EAAE;QACJ,QAAQ,EAAE,CAAC,WAAW,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,KAAK,IAAI,CAAC;QACnE,oBAAoB,EAAE,SAAS,CAAC;KACjC,CAAC;IACF,mBAAmB,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC/C,+BAA+B;IAC/B,UAAU,CAAC,EAAE,UAAU,EAAE,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,gCAAiC,SAAQ,yBAAyB;IACjF,gBAAgB,CAAC,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;CACtD"}

package/lib/components/DynamicContentEditor/DynamicContentEditor.types.js CHANGED Viewed

@@ -1,2 +1,3 @@
-export {};
+import { hasProp } from '@pega/cosmos-react-core';
+export const isFieldMenuItem = (item) => hasProp(item, 'primary');
 //# sourceMappingURL=DynamicContentEditor.types.js.map

package/lib/components/DynamicContentEditor/DynamicContentEditor.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DynamicContentEditor.types.js","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode } from 'react';\n\nimport ~~type~~ { ~~EditorProps~~ } from '@pega/cosmos-react-~~rte~~';\nimport type { ~~MenuProps~~ } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\n\nexport type ItemType = {\n id: string;\n text: string;\n};\n\nexport interface DynamicContentEditorProps extends EditorProps {\n /** Insert field form /\n form: {\n onSubmit: (insertField: (selectedField: ItemType) => void) => void;\n dynamicContentPicker: ReactNode;\n };\n onActiveFieldChange: (field: ItemType) => void;\n /* Property selection array */\n fieldItems?: ~~MenuProps~~[~~'items'~~];\n defaultValue?: string;\n onBlur?: () => void;\n}\n\nexport interface DynamicContentEditorContextProps extends DynamicContentEditorProps {\n updateProperties?: (selectedfield: ItemType) => void;\n}\n"]}
1	+ {"version":3,"file":"DynamicContentEditor.types.js","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.types.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAuBlD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,IAAgB,EAAyB,EAAE,CACzE,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC","sourcesContent":["import type { ReactNode } from 'react';\n\nimport { hasProp } from '@pega/cosmos-react-core';\nimport type { TestIdProp } from '@pega/cosmos-react-core';\nimport type {\n MenuGroupProps,\n MenuItemProps\n} from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\nimport type { EditorProps } from '@pega/cosmos-react-rte';\n\nexport type ItemType = {\n id: string;\n text: string;\n};\n\nexport type FieldMenuItem = MenuItemProps & {\n items?: FieldItems[];\n};\n\nexport type FieldMenuGroup = MenuGroupProps & {\n items?: FieldItems[];\n};\n\nexport type FieldItems = FieldMenuItem \| FieldMenuGroup;\n\nexport const isFieldMenuItem = (item: FieldItems): item is FieldMenuItem =>\n hasProp(item, 'primary');\n\nexport interface DynamicContentEditorProps extends EditorProps, TestIdProp {\n /** Insert field form /\n form: {\n onSubmit: (insertField: (selectedField: ItemType) => void) => void;\n dynamicContentPicker: ReactNode;\n };\n onActiveFieldChange: (field: ItemType) => void;\n /* Property selection array */\n fieldItems?: FieldItems[];\n defaultValue?: string;\n onBlur?: () => void;\n}\n\nexport interface DynamicContentEditorContextProps extends DynamicContentEditorProps {\n updateProperties?: (selectedfield: ItemType) => void;\n}\n"]}

package/lib/components/DynamicInput/DynamicInput.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DynamicInput.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicInput/DynamicInput.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,sBAAsB,EAAE,iBAAiB,EAAU,MAAM,sBAAsB,CAAC;~~0BAwI5F~~,CAAC,SAAS,MAAM,WAChB,aAAa,SAAS,sBAAsB,CAAC,CAAC,CAAC,8BAC/C,SAAS,SAAS,MAAM,WACxB,mBAAmB,SAAS,MAAM,WAClC,eAAe,SAAS,MAAM,kBAEvB,iBAAiB,CAAC,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,mBAAmB,EAAE,eAAe,CAAC,KACxF,GAAG,CAAC,OAAO,GAAG,IAAI;;;AAEvB,wBAAiE"}
1	+ {"version":3,"file":"DynamicInput.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicInput/DynamicInput.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,sBAAsB,EAAE,iBAAiB,EAAU,MAAM,sBAAsB,CAAC;0BAoJ5F,CAAC,SAAS,MAAM,WAChB,aAAa,SAAS,sBAAsB,CAAC,CAAC,CAAC,8BAC/C,SAAS,SAAS,MAAM,WACxB,mBAAmB,SAAS,MAAM,WAClC,eAAe,SAAS,MAAM,kBAEvB,iBAAiB,CAAC,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,mBAAmB,EAAE,eAAe,CAAC,KACxF,GAAG,CAAC,OAAO,GAAG,IAAI;;;AAEvB,wBAAiE"}

package/lib/components/DynamicInput/DynamicInput.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { StyledExpressionControl, StyledDynamicInput } from './DynamicInput.styl
 import SourceButton from './SourceButton';
 import { getCurrentSource, getSourceIcon } from './utils';
 import { getDynamicInputTestIds } from './DynamicInput.test-ids';
-const DynamicInput = forwardRef(function DynamicInput({ testId, label: labelProp, sources, onSourceChange, controls, required, hideSourceButton, ...restProps }, ref) {
+const DynamicInput = forwardRef(function DynamicInput({ testId, label: labelProp, sources, onSourceChange, controls, required, hideSourceButton, disabled, readOnly, ...restProps }, ref) {
     const testIds = useTestIds(testId, getDynamicInputTestIds);
     const inputUid = useUID();
     const t = useI18n();
@@ -18,19 +18,25 @@ const DynamicInput = forwardRef(function DynamicInput({ testId, label: labelProp
         ]),
         Expression: t('expression_label'),
         FieldReference: t('field_reference_label'),
-        Rule: t('rule_label')
+        Rule: t('rule_label'),
+        ConfigurationSettings: t('configuration_settings_label')
     };
     const sourceDescriptions = {
         Constant: t('constant_description'),
         Expression: t('expression_description'),
         FieldReference: t('field_reference_description'),
-        Rule: t('rule_description')
+        Rule: t('rule_description'),
+        ConfigurationSettings: t('configuration_settings_description')
     };
     let control = _jsx(_Fragment, { children: null });
     if (currentSource === 'Constant' && controls.constant) {
         const { props, component: Component } = controls.constant;
         control = (_jsx(Component, { ...props, id: inputUid, "data-testid": testIds.control, required: required }));
     }
+    else if (currentSource === 'ConfigurationSettings' && controls.configurationSettings) {
+        const { props, component: Component } = controls.configurationSettings;
+        control = (_jsx(Component, { ...props, id: inputUid, "data-testid": testIds.control, required: required }));
+    }
     else if (currentSource === 'Rule' && controls.rule) {
         const { props, component: Component } = controls.rule;
         control = (_jsx(Component, { ...props, id: inputUid, "data-testid": testIds.control, required: required }));
@@ -43,7 +49,7 @@ const DynamicInput = forwardRef(function DynamicInput({ testId, label: labelProp
         const { props, component: Component } = controls.fieldReference;
         control = (_jsx(Component, { ...props, id: inputUid, "data-testid": testIds.control, required: required }));
     }
-    return (_jsxs(ThemeOverride, { theme: { base: { 'icon-set': 'streamline' } }, children: [_jsx(FormField, { label: label, labelFor: inputUid, required: required, ...restProps, ref: ref, testId: testIds.field, children: _jsxs(StyledDynamicInput, { children: [_jsx(_Fragment, { children: hideSourceButton ? null : (_jsx(SourceButton, { testId: testIds.menu, sources: sources, constantFormat: controls.constant?.props.format, icon: currentSource
+    return (_jsxs(ThemeOverride, { theme: { base: { 'icon-set': 'streamline' } }, children: [_jsx(FormField, { label: label, labelFor: inputUid, required: required, ...restProps, ref: ref, testId: testIds.field, disabled: disabled, readOnly: readOnly, children: _jsxs(StyledDynamicInput, { disabled: disabled, readOnly: readOnly, children: [_jsx(_Fragment, { children: hideSourceButton ? null : (_jsx(SourceButton, { testId: testIds.menu, sources: sources, constantFormat: controls.constant?.props.format, icon: currentSource
                                     ? getSourceIcon({
                                         source: currentSource,
                                         format: currentSource === 'Constant' ? controls.constant?.props.format : undefined
@@ -60,7 +66,7 @@ const DynamicInput = forwardRef(function DynamicInput({ testId, label: labelProp
                                             }), set: 'streamline' })),
                                         selected: config.selected
                                     };
-                                }), onSourceChange: onSourceChange, "aria-describedby": `${inputUid}-selected-source` })) }), control] }) }), _jsx(VisuallyHiddenText, { id: `${inputUid}-selected-source`, children: currentSource ? t('selected_noun', [sourceLabels[currentSource]]) : '' })] }));
+                                }), onSourceChange: onSourceChange, "aria-describedby": `${inputUid}-selected-source`, disabled: disabled || readOnly })) }), control] }) }), _jsx(VisuallyHiddenText, { id: `${inputUid}-selected-source`, children: currentSource ? t('selected_noun', [sourceLabels[currentSource]]) : '' })] }));
 });
 export default withTestIds(DynamicInput, getDynamicInputTestIds);
 //# sourceMappingURL=DynamicInput.js.map