@pega/dx-component-builder-sdk 24.2.11 → 24.2.13

package/src/tasks/create/templates/SDK-React/field/DateTime/index.tsx.mustache

@@ -1,9 +1,9 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import dayjs, { Dayjs } from 'dayjs';
-
+import DateFormatter from '@pega/react-sdk-components/lib/components/helpers/formatters/Date';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
@@ -26,7 +26,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   const { getPConnect, label, required, disabled, value = '', validatemessage, status, readOnly, testId, helperText, displayMode, hideLabel } = props;
 
-  const [dateValue, setDateValue] = useState<Dayjs | null>(value ? dayjs(value) : null);
+  const environmentInfo = PCore.getEnvironmentInfo();
+  const timezone = environmentInfo && environmentInfo.getTimeZone();
+
+  const [dateValue, setDateValue] = useState<Dayjs | null>(value ? dayjs(DateFormatter.convertToTimezone(value, { timezone })) : null);
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
@@ -41,6 +44,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;
   dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;
 
+  useEffect(() => {
+    setDateValue(dayjs(DateFormatter.convertToTimezone(value, { timezone })));
+  }, [value]);
+
   if (displayMode === 'DISPLAY_ONLY') {
     const formattedDateTime = format(props.value, 'datetime', {
       format: `${dateFormatInfo.dateFormatString} hh:mm a`
@@ -67,8 +74,9 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   };
 
   const handleChange = date => {
-    setDateValue(date);
-    const changeValue = date && date.isValid() ? date.toISOString() : null;
+    const timeZoneDateTime = dayjs.tz(date.format('YYYY-MM-DDTHH:mm:ss'), timezone);
+    const changeValue = timeZoneDateTime && timeZoneDateTime.isValid() ? timeZoneDateTime.toISOString() : '';
+    setDateValue(timeZoneDateTime);
     handleEvent(actions, 'changeNblur', propName, changeValue);
   };
 

package/src/tasks/create/templates/SDK-React/field/Decimal/demo.stories.tsx.mustache

@@ -4,20 +4,6 @@ import type { Meta, StoryObj } from '@storybook/react';
 import {{COMPONENT_CLASS_NAME}} from './index';
 import { configProps, fieldMetadata } from './mock';
 
-window.PCore = {
-  ...window.PCore,
-  getEnvironmentInfo: (): any => {
-    return {
-      getUseLocale: () => {
-        return 'en-GB';
-      },
-      getLocale: () => {
-        return 'en-GB';
-      }
-    };
-  }
-};
-
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}},

package/src/tasks/create/templates/SDK-React/field/Decimal/index.tsx.mustache

@@ -1,6 +1,6 @@
 import { NumericFormat } from 'react-number-format';
 import { TextField } from '@mui/material';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
@@ -63,6 +63,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
 
+  useEffect(() => {
+    setValues(value.toString());
+  }, [value]);
+
   let readOnlyProp = {}; // Note: empty if NOT ReadOnly
 
   if (readOnly) {
@@ -115,6 +119,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         }}
         onBlur={!readOnly ? decimalOnBlur : undefined}
         prefix={readOnly && formatter === 'Currency' ? theCurrSym : ''}
+        suffix={readOnly && formatter === 'Percentage' ? '%' : ''}
         decimalSeparator={theCurrDec}
         thousandSeparator={showGroupSeparators ? theCurrSep : ''}
         decimalScale={readOnly && formatter === 'Currency' ? undefined : decimalPrecision}

package/src/tasks/create/templates/SDK-React/field/Decimal-Currency/demo.stories.tsx.mustache

@@ -4,20 +4,6 @@ import type { Meta, StoryObj } from '@storybook/react';
 import {{COMPONENT_CLASS_NAME}} from './index';
 import { configProps, fieldMetadata } from './mock';
 
-window.PCore = {
-  ...window.PCore,
-  getEnvironmentInfo: (): any => {
-    return {
-      getUseLocale: () => {
-        return 'en-GB';
-      },
-      getLocale: () => {
-        return 'en-GB';
-      }
-    };
-  }
-};
-
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}},

package/src/tasks/create/templates/SDK-React/field/Decimal-Currency/index.tsx.mustache

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { NumericFormat } from 'react-number-format';
 import { TextField } from '@mui/material';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
@@ -55,6 +55,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     'data-test-id': testId
   };
 
+  useEffect(() => {
+    setValues(value.toString());
+  }, [value]);
+  
   // currencySymbols looks like this: { theCurrencySymbol: '$', theDecimalIndicator: '.', theSeparator: ',' }
   const theSymbols = getCurrencyCharacters(currencyISOCode);
   const theCurrSym = theSymbols.theCurrencySymbol;
@@ -93,6 +97,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       <NumericFormat
         valueIsNumericString
+        variant={readOnly ? 'standard' : 'outlined'}
         label={label}
         helperText={helperTextToDisplay}
         placeholder={placeholder ?? ''}

package/src/tasks/create/templates/SDK-React/field/Decimal-Percentage/demo.stories.tsx.mustache

@@ -10,20 +10,6 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   excludeStories: /.*Data$/
 };
 
-window.PCore = {
-  ...window.PCore,
-  getEnvironmentInfo: (): any => {
-    return {
-      getUseLocale: () => {
-        return 'en-GB';
-      },
-      getLocale: () => {
-        return 'en-GB';
-      }
-    };
-  }
-};
-
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 

package/src/tasks/create/templates/SDK-React/field/Decimal-Percentage/index.tsx.mustache

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { NumericFormat } from 'react-number-format';
 import { TextField } from '@mui/material';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
@@ -56,6 +56,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
   const formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), theCurrencyOptions);
 
+  useEffect(() => {
+      setValues(value.toString());
+    }, [value]);
+
   let readOnlyProp = {}; // Note: empty if NOT ReadOnly
 
   if (readOnly) {

package/src/tasks/create/templates/SDK-React/field/Icon-Button-URL/demo.stories.tsx.mustache

@@ -12,10 +12,6 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-if (!window.PCore) {
-  window.PCore = {} as any;
-}
-
 const statelistData = {
   data: [
     {
@@ -33,7 +29,7 @@ const statelistData = {
   ]
 };
 
-window.PCore.getDataPageUtils = (() => {
+window.PCore.getDataPageUtils = (): any => {
   return {
     getDataAsync: () => {
       return new Promise(resolve => {
@@ -41,7 +37,7 @@ window.PCore.getDataPageUtils = (() => {
       });
     }
   };
-}) as any;
+};
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   const props = {

package/src/tasks/create/templates/SDK-React/field/Icon-Button-URL/index.tsx.mustache

@@ -127,7 +127,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         </Tooltip>
         {
           // eslint-disable-next-line jsx-a11y/control-has-associated-label
-          <a href={validUrl} style={{ display: 'flex' }}>
+          <a href={validUrl} target='_blank' style={{ display: 'flex' }} rel='noreferrer'>
             <LanguageIcon />
           </a>
         }

package/src/tasks/create/templates/SDK-React/field/Integer/demo.stories.tsx.mustache

@@ -26,6 +26,9 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
           return {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
+            },
+            triggerFieldChange: (propName, theValue) => {
+              setValue(theValue);
             }
           };
         },

package/src/tasks/create/templates/SDK-React/field/Picklist/index.tsx.mustache

@@ -143,7 +143,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   }, [theDatasource]);
 
   useEffect(() => {
-    if (!displayMode && listType !== 'associated' && typeof datasource === 'string') {
+    if (listType !== 'associated' && typeof datasource === 'string') {
       getDataPage(datasource, parameters, context).then((results: any) => {
         const optionsData: any[] = [];
         const displayColumn = getDisplayFieldsMetaData(columns);
@@ -171,25 +171,31 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   let readOnlyProp = {};
 
-  if (displayMode === 'DISPLAY_ONLY') {
-    return (
-      <FieldValueList
-        name={hideLabel ? '' : label}
-        // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
-        value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
-      />
-    );
-  }
+  const displayFn = (displayM, val) => {
+    if (displayM === 'DISPLAY_ONLY') {
+      return (
+        <FieldValueList
+          name={hideLabel ? '' : label}
+          value={thePConn.getLocalizedValue(val, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
+        />
+      );
+    }
+
+    if (displayM === 'STACKED_LARGE_VAL') {
+      return (
+        <FieldValueList
+          name={hideLabel ? '' : label}
+          value={thePConn.getLocalizedValue(val, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
+          variant='stacked'
+        />
+      );
+    }
+
+    return null;
+  };
 
-  if (displayMode === 'STACKED_LARGE_VAL') {
-    return (
-      <FieldValueList
-        name={hideLabel ? '' : label}
-        // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
-        value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
-        variant='stacked'
-      />
-    );
+  if (displayMode) {
+    return displayFn(displayMode, options.find(option => option.key === value)?.value || value);
   }
 
   if (readOnly) {
@@ -234,7 +240,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
       >
         {options.map((option: any) => (
           <MenuItem key={option.key} value={option.key}>
-            {/* @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'  */}
             {thePConn.getLocalizedValue(option.value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
           </MenuItem>
         ))}

package/src/tasks/create/templates/SDK-React/field/Picklist-RadioButtons/index.tsx.mustache

@@ -70,7 +70,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     return (
       <FieldValueList
         name={hideLabel ? '' : label}
-        // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
         value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
       />
     );
@@ -80,7 +79,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     return (
       <FieldValueList
         name={hideLabel ? '' : label}
-        // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
         value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
         variant='stacked'
       />
@@ -97,7 +95,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <FormControl error={status === 'error'} required={required}>
+      <FormControl variant='standard' error={status === 'error'} required={required}>
         <FormLabel component='legend'>{label}</FormLabel>
         <RadioGroup value={theSelectedButton} onChange={handleChange} onBlur={!readOnly ? handleBlur : undefined} row={inline}>
           {theOptions.map(theOption => {
@@ -108,7 +106,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
                 label={thePConn.getLocalizedValue(
                   theOption.value,
                   localePath,
-                  // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
                   thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
                 )}
                 control={<Radio key={theOption.key} color='primary' disabled={readOnly} />}

package/src/tasks/create/templates/SDK-React/field/Text/demo.stories.tsx.mustache

@@ -26,6 +26,9 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
           return {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
+            },
+            triggerFieldChange: (propName, theValue) => {
+              setValue(theValue);
             }
           };
         },

package/src/tasks/create/templates/SDK-React/field/Text-Email/demo.stories.tsx.mustache

@@ -25,6 +25,9 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
           return {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
+            },
+            triggerFieldChange: (propName, theValue) => {
+              setValue(theValue);
             }
           };
         },

package/src/tasks/create/templates/SDK-React/field/Text-Input/demo.stories.tsx.mustache

@@ -27,6 +27,9 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
           return {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
+            },
+            triggerFieldChange: (propName, theValue) => {
+              setValue(theValue);
             }
           };
         },

package/src/tasks/create/templates/SDK-React/field/Text-Paragraph/demo.stories.tsx.mustache

@@ -27,6 +27,9 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
           return {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
+            },
+            triggerFieldChange: (propName, theValue) => {
+              setValue(theValue);
             }
           };
         },

package/src/tasks/create/templates/SDK-React/field/Text-Phone/demo.stories.tsx.mustache

@@ -25,6 +25,9 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
           return {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
+            },
+            triggerFieldChange: (propName, theValue) => {
+              setValue(theValue);
             }
           };
         },

package/src/tasks/create/templates/SDK-React/field/Text-URL/demo.stories.tsx.mustache

@@ -25,6 +25,9 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
           return {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
+            },
+            triggerFieldChange: (propName, theValue) => {
+              setValue(theValue);
             }
           };
         },

package/src/tasks/create/templates/SDK-React/field/TimeOfDay/index.tsx.mustache

@@ -47,7 +47,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   };
 
   const handleChange = date => {
-    const theValue = date && date.isValid() ? date.format('HH:mm') : null;
+    const theValue = date && date.isValid() ? date.format('HH:mm:ss') : null;
     handleEvent(actions, 'changeNblur', propName, theValue);
   };
 

package/src/tasks/create/templates/SDK-React/template/DETAILS/demo.stories.tsx.mustache

@@ -15,34 +15,14 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-window.PCore = {
-  ...window.PCore,
-  getUserApi: (): any => {
-    return {
-      getOperatorDetails: () => {
-        return new Promise(resolve => {
-          resolve(operatorDetails);
-        });
-      }
-    };
-  },
-  getLocaleUtils: (): any => {
-    return {
-      getLocaleValue: value => {
-        return value;
-      }
-    };
-  },
-  getEnvironmentInfo: (): any => {
-    return {
-      getUseLocale: () => {
-        return 'en-GB';
-      },
-      getLocale: () => {
-        return 'en-GB';
-      }
-    };
-  }
+window.PCore.getUserApi = (): any => {
+  return {
+    getOperatorDetails: () => {
+      return new Promise(resolve => {
+        resolve(operatorDetails);
+      });
+    }
+  };
 };
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {

package/src/tasks/create/templates/SDK-React/template/DETAILS/index.tsx.mustache

@@ -9,6 +9,8 @@ import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
   // If any, enter additional props that only exist on this component
+  label: string;
+  showLabel: boolean;
   showHighlightedData: boolean;
 }
 // Duplicated runtime code from React SDK
@@ -17,8 +19,11 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   // Get emitted components from map (so we can get any override that may exist)
   const FieldGroup = getComponentFromMap('FieldGroup');
 
-  const { getPConnect, showHighlightedData } = props;
+  const { label, showLabel, getPConnect, showHighlightedData } = props;
 
+  // Get the inherited props from the parent to determine label settings
+  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
+  
   // Set display mode prop and re-create the children so this part of the dom tree renders
   // in a readonly (display) mode instead of a editable
   getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
@@ -52,7 +57,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       {{! pick new delimiters for mustache }}
       {{=<% %>=}}
-      <FieldGroup>
+      <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
         {showHighlightedData && highlightedDataArr.length > 0 && (
           <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
             {highlightedDataArr.map((child, i) => (

package/src/tasks/create/templates/SDK-React/template/DETAILS-region/demo.stories.tsx.mustache

@@ -3,34 +3,14 @@ import type { Meta, StoryObj } from '@storybook/react';
 import {{COMPONENT_CLASS_NAME}} from './index';
 import operatorDetails, { pyReviewRaw } from './mock';
 
-window.PCore = {
-  ...window.PCore,
-  getUserApi: (): any => {
-    return {
-      getOperatorDetails: () => {
-        return new Promise(resolve => {
-          resolve(operatorDetails);
-        });
-      }
-    };
-  },
-  getLocaleUtils: (): any => {
-    return {
-      getLocaleValue: value => {
-        return value;
-      }
-    };
-  },
-  getEnvironmentInfo: (): any => {
-    return {
-      getUseLocale: () => {
-        return 'en-US';
-      },
-      getLocale: () => {
-        return 'en-GB';
-      }
-    };
-  }
+window.PCore.getUserApi = (): any => {
+  return {
+    getOperatorDetails: () => {
+      return new Promise(resolve => {
+        resolve(operatorDetails);
+      });
+    }
+  };
 };
 
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {

package/src/tasks/create/templates/SDK-React/template/DETAILS-region/index.tsx.mustache

@@ -9,6 +9,8 @@ import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
   // If any, enter additional props that only exist on this component
+  showLabel: boolean;
+  label: string;
   showHighlightedData: boolean;
 }
 // Duplicated runtime code from React SDK
@@ -17,7 +19,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   // Get emitted components from map (so we can get any override that may exist)
   const FieldGroup = getComponentFromMap('FieldGroup');
 
-  const { getPConnect, showHighlightedData = false } = props;
+  const { label, showLabel = true, getPConnect, showHighlightedData = false } = props;
+
+  // Get the inherited props from the parent to determine label settings
+  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
 
   // Set display mode prop and re-create the children so this part of the dom tree renders
   // in a readonly (display) mode instead of a editable
@@ -52,7 +57,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       {{! pick new delimiters for mustache }}
       {{=<% %>=}}
-      <FieldGroup>
+      <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
         {showHighlightedData && highlightedDataArr.length > 0 && (
           <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
             {highlightedDataArr.map((child, i) => (

package/src/tasks/create/templates/SDK-React/template/FORM/demo.stories.tsx.mustache

@@ -4,22 +4,16 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
 
-window.PCore = {
-  ...window.PCore,
-  getErrorHandler: (): any => {
-    return {
-      getGenericFailedMessage() {
-        /* nothing */
-      }
-    };
-  },
-  getConstants: (): any => {
-    return {
-      CASE_INFO: {
-        INSTRUCTIONS: ''
-      }
-    };
-  }
+window.PCore.getErrorHandler = (): any => {
+  return {
+    getOperatorDetails: () => {
+      return {
+        getGenericFailedMessage() {
+          /* nothing */
+        }
+      };
+    }
+  };
 };
 
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {

package/src/tasks/create/templates/SDK-React/template/FORM-region/index.tsx.mustache

@@ -1,5 +1,5 @@
 import { PropsWithChildren, ReactElement } from 'react';
-import { Grid } from '@mui/material';
+import { Grid, GridSize } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
@@ -35,8 +35,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props: PropsWithChildren<{{COMP
   // Calculate the size
   //  Default to assume the 2 columns are evenly split. However, override if templateCol
   //  (example value: "1fr 1fr")
-  let aSize = 6;
-  let bSize = 6;
+  let aSize: GridSize = 6;
+  let bSize: GridSize = 6;
 
   const colAArray = templateCol
     .replaceAll(/[a-z]+/g, '')
@@ -44,8 +44,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props: PropsWithChildren<{{COMP
     .map(itm => Number(itm));
   const totalCols = colAArray.reduce((v, itm) => itm + v, 0);
   const ratio = 12 / totalCols;
-  aSize = (ratio * colAArray[0]) as number;
-  bSize = (ratio * colAArray[1]) as number;
+  aSize = (ratio * colAArray[0]) as GridSize;
+  bSize = (ratio * colAArray[1]) as GridSize;
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>