@abgov/jsonforms-components 2.32.3 → 2.32.5

package/index.esm.js

@@ -7786,7 +7786,11 @@ const subErrorInParent = (error, paths) => {
 const getErrorsInScopes = (errors, scopes) => {
   return errors.filter(e => {
     // transfer scope #properties/value to data path /value
-    const dataPaths = scopes.map(s => '/' + toDataPath(s));
+    const dataPaths = scopes.map(s => {
+      const dot = toDataPath(s);
+      const slash = '/' + dot.replace(/\./g, '/');
+      return slash;
+    });
     return dataPaths.includes(e.instancePath) || subErrorInParent(e, dataPaths);
   });
 };
@@ -7832,51 +7836,51 @@ const stepperReducer = (state, action) => {
       }
     case 'page/next':
       {
-        state.activeId += 1;
-        if (activeId === lastId) {
-          state.isOnReview = true;
-          state.hasNextButton = false;
-          state.hasPrevButton = false;
-        } else {
-          state.hasNextButton = true;
-          state.hasPrevButton = true;
-          state.isOnReview = false;
-        }
-        state.categories[activeId].isVisited = true;
-        return Object.assign({}, state);
+        const newActive = activeId + 1;
+        const newCategories = categories.map((c, idx) => idx === activeId ? Object.assign({}, c, {
+          isVisited: true
+        }) : c);
+        const isOnReview = newActive === lastId + 1;
+        return Object.assign({}, state, {
+          activeId: newActive,
+          categories: newCategories,
+          isOnReview,
+          hasNextButton: !isOnReview,
+          hasPrevButton: newActive !== 0
+        });
       }
     case 'page/prev':
       {
-        state.categories[activeId].isVisited = true;
-        if (activeId > 0) {
-          state.activeId -= 1;
-          state.hasPrevButton = state.activeId !== 0;
-          state.hasNextButton = true;
-          state.isOnReview = false;
-        }
-        return Object.assign({}, state);
+        const newActive = Math.max(0, activeId - 1);
+        const newCategories = categories.map((c, idx) => idx === activeId ? Object.assign({}, c, {
+          isVisited: true
+        }) : c);
+        return Object.assign({}, state, {
+          activeId: newActive,
+          categories: newCategories,
+          isOnReview: false,
+          hasNextButton: true,
+          hasPrevButton: newActive !== 0
+        });
       }
     case 'page/to/index':
       {
         const {
           id
         } = action.payload;
-        state.activeId = id;
-        if (id === lastId + 1) {
-          state.isOnReview = true;
-          state.hasNextButton = false;
-          state.hasPrevButton = true;
-          return Object.assign({}, state);
-        } else {
-          if (state.categories[id]) {
-            state.categories[id].isVisited = true;
-          }
-          state.hasNextButton = id <= lastId;
-          state.hasPrevButton = id !== 0;
-          state.isOnReview = false;
-          state.maxReachedStep = Math.max(state.maxReachedStep, activeId);
-          return Object.assign({}, state);
-        }
+        const newActive = id;
+        const newCategories = categories.map((c, idx) => idx === id ? Object.assign({}, c, {
+          isVisited: true
+        }) : c);
+        const isOnReview = newActive === lastId + 1;
+        return Object.assign({}, state, {
+          activeId: newActive,
+          categories: newCategories,
+          isOnReview,
+          hasNextButton: !isOnReview,
+          hasPrevButton: newActive !== 0,
+          maxReachedStep: Math.max(state.maxReachedStep, activeId)
+        });
       }
     case 'update/category':
       {
@@ -7887,40 +7891,43 @@ const stepperReducer = (state, action) => {
           schema,
           data
         } = action.payload;
-        if (id >= state.categories.length) {
-          return Object.assign({}, state);
-        }
-        if (schema && typeof schema === 'object') {
-          try {
-            ajv.validate(schema, data);
-          } catch (err) {
-            console.warn('AJV validation error:', err);
-          }
-        }
-        const incompletePaths = getIncompletePaths(ajv, schema, data, ((_a = state.categories[id]) === null || _a === void 0 ? void 0 : _a.scopes) || []);
-        const errorsInCategory = getErrorsInScopes(errors, ((_b = state.categories[id]) === null || _b === void 0 ? void 0 : _b.scopes) || []);
-        if (state.categories[id]) {
-          state.categories[id].isCompleted = (incompletePaths === null || incompletePaths === void 0 ? void 0 : incompletePaths.length) === 0;
-          state.categories[id].isValid = errorsInCategory.length === 0;
-          state.categories[id].isVisited = true;
+        if (id >= categories.length) return state;
+        try {
+          ajv.validate(schema, data);
+        } catch (err) {
+          console.warn('AJV validation error:', err);
         }
-        return Object.assign({}, state);
+        const incompletePaths = getIncompletePaths(ajv, schema, data, ((_a = categories[id]) === null || _a === void 0 ? void 0 : _a.scopes) || []);
+        const errorsInCategory = getErrorsInScopes(errors, ((_b = categories[id]) === null || _b === void 0 ? void 0 : _b.scopes) || []);
+        const newCategories = categories.map((cat, idx) => idx === id ? Object.assign({}, cat, {
+          isCompleted: incompletePaths.length === 0,
+          isValid: errorsInCategory.length === 0,
+          isVisited: true
+        }) : cat);
+        return Object.assign({}, state, {
+          categories: newCategories
+        });
       }
     case 'validate/form':
       {
         const {
           errors = []
         } = action.payload;
-        state.isValid = errors.length === 0;
-        return Object.assign({}, state);
+        return Object.assign({}, state, {
+          isValid: errors.length === 0
+        });
       }
     case 'toggle/category/review-link':
       {
         const {
           id
         } = action.payload;
-        state.categories[id].showReviewPageLink = !state.categories[id].showReviewPageLink;
-        return Object.assign({}, state);
+        const newCategories = categories.map((cat, idx) => idx === id ? Object.assign({}, cat, {
+          showReviewPageLink: !cat.showReviewPageLink
+        }) : cat);
+        return Object.assign({}, state, {
+          categories: newCategories
+        });
       }
     default:
       return state;
@@ -7982,7 +7989,7 @@ const JsonFormsStepperContextProvider = ({
   children,
   StepperProps
 }) => {
-  var _a, _b;
+  var _a, _b, _c;
   const ctx = useJsonForms();
   /* istanbul ignore next */
   const {
@@ -7994,6 +8001,20 @@ const JsonFormsStepperContextProvider = ({
   const [stepperState, dispatch] = useReducer(stepperReducer, createStepperContextInitData(StepperProps));
   const stepperDispatch = (StepperProps === null || StepperProps === void 0 ? void 0 : StepperProps.customDispatch) || dispatch;
   const isCacheStatus = (_a = uischema.options) === null || _a === void 0 ? void 0 : _a.cacheStatus;
+  //prevents infinite loop refresh
+  const doValidatePage = useCallback(id => {
+    var _a;
+    stepperDispatch({
+      type: 'update/category',
+      payload: {
+        errors: (_a = ctx === null || ctx === void 0 ? void 0 : ctx.core) === null || _a === void 0 ? void 0 : _a.errors,
+        id,
+        ajv,
+        schema,
+        data
+      }
+    });
+  }, [stepperDispatch, (_b = ctx === null || ctx === void 0 ? void 0 : ctx.core) === null || _b === void 0 ? void 0 : _b.errors, ajv, schema, data]);
   const context = useMemo(() => {
     return {
       isProvided: true,
@@ -8037,35 +8058,22 @@ const JsonFormsStepperContextProvider = ({
           }
         });
       },
-      validatePage: id => {
-        var _a;
-        stepperDispatch({
-          type: 'update/category',
-          payload: {
-            errors: (_a = ctx === null || ctx === void 0 ? void 0 : ctx.core) === null || _a === void 0 ? void 0 : _a.errors,
-            id,
-            ajv,
-            schema,
-            data
-          }
-        });
-      },
+      validatePage: doValidatePage,
       goToPage: id => {
         var _a, _b, _c;
         ajv.validate(schema, ((_a = ctx.core) === null || _a === void 0 ? void 0 : _a.data) || {});
-        if (stepperState.isOnReview !== true) {
-          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,
-                schema,
-                data
-              }
-            });
-          }
+        // Only update the current category
+        if (!stepperState.isOnReview && id < 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,
+              ajv,
+              schema,
+              data
+            }
+          });
         }
         stepperDispatch({
           type: 'validate/form',
@@ -8089,7 +8097,7 @@ const JsonFormsStepperContextProvider = ({
         });
       }
     };
-  }, [stepperDispatch, stepperState, (_b = ctx.core) === null || _b === void 0 ? void 0 : _b.errors, ajv, schema, data]);
+  }, [stepperDispatch, stepperState, (_c = ctx.core) === null || _c === void 0 ? void 0 : _c.errors, ajv, schema, data]);
   /* istanbul ignore next */
   useEffect(() => {
     const handleBeforeUnload = () => {
@@ -8130,6 +8138,7 @@ const summaryLabel = 'Summary';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const FormStepper = props => {
   const formStepperCtx = useContext(JsonFormsStepperContext);
+  const memoStepperProps = useMemo(() => Object.assign({}, props), [props]);
   /**
    * StepperCtx can only be provided once to prevent issues from categorization in categorization
    *  */
@@ -8139,7 +8148,7 @@ const FormStepper = props => {
     return jsx(FormStepperView, Object.assign({}, props));
   }
   return jsx(JsonFormsStepperContextProvider, {
-    StepperProps: Object.assign({}, props),
+    StepperProps: memoStepperProps,
     children: jsx(FormStepperView, Object.assign({}, props))
   });
 };
@@ -9026,9 +9035,14 @@ const BackButtonWrapper = styled.span(_t$5 || (_t$5 = _$5`
 
   .back-link {
     margin-top: var(--goa-space-m);
+    color: var(--goa-color-interactive-default);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    text-decoration-color: currentColor;
+    display: inline-block;
   }
   display: inline-block;
-  color: #0070c4;
+  color: var(--goa-color-interactive-default);
   cursor: pointer;
   margin-bottom: var(--goa-space-m);
 
@@ -9037,7 +9051,7 @@ const BackButtonWrapper = styled.span(_t$5 || (_t$5 = _$5`
     position: relative;
     top: 3px;
     right: 2px;
-    color: #0070c4;
+    color: var(--goa-color-interactive-default);
     margin-left: 4px;
   }
 `));
@@ -9268,6 +9282,7 @@ function hasDataInScopes(data, scopes) {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const FormPageStepper = props => {
   const formStepperCtx = useContext(JsonFormsStepperContext);
+  const memoStepperProps = useMemo(() => Object.assign({}, props), [props]);
   /**
    * StepperCtx can only be provided once to prevent issues from categorization in categorization
    *  */
@@ -9275,7 +9290,7 @@ const FormPageStepper = props => {
     return jsx(FormPagesView, Object.assign({}, props));
   }
   return jsx(JsonFormsStepperContextProvider, {
-    StepperProps: Object.assign({}, props),
+    StepperProps: memoStepperProps,
     children: jsx(FormPagesView, Object.assign({}, props))
   });
 };
@@ -11886,6 +11901,7 @@ const AddressLookUpControl = props => {
     }));
   };
   useEffect(() => {
+    if (!debouncedRenderAddress) return;
     handleInputChange('addressLine1', debouncedRenderAddress);
   }, [debouncedRenderAddress]); // eslint-disable-line react-hooks/exhaustive-deps
   useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.32.3",
+  "version": "2.32.5",
   "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",