@pega/custom-dx-components 0.23.33 → 0.23.34

package/README.md

@@ -8,7 +8,7 @@ This project provides you with an environment to extend Constellation by giving
 
 Ensure you have access to the following in your system:
 
-- Pega Infinity Server version 8.7 or later
+- Pega Infinity Server version 23 or later
 
 - Git version 2.30 or later
 
@@ -18,4 +18,4 @@ Ensure you have access to the following in your system:
 
 ## Latest Documentation
 
-Find the latest documentation on using **DX Component Builder** [here](https://docs.pega.com/bundle/constellation-dx-components-88/page/constellation-dx-components/custom-components/lifecycle-dx-cosmos-components.html)
+Find the latest documentation on using **DX Component Builder** [here](https://docs.pega.com/bundle/constellation-dx-components/page/constellation-dx-components/custom-components/lifecycle-dx-cosmos-components.html)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "0.23.33",
+  "version": "0.23.34",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/constants.js

@@ -170,11 +170,11 @@ export const COMPONENT_SCHEMA = {
         value: 'Picklist'
       },
       {
-        name: 'Autocomplete',
+        name: 'Search box',
         value: 'Picklist-Autocomplete'
       },
       {
-        name: 'Radio Buttons',
+        name: 'Radio buttons',
         value: 'Picklist-RadioButtons'
       }
     ],

package/src/tasks/init/template/package.json.mustache

@@ -69,7 +69,7 @@
   },
   "devDependencies": {
     "@pega/configs": "^0.6.0",
-    "@pega/custom-dx-components": "0.23.33",
+    "@pega/custom-dx-components": "0.23.34",
     "@pega/pcore-pconnect-typedefs": "2.0.0",
     "@storybook/addon-actions": "^7.6.7",
     "@storybook/addon-essentials": "^7.6.7",

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyRadioButtons/config.json

@@ -1,12 +1,12 @@
 {
-  "name": "Pega_DXIL_MyRadioButtons",
-  "label": "My Radio Buttons",
-  "description": "My Radio Buttons",
+  "name": "Pega_DXIL_MyRadiobuttons",
+  "label": "My Radio buttons",
+  "description": "My Radio buttons",
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",
   "allowedApplications": [],
-  "componentKey": "Pega_DXIL_MyRadioButtons",
+  "componentKey": "Pega_DXIL_MyRadiobuttons",
   "type": "Field",
   "subtype": "Picklist",
   "icon": "images/pz-dropdown-active.svg",

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyRadioButtons/demo.stories.tsx

@@ -6,15 +6,15 @@ import { withKnobs } from '@storybook/addon-knobs';
 
 import { configProps, rawMetadata, fieldMetadata, stateProps } from './mock';
 
-import PegaDxilMyRadioButtons from './index';
+import PegaDxilMyRadiobuttons from './index';
 
 export default {
-  title: 'PegaDxilMyRadioButtons',
+  title: 'PegaDxilMyRadiobuttons',
   decorators: [withKnobs],
-  component: PegaDxilMyRadioButtons
+  component: PegaDxilMyRadiobuttons
 };
 
-export const BasePegaDxilMyRadioButtons = () => {
+export const BasePegaDxilMyRadiobuttons = () => {
 
   const [value, setValue] = useState(configProps.value);
 
@@ -79,7 +79,7 @@ export const BasePegaDxilMyRadioButtons = () => {
 
   return (
     <>
-      <PegaDxilMyRadioButtons {...props} />
+      <PegaDxilMyRadiobuttons {...props} />
     </>
   );
 };

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyRadioButtons/index.tsx

@@ -8,11 +8,11 @@ import type { PConnFieldProps } from './PConnProps';
 import { formatExists, textFormatter } from './textformat-utils.jsx';
 import handleEvent from './event-utils';
 
-import StyledPegaDxilMyRadioButtonsWrapper from './styles';
+import StyledPegaDxilMyRadiobuttonsWrapper from './styles';
 
 
 // interface for props
-interface PegaDxilMyRadioButtonsProps extends PConnFieldProps {
+interface PegaDxilMyRadiobuttonsProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextInput here
   isTableFormatter?: boolean;
   hasSuggestions?: boolean;
@@ -53,7 +53,7 @@ const getDisplayValue = (dataSource: any, value: any, isDatapage: boolean) => {
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 // any default values in config.pros should be set in defaultProps at bottom of this file
-export default function PegaDxilMyRadioButtons(props: PegaDxilMyRadioButtonsProps) {
+export default function PegaDxilMyRadiobuttons(props: PegaDxilMyRadiobuttonsProps) {
   const {
     getPConnect,
     value,
@@ -165,7 +165,7 @@ export default function PegaDxilMyRadioButtons(props: PegaDxilMyRadioButtonsProp
   }
 
   return (
-    <StyledPegaDxilMyRadioButtonsWrapper>
+    <StyledPegaDxilMyRadiobuttonsWrapper>
     <RadioButtonGroup
       {...additionalProps}
       label={label}
@@ -193,12 +193,12 @@ export default function PegaDxilMyRadioButtons(props: PegaDxilMyRadioButtonsProp
     >
       {items}
     </RadioButtonGroup>
-    </StyledPegaDxilMyRadioButtonsWrapper>
+    </StyledPegaDxilMyRadiobuttonsWrapper>
   );
 }
 
 
-PegaDxilMyRadioButtons.defaultProps = {
+PegaDxilMyRadiobuttons.defaultProps = {
   value: '',
   validatemessage: '',
   helperText: '',
@@ -219,7 +219,7 @@ PegaDxilMyRadioButtons.defaultProps = {
   isTableFormatter: false
 };
 
-PegaDxilMyRadioButtons.propTypes = {
+PegaDxilMyRadiobuttons.propTypes = {
   getPConnect: PropTypes.func.isRequired,
   value: PropTypes.string,
   label: PropTypes.string.isRequired,

package/tests/assets/components/createAll/{Launchpad/Pega_DXIL_MyAutocomplete → Constellation/Pega_DXIL_MySearchbox}/config.json

@@ -1,12 +1,12 @@
 {
-  "name": "Pega_DXIL_MyAutocomplete",
-  "label": "My Autocomplete",
-  "description": "My Autocomplete",
+  "name": "Pega_DXIL_MySearchbox",
+  "label": "My Search box",
+  "description": "My Search box",
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",
   "allowedApplications": [],
-  "componentKey": "Pega_DXIL_MyAutocomplete",
+  "componentKey": "Pega_DXIL_MySearchbox",
   "type": "Field",
   "subtype": "Picklist",
   "icon": "images/pz-dropdown-active.svg",

package/tests/assets/components/createAll/{Launchpad/Pega_DXIL_MyAutocomplete → Constellation/Pega_DXIL_MySearchbox}/demo.stories.tsx

@@ -6,15 +6,15 @@ import { withKnobs } from '@storybook/addon-knobs';
 
 import { configProps, rawMetadata, fieldMetadata, stateProps } from './mock';
 
-import PegaDxilMyAutocomplete from './index';
+import PegaDxilMySearchbox from './index';
 
 export default {
-  title: 'PegaDxilMyAutocomplete',
+  title: 'PegaDxilMySearchbox',
   decorators: [withKnobs],
-  component: PegaDxilMyAutocomplete
+  component: PegaDxilMySearchbox
 };
 
-export const BasePegaDxilMyAutocomplete = () => {
+export const BasePegaDxilMySearchbox = () => {
 
   const [value, setValue] = useState(configProps.value);
   const datasourceMetadata = fieldMetadata;
@@ -84,7 +84,7 @@ export const BasePegaDxilMyAutocomplete = () => {
 
   return (
     <>
-      <PegaDxilMyAutocomplete {...props} />
+      <PegaDxilMySearchbox {...props} />
     </>
   );
 };

package/tests/assets/components/createAll/Constellation/{Pega_DXIL_MyAutocomplete → Pega_DXIL_MySearchbox}/index.tsx

@@ -17,10 +17,10 @@ import { getFieldNameFromEmbeddedFieldName } from './embed-utils.js';
 
 import { usePaginate, useDeepMemo, useIsMount, updatePropertiesForNewRecord } from './utils';
 
-import StyledPegaDxilMyAutocompleteWrapper from './styles';
+import StyledPegaDxilMySearchboxWrapper from './styles';
 
 // interface for props
-interface PegaDxilMyAutocompleteProps extends PConnFieldProps {
+interface PegaDxilMySearchboxProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextInput here
   isTableFormatter?: boolean;
   hasSuggestions?: boolean;
@@ -47,7 +47,7 @@ interface PegaDxilMyAutocompleteProps extends PConnFieldProps {
   isSearchableOnKey: boolean;
 }
 
-interface PegaDxilMyAutocompletePropsSubSet {
+interface PegaDxilMySearchboxPropsSubSet {
   selected: any;
   actualValue: any;
   isTableFormatter?: boolean;
@@ -361,7 +361,7 @@ export const setValueToAssocProp = (
   return retValue;
 };
 
-const DisplayComponent = (props: PegaDxilMyAutocompletePropsSubSet) => {
+const DisplayComponent = (props: PegaDxilMySearchboxPropsSubSet) => {
   const { selected, actualValue, isTableFormatter, formatter } = props;
 
   const displayCompValue = selected ? selected.primary : actualValue;
@@ -378,7 +378,7 @@ const DisplayComponent = (props: PegaDxilMyAutocompletePropsSubSet) => {
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 // any default values in config.pros should be set in defaultProps at bottom of this file
-export function PegaDxilMyAutocomplete(props: PegaDxilMyAutocompleteProps) {
+export function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
   const {
     getPConnect,
     value,
@@ -1072,9 +1072,9 @@ export function PegaDxilMyAutocomplete(props: PegaDxilMyAutocompleteProps) {
   };
 
   const displayComponent = useMemo(() => {
-    return <StyledPegaDxilMyAutocompleteWrapper>
+    return <StyledPegaDxilMySearchboxWrapper>
     <DisplayComponent {...{ selected, actualValue, isTableFormatter, formatter }} />
-    </StyledPegaDxilMyAutocompleteWrapper>;
+    </StyledPegaDxilMySearchboxWrapper>;
   }, [selected, actualValue, isTableFormatter, formatter]);
 
   if (displayMode) {
@@ -1122,7 +1122,7 @@ export function PegaDxilMyAutocomplete(props: PegaDxilMyAutocompleteProps) {
 
 
   return (
-    <StyledPegaDxilMyAutocompleteWrapper>
+    <StyledPegaDxilMySearchboxWrapper>
     <ComboBox
       {...additionalProps}
       testId={testId ?? label}
@@ -1168,13 +1168,13 @@ export function PegaDxilMyAutocomplete(props: PegaDxilMyAutocompleteProps) {
       mode={AC_TYPE}
       onResolveSuggestion={onResolveSuggestionHandler}
     />
-    </StyledPegaDxilMyAutocompleteWrapper>
+    </StyledPegaDxilMySearchboxWrapper>
   );
 }
 
-export default memo(PegaDxilMyAutocomplete);
+export default memo(PegaDxilMySearchbox);
 
-PegaDxilMyAutocomplete.defaultProps = {
+PegaDxilMySearchbox.defaultProps = {
   value: '',
   matchPosition: 'contains',
   maxResultsDisplay: '',
@@ -1203,7 +1203,7 @@ PegaDxilMyAutocomplete.defaultProps = {
   hasSuggestions: false
 };
 
-PegaDxilMyAutocomplete.propTypes = {
+PegaDxilMySearchbox.propTypes = {
   value: PropTypes.string,
   maxResultsDisplay: PropTypes.string,
   matchPosition: PropTypes.string,

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyRadioButtons/config.json

@@ -1,12 +1,12 @@
 {
-  "name": "Pega_DXIL_MyRadioButtons",
-  "label": "My Radio Buttons",
-  "description": "My Radio Buttons",
+  "name": "Pega_DXIL_MyRadiobuttons",
+  "label": "My Radio buttons",
+  "description": "My Radio buttons",
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",
   "allowedApplications": [],
-  "componentKey": "Pega_DXIL_MyRadioButtons",
+  "componentKey": "Pega_DXIL_MyRadiobuttons",
   "type": "Field",
   "subtype": "Picklist",
   "icon": "images/pz-dropdown-active.svg",

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyRadioButtons/demo.stories.tsx

@@ -6,15 +6,15 @@ import { withKnobs } from '@storybook/addon-knobs';
 
 import { configProps, rawMetadata, fieldMetadata, stateProps } from './mock';
 
-import PegaDxilMyRadioButtons from './index';
+import PegaDxilMyRadiobuttons from './index';
 
 export default {
-  title: 'PegaDxilMyRadioButtons',
+  title: 'PegaDxilMyRadiobuttons',
   decorators: [withKnobs],
-  component: PegaDxilMyRadioButtons
+  component: PegaDxilMyRadiobuttons
 };
 
-export const BasePegaDxilMyRadioButtons = () => {
+export const BasePegaDxilMyRadiobuttons = () => {
 
   const [value, setValue] = useState(configProps.value);
 
@@ -79,7 +79,7 @@ export const BasePegaDxilMyRadioButtons = () => {
 
   return (
     <>
-      <PegaDxilMyRadioButtons {...props} />
+      <PegaDxilMyRadiobuttons {...props} />
     </>
   );
 };

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyRadioButtons/index.tsx

@@ -8,11 +8,11 @@ import type { PConnFieldProps } from './PConnProps';
 import { formatExists, textFormatter } from './textformat-utils.jsx';
 import handleEvent from './event-utils';
 
-import StyledPegaDxilMyRadioButtonsWrapper from './styles';
+import StyledPegaDxilMyRadiobuttonsWrapper from './styles';
 
 
 // interface for props
-interface PegaDxilMyRadioButtonsProps extends PConnFieldProps {
+interface PegaDxilMyRadiobuttonsProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextInput here
   isTableFormatter?: boolean;
   hasSuggestions?: boolean;
@@ -53,7 +53,7 @@ const getDisplayValue = (dataSource: any, value: any, isDatapage: boolean) => {
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 // any default values in config.pros should be set in defaultProps at bottom of this file
-export default function PegaDxilMyRadioButtons(props: PegaDxilMyRadioButtonsProps) {
+export default function PegaDxilMyRadiobuttons(props: PegaDxilMyRadiobuttonsProps) {
   const {
     getPConnect,
     value,
@@ -165,7 +165,7 @@ export default function PegaDxilMyRadioButtons(props: PegaDxilMyRadioButtonsProp
   }
 
   return (
-    <StyledPegaDxilMyRadioButtonsWrapper>
+    <StyledPegaDxilMyRadiobuttonsWrapper>
     <RadioButtonGroup
       {...additionalProps}
       label={label}
@@ -193,12 +193,12 @@ export default function PegaDxilMyRadioButtons(props: PegaDxilMyRadioButtonsProp
     >
       {items}
     </RadioButtonGroup>
-    </StyledPegaDxilMyRadioButtonsWrapper>
+    </StyledPegaDxilMyRadiobuttonsWrapper>
   );
 }
 
 
-PegaDxilMyRadioButtons.defaultProps = {
+PegaDxilMyRadiobuttons.defaultProps = {
   value: '',
   validatemessage: '',
   helperText: '',
@@ -219,7 +219,7 @@ PegaDxilMyRadioButtons.defaultProps = {
   isTableFormatter: false
 };
 
-PegaDxilMyRadioButtons.propTypes = {
+PegaDxilMyRadiobuttons.propTypes = {
   getPConnect: PropTypes.func.isRequired,
   value: PropTypes.string,
   label: PropTypes.string.isRequired,

package/tests/assets/components/createAll/{Constellation/Pega_DXIL_MyAutocomplete → Launchpad/Pega_DXIL_MySearchbox}/config.json

@@ -1,12 +1,12 @@
 {
-  "name": "Pega_DXIL_MyAutocomplete",
-  "label": "My Autocomplete",
-  "description": "My Autocomplete",
+  "name": "Pega_DXIL_MySearchbox",
+  "label": "My Search box",
+  "description": "My Search box",
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",
   "allowedApplications": [],
-  "componentKey": "Pega_DXIL_MyAutocomplete",
+  "componentKey": "Pega_DXIL_MySearchbox",
   "type": "Field",
   "subtype": "Picklist",
   "icon": "images/pz-dropdown-active.svg",

package/tests/assets/components/createAll/{Constellation/Pega_DXIL_MyAutocomplete → Launchpad/Pega_DXIL_MySearchbox}/demo.stories.tsx

@@ -6,15 +6,15 @@ import { withKnobs } from '@storybook/addon-knobs';
 
 import { configProps, rawMetadata, fieldMetadata, stateProps } from './mock';
 
-import PegaDxilMyAutocomplete from './index';
+import PegaDxilMySearchbox from './index';
 
 export default {
-  title: 'PegaDxilMyAutocomplete',
+  title: 'PegaDxilMySearchbox',
   decorators: [withKnobs],
-  component: PegaDxilMyAutocomplete
+  component: PegaDxilMySearchbox
 };
 
-export const BasePegaDxilMyAutocomplete = () => {
+export const BasePegaDxilMySearchbox = () => {
 
   const [value, setValue] = useState(configProps.value);
   const datasourceMetadata = fieldMetadata;
@@ -84,7 +84,7 @@ export const BasePegaDxilMyAutocomplete = () => {
 
   return (
     <>
-      <PegaDxilMyAutocomplete {...props} />
+      <PegaDxilMySearchbox {...props} />
     </>
   );
 };

package/tests/assets/components/createAll/Launchpad/{Pega_DXIL_MyAutocomplete → Pega_DXIL_MySearchbox}/index.tsx

@@ -17,10 +17,10 @@ import { getFieldNameFromEmbeddedFieldName } from './embed-utils.js';
 
 import { usePaginate, useDeepMemo, useIsMount, updatePropertiesForNewRecord } from './utils';
 
-import StyledPegaDxilMyAutocompleteWrapper from './styles';
+import StyledPegaDxilMySearchboxWrapper from './styles';
 
 // interface for props
-interface PegaDxilMyAutocompleteProps extends PConnFieldProps {
+interface PegaDxilMySearchboxProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextInput here
   isTableFormatter?: boolean;
   hasSuggestions?: boolean;
@@ -47,7 +47,7 @@ interface PegaDxilMyAutocompleteProps extends PConnFieldProps {
   isSearchableOnKey: boolean;
 }
 
-interface PegaDxilMyAutocompletePropsSubSet {
+interface PegaDxilMySearchboxPropsSubSet {
   selected: any;
   actualValue: any;
   isTableFormatter?: boolean;
@@ -361,7 +361,7 @@ export const setValueToAssocProp = (
   return retValue;
 };
 
-const DisplayComponent = (props: PegaDxilMyAutocompletePropsSubSet) => {
+const DisplayComponent = (props: PegaDxilMySearchboxPropsSubSet) => {
   const { selected, actualValue, isTableFormatter, formatter } = props;
 
   const displayCompValue = selected ? selected.primary : actualValue;
@@ -378,7 +378,7 @@ const DisplayComponent = (props: PegaDxilMyAutocompletePropsSubSet) => {
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 // any default values in config.pros should be set in defaultProps at bottom of this file
-export function PegaDxilMyAutocomplete(props: PegaDxilMyAutocompleteProps) {
+export function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
   const {
     getPConnect,
     value,
@@ -1072,9 +1072,9 @@ export function PegaDxilMyAutocomplete(props: PegaDxilMyAutocompleteProps) {
   };
 
   const displayComponent = useMemo(() => {
-    return <StyledPegaDxilMyAutocompleteWrapper>
+    return <StyledPegaDxilMySearchboxWrapper>
     <DisplayComponent {...{ selected, actualValue, isTableFormatter, formatter }} />
-    </StyledPegaDxilMyAutocompleteWrapper>;
+    </StyledPegaDxilMySearchboxWrapper>;
   }, [selected, actualValue, isTableFormatter, formatter]);
 
   if (displayMode) {
@@ -1122,7 +1122,7 @@ export function PegaDxilMyAutocomplete(props: PegaDxilMyAutocompleteProps) {
 
 
   return (
-    <StyledPegaDxilMyAutocompleteWrapper>
+    <StyledPegaDxilMySearchboxWrapper>
     <ComboBox
       {...additionalProps}
       testId={testId ?? label}
@@ -1168,13 +1168,13 @@ export function PegaDxilMyAutocomplete(props: PegaDxilMyAutocompleteProps) {
       mode={AC_TYPE}
       onResolveSuggestion={onResolveSuggestionHandler}
     />
-    </StyledPegaDxilMyAutocompleteWrapper>
+    </StyledPegaDxilMySearchboxWrapper>
   );
 }
 
-export default memo(PegaDxilMyAutocomplete);
+export default memo(PegaDxilMySearchbox);
 
-PegaDxilMyAutocomplete.defaultProps = {
+PegaDxilMySearchbox.defaultProps = {
   value: '',
   matchPosition: 'contains',
   maxResultsDisplay: '',
@@ -1203,7 +1203,7 @@ PegaDxilMyAutocomplete.defaultProps = {
   hasSuggestions: false
 };
 
-PegaDxilMyAutocomplete.propTypes = {
+PegaDxilMySearchbox.propTypes = {
   value: PropTypes.string,
   maxResultsDisplay: PropTypes.string,
   matchPosition: PropTypes.string,