@pega/custom-dx-components 0.23.20 → 0.23.21

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDate/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_MyDateTime/date-time.js

@@ -1,4 +1,4 @@
-/* eslint-disable import/no-relative-packages */
+
 import dayjs from "dayjs";
 import relativeTime from 'dayjs/plugin/relativeTime.js';
 import localizedFormat from 'dayjs/plugin/localizedFormat.js';

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDateTime/date-utils.js

@@ -1,5 +1,4 @@
-/* eslint-disable import/no-relative-packages */
-/* eslint-disable no-undef */
+
 import dayjs from "dayjs";
 import relativeTime from 'dayjs/plugin/relativeTime.js';
 import localizedFormat from 'dayjs/plugin/localizedFormat.js';

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDateTime/date.js

@@ -1,5 +1,4 @@
-/* eslint-disable import/no-relative-packages */
-/* eslint-disable no-undef */
+
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime.js';
 import localizedFormat from 'dayjs/plugin/localizedFormat.js';

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

@@ -1,8 +1,7 @@
-/* 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 } from './mock.stories';
+import { configProps, stateProps } from './mock';
 import PegaDxilMyDateTime from './index.jsx';
 
 export default {
@@ -23,19 +22,25 @@ window.PCore.getEnvironmentInfo = () => {
   };
 };
 
-export const basePegaDxilMyDateTime = () => {
+export const BasePegaDxilMyDateTime = () => {
   const props = {
     getPConnect: () => {
       return {
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {/* nothing */},
-            triggerFieldChange: () => {/* nothing */}
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
         getValidationApi: () => {
           return {
-            validate: () => {/* nothing */}
+            validate: () => {
+              /* nothing */
+            }
           };
         },
         getStateProps: () => {
@@ -44,9 +49,15 @@ export const basePegaDxilMyDateTime = () => {
         getConfigProps: () => {
           return configProps;
         },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        clearErrorMessages: () => {/* nothing */}
+        ignoreSuggestion: () => {
+          /* nothing */
+        },
+        acceptSuggestion: () => {
+          /* nothing */
+        },
+        clearErrorMessages: () => {
+          /* nothing */
+        }
       };
     },
     value: configProps.value,

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

@@ -1,5 +1,3 @@
-/* eslint-disable import/no-relative-packages */
-/* eslint-disable no-undef */
 import { useEffect, useState } from 'react';
 import { DateTimeInput, FieldValueList, DateTimeDisplay, Text } from "@pega/cosmos-react-core";
 import PropTypes from "prop-types";
@@ -67,7 +65,7 @@ const PegaDxilMyDateTime = props => {
     } else if (!hasSuggestions && status !== 'success') {
       setStatus(validatemessage !== '' ? 'error' : undefined);
     }
-  }, [validatemessage, hasSuggestions]);
+  }, [validatemessage, hasSuggestions, status]);
 
   let { clockFormat } = props;
   clockFormat = parseClockFormat(clockFormat);

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDateTime/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_MyDateTime/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_MyDecimal/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, fieldMetadata, stateProps } from './mock.stories.js';
-
+import { configProps, fieldMetadata, stateProps } from './mock.js';
 import PegaDxilMyDecimal from './index.jsx';
 
 export default {
@@ -13,8 +11,7 @@ export default {
   component: PegaDxilMyDecimal
 };
 
-export const basePegaDxilMyDecimal = () => {
-
+export const BasePegaDxilMyDecimal = () => {
   const props = {
     value: configProps.value,
     placeholder: configProps.placeholder,
@@ -32,14 +29,26 @@ export const basePegaDxilMyDecimal = () => {
         },
         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_MyDecimal/index.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-relative-packages */
 import { useState, useEffect, useRef } from 'react';
 import { NumberInput, NumberDisplay, CurrencyDisplay, FieldValueList, Text } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';
@@ -57,7 +56,7 @@ const PegaDxilMyDecimal = props => {
     } else if (!hasSuggestions && status !== 'success') {
       setStatus(validatemessage !== '' ? 'error' : undefined);
     }
-  }, [validatemessage, hasSuggestions]);
+  }, [validatemessage, hasSuggestions, status]);
 
   const { decimalPrecision, currencyDecimalPrecision } = props;
   let numberOfDecimals = parseInt(decimalPrecision, 10);

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDecimal/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_MyDecimal/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_MyDetails/StatusWork.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-relative-packages */
 import { Status } from "@pega/cosmos-react-core";
 
 export default function StatusWorkRenderer({ value }) {

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

@@ -1,9 +1,8 @@
-/* eslint-disable import/no-relative-packages */
 /* eslint-disable storybook/prefer-pascal-case */
 /* eslint-disable react/jsx-no-useless-fragment */
 import { Text, FieldValueList, Button, DateTimeDisplay, useTheme } from '@pega/cosmos-react-core';
 import PegaDxilMyDetails from './index';
-import { pyReviewRaw, pyReviewResolved, regionChildrenResolved } from './mock.stories';
+import { pyReviewRaw, pyReviewResolved, regionChildrenResolved } from './mock';
 import StatusWorkRenderer from './StatusWork.jsx';
 
 export default {
@@ -77,7 +76,7 @@ const renderField = resolvedProps => {
   return <FieldValueList variant={variant} fields={[{ name: label, value: val }]} key={key} />;
 };
 
-export const basePegaDxilMyDetails = () => {
+export const BasePegaDxilMyDetails = () => {
   const props = {
     template: 'MyCo_MyComponents_NewDetailsTemplate',
     showHighlightedData: true,
@@ -98,7 +97,6 @@ export const basePegaDxilMyDetails = () => {
           return pyReviewRaw.config.inheritedProps;
         },
         createComponent: config => {
-          // eslint-disable-next-line default-case
           switch (config.config.value) {
             case '@P .pyStatusWork':
               return renderField(pyReviewResolved.highlightedData[0].config);

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

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-relative-packages */
 import { Fragment } from 'react';
 import { Grid, Flex, FieldGroup } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/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_MyDetails/utils.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 
 /**
  * Given the PConnect object of a Template component, retrieve the children
@@ -137,9 +136,9 @@ 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;
+    return undefined;
   }
 
   // Custom instructions from the view

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyEmail/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 PegaDxilMyEmail from './index.jsx';
-
-import { stateProps, configProps, fieldMetadata } from './mock.stories';
+import { stateProps, configProps, fieldMetadata } from './mock';
 
 export default {
   title: 'PegaDxilMyEmail',
@@ -13,8 +10,7 @@ export default {
   component: PegaDxilMyEmail
 };
 
-export const basePegaDxilMyEmail = () => {
-
+export const BasePegaDxilMyEmail = () => {
   const props = {
     value: configProps.value,
     label: configProps.label,
@@ -31,14 +27,26 @@ export const basePegaDxilMyEmail = () => {
         },
         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_MyEmail/index.jsx

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

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyEmail/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_MyEmail/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_MyForm/demo.stories.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-relative-packages */
 /* eslint-disable react-hooks/rules-of-hooks */
 /* eslint-disable storybook/prefer-pascal-case */
 /* eslint-disable react/jsx-no-useless-fragment */
@@ -8,7 +7,7 @@ import { withKnobs } from '@storybook/addon-knobs';
 import PegaDxilMyForm from './index.jsx';
 import { DateInput, Input, FieldValueList, Text } from '@pega/cosmos-react-core';
 import { PhoneInput as CosmosPhone } from '@pega/cosmos-react-core';
-import { pyReviewRaw, regionChildrenResolved } from './mock.stories';
+import { pyReviewRaw, regionChildrenResolved } from './mock';
 
 export default {
   title: 'PegaDxilMyForm',
@@ -40,8 +39,7 @@ const renderField = resolvedProps => {
       ''
     );
 
-
-  if (label === 'Service Date')
+  if (label === 'Service Date') {
     val = (
       <DateInput
         value={inputValue}
@@ -52,10 +50,11 @@ const renderField = resolvedProps => {
           const trimmedDate = date ? date.substring(0, date.indexOf('T')) : date;
           setInputValue(trimmedDate);
         }}
-      ></DateInput>
+      />
     );
+  }
 
-  if (label === 'Email')
+  if (label === 'Email') {
     val = (
       <Input
         type='email'
@@ -65,10 +64,11 @@ const renderField = resolvedProps => {
         onChange={e => {
           setInputValue(e.target.value);
         }}
-      ></Input>
+      />
     );
+  }
 
-  if (label === 'First Name' || label === 'Last Name' || label === 'Middle Name')
+  if (label === 'First Name' || label === 'Last Name' || label === 'Middle Name') {
     val = (
       <Input
         value={inputValue}
@@ -77,10 +77,11 @@ const renderField = resolvedProps => {
         onChange={e => {
           setInputValue(e.target.value);
         }}
-      ></Input>
+      />
     );
+  }
 
-  if (label === 'Phone Number')
+  if (label === 'Phone Number') {
     val = (
       <CosmosPhone
         value={phoneValue}
@@ -89,9 +90,9 @@ const renderField = resolvedProps => {
         onChange={phoneVal => {
           setPhoneValue(phoneVal);
         }}
-      ></CosmosPhone>
+      />
     );
-
+  }
 
   if (variant === 'inline') {
     val = value || (
@@ -118,16 +119,10 @@ const renderField = resolvedProps => {
       </Text>
     );
   }
-  return (
-    <FieldValueList
-      variant={variant}
-      fields={[{ name: label, value: val }]}
-      key={key}
-    />
-  );
+  return <FieldValueList variant={variant} fields={[{ name: label, value: val }]} key={key} />;
 };
 
-export const basePegaDxilMyForm = () => {
+export const BasePegaDxilMyForm = () => {
   const props = {
     NumCols: 1,
     template: 'DefaultForm',
@@ -140,7 +135,6 @@ export const basePegaDxilMyForm = () => {
           return pyReviewRaw.config.inheritedProps;
         },
         createComponent: config => {
-          // eslint-disable-next-line default-case
           switch (config.config.value) {
             case '@P .FirstName':
               return renderField(regionChildrenResolved[0]);

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

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-relative-packages */
 import { Grid, FieldGroup } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';
 

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyForm/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_MyInteger/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 { stateProps, configProps, fieldMetadata } from './mock.stories';
-
+import { stateProps, configProps, fieldMetadata } from './mock';
 import PegaDxilMyInteger from './index.jsx';
 
 export default {
@@ -13,8 +11,7 @@ export default {
   component: PegaDxilMyInteger
 };
 
-export const basePegaDxilMyInteger = () => {
-
+export const BasePegaDxilMyInteger = () => {
   const props = {
     value: configProps.value,
     placeholder: configProps.placeholder,
@@ -32,14 +29,26 @@ export const basePegaDxilMyInteger = () => {
         },
         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_MyInteger/index.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-relative-packages */
 import { useState, useEffect, useRef } from 'react';
 import { NumberInput, NumberDisplay, Slider, FieldValueList, CurrencyDisplay, Text } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';
@@ -66,7 +65,7 @@ const PegaDxilMyInteger = props => {
     } else if (!hasSuggestions && status !== 'success') {
       setStatus(validatemessage !== '' ? 'error' : undefined);
     }
-  }, [validatemessage, hasSuggestions]);
+  }, [validatemessage, hasSuggestions, status]);
 
   useEffect(() => {
     setIntegerValue(value?.toString());
@@ -76,7 +75,7 @@ const PegaDxilMyInteger = props => {
     if (displayAs === 'slider' && value === '') {
       handleEvent(actions, 'change', propName, sliderDefaultValue);
     }
-  }, []);
+  }, [actions, displayAs, propName, sliderDefaultValue, value]);
 
   const { decimalPrecision, currencyDecimalPrecision, currencyISOCode } = props;
   let noOfDecimals = parseInt(decimalPrecision, 10);

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyInteger/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_MyInteger/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_MyPage/GetNextWork.jsx

@@ -1,5 +1,4 @@
-/* eslint-disable import/no-relative-packages */
-/* eslint-disable no-undef */
+
 import { Button, useToaster } from '@pega/cosmos-react-core';
 
 export default function GetNextWork(props) {
@@ -17,9 +16,7 @@ export default function GetNextWork(props) {
       .getActionsApi()
       .getNextWork()
       .catch((err) => {
-        /* eslint-disable no-console */
         console.log(err);
-        /* eslint-enable no-console */
         if (err[0].status === 404) {
           toasterCtx.push({
             content: localizedVal('No task currently available')

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPage/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 { AppAnnouncement as PegaAppAnnouncement } from '@pega/cosmos-react-work';
 
 import PegaDxilMyPage from './index.jsx';
-import { pyHome1Resolved, pyHome1Raw } from './mock.stories.js';
+import { pyHome1Resolved, pyHome1Raw } from './mock.js';
 
 export default {
   title: 'PegaDxilMyPage',
@@ -14,7 +12,7 @@ export default {
   component: PegaDxilMyPage
 };
 
-export const basePegaDxilMyPage = () => {
+export const BasePegaDxilMyPage = () => {
   if (!window.PCore) {
     window.PCore = {};
   }
@@ -47,8 +45,12 @@ export const basePegaDxilMyPage = () => {
                 resolve({});
               });
             },
-            updateFieldValue: () => {/* nothing */},
-            triggerFieldChange: () => {/* nothing */}
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
         getChildren: () => {
@@ -85,10 +87,18 @@ export const basePegaDxilMyPage = () => {
             );
           }
         },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        setInheritedProps: () => {/* nothing */},
-        resolveConfigProps: () => {/* nothing */}
+        ignoreSuggestion: () => {
+          /* nothing */
+        },
+        acceptSuggestion: () => {
+          /* nothing */
+        },
+        setInheritedProps: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
+        }
       };
     }
   };

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

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-relative-packages */
 import { useMemo, Children } from 'react';
 import PropTypes from 'prop-types';
 import { OneColumnPage as OneColumn } from '@pega/cosmos-react-core';
@@ -34,9 +33,10 @@ export default function PegaDxilMyPage(props) {
   const childArray = useMemo(() => {
     return Children.toArray(children);
   }, [children]);
+  const child0 = childArray[0];
   const layoutItemsA = useMemo(() => {
-    return getLayoutDataFromRegion(childArray[0]);
-  }, [childArray[0]]);
+    return getLayoutDataFromRegion(child0);
+  }, [child0]);
 
   // temp
   const tempIcon = "pi pi-headline";