@abgov/jsonforms-components 1.2.2 → 1.2.4

package/index.esm.js

@@ -1,15 +1,15 @@
 import { withAjvProps, materialSliderControlTester, MaterialSliderControl, materialObjectControlTester, MaterialObjectRenderer, materialAllOfControlTester, MaterialAllOfRenderer, materialAnyOfControlTester, MaterialAnyOfRenderer, materialOneOfControlTester, MaterialOneOfRenderer, materialOneOfRadioGroupControlTester, MaterialOneOfRadioGroupControl, materialOneOfEnumControlTester, MaterialOneOfEnumControl, materialHorizontalLayoutTester, materialVerticalLayoutTester, materialArrayLayoutTester, MaterialArrayLayout, materialAnyOfStringOrEnumControlTester, MaterialAnyOfStringOrEnumControl, materialEnumArrayRendererTester, MaterialEnumArrayRenderer, materialBooleanCellTester, MaterialBooleanCell, materialBooleanToggleCellTester, MaterialBooleanToggleCell, materialEnumCellTester, MaterialEnumCell, materialOneOfEnumCellTester, MaterialOneOfEnumCell } from '@jsonforms/material-renderers';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { GoAFormItem, GoAInput, GoATextArea, GoACallout, GoAInputDate, GoAInputDateTime, GoAInputTime, GoADropdown, GoADropdownItem, GoARadioGroup, GoARadioItem, GoACheckbox, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAIconButton, GoAFileUploadInput, GoAModal, GoACircularProgress, GoAGrid, GoAContainer, GoAButtonGroup, GoADetails } from '@abgov/react-components';
+import { GoAFormItem, GoACallout, GoAInputDate, GoAInput, GoATextArea, GoAInputDateTime, GoAInputTime, GoADropdown, GoADropdownItem, GoARadioGroup, GoARadioItem, GoACheckbox, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAIconButton, GoAFileUploadInput, GoAModal, GoACircularProgress, GoAGrid, GoAContainer, GoAButtonGroup, GoADetails } from '@abgov/react-components';
 import { Hidden, Typography, FormHelperText } from '@mui/material';
-import { rankWith, isStringControl, and, optionIs, isDateControl, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isEnumControl, isBooleanControl, isDescriptionHidden, isVisible, isEnabled, deriveLabelForUISchemaElement, uiTypeIs, schemaTypeIs, formatIs, createDefaultValue, Paths, or, isObjectArrayControl, isPrimitiveArrayControl, withIncreasedRank, hasType, isControl, isCategorization, isLayout } from '@jsonforms/core';
+import styled from 'styled-components';
+import { rankWith, isDateControl, isStringControl, and, optionIs, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isEnumControl, isBooleanControl, isDescriptionHidden, isVisible, isEnabled, deriveLabelForUISchemaElement, uiTypeIs, schemaTypeIs, formatIs, createDefaultValue, Paths, or, isObjectArrayControl, isPrimitiveArrayControl, withIncreasedRank, hasType, isControl, isCategorization, isLayout } from '@jsonforms/core';
 import { withJsonFormsControlProps, withJsonFormsEnumProps, withTranslateProps, withJsonFormsLayoutProps, JsonFormsDispatch, useJsonForms, withJsonFormsArrayLayoutProps, withJsonFormsCellProps } from '@jsonforms/react';
 import React, { createContext, useEffect, useState, useMemo, useContext, useCallback } from 'react';
 import merge from 'lodash/merge';
 import axios from 'axios';
 import TextField from '@mui/material/TextField';
 import Autocomplete from '@mui/material/Autocomplete';
-import styled from 'styled-components';
 import isEmpty from 'lodash/isEmpty';
 import range from 'lodash/range';
 
@@ -1739,6 +1739,12 @@ $$3({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign }
   assign: assign
 });
 
+let _$6 = t => t,
+  _t$6;
+const FormFieldWrapper = styled.div(_t$6 || (_t$6 = _$6`
+  margin-bottom: var(--goa-space-l);
+`));
+
 var anObject$3 = anObject$9;
 
 // `RegExp.prototype.flags` getter implementation
@@ -2389,16 +2395,126 @@ const GoAInputBaseControl = props => {
   }
   return jsx(Hidden, {
     xsUp: !visible,
-    children: jsx(GoAFormItem, {
-      requirement: required ? 'required' : undefined,
-      error: modifiedErrors,
-      label: (props === null || props === void 0 ? void 0 : props.noLabel) === true ? '' : labelToUpdate,
-      helpText: typeof ((_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.help) === 'string' ? (_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.help : '',
-      children: jsx(InnerComponent, Object.assign({}, props))
+    children: jsx(FormFieldWrapper, {
+      children: jsx(GoAFormItem, {
+        requirement: required ? 'required' : undefined,
+        error: modifiedErrors,
+        label: (props === null || props === void 0 ? void 0 : props.noLabel) === true ? '' : labelToUpdate,
+        helpText: typeof ((_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.help) === 'string' ? (_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.help : '',
+        children: jsx(InnerComponent, Object.assign({}, props))
+      })
     })
   });
 };
 
+/**
+ *  Used internally by registered Controls, the MessageControl
+ *  is used to display an error message if a component cannot be rendered
+ *  due to input errors - typically from options.componentProps.
+ *
+ *  NOTE: The component itself is not, and should not, be registered.
+ *
+ * @param message the message to be displayed
+ *
+ * @returns component for displaying the message in the correct style
+ */
+// TODO: Add styling
+const MessageControl = message => {
+  return jsx(GoACallout, {
+    type: "emergency",
+    children: message
+  });
+};
+
+const errMalformedDate = (scope, type) => {
+  return `${type}-date for variable '${scope}' has an incorrect format.`;
+};
+const standardizeDate = date => {
+  try {
+    const stdDate = new Date(date).toISOString().substring(0, 10);
+    return stdDate;
+  } catch (e) {
+    return undefined;
+  }
+};
+const isValidDateFormat = date => {
+  const standardized = standardizeDate(date);
+  return standardized !== undefined;
+};
+const invalidDateFormat = (scope, type) => {
+  return MessageControl(errMalformedDate(scope, type));
+};
+const reformatDateProps = props => {
+  if (props) {
+    if ('min' in props && typeof props.min === 'string') {
+      props['min'] = standardizeDate(props.min);
+    }
+    if ('max' in props && typeof props.max === 'string') {
+      props['max'] = standardizeDate(props.max);
+    }
+  }
+  return props;
+};
+const GoADateInput = props => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const {
+    data,
+    config,
+    id,
+    enabled,
+    uischema,
+    path,
+    handleChange,
+    label
+  } = props;
+  const appliedUiSchemaOptions = Object.assign(Object.assign({}, config), uischema === null || uischema === void 0 ? void 0 : uischema.options);
+  const readOnly = (_c = (_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.readOnly) !== null && _c !== void 0 ? _c : false;
+  const minDate = (_e = (_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.componentProps) === null || _e === void 0 ? void 0 : _e.min;
+  if (minDate && !isValidDateFormat(minDate)) {
+    return invalidDateFormat(uischema.scope, 'Min');
+  }
+  const maxDate = (_g = (_f = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _f === void 0 ? void 0 : _f.componentProps) === null || _g === void 0 ? void 0 : _g.max;
+  if (maxDate && !isValidDateFormat(maxDate)) {
+    return invalidDateFormat(uischema.scope, 'Max');
+  }
+  return jsx(GoAInputDate, Object.assign({
+    error: checkFieldValidity(props).length > 0,
+    width: "100%",
+    name: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
+    value: standardizeDate(data) || '',
+    testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
+    disabled: !enabled,
+    readonly: readOnly,
+    onChange: (name, value) => {
+      onChangeForDateControl({
+        name,
+        value,
+        controlProps: props
+      });
+    },
+    onKeyPress: (name, value, key) => {
+      onKeyPressForDateControl({
+        name,
+        value,
+        key,
+        controlProps: props
+      });
+    },
+    onBlur: (name, value) => {
+      onBlurForDateControl({
+        name,
+        value,
+        controlProps: props
+      });
+    }
+  }, reformatDateProps((_h = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _h === void 0 ? void 0 : _h.componentProps)));
+};
+const GoADateControl = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
+  input: GoADateInput
+}));
+const GoADateControlTester = rankWith(4, isDateControl);
+const GoAInputDateControl = withJsonFormsControlProps(GoADateControl);
+
 /**
  * Checks input controls data value to determine is required and has any data.
  * @param props - The JsonForm control props
@@ -2419,9 +2535,242 @@ const isRequiredAndHasNoData = props => {
 const isNotKeyPressTabOrShift = key => {
   return !(key === 'Tab' || key === 'Shift') && key !== undefined;
 };
+/**
+ * Helper function to process onKeyPress events for text controls.
+ * @param props - EventKeyPressControlProps
+ */
+const onKeyPressForTextControl = props => {
+  const {
+    key,
+    value,
+    controlProps
+  } = props;
+  const {
+    handleChange,
+    path
+  } = controlProps;
+  if (isNotKeyPressTabOrShift(key)) {
+    handleChange(path, value);
+  }
+};
+/**
+ * Helper functions to process onKeyPress events for Numeric controls.
+ * @param props - EventKeyPressControlProps
+ */
+const onKeyPressNumericControl = props => {
+  const {
+    value,
+    key,
+    controlProps
+  } = props;
+  const {
+    handleChange,
+    path
+  } = controlProps;
+  if (isNotKeyPressTabOrShift(key)) {
+    let newValue = '';
+    if (value !== '') {
+      newValue = +value;
+    }
+    handleChange(path, newValue);
+  }
+};
+/**
+ * Helper function to process onKeyPress events for Time controls
+ * @param props - EventKeyPressControlProps
+ */
+const onKeyPressForTimeControl = props => {
+  const {
+    controlProps,
+    key
+  } = props;
+  const {
+    value
+  } = props;
+  const {
+    handleChange,
+    path
+  } = controlProps;
+  if (isNotKeyPressTabOrShift(key)) {
+    handleChange(path, value);
+  }
+};
+/**
+ * Helper function to process onKeyPress events for Date/Date Time controls
+ * @param props - EventKeyPressControlProps
+ */
+const onKeyPressForDateControl = props => {
+  const {
+    controlProps,
+    key
+  } = props;
+  let {
+    value
+  } = props;
+  const {
+    handleChange,
+    path
+  } = controlProps;
+  if (isNotKeyPressTabOrShift(key)) {
+    value = standardizeDate(value) || '';
+    handleChange(path, value);
+  }
+};
+/**
+ * Helper function to process onBlur events for text controls.
+ * @param props - EventBlurControlProps
+ */
+const onBlurForTextControl = props => {
+  const {
+    value,
+    controlProps
+  } = props;
+  const {
+    handleChange,
+    path
+  } = controlProps;
+  if (isRequiredAndHasNoData(controlProps)) {
+    handleChange(path, value);
+  }
+};
+/**
+ * Helper function to process onBlur events for Numeric controls.
+ * @param props - EventBlurControlProps
+ */
+const onBlurForNumericControl = props => {
+  const {
+    value,
+    controlProps
+  } = props;
+  const {
+    handleChange,
+    path
+  } = controlProps;
+  if (isRequiredAndHasNoData(controlProps)) {
+    let newValue = '';
+    if (value !== '') {
+      newValue = +value;
+    }
+    handleChange(path, newValue);
+  }
+};
+/**
+ * Helper function to process for onBlur event for Date/Date Time controls
+ * @param props - EventBlurControlProps
+ */
+const onBlurForDateControl = props => {
+  const {
+    controlProps
+  } = props;
+  let {
+    value
+  } = props;
+  const {
+    handleChange,
+    path
+  } = controlProps;
+  if (isRequiredAndHasNoData(controlProps)) {
+    value = standardizeDate(value) || '';
+    handleChange(path, value);
+  }
+};
+/**
+ * Helper function to process for onBlur event for time controls
+ * @param props - EventBlurControlProps
+ */
+const onBlurForTimeControl = props => {
+  const {
+    controlProps
+  } = props;
+  const {
+    value
+  } = props;
+  const {
+    handleChange,
+    path
+  } = controlProps;
+  if (isRequiredAndHasNoData(controlProps)) {
+    handleChange(path, value);
+  }
+};
+/**
+ * Helper function to process onChange event for Date controls.
+ * @param props - EventChangeControlProps
+ */
+const onChangeForDateControl = props => {
+  let {
+    value
+  } = props;
+  const {
+    controlProps
+  } = props;
+  const {
+    handleChange,
+    path,
+    data
+  } = controlProps;
+  if (value && value !== null) {
+    value = standardizeDate(value) || '';
+    if (value !== data) {
+      handleChange(path, value);
+    }
+  }
+};
+/**
+ * Helper function to process onChange event for Date controls.
+ * @param props - EventChangeControlProps
+ */
+const onChangeForDateTimeControl = props => {
+  var _a;
+  let {
+    value
+  } = props;
+  const {
+    controlProps
+  } = props;
+  const {
+    handleChange,
+    path,
+    data
+  } = controlProps;
+  if (value && value !== null) {
+    value = isValidDate(value) ? (_a = new Date(value)) === null || _a === void 0 ? void 0 : _a.toISOString() : '';
+    if (data !== value) {
+      handleChange(path, value);
+    }
+  }
+};
+/**
+ * Helper function to process onChange event for Number/Integer controls.
+ * @param props - EventChangeControlProps
+ */
+const onChangeForNumericControl = props => {
+  const {
+    value
+  } = props;
+  const {
+    controlProps
+  } = props;
+  const {
+    handleChange,
+    path,
+    data
+  } = controlProps;
+  if (value && value !== null) {
+    //Prevents handleChange from executing if the data has not changed
+    //so the component will not re render.
+    if (data !== +value) {
+      let newValue = '';
+      if (value !== '') {
+        newValue = +value;
+      }
+      handleChange(path, newValue);
+    }
+  }
+};
 
 const GoAInputText = props => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f, _g;
   const {
     data,
     config,
@@ -2439,12 +2788,14 @@ const GoAInputText = props => {
   const placeholder = (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.placeholder) || (schema === null || schema === void 0 ? void 0 : schema.description) || '';
   const errorsFormInput = checkFieldValidity(props);
   const autoCapitalize = ((_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.autoCapitalize) === true || ((_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.autoCapitalize) === true;
+  const readOnly = (_f = (_e = (_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.componentProps) === null || _e === void 0 ? void 0 : _e.readOnly) !== null && _f !== void 0 ? _f : false;
   return jsx(GoAInput, Object.assign({
     error: errorsFormInput.length > 0,
     type: appliedUiSchemaOptions.format === 'password' ? 'password' : 'text',
     disabled: !enabled,
     value: data,
     width: '100%',
+    readonly: readOnly,
     placeholder: placeholder,
     // maxLength={appliedUiSchemaOptions?.maxLength}
     name: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
@@ -2454,24 +2805,21 @@ const GoAInputText = props => {
     // side effect that causes the validation to render when it shouldnt.
     onChange: (name, value) => {},
     onKeyPress: (name, value, key) => {
-      if (isNotKeyPressTabOrShift(key)) {
-        if (autoCapitalize === true) {
-          handleChange(path, value.toUpperCase());
-        } else {
-          handleChange(path, value);
-        }
-      }
+      onKeyPressForTextControl({
+        name,
+        value: autoCapitalize ? value.toUpperCase() : value,
+        key,
+        controlProps: props
+      });
     },
     onBlur: (name, value) => {
-      if (isRequiredAndHasNoData(props)) {
-        if (autoCapitalize) {
-          handleChange(path, value.toUpperCase());
-        } else {
-          handleChange(path, value);
-        }
-      }
+      onBlurForTextControl({
+        name,
+        controlProps: props,
+        value: autoCapitalize ? value.toUpperCase() : value
+      });
     }
-  }, (_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.componentProps));
+  }, (_g = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _g === void 0 ? void 0 : _g.componentProps));
 };
 const GoATextControl = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
   input: GoAInputText
@@ -2480,7 +2828,7 @@ const GoATextControlTester = rankWith(1, isStringControl);
 const GoAInputTextControl = withJsonFormsControlProps(GoATextControl);
 
 const MultiLineText = props => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f, _g;
   // eslint-disable-next-line
   const {
     data,
@@ -2497,10 +2845,12 @@ const MultiLineText = props => {
   const placeholder = (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.placeholder) || (schema === null || schema === void 0 ? void 0 : schema.description) || '';
   const errorsFormInput = checkFieldValidity(props);
   const autoCapitalize = ((_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.autoCapitalize) === true || ((_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.autoCapitalize) === true;
+  const readOnly = (_f = (_e = (_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.componentProps) === null || _e === void 0 ? void 0 : _e.readOnly) !== null && _f !== void 0 ? _f : false;
   return jsx(GoATextArea, Object.assign({
     error: errorsFormInput.length > 0,
     value: data,
     disabled: !enabled,
+    readOnly: readOnly,
     placeholder: placeholder,
     testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
     name: `${label || path}-text-area`,
@@ -2508,19 +2858,18 @@ const MultiLineText = props => {
     // Note: Paul Jan-09-2023. The latest ui-component come with the maxCount. We need to uncomment the following line when the component is updated
     // maxCount={schema.maxLength || 256}
     onKeyPress: (name, value, key) => {
-      if (isNotKeyPressTabOrShift(key)) {
-        if (autoCapitalize === true) {
-          handleChange(path, value.toUpperCase());
-        } else {
-          handleChange(path, value);
-        }
-      }
+      onKeyPressForTextControl({
+        name,
+        value: autoCapitalize ? value.toUpperCase() : value,
+        key,
+        controlProps: props
+      });
     },
     // Dont use handleChange in the onChange event, use the keyPress or onBlur.
     // If you use it onChange along with keyPress event it will cause a
     // side effect that causes the validation to render when it shouldnt.
-    onChange: () => {}
-  }, (_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.componentProps));
+    onChange: (name, value) => {}
+  }, (_g = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _g === void 0 ? void 0 : _g.componentProps));
 };
 const MultiLineTextControlInput = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
   input: MultiLineText
@@ -2528,108 +2877,8 @@ const MultiLineTextControlInput = props => jsx(GoAInputBaseControl, Object.assig
 const MultiLineTextControlTester = rankWith(3, and(isStringControl, optionIs('multi', true)));
 const MultiLineTextControl = withJsonFormsControlProps(MultiLineTextControlInput);
 
-/**
- *  Used internally by registered Controls, the MessageControl
- *  is used to display an error message if a component cannot be rendered
- *  due to input errors - typically from options.componentProps.
- *
- *  NOTE: The component itself is not, and should not, be registered.
- *
- * @param message the message to be displayed
- *
- * @returns component for displaying the message in the correct style
- */
-// TODO: Add styling
-const MessageControl = message => {
-  return jsx(GoACallout, {
-    type: "emergency",
-    children: message
-  });
-};
-
-const errMalformedDate = (scope, type) => {
-  return `${type}-date for variable '${scope}' has an incorrect format.`;
-};
-const standardizeDate = date => {
-  try {
-    const stdDate = new Date(date).toISOString().substring(0, 10);
-    return stdDate;
-  } catch (e) {
-    return undefined;
-  }
-};
-const isValidDateFormat = date => {
-  const standardized = standardizeDate(date);
-  return standardized !== undefined;
-};
-const invalidDateFormat = (scope, type) => {
-  return MessageControl(errMalformedDate(scope, type));
-};
-const reformatDateProps = props => {
-  if (props) {
-    if ('min' in props && typeof props.min === 'string') {
-      props['min'] = standardizeDate(props.min);
-    }
-    if ('max' in props && typeof props.max === 'string') {
-      props['max'] = standardizeDate(props.max);
-    }
-  }
-  return props;
-};
-const GoADateInput = props => {
-  var _a, _b, _c, _d, _e;
-  const {
-    data,
-    config,
-    id,
-    enabled,
-    uischema,
-    path,
-    handleChange,
-    label
-  } = props;
-  const appliedUiSchemaOptions = Object.assign(Object.assign({}, config), uischema === null || uischema === void 0 ? void 0 : uischema.options);
-  const minDate = (_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.min;
-  if (minDate && !isValidDateFormat(minDate)) {
-    return invalidDateFormat(uischema.scope, 'Min');
-  }
-  const maxDate = (_d = (_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.componentProps) === null || _d === void 0 ? void 0 : _d.max;
-  if (maxDate && !isValidDateFormat(maxDate)) {
-    return invalidDateFormat(uischema.scope, 'Max');
-  }
-  return jsx(GoAInputDate, Object.assign({
-    error: checkFieldValidity(props).length > 0,
-    width: "100%",
-    name: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
-    value: standardizeDate(data) || '',
-    testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
-    disabled: !enabled,
-    // Don't use handleChange in the onChange event, use the keyPress or onBlur.
-    // If you use it onChange along with keyPress event it will cause a
-    // side effect that causes the validation to render when it shouldn't.
-    onChange: (name, value) => {},
-    onKeyPress: (name, value, key) => {
-      if (isNotKeyPressTabOrShift(key)) {
-        value = standardizeDate(value) || '';
-        handleChange(path, value);
-      }
-    },
-    onBlur: (name, value) => {
-      if (isRequiredAndHasNoData(props)) {
-        value = standardizeDate(value) || '';
-        handleChange(path, value);
-      }
-    }
-  }, reformatDateProps((_e = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _e === void 0 ? void 0 : _e.componentProps)));
-};
-const GoADateControl = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
-  input: GoADateInput
-}));
-const GoADateControlTester = rankWith(4, isDateControl);
-const GoAInputDateControl = withJsonFormsControlProps(GoADateControl);
-
 const GoANumberInput = props => {
-  var _a;
+  var _a, _b, _c, _d;
   // eslint-disable-next-line
   const {
     data,
@@ -2650,11 +2899,13 @@ const GoANumberInput = props => {
   const StepValue = clonedSchema.multipleOf ? clonedSchema.multipleOf : 0.01;
   const MinValue = clonedSchema.minimum ? clonedSchema.minimum : '';
   const MaxValue = clonedSchema.exclusiveMaximum ? clonedSchema.exclusiveMaximum : '';
+  const readOnly = (_c = (_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.readOnly) !== null && _c !== void 0 ? _c : false;
   const errorsFormInput = checkFieldValidity(props);
   return jsx(GoAInput, Object.assign({
     type: "number",
     error: errorsFormInput.length > 0,
     disabled: !enabled,
+    readonly: readOnly,
     value: InputValue,
     placeholder: placeholder,
     step: StepValue,
@@ -2664,27 +2915,28 @@ const GoANumberInput = props => {
     name: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
     testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
     onKeyPress: (name, value, key) => {
-      if (isNotKeyPressTabOrShift(key)) {
-        let newValue = '';
-        if (value !== '') {
-          newValue = +value;
-        }
-        handleChange(path, newValue);
-      }
+      onKeyPressNumericControl({
+        name,
+        value,
+        key,
+        controlProps: props
+      });
     },
     onBlur: (name, value) => {
-      if (isRequiredAndHasNoData(props)) {
-        let newValue = '';
-        if (value !== '') {
-          newValue = +value;
-        }
-        handleChange(path, newValue);
-      }
+      onBlurForNumericControl({
+        name,
+        value,
+        controlProps: props
+      });
     },
-    //Dont trigger the handleChange event on the onChange event as it will cause
-    //issue with the error message from displaying, use keyPress or the onBlur event instead
-    onChange: (name, value) => {}
-  }, (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps));
+    onChange: (name, value) => {
+      onChangeForNumericControl({
+        name,
+        value,
+        controlProps: props
+      });
+    }
+  }, (_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.componentProps));
 };
 const GoANumberControl = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
   input: GoANumberInput
@@ -2693,7 +2945,7 @@ const GoANumberControlTester = rankWith(2, isNumberControl);
 const GoAInputNumberControl = withJsonFormsControlProps(GoANumberControl);
 
 const GoAInputInteger = props => {
-  var _a;
+  var _a, _b, _c, _d;
   // eslint-disable-next-line
   const {
     data,
@@ -2714,12 +2966,14 @@ const GoAInputInteger = props => {
   const StepValue = clonedSchema.multipleOf ? clonedSchema.multipleOf : 0;
   const MinValue = clonedSchema.minimum ? clonedSchema.minimum : '';
   const MaxValue = clonedSchema.exclusiveMaximum ? clonedSchema.exclusiveMaximum : '';
+  const readOnly = (_c = (_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.readOnly) !== null && _c !== void 0 ? _c : false;
   const errorsFormInput = checkFieldValidity(props);
   return jsx(GoAInput, Object.assign({
     type: "number",
     error: errorsFormInput.length > 0,
     width: "100%",
     disabled: !enabled,
+    readonly: readOnly,
     value: InputValue,
     step: StepValue,
     min: MinValue,
@@ -2728,27 +2982,28 @@ const GoAInputInteger = props => {
     name: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
     testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
     onKeyPress: (name, value, key) => {
-      if (isNotKeyPressTabOrShift(key)) {
-        let newValue = '';
-        if (value !== '') {
-          newValue = +value;
-        }
-        handleChange(path, newValue);
-      }
+      onKeyPressNumericControl({
+        name,
+        value,
+        key,
+        controlProps: props
+      });
     },
     onBlur: (name, value) => {
-      if (isRequiredAndHasNoData(props)) {
-        let newValue = '';
-        if (value !== '') {
-          newValue = +value;
-        }
-        handleChange(path, newValue);
-      }
+      onBlurForNumericControl({
+        name,
+        value,
+        controlProps: props
+      });
     },
-    //Dont trigger the handleChange event on the onChange event as it will cause
-    //issue with the error message from displaying, use keyPress or the onBlur event instead
-    onChange: (name, value) => {}
-  }, (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps));
+    onChange: (name, value) => {
+      onChangeForNumericControl({
+        name,
+        value,
+        controlProps: props
+      });
+    }
+  }, (_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.componentProps));
 };
 const GoAIntegerControl = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
   input: GoAInputInteger
@@ -2757,7 +3012,7 @@ const GoAIntegerControlTester = rankWith(2, isIntegerControl);
 const GoAInputIntegerControl = withJsonFormsControlProps(GoAIntegerControl);
 
 const GoADateTimeInput = props => {
-  var _a;
+  var _a, _b, _c, _d;
   // eslint-disable-next-line
   const {
     data,
@@ -2773,6 +3028,7 @@ const GoADateTimeInput = props => {
     label
   } = props;
   const appliedUiSchemaOptions = Object.assign(Object.assign({}, config), uischema === null || uischema === void 0 ? void 0 : uischema.options);
+  const readOnly = (_c = (_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.readOnly) !== null && _c !== void 0 ? _c : false;
   return jsx(GoAInputDateTime, Object.assign({
     error: checkFieldValidity(props).length > 0,
     width: "100%",
@@ -2780,24 +3036,30 @@ const GoADateTimeInput = props => {
     value: data ? new Date(data).toISOString() : '',
     testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
     disabled: !enabled,
-    // Dont use handleChange in the onChange event, use the keyPress or onBlur.
-    // If you use it onChange along with keyPress event it will cause a
-    // side effect that causes the validation to render when it shouldnt.
-    onChange: (name, value) => {},
+    readonly: readOnly,
+    onChange: (name, value) => {
+      onChangeForDateTimeControl({
+        name,
+        value,
+        controlProps: props
+      });
+    },
     onKeyPress: (name, value, key) => {
-      var _a;
-      if (isNotKeyPressTabOrShift(key)) {
-        value = isValidDate(value) ? (_a = new Date(value)) === null || _a === void 0 ? void 0 : _a.toISOString() : '';
-        handleChange(path, value);
-      }
+      onKeyPressForDateControl({
+        name,
+        value,
+        key,
+        controlProps: props
+      });
     },
     onBlur: (name, value) => {
-      if (isRequiredAndHasNoData(props)) {
-        value = isValidDate(value) ? new Date(value).toISOString() : '';
-        handleChange(path, value);
-      }
+      onBlurForDateControl({
+        name,
+        value,
+        controlProps: props
+      });
     }
-  }, (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps));
+  }, (_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.componentProps));
 };
 const GoADateTimeControl = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
   input: GoADateTimeInput
@@ -2806,7 +3068,7 @@ const GoADateTimeControlTester = rankWith(2, isDateTimeControl);
 const GoAInputDateTimeControl = withJsonFormsControlProps(GoADateTimeControl);
 
 const GoATimeInput = props => {
-  var _a;
+  var _a, _b, _c, _d;
   // eslint-disable-next-line
   const {
     data,
@@ -2822,6 +3084,7 @@ const GoATimeInput = props => {
   } = props;
   const appliedUiSchemaOptions = Object.assign(Object.assign({}, config), uischema === null || uischema === void 0 ? void 0 : uischema.options);
   (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.placeholder) || (schema === null || schema === void 0 ? void 0 : schema.description) || '';
+  const readOnly = (_c = (_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.readOnly) !== null && _c !== void 0 ? _c : false;
   const errorsFormInput = checkFieldValidity(props);
   return jsx(GoAInputTime, Object.assign({
     error: errorsFormInput.length > 0,
@@ -2830,22 +3093,28 @@ const GoATimeInput = props => {
     step: 1,
     width: "100%",
     disabled: !enabled,
+    readonly: readOnly,
     testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
     onBlur: (name, value) => {
-      if (isRequiredAndHasNoData(props)) {
-        handleChange(path, value);
-      }
+      onBlurForTimeControl({
+        name,
+        value,
+        controlProps: props
+      });
     },
     // Dont use handleChange in the onChange event, use the keyPress or onBlur.
     // If you use it onChange along with keyPress event it will cause a
     // side effect that causes the validation to render when it shouldnt.
     onChange: (name, value) => {},
     onKeyPress: (name, value, key) => {
-      if (isNotKeyPressTabOrShift(key)) {
-        handleChange(path, value);
-      }
+      onKeyPressForTimeControl({
+        name,
+        value,
+        key,
+        controlProps: props
+      });
     }
-  }, (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps));
+  }, (_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.componentProps));
 };
 const GoATimeControl = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
   input: GoATimeInput
@@ -4443,7 +4712,7 @@ const GoAGroupControlComponent = props => {
   const group = uischema;
   return jsx(Hidden, {
     xsUp: !visible,
-    children: jsx(GoAContainer, Object.assign({}, group.options, (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps, {
+    children: jsx(GoAContainer, Object.assign({}, (_a = group.options) === null || _a === void 0 ? void 0 : _a.componentProps, {
       children: renderLayoutElements(group.elements, schema, path, enabled, renderers, cells)
     }))
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "license": "Apache-2.0",
   "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
   "repository": "https://github.com/GovAlta/adsp-monorepo",

package/src/lib/Controls/Inputs/InputDateControl.d.ts

@@ -1,9 +1,10 @@
-import React from 'react';
+/// <reference types="react" />
 import { CellProps, WithClassname, ControlProps, RankedTester } from '@jsonforms/core';
 import { WithInputProps } from './type';
 export type GoAInputDateProps = CellProps & WithClassname & WithInputProps;
 export declare const errMalformedDate: (scope: string, type: string) => string;
+export declare const standardizeDate: (date: Date | string) => string | undefined;
 export declare const GoADateInput: (props: GoAInputDateProps) => JSX.Element;
 export declare const GoADateControl: (props: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const GoADateControlTester: RankedTester;
-export declare const GoAInputDateControl: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
+export declare const GoAInputDateControl: import("react").ComponentType<import("@jsonforms/core").OwnPropsOfControl>;

package/src/lib/Controls/Inputs/InputMultiLineTextControl.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+/// <reference types="react" />
 import { CellProps, WithClassname, ControlProps, RankedTester } from '@jsonforms/core';
 import { WithInputProps } from './type';
 export type GoAInputMultiLineTextProps = CellProps & WithClassname & WithInputProps;
 export declare const MultiLineText: (props: GoAInputMultiLineTextProps) => JSX.Element;
 export declare const MultiLineTextControlInput: (props: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const MultiLineTextControlTester: RankedTester;
-export declare const MultiLineTextControl: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
+export declare const MultiLineTextControl: import("react").ComponentType<import("@jsonforms/core").OwnPropsOfControl>;

package/src/lib/Controls/Inputs/InputNumberControl.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+/// <reference types="react" />
 import { CellProps, WithClassname, ControlProps, RankedTester } from '@jsonforms/core';
 import { WithInputProps } from './type';
 export type GoAInputNumberProps = CellProps & WithClassname & WithInputProps;
 export declare const GoANumberInput: (props: GoAInputNumberProps) => JSX.Element;
 export declare const GoANumberControl: (props: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const GoANumberControlTester: RankedTester;
-export declare const GoAInputNumberControl: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
+export declare const GoAInputNumberControl: import("react").ComponentType<import("@jsonforms/core").OwnPropsOfControl>;

package/src/lib/Controls/Inputs/InputTextControl.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+/// <reference types="react" />
 import { CellProps, WithClassname, ControlProps, RankedTester } from '@jsonforms/core';
 import { WithInputProps } from './type';
 export type GoAInputTextProps = CellProps & WithClassname & WithInputProps;
 export declare const GoAInputText: (props: GoAInputTextProps) => JSX.Element;
 export declare const GoATextControl: (props: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const GoATextControlTester: RankedTester;
-export declare const GoAInputTextControl: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
+export declare const GoAInputTextControl: import("react").ComponentType<import("@jsonforms/core").OwnPropsOfControl>;

package/src/lib/Controls/Inputs/InputTimeControl.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+/// <reference types="react" />
 import { CellProps, WithClassname, ControlProps, RankedTester } from '@jsonforms/core';
 import { WithInputProps } from './type';
 export type GoAInputTimeProps = CellProps & WithClassname & WithInputProps;
 export declare const GoATimeInput: (props: GoAInputTimeProps) => JSX.Element;
 export declare const GoATimeControl: (props: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const GoATimeControlTester: RankedTester;
-export declare const GoAInputTimeControl: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
+export declare const GoAInputTimeControl: import("react").ComponentType<import("@jsonforms/core").OwnPropsOfControl>;

package/src/lib/Controls/Inputs/style-component.d.ts

@@ -0,0 +1 @@
+export declare const FormFieldWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/src/lib/Controls/Inputs/type.d.ts

@@ -1,3 +1,32 @@
+import { ControlProps } from '@jsonforms/core';
 export interface WithInputProps {
     label?: string;
 }
+/**
+ * Base event control props to handle event controls
+ */
+export interface EventControlProps {
+    controlProps: ControlProps;
+}
+/**
+ * Change event props to handle on change event controls
+ */
+export interface EventChangeControlProps extends EventControlProps {
+    name: string;
+    value: string | Date;
+}
+/**
+ * KeyPress event props to handle event controls
+ */
+export interface EventKeyPressControlProps extends EventControlProps {
+    name: string;
+    value: string | Date;
+    key: string;
+}
+/**
+ * Blur event props to handle event controls
+ */
+export interface EventBlurControlProps extends EventControlProps {
+    name: string;
+    value: string | Date;
+}

package/src/lib/layouts/GroupControl.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { LayoutProps, RankedTester } from '@jsonforms/core';
 export declare const groupTester: RankedTester;
+export declare const GoAGroupControlComponent: (props: LayoutProps) => JSX.Element;
 export declare const GoAGroupLayoutTester: RankedTester;
 export declare const GoAGroupControl: React.ComponentType<LayoutProps & import("@jsonforms/core").OwnPropsOfLayout>;

package/src/lib/util/inputControlUtils.d.ts

@@ -1,4 +1,5 @@
 import { ControlProps } from '@jsonforms/core';
+import { EventBlurControlProps, EventChangeControlProps, EventKeyPressControlProps } from '../Controls/Inputs/type';
 /**
  * Checks input controls data value to determine is required and has any data.
  * @param props - The JsonForm control props
@@ -11,3 +12,58 @@ export declare const isRequiredAndHasNoData: (props: ControlProps) => boolean |
  * @returns true if the key pressed is not a shift or tab key being pressed, otherwise false
  */
 export declare const isNotKeyPressTabOrShift: (key: string) => boolean;
+/**
+ * Helper function to process onKeyPress events for text controls.
+ * @param props - EventKeyPressControlProps
+ */
+export declare const onKeyPressForTextControl: (props: EventKeyPressControlProps) => void;
+/**
+ * Helper functions to process onKeyPress events for Numeric controls.
+ * @param props - EventKeyPressControlProps
+ */
+export declare const onKeyPressNumericControl: (props: EventKeyPressControlProps) => void;
+/**
+ * Helper function to process onKeyPress events for Time controls
+ * @param props - EventKeyPressControlProps
+ */
+export declare const onKeyPressForTimeControl: (props: EventKeyPressControlProps) => void;
+/**
+ * Helper function to process onKeyPress events for Date/Date Time controls
+ * @param props - EventKeyPressControlProps
+ */
+export declare const onKeyPressForDateControl: (props: EventKeyPressControlProps) => void;
+/**
+ * Helper function to process onBlur events for text controls.
+ * @param props - EventBlurControlProps
+ */
+export declare const onBlurForTextControl: (props: EventBlurControlProps) => void;
+/**
+ * Helper function to process onBlur events for Numeric controls.
+ * @param props - EventBlurControlProps
+ */
+export declare const onBlurForNumericControl: (props: EventBlurControlProps) => void;
+/**
+ * Helper function to process for onBlur event for Date/Date Time controls
+ * @param props - EventBlurControlProps
+ */
+export declare const onBlurForDateControl: (props: EventBlurControlProps) => void;
+/**
+ * Helper function to process for onBlur event for time controls
+ * @param props - EventBlurControlProps
+ */
+export declare const onBlurForTimeControl: (props: EventBlurControlProps) => void;
+/**
+ * Helper function to process onChange event for Date controls.
+ * @param props - EventChangeControlProps
+ */
+export declare const onChangeForDateControl: (props: EventChangeControlProps) => void;
+/**
+ * Helper function to process onChange event for Date controls.
+ * @param props - EventChangeControlProps
+ */
+export declare const onChangeForDateTimeControl: (props: EventChangeControlProps) => void;
+/**
+ * Helper function to process onChange event for Number/Integer controls.
+ * @param props - EventChangeControlProps
+ */
+export declare const onChangeForNumericControl: (props: EventChangeControlProps) => void;