@pega/react-sdk-components 0.24.4 → 0.25.2

package/lib/components/field/CancelAlert/CancelAlert.js.map

@@ -1 +1 @@
-{"version":3,"file":"CancelAlert.js","sourceRoot":"","sources":["../../../../src/components/field/CancelAlert/CancelAlert.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport { Button, Grid, IconButton, Snackbar } from '@material-ui/core';\nimport CloseIcon from '@material-ui/icons/Close';\n\nimport { PConnFieldProps } from '../../../types/PConnProps';\nimport './CancelAlert.css';\n\ninterface CancelAlertProps extends PConnFieldProps {\n  // If any, enter additional props that only exist on CancelAlert here\n  heading: string;\n  content: string;\n  itemKey: string;\n  hideDelete: boolean;\n  isDataObject: boolean;\n  skipReleaseLockRequest: any;\n  dismiss: Function;\n}\n\nexport default function CancelAlert(props: CancelAlertProps) {\n  const { heading, content, getPConnect, itemKey: containerItemID, hideDelete, isDataObject, skipReleaseLockRequest, dismiss } = props;\n  const actionsAPI = getPConnect().getActionsApi();\n  const containerManagerAPI = getPConnect().getContainerManager();\n  const isLocalAction = getPConnect().getValue(PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION);\n  // @ts-ignore - Property 'options' is private and only accessible within class 'C11nEnv'.\n  const isBulkAction = getPConnect()?.options?.isBulkAction;\n  const localizedVal = PCore.getLocaleUtils().getLocaleValue;\n  const broadCastUtils: any = PCore.getCoexistenceManager().getBroadcastUtils();\n  const isReverseCoexistence = broadCastUtils.isReverseCoexistenceCaseLoaded();\n  const localeCategory = 'ModalContainer';\n  const btnIds = {\n    SAVE_AND_CLOSE: 'saveAndClose',\n    CONTINUE_WORKING: 'continueWorking',\n    DELETE: 'delete'\n  };\n\n  const [buttonsState, setButtonsState] = useState({\n    [btnIds.SAVE_AND_CLOSE]: false,\n    [btnIds.DELETE]: false\n  });\n\n  const [showSnackbar, setShowSnackbar] = useState(false);\n  const [snackbarMessage, setSnackbarMessage] = useState('');\n\n  function disableButton(id) {\n    setButtonsState(prevState => ({\n      ...prevState,\n      [id]: true\n    }));\n  }\n\n  function enableButton(id) {\n    setButtonsState(prevState => ({\n      ...prevState,\n      [id]: false\n    }));\n  }\n\n  function cancelHandler() {\n    if (isReverseCoexistence) {\n      dismiss(true);\n      // @ts-ignore - An argument for 'payload' was not provided.\n      PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.REVERSE_COEXISTENCE_EVENTS.HANDLE_DISCARD);\n    } else if (!isDataObject && !isLocalAction && !isBulkAction) {\n      disableButton(btnIds.DELETE);\n      actionsAPI\n        .deleteCaseInCreateStage(containerItemID, hideDelete)\n        .then(() => {\n          // @ts-ignore - An argument for 'payload' was not provided.\n          PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL);\n        })\n        .catch(() => {\n          setSnackbarMessage(localizedVal('Delete failed.', localeCategory));\n          setShowSnackbar(true);\n        })\n        .finally(() => {\n          enableButton(btnIds.DELETE);\n          dismiss(true);\n        });\n    } else if (isLocalAction) {\n      dismiss(true);\n      actionsAPI.cancelAssignment(containerItemID);\n    } else if (isBulkAction) {\n      dismiss(true);\n      actionsAPI.cancelBulkAction(containerItemID);\n    } else {\n      dismiss(true);\n      // @ts-ignore - Argument of type '{ containerItemID: string; skipReleaseLockRequest: any; }' is not assignable to parameter of type 'ContainerInfo'.\n      containerManagerAPI.removeContainerItem({ containerItemID, skipReleaseLockRequest });\n    }\n  }\n\n  function handleSnackbarClose(event: React.SyntheticEvent | React.MouseEvent, reason?: string) {\n    if (reason === 'clickaway') {\n      return;\n    }\n    setShowSnackbar(false);\n  }\n\n  const leftButton = (\n    <Button\n      name={btnIds.CONTINUE_WORKING}\n      variant='contained'\n      color='secondary'\n      onClick={() => {\n        dismiss();\n        if (isReverseCoexistence) {\n          broadCastUtils.setCallBackFunction(null);\n          broadCastUtils.setIsDirtyDialogActive(false);\n        }\n      }}\n    >\n      {localizedVal('Go back', localeCategory)}\n    </Button>\n  );\n\n  const rightButton = (\n    <Button name={btnIds.DELETE} variant='contained' color='primary' disabled={buttonsState[btnIds.DELETE]} onClick={cancelHandler}>\n      {localizedVal('Discard', localeCategory)}\n    </Button>\n  );\n\n  return (\n    <>\n      <div className='cancel-alert-background'>\n        <div className='cancel-alert-top'>\n          <h3>{localizedVal(heading, localeCategory)}</h3>\n          <div>\n            <p>{localizedVal(content, localeCategory)}</p>\n          </div>\n          <div className='action-controls'>\n            <Grid container spacing={4} justifyContent='space-between'>\n              <Grid item>{leftButton}</Grid>\n              <Grid item>{rightButton}</Grid>\n            </Grid>\n          </div>\n        </div>\n      </div>\n      <Snackbar\n        open={showSnackbar}\n        autoHideDuration={3000}\n        onClose={handleSnackbarClose}\n        message={snackbarMessage}\n        action={\n          <IconButton size='small' aria-label='close' color='inherit' onClick={handleSnackbarClose}>\n            <CloseIcon fontSize='small' />\n          </IconButton>\n        }\n      />\n    </>\n  );\n}\n"]}
+{"version":3,"file":"CancelAlert.js","sourceRoot":"","sources":["../../../../src/components/field/CancelAlert/CancelAlert.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport { Button, Grid, IconButton, Snackbar } from '@mui/material';\nimport CloseIcon from '@mui/icons-material/Close';\n\nimport type { PConnFieldProps } from '../../../types/PConnProps';\nimport './CancelAlert.css';\n\ninterface CancelAlertProps extends PConnFieldProps {\n  // If any, enter additional props that only exist on CancelAlert here\n  heading: string;\n  content: string;\n  itemKey: string;\n  hideDelete: boolean;\n  isDataObject: boolean;\n  skipReleaseLockRequest: any;\n  dismiss: Function;\n}\n\nexport default function CancelAlert(props: CancelAlertProps) {\n  const { heading, content, getPConnect, itemKey: containerItemID, hideDelete, isDataObject, skipReleaseLockRequest, dismiss } = props;\n  const actionsAPI = getPConnect().getActionsApi();\n  const containerManagerAPI = getPConnect().getContainerManager();\n  const isLocalAction = getPConnect().getValue(PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION);\n  // @ts-ignore - Property 'options' is private and only accessible within class 'C11nEnv'.\n  const isBulkAction = getPConnect()?.options?.isBulkAction;\n  const localizedVal = PCore.getLocaleUtils().getLocaleValue;\n  const broadCastUtils: any = PCore.getCoexistenceManager().getBroadcastUtils();\n  const isReverseCoexistence = broadCastUtils.isReverseCoexistenceCaseLoaded();\n  const localeCategory = 'ModalContainer';\n  const btnIds = {\n    SAVE_AND_CLOSE: 'saveAndClose',\n    CONTINUE_WORKING: 'continueWorking',\n    DELETE: 'delete'\n  };\n\n  const [buttonsState, setButtonsState] = useState({\n    [btnIds.SAVE_AND_CLOSE]: false,\n    [btnIds.DELETE]: false\n  });\n\n  const [showSnackbar, setShowSnackbar] = useState(false);\n  const [snackbarMessage, setSnackbarMessage] = useState('');\n\n  function disableButton(id) {\n    setButtonsState(prevState => ({\n      ...prevState,\n      [id]: true\n    }));\n  }\n\n  function enableButton(id) {\n    setButtonsState(prevState => ({\n      ...prevState,\n      [id]: false\n    }));\n  }\n\n  function cancelHandler() {\n    if (isReverseCoexistence) {\n      dismiss(true);\n      PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.REVERSE_COEXISTENCE_EVENTS.HANDLE_DISCARD);\n    } else if (!isDataObject && !isLocalAction && !isBulkAction) {\n      disableButton(btnIds.DELETE);\n      actionsAPI\n        .deleteCaseInCreateStage(containerItemID, hideDelete)\n        .then(() => {\n          PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL);\n        })\n        .catch(() => {\n          setSnackbarMessage(localizedVal('Delete failed.', localeCategory));\n          setShowSnackbar(true);\n        })\n        .finally(() => {\n          enableButton(btnIds.DELETE);\n          dismiss(true);\n        });\n    } else if (isLocalAction) {\n      dismiss(true);\n      actionsAPI.cancelAssignment(containerItemID, false);\n    } else if (isBulkAction) {\n      dismiss(true);\n      actionsAPI.cancelBulkAction(containerItemID);\n    } else {\n      dismiss(true);\n      containerManagerAPI.removeContainerItem({ containerItemID, skipReleaseLockRequest });\n    }\n  }\n\n  function handleSnackbarClose(event: React.SyntheticEvent<any> | Event, reason?: string) {\n    if (reason === 'clickaway') {\n      return;\n    }\n    setShowSnackbar(false);\n  }\n\n  const leftButton = (\n    <Button\n      name={btnIds.CONTINUE_WORKING}\n      variant='contained'\n      color='secondary'\n      onClick={() => {\n        dismiss();\n        if (isReverseCoexistence) {\n          broadCastUtils.setCallBackFunction(null);\n          broadCastUtils.setIsDirtyDialogActive(false);\n        }\n      }}\n    >\n      {localizedVal('Go back', localeCategory)}\n    </Button>\n  );\n\n  const rightButton = (\n    <Button name={btnIds.DELETE} variant='contained' color='primary' disabled={buttonsState[btnIds.DELETE]} onClick={cancelHandler}>\n      {localizedVal('Discard', localeCategory)}\n    </Button>\n  );\n\n  return (\n    <>\n      <div className='cancel-alert-background'>\n        <div className='cancel-alert-top'>\n          <h3>{localizedVal(heading, localeCategory)}</h3>\n          <div>\n            <p>{localizedVal(content, localeCategory)}</p>\n          </div>\n          <div className='action-controls'>\n            <Grid container spacing={4} justifyContent='space-between'>\n              <Grid item>{leftButton}</Grid>\n              <Grid item>{rightButton}</Grid>\n            </Grid>\n          </div>\n        </div>\n      </div>\n      <Snackbar\n        open={showSnackbar}\n        autoHideDuration={3000}\n        onClose={handleSnackbarClose}\n        message={snackbarMessage}\n        action={\n          <IconButton size='small' aria-label='close' color='inherit' onClick={handleSnackbarClose}>\n            <CloseIcon fontSize='small' />\n          </IconButton>\n        }\n      />\n    </>\n  );\n}\n"]}

package/lib/components/field/Checkbox/Checkbox.d.ts

@@ -1,4 +1,4 @@
-import { PConnFieldProps } from '../../../types/PConnProps';
+import type { PConnFieldProps } from '../../../types/PConnProps';
 interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
     value?: boolean;
     caption?: string;

package/lib/components/field/Checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAG5D,UAAU,aAAc,SAAQ,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC;IAE5D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,mBAAmB,EAAE,GAAG,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;CACvB;AASD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAAK,EAAE,aAAa,2CAyI7D"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEjE,UAAU,aAAc,SAAQ,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC;IAE5D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,mBAAmB,EAAE,GAAG,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;CACvB;AASD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAAK,EAAE,aAAa,2CAyI7D"}

package/lib/components/field/Checkbox/Checkbox.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable react/no-array-index-key */
 import { useState, useEffect } from 'react';
-import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } from '@material-ui/core';
+import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import handleEvent from '../../helpers/event-utils';
 import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
 import { insertInstruction, deleteInstruction, updateNewInstuctions } from '../../helpers/instructions-utils';
-import { makeStyles } from '@material-ui/core/styles';
 const useStyles = makeStyles(() => ({
     checkbox: {
         display: 'flex',
@@ -32,7 +32,7 @@ export default function CheckboxComponent(props) {
             updateNewInstuctions(thePConn, selectionList);
         }
     }, [thePConn]);
-    if (displayMode === 'LABELS_LEFT') {
+    if (displayMode === 'DISPLAY_ONLY') {
         return _jsx(FieldValueList, { name: hideLabel ? '' : caption, value: value ? trueLabel : falseLabel });
     }
     if (displayMode === 'STACKED_LARGE_VAL') {
@@ -78,6 +78,6 @@ export default function CheckboxComponent(props) {
     else {
         theCheckbox = (_jsx(FormControlLabel, { control: _jsx(Checkbox, { color: 'primary', checked: checked, onChange: !readOnly ? handleChange : undefined, onBlur: !readOnly ? handleBlur : undefined, value: value, disabled: disabled, readOnly: readOnly }), label: caption, labelPlacement: 'end', "data-test-id": testId }));
     }
-    return (_jsxs(FormControl, { required: required, error: status === 'error', children: [!hideLabel && _jsx(FormLabel, { component: 'legend', children: label }), _jsx(FormGroup, { children: theCheckbox }), _jsx(FormHelperText, { children: helperTextToDisplay })] }));
+    return (_jsxs(FormControl, { variant: 'standard', required: required, error: status === 'error', children: [!hideLabel && _jsx(FormLabel, { component: 'legend', children: label }), _jsx(FormGroup, { children: theCheckbox }), _jsx(FormHelperText, { children: helperTextToDisplay })] }));
 }
 //# sourceMappingURL=Checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/field/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable react/no-array-index-key */\nimport { useState, useEffect } from 'react';\nimport { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } from '@material-ui/core';\n\nimport handleEvent from '../../helpers/event-utils';\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\nimport { insertInstruction, deleteInstruction, updateNewInstuctions } from '../../helpers/instructions-utils';\nimport { PConnFieldProps } from '../../../types/PConnProps';\nimport { makeStyles } from '@material-ui/core/styles';\n\ninterface CheckboxProps extends Omit<PConnFieldProps, 'value'> {\n  // If any, enter additional props that only exist on Checkbox here\n  value?: boolean;\n  caption?: string;\n  trueLabel?: string;\n  falseLabel?: string;\n  selectionMode?: string;\n  datasource?: any;\n  selectionKey?: string;\n  selectionList?: any;\n  primaryField: string;\n  readonlyContextList: any;\n  referenceList: string;\n}\n\nconst useStyles = makeStyles(() => ({\n  checkbox: {\n    display: 'flex',\n    flexDirection: 'column'\n  }\n}));\n\nexport default function CheckboxComponent(props: CheckboxProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const FieldValueList = getComponentFromMap('FieldValueList');\n\n  const {\n    getPConnect,\n    label,\n    caption,\n    value,\n    readOnly,\n    testId,\n    required,\n    disabled,\n    status,\n    helperText,\n    validatemessage,\n    displayMode,\n    hideLabel,\n    trueLabel,\n    falseLabel,\n    selectionMode,\n    datasource,\n    selectionKey,\n    selectionList,\n    primaryField,\n    referenceList,\n    readonlyContextList: selectedvalues\n  } = props;\n  const classes = useStyles();\n  const helperTextToDisplay = validatemessage || helperText;\n  const thePConn = getPConnect();\n  const actionsApi = thePConn.getActionsApi();\n  const propName = (thePConn.getStateProps() as any).value;\n\n  const [checked, setChecked] = useState<any>(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  useEffect(() => {\n    if (referenceList?.length > 0) {\n      thePConn.setReferenceList(selectionList);\n      updateNewInstuctions(thePConn, selectionList);\n    }\n  }, [thePConn]);\n\n  if (displayMode === 'LABELS_LEFT') {\n    return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} />;\n  }\n\n  if (displayMode === 'STACKED_LARGE_VAL') {\n    return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} variant='stacked' />;\n  }\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  const handleChangeMultiMode = (event, element) => {\n    if (event.target.checked) {\n      insertInstruction(thePConn, selectionList, selectionKey, primaryField, {\n        id: element.key,\n        primary: element.text ?? element.value\n      });\n    } else {\n      deleteInstruction(thePConn, selectionList, selectionKey, {\n        id: element.key,\n        primary: element.text ?? element.value\n      });\n    }\n    thePConn.clearErrorMessages({\n      property: selectionList,\n      category: '',\n      context: ''\n    });\n  };\n\n  let theCheckbox;\n  const listOfCheckboxes: any = [];\n  if (selectionMode === 'multi') {\n    const listSourceItems = datasource?.source ?? [];\n    const dataField: any = selectionKey?.split?.('.')[1];\n    listSourceItems.forEach((element, index) => {\n      listOfCheckboxes.push(\n        <FormControlLabel\n          control={\n            <Checkbox\n              key={index}\n              checked={selectedvalues?.some?.(data => data[dataField] === element.key)}\n              onChange={event => handleChangeMultiMode(event, element)}\n              onBlur={() => {\n                thePConn.getValidationApi().validate(selectedvalues, selectionList);\n              }}\n              data-testid={`${testId}:${element.value}`}\n            />\n          }\n          key={index}\n          label={element.text ?? element.value}\n          labelPlacement='end'\n          data-test-id={testId}\n        />\n      );\n    });\n    theCheckbox = <div className={classes.checkbox}>{listOfCheckboxes}</div>;\n  } else {\n    theCheckbox = (\n      <FormControlLabel\n        control={\n          <Checkbox\n            color='primary'\n            checked={checked}\n            onChange={!readOnly ? handleChange : undefined}\n            onBlur={!readOnly ? handleBlur : undefined}\n            value={value}\n            disabled={disabled}\n            readOnly={readOnly}\n          />\n        }\n        label={caption}\n        labelPlacement='end'\n        data-test-id={testId}\n      />\n    );\n  }\n\n  return (\n    <FormControl required={required} error={status === 'error'}>\n      {!hideLabel && <FormLabel component='legend'>{label}</FormLabel>}\n      <FormGroup>{theCheckbox}</FormGroup>\n      <FormHelperText>{helperTextToDisplay}</FormHelperText>\n    </FormControl>\n  );\n}\n"]}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/field/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable react/no-array-index-key */\nimport { useState, useEffect } from 'react';\nimport { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } from '@mui/material';\nimport makeStyles from '@mui/styles/makeStyles';\n\nimport handleEvent from '../../helpers/event-utils';\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\nimport { insertInstruction, deleteInstruction, updateNewInstuctions } from '../../helpers/instructions-utils';\nimport type { PConnFieldProps } from '../../../types/PConnProps';\n\ninterface CheckboxProps extends Omit<PConnFieldProps, 'value'> {\n  // If any, enter additional props that only exist on Checkbox here\n  value?: boolean;\n  caption?: string;\n  trueLabel?: string;\n  falseLabel?: string;\n  selectionMode?: string;\n  datasource?: any;\n  selectionKey?: string;\n  selectionList?: any;\n  primaryField: string;\n  readonlyContextList: any;\n  referenceList: string;\n}\n\nconst useStyles = makeStyles(() => ({\n  checkbox: {\n    display: 'flex',\n    flexDirection: 'column'\n  }\n}));\n\nexport default function CheckboxComponent(props: CheckboxProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const FieldValueList = getComponentFromMap('FieldValueList');\n\n  const {\n    getPConnect,\n    label,\n    caption,\n    value,\n    readOnly,\n    testId,\n    required,\n    disabled,\n    status,\n    helperText,\n    validatemessage,\n    displayMode,\n    hideLabel,\n    trueLabel,\n    falseLabel,\n    selectionMode,\n    datasource,\n    selectionKey,\n    selectionList,\n    primaryField,\n    referenceList,\n    readonlyContextList: selectedvalues\n  } = props;\n  const classes = useStyles();\n  const helperTextToDisplay = validatemessage || helperText;\n  const thePConn = getPConnect();\n  const actionsApi = thePConn.getActionsApi();\n  const propName = (thePConn.getStateProps() as any).value;\n\n  const [checked, setChecked] = useState<any>(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  useEffect(() => {\n    if (referenceList?.length > 0) {\n      thePConn.setReferenceList(selectionList);\n      updateNewInstuctions(thePConn, selectionList);\n    }\n  }, [thePConn]);\n\n  if (displayMode === 'DISPLAY_ONLY') {\n    return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} />;\n  }\n\n  if (displayMode === 'STACKED_LARGE_VAL') {\n    return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} variant='stacked' />;\n  }\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  const handleChangeMultiMode = (event, element) => {\n    if (event.target.checked) {\n      insertInstruction(thePConn, selectionList, selectionKey, primaryField, {\n        id: element.key,\n        primary: element.text ?? element.value\n      });\n    } else {\n      deleteInstruction(thePConn, selectionList, selectionKey, {\n        id: element.key,\n        primary: element.text ?? element.value\n      });\n    }\n    thePConn.clearErrorMessages({\n      property: selectionList,\n      category: '',\n      context: ''\n    });\n  };\n\n  let theCheckbox;\n  const listOfCheckboxes: any = [];\n  if (selectionMode === 'multi') {\n    const listSourceItems = datasource?.source ?? [];\n    const dataField: any = selectionKey?.split?.('.')[1];\n    listSourceItems.forEach((element, index) => {\n      listOfCheckboxes.push(\n        <FormControlLabel\n          control={\n            <Checkbox\n              key={index}\n              checked={selectedvalues?.some?.(data => data[dataField] === element.key)}\n              onChange={event => handleChangeMultiMode(event, element)}\n              onBlur={() => {\n                thePConn.getValidationApi().validate(selectedvalues, selectionList);\n              }}\n              data-testid={`${testId}:${element.value}`}\n            />\n          }\n          key={index}\n          label={element.text ?? element.value}\n          labelPlacement='end'\n          data-test-id={testId}\n        />\n      );\n    });\n    theCheckbox = <div className={classes.checkbox}>{listOfCheckboxes}</div>;\n  } else {\n    theCheckbox = (\n      <FormControlLabel\n        control={\n          <Checkbox\n            color='primary'\n            checked={checked}\n            onChange={!readOnly ? handleChange : undefined}\n            onBlur={!readOnly ? handleBlur : undefined}\n            value={value}\n            disabled={disabled}\n            readOnly={readOnly}\n          />\n        }\n        label={caption}\n        labelPlacement='end'\n        data-test-id={testId}\n      />\n    );\n  }\n\n  return (\n    <FormControl variant='standard' required={required} error={status === 'error'}>\n      {!hideLabel && <FormLabel component='legend'>{label}</FormLabel>}\n      <FormGroup>{theCheckbox}</FormGroup>\n      <FormHelperText>{helperTextToDisplay}</FormHelperText>\n    </FormControl>\n  );\n}\n"]}

package/lib/components/field/Currency/Currency.d.ts

@@ -1,4 +1,4 @@
-import { PConnFieldProps } from '../../../types/PConnProps';
+import type { PConnFieldProps } from '../../../types/PConnProps';
 interface CurrrencyProps extends PConnFieldProps {
     currencyISOCode?: string;
     allowDecimals: boolean;

package/lib/components/field/Currency/Currency.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Currency.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Currency/Currency.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAQ5D,UAAU,cAAe,SAAQ,eAAe;IAE9C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,cAAc,2CAyFrD"}
+{"version":3,"file":"Currency.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Currency/Currency.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAQjE,UAAU,cAAe,SAAQ,eAAe;IAE9C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,cAAc,2CA4FrD"}

package/lib/components/field/Currency/Currency.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TextField } from '@material-ui/core';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { NumericFormat } from 'react-number-format';
+import { TextField } from '@mui/material';
 import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
 import handleEvent from '../../helpers/event-utils';
 import { format } from '../../helpers/formatters';
@@ -17,23 +17,24 @@ export default function Currency(props) {
     const propName = pConn.getStateProps().value;
     const helperTextToDisplay = validatemessage || helperText;
     const [values, setValues] = useState(value.toString());
-    const testProp = {
-        'data-test-id': testId
-    };
+    const testProps = { 'data-test-id': testId };
+    useEffect(() => {
+        setValues(value.toString());
+    }, [value]);
     // currencySymbols looks like this: { theCurrencySymbol: '$', theDecimalIndicator: '.', theSeparator: ',' }
     const theSymbols = getCurrencyCharacters(currencyISOCode);
     const theCurrSym = theSymbols.theCurrencySymbol;
     const theCurrDec = theSymbols.theDecimalIndicator;
     const theCurrSep = theSymbols.theDigitGroupSeparator;
     const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
-    const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
+    const formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), theCurrencyOptions);
     let readOnlyProp = {}; // Note: empty if NOT ReadOnly
     if (readOnly) {
         readOnlyProp = { readOnly: true };
     }
     let currencyProp = {};
     currencyProp = { prefix: theCurrSym, decimalSeparator: theCurrDec, thousandSeparator: theCurrSep };
-    if (displayMode === 'LABELS_LEFT') {
+    if (displayMode === 'DISPLAY_ONLY') {
         return _jsx(FieldValueList, { name: hideLabel ? '' : label, value: formattedValue });
     }
     if (displayMode === 'STACKED_LARGE_VAL') {
@@ -45,8 +46,8 @@ export default function Currency(props) {
     const handleChange = val => {
         setValues(val.value);
     };
-    return (_jsx(NumericFormat, { valueIsNumericString: true, label: label, helperText: helperTextToDisplay, placeholder: placeholder ?? '', required: required, disabled: disabled, onValueChange: val => {
+    return (_jsx(NumericFormat, { valueIsNumericString: true, variant: readOnly ? 'standard' : 'outlined', label: label, helperText: helperTextToDisplay, placeholder: placeholder ?? '', required: required, disabled: disabled, onValueChange: val => {
             handleChange(val);
-        }, onBlur: !readOnly ? currOnBlur : undefined, error: status === 'error', name: 'numberformat', value: values, ...currencyProp, decimalScale: allowDecimals !== false ? 2 : 0, fixedDecimalScale: allowDecimals, InputProps: { ...readOnlyProp, inputProps: { ...testProp } }, customInput: TextField }));
+        }, onBlur: !readOnly ? currOnBlur : undefined, error: status === 'error', name: 'numberformat', value: values, ...currencyProp, decimalScale: allowDecimals !== false ? 2 : 0, fixedDecimalScale: allowDecimals, slotProps: { input: { ...readOnlyProp, inputProps: { ...testProps } } }, customInput: TextField }));
 }
 //# sourceMappingURL=Currency.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Currency.js","sourceRoot":"","sources":["../../../../src/components/field/Currency/Currency.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAEhF,OAAO,WAAW,MAAM,2BAA2B,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAW7E,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAqB;IACpD,8EAA8E;IAC9E,MAAM,cAAc,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAE7D,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,EACX,SAAS,EACT,eAAe,GAAG,KAAK,EACvB,WAAW,EACX,aAAa,EACd,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,WAAW,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,EAAE,CAAC;IACtC,MAAM,QAAQ,GAAI,KAAK,CAAC,aAAa,EAAU,CAAC,KAAK,CAAC;IACtD,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAC1D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;IAEvD,MAAM,QAAQ,GAAG;QACf,cAAc,EAAE,MAAM;KACvB,CAAC;IAEF,2GAA2G;IAC3G,MAAM,UAAU,GAAG,qBAAqB,CAAC,eAAe,CAAC,CAAC;IAC1D,MAAM,UAAU,GAAG,UAAU,CAAC,iBAAiB,CAAC;IAChD,MAAM,UAAU,GAAG,UAAU,CAAC,mBAAmB,CAAC;IAClD,MAAM,UAAU,GAAG,UAAU,CAAC,sBAAsB,CAAC;IAErD,MAAM,kBAAkB,GAAG,kBAAkB,CAAC,eAAe,CAAC,CAAC;IAC/D,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,gBAAgB,EAAE,CAAC,WAAW,EAAE,EAAE,kBAAkB,CAAC,CAAC;IAEjG,IAAI,YAAY,GAAG,EAAE,CAAC,CAAC,8BAA8B;IAErD,IAAI,QAAQ,EAAE;QACZ,YAAY,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;KACnC;IAED,IAAI,YAAY,GAAG,EAAE,CAAC;IACtB,YAAY,GAAG,EAAE,MAAM,EAAE,UAAU,EAAE,gBAAgB,EAAE,UAAU,EAAE,iBAAiB,EAAE,UAAU,EAAE,CAAC;IAEnG,IAAI,WAAW,KAAK,aAAa,EAAE;QACjC,OAAO,KAAC,cAAc,IAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,cAAc,GAAI,CAAC;KAChF;IAED,IAAI,WAAW,KAAK,mBAAmB,EAAE;QACvC,OAAO,KAAC,cAAc,IAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,OAAO,EAAC,SAAS,GAAG,CAAC;KAClG;IAED,SAAS,UAAU;QACjB,WAAW,CAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;IACxD,CAAC;IAED,MAAM,YAAY,GAAG,GAAG,CAAC,EAAE;QACzB,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,aAAa,IACZ,oBAAoB,QACpB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,mBAAmB,EAC/B,WAAW,EAAE,WAAW,IAAI,EAAE,EAC9B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,GAAG,CAAC,EAAE;YACnB,YAAY,CAAC,GAAG,CAAC,CAAC;QACpB,CAAC,EACD,MAAM,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAC1C,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE,MAAM,KACT,YAAY,EAChB,YAAY,EAAE,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC7C,iBAAiB,EAAE,aAAa,EAChC,UAAU,EAAE,EAAE,GAAG,YAAY,EAAE,UAAU,EAAE,EAAE,GAAG,QAAQ,EAAE,EAAE,EAC5D,WAAW,EAAE,SAAS,GACtB,CACH,CAAC;AACJ,CAAC","sourcesContent":["import { TextField } from '@material-ui/core';\nimport { useState } from 'react';\nimport { NumericFormat } from 'react-number-format';\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\nimport { PConnFieldProps } from '../../../types/PConnProps';\nimport handleEvent from '../../helpers/event-utils';\nimport { format } from '../../helpers/formatters';\nimport { getCurrencyCharacters, getCurrencyOptions } from './currency-utils';\n\n/* Using react-number-format component here, since it allows formatting decimal values,\nas per the locale.\n*/\ninterface CurrrencyProps extends PConnFieldProps {\n  // If any, enter additional props that only exist on Currency here\n  currencyISOCode?: string;\n  allowDecimals: boolean;\n}\n\nexport default function Currency(props: CurrrencyProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const FieldValueList = getComponentFromMap('FieldValueList');\n\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    hideLabel,\n    currencyISOCode = 'USD',\n    placeholder,\n    allowDecimals\n  } = props;\n\n  const pConn = getPConnect();\n  const actions = pConn.getActionsApi();\n  const propName = (pConn.getStateProps() as any).value;\n  const helperTextToDisplay = validatemessage || helperText;\n  const [values, setValues] = useState(value.toString());\n\n  const testProp = {\n    'data-test-id': testId\n  };\n\n  // currencySymbols looks like this: { theCurrencySymbol: '$', theDecimalIndicator: '.', theSeparator: ',' }\n  const theSymbols = getCurrencyCharacters(currencyISOCode);\n  const theCurrSym = theSymbols.theCurrencySymbol;\n  const theCurrDec = theSymbols.theDecimalIndicator;\n  const theCurrSep = theSymbols.theDigitGroupSeparator;\n\n  const theCurrencyOptions = getCurrencyOptions(currencyISOCode);\n  const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);\n\n  let readOnlyProp = {}; // Note: empty if NOT ReadOnly\n\n  if (readOnly) {\n    readOnlyProp = { readOnly: true };\n  }\n\n  let currencyProp = {};\n  currencyProp = { prefix: theCurrSym, decimalSeparator: theCurrDec, thousandSeparator: theCurrSep };\n\n  if (displayMode === 'LABELS_LEFT') {\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;\n  }\n\n  if (displayMode === 'STACKED_LARGE_VAL') {\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;\n  }\n\n  function currOnBlur() {\n    handleEvent(actions, 'changeNblur', propName, values);\n  }\n\n  const handleChange = val => {\n    setValues(val.value);\n  };\n\n  return (\n    <NumericFormat\n      valueIsNumericString\n      label={label}\n      helperText={helperTextToDisplay}\n      placeholder={placeholder ?? ''}\n      required={required}\n      disabled={disabled}\n      onValueChange={val => {\n        handleChange(val);\n      }}\n      onBlur={!readOnly ? currOnBlur : undefined}\n      error={status === 'error'}\n      name='numberformat'\n      value={values}\n      {...currencyProp}\n      decimalScale={allowDecimals !== false ? 2 : 0}\n      fixedDecimalScale={allowDecimals}\n      InputProps={{ ...readOnlyProp, inputProps: { ...testProp } }}\n      customInput={TextField}\n    />\n  );\n}\n"]}
+{"version":3,"file":"Currency.js","sourceRoot":"","sources":["../../../../src/components/field/Currency/Currency.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from 'react';\nimport { NumericFormat } from 'react-number-format';\nimport { TextField } from '@mui/material';\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\nimport type { PConnFieldProps } from '../../../types/PConnProps';\nimport handleEvent from '../../helpers/event-utils';\nimport { format } from '../../helpers/formatters';\nimport { getCurrencyCharacters, getCurrencyOptions } from './currency-utils';\n\n/* Using react-number-format component here, since it allows formatting decimal values,\nas per the locale.\n*/\ninterface CurrrencyProps extends PConnFieldProps {\n  // If any, enter additional props that only exist on Currency here\n  currencyISOCode?: string;\n  allowDecimals: boolean;\n}\n\nexport default function Currency(props: CurrrencyProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const FieldValueList = getComponentFromMap('FieldValueList');\n\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    hideLabel,\n    currencyISOCode = 'USD',\n    placeholder,\n    allowDecimals\n  } = props;\n\n  const pConn = getPConnect();\n  const actions = pConn.getActionsApi();\n  const propName = (pConn.getStateProps() as any).value;\n  const helperTextToDisplay = validatemessage || helperText;\n  const [values, setValues] = useState(value.toString());\n\n  const testProps: any = { 'data-test-id': testId };\n\n  useEffect(() => {\n    setValues(value.toString());\n  }, [value]);\n\n  // currencySymbols looks like this: { theCurrencySymbol: '$', theDecimalIndicator: '.', theSeparator: ',' }\n  const theSymbols = getCurrencyCharacters(currencyISOCode);\n  const theCurrSym = theSymbols.theCurrencySymbol;\n  const theCurrDec = theSymbols.theDecimalIndicator;\n  const theCurrSep = theSymbols.theDigitGroupSeparator;\n\n  const theCurrencyOptions = getCurrencyOptions(currencyISOCode);\n  const formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), theCurrencyOptions);\n\n  let readOnlyProp = {}; // Note: empty if NOT ReadOnly\n\n  if (readOnly) {\n    readOnlyProp = { readOnly: true };\n  }\n\n  let currencyProp = {};\n  currencyProp = { prefix: theCurrSym, decimalSeparator: theCurrDec, thousandSeparator: theCurrSep };\n\n  if (displayMode === 'DISPLAY_ONLY') {\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;\n  }\n\n  if (displayMode === 'STACKED_LARGE_VAL') {\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;\n  }\n\n  function currOnBlur() {\n    handleEvent(actions, 'changeNblur', propName, values);\n  }\n\n  const handleChange = val => {\n    setValues(val.value);\n  };\n\n  return (\n    <NumericFormat\n      valueIsNumericString\n      variant={readOnly ? 'standard' : 'outlined'}\n      label={label}\n      helperText={helperTextToDisplay}\n      placeholder={placeholder ?? ''}\n      required={required}\n      disabled={disabled}\n      onValueChange={val => {\n        handleChange(val);\n      }}\n      onBlur={!readOnly ? currOnBlur : undefined}\n      error={status === 'error'}\n      name='numberformat'\n      value={values}\n      {...currencyProp}\n      decimalScale={allowDecimals !== false ? 2 : 0}\n      fixedDecimalScale={allowDecimals}\n      slotProps={{ input: { ...readOnlyProp, inputProps: { ...testProps } } }}\n      customInput={TextField}\n    />\n  );\n}\n"]}

package/lib/components/field/Currency/currency-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"currency-utils.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Currency/currency-utils.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,kBAAkB,cAAe,MAAM;;;;CAkCnD,CAAC;AAEF,eAAO,MAAM,qBAAqB,cAAe,MAAM;;;;CA0BtD,CAAC"}
+{"version":3,"file":"currency-utils.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Currency/currency-utils.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,kBAAkB,GAAI,WAAW,MAAM;;;;CAkCnD,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,WAAW,MAAM;;;;CA0BtD,CAAC"}

package/lib/components/field/Currency/currency-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"currency-utils.js","sourceRoot":"","sources":["../../../../src/components/field/Currency/currency-utils.ts"],"names":[],"mappings":"AAAA,mDAAmD;AACnD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC7E,mDAAmD;AACnD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAEnF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,SAAiB,EAAE,EAAE;IACtD,MAAM,cAAc,GAAG,KAAK,CAAC,kBAAkB,EAAE,CAAC,YAAY,EAAE,IAAI,KAAK,CAAC,kBAAkB,EAAE,CAAC,SAAS,EAAE,IAAI,OAAO,CAAC;IAEtH,IAAI,YAAY,GAAG,gBAAgB,CAAC,EAAE,CAAC;IACvC,IAAI,WAAW,GAAG,cAAc,CAAC;IAEjC,iEAAiE;IACjE,8BAA8B;IAC9B,+BAA+B;IAC/B,IAAI,SAAS,EAAE;QACb,IAAI,SAAS,KAAK,KAAK,EAAE;YACvB,YAAY,GAAG,gBAAgB,CAAC,EAAE,CAAC;YACnC,WAAW,GAAG,OAAO,CAAC;SACvB;aAAM;YACL,iFAAiF;YACjF,MAAM,WAAW,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YAC9C,YAAY,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;SAC9C;KACF;SAAM,IAAI,cAAc,EAAE;QACzB,6EAA6E;QAC7E,MAAM,WAAW,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAC9D,YAAY,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;KAC9C;SAAM;QACL,oDAAoD;QACpD,YAAY,GAAG,gBAAgB,CAAC,EAAE,CAAC;KACpC;IAED,gEAAgE;IAChE,IAAI,CAAC,YAAY,EAAE;QACjB,YAAY,GAAG,gBAAgB,CAAC,EAAE,CAAC;KACpC;IAED,MAAM,OAAO,GAAG,YAAY,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAC1D,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;AACvE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,SAAiB,EAAE,EAAE;IACzD,MAAM,gBAAgB,GAAG;QACvB,iBAAiB,EAAE,GAAG;QACtB,mBAAmB,EAAE,GAAG;QACxB,sBAAsB,EAAE,GAAG;KAC5B,CAAC;IAEF,MAAM,kBAAkB,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC;IAEzD,MAAM,SAAS,GAAG,OAAO,CAAC;IAC1B,MAAM,eAAe,GAAG,aAAa,CAAC,QAAQ,CAAC,SAAS,EAAE,kBAAkB,CAAC,CAAC;IAE9E,sDAAsD;IAEtD,4DAA4D;IAC5D,wCAAwC;IACxC,kCAAkC;IAClC,0CAA0C;IAE1C,gBAAgB,CAAC,iBAAiB,GAAG,eAAe,CAAC,CAAC,CAAC,CAAC;IACxD,gBAAgB,CAAC,sBAAsB,GAAG,eAAe,CAAC,CAAC,CAAC,CAAC;IAC7D,gBAAgB,CAAC,mBAAmB,GAAG,eAAe,CAAC,CAAC,CAAC,CAAC;IAE1D,sNAAsN;IAEtN,OAAO,gBAAgB,CAAC;AAC1B,CAAC,CAAC","sourcesContent":["// eslint-disable-next-line import/no-named-default\nimport { default as CurrencyAlias } from '../../helpers/formatters/Currency';\n// eslint-disable-next-line import/no-named-default\nimport { default as CurrencyMapAlias } from '../../helpers/formatters/CurrencyMap';\n\nexport const getCurrencyOptions = (inISOCode: string) => {\n  const operatorLocale = PCore.getEnvironmentInfo().getUseLocale() || PCore.getEnvironmentInfo().getLocale() || 'en-US';\n\n  let currMapToUse = CurrencyMapAlias.US;\n  let localeToUse = operatorLocale;\n\n  // Determine CurrencyMap lookup based on ISO code (if specified).\n  //  If no ISO code, use locale\n  //  If no locale, default to US\n  if (inISOCode) {\n    if (inISOCode === 'EUR') {\n      currMapToUse = CurrencyMapAlias.NL;\n      localeToUse = 'nl-NL';\n    } else {\n      // For all other ISO codes, use first 2 characters as the lookup from CurrencyMap\n      const countryCode = inISOCode.substring(0, 2);\n      currMapToUse = CurrencyMapAlias[countryCode];\n    }\n  } else if (operatorLocale) {\n    // No ISO Code so check for operator locale (and force upper case for lookup)\n    const countryCode = operatorLocale.substring(3).toUpperCase();\n    currMapToUse = CurrencyMapAlias[countryCode];\n  } else {\n    // no ISO code and no operator locale, default to US\n    currMapToUse = CurrencyMapAlias.US;\n  }\n\n  // If no currMapToUse at this point, default to US as a failsafe\n  if (!currMapToUse) {\n    currMapToUse = CurrencyMapAlias.US;\n  }\n\n  const theCode = currMapToUse.currencyCode.substring(0, 3);\n  return { locale: localeToUse, style: 'currency', currency: theCode };\n};\n\nexport const getCurrencyCharacters = (inISOCode: string) => {\n  const theCurrencyChars = {\n    theCurrencySymbol: '$',\n    theDecimalIndicator: '.',\n    theDigitGroupSeparator: ','\n  };\n\n  const theCurrencyOptions = getCurrencyOptions(inISOCode);\n\n  const testValue = 1234.56;\n  const formattedString = CurrencyAlias.Currency(testValue, theCurrencyOptions);\n\n  // console.log(`formattedString: ${formattedString}`);\n\n  // Here, we have the formatted string (ex: $1,234.56) where:\n  //  Currency symbol = formattedString[0]\n  //  Separator = formattedString[2]\n  //  DecimalIndicator = formattedString[6];\n\n  theCurrencyChars.theCurrencySymbol = formattedString[0];\n  theCurrencyChars.theDigitGroupSeparator = formattedString[2];\n  theCurrencyChars.theDecimalIndicator = formattedString[6];\n\n  // console.log(`theCurrencyChars: symbol: ${theCurrencyChars.theCurrencySymbol} | theDigitGroupSeparator: ${theCurrencyChars.theDigitGroupSeparator} | theDecimalIndicator: ${theCurrencyChars.theDecimalIndicator}`);\n\n  return theCurrencyChars;\n};\n"]}
+{"version":3,"file":"currency-utils.js","sourceRoot":"","sources":["../../../../src/components/field/Currency/currency-utils.ts"],"names":[],"mappings":"AAAA,mDAAmD;AACnD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC7E,mDAAmD;AACnD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAEnF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,SAAiB,EAAE,EAAE;IACtD,MAAM,cAAc,GAAG,KAAK,CAAC,kBAAkB,EAAE,CAAC,YAAY,EAAE,IAAI,KAAK,CAAC,kBAAkB,EAAE,CAAC,SAAS,EAAE,IAAI,OAAO,CAAC;IAEtH,IAAI,YAAY,GAAG,gBAAgB,CAAC,EAAE,CAAC;IACvC,IAAI,WAAW,GAAG,cAAc,CAAC;IAEjC,iEAAiE;IACjE,8BAA8B;IAC9B,+BAA+B;IAC/B,IAAI,SAAS,EAAE,CAAC;QACd,IAAI,SAAS,KAAK,KAAK,EAAE,CAAC;YACxB,YAAY,GAAG,gBAAgB,CAAC,EAAE,CAAC;YACnC,WAAW,GAAG,OAAO,CAAC;QACxB,CAAC;aAAM,CAAC;YACN,iFAAiF;YACjF,MAAM,WAAW,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YAC9C,YAAY,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC;SAAM,IAAI,cAAc,EAAE,CAAC;QAC1B,6EAA6E;QAC7E,MAAM,WAAW,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAC9D,YAAY,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC/C,CAAC;SAAM,CAAC;QACN,oDAAoD;QACpD,YAAY,GAAG,gBAAgB,CAAC,EAAE,CAAC;IACrC,CAAC;IAED,gEAAgE;IAChE,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,YAAY,GAAG,gBAAgB,CAAC,EAAE,CAAC;IACrC,CAAC;IAED,MAAM,OAAO,GAAG,YAAY,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAC1D,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;AACvE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,SAAiB,EAAE,EAAE;IACzD,MAAM,gBAAgB,GAAG;QACvB,iBAAiB,EAAE,GAAG;QACtB,mBAAmB,EAAE,GAAG;QACxB,sBAAsB,EAAE,GAAG;KAC5B,CAAC;IAEF,MAAM,kBAAkB,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC;IAEzD,MAAM,SAAS,GAAG,OAAO,CAAC;IAC1B,MAAM,eAAe,GAAG,aAAa,CAAC,QAAQ,CAAC,SAAS,EAAE,kBAAkB,CAAC,CAAC;IAE9E,sDAAsD;IAEtD,4DAA4D;IAC5D,wCAAwC;IACxC,kCAAkC;IAClC,0CAA0C;IAE1C,gBAAgB,CAAC,iBAAiB,GAAG,eAAe,CAAC,CAAC,CAAC,CAAC;IACxD,gBAAgB,CAAC,sBAAsB,GAAG,eAAe,CAAC,CAAC,CAAC,CAAC;IAC7D,gBAAgB,CAAC,mBAAmB,GAAG,eAAe,CAAC,CAAC,CAAC,CAAC;IAE1D,sNAAsN;IAEtN,OAAO,gBAAgB,CAAC;AAC1B,CAAC,CAAC","sourcesContent":["// eslint-disable-next-line import/no-named-default\nimport { default as CurrencyAlias } from '../../helpers/formatters/Currency';\n// eslint-disable-next-line import/no-named-default\nimport { default as CurrencyMapAlias } from '../../helpers/formatters/CurrencyMap';\n\nexport const getCurrencyOptions = (inISOCode: string) => {\n  const operatorLocale = PCore.getEnvironmentInfo().getUseLocale() || PCore.getEnvironmentInfo().getLocale() || 'en-US';\n\n  let currMapToUse = CurrencyMapAlias.US;\n  let localeToUse = operatorLocale;\n\n  // Determine CurrencyMap lookup based on ISO code (if specified).\n  //  If no ISO code, use locale\n  //  If no locale, default to US\n  if (inISOCode) {\n    if (inISOCode === 'EUR') {\n      currMapToUse = CurrencyMapAlias.NL;\n      localeToUse = 'nl-NL';\n    } else {\n      // For all other ISO codes, use first 2 characters as the lookup from CurrencyMap\n      const countryCode = inISOCode.substring(0, 2);\n      currMapToUse = CurrencyMapAlias[countryCode];\n    }\n  } else if (operatorLocale) {\n    // No ISO Code so check for operator locale (and force upper case for lookup)\n    const countryCode = operatorLocale.substring(3).toUpperCase();\n    currMapToUse = CurrencyMapAlias[countryCode];\n  } else {\n    // no ISO code and no operator locale, default to US\n    currMapToUse = CurrencyMapAlias.US;\n  }\n\n  // If no currMapToUse at this point, default to US as a failsafe\n  if (!currMapToUse) {\n    currMapToUse = CurrencyMapAlias.US;\n  }\n\n  const theCode = currMapToUse.currencyCode.substring(0, 3);\n  return { locale: localeToUse, style: 'currency', currency: theCode };\n};\n\nexport const getCurrencyCharacters = (inISOCode: string) => {\n  const theCurrencyChars = {\n    theCurrencySymbol: '$',\n    theDecimalIndicator: '.',\n    theDigitGroupSeparator: ','\n  };\n\n  const theCurrencyOptions = getCurrencyOptions(inISOCode);\n\n  const testValue = 1234.56;\n  const formattedString = CurrencyAlias.Currency(testValue, theCurrencyOptions);\n\n  // console.log(`formattedString: ${formattedString}`);\n\n  // Here, we have the formatted string (ex: $1,234.56) where:\n  //  Currency symbol = formattedString[0]\n  //  Separator = formattedString[2]\n  //  DecimalIndicator = formattedString[6];\n\n  theCurrencyChars.theCurrencySymbol = formattedString[0];\n  theCurrencyChars.theDigitGroupSeparator = formattedString[2];\n  theCurrencyChars.theDecimalIndicator = formattedString[6];\n\n  // console.log(`theCurrencyChars: symbol: ${theCurrencyChars.theCurrencySymbol} | theDigitGroupSeparator: ${theCurrencyChars.theDigitGroupSeparator} | theDecimalIndicator: ${theCurrencyChars.theDecimalIndicator}`);\n\n  return theCurrencyChars;\n};\n"]}

package/lib/components/field/Date/Date.d.ts

@@ -1,4 +1,4 @@
-import { PConnFieldProps } from '../../../types/PConnProps';
+import type { PConnFieldProps } from '../../../types/PConnProps';
 interface DateProps extends PConnFieldProps {
 }
 export default function Date(props: DateProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/field/Date/Date.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Date.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Date/Date.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAO5D,UAAU,SAAU,SAAQ,eAAe;CAE1C;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,SAAS,2CA+F5C"}
+{"version":3,"file":"Date.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Date/Date.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAOjE,UAAU,SAAU,SAAQ,eAAe;CAE1C;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,SAAS,2CA0E5C"}

package/lib/components/field/Date/Date.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { KeyboardDatePicker } from '@material-ui/pickers';
+import { useEffect, useState } from 'react';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import dayjs, { Dayjs } from 'dayjs';
 import handleEvent from '../../helpers/event-utils';
 import { format } from '../../helpers/formatters';
 import { dateFormatInfoDefault, getDateFormatInfo } from '../../helpers/date-format-utils';
@@ -12,7 +14,8 @@ export default function Date(props) {
     // Get emitted components from map (so we can get any override that may exist)
     const TextInput = getComponentFromMap('TextInput');
     const FieldValueList = getComponentFromMap('FieldValueList');
-    const { getPConnect, label, required, disabled, value = '', validatemessage, status, onChange, onBlur, readOnly, testId, helperText, displayMode, hideLabel } = props;
+    const { getPConnect, label, required, disabled, value, validatemessage, status, readOnly, testId, helperText, displayMode, hideLabel } = props;
+    const [dateValue, setDateValue] = useState(value ? dayjs(value) : null);
     const pConn = getPConnect();
     const actions = pConn.getActionsApi();
     const propName = pConn.getStateProps().value;
@@ -24,7 +27,10 @@ export default function Date(props) {
     dateFormatInfo.dateFormatString = theDateFormat.dateFormatString;
     dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;
     dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;
-    if (displayMode === 'LABELS_LEFT') {
+    useEffect(() => {
+        setDateValue(dayjs(value));
+    }, [value]);
+    if (displayMode === 'DISPLAY_ONLY') {
         const formattedDate = format(props.value, 'date', {
             format: dateFormatInfo.dateFormatString
         });
@@ -40,20 +46,23 @@ export default function Date(props) {
         // const theReadOnlyComp = <TextInput props />
         return _jsx(TextInput, { ...props });
     }
-    let testProp = {};
-    testProp = {
-        'data-test-id': testId
-    };
+    const testProps = { 'data-test-id': testId };
     const handleChange = date => {
         if (date && date.isValid()) {
-            onChange({ value: getFormattedDate(date) });
-        }
-    };
-    const handleAccept = date => {
-        if (date && date.isValid()) {
+            setDateValue(date);
             handleEvent(actions, 'changeNblur', propName, getFormattedDate(date));
         }
     };
-    return (_jsx(KeyboardDatePicker, { disableToolbar: true, variant: 'inline', inputVariant: 'outlined', placeholder: dateFormatInfo.dateFormatStringLC, format: dateFormatInfo.dateFormatString, mask: dateFormatInfo.dateFormatMask, fullWidth: true, autoOk: true, required: required, disabled: disabled, error: status === 'error', helperText: helperTextToDisplay, size: 'small', label: label, value: value || null, onChange: handleChange, onBlur: !readOnly ? onBlur : undefined, onAccept: handleAccept, InputProps: { ...testProp } }));
+    return (_jsx(DatePicker, { label: label, disabled: disabled, format: dateFormatInfo.dateFormatString, value: dateValue, slotProps: {
+            textField: {
+                required,
+                variant: 'outlined',
+                placeholder: dateFormatInfo.dateFormatStringLC,
+                error: status === 'error',
+                helperText: helperTextToDisplay,
+                size: 'small',
+                InputProps: { ...testProps }
+            }
+        }, onChange: handleChange }));
 }
 //# sourceMappingURL=Date.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Date.js","sourceRoot":"","sources":["../../../../src/components/field/Date/Date.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,WAAW,MAAM,2BAA2B,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAC3F,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAGhF,wFAAwF;AACxF,SAAS,gBAAgB,CAAC,IAAI;IAC5B,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;AACrH,CAAC;AAMD,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAgB;IAC3C,8EAA8E;IAC9E,MAAM,SAAS,GAAG,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACnD,MAAM,cAAc,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAE7D,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,EACX,SAAS,EACV,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,WAAW,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,EAAE,CAAC;IACtC,MAAM,QAAQ,GAAI,KAAK,CAAC,aAAa,EAAU,CAAC,KAAK,CAAC;IACtD,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,oCAAoC;IACpC,MAAM,cAAc,GAAG,qBAAqB,CAAC;IAC7C,oDAAoD;IACpD,MAAM,aAAa,GAAG,iBAAiB,EAAE,CAAC;IAC1C,cAAc,CAAC,gBAAgB,GAAG,aAAa,CAAC,gBAAgB,CAAC;IACjE,cAAc,CAAC,kBAAkB,GAAG,aAAa,CAAC,kBAAkB,CAAC;IACrE,cAAc,CAAC,cAAc,GAAG,aAAa,CAAC,cAAc,CAAC;IAE7D,IAAI,WAAW,KAAK,aAAa,EAAE;QACjC,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE;YAChD,MAAM,EAAE,cAAc,CAAC,gBAAgB;SACxC,CAAC,CAAC;QACH,OAAO,KAAC,cAAc,IAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,aAAa,GAAI,CAAC;KAC/E;IAED,IAAI,WAAW,KAAK,mBAAmB,EAAE;QACvC,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE;YAChD,MAAM,EAAE,cAAc,CAAC,gBAAgB;SACxC,CAAC,CAAC;QACH,OAAO,KAAC,cAAc,IAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,OAAO,EAAC,SAAS,GAAG,CAAC;KACjG;IAED,IAAI,QAAQ,EAAE;QACZ,8CAA8C;QAC9C,OAAO,KAAC,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,IAAI,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE;YAC1B,QAAQ,CAAC,EAAE,KAAK,EAAE,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SAC7C;IACH,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;QAC1B,IAAI,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE;YAC1B,WAAW,CAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC;SACvE;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,kBAAkB,IACjB,cAAc,QACd,OAAO,EAAC,QAAQ,EAChB,YAAY,EAAC,UAAU,EACvB,WAAW,EAAE,cAAc,CAAC,kBAAkB,EAC9C,MAAM,EAAE,cAAc,CAAC,gBAAgB,EACvC,IAAI,EAAE,cAAc,CAAC,cAAc,EACnC,SAAS,QACT,MAAM,QACN,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,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 { KeyboardDatePicker } from '@material-ui/pickers';\n\nimport handleEvent from '../../helpers/event-utils';\nimport { format } from '../../helpers/formatters';\nimport { dateFormatInfoDefault, getDateFormatInfo } from '../../helpers/date-format-utils';\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\nimport { PConnFieldProps } from '../../../types/PConnProps';\n\n// Will return the date string in YYYY-MM-DD format which we'll be POSTing to the server\nfunction getFormattedDate(date) {\n  return `${date.$y.toString()}-${(date.$M + 1).toString().padStart(2, '0')}-${date.$D.toString().padStart(2, '0')}`;\n}\n\ninterface DateProps extends PConnFieldProps {\n  // If any, enter additional props that only exist on Date here\n}\n\nexport default function Date(props: DateProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const TextInput = getComponentFromMap('TextInput');\n  const FieldValueList = getComponentFromMap('FieldValueList');\n\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    hideLabel\n  } = props;\n\n  const pConn = getPConnect();\n  const actions = pConn.getActionsApi();\n  const propName = (pConn.getStateProps() as any).value;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  // Start with default dateFormatInfo\n  const dateFormatInfo = dateFormatInfoDefault;\n  // and then update, as needed, based on locale, etc.\n  const theDateFormat = getDateFormatInfo();\n  dateFormatInfo.dateFormatString = theDateFormat.dateFormatString;\n  dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;\n  dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;\n\n  if (displayMode === 'LABELS_LEFT') {\n    const formattedDate = format(props.value, 'date', {\n      format: dateFormatInfo.dateFormatString\n    });\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} />;\n  }\n\n  if (displayMode === 'STACKED_LARGE_VAL') {\n    const formattedDate = format(props.value, 'date', {\n      format: dateFormatInfo.dateFormatString\n    });\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} variant='stacked' />;\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    if (date && date.isValid()) {\n      onChange({ value: getFormattedDate(date) });\n    }\n  };\n\n  const handleAccept = date => {\n    if (date && date.isValid()) {\n      handleEvent(actions, 'changeNblur', propName, getFormattedDate(date));\n    }\n  };\n\n  return (\n    <KeyboardDatePicker\n      disableToolbar\n      variant='inline'\n      inputVariant='outlined'\n      placeholder={dateFormatInfo.dateFormatStringLC}\n      format={dateFormatInfo.dateFormatString}\n      mask={dateFormatInfo.dateFormatMask}\n      fullWidth\n      autoOk\n      required={required}\n      disabled={disabled}\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"]}
+{"version":3,"file":"Date.js","sourceRoot":"","sources":["../../../../src/components/field/Date/Date.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from 'react';\nimport { DatePicker } from '@mui/x-date-pickers/DatePicker';\nimport dayjs, { Dayjs } from 'dayjs';\n\nimport handleEvent from '../../helpers/event-utils';\nimport { format } from '../../helpers/formatters';\nimport { dateFormatInfoDefault, getDateFormatInfo } from '../../helpers/date-format-utils';\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\nimport type { PConnFieldProps } from '../../../types/PConnProps';\n\n// Will return the date string in YYYY-MM-DD format which we'll be POSTing to the server\nfunction getFormattedDate(date) {\n  return `${date.$y.toString()}-${(date.$M + 1).toString().padStart(2, '0')}-${date.$D.toString().padStart(2, '0')}`;\n}\n\ninterface DateProps extends PConnFieldProps {\n  // If any, enter additional props that only exist on Date here\n}\n\nexport default function Date(props: DateProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const TextInput = getComponentFromMap('TextInput');\n  const FieldValueList = getComponentFromMap('FieldValueList');\n\n  const { getPConnect, label, required, disabled, value, validatemessage, status, readOnly, testId, helperText, displayMode, hideLabel } = props;\n\n  const [dateValue, setDateValue] = useState<Dayjs | null>(value ? dayjs(value) : null);\n\n  const pConn = getPConnect();\n  const actions = pConn.getActionsApi();\n  const propName = (pConn.getStateProps() as any).value;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  // Start with default dateFormatInfo\n  const dateFormatInfo = dateFormatInfoDefault;\n  // and then update, as needed, based on locale, etc.\n  const theDateFormat = getDateFormatInfo();\n  dateFormatInfo.dateFormatString = theDateFormat.dateFormatString;\n  dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;\n  dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;\n\n  useEffect(() => {\n    setDateValue(dayjs(value));\n  }, [value]);\n\n  if (displayMode === 'DISPLAY_ONLY') {\n    const formattedDate = format(props.value, 'date', {\n      format: dateFormatInfo.dateFormatString\n    });\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} />;\n  }\n\n  if (displayMode === 'STACKED_LARGE_VAL') {\n    const formattedDate = format(props.value, 'date', {\n      format: dateFormatInfo.dateFormatString\n    });\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} variant='stacked' />;\n  }\n\n  if (readOnly) {\n    // const theReadOnlyComp = <TextInput props />\n    return <TextInput {...props} />;\n  }\n\n  const testProps: any = { 'data-test-id': testId };\n\n  const handleChange = date => {\n    if (date && date.isValid()) {\n      setDateValue(date);\n      handleEvent(actions, 'changeNblur', propName, getFormattedDate(date));\n    }\n  };\n\n  return (\n    <DatePicker\n      label={label}\n      disabled={disabled}\n      format={dateFormatInfo.dateFormatString}\n      value={dateValue}\n      slotProps={{\n        textField: {\n          required,\n          variant: 'outlined',\n          placeholder: dateFormatInfo.dateFormatStringLC,\n          error: status === 'error',\n          helperText: helperTextToDisplay,\n          size: 'small',\n          InputProps: { ...testProps }\n        }\n      }}\n      onChange={handleChange}\n    />\n  );\n}\n"]}

package/lib/components/field/DateTime/DateTime.d.ts

@@ -1,4 +1,4 @@
-import { PConnFieldProps } from '../../../types/PConnProps';
+import type { PConnFieldProps } from '../../../types/PConnProps';
 interface DateTimeProps extends PConnFieldProps {
 }
 export default function DateTime(props: DateTimeProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/field/DateTime/DateTime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTime.d.ts","sourceRoot":"","sources":["../../../../src/components/field/DateTime/DateTime.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE5D,UAAU,aAAc,SAAQ,eAAe;CAE9C;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,2CA0FpD"}
+{"version":3,"file":"DateTime.d.ts","sourceRoot":"","sources":["../../../../src/components/field/DateTime/DateTime.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEjE,UAAU,aAAc,SAAQ,eAAe;CAE9C;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAsFpD"}

package/lib/components/field/DateTime/DateTime.js

@@ -1,5 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { KeyboardDateTimePicker } from '@material-ui/pickers';
+import { useEffect, useState } from 'react';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import dayjs, { Dayjs } from 'dayjs';
+import DateFormatter from '../../helpers/formatters/Date';
 import handleEvent from '../../helpers/event-utils';
 import { format } from '../../helpers/formatters';
 import { dateFormatInfoDefault, getDateFormatInfo } from '../../helpers/date-format-utils';
@@ -8,7 +11,10 @@ export default function DateTime(props) {
     // Get emitted components from map (so we can get any override that may exist)
     const TextInput = getComponentFromMap('TextInput');
     const FieldValueList = getComponentFromMap('FieldValueList');
-    const { getPConnect, label, required, disabled, value = '', validatemessage, status, onChange, readOnly, testId, helperText, displayMode, hideLabel } = props;
+    const { getPConnect, label, required, disabled, value = '', validatemessage, status, readOnly, testId, helperText, displayMode, hideLabel } = props;
+    const environmentInfo = PCore.getEnvironmentInfo();
+    const timezone = environmentInfo && environmentInfo.getTimeZone();
+    const [dateValue, setDateValue] = useState(value ? dayjs(DateFormatter.convertToTimezone(value, { timezone })) : null);
     const pConn = getPConnect();
     const actions = pConn.getActionsApi();
     const propName = pConn.getStateProps().value;
@@ -20,7 +26,10 @@ export default function DateTime(props) {
     dateFormatInfo.dateFormatString = theDateFormat.dateFormatString;
     dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;
     dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;
-    if (displayMode === 'LABELS_LEFT') {
+    useEffect(() => {
+        setDateValue(dayjs(DateFormatter.convertToTimezone(value, { timezone })));
+    }, [value]);
+    if (displayMode === 'DISPLAY_ONLY') {
         const formattedDateTime = format(props.value, 'datetime', {
             format: `${dateFormatInfo.dateFormatString} hh:mm a`
         });
@@ -36,18 +45,35 @@ export default function DateTime(props) {
         const formattedDateTime = format(props.value, 'datetime');
         return _jsx(TextInput, { ...props, value: formattedDateTime });
     }
+    const testProps = { 'data-test-id': testId };
     const handleChange = date => {
-        const changeValue = date && date.isValid() ? date.toISOString() : null;
-        onChange({ value: changeValue });
-    };
-    const handleAccept = date => {
-        const changeValue = date && date.isValid() ? date.toISOString() : null;
+        const timeZoneDateTime = dayjs.tz(date.format('YYYY-MM-DDTHH:mm:ss'), timezone);
+        const changeValue = timeZoneDateTime && timeZoneDateTime.isValid() ? timeZoneDateTime.toISOString() : '';
+        setDateValue(timeZoneDateTime);
         handleEvent(actions, 'changeNblur', propName, changeValue);
     };
     //
     // TODO: Keyboard doesn't work in the minute field, it updates one digit then jump to am/pm field
     //       try an older version of the lib or use DateTimePicker
     //
-    return (_jsx(KeyboardDateTimePicker, { variant: 'inline', inputVariant: 'outlined', fullWidth: true, autoOk: true, required: required, disabled: disabled, placeholder: `${dateFormatInfo.dateFormatStringLC} hh:mm a`, format: `${dateFormatInfo.dateFormatString} hh:mm a`, mask: `${dateFormatInfo.dateFormatMask} __:__ _m`, minutesStep: 5, error: status === 'error', helperText: helperTextToDisplay, size: 'small', label: label, value: value || null, onChange: handleChange, onAccept: handleAccept, "data-test-id": testId }));
+    return (_jsx(DateTimePicker
+    // fullWidth
+    // autoOk
+    , { 
+        // fullWidth
+        // autoOk
+        disabled: disabled, format: `${dateFormatInfo.dateFormatString} hh:mm a`, 
+        // mask={`${dateFormatInfo.dateFormatMask} __:__ _m`}
+        minutesStep: 5, label: label, value: dateValue, onChange: handleChange, slotProps: {
+            textField: {
+                variant: 'outlined',
+                required,
+                placeholder: `${dateFormatInfo.dateFormatStringLC} hh:mm a`,
+                error: status === 'error',
+                helperText: helperTextToDisplay,
+                size: 'small',
+                InputProps: { ...testProps }
+            }
+        } }));
 }
 //# sourceMappingURL=DateTime.js.map

package/lib/components/field/DateTime/DateTime.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTime.js","sourceRoot":"","sources":["../../../../src/components/field/DateTime/DateTime.tsx"],"names":[],"mappings":"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","sourcesContent":["import { KeyboardDateTimePicker } from '@material-ui/pickers';\n\nimport handleEvent from '../../helpers/event-utils';\nimport { format } from '../../helpers/formatters';\nimport { dateFormatInfoDefault, getDateFormatInfo } from '../../helpers/date-format-utils';\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\nimport { PConnFieldProps } from '../../../types/PConnProps';\n\ninterface DateTimeProps extends PConnFieldProps {\n  // If any, enter additional props that only exist on DateTime here\n}\n\nexport default function DateTime(props: DateTimeProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const TextInput = getComponentFromMap('TextInput');\n  const FieldValueList = getComponentFromMap('FieldValueList');\n\n  const {\n    getPConnect,\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    onChange,\n    readOnly,\n    testId,\n    helperText,\n    displayMode,\n    hideLabel\n  } = props;\n\n  const pConn = getPConnect();\n  const actions = pConn.getActionsApi();\n  const propName = (pConn.getStateProps() as any).value;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  // Start with default dateFormatInfo\n  const dateFormatInfo = dateFormatInfoDefault;\n  // and then update, as needed, based on locale, etc.\n  const theDateFormat = getDateFormatInfo();\n  dateFormatInfo.dateFormatString = theDateFormat.dateFormatString;\n  dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;\n  dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;\n\n  if (displayMode === 'LABELS_LEFT') {\n    const formattedDateTime = format(props.value, 'datetime', {\n      format: `${dateFormatInfo.dateFormatString} hh:mm a`\n    });\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} />;\n  }\n\n  if (displayMode === 'STACKED_LARGE_VAL') {\n    const formattedDateTime = format(props.value, 'datetime', {\n      format: `${dateFormatInfo.dateFormatString} hh:mm a`\n    });\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} variant='stacked' />;\n  }\n\n  if (readOnly) {\n    const formattedDateTime = format(props.value, 'datetime');\n    return <TextInput {...props} value={formattedDateTime} />;\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  //\n  // TODO: Keyboard doesn't work in the minute field, it updates one digit then jump to am/pm field\n  //       try an older version of the lib or use DateTimePicker\n  //\n\n  return (\n    <KeyboardDateTimePicker\n      variant='inline'\n      inputVariant='outlined'\n      fullWidth\n      autoOk\n      required={required}\n      disabled={disabled}\n      placeholder={`${dateFormatInfo.dateFormatStringLC} hh:mm a`}\n      format={`${dateFormatInfo.dateFormatString} hh:mm a`}\n      mask={`${dateFormatInfo.dateFormatMask} __:__ _m`}\n      minutesStep={5}\n      error={status === 'error'}\n      helperText={helperTextToDisplay}\n      size='small'\n      label={label}\n      value={value || null}\n      onChange={handleChange}\n      onAccept={handleAccept}\n      data-test-id={testId}\n    />\n  );\n}\n"]}
+{"version":3,"file":"DateTime.js","sourceRoot":"","sources":["../../../../src/components/field/DateTime/DateTime.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from 'react';\nimport { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';\nimport dayjs, { Dayjs } from 'dayjs';\nimport DateFormatter from '../../helpers/formatters/Date';\nimport handleEvent from '../../helpers/event-utils';\nimport { format } from '../../helpers/formatters';\nimport { dateFormatInfoDefault, getDateFormatInfo } from '../../helpers/date-format-utils';\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\nimport type { PConnFieldProps } from '../../../types/PConnProps';\n\ninterface DateTimeProps extends PConnFieldProps {\n  // If any, enter additional props that only exist on DateTime here\n}\n\nexport default function DateTime(props: DateTimeProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const TextInput = getComponentFromMap('TextInput');\n  const FieldValueList = getComponentFromMap('FieldValueList');\n\n  const { getPConnect, label, required, disabled, value = '', validatemessage, status, readOnly, testId, helperText, displayMode, hideLabel } = props;\n\n  const environmentInfo = PCore.getEnvironmentInfo();\n  const timezone = environmentInfo && environmentInfo.getTimeZone();\n\n  const [dateValue, setDateValue] = useState<Dayjs | null>(value ? dayjs(DateFormatter.convertToTimezone(value, { timezone })) : null);\n\n  const pConn = getPConnect();\n  const actions = pConn.getActionsApi();\n  const propName = (pConn.getStateProps() as any).value;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  // Start with default dateFormatInfo\n  const dateFormatInfo = dateFormatInfoDefault;\n  // and then update, as needed, based on locale, etc.\n  const theDateFormat = getDateFormatInfo();\n  dateFormatInfo.dateFormatString = theDateFormat.dateFormatString;\n  dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;\n  dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;\n\n  useEffect(() => {\n    setDateValue(dayjs(DateFormatter.convertToTimezone(value, { timezone })));\n  }, [value]);\n\n  if (displayMode === 'DISPLAY_ONLY') {\n    const formattedDateTime = format(props.value, 'datetime', {\n      format: `${dateFormatInfo.dateFormatString} hh:mm a`\n    });\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} />;\n  }\n\n  if (displayMode === 'STACKED_LARGE_VAL') {\n    const formattedDateTime = format(props.value, 'datetime', {\n      format: `${dateFormatInfo.dateFormatString} hh:mm a`\n    });\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} variant='stacked' />;\n  }\n\n  if (readOnly) {\n    const formattedDateTime = format(props.value, 'datetime');\n    return <TextInput {...props} value={formattedDateTime} />;\n  }\n\n  const testProps: any = { 'data-test-id': testId };\n\n  const handleChange = date => {\n    const timeZoneDateTime = (dayjs as any).tz(date.format('YYYY-MM-DDTHH:mm:ss'), timezone);\n    const changeValue = timeZoneDateTime && timeZoneDateTime.isValid() ? timeZoneDateTime.toISOString() : '';\n    setDateValue(timeZoneDateTime);\n    handleEvent(actions, 'changeNblur', propName, changeValue);\n  };\n\n  //\n  // TODO: Keyboard doesn't work in the minute field, it updates one digit then jump to am/pm field\n  //       try an older version of the lib or use DateTimePicker\n  //\n\n  return (\n    <DateTimePicker\n      // fullWidth\n      // autoOk\n      disabled={disabled}\n      format={`${dateFormatInfo.dateFormatString} hh:mm a`}\n      // mask={`${dateFormatInfo.dateFormatMask} __:__ _m`}\n      minutesStep={5}\n      label={label}\n      value={dateValue}\n      onChange={handleChange}\n      slotProps={{\n        textField: {\n          variant: 'outlined',\n          required,\n          placeholder: `${dateFormatInfo.dateFormatStringLC} hh:mm a`,\n          error: status === 'error',\n          helperText: helperTextToDisplay,\n          size: 'small',\n          InputProps: { ...testProps }\n        }\n      }}\n    />\n  );\n}\n"]}

package/lib/components/field/Decimal/Decimal.d.ts

@@ -1,4 +1,4 @@
-import { PConnFieldProps } from '../../../types/PConnProps';
+import type { PConnFieldProps } from '../../../types/PConnProps';
 interface DecimalProps extends PConnFieldProps {
     currencyISOCode?: string;
     decimalPrecision?: number;

package/lib/components/field/Decimal/Decimal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Decimal.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Decimal/Decimal.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAM5D,UAAU,YAAa,SAAQ,eAAe;IAE5C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,YAAY,2CAiGlD"}
+{"version":3,"file":"Decimal.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Decimal/Decimal.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAMjE,UAAU,YAAa,SAAQ,eAAe;IAE5C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,YAAY,2CAoGlD"}

package/lib/components/field/Decimal/Decimal.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TextField } from '@material-ui/core';
 import { NumericFormat } from 'react-number-format';
-import { useState } from 'react';
+import { TextField } from '@mui/material';
+import { useEffect, useState } from 'react';
 import { getCurrencyCharacters, getCurrencyOptions } from '../Currency/currency-utils';
 import handleEvent from '../../helpers/event-utils';
 import { format } from '../../helpers/formatters';
@@ -22,6 +22,9 @@ export default function Decimal(props) {
     const theCurrSep = theSymbols.theDigitGroupSeparator;
     const theCurrSym = theSymbols.theCurrencySymbol;
     const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
+    useEffect(() => {
+        setValues(value.toString());
+    }, [value]);
     let readOnlyProp = {}; // Note: empty if NOT ReadOnly
     if (readOnly) {
         readOnlyProp = { readOnly: true };
@@ -31,17 +34,15 @@ export default function Decimal(props) {
         formattedValue = format(value, formatter.toLowerCase(), theCurrencyOptions);
     }
     else {
-        formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
+        formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), theCurrencyOptions);
     }
-    if (displayMode === 'LABELS_LEFT') {
+    if (displayMode === 'DISPLAY_ONLY') {
         return _jsx(FieldValueList, { name: hideLabel ? '' : label, value: formattedValue });
     }
     if (displayMode === 'STACKED_LARGE_VAL') {
         return _jsx(FieldValueList, { name: hideLabel ? '' : label, value: formattedValue, variant: 'stacked' });
     }
-    const testProp = {
-        'data-test-id': testId
-    };
+    const testProps = { 'data-test-id': testId };
     function decimalOnBlur() {
         handleEvent(actions, 'changeNblur', propName, values);
     }
@@ -50,6 +51,6 @@ export default function Decimal(props) {
     };
     return (_jsx(NumericFormat, { valueIsNumericString: true, fullWidth: true, variant: readOnly ? 'standard' : 'outlined', helperText: helperTextToDisplay, placeholder: placeholder ?? '', size: 'small', required: required, disabled: disabled, error: status === 'error', label: label, value: values, onValueChange: val => {
             handleChange(val);
-        }, onBlur: !readOnly ? decimalOnBlur : undefined, prefix: readOnly && formatter === 'Currency' ? theCurrSym : '', decimalSeparator: theCurrDec, thousandSeparator: showGroupSeparators ? theCurrSep : '', decimalScale: readOnly && formatter === 'Currency' ? undefined : decimalPrecision, InputProps: { ...readOnlyProp, inputProps: { ...testProp } }, customInput: TextField }));
+        }, onBlur: !readOnly ? decimalOnBlur : undefined, prefix: readOnly && formatter === 'Currency' ? theCurrSym : '', suffix: readOnly && formatter === 'Percentage' ? '%' : '', decimalSeparator: theCurrDec, thousandSeparator: showGroupSeparators ? theCurrSep : '', decimalScale: readOnly && formatter === 'Currency' ? undefined : decimalPrecision, slotProps: { input: { ...readOnlyProp, inputProps: { ...testProps } } }, customInput: TextField }));
 }
 //# sourceMappingURL=Decimal.js.map