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

package/README.md

@@ -2,13 +2,13 @@
 
 ## Overview
 
-This project provides you with an environment to extend SDK-R by giving you tools to create and publish custom components that are not available from the SDK-R release.
+This project provides you with an environment to extend SDK-R/SDK-A by giving you tools to create and publish custom components that are not available from the SDK-R/SDK-A release.
 
 ## Prerequisites
 
 Ensure you have access to the following in your system:
 
-- Pega Infinity Server version 8.8 or later
+- Pega Infinity Server version 23
 
 - Git version 2.30 or later
 
@@ -16,7 +16,7 @@ Ensure you have access to the following in your system:
 
 - System npm version 8
 
-- Installed SDK-R, as the below commands live in the package.json of the SDK-R an NOT in this npm module
+- Installed SDK-R or SDK-A, as the below commands live in the package.json of the SDK-R/SDK-A an NOT in this npm module
 
 
 ## Create custom components
@@ -79,7 +79,7 @@ The *config.json* file contains the mapping of properties for configuring the au
 
 
 2. Enter the following command to start the storybook to view the demo.
-   `npm start`
+   `npm run startStorybook (Angular) npm run storybookSDK (React) or npm run storybookConstellation (React)`
 
 3. Modify the source files to build your own component. You can also install and import third-party libraries if required for your component.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/dx-component-builder-sdk",
-  "version": "0.23.17",
+  "version": "0.23.19",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

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

@@ -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 {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   const {
     getPConnect,
+    label,
     value = false,
     readOnly,
     testId,
@@ -78,6 +79,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       <FormControl required={required} error={status === 'error'}>
+        {!hideLabel && <FormLabel component='legend'>{label}</FormLabel>}
         <FormGroup>
           <FormControlLabel
             control={theCheckbox}
@@ -94,4 +96,3 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
-

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

@@ -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 {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   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/src/tasks/create/templates/SDK-React/field/Decimal-Currency/index.tsx.mustache

@@ -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 Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
@@ -52,17 +50,11 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     '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/src/tasks/create/templates/SDK-React/field/Decimal-Percentage/demo.stories.tsx.mustache

@@ -10,6 +10,20 @@ 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}}>;
 
@@ -22,10 +36,16 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
     fieldMetadata,
     getPConnect: () => {
       return {
+        getComponentName: () => {
+          return 'Percentage';
+        },
         getActionsApi: () => {
           return {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
+            },
+            triggerFieldChange: (propName, theValue) => {
+              setValue(theValue);
             }
           };
         },

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

@@ -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 Styled{{COMPONENT_CLASS_NAME}}Wrapper 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 {{COMPONENT_CLASS_NAME}}Props 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 {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   // 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 {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     '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 (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <TextField
-        className={classes.input}
+      <CurrencyTextField
         fullWidth
         variant={readOnly ? 'standard' : 'outlined'}
         helperText={helperTextToDisplay}
@@ -83,18 +78,24 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         size='small'
         required={required}
         disabled={disabled}
-        onChange={onChange}
-        onBlur={!readOnly ? onBlur : undefined}
+        readOnly={!!readOnly}
         error={status === 'error'}
         label={label}
         value={value}
-        type='number'
+        type='text'
+        outputFormat='number'
+        textAlign='left'
         {{! pick new delimiters for mustache }}
         {{=<% %>=}}
-        inputProps={{ ...testProp }}
+        InputProps={{
+          inputProps: { ...testProp }
+        }}
         <%={{ }}=%>     {{! revert delimiters for mustache }}
+        currencySymbol=''
+        decimalCharacter={theCurrDec}
+        digitGroupSeparator={theCurrSep}
+        onBlur={!readOnly ? PercentageOnBlur : undefined}
       />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
-

package/src/tasks/create/templates/SDK-React/widget/CASE/index.tsx.mustache

@@ -151,9 +151,9 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         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/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/demo.stories.tsx.mustache

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

package/src/tasks/map/map.js

@@ -50,6 +50,27 @@ export const getPrettierFormattedString = async (content) => {
   }
 }
 
+//
+// some components reference have a slightly different case/spelling than the component name, class, etc.
+//
+export const getSpecialCase = (componentKey, framework) => {
+
+  switch (framework) {
+    case 'SDK-React':
+      switch(componentKey) {
+        case "ToDo":
+          return "Todo";
+      }
+      break;
+    case 'SDK-Angular':
+      break;
+    case 'SDK-WebComponents' :
+      break;
+  }
+
+  return componentKey;
+}
+
 export const updateComponentMap = async (componentKey, category = CATEGORY_CUSTOM) => {
 
   const framework = await getFramework();
@@ -73,7 +94,7 @@ export const updateComponentMap = async (componentKey, category = CATEGORY_CUSTO
       importComponent = "./".concat(importComponent).split(path.sep).join("/");
 
       let importFull = "import ".concat(componentName).concat(" from '").concat(importComponent).concat("/';");
-      let mapFull = "\"".concat(componentNameNoPrefix).concat("\" : " ).concat(componentName).concat(",");
+      let mapFull = "\"".concat(getSpecialCase(componentNameNoPrefix, framework)).concat("\" : " ).concat(componentName).concat(",");
 
       if (mapData.indexOf(importComponent.concat("/")) < 0) {
         // not present so we can add
@@ -141,7 +162,7 @@ export const updateComponentMap = async (componentKey, category = CATEGORY_CUSTO
       importComponentAng = "./".concat(importComponentAng).split(path.sep).join("/");
 
       let importFullAng = "import { ".concat(componentComponentNameAng).concat(" } from '").concat(importComponentAng).concat(".component';");
-      let mapFullAng = "\"".concat(originalComponentName).concat("\" : " ).concat(componentComponentNameAng).concat(",");
+      let mapFullAng = "\"".concat(getSpecialCase(originalComponentName, framework)).concat("\" : " ).concat(componentComponentNameAng).concat(",");
 
       if (mapDataAng.indexOf(importComponentAng.concat(".component")) < 0) {
         // not present so we can add
@@ -222,8 +243,8 @@ export const deleteFromComponentMap = async (componentKey, category = CATEGORY_C
 
 
       let importFull = "import ".concat(componentName).concat(" from '").concat(importComponent).concat("/';");
-      let mapFull = "\"".concat(componentNameNoPrefix).concat("\" : " ).concat(componentName).concat(",");
-      let mapFullPretty = componentNameNoPrefix.concat(": ").concat(componentName);
+      let mapFull = "\"".concat(getSpecialCase(componentNameNoPrefix, framework)).concat("\" : " ).concat(componentName).concat(",");
+      let mapFullPretty = getSpecialCase(componentNameNoPrefix, framework).concat(": ").concat(componentName);
 
       if (mapData.indexOf(importFull) >= 0) {
 
@@ -267,9 +288,9 @@ export const deleteFromComponentMap = async (componentKey, category = CATEGORY_C
 
 
       let importFullAng = "import { ".concat(componentComponentNameAng).concat(" } from '").concat(importComponentAng).concat(".component';");
-      let mapFullAng = "\"".concat(originalComponentName).concat("\" : " ).concat(componentComponentNameAng).concat(",");
+      let mapFullAng = "\"".concat(getSpecialCase(originalComponentName, framework)).concat("\" : " ).concat(componentComponentNameAng).concat(",");
 
-      let mapFullAngPretty = originalComponentName.concat(": ").concat(componentComponentNameAng);
+      let mapFullAngPretty = getSpecialCase(originalComponentName, framework).concat(": ").concat(componentComponentNameAng);
 
       if (mapDataAng.indexOf(importFullAng) >= 0) {
 
@@ -332,7 +353,7 @@ export const renameComponentInMap = async (oldComponentKey, newComponentKey) =>
         mapData = mapData.replaceAll( '"' + oldComponentNameNoPrefix + '"' , '"' + newComponentNameNoPrefix + '"');
 
         // pretty
-        mapData = mapData.replaceAll( oldComponentNameNoPrefix + ':' , newComponentNameNoPrefix + ':');
+        mapData = mapData.replaceAll( getSpecialCase(oldComponentNameNoPrefix, framework) + ':' , getSpecialCase(newComponentNameNoPrefix, framework) + ':');
 
         // prettier
         mapData = await getPrettierFormattedString(mapData);
@@ -369,7 +390,7 @@ export const renameComponentInMap = async (oldComponentKey, newComponentKey) =>
         mapDataAng = mapDataAng.replaceAll( oldComponentNameAng + 'Component' , newComponentNameAng + 'Component');
 
         // pretty
-        mapDataAng = mapDataAng.replaceAll( oldComponentNameNoPrefixAng + ':' , newComponentNameNoPrefixAng + ':');
+        mapDataAng = mapDataAng.replaceAll( getSpecialCase(oldComponentNameNoPrefixAng, framework) + ':' , getSpecialCase(newComponentNameNoPrefixAng, framework) + ':');
 
         // prettier
         mapDataAng = await getPrettierFormattedString(mapDataAng);

package/tests/assets/sdk-r/components/create/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/create/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);

package/tests/assets/sdk-r/components/create/override-sdk/field/Decimal/Decimal.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';
@@ -7,7 +6,9 @@ import { format } from '@pega/react-sdk-components/lib/components/helpers/format
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-// 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 DecimalProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Decimal here
@@ -45,14 +46,9 @@ export default function Decimal(props: DecimalProps) {
   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/create/override-sdk/field/Group/Group.tsx

@@ -29,6 +29,8 @@ export default function Group(props: GroupProps) {
     );
   }, [children, type, isReadOnly]);
 
+  if (!children) return null;
+
   return (
     <FieldGroup name={showHeading ? heading : undefined} collapsible={collapsible} instructions={instructions}>
       {content}