@abgov/jsonforms-components 1.42.8 → 1.43.0

package/index.esm.js

@@ -5564,8 +5564,7 @@ const mapToVisibleStep = (step, allSteps, visibleSteps) => {
   return step;
 };
 
-const summaryLabel = 'Summary';
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// eslint-disable-next-line
 const getProperty = (obj, propName) => {
   if (obj[propName] !== undefined) return obj[propName];
   for (const key in obj) {
@@ -5575,8 +5574,80 @@ const getProperty = (obj, propName) => {
     }
   }
 };
+
+const FormStepperReviewer = props => {
+  var _a, _b, _c;
+  const {
+    uischema,
+    data,
+    schema,
+    ajv,
+    cells,
+    renderers,
+    visible,
+    enabled,
+    navigationFunc
+  } = props;
+  const componentProps = (_b = (_a = uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) !== null && _b !== void 0 ? _b : {};
+  const readOnly = (_c = componentProps === null || componentProps === void 0 ? void 0 : componentProps.readOnly) !== null && _c !== void 0 ? _c : false;
+  const categorization = uischema;
+  const categories = categorization.elements.filter(category => isVisible(category, data, '', ajv));
+  return jsx(ReviewItem, {
+    children: categories.map((category, index) => {
+      const categoryLabel = category.label || category.i18n || 'Unknown Category';
+      const testId = `${categoryLabel}-review-link`;
+      return jsxs(ReviewItemSection, {
+        children: [jsxs(ReviewItemHeader, {
+          children: [jsx(ReviewItemTitle, {
+            children: categoryLabel
+          }), navigationFunc && jsx(Anchor, {
+            onClick: () => navigationFunc(index + 1),
+            "data-testid": testId,
+            onKeyDown: e => {
+              if (!readOnly && (e.key === ' ' || e.key === 'Enter')) {
+                e.preventDefault();
+                navigationFunc(index + 1);
+              }
+            },
+            children: readOnly ? 'View' : 'Edit'
+          })]
+        }), jsx(GoAGrid, {
+          minChildWidth: "600px",
+          children: category.elements.filter(field => {
+            var _a, _b;
+            const conditionProps = (_a = field.rule) === null || _a === void 0 ? void 0 : _a.condition;
+            if (conditionProps && data) {
+              const canHideControlParts = (_b = conditionProps === null || conditionProps === void 0 ? void 0 : conditionProps.scope) === null || _b === void 0 ? void 0 : _b.split('/');
+              const canHideControl = canHideControlParts && canHideControlParts[(canHideControlParts === null || canHideControlParts === void 0 ? void 0 : canHideControlParts.length) - 1];
+              const isHidden = getProperty(data, canHideControl);
+              if (!isHidden) {
+                return field;
+              }
+            } else {
+              return field;
+            }
+          }).map((element, index) => {
+            return jsx("div", {
+              children: jsx(JsonFormsDispatch, {
+                "data-testid": `jsonforms-object-list-defined-elements-dispatch`,
+                schema: schema,
+                uischema: element,
+                enabled: enabled,
+                renderers: GoAReviewRenderers,
+                cells: cells
+              })
+            }, `form-stepper-category-${index}`);
+          })
+        })]
+      }, index);
+    })
+  });
+};
+
+const summaryLabel = 'Summary';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const FormStepper = props => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d;
   const {
     uischema,
     data,
@@ -5597,16 +5668,13 @@ const FormStepper = props => {
   const componentProps = (_b = (_a = uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) !== null && _b !== void 0 ? _b : {};
   const optionProps = uischema.options || {};
   const [step, setStep] = React.useState(0);
+  const [staleCategories, setStaleCategories] = React.useState(categorization.elements);
   const [isFormValid, setIsFormValid] = React.useState(false);
   const [showNextBtn, setShowNextBtn] = React.useState(true);
   const [isOpen, setIsOpen] = React.useState(false);
   const [categories, setCategories] = React.useState(categorization.elements);
   const [inputStatuses, setInputStatuses] = React.useState({});
   const [stepStatuses, setStepStatuses] = React.useState([]);
-  useEffect(() => {
-    const cats = categorization.elements.filter(category => isVisible(category, data, '', ajv));
-    setCategories(cats);
-  }, [categorization, data, ajv]);
   const disabledCategoryMap = categories.map(c => !isEnabled(c, data, '', ajv));
   const handleSubmit = () => {
     if (submitForm) {
@@ -5622,6 +5690,10 @@ const FormStepper = props => {
     return categories.map(c => deriveLabelForUISchemaElement(c, t));
   }, [categories, t]);
   useEffect(() => {}, [categories.length]);
+  useEffect(() => {
+    const cats = categorization.elements.filter(category => isVisible(category, data, '', ajv));
+    setCategories(cats);
+  }, [categorization, data, ajv]);
   useEffect(() => {
     const statuses = Array(categories.length);
     categories.forEach((_, i) => {
@@ -5639,6 +5711,9 @@ const FormStepper = props => {
     setStep((componentProps === null || componentProps === void 0 ? void 0 : componentProps.controlledNav) ? 1 : 0);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  useEffect(() => {
+    setStaleCategories(categories);
+  }, [categories]);
   /* istanbul ignore next */
   if ((categories === null || categories === void 0 ? void 0 : categories.length) < 1) {
     // eslint-disable-next-line
@@ -5691,8 +5766,7 @@ const FormStepper = props => {
   const isInputInitialized = inputId => {
     return inputId in inputStatuses;
   };
-  const readOnly = (_c = componentProps === null || componentProps === void 0 ? void 0 : componentProps.readOnly) !== null && _c !== void 0 ? _c : false;
-  const isFormSubmitted = (_d = enumerators === null || enumerators === void 0 ? void 0 : enumerators.isFormSubmitted) !== null && _d !== void 0 ? _d : false;
+  const isFormSubmitted = (_c = enumerators === null || enumerators === void 0 ? void 0 : enumerators.isFormSubmitted) !== null && _c !== void 0 ? _c : false;
   return jsx("div", {
     "data-testid": "form-stepper-test-wrapper",
     children: jsx(Visible, {
@@ -5700,8 +5774,8 @@ const FormStepper = props => {
       children: jsxs("div", {
         id: `${path || `goa`}-form-stepper`,
         className: "formStepper",
-        children: [jsxs(GoAFormStepper, {
-          testId: ((_e = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _e === void 0 ? void 0 : _e.testId) || 'form-stepper-test',
+        children: [categories.length === staleCategories.length && jsxs(GoAFormStepper, {
+          testId: ((_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.testId) || 'form-stepper-test',
           step: step,
           onChange: step => {
             setTab(step);
@@ -5752,57 +5826,9 @@ const FormStepper = props => {
                 marginBottom: '1rem'
               },
               children: summaryLabel
-            }), jsx(ReviewItem, {
-              children: categories.map((category, index) => {
-                const categoryLabel = category.label || category.i18n || 'Unknown Category';
-                const testId = `${categoryLabel}-review-link`;
-                return jsxs(ReviewItemSection, {
-                  children: [jsxs(ReviewItemHeader, {
-                    children: [jsx(ReviewItemTitle, {
-                      children: categoryLabel
-                    }), jsx(Anchor, {
-                      tabIndex: readOnly ? -1 : 0,
-                      onClick: () => setPage(index + 1),
-                      "data-testid": testId,
-                      onKeyDown: e => {
-                        if (!readOnly && (e.key === ' ' || e.key === 'Enter')) {
-                          e.preventDefault();
-                          setPage(index + 1);
-                        }
-                      },
-                      children: readOnly ? 'View' : 'Edit'
-                    })]
-                  }), jsx("div", {
-                    children: category.elements.filter(field => {
-                      var _a, _b;
-                      const conditionProps = (_a = field.rule) === null || _a === void 0 ? void 0 : _a.condition;
-                      /* istanbul ignore next */
-                      if (conditionProps && data) {
-                        const canHideControlParts = (_b = conditionProps === null || conditionProps === void 0 ? void 0 : conditionProps.scope) === null || _b === void 0 ? void 0 : _b.split('/');
-                        const canHideControl = canHideControlParts && canHideControlParts[(canHideControlParts === null || canHideControlParts === void 0 ? void 0 : canHideControlParts.length) - 1];
-                        const isHidden = getProperty(data, canHideControl);
-                        if (!isHidden) {
-                          return field;
-                        }
-                      } else {
-                        return field;
-                      }
-                    }).map((element, index) => {
-                      return jsx("div", {
-                        children: jsx(JsonFormsDispatch, {
-                          "data-testid": `jsonforms-object-list-defined-elements-dispatch`,
-                          schema: schema,
-                          uischema: element,
-                          enabled: enabled,
-                          renderers: GoAReviewRenderers,
-                          cells: cells
-                        })
-                      }, `form-stepper-category-${index}`);
-                    })
-                  })]
-                }, index);
-              })
-            })]
+            }), jsx(FormStepperReviewer, Object.assign({
+              navigationFunc: setPage
+            }, props))]
           })]
         }), step !== 0 && jsxs(GoAGrid, {
           minChildWidth: "100px",
@@ -8008,7 +8034,7 @@ const AddressLookUpControl = props => {
   };
   useEffect(() => {
     const fetchSuggestions = () => __awaiter(void 0, void 0, void 0, function* () {
-      if (searchTerm.length > 2 && searchTerm.charAt(searchTerm.length - 1) !== ' ') {
+      if (searchTerm.length > 2) {
         setLoading(true);
         setOpen(true);
         yield fetchAddressSuggestions(formUrl, searchTerm, isAlbertaAddress).then(response => {
@@ -8059,7 +8085,7 @@ const AddressLookUpControl = props => {
     } else if (key === 'ArrowUp') {
       setSelectedIndex(prevIndex => prevIndex > 0 ? prevIndex - 1 : suggestions.length - 1);
       handleInputChange('addressLine1', value);
-    } else if (key === 'Enter' || key === ' ' && value.length > 2) {
+    } else if (key === 'Enter') {
       handleInputChange('addressLine1', value);
       setLoading(false);
       if (selectedIndex >= 0) {
@@ -10207,6 +10233,9 @@ const GoABaseReviewRenderers = [
   renderer: HelpReviewContent
 }];
 const GoAReviewRenderers = [...GoABaseReviewRenderers, {
+  tester: CategorizationRendererTester,
+  renderer: FormStepperReviewer
+}, {
   tester: FileUploaderTester,
   renderer: withJsonFormsControlProps(FileUploaderReview)
 }, {
@@ -10237,4 +10266,4 @@ const GoARenderers = [...GoABaseRenderers, {
 }];
 const GoACells = [...InputCells];
 
-export { ADD_DATALIST_ACTION, ADD_NO_ANONYMOUS_ACTION, ADD_REGISTER_DATA_ACTION, ADD_REGISTER_DATA_ERROR, AddressLookUpControl, AddressLookUpControlReview, AddressLookUpTester, ArrayControl, ArrayControlBase, ArrayControlReview, BooleanComponent, BooleanControl, BooleanRadioComponent, BooleanRadioControl, CategorizationRendererTester, CheckboxGroup, ContextProviderC, ContextProviderClass, ContextProviderFactory, EnumCheckboxControl, EnumRadioControl, EnumSelect, FileUploader, FileUploaderReview, FileUploaderTester, FormStepper, FormStepperControl, FullNameControl, FullNameDobControl, FullNameDobReviewControl, FullNameDobTester, FullNameReviewControl, FullNameTester, GoAArrayControlRenderer, GoAArrayControlReviewRenderer, GoAArrayControlTester, GoABaseInputReviewComponent, GoABaseRenderers, GoABaseReviewRenderers, GoABooleanControl, GoABooleanControlTester, GoABooleanRadioControl, GoABooleanRadioControlTester, GoACells, GoACheckoutGroupControlTester, GoADateControl, GoADateControlTester, GoADateInput, GoADateTimeControl, GoADateTimeControlTester, GoADateTimeInput, GoAEnumCheckboxGroupControl, GoAEnumControl, GoAEnumControlTester, GoAEnumRadioGroupControl, GoAInputBaseControl, GoAInputDateControl, GoAInputDateTimeControl, GoAInputInteger, GoAInputIntegerControl, GoAInputNumberControl, GoAInputText, GoAInputTextControl, GoAInputTimeControl, GoAIntegerControl, GoAIntegerControlTester, GoAListWithDetailsControlRenderer, GoAListWithDetailsTester, GoANumberControl, GoANumberControlTester, GoANumberInput, GoARadioGroupControlTester, GoARenderers, GoAReviewRenderers, GoATextControl, GoATextControlTester, GoATimeControl, GoATimeControlTester, GoATimeInput, GoInputBaseReview, GoInputBaseReviewControl, JsonFormContext, JsonFormRegisterProvider, JsonFormsRegisterContext, ListWithDetailsControl, MultiLineText, MultiLineTextControl, MultiLineTextControlInput, MultiLineTextControlTester, RadioGroup, createDefaultAjv, enumControl, errMalformedDate, formatSin, getProperty, isAddressLookup, isFullName, isFullNameDoB, registerReducer, resolveRefs, tryResolveRefs };
+export { ADD_DATALIST_ACTION, ADD_NO_ANONYMOUS_ACTION, ADD_REGISTER_DATA_ACTION, ADD_REGISTER_DATA_ERROR, AddressLookUpControl, AddressLookUpControlReview, AddressLookUpTester, ArrayControl, ArrayControlBase, ArrayControlReview, BooleanComponent, BooleanControl, BooleanRadioComponent, BooleanRadioControl, CategorizationRendererTester, CheckboxGroup, ContextProviderC, ContextProviderClass, ContextProviderFactory, EnumCheckboxControl, EnumRadioControl, EnumSelect, FileUploader, FileUploaderReview, FileUploaderTester, FormStepper, FormStepperControl, FormStepperReviewer, FullNameControl, FullNameDobControl, FullNameDobReviewControl, FullNameDobTester, FullNameReviewControl, FullNameTester, GoAArrayControlRenderer, GoAArrayControlReviewRenderer, GoAArrayControlTester, GoABaseInputReviewComponent, GoABaseRenderers, GoABaseReviewRenderers, GoABooleanControl, GoABooleanControlTester, GoABooleanRadioControl, GoABooleanRadioControlTester, GoACells, GoACheckoutGroupControlTester, GoADateControl, GoADateControlTester, GoADateInput, GoADateTimeControl, GoADateTimeControlTester, GoADateTimeInput, GoAEnumCheckboxGroupControl, GoAEnumControl, GoAEnumControlTester, GoAEnumRadioGroupControl, GoAInputBaseControl, GoAInputDateControl, GoAInputDateTimeControl, GoAInputInteger, GoAInputIntegerControl, GoAInputNumberControl, GoAInputText, GoAInputTextControl, GoAInputTimeControl, GoAIntegerControl, GoAIntegerControlTester, GoAListWithDetailsControlRenderer, GoAListWithDetailsTester, GoANumberControl, GoANumberControlTester, GoANumberInput, GoARadioGroupControlTester, GoARenderers, GoAReviewRenderers, GoATextControl, GoATextControlTester, GoATimeControl, GoATimeControlTester, GoATimeInput, GoInputBaseReview, GoInputBaseReviewControl, JsonFormContext, JsonFormRegisterProvider, JsonFormsRegisterContext, ListWithDetailsControl, MultiLineText, MultiLineTextControl, MultiLineTextControlInput, MultiLineTextControlTester, RadioGroup, createDefaultAjv, enumControl, errMalformedDate, formatSin, isAddressLookup, isFullName, isFullNameDoB, registerReducer, resolveRefs, tryResolveRefs };

package/package.json

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

@@ -1,20 +1,11 @@
 import { GoAButtonType } from '@abgov/react-components-new';
-import { StatePropsOfLayout } from '@jsonforms/core';
-import { TranslateProps } from '@jsonforms/react';
-import { AjvProps } from '../../util/layout';
-export interface CategorizationStepperLayoutRendererProps extends StatePropsOfLayout, AjvProps, TranslateProps {
-}
-export interface FormStepperComponentProps {
-    controlledNav?: number;
-    readOnly?: boolean;
-}
+import { CategorizationStepperLayoutRendererProps } from './types';
 export interface FormStepperOptionProps {
     nextButtonLabel?: string;
     nextButtonType?: GoAButtonType;
     previousButtonLabel?: string;
     previousButtonType?: GoAButtonType;
 }
-export declare const getProperty: any;
 export declare const FormStepper: (props: CategorizationStepperLayoutRendererProps) => JSX.Element;
 export declare const FormStepperControl: (props: CategorizationStepperLayoutRendererProps & import("@jsonforms/core").OwnPropsOfLayout) => import("react/jsx-runtime").JSX.Element;
 export default FormStepper;

package/src/lib/Controls/FormStepper/FormStepperReviewControl.d.ts

@@ -0,0 +1,2 @@
+import { CategorizationStepperLayoutReviewRendererProps } from './types';
+export declare const FormStepperReviewer: (props: CategorizationStepperLayoutReviewRendererProps) => JSX.Element;

package/src/lib/Controls/FormStepper/index.d.ts

@@ -1,2 +1,3 @@
 export * from './FormStepperControl';
 export * from './FormStepperTester';
+export * from './FormStepperReviewControl';

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

@@ -0,0 +1,12 @@
+import { StatePropsOfLayout } from '@jsonforms/core';
+import { AjvProps } from '../../util/layout';
+import { TranslateProps } from '@jsonforms/react';
+export interface CategorizationStepperLayoutRendererProps extends StatePropsOfLayout, AjvProps, TranslateProps {
+}
+export interface CategorizationStepperLayoutReviewRendererProps extends CategorizationStepperLayoutRendererProps {
+    navigationFunc?: (index: number) => void;
+}
+export interface FormStepperComponentProps {
+    controlledNav?: number;
+    readOnly?: boolean;
+}

package/src/lib/Controls/FormStepper/util/helpers.d.ts

@@ -0,0 +1 @@
+export declare const getProperty: any;