@abgov/jsonforms-components 1.42.6 → 1.42.8

package/index.esm.js

@@ -4435,7 +4435,7 @@ let _$7 = t => t,
   _t$7,
   _t2$4,
   _t3$4,
-  _t4$2;
+  _t4$3;
 const GoADropdownTextbox = styled.div(_t$7 || (_t$7 = _$7`
   border-radius: var(--goa-space-2xs);
   box-shadow: ${0};
@@ -4475,7 +4475,7 @@ const GoADropdownListContainer = styled.div(_t3$4 || (_t3$4 = _$7`
     scrollbar-color: #a8a8a8 var(--goa-color-greyscale-100) !important;
   }
 `), p => p.optionListMaxHeight || '272px');
-const GoADropdownListOption = styled.div(_t4$2 || (_t4$2 = _$7`
+const GoADropdownListOption = styled.div(_t4$3 || (_t4$3 = _$7`
   padding: var(--goa-space-2xs) var(--goa-space-s);
   text-overflow: ellipsis;
   color: ${0} !important;
@@ -5118,7 +5118,7 @@ let _$5 = t => t,
   _t$5,
   _t2$3,
   _t3$3,
-  _t4$1,
+  _t4$2,
   _t5$1,
   _t6$1,
   _t7$1,
@@ -5149,7 +5149,7 @@ const ReviewItemHeader = styled.div(_t3$3 || (_t3$3 = _$5`
   justify-content: space-between;
   margin-bottom: 2rem;
 `));
-const ReviewItemTitle = styled.div(_t4$1 || (_t4$1 = _$5`
+const ReviewItemTitle = styled.div(_t4$2 || (_t4$2 = _$5`
   font-size: var(--fs-xl);
   line-height: var(--lh-lg);
   font-weight: var(--fw-light);
@@ -6312,7 +6312,7 @@ let _$2 = t => t,
   _t$2,
   _t2$1,
   _t3$1,
-  _t4,
+  _t4$1,
   _t5,
   _t6,
   _t7,
@@ -6333,7 +6333,7 @@ const NonEmptyCellStyle = styled.div(_t2$1 || (_t2$1 = _$2`
 const ToolBarHeader = styled.div(_t3$1 || (_t3$1 = _$2`
   margin-bottom: var(--goa-space-l);
 `));
-const ObjectArrayTitle = styled.h2(_t4 || (_t4 = _$2`
+const ObjectArrayTitle = styled.h2(_t4$1 || (_t4$1 = _$2`
   margin-bottom: var(--goa-space-l);
 `));
 const TextCenter = styled.div(_t5 || (_t5 = _$2`
@@ -7466,7 +7466,8 @@ const GoAListWithDetailsTester = rankWith(3, and(uiTypeIs('ListWithDetail')));
 let _$1 = t => t,
   _t$1,
   _t2,
-  _t3;
+  _t3,
+  _t4;
 const SearchBox = styled.div(_t$1 || (_t$1 = _$1`
   position: relative;
 
@@ -7498,11 +7499,14 @@ const SearchBox = styled.div(_t$1 || (_t$1 = _$1`
     font-weight: var(--fw-bold);
   }
 `));
-const LabelDiv = styled.div(_t2 || (_t2 = _$1`
+const AddressIndent = styled.div(_t2 || (_t2 = _$1`
+  margin: 1em 1.5em 0 1.5em;
+`));
+const LabelDiv = styled.div(_t3 || (_t3 = _$1`
   font-size: var(--fs-sl);
   padding-bottom: 1.5rem;
 `));
-const ListItem = styled.li(_t3 || (_t3 = _$1`
+const ListItem = styled.li(_t4 || (_t4 = _$1`
   background-color: ${0};
   color: ${0};
   font-weight: ${0};
@@ -7596,12 +7600,12 @@ const AddressInputs = ({
           readonly: readOnly,
           value: (address === null || address === void 0 ? void 0 : address.municipality) || '',
           onChange: (name, value) => handleInputChange(name, value),
-          onBlur: (name, value) => handleOnBlur(name),
+          onBlur: name => handleOnBlur(name),
           width: "100%"
         })
       }), jsx(GoAFormItem, {
-        label: "Postal Code",
-        error: (_b = errors === null || errors === void 0 ? void 0 : errors['postalCode']) !== null && _b !== void 0 ? _b : '',
+        label: "Postal code",
+        error: (_b = errors === null || errors === void 0 ? void 0 : errors.postalCode) !== null && _b !== void 0 ? _b : '',
         requirement: (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('postalCode')) ? 'required' : 'optional',
         children: jsx(GoAInput, {
           name: "postalCode",
@@ -7612,7 +7616,7 @@ const AddressInputs = ({
           placeholder: "A0A 0A0",
           value: (address === null || address === void 0 ? void 0 : address.postalCode) || '',
           onChange: (name, value) => handleInputChange(name, value),
-          onBlur: (name, value) => handleOnBlur(name),
+          onBlur: name => handleOnBlur(name),
           width: "100%",
           maxLength: 7
         })
@@ -7741,6 +7745,8 @@ const handlePostalCodeValidation = (validatePc, message, value, errors) => {
   const newErrors = Object.assign({}, errors);
   if (!validatePc && value.length >= 4) {
     newErrors['postalCode'] = message;
+  } else if (value.length === 0) {
+    newErrors['postalCode'] = 'Postal Code is required.';
   } else {
     delete newErrors['postalCode'];
   }
@@ -8020,7 +8026,7 @@ const AddressLookUpControl = props => {
       }
     });
     fetchSuggestions();
-  }, [searchTerm, formUrl, isAlbertaAddress]);
+  }, [searchTerm]);
   const handleDropdownChange = value => {
     setSearchTerm(value);
     handleInputChange('addressLine1', value);
@@ -8035,47 +8041,26 @@ const AddressLookUpControl = props => {
   /* istanbul ignore next */
   const handleRequiredFieldBlur = name => {
     const err = Object.assign({}, errors);
-    if ((data === null || data === void 0 ? void 0 : data['city']) === undefined || (data === null || data === void 0 ? void 0 : data['city']) === '') {
-      err[name] = name === 'municipality' ? 'city is required' : '';
-      setErrors(err);
-    }
     if (!(data === null || data === void 0 ? void 0 : data[name]) || data[name] === '' || (data === null || data === void 0 ? void 0 : data[name]) === undefined) {
       err[name] = name === 'municipality' ? 'city is required' : `${name} is required`;
       setErrors(err);
-    }
-    if (!(data === null || data === void 0 ? void 0 : data[name])) {
-      err[name] = name === 'addressLine1' ? `${name} is required` : ``;
-      setErrors(err);
     } else {
       delete errors[name];
     }
-    setTimeout(() => {
-      setSuggestions([]);
-      setOpen(false);
-    }, 100);
+    setSuggestions([]);
+    setOpen(false);
   };
-  useEffect(() => {
-    if (dropdownRef.current) {
-      const selectedItem = dropdownRef.current.children[selectedIndex];
-      if (selectedItem) {
-        selectedItem.scrollIntoView({
-          block: 'nearest',
-          behavior: 'smooth'
-        });
-      }
-    }
-  }, [selectedIndex, open]);
   /* istanbul ignore next */
   const handleKeyDown = (e, value, key) => {
     var _a;
     if (key === 'ArrowDown') {
       setSelectedIndex(prevIndex => prevIndex < suggestions.length - 1 ? prevIndex + 1 : 0);
-      handleDropdownChange(value);
+      handleInputChange('addressLine1', value);
     } else if (key === 'ArrowUp') {
       setSelectedIndex(prevIndex => prevIndex > 0 ? prevIndex - 1 : suggestions.length - 1);
-      handleDropdownChange(value);
+      handleInputChange('addressLine1', value);
     } else if (key === 'Enter' || key === ' ' && value.length > 2) {
-      handleDropdownChange(value);
+      handleInputChange('addressLine1', value);
       setLoading(false);
       if (selectedIndex >= 0) {
         (_a = document.getElementById('goaInput')) === null || _a === void 0 ? void 0 : _a.blur();
@@ -8197,55 +8182,63 @@ const AddressViews = ({
     label: 'Yukon'
   }];
   return jsxs(Fragment, {
-    children: [jsxs(GoAGrid, {
+    children: [jsx(GoAGrid, {
       minChildWidth: "0",
       gap: "s",
-      children: [jsx(GoAFormItem, {
-        error: ((_a = data === null || data === void 0 ? void 0 : data.addressLine1) === null || _a === void 0 ? void 0 : _a.length) === 0 ? 'addressLine1 is required' : '',
-        label: `${isAlbertaAddress ? 'Alberta' : 'Canada'} postal address`,
-        children: jsx("p", {
-          children: data === null || data === void 0 ? void 0 : data.addressLine1
-        })
-      }), (data === null || data === void 0 ? void 0 : data.addressLine2) && jsx(GoAFormItem, {
-        label: "Address line 2",
-        children: jsx("p", {
-          children: data.addressLine2
-        })
-      })]
-    }), jsx("br", {}), jsxs(GoAGrid, {
-      minChildWidth: "0ch",
-      gap: "s",
-      children: [jsx(GoAFormItem, {
-        error: ((_b = data === null || data === void 0 ? void 0 : data.municipality) === null || _b === void 0 ? void 0 : _b.length) === 0 ? 'city is required' : '',
-        label: "City",
-        children: jsx("p", {
-          children: data === null || data === void 0 ? void 0 : data.municipality
-        })
-      }), jsx(GoAFormItem, {
-        error: ((_c = data === null || data === void 0 ? void 0 : data.postalCode) === null || _c === void 0 ? void 0 : _c.length) === 0 ? 'postalCode is required' : '',
-        label: "Postal Code",
-        children: jsx("p", {
-          children: data === null || data === void 0 ? void 0 : data.postalCode
-        })
-      })]
-    }), jsx("br", {}), jsxs(GoAGrid, {
-      minChildWidth: "0",
-      gap: "s",
-      children: [jsxs(GoAFormItem, {
-        label: "Province",
-        children: [isAlbertaAddress && jsx("div", {
-          "data-testid": "address-form-province-view",
-          children: "Alberta"
-        }), !isAlbertaAddress && jsx("div", {
-          "data-testid": "address-form-province-view",
-          children: (_d = provinces.find(p => p.value === (data === null || data === void 0 ? void 0 : data.subdivisionCode))) === null || _d === void 0 ? void 0 : _d.label
+      children: jsx(GoAFormItem, {
+        label: `${isAlbertaAddress ? 'Alberta' : 'Canada'} postal address`
+      })
+    }), jsxs(AddressIndent, {
+      children: [jsxs(GoAGrid, {
+        minChildWidth: "0",
+        gap: "s",
+        children: [jsx(GoAFormItem, {
+          label: "Address line 1",
+          error: ((_a = data === null || data === void 0 ? void 0 : data.addressLine1) === null || _a === void 0 ? void 0 : _a.length) === 0 ? 'addressLine1 is required' : '',
+          children: jsx("p", {
+            children: data === null || data === void 0 ? void 0 : data.addressLine1
+          })
+        }), (data === null || data === void 0 ? void 0 : data.addressLine2) && jsx(GoAFormItem, {
+          label: "Address line 2",
+          children: jsx("p", {
+            children: data.addressLine2
+          })
+        })]
+      }), jsx("br", {}), jsxs(GoAGrid, {
+        minChildWidth: "0ch",
+        gap: "s",
+        children: [jsx(GoAFormItem, {
+          error: ((_b = data === null || data === void 0 ? void 0 : data.municipality) === null || _b === void 0 ? void 0 : _b.length) === 0 ? 'city is required' : '',
+          label: "City",
+          children: jsx("p", {
+            children: data === null || data === void 0 ? void 0 : data.municipality
+          })
+        }), jsx(GoAFormItem, {
+          error: ((_c = data === null || data === void 0 ? void 0 : data.postalCode) === null || _c === void 0 ? void 0 : _c.length) === 0 ? 'postalCode is required' : '',
+          label: "Postal Code",
+          children: jsx("p", {
+            children: data === null || data === void 0 ? void 0 : data.postalCode
+          })
+        })]
+      }), jsx("br", {}), jsxs(GoAGrid, {
+        minChildWidth: "0",
+        gap: "s",
+        children: [jsxs(GoAFormItem, {
+          label: "Province",
+          children: [isAlbertaAddress && jsx("div", {
+            "data-testid": "address-form-province-view",
+            children: "Alberta"
+          }), !isAlbertaAddress && jsx("div", {
+            "data-testid": "address-form-province-view",
+            children: (_d = provinces.find(p => p.value === (data === null || data === void 0 ? void 0 : data.subdivisionCode))) === null || _d === void 0 ? void 0 : _d.label
+          })]
+        }), jsx(GoAFormItem, {
+          label: "Country",
+          children: jsx("div", {
+            "data-testid": "address-form-country",
+            children: "Canada"
+          })
         })]
-      }), jsx(GoAFormItem, {
-        label: "Country",
-        children: jsx("div", {
-          "data-testid": "address-form-country",
-          children: "Canada"
-        })
       })]
     }), jsx("br", {}), jsx("br", {})]
   });

package/package.json

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

@@ -4,6 +4,7 @@ interface ListItemProps {
     index: number;
 }
 export declare const SearchBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const AddressIndent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const LabelDiv: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, ListItemProps>> & string;
 export {};