@abgov/jsonforms-components 2.32.4 → 2.32.6

package/index.esm.js

@@ -7259,8 +7259,9 @@ const SummaryRowLink = styled.a(_t21 || (_t21 = _$6`
   position: relative;
   top: var(--goa-space-xs);
 `));
-styled.td(_t22 || (_t22 = _$6`
+const SummaryTd = styled.td(_t22 || (_t22 = _$6`
   border: 0 !important;
+  padding: 0 !important;
 `));
 
 class ContextProviderClass {
@@ -7786,7 +7787,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 +7837,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 +7892,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 +7990,7 @@ const JsonFormsStepperContextProvider = ({
   children,
   StepperProps
 }) => {
-  var _a, _b;
+  var _a, _b, _c;
   const ctx = useJsonForms();
   /* istanbul ignore next */
   const {
@@ -7994,6 +8002,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 +8059,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 +8098,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 +8139,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 +8149,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))
   });
 };
@@ -8816,18 +8826,20 @@ const SummaryRow = ({
   onClick
 }) => {
   return jsx("tr", {
-    children: jsx(GoAText, {
-      size: "heading-m",
-      mt: "xl",
-      mb: "xl",
-      children: jsx(SummaryRowLink, {
-        "data-testid": `page-ref-${index}`,
-        href: "#",
-        onClick: e => {
-          e.preventDefault();
-          onClick(index);
-        },
-        children: "Summary"
+    children: jsx(SummaryTd, {
+      children: jsx(GoAText, {
+        size: "heading-m",
+        mt: "xl",
+        mb: "xl",
+        children: jsx(SummaryRowLink, {
+          "data-testid": `page-ref-${index}`,
+          href: "#",
+          onClick: e => {
+            e.preventDefault();
+            onClick(index);
+          },
+          children: "Summary"
+        })
       })
     })
   });
@@ -9273,6 +9285,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
    *  */
@@ -9280,7 +9293,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))
   });
 };
@@ -11891,6 +11904,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.4",
+  "version": "2.32.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",