@pega/dx-component-builder-sdk 23.1.14 → 24.1.10

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyPicklist/styles.ts

@@ -1,15 +1,8 @@
-
-// utilizing theming, comment out, if want individual style
-import styled from 'styled-components';
-import { Configuration } from '@pega/cosmos-react-core';
-
-export default styled(Configuration)``;
-
 // individual style, comment out above, and uncomment here and add styles
-// import styled, { css } from 'styled-components';
-//
-// export default styled.div(() => {
-//  return css`
-//    margin: 0px 0;
-//  `;
-// });
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyRadiobuttons/demo.stories.tsx

@@ -2,33 +2,29 @@
 /* eslint-disable react/jsx-no-useless-fragment */
 // @ts-nocheck
 import { useState } from 'react';
-import { withKnobs } from '@storybook/addon-knobs';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { configProps, rawMetadata, fieldMetadata, stateProps } from './mock';
 
 import PegaDxilMyRadiobuttons from './index';
 
-export default {
+const meta: Meta<typeof PegaDxilMyRadiobuttons> = {
   title: 'PegaDxilMyRadiobuttons',
-  decorators: [withKnobs],
-  component: PegaDxilMyRadiobuttons
+  component: PegaDxilMyRadiobuttons,
+  excludeStories: /.*Data$/
 };
 
-export const BasePegaDxilMyRadiobuttons = () => {
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyRadiobuttons>;
+
+export const BasePegaDxilMyRadiobuttons: Story = args => {
 
   const [value, setValue] = useState(configProps.value);
 
   const props = {
     value,
-    align: 'vertical',
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    datasource: configProps.datasource,
-    testId: configProps.testId,
     hasSuggestions: configProps.hasSuggestions,
     fieldMetadata,
-
     getPConnect: () => {
       return {
         getConfigProps: () => {
@@ -79,7 +75,23 @@ export const BasePegaDxilMyRadiobuttons = () => {
 
   return (
     <>
-      <PegaDxilMyRadiobuttons {...props} />
+      <PegaDxilMyRadiobuttons {...props} {...args} />
     </>
   );
 };
+
+BasePegaDxilMyRadiobuttons.args = {
+  datasource: configProps.datasource,
+  label: configProps.label,
+  helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
+  inline: configProps.inline,
+  testId: configProps.testId,
+  readOnly: configProps.readOnly,
+  disabled: configProps.disabled,
+  required: configProps.required,
+  status: configProps.status,
+  hideLabel: configProps.hideLabel,
+  displayMode: configProps.displayMode,
+  validatemessage: configProps.validatemessage
+};

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyRadiobuttons/index.tsx

@@ -1,11 +1,10 @@
 /* eslint-disable no-nested-ternary */
 import { useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { RadioButton, RadioButtonGroup } from '@pega/cosmos-react-core';
+import { RadioButton, RadioButtonGroup, withConfiguration } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
 
 // includes in bundle
-import { formatExists, textFormatter } from './textformat-utils.jsx';
+import { formatExists, textFormatter } from './textformat-utils';
 import handleEvent from './event-utils';
 
 import StyledPegaDxilMyRadiobuttonsWrapper from './styles';
@@ -20,7 +19,6 @@ interface PegaDxilMyRadiobuttonsProps extends PConnFieldProps {
   listType: string;
   datasource: Array<any>;
   inline: boolean;
-  align: string;
 }
 
 
@@ -53,24 +51,23 @@ 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) {
+function PegaDxilMyRadiobuttons(props: PegaDxilMyRadiobuttonsProps) {
   const {
     getPConnect,
     value,
     label,
-    hideLabel,
+    hideLabel = false,
     helperText,
-    datasource,
+    datasource = [],
     listType,
     validatemessage,
-    align,
     testId,
-    additionalProps,
+    additionalProps = {},
     displayMode,
-    inline,
+    inline = false,
     placeholder,
-    fieldMetadata,
-    isTableFormatter
+    fieldMetadata = {},
+    isTableFormatter = false
   } = props;
   const pConn = getPConnect();
   const { formatter } = props;
@@ -89,7 +86,7 @@ export default function PegaDxilMyRadiobuttons(props: PegaDxilMyRadiobuttonsProp
   const fullReference = getFullReference(pConn, configProperty);
 
   // BUG-547602: Temporary type coercion for 8.5 until DXAPIs are enhanced to pass original pxViewMetadata JSON, respecting boolean primitives
-  let { readOnly, required, disabled } = props;
+  let { readOnly = false, required = false, disabled = false } = props;
   [readOnly, required, disabled] = [readOnly, required, disabled].map(
     (prop) => prop === true || (typeof prop === 'string' && prop === 'true')
   );
@@ -186,7 +183,6 @@ export default function PegaDxilMyRadiobuttons(props: PegaDxilMyRadiobuttonsProp
         // @ts-ignore
         pConn.getValidationApi().validate(event.target.value);
       }}
-      align={align}
       disabled={disabled}
       className='standard'
       name={fullReference}
@@ -197,47 +193,4 @@ export default function PegaDxilMyRadiobuttons(props: PegaDxilMyRadiobuttonsProp
   );
 }
 
-
-PegaDxilMyRadiobuttons.defaultProps = {
-  value: '',
-  validatemessage: '',
-  helperText: '',
-  hideLabel: false,
-  disabled: false,
-  readOnly: false,
-  required: false,
-  align: 'vertical',
-  testId: '',
-  datasource: [],
-  listType: '',
-  additionalProps: {},
-  fieldMetadata: {},
-  displayMode: null,
-  inline: false,
-  placeholder: null,
-  formatter: '',
-  isTableFormatter: false
-};
-
-PegaDxilMyRadiobuttons.propTypes = {
-  getPConnect: PropTypes.func.isRequired,
-  value: PropTypes.string,
-  label: PropTypes.string.isRequired,
-  hideLabel: PropTypes.bool,
-  datasource: PropTypes.arrayOf(PropTypes.any),
-  listType: PropTypes.string,
-  validatemessage: PropTypes.string,
-  helperText: PropTypes.string,
-  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  align: PropTypes.string,
-  testId: PropTypes.string,
-  additionalProps: PropTypes.objectOf(PropTypes.any),
-  fieldMetadata: PropTypes.objectOf(PropTypes.any),
-  displayMode: PropTypes.string,
-  inline: PropTypes.bool,
-  placeholder: PropTypes.string,
-  formatter: PropTypes.string,
-  isTableFormatter: PropTypes.bool
-};
+export default withConfiguration(PegaDxilMyRadiobuttons);

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyRadiobuttons/mock.ts

@@ -21,7 +21,15 @@ export const configProps = {
   ],
   helperText: 'Picklist Helper Text',
   testId: 'picklist-12345678',
-  hasSuggestions: false
+  hasSuggestions: false,
+  displayMode: '',
+  inline: false,
+  hideLabel: false,
+  readOnly: false,
+  required: false,
+  disabled: false,
+  status: '',
+  validatemessage: ''
 };
 
 export const stateProps = {

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyRadiobuttons/styles.ts

@@ -1,15 +1,8 @@
-
-// utilizing theming, comment out, if want individual style
-import styled from 'styled-components';
-import { Configuration } from '@pega/cosmos-react-core';
-
-export default styled(Configuration)``;
-
 // individual style, comment out above, and uncomment here and add styles
-// import styled, { css } from 'styled-components';
-//
-// export default styled.div(() => {
-//  return css`
-//    margin: 0px 0;
-//  `;
-// });
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/{Pega_DXIL_MySearchbox/textformat-utils.jsx → Pega_DXIL_MyRadiobuttons/textformat-utils.tsx}

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { EmailDisplay, PhoneDisplay, URLDisplay, Image, Button, Lightbox } from '@pega/cosmos-react-core';
 import { useRef, useState } from 'react';
 

package/{src/tasks/create/templates/Constellation/field/Picklist-Autocomplete/date.js.mustache → tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MySearchbox/date.ts}

@@ -5,7 +5,7 @@ import utc from 'dayjs/plugin/utc.js';
 import tzone from 'dayjs/plugin/timezone.js';
 import { formatDateTime, parseToDate } from '@pega/cosmos-react-core';
 
-import formatConstants from './format-constants.js';
+import formatConstants from './format-constants';
 
 dayjs.extend(relativeTime);
 dayjs.extend(localizedFormat);
@@ -34,18 +34,9 @@ const constellationToCosmosFormatterMap = new Map([
   [
     DATE_TYPES.DATE,
     new Map([
-      [
-        formatConstants.DateTimeLong,
-        { format: COSMOS_FORMAT_CONSTANTS.LONG, variant: COSMOS_VARIANT_CONSTANTS.DATE_TIME }
-      ],
-      [
-        formatConstants.DateTimeShort,
-        { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.DATE }
-      ],
-      [
-        formatConstants.DateTimeSince,
-        { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.RELATIVE }
-      ],
+      [formatConstants.DateTimeLong, { format: COSMOS_FORMAT_CONSTANTS.LONG, variant: COSMOS_VARIANT_CONSTANTS.DATE_TIME }],
+      [formatConstants.DateTimeShort, { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.DATE }],
+      [formatConstants.DateTimeSince, { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.RELATIVE }],
       [formatConstants.DateDefault, { format: COSMOS_FORMAT_CONSTANTS.LONG, variant: COSMOS_VARIANT_CONSTANTS.DATE }]
     ])
   ],
@@ -59,22 +50,10 @@ const constellationToCosmosFormatterMap = new Map([
   [
     DATE_TYPES.DATE_TIME,
     new Map([
-      [
-        formatConstants.DateTimeDefault,
-        { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.DATE_TIME }
-      ],
-      [
-        formatConstants.DateTimeShort,
-        { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.DATE }
-      ],
-      [
-        formatConstants.DateTimeSince,
-        { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.RELATIVE }
-      ],
-      [
-        formatConstants.DateTimeLong,
-        { format: COSMOS_FORMAT_CONSTANTS.LONG, variant: COSMOS_VARIANT_CONSTANTS.DATE_TIME }
-      ],
+      [formatConstants.DateTimeDefault, { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.DATE_TIME }],
+      [formatConstants.DateTimeShort, { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.DATE }],
+      [formatConstants.DateTimeSince, { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.RELATIVE }],
+      [formatConstants.DateTimeLong, { format: COSMOS_FORMAT_CONSTANTS.LONG, variant: COSMOS_VARIANT_CONSTANTS.DATE_TIME }],
       [formatConstants.TimeOnly, { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.TIME }]
     ])
   ]
@@ -84,13 +63,14 @@ const types = ['fromNow', 'customFormat'];
 // value should be in ISO 8601 format.
 function DateFormatter(
   value,
-  // eslint-disable-next-line no-shadow, @typescript-eslint/no-shadow
-  { type = types[1], format = 'DD/MM/YYYY', timezone, fieldType } = {}) {
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-shadow
+  { type = types[1], format = 'DD/MM/YYYY', timezone, fieldType } = {}
+) {
   if (!value) return value;
   switch (type) {
     case types[1]:
-      if (timezone && !(fieldType === 'Date' || fieldType === 'Date only'))
-        return dayjs(value).tz(timezone).format(format); // Date only value should be formatted without timezone
+      if (timezone && !(fieldType === 'Date' || fieldType === 'Date only')) return dayjs(value).tz(timezone).format(format); // Date only value should be formatted without timezone
       return dayjs(value).format(format);
     case types[0]:
       return dayjs(value).from(dayjs());
@@ -128,8 +108,8 @@ function DateFormatter(
 export function format(value, options) {
   if (!value) return null;
   const { type, locale, timezone, formatter, translate } = options;
-  // eslint-disable-next-line no-shadow, @typescript-eslint/no-shadow
-  const { format, variant } = constellationToCosmosFormatterMap.get(type).get(formatter);
+  // eslint-disable-next-line @typescript-eslint/no-shadow
+  const { format, variant } = (constellationToCosmosFormatterMap.get(type) as any).get(formatter);
   return formatDateTime(parseToDate(value), {
     t: translate,
     locale,
@@ -153,8 +133,7 @@ export default {
         })
       : value;
   },
-  convertFromTimezone: (value, timezone) =>
-    value && timezone ? dayjs.tz(value, timezone).utc().format('YYYY-MM-DDTHH:mm:ss[Z]') : value,
+  convertFromTimezone: (value, timezone) => (value && timezone ? dayjs.tz(value, timezone).utc().format('YYYY-MM-DDTHH:mm:ss[Z]') : value),
   Date: (value, options) => DateFormatter(value, { type: 'customFormat', ...options }),
   'Date-Default': (value, options) => format(value, { ...options, formatter: 'Date-Default' }),
   'Date-Time-Default': (value, options) => format(value, { ...options, formatter: 'Date-Time-Default' }),

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MySearchbox/demo.stories.tsx

@@ -2,38 +2,33 @@
 /* eslint-disable react/jsx-no-useless-fragment */
 // @ts-nocheck
 import { useState } from 'react';
-import { withKnobs } from '@storybook/addon-knobs';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { configProps, rawMetadata, fieldMetadata, stateProps } from './mock';
 
 import PegaDxilMySearchbox from './index';
 
-export default {
+const meta: Meta<typeof PegaDxilMySearchbox> = {
   title: 'PegaDxilMySearchbox',
-  decorators: [withKnobs],
-  component: PegaDxilMySearchbox
+  component: PegaDxilMySearchbox,
+  excludeStories: /.*Data$/
 };
 
-export const BasePegaDxilMySearchbox = () => {
+export default meta;
+type Story = StoryObj<typeof PegaDxilMySearchbox>;
+
+export const BasePegaDxilMySearchbox: Story = args => {
 
   const [value, setValue] = useState(configProps.value);
   const datasourceMetadata = fieldMetadata;
 
   const props = {
     value,
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    datasource: configProps.datasource,
-    testId: configProps.testId,
     hasSuggestions: configProps.hasSuggestions,
     columns: [],
-    isTableFormatter: false,
     listType: 'associated',
-    parameters: {},
     datasourceMetadata,
     fieldMetadata,
-
     getPConnect: () => {
       return {
         getConfigProps: () => {
@@ -84,7 +79,24 @@ export const BasePegaDxilMySearchbox = () => {
 
   return (
     <>
-      <PegaDxilMySearchbox {...props} />
+      <PegaDxilMySearchbox {...props} {...args} />
     </>
   );
 };
+
+BasePegaDxilMySearchbox.args = {
+  datasource: configProps.datasource,
+  label: configProps.label,
+  helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
+  parameters: {},
+  isTableFormatter: false,
+  testId: configProps.testId,
+  readOnly: configProps.readOnly,
+  disabled: configProps.disabled,
+  required: configProps.required,
+  status: configProps.status,
+  hideLabel: configProps.hideLabel,
+  displayMode: configProps.displayMode,
+  validatemessage: configProps.validatemessage
+};

package/{src/tasks/create/templates/Constellation/field/Picklist-Autocomplete/embed-utils.js.mustache → tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MySearchbox/embed-utils.ts}

@@ -1,4 +1,5 @@
-import { isEmbeddedField, isPageListInPath, PAGE, PAGELIST, buildAggOrCalcId } from './repeat-utils.js';
+// @ts-nocheck
+import { isEmbeddedField, isPageListInPath, PAGE, PAGELIST, buildAggOrCalcId } from './repeat-utils';
 
 export const AT_FILTEREDLIST = '@FILTERED_LIST';
 export const AT_PROPERTY = '@P';

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MySearchbox/index.tsx

@@ -1,8 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable sonarjs/cognitive-complexity */
-import { useEffect, useRef, useState, memo, useMemo, type MutableRefObject, type SetStateAction } from 'react';
-import { ComboBox, menuHelpers, debounce, throttle, Button, Icon, type MenuGroupProps, type MenuItemProps } from '@pega/cosmos-react-core';
-import PropTypes from 'prop-types';
+import { useEffect, useRef, useState, useMemo, type MutableRefObject, type SetStateAction } from 'react';
+import { ComboBox, menuHelpers, debounce, throttle, Button, Icon, withConfiguration, type MenuGroupProps, type MenuItemProps } from '@pega/cosmos-react-core';
 import get from 'lodash.get';
 import type { PConnFieldProps } from './PConnProps';
 
@@ -10,10 +9,10 @@ import type { PConnFieldProps } from './PConnProps';
 import handleEvent from "./event-utils";
 import { suggestionsHandler } from './suggestions-handler';
 
-import { formatExists, textFormatter } from './textformat-utils.jsx';
-import { flattenParameters } from './picklist-utils.js';
-import { isSelfReferencedProperty, getDescriptorsFieldName } from './repeat-utils.js';
-import { getFieldNameFromEmbeddedFieldName } from './embed-utils.js';
+import { formatExists, textFormatter } from './textformat-utils';
+import { flattenParameters } from './picklist-utils';
+import { isSelfReferencedProperty, getDescriptorsFieldName } from './repeat-utils';
+import { getFieldNameFromEmbeddedFieldName } from './embed-utils';
 
 import { usePaginate, useDeepMemo, useIsMount, updatePropertiesForNewRecord } from './utils';
 
@@ -378,17 +377,17 @@ const DisplayComponent = (props: PegaDxilMySearchboxPropsSubSet) => {
 
 // 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 PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
+function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
   const {
     getPConnect,
     value,
     placeholder,
     validatemessage,
     label,
-    hideLabel,
+    hideLabel = false,
     helperText,
     testId,
-    matchPosition,
+    matchPosition = 'contains',
     maxResultsDisplay,
     cacheLifeSpan,
     displayMode,
@@ -396,17 +395,17 @@ export function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
     createNewRecord,
     datasourceMetadata,
     deferDatasource,
-    additionalProps,
+    additionalProps = {},
     referenceType,
     primaryField,
-    isTableFormatter,
+    isTableFormatter = false,
     descriptors,
     dataRelationshipContext,
-    hasSuggestions,
+    hasSuggestions = false,
     contextClass
   } = props;
   const { formatter } = props;
-  let { listType, datasource, parameters, columns } = props;
+  let { listType, datasource = [], parameters = {}, columns = [] } = props;
 
   // enable searhing based on the key
   const { isSearchableOnKey } = props;
@@ -488,7 +487,7 @@ export function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
   }
 
   // BUG-547602: Temporary type coercion for 8.5 until DXAPIs are enhanced to pass original pxViewMetadata JSON, respecting boolean primitives
-  let { readOnly, required, disabled } = props;
+  let { readOnly = false, required = false, disabled = false } = props;
   [readOnly, required, disabled] = [readOnly, required, disabled].map(
     prop => prop === true || (typeof prop === 'string' && prop === 'true')
   );
@@ -646,12 +645,14 @@ export function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
       PCore.getDataApi()
         .init(dataConfig, contextName)
         .then(dataObj => {
+          // @ts-ignore
           setDataApiObj(dataObj);
           // To avoid calling doSearch if someone types/pastes value before the API call is made
           if (!filterValue)
             doSearch(
               '',
               getDisplayFieldsMetaData(dataConfig.columns),
+              // @ts-ignore
               dataObj,
               setItems as any,
               setLoading,
@@ -678,6 +679,7 @@ export function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
       PCore.getDataApi()
         .init(dataConfig, contextName)
         .then(dataObj => {
+          // @ts-ignore
           setDataApiObj(dataObj);
           // To avoid calling doSearch if someone types/pastes value before the API call is made
           if (!filterValue) {
@@ -693,6 +695,7 @@ export function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
               doSearch(
                 '',
                 getDisplayFieldsMetaData(dataConfig.columns),
+                // @ts-ignore
                 dataObj,
                 setItems as any,
                 setLoading,
@@ -712,6 +715,7 @@ export function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
               doSearch(
                 '',
                 getDisplayFieldsMetaData(dataConfig.columns),
+                // @ts-ignore
                 dataObj,
                 setItems as any,
                 setLoading,
@@ -771,10 +775,14 @@ export function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
       PCore.getDataApi()
         .init(dataConfig, contextName)
         .then(dataObj => {
+          // @ts-ignore
           setDataApiObj(dataObj);
+          // @ts-ignore
           buildColumnForDisplayValue(dataObj);
           // SET matchPosition to EQUALS to return exact matching record
+          // @ts-ignore
           dataObj.matchPosition = 'equals';
+          // @ts-ignore
           dataObj
             .fetchData(value)
             .then((displayResponse: { data: Array<never> }) => {
@@ -823,11 +831,13 @@ export function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
               setSelected(searchedItem[0]);
               setActualValue(value);
               // RESET matchPosition
+              // @ts-ignore
               dataObj.matchPosition = dataConfig.matchPosition;
             })
             .catch(() => {
               setActualValue(value);
               // RESET matchPosition
+              // @ts-ignore
               dataObj.matchPosition = dataConfig.matchPosition;
             });
         });
@@ -1172,65 +1182,5 @@ export function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
   );
 }
 
-export default memo(PegaDxilMySearchbox);
 
-PegaDxilMySearchbox.defaultProps = {
-  value: '',
-  matchPosition: 'contains',
-  maxResultsDisplay: '',
-  placeholder: '',
-  hideLabel: false,
-  validatemessage: '',
-  helperText: '',
-  disabled: false,
-  readOnly: false,
-  required: false,
-  testId: '',
-  datasource: [],
-  listType: '',
-  parameters: {},
-  columns: [],
-  cacheLifeSpan: '',
-  displayMode: null,
-  onRecordChange: null,
-  datasourceMetadata: null,
-  deferDatasource: false,
-  additionalProps: {},
-  formatter: '',
-  referenceType: null,
-  isTableFormatter: false,
-  primaryField: '',
-  hasSuggestions: false
-};
-
-PegaDxilMySearchbox.propTypes = {
-  value: PropTypes.string,
-  maxResultsDisplay: PropTypes.string,
-  matchPosition: PropTypes.string,
-  placeholder: PropTypes.string,
-  label: PropTypes.string.isRequired,
-  hideLabel: PropTypes.bool,
-  getPConnect: PropTypes.func.isRequired,
-  validatemessage: PropTypes.string,
-  helperText: PropTypes.string,
-  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  testId: PropTypes.string,
-  datasource: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.any), PropTypes.string]),
-  listType: PropTypes.string,
-  parameters: PropTypes.objectOf(PropTypes.any),
-  columns: PropTypes.arrayOf(PropTypes.object),
-  cacheLifeSpan: PropTypes.string,
-  displayMode: PropTypes.string,
-  createNewRecord: PropTypes.func,
-  onRecordChange: PropTypes.func,
-  datasourceMetadata: PropTypes.objectOf(PropTypes.any),
-  deferDatasource: PropTypes.bool,
-  additionalProps: PropTypes.objectOf(PropTypes.any),
-  formatter: PropTypes.string,
-  referenceType: PropTypes.string,
-  primaryField: PropTypes.string,
-  isTableFormatter: PropTypes.bool,
-  hasSuggestions: PropTypes.bool
-};
+export default withConfiguration(PegaDxilMySearchbox);

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MySearchbox/mock.ts

@@ -20,7 +20,14 @@ export const configProps = {
   ],
   helperText: 'Picklist Helper Text',
   testId: 'picklist-12345678',
-  hasSuggestions: false
+  hasSuggestions: false,
+  displayMode: '',
+  hideLabel: false,
+  readOnly: false,
+  required: false,
+  disabled: false,
+  status: '',
+  validatemessage: ''
 };
 
 export const stateProps = {

package/{src/tasks/create/templates/Constellation/field/Picklist-Autocomplete/picklist-utils.js.mustache → tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MySearchbox/picklist-utils.ts}

@@ -1,4 +1,5 @@
 // import { object } from 'prop-types';
+// @ts-nocheck
 
 export const flattenParameters = (parameters = {}) => {
   const flatParams = {};