@abgov/jsonforms-components 1.43.2 → 1.43.4

package/index.esm.js

@@ -2466,7 +2466,7 @@ const StepperContext = /*#__PURE__*/createContext({
   stepId: 0
 });
 const isEmpty = value => {
-  return value === undefined || value === null || typeof value === 'string' && value.length < 1;
+  return value === undefined || value === null || typeof value === 'string' && value.length < 1 || typeof value === 'boolean' && value === false;
 };
 const getCompletionStatus = (table, step, isFormChanged = false) => {
   const nonEmptyCount = getNonEmptyCount(table, step);
@@ -5743,15 +5743,24 @@ const FormStepper = props => {
     }
     setPage(page);
   }
+  const getAllStatuses = (nextPage, totalVisibleTabs) => {
+    const previouslyActivePage = nextPage - 1;
+    const statuses = [...stepStatuses];
+    for (let currentPage = 1; currentPage <= previouslyActivePage; currentPage++) {
+      const pageStatus = getCompletionStatus(inputStatuses, currentPage, true);
+      statuses[currentPage - 1] = pageStatus ? pageStatus : 'incomplete';
+    }
+    return statuses;
+  };
   /* istanbul ignore next */
   function setTab(page) {
     const categoryLabels = [...allCategories.elements.map(category => category.label), summaryLabel];
     const visibleLabels = [...visibleCategoryLabels, summaryLabel];
     const newPage = mapToVisibleStep(page, categoryLabels, visibleLabels);
-    const pageStatus = getCompletionStatus(inputStatuses, page, true);
-    const statuses = [...stepStatuses];
-    statuses[page - 1] = pageStatus ? pageStatus : 'incomplete';
-    setStepStatuses(statuses);
+    if (Object.keys(inputStatuses).length) {
+      const statuses = getAllStatuses(page, visibleLabels.length);
+      setStepStatuses(statuses);
+    }
     setPage(newPage);
   }
   function setPage(page) {
@@ -6144,6 +6153,7 @@ const AttachmentBorder = styled.div(_t2$2 || (_t2$2 = _$3`
   margin-top: var(--goa-space-2xs);
 `));
 const FileUploaderStyle = styled.div(_t3$2 || (_t3$2 = _$3`
+  margin-bottom: var(--goa-space-l);
   .label {
     display: block;
     font-weight: var(--goa-font-weight-bold);
@@ -8001,6 +8011,7 @@ const AddressLookUpControl = props => {
   const [loading, setLoading] = useState(false);
   const [errors, setErrors] = useState({});
   const requiredFields = schema.required;
+  const [dropdownSelected, setDropdownSelected] = useState(false);
   const updateFormData = updatedAddress => {
     setAddress(updatedAddress);
     handleChange(path, updatedAddress);
@@ -8009,6 +8020,9 @@ const AddressLookUpControl = props => {
   const dropdownRef = useRef(null);
   const handleInputChange = (field, value) => {
     var _a, _b;
+    if (field === 'addressLine1' && searchTerm.length < 3) {
+      setDropdownSelected(false);
+    }
     let newAddress;
     const postalCodeErrorMessage = (_b = (_a = schema.errorMessage) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.postalCode;
     if (field === 'postalCode') {
@@ -8035,7 +8049,7 @@ const AddressLookUpControl = props => {
   };
   useEffect(() => {
     const fetchSuggestions = () => __awaiter(void 0, void 0, void 0, function* () {
-      if (searchTerm.length > 2) {
+      if (searchTerm.length > 2 && dropdownSelected === false) {
         setLoading(true);
         setOpen(true);
         yield fetchAddressSuggestions(formUrl, searchTerm, isAlbertaAddress).then(response => {
@@ -8053,7 +8067,7 @@ const AddressLookUpControl = props => {
       }
     });
     fetchSuggestions();
-  }, [searchTerm]);
+  }, [searchTerm, dropdownSelected]);
   const handleDropdownChange = value => {
     setSearchTerm(value);
     handleInputChange('addressLine1', value);
@@ -8064,6 +8078,7 @@ const AddressLookUpControl = props => {
     handleChange(path, suggestAddress);
     setSuggestions([]);
     setErrors({});
+    setDropdownSelected(true);
   };
   /* istanbul ignore next */
   const handleRequiredFieldBlur = name => {
@@ -8118,9 +8133,7 @@ const AddressLookUpControl = props => {
           ariaLabel: 'address-form-address1',
           placeholder: "Start typing the first line of your address, required.",
           value: (address === null || address === void 0 ? void 0 : address.addressLine1) || '',
-          onChange: (e, value) => {
-            handleDropdownChange(value);
-          },
+          onChange: (e, value) => handleDropdownChange(value),
           onBlur: name => handleRequiredFieldBlur(name),
           width: "100%",
           onKeyPress: (e, value, key) => {
@@ -8132,10 +8145,9 @@ const AddressLookUpControl = props => {
           variant: "inline",
           size: "small",
           visible: true
-        }), suggestions && autocompletion && jsx("ul", {
+        }), !loading && suggestions && autocompletion && jsx("ul", {
           ref: dropdownRef,
           className: "suggestions",
-          tabIndex: 0,
           children: suggestions && autocompletion && open && suggestions.map((suggestion, index) => jsx(ListItem, {
             "data-index": index,
             onMouseDown: e => {
@@ -8341,6 +8353,7 @@ const NameInputs = ({
   return jsxs(GoAGrid, {
     minChildWidth: "0ch",
     gap: "s",
+    mb: "m",
     testId: "wrapper",
     children: [jsx(GoAFormItem, {
       testId: "formitem-first-name",
@@ -8557,6 +8570,7 @@ const FullNameDobControl = props => {
     children: [jsxs(GoAGrid, {
       minChildWidth: "0ch",
       gap: "s",
+      mb: "m",
       children: [jsx(GoAFormItem, {
         label: "First name",
         requirement: ((_a = schema === null || schema === void 0 ? void 0 : schema.required) === null || _a === void 0 ? void 0 : _a.includes('firstName')) ? 'required' : undefined,

package/package.json

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