@pega/custom-dx-components 0.23.20 → 0.23.21

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPage/styles.js

@@ -1,4 +1,4 @@
-/* eslint-disable import/no-relative-packages */
+
 // utilizing theming, comment out, if want individual style
 import styled from 'styled-components';
 import { Configuration } from '@pega/cosmos-react-core';

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPage/utils.js

@@ -1,5 +1,4 @@
-/* eslint-disable import/no-relative-packages */
-/* eslint-disable no-undef */
+
 import { createUID } from '@pega/cosmos-react-core';
 
 // import { LazyMap as LazyComponentMap } from '../../components_map';
@@ -214,9 +213,7 @@ export function getInstructions(pConnect, instructions = 'casestep') {
 
   // If the annotation wasn't processed correctly, don't return any instruction text
   if (instructions?.startsWith('@PARAGRAPH')) {
-    /* eslint-disable no-console */
     console.error('@PARAGRAPH annotation was not processed. Hiding custom instructions.');
-    /* eslint-enable no-console */
     return undefined;
   }
 

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPageCaseWidget/Avatar.jsx

@@ -1,5 +1,3 @@
-/* eslint-disable import/no-relative-packages */
-/* eslint-disable no-undef */
 /* eslint-disable react-hooks/rules-of-hooks */
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
@@ -32,7 +30,7 @@ function Avatar(props) {
         .then((blob) => window.URL.createObjectURL(blob))
         .then((imagePath) => setImageBlobUrl(imagePath));
     }
-  }, []);
+  }, [metaObj]);
 
   if (showStatus) {
     const currentState = PCore.getMessagingServiceManager().getUserPresence().getUserState(userIdentifier);
@@ -50,7 +48,7 @@ function Avatar(props) {
       return function cleanup() {
         PCore.getMessagingServiceManager().getUserPresence().unsubscribe(userIdentifier, subId);
       };
-    }, []);
+    }, [userIdentifier, handleUserStateChange]);
     return <CosmosAvatar name={userName} imageSrc={imageBlobUrl} status={userState} />;
   }
 

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPageCaseWidget/Operator.jsx

@@ -1,5 +1,4 @@
-/* eslint-disable import/no-relative-packages */
-/* eslint-disable no-undef */
+/* eslint-disable react/jsx-fragments */
 import { useState, useEffect, Fragment } from 'react';
 import {
   Link,
@@ -175,7 +174,7 @@ const Operator = (props) => {
           data-test-id={testId}
           style={label !== null ? { width: 'max-content', height: theme.components.input.height } : undefined}
         >
-          <Avatar metaObj={metaObj}></Avatar>
+          <Avatar metaObj={metaObj} />
         </Button>
       ) : (
         <Button

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPageCaseWidget/demo.stories.jsx

@@ -1,11 +1,10 @@
-/* eslint-disable import/no-relative-packages */
 /* eslint-disable storybook/prefer-pascal-case */
 /* eslint-disable react/jsx-no-useless-fragment */
 import { withKnobs } from '@storybook/addon-knobs';
 
 import PegaDxilMyPageCaseWidget from './index.jsx';
 
-import { configProps, operatorDetails } from './mock.stories';
+import { configProps, operatorDetails } from './mock';
 
 export default {
   title: 'PegaDxilMyPageCaseWidget',
@@ -35,8 +34,7 @@ window.PCore.getUserApi = () => {
   };
 };
 
-export const basePegaDxilMyPageCaseWidget = () => {
-
+export const BasePegaDxilMyPageCaseWidget = () => {
   const props = {
     label: configProps.label,
     createLabel: configProps.createLabel,
@@ -51,19 +49,31 @@ export const basePegaDxilMyPageCaseWidget = () => {
       return {
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {/* nothing */},
-            triggerFieldChange: () => {/* nothing */}
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        setInheritedProps: () => {/* nothing */},
-        resolveConfigProps: () => {/* nothing */}
+        ignoreSuggestion: () => {
+          /* nothing */
+        },
+        acceptSuggestion: () => {
+          /* nothing */
+        },
+        setInheritedProps: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
+        }
       };
     }
-};
+  };
 
-return (
+  return (
     <>
       <PegaDxilMyPageCaseWidget {...props} />
     </>

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPageCaseWidget/index.jsx

@@ -1,5 +1,6 @@
-/* eslint-disable import/no-relative-packages */
+
 /* eslint-disable no-nested-ternary */
+/* eslint-disable react/jsx-fragments */
 import { Fragment } from 'react';
 import { DateTimeDisplay, Card, CardHeader, CardContent, Flex } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPageCaseWidget/styles.js

@@ -1,4 +1,4 @@
-/* eslint-disable import/no-relative-packages */
+
 // utilizing theming, comment out, if want individual style
 import styled from 'styled-components';
 import { Configuration } from '@pega/cosmos-react-core';

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPageWidget/demo.stories.jsx

@@ -1,12 +1,10 @@
-/* eslint-disable import/no-relative-packages */
 /* eslint-disable storybook/prefer-pascal-case */
 /* eslint-disable react/jsx-no-useless-fragment */
 import { withKnobs } from '@storybook/addon-knobs';
 
 import PegaDxilMyPageWidget from './index.jsx';
 
-
-import configProps from './mock.stories';
+import configProps from './mock';
 
 export default {
   title: 'PegaDxilMyPageWidget',
@@ -14,8 +12,7 @@ export default {
   component: PegaDxilMyPageWidget
 };
 
-export const basePegaDxilMyPageWidget = () => {
-
+export const BasePegaDxilMyPageWidget = () => {
   const props = {
     label: configProps.label,
     header: configProps.header,
@@ -23,9 +20,9 @@ export const basePegaDxilMyPageWidget = () => {
     image: configProps.image,
     datasource: configProps.datasource,
     whatsnewlink: configProps.whatsnewlink
-};
+  };
 
-return (
+  return (
     <>
       <PegaDxilMyPageWidget {...props} />
     </>

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPageWidget/index.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-relative-packages */
 import PropTypes from 'prop-types';
 import { AppAnnouncement as PegaAppAnnouncement } from '@pega/cosmos-react-work';
 

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPageWidget/styles.js

@@ -1,4 +1,4 @@
-/* eslint-disable import/no-relative-packages */
+
 // utilizing theming, comment out, if want individual style
 import styled from 'styled-components';
 import { Configuration } from '@pega/cosmos-react-core';

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyParagraph/demo.stories.jsx

@@ -1,11 +1,8 @@
-/* eslint-disable import/no-relative-packages */
-/* eslint-disable storybook/prefer-pascal-case */
 /* eslint-disable react/jsx-no-useless-fragment */
 import { withKnobs } from '@storybook/addon-knobs';
 
 import PegaDxilMyParagraph from './index.jsx';
-
-import { stateProps, configProps, fieldMetadata } from './mock.stories';
+import { stateProps, configProps, fieldMetadata } from './mock';
 
 export default {
   title: 'PegaDxilMyParagraph',
@@ -13,8 +10,7 @@ export default {
   component: PegaDxilMyParagraph
 };
 
-export const basePegaDxilMyParagraph = () => {
-
+export const BasePegaDxilMyParagraph = () => {
   const props = {
     value: configProps.value,
     placeholder: configProps.placeholder,
@@ -31,14 +27,26 @@ export const basePegaDxilMyParagraph = () => {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {/* nothing */},
-            triggerFieldChange: () => {/* nothing */}
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        setInheritedProps: () => {/* nothing */},
-        resolveConfigProps: () => {/* nothing */}
+        ignoreSuggestion: () => {
+          /* nothing */
+        },
+        acceptSuggestion: () => {
+          /* nothing */
+        },
+        setInheritedProps: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
+        }
       };
     }
   };

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyParagraph/index.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-relative-packages */
 import { useState, useEffect, useRef } from 'react';
 import { TextArea as CosmosTextArea, FieldValueList, ParagraphDisplay, Text, EmailDisplay, PhoneDisplay, URLDisplay } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';
@@ -100,7 +99,7 @@ const PegaDxilMyParagraph = props => {
     } else if (!hasSuggestions && status !== 'success') {
       setStatus(validatemessage !== '' ? 'error' : undefined);
     }
-  }, [validatemessage, hasSuggestions]);
+  }, [validatemessage, hasSuggestions, status]);
 
   if (displayMode === 'LABELS_LEFT' || displayMode === 'DISPLAY_ONLY') {
     let displayComp = <ParagraphDisplay value={value || undefined} />;

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyParagraph/styles.js

@@ -1,4 +1,4 @@
-/* eslint-disable import/no-relative-packages */
+
 // utilizing theming, comment out, if want individual style
 import styled from 'styled-components';
 import { Configuration } from '@pega/cosmos-react-core';

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyParagraph/suggestions-handler.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 export const suggestionsHandler = (accepted, pConn, setStatus) => {
   if (accepted) {
     pConn.acceptSuggestion();

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPercentage/demo.stories.jsx

@@ -1,10 +1,8 @@
-/* eslint-disable import/no-relative-packages */
 /* eslint-disable storybook/prefer-pascal-case */
 /* eslint-disable react/jsx-no-useless-fragment */
 import { withKnobs } from '@storybook/addon-knobs';
 
-import { configProps, stateProps, fieldMetadata } from './mock.stories.js';
-
+import { configProps, stateProps, fieldMetadata } from './mock.js';
 import PegaDxilMyPercentage from './index.jsx';
 
 export default {
@@ -13,8 +11,7 @@ export default {
   component: PegaDxilMyPercentage
 };
 
-export const basePegaDxilMyPercentage = () => {
-
+export const BasePegaDxilMyPercentage = () => {
   const props = {
     value: configProps.value,
     placeholder: configProps.placeholder,
@@ -32,14 +29,26 @@ export const basePegaDxilMyPercentage = () => {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {/* nothing */},
-            triggerFieldChange: () => {/* nothing */}
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        setInheritedProps: () => {/* nothing */},
-        resolveConfigProps: () => {/* nothing */}
+        ignoreSuggestion: () => {
+          /* nothing */
+        },
+        acceptSuggestion: () => {
+          /* nothing */
+        },
+        setInheritedProps: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
+        }
       };
     }
   };

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPercentage/index.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-relative-packages */
 import { useState, useEffect, useRef } from 'react';
 import {
   NumberInput,
@@ -62,7 +61,7 @@ const PegaDxilMyPercentage = props => {
     } else if (!hasSuggestions && status !== 'success') {
       setStatus(validatemessage !== '' ? 'error' : undefined);
     }
-  }, [validatemessage, hasSuggestions]);
+  }, [validatemessage, hasSuggestions, status]);
 
   let numberOfDecimals = parseInt(decimalPrecision, 10);
   if (Number.isNaN(numberOfDecimals)) {

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPercentage/styles.js

@@ -1,4 +1,4 @@
-/* eslint-disable import/no-relative-packages */
+
 // utilizing theming, comment out, if want individual style
 import styled from 'styled-components';
 import { Configuration } from '@pega/cosmos-react-core';

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPercentage/suggestions-handler.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 export const suggestionsHandler = (accepted, pConn, setStatus) => {
   if (accepted) {
     pConn.acceptSuggestion();

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPhone/demo.stories.jsx

@@ -1,10 +1,9 @@
-/* eslint-disable import/no-relative-packages */
 /* eslint-disable storybook/prefer-pascal-case */
 /* eslint-disable react/jsx-no-useless-fragment */
 import { withKnobs } from '@storybook/addon-knobs';
 
 import PegaDxilMyPhone from './index.jsx';
-import { stateProps, configProps } from './mock.stories';
+import { stateProps, configProps } from './mock';
 
 export default {
   title: 'PegaDxilMyPhone',
@@ -12,8 +11,7 @@ export default {
   component: PegaDxilMyPhone
 };
 
-export const basePegaDxilMyPhone = () => {
-
+export const BasePegaDxilMyPhone = () => {
   const props = {
     value: configProps.value,
     placeholder: configProps.placeholder,
@@ -29,14 +27,26 @@ export const basePegaDxilMyPhone = () => {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {/* nothing */},
-            triggerFieldChange: () => {/* nothing */}
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        setInheritedProps: () => {/* nothing */},
-        resolveConfigProps: () => {/* nothing */}
+        ignoreSuggestion: () => {
+          /* nothing */
+        },
+        acceptSuggestion: () => {
+          /* nothing */
+        },
+        setInheritedProps: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
+        }
       };
     }
   };

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPhone/index.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-relative-packages */
 import { useState, useEffect, useRef } from 'react';
 import {
   PhoneInput as CosmosPhone,
@@ -116,7 +115,7 @@ const PegaDxilMyPhone = props => {
     } else if (!hasSuggestions && status !== 'success') {
       setStatus(validatemessage !== '' ? 'error' : undefined);
     }
-  }, [validatemessage, hasSuggestions]);
+  }, [validatemessage, hasSuggestions, status]);
 
   // funtion to exclude country code from phone number
   function getPhoneNumberAlone(phoneNumber) {

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPhone/styles.js

@@ -1,4 +1,4 @@
-/* eslint-disable import/no-relative-packages */
+
 // utilizing theming, comment out, if want individual style
 import styled from 'styled-components';
 import { Configuration } from '@pega/cosmos-react-core';

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPhone/suggestions-handler.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 export const suggestionsHandler = (accepted, pConn, setStatus) => {
   if (accepted) {
     pConn.acceptSuggestion();

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPicklist/demo.stories.jsx

@@ -1,11 +1,8 @@
-/* eslint-disable import/no-relative-packages */
-/* eslint-disable storybook/prefer-pascal-case */
 /* eslint-disable react/jsx-no-useless-fragment */
 import { useState } from 'react';
 import { withKnobs } from '@storybook/addon-knobs';
 
-import { configProps, rawMetadata, fieldMetadata, stateProps } from './mock.stories.js';
-
+import { configProps, rawMetadata, fieldMetadata, stateProps } from './mock.js';
 import PegaDxilMyPicklist from './index.jsx';
 
 export default {
@@ -14,8 +11,7 @@ export default {
   component: PegaDxilMyPicklist
 };
 
-export const basePegaDxilMyPicklist = () => {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
+export const BasePegaDxilMyPicklist = () => {
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -57,18 +53,30 @@ export const basePegaDxilMyPicklist = () => {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
             },
-            triggerFieldChange: () => {/* nothing */}
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
         getValidationApi: () => {
           return {
-            validate: () => {/* nothing */}
+            validate: () => {
+              /* nothing */
+            }
           };
         },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        setInheritedProps: () => {/* nothing */},
-        resolveConfigProps: () => {/* nothing */}
+        ignoreSuggestion: () => {
+          /* nothing */
+        },
+        acceptSuggestion: () => {
+          /* nothing */
+        },
+        setInheritedProps: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
+        }
       };
     }
   };

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPicklist/index.jsx

@@ -1,4 +1,4 @@
-/* eslint-disable import/no-relative-packages */
+/* eslint-disable react-hooks/exhaustive-deps */
 import { useState, useEffect, useRef } from 'react';
 import { Select, Option, FieldValueList, Text } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';
@@ -151,7 +151,7 @@ const PegaDxilMyPicklist = props => {
     } else if (!hasSuggestions && status !== 'success') {
       setStatus(validatemessage !== '' ? 'error' : undefined);
     }
-  }, [validatemessage, hasSuggestions]);
+  }, [validatemessage, hasSuggestions, status]);
 
   pushPlaceholderOption(placeholder, listSourceItems, items, pConnect);
 
@@ -206,7 +206,7 @@ const PegaDxilMyPicklist = props => {
     if (!isDisplayModeEnabled && ((!placeholder && !value) || (!isMount && value && !selectedLabel))) {
       setDefaultValue(items, pConnect, propName);
     }
-  }, [firstOptionKey, firstOptionValue, placeholder, selectedLabel, value, propName]);
+  }, [firstOptionKey, firstOptionValue, placeholder, selectedLabel, value, propName, isDisplayModeEnabled, isMount, pConnect]);
 
   if (displayMode === 'LABELS_LEFT' || displayMode === 'DISPLAY_ONLY') {
     let displayComp = selectedLabel;

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPicklist/mock.js

@@ -0,0 +1,69 @@
+/* eslint-disable storybook/default-exports */
+/* eslint-disable storybook/prefer-pascal-case */
+export const configProps = {
+  value: '',
+  label: 'Picklist Sample',
+  placeholder: 'Select...',
+  listType: 'associated',
+  datasource: [
+    {
+      key: 'Option 1',
+      value: 'Option 1'
+    },
+    {
+      key: 'Option 2',
+      value: 'Option 2'
+    },
+    {
+      key: 'Option 3',
+      value: 'Option 3'
+    }
+  ],
+  helperText: 'Picklist Helper Text',
+  testId: 'picklist-12345678',
+  hasSuggestions: false
+};
+
+export const stateProps = {
+  value: '.PicklistSample',
+  placeholder: 'Select...',
+  datasource: '.PicklistSample',
+  hasSuggestions: false
+};
+
+export const rawMetadata = {
+  type: 'Dropdown',
+  config: {
+    value: '@P .PicklistSample',
+    label: '@L Picklist Sample',
+    placeholder: '@L Select...',
+    listType: 'associated',
+    datasource: '@ASSOCIATED .PicklistSample',
+    helperText: '@L Picklist Helper Text',
+    testId: 'picklist-12345678'
+  }
+};
+
+export const fieldMetadata = {
+  classID: 'DIXL-MediaCo-Work-NewService',
+  type: 'Text',
+  displayAs: 'pxDropdown',
+  label: 'Picklist sample',
+  datasource: {
+    tableType: 'PromptList',
+    records: [
+      {
+        key: 'Option 1',
+        value: 'Option 1'
+      },
+      {
+        key: 'Option 2',
+        value: 'Option 2'
+      },
+      {
+        key: 'Option 3',
+        value: 'Option 3'
+      }
+    ]
+  }
+};

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPicklist/styles.js

@@ -1,4 +1,4 @@
-/* eslint-disable import/no-relative-packages */
+
 // utilizing theming, comment out, if want individual style
 import styled from 'styled-components';
 import { Configuration } from '@pega/cosmos-react-core';

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPicklist/suggestions-handler.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 export const suggestionsHandler = (accepted, pConn, setStatus) => {
   if (accepted) {
     pConn.acceptSuggestion();