@abgov/jsonforms-components 2.3.2 → 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();
@@ -8528,11 +8531,11 @@ const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellCompo
         "data-testid": `jsonforms-object-list-defined-elements-dispatch`,
         schema: schema,
         uischema: element,
-        path: `${rowPath}-${index}`,
+        path: `${rowPath}`,
         enabled: enabled,
         renderers: renderers,
         cells: cells
-      }, rowPath);
+      }, `${rowPath}-${index}`);
     }),
     // eslint-disable-next-line
     (_d = (_c = (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.detail) === null || _c === void 0 ? void 0 : _c.elements) === null || _d === void 0 ? void 0 : _d.map((element, index) => {
@@ -8697,7 +8700,7 @@ class ListWithDetailControl extends React.Component {
     // eslint-disable-next-line
     this.addItem = (path, value) => {
       const pathIdValue = (path === null || path === void 0 ? void 0 : path.split('.')) || '';
-      if (pathIdValue.length > 1 && +this.props.data === 0 || pathIdValue.length === 1) {
+      if (pathIdValue.length > 1 && +this.props.data >= 0 || pathIdValue.length === 1) {
         this.props.addItem(path, value)();
       }
     };

package/package.json

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