@abgov/jsonforms-components 1.40.0 → 1.40.1

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import React, { createContext, useContext, useReducer, useMemo, useEffect, useState, useRef, useCallback } from 'react';
-import { GoAFormItem, GoAInput, GoATextArea, GoACallout, GoAInputDate, GoAInputDateTime, GoAInputTime, GoARadioGroup, GoARadioItem, GoACheckbox, GoAGrid, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAModal, GoAButtonGroup, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoATable, GoADropdown, GoADropdownItem, GoADetails, GoASkeleton } from '@abgov/react-components';
+import { GoAFormItem, GoAInput, GoATextArea, GoACallout, GoAInputDate, GoAInputDateTime, GoAInputTime, GoARadioGroup, GoARadioItem, GoACheckbox, GoAGrid, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAModal, GoAButtonGroup, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoATable, GoADropdown, GoADropdownItem, GoADetails } from '@abgov/react-components';
 import styled from 'styled-components';
 import axios from 'axios';
 import get$1 from 'lodash/get';
@@ -4419,7 +4419,7 @@ const TAB_KEY = 'Tab';
 let _$7 = t => t,
   _t$7,
   _t2$4,
-  _t3$3,
+  _t3$4,
   _t4$2;
 styled.div(_t$7 || (_t$7 = _$7`
   text-overflow: ellipsis;
@@ -4442,7 +4442,7 @@ const GoADropdownListContainerWrapper = styled.div(_t2$4 || (_t2$4 = _$7`
   position: relative;
   display: ${0};
 `), p => !(p === null || p === void 0 ? void 0 : p.isOpen) && 'none');
-const GoADropdownListContainer = styled.div(_t3$3 || (_t3$3 = _$7`
+const GoADropdownListContainer = styled.div(_t3$4 || (_t3$4 = _$7`
   border: solid 1px var(--goa-color-greyscale-200);
   border-radius: var(--goa-space-2xs);
   background: var(--goa-color-greyscale-white);
@@ -5094,7 +5094,7 @@ const LayoutRenderer = ({
 let _$5 = t => t,
   _t$5,
   _t2$3,
-  _t3$2,
+  _t3$3,
   _t4$1,
   _t5$1,
   _t6$1,
@@ -5120,7 +5120,7 @@ const ReviewItemSection = styled.div(_t2$3 || (_t2$3 = _$5`
   border: 1px solid #dcdcdc;
   border-radius: 5px;
 `));
-const ReviewItemHeader = styled.div(_t3$2 || (_t3$2 = _$5`
+const ReviewItemHeader = styled.div(_t3$3 || (_t3$3 = _$5`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -5904,7 +5904,7 @@ const DeleteFileModal = ({
 let _$3 = t => t,
   _t$3,
   _t2$2,
-  _t3$1;
+  _t3$2;
 const DELAY_UPLOAD_TIMEOUT_MS = 5;
 const DELAY_DELETE_TIMEOUT_MS = 5;
 const FileUploaderReview = props => {
@@ -6075,7 +6075,7 @@ const AttachmentBorder = styled.div(_t2$2 || (_t2$2 = _$3`
   width: fit-content;
   margin-top: var(--goa-space-2xs);
 `));
-const FileUploaderStyle = styled.div(_t3$1 || (_t3$1 = _$3`
+const FileUploaderStyle = styled.div(_t3$2 || (_t3$2 = _$3`
   .label {
     display: block;
     font-weight: var(--goa-font-weight-bold);
@@ -6269,7 +6269,7 @@ $$8({ target: 'Object', stat: true }, {
 let _$2 = t => t,
   _t$2,
   _t2$1,
-  _t3,
+  _t3$1,
   _t4,
   _t5,
   _t6,
@@ -6288,7 +6288,7 @@ const NonEmptyCellStyle = styled.div(_t2$1 || (_t2$1 = _$2`
     background-color: #000:
   }
 `));
-const ToolBarHeader = styled.div(_t3 || (_t3 = _$2`
+const ToolBarHeader = styled.div(_t3$1 || (_t3$1 = _$2`
   margin-bottom: var(--goa-space-l);
 `));
 const ObjectArrayTitle = styled.h2(_t4 || (_t4 = _$2`
@@ -7412,7 +7412,8 @@ const GoAListWithDetailsTester = rankWith(3, and(uiTypeIs('ListWithDetail')));
 
 let _$1 = t => t,
   _t$1,
-  _t2;
+  _t2,
+  _t3;
 const SearchBox = styled.div(_t$1 || (_t$1 = _$1`
   position: relative;
 
@@ -7448,6 +7449,20 @@ const LabelDiv = styled.div(_t2 || (_t2 = _$1`
   font-size: var(--fs-sl);
   padding-bottom: 1.5rem;
 `));
+const ListItem = styled.li(_t3 || (_t3 = _$1`
+  background-color: ${0};
+  color: ${0};
+  font-weight: ${0};
+`), ({
+  selectedIndex,
+  index
+}) => selectedIndex === index ? 'var(--color-primary)' : '', ({
+  selectedIndex,
+  index
+}) => selectedIndex === index ? 'var(--color-white) !important' : '', ({
+  selectedIndex,
+  index
+}) => selectedIndex === index ? 'var(--fw-bold)' : '');
 
 const AddressInputs = ({
   address,
@@ -7626,7 +7641,7 @@ const fetchAddressSuggestions = (formUrl, searchTerm, isAlbertaAddress) => __awa
     const response = yield axios.get(formUrl, {
       params
     });
-    return response.data.Items || [];
+    return response.data.Items;
   } catch (error) {
     console.error('Error fetching address suggestions:', error);
     return [];
@@ -7904,6 +7919,8 @@ const AddressLookUpControl = props => {
     setAddress(updatedAddress);
     handleChange(path, updatedAddress);
   };
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const dropdownRef = useRef(null);
   const handleInputChange = (field, value) => {
     var _a, _b;
     let newAddress;
@@ -7935,14 +7952,15 @@ const AddressLookUpControl = props => {
       if (searchTerm.length > 2) {
         setLoading(true);
         setOpen(true);
-        const response = yield fetchAddressSuggestions(formUrl, searchTerm, isAlbertaAddress);
-        const suggestions = filterSuggestionsWithoutAddressCount(response);
-        if (isAlbertaAddress) {
-          setSuggestions(filterAlbertaAddresses(suggestions));
-        } else {
-          setSuggestions(suggestions);
-        }
-        setLoading(false);
+        yield fetchAddressSuggestions(formUrl, searchTerm, isAlbertaAddress).then(response => {
+          const suggestions = filterSuggestionsWithoutAddressCount(response);
+          if (isAlbertaAddress) {
+            setSuggestions(filterAlbertaAddresses(suggestions));
+          } else {
+            setSuggestions(suggestions);
+          }
+          setLoading(false);
+        });
       } else {
         setSuggestions([]);
         setOpen(false);
@@ -7961,14 +7979,62 @@ const AddressLookUpControl = props => {
     setSuggestions([]);
     setErrors({});
   };
+  /* istanbul ignore next */
   const handleRequiredFieldBlur = name => {
-    if ((!(data === null || data === void 0 ? void 0 : data[name]) || (data === null || data === void 0 ? void 0 : data[name]) === '') && (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes(name))) {
-      const err = Object.assign({}, errors);
-      err[name] = name === 'municipality' ? `city is required` : `${name} is required`;
+    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);
+  };
+  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);
+    } else if (key === 'ArrowUp') {
+      setSelectedIndex(prevIndex => prevIndex > 0 ? prevIndex - 1 : suggestions.length - 1);
+      handleDropdownChange(value);
+    } else if (key === 'Enter') {
+      handleDropdownChange(value);
+      setLoading(false);
+      if (selectedIndex >= 0) {
+        (_a = document.getElementById("goaInput")) === null || _a === void 0 ? void 0 : _a.blur();
+        const suggestion = suggestions[selectedIndex];
+        if (suggestion) {
+          setTimeout(() => {
+            handleSuggestionClick(suggestion);
+            setOpen(false);
+          }, 100);
+        }
+      }
+    }
   };
   const readOnly = (_f = (_e = (_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.componentProps) === null || _e === void 0 ? void 0 : _e.readOnly) !== null && _f !== void 0 ? _f : false;
   return jsxs("div", {
@@ -7979,6 +8045,7 @@ const AddressLookUpControl = props => {
       children: jsxs(SearchBox, {
         children: [jsx(GoAInput, {
           leadingIcon: autocompletion && enabled ? 'search' : undefined,
+          id: "goaInput",
           name: "addressLine1",
           testId: "address-form-address1",
           readonly: readOnly,
@@ -7986,17 +8053,31 @@ 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: (name, value) => handleDropdownChange(value),
+          onChange: (e, value) => {
+            handleDropdownChange(value);
+          },
           onBlur: name => handleRequiredFieldBlur(name),
-          width: "100%"
-        }), loading && autocompletion && jsx(GoASkeleton, {
-          type: "text",
-          "data-testId": "loading"
-        }, 1), suggestions && autocompletion && jsx("ul", {
+          width: "100%",
+          onKeyPress: (e, value, key) => {
+            if (open) {
+              handleKeyDown(e, value, key);
+            }
+          }
+        }), loading && autocompletion && jsx(GoACircularProgress, {
+          variant: "inline",
+          size: "small",
+          visible: true
+        }), suggestions && autocompletion && jsx("ul", {
+          ref: dropdownRef,
           className: "suggestions",
           tabIndex: 0,
-          children: suggestions && autocompletion && open && suggestions.map((suggestion, index) => jsx("li", {
-            onClick: e => handleSuggestionClick(suggestion),
+          children: suggestions && autocompletion && open && suggestions.map((suggestion, index) => jsx(ListItem, {
+            "data-index": index,
+            onClick: () => {
+              handleSuggestionClick(suggestion);
+            },
+            selectedIndex: selectedIndex,
+            index: index,
             children: `${suggestion.Text}  ${suggestion.Description}`
           }, index))
         })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.40.0",
+  "version": "1.40.1",
   "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,3 +1,9 @@
 /// <reference types="react" />
+interface ListItemProps {
+    selectedIndex: number;
+    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 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 {};