@abgov/jsonforms-components 1.54.1 → 1.54.3

package/index.esm.js

@@ -1,8 +1,8 @@
 import * as runtime from 'react/jsx-runtime';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import React, { createContext, useContext, useReducer, useMemo, useEffect, useState, useRef, useCallback } from 'react';
 import { GoAFormItem, GoAInput, GoATextArea, GoACallout, GoAInputDate, GoAInputDateTime, GoAInputTime, GoARadioGroup, GoARadioItem, GoACheckbox, GoAIcon, GoAGrid, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAModal, GoAButtonGroup, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoATable, GoADropdown, GoADropdownItem, GoADetails, GoASpinner } from '@abgov/react-components';
 import styled from 'styled-components';
-import React, { createContext, useContext, useReducer, useMemo, useEffect, useState, useRef, useCallback } from 'react';
 import axios from 'axios';
 import get$1 from 'lodash/get';
 import { rankWith, isStringControl, and, optionIs, uiTypeIs, isDateControl, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isEnumControl, isBooleanControl, getAjv, isVisible, getControlPath, toDataPath, deriveLabelForUISchemaElement, isEnabled, schemaTypeIs, formatIs, createDefaultValue, or, isObjectArrayControl, isPrimitiveArrayControl, Paths, schemaMatches, hasType, isControl, isCategorization, isLayout } from '@jsonforms/core';
@@ -2719,7 +2719,6 @@ const checkFieldValidity = props => {
     }
   }
   if (required) {
-    if (data === undefined) return '';
     if (schema) {
       if (isEmptyBoolean(schema, data)) {
         return `${labelToUpdate} is required`;
@@ -2852,7 +2851,7 @@ const onKeyPressForTimeControl = props => {
     path
   } = controlProps;
   if (isNotKeyPressTabOrShift(key)) {
-    handleChange(path, value);
+    handleChange(path, value === '' ? undefined : value);
   }
 };
 /**
@@ -2873,7 +2872,7 @@ const onKeyPressForDateControl = props => {
   } = controlProps;
   if (isNotKeyPressTabOrShift(key)) {
     value = standardizeDate(value) || '';
-    handleChange(path, value);
+    handleChange(path, value === '' ? undefined : value);
   }
 };
 /**
@@ -2890,7 +2889,7 @@ const onBlurForTextControl = props => {
     path
   } = controlProps;
   if (isRequiredAndHasNoData(controlProps)) {
-    handleChange(path, value);
+    handleChange(path, value === '' ? undefined : value);
   }
 };
 /**
@@ -2907,7 +2906,7 @@ const onBlurForNumericControl = props => {
     path
   } = controlProps;
   if (isRequiredAndHasNoData(controlProps)) {
-    let newValue = '';
+    let newValue = undefined;
     if (value !== '') {
       newValue = +value;
     }
@@ -2931,25 +2930,6 @@ const onBlurForDateControl = props => {
   } = 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 === '' ? undefined : value);
   }
 };
@@ -3037,10 +3017,14 @@ const onChangeForNumericControl = props => {
     //Prevents handleChange from executing if the data has not changed
     //so the component will not re render.
     if (data !== +value) {
-      handleChange(path, value === '' ? undefined : value);
+      let newValue = undefined;
+      if (value !== '') {
+        newValue = +value;
+      }
+      handleChange(path, newValue);
     }
   } else {
-    handleChange(path, value);
+    handleChange(path, value === '' ? undefined : value);
   }
 };
 
@@ -3844,11 +3828,13 @@ const GoAInputBaseControl = props => {
     input,
     required,
     path,
-    isStepperReview
+    isStepperReview,
+    skipOnBlurValidation
   } = props;
   const InnerComponent = input;
   const labelToUpdate = convertToSentenceCase(getLabelText(uischema.scope, label || ''));
   let modifiedErrors = checkFieldValidity(props);
+  const [isVisited, setIsVisited] = useState(skipOnBlurValidation === true);
   if (modifiedErrors === 'must be equal to one of the allowed values') {
     modifiedErrors = '';
   }
@@ -3859,11 +3845,17 @@ const GoAInputBaseControl = props => {
       children: jsx(FormFieldWrapper, {
         children: jsx(GoAFormItem, {
           requirement: required ? 'required' : undefined,
-          error: modifiedErrors,
+          error: isVisited === true ? modifiedErrors : undefined,
           testId: `${isStepperReview === true && 'review-base-'}${path}`,
           label: (props === null || props === void 0 ? void 0 : props.noLabel) === true ? '' : labelToUpdate,
           helpText: typeof ((_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.help) === 'string' && !isStepperReview ? (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.help : '',
-          children: jsx(InnerComponent, Object.assign({}, props))
+          children: jsx(InnerComponent, Object.assign({}, props, {
+            isVisited,
+            errors: modifiedErrors,
+            setIsVisited: () => {
+              setIsVisited(true);
+            }
+          }))
         })
       })
     })
@@ -4391,7 +4383,10 @@ const GoAInputText = props => {
     schema,
     label,
     path,
-    handleChange
+    handleChange,
+    errors,
+    isVisited,
+    setIsVisited
   } = props;
   const registerCtx = useContext(JsonFormsRegisterContext);
   const registerConfig = fetchRegisterConfigFromOptions$1((_b = (_a = props.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.register);
@@ -4431,7 +4426,6 @@ const GoAInputText = props => {
   }, [registerCtx, registerConfig]);
   const appliedUiSchemaOptions = Object.assign(Object.assign({}, config), uischema === null || uischema === void 0 ? void 0 : uischema.options);
   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 isSinField = schema.title === sinTitle;
   const autoCapitalize = ((_f = (_e = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _e === void 0 ? void 0 : _e.componentProps) === null || _f === void 0 ? void 0 : _f.autoCapitalize) === true || ((_g = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _g === void 0 ? void 0 : _g.autoCapitalize) === true;
   const readOnly = (_k = (_j = (_h = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _h === void 0 ? void 0 : _h.componentProps) === null || _j === void 0 ? void 0 : _j.readOnly) !== null && _k !== void 0 ? _k : false;
@@ -4447,7 +4441,7 @@ const GoAInputText = props => {
         handleChange(path, value);
       }
     }, `jsonforms-${label}-dropdown`) : jsx(GoAInput, Object.assign({
-      error: errorsFormInput.length > 0,
+      error: isVisited && errors.length > 0,
       type: appliedUiSchemaOptions.format === 'password' ? 'password' : 'text',
       disabled: !enabled,
       value: data,
@@ -4464,14 +4458,23 @@ const GoAInputText = props => {
         if (schema && schema.title === sinTitle && value !== '') {
           formattedValue = formatSin(value);
         }
+        /* TODO: add the unit test, when the solution is used */
+        /* istanbul ignore next */
+        if (isVisited === false && setIsVisited) {
+          setIsVisited();
+        }
         onChangeForInputControl({
           name,
           value: formattedValue,
           controlProps: props
         });
       },
-      onKeyPress: (name, value, key) => {},
       onBlur: (name, value) => {
+        /* istanbul ignore next */
+        if (isVisited === false && setIsVisited) {
+          setIsVisited();
+        }
+        /* istanbul ignore next */
         onBlurForTextControl({
           name,
           controlProps: props,
@@ -4488,7 +4491,7 @@ const GoATextControlTester = rankWith(1, isStringControl);
 const GoAInputTextControl = withJsonFormsControlProps(GoATextControl);
 
 const MultiLineText = props => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
   const {
     data,
     config,
@@ -4496,9 +4499,11 @@ const MultiLineText = props => {
     enabled,
     uischema,
     path,
-    handleChange,
     schema,
-    label
+    label,
+    isVisited,
+    errors,
+    setIsVisited
   } = props;
   const {
     required
@@ -4506,14 +4511,12 @@ const MultiLineText = props => {
   const [textAreaValue, _] = React.useState(data);
   const appliedUiSchemaOptions = Object.assign(Object.assign({}, config), uischema === null || uischema === void 0 ? void 0 : uischema.options);
   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 width = (_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 : '100%';
   const autoCapitalize = ((_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.autoCapitalize) === true || ((_f = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _f === void 0 ? void 0 : _f.autoCapitalize) === true;
   const readOnly = (_j = (_h = (_g = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _g === void 0 ? void 0 : _g.componentProps) === null || _h === void 0 ? void 0 : _h.readOnly) !== null && _j !== void 0 ? _j : false;
   const textAreaName = `${label || path}-text-area` || '';
-  (_k = document.getElementsByName(textAreaName)[0]) !== null && _k !== void 0 ? _k : null;
   const txtAreaComponent = jsx(GoATextArea, Object.assign({
-    error: errorsFormInput.length > 0,
+    error: isVisited && errors.length > 0,
     value: textAreaValue,
     disabled: !enabled,
     readOnly: readOnly,
@@ -4525,7 +4528,12 @@ const MultiLineText = props => {
     // maxCount={schema.maxLength || 256}
     onKeyPress: (name, value, key) => {
       const newValue = autoCapitalize ? value.toUpperCase() : value;
-      if (value.length === 0 || required && errorsFormInput.length === 0 && value.length > 0) {
+      /* TODO: add the unit test, when the solution is used */
+      /* istanbul ignore next */
+      if (isVisited === false && setIsVisited) {
+        setIsVisited();
+      }
+      if (value.length === 0 || required && errors.length === 0 && value.length > 0) {
         onKeyPressForTextControl({
           name,
           value: newValue,
@@ -4540,9 +4548,13 @@ const MultiLineText = props => {
       });
     },
     onChange: (name, value) => {
-      // this is not triggered unless you tab out
+      /* TODO: add the unit test, when the solution is used */
+      /* istanbul ignore next */
+      if (isVisited === false && setIsVisited) {
+        setIsVisited();
+      }
     }
-  }, (_l = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _l === void 0 ? void 0 : _l.componentProps));
+  }, (_k = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _k === void 0 ? void 0 : _k.componentProps));
   return txtAreaComponent;
 };
 const MultiLineTextControlInput = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
@@ -4605,9 +4617,10 @@ const GoADateInput = props => {
     id,
     enabled,
     uischema,
-    path,
-    handleChange,
-    label
+    errors,
+    isVisited,
+    label,
+    setIsVisited
   } = 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;
@@ -4621,7 +4634,7 @@ const GoADateInput = props => {
     return invalidDateFormat(uischema.scope, 'Max');
   }
   return jsx(GoAInputDate, Object.assign({
-    error: checkFieldValidity(props).length > 0,
+    error: isVisited && errors.length > 0,
     width: width,
     name: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
     value: standardizeDate(data) || '',
@@ -4629,6 +4642,11 @@ const GoADateInput = props => {
     disabled: !enabled,
     readonly: readOnly,
     onChange: (name, value) => {
+      /* TODO: add the unit test, when the solution is used */
+      /* istanbul ignore next */
+      if (isVisited === false && setIsVisited) {
+        setIsVisited();
+      }
       onChangeForDateControl({
         name,
         value,
@@ -4644,6 +4662,11 @@ const GoADateInput = props => {
       });
     },
     onBlur: (name, value) => {
+      /* istanbul ignore next */
+      if (isVisited === false && setIsVisited) {
+        setIsVisited();
+      }
+      /* istanbul ignore next */
       onBlurForDateControl({
         name,
         value,
@@ -4667,11 +4690,11 @@ const GoANumberInput = props => {
     id,
     enabled,
     uischema,
-    isValid,
-    path,
-    handleChange,
     schema,
-    label
+    label,
+    isVisited,
+    errors,
+    setIsVisited
   } = props;
   const appliedUiSchemaOptions = Object.assign(Object.assign({}, config), uischema === null || uischema === void 0 ? void 0 : uischema.options);
   const placeholder = (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.placeholder) || (schema === null || schema === void 0 ? void 0 : schema.description) || '';
@@ -4682,10 +4705,9 @@ const GoANumberInput = props => {
   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 width = (_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.width) !== null && _f !== void 0 ? _f : '100%';
-  const errorsFormInput = checkFieldValidity(props);
   return jsx(GoAInput, Object.assign({
     type: "number",
-    error: errorsFormInput.length > 0,
+    error: isVisited && errors.length > 0,
     disabled: !enabled,
     readonly: readOnly,
     value: InputValue,
@@ -4696,8 +4718,12 @@ const GoANumberInput = props => {
     width: width,
     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) => {},
     onBlur: (name, value) => {
+      /* istanbul ignore next */
+      if (isVisited === false && setIsVisited) {
+        setIsVisited();
+      }
+      /* istanbul ignore next */
       onBlurForNumericControl({
         name,
         value,
@@ -4705,6 +4731,11 @@ const GoANumberInput = props => {
       });
     },
     onChange: (name, value) => {
+      /* TODO: add the unit test, when the solution is used */
+      /* istanbul ignore next */
+      if (isVisited === false && setIsVisited) {
+        setIsVisited();
+      }
       onChangeForNumericControl({
         name,
         value,
@@ -4728,11 +4759,11 @@ const GoAInputInteger = props => {
     id,
     enabled,
     uischema,
-    isValid,
-    path,
-    handleChange,
     schema,
-    label
+    label,
+    isVisited,
+    errors,
+    setIsVisited
   } = props;
   const appliedUiSchemaOptions = Object.assign(Object.assign({}, config), uischema === null || uischema === void 0 ? void 0 : uischema.options);
   const placeholder = (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.placeholder) || (schema === null || schema === void 0 ? void 0 : schema.description) || '';
@@ -4743,10 +4774,9 @@ const GoAInputInteger = props => {
   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 width = (_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.width) !== null && _f !== void 0 ? _f : '100%';
-  const errorsFormInput = checkFieldValidity(props);
   return jsx(GoAInput, Object.assign({
     type: "number",
-    error: errorsFormInput.length > 0,
+    error: isVisited && errors.length > 0,
     width: width,
     disabled: !enabled,
     readonly: readOnly,
@@ -4757,8 +4787,13 @@ const GoAInputInteger = props => {
     placeholder: placeholder,
     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) => {},
+    /* istanbul ignore next */
     onBlur: (name, value) => {
+      /* TODO: add the unit test, when the solution is used */
+      /* istanbul ignore next */
+      if (isVisited === false && setIsVisited) {
+        setIsVisited();
+      }
       onBlurForNumericControl({
         name,
         value,
@@ -4766,6 +4801,11 @@ const GoAInputInteger = props => {
       });
     },
     onChange: (name, value) => {
+      /* TODO: add the unit test, when the solution is used */
+      /* istanbul ignore next */
+      if (isVisited === false && setIsVisited) {
+        setIsVisited();
+      }
       onChangeForNumericControl({
         name,
         value,
@@ -4789,18 +4829,17 @@ const GoADateTimeInput = props => {
     id,
     enabled,
     uischema,
-    isValid,
-    path,
+    isVisited,
     errors,
-    handleChange,
     schema,
-    label
+    label,
+    setIsVisited
   } = 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 width = (_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.width) !== null && _f !== void 0 ? _f : '100%';
   return jsx(GoAInputDateTime, Object.assign({
-    error: checkFieldValidity(props).length > 0,
+    error: isVisited && errors.length > 0,
     width: width,
     name: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
     value: data ? new Date(data).toISOString() : '',
@@ -4808,6 +4847,9 @@ const GoADateTimeInput = props => {
     disabled: !enabled,
     readonly: readOnly,
     onChange: (name, value) => {
+      if (isVisited === false && setIsVisited) {
+        setIsVisited();
+      }
       onChangeForDateTimeControl({
         name,
         value,
@@ -4823,6 +4865,11 @@ const GoADateTimeInput = props => {
       });
     },
     onBlur: (name, value) => {
+      /* istanbul ignore next */
+      if (isVisited === false && setIsVisited) {
+        setIsVisited();
+      }
+      /* istanbul ignore next */
       onBlurForDateControl({
         name,
         value,
@@ -4846,19 +4893,20 @@ const GoATimeInput = props => {
     id,
     enabled,
     uischema,
-    isValid,
     path,
     handleChange,
     schema,
-    label
+    label,
+    isVisited,
+    errors,
+    setIsVisited
   } = 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);
   const width = (_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 : '100%';
   return jsx(GoAInputTime, Object.assign({
-    error: errorsFormInput.length > 0,
+    error: isVisited && errors.length > 0,
     name: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
     value: data,
     step: 1,
@@ -4867,11 +4915,12 @@ const GoATimeInput = props => {
     readonly: readOnly,
     testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
     onBlur: (name, value) => {
-      onBlurForTimeControl({
-        name,
-        value,
-        controlProps: props
-      });
+      /* istanbul ignore next */
+      if (isVisited === false && setIsVisited) {
+        setIsVisited();
+      }
+      /* istanbul ignore next */
+      handleChange(path, value === '' ? undefined : value);
     },
     // 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
@@ -4909,7 +4958,9 @@ const EnumSelect = props => {
     config,
     label,
     uischema,
-    required
+    required,
+    setIsVisited,
+    isVisited
   } = props;
   const registerCtx = useContext(JsonFormsRegisterContext);
   const registerConfig = fetchRegisterConfigFromOptions((_b = (_a = props.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.register);
@@ -4988,13 +5039,14 @@ const RadioGroup = props => {
     options,
     config,
     label,
-    t
+    t,
+    isVisited,
+    errors
   } = props;
   const enumData = (schema === null || schema === void 0 ? void 0 : schema.enum) || [];
   const appliedUiSchemaOptions = merge({}, config, props.uischema.options, options);
-  const errorsFormInput = checkFieldValidity(props);
   return jsx(GoARadioGroup, Object.assign({
-    error: errorsFormInput.length > 0,
+    error: isVisited && errors.length > 0,
     name: `${options || appliedUiSchemaOptions.label}`,
     testId: `${label || id}-jsonforms-radio`,
     value: data,
@@ -5029,20 +5081,13 @@ const BooleanComponent = ({
   label,
   required,
   errors,
-  schema
+  schema,
+  isVisited
 }) => {
   var _a, _b, _c;
-  const errorsFormInput = checkFieldValidity({
-    data,
-    uischema,
-    label,
-    required,
-    errors,
-    schema
-  });
   const text = `${((_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.text) ? (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.text : (schema === null || schema === void 0 ? void 0 : schema.title) ? schema === null || schema === void 0 ? void 0 : schema.title : schema === null || schema === void 0 ? void 0 : schema.description}${required ? ' (required)' : ''}`;
   return jsx(GoACheckbox, Object.assign({
-    error: errorsFormInput.length > 0,
+    error: isVisited && errors.length > 0,
     testId: `${path}-checkbox-test-id`,
     disabled: !enabled,
     text: text && text !== 'undefined' ? text : convertToReadableFormat(getLastSegmentFromPointer(uischema.scope)),
@@ -5070,7 +5115,7 @@ const BooleanRadioComponent = ({
   path,
   config,
   label,
-  required,
+  isVisited,
   errors,
   description
 }) => {
@@ -5082,17 +5127,10 @@ const BooleanRadioComponent = ({
   const TrueDescription = description || (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.descriptionForTrue);
   const FalseDescription = description || (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.descriptionForFalse);
   const BaseTestId = (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${path}-boolean-radio-jsonform`;
-  const errorsFormInput = checkFieldValidity({
-    data,
-    uischema,
-    label,
-    required,
-    errors
-  });
   return jsx(Visible, {
     visible: visible,
     children: jsxs(GoARadioGroup, Object.assign({
-      error: errorsFormInput.length > 0,
+      error: isVisited && errors.length,
       name: `${label}`,
       value: data === true ? TrueValue : data === false ? FalseValue : null,
       disabled: !enabled,
@@ -5253,7 +5291,8 @@ const GoABaseInputReviewComponent = props => {
 };
 const GoInputBaseReview = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
   input: GoABaseInputReviewComponent,
-  isStepperReview: true
+  isStepperReview: true,
+  skipOnBlurValidation: true
 }));
 const GoInputBaseReviewControl = withJsonFormsControlProps(GoInputBaseReview);
 
@@ -6070,32 +6109,24 @@ const JsonFormsStepperContextProvider = ({
         return stepperState.categories[id];
       },
       goToPage: (id, updateCategoryId) => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         ajv.validate(schema, ((_a = ctx.core) === null || _a === void 0 ? void 0 : _a.data) || {});
-        if (updateCategoryId !== undefined && updateCategoryId < stepperState.categories.length) {
-          stepperDispatch({
-            type: 'update/category',
-            payload: {
-              errors: (_b = ctx === null || ctx === void 0 ? void 0 : ctx.core) === null || _b === void 0 ? void 0 : _b.errors,
-              id: updateCategoryId,
-              ajv
-            }
-          });
-        }
         if (stepperState.isOnReview !== true) {
-          stepperDispatch({
-            type: 'update/category',
-            payload: {
-              errors: (_c = ctx === null || ctx === void 0 ? void 0 : ctx.core) === null || _c === void 0 ? void 0 : _c.errors,
-              id: stepperState.activeId,
-              ajv
-            }
-          });
+          for (let i = 0; i < id; i++) {
+            stepperDispatch({
+              type: 'update/category',
+              payload: {
+                errors: (_b = ctx === null || ctx === void 0 ? void 0 : ctx.core) === null || _b === void 0 ? void 0 : _b.errors,
+                id: i,
+                ajv
+              }
+            });
+          }
         }
         stepperDispatch({
           type: 'validate/form',
           payload: {
-            errors: (_d = ctx === null || ctx === void 0 ? void 0 : ctx.core) === null || _d === void 0 ? void 0 : _d.errors
+            errors: (_c = ctx === null || ctx === void 0 ? void 0 : ctx.core) === null || _c === void 0 ? void 0 : _c.errors
           }
         });
         stepperDispatch({
@@ -7174,7 +7205,9 @@ const NonEmptyCellComponent$1 = /*#__PURE__*/React.memo(function NonEmptyCellCom
               return jsx("td", {
                 children: isInReview ? jsx("div", {
                   "data-testid": `#/properties/${schemaName}-input-${i}-review`,
-                  children: currentData
+                  children: typeof currentData === 'string' ? currentData : jsx("pre", {
+                    children: JSON.stringify(currentData, null, 2)
+                  })
                 }) : jsx(GoAFormItem, {
                   error: (_a = error === null || error === void 0 ? void 0 : error.message) !== null && _a !== void 0 ? _a : '',
                   mb: errorRow && !error && '2xl' || 'xs',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.54.1",
+  "version": "1.54.3",
   "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/InputBaseControl.d.ts

@@ -4,5 +4,7 @@ export interface WithInput {
     input: any;
     noLabel?: boolean;
     isStepperReview?: boolean;
+    setIsVisited?: () => void;
+    skipOnBlurValidation?: boolean;
 }
 export declare const GoAInputBaseControl: (props: ControlProps & WithInput) => JSX.Element;

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { RankedTester, ControlProps } from '@jsonforms/core';
-export declare const BooleanComponent: ({ data, enabled, uischema, handleChange, path, label, required, errors, schema, }: ControlProps) => import("react/jsx-runtime").JSX.Element;
+import { WithInputProps } from './type';
+export declare const BooleanComponent: ({ data, enabled, uischema, handleChange, path, label, required, errors, schema, isVisited, }: ControlProps & WithInputProps) => import("react/jsx-runtime").JSX.Element;
 export declare const BooleanControl: (props: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const GoABooleanControlTester: RankedTester;
 export declare const GoABooleanControl: import("react").ComponentType<import("@jsonforms/core").OwnPropsOfControl>;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { RankedTester, ControlProps } from '@jsonforms/core';
-export declare const BooleanRadioComponent: ({ data, visible, enabled, uischema, handleChange, path, config, label, required, errors, description, }: ControlProps) => import("react/jsx-runtime").JSX.Element;
+import { WithInputProps } from './type';
+export declare const BooleanRadioComponent: ({ data, visible, enabled, uischema, handleChange, path, config, label, isVisited, errors, description, }: ControlProps & WithInputProps) => import("react/jsx-runtime").JSX.Element;
 export declare const BooleanRadioControl: (props: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const GoABooleanRadioControlTester: RankedTester;
 export declare const GoABooleanRadioControl: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;

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

@@ -1,6 +1,8 @@
 import { ControlProps } from '@jsonforms/core';
 export interface WithInputProps {
     label?: string;
+    isVisited?: boolean;
+    setIsVisited?: () => void;
 }
 /**
  * Base event control props to handle event controls