@bigbinary/neeto-form-frontend 4.4.5 → 4.4.6

package/dist/{utils-DklENIyr.js → utils-C9nDMm4c.js}

@@ -1,13 +1,13 @@
 import { useEffect, useState, useImperativeHandle, memo, Fragment as Fragment$1 } from 'react';
 import { useFormikContext, useField, Field as Field$1, FastField } from 'formik';
 import { isPresent, isNotEmpty, findBy, filterBy, findById, isNotPresent, hyphenate, noop, toLabelAndValue, getRandomInt, randomPick, slugify, notEqualsDeep } from '@bigbinary/neeto-cist';
-import { i as isFunction, b as isEmptyValues, f as fieldWithFallback } from './index-BfavwyMH.js';
+import { i as isFunction, b as isEmptyValues, f as fieldWithFallback } from './index-y4GiXx7o.js';
 import { dayjs, getFromLocalStorage, setToLocalStorage, removeFromLocalStorage, withEventTargetValue, buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
 import { parsePhoneNumber } from 'libphonenumber-js';
-import { pick, mergeRight, omit, isEmpty, max, when, is, last, includes, __, mergeLeft, trim, isNil, clamp, prop, map, zipObj, identity, pluck, values, pipe, dec, equals } from 'ramda';
+import { pick, mergeRight, omit, isEmpty, max, when, is, last, includes, __, mergeLeft, isNil, clamp, prop, trim, map, zipObj, identity, pluck, values, pipe, dec, equals } from 'ramda';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import EditorContent from '@bigbinary/neeto-editor/EditorContent';
-import { Q as QUESTION_TYPES, C as CAPTCHA_TYPES, E as EMAIL_VERIFICATIONS_CREATE_URL, j as EMAIL_VERIFICATIONS_VERIFY_URL } from './constants-30230o5k.js';
+import { Q as QUESTION_TYPES, C as CAPTCHA_TYPES, E as EMAIL_VERIFICATIONS_CREATE_URL, j as EMAIL_VERIFICATIONS_VERIFY_URL } from './constants-BNfHPNOx.js';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import Plus from '@bigbinary/neeto-icons/Plus';
 import Button from '@bigbinary/neetoui/Button';
@@ -20,7 +20,7 @@ import { isEditorEmpty } from '@bigbinary/neeto-editor/utils';
 import { validation, PhoneNumberInput } from '@bigbinary/neeto-molecules/PhoneNumber';
 import i18next from 'i18next';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { a as QUESTION_KIND, P as PARENTHESES_REGEX, E as EMAIL_REGEX, R as RATING_VALUES, S as SCHEMA_LESS_QUESTION_KINDS, c as SIX_DIGIT_NUMBER_REGEX, A as ADDRESS_FIELD_WIDTHS, d as ADDRESS_FIELD_TYPES, e as LABEL_FIELDS, g as generateArray, D as DEFAULT_CHOICE_QUESTION_ATTRIBUTES, f as RATING_OPTIONS, I as ICONS_MAP } from './yup-DL9p9dFl.js';
+import { a as QUESTION_KIND, P as PARENTHESES_REGEX, R as RATING_VALUES, E as EMAIL_REGEX, S as SCHEMA_LESS_QUESTION_KINDS, c as SIX_DIGIT_NUMBER_REGEX, A as ADDRESS_FIELD_TYPES, d as ADDRESS_FIELD_WIDTHS, e as LABEL_FIELDS, g as generateArray, D as DEFAULT_CHOICE_QUESTION_ATTRIBUTES, f as RADIO_DESELECT_KEYS, h as RATING_OPTIONS, I as ICONS_MAP } from './yup-Dx1WK2_p.js';
 import _toArray from '@babel/runtime/helpers/toArray';
 import * as yup from 'yup';
 import classnames from 'classnames';
@@ -227,7 +227,7 @@ var getInvalidTypeError = function getInvalidTypeError(label, type) {
 };
 
 function ownKeys$i(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$i(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$i(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$i(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread$i(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$i(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$i(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var resolveQueryParamValue = when(is(Array), last);
 var toEmailValues = function toEmailValues() {
   var values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
@@ -605,7 +605,7 @@ var isPhoneNumberField = includes(__, [QUESTION_KIND.PHONE.value, QUESTION_KIND.
 var _excluded$4 = ["kind", "customValidator"];
 var _fieldKindValidatorMa;
 function ownKeys$h(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$h(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread$h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$h(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var t = clientI18nInstance.t;
 var isValidDate = function isValidDate(date) {
   return date && dayjs(date).isValid();
@@ -935,7 +935,7 @@ var MultipleEmailInput = function MultipleEmailInput(_ref) {
 };
 
 function ownKeys$g(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$g(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread$g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$g(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var AddressField = function AddressField(_ref) {
   var question = _ref.question,
     customValidator = _ref.customValidator;
@@ -1200,7 +1200,7 @@ var Recaptcha = function Recaptcha(_ref) {
 };
 
 function ownKeys$f(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$f(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$f(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ConditionField = function ConditionField(_ref) {
   var question = _ref.question,
     customValidator = _ref.customValidator;
@@ -1234,7 +1234,7 @@ var ConditionField = function ConditionField(_ref) {
 
 var _excluded$3 = ["value"];
 function ownKeys$e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DateField = function DateField(_ref) {
   var question = _ref.question,
     customValidator = _ref.customValidator;
@@ -1326,7 +1326,7 @@ var emailVerificationsApi = {
 };
 
 function ownKeys$d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var getMutationCallbacks = function getMutationCallbacks(options) {
   return {
     onSuccess: function onSuccess() {
@@ -1437,7 +1437,7 @@ var ResendVerificationCode = function ResendVerificationCode(_ref) {
 };
 
 function ownKeys$c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var VerifyCode = function VerifyCode(_ref) {
   var formId = _ref.formId,
     questionId = _ref.questionId,
@@ -1529,7 +1529,7 @@ var VerifyCode = function VerifyCode(_ref) {
 };
 
 function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var EmailField = function EmailField(_ref) {
   var question = _ref.question,
     customValidator = _ref.customValidator,
@@ -1745,7 +1745,7 @@ var FileUploadField = function FileUploadField(_ref) {
 };
 
 function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Field = function Field(_ref) {
   var question = _ref.question,
     name = _ref.name,
@@ -1795,7 +1795,7 @@ var Field = function Field(_ref) {
 };
 
 function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var NameField = function NameField(props) {
   var _props$question = props.question,
     id = _props$question.id,
@@ -1967,6 +1967,7 @@ var ChoiceImage = function ChoiceImage(_ref) {
     children: /*#__PURE__*/jsx("img", {
       alt: alt,
       src: src,
+      draggable: false,
       className: classnames("neeto-form-engine-choice__image", {
         "neeto-form-engine-choice__image--fit": shouldFitImages
       }),
@@ -1976,13 +1977,14 @@ var ChoiceImage = function ChoiceImage(_ref) {
   });
 };
 
-var Choices = function Choices(_ref) {
+var Choices$1 = function Choices(_ref) {
   var label = _ref.label,
     options = _ref.options,
     type = _ref.type,
     name = _ref.name,
     value = _ref.value,
     onChange = _ref.onChange,
+    onValueChange = _ref.onValueChange,
     error = _ref.error,
     disabled = _ref.isDisabled,
     _ref$isPictureChoice = _ref.isPictureChoice,
@@ -1994,6 +1996,32 @@ var Choices = function Choices(_ref) {
   var isCheckBox = type === "checkbox";
   var ChoiceWrapper = isCheckBox ? "div" : Radio;
   var Component = isCheckBox ? Checkbox : Radio.Item;
+  var handleChoiceValueChange = function handleChoiceValueChange(updatedValue) {
+    if (typeof onValueChange === "function") {
+      onValueChange(updatedValue);
+      return;
+    }
+    onChange({
+      target: {
+        name: name,
+        value: updatedValue
+      }
+    });
+  };
+  var shouldDeselectOption = function shouldDeselectOption(optionId) {
+    return !isCheckBox && !disabled && value === optionId;
+  };
+  var handleChoiceClick = function handleChoiceClick(event, optionId) {
+    if (!shouldDeselectOption(optionId)) return;
+    event.preventDefault();
+    handleChoiceValueChange("");
+  };
+  var handleChoiceKeyDown = function handleChoiceKeyDown(event, optionId) {
+    if (!shouldDeselectOption(optionId)) return;
+    if (!RADIO_DESELECT_KEYS.includes(event.key)) return;
+    event.preventDefault();
+    handleChoiceValueChange("");
+  };
   return /*#__PURE__*/jsxs("div", {
     className: "neeto-form-engine-choices__wrapper",
     "data-testid": "".concat(hyphenate(label), "-select-container-wrapper"),
@@ -2016,6 +2044,9 @@ var Choices = function Choices(_ref) {
             "neeto-form-engine-choice--selected": isChecked,
             "cursor-not-allowed": disabled
           }),
+          onClick: function onClick(event) {
+            return handleChoiceClick(event, option.id);
+          },
           children: [isPictureChoice && /*#__PURE__*/jsx(ChoiceImage, {
             shouldFitImages: shouldFitImages,
             alt: option.label,
@@ -2037,6 +2068,9 @@ var Choices = function Choices(_ref) {
               className: classnames({
                 "cursor-not-allowed": disabled
               })
+            },
+            onKeyDown: function onKeyDown(event) {
+              return handleChoiceKeyDown(event, option.id);
             }
           })]
         }, option.id);
@@ -2048,10 +2082,10 @@ var Choices = function Choices(_ref) {
     })]
   });
 };
-var Choices$1 = /*#__PURE__*/memo(Choices);
+var Choices = /*#__PURE__*/memo(Choices$1);
 
 function ownKeys$8(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var OptionsField = function OptionsField(_ref) {
   var question = _ref.question,
     customValidator = _ref.customValidator,
@@ -2072,7 +2106,7 @@ var OptionsField = function OptionsField(_ref) {
   var isPictureChoice = isPictureChoiceFromQuestion;
   var isDropdown = kind === QUESTION_KIND.DROPDOWN.value;
   var label = fieldWithFallback(question, "label");
-  var Component = isDropdown ? Select : Choices$1;
+  var Component = isDropdown ? Select : Choices;
   var transformedOptions = isDropdown ? options.map(function (option) {
     return {
       label: fieldWithFallback(option, "label"),
@@ -2091,6 +2125,13 @@ var OptionsField = function OptionsField(_ref) {
       return validateField(name);
     });
   };
+  var handleValueChange = function handleValueChange(updatedValue) {
+    setFieldValue(name, updatedValue, false);
+    setFieldTouched(name, true, false);
+    setTimeout(function () {
+      return validateField(name);
+    });
+  };
   var customFilter = function customFilter(option, inputValue) {
     if (!option) return false;
     return containsIgnoreCase(option.label, inputValue);
@@ -2128,7 +2169,8 @@ var OptionsField = function OptionsField(_ref) {
         value: isDropdown ? findBy({
           value: value
         }, transformedOptions) || null : value,
-        onChange: isDropdown ? handleSelect : onChange
+        onChange: isDropdown ? handleSelect : onChange,
+        onValueChange: !isDropdown ? handleValueChange : undefined
       }, isDropdown && {
         isClearable: true,
         menuPlacement: isLastFewElements ? "top" : "auto",
@@ -2191,8 +2233,8 @@ var PhoneNumberField = function PhoneNumberField(_ref) {
 
 var _excluded$2 = ["name", "label", "error", "lowestRatingLabel", "averageRatingLabel", "highestRatingLabel", "value", "disabled"];
 function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Rating = function Rating(_ref) {
+function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Rating$1 = function Rating(_ref) {
   var name = _ref.name,
     label = _ref.label,
     error = _ref.error,
@@ -2250,10 +2292,10 @@ var Rating = function Rating(_ref) {
     })]
   });
 };
-var Rating$1 = /*#__PURE__*/memo(Rating);
+var Rating = /*#__PURE__*/memo(Rating$1);
 
 function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var RatingField = function RatingField(_ref) {
   var question = _ref.question,
     customValidator = _ref.customValidator;
@@ -2273,7 +2315,7 @@ var RatingField = function RatingField(_ref) {
     children: function children(_ref2) {
       var meta = _ref2.meta,
         field = _ref2.field;
-      return /*#__PURE__*/jsx(Rating$1, _objectSpread$6(_objectSpread$6({}, field), {}, {
+      return /*#__PURE__*/jsx(Rating, _objectSpread$6(_objectSpread$6({}, field), {}, {
         disabled: isReadOnly,
         error: meta.touched ? meta.error : "",
         label: getLabel(label, isRequired),
@@ -2286,7 +2328,7 @@ var RatingField = function RatingField(_ref) {
 };
 
 function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var RichTextEditor = function RichTextEditor(_ref) {
   var editorRef = _ref.editorRef,
     question = _ref.question,
@@ -2357,8 +2399,8 @@ var RichTextEditor = function RichTextEditor(_ref) {
 
 var _excluded$1 = ["value", "iconType", "label", "rating"];
 function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var RatingButton = function RatingButton(_ref) {
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var RatingButton$1 = function RatingButton(_ref) {
   var _ref$value = _ref.value,
     value = _ref$value === void 0 ? 0 : _ref$value,
     iconType = _ref.iconType,
@@ -2395,12 +2437,12 @@ var RatingButton = function RatingButton(_ref) {
     }, otherProps))]
   });
 };
-var RatingButton$1 = /*#__PURE__*/memo(RatingButton);
+var RatingButton = /*#__PURE__*/memo(RatingButton$1);
 
 var _excluded = ["label", "minValue", "maxValue", "error"];
 function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var StarRating = function StarRating(_ref) {
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var StarRating$1 = function StarRating(_ref) {
   var label = _ref.label,
     minValue = _ref.minValue,
     maxValue = _ref.maxValue,
@@ -2419,7 +2461,7 @@ var StarRating = function StarRating(_ref) {
       className: "neeto-form-engine-star-rating__row",
       "data-testid": "star-rating-input-field",
       children: generateArray(minValue, maxValue).map(function (index) {
-        return /*#__PURE__*/jsx(RatingButton$1, _objectSpread$3({
+        return /*#__PURE__*/jsx(RatingButton, _objectSpread$3({
           label: index,
           rating: index
         }, props), index);
@@ -2431,10 +2473,10 @@ var StarRating = function StarRating(_ref) {
     })]
   });
 };
-var StarRating$1 = /*#__PURE__*/memo(StarRating);
+var StarRating = /*#__PURE__*/memo(StarRating$1);
 
 function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var StarRatingField = function StarRatingField(_ref) {
   var question = _ref.question,
     customValidator = _ref.customValidator;
@@ -2457,7 +2499,7 @@ var StarRatingField = function StarRatingField(_ref) {
     children: function children(_ref2) {
       var meta = _ref2.meta,
         field = _ref2.field;
-      return /*#__PURE__*/jsx(StarRating$1, _objectSpread$2({
+      return /*#__PURE__*/jsx(StarRating, _objectSpread$2({
         iconType: iconType,
         maxValue: maxValue,
         minValue: minValue,
@@ -2471,7 +2513,7 @@ var StarRatingField = function StarRatingField(_ref) {
 };
 
 function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var TermsField = function TermsField(_ref) {
   var question = _ref.question,
     customValidator = _ref.customValidator;
@@ -2508,7 +2550,7 @@ var TermsField = function TermsField(_ref) {
 };
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var TextField = function TextField(_ref) {
   var _otherProps$onChange;
   var question = _ref.question,
@@ -2606,5 +2648,5 @@ var getVisibleOptions = function getVisibleOptions(options) {
   }) : [];
 };
 
-export { FormikWrap as F, getFieldComponent as a, buildAutoCompleteAttribute as b, clientI18nInstance as c, getWithExpiry as d, clearEmailVerificationDetails as e, generateFormResponse as f, generateInitValues as g, clearLocalStorageValues as h, mergeRefs as m, renderButtonsInOrder as r };
-//# sourceMappingURL=utils-DklENIyr.js.map
+export { FormikWrap as F, generateInitValues as a, buildAutoCompleteAttribute as b, clientI18nInstance as c, getWithExpiry as d, clearEmailVerificationDetails as e, generateFormResponse as f, getFieldComponent as g, clearLocalStorageValues as h, mergeRefs as m, renderButtonsInOrder as r };
+//# sourceMappingURL=utils-C9nDMm4c.js.map