@abgov/jsonforms-components 1.50.2 → 1.50.4

package/index.esm.js

@@ -1,12 +1,12 @@
 import * as runtime from 'react/jsx-runtime';
 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, GoASpinner } from '@abgov/react-components';
-import { useJsonForms, withJsonFormsControlProps, withJsonFormsRendererProps, withJsonFormsEnumProps, withTranslateProps, JsonFormsDispatch, withJsonFormsLayoutProps, withJsonFormsArrayLayoutProps, withJsonFormsCellProps } from '@jsonforms/react';
 import styled from 'styled-components';
+import React, { createContext, useContext, useReducer, useMemo, useEffect, useState, useRef, useCallback } from 'react';
 import axios from 'axios';
 import get$1 from 'lodash/get';
 import { rankWith, isStringControl, and, optionIs, uiTypeIs, isDateControl, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isEnumControl, isBooleanControl, getAjv, isVisible, toDataPath, deriveLabelForUISchemaElement, isEnabled, schemaTypeIs, formatIs, createDefaultValue, Paths, or, isObjectArrayControl, isPrimitiveArrayControl, schemaMatches, hasType, isControl, isCategorization, isLayout } from '@jsonforms/core';
+import { withJsonFormsControlProps, withJsonFormsRendererProps, withJsonFormsEnumProps, withTranslateProps, useJsonForms, JsonFormsDispatch, withJsonFormsLayoutProps, withJsonFormsArrayLayoutProps, withJsonFormsCellProps } from '@jsonforms/react';
 import * as _$b from 'lodash';
 import { isEqual, isObject as isObject$f } from 'lodash';
 import merge from 'lodash/merge';
@@ -2807,7 +2807,7 @@ const isRequiredAndHasNoData = props => {
     data,
     required
   } = props;
-  return required && (data === undefined || data.length === 0);
+  return required && (data === undefined || (data === null || data === void 0 ? void 0 : data.length) === 0);
 };
 /**
  * Checks the key press value to determine if the key press is a 'Shift' or 'Tab'.
@@ -3862,46 +3862,15 @@ const GoAInputBaseControl = props => {
     label,
     input,
     required,
-    errors,
     path,
-    isStepperReview,
-    id
+    isStepperReview
   } = props;
   const InnerComponent = input;
   const labelToUpdate = getLabelText(uischema.scope, label || '');
-  const ctx = useJsonForms();
   let modifiedErrors = checkFieldValidity(props);
   if (modifiedErrors === 'must be equal to one of the allowed values') {
     modifiedErrors = '';
   }
-  useEffect(() => {
-    var _a, _b, _c, _d;
-    if ((_a = ctx.core) === null || _a === void 0 ? void 0 : _a.ajv) {
-      // eslint-disable-next-line
-      const newError = {
-        instancePath: path,
-        message: modifiedErrors,
-        schemaPath: id,
-        keyword: '',
-        params: {}
-      };
-      const existingErrorIndex = (ctx.core.ajv.errors || []).findIndex(error => {
-        return (error === null || error === void 0 ? void 0 : error.schemaPath) === id;
-      });
-      if (modifiedErrors) {
-        if (existingErrorIndex > -1) {
-          (ctx.core.ajv.errors || [])[existingErrorIndex] = newError;
-        } else {
-          ctx.core.ajv.errors = [...(ctx.core.ajv.errors || []), newError];
-        }
-      } else {
-        if (existingErrorIndex > -1) {
-          delete (ctx.core.ajv.errors || [])[existingErrorIndex];
-        }
-      }
-      ctx.core.ajv.errors = ((_d = (_c = (_b = ctx.core) === null || _b === void 0 ? void 0 : _b.ajv) === null || _c === void 0 ? void 0 : _c.errors) === null || _d === void 0 ? void 0 : _d.filter(e => e !== null)) || [];
-    }
-  }, [modifiedErrors, ctx, path, id]);
   return jsx(JsonFormRegisterProvider, {
     defaultRegisters: undefined,
     children: jsx(Visible, {
@@ -4025,890 +3994,947 @@ fixRegExpWellKnownSymbolLogic('match', function (MATCH, nativeMatch, maybeCallNa
   ];
 });
 
-const formatSin = value => {
-  const inputVal = value.replace(/ /g, '');
-  let inputNumbersOnly = inputVal.replace(/\D/g, '');
-  if (inputNumbersOnly.length > 16) {
-    inputNumbersOnly = inputNumbersOnly.substr(0, 9);
-  }
-  const splits = inputNumbersOnly.match(/.{1,3}/g);
-  let spacedNumber = '';
-  if (splits) {
-    spacedNumber = splits.join(' ');
-  }
-  const formatVal = spacedNumber.length > 11 ? spacedNumber.slice(0, 11) : spacedNumber;
-  return formatVal;
-};
-const GoAInputText = props => {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
-  const {
-    data,
-    config,
-    id,
-    enabled,
-    uischema,
-    schema,
-    label
-  } = props;
-  const appliedUiSchemaOptions = Object.assign(Object.assign({}, config), uischema === null || uischema === void 0 ? void 0 : uischema.options);
-  const placeholder = (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.placeholder) || (schema === null || schema === void 0 ? void 0 : schema.description) || '';
-  const errorsFormInput = checkFieldValidity(props);
-  const isSinField = schema.title === sinTitle;
-  const autoCapitalize = ((_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.autoCapitalize) === true || ((_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.autoCapitalize) === true;
-  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 jsx(GoAInput, Object.assign({
-    error: errorsFormInput.length > 0,
-    type: appliedUiSchemaOptions.format === 'password' ? 'password' : 'text',
-    disabled: !enabled,
-    value: data,
-    width: '100%',
-    readonly: readOnly,
-    maxLength: isSinField ? 11 : '',
-    placeholder: placeholder
-  }, (_g = uischema.options) === null || _g === void 0 ? void 0 : _g.componentProps, {
-    // maxLength={appliedUiSchemaOptions?.maxLength}
-    name: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
-    testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
-    // Don't use handleChange in the onChange event, use the keyPress or onBlur.
-    // If you use it onChange along with keyPress event it will cause a
-    // side effect that causes the validation to render when it shouldn't.
-    onChange: (name, value) => {
-      let formattedValue = value;
-      if (schema && schema.title === sinTitle && value !== '') {
-        formattedValue = formatSin(value);
-      }
-      onChangeForInputControl({
-        name,
-        value: formattedValue,
-        controlProps: props
-      });
-    },
-    onKeyPress: (name, value, key) => {
-      onKeyPressForTextControl({
-        name,
-        value: autoCapitalize ? value.toUpperCase() : value,
-        key,
-        controlProps: props
-      });
-    },
-    onBlur: (name, value) => {
-      onBlurForTextControl({
-        name,
-        controlProps: props,
-        value: autoCapitalize ? value.toUpperCase() : value
-      });
-    }
-  }, (_h = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _h === void 0 ? void 0 : _h.componentProps));
-};
-const GoATextControl = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
-  input: GoAInputText
-}));
-const GoATextControlTester = rankWith(1, isStringControl);
-const GoAInputTextControl = withJsonFormsControlProps(GoATextControl);
+// 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';
 
-const MultiLineText = props => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-  const {
-    data,
-    config,
-    id,
-    enabled,
-    uischema,
-    path,
-    handleChange,
-    schema,
-    label
-  } = props;
-  const {
-    required
-  } = props;
-  const [textAreaValue, _] = React.useState(data);
-  const appliedUiSchemaOptions = Object.assign(Object.assign({}, config), uischema === null || uischema === void 0 ? void 0 : uischema.options);
-  const placeholder = (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.placeholder) || (schema === null || schema === void 0 ? void 0 : schema.description) || '';
-  const errorsFormInput = checkFieldValidity(props);
-  const width = (_c = (_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.readOnly) !== null && _c !== void 0 ? _c : '100%';
-  const autoCapitalize = ((_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.autoCapitalize) === true || ((_f = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _f === void 0 ? void 0 : _f.autoCapitalize) === true;
-  const readOnly = (_j = (_h = (_g = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _g === void 0 ? void 0 : _g.componentProps) === null || _h === void 0 ? void 0 : _h.readOnly) !== null && _j !== void 0 ? _j : false;
-  const textAreaName = `${label || path}-text-area` || '';
-  (_k = document.getElementsByName(textAreaName)[0]) !== null && _k !== void 0 ? _k : null;
-  const txtAreaComponent = jsx(GoATextArea, Object.assign({
-    error: errorsFormInput.length > 0,
-    value: textAreaValue,
-    disabled: !enabled,
-    readOnly: readOnly,
-    placeholder: placeholder,
-    testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
-    name: textAreaName,
-    width: width,
-    // Note: Paul Jan-09-2023. The latest ui-component come with the maxCount. We need to uncomment the following line when the component is updated
-    // maxCount={schema.maxLength || 256}
-    onKeyPress: (name, value, key) => {
-      const newValue = autoCapitalize ? value.toUpperCase() : value;
-      if (value.length === 0 || required && errorsFormInput.length === 0 && value.length > 0) {
-        onKeyPressForTextControl({
-          name,
-          value: newValue,
-          key,
-          controlProps: props
-        });
-      }
-    },
-    onChange: (name, value) => {
-      if (data !== value) {
-        const newValue = autoCapitalize ? value.toUpperCase() : value;
-        handleChange(path, newValue);
-      }
-    }
-  }, (_l = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _l === void 0 ? void 0 : _l.componentProps));
-  return txtAreaComponent;
-};
-const MultiLineTextControlInput = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
-  input: MultiLineText
-}));
-const MultiLineTextControlTester = rankWith(3, and(isStringControl, optionIs('multi', true)));
-const MultiLineTextControl = withJsonFormsControlProps(MultiLineTextControlInput);
+var uncurryThis$3 = functionUncurryThis;
+var requireObjectCoercible$1 = requireObjectCoercible$b;
+var toString$1 = toString$e;
+var whitespaces$1 = whitespaces$2;
 
-// Used locally for callout presentation
-const callout = props => {
-  var _a;
-  const componentProps = Object.assign({
-    size: 'medium',
-    type: 'emergency',
-    message: 'unknown'
-  }, props);
-  const testid = (_a = componentProps.message) === null || _a === void 0 ? void 0 : _a.replace(/\s/g, '');
-  return jsx(GoACallout, Object.assign({}, componentProps, {
-    "data-testid": testid,
-    children: componentProps.message
-  }));
-};
-const CalloutControl = props => {
-  var _a, _b;
-  return callout(((_b = (_a = props === null || props === void 0 ? void 0 : props.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.componentProps) || {});
-};
-const GoACalloutControlTester = rankWith(1, uiTypeIs('Callout'));
-var GoACalloutControl = withJsonFormsRendererProps(CalloutControl);
+var replace = uncurryThis$3(''.replace);
+var ltrim = RegExp('^[' + whitespaces$1 + ']+');
+var rtrim = RegExp('(^|[^' + whitespaces$1 + '])[' + whitespaces$1 + ']+$');
 
-const errMalformedDate = (scope, type) => {
-  return `${type}-date for variable '${scope}' has an incorrect format.`;
+// `String.prototype.{ trim, trimStart, trimEnd, trimLeft, trimRight }` methods implementation
+var createMethod$1 = function (TYPE) {
+  return function ($this) {
+    var string = toString$1(requireObjectCoercible$1($this));
+    if (TYPE & 1) string = replace(string, ltrim, '');
+    if (TYPE & 2) string = replace(string, rtrim, '$1');
+    return string;
+  };
 };
-const isValidDateFormat = date => {
-  const standardized = standardizeDate(date);
-  return standardized !== undefined;
+
+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)
 };
-const invalidDateFormat = (scope, type) => {
-  return callout({
-    message: errMalformedDate(scope, type)
+
+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);
   });
 };
-// eslint-disable-next-line
-const reformatDateProps = props => {
-  const newProps = Object.assign({}, props);
-  if (newProps) {
-    if ((newProps === null || newProps === void 0 ? void 0 : newProps.min) && typeof newProps.min === 'string') {
-      newProps.min = standardizeDate(newProps.min);
-    }
-    if ((newProps === null || newProps === void 0 ? void 0 : newProps.max) && typeof newProps.max === 'string') {
-      newProps.max = standardizeDate(newProps.max);
-    }
-  }
-  return newProps;
-};
-const GoADateInput = props => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-  const {
-    data,
-    config,
-    id,
-    enabled,
-    uischema,
-    path,
-    handleChange,
-    label
-  } = props;
-  const appliedUiSchemaOptions = Object.assign(Object.assign({}, config), uischema === null || uischema === void 0 ? void 0 : uischema.options);
-  const readOnly = (_c = (_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.readOnly) !== null && _c !== void 0 ? _c : false;
-  const width = (_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.width) !== null && _f !== void 0 ? _f : '100%';
-  const minDate = (_h = (_g = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _g === void 0 ? void 0 : _g.componentProps) === null || _h === void 0 ? void 0 : _h.min;
-  if (minDate && !isValidDateFormat(minDate)) {
-    return invalidDateFormat(uischema.scope, 'Min');
-  }
-  const maxDate = (_k = (_j = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _j === void 0 ? void 0 : _j.componentProps) === null || _k === void 0 ? void 0 : _k.max;
-  if (maxDate && !isValidDateFormat(maxDate)) {
-    return invalidDateFormat(uischema.scope, 'Max');
+
+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);
   }
-  return jsx(GoAInputDate, Object.assign({
-    error: checkFieldValidity(props).length > 0,
-    width: width,
-    name: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
-    value: standardizeDate(data) || '',
-    testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
-    disabled: !enabled,
-    readonly: readOnly,
-    onChange: (name, value) => {
-      onChangeForDateControl({
-        name,
-        value,
-        controlProps: props
-      });
-    },
-    onKeyPress: (name, value, key) => {
-      onKeyPressForDateControl({
-        name,
-        value,
-        key,
-        controlProps: props
-      });
-    },
-    onBlur: (name, value) => {
-      onBlurForDateControl({
-        name,
-        value,
-        controlProps: props
-      });
-    }
-  }, reformatDateProps((_l = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _l === void 0 ? void 0 : _l.componentProps)));
-};
-const GoADateControl = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
-  input: GoADateInput
-}));
-const GoADateControlTester = rankWith(4, isDateControl);
-const GoAInputDateControl = withJsonFormsControlProps(GoADateControl);
+});
 
-const GoANumberInput = props => {
-  var _a, _b, _c, _d, _e, _f, _g;
-  // eslint-disable-next-line
+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 _$8 = t => t,
+  _t$8,
+  _t2$5,
+  _t3$4,
+  _t4$3;
+const GoADropdownTextbox = styled.div(_t$8 || (_t$8 = _$8`
+  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 = _$8`
+  position: relative;
+  display: ${0};
+`), p => !(p === null || p === void 0 ? void 0 : p.isOpen) && 'none');
+const GoADropdownListContainer = styled.div(_t3$4 || (_t3$4 = _$8`
+  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$3 || (_t4$3 = _$8`
+  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 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 _a;
   const {
-    data,
-    config,
-    id,
+    label,
+    selected,
+    onChange,
+    optionListMaxHeight,
+    isAutoCompletion,
     enabled,
-    uischema,
-    isValid,
-    path,
-    handleChange,
-    schema,
-    label
+    id
   } = props;
-  const appliedUiSchemaOptions = Object.assign(Object.assign({}, config), uischema === null || uischema === void 0 ? void 0 : uischema.options);
-  const placeholder = (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.placeholder) || (schema === null || schema === void 0 ? void 0 : schema.description) || '';
-  const InputValue = data && data !== undefined ? data : '';
-  const clonedSchema = JSON.parse(JSON.stringify(schema));
-  const StepValue = clonedSchema.multipleOf ? clonedSchema.multipleOf : 0.01;
-  const MinValue = clonedSchema.minimum ? clonedSchema.minimum : '';
-  const MaxValue = clonedSchema.exclusiveMaximum ? clonedSchema.exclusiveMaximum : '';
-  const readOnly = (_c = (_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.readOnly) !== null && _c !== void 0 ? _c : false;
-  const width = (_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.width) !== null && _f !== void 0 ? _f : '100%';
-  const errorsFormInput = checkFieldValidity(props);
-  return jsx(GoAInput, Object.assign({
-    type: "number",
-    error: errorsFormInput.length > 0,
-    disabled: !enabled,
-    readonly: readOnly,
-    value: InputValue,
-    placeholder: placeholder,
-    step: StepValue,
-    min: MinValue,
-    max: MaxValue,
-    width: width,
-    name: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
-    testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
-    onKeyPress: (name, value, key) => {
-      onKeyPressNumericControl({
-        name,
-        value,
-        key,
-        controlProps: props
-      });
-    },
-    onBlur: (name, value) => {
-      onBlurForNumericControl({
-        name,
-        value,
-        controlProps: props
-      });
-    },
-    onChange: (name, value) => {
-      onChangeForNumericControl({
-        name,
-        value,
-        controlProps: 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}`;
+  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('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);
     }
-  }, (_g = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _g === void 0 ? void 0 : _g.componentProps));
+    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();
+      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 => {
+    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);
+      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 && !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) => {
+    var _a, _b, _c, _d;
+    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) {
+      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(GoADropdownTextbox, {
+      isOpen: isOpen,
+      onClick: e => {
+        setIsOpen(previousIsOpen => !previousIsOpen);
+      },
+      children: jsx(GoAInput, {
+        disabled: !enabled,
+        name: `dropdown-${label}`,
+        width: "100%",
+        value: inputText,
+        testId: `${id}-input`,
+        id: `${id}-input`,
+        readonly: !isAutoCompletion,
+        onChange: (name, value) => {
+          if (isAutoCompletion) {
+            setInputText(value);
+            const selectedItems = props.items.filter(item => {
+              return item.label.includes(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: item.label
+            }, `${PREFIX}-${label}-${item.value}`)
+          }, `${PREFIX}-option-${label}-${item.value}`);
+        })
+      }, `${PREFIX}-dropDownList-${label}`)
+    }, `${PREFIX}-dropDownListContainerWrapper-${label}`)]
+  }, id);
 };
-const GoANumberControl = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
-  input: GoANumberInput
-}));
-const GoANumberControlTester = rankWith(2, isNumberControl);
-const GoAInputNumberControl = withJsonFormsControlProps(GoANumberControl);
 
-const GoAInputInteger = props => {
-  var _a, _b, _c, _d, _e, _f, _g;
-  // eslint-disable-next-line
+function fetchRegisterConfigFromOptions$1(options) {
+  if (!(options === null || options === void 0 ? void 0 : options.url) && !(options === null || options === void 0 ? void 0 : options.urn)) return undefined;
+  const config = Object.assign({}, options);
+  return config;
+}
+const formatSin = value => {
+  const inputVal = value.replace(/ /g, '');
+  let inputNumbersOnly = inputVal.replace(/\D/g, '');
+  if (inputNumbersOnly.length > 16) {
+    inputNumbersOnly = inputNumbersOnly.substr(0, 9);
+  }
+  const splits = inputNumbersOnly.match(/.{1,3}/g);
+  let spacedNumber = '';
+  if (splits) {
+    spacedNumber = splits.join(' ');
+  }
+  const formatVal = spacedNumber.length > 11 ? spacedNumber.slice(0, 11) : spacedNumber;
+  return formatVal;
+};
+const GoAInputText = props => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
   const {
     data,
     config,
     id,
     enabled,
     uischema,
-    isValid,
-    path,
-    handleChange,
     schema,
-    label
+    label,
+    path,
+    handleChange
   } = props;
+  const registerCtx = useContext(JsonFormsRegisterContext);
+  const registerConfig = fetchRegisterConfigFromOptions$1((_b = (_a = props.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.register);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  let registerData = [];
+  if (registerConfig) {
+    registerData = registerCtx === null || registerCtx === void 0 ? void 0 : registerCtx.selectRegisterData(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 mergedOptions = useMemo(() => {
+    const newOptions = [...((registerData === null || registerData === void 0 ? void 0 : registerData.map(d => {
+      if (typeof d === 'string') {
+        return {
+          value: d,
+          label: d
+        };
+      } else {
+        return Object.assign({}, d);
+      }
+    })) || [])];
+    const hasNonEmptyOptions = newOptions.some(option => option.value !== '');
+    if (!hasNonEmptyOptions && newOptions.length === 1 && newOptions[0].value === '') {
+      return newOptions;
+    }
+    if (newOptions && newOptions.length === 0) {
+      newOptions.push({
+        label: '',
+        value: ''
+      });
+    }
+    return newOptions.filter(option => option.value !== '');
+  }, [registerData]);
+  useEffect(() => {
+    if (registerConfig) {
+      registerCtx === null || registerCtx === void 0 ? void 0 : registerCtx.fetchRegisterByUrl(registerConfig);
+    }
+  }, [registerCtx, registerConfig]);
   const appliedUiSchemaOptions = Object.assign(Object.assign({}, config), uischema === null || uischema === void 0 ? void 0 : uischema.options);
   const placeholder = (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.placeholder) || (schema === null || schema === void 0 ? void 0 : schema.description) || '';
-  const InputValue = data && data !== undefined ? data : '';
-  const clonedSchema = JSON.parse(JSON.stringify(schema));
-  const StepValue = clonedSchema.multipleOf ? clonedSchema.multipleOf : 0;
-  const MinValue = clonedSchema.minimum ? clonedSchema.minimum : '';
-  const MaxValue = clonedSchema.exclusiveMaximum ? clonedSchema.exclusiveMaximum : '';
-  const readOnly = (_c = (_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.readOnly) !== null && _c !== void 0 ? _c : false;
-  const width = (_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.width) !== null && _f !== void 0 ? _f : '100%';
   const errorsFormInput = checkFieldValidity(props);
-  return jsx(GoAInput, Object.assign({
-    type: "number",
-    error: errorsFormInput.length > 0,
-    width: width,
-    disabled: !enabled,
-    readonly: readOnly,
-    value: InputValue,
-    step: StepValue,
-    min: MinValue,
-    max: MaxValue,
-    placeholder: placeholder,
-    name: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
-    testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
-    onKeyPress: (name, value, key) => {
-      onKeyPressNumericControl({
-        name,
-        value,
-        key,
-        controlProps: props
-      });
-    },
-    onBlur: (name, value) => {
-      onBlurForNumericControl({
-        name,
-        value,
-        controlProps: props
-      });
-    },
-    onChange: (name, value) => {
-      onChangeForNumericControl({
-        name,
-        value,
-        controlProps: props
-      });
-    }
-  }, (_g = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _g === void 0 ? void 0 : _g.componentProps));
+  const isSinField = schema.title === sinTitle;
+  const autoCapitalize = ((_f = (_e = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _e === void 0 ? void 0 : _e.componentProps) === null || _f === void 0 ? void 0 : _f.autoCapitalize) === true || ((_g = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _g === void 0 ? void 0 : _g.autoCapitalize) === true;
+  const readOnly = (_k = (_j = (_h = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _h === void 0 ? void 0 : _h.componentProps) === null || _j === void 0 ? void 0 : _j.readOnly) !== null && _k !== void 0 ? _k : false;
+  return jsx("div", {
+    children: mergedOptions.length > 0 ? jsx(Dropdown, {
+      items: mergedOptions,
+      enabled: enabled,
+      selected: data,
+      id: `jsonforms-${label}-dropdown`,
+      label: label || '',
+      isAutoCompletion: autoCompletion,
+      onChange: value => {
+        handleChange(path, value);
+      }
+    }, `jsonforms-${label}-dropdown`) : jsx(GoAInput, Object.assign({
+      error: errorsFormInput.length > 0,
+      type: appliedUiSchemaOptions.format === 'password' ? 'password' : 'text',
+      disabled: !enabled,
+      value: data,
+      width: '100%',
+      readonly: readOnly,
+      maxLength: isSinField ? 11 : '',
+      placeholder: placeholder
+    }, (_l = uischema.options) === null || _l === void 0 ? void 0 : _l.componentProps, {
+      // maxLength={appliedUiSchemaOptions?.maxLength}
+      name: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
+      testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
+      // Don't use handleChange in the onChange event, use the keyPress or onBlur.
+      // If you use it onChange along with keyPress event it will cause a
+      // side effect that causes the validation to render when it shouldn't.
+      onChange: (name, value) => {
+        let formattedValue = value;
+        if (schema && schema.title === sinTitle && value !== '') {
+          formattedValue = formatSin(value);
+        }
+        onChangeForInputControl({
+          name,
+          value: formattedValue,
+          controlProps: props
+        });
+      },
+      onKeyPress: (name, value, key) => {
+        onKeyPressForTextControl({
+          name,
+          value: autoCapitalize ? value.toUpperCase() : value,
+          key,
+          controlProps: props
+        });
+      },
+      onBlur: (name, value) => {
+        onBlurForTextControl({
+          name,
+          controlProps: props,
+          value: autoCapitalize ? value.toUpperCase() : value
+        });
+      }
+    }, (_m = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _m === void 0 ? void 0 : _m.componentProps))
+  });
 };
-const GoAIntegerControl = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
-  input: GoAInputInteger
+const GoATextControl = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
+  input: GoAInputText
 }));
-const GoAIntegerControlTester = rankWith(2, isIntegerControl);
-const GoAInputIntegerControl = withJsonFormsControlProps(GoAIntegerControl);
+const GoATextControlTester = rankWith(1, isStringControl);
+const GoAInputTextControl = withJsonFormsControlProps(GoATextControl);
 
-const GoADateTimeInput = props => {
-  var _a, _b, _c, _d, _e, _f, _g;
-  // eslint-disable-next-line
+const MultiLineText = props => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
   const {
     data,
     config,
     id,
     enabled,
     uischema,
-    isValid,
     path,
-    errors,
     handleChange,
     schema,
     label
   } = props;
-  const appliedUiSchemaOptions = Object.assign(Object.assign({}, config), uischema === null || uischema === void 0 ? void 0 : uischema.options);
-  const readOnly = (_c = (_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.readOnly) !== null && _c !== void 0 ? _c : false;
-  const width = (_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.width) !== null && _f !== void 0 ? _f : '100%';
-  return jsx(GoAInputDateTime, Object.assign({
-    error: checkFieldValidity(props).length > 0,
-    width: width,
-    name: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
-    value: data ? new Date(data).toISOString() : '',
-    testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
-    disabled: !enabled,
-    readonly: readOnly,
-    onChange: (name, value) => {
-      onChangeForDateTimeControl({
-        name,
-        value,
-        controlProps: props
-      });
-    },
-    onKeyPress: (name, value, key) => {
-      onKeyPressForDateControl({
-        name,
-        value,
-        key,
-        controlProps: props
-      });
-    },
-    onBlur: (name, value) => {
-      onBlurForDateControl({
-        name,
-        value,
-        controlProps: props
-      });
-    }
-  }, (_g = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _g === void 0 ? void 0 : _g.componentProps));
-};
-const GoADateTimeControl = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
-  input: GoADateTimeInput
-}));
-const GoADateTimeControlTester = rankWith(2, isDateTimeControl);
-const GoAInputDateTimeControl = withJsonFormsControlProps(GoADateTimeControl);
-
-const GoATimeInput = props => {
-  var _a, _b, _c, _d, _e, _f, _g;
-  // eslint-disable-next-line
   const {
-    data,
-    config,
-    id,
-    enabled,
-    uischema,
-    isValid,
-    path,
-    handleChange,
-    schema,
-    label
+    required
   } = props;
+  const [textAreaValue, _] = React.useState(data);
   const appliedUiSchemaOptions = Object.assign(Object.assign({}, config), uischema === null || uischema === void 0 ? void 0 : uischema.options);
-  (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.placeholder) || (schema === null || schema === void 0 ? void 0 : schema.description) || '';
-  const readOnly = (_c = (_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.readOnly) !== null && _c !== void 0 ? _c : false;
+  const placeholder = (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.placeholder) || (schema === null || schema === void 0 ? void 0 : schema.description) || '';
   const errorsFormInput = checkFieldValidity(props);
-  const width = (_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 : '100%';
-  return jsx(GoAInputTime, Object.assign({
+  const width = (_c = (_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.readOnly) !== null && _c !== void 0 ? _c : '100%';
+  const autoCapitalize = ((_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.autoCapitalize) === true || ((_f = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _f === void 0 ? void 0 : _f.autoCapitalize) === true;
+  const readOnly = (_j = (_h = (_g = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _g === void 0 ? void 0 : _g.componentProps) === null || _h === void 0 ? void 0 : _h.readOnly) !== null && _j !== void 0 ? _j : false;
+  const textAreaName = `${label || path}-text-area` || '';
+  (_k = document.getElementsByName(textAreaName)[0]) !== null && _k !== void 0 ? _k : null;
+  const txtAreaComponent = jsx(GoATextArea, Object.assign({
     error: errorsFormInput.length > 0,
-    name: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
-    value: data,
-    step: 1,
-    width: width,
+    value: textAreaValue,
     disabled: !enabled,
-    readonly: readOnly,
+    readOnly: readOnly,
+    placeholder: placeholder,
     testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
-    onBlur: (name, value) => {
-      onBlurForTimeControl({
-        name,
-        value,
-        controlProps: props
-      });
-    },
-    // Dont use handleChange in the onChange event, use the keyPress or onBlur.
-    // If you use it onChange along with keyPress event it will cause a
-    // side effect that causes the validation to render when it shouldnt.
-    onChange: (name, value) => {},
+    name: textAreaName,
+    width: width,
+    // Note: Paul Jan-09-2023. The latest ui-component come with the maxCount. We need to uncomment the following line when the component is updated
+    // maxCount={schema.maxLength || 256}
     onKeyPress: (name, value, key) => {
-      onKeyPressForTimeControl({
+      const newValue = autoCapitalize ? value.toUpperCase() : value;
+      if (value.length === 0 || required && errorsFormInput.length === 0 && value.length > 0) {
+        onKeyPressForTextControl({
+          name,
+          value: newValue,
+          key,
+          controlProps: props
+        });
+      }
+      onChangeForInputControl({
         name,
-        value,
-        key,
+        value: newValue,
         controlProps: props
       });
+    },
+    onChange: (name, value) => {
+      // this is not triggered unless you tab out
     }
-  }, (_g = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _g === void 0 ? void 0 : _g.componentProps));
+  }, (_l = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _l === void 0 ? void 0 : _l.componentProps));
+  return txtAreaComponent;
 };
-const GoATimeControl = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
-  input: GoATimeInput
+const MultiLineTextControlInput = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
+  input: MultiLineText
 }));
-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$3 = functionUncurryThis;
-var requireObjectCoercible$1 = requireObjectCoercible$b;
-var toString$1 = toString$e;
-var whitespaces$1 = whitespaces$2;
-
-var replace = uncurryThis$3(''.replace);
-var ltrim = RegExp('^[' + whitespaces$1 + ']+');
-var rtrim = RegExp('(^|[^' + whitespaces$1 + '])[' + whitespaces$1 + ']+$');
+const MultiLineTextControlTester = rankWith(3, and(isStringControl, optionIs('multi', true)));
+const MultiLineTextControl = withJsonFormsControlProps(MultiLineTextControlInput);
 
-// `String.prototype.{ trim, trimStart, trimEnd, trimLeft, trimRight }` methods implementation
-var createMethod$1 = function (TYPE) {
-  return function ($this) {
-    var string = toString$1(requireObjectCoercible$1($this));
-    if (TYPE & 1) string = replace(string, ltrim, '');
-    if (TYPE & 2) string = replace(string, rtrim, '$1');
-    return string;
-  };
+// Used locally for callout presentation
+const callout = props => {
+  var _a;
+  const componentProps = Object.assign({
+    size: 'medium',
+    type: 'emergency',
+    message: 'unknown'
+  }, props);
+  const testid = (_a = componentProps.message) === null || _a === void 0 ? void 0 : _a.replace(/\s/g, '');
+  return jsx(GoACallout, Object.assign({}, componentProps, {
+    "data-testid": testid,
+    children: componentProps.message
+  }));
 };
-
-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)
+const CalloutControl = props => {
+  var _a, _b;
+  return callout(((_b = (_a = props === null || props === void 0 ? void 0 : props.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.componentProps) || {});
 };
+const GoACalloutControlTester = rankWith(1, uiTypeIs('Callout'));
+var GoACalloutControl = withJsonFormsRendererProps(CalloutControl);
 
-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);
+const errMalformedDate = (scope, type) => {
+  return `${type}-date for variable '${scope}' has an incorrect format.`;
+};
+const isValidDateFormat = date => {
+  const standardized = standardizeDate(date);
+  return standardized !== undefined;
+};
+const invalidDateFormat = (scope, type) => {
+  return callout({
+    message: errMalformedDate(scope, type)
   });
 };
-
-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 _$8 = t => t,
-  _t$8,
-  _t2$5,
-  _t3$4,
-  _t4$3;
-const GoADropdownTextbox = styled.div(_t$8 || (_t$8 = _$8`
-  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 = _$8`
-  position: relative;
-  display: ${0};
-`), p => !(p === null || p === void 0 ? void 0 : p.isOpen) && 'none');
-const GoADropdownListContainer = styled.div(_t3$4 || (_t3$4 = _$8`
-  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$3 || (_t4$3 = _$8`
-  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};
+// eslint-disable-next-line
+const reformatDateProps = props => {
+  const newProps = Object.assign({}, props);
+  if (newProps) {
+    if ((newProps === null || newProps === void 0 ? void 0 : newProps.min) && typeof newProps.min === 'string') {
+      newProps.min = standardizeDate(newProps.min);
+    }
+    if ((newProps === null || newProps === void 0 ? void 0 : newProps.max) && typeof newProps.max === 'string') {
+      newProps.max = standardizeDate(newProps.max);
+    }
   }
-  &:focus-within {
-    caret-color: transparent;
-    color: #fff !important;
-    background-color: ${0};
+  return newProps;
+};
+const GoADateInput = props => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+  const {
+    data,
+    config,
+    id,
+    enabled,
+    uischema,
+    path,
+    handleChange,
+    label
+  } = props;
+  const appliedUiSchemaOptions = Object.assign(Object.assign({}, config), uischema === null || uischema === void 0 ? void 0 : uischema.options);
+  const readOnly = (_c = (_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.readOnly) !== null && _c !== void 0 ? _c : false;
+  const width = (_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.width) !== null && _f !== void 0 ? _f : '100%';
+  const minDate = (_h = (_g = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _g === void 0 ? void 0 : _g.componentProps) === null || _h === void 0 ? void 0 : _h.min;
+  if (minDate && !isValidDateFormat(minDate)) {
+    return invalidDateFormat(uischema.scope, 'Min');
   }
-  .dropDownListItem:focus-visible {
-    caret-color: transparent;
-    outline: none !important;
-    color: ${0};
+  const maxDate = (_k = (_j = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _j === void 0 ? void 0 : _j.componentProps) === null || _k === void 0 ? void 0 : _k.max;
+  if (maxDate && !isValidDateFormat(maxDate)) {
+    return invalidDateFormat(uischema.scope, 'Max');
   }
-`), 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_KEY || keyCode === ALT_KEY) return false;
-  const regex = new RegExp(/^[a-zA-Z0-9!%$@.#?\-_]+$/);
-  return regex.test(keyCode);
+  return jsx(GoAInputDate, Object.assign({
+    error: checkFieldValidity(props).length > 0,
+    width: width,
+    name: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
+    value: standardizeDate(data) || '',
+    testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
+    disabled: !enabled,
+    readonly: readOnly,
+    onChange: (name, value) => {
+      onChangeForDateControl({
+        name,
+        value,
+        controlProps: props
+      });
+    },
+    onKeyPress: (name, value, key) => {
+      onKeyPressForDateControl({
+        name,
+        value,
+        key,
+        controlProps: props
+      });
+    },
+    onBlur: (name, value) => {
+      onBlurForDateControl({
+        name,
+        value,
+        controlProps: props
+      });
+    }
+  }, reformatDateProps((_l = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _l === void 0 ? void 0 : _l.componentProps)));
 };
-const Dropdown = props => {
-  var _a;
+const GoADateControl = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
+  input: GoADateInput
+}));
+const GoADateControlTester = rankWith(4, isDateControl);
+const GoAInputDateControl = withJsonFormsControlProps(GoADateControl);
+
+const GoANumberInput = props => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  // eslint-disable-next-line
   const {
-    label,
-    selected,
-    onChange,
-    optionListMaxHeight,
-    isAutoCompletion,
+    data,
+    config,
+    id,
     enabled,
-    id
+    uischema,
+    isValid,
+    path,
+    handleChange,
+    schema,
+    label
   } = 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}`;
-  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('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;
+  const appliedUiSchemaOptions = Object.assign(Object.assign({}, config), uischema === null || uischema === void 0 ? void 0 : uischema.options);
+  const placeholder = (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.placeholder) || (schema === null || schema === void 0 ? void 0 : schema.description) || '';
+  const InputValue = data && data !== undefined ? data : '';
+  const clonedSchema = JSON.parse(JSON.stringify(schema));
+  const StepValue = clonedSchema.multipleOf ? clonedSchema.multipleOf : 0.01;
+  const MinValue = clonedSchema.minimum ? clonedSchema.minimum : '';
+  const MaxValue = clonedSchema.exclusiveMaximum ? clonedSchema.exclusiveMaximum : '';
+  const readOnly = (_c = (_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.readOnly) !== null && _c !== void 0 ? _c : false;
+  const width = (_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.width) !== null && _f !== void 0 ? _f : '100%';
+  const errorsFormInput = checkFieldValidity(props);
+  return jsx(GoAInput, Object.assign({
+    type: "number",
+    error: errorsFormInput.length > 0,
+    disabled: !enabled,
+    readonly: readOnly,
+    value: InputValue,
+    placeholder: placeholder,
+    step: StepValue,
+    min: MinValue,
+    max: MaxValue,
+    width: width,
+    name: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
+    testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
+    onKeyPress: (name, value, key) => {
+      onKeyPressNumericControl({
+        name,
+        value,
+        key,
+        controlProps: props
+      });
+    },
+    onBlur: (name, value) => {
+      onBlurForNumericControl({
+        name,
+        value,
+        controlProps: props
+      });
+    },
+    onChange: (name, value) => {
+      onChangeForNumericControl({
+        name,
+        value,
+        controlProps: props
       });
-      setItems(selectedItems);
-    }
-    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();
-      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 => {
-    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);
-      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 && !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) => {
-    var _a, _b, _c, _d;
-    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) {
-      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;
-      }
+  }, (_g = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _g === void 0 ? void 0 : _g.componentProps));
+};
+const GoANumberControl = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
+  input: GoANumberInput
+}));
+const GoANumberControlTester = rankWith(2, isNumberControl);
+const GoAInputNumberControl = withJsonFormsControlProps(GoANumberControl);
+
+const GoAInputInteger = props => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  // eslint-disable-next-line
+  const {
+    data,
+    config,
+    id,
+    enabled,
+    uischema,
+    isValid,
+    path,
+    handleChange,
+    schema,
+    label
+  } = props;
+  const appliedUiSchemaOptions = Object.assign(Object.assign({}, config), uischema === null || uischema === void 0 ? void 0 : uischema.options);
+  const placeholder = (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.placeholder) || (schema === null || schema === void 0 ? void 0 : schema.description) || '';
+  const InputValue = data && data !== undefined ? data : '';
+  const clonedSchema = JSON.parse(JSON.stringify(schema));
+  const StepValue = clonedSchema.multipleOf ? clonedSchema.multipleOf : 0;
+  const MinValue = clonedSchema.minimum ? clonedSchema.minimum : '';
+  const MaxValue = clonedSchema.exclusiveMaximum ? clonedSchema.exclusiveMaximum : '';
+  const readOnly = (_c = (_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.readOnly) !== null && _c !== void 0 ? _c : false;
+  const width = (_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.width) !== null && _f !== void 0 ? _f : '100%';
+  const errorsFormInput = checkFieldValidity(props);
+  return jsx(GoAInput, Object.assign({
+    type: "number",
+    error: errorsFormInput.length > 0,
+    width: width,
+    disabled: !enabled,
+    readonly: readOnly,
+    value: InputValue,
+    step: StepValue,
+    min: MinValue,
+    max: MaxValue,
+    placeholder: placeholder,
+    name: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
+    testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
+    onKeyPress: (name, value, key) => {
+      onKeyPressNumericControl({
+        name,
+        value,
+        key,
+        controlProps: props
+      });
+    },
+    onBlur: (name, value) => {
+      onBlurForNumericControl({
+        name,
+        value,
+        controlProps: props
+      });
+    },
+    onChange: (name, value) => {
+      onChangeForNumericControl({
+        name,
+        value,
+        controlProps: props
+      });
     }
-    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();
-      }
+  }, (_g = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _g === void 0 ? void 0 : _g.componentProps));
+};
+const GoAIntegerControl = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
+  input: GoAInputInteger
+}));
+const GoAIntegerControlTester = rankWith(2, isIntegerControl);
+const GoAInputIntegerControl = withJsonFormsControlProps(GoAIntegerControl);
+
+const GoADateTimeInput = props => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  // eslint-disable-next-line
+  const {
+    data,
+    config,
+    id,
+    enabled,
+    uischema,
+    isValid,
+    path,
+    errors,
+    handleChange,
+    schema,
+    label
+  } = props;
+  const appliedUiSchemaOptions = Object.assign(Object.assign({}, config), uischema === null || uischema === void 0 ? void 0 : uischema.options);
+  const readOnly = (_c = (_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.readOnly) !== null && _c !== void 0 ? _c : false;
+  const width = (_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.width) !== null && _f !== void 0 ? _f : '100%';
+  return jsx(GoAInputDateTime, Object.assign({
+    error: checkFieldValidity(props).length > 0,
+    width: width,
+    name: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
+    value: data ? new Date(data).toISOString() : '',
+    testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
+    disabled: !enabled,
+    readonly: readOnly,
+    onChange: (name, value) => {
+      onChangeForDateTimeControl({
+        name,
+        value,
+        controlProps: props
+      });
+    },
+    onKeyPress: (name, value, key) => {
+      onKeyPressForDateControl({
+        name,
+        value,
+        key,
+        controlProps: props
+      });
+    },
+    onBlur: (name, value) => {
+      onBlurForDateControl({
+        name,
+        value,
+        controlProps: props
+      });
     }
-    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);
-      }
+  }, (_g = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _g === void 0 ? void 0 : _g.componentProps));
+};
+const GoADateTimeControl = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
+  input: GoADateTimeInput
+}));
+const GoADateTimeControlTester = rankWith(2, isDateTimeControl);
+const GoAInputDateTimeControl = withJsonFormsControlProps(GoADateTimeControl);
+
+const GoATimeInput = props => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  // eslint-disable-next-line
+  const {
+    data,
+    config,
+    id,
+    enabled,
+    uischema,
+    isValid,
+    path,
+    handleChange,
+    schema,
+    label
+  } = props;
+  const appliedUiSchemaOptions = Object.assign(Object.assign({}, config), uischema === null || uischema === void 0 ? void 0 : uischema.options);
+  (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.placeholder) || (schema === null || schema === void 0 ? void 0 : schema.description) || '';
+  const readOnly = (_c = (_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.readOnly) !== null && _c !== void 0 ? _c : false;
+  const errorsFormInput = checkFieldValidity(props);
+  const width = (_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 : '100%';
+  return jsx(GoAInputTime, Object.assign({
+    error: errorsFormInput.length > 0,
+    name: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
+    value: data,
+    step: 1,
+    width: width,
+    disabled: !enabled,
+    readonly: readOnly,
+    testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
+    onBlur: (name, value) => {
+      onBlurForTimeControl({
+        name,
+        value,
+        controlProps: props
+      });
+    },
+    // Dont use handleChange in the onChange event, use the keyPress or onBlur.
+    // If you use it onChange along with keyPress event it will cause a
+    // side effect that causes the validation to render when it shouldnt.
+    onChange: (name, value) => {},
+    onKeyPress: (name, value, key) => {
+      onKeyPressForTimeControl({
+        name,
+        value,
+        key,
+        controlProps: props
+      });
     }
-  };
-  return jsxs("div", {
-    "data-testid": id,
-    children: [jsx(GoADropdownTextbox, {
-      isOpen: isOpen,
-      onClick: e => {
-        setIsOpen(previousIsOpen => !previousIsOpen);
-      },
-      children: jsx(GoAInput, {
-        disabled: !enabled,
-        name: `dropdown-${label}`,
-        width: "100%",
-        value: inputText,
-        testId: `${id}-input`,
-        id: `${id}-input`,
-        readonly: !isAutoCompletion,
-        onChange: (name, value) => {
-          if (isAutoCompletion) {
-            setInputText(value);
-            const selectedItems = props.items.filter(item => {
-              return item.label.includes(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: item.label
-            }, `${PREFIX}-${label}-${item.value}`)
-          }, `${PREFIX}-option-${label}-${item.value}`);
-        })
-      }, `${PREFIX}-dropDownList-${label}`)
-    }, `${PREFIX}-dropDownListContainerWrapper-${label}`)]
-  }, id);
+  }, (_g = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _g === void 0 ? void 0 : _g.componentProps));
 };
+const GoATimeControl = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
+  input: GoATimeInput
+}));
+const GoATimeControlTester = rankWith(4, isTimeControl);
+const GoAInputTimeControl = withJsonFormsControlProps(GoATimeControl);
 
 function fetchRegisterConfigFromOptions(options) {
   if (!(options === null || options === void 0 ? void 0 : options.url) && !(options === null || options === void 0 ? void 0 : options.urn)) return undefined;
@@ -5353,7 +5379,7 @@ const ReviewItemSection = styled.div(_t2$4 || (_t2$4 = _$5`
   border-radius: 5px;
 
   .element-style {
-    max-width: 1439px;
+    max-width: 1600px;
   }
 `));
 const ReviewItemHeader = styled.div(_t3$3 || (_t3$3 = _$5`
@@ -6041,7 +6067,7 @@ const JsonFormsStepperContextProvider = ({
         }
       });
     }
-  }, [StepperProps.uischema]);
+  }, [JSON.stringify(StepperProps.uischema)]);
   return jsx(JsonFormsStepperContext.Provider, {
     value: context,
     children: children
@@ -6678,7 +6704,7 @@ const NonEmptyCellStyle = styled.div(_t2$2 || (_t2$2 = _$2`
 const ToolBarHeader = styled.div(_t3$1 || (_t3$1 = _$2`
   margin-bottom: var(--goa-space-l);
 `));
-const ObjectArrayTitle = styled.h2(_t4$1 || (_t4$1 = _$2`
+const ObjectArrayTitle = styled.h3(_t4$1 || (_t4$1 = _$2`
   margin-bottom: var(--goa-space-l);
 `));
 const TextCenter = styled.div(_t5$1 || (_t5$1 = _$2`
@@ -8397,7 +8423,6 @@ const AddressLookUpControl = props => {
   const formCtx = useContext(JsonFormContext);
   const formHost = formCtx === null || formCtx === void 0 ? void 0 : formCtx.formUrl;
   const formUrl = `${formHost}/${ADDRESS_PATH}`;
-  const ctx = useJsonForms();
   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 : '';
@@ -8451,23 +8476,6 @@ const AddressLookUpControl = props => {
       showLabel: false
     }));
   };
-  useEffect(() => {
-    var _a;
-    if ((_a = ctx.core) === null || _a === void 0 ? void 0 : _a.ajv) {
-      // eslint-disable-next-line
-      const newError = [];
-      Object.keys(errors).forEach(err => {
-        newError.push({
-          instancePath: path,
-          message: err,
-          schemaPath: '',
-          keyword: '',
-          params: {}
-        });
-      });
-      ctx.core.ajv.errors = newError;
-    }
-  }, [errors, ctx, path]);
   useEffect(() => {
     const fetchSuggestions = () => __awaiter(void 0, void 0, void 0, function* () {
       if (searchTerm.length > 2 && dropdownSelected === false) {