@pega/react-sdk-components 0.23.1 → 0.23.2

package/lib/components/forms/Checkbox/Checkbox.js

@@ -28,7 +28,7 @@ export default function CheckboxComponent(props) {
     }
     return (React.createElement(FormControl, { required: required, error: status === 'error' },
         React.createElement(FormGroup, null,
-            React.createElement(FormControlLabel, { control: theCheckbox, checked: checked, onChange: !readOnly ? handleChange : undefined, onBlur: handleBlur, label: caption, labelPlacement: 'end', "data-test-id": testId })),
+            React.createElement(FormControlLabel, { control: theCheckbox, checked: checked, onChange: !readOnly ? handleChange : undefined, onBlur: !readOnly ? handleBlur : undefined, label: caption, labelPlacement: 'end', "data-test-id": testId })),
         React.createElement(FormHelperText, null, helperTextToDisplay)));
 }
 //# sourceMappingURL=Checkbox.js.map

package/lib/components/forms/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/forms/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EACL,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,SAAS,EACT,cAAc,EACf,MAAM,mBAAmB,CAAC;AAC3B,OAAO,WAAW,MAAM,2BAA2B,CAAC;AAEpD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAAK;IAC7C,MAAM,EACJ,WAAW,EACX,KAAK,GAAG,KAAK,EACb,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,UAAU,EACV,eAAe,EAChB,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,cAAc,GAAG,QAAQ,CAAC,cAAc,EAAE,CAAC;IACjD,MAAM,EAAE,OAAO,EAAE,GAAG,cAAc,CAAC;IACnC,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,EAAE,CAAC;IAC5C,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,CAAC;IAEhD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,SAAS,CAAC,GAAG,EAAE;QACb,+FAA+F;QAC/F,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,YAAY,GAAG,KAAK,CAAC,EAAE;QAC3B,WAAW,CAAC,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACzE,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE;QACzB,QAAQ,CAAC,gBAAgB,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAC7D,CAAC,CAAC;IAEF,IAAI,WAAW,GAAG,oBAAC,QAAQ,IAAC,KAAK,EAAC,SAAS,GAAG,CAAC;IAE/C,IAAI,QAAQ,EAAE;QACZ,sGAAsG;QACtG,yGAAyG;QACzG,WAAW,GAAG,oBAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAAI,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;KAC/F;IAED,OAAO,CACL,oBAAC,WAAW,IAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO;QACxD,oBAAC,SAAS;YACR,oBAAC,gBAAgB,IACf,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EAC9C,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE,OAAO,EACd,cAAc,EAAC,KAAK,kBACN,MAAM,GACpB,CACQ;QACZ,oBAAC,cAAc,QAAE,mBAAmB,CAAkB,CAC1C,CACf,CAAC;AACJ,CAAC","sourcesContent":["import React, { useState, useEffect } from 'react';\nimport {\n  Checkbox,\n  FormControl,\n  FormControlLabel,\n  FormGroup,\n  FormHelperText\n} from '@material-ui/core';\nimport handleEvent from '../../helpers/event-utils';\n\nexport default function CheckboxComponent(props) {\n  const {\n    getPConnect,\n    value = false,\n    readOnly,\n    testId,\n    required,\n    status,\n    helperText,\n    validatemessage\n  } = props;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  const thePConn = getPConnect();\n  const theConfigProps = thePConn.getConfigProps();\n  const { caption } = theConfigProps;\n  const actionsApi = thePConn.getActionsApi();\n  const propName = thePConn.getStateProps().value;\n\n  const [checked, setChecked] = useState(false);\n  useEffect(() => {\n    // This update theSelectedButton which will update the UI to show the selected button correctly\n    setChecked(value);\n  }, [value]);\n\n  const handleChange = event => {\n    handleEvent(actionsApi, 'changeNblur', propName, event.target.checked);\n  };\n\n  const handleBlur = event => {\n    thePConn.getValidationApi().validate(event.target.checked);\n  };\n\n  let theCheckbox = <Checkbox color='primary' />;\n\n  if (readOnly) {\n    // Workaround for lack of InputProps readOnly from https://github.com/mui-org/material-ui/issues/17043\n    //  Also note that we need to turn off the onChange call in the FormControlLabel wrapper, too. See below!\n    theCheckbox = <Checkbox value={value || false} onChange={handleChange} readOnly={readOnly} />;\n  }\n\n  return (\n    <FormControl required={required} error={status === 'error'}>\n      <FormGroup>\n        <FormControlLabel\n          control={theCheckbox}\n          checked={checked}\n          onChange={!readOnly ? handleChange : undefined}\n          onBlur={handleBlur}\n          label={caption}\n          labelPlacement='end'\n          data-test-id={testId}\n        />\n      </FormGroup>\n      <FormHelperText>{helperTextToDisplay}</FormHelperText>\n    </FormControl>\n  );\n}\n"]}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/forms/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EACL,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,SAAS,EACT,cAAc,EACf,MAAM,mBAAmB,CAAC;AAC3B,OAAO,WAAW,MAAM,2BAA2B,CAAC;AAEpD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAAK;IAC7C,MAAM,EACJ,WAAW,EACX,KAAK,GAAG,KAAK,EACb,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,UAAU,EACV,eAAe,EAChB,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,cAAc,GAAG,QAAQ,CAAC,cAAc,EAAE,CAAC;IACjD,MAAM,EAAE,OAAO,EAAE,GAAG,cAAc,CAAC;IACnC,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,EAAE,CAAC;IAC5C,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,CAAC;IAEhD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,SAAS,CAAC,GAAG,EAAE;QACb,+FAA+F;QAC/F,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,YAAY,GAAG,KAAK,CAAC,EAAE;QAC3B,WAAW,CAAC,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACzE,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE;QACzB,QAAQ,CAAC,gBAAgB,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAC7D,CAAC,CAAC;IAEF,IAAI,WAAW,GAAG,oBAAC,QAAQ,IAAC,KAAK,EAAC,SAAS,GAAG,CAAC;IAE/C,IAAI,QAAQ,EAAE;QACZ,sGAAsG;QACtG,yGAAyG;QACzG,WAAW,GAAG,oBAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAAI,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;KAC/F;IAED,OAAO,CACL,oBAAC,WAAW,IAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO;QACxD,oBAAC,SAAS;YACR,oBAAC,gBAAgB,IACf,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EAC9C,MAAM,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAC1C,KAAK,EAAE,OAAO,EACd,cAAc,EAAC,KAAK,kBACN,MAAM,GACpB,CACQ;QACZ,oBAAC,cAAc,QAAE,mBAAmB,CAAkB,CAC1C,CACf,CAAC;AACJ,CAAC","sourcesContent":["import React, { useState, useEffect } from 'react';\nimport {\n  Checkbox,\n  FormControl,\n  FormControlLabel,\n  FormGroup,\n  FormHelperText\n} from '@material-ui/core';\nimport handleEvent from '../../helpers/event-utils';\n\nexport default function CheckboxComponent(props) {\n  const {\n    getPConnect,\n    value = false,\n    readOnly,\n    testId,\n    required,\n    status,\n    helperText,\n    validatemessage\n  } = props;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  const thePConn = getPConnect();\n  const theConfigProps = thePConn.getConfigProps();\n  const { caption } = theConfigProps;\n  const actionsApi = thePConn.getActionsApi();\n  const propName = thePConn.getStateProps().value;\n\n  const [checked, setChecked] = useState(false);\n  useEffect(() => {\n    // This update theSelectedButton which will update the UI to show the selected button correctly\n    setChecked(value);\n  }, [value]);\n\n  const handleChange = event => {\n    handleEvent(actionsApi, 'changeNblur', propName, event.target.checked);\n  };\n\n  const handleBlur = event => {\n    thePConn.getValidationApi().validate(event.target.checked);\n  };\n\n  let theCheckbox = <Checkbox color='primary' />;\n\n  if (readOnly) {\n    // Workaround for lack of InputProps readOnly from https://github.com/mui-org/material-ui/issues/17043\n    //  Also note that we need to turn off the onChange call in the FormControlLabel wrapper, too. See below!\n    theCheckbox = <Checkbox value={value || false} onChange={handleChange} readOnly={readOnly} />;\n  }\n\n  return (\n    <FormControl required={required} error={status === 'error'}>\n      <FormGroup>\n        <FormControlLabel\n          control={theCheckbox}\n          checked={checked}\n          onChange={!readOnly ? handleChange : undefined}\n          onBlur={!readOnly ? handleBlur : undefined}\n          label={caption}\n          labelPlacement='end'\n          data-test-id={testId}\n        />\n      </FormGroup>\n      <FormHelperText>{helperTextToDisplay}</FormHelperText>\n    </FormControl>\n  );\n}\n"]}

package/lib/components/forms/Currency/Currency.js

@@ -41,6 +41,6 @@ export default function Currency(props) {
         // console.log(`Currency currOnBlur inValue: ${inValue}`);
         handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);
     }
-    return (React.createElement(CurrencyTextField, { fullWidth: true, variant: readOnly ? 'standard' : 'outlined', helperText: helperTextToDisplay, placeholder: '', size: 'small', required: required, disabled: disabled, onChange: currOnChange, onBlur: currOnBlur, error: status === 'error', label: label, value: currValue, type: 'text', outputFormat: 'number', textAlign: 'left', InputProps: { ...readOnlyProp, inputProps: { ...testProp, value: currValue } } }));
+    return (React.createElement(CurrencyTextField, { fullWidth: true, variant: readOnly ? 'standard' : 'outlined', helperText: helperTextToDisplay, placeholder: '', size: 'small', required: required, disabled: disabled, onChange: currOnChange, onBlur: !readOnly ? currOnBlur : undefined, error: status === 'error', label: label, value: currValue, type: 'text', outputFormat: 'number', textAlign: 'left', InputProps: { ...readOnlyProp, inputProps: { ...testProp, value: currValue } } }));
 }
 //# sourceMappingURL=Currency.js.map

package/lib/components/forms/Currency/Currency.js.map

@@ -1 +1 @@
-{"version":3,"file":"Currency.js","sourceRoot":"","sources":["../../../../src/components/forms/Currency/Currency.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,iDAAiD;AACjD,OAAO,iBAAiB,MAAM,wCAAwC,CAAC;AACvE,OAAO,WAAW,MAAM,2BAA2B,CAAC;AACpD,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAEzE,+EAA+E;AAE/E,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK;IACpC,MAAM,EACJ,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM;IACN,uBAAuB;IACvB,QAAQ,EACR,MAAM,EACN,UAAU,EACV,WAAW,EACZ,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,WAAW,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,EAAE,CAAC;IACtC,MAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,EAAE,CAAC,KAAK,CAAC;IAC7C,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,4DAA4D;IAE5D,IAAI,YAAY,GAAG,EAAE,CAAC,CAAC,8BAA8B;IAErD,IAAI,QAAQ,EAAE;QACZ,YAAY,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;KACnC;IAED,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,QAAQ,GAAG;QACT,cAAc,EAAE,MAAM;KACvB,CAAC;IAEF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAE,CAAC;IAE7C,SAAS,CAAC,GAAG,EAAE;QACb,yBAAyB;QACzB,YAAY,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;IACjC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,IAAG,WAAW,KAAK,aAAa,EAAC;QAC/B,MAAM,KAAK,GAAG;YACZ,CAAC,KAAK,CAAC,EAAE,KAAK;SACf,CAAC;QACF,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,KAAK,GAAG,CAAA;KACtC;IAED,SAAS,YAAY,CAAC,KAAK,EAAE,OAAO;QAClC,4DAA4D;QAE5D,wBAAwB;QACxB,YAAY,CAAC,OAAO,CAAC,CAAC;IACxB,CAAC;IAED,SAAS,UAAU,CAAC,KAAK,EAAE,OAAO;QAChC,0DAA0D;QAC1D,WAAW,CAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,KAAK,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAC5F,CAAC;IAED,OAAO,CACL,oBAAC,iBAAiB,IAChB,SAAS,QACT,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,EAC3C,UAAU,EAAE,mBAAmB,EAC/B,WAAW,EAAC,EAAE,EACd,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,SAAS,EAChB,IAAI,EAAC,MAAM,EACX,YAAY,EAAC,QAAQ,EACrB,SAAS,EAAC,MAAM,EAChB,UAAU,EAAE,EAAE,GAAG,YAAY,EAAE,UAAU,EAAE,EAAE,GAAG,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,GAC9E,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React, { useState, useEffect } from 'react';\n// import { TextField } from \"@material-ui/core\";\nimport CurrencyTextField from '@unicef/material-ui-currency-textfield';\nimport handleEvent from '../../helpers/event-utils';\nimport FieldValueList from '../../designSystemExtensions/FieldValueList';\n\n// Using control from: https://github.com/unicef/material-ui-currency-textfield\n\nexport default function Currency(props) {\n  const {\n    getPConnect,\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    /* onChange, onBlur, */\n    readOnly,\n    testId,\n    helperText,\n    displayMode\n  } = props;\n  const pConn = getPConnect();\n  const actions = pConn.getActionsApi();\n  const propName = pConn.getStateProps().value;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  // console.log(`Currency: label: ${label} value: ${value}`);\n\n  let readOnlyProp = {}; // Note: empty if NOT ReadOnly\n\n  if (readOnly) {\n    readOnlyProp = { readOnly: true };\n  }\n\n  let testProp = {};\n\n  testProp = {\n    'data-test-id': testId\n  };\n\n  const [currValue, setCurrValue] = useState();\n\n  useEffect(() => {\n    // const testVal = value;\n    setCurrValue(value.toString());\n  }, [value]);\n\n  if(displayMode === 'LABELS_LEFT'){\n    const field = {\n      [label]: value\n    };\n    return <FieldValueList item={field}/>\n  }\n\n  function currOnChange(event, inValue) {\n    // console.log(`Currency currOnChange inValue: ${inValue}`);\n\n    // update internal value\n    setCurrValue(inValue);\n  }\n\n  function currOnBlur(event, inValue) {\n    // console.log(`Currency currOnBlur inValue: ${inValue}`);\n    handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);\n  }\n\n  return (\n    <CurrencyTextField\n      fullWidth\n      variant={readOnly ? 'standard' : 'outlined'}\n      helperText={helperTextToDisplay}\n      placeholder=''\n      size='small'\n      required={required}\n      disabled={disabled}\n      onChange={currOnChange}\n      onBlur={currOnBlur}\n      error={status === 'error'}\n      label={label}\n      value={currValue}\n      type='text'\n      outputFormat='number'\n      textAlign='left'\n      InputProps={{ ...readOnlyProp, inputProps: { ...testProp, value: currValue } }}\n    />\n  );\n}\n"]}
+{"version":3,"file":"Currency.js","sourceRoot":"","sources":["../../../../src/components/forms/Currency/Currency.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,iDAAiD;AACjD,OAAO,iBAAiB,MAAM,wCAAwC,CAAC;AACvE,OAAO,WAAW,MAAM,2BAA2B,CAAC;AACpD,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAEzE,+EAA+E;AAE/E,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK;IACpC,MAAM,EACJ,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM;IACN,uBAAuB;IACvB,QAAQ,EACR,MAAM,EACN,UAAU,EACV,WAAW,EACZ,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,WAAW,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,EAAE,CAAC;IACtC,MAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,EAAE,CAAC,KAAK,CAAC;IAC7C,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,4DAA4D;IAE5D,IAAI,YAAY,GAAG,EAAE,CAAC,CAAC,8BAA8B;IAErD,IAAI,QAAQ,EAAE;QACZ,YAAY,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;KACnC;IAED,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,QAAQ,GAAG;QACT,cAAc,EAAE,MAAM;KACvB,CAAC;IAEF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAE,CAAC;IAE7C,SAAS,CAAC,GAAG,EAAE;QACb,yBAAyB;QACzB,YAAY,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;IACjC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,IAAG,WAAW,KAAK,aAAa,EAAE;QAChC,MAAM,KAAK,GAAG;YACZ,CAAC,KAAK,CAAC,EAAE,KAAK;SACf,CAAC;QACF,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,KAAK,GAAI,CAAA;KACvC;IAED,SAAS,YAAY,CAAC,KAAK,EAAE,OAAO;QAClC,4DAA4D;QAE5D,wBAAwB;QACxB,YAAY,CAAC,OAAO,CAAC,CAAC;IACxB,CAAC;IAED,SAAS,UAAU,CAAC,KAAK,EAAE,OAAO;QAChC,0DAA0D;QAC1D,WAAW,CAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,KAAK,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAC5F,CAAC;IAED,OAAO,CACL,oBAAC,iBAAiB,IAChB,SAAS,QACT,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,EAC3C,UAAU,EAAE,mBAAmB,EAC/B,WAAW,EAAC,EAAE,EACd,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAC1C,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,SAAS,EAChB,IAAI,EAAC,MAAM,EACX,YAAY,EAAC,QAAQ,EACrB,SAAS,EAAC,MAAM,EAChB,UAAU,EAAE,EAAE,GAAG,YAAY,EAAE,UAAU,EAAE,EAAE,GAAG,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,GAC9E,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React, { useState, useEffect } from 'react';\n// import { TextField } from \"@material-ui/core\";\nimport CurrencyTextField from '@unicef/material-ui-currency-textfield';\nimport handleEvent from '../../helpers/event-utils';\nimport FieldValueList from '../../designSystemExtensions/FieldValueList';\n\n// Using control from: https://github.com/unicef/material-ui-currency-textfield\n\nexport default function Currency(props) {\n  const {\n    getPConnect,\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    /* onChange, onBlur, */\n    readOnly,\n    testId,\n    helperText,\n    displayMode\n  } = props;\n  const pConn = getPConnect();\n  const actions = pConn.getActionsApi();\n  const propName = pConn.getStateProps().value;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  // console.log(`Currency: label: ${label} value: ${value}`);\n\n  let readOnlyProp = {}; // Note: empty if NOT ReadOnly\n\n  if (readOnly) {\n    readOnlyProp = { readOnly: true };\n  }\n\n  let testProp = {};\n\n  testProp = {\n    'data-test-id': testId\n  };\n\n  const [currValue, setCurrValue] = useState();\n\n  useEffect(() => {\n    // const testVal = value;\n    setCurrValue(value.toString());\n  }, [value]);\n\n  if(displayMode === 'LABELS_LEFT') {\n    const field = {\n      [label]: value\n    };\n    return <FieldValueList item={field} />\n  }\n\n  function currOnChange(event, inValue) {\n    // console.log(`Currency currOnChange inValue: ${inValue}`);\n\n    // update internal value\n    setCurrValue(inValue);\n  }\n\n  function currOnBlur(event, inValue) {\n    // console.log(`Currency currOnBlur inValue: ${inValue}`);\n    handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);\n  }\n\n  return (\n    <CurrencyTextField\n      fullWidth\n      variant={readOnly ? 'standard' : 'outlined'}\n      helperText={helperTextToDisplay}\n      placeholder=''\n      size='small'\n      required={required}\n      disabled={disabled}\n      onChange={currOnChange}\n      onBlur={!readOnly ? currOnBlur : undefined}\n      error={status === 'error'}\n      label={label}\n      value={currValue}\n      type='text'\n      outputFormat='number'\n      textAlign='left'\n      InputProps={{ ...readOnlyProp, inputProps: { ...testProp, value: currValue } }}\n    />\n  );\n}\n"]}

package/lib/components/forms/Date/Date.js

@@ -31,6 +31,6 @@ export default function Date(props) {
         const changeValue = date && date.isValid() ? date.toISOString() : null;
         handleEvent(actions, 'changeNblur', propName, changeValue);
     };
-    return (React.createElement(KeyboardDatePicker, { disableToolbar: true, variant: 'inline', inputVariant: 'outlined', placeholder: 'mm/dd/yyyy', fullWidth: true, autoOk: true, required: required, disabled: disabled, format: 'MM/DD/YYYY', mask: '__/__/____', error: status === 'error', helperText: helperTextToDisplay, size: 'small', label: label, value: value || null, onChange: handleChange, onBlur: onBlur, onAccept: handleAccept, InputProps: { ...testProp } }));
+    return (React.createElement(KeyboardDatePicker, { disableToolbar: true, variant: 'inline', inputVariant: 'outlined', placeholder: 'mm/dd/yyyy', fullWidth: true, autoOk: true, required: required, disabled: disabled, format: 'MM/DD/YYYY', mask: '__/__/____', error: status === 'error', helperText: helperTextToDisplay, size: 'small', label: label, value: value || null, onChange: handleChange, onBlur: !readOnly ? onBlur : undefined, onAccept: handleAccept, InputProps: { ...testProp } }));
 }
 //# sourceMappingURL=Date.js.map

package/lib/components/forms/Date/Date.js.map

@@ -1 +1 @@
-{"version":3,"file":"Date.js","sourceRoot":"","sources":["../../../../src/components/forms/Date/Date.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,WAAW,MAAM,2BAA2B,CAAC;AACpD,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAEzE,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK;IAChC,MAAM,EACJ,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,UAAU,EACV,WAAW,EACZ,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,WAAW,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,EAAE,CAAC;IACtC,MAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,EAAE,CAAC,KAAK,CAAC;IAC7C,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,IAAG,WAAW,KAAK,aAAa,EAAC;QAC/B,MAAM,KAAK,GAAG;YACZ,CAAC,KAAK,CAAC,EAAE,KAAK;SACf,CAAC;QACF,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,KAAK,GAAG,CAAA;KACtC;IAED,IAAI,QAAQ,EAAE;QACZ,8CAA8C;QAC9C,OAAO,oBAAC,SAAS,OAAK,KAAK,GAAI,CAAC;KACjC;IAED,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,QAAQ,GAAG;QACT,cAAc,EAAE,MAAM;KACvB,CAAC;IAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;QAC1B,MAAM,WAAW,GAAG,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QACvE,QAAQ,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;QAC1B,MAAM,WAAW,GAAG,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QACvE,WAAW,CAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;IAC7D,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,kBAAkB,IACjB,cAAc,QACd,OAAO,EAAC,QAAQ,EAChB,YAAY,EAAC,UAAU,EACvB,WAAW,EAAC,YAAY,EACxB,SAAS,QACT,MAAM,QACN,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAC,YAAY,EACnB,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,UAAU,EAAE,mBAAmB,EAC/B,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,IAAI,IAAI,EACpB,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,YAAY,EACtB,UAAU,EAAE,EAAE,GAAG,QAAQ,EAAE,GAC3B,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { KeyboardDatePicker } from '@material-ui/pickers';\nimport TextInput from '../TextInput';\nimport handleEvent from '../../helpers/event-utils';\nimport FieldValueList from '../../designSystemExtensions/FieldValueList';\n\nexport default function Date(props) {\n  const {\n    getPConnect,\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    onChange,\n    onBlur,\n    readOnly,\n    testId,\n    helperText,\n    displayMode\n  } = props;\n  const pConn = getPConnect();\n  const actions = pConn.getActionsApi();\n  const propName = pConn.getStateProps().value;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  if(displayMode === 'LABELS_LEFT'){\n    const field = {\n      [label]: value\n    };\n    return <FieldValueList item={field}/>\n  }\n\n  if (readOnly) {\n    // const theReadOnlyComp = <TextInput props />\n    return <TextInput {...props} />;\n  }\n\n  let testProp = {};\n\n  testProp = {\n    'data-test-id': testId\n  };\n\n  const handleChange = date => {\n    const changeValue = date && date.isValid() ? date.toISOString() : null;\n    onChange({ value: changeValue });\n  };\n\n  const handleAccept = date => {\n    const changeValue = date && date.isValid() ? date.toISOString() : null;\n    handleEvent(actions, 'changeNblur', propName, changeValue);\n  };\n\n  return (\n    <KeyboardDatePicker\n      disableToolbar\n      variant='inline'\n      inputVariant='outlined'\n      placeholder='mm/dd/yyyy'\n      fullWidth\n      autoOk\n      required={required}\n      disabled={disabled}\n      format='MM/DD/YYYY'\n      mask='__/__/____'\n      error={status === 'error'}\n      helperText={helperTextToDisplay}\n      size='small'\n      label={label}\n      value={value || null}\n      onChange={handleChange}\n      onBlur={onBlur}\n      onAccept={handleAccept}\n      InputProps={{ ...testProp }}\n    />\n  );\n}\n"]}
+{"version":3,"file":"Date.js","sourceRoot":"","sources":["../../../../src/components/forms/Date/Date.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,WAAW,MAAM,2BAA2B,CAAC;AACpD,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAEzE,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK;IAChC,MAAM,EACJ,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,UAAU,EACV,WAAW,EACZ,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,WAAW,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,EAAE,CAAC;IACtC,MAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,EAAE,CAAC,KAAK,CAAC;IAC7C,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,IAAG,WAAW,KAAK,aAAa,EAAE;QAChC,MAAM,KAAK,GAAG;YACZ,CAAC,KAAK,CAAC,EAAE,KAAK;SACf,CAAC;QACF,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,KAAK,GAAI,CAAA;KACvC;IAED,IAAI,QAAQ,EAAE;QACZ,8CAA8C;QAC9C,OAAO,oBAAC,SAAS,OAAK,KAAK,GAAI,CAAC;KACjC;IAED,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,QAAQ,GAAG;QACT,cAAc,EAAE,MAAM;KACvB,CAAC;IAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;QAC1B,MAAM,WAAW,GAAG,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QACvE,QAAQ,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;QAC1B,MAAM,WAAW,GAAG,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QACvE,WAAW,CAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;IAC7D,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,kBAAkB,IACjB,cAAc,QACd,OAAO,EAAC,QAAQ,EAChB,YAAY,EAAC,UAAU,EACvB,WAAW,EAAC,YAAY,EACxB,SAAS,QACT,MAAM,QACN,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAC,YAAY,EACnB,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,UAAU,EAAE,mBAAmB,EAC/B,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,IAAI,IAAI,EACpB,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACtC,QAAQ,EAAE,YAAY,EACtB,UAAU,EAAE,EAAE,GAAG,QAAQ,EAAE,GAC3B,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { KeyboardDatePicker } from '@material-ui/pickers';\nimport TextInput from '../TextInput';\nimport handleEvent from '../../helpers/event-utils';\nimport FieldValueList from '../../designSystemExtensions/FieldValueList';\n\nexport default function Date(props) {\n  const {\n    getPConnect,\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    onChange,\n    onBlur,\n    readOnly,\n    testId,\n    helperText,\n    displayMode\n  } = props;\n  const pConn = getPConnect();\n  const actions = pConn.getActionsApi();\n  const propName = pConn.getStateProps().value;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  if(displayMode === 'LABELS_LEFT') {\n    const field = {\n      [label]: value\n    };\n    return <FieldValueList item={field} />\n  }\n\n  if (readOnly) {\n    // const theReadOnlyComp = <TextInput props />\n    return <TextInput {...props} />;\n  }\n\n  let testProp = {};\n\n  testProp = {\n    'data-test-id': testId\n  };\n\n  const handleChange = date => {\n    const changeValue = date && date.isValid() ? date.toISOString() : null;\n    onChange({ value: changeValue });\n  };\n\n  const handleAccept = date => {\n    const changeValue = date && date.isValid() ? date.toISOString() : null;\n    handleEvent(actions, 'changeNblur', propName, changeValue);\n  };\n\n  return (\n    <KeyboardDatePicker\n      disableToolbar\n      variant='inline'\n      inputVariant='outlined'\n      placeholder='mm/dd/yyyy'\n      fullWidth\n      autoOk\n      required={required}\n      disabled={disabled}\n      format='MM/DD/YYYY'\n      mask='__/__/____'\n      error={status === 'error'}\n      helperText={helperTextToDisplay}\n      size='small'\n      label={label}\n      value={value || null}\n      onChange={handleChange}\n      onBlur={!readOnly ? onBlur : undefined}\n      onAccept={handleAccept}\n      InputProps={{ ...testProp }}\n    />\n  );\n}\n"]}

package/lib/components/forms/Decimal/Decimal.js

@@ -14,6 +14,6 @@ export default function Decimal(props) {
     if (readOnly) {
         return React.createElement(TextInput, { ...props });
     }
-    return (React.createElement(TextField, { fullWidth: true, variant: readOnly ? 'standard' : 'outlined', helperText: helperTextToDisplay, placeholder: '', size: 'small', required: required, disabled: disabled, onChange: onChange, onBlur: onBlur, error: status === 'error', label: label, value: value, type: 'text', inputProps: { inputMode: 'decimal', pattern: '[0-9]*' } }));
+    return (React.createElement(TextField, { fullWidth: true, variant: readOnly ? 'standard' : 'outlined', helperText: helperTextToDisplay, placeholder: '', size: 'small', required: required, disabled: disabled, onChange: onChange, onBlur: !readOnly ? onBlur : undefined, error: status === 'error', label: label, value: value, type: 'text', inputProps: { inputMode: 'decimal', pattern: '[0-9]*' } }));
 }
 //# sourceMappingURL=Decimal.js.map

package/lib/components/forms/Decimal/Decimal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Decimal.js","sourceRoot":"","sources":["../../../../src/components/forms/Decimal/Decimal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAEzE,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK;IACnC,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,UAAU,EACV,WAAW,EACZ,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,IAAG,WAAW,KAAK,aAAa,EAAC;QAC/B,MAAM,KAAK,GAAG;YACZ,CAAC,KAAK,CAAC,EAAE,KAAK;SACf,CAAC;QACF,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,KAAK,GAAG,CAAA;KACtC;IAED,IAAI,QAAQ,EAAE;QACZ,OAAO,oBAAC,SAAS,OAAK,KAAK,GAAI,CAAC;KACjC;IAED,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,QACT,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,EAC3C,UAAU,EAAE,mBAAmB,EAC/B,WAAW,EAAC,EAAE,EACd,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GACvD,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { TextField } from '@material-ui/core';\nimport TextInput from '../TextInput';\nimport FieldValueList from '../../designSystemExtensions/FieldValueList';\n\nexport default function Decimal(props) {\n  const {\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    onChange,\n    onBlur,\n    readOnly,\n    helperText,\n    displayMode\n  } = props;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  if(displayMode === 'LABELS_LEFT'){\n    const field = {\n      [label]: value\n    };\n    return <FieldValueList item={field}/>\n  }\n\n  if (readOnly) {\n    return <TextInput {...props} />;\n  }\n\n  return (\n    <TextField\n      fullWidth\n      variant={readOnly ? 'standard' : 'outlined'}\n      helperText={helperTextToDisplay}\n      placeholder=''\n      size='small'\n      required={required}\n      disabled={disabled}\n      onChange={onChange}\n      onBlur={onBlur}\n      error={status === 'error'}\n      label={label}\n      value={value}\n      type='text'\n      inputProps={{ inputMode: 'decimal', pattern: '[0-9]*' }}\n    />\n  );\n}\n"]}
+{"version":3,"file":"Decimal.js","sourceRoot":"","sources":["../../../../src/components/forms/Decimal/Decimal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAEzE,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK;IACnC,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,UAAU,EACV,WAAW,EACZ,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,IAAG,WAAW,KAAK,aAAa,EAAE;QAChC,MAAM,KAAK,GAAG;YACZ,CAAC,KAAK,CAAC,EAAE,KAAK;SACf,CAAC;QACF,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,KAAK,GAAI,CAAA;KACvC;IAED,IAAI,QAAQ,EAAE;QACZ,OAAO,oBAAC,SAAS,OAAK,KAAK,GAAI,CAAC;KACjC;IAED,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,QACT,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,EAC3C,UAAU,EAAE,mBAAmB,EAC/B,WAAW,EAAC,EAAE,EACd,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACtC,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GACvD,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { TextField } from '@material-ui/core';\nimport TextInput from '../TextInput';\nimport FieldValueList from '../../designSystemExtensions/FieldValueList';\n\nexport default function Decimal(props) {\n  const {\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    onChange,\n    onBlur,\n    readOnly,\n    helperText,\n    displayMode\n  } = props;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  if(displayMode === 'LABELS_LEFT') {\n    const field = {\n      [label]: value\n    };\n    return <FieldValueList item={field} />\n  }\n\n  if (readOnly) {\n    return <TextInput {...props} />;\n  }\n\n  return (\n    <TextField\n      fullWidth\n      variant={readOnly ? 'standard' : 'outlined'}\n      helperText={helperTextToDisplay}\n      placeholder=''\n      size='small'\n      required={required}\n      disabled={disabled}\n      onChange={onChange}\n      onBlur={!readOnly ? onBlur : undefined}\n      error={status === 'error'}\n      label={label}\n      value={value}\n      type='text'\n      inputProps={{ inputMode: 'decimal', pattern: '[0-9]*' }}\n    />\n  );\n}\n"]}

package/lib/components/forms/Email/Email.js

@@ -19,7 +19,7 @@ export default function Email(props) {
     testProp = {
         'data-test-id': testId
     };
-    return (React.createElement(TextField, { fullWidth: true, variant: 'outlined', helperText: helperTextToDisplay, placeholder: '', size: 'small', required: required, disabled: disabled, onChange: onChange, onBlur: onBlur, error: status === 'error', label: label, value: value, type: 'email', InputProps: {
+    return (React.createElement(TextField, { fullWidth: true, variant: 'outlined', helperText: helperTextToDisplay, placeholder: '', size: 'small', required: required, disabled: disabled, onChange: onChange, onBlur: !readOnly ? onBlur : undefined, error: status === 'error', label: label, value: value, type: 'email', InputProps: {
             startAdornment: (React.createElement(InputAdornment, { position: 'start' },
                 React.createElement(MailOutlineIcon, null))),
             inputProps: { ...testProp }

package/lib/components/forms/Email/Email.js.map

@@ -1 +1 @@
-{"version":3,"file":"Email.js","sourceRoot":"","sources":["../../../../src/components/forms/Email/Email.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,eAAe,MAAM,gCAAgC,CAAC;AAC7D,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAEzE,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAK;IACjC,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,UAAU,EACV,WAAW,EACZ,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,IAAG,WAAW,KAAK,aAAa,EAAC;QAC/B,MAAM,KAAK,GAAG;YACZ,CAAC,KAAK,CAAC,EAAE,KAAK;SACf,CAAC;QACF,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,KAAK,GAAG,CAAA;KACtC;IAED,IAAI,QAAQ,EAAE;QACZ,OAAO,oBAAC,SAAS,OAAK,KAAK,GAAI,CAAC;KACjC;IAID,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,QAAQ,GAAG;QACT,cAAc,EAAE,MAAM;KACvB,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,QACT,OAAO,EAAC,UAAU,EAClB,UAAU,EAAE,mBAAmB,EAC/B,WAAW,EAAC,EAAE,EACd,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE;YACV,cAAc,EAAE,CACd,oBAAC,cAAc,IAAC,QAAQ,EAAC,OAAO;gBAC9B,oBAAC,eAAe,OAAG,CACJ,CAClB;YACD,UAAU,EAAE,EAAE,GAAG,QAAQ,EAAE;SAC5B,GACD,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { TextField, InputAdornment } from '@material-ui/core';\nimport MailOutlineIcon from '@material-ui/icons/MailOutline';\nimport TextInput from '../TextInput';\nimport FieldValueList from '../../designSystemExtensions/FieldValueList';\n\nexport default function Email(props) {\n  const {\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    onChange,\n    onBlur,\n    readOnly,\n    testId,\n    helperText,\n    displayMode\n  } = props;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  if(displayMode === 'LABELS_LEFT'){\n    const field = {\n      [label]: value\n    };\n    return <FieldValueList item={field}/>\n  }\n\n  if (readOnly) {\n    return <TextInput {...props} />;\n  }\n\n\n\n  let testProp = {};\n\n  testProp = {\n    'data-test-id': testId\n  };\n\n  return (\n    <TextField\n      fullWidth\n      variant='outlined'\n      helperText={helperTextToDisplay}\n      placeholder=''\n      size='small'\n      required={required}\n      disabled={disabled}\n      onChange={onChange}\n      onBlur={onBlur}\n      error={status === 'error'}\n      label={label}\n      value={value}\n      type='email'\n      InputProps={{\n        startAdornment: (\n          <InputAdornment position='start'>\n            <MailOutlineIcon />\n          </InputAdornment>\n        ),\n        inputProps: { ...testProp }\n      }}\n    />\n  );\n}\n"]}
+{"version":3,"file":"Email.js","sourceRoot":"","sources":["../../../../src/components/forms/Email/Email.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,eAAe,MAAM,gCAAgC,CAAC;AAC7D,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAEzE,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAK;IACjC,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,UAAU,EACV,WAAW,EACZ,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,IAAG,WAAW,KAAK,aAAa,EAAE;QAChC,MAAM,KAAK,GAAG;YACZ,CAAC,KAAK,CAAC,EAAE,KAAK;SACf,CAAC;QACF,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,KAAK,GAAI,CAAA;KACvC;IAED,IAAI,QAAQ,EAAE;QACZ,OAAO,oBAAC,SAAS,OAAK,KAAK,GAAI,CAAC;KACjC;IAID,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,QAAQ,GAAG;QACT,cAAc,EAAE,MAAM;KACvB,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,QACT,OAAO,EAAC,UAAU,EAClB,UAAU,EAAE,mBAAmB,EAC/B,WAAW,EAAC,EAAE,EACd,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACtC,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE;YACV,cAAc,EAAE,CACd,oBAAC,cAAc,IAAC,QAAQ,EAAC,OAAO;gBAC9B,oBAAC,eAAe,OAAG,CACJ,CAClB;YACD,UAAU,EAAE,EAAE,GAAG,QAAQ,EAAE;SAC5B,GACD,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { TextField, InputAdornment } from '@material-ui/core';\nimport MailOutlineIcon from '@material-ui/icons/MailOutline';\nimport TextInput from '../TextInput';\nimport FieldValueList from '../../designSystemExtensions/FieldValueList';\n\nexport default function Email(props) {\n  const {\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    onChange,\n    onBlur,\n    readOnly,\n    testId,\n    helperText,\n    displayMode\n  } = props;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  if(displayMode === 'LABELS_LEFT') {\n    const field = {\n      [label]: value\n    };\n    return <FieldValueList item={field} />\n  }\n\n  if (readOnly) {\n    return <TextInput {...props} />;\n  }\n\n\n\n  let testProp = {};\n\n  testProp = {\n    'data-test-id': testId\n  };\n\n  return (\n    <TextField\n      fullWidth\n      variant='outlined'\n      helperText={helperTextToDisplay}\n      placeholder=''\n      size='small'\n      required={required}\n      disabled={disabled}\n      onChange={onChange}\n      onBlur={!readOnly ? onBlur : undefined}\n      error={status === 'error'}\n      label={label}\n      value={value}\n      type='email'\n      InputProps={{\n        startAdornment: (\n          <InputAdornment position='start'>\n            <MailOutlineIcon />\n          </InputAdornment>\n        ),\n        inputProps: { ...testProp }\n      }}\n    />\n  );\n}\n"]}

package/lib/components/forms/Integer/Integer.js

@@ -32,6 +32,6 @@ export default function Integer(props) {
         // Pass through to the Constellation change handler
         onChange(event);
     }
-    return (React.createElement(TextField, { fullWidth: true, variant: readOnly ? 'standard' : 'outlined', helperText: helperTextToDisplay, placeholder: '', size: 'small', required: required, disabled: disabled, onChange: intOnChange, onBlur: onBlur, error: status === 'error', label: label, value: value, type: 'text', inputProps: { inputMode: 'numeric', pattern: '[0-9]*', ...testProp } }));
+    return (React.createElement(TextField, { fullWidth: true, variant: readOnly ? 'standard' : 'outlined', helperText: helperTextToDisplay, placeholder: '', size: 'small', required: required, disabled: disabled, onChange: intOnChange, onBlur: !readOnly ? onBlur : undefined, error: status === 'error', label: label, value: value, type: 'text', inputProps: { inputMode: 'numeric', pattern: '[0-9]*', ...testProp } }));
 }
 //# sourceMappingURL=Integer.js.map

package/lib/components/forms/Integer/Integer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Integer.js","sourceRoot":"","sources":["../../../../src/components/forms/Integer/Integer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAEzE,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK;IACnC,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,UAAU,EACV,WAAW,EACZ,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,2DAA2D;IAE3D,IAAG,WAAW,KAAK,aAAa,EAAC;QAC/B,MAAM,KAAK,GAAG;YACZ,CAAC,KAAK,CAAC,EAAE,KAAK;SACf,CAAC;QACF,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,KAAK,GAAG,CAAA;KACtC;IAED,IAAI,QAAQ,EAAE;QACZ,OAAO,oBAAC,SAAS,OAAK,KAAK,GAAI,CAAC;KACjC;IAED,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,QAAQ,GAAG;QACT,cAAc,EAAE,MAAM;KACvB,CAAC;IAEF,SAAS,WAAW,CAAC,KAAK;QACxB,qEAAqE;QAErE,mEAAmE;QACnE,0FAA0F;QAC1F,MAAM,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;QACnC,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAC7C,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QAE7C,IAAI,eAAe,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;YACtC,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;SACrD;QAED,mDAAmD;QACnD,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClB,CAAC;IAED,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,QACT,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,EAC3C,UAAU,EAAE,mBAAmB,EAC/B,WAAW,EAAC,EAAE,EACd,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,WAAW,EACrB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,QAAQ,EAAE,GACpE,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { TextField } from '@material-ui/core';\nimport TextInput from '../TextInput';\nimport FieldValueList from '../../designSystemExtensions/FieldValueList';\n\nexport default function Integer(props) {\n  const {\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    onChange,\n    onBlur,\n    readOnly,\n    testId,\n    helperText,\n    displayMode\n  } = props;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  // console.log(`Integer: label: ${label} value: ${value}`);\n\n  if(displayMode === 'LABELS_LEFT'){\n    const field = {\n      [label]: value\n    };\n    return <FieldValueList item={field}/>\n  }\n\n  if (readOnly) {\n    return <TextInput {...props} />;\n  }\n\n  let testProp = {};\n\n  testProp = {\n    'data-test-id': testId\n  };\n\n  function intOnChange(event) {\n    // console.log(`Integer intOnChange inValue: ${event.target.value}`);\n\n    // Disallow \".\" and \",\" (separators) since this is an integer field\n    //  Mimics Pega Integer behavior (where separator characters are \"eaten\" if they're typed)\n    const disallowedChars = ['.', ','];\n    const theAttemptedValue = event.target.value;\n    const lastChar = theAttemptedValue.slice(-1);\n\n    if (disallowedChars.includes(lastChar)) {\n      event.target.value = theAttemptedValue.slice(0, -1);\n    }\n\n    // Pass through to the Constellation change handler\n    onChange(event);\n  }\n\n  return (\n    <TextField\n      fullWidth\n      variant={readOnly ? 'standard' : 'outlined'}\n      helperText={helperTextToDisplay}\n      placeholder=''\n      size='small'\n      required={required}\n      disabled={disabled}\n      onChange={intOnChange}\n      onBlur={onBlur}\n      error={status === 'error'}\n      label={label}\n      value={value}\n      type='text'\n      inputProps={{ inputMode: 'numeric', pattern: '[0-9]*', ...testProp }}\n    />\n  );\n}\n"]}
+{"version":3,"file":"Integer.js","sourceRoot":"","sources":["../../../../src/components/forms/Integer/Integer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAEzE,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK;IACnC,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,UAAU,EACV,WAAW,EACZ,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,2DAA2D;IAE3D,IAAG,WAAW,KAAK,aAAa,EAAE;QAChC,MAAM,KAAK,GAAG;YACZ,CAAC,KAAK,CAAC,EAAE,KAAK;SACf,CAAC;QACF,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,KAAK,GAAI,CAAA;KACvC;IAED,IAAI,QAAQ,EAAE;QACZ,OAAO,oBAAC,SAAS,OAAK,KAAK,GAAI,CAAC;KACjC;IAED,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,QAAQ,GAAG;QACT,cAAc,EAAE,MAAM;KACvB,CAAC;IAEF,SAAS,WAAW,CAAC,KAAK;QACxB,qEAAqE;QAErE,mEAAmE;QACnE,0FAA0F;QAC1F,MAAM,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;QACnC,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAC7C,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QAE7C,IAAI,eAAe,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;YACtC,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;SACrD;QAED,mDAAmD;QACnD,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClB,CAAC;IAED,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,QACT,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,EAC3C,UAAU,EAAE,mBAAmB,EAC/B,WAAW,EAAC,EAAE,EACd,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,WAAW,EACrB,MAAM,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACtC,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,QAAQ,EAAE,GACpE,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { TextField } from '@material-ui/core';\nimport TextInput from '../TextInput';\nimport FieldValueList from '../../designSystemExtensions/FieldValueList';\n\nexport default function Integer(props) {\n  const {\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    onChange,\n    onBlur,\n    readOnly,\n    testId,\n    helperText,\n    displayMode\n  } = props;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  // console.log(`Integer: label: ${label} value: ${value}`);\n\n  if(displayMode === 'LABELS_LEFT') {\n    const field = {\n      [label]: value\n    };\n    return <FieldValueList item={field} />\n  }\n\n  if (readOnly) {\n    return <TextInput {...props} />;\n  }\n\n  let testProp = {};\n\n  testProp = {\n    'data-test-id': testId\n  };\n\n  function intOnChange(event) {\n    // console.log(`Integer intOnChange inValue: ${event.target.value}`);\n\n    // Disallow \".\" and \",\" (separators) since this is an integer field\n    //  Mimics Pega Integer behavior (where separator characters are \"eaten\" if they're typed)\n    const disallowedChars = ['.', ','];\n    const theAttemptedValue = event.target.value;\n    const lastChar = theAttemptedValue.slice(-1);\n\n    if (disallowedChars.includes(lastChar)) {\n      event.target.value = theAttemptedValue.slice(0, -1);\n    }\n\n    // Pass through to the Constellation change handler\n    onChange(event);\n  }\n\n  return (\n    <TextField\n      fullWidth\n      variant={readOnly ? 'standard' : 'outlined'}\n      helperText={helperTextToDisplay}\n      placeholder=''\n      size='small'\n      required={required}\n      disabled={disabled}\n      onChange={intOnChange}\n      onBlur={!readOnly ? onBlur : undefined}\n      error={status === 'error'}\n      label={label}\n      value={value}\n      type='text'\n      inputProps={{ inputMode: 'numeric', pattern: '[0-9]*', ...testProp }}\n    />\n  );\n}\n"]}

package/lib/components/forms/Percentage/Percentage.js

@@ -37,6 +37,6 @@ export default function Percentage(props) {
     testProp = {
         'data-test-id': testId
     };
-    return (React.createElement(TextField, { className: classes.input, fullWidth: true, variant: readOnly ? 'standard' : 'outlined', helperText: helperTextToDisplay, placeholder: '', size: 'small', required: required, disabled: disabled, onChange: onChange, onBlur: onBlur, error: status === 'error', label: label, value: value, type: 'number', inputProps: { ...testProp } }));
+    return (React.createElement(TextField, { className: classes.input, fullWidth: true, variant: readOnly ? 'standard' : 'outlined', helperText: helperTextToDisplay, placeholder: '', size: 'small', required: required, disabled: disabled, onChange: onChange, onBlur: !readOnly ? onBlur : undefined, error: status === 'error', label: label, value: value, type: 'number', inputProps: { ...testProp } }));
 }
 //# sourceMappingURL=Percentage.js.map

package/lib/components/forms/Percentage/Percentage.js.map

@@ -1 +1 @@
-{"version":3,"file":"Percentage.js","sourceRoot":"","sources":["../../../../src/components/forms/Percentage/Percentage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAEzE,gHAAgH;AAChH,MAAM,SAAS,GAAG,UAAU,CAAC,EAAC,WAAW,EAAE,EAAE,CAAC,CAAC;IAC7C,KAAK,EAAE;QACL,sBAAsB,EAAE;YACtB,iBAAiB,EAAE,WAAW;SAC/B;QACD,iDAAiD,EAAE;YACjD,oBAAoB,EAAE,MAAM;YAC5B,MAAM,EAAE,CAAC;SACV;QACD,iDAAiD,EAAE;YACjD,oBAAoB,EAAE,MAAM;YAC5B,MAAM,EAAE,CAAC;SACV;KACF;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK;IACtC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,UAAU,EACV,WAAW,EACZ,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,8DAA8D;IAE9D,IAAG,WAAW,KAAK,aAAa,EAAC;QAC/B,MAAM,KAAK,GAAG;YACZ,CAAC,KAAK,CAAC,EAAE,KAAK;SACf,CAAC;QACF,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,KAAK,GAAG,CAAA;KACtC;IAED,IAAI,QAAQ,EAAE;QACZ,OAAO,oBAAC,SAAS,OAAK,KAAK,GAAI,CAAC;KACjC;IAED,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,QAAQ,GAAG;QACT,cAAc,EAAE,MAAM;KACvB,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAE,OAAO,CAAC,KAAK,EACxB,SAAS,QACT,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,EAC3C,UAAU,EAAE,mBAAmB,EAC/B,WAAW,EAAC,EAAE,EACd,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,QAAQ,EACb,UAAU,EAAE,EAAE,GAAG,QAAQ,EAAE,GAC3B,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { TextField } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport TextInput from '../TextInput';\nimport FieldValueList from '../../designSystemExtensions/FieldValueList';\n\n// Inspired by https://stackoverflow.com/questions/50823182/material-ui-remove-up-down-arrow-dials-from-textview\nconst useStyles = makeStyles((/* theme */) => ({\n  input: {\n    '& input[type=number]': {\n      '-moz-appearance': 'textfield'\n    },\n    '& input[type=number]::-webkit-outer-spin-button': {\n      '-webkit-appearance': 'none',\n      margin: 0\n    },\n    '& input[type=number]::-webkit-inner-spin-button': {\n      '-webkit-appearance': 'none',\n      margin: 0\n    }\n  }\n}));\n\nexport default function Percentage(props) {\n  const classes = useStyles();\n\n  const {\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    onChange,\n    onBlur,\n    readOnly,\n    testId,\n    helperText,\n    displayMode\n  } = props;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  // console.log(`Percentage: label: ${label} value: ${value}`);\n\n  if(displayMode === 'LABELS_LEFT'){\n    const field = {\n      [label]: value\n    };\n    return <FieldValueList item={field}/>\n  }\n\n  if (readOnly) {\n    return <TextInput {...props} />;\n  }\n\n  let testProp = {};\n\n  testProp = {\n    'data-test-id': testId\n  };\n\n  return (\n    <TextField\n      className={classes.input}\n      fullWidth\n      variant={readOnly ? 'standard' : 'outlined'}\n      helperText={helperTextToDisplay}\n      placeholder=''\n      size='small'\n      required={required}\n      disabled={disabled}\n      onChange={onChange}\n      onBlur={onBlur}\n      error={status === 'error'}\n      label={label}\n      value={value}\n      type='number'\n      inputProps={{ ...testProp }}\n    />\n  );\n}\n"]}
+{"version":3,"file":"Percentage.js","sourceRoot":"","sources":["../../../../src/components/forms/Percentage/Percentage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAEzE,gHAAgH;AAChH,MAAM,SAAS,GAAG,UAAU,CAAC,EAAC,WAAW,EAAE,EAAE,CAAC,CAAC;IAC7C,KAAK,EAAE;QACL,sBAAsB,EAAE;YACtB,iBAAiB,EAAE,WAAW;SAC/B;QACD,iDAAiD,EAAE;YACjD,oBAAoB,EAAE,MAAM;YAC5B,MAAM,EAAE,CAAC;SACV;QACD,iDAAiD,EAAE;YACjD,oBAAoB,EAAE,MAAM;YAC5B,MAAM,EAAE,CAAC;SACV;KACF;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK;IACtC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,UAAU,EACV,WAAW,EACZ,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,8DAA8D;IAE9D,IAAG,WAAW,KAAK,aAAa,EAAE;QAChC,MAAM,KAAK,GAAG;YACZ,CAAC,KAAK,CAAC,EAAE,KAAK;SACf,CAAC;QACF,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,KAAK,GAAI,CAAA;KACvC;IAED,IAAI,QAAQ,EAAE;QACZ,OAAO,oBAAC,SAAS,OAAK,KAAK,GAAI,CAAC;KACjC;IAED,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,QAAQ,GAAG;QACT,cAAc,EAAE,MAAM;KACvB,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAE,OAAO,CAAC,KAAK,EACxB,SAAS,QACT,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,EAC3C,UAAU,EAAE,mBAAmB,EAC/B,WAAW,EAAC,EAAE,EACd,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACtC,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,QAAQ,EACb,UAAU,EAAE,EAAE,GAAG,QAAQ,EAAE,GAC3B,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { TextField } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport TextInput from '../TextInput';\nimport FieldValueList from '../../designSystemExtensions/FieldValueList';\n\n// Inspired by https://stackoverflow.com/questions/50823182/material-ui-remove-up-down-arrow-dials-from-textview\nconst useStyles = makeStyles((/* theme */) => ({\n  input: {\n    '& input[type=number]': {\n      '-moz-appearance': 'textfield'\n    },\n    '& input[type=number]::-webkit-outer-spin-button': {\n      '-webkit-appearance': 'none',\n      margin: 0\n    },\n    '& input[type=number]::-webkit-inner-spin-button': {\n      '-webkit-appearance': 'none',\n      margin: 0\n    }\n  }\n}));\n\nexport default function Percentage(props) {\n  const classes = useStyles();\n\n  const {\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    onChange,\n    onBlur,\n    readOnly,\n    testId,\n    helperText,\n    displayMode\n  } = props;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  // console.log(`Percentage: label: ${label} value: ${value}`);\n\n  if(displayMode === 'LABELS_LEFT') {\n    const field = {\n      [label]: value\n    };\n    return <FieldValueList item={field} />\n  }\n\n  if (readOnly) {\n    return <TextInput {...props} />;\n  }\n\n  let testProp = {};\n\n  testProp = {\n    'data-test-id': testId\n  };\n\n  return (\n    <TextField\n      className={classes.input}\n      fullWidth\n      variant={readOnly ? 'standard' : 'outlined'}\n      helperText={helperTextToDisplay}\n      placeholder=''\n      size='small'\n      required={required}\n      disabled={disabled}\n      onChange={onChange}\n      onBlur={!readOnly ? onBlur : undefined}\n      error={status === 'error'}\n      label={label}\n      value={value}\n      type='number'\n      inputProps={{ ...testProp }}\n    />\n  );\n}\n"]}

package/lib/components/forms/Phone/Phone.js

@@ -31,6 +31,6 @@ export default function Phone(props) {
         event.target.value = `+${phoneValue && phoneValue.replace(/\D+/g, '')}`;
         onBlur(event);
     };
-    return (React.createElement(MuiPhoneNumber, { fullWidth: true, variant: 'outlined', helperText: helperTextToDisplay, placeholder: '', size: 'small', defaultCountry: 'us', required: required, disabled: disabled, onChange: handleChange, onBlur: handleBlur, error: status === 'error', label: label, value: value, InputProps: { ...testProp } }));
+    return (React.createElement(MuiPhoneNumber, { fullWidth: true, variant: 'outlined', helperText: helperTextToDisplay, placeholder: '', size: 'small', defaultCountry: 'us', required: required, disabled: disabled, onChange: handleChange, onBlur: !readOnly ? handleBlur : undefined, error: status === 'error', label: label, value: value, InputProps: { ...testProp } }));
 }
 //# sourceMappingURL=Phone.js.map

package/lib/components/forms/Phone/Phone.js.map

@@ -1 +1 @@
-{"version":3,"file":"Phone.js","sourceRoot":"","sources":["../../../../src/components/forms/Phone/Phone.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,cAAc,MAAM,0BAA0B,CAAC;AACtD,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAEzE,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAK;IACjC,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,UAAU,EACV,WAAW,EACZ,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,QAAQ,GAAG;QACT,cAAc,EAAE,MAAM;KACvB,CAAC;IAEF,IAAG,WAAW,KAAK,aAAa,EAAC;QAC/B,MAAM,KAAK,GAAG;YACZ,CAAC,KAAK,CAAC,EAAE,KAAK;SACf,CAAC;QACF,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,KAAK,GAAG,CAAA;KACtC;IAED,IAAI,QAAQ,EAAE;QACZ,MAAM,eAAe,GAAG,IAAI,CAAC;QAC7B,OAAO,CACL;YACE,oBAAC,cAAc,IACb,SAAS,QACT,UAAU,EAAE,mBAAmB,EAC/B,WAAW,EAAC,EAAE,EACd,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE;oBACV,QAAQ,EAAE,IAAI;iBACf,EACD,eAAe,EAAE,eAAe,GAChC,CACE,CACP,CAAC;KACH;IAGD,MAAM,YAAY,GAAG,QAAQ,CAAC,EAAE;QAC9B,IAAI,UAAU,GAAG,QAAQ,IAAI,QAAQ,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QAC1D,UAAU,GAAG,IAAI,UAAU,EAAE,CAAC;QAC9B,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE;QACzB,MAAM,UAAU,GAAG,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC;QACxC,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,UAAU,IAAI,UAAU,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC;QACxE,MAAM,CAAC,KAAK,CAAC,CAAC;IAChB,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,cAAc,IACb,SAAS,QACT,OAAO,EAAC,UAAU,EAClB,UAAU,EAAE,mBAAmB,EAC/B,WAAW,EAAC,EAAE,EACd,IAAI,EAAC,OAAO,EACZ,cAAc,EAAC,IAAI,EACnB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,EAAE,GAAG,QAAQ,EAAE,GAC3B,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport MuiPhoneNumber from 'material-ui-phone-number';\nimport FieldValueList from '../../designSystemExtensions/FieldValueList';\n\nexport default function Phone(props) {\n  const {\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    onChange,\n    onBlur,\n    readOnly,\n    testId,\n    helperText,\n    displayMode\n  } = props;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  let testProp = {};\n\n  testProp = {\n    'data-test-id': testId\n  };\n\n  if(displayMode === 'LABELS_LEFT'){\n    const field = {\n      [label]: value\n    };\n    return <FieldValueList item={field}/>\n  }\n\n  if (readOnly) {\n    const disableDropdown = true;\n    return (\n      <div>\n        <MuiPhoneNumber\n          fullWidth\n          helperText={helperTextToDisplay}\n          placeholder=''\n          size='small'\n          required={required}\n          disabled={disabled}\n          onChange={onChange}\n          error={status === 'error'}\n          label={label}\n          value={value}\n          InputProps={{\n            readOnly: true\n          }}\n          disableDropdown={disableDropdown}\n        />\n      </div>\n    );\n  }\n\n\n  const handleChange = inputVal => {\n    let phoneValue = inputVal && inputVal.replace(/\\D+/g, '');\n    phoneValue = `+${phoneValue}`;\n    onChange({ value: phoneValue });\n  };\n\n  const handleBlur = event => {\n    const phoneValue = event?.target?.value;\n    event.target.value = `+${phoneValue && phoneValue.replace(/\\D+/g, '')}`;\n    onBlur(event);\n  };\n\n  return (\n    <MuiPhoneNumber\n      fullWidth\n      variant='outlined'\n      helperText={helperTextToDisplay}\n      placeholder=''\n      size='small'\n      defaultCountry='us'\n      required={required}\n      disabled={disabled}\n      onChange={handleChange}\n      onBlur={handleBlur}\n      error={status === 'error'}\n      label={label}\n      value={value}\n      InputProps={{ ...testProp }}\n    />\n  );\n}\n"]}
+{"version":3,"file":"Phone.js","sourceRoot":"","sources":["../../../../src/components/forms/Phone/Phone.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,cAAc,MAAM,0BAA0B,CAAC;AACtD,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAEzE,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAK;IACjC,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,UAAU,EACV,WAAW,EACZ,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,QAAQ,GAAG;QACT,cAAc,EAAE,MAAM;KACvB,CAAC;IAEF,IAAG,WAAW,KAAK,aAAa,EAAE;QAChC,MAAM,KAAK,GAAG;YACZ,CAAC,KAAK,CAAC,EAAE,KAAK;SACf,CAAC;QACF,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,KAAK,GAAI,CAAA;KACvC;IAED,IAAI,QAAQ,EAAE;QACZ,MAAM,eAAe,GAAG,IAAI,CAAC;QAC7B,OAAO,CACL;YACE,oBAAC,cAAc,IACb,SAAS,QACT,UAAU,EAAE,mBAAmB,EAC/B,WAAW,EAAC,EAAE,EACd,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE;oBACV,QAAQ,EAAE,IAAI;iBACf,EACD,eAAe,EAAE,eAAe,GAChC,CACE,CACP,CAAC;KACH;IAGD,MAAM,YAAY,GAAG,QAAQ,CAAC,EAAE;QAC9B,IAAI,UAAU,GAAG,QAAQ,IAAI,QAAQ,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QAC1D,UAAU,GAAG,IAAI,UAAU,EAAE,CAAC;QAC9B,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE;QACzB,MAAM,UAAU,GAAG,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC;QACxC,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,UAAU,IAAI,UAAU,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC;QACxE,MAAM,CAAC,KAAK,CAAC,CAAC;IAChB,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,cAAc,IACb,SAAS,QACT,OAAO,EAAC,UAAU,EAClB,UAAU,EAAE,mBAAmB,EAC/B,WAAW,EAAC,EAAE,EACd,IAAI,EAAC,OAAO,EACZ,cAAc,EAAC,IAAI,EACnB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAC1C,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,EAAE,GAAG,QAAQ,EAAE,GAC3B,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport MuiPhoneNumber from 'material-ui-phone-number';\nimport FieldValueList from '../../designSystemExtensions/FieldValueList';\n\nexport default function Phone(props) {\n  const {\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    onChange,\n    onBlur,\n    readOnly,\n    testId,\n    helperText,\n    displayMode\n  } = props;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  let testProp = {};\n\n  testProp = {\n    'data-test-id': testId\n  };\n\n  if(displayMode === 'LABELS_LEFT') {\n    const field = {\n      [label]: value\n    };\n    return <FieldValueList item={field} />\n  }\n\n  if (readOnly) {\n    const disableDropdown = true;\n    return (\n      <div>\n        <MuiPhoneNumber\n          fullWidth\n          helperText={helperTextToDisplay}\n          placeholder=''\n          size='small'\n          required={required}\n          disabled={disabled}\n          onChange={onChange}\n          error={status === 'error'}\n          label={label}\n          value={value}\n          InputProps={{\n            readOnly: true\n          }}\n          disableDropdown={disableDropdown}\n        />\n      </div>\n    );\n  }\n\n\n  const handleChange = inputVal => {\n    let phoneValue = inputVal && inputVal.replace(/\\D+/g, '');\n    phoneValue = `+${phoneValue}`;\n    onChange({ value: phoneValue });\n  };\n\n  const handleBlur = event => {\n    const phoneValue = event?.target?.value;\n    event.target.value = `+${phoneValue && phoneValue.replace(/\\D+/g, '')}`;\n    onBlur(event);\n  };\n\n  return (\n    <MuiPhoneNumber\n      fullWidth\n      variant='outlined'\n      helperText={helperTextToDisplay}\n      placeholder=''\n      size='small'\n      defaultCountry='us'\n      required={required}\n      disabled={disabled}\n      onChange={handleChange}\n      onBlur={!readOnly ? handleBlur : undefined}\n      error={status === 'error'}\n      label={label}\n      value={value}\n      InputProps={{ ...testProp }}\n    />\n  );\n}\n"]}

package/lib/components/forms/RadioButtons/RadioButtons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButtons.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/RadioButtons/RadioButtons.tsx"],"names":[],"mappings":";AAaA,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,KAAA,eAuDzC"}
+{"version":3,"file":"RadioButtons.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/RadioButtons/RadioButtons.tsx"],"names":[],"mappings":";AAaA,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,KAAA,eA2DzC"}

package/lib/components/forms/RadioButtons/RadioButtons.js

@@ -25,7 +25,7 @@ export default function RadioButtons(props) {
     };
     return (React.createElement(FormControl, { error: status === 'error', required: required },
         React.createElement(FormLabel, { component: 'legend' }, label),
-        React.createElement(RadioGroup, { value: theSelectedButton, onChange: handleChange, onBlur: handleBlur, row: inline }, theOptions.map(theOption => {
+        React.createElement(RadioGroup, { value: theSelectedButton, onChange: handleChange, onBlur: !readOnly ? handleBlur : undefined, row: inline }, theOptions.map(theOption => {
             return (React.createElement(FormControlLabel, { value: theOption.key, key: theOption.key, label: theOption.value, control: React.createElement(Radio, { key: theOption.key, color: 'primary', disabled: readOnly }) }));
         })),
         React.createElement(FormHelperText, null, helperTextToDisplay)));

package/lib/components/forms/RadioButtons/RadioButtons.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButtons.js","sourceRoot":"","sources":["../../../../src/components/forms/RadioButtons/RadioButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EACL,KAAK,EACL,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,SAAS,EACT,cAAc,EACf,MAAM,mBAAmB,CAAC;AAE3B,OAAO,KAAK,MAAM,qBAAqB,CAAC;AACxC,OAAO,WAAW,MAAM,2BAA2B,CAAC;AAEpD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK;IACxC,MAAM,EACJ,WAAW,EACX,KAAK,EACL,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,eAAe,EACf,UAAU,EACV,MAAM,EACN,QAAQ,EACR,MAAM,EACP,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE/D,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,cAAc,GAAG,QAAQ,CAAC,cAAc,EAAE,CAAC;IACjD,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,EAAE,CAAC;IAC5C,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,CAAC;IAChD,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,kFAAkF;IAClF,0CAA0C;IAC1C,MAAM,UAAU,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,EAAE,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC;IAEjF,SAAS,CAAC,GAAG,EAAE;QACb,+FAA+F;QAC/F,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,YAAY,GAAG,KAAK,CAAC,EAAE;QAC3B,WAAW,CAAC,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACvE,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE;QACzB,QAAQ,CAAC,gBAAgB,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC3D,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,WAAW,IAAC,KAAK,EAAE,MAAM,KAAK,OAAO,EAAE,QAAQ,EAAE,QAAQ;QACxD,oBAAC,SAAS,IAAC,SAAS,EAAC,QAAQ,IAAE,KAAK,CAAa;QACjD,oBAAC,UAAU,IAAC,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,IAC1F,UAAU,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YAC1B,OAAO,CACL,oBAAC,gBAAgB,IACf,KAAK,EAAE,SAAS,CAAC,GAAG,EACpB,GAAG,EAAE,SAAS,CAAC,GAAG,EAClB,KAAK,EAAE,SAAS,CAAC,KAAK,EACtB,OAAO,EAAE,oBAAC,KAAK,IAAC,GAAG,EAAE,SAAS,CAAC,GAAG,EAAE,KAAK,EAAC,SAAS,EAAC,QAAQ,EAAE,QAAQ,GAAI,GAC1E,CACH,CAAC;QACJ,CAAC,CAAC,CACS;QACb,oBAAC,cAAc,QAAE,mBAAmB,CAAkB,CAC1C,CACf,CAAC;AACJ,CAAC","sourcesContent":["import React, { useState, useEffect } from 'react';\nimport {\n  Radio,\n  RadioGroup,\n  FormControl,\n  FormControlLabel,\n  FormLabel,\n  FormHelperText\n} from '@material-ui/core';\n\nimport Utils from '../../helpers/utils';\nimport handleEvent from '../../helpers/event-utils';\n\nexport default function RadioButtons(props) {\n  const {\n    getPConnect,\n    label,\n    value = '',\n    readOnly,\n    validatemessage,\n    helperText,\n    status,\n    required,\n    inline\n  } = props;\n  const [theSelectedButton, setSelectedButton] = useState(value);\n\n  const thePConn = getPConnect();\n  const theConfigProps = thePConn.getConfigProps();\n  const actionsApi = thePConn.getActionsApi();\n  const propName = thePConn.getStateProps().value;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  // theOptions will be an array of JSON objects that are literally key/value pairs.\n  //  Ex: [ {key: \"Basic\", value: \"Basic\"} ]\n  const theOptions = Utils.getOptionList(theConfigProps, thePConn.getDataObject());\n\n  useEffect(() => {\n    // This update theSelectedButton which will update the UI to show the selected button correctly\n    setSelectedButton(value);\n  }, [value]);\n\n  const handleChange = event => {\n    handleEvent(actionsApi, 'changeNblur', propName, event.target.value);\n  };\n\n  const handleBlur = event => {\n    thePConn.getValidationApi().validate(event.target.value);\n  };\n\n  return (\n    <FormControl error={status === 'error'} required={required}>\n      <FormLabel component='legend'>{label}</FormLabel>\n      <RadioGroup value={theSelectedButton} onChange={handleChange} onBlur={handleBlur} row={inline}>\n        {theOptions.map(theOption => {\n          return (\n            <FormControlLabel\n              value={theOption.key}\n              key={theOption.key}\n              label={theOption.value}\n              control={<Radio key={theOption.key} color='primary' disabled={readOnly} />}\n            />\n          );\n        })}\n      </RadioGroup>\n      <FormHelperText>{helperTextToDisplay}</FormHelperText>\n    </FormControl>\n  );\n}\n"]}
+{"version":3,"file":"RadioButtons.js","sourceRoot":"","sources":["../../../../src/components/forms/RadioButtons/RadioButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EACL,KAAK,EACL,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,SAAS,EACT,cAAc,EACf,MAAM,mBAAmB,CAAC;AAE3B,OAAO,KAAK,MAAM,qBAAqB,CAAC;AACxC,OAAO,WAAW,MAAM,2BAA2B,CAAC;AAEpD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK;IACxC,MAAM,EACJ,WAAW,EACX,KAAK,EACL,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,eAAe,EACf,UAAU,EACV,MAAM,EACN,QAAQ,EACR,MAAM,EACP,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE/D,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,cAAc,GAAG,QAAQ,CAAC,cAAc,EAAE,CAAC;IACjD,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,EAAE,CAAC;IAC5C,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,CAAC;IAChD,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,kFAAkF;IAClF,0CAA0C;IAC1C,MAAM,UAAU,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,EAAE,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC;IAEjF,SAAS,CAAC,GAAG,EAAE;QACb,+FAA+F;QAC/F,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,YAAY,GAAG,KAAK,CAAC,EAAE;QAC3B,WAAW,CAAC,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACvE,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE;QACzB,QAAQ,CAAC,gBAAgB,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC3D,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,WAAW,IAAC,KAAK,EAAE,MAAM,KAAK,OAAO,EAAE,QAAQ,EAAE,QAAQ;QACxD,oBAAC,SAAS,IAAC,SAAS,EAAC,QAAQ,IAAE,KAAK,CAAa;QACjD,oBAAC,UAAU,IACT,KAAK,EAAE,iBAAiB,EACxB,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAC1C,GAAG,EAAE,MAAM,IACV,UAAU,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YAC1B,OAAO,CACL,oBAAC,gBAAgB,IACf,KAAK,EAAE,SAAS,CAAC,GAAG,EACpB,GAAG,EAAE,SAAS,CAAC,GAAG,EAClB,KAAK,EAAE,SAAS,CAAC,KAAK,EACtB,OAAO,EAAE,oBAAC,KAAK,IAAC,GAAG,EAAE,SAAS,CAAC,GAAG,EAAE,KAAK,EAAC,SAAS,EAAC,QAAQ,EAAE,QAAQ,GAAI,GAC1E,CACH,CAAC;QACJ,CAAC,CAAC,CACS;QACb,oBAAC,cAAc,QAAE,mBAAmB,CAAkB,CAC1C,CACf,CAAC;AACJ,CAAC","sourcesContent":["import React, { useState, useEffect } from 'react';\nimport {\n  Radio,\n  RadioGroup,\n  FormControl,\n  FormControlLabel,\n  FormLabel,\n  FormHelperText\n} from '@material-ui/core';\n\nimport Utils from '../../helpers/utils';\nimport handleEvent from '../../helpers/event-utils';\n\nexport default function RadioButtons(props) {\n  const {\n    getPConnect,\n    label,\n    value = '',\n    readOnly,\n    validatemessage,\n    helperText,\n    status,\n    required,\n    inline\n  } = props;\n  const [theSelectedButton, setSelectedButton] = useState(value);\n\n  const thePConn = getPConnect();\n  const theConfigProps = thePConn.getConfigProps();\n  const actionsApi = thePConn.getActionsApi();\n  const propName = thePConn.getStateProps().value;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  // theOptions will be an array of JSON objects that are literally key/value pairs.\n  //  Ex: [ {key: \"Basic\", value: \"Basic\"} ]\n  const theOptions = Utils.getOptionList(theConfigProps, thePConn.getDataObject());\n\n  useEffect(() => {\n    // This update theSelectedButton which will update the UI to show the selected button correctly\n    setSelectedButton(value);\n  }, [value]);\n\n  const handleChange = event => {\n    handleEvent(actionsApi, 'changeNblur', propName, event.target.value);\n  };\n\n  const handleBlur = event => {\n    thePConn.getValidationApi().validate(event.target.value);\n  };\n\n  return (\n    <FormControl error={status === 'error'} required={required}>\n      <FormLabel component='legend'>{label}</FormLabel>\n      <RadioGroup \n        value={theSelectedButton} \n        onChange={handleChange} \n        onBlur={!readOnly ? handleBlur : undefined} \n        row={inline}>\n        {theOptions.map(theOption => {\n          return (\n            <FormControlLabel\n              value={theOption.key}\n              key={theOption.key}\n              label={theOption.value}\n              control={<Radio key={theOption.key} color='primary' disabled={readOnly} />}\n            />\n          );\n        })}\n      </RadioGroup>\n      <FormHelperText>{helperTextToDisplay}</FormHelperText>\n    </FormControl>\n  );\n}\n"]}

package/lib/components/forms/TextArea/TextArea.js

@@ -21,6 +21,6 @@ export default function TextArea(props) {
     testProp = {
         'data-test-id': testId
     };
-    return (React.createElement(TextField, { multiline: true, minRows: 5, maxRows: 5, fullWidth: true, variant: readOnly ? 'standard' : 'outlined', helperText: helperTextToDisplay, placeholder: '', size: 'small', required: required, disabled: disabled, onChange: onChange, onBlur: onBlur, error: status === 'error', label: label, value: value, InputProps: { ...readOnlyProp, inputProps: { maxLength, ...testProp } } }));
+    return (React.createElement(TextField, { multiline: true, minRows: 5, maxRows: 5, fullWidth: true, variant: readOnly ? 'standard' : 'outlined', helperText: helperTextToDisplay, placeholder: '', size: 'small', required: required, disabled: disabled, onChange: onChange, onBlur: !readOnly ? onBlur : undefined, error: status === 'error', label: label, value: value, InputProps: { ...readOnlyProp, inputProps: { maxLength, ...testProp } } }));
 }
 //# sourceMappingURL=TextArea.js.map

package/lib/components/forms/TextArea/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../../src/components/forms/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAEzE,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK;IACpC,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,aAAa,EACb,UAAU,EACV,WAAW,EACZ,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,MAAM,SAAS,GAAG,aAAa,EAAE,SAAS,CAAC;IAE3C,IAAI,YAAY,GAAG,EAAE,CAAC;IAEtB,IAAG,WAAW,KAAK,aAAa,EAAC;QAC/B,MAAM,KAAK,GAAG;YACZ,CAAC,KAAK,CAAC,EAAE,KAAK;SACf,CAAC;QACF,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,KAAK,GAAG,CAAA;KACtC;IAED,IAAI,QAAQ,EAAE;QACZ,wEAAwE;QACxE,wDAAwD;QACxD,YAAY,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;KACnC;IAED,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,QAAQ,GAAG;QACT,cAAc,EAAE,MAAM;KACvB,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,QACT,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,EACV,SAAS,QACT,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,EAC3C,UAAU,EAAE,mBAAmB,EAC/B,WAAW,EAAC,EAAE,EACd,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,EAAE,GAAG,YAAY,EAAE,UAAU,EAAE,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,EAAE,GACvE,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { TextField } from '@material-ui/core';\nimport FieldValueList from '../../designSystemExtensions/FieldValueList';\n\nexport default function TextArea(props) {\n  const {\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    onChange,\n    onBlur,\n    readOnly,\n    testId,\n    fieldMetadata,\n    helperText,\n    displayMode\n  } = props;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  const maxLength = fieldMetadata?.maxLength;\n\n  let readOnlyProp = {};\n\n  if(displayMode === 'LABELS_LEFT'){\n    const field = {\n      [label]: value\n    };\n    return <FieldValueList item={field}/>\n  }\n\n  if (readOnly) {\n    // Not just emitting a read only Textfield like some other components do\n    //  since we want to preserve the minRows, maxRows info.\n    readOnlyProp = { readOnly: true };\n  }\n\n  let testProp = {};\n\n  testProp = {\n    'data-test-id': testId\n  };\n\n  return (\n    <TextField\n      multiline\n      minRows={5}\n      maxRows={5}\n      fullWidth\n      variant={readOnly ? 'standard' : 'outlined'}\n      helperText={helperTextToDisplay}\n      placeholder=''\n      size='small'\n      required={required}\n      disabled={disabled}\n      onChange={onChange}\n      onBlur={onBlur}\n      error={status === 'error'}\n      label={label}\n      value={value}\n      InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}\n    />\n  );\n}\n"]}
+{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../../src/components/forms/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAEzE,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK;IACpC,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,aAAa,EACb,UAAU,EACV,WAAW,EACZ,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,MAAM,SAAS,GAAG,aAAa,EAAE,SAAS,CAAC;IAE3C,IAAI,YAAY,GAAG,EAAE,CAAC;IAEtB,IAAG,WAAW,KAAK,aAAa,EAAE;QAChC,MAAM,KAAK,GAAG;YACZ,CAAC,KAAK,CAAC,EAAE,KAAK;SACf,CAAC;QACF,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,KAAK,GAAI,CAAA;KACvC;IAED,IAAI,QAAQ,EAAE;QACZ,wEAAwE;QACxE,wDAAwD;QACxD,YAAY,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;KACnC;IAED,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,QAAQ,GAAG;QACT,cAAc,EAAE,MAAM;KACvB,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,QACT,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,EACV,SAAS,QACT,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,EAC3C,UAAU,EAAE,mBAAmB,EAC/B,WAAW,EAAC,EAAE,EACd,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACtC,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,EAAE,GAAG,YAAY,EAAE,UAAU,EAAE,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,EAAE,GACvE,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { TextField } from '@material-ui/core';\nimport FieldValueList from '../../designSystemExtensions/FieldValueList';\n\nexport default function TextArea(props) {\n  const {\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    onChange,\n    onBlur,\n    readOnly,\n    testId,\n    fieldMetadata,\n    helperText,\n    displayMode\n  } = props;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  const maxLength = fieldMetadata?.maxLength;\n\n  let readOnlyProp = {};\n\n  if(displayMode === 'LABELS_LEFT') {\n    const field = {\n      [label]: value\n    };\n    return <FieldValueList item={field} />\n  }\n\n  if (readOnly) {\n    // Not just emitting a read only Textfield like some other components do\n    //  since we want to preserve the minRows, maxRows info.\n    readOnlyProp = { readOnly: true };\n  }\n\n  let testProp = {};\n\n  testProp = {\n    'data-test-id': testId\n  };\n\n  return (\n    <TextField\n      multiline\n      minRows={5}\n      maxRows={5}\n      fullWidth\n      variant={readOnly ? 'standard' : 'outlined'}\n      helperText={helperTextToDisplay}\n      placeholder=''\n      size='small'\n      required={required}\n      disabled={disabled}\n      onChange={onChange}\n      onBlur={!readOnly ? onBlur : undefined}\n      error={status === 'error'}\n      label={label}\n      value={value}\n      InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}\n    />\n  );\n}\n"]}

package/lib/components/forms/TextInput/TextInput.js

@@ -19,6 +19,6 @@ export default function TextInput(props) {
     testProp = {
         'data-test-id': testId
     };
-    return (React.createElement(TextField, { fullWidth: true, variant: readOnly ? 'standard' : 'outlined', helperText: helperTextToDisplay, placeholder: '', size: 'small', required: required, disabled: disabled, onChange: onChange, onBlur: onBlur, error: status === 'error', label: label, value: value, InputProps: { ...readOnlyProp, inputProps: { maxLength, ...testProp } } }));
+    return (React.createElement(TextField, { fullWidth: true, variant: readOnly ? 'standard' : 'outlined', helperText: helperTextToDisplay, placeholder: '', size: 'small', required: required, disabled: disabled, onChange: onChange, onBlur: !readOnly ? onBlur : undefined, error: status === 'error', label: label, value: value, InputProps: { ...readOnlyProp, inputProps: { maxLength, ...testProp } } }));
 }
 //# sourceMappingURL=TextInput.js.map

package/lib/components/forms/TextInput/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../../src/components/forms/TextInput/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAEzE,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK;IACrC,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,aAAa,EACb,UAAU,EACV,WAAW,EACZ,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,MAAM,SAAS,GAAG,aAAa,EAAE,SAAS,CAAC;IAE3C,IAAI,YAAY,GAAG,EAAE,CAAC,CAAC,8BAA8B;IAErD,IAAG,WAAW,KAAK,aAAa,EAAC;QAC/B,MAAM,KAAK,GAAG;YACZ,CAAC,KAAK,CAAC,EAAE,KAAK;SACf,CAAC;QACF,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,KAAK,GAAG,CAAA;KACtC;IAED,IAAI,QAAQ,EAAE;QACZ,YAAY,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;KACnC;IAED,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,QAAQ,GAAG;QACT,cAAc,EAAE,MAAM;KACvB,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,QACT,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,EAC3C,UAAU,EAAE,mBAAmB,EAC/B,WAAW,EAAC,EAAE,EACd,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,EAAE,GAAG,YAAY,EAAE,UAAU,EAAE,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,EAAE,GACvE,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { TextField } from '@material-ui/core';\nimport FieldValueList from '../../designSystemExtensions/FieldValueList';\n\nexport default function TextInput(props) {\n  const {\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    onChange,\n    onBlur,\n    readOnly,\n    testId,\n    fieldMetadata,\n    helperText,\n    displayMode\n  } = props;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  const maxLength = fieldMetadata?.maxLength;\n\n  let readOnlyProp = {}; // Note: empty if NOT ReadOnly\n\n  if(displayMode === 'LABELS_LEFT'){\n    const field = {\n      [label]: value\n    };\n    return <FieldValueList item={field}/>\n  }\n\n  if (readOnly) {\n    readOnlyProp = { readOnly: true };\n  }\n\n  let testProp = {};\n\n  testProp = {\n    'data-test-id': testId\n  };\n\n  return (\n    <TextField\n      fullWidth\n      variant={readOnly ? 'standard' : 'outlined'}\n      helperText={helperTextToDisplay}\n      placeholder=''\n      size='small'\n      required={required}\n      disabled={disabled}\n      onChange={onChange}\n      onBlur={onBlur}\n      error={status === 'error'}\n      label={label}\n      value={value}\n      InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}\n    />\n  );\n}\n"]}
+{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../../src/components/forms/TextInput/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAEzE,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK;IACrC,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,aAAa,EACb,UAAU,EACV,WAAW,EACZ,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,MAAM,SAAS,GAAG,aAAa,EAAE,SAAS,CAAC;IAE3C,IAAI,YAAY,GAAG,EAAE,CAAC,CAAC,8BAA8B;IAErD,IAAG,WAAW,KAAK,aAAa,EAAE;QAChC,MAAM,KAAK,GAAG;YACZ,CAAC,KAAK,CAAC,EAAE,KAAK;SACf,CAAC;QACF,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,KAAK,GAAI,CAAA;KACvC;IAED,IAAI,QAAQ,EAAE;QACZ,YAAY,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;KACnC;IAED,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,QAAQ,GAAG;QACT,cAAc,EAAE,MAAM;KACvB,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,QACT,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,EAC3C,UAAU,EAAE,mBAAmB,EAC/B,WAAW,EAAC,EAAE,EACd,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACtC,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,EAAE,GAAG,YAAY,EAAE,UAAU,EAAE,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,EAAE,GACvE,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { TextField } from '@material-ui/core';\nimport FieldValueList from '../../designSystemExtensions/FieldValueList';\n\nexport default function TextInput(props) {\n  const {\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    onChange,\n    onBlur,\n    readOnly,\n    testId,\n    fieldMetadata,\n    helperText,\n    displayMode\n  } = props;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  const maxLength = fieldMetadata?.maxLength;\n\n  let readOnlyProp = {}; // Note: empty if NOT ReadOnly\n\n  if(displayMode === 'LABELS_LEFT') {\n    const field = {\n      [label]: value\n    };\n    return <FieldValueList item={field} />\n  }\n\n  if (readOnly) {\n    readOnlyProp = { readOnly: true };\n  }\n\n  let testProp = {};\n\n  testProp = {\n    'data-test-id': testId\n  };\n\n  return (\n    <TextField\n      fullWidth\n      variant={readOnly ? 'standard' : 'outlined'}\n      helperText={helperTextToDisplay}\n      placeholder=''\n      size='small'\n      required={required}\n      disabled={disabled}\n      onChange={onChange}\n      onBlur={!readOnly ? onBlur : undefined}\n      error={status === 'error'}\n      label={label}\n      value={value}\n      InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}\n    />\n  );\n}\n"]}

package/lib/components/forms/URL/URL.js

@@ -17,6 +17,6 @@ export default function URLComponent(props) {
     if (readOnly) {
         return React.createElement(TextInput, { ...props });
     }
-    return (React.createElement(TextField, { type: 'url', fullWidth: true, variant: 'outlined', helperText: helperTextToDisplay, placeholder: '', size: 'small', required: required, disabled: disabled, onChange: onChange, onBlur: onBlur, error: status === 'error', label: label, value: value }));
+    return (React.createElement(TextField, { type: 'url', fullWidth: true, variant: 'outlined', helperText: helperTextToDisplay, placeholder: '', size: 'small', required: required, disabled: disabled, onChange: onChange, onBlur: !readOnly ? onBlur : undefined, error: status === 'error', label: label, value: value }));
 }
 //# sourceMappingURL=URL.js.map

package/lib/components/forms/URL/URL.js.map

@@ -1 +1 @@
-{"version":3,"file":"URL.js","sourceRoot":"","sources":["../../../../src/components/forms/URL/URL.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAEzE,gEAAgE;AAChE,gEAAgE;AAChE,mCAAmC;AACnC,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK;IACxC,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,UAAU,EACV,WAAW,EACZ,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,IAAG,WAAW,KAAK,aAAa,EAAC;QAC/B,MAAM,KAAK,GAAG;YACZ,CAAC,KAAK,CAAC,EAAE,KAAK;SACf,CAAC;QACF,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,KAAK,GAAG,CAAA;KACtC;IAED,IAAI,QAAQ,EAAE;QACZ,OAAO,oBAAC,SAAS,OAAK,KAAK,GAAI,CAAC;KACjC;IAED,OAAO,CACL,oBAAC,SAAS,IACR,IAAI,EAAC,KAAK,EACV,SAAS,QACT,OAAO,EAAC,UAAU,EAClB,UAAU,EAAE,mBAAmB,EAC/B,WAAW,EAAC,EAAE,EACd,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { TextField } from '@material-ui/core';\nimport TextInput from '../TextInput';\nimport FieldValueList from '../../designSystemExtensions/FieldValueList';\n\n// NOTE: that we had to change the name from URL to URLComponent\n//  Otherwise, we were getting all kinds of weird errors when we\n//  referred to URL as a component.\nexport default function URLComponent(props) {\n  const {\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    onChange,\n    onBlur,\n    readOnly,\n    helperText,\n    displayMode\n  } = props;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  if(displayMode === 'LABELS_LEFT'){\n    const field = {\n      [label]: value\n    };\n    return <FieldValueList item={field}/>\n  }\n\n  if (readOnly) {\n    return <TextInput {...props} />;\n  }\n\n  return (\n    <TextField\n      type='url'\n      fullWidth\n      variant='outlined'\n      helperText={helperTextToDisplay}\n      placeholder=''\n      size='small'\n      required={required}\n      disabled={disabled}\n      onChange={onChange}\n      onBlur={onBlur}\n      error={status === 'error'}\n      label={label}\n      value={value}\n    />\n  );\n}\n"]}
+{"version":3,"file":"URL.js","sourceRoot":"","sources":["../../../../src/components/forms/URL/URL.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAEzE,gEAAgE;AAChE,gEAAgE;AAChE,mCAAmC;AACnC,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK;IACxC,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,UAAU,EACV,WAAW,EACZ,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,IAAG,WAAW,KAAK,aAAa,EAAE;QAChC,MAAM,KAAK,GAAG;YACZ,CAAC,KAAK,CAAC,EAAE,KAAK;SACf,CAAC;QACF,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,KAAK,GAAI,CAAA;KACvC;IAED,IAAI,QAAQ,EAAE;QACZ,OAAO,oBAAC,SAAS,OAAK,KAAK,GAAI,CAAC;KACjC;IAED,OAAO,CACL,oBAAC,SAAS,IACR,IAAI,EAAC,KAAK,EACV,SAAS,QACT,OAAO,EAAC,UAAU,EAClB,UAAU,EAAE,mBAAmB,EAC/B,WAAW,EAAC,EAAE,EACd,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACtC,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { TextField } from '@material-ui/core';\nimport TextInput from '../TextInput';\nimport FieldValueList from '../../designSystemExtensions/FieldValueList';\n\n// NOTE: that we had to change the name from URL to URLComponent\n//  Otherwise, we were getting all kinds of weird errors when we\n//  referred to URL as a component.\nexport default function URLComponent(props) {\n  const {\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    onChange,\n    onBlur,\n    readOnly,\n    helperText,\n    displayMode\n  } = props;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  if(displayMode === 'LABELS_LEFT') {\n    const field = {\n      [label]: value\n    };\n    return <FieldValueList item={field} />\n  }\n\n  if (readOnly) {\n    return <TextInput {...props} />;\n  }\n\n  return (\n    <TextField\n      type='url'\n      fullWidth\n      variant='outlined'\n      helperText={helperTextToDisplay}\n      placeholder=''\n      size='small'\n      required={required}\n      disabled={disabled}\n      onChange={onChange}\n      onBlur={!readOnly ? onBlur : undefined}\n      error={status === 'error'}\n      label={label}\n      value={value}\n    />\n  );\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/react-sdk-components",
-  "version": "0.23.1",
+  "version": "0.23.2",
   "description": "React SDK Infrastructure: bridge and components",
   "_filesComment": "During packing, npm ignores everything NOT in the files list",
   "files": [