@pega/dx-component-builder-sdk 24.2.14 → 24.2.15

package/tests/assets/sdk-r/components/create/override-sdk/widget/Attachment/Attachment.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable react/jsx-boolean-value */
 /* eslint-disable react/no-array-index-key */
 /* eslint-disable no-nested-ternary */
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { CircularProgress, IconButton, Menu, MenuItem, Button } from '@mui/material';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
-import download from 'downloadjs';
 
-import { buildFilePropsFromResponse, getIconFromFileType, validateMaxSize } from '@pega/react-sdk-components/lib/components/helpers/attachmentHelpers';
+import { getIconFromFileType, isFileUploadedToServer, useFileDownload, validateMaxSize } from '@pega/react-sdk-components/lib/components/helpers/attachmentHelpers';
+
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
@@ -19,7 +19,9 @@ interface AttachmentProps extends Omit<PConnFieldProps, 'value'> {
   extensions: string;
 }
 
-const getAttachmentKey = (name = '') => (name ? `attachmentsList.${name}` : 'attachmentsList');
+const getAttachmentKey = (name, embeddedReference) => {
+  return `attachmentsList${embeddedReference}.${name}`;
+};
 
 const getCurrentAttachmentsList = (key, context) => {
   return PCore.getStoreValue(`.${key}`, 'context_data', context) || [];
@@ -33,95 +35,101 @@ const updateAttachmentState = (pConn, key, attachments) => {
 };
 
 export default function Attachment(props: AttachmentProps) {
-  const { value, getPConnect, label, validatemessage, allowMultiple, extensions, displayMode } = props;
+  const { value, getPConnect, label, validatemessage, allowMultiple, extensions, displayMode, helperText } = props;
   /* this is a temporary fix because required is supposed to be passed as a boolean and NOT as a string */
   let { required, disabled } = props;
   [required, disabled] = [required, disabled].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));
   const pConn = getPConnect();
+
+  const actionSequencer = useMemo(() => PCore.getActionsSequencer(), []);
   const caseID = PCore.getStoreValue('.pyID', 'caseInfo.content', pConn.getContextName());
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localeCategory = 'CosmosFields';
   const uploadMultipleFilesLabel = localizedVal('file_upload_text_multiple', localeCategory);
   const uploadSingleFileLabel = localizedVal('file_upload_text_one', localeCategory);
-  let categoryName = '';
-  if (value && value.pyCategoryName) {
-    categoryName = value.pyCategoryName;
-  }
   const deleteIcon = Utils.getImageSrc('trash', Utils.getSDKStaticConentUrl());
   const srcImg = Utils.getImageSrc('document-doc', Utils.getSDKStaticConentUrl());
   let valueRef = (pConn.getStateProps() as any).value;
   valueRef = valueRef.indexOf('.') === 0 ? valueRef.substring(1) : valueRef;
-  const [anchorEl, setAnchorEl] = useState(null);
-  const open = Boolean(anchorEl);
-  const [files, setFiles] = useState<any[]>(() =>
-    value?.pxResults && +value.pyCount > 0 ? value.pxResults.map(f => buildFilePropsFromResponse(f)) : []
-  );
+  const [menuAnchorEl, setMenuAnchorEl] = useState(null);
+  const [menuOpenIndex, setMenuOpenIndex] = useState<number | null>(null);
+
+  const rawValue = pConn.getComponentConfig().value;
+  const isAttachmentAnnotationPresent = typeof rawValue === 'object' ? false : rawValue?.includes('@ATTACHMENT');
+  const { hasUploadedFiles, attachments, categoryName } = isAttachmentAnnotationPresent
+    ? value
+    : PCore.getAttachmentUtils().prepareAttachmentData(value);
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [files, setFiles] = useState<any[]>(attachments);
   const [filesWithError, setFilesWithError] = useState<any[]>([]);
   const [toggleUploadBegin, setToggleUploadBegin] = useState(false);
 
+  const context = pConn.getContextName();
+  const onFileDownload = useFileDownload(context);
+
+  let embeddedProperty = pConn
+    .getPageReference()
+    .replace(PCore.getConstants().CASE_INFO.CASE_INFO_CONTENT, '')
+    .replace(PCore.getConstants().DATA_INFO.DATA_INFO_CONTENT, '');
+
+  if (valueRef?.indexOf('.') > 0) {
+    embeddedProperty = valueRef.substring(0, valueRef.indexOf('.') + 1);
+  }
+
   const resetAttachmentStoredState = () => {
-    PCore.getStateUtils().updateState(pConn.getContextName(), getAttachmentKey(valueRef), undefined, {
+    PCore.getStateUtils().updateState(pConn.getContextName(), getAttachmentKey(valueRef, embeddedProperty), undefined, {
       pageReference: 'context_data',
       isArrayDeepMerge: false
     });
   };
 
-  const fileDownload = (data, fileName, ext) => {
-    const fileData = ext ? `${fileName}.${ext}` : fileName;
-    download(atob(data), fileData);
-  };
-
-  const downloadFile = (fileObj: any) => {
-    setAnchorEl(null);
-    PCore.getAttachmentUtils()
-      // @ts-ignore - 3rd parameter "responseEncoding" should be optional
-      .downloadAttachment(fileObj.pzInsKey, pConn.getContextName())
-      .then((content: any) => {
-        const extension = fileObj.pyAttachName.split('.').pop();
-        fileDownload(content.data, fileObj.pyFileName, extension);
-      })
-      .catch(() => {});
-  };
-
   const deleteFile = useCallback(
     file => {
-      setAnchorEl(null);
+      setMenuAnchorEl(null);
+      setMenuOpenIndex(null);
+
+      // reset the file input so that it will allow re-uploading the same file after deletion
+      if (fileInputRef.current) {
+        fileInputRef.current.value = ''; // Reset the input
+      }
+
       let attachmentsList: any[] = [];
-      let currentAttachmentList = getCurrentAttachmentsList(getAttachmentKey(valueRef), pConn.getContextName());
+      let currentAttachmentList = getCurrentAttachmentsList(getAttachmentKey(valueRef, embeddedProperty), pConn.getContextName());
 
       // If file to be deleted is the one added in previous stage i.e. for which a file instance is created in server
       // no need to filter currentAttachmentList as we will get another entry of file in redux with delete & label
-      // eslint-disable-next-line no-unsafe-optional-chaining
-      if (value && value?.pxResults && +value?.pyCount > 0 && file.responseProps && file?.responseProps?.pzInsKey !== 'temp') {
-        const updatedAttachments = files.map(f => {
-          if (f.responseProps && f.responseProps.pzInsKey === file.responseProps.pzInsKey) {
+      if (hasUploadedFiles && isFileUploadedToServer(file)) {
+        // Use currentAttachmentList (fresh from store) instead of files (stale closure)
+        // to preserve delete markers set by previous deletions in the same session
+        const updatedAttachments = currentAttachmentList.map(f => {
+          if (f.responseProps && f.responseProps.ID === file.responseProps.ID) {
             return { ...f, delete: true, label: valueRef };
           }
           return f;
         });
 
         // updating the redux store to help form-handler in passing the data to delete the file from server
-        updateAttachmentState(pConn, getAttachmentKey(valueRef), [...updatedAttachments]);
+        updateAttachmentState(pConn, getAttachmentKey(valueRef, embeddedProperty), [...updatedAttachments]);
         setFiles(current => {
           const newlyAddedFiles = current.filter(f => !!f.ID);
-          const filesPostDelete = current.filter(
-            f => f.responseProps?.pzInsKey !== 'temp' && f.responseProps?.pzInsKey !== file.responseProps?.pzInsKey
-          );
+          const filesPostDelete = current.filter(f => isFileUploadedToServer(f) && f.responseProps?.ID !== file.responseProps?.ID);
           attachmentsList = [...filesPostDelete, ...newlyAddedFiles];
           return attachmentsList;
         });
       } //  if the file being deleted is the added in this stage  i.e. whose data is not yet created in server
       else {
         // filter newly added files in this stage, later the updated current stage files will be added to redux once files state is updated in below setFiles()
-        currentAttachmentList = currentAttachmentList.filter(f => f.label !== valueRef);
-        setFiles(current => {
-          attachmentsList = current.filter(f => f.ID !== file.ID);
-          return attachmentsList;
-        });
-        updateAttachmentState(pConn, getAttachmentKey(valueRef), [...currentAttachmentList, ...attachmentsList]);
+        currentAttachmentList = currentAttachmentList.filter(f => !f.props.error && (f.delete || f.label !== valueRef));
+        setFiles(current => current.filter(f => f.ID !== file.ID));
+        updateAttachmentState(pConn, getAttachmentKey(valueRef, embeddedProperty), [...currentAttachmentList, ...attachmentsList]);
         if (file.inProgress) {
           // @ts-ignore - 3rd parameter "responseEncoding" should be optional
           PCore.getAttachmentUtils().cancelRequest(file.ID, pConn.getContextName());
+          actionSequencer.deRegisterBlockingAction(pConn.getContextName()).catch(error => {
+            // eslint-disable-next-line no-console
+            console.log(error);
+          });
         }
       }
 
@@ -130,7 +138,7 @@ export default function Attachment(props: AttachmentProps) {
         return prevFilesWithError.filter(f => f.ID !== file.ID);
       });
     },
-    [pConn, value, valueRef, filesWithError]
+    [valueRef, pConn, hasUploadedFiles, filesWithError, hasUploadedFiles, actionSequencer]
   );
 
   const onUploadProgress = () => {};
@@ -152,14 +160,11 @@ export default function Attachment(props: AttachmentProps) {
               f.props.name = pConn.getLocalizedValue('Unable to upload file', '', '');
               f.inProgress = false;
               const fieldName = (pConn.getStateProps() as any).value;
-              const context = pConn.getContextName();
               // set errors to property to block submit even on errors in file upload
               PCore.getMessageManager().addMessages({
-                // @ts-ignore
                 messages: [
                   {
                     type: 'error',
-                    // @ts-ignore - Type '{ type: string; message: string; }' is not assignable to type 'MessagesConfigObject'.
                     message: pConn.getLocalizedValue('Error with one or more files', '', '')
                   }
                 ],
@@ -191,8 +196,6 @@ export default function Attachment(props: AttachmentProps) {
 
   const clearFieldErrorMessages = () => {
     const fieldName = (pConn.getStateProps() as any).value;
-    const context = pConn.getContextName();
-    // @ts-ignore
     PCore.getMessageManager().clearMessages({
       type: PCore.getConstants().MESSAGES.MESSAGES_TYPE_ERROR,
       property: fieldName,
@@ -229,13 +232,10 @@ export default function Attachment(props: AttachmentProps) {
         }
         if (f.props.error) {
           const fieldName = (pConn.getStateProps() as any).value;
-          const context = pConn.getContextName();
           PCore.getMessageManager().addMessages({
-            // @ts-ignore
             messages: [
               {
                 type: 'error',
-                // @ts-ignore - Type '{ type: string; message: string; }' is not assignable to type 'MessagesConfigObject'.
                 message: pConn.getLocalizedValue('Error with one or more files', '', '')
               }
             ],
@@ -260,7 +260,7 @@ export default function Attachment(props: AttachmentProps) {
       .filter(e => {
         const isFileUploaded = e.props && e.props.progress === 100;
         const fileHasError = e.props && e.props.error;
-        const isFileUploadedinLastStep = e.responseProps && e.responseProps.pzInsKey;
+        const isFileUploadedinLastStep = e.responseProps && (e.responseProps.pzInsKey || e.responseProps.ID);
         return !isFileUploaded && !fileHasError && !isFileUploadedinLastStep;
       })
       .map(f =>
@@ -291,7 +291,7 @@ export default function Attachment(props: AttachmentProps) {
                 f.label = valueRef;
                 f.category = categoryName;
                 f.responseProps = {
-                  pzInsKey: 'temp',
+                  ID: 'temp',
                   pyAttachName: f.props.name
                 };
               }
@@ -320,12 +320,12 @@ export default function Attachment(props: AttachmentProps) {
 
   useEffect(() => {
     if (files.length > 0 && displayMode !== 'DISPLAY_ONLY') {
-      const currentAttachmentList = getCurrentAttachmentsList(getAttachmentKey(valueRef), pConn.getContextName());
+      const currentAttachmentList = getCurrentAttachmentsList(getAttachmentKey(valueRef, embeddedProperty), pConn.getContextName());
       // block duplicate files to redux store when added 1 after another to prevent multiple duplicates being added to the case on submit
       const tempFiles = files.filter(f => currentAttachmentList.findIndex(fr => fr.ID === f.ID) === -1 && !f.inProgress && f.responseProps);
 
       const updatedAttList = [...currentAttachmentList, ...tempFiles];
-      updateAttachmentState(pConn, getAttachmentKey(valueRef), updatedAttList);
+      updateAttachmentState(pConn, getAttachmentKey(valueRef, embeddedProperty), updatedAttList);
     }
   }, [files]);
 
@@ -336,7 +336,7 @@ export default function Attachment(props: AttachmentProps) {
   }, [filesWithError]);
 
   useEffect(() => {
-    let tempUploadedFiles = getCurrentAttachmentsList(getAttachmentKey(valueRef), pConn.getContextName());
+    let tempUploadedFiles = getCurrentAttachmentsList(getAttachmentKey(valueRef, embeddedProperty), pConn.getContextName());
     tempUploadedFiles = tempUploadedFiles.filter(f => f.label === valueRef);
     setFiles(current => {
       return [
@@ -354,18 +354,25 @@ export default function Attachment(props: AttachmentProps) {
         ...tempUploadedFiles
       ];
     });
-    PCore.getPubSubUtils().subscribe(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION, resetAttachmentStoredState, caseID);
+    if (displayMode !== 'DISPLAY_ONLY') {
+      PCore.getPubSubUtils().subscribe(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION, resetAttachmentStoredState, caseID);
+    }
     return () => {
-      PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION, caseID);
+      if (displayMode !== 'DISPLAY_ONLY') {
+        PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION, caseID);
+      }
+      resetAttachmentStoredState();
     };
   }, []);
 
-  const handleClick = event => {
-    setAnchorEl(event.currentTarget);
+  const handleClick = (event, index) => {
+    setMenuAnchorEl(event.currentTarget);
+    setMenuOpenIndex(index);
   };
 
   const handleClose = () => {
-    setAnchorEl(null);
+    setMenuAnchorEl(null);
+    setMenuOpenIndex(null);
   };
 
   const content = (
@@ -428,19 +435,30 @@ export default function Attachment(props: AttachmentProps) {
                   <div>
                     <IconButton
                       id='setting-button'
-                      aria-controls={open ? 'file-menu' : undefined}
-                      aria-expanded={open ? 'true' : undefined}
+                      aria-controls={menuOpenIndex === index ? 'file-menu' : undefined}
+                      aria-expanded={menuOpenIndex === index ? 'true' : undefined}
                       aria-haspopup='true'
-                      onClick={handleClick}
+                      onClick={event => handleClick(event, index)}
                       size='large'
                     >
                       <MoreVertIcon />
                     </IconButton>
-                    <Menu style={{ marginTop: '3rem' }} id='file-menu' anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
+                    <Menu
+                      id='file-menu'
+                      anchorEl={menuAnchorEl}
+                      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+                      transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+                      keepMounted
+                      open={menuOpenIndex === index}
+                      onClose={handleClose}
+                    >
                       <MenuItem
                         style={{ fontSize: '14px' }}
                         key='download'
-                        onClick={() => downloadFile(item.responseProps ? item.responseProps : {})}
+                        onClick={() => {
+                          handleClose();
+                          onFileDownload(item.responseProps ? item.responseProps : {});
+                        }}
                       >
                         Download
                       </MenuItem>
@@ -461,7 +479,7 @@ export default function Attachment(props: AttachmentProps) {
     <div className='file-upload-container'>
       <span className={`label ${required ? 'file-label' : ''}`}>{label}</span>
       {((files.length === 0 && allowMultiple !== 'true') || allowMultiple === 'true') && <section>{content}</section>}
-      {validatemessage !== '' ? <span className='file-error'>{validatemessage}</span> : ''}
+      {validatemessage !== '' ? <span className='file-error'>{validatemessage}</span> : <span style={{ fontSize: '14px' }}>{helperText}</span>}
       {files && files.length > 0 && <section>{fileDisplay}</section>}
     </div>
   );

package/tests/assets/sdk-r/components/create/override-sdk/widget/FileUtility/FileUtility.tsx

@@ -512,7 +512,7 @@ export default function FileUtility(props: FileUtilityProps) {
           >
             <MoreVertIcon />
           </IconButton>
-          <Menu style={{ marginTop: '3rem' }} id='simple-menu' anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
+          <Menu id='simple-menu' anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
             <MenuItem style={{ fontSize: '14px' }} onClick={onAddFilesClick}>
               {thePConn.getLocalizedValue('Add files', '', '')}
             </MenuItem>{' '}

package/tests/assets/sdk-r/components/create/override-sdk/widget/QuickCreate/QuickCreate.tsx

@@ -35,7 +35,6 @@ export default function QuickCreate(props: QuickCreateProps) {
     const defaultCases: any = [];
     const envInfo = PCore.getEnvironmentInfo();
     if (envInfo?.environmentInfoObject?.pyCaseTypeList) {
-      // @ts-ignore - Property 'forEach' does not exist on type 'string'
       envInfo.environmentInfoObject.pyCaseTypeList.forEach(casetype => {
         if (casetype.pyWorkTypeName && casetype.pyWorkTypeImplementationClassName) {
           defaultCases.push({

package/tests/assets/sdk-r/components/create/override-sdk/widget/SummaryItem/SummaryItem.tsx

@@ -73,7 +73,7 @@ export default function SummaryItem(props: SummaryItemProps) {
             >
               <MoreVertIcon />
             </IconButton>
-            <Menu style={{ marginTop: '3rem' }} id='file-menu' anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
+            <Menu id='file-menu' anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
               {item.actions &&
                 item.actions.map(option => (
                   <MenuItem style={{ fontSize: '14px' }} key={option.id || option.text} onClick={option.onClick}>

package/tests/assets/sdk-r/components/create/override-sdk/widget/ToDo/ToDo.tsx

@@ -129,7 +129,7 @@ export default function ToDo(props: ToDoProps) {
   const CONSTS = PCore.getConstants();
 
   const bLogging = true;
-  const currentUser = PCore.getEnvironmentInfo().getOperatorName();
+  const currentUser = PCore.getEnvironmentInfo().getOperatorName() ?? '';
   const currentUserInitials = Utils.getInitials(currentUser);
   const assignmentsSource = datasource?.source || myWorkList?.source;
 

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

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { configProps, fieldMetadata, stateProps } from './mock';

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

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 import { configProps, stateProps } from './mock';
 import PegaDxilMyDate from './index';
@@ -14,21 +13,6 @@ const meta: Meta<typeof PegaDxilMyDate> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyDate>;
 
-if (!window.PCore) {
-  window.PCore = {};
-}
-
-window.PCore.getEnvironmentInfo = () => {
-  return {
-    getTimeZone: () => {
-      return '';
-    },
-    getLocale: () => {
-      return 'en-GB';
-    }
-  };
-};
-
 export const BasePegaDxilMyDate: Story = args => {
   const props = {
     value: configProps.value,

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

@@ -1,5 +1,4 @@
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 import { configProps, stateProps } from './mock';
 import PegaDxilMyDateTime from './index';
@@ -13,22 +12,6 @@ const meta: Meta<typeof PegaDxilMyDateTime> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyDateTime>;
 
-
-if (!window.PCore) {
-  window.PCore = {};
-}
-
-window.PCore.getEnvironmentInfo = () => {
-  return {
-    getTimeZone: () => {
-      return '';
-    },
-    getLocale: () => {
-      return 'en-GB';
-    }
-  };
-};
-
 export const BasePegaDxilMyDateTime: Story = args => {
   const props = {
     value: configProps.value,

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

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { configProps, fieldMetadata, stateProps } from './mock';

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

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import PegaDxilMyEmail from './index';

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

@@ -12,6 +12,7 @@ export const configProps = {
   readOnly: false,
   required: false,
   disabled: false,
+  variant: '',
   status: '',
   validatemessage: ''
 };

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

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import PegaDxilMyIconButtonUrl from './index';
@@ -15,10 +14,6 @@ const meta: Meta<typeof PegaDxilMyIconButtonUrl> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyIconButtonUrl>;
 
-if (!window.PCore) {
-  window.PCore = {};
-}
-
 const statelistData = {
   data: [
     {
@@ -36,23 +31,17 @@ const statelistData = {
   ]
 };
 
-export const BasePegaDxilMyIconButtonUrl: Story = args => {
-
-  window.PCore.getDataPageUtils = () => {
-    return {
-      getData: () => {
-        return new Promise(resolve => {
-          resolve(statelistData);
-        });
-      },
-      getDataAsync: () => {
-        return new Promise(resolve => {
-          resolve(statelistData);
-        });
-      }
-    };
+window.PCore.getDataPageUtils = (): any => {
+  return {
+    getDataAsync: () => {
+      return new Promise(resolve => {
+        resolve(statelistData);
+      });
+    }
   };
+};
 
+export const BasePegaDxilMyIconButtonUrl: Story = args => {
   const props = {
     countryCode: configProps.countryCode,
     getPConnect: () => {

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

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import PegaDxilMyParagraph from './index';

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

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { configProps, stateProps, fieldMetadata } from './mock';

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

@@ -4,6 +4,7 @@ export const configProps = {
   value: '',
   label: 'Percentage Sample',
   showGroupSeparators: true,
+  placeholder: '',
   helperText: 'Percentage Helper Text',
   testId: 'percentage-12345678',
   hasSuggestions: false,

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

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import PegaDxilMyPhone from './index';
@@ -47,7 +46,7 @@ export const BasePegaDxilMyPhone: Story = args => {
 };
 
 BasePegaDxilMyPhone.args = {
-  datasource: configProps.datasource,
+  datasource: configProps.datasource as any,
   label: configProps.label,
   helperText: configProps.helperText,
   placeholder: configProps.placeholder,

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

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 

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

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 

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

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 

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

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 

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

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import PegaDxilMyTextInput from './index';

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

@@ -1,5 +1,4 @@
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 import { configProps, stateProps } from './mock';
 import PegaDxilMyTimeOfDay from './index';

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

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import PegaDxilMyUrl from './index';

package/tests/assets/sdk-r/components/createAll/custom-constellation/template/Pega_DXIL_MyDetails/demo.stories.tsx

@@ -8,6 +8,16 @@ import { pyReviewRaw, pyReviewResolved, regionChildrenResolved, operatorDetails,
 import StatusWorkRenderer from './StatusWork';
 import Operator from './Operator';
 
+window.PCore.getUserApi = (): any => {
+  return {
+    getOperatorDetails: () => {
+      return new Promise(resolve => {
+        resolve(operatorDetails);
+      });
+    }
+  };
+};
+
 const meta: Meta<typeof PegaDxilMyDetails> = {
   title: 'PegaDxilMyDetails',
   component: PegaDxilMyDetails,