@abgov/jsonforms-components 1.41.2 → 1.41.4

package/index.esm.js

@@ -4425,6 +4425,8 @@ const ARROW_DOWN_KEY = 'ArrowDown';
 const ARROW_UP_KEY = 'ArrowUp';
 const TAB_KEY = 'Tab';
 const SPACE_KEY = ' ';
+const ALT_KEY = 'Alt';
+const SHIFT_KEY = 'Shift';
 
 let _$7 = t => t,
   _t$7,
@@ -4466,6 +4468,8 @@ const GoADropdownListContainer = styled.div(_t3$4 || (_t3$4 = _$7`
   &:hover {
     background-color: var(--goa-color-interactive-hover) !important;
     color: #fff !important;
+    /* Fix to override scrollbar color in Firefox */
+    scrollbar-color: #a8a8a8 var(--goa-color-greyscale-100) !important;
   }
 `), p => p.optionListMaxHeight || '272px');
 const GoADropdownListOption = styled.div(_t4$2 || (_t4$2 = _$7`
@@ -4503,7 +4507,7 @@ const GoADropdownListOption = styled.div(_t4$2 || (_t4$2 = _$7`
 `), p => p.isSelected ? '#fff' : 'var(--goa-color-greyscale-black)', p => p.isSelected ? 'var(--goa-color-interactive-default)' : '#fff', p => p.isSelected ? 'var(--goa-color-interactive-hover)' : 'var(--goa-color-greyscale-100) !important', p => p.isSelected ? 'var(--goa-color-interactive-default)' : 'var(--goa-color-interactive-hover) !important', p => p.isSelected ? 'var(--goa-color-interactive-hover)' : 'var(--goa-color-greyscale-100) !important', p => p.isSelected ? 'var(--goa-color-interactive-default)' : 'var(--goa-color-interactive-hover) !important', p => p.isSelected ? 'var(--goa-color-interactive-hover)' : 'var(--goa-color-greyscale-100) !important', p => p.isSelected ? 'var(--goa-color-interactive-hover)' : 'var(--goa-color-greyscale-100) !important', p => p.isSelected ? '#fff' : 'var(--goa-color-interactive-hover) !important');
 
 const isValidKey = keyCode => {
-  if (keyCode === 'Shift' || keyCode === 'Alt') return false;
+  if (keyCode === SHIFT_KEY || keyCode === ALT_KEY) return false;
   const regex = new RegExp(/^[a-zA-Z0-9!%$@.#?\-_]+$/);
   return regex.test(keyCode);
 };
@@ -4535,18 +4539,20 @@ const Dropdown = props => {
   useEffect(() => {
     if (textInput) {
       textInput.addEventListener('click', inputTextOnClick);
-      textInput.addEventListener('keydown', handleKeyDown, false);
-      textInput.addEventListener('blur', handleTextInputOnBlur, false);
+      textInput.addEventListener('keydown', handleKeyDown);
+      textInput.addEventListener('blur', handleTextInputOnBlur);
     }
+    document.addEventListener('keydown', handleDocumentKeyDown);
     return () => {
       if (textInput) {
         textInput.removeEventListener('click', inputTextOnClick);
         textInput.removeEventListener('keydown', handleKeyDown);
         textInput.removeEventListener('blur', handleTextInputOnBlur);
       }
+      document.removeEventListener('keydown', handleDocumentKeyDown);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [textInput]);
+  }, [textInput, document]);
   /* istanbul ignore next */
   const handleTextInputOnBlur = e => {
     if (e.relatedTarget === null) {
@@ -4575,6 +4581,16 @@ const Dropdown = props => {
     }
     setIsOpen(false);
   };
+  const setInputTextFocus = () => {
+    const inputEl = document.getElementById(`${id}-input`);
+    if (inputEl) {
+      //The 'focused' property is part of the GoAInput component that is used to
+      //set focus on the input field. We need to set it back to false once we set focus on the input field. Doing with just .focus() doesnt work.
+      inputEl.focused = true;
+      inputEl.focus();
+      inputEl.focused = false;
+    }
+  };
   const setElementFocus = (e, element, preventDefault) => {
     if (element) {
       element.focus();
@@ -4584,11 +4600,18 @@ const Dropdown = props => {
     }
   };
   /* istanbul ignore next */
+  const handleDocumentKeyDown = e => {
+    if (e.key === ESCAPE_KEY || e.key === TAB_KEY) {
+      setIsOpen(false);
+    }
+  };
+  /* istanbul ignore next */
   const handleKeyDown = e => {
     var _a, _b, _c;
     if (e.key === ENTER_KEY || e.key === SPACE_KEY) {
       setIsOpen(previousIsOpen => !previousIsOpen);
       const el = document.getElementById(`${PREFIX}-${label}-${(_a = items.at(0)) === null || _a === void 0 ? void 0 : _a.value}`);
+      setInputTextFocus();
       setElementFocus(e, el, false);
     } else if (e.key === ARROW_UP_KEY) {
       setIsOpen(true);
@@ -4625,14 +4648,7 @@ const Dropdown = props => {
     var _a, _b, _c, _d;
     if (e.key === ENTER_KEY || e.key === SPACE_KEY) {
       updateDropDownData(item);
-      const inputEl = document.getElementById(`${id}-input`);
-      if (inputEl) {
-        //The 'focused' property is part of the GoAInput component that is used to
-        //set focus on the input field. We need to set it back to false once we set focus on the input field. Doing with just .focus() doesnt work.
-        inputEl.focused = true;
-        inputEl.focus();
-        inputEl.focused = false;
-      }
+      setInputTextFocus();
     }
     if (e.key === ESCAPE_KEY) {
       setIsOpen(false);
@@ -8165,7 +8181,7 @@ const AddressViews = ({
       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 p' : 'P'}ostal address`,
+        label: `${isAlbertaAddress ? 'Alberta p' : 'Canada p'}ostal address`,
         children: jsx("p", {
           children: data === null || data === void 0 ? void 0 : data.addressLine1
         })
@@ -8182,7 +8198,7 @@ const AddressViews = ({
         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.city
+          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' : '',
@@ -8201,7 +8217,7 @@ const AddressViews = ({
           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.province))) === null || _d === void 0 ? void 0 : _d.label
+          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",

package/package.json

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