@abgov/jsonforms-components 1.36.0 → 1.37.0

package/index.esm.js

@@ -4306,6 +4306,75 @@ const GoATimeControl = props => jsx(GoAInputBaseControl, Object.assign({}, props
 const GoATimeControlTester = rankWith(4, isTimeControl);
 const GoAInputTimeControl = withJsonFormsControlProps(GoATimeControl);
 
+// a string of all valid unicode whitespaces
+var whitespaces$2 = '\u0009\u000A\u000B\u000C\u000D\u0020\u00A0\u1680\u2000\u2001\u2002' +
+  '\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\u2028\u2029\uFEFF';
+
+var uncurryThis$5 = functionUncurryThis;
+var requireObjectCoercible$1 = requireObjectCoercible$a;
+var toString$2 = toString$d;
+var whitespaces$1 = whitespaces$2;
+
+var replace$1 = uncurryThis$5(''.replace);
+var ltrim = RegExp('^[' + whitespaces$1 + ']+');
+var rtrim = RegExp('(^|[^' + whitespaces$1 + '])[' + whitespaces$1 + ']+$');
+
+// `String.prototype.{ trim, trimStart, trimEnd, trimLeft, trimRight }` methods implementation
+var createMethod$1 = function (TYPE) {
+  return function ($this) {
+    var string = toString$2(requireObjectCoercible$1($this));
+    if (TYPE & 1) string = replace$1(string, ltrim, '');
+    if (TYPE & 2) string = replace$1(string, rtrim, '$1');
+    return string;
+  };
+};
+
+var stringTrim = {
+  // `String.prototype.{ trimLeft, trimStart }` methods
+  // https://tc39.es/ecma262/#sec-string.prototype.trimstart
+  start: createMethod$1(1),
+  // `String.prototype.{ trimRight, trimEnd }` methods
+  // https://tc39.es/ecma262/#sec-string.prototype.trimend
+  end: createMethod$1(2),
+  // `String.prototype.trim` method
+  // https://tc39.es/ecma262/#sec-string.prototype.trim
+  trim: createMethod$1(3)
+};
+
+var PROPER_FUNCTION_NAME = functionName.PROPER;
+var fails$4 = fails$r;
+var whitespaces = whitespaces$2;
+
+var non = '\u200B\u0085\u180E';
+
+// check that a method works with the correct list
+// of whitespaces and has a correct name
+var stringTrimForced = function (METHOD_NAME) {
+  return fails$4(function () {
+    return !!whitespaces[METHOD_NAME]()
+      || non[METHOD_NAME]() !== non
+      || (PROPER_FUNCTION_NAME && whitespaces[METHOD_NAME].name !== METHOD_NAME);
+  });
+};
+
+var $$a = _export;
+var $trim = stringTrim.trim;
+var forcedStringTrimMethod = stringTrimForced;
+
+// `String.prototype.trim` method
+// https://tc39.es/ecma262/#sec-string.prototype.trim
+$$a({ target: 'String', proto: true, forced: forcedStringTrimMethod('trim') }, {
+  trim: function trim() {
+    return $trim(this);
+  }
+});
+
+const ENTER_KEY = 'Enter';
+const ESCAPE_KEY = 'Escape';
+const ARROW_DOWN_KEY = 'ArrowDown';
+const ARROW_UP_KEY = 'ArrowUp';
+const TAB_KEY = 'Tab';
+
 let _$7 = t => t,
   _t$7,
   _t2$4,
@@ -4341,23 +4410,55 @@ const GoADropdownListContainer = styled.div(_t3$3 || (_t3$3 = _$7`
   width: 100%;
   overflow-y: auto;
   z-index: 1000;
+  caret-color: transparent;
   position: absolute;
   line-height: 2rem;
   max-height: ${0};
+
+  &:focus-visible {
+    outline-color: var(--goa-color-interactive-default);
+  }
+  &:hover {
+    background-color: var(--goa-color-interactive-hover) !important;
+    color: white !important;
+  }
 `), p => p.optionListMaxHeight || '272px');
 const GoADropdownListOption = styled.div(_t4$2 || (_t4$2 = _$7`
   padding: 4px 12px;
   text-overflow: ellipsis;
   color: ${0} !important;
-  border: 1px solid #f1f1f1;
+  border: 0px solid #f1f1f1;
   z-index: 1001;
+  cursor: pointer;
   background: ${0};
+  :has(div:focus) {
+    background-color: ${0};
+    color: ${0};
+  }
   &:hover {
     background-color: ${0};
+    color: ${0};
+  }
+
+  &:focus-visible {
+    caret-color: transparent;
+    color: black !important;
+    background-color: var(--goa-color-interactive-hover) !important;
+  }
+  &:focus-within {
+    caret-color: transparent;
     color: ${0} !important;
+    background-color: var(--goa-color-interactive-hover) !important;
   }
-`), p => p.isSelected ? 'white' : 'var(--goa-color-greyscale-black)', p => p.isSelected ? 'var(--goa-color-interactive-default)' : '#fff', p => p.isSelected ? 'var(--goa-color-interactive-default)' : '#f1f1f1', p => p.isSelected ? 'white' : '#333');
+  .dropDownListItem:focus-visible {
+    caret-color: transparent;
+    outline: none !important;
+    color: ${0};
+  }
+`), p => p.isSelected ? 'white' : '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 ? 'white' : 'var(--goa-color-interactive-hover)', p => p.isSelected ? 'white' : 'var(--goa-color-interactive-hover) !important');
+
 const Dropdown = props => {
+  var _a;
   const {
     label,
     selected,
@@ -4368,14 +4469,135 @@ const Dropdown = props => {
   } = props;
   const [isOpen, setIsOpen] = useState(false);
   const [selectedOption, setSelectedOption] = useState(selected);
-  const trailingIcon = isOpen ? 'chevron-up' : 'chevron-down';
   const [items, setItems] = useState(props.items);
   const [inputText, setInputText] = useState(selected);
   const prevCountRef = useRef(props.items);
+  const trailingIcon = isOpen ? 'chevron-up' : 'chevron-down';
+  const textInputName = `dropdown-${label}`;
+  const textInput = (_a = document.getElementsByName(textInputName)[0]) !== null && _a !== void 0 ? _a : null;
+  const PREFIX = 'jsonforms-dropdown';
   useEffect(() => {
     setItems(props.items);
     prevCountRef.current = props.items;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isEqual(props.items, prevCountRef.current)]);
+  useEffect(() => {
+    if (textInput) {
+      textInput.addEventListener('click', inputTextOnClick);
+      textInput.addEventListener('keydown', handleKeyDown, false);
+    }
+    return () => {
+      if (textInput) {
+        textInput.removeEventListener('click', inputTextOnClick);
+        textInput.removeEventListener('keydown', handleKeyDown);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [textInput]);
+  const inputTextOnClick = e => {
+    setIsOpen(!isOpen);
+  };
+  const updateDropDownData = item => {
+    onChange(item.value);
+    setSelectedOption(item.value);
+    setInputText(item.label);
+    if (isAutocompletion) {
+      const selectedItems = props.items.filter(filterItem => {
+        return filterItem.label === item.label;
+      });
+      setItems(selectedItems);
+    }
+    setIsOpen(false);
+  };
+  const setElementFocus = (e, element, preventDefault) => {
+    if (element) {
+      element.focus();
+      if (preventDefault) {
+        e.preventDefault();
+      }
+    }
+  };
+  const handleKeyDown = e => {
+    var _a, _b, _c;
+    if (e.key === ENTER_KEY) {
+      setIsOpen(!isOpen);
+      const el = document.getElementById(`${PREFIX}-${label}-${(_a = items.at(0)) === null || _a === void 0 ? void 0 : _a.value}`);
+      setElementFocus(e, el, false);
+    } else if (e.key === ARROW_UP_KEY) {
+      setIsOpen(true);
+      const val = `${PREFIX}-${label}-${(_b = items.at(1)) === null || _b === void 0 ? void 0 : _b.value}`;
+      const el = document.getElementById(val);
+      setElementFocus(e, el, false);
+    } else if (e.key === ARROW_DOWN_KEY) {
+      setIsOpen(true);
+      const firstItem = props.items.at(0);
+      let index = 0;
+      if ((firstItem === null || firstItem === void 0 ? void 0 : firstItem.label.trim()) === '') {
+        index = 1;
+      }
+      let el = document.getElementById(`${PREFIX}-${label}-${(_c = props.items.at(index)) === null || _c === void 0 ? void 0 : _c.value}`);
+      if (el === null) {
+        const elements = document.querySelectorAll(`[id=${PREFIX}-dropDownList-${label}]`);
+        const element = elements.item(0).children.item(1);
+        el = document.getElementById(`${PREFIX}-${label}-${element.innerText}`);
+      }
+      setElementFocus(e, el, true);
+    } else if (e.key === ESCAPE_KEY || e.key === TAB_KEY) {
+      setIsOpen(false);
+    }
+  };
+  const handDropDownItemOnKeyDown = (e, item) => {
+    var _a, _b, _c, _d;
+    if (e.key === ENTER_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;
+      }
+    }
+    if (e.key === ESCAPE_KEY) {
+      setIsOpen(false);
+    }
+    let index = items.findIndex(val => {
+      return val.label === e.currentTarget.innerText;
+    });
+    //Prevent jumping to the next control/DOM element if
+    //we are on the last item in the drop down list
+    if (e.key === ARROW_DOWN_KEY) {
+      if (item.label === ((_a = items.at(-1)) === null || _a === void 0 ? void 0 : _a.label)) {
+        e.preventDefault();
+      }
+      if (index === -1 && item.label.trim() === '') {
+        index = 0;
+      }
+      const el = document.getElementById(`${PREFIX}-${label}-${(_b = items.at(index + 1)) === null || _b === void 0 ? void 0 : _b.value}`);
+      if (el) {
+        setElementFocus(e, el, true);
+        return;
+      }
+    }
+    if (e.key === ARROW_UP_KEY) {
+      if (index <= 0) {
+        e.preventDefault();
+        return;
+      }
+      const el = document.getElementById(`${PREFIX}-${label}-${(_c = items.at(index - 1)) === null || _c === void 0 ? void 0 : _c.value}`);
+      if (el) {
+        el.focus();
+      }
+    }
+    if (e.key === TAB_KEY) {
+      const val = `${PREFIX}-${label}-${(_d = items.at(index - 1)) === null || _d === void 0 ? void 0 : _d.value}`;
+      const el = document.getElementById(val);
+      if (el) {
+        setIsOpen(false);
+      }
+    }
+  };
   return jsxs("div", {
     "data-testid": id,
     children: [jsx(GoAInput, {
@@ -4397,32 +4619,35 @@ const Dropdown = props => {
           setIsOpen(true);
         }
       },
-      trailingIcon: trailingIcon,
-      onFocus: () => {
-        setIsOpen(!isOpen);
-      }
+      trailingIcon: trailingIcon
     }), jsx(GoADropdownListContainerWrapper, {
       isOpen: isOpen,
+      id: `${PREFIX}-dropDownListContainerWrapper-${label}`,
       children: jsx(GoADropdownListContainer, {
+        id: `${PREFIX}-dropDownList-${label}`,
         optionListMaxHeight: optionListMaxHeight,
         children: items.map(item => {
           return jsx(GoADropdownListOption, {
-            isSelected: item.value === selected,
+            id: `${PREFIX}-option-${label}-${item.value}`,
+            isSelected: item.value === selected || item.value === selectedOption,
             children: jsx("div", {
+              tabIndex: 0,
+              className: "dropDownListItem",
               "data-testid": `${id}-${item.label}-option`,
+              id: `${PREFIX}-${label}-${item.value}`,
+              onKeyDown: e => {
+                handDropDownItemOnKeyDown(e, item);
+              },
               onClick: () => {
-                onChange(item.value);
-                setSelectedOption(item.value);
-                setInputText(item.label);
-                setIsOpen(false);
+                updateDropDownData(item);
               },
               children: item.label
-            }, `jsonforms-dropdown-${label}-${item.value}`)
-          });
+            }, `${PREFIX}-${label}-${item.value}`)
+          }, `${PREFIX}-option-${label}-${item.value}`);
         })
-      })
-    })]
-  });
+      }, `${PREFIX}-dropDownList-${label}`)
+    }, `${PREFIX}-dropDownListContainerWrapper-${label}`)]
+  }, id);
 };
 
 function fetchRegisterConfigFromOptions(options) {
@@ -4455,7 +4680,7 @@ const EnumSelect = props => {
     registerData = registerCtx === null || registerCtx === void 0 ? void 0 : registerCtx.selectRegisterData(registerConfig);
     error = (registerCtx === null || registerCtx === void 0 ? void 0 : registerCtx.fetchErrors(registerConfig)) || '';
   }
-  const autocompletion = ((_d = (_c = props.uischema) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.autocomplete) === true;
+  const autoCompletion = ((_d = (_c = props.uischema) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.autoComplete) === true;
   const mergedOptions = useMemo(() => {
     const newOptions = [...(options || []), ...((registerData === null || registerData === void 0 ? void 0 : registerData.map(d => {
       if (typeof d === 'string') {
@@ -4492,11 +4717,11 @@ const EnumSelect = props => {
       selected: data,
       id: `jsonforms-${label}-dropdown`,
       label: label,
-      isAutocompletion: autocompletion,
+      isAutocompletion: autoCompletion,
       onChange: value => {
         handleChange(path, value);
       }
-    })
+    }, `jsonforms-${label}-dropdown`)
   });
 };
 const enumControl = props => {
@@ -4861,10 +5086,10 @@ const RightAlignmentDiv = styled.div(_t10$1 || (_t10$1 = _$5`
   margin-bottom: var(--goa-space-l);
 `));
 
-var toString$2 = toString$d;
+var toString$1 = toString$d;
 
 var normalizeStringArgument$1 = function (argument, $default) {
-  return argument === undefined ? arguments.length < 2 ? '' : $default : toString$2(argument);
+  return argument === undefined ? arguments.length < 2 ? '' : $default : toString$1(argument);
 };
 
 var isObject$2 = isObject$d;
@@ -4878,10 +5103,10 @@ var installErrorCause$1 = function (O, options) {
   }
 };
 
-var uncurryThis$5 = functionUncurryThis;
+var uncurryThis$4 = functionUncurryThis;
 
 var $Error = Error;
-var replace$1 = uncurryThis$5(''.replace);
+var replace = uncurryThis$4(''.replace);
 
 var TEST = (function (arg) { return String(new $Error(arg).stack); })('zxcasd');
 // eslint-disable-next-line redos/no-vulnerable -- safe
@@ -4890,14 +5115,14 @@ var IS_V8_OR_CHAKRA_STACK = V8_OR_CHAKRA_STACK_ENTRY.test(TEST);
 
 var errorStackClear = function (stack, dropEntries) {
   if (IS_V8_OR_CHAKRA_STACK && typeof stack == 'string' && !$Error.prepareStackTrace) {
-    while (dropEntries--) stack = replace$1(stack, V8_OR_CHAKRA_STACK_ENTRY, '');
+    while (dropEntries--) stack = replace(stack, V8_OR_CHAKRA_STACK_ENTRY, '');
   } return stack;
 };
 
-var fails$4 = fails$r;
+var fails$3 = fails$r;
 var createPropertyDescriptor$1 = createPropertyDescriptor$5;
 
-var errorStackInstallable = !fails$4(function () {
+var errorStackInstallable = !fails$3(function () {
   var error = new Error('a');
   if (!('stack' in error)) return true;
   // eslint-disable-next-line es/no-object-defineproperty -- safe
@@ -4984,7 +5209,7 @@ var wrapErrorConstructorWithCause$1 = function (FULL_NAME, wrapper, FORCED, IS_A
 };
 
 /* eslint-disable no-unused-vars -- required for functions `.length` */
-var $$a = _export;
+var $$9 = _export;
 var global$8 = global$o;
 var apply$1 = functionApply;
 var wrapErrorConstructorWithCause = wrapErrorConstructorWithCause$1;
@@ -4998,14 +5223,14 @@ var FORCED$1 = new Error('e', { cause: 7 }).cause !== 7;
 var exportGlobalErrorCauseWrapper = function (ERROR_NAME, wrapper) {
   var O = {};
   O[ERROR_NAME] = wrapErrorConstructorWithCause(ERROR_NAME, wrapper, FORCED$1);
-  $$a({ global: true, constructor: true, arity: 1, forced: FORCED$1 }, O);
+  $$9({ global: true, constructor: true, arity: 1, forced: FORCED$1 }, O);
 };
 
 var exportWebAssemblyErrorCauseWrapper = function (ERROR_NAME, wrapper) {
   if (WebAssembly && WebAssembly[ERROR_NAME]) {
     var O = {};
     O[ERROR_NAME] = wrapErrorConstructorWithCause(WEB_ASSEMBLY + '.' + ERROR_NAME, wrapper, FORCED$1);
-    $$a({ target: WEB_ASSEMBLY, stat: true, constructor: true, arity: 1, forced: FORCED$1 }, O);
+    $$9({ target: WEB_ASSEMBLY, stat: true, constructor: true, arity: 1, forced: FORCED$1 }, O);
   }
 };
 
@@ -5788,20 +6013,20 @@ const FileUploaderStyle = styled.div(_t3$1 || (_t3$1 = _$3`
 const FileUploaderTester = rankWith(3, and(schemaTypeIs('string'), formatIs('file-urn')));
 
 var classofRaw = classofRaw$2;
-var uncurryThis$4 = functionUncurryThis;
+var uncurryThis$3 = functionUncurryThis;
 
 var functionUncurryThisClause = function (fn) {
   // Nashorn bug:
   //   https://github.com/zloirock/core-js/issues/1128
   //   https://github.com/zloirock/core-js/issues/1130
-  if (classofRaw(fn) === 'Function') return uncurryThis$4(fn);
+  if (classofRaw(fn) === 'Function') return uncurryThis$3(fn);
 };
 
-var uncurryThis$3 = functionUncurryThisClause;
+var uncurryThis$2 = functionUncurryThisClause;
 var aCallable$6 = aCallable$9;
 var NATIVE_BIND = functionBindNative;
 
-var bind$4 = uncurryThis$3(uncurryThis$3.bind);
+var bind$4 = uncurryThis$2(uncurryThis$2.bind);
 
 // optional / simple context binding
 var functionBindContext = function (fn, that) {
@@ -5952,13 +6177,13 @@ var createProperty$1 = function (object, key, value) {
   else object[key] = value;
 };
 
-var $$9 = _export;
+var $$8 = _export;
 var iterate$2 = iterate$3;
 var createProperty = createProperty$1;
 
 // `Object.fromEntries` method
 // https://github.com/tc39/proposal-object-from-entries
-$$9({ target: 'Object', stat: true }, {
+$$8({ target: 'Object', stat: true }, {
   fromEntries: function fromEntries(iterable) {
     var obj = {};
     iterate$2(iterable, function (k, v) {
@@ -7276,16 +7501,16 @@ const AddressInputs = ({
   });
 };
 
-var $$8 = _export;
-var uncurryThis$2 = functionUncurryThisClause;
+var $$7 = _export;
+var uncurryThis$1 = functionUncurryThisClause;
 var getOwnPropertyDescriptor$1 = objectGetOwnPropertyDescriptor.f;
 var toLength = toLength$4;
-var toString$1 = toString$d;
+var toString = toString$d;
 var notARegExp = notARegexp;
-var requireObjectCoercible$1 = requireObjectCoercible$a;
+var requireObjectCoercible = requireObjectCoercible$a;
 var correctIsRegExpLogic = correctIsRegexpLogic;
 
-var slice = uncurryThis$2(''.slice);
+var slice = uncurryThis$1(''.slice);
 var min = Math.min;
 
 var CORRECT_IS_REGEXP_LOGIC = correctIsRegExpLogic('endsWith');
@@ -7297,81 +7522,18 @@ var MDN_POLYFILL_BUG = !CORRECT_IS_REGEXP_LOGIC && !!function () {
 
 // `String.prototype.endsWith` method
 // https://tc39.es/ecma262/#sec-string.prototype.endswith
-$$8({ target: 'String', proto: true, forced: !MDN_POLYFILL_BUG && !CORRECT_IS_REGEXP_LOGIC }, {
+$$7({ target: 'String', proto: true, forced: !MDN_POLYFILL_BUG && !CORRECT_IS_REGEXP_LOGIC }, {
   endsWith: function endsWith(searchString /* , endPosition = @length */) {
-    var that = toString$1(requireObjectCoercible$1(this));
+    var that = toString(requireObjectCoercible(this));
     notARegExp(searchString);
     var endPosition = arguments.length > 1 ? arguments[1] : undefined;
     var len = that.length;
     var end = endPosition === undefined ? len : min(toLength(endPosition), len);
-    var search = toString$1(searchString);
+    var search = toString(searchString);
     return slice(that, end - search.length, end) === search;
   }
 });
 
-// a string of all valid unicode whitespaces
-var whitespaces$2 = '\u0009\u000A\u000B\u000C\u000D\u0020\u00A0\u1680\u2000\u2001\u2002' +
-  '\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\u2028\u2029\uFEFF';
-
-var uncurryThis$1 = functionUncurryThis;
-var requireObjectCoercible = requireObjectCoercible$a;
-var toString = toString$d;
-var whitespaces$1 = whitespaces$2;
-
-var replace = uncurryThis$1(''.replace);
-var ltrim = RegExp('^[' + whitespaces$1 + ']+');
-var rtrim = RegExp('(^|[^' + whitespaces$1 + '])[' + whitespaces$1 + ']+$');
-
-// `String.prototype.{ trim, trimStart, trimEnd, trimLeft, trimRight }` methods implementation
-var createMethod$1 = function (TYPE) {
-  return function ($this) {
-    var string = toString(requireObjectCoercible($this));
-    if (TYPE & 1) string = replace(string, ltrim, '');
-    if (TYPE & 2) string = replace(string, rtrim, '$1');
-    return string;
-  };
-};
-
-var stringTrim = {
-  // `String.prototype.{ trimLeft, trimStart }` methods
-  // https://tc39.es/ecma262/#sec-string.prototype.trimstart
-  start: createMethod$1(1),
-  // `String.prototype.{ trimRight, trimEnd }` methods
-  // https://tc39.es/ecma262/#sec-string.prototype.trimend
-  end: createMethod$1(2),
-  // `String.prototype.trim` method
-  // https://tc39.es/ecma262/#sec-string.prototype.trim
-  trim: createMethod$1(3)
-};
-
-var PROPER_FUNCTION_NAME = functionName.PROPER;
-var fails$3 = fails$r;
-var whitespaces = whitespaces$2;
-
-var non = '\u200B\u0085\u180E';
-
-// check that a method works with the correct list
-// of whitespaces and has a correct name
-var stringTrimForced = function (METHOD_NAME) {
-  return fails$3(function () {
-    return !!whitespaces[METHOD_NAME]()
-      || non[METHOD_NAME]() !== non
-      || (PROPER_FUNCTION_NAME && whitespaces[METHOD_NAME].name !== METHOD_NAME);
-  });
-};
-
-var $$7 = _export;
-var $trim = stringTrim.trim;
-var forcedStringTrimMethod = stringTrimForced;
-
-// `String.prototype.trim` method
-// https://tc39.es/ecma262/#sec-string.prototype.trim
-$$7({ target: 'String', proto: true, forced: forcedStringTrimMethod('trim') }, {
-  trim: function trim() {
-    return $trim(this);
-  }
-});
-
 const fetchAddressSuggestions = (formUrl, searchTerm, isAlbertaAddress) => __awaiter(void 0, void 0, void 0, function* () {
   const params = {
     country: 'CAN',
@@ -7765,29 +7927,37 @@ const AddressLookUpControl = props => {
   });
 };
 
-const isAddressSchema = obj => {
+const isPropertiesMatch = (obj, props, isExactMatch) => {
   if (isObject$e(obj)) {
     const keys = Object.keys(obj);
-    return ['addressLine2', 'municipality', 'addressLine1', 'subdivisionCode', 'postalCode'].every(attr => keys.includes(attr));
+    if (isExactMatch) {
+      return props.every(attr => keys.includes(attr)) && keys.length === props.length;
+    } else {
+      return props.every(attr => keys.includes(attr));
+    }
   }
   return false;
 };
-const isAddressLookup = (uischema, schema, context) => {
-  if (!isControl(uischema) || !isScoped(uischema)) {
-    return false;
-  }
-  if ((schema === null || schema === void 0 ? void 0 : schema.properties) && isObject$e(schema === null || schema === void 0 ? void 0 : schema.properties)) {
-    const propertyFromScope = uischema['scope'].split('/').pop();
-    if (isObject$e(schema.properties[propertyFromScope]) && 'properties' in schema.properties[propertyFromScope]) {
-      const objToTest = schema.properties[propertyFromScope]['properties'];
-      if (objToTest && isAddressSchema(objToTest)) {
-        return true;
+const createSchemaMatchTester = (props, isExactMatch = false) => {
+  return (uischema, schema, context) => {
+    if (!isControl(uischema) || !isScoped(uischema)) {
+      return false;
+    }
+    if ((schema === null || schema === void 0 ? void 0 : schema.properties) && isObject$e(schema === null || schema === void 0 ? void 0 : schema.properties)) {
+      const propertyFromScope = uischema['scope'].split('/').pop();
+      if (isObject$e(schema.properties[propertyFromScope]) && 'properties' in schema.properties[propertyFromScope]) {
+        const objToTest = schema.properties[propertyFromScope]['properties'];
+        if (objToTest && isPropertiesMatch(objToTest, props, isExactMatch)) {
+          return true;
+        }
       }
     }
-  }
-  return false;
+    return false;
+  };
 };
-const AddressLookUpTester = rankWith(3, isAddressLookup);
+
+const isAddressLookup = createSchemaMatchTester(['addressLine2', 'municipality', 'addressLine1', 'subdivisionCode', 'postalCode']);
+const AddressLookUpTester = rankWith(4, isAddressLookup);
 
 const GoATextCell = props => jsx(GoAInputText, Object.assign({}, props));
 const GoATextCellTester = rankWith(1, isStringControl);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.36.0",
+  "version": "1.37.0",
   "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/Components/DropDownTypes.d.ts

@@ -0,0 +1,33 @@
+export interface Item {
+    label: string;
+    value: string;
+}
+export interface DropdownProps {
+    items: Array<Item>;
+    label: string;
+    selected: string;
+    optionListMaxHeight?: string;
+    onChange: (value: string) => void;
+    isAutocompletion?: boolean;
+    id?: string;
+}
+export interface GoADropdownTextboxProps {
+    isOpen: boolean;
+}
+export interface GoADropdownListContainerWrapperProps {
+    isOpen: boolean;
+}
+export interface GoADropdownListContainerProps {
+    optionListMaxHeight?: string;
+}
+export interface GoADropdownListOptionProps {
+    isSelected: boolean;
+}
+export interface GoAInputDropDownProps {
+    isAutoCompletion: boolean;
+}
+export declare const ENTER_KEY = "Enter";
+export declare const ESCAPE_KEY = "Escape";
+export declare const ARROW_DOWN_KEY = "ArrowDown";
+export declare const ARROW_UP_KEY = "ArrowUp";
+export declare const TAB_KEY = "Tab";

package/src/lib/Components/Dropdown.d.ts

@@ -1,15 +1,2 @@
-export interface Item {
-    label: string;
-    value: string;
-}
-interface DropdownProps {
-    items: Array<Item>;
-    label: string;
-    selected: string;
-    optionListMaxHeight?: string;
-    onChange: (value: string) => void;
-    isAutocompletion?: boolean;
-    id?: string;
-}
+import { DropdownProps } from './DropDownTypes';
 export declare const Dropdown: (props: DropdownProps) => JSX.Element;
-export {};

package/src/lib/Components/styled-components.d.ts

@@ -0,0 +1,5 @@
+import { GoADropdownListContainerProps, GoADropdownListContainerWrapperProps, GoADropdownListOptionProps, GoADropdownTextboxProps } from './DropDownTypes';
+export declare const GoADropdownTextbox: import("styled-components").StyledComponent<"div", any, GoADropdownTextboxProps, never>;
+export declare const GoADropdownListContainerWrapper: import("styled-components").StyledComponent<"div", any, GoADropdownListContainerWrapperProps, never>;
+export declare const GoADropdownListContainer: import("styled-components").StyledComponent<"div", any, GoADropdownListContainerProps, never>;
+export declare const GoADropdownListOption: import("styled-components").StyledComponent<"div", any, GoADropdownListOptionProps, never>;

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

@@ -1,3 +1,3 @@
-import { RankedTester, UISchemaElement, JsonSchema, TesterContext } from '@jsonforms/core';
-export declare const isAddressLookup: (uischema: UISchemaElement, schema: JsonSchema, context: TesterContext) => boolean;
+import { RankedTester } from '@jsonforms/core';
+export declare const isAddressLookup: import("@jsonforms/core").Tester;
 export declare const AddressLookUpTester: RankedTester;

package/src/lib/common/tester.d.ts

@@ -0,0 +1,3 @@
+import { Tester, RankedTester } from '@jsonforms/core';
+export declare const createSchemaMatchTester: (props: string[], isExactMatch?: boolean) => Tester;
+export declare const createSchemaMatchRankedTester: (props: string[], isExactMatch?: boolean) => RankedTester;