@abgov/jsonforms-components 1.14.2 → 1.14.3

package/index.esm.js

@@ -4092,6 +4092,30 @@ const validateData = (jsonSchema, data, ajv) => {
   }
 };
 
+/**
+ * Steps can be hidden:
+ * When the user clicks on a step in the stepper function, it returns
+ * a step number relative to all steps.  Map to the step number relative
+ * to the visible steps.
+ */
+const mapToVisibleStep = (step, allSteps, visibleSteps) => {
+  if (visibleSteps.length < 1) return 0;
+  if (step < 1) return 1;
+  if (allSteps.length !== visibleSteps.length) {
+    const stepIndex = step - 1;
+    if (step > 1 && step <= allSteps.length) {
+      // Check to see if the the step is visible
+      const selectedLabel = allSteps[stepIndex];
+      const selectedIndex = visibleSteps.indexOf(selectedLabel);
+      step = selectedIndex !== -1 ? selectedIndex + 1 : 1;
+    }
+    if (step > allSteps.length) {
+      step = visibleSteps.length;
+    }
+  }
+  return step;
+};
+
 const FormStepper = props => {
   var _a, _b, _c, _d;
   const {
@@ -4173,26 +4197,10 @@ const FormStepper = props => {
     }
     setPage(page);
   }
-  const getNextStep = step => {
-    const rawCategoryLabels = rawCategories.elements.map(category => category.label);
-    if (rawCategoryLabels.length !== CategoryLabels.length) {
-      if (step > 1 && step <= rawCategoryLabels.length) {
-        const selectedTabLabel = rawCategoryLabels[step - 1];
-        const selectedTab = CategoryLabels.indexOf(selectedTabLabel);
-        const newStep = selectedTab !== -1 ? selectedTab + 1 : step;
-        return newStep;
-      }
-      if (step > rawCategoryLabels.length) {
-        return step - 1;
-      }
-    }
-    return step;
-  };
   function setTab(page) {
-    page = getNextStep(page);
-    setStep(page);
-    if (page < 1 || page > categories.length + 1) return;
-    setShowNextBtn(categories.length + 1 !== page);
+    const rawCategoryLabels = rawCategories.elements.map(category => category.label);
+    page = mapToVisibleStep(page, rawCategoryLabels, CategoryLabels);
+    setPage(page);
   }
   function setPage(page) {
     setStep(page);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.14.2",
+  "version": "1.14.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/FormStepper/util/stepNavigation.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Steps can be hidden:
+ * When the user clicks on a step in the stepper function, it returns
+ * a step number relative to all steps.  Map to the step number relative
+ * to the visible steps.
+ */
+export declare const mapToVisibleStep: (step: number, allSteps: string[], visibleSteps: (string | undefined)[]) => number;