@abgov/jsonforms-components 2.48.2 → 2.49.1

package/index.esm.js

@@ -1,13 +1,13 @@
 import * as runtime from 'react/jsx-runtime';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import React, { createContext, useContext, useReducer, useMemo, useEffect, useCallback, useRef, useState, useLayoutEffect } from 'react';
-import { GoabFormItem, GoabInput, GoabTextArea, GoabCallout, GoabRadioGroup, GoabRadioItem, GoabCheckbox, GoabIcon, GoabButton, GoabGrid, GoabIconButton, GoabTable, GoabModal, GoabButtonGroup, GoabContainer, GoabDropdown, GoabDropdownItem, GoabDetails, GoabFormStepper, GoabFormStep, GoabPages, GoabBadge, GoabText, GoabFileUploadInput, GoabCircularProgress, GoabSpinner } from '@abgov/react-components';
+import { GoabFormItem, GoabDropdown, GoabDropdownItem, GoabInput, GoabTextArea, GoabCallout, GoabRadioGroup, GoabRadioItem, GoabCheckbox, GoabIcon, GoabButton, GoabGrid, GoabIconButton, GoabTable, GoabModal, GoabButtonGroup, GoabContainer, GoabDetails, GoabFormStepper, GoabFormStep, GoabPages, GoabBadge, GoabText, GoabFileUploadInput, GoabCircularProgress, GoabSpinner } from '@abgov/react-components';
 import styled from 'styled-components';
 import axios from 'axios';
 import get$1 from 'lodash/get';
 import { isVisible, isEnabled, deriveLabelForUISchemaElement, rankWith, isStringControl, and, optionIs, isDateControl, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, uiTypeIs, isControl as isControl$1, isEnumControl, isBooleanControl, createDefaultValue, Paths, Resolve, toDataPath, schemaMatches, getAjv, or, isObjectArrayControl, isPrimitiveArrayControl, composePaths, schemaTypeIs, formatIs, hasType, isCategorization, isLayout } from '@jsonforms/core';
-import * as _$c from 'lodash';
-import ___default, { isEqual, isObject as isObject$i, isEmpty as isEmpty$1 } from 'lodash';
+import * as _$b from 'lodash';
+import ___default, { isObject as isObject$i, isEmpty as isEmpty$1 } from 'lodash';
 import { useJsonForms, withJsonFormsControlProps, withJsonFormsEnumProps, withTranslateProps, JsonFormsDispatch, withJsonFormsAllOfProps, withJsonFormsArrayLayoutProps, withJsonFormsLayoutProps, withJsonFormsCellProps } from '@jsonforms/react';
 import Ajv from 'ajv';
 import dompurify from 'dompurify';
@@ -3561,22 +3561,33 @@ const ensureGoaDatePointerCursor = host => {
   const style = document.createElement('style');
   style.id = 'goa-date-cursor-style';
   style.textContent = `
-    input[type="date"] { cursor: pointer !important; }
-    input[type="date"]:disabled { cursor: not-allowed !important; }
+    /* keep text cursor in field */
+    input[type="date"] {
+      cursor: text;
+    }
+
+    /* 👇 hand cursor ONLY on calendar icon */
+    input[type="date"]::-webkit-calendar-picker-indicator {
+      cursor: pointer;
+    }
+
+    input[type="date"]:disabled::-webkit-calendar-picker-indicator {
+      cursor: not-allowed;
+    }
   `;
   sr.appendChild(style);
 };
 
-let _$b = t => t,
-  _t$c,
-  _t2$7;
-styled.div(_t$c || (_t$c = _$b`
+let _$a = t => t,
+  _t$b,
+  _t2$6;
+styled.div(_t$b || (_t$b = _$a`
   height: 70vh;
   overflow-y: auto;
   padding-left: var(--goa-space-2xs);
   padding-right: var(--goa-space-2xs);
 `));
-const Visible = styled.div(_t2$7 || (_t2$7 = _$b`
+const Visible = styled.div(_t2$6 || (_t2$6 = _$a`
   display: ${0};
   width: 100%;
 `), p => p.visible ? 'block' : 'none');
@@ -5199,12 +5210,12 @@ const JsonFormRegisterProvider = ({
   });
 };
 
-let _$a = t => t,
-  _t$b,
-  _t2$6,
-  _t3$5,
-  _t4$5,
-  _t5$4,
+let _$9 = t => t,
+  _t$a,
+  _t2$5,
+  _t3$4,
+  _t4$4,
+  _t5$3,
   _t6$3,
   _t7$2,
   _t8$2,
@@ -5212,10 +5223,10 @@ let _$a = t => t,
   _t0$2,
   _t1$2,
   _t10$2;
-const FormFieldWrapper = styled.div(_t$b || (_t$b = _$a`
+const FormFieldWrapper = styled.div(_t$a || (_t$a = _$9`
   margin-bottom: var(--goa-space-l);
 `));
-const WarningIconDiv = styled.div(_t2$6 || (_t2$6 = _$a`
+const WarningIconDiv = styled.div(_t2$5 || (_t2$5 = _$9`
   display: flex;
   align-items: flex-start;
   gap: var(--goa-space-2xs);
@@ -5223,58 +5234,58 @@ const WarningIconDiv = styled.div(_t2$6 || (_t2$6 = _$a`
   color: var(--goa-form-item-error-message-color);
   margin-top: var(--goa-form-item-message-margin-top);
 `));
-const RequiredTextLabel = styled.label(_t3$5 || (_t3$5 = _$a`
+const RequiredTextLabel = styled.label(_t3$4 || (_t3$4 = _$9`
   color: var(--goa-color-greyscale-700);
   font-weight: var(--goa-font-weight-regular);
   font-size: var(--goa-font-size-2);
   line-height: var(--goa-line-height-1);
   font-style: normal;
 `));
-styled.td(_t4$5 || (_t4$5 = _$a`
+styled.td(_t4$4 || (_t4$4 = _$9`
   width: 40%;
   padding-top: var(--goa-space-s);
   padding-bottom: var(--goa-space-s);
   padding-right: var(--goa-space-m);
   vertical-align: top;
 `));
-styled.td(_t5$4 || (_t5$4 = _$a`
+styled.td(_t5$3 || (_t5$3 = _$9`
   width: 40%;
   text-align: left;
   vertical-align: top;
 `));
-const PageReviewContainer = styled.td(_t6$3 || (_t6$3 = _$a`
+const PageReviewContainer = styled.td(_t6$3 || (_t6$3 = _$9`
   padding: 12px 0px;
   border-bottom: 1px solid #ccc;
   width: 100%;
   vertical-align: top;
 `));
-const ReviewHeader = styled.div(_t7$2 || (_t7$2 = _$a`
+const ReviewHeader = styled.div(_t7$2 || (_t7$2 = _$9`
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
 `));
-const ReviewLabel = styled.div(_t8$2 || (_t8$2 = _$a`
+const ReviewLabel = styled.div(_t8$2 || (_t8$2 = _$9`
   font-weight: var(--goa-font-weight-bold);
   font-size: var(--goa-font-size-4);
   line-height: var(--goa-line-height-3);
   color: var(--goa-color-text-default);
 `));
-const ReviewValue = styled.div(_t9$2 || (_t9$2 = _$a`
+const ReviewValue = styled.div(_t9$2 || (_t9$2 = _$9`
   margin-top: var(--goa-space-m);
   color: var(--goa-color-text-default);
   font-size: var(--goa-font-size-4);
   line-height: var(--goa-line-height-3);
 `));
 //Check and unchecked are different heights otherwise
-const CheckboxWrapper = styled.div(_t0$2 || (_t0$2 = _$a`
+const CheckboxWrapper = styled.div(_t0$2 || (_t0$2 = _$9`
   min-height: 28px;
 `));
-styled.h4(_t1$2 || (_t1$2 = _$a`
+styled.h4(_t1$2 || (_t1$2 = _$9`
   margin: 0 0 0.25rem 0;
   fontsize: larger;
 `));
-styled.h4(_t10$2 || (_t10$2 = _$a`
+styled.h4(_t10$2 || (_t10$2 = _$9`
   border-bottom: 1px solid #ddd;
 `));
 
@@ -5399,7 +5410,7 @@ const pickPropertyValues = (obj, property, endWithType) => {
   Object.entries(obj).forEach(function ([key, value]) {
     if (key === property) {
       values.push(value);
-    } else if (_$c.isObject(value)) {
+    } else if (_$b.isObject(value)) {
       // if the object type is equal to end type, we are not going to continue the recursive approach
       if ((value == null ? void 0 : value.type) === endWithType) {
         if (property in value) {
@@ -5408,7 +5419,7 @@ const pickPropertyValues = (obj, property, endWithType) => {
       } else {
         values = [...values, ...pickPropertyValues(value, property, endWithType)];
       }
-    } else if (_$c.isArray(value)) {
+    } else if (_$b.isArray(value)) {
       const nextValues = value.map(function (arrayObj) {
         return pickPropertyValues(arrayObj, property, endWithType);
       });
@@ -6925,401 +6936,6 @@ fixRegExpWellKnownSymbolLogic$1('match', function (MATCH, nativeMatch, maybeCall
   ];
 });
 
-// a string of all valid unicode whitespaces
-var whitespaces$3 = '\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$a = functionUncurryThis;
-var requireObjectCoercible$4 = requireObjectCoercible$e;
-var toString$8 = toString$m;
-var whitespaces$2 = whitespaces$3;
-
-var replace$3 = uncurryThis$a(''.replace);
-var ltrim = RegExp('^[' + whitespaces$2 + ']+');
-var rtrim = RegExp('(^|[^' + whitespaces$2 + '])[' + whitespaces$2 + ']+$');
-
-// `String.prototype.{ trim, trimStart, trimEnd, trimLeft, trimRight }` methods implementation
-var createMethod$1 = function (TYPE) {
-  return function ($this) {
-    var string = toString$8(requireObjectCoercible$4($this));
-    if (TYPE & 1) string = replace$3(string, ltrim, '');
-    if (TYPE & 2) string = replace$3(string, rtrim, '$1');
-    return string;
-  };
-};
-
-var stringTrim = {
-  // `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$x;
-var whitespaces$1 = whitespaces$3;
-
-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$1[METHOD_NAME]()
-      || non[METHOD_NAME]() !== non
-      || (PROPER_FUNCTION_NAME && whitespaces$1[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';
-const SPACE_KEY = ' ';
-const ALT_KEY = 'Alt';
-const SHIFT_KEY = 'Shift';
-
-let _$9 = t => t,
-  _t$a,
-  _t2$5,
-  _t3$4,
-  _t4$4,
-  _t5$3;
-const GoADropdownTextbox = styled.div(_t$a || (_t$a = _$9`
-  border-radius: var(--goa-space-2xs);
-  box-shadow: ${0};
-  &:hover {
-    cursor: pointer;
-  }
-
-  .inputStyle {
-    box-shadow: ${0};
-  }
-`), p => p.isOpen ? `0 0 0 3px var(--goa-color-interactive-focus)` : '', p => p.isOpen ? `0 0 0 3px var(--goa-color-interactive-focus) !important` : '');
-const GoADropdownListContainerWrapper = styled.div(_t2$5 || (_t2$5 = _$9`
-  position: relative;
-  display: ${0};
-`), p => !(p != null && p.isOpen) && 'none');
-const GoADropdownListContainer = styled.div(_t3$4 || (_t3$4 = _$9`
-  border: solid 1px var(--goa-color-greyscale-200);
-  border-radius: var(--goa-space-2xs);
-  background: var(--goa-color-greyscale-white);
-  padding: 0;
-  margin-top: 3px;
-  width: 100%;
-  overflow-y: auto;
-  z-index: 1000;
-  caret-color: transparent;
-  position: absolute;
-  line-height: var(--goa-space-xl);
-  max-height: ${0};
-
-  &:focus-visible {
-    outline-color: var(--goa-color-interactive-default);
-  }
-  &: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$4 || (_t4$4 = _$9`
-  padding: var(--goa-space-2xs) var(--goa-space-s);
-  text-overflow: ellipsis;
-  color: ${0} !important;
-  border: 0px solid var(--goa-color-greyscale-100);
-  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: ${0};
-  }
-  &:focus-within {
-    caret-color: transparent;
-    color: #fff !important;
-    background-color: ${0};
-  }
-  .dropDownListItem:focus-visible {
-    caret-color: transparent;
-    outline: none !important;
-    color: ${0};
-  }
-`), 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 LabelItem = styled.span(_t5$3 || (_t5$3 = _$9`
-  font: var(--goa-dropdown-typography);
-`));
-
-const isValidKey = keyCode => {
-  if (keyCode === SHIFT_KEY || keyCode === ALT_KEY) return false;
-  const regex = new RegExp(/^[a-zA-Z0-9!%$@.#?\-_]+$/);
-  return regex.test(keyCode);
-};
-const Dropdown = props => {
-  var _document$getElements;
-  const {
-    label,
-    selected,
-    onChange,
-    optionListMaxHeight,
-    isAutoCompletion,
-    enabled,
-    id,
-    width
-  } = props;
-  const [isOpen, setIsOpen] = useState(false);
-  const [selectedOption, setSelectedOption] = useState(selected);
-  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}-${id}`;
-  const textInput = (_document$getElements = document.getElementsByName(textInputName)[0]) != null ? _document$getElements : 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('keydown', handleKeyDown);
-      textInput.addEventListener('blur', handleTextInputOnBlur);
-    }
-    document.addEventListener('keydown', handleDocumentKeyDown);
-    return () => {
-      if (textInput) {
-        textInput.removeEventListener('keydown', handleKeyDown);
-        textInput.removeEventListener('blur', handleTextInputOnBlur);
-      }
-      document.removeEventListener('keydown', handleDocumentKeyDown);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [textInput, document]);
-  /* istanbul ignore next */
-  const handleTextInputOnBlur = e => {
-    if (e.relatedTarget === null) {
-      setIsOpen(false);
-    } else if (e.relatedTarget && !isAutoCompletion) {
-      const dropDownEl = e.relatedTarget;
-      if (dropDownEl) {
-        if (!dropDownEl.id.startsWith(`${PREFIX}-${label}`)) {
-          setIsOpen(false);
-        }
-      }
-    }
-  };
-  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 setInputTextFocus = () => {
-    const inputEl = document.getElementById(`${id}-input`);
-    if (inputEl) {
-      //The 'focused' property is part of the GoabInput 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();
-      if (preventDefault) {
-        e.preventDefault();
-      }
-    }
-  };
-  /* istanbul ignore next */
-  const handleDocumentKeyDown = e => {
-    if (e.key === ESCAPE_KEY || e.key === TAB_KEY) {
-      setIsOpen(false);
-    }
-  };
-  /* istanbul ignore next */
-  const handleKeyDown = e => {
-    if (e.key === ENTER_KEY || e.key === SPACE_KEY) {
-      var _items$at;
-      setIsOpen(previousIsOpen => !previousIsOpen);
-      const el = document.getElementById(`${PREFIX}-${label}-${(_items$at = items.at(0)) == null ? void 0 : _items$at.value}`);
-      setInputTextFocus();
-      setElementFocus(e, el, false);
-    } else if (e.key === ARROW_UP_KEY) {
-      var _items$at2;
-      setIsOpen(true);
-      const val = `${PREFIX}-${label}-${(_items$at2 = items.at(1)) == null ? void 0 : _items$at2.value}`;
-      const el = document.getElementById(val);
-      setElementFocus(e, el, false);
-    } else if (e.key === ARROW_DOWN_KEY) {
-      var _props$items$at;
-      setIsOpen(true);
-      const firstItem = props.items.at(0);
-      let index = 0;
-      if ((firstItem == null ? void 0 : firstItem.label.trim()) === '') {
-        index = 1;
-      }
-      let el = document.getElementById(`${PREFIX}-${label}-${(_props$items$at = props.items.at(index)) == null ? void 0 : _props$items$at.value}`);
-      if (el === null && !isAutoCompletion) {
-        const elements = document.querySelectorAll(`[id='${PREFIX}-dropDownList-${label}']`);
-        const element = elements.item(0).children.item(1);
-        el = document.getElementById(`${PREFIX}-${label}-${element.innerText}`);
-      } else if (el === null && isAutoCompletion) {
-        const elements = document.querySelectorAll(`[id=${PREFIX}-dropDownList-${label}]`);
-        const element = elements[0].children[0];
-        el = document.getElementById(`${PREFIX}-${label}-${element.innerText}`);
-      }
-      setElementFocus(e, el, true);
-    } else if (e.key === ESCAPE_KEY || e.key === TAB_KEY) {
-      setIsOpen(false);
-    } else {
-      if (isValidKey(e.key)) {
-        setIsOpen(true);
-      }
-    }
-  };
-  const handDropDownItemOnKeyDown = (e, item) => {
-    if (e.key === ENTER_KEY || e.key === SPACE_KEY) {
-      updateDropDownData(item);
-      setInputTextFocus();
-    }
-    if (e.key === ESCAPE_KEY) {
-      setIsOpen(false);
-      setInputTextFocus();
-    }
-    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) {
-      var _items$at3, _items$at4;
-      if (item.label === ((_items$at3 = items.at(-1)) == null ? void 0 : _items$at3.label)) {
-        e.preventDefault();
-      }
-      if (index === -1 && item.label.trim() === '') {
-        index = 0;
-      }
-      const el = document.getElementById(`${PREFIX}-${label}-${(_items$at4 = items.at(index + 1)) == null ? void 0 : _items$at4.value}`);
-      if (el) {
-        setElementFocus(e, el, true);
-        return;
-      }
-    }
-    if (e.key === ARROW_UP_KEY) {
-      var _items$at5;
-      if (index <= 0) {
-        e.preventDefault();
-        return;
-      }
-      const el = document.getElementById(`${PREFIX}-${label}-${(_items$at5 = items.at(index - 1)) == null ? void 0 : _items$at5.value}`);
-      if (el) {
-        el.focus();
-      }
-    }
-    if (e.key === TAB_KEY) {
-      var _items$at6;
-      const val = `${PREFIX}-${label}-${(_items$at6 = items.at(index - 1)) == null ? void 0 : _items$at6.value}`;
-      const el = document.getElementById(val);
-      if (el) {
-        setIsOpen(false);
-      }
-    }
-  };
-  return jsxs("div", {
-    "data-testid": id,
-    style: {
-      width: width || '100%'
-    },
-    children: [jsx(GoADropdownTextbox, {
-      isOpen: isOpen,
-      onClick: e => {
-        setIsOpen(previousIsOpen => !previousIsOpen);
-      },
-      children: jsx(GoabInput, {
-        disabled: !enabled,
-        name: `dropdown-${label}-${id}`,
-        width: "100%",
-        value: inputText,
-        testId: `${id}-input`,
-        ariaLabel: `${id}-input`,
-        id: `${id}-input`,
-        readonly: !isAutoCompletion,
-        onChange: detail => {
-          if (isAutoCompletion) {
-            setInputText(detail.value);
-            const selectedItems = props.items.filter(item => {
-              return item.label.includes(detail.value);
-            });
-            setItems(selectedItems);
-          }
-        },
-        onTrailingIconClick: () => {},
-        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, {
-            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: e => {
-                updateDropDownData(item);
-              },
-              children: jsx(LabelItem, {
-                children: item.label
-              })
-            }, `${PREFIX}-${label}-${item.value}`)
-          }, `${PREFIX}-option-${label}-${item.value}`);
-        })
-      }, `${PREFIX}-dropDownList-${label}`)
-    }, `${PREFIX}-dropDownListContainerWrapper-${label}`)]
-  }, id);
-};
-
 //type DebounceValueType = string | boolean | number | Record<string, unknown>;
 /**
  * A helper util to return a value at a certain delay. The delay is reset if the value arg changes
@@ -7439,18 +7055,20 @@ const GoAInputText = props => {
   const autoCapitalize = (uischema == null || (_uischema$options2 = uischema.options) == null || (_uischema$options2 = _uischema$options2.componentProps) == null ? void 0 : _uischema$options2.autoCapitalize) === true || (uischema == null || (_uischema$options3 = uischema.options) == null ? void 0 : _uischema$options3.autoCapitalize) === true;
   const readOnly = (_uischema$options$com2 = uischema == null || (_uischema$options4 = uischema.options) == null || (_uischema$options4 = _uischema$options4.componentProps) == null ? void 0 : _uischema$options4.readOnly) != null ? _uischema$options$com2 : false;
   return jsx("div", {
-    children: mergedOptions.length > 0 ? jsx(Dropdown, {
-      items: mergedOptions,
-      enabled: enabled,
-      selected: data,
-      id: `jsonforms-${label}-dropdown`,
-      label: label || '',
+    children: mergedOptions.length > 0 ? jsx(GoabDropdown, {
+      name: `jsonforms-${path}-dropdown`,
+      value: data,
+      disabled: !enabled,
+      id: `jsonforms-${path}-dropdown`,
+      filterable: autoCompletion,
+      onChange: detail => handleChange(path, detail.value),
       width: width,
-      isAutoCompletion: autoCompletion,
-      onChange: value => {
-        handleChange(path, value);
-      }
-    }, `jsonforms-${label}-dropdown`) : jsx(GoabInput, Object.assign({
+      testId: `jsonforms-${path}-dropdown`,
+      children: mergedOptions.map(item => jsx(GoabDropdownItem, {
+        label: item.label,
+        value: item.value ? item.value : ''
+      }, item.label))
+    }, `jsonforms-${path}-dropdown`) : jsx(GoabInput, Object.assign({
       error: isVisited && errors.length > 0,
       type: appliedUiSchemaOptions.format === 'password' ? 'password' : 'text',
       disabled: !enabled,
@@ -7563,15 +7181,15 @@ const MultiLineTextControlTester = rankWith(3, and(isStringControl, optionIs('mu
 const MultiLineTextControl = withJsonFormsControlProps(MultiLineTextControlInput);
 
 var toIntegerOrInfinity$1 = toIntegerOrInfinity$9;
-var toString$7 = toString$m;
-var requireObjectCoercible$3 = requireObjectCoercible$e;
+var toString$8 = toString$m;
+var requireObjectCoercible$4 = requireObjectCoercible$e;
 
 var $RangeError$1 = RangeError;
 
 // `String.prototype.repeat` method implementation
 // https://tc39.es/ecma262/#sec-string.prototype.repeat
 var stringRepeat = function repeat(count) {
-  var str = toString$7(requireObjectCoercible$3(this));
+  var str = toString$8(requireObjectCoercible$4(this));
   var result = '';
   var n = toIntegerOrInfinity$1(count);
   if (n < 0 || n === Infinity) throw new $RangeError$1('Wrong number of repetitions');
@@ -7580,23 +7198,23 @@ var stringRepeat = function repeat(count) {
 };
 
 // https://github.com/tc39/proposal-string-pad-start-end
-var uncurryThis$9 = functionUncurryThis;
+var uncurryThis$a = functionUncurryThis;
 var toLength$2 = toLength$7;
-var toString$6 = toString$m;
+var toString$7 = toString$m;
 var $repeat = stringRepeat;
-var requireObjectCoercible$2 = requireObjectCoercible$e;
+var requireObjectCoercible$3 = requireObjectCoercible$e;
 
-var repeat = uncurryThis$9($repeat);
-var stringSlice$3 = uncurryThis$9(''.slice);
+var repeat = uncurryThis$a($repeat);
+var stringSlice$3 = uncurryThis$a(''.slice);
 var ceil = Math.ceil;
 
 // `String.prototype.{ padStart, padEnd }` methods implementation
-var createMethod = function (IS_END) {
+var createMethod$1 = function (IS_END) {
   return function ($this, maxLength, fillString) {
-    var S = toString$6(requireObjectCoercible$2($this));
+    var S = toString$7(requireObjectCoercible$3($this));
     var intMaxLength = toLength$2(maxLength);
     var stringLength = S.length;
-    var fillStr = fillString === undefined ? ' ' : toString$6(fillString);
+    var fillStr = fillString === undefined ? ' ' : toString$7(fillString);
     var fillLen, stringFiller;
     if (intMaxLength <= stringLength || fillStr === '') return S;
     fillLen = intMaxLength - stringLength;
@@ -7609,20 +7227,20 @@ var createMethod = function (IS_END) {
 var stringPad = {
   // `String.prototype.padStart` method
   // https://tc39.es/ecma262/#sec-string.prototype.padstart
-  start: createMethod(false)};
+  start: createMethod$1(false)};
 
 // https://github.com/zloirock/core-js/issues/280
 var userAgent = engineUserAgent;
 
 var stringPadWebkitBug = /Version\/10(?:\.\d+){1,2}(?: [\w./]+)?(?: Mobile\/\w+)? Safari\//.test(userAgent);
 
-var $$9 = _export;
+var $$a = _export;
 var $padStart = stringPad.start;
 var WEBKIT_BUG = stringPadWebkitBug;
 
 // `String.prototype.padStart` method
 // https://tc39.es/ecma262/#sec-string.prototype.padstart
-$$9({ target: 'String', proto: true, forced: WEBKIT_BUG }, {
+$$a({ target: 'String', proto: true, forced: WEBKIT_BUG }, {
   padStart: function padStart(maxLength /* , fillString = ' ' */) {
     return $padStart(this, maxLength, arguments.length > 1 ? arguments[1] : undefined);
   }
@@ -8198,23 +7816,28 @@ const EnumSelect = props => {
   return jsx("div", {
     children: error.length > 0 ? callout({
       message: error
-    }) : jsx(Dropdown, {
-      items: mergedOptions,
-      enabled: enabled,
-      selected: typeof data === 'object' ? ___default.get(data, valuePath) : data,
-      width: width,
+    }) : jsx(GoabDropdown, {
+      name: `jsonforms-${path}-dropdown`,
+      value: typeof data === 'object' ? ___default.get(data, valuePath) : data,
+      disabled: !enabled,
       id: `jsonforms-${path}-dropdown`,
-      label: label,
-      isAutoCompletion: autoCompletion,
-      onChange: value => {
+      filterable: autoCompletion,
+      onChange: detail => {
         if (schema.type === 'object') {
           handleChange(path, registerData.find(o => {
-            return ___default.get(o, valuePath) === value;
+            return ___default.get(o, valuePath) === detail.value;
           }));
         } else {
-          handleChange(path, value);
+          handleChange(path, detail.value);
         }
-      }
+      },
+      width: width,
+      testId: `jsonforms-${path}-dropdown`,
+      children: mergedOptions.map(item => jsx(GoabDropdownItem, {
+        testId: `jsonforms-${path}-dropdown-${item.label}`,
+        label: item.label,
+        value: item.value
+      }, item.label))
     }, `jsonforms-${path}-dropdown`)
   });
 };
@@ -8478,6 +8101,63 @@ const EnumCheckboxControl = props => {
 const GoAEnumCheckboxGroupControl = withJsonFormsEnumProps(withTranslateProps(EnumCheckboxControl), true);
 const GoACheckoutGroupControlTester = rankWith(18, and(optionIs('format', 'checkbox')));
 
+// a string of all valid unicode whitespaces
+var whitespaces$3 = '\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$9 = functionUncurryThis;
+var requireObjectCoercible$2 = requireObjectCoercible$e;
+var toString$6 = toString$m;
+var whitespaces$2 = whitespaces$3;
+
+var replace$3 = uncurryThis$9(''.replace);
+var ltrim = RegExp('^[' + whitespaces$2 + ']+');
+var rtrim = RegExp('(^|[^' + whitespaces$2 + '])[' + whitespaces$2 + ']+$');
+
+// `String.prototype.{ trim, trimStart, trimEnd, trimLeft, trimRight }` methods implementation
+var createMethod = function (TYPE) {
+  return function ($this) {
+    var string = toString$6(requireObjectCoercible$2($this));
+    if (TYPE & 1) string = replace$3(string, ltrim, '');
+    if (TYPE & 2) string = replace$3(string, rtrim, '$1');
+    return string;
+  };
+};
+
+var stringTrim = {
+  // `String.prototype.trim` method
+  // https://tc39.es/ecma262/#sec-string.prototype.trim
+  trim: createMethod(3)
+};
+
+var PROPER_FUNCTION_NAME = functionName.PROPER;
+var fails$3 = fails$x;
+var whitespaces$1 = whitespaces$3;
+
+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$1[METHOD_NAME]()
+      || non[METHOD_NAME]() !== non
+      || (PROPER_FUNCTION_NAME && whitespaces$1[METHOD_NAME].name !== METHOD_NAME);
+  });
+};
+
+var $$9 = _export;
+var $trim = stringTrim.trim;
+var forcedStringTrimMethod = stringTrimForced;
+
+// `String.prototype.trim` method
+// https://tc39.es/ecma262/#sec-string.prototype.trim
+$$9({ target: 'String', proto: true, forced: forcedStringTrimMethod('trim') }, {
+  trim: function trim() {
+    return $trim(this);
+  }
+});
+
 const warningIcon = errorMessage => {
   return jsxs(WarningIconDiv, {
     children: [jsx(GoabIcon, {

package/package.json

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