@abgov/jsonforms-components 1.34.1 → 1.34.2

package/index.esm.js

@@ -2424,7 +2424,7 @@ const checkFieldValidity = props => {
   const extraSchema = schema;
   if (extraSchema && data && (extraSchema === null || extraSchema === void 0 ? void 0 : extraSchema.title) === 'Social insurance number') {
     if (data.length === 11 && !validateSinWithLuhn(data)) {
-      return 'Please enter valid SIN';
+      return 'Social insurance number is invalid';
     } else if (data.length < 11) {
       return extraSchema.errorMessage;
     }
@@ -6837,9 +6837,16 @@ const filterAlbertaAddresses = suggestions => {
   return suggestions.filter(suggestion => suggestion.Description.includes('AB'));
 };
 const mapSuggestionToAddress = suggestion => {
-  const textParts = suggestion.Text.split(',');
-  const addressLine1 = textParts.length > 1 ? textParts[1].trim() : textParts[0].trim();
-  const addressLine2 = textParts.length > 1 ? textParts[0].trim() : '';
+  let addressLine1, addressLine2;
+  const suiteMatch = suggestion.Text.match(/(Suite|Apt|Unit|#)+/i);
+  const textParts = suggestion.Text.split(' ');
+  if (suiteMatch) {
+    addressLine1 = suggestion.Text.replace(textParts[0], '').trim();
+    addressLine2 = textParts[0].trim();
+  } else {
+    addressLine2 = '';
+    addressLine1 = suggestion.Text.trim();
+  }
   const descriptionParts = suggestion.Description.split(',');
   const city = descriptionParts[0].trim();
   const provinceAndPostalCode = descriptionParts[1].trim().split(' ');
@@ -6857,11 +6864,14 @@ const mapSuggestionToAddress = suggestion => {
 
 let _$1 = t => t,
   _t$1;
-const AddressSearch = styled.div(_t$1 || (_t$1 = _$1`
+const SearchBox = styled.div(_t$1 || (_t$1 = _$1`
+  position: relative;
+
   .suggestions {
+    width: 100%;
+    margin-top: 3px;
     border-top-width: 0;
     list-style: none;
-    margin-top: 0;
     max-height: 15.5rem;
     width: 100%;
     position: absolute;
@@ -6888,17 +6898,21 @@ const AddressSearch = styled.div(_t$1 || (_t$1 = _$1`
 
 const ADDRESS_PATH = 'api/gateway/v1/address/v1/find';
 const AddressLookUpControl = props => {
-  var _a, _b;
+  var _a, _b, _c;
   const {
     data,
     path,
     schema,
-    handleChange
+    handleChange,
+    uischema
   } = props;
   const isAlbertaAddress = ((_b = (_a = schema === null || schema === void 0 ? void 0 : schema.properties) === null || _a === void 0 ? void 0 : _a.subdivisionCode) === null || _b === void 0 ? void 0 : _b.const) === 'AB';
   const formCtx = useContext(JsonFormContext);
   const formHost = formCtx === null || formCtx === void 0 ? void 0 : formCtx.formUrl;
   const formUrl = `${formHost}/${ADDRESS_PATH}`;
+  const autocompletion = ((_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.autocomplete) === true;
+  const [open, setOpen] = useState(false);
+  const label = typeof (uischema === null || uischema === void 0 ? void 0 : uischema.label) === 'string' ? uischema.label : '';
   const defaultAddress = {
     addressLine1: '',
     addressLine2: '',
@@ -6926,6 +6940,7 @@ const AddressLookUpControl = props => {
     const fetchSuggestions = () => __awaiter(void 0, void 0, void 0, function* () {
       if (searchTerm.length > 2) {
         setLoading(true);
+        setOpen(true);
         const suggestions = yield fetchAddressSuggestions(formUrl, searchTerm, isAlbertaAddress);
         if (isAlbertaAddress) {
           setSuggestions(filterAlbertaAddresses(suggestions));
@@ -6935,6 +6950,7 @@ const AddressLookUpControl = props => {
         setLoading(false);
       } else {
         setSuggestions([]);
+        setOpen(false);
       }
     });
     fetchSuggestions();
@@ -6948,28 +6964,31 @@ const AddressLookUpControl = props => {
     handleChange(path, suggestAddress);
     setSuggestions([]);
   };
-  return jsxs(AddressSearch, {
-    children: [jsxs(GoAFormItem, {
-      label: "",
-      children: [jsx(GoAInput, {
-        leadingIcon: "search",
-        name: "address-form-address1",
-        testId: "address-form-address1",
-        ariaLabel: 'address-form-address1',
-        placeholder: "Start typing the first line of your address",
-        value: (address === null || address === void 0 ? void 0 : address.addressLine1) || '',
-        onChange: (name, value) => handleDropdownChange(value),
-        width: "100%"
-      }), loading && jsx(GoASkeleton, {
-        type: "text",
-        "data-testId": "loading"
-      }, 1), jsx("ul", {
-        className: "suggestions",
-        children: suggestions && suggestions.map((suggestion, index) => jsx("li", {
-          onClick: () => handleSuggestionClick(suggestion),
-          children: `${suggestion.Text}  ${suggestion.Description}`
-        }, index))
-      })]
+  return jsxs("div", {
+    children: [jsx(GoAFormItem, {
+      label: label,
+      children: jsxs(SearchBox, {
+        children: [jsx(GoAInput, {
+          leadingIcon: "search",
+          name: "address-form-address1",
+          testId: "address-form-address1",
+          ariaLabel: 'address-form-address1',
+          placeholder: "Start typing the first line of your address",
+          value: (address === null || address === void 0 ? void 0 : address.addressLine1) || '',
+          onChange: (name, value) => handleDropdownChange(value),
+          width: "100%"
+        }), loading && jsx(GoASkeleton, {
+          type: "text",
+          "data-testId": "loading"
+        }, 1), suggestions && jsx("ul", {
+          className: "suggestions",
+          tabIndex: 0,
+          children: suggestions && autocompletion && open && suggestions.map((suggestion, index) => jsx("li", {
+            onClick: () => handleSuggestionClick(suggestion),
+            children: `${suggestion.Text}  ${suggestion.Description}`
+          }, index))
+        })]
+      })
     }), jsx("br", {}), jsx(AddressInputs, {
       address: address,
       handleInputChange: handleInputChange,

package/package.json

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

@@ -1 +1 @@
-export declare const AddressSearch: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SearchBox: import("styled-components").StyledComponent<"div", any, {}, never>;