@abgov/jsonforms-components 1.50.4 → 1.50.6

package/index.esm.js

@@ -5914,13 +5914,15 @@ const stepperReducer = (state, action) => {
       {
         const {
           id,
+          ajv,
           errors
         } = action.payload;
-        if (state.isOnReview) {
-          return Object.assign({}, state);
-        }
+        /*
+          ctx.core.errors only includes required errors when the fields are touched. In this case, we still ajv to figure out the required errors at the very beginning.
+         */
+        const incompletePaths = getIncompletePaths(ajv, state.categories[id].scopes);
         const errorsInCategory = errors.filter(e => categories[id].scopes.map(s => '/' + toDataPath(s)).includes(e.instancePath));
-        state.categories[id].isCompleted = errorsInCategory.filter(e => e.keyword === 'required').length === 0;
+        state.categories[id].isCompleted = (incompletePaths === null || incompletePaths === void 0 ? void 0 : incompletePaths.length) === 0;
         state.categories[id].isValid = errorsInCategory.length === 0;
         return Object.assign({}, state);
       }
@@ -6000,7 +6002,12 @@ const JsonFormsStepperContextProvider = ({
   children,
   StepperProps
 }) => {
+  var _a;
   const ctx = useJsonForms();
+  const {
+    schema,
+    ajv
+  } = StepperProps;
   const [stepperState, dispatch] = useReducer(stepperReducer, createStepperContextInitData(StepperProps));
   const stepperDispatch = (StepperProps === null || StepperProps === void 0 ? void 0 : StepperProps.customDispatch) || dispatch;
   const context = useMemo(() => {
@@ -6024,13 +6031,15 @@ const JsonFormsStepperContextProvider = ({
         return stepperState.categories[id];
       },
       goToPage: (id, updateCategoryId) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
+        ajv.validate(schema, ((_a = ctx.core) === null || _a === void 0 ? void 0 : _a.data) || {});
         if (updateCategoryId !== undefined) {
           stepperDispatch({
             type: 'update/category',
             payload: {
-              errors: ((_a = ctx.core) === null || _a === void 0 ? void 0 : _a.errors) || [],
-              id: updateCategoryId
+              errors: (_b = ctx === null || ctx === void 0 ? void 0 : ctx.core) === null || _b === void 0 ? void 0 : _b.errors,
+              id: updateCategoryId,
+              ajv
             }
           });
         }
@@ -6038,15 +6047,16 @@ const JsonFormsStepperContextProvider = ({
           stepperDispatch({
             type: 'update/category',
             payload: {
-              errors: ((_b = ctx.core) === null || _b === void 0 ? void 0 : _b.errors) || [],
-              id: stepperState.activeId
+              errors: (_c = ctx === null || ctx === void 0 ? void 0 : ctx.core) === null || _c === void 0 ? void 0 : _c.errors,
+              id: stepperState.activeId,
+              ajv
             }
           });
         }
         stepperDispatch({
           type: 'validate/form',
           payload: {
-            errors: (_c = ctx.core) === null || _c === void 0 ? void 0 : _c.errors
+            errors: (_d = ctx === null || ctx === void 0 ? void 0 : ctx.core) === null || _d === void 0 ? void 0 : _d.errors
           }
         });
         stepperDispatch({
@@ -6057,7 +6067,7 @@ const JsonFormsStepperContextProvider = ({
         });
       }
     };
-  }, [ctx === null || ctx === void 0 ? void 0 : ctx.core, stepperDispatch, stepperState]);
+  }, [stepperDispatch, stepperState, (_a = ctx.core) === null || _a === void 0 ? void 0 : _a.errors]);
   useEffect(() => {
     if ((context === null || context === void 0 ? void 0 : context.isProvided) === true) {
       stepperDispatch({
@@ -6067,7 +6077,7 @@ const JsonFormsStepperContextProvider = ({
         }
       });
     }
-  }, [JSON.stringify(StepperProps.uischema)]);
+  }, [JSON.stringify(StepperProps.uischema), JSON.stringify(StepperProps.schema)]);
   return jsx(JsonFormsStepperContext.Provider, {
     value: context,
     children: children
@@ -6090,7 +6100,7 @@ const FormStepper = props => {
   });
 };
 const FormStepperView = props => {
-  var _a, _b, _c;
+  var _a;
   const {
     uischema,
     data,
@@ -6129,17 +6139,15 @@ const FormStepperView = props => {
   const onCloseModal = () => {
     setIsOpen(false);
   };
-  return jsxs("div", {
+  return jsx("div", {
     "data-testid": "form-stepper-test-wrapper",
-    children: [jsx("div", {
-      children: ((_a = categories[activeId]) === null || _a === void 0 ? void 0 : _a.isCompleted) && ((_b = categories[activeId]) === null || _b === void 0 ? void 0 : _b.isVisited)
-    }), jsx(Visible, {
+    children: jsx(Visible, {
       visible: visible,
       children: jsxs("div", {
         id: `${path || `goa`}-form-stepper`,
         className: "formStepper",
         children: [jsxs(GoAFormStepper, {
-          testId: `form-stepper-headers-${(_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.testId}` || 'form-stepper-test',
+          testId: `form-stepper-headers-${(_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.testId}` || 'form-stepper-test',
           onChange: step => {
             goToPage(step - 1);
           },
@@ -6147,7 +6155,7 @@ const FormStepperView = props => {
             return jsx(GoAFormStep, {
               "data-testid": `stepper-tab-${index}`,
               text: `${c.label}`,
-              status: c.isValid ? 'complete' : 'incomplete'
+              status: c.isCompleted && c.isValid ? 'complete' : 'incomplete'
             }, `stepper-tab-${index}`);
           }), jsx(GoAFormStep, {
             text: "Review"
@@ -6242,7 +6250,7 @@ const FormStepperView = props => {
           }), "(i.e. no actual form is being submitted)"]
         })]
       })
-    })]
+    })
   });
 };
 const FormStepperControl = withAjvProps(withTranslateProps(withJsonFormsLayoutProps(FormStepper)));
@@ -6408,15 +6416,16 @@ const FileUploader = _a => {
   if (!enumerators) {
     return jsx(Fragment, {});
   }
+  const sentenceCaseLabel = convertToSentenceCase(label);
   return jsxs(FileUploaderStyle, {
     id: "file-upload",
     className: "FileUploader",
     children: [required ? jsx(GoAFormItem, {
-      label: label,
+      label: sentenceCaseLabel,
       requirement: "required"
     }) : jsx("div", {
       className: "label",
-      children: props.label
+      children: sentenceCaseLabel
     }), !readOnly && jsx("div", {
       className: "file-upload",
       children: jsx(GoAFileUploadInput, {
@@ -8436,6 +8445,7 @@ const AddressLookUpControl = props => {
   };
   const [address, setAddress] = useState(data || defaultAddress);
   const [searchTerm, setSearchTerm] = useState('');
+  const [saveSearchTerm, setSaveSearchTerm] = useState(false);
   const [suggestions, setSuggestions] = useState([]);
   const [loading, setLoading] = useState(false);
   const [errors, setErrors] = useState({});
@@ -8476,6 +8486,12 @@ const AddressLookUpControl = props => {
       showLabel: false
     }));
   };
+  useEffect(() => {
+    if (saveSearchTerm) {
+      handleInputChange('addressLine1', searchTerm);
+      setSaveSearchTerm(false);
+    }
+  }, [saveSearchTerm]); // eslint-disable-line react-hooks/exhaustive-deps
   useEffect(() => {
     const fetchSuggestions = () => __awaiter(void 0, void 0, void 0, function* () {
       if (searchTerm.length > 2 && dropdownSelected === false) {
@@ -8496,10 +8512,10 @@ const AddressLookUpControl = props => {
       }
     });
     fetchSuggestions();
-  }, [searchTerm, dropdownSelected]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [searchTerm]); // eslint-disable-line react-hooks/exhaustive-deps
   const handleDropdownChange = value => {
     setSearchTerm(value);
-    handleInputChange('addressLine1', value);
+    setSaveSearchTerm(true);
   };
   const handleSuggestionClick = suggestion => {
     const suggestAddress = mapSuggestionToAddress(suggestion);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.50.4",
+  "version": "1.50.6",
   "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/FormStepper/context/reducer.d.ts

@@ -1,6 +1,7 @@
 import { StepperContextDataType } from './types';
 import { ErrorObject } from 'ajv';
 import { Dispatch } from 'react';
+import Ajv from 'ajv';
 export type JsonFormStepperDispatch = Dispatch<StepperAction>;
 export type StepperAction = {
     type: 'page/next';
@@ -14,8 +15,9 @@ export type StepperAction = {
 } | {
     type: 'update/category';
     payload: {
-        errors: ErrorObject[];
+        errors?: ErrorObject[];
         id: number;
+        ajv: Ajv;
     };
 } | {
     type: 'validate/form';