@pega/dx-component-builder-sdk 0.23.17 → 0.23.19

package/tests/assets/sdk-r/components/create/override-sdk/field/Percentage/Percentage.tsx

@@ -1,67 +1,58 @@
-import { TextField } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import CurrencyTextField from '@unicef/material-ui-currency-textfield';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+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';
 
-// Inspired by https://stackoverflow.com/questions/50823182/material-ui-remove-up-down-arrow-dials-from-textview
-const useStyles = makeStyles((/* theme */) => ({
-  input: {
-    '& input[type=number]': {
-      '-moz-appearance': 'textfield'
-    },
-    '& input[type=number]::-webkit-outer-spin-button': {
-      '-webkit-appearance': 'none',
-      margin: 0
-    },
-    '& input[type=number]::-webkit-inner-spin-button': {
-      '-webkit-appearance': 'none',
-      margin: 0
-    }
-  }
-}));
-
+/* Using @unicef/material-ui-currency-textfield component here, since it allows formatting decimal values,
+as per the locale.
+*/
 interface PercentageProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Percentage here
+  currencyISOCode?: string;
 }
 
 export default function Percentage(props: PercentageProps) {
   // Get emitted components from map (so we can get any override that may exist)
-  const TextInput = getComponentFromMap('TextInput');
   const FieldValueList = getComponentFromMap('FieldValueList');
 
-  const classes = useStyles();
-
   const {
+    getPConnect,
     label,
     required,
     disabled,
     value = '',
     validatemessage,
     status,
-    onChange,
-    onBlur,
+    // onChange,
+    // onBlur,
     readOnly,
+    currencyISOCode = 'USD',
     testId,
     helperText,
     displayMode,
     hideLabel,
     placeholder
   } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
   const helperTextToDisplay = validatemessage || helperText;
 
+  const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
+  const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
+
   // console.log(`Percentage: label: ${label} value: ${value}`);
 
   if (displayMode === 'LABELS_LEFT') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
-  }
-
-  if (readOnly) {
-    return <TextInput {...props} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
   }
 
   let testProp = {};
@@ -70,9 +61,16 @@ export default function Percentage(props: PercentageProps) {
     'data-test-id': testId
   };
 
+  const theSymbols = getCurrencyCharacters(currencyISOCode);
+  const theCurrDec = theSymbols.theDecimalIndicator;
+  const theCurrSep = theSymbols.theDigitGroupSeparator;
+
+  function PercentageOnBlur(event, inValue) {
+    handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);
+  }
+
   return (
-    <TextField
-      className={classes.input}
+    <CurrencyTextField
       fullWidth
       variant={readOnly ? 'standard' : 'outlined'}
       helperText={helperTextToDisplay}
@@ -80,13 +78,20 @@ export default function Percentage(props: PercentageProps) {
       size='small'
       required={required}
       disabled={disabled}
-      onChange={onChange}
-      onBlur={!readOnly ? onBlur : undefined}
+      readOnly={!!readOnly}
       error={status === 'error'}
       label={label}
       value={value}
-      type='number'
-      inputProps={{ ...testProp }}
+      type='text'
+      outputFormat='number'
+      textAlign='left'
+      InputProps={{
+        inputProps: { ...testProp }
+      }}
+      currencySymbol=''
+      decimalCharacter={theCurrDec}
+      digitGroupSeparator={theCurrSep}
+      onBlur={!readOnly ? PercentageOnBlur : undefined}
     />
   );
 }

package/tests/assets/sdk-r/components/create/override-sdk/template/ListView/ListView.tsx

@@ -154,7 +154,8 @@ export default function ListView(props: ListViewProps) {
       paper: {
         width: '100%',
         marginTop: theme.spacing(2),
-        marginBottom: theme.spacing(2)
+        marginBottom: theme.spacing(2),
+        display: 'grid'
       },
       search: {
         padding: '5px 5px'

package/tests/assets/sdk-r/components/create/override-sdk/template/ListView/utils.ts

@@ -680,7 +680,9 @@ export const readContextResponse = async (context, params) => {
     if (compositeKeys.length) {
       otherContext.setCompositeKeys(compositeKeys);
     }
-    otherContext.fetchRowActionDetails = null;
+    if (otherContext) {
+      otherContext.fetchRowActionDetails = null;
+    }
   }
 
   const presetArray = [];

package/tests/assets/sdk-r/components/create/override-sdk/template/SimpleTableManual/SimpleTableManual.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
+import React, { PropsWithChildren, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
@@ -197,6 +197,20 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   //  Constellation DX Components.
   const fieldDefs = buildFieldsForTable(rawFields, resolvedFields, showDeleteButton);
 
+  useLayoutEffect(() => {
+    if (allowEditingInModal) {
+      getPConnect()
+        .getListActions()
+        .initDefaultPageInstructions(
+          getPConnect().getReferenceList(),
+          fieldDefs.filter(item => item.name).map(item => item.name)
+        );
+    } else {
+      // @ts-ignore - An argument for 'fields' was not provided
+      getPConnect().getListActions().initDefaultPageInstructions(getPConnect().getReferenceList());
+    }
+  }, []);
+
   const displayedColumns = fieldDefs.map(field => {
     return field.name ? field.name : field.cellRenderer;
   });
@@ -290,6 +304,10 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     } else {
       pConn.getListActions().insert({ classID: contextClass }, referenceList.length);
     }
+
+    getPConnect().clearErrorMessages({
+      property: (getPConnect().getStateProps() as any)?.referenceList?.substring(1)
+    } as any);
   };
 
   const editRecord = () => {

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

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
@@ -25,38 +26,64 @@ export default function QuickCreate(props: QuickCreateProps) {
       });
   };
 
-  const cases: any = [];
-  const envInfo = PCore.getEnvironmentInfo();
-  if (
-    classFilter &&
-    envInfo.environmentInfoObject &&
-    envInfo.environmentInfoObject.pyCaseTypeList &&
-    envInfo.environmentInfoObject.pyCaseTypeList.length > 0
-  ) {
-    classFilter.forEach(item => {
-      let icon = Utils.getImageSrc('polaris-solid', Utils.getSDKStaticConentUrl());
-      let label = '';
+  const [quickCreatecases, setCases] = useState([]);
+
+  /* If the classFilter is empty and has no entries - we will default to the default set of case types
+     It will usually come from the envInfo but for Launchpad, this is not populated - instead get the list of cases from the store */
+  useEffect(() => {
+    const cases: any = [];
+    const defaultCases: any = [];
+    const envInfo = PCore.getEnvironmentInfo();
+    if (envInfo?.environmentInfoObject?.pyCaseTypeList) {
       envInfo.environmentInfoObject.pyCaseTypeList.forEach(casetype => {
-        if (casetype.pyWorkTypeImplementationClassName === item) {
-          icon = casetype.pxIcon && Utils.getImageSrc(casetype?.pxIcon, Utils.getSDKStaticConentUrl());
-          label = casetype.pyWorkTypeName ?? '';
+        if (casetype.pyWorkTypeName && casetype.pyWorkTypeImplementationClassName) {
+          defaultCases.push({
+            classname: casetype.pyWorkTypeImplementationClassName,
+            onClick: () => {
+              createCase(casetype.pyWorkTypeImplementationClassName);
+            },
+            ...(showCaseIcons && { icon: Utils.getImageSrc(casetype?.pxIcon, Utils.getSDKStaticConentUrl()) }),
+            label: casetype.pyWorkTypeName
+          });
+        }
+      });
+    } else {
+      const pConnectInAppContext = PCore.createPConnect({
+        options: { context: PCore.getConstants().APP.APP }
+      }).getPConnect();
+      const pyPortalInAppContext = pConnectInAppContext.getValue('pyPortal') as any;
+      pyPortalInAppContext?.pyCaseTypesAvailableToCreate?.forEach(casetype => {
+        if (casetype.pyClassName && casetype.pyLabel) {
+          defaultCases.push({
+            classname: casetype.pyClassName,
+            onClick: () => {
+              createCase(casetype.pyClassName);
+            },
+            ...(showCaseIcons && { icon: Utils.getImageSrc(casetype?.pxIcon, Utils.getSDKStaticConentUrl()) }),
+            label: casetype.pyLabel
+          });
         }
       });
-      if (label !== '') {
-        cases.push({
-          label,
-          onClick: () => {
-            createCase(item);
-          },
-          ...(showCaseIcons && { icon })
+    }
+
+    /* If classFilter is not empty - filter from the list of defaultCases */
+    if (classFilter?.length > 0) {
+      classFilter.forEach(item => {
+        defaultCases.forEach(casetype => {
+          if (casetype.classname === item) {
+            cases.push(casetype);
+          }
         });
-      }
-    });
-  }
+      });
+      setCases(cases);
+    } else {
+      setCases(defaultCases);
+    }
+  }, []);
 
   return (
     <div>
-      <WssQuickCreate heading={heading} actions={cases} />
+      <WssQuickCreate heading={heading} actions={quickCreatecases} />
     </div>
   );
 }

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

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText } from '@material-ui/core';
+import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } from '@material-ui/core';
 
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
@@ -24,6 +24,7 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
 
   const {
     getPConnect,
+    label,
     value = false,
     readOnly,
     testId,
@@ -78,6 +79,7 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
   return (
     <StyledPegaDxilMyBooleanWrapper>
       <FormControl required={required} error={status === 'error'}>
+        {!hideLabel && <FormLabel component='legend'>{label}</FormLabel>}
         <FormGroup>
           <FormControlLabel
             control={theCheckbox}
@@ -94,4 +96,3 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
     </StyledPegaDxilMyBooleanWrapper>
   );
 }
-

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

@@ -1,11 +1,9 @@
-import { useState, useEffect } from 'react';
 import CurrencyTextField from '@unicef/material-ui-currency-textfield';
 
-import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
-import { format } from "@pega/react-sdk-components/lib/components/helpers/formatters";
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
-
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils.js';
 import StyledPegaDxilMyCurrencyWrapper from './styles';
 
@@ -52,17 +50,11 @@ export default function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
     'data-test-id': testId
   };
 
-  const [theCurrSym, setCurrSym] = useState('$');
-  const [theCurrDec, setCurrDec] = useState('.');
-  const [theCurrSep, setCurrSep] = useState(',');
-
-  useEffect(() => {
-    // currencySymbols looks like this: { theCurrencySymbol: '$', theDecimalIndicator: '.', theSeparator: ',' }
-    const theSymbols = getCurrencyCharacters(currencyISOCode);
-    setCurrSym(theSymbols.theCurrencySymbol);
-    setCurrDec(theSymbols.theDecimalIndicator);
-    setCurrSep(theSymbols.theDigitGroupSeparator);
-  }, [currencyISOCode]);
+  // currencySymbols looks like this: { theCurrencySymbol: '$', theDecimalIndicator: '.', theSeparator: ',' }
+  const theSymbols = getCurrencyCharacters(currencyISOCode);
+  const theCurrSym = theSymbols.theCurrencySymbol;
+  const theCurrDec = theSymbols.theDecimalIndicator;
+  const theCurrSep = theSymbols.theDigitGroupSeparator;
 
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
   const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);

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

@@ -1,4 +1,3 @@
-import { useState, useEffect } from 'react';
 import CurrencyTextField from '@unicef/material-ui-currency-textfield';
 
 import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils.js';
@@ -49,14 +48,9 @@ export default function PegaDxilMyDecimal(props: PegaDxilMyDecimalProps) {
   const propName = (pConn.getStateProps() as any).value;
   const helperTextToDisplay = validatemessage || helperText;
 
-  const [theCurrDec, setCurrDec] = useState('.');
-  const [theCurrSep, setCurrSep] = useState(',');
-
-  useEffect(() => {
-    const theSymbols = getCurrencyCharacters(currencyISOCode);
-    setCurrDec(theSymbols.theDecimalIndicator);
-    setCurrSep(theSymbols.theDigitGroupSeparator);
-  }, [currencyISOCode]);
+  const theSymbols = getCurrencyCharacters(currencyISOCode);
+  const theCurrDec = theSymbols.theDecimalIndicator;
+  const theCurrSep = theSymbols.theDigitGroupSeparator;
 
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
   const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);

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

@@ -10,6 +10,20 @@ const meta: Meta<typeof PegaDxilMyPercentage> = {
   excludeStories: /.*Data$/
 };
 
+window.PCore = {
+  ...window.PCore,
+  getEnvironmentInfo: (): any => {
+    return {
+      getUseLocale: () => {
+        return 'en-GB';
+      },
+      getLocale: () => {
+        return 'en-GB';
+      }
+    };
+  }
+};
+
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyPercentage>;
 
@@ -22,10 +36,16 @@ export const BasePegaDxilMyPercentage: Story = args => {
     fieldMetadata,
     getPConnect: () => {
       return {
+        getComponentName: () => {
+          return 'Percentage';
+        },
         getActionsApi: () => {
           return {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
+            },
+            triggerFieldChange: (propName, theValue) => {
+              setValue(theValue);
             }
           };
         },

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

@@ -1,69 +1,57 @@
-import { TextField } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import CurrencyTextField from '@unicef/material-ui-currency-textfield';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils.js';
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import StyledPegaDxilMyPercentageWrapper from './styles';
 
-// Inspired by https://stackoverflow.com/questions/50823182/material-ui-remove-up-down-arrow-dials-from-textview
-const useStyles = makeStyles((/* theme */) => ({
-  input: {
-    '& input[type=number]': {
-      '-moz-appearance': 'textfield'
-    },
-    '& input[type=number]::-webkit-outer-spin-button': {
-      '-webkit-appearance': 'none',
-      margin: 0
-    },
-    '& input[type=number]::-webkit-inner-spin-button': {
-      '-webkit-appearance': 'none',
-      margin: 0
-    }
-  }
-}));
-
 interface PegaDxilMyPercentageProps extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
+  currencyISOCode: string;
 }
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 export default function PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
   // Get emitted components from map (so we can get any override that may exist)
-  const TextInput = getComponentFromMap('TextInput');
   const FieldValueList = getComponentFromMap('FieldValueList');
 
-  const classes = useStyles();
-
   const {
+    getPConnect,
     label,
     required,
     disabled,
     value = '',
     validatemessage,
     status,
-    onChange,
-    onBlur,
+    // onChange,
+    // onBlur,
     readOnly,
+    currencyISOCode = 'USD',
     testId,
     helperText,
     displayMode,
     hideLabel,
     placeholder
   } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
   const helperTextToDisplay = validatemessage || helperText;
 
+  const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
+  const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
+
   // console.log(`Percentage: label: ${label} value: ${value}`);
 
   if (displayMode === 'LABELS_LEFT') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
-  }
-
-  if (readOnly) {
-    return <TextInput {...props} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
   }
 
   let testProp = {};
@@ -72,10 +60,17 @@ export default function PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
     'data-test-id': testId
   };
 
+  const theSymbols = getCurrencyCharacters(currencyISOCode);
+  const theCurrDec = theSymbols.theDecimalIndicator;
+  const theCurrSep = theSymbols.theDigitGroupSeparator;
+
+  function PercentageOnBlur(event, inValue) {
+    handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);
+  }
+
   return (
     <StyledPegaDxilMyPercentageWrapper>
-      <TextField
-        className={classes.input}
+      <CurrencyTextField
         fullWidth
         variant={readOnly ? 'standard' : 'outlined'}
         helperText={helperTextToDisplay}
@@ -83,15 +78,21 @@ export default function PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
         size='small'
         required={required}
         disabled={disabled}
-        onChange={onChange}
-        onBlur={!readOnly ? onBlur : undefined}
+        readOnly={!!readOnly}
         error={status === 'error'}
         label={label}
         value={value}
-        type='number'
-        inputProps={{ ...testProp }}
+        type='text'
+        outputFormat='number'
+        textAlign='left'
+        InputProps={{
+          inputProps: { ...testProp }
+        }}
+        currencySymbol=''
+        decimalCharacter={theCurrDec}
+        digitGroupSeparator={theCurrSep}
+        onBlur={!readOnly ? PercentageOnBlur : undefined}
       />
     </StyledPegaDxilMyPercentageWrapper>
   );
 }
-

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyCaseWidget/index.tsx

@@ -151,9 +151,9 @@ export default function PegaDxilMyCaseWidget(props: PegaDxilMyCaseWidgetProps) {
         const theKey = `CaseHistory-${index}`;
         theDataRows.push(
           <TableRow key={theKey}>
-            <StyledTableCell>{dataRow[0] ? dataRow[0] : '---'}</StyledTableCell>
-            <StyledTableCell>{dataRow[1] ? dataRow[1] : '---'}</StyledTableCell>
-            <StyledTableCell>{dataRow[2] ? dataRow[2] : '---'}</StyledTableCell>
+            <StyledTableCell>{dataRow[0] ? dataRow[0] as any : '---'}</StyledTableCell>
+            <StyledTableCell>{dataRow[1] ? dataRow[1] as any : '---'}</StyledTableCell>
+            <StyledTableCell>{dataRow[2] ? dataRow[2] as any : '---'}</StyledTableCell>
           </TableRow>
         );
       });

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyPageCaseWidget/demo.stories.tsx

@@ -11,6 +11,13 @@ window.PCore = {
         return new Promise(resolve => {
           resolve(operatorDetails);
         });
+      },
+    };
+  },
+  getLocaleUtils: (): any => {
+    return {
+      getLocaleValue: val => {
+        return val;
       }
     };
   }

package/tests/assets/sdk-r/components/createAll/override-sdk/field/Checkbox/Checkbox.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText } from '@material-ui/core';
+import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } from '@material-ui/core';
 
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
@@ -20,6 +20,7 @@ export default function CheckboxComponent(props: CheckboxProps) {
 
   const {
     getPConnect,
+    label,
     value = false,
     readOnly,
     testId,
@@ -73,6 +74,7 @@ export default function CheckboxComponent(props: CheckboxProps) {
 
   return (
     <FormControl required={required} error={status === 'error'}>
+      {!hideLabel && <FormLabel component='legend'>{label}</FormLabel>}
       <FormGroup>
         <FormControlLabel
           control={theCheckbox}

package/tests/assets/sdk-r/components/createAll/override-sdk/field/Currency/Currency.tsx

@@ -1,14 +1,14 @@
-import { useState, useEffect } from 'react';
 import CurrencyTextField from '@unicef/material-ui-currency-textfield';
 
-import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
-import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
-
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { getCurrencyCharacters, getCurrencyOptions } from './currency-utils';
 
-// Using control from: https://github.com/unicef/material-ui-currency-textfield
+/* Using @unicef/material-ui-currency-textfield component here, since it allows formatting decimal values,
+as per the locale.
+*/
 
 interface CurrrencyProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Currency here
@@ -48,17 +48,11 @@ export default function Currency(props: CurrrencyProps) {
     'data-test-id': testId
   };
 
-  const [theCurrSym, setCurrSym] = useState('$');
-  const [theCurrDec, setCurrDec] = useState('.');
-  const [theCurrSep, setCurrSep] = useState(',');
-
-  useEffect(() => {
-    // currencySymbols looks like this: { theCurrencySymbol: '$', theDecimalIndicator: '.', theSeparator: ',' }
-    const theSymbols = getCurrencyCharacters(currencyISOCode);
-    setCurrSym(theSymbols.theCurrencySymbol);
-    setCurrDec(theSymbols.theDecimalIndicator);
-    setCurrSep(theSymbols.theDigitGroupSeparator);
-  }, [currencyISOCode]);
+  // currencySymbols looks like this: { theCurrencySymbol: '$', theDecimalIndicator: '.', theSeparator: ',' }
+  const theSymbols = getCurrencyCharacters(currencyISOCode);
+  const theCurrSym = theSymbols.theCurrencySymbol;
+  const theCurrDec = theSymbols.theDecimalIndicator;
+  const theCurrSep = theSymbols.theDigitGroupSeparator;
 
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
   const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);