@abgov/jsonforms-components 2.3.3 → 2.3.4

package/index.esm.js

@@ -6332,7 +6332,7 @@ const FormStepperView = props => {
   const submitForm = submitFormFunction && submitFormFunction();
   const optionProps = uischema.options || {};
   const [isOpen, setIsOpen] = useState(false);
-  const [staleCategories, setStaleCategories] = React.useState(categories);
+  const headersRef = useRef([]);
   const handleSubmit = () => {
     if (submitForm) {
       submitForm(data);
@@ -6340,14 +6340,9 @@ const FormStepperView = props => {
       setIsOpen(true);
     }
   };
-  useEffect(() => {
-    setStaleCategories(categories);
-  }, [categories]);
   const onCloseModal = () => {
     setIsOpen(false);
   };
-  // eslint-disable-next-line
-  uischema.options;
   return jsxs("div", {
     "data-testid": "form-stepper-test-wrapper",
     children: [jsx(Visible, {
@@ -6355,20 +6350,26 @@ const FormStepperView = props => {
       children: jsxs("div", {
         id: `${path || `goa`}-form-stepper`,
         className: "formStepper",
-        children: [categories.length === staleCategories.length && jsxs(GoAFormStepper, {
+        children: [jsxs(GoAFormStepper, {
           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);
           },
           children: [categories === null || categories === void 0 ? void 0 : categories.map((c, index) => {
-            return jsx(GoAFormStep, {
-              "data-testid": `stepper-tab-${index}`,
-              text: `${c.label}`,
-              status: c.isVisited ? c.isCompleted && c.isValid ? 'complete' : 'incomplete' : undefined
-            }, `stepper-tab-${index}`);
-          }), jsx(GoAFormStep, {
-            text: "Review"
-          }, `stepper-tab-review`)]
+            return jsx("div", {
+              ref: el => headersRef.current[index] = el,
+              children: jsx(GoAFormStep, {
+                "data-testid": `stepper-tab-${index}`,
+                text: `${c.label}`,
+                status: c.isVisited ? c.isCompleted && c.isValid ? 'complete' : 'incomplete' : undefined
+              }, `stepper-tab-${index}`)
+            });
+          }), jsx("div", {
+            ref: el => headersRef.current[categories.length] = el,
+            children: jsx(GoAFormStep, {
+              text: "Review"
+            }, `stepper-tab-review`)
+          })]
         }, "stepper-form-stepper-wrapper"), jsxs(GoAPages, {
           current: activeId + 1,
           mb: "xl",
@@ -6406,11 +6407,12 @@ const FormStepperView = props => {
               type: (optionProps === null || optionProps === void 0 ? void 0 : optionProps.previousButtonType) ? optionProps === null || optionProps === void 0 ? void 0 : optionProps.previousButtonType : 'secondary',
               disabled: selectIsDisabled(),
               onClick: () => {
+                var _a, _b, _c;
                 const element = document.getElementById(`${path || `goa`}-form-stepper`);
                 if (element) {
                   element.scrollIntoView();
                 }
-                goToPage(activeId - 1, activeId);
+                headersRef.current[activeId - 1] && ((_c = (_b = (_a = headersRef.current[activeId - 1].querySelector('goa-form-step')) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input')) === null || _c === void 0 ? void 0 : _c.click());
               },
               testId: "prev-button",
               children: (optionProps === null || optionProps === void 0 ? void 0 : optionProps.previousButtonLabel) ? optionProps === null || optionProps === void 0 ? void 0 : optionProps.previousButtonLabel : 'Previous'
@@ -6420,7 +6422,8 @@ const FormStepperView = props => {
               type: (optionProps === null || optionProps === void 0 ? void 0 : optionProps.nextButtonType) ? optionProps === null || optionProps === void 0 ? void 0 : optionProps.nextButtonType : 'primary',
               disabled: selectIsDisabled(),
               onClick: () => {
-                goToPage(activeId + 1, activeId);
+                var _a, _b, _c;
+                headersRef.current[activeId + 1] && ((_c = (_b = (_a = headersRef.current[activeId + 1].querySelector('goa-form-step')) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input')) === null || _c === void 0 ? void 0 : _c.click());
                 const element = document.getElementById(`${path || `goa`}-form-stepper`);
                 if (element) {
                   element.scrollIntoView();

package/package.json

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