@abgov/jsonforms-components 1.34.3 → 1.34.4

package/index.esm.js

@@ -6726,14 +6726,14 @@ const SearchBox = styled.div(_t$1 || (_t$1 = _$1`
 const LabelDiv = styled.div(_t2 || (_t2 = _$1`
   font-size: var(--fs-sl);
   font-weight: var(--fw-bold);
-  padding-left: 0.4rem;
   padding-bottom: 0.5rem;
 `));
 
 const AddressInputs = ({
   address,
   handleInputChange,
-  isAlbertaAddress
+  isAlbertaAddress,
+  postalCodeErrorMsg
 }) => {
   const provinces = [{
     value: 'AB',
@@ -6802,6 +6802,7 @@ const AddressInputs = ({
         })
       }), jsx(GoAFormItem, {
         label: "Postal Code",
+        error: postalCodeErrorMsg,
         children: jsx(GoAInput, {
           name: "postalCode",
           testId: "address-form-postal-code",
@@ -6809,7 +6810,8 @@ const AddressInputs = ({
           placeholder: "A0A 0A0",
           value: (address === null || address === void 0 ? void 0 : address.postalCode) || '',
           onChange: (name, value) => handleInputChange(name, value),
-          width: "100%"
+          width: "100%",
+          maxLength: 7
         })
       })]
     }), jsx("br", {}), jsxs(GoAGrid, {
@@ -6998,13 +7000,17 @@ const mapSuggestionToAddress = suggestion => {
     city,
     province,
     postalCode,
-    country: 'CAN'
+    country: 'CA'
   };
 };
+const validatePostalCode = values => {
+  const postalCodeRegex = /^[A-Za-z]\d[A-Za-z] \d[A-Za-z]\d$/;
+  return postalCodeRegex.test(values);
+};
 
 const ADDRESS_PATH = 'api/gateway/v1/address/v1/find';
 const AddressLookUpControl = props => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c;
   const {
     data,
     path,
@@ -7016,7 +7022,7 @@ const AddressLookUpControl = props => {
   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) ? ((_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.autocomplete) === true : true;
+  const autocompletion = ((_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.autocomplete) !== false;
   const [open, setOpen] = useState(false);
   const label = typeof (uischema === null || uischema === void 0 ? void 0 : uischema.label) === 'string' && uischema.label ? uischema.label : schema === null || schema === void 0 ? void 0 : schema.title;
   const defaultAddress = {
@@ -7025,17 +7031,28 @@ const AddressLookUpControl = props => {
     city: '',
     province: isAlbertaAddress ? 'AB' : '',
     postalCode: '',
-    country: 'CAN'
+    country: 'CA'
   };
   const [address, setAddress] = useState(data || defaultAddress);
   const [searchTerm, setSearchTerm] = useState('');
   const [suggestions, setSuggestions] = useState([]);
   const [loading, setLoading] = useState(false);
+  const [postalCodeErrorMsg, setPostalCodeErrorMsg] = useState('');
   const updateFormData = updatedAddress => {
     setAddress(updatedAddress);
     handleChange(path, updatedAddress);
   };
   const handleInputChange = (field, value) => {
+    var _a, _b;
+    if (field === 'postalCode') {
+      const validatePc = validatePostalCode(value);
+      if (!validatePc && value.length >= 5) {
+        const postalCodeErrorMessage = (_b = (_a = schema.errorMessage) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.postalCode;
+        setPostalCodeErrorMsg(postalCodeErrorMessage !== null && postalCodeErrorMessage !== void 0 ? postalCodeErrorMessage : '');
+      } else {
+        setPostalCodeErrorMsg('');
+      }
+    }
     const newAddress = Object.assign(Object.assign({}, address), {
       [field]: value
     });
@@ -7064,6 +7081,7 @@ const AddressLookUpControl = props => {
   }, [searchTerm, formUrl, isAlbertaAddress]);
   const handleDropdownChange = value => __awaiter(void 0, void 0, void 0, function* () {
     setSearchTerm(value);
+    handleInputChange('addressLine1', value);
   });
   const handleSuggestionClick = suggestion => {
     const suggestAddress = mapSuggestionToAddress(suggestion);
@@ -7076,18 +7094,18 @@ const AddressLookUpControl = props => {
       label: label,
       children: jsxs(SearchBox, {
         children: [jsx(GoAInput, {
-          leadingIcon: "search",
-          name: "address-form-address1",
+          leadingIcon: autocompletion ? 'search' : undefined,
+          name: "addressLine1",
           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, {
+        }), loading && autocompletion && jsx(GoASkeleton, {
           type: "text",
           "data-testId": "loading"
-        }, 1), suggestions && jsx("ul", {
+        }, 1), suggestions && autocompletion && jsx("ul", {
           className: "suggestions",
           tabIndex: 0,
           children: suggestions && autocompletion && open && suggestions.map((suggestion, index) => jsx("li", {
@@ -7099,7 +7117,8 @@ const AddressLookUpControl = props => {
     }), jsx("br", {}), jsx(AddressInputs, {
       address: address,
       handleInputChange: handleInputChange,
-      isAlbertaAddress: isAlbertaAddress
+      isAlbertaAddress: isAlbertaAddress,
+      postalCodeErrorMsg: postalCodeErrorMsg
     })]
   });
 };

package/package.json

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

package/src/lib/Controls/AddressLookup/AddressInputs.d.ts

@@ -4,6 +4,7 @@ interface AddressInputsProps {
     address: Address;
     handleInputChange: (field: string, value: string) => void;
     isAlbertaAddress?: boolean;
+    postalCodeErrorMsg?: string;
 }
 export declare const AddressInputs: React.FC<AddressInputsProps>;
 export {};

package/src/lib/Controls/AddressLookup/utils.d.ts

@@ -3,3 +3,4 @@ export declare const fetchAddressSuggestions: (formUrl: string, searchTerm: stri
 export declare const filterAlbertaAddresses: (suggestions: Suggestion[]) => Suggestion[];
 export declare const filterSuggestionsWithoutAddressCount: (suggestions: Suggestion[]) => Suggestion[];
 export declare const mapSuggestionToAddress: (suggestion: Suggestion) => Address;
+export declare const validatePostalCode: (values: string) => boolean;

package/src/lib/Controls/Inputs/InputTextControl.d.ts

@@ -2,6 +2,7 @@
 import { CellProps, WithClassname, ControlProps, RankedTester } from '@jsonforms/core';
 import { WithInputProps } from './type';
 export type GoAInputTextProps = CellProps & WithClassname & WithInputProps;
+export declare const formatSin: (value: string) => string;
 export declare const GoAInputText: (props: GoAInputTextProps) => JSX.Element;
 export declare const GoATextControl: (props: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const GoATextControlTester: RankedTester;