@abgov/jsonforms-components 1.32.1 → 1.33.0

package/index.esm.js

@@ -1,11 +1,12 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import React, { createContext, useContext, useReducer, useMemo, useEffect, useState, useCallback, useRef } from 'react';
-import { GoAFormItem, GoAInput, GoATextArea, GoACallout, GoAInputDate, GoAInputDateTime, GoAInputTime, GoADropdown, GoADropdownItem, GoARadioGroup, GoARadioItem, GoACheckbox, GoAGrid, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAModal, GoAButtonGroup, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoADetails } from '@abgov/react-components';
+import { GoAFormItem, GoAInput, GoATextArea, GoACallout, GoAInputDate, GoAInputDateTime, GoAInputTime, GoARadioGroup, GoARadioItem, GoACheckbox, GoAGrid, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAModal, GoAButtonGroup, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoADetails } from '@abgov/react-components';
 import styled from 'styled-components';
 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, isEnabled, deriveLabelForUISchemaElement, schemaTypeIs, formatIs, createDefaultValue, Paths, or, isObjectArrayControl, isPrimitiveArrayControl, hasType, isControl, isCategorization, isLayout } from '@jsonforms/core';
 import { withJsonFormsControlProps, withJsonFormsRendererProps, withJsonFormsEnumProps, withTranslateProps, useJsonForms, JsonFormsDispatch, withJsonFormsLayoutProps, withJsonFormsArrayLayoutProps, withJsonFormsCellProps } from '@jsonforms/react';
+import { isEqual } from 'lodash';
 import merge from 'lodash/merge';
 import isEmpty$1 from 'lodash/isEmpty';
 import range from 'lodash/range';
@@ -1627,9 +1628,9 @@ $$h({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign }
   assign: assign
 });
 
-let _$7 = t => t,
-  _t$7;
-const FormFieldWrapper = styled.div(_t$7 || (_t$7 = _$7`
+let _$8 = t => t,
+  _t$8;
+const FormFieldWrapper = styled.div(_t$8 || (_t$8 = _$8`
   margin-bottom: var(--goa-space-l);
 `));
 
@@ -1934,16 +1935,55 @@ $$e({ target: 'RegExp', proto: true, forced: !DELEGATES_TO_EXEC }, {
   }
 });
 
+var call$b = functionCall;
+var hasOwn$4 = hasOwnProperty_1;
+var isPrototypeOf$5 = objectIsPrototypeOf;
+var regExpFlags = regexpFlags$1;
+
+var RegExpPrototype$4 = RegExp.prototype;
+
+var regexpGetFlags = function (R) {
+  var flags = R.flags;
+  return flags === undefined && !('flags' in RegExpPrototype$4) && !hasOwn$4(R, 'flags') && isPrototypeOf$5(RegExpPrototype$4, R)
+    ? call$b(regExpFlags, R) : flags;
+};
+
+var PROPER_FUNCTION_NAME = functionName.PROPER;
+var defineBuiltIn$4 = defineBuiltIn$8;
+var anObject$7 = anObject$e;
+var $toString = toString$a;
+var fails$b = fails$q;
+var getRegExpFlags$1 = regexpGetFlags;
+
+var TO_STRING = 'toString';
+var RegExpPrototype$3 = RegExp.prototype;
+var nativeToString = RegExpPrototype$3[TO_STRING];
+
+var NOT_GENERIC = fails$b(function () { return nativeToString.call({ source: 'a', flags: 'b' }) !== '/a/b'; });
+// FF44- RegExp#toString has a wrong name
+var INCORRECT_NAME = PROPER_FUNCTION_NAME && nativeToString.name !== TO_STRING;
+
+// `RegExp.prototype.toString` method
+// https://tc39.es/ecma262/#sec-regexp.prototype.tostring
+if (NOT_GENERIC || INCORRECT_NAME) {
+  defineBuiltIn$4(RegExpPrototype$3, TO_STRING, function toString() {
+    var R = anObject$7(this);
+    var pattern = $toString(R.source);
+    var flags = $toString(getRegExpFlags$1(R));
+    return '/' + pattern + '/' + flags;
+  }, { unsafe: true });
+}
+
 var $$d = _export;
 var uncurryThis$d = functionUncurryThis;
 var requireObjectCoercible$3 = requireObjectCoercible$7;
 var toIntegerOrInfinity$2 = toIntegerOrInfinity$6;
 var toString$7 = toString$a;
-var fails$b = fails$q;
+var fails$a = fails$q;
 
 var charAt$5 = uncurryThis$d(''.charAt);
 
-var FORCED$3 = fails$b(function () {
+var FORCED$3 = fails$a(function () {
   // eslint-disable-next-line es/no-array-string-prototype-at -- safe
   return '𠮷'.at(-2) !== '\uD842';
 });
@@ -1964,36 +2004,36 @@ var NATIVE_BIND$1 = functionBindNative;
 
 var FunctionPrototype = Function.prototype;
 var apply$4 = FunctionPrototype.apply;
-var call$b = FunctionPrototype.call;
+var call$a = FunctionPrototype.call;
 
 // eslint-disable-next-line es/no-reflect -- safe
-var functionApply = typeof Reflect == 'object' && Reflect.apply || (NATIVE_BIND$1 ? call$b.bind(apply$4) : function () {
-  return call$b.apply(apply$4, arguments);
+var functionApply = typeof Reflect == 'object' && Reflect.apply || (NATIVE_BIND$1 ? call$a.bind(apply$4) : function () {
+  return call$a.apply(apply$4, arguments);
 });
 
 // TODO: Remove from `core-js@4` since it's moved to entry points
 
-var call$a = functionCall;
-var defineBuiltIn$4 = defineBuiltIn$8;
+var call$9 = functionCall;
+var defineBuiltIn$3 = defineBuiltIn$8;
 var regexpExec$1 = regexpExec$2;
-var fails$a = fails$q;
+var fails$9 = fails$q;
 var wellKnownSymbol$a = wellKnownSymbol$j;
 var createNonEnumerableProperty$4 = createNonEnumerableProperty$9;
 
 var SPECIES$3 = wellKnownSymbol$a('species');
-var RegExpPrototype$4 = RegExp.prototype;
+var RegExpPrototype$2 = RegExp.prototype;
 
 var fixRegexpWellKnownSymbolLogic = function (KEY, exec, FORCED, SHAM) {
   var SYMBOL = wellKnownSymbol$a(KEY);
 
-  var DELEGATES_TO_SYMBOL = !fails$a(function () {
+  var DELEGATES_TO_SYMBOL = !fails$9(function () {
     // String methods call symbol-named RegExp methods
     var O = {};
     O[SYMBOL] = function () { return 7; };
     return ''[KEY](O) !== 7;
   });
 
-  var DELEGATES_TO_EXEC = DELEGATES_TO_SYMBOL && !fails$a(function () {
+  var DELEGATES_TO_EXEC = DELEGATES_TO_SYMBOL && !fails$9(function () {
     // Symbol-named RegExp methods call .exec
     var execCalled = false;
     var re = /a/;
@@ -2028,23 +2068,23 @@ var fixRegexpWellKnownSymbolLogic = function (KEY, exec, FORCED, SHAM) {
     var nativeRegExpMethod = /./[SYMBOL];
     var methods = exec(SYMBOL, ''[KEY], function (nativeMethod, regexp, str, arg2, forceStringMethod) {
       var $exec = regexp.exec;
-      if ($exec === regexpExec$1 || $exec === RegExpPrototype$4.exec) {
+      if ($exec === regexpExec$1 || $exec === RegExpPrototype$2.exec) {
         if (DELEGATES_TO_SYMBOL && !forceStringMethod) {
           // The native String method already delegates to @@method (this
           // polyfilled function), leasing to infinite recursion.
           // We avoid it by directly calling the native @@method method.
-          return { done: true, value: call$a(nativeRegExpMethod, regexp, str, arg2) };
+          return { done: true, value: call$9(nativeRegExpMethod, regexp, str, arg2) };
         }
-        return { done: true, value: call$a(nativeMethod, str, regexp, arg2) };
+        return { done: true, value: call$9(nativeMethod, str, regexp, arg2) };
       }
       return { done: false };
     });
 
-    defineBuiltIn$4(String.prototype, KEY, methods[0]);
-    defineBuiltIn$4(RegExpPrototype$4, SYMBOL, methods[1]);
+    defineBuiltIn$3(String.prototype, KEY, methods[0]);
+    defineBuiltIn$3(RegExpPrototype$2, SYMBOL, methods[1]);
   }
 
-  if (SHAM) createNonEnumerableProperty$4(RegExpPrototype$4[SYMBOL], 'sham', true);
+  if (SHAM) createNonEnumerableProperty$4(RegExpPrototype$2[SYMBOL], 'sham', true);
 };
 
 var uncurryThis$c = functionUncurryThis;
@@ -2138,8 +2178,8 @@ var getSubstitution$1 = function (matched, str, position, captures, namedCapture
   });
 };
 
-var call$9 = functionCall;
-var anObject$7 = anObject$e;
+var call$8 = functionCall;
+var anObject$6 = anObject$e;
 var isCallable$a = isCallable$q;
 var classof$7 = classofRaw$2;
 var regexpExec = regexpExec$2;
@@ -2151,20 +2191,20 @@ var $TypeError$b = TypeError;
 var regexpExecAbstract = function (R, S) {
   var exec = R.exec;
   if (isCallable$a(exec)) {
-    var result = call$9(exec, R, S);
-    if (result !== null) anObject$7(result);
+    var result = call$8(exec, R, S);
+    if (result !== null) anObject$6(result);
     return result;
   }
-  if (classof$7(R) === 'RegExp') return call$9(regexpExec, R, S);
+  if (classof$7(R) === 'RegExp') return call$8(regexpExec, R, S);
   throw new $TypeError$b('RegExp#exec called on incompatible receiver');
 };
 
 var apply$3 = functionApply;
-var call$8 = functionCall;
+var call$7 = functionCall;
 var uncurryThis$a = functionUncurryThis;
 var fixRegExpWellKnownSymbolLogic = fixRegexpWellKnownSymbolLogic;
-var fails$9 = fails$q;
-var anObject$6 = anObject$e;
+var fails$8 = fails$q;
+var anObject$5 = anObject$e;
 var isCallable$9 = isCallable$q;
 var isNullOrUndefined$2 = isNullOrUndefined$5;
 var toIntegerOrInfinity = toIntegerOrInfinity$6;
@@ -2204,7 +2244,7 @@ var REGEXP_REPLACE_SUBSTITUTES_UNDEFINED_CAPTURE = (function () {
   return false;
 })();
 
-var REPLACE_SUPPORTS_NAMED_GROUPS = !fails$9(function () {
+var REPLACE_SUPPORTS_NAMED_GROUPS = !fails$8(function () {
   var re = /./;
   re.exec = function () {
     var result = [];
@@ -2226,13 +2266,13 @@ fixRegExpWellKnownSymbolLogic('replace', function (_, nativeReplace, maybeCallNa
       var O = requireObjectCoercible$1(this);
       var replacer = isNullOrUndefined$2(searchValue) ? undefined : getMethod$2(searchValue, REPLACE);
       return replacer
-        ? call$8(replacer, searchValue, O, replaceValue)
-        : call$8(nativeReplace, toString$5(O), searchValue, replaceValue);
+        ? call$7(replacer, searchValue, O, replaceValue)
+        : call$7(nativeReplace, toString$5(O), searchValue, replaceValue);
     },
     // `RegExp.prototype[@@replace]` method
     // https://tc39.es/ecma262/#sec-regexp.prototype-@@replace
     function (string, replaceValue) {
-      var rx = anObject$6(this);
+      var rx = anObject$5(this);
       var S = toString$5(string);
 
       if (
@@ -2347,6 +2387,24 @@ const isEmptyBoolean = (schema, data) => {
 const isEmptyNumber = (schema, data) => {
   return data === '' || data === undefined || data === null || (schema.type === 'number' || schema.type === 'integer') && isNaN(+data);
 };
+const validateSinWithLuhn = input => {
+  const cardNumber = input.toString();
+  const digits = cardNumber.replace(/\D/g, '').split('').map(Number);
+  let sum = 0;
+  let isSecond = false;
+  for (let i = digits.length - 1; i >= 0; i--) {
+    let digit = digits[i];
+    if (isSecond) {
+      digit *= 2;
+      if (digit > 9) {
+        digit -= 9;
+      }
+    }
+    sum += digit;
+    isSecond = !isSecond;
+  }
+  return sum % 10 === 0;
+};
 /**
  * Check if a required, defined input value is valid. Returns an appropriate
  * error message if not.
@@ -2363,6 +2421,12 @@ const checkFieldValidity = props => {
     schema
   } = props;
   const labelToUpdate = getLabelText(uischema.scope, label);
+  const extraSchema = schema;
+  if (extraSchema && data && (extraSchema === null || extraSchema === void 0 ? void 0 : extraSchema.title) === 'Social insurance number') {
+    if (!validateSinWithLuhn(data)) {
+      return extraSchema.errorMessage;
+    }
+  }
   if (required) {
     if (data === undefined) return '';
     if (schema) {
@@ -2717,16 +2781,16 @@ const onChangeForNumericControl = props => {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const onChangeForCheckboxData = (data, name, value) => data ? !value ? data === null || data === void 0 ? void 0 : data.filter(item => item !== name) : [...data, name] : [name];
 
-let _$6 = t => t,
-  _t$6,
-  _t2$3;
-styled.div(_t$6 || (_t$6 = _$6`
+let _$7 = t => t,
+  _t$7,
+  _t2$4;
+styled.div(_t$7 || (_t$7 = _$7`
   height: 70vh;
   overflow-y: auto;
   padding-left: var(--goa-space-2xs);
   padding-right: var(--goa-space-2xs);
 `));
-const Visible = styled.div(_t2$3 || (_t2$3 = _$6`
+const Visible = styled.div(_t2$4 || (_t2$4 = _$7`
   display: ${0};
 `), p => p.visible ? 'initial' : 'none');
 
@@ -2784,9 +2848,9 @@ var toObject$1 = toObject$7;
 var lengthOfArrayLike$2 = lengthOfArrayLike$5;
 var setArrayLength = arraySetLength;
 var doesNotExceedSafeInteger = doesNotExceedSafeInteger$1;
-var fails$8 = fails$q;
+var fails$7 = fails$q;
 
-var INCORRECT_TO_LENGTH = fails$8(function () {
+var INCORRECT_TO_LENGTH = fails$7(function () {
   return [].push.call({ length: 0x100000000 }, 1) !== 4294967297;
 });
 
@@ -2858,11 +2922,11 @@ function registerReducer(state, action) {
 
 var $$b = _export;
 var $includes = arrayIncludes.includes;
-var fails$7 = fails$q;
+var fails$6 = fails$q;
 var addToUnscopables = addToUnscopables$3;
 
 // FF99+ bug
-var BROKEN_ON_SPARSE = fails$7(function () {
+var BROKEN_ON_SPARSE = fails$6(function () {
   // eslint-disable-next-line es/no-array-prototype-includes -- detection
   return !Array(1).includes();
 });
@@ -2915,9 +2979,9 @@ var getJsonReplacerFunction = function (replacer) {
 var $$a = _export;
 var getBuiltIn$5 = getBuiltIn$9;
 var apply$2 = functionApply;
-var call$7 = functionCall;
+var call$6 = functionCall;
 var uncurryThis$7 = functionUncurryThis;
-var fails$6 = fails$q;
+var fails$5 = fails$q;
 var isCallable$7 = isCallable$q;
 var isSymbol = isSymbol$3;
 var arraySlice$1 = arraySlice$2;
@@ -2936,7 +3000,7 @@ var tester = /[\uD800-\uDFFF]/g;
 var low = /^[\uD800-\uDBFF]$/;
 var hi = /^[\uDC00-\uDFFF]$/;
 
-var WRONG_SYMBOLS_CONVERSION = !NATIVE_SYMBOL$1 || fails$6(function () {
+var WRONG_SYMBOLS_CONVERSION = !NATIVE_SYMBOL$1 || fails$5(function () {
   var symbol = getBuiltIn$5('Symbol')('stringify detection');
   // MS Edge converts symbol values to JSON as {}
   return $stringify([symbol]) !== '[null]'
@@ -2947,7 +3011,7 @@ var WRONG_SYMBOLS_CONVERSION = !NATIVE_SYMBOL$1 || fails$6(function () {
 });
 
 // https://github.com/tc39/proposal-well-formed-stringify
-var ILL_FORMED_UNICODE = fails$6(function () {
+var ILL_FORMED_UNICODE = fails$5(function () {
   return $stringify('\uDF06\uD834') !== '"\\udf06\\ud834"'
     || $stringify('\uDEAD') !== '"\\udead"';
 });
@@ -2958,7 +3022,7 @@ var stringifyWithSymbolsFix = function (it, replacer) {
   if (!isCallable$7($replacer) && (it === undefined || isSymbol(it))) return; // IE8 returns string on undefined
   args[1] = function (key, value) {
     // some old implementations (like WebKit) could pass numbers as keys
-    if (isCallable$7($replacer)) value = call$7($replacer, this, $String(key), value);
+    if (isCallable$7($replacer)) value = call$6($replacer, this, $String(key), value);
     if (!isSymbol(value)) return value;
   };
   return apply$2($stringify, null, args);
@@ -2985,45 +3049,6 @@ if ($stringify) {
   });
 }
 
-var call$6 = functionCall;
-var hasOwn$4 = hasOwnProperty_1;
-var isPrototypeOf$5 = objectIsPrototypeOf;
-var regExpFlags = regexpFlags$1;
-
-var RegExpPrototype$3 = RegExp.prototype;
-
-var regexpGetFlags = function (R) {
-  var flags = R.flags;
-  return flags === undefined && !('flags' in RegExpPrototype$3) && !hasOwn$4(R, 'flags') && isPrototypeOf$5(RegExpPrototype$3, R)
-    ? call$6(regExpFlags, R) : flags;
-};
-
-var PROPER_FUNCTION_NAME = functionName.PROPER;
-var defineBuiltIn$3 = defineBuiltIn$8;
-var anObject$5 = anObject$e;
-var $toString = toString$a;
-var fails$5 = fails$q;
-var getRegExpFlags$1 = regexpGetFlags;
-
-var TO_STRING = 'toString';
-var RegExpPrototype$2 = RegExp.prototype;
-var nativeToString = RegExpPrototype$2[TO_STRING];
-
-var NOT_GENERIC = fails$5(function () { return nativeToString.call({ source: 'a', flags: 'b' }) !== '/a/b'; });
-// FF44- RegExp#toString has a wrong name
-var INCORRECT_NAME = PROPER_FUNCTION_NAME && nativeToString.name !== TO_STRING;
-
-// `RegExp.prototype.toString` method
-// https://tc39.es/ecma262/#sec-regexp.prototype.tostring
-if (NOT_GENERIC || INCORRECT_NAME) {
-  defineBuiltIn$3(RegExpPrototype$2, TO_STRING, function toString() {
-    var R = anObject$5(this);
-    var pattern = $toString(R.source);
-    var flags = $toString(getRegExpFlags$1(R));
-    return '/' + pattern + '/' + flags;
-  }, { unsafe: true });
-}
-
 var isObject$4 = isObject$d;
 var classof$4 = classofRaw$2;
 var wellKnownSymbol$8 = wellKnownSymbol$j;
@@ -4211,13 +4236,127 @@ const GoATimeControl = props => jsx(GoAInputBaseControl, Object.assign({}, props
 const GoATimeControlTester = rankWith(4, isTimeControl);
 const GoAInputTimeControl = withJsonFormsControlProps(GoATimeControl);
 
+let _$6 = t => t,
+  _t$6,
+  _t2$3,
+  _t3$3,
+  _t4$2;
+styled.div(_t$6 || (_t$6 = _$6`
+  text-overflow: ellipsis;
+  overflow: hidden;
+  min-height: 43px;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 8px;
+  padding-right: 8px;
+  border-radius: 4px;
+  border: 1px solid #666;
+  font-size: 18px;
+  font-weight: 400;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  box-shadow: ${0};
+`), p => p.isOpen ? `0 0 0 3px #feba35` : '');
+const GoADropdownListContainerWrapper = styled.div(_t2$3 || (_t2$3 = _$6`
+  position: relative;
+  display: ${0};
+`), p => !(p === null || p === void 0 ? void 0 : p.isOpen) && 'none');
+const GoADropdownListContainer = styled.div(_t3$3 || (_t3$3 = _$6`
+  border: solid 1px #dcdcdc;
+  border-radius: 4px;
+  background: #fff;
+  padding: 0;
+  margin-top: 3px;
+  width: 100%;
+  overflow-y: auto;
+  z-index: 1000;
+  position: absolute;
+  line-height: 2rem;
+  max-height: ${0};
+`), p => p.optionListMaxHeight || '272px');
+const GoADropdownListOption = styled.div(_t4$2 || (_t4$2 = _$6`
+  padding: 4px 12px;
+  text-overflow: ellipsis;
+  color: ${0} !important;
+  border: 1px solid #f1f1f1;
+  z-index: 1001;
+  background: ${0};
+  &:hover {
+    background-color: ${0};
+    color: ${0} !important;
+  }
+`), p => p.isSelected ? 'white' : 'var(--goa-color-greyscale-black)', p => p.isSelected ? 'var(--goa-color-interactive-default)' : '#fff', p => p.isSelected ? 'var(--goa-color-interactive-default)' : '#f1f1f1', p => p.isSelected ? 'white' : '#333');
+const Dropdown = props => {
+  const {
+    label,
+    selected,
+    onChange,
+    optionListMaxHeight,
+    isAutocompletion,
+    id
+  } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedOption, setSelectedOption] = useState(selected);
+  const trailingIcon = isOpen ? 'chevron-up' : 'chevron-down';
+  const [items, setItems] = useState(props.items);
+  const [inputText, setInputText] = useState(selected);
+  useEffect(() => {
+    setItems(props.items);
+  }, [isEqual(props.items, items)]);
+  return jsxs("div", {
+    "data-testid": id,
+    children: [jsx(GoAInput, {
+      name: `dropdown-${label}`,
+      width: "100%",
+      value: inputText,
+      testId: `${id}-input`,
+      id: `${id}-input`,
+      readonly: !isAutocompletion,
+      onChange: (name, value) => {
+        if (isAutocompletion) {
+          setIsOpen(true);
+          const selectedItems = props.items.filter(item => {
+            return item.label.includes(value);
+          });
+          setItems(selectedItems);
+        }
+      },
+      trailingIcon: trailingIcon,
+      onFocus: () => {
+        setIsOpen(!isOpen);
+      }
+    }), jsx(GoADropdownListContainerWrapper, {
+      isOpen: isOpen,
+      children: jsx(GoADropdownListContainer, {
+        optionListMaxHeight: optionListMaxHeight,
+        children: items.map(item => {
+          return jsx(GoADropdownListOption, {
+            isSelected: item.value === selected,
+            children: jsx("div", {
+              "data-testid": `${id}-${item.label}-option`,
+              onClick: () => {
+                onChange(item.value);
+                setSelectedOption(item.value);
+                setInputText(item.value);
+                setIsOpen(false);
+              },
+              children: item.label
+            }, `jsonforms-dropdown-${label}-${item.value}`)
+          });
+        })
+      })
+    })]
+  });
+};
+
 function fetchRegisterConfigFromOptions(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 EnumSelect = props => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d;
   const {
     data,
     id,
@@ -4242,9 +4381,8 @@ const EnumSelect = props => {
     error = (registerCtx === null || registerCtx === void 0 ? void 0 : registerCtx.fetchErrors(registerConfig)) || '';
   }
   const autocompletion = ((_d = (_c = props.uischema) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.autocomplete) === true;
-  const appliedUiSchemaOptions = merge({}, config, props.uischema.options);
   const mergedOptions = useMemo(() => {
-    const newOptions = [...(options || []), ...registerData.map(d => {
+    const newOptions = [...(options || []), ...((registerData === null || registerData === void 0 ? void 0 : registerData.map(d => {
       if (typeof d === 'string') {
         return {
           value: d,
@@ -4253,7 +4391,7 @@ const EnumSelect = props => {
       } else {
         return Object.assign({}, d);
       }
-    })];
+    })) || [])];
     const hasNonEmptyOptions = newOptions.some(option => option.value !== '');
     if (!hasNonEmptyOptions && newOptions.length === 1 && newOptions[0].value === '') {
       return newOptions;
@@ -4266,6 +4404,7 @@ const EnumSelect = props => {
     }
     return newOptions.filter(option => option.value !== '');
   }, [registerData, options]);
+  console.log(mergedOptions);
   useEffect(() => {
     if (registerConfig) {
       registerCtx === null || registerCtx === void 0 ? void 0 : registerCtx.fetchRegisterByUrl(registerConfig);
@@ -4274,25 +4413,16 @@ const EnumSelect = props => {
   return jsx("div", {
     children: error.length > 0 ? callout({
       message: error
-    }) : jsx(GoADropdown, Object.assign({
-      name: `${label}`,
-      value: data,
-      disabled: !enabled,
-      relative: true,
-      filterable: autocompletion,
-      testId: `${id || label}-jsonform`
-    }, appliedUiSchemaOptions, {
-      onChange: (name, value) => {
+    }) : jsx(Dropdown, {
+      items: mergedOptions,
+      selected: data,
+      id: `jsonforms-${label}-dropdown`,
+      label: label,
+      isAutocompletion: autocompletion,
+      onChange: value => {
         handleChange(path, value);
       }
-    }, (_e = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _e === void 0 ? void 0 : _e.componentProps, {
-      children: mergedOptions === null || mergedOptions === void 0 ? void 0 : mergedOptions.map(item => {
-        return jsx(GoADropdownItem, {
-          value: `${item.value}`,
-          label: `${item.label}`
-        }, `json-form-dropdown-${item.value}`);
-      })
-    }), `${id}-jsonform-key`)
+    })
   });
 };
 const enumControl = props => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.32.1",
+  "version": "1.33.0",
   "license": "Apache-2.0",
   "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
   "repository": "https://github.com/GovAlta/adsp-monorepo",

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

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

package/src/lib/util/stringUtils.d.ts

@@ -19,6 +19,7 @@ export declare const controlScopeMatchesLabel: (scope: string, label: string) =>
  * @returns
  */
 export declare const getLabelText: (scope: string, label: string) => string;
+export declare const validateSinWithLuhn: (input: number) => boolean;
 /**
  * Check if a required, defined input value is valid. Returns an appropriate
  * error message if not.