@abgov/jsonforms-components 2.46.0 → 2.46.1

package/index.esm.js

@@ -6326,7 +6326,8 @@ const stepperReducer = (state, action) => {
           hasNextButton: !isOnReview,
           hasPrevButton: newActive !== 0,
           maxReachedStep: Math.max(state.maxReachedStep, activeId),
-          targetScope
+          targetScope,
+          validationTrigger: (state.validationTrigger || 0) + 1
         });
       }
     case 'update/category':
@@ -6433,7 +6434,8 @@ const createStepperContextInitData = props => {
     path,
     isOnReview: activeId === (categories == null ? void 0 : categories.length),
     isValid: valid === true,
-    maxReachedStep: 0
+    maxReachedStep: 0,
+    validationTrigger: 0
   };
 };
 const JsonFormsStepperContext = /*#__PURE__*/createContext(undefined);
@@ -6441,7 +6443,7 @@ const JsonFormsStepperContextProvider = ({
   children,
   StepperProps
 }) => {
-  var _uischema$options3, _ctx$core2, _ctx$core6;
+  var _uischema$options3, _ctx$core2, _ctx$core3;
   const ctx = useJsonForms();
   /* istanbul ignore next */
   const {
@@ -6512,28 +6514,6 @@ const JsonFormsStepperContextProvider = ({
       },
       validatePage: doValidatePage,
       goToPage: (id, targetScope) => {
-        var _ctx$core3, _ctx$core5;
-        ajv.validate(schema, ((_ctx$core3 = ctx.core) == null ? void 0 : _ctx$core3.data) || {});
-        // Only update the current category
-        if (!stepperState.isOnReview && id < stepperState.categories.length) {
-          var _ctx$core4;
-          stepperDispatch({
-            type: 'update/category',
-            payload: {
-              errors: ctx == null || (_ctx$core4 = ctx.core) == null ? void 0 : _ctx$core4.errors,
-              id,
-              ajv,
-              schema,
-              data
-            }
-          });
-        }
-        stepperDispatch({
-          type: 'validate/form',
-          payload: {
-            errors: ctx == null || (_ctx$core5 = ctx.core) == null ? void 0 : _ctx$core5.errors
-          }
-        });
         stepperDispatch({
           type: 'page/to/index',
           payload: {
@@ -6552,7 +6532,7 @@ const JsonFormsStepperContextProvider = ({
       }
     };
     //eslint-disable-next-line
-  }, [stepperDispatch, stepperState, (_ctx$core6 = ctx.core) == null ? void 0 : _ctx$core6.errors, ajv, schema, data]);
+  }, [stepperDispatch, stepperState, (_ctx$core3 = ctx.core) == null ? void 0 : _ctx$core3.errors, ajv, schema, data]);
   /* istanbul ignore next */
   useEffect(() => {
     const handleBeforeUnload = () => {
@@ -9229,12 +9209,13 @@ const ContextProviderFactory = () => new ContextProviderClass().setup;
 const JsonFormContext = /*#__PURE__*/createContext(null);
 
 const RenderStepElements = props => {
+  const memoizedSchema = useMemo(() => Object.assign({}, props.schema), [props.schema, props.validationTrigger]);
   return jsx(Visible, {
     visible: props.visible,
-    "date-testid": `${props.path}-categories-${props.categoryIndex}`,
+    "data-testid": `${props.path}-categories-${props.categoryIndex}`,
     children: props.category.elements.map((uiSchema, index) => {
       return jsx(JsonFormsDispatch, {
-        schema: props.schema,
+        schema: memoizedSchema,
         uischema: uiSchema,
         renderers: props.renderers,
         cells: props.cells,
@@ -12791,7 +12772,8 @@ const FormStepperView = props => {
     hasNextButton,
     hasPrevButton,
     isOnReview,
-    isValid
+    isValid,
+    validationTrigger
   } = formStepperCtx.selectStepperState();
   const {
     selectIsDisabled,
@@ -12852,7 +12834,8 @@ const FormStepperView = props => {
               schema,
               renderers,
               cells,
-              data
+              data,
+              validationTrigger
             };
             return jsx("div", {
               "data-testid": `step_${index}-content`,
@@ -13328,7 +13311,8 @@ const RenderPages = props => {
     categories,
     isOnReview,
     isValid,
-    activeId
+    activeId,
+    validationTrigger
   } = formStepperCtx.selectStepperState();
   const hideSubmit = (_props$categoryProps$ = (_props$categoryProps$2 = props.categoryProps.uischema.options) == null ? void 0 : _props$categoryProps$2.hideSubmit) != null ? _props$categoryProps$ : false;
   const toAppOverviewLabel = (_props$categoryProps$3 = (_props$categoryProps$4 = props.categoryProps.uischema.options) == null ? void 0 : _props$categoryProps$4.toAppOverviewLabel) != null ? _props$categoryProps$3 : 'Back to application overview';
@@ -13381,12 +13365,15 @@ const RenderPages = props => {
               schema,
               renderers,
               cells,
-              data
+              data,
+              validationTrigger
             };
-            if (index === activeId && !isOnReview) {
-              const currentStep = index + 1 - categories.filter(c => !c.visible && c.id < index).length;
-              const totalSteps = categories.filter(c => c.visible).length;
-              return jsxs("div", {
+            const currentStep = index + 1 - categories.filter(c => !c.visible && c.id < index).length;
+            const totalSteps = categories.filter(c => c.visible).length;
+            const isActive = index === activeId && !isOnReview;
+            return jsx(Visible, {
+              visible: isActive,
+              children: jsxs("div", {
                 "data-testid": `step_${index}-content-pages`,
                 style: {
                   marginTop: '1.5rem'
@@ -13443,8 +13430,8 @@ const RenderPages = props => {
                     })]
                   })
                 })]
-              }, `${category.label}`);
-            }
+              })
+            }, `page-${category.id}`);
           }), isOnReview && jsxs("div", {
             "data-testid": "stepper-pages-review-page",
             children: [jsx(FormStepperPageReviewer, Object.assign({}, props.categoryProps, {

package/package.json

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

@@ -10,5 +10,6 @@ export interface StepProps {
     renderers: JsonFormsRendererRegistryEntry[] | undefined;
     cells: JsonFormsCellRendererRegistryEntry[] | undefined;
     data: Record<string, unknown>;
+    validationTrigger?: number;
 }
 export declare const RenderStepElements: (props: StepProps) => JSX.Element;

package/src/lib/Controls/FormStepper/context/types.d.ts

@@ -26,5 +26,6 @@ export interface StepperContextDataType {
     isValid: boolean;
     maxReachedStep: number;
     targetScope?: string;
+    validationTrigger?: number;
 }
 export type CategorizationElement = Category | Categorization;