react-final-form - npm Package Compare versions

Comparing version 6.5.3 to 6.5.4

dist/react-final-form.cjs.js

@@ -21,5 +21,3 @@ 'use strict';
           enumerable: true,
-          get: function () {
-            return e[k];
-          }
+          get: function () { return e[k]; }
         });
@@ -29,3 +27,3 @@ }
   }
-  n['default'] = e;
+  n["default"] = e;
   return Object.freeze(n);
@@ -39,2 +37,3 @@ }
 
+var _excluded$3 = ["render", "children", "component"];
 // shared logic between components that use either render prop,
@@ -46,3 +45,3 @@ // children render function, or component prop
       component = props.component,
-      rest = _objectWithoutPropertiesLoose__default['default'](props, ["render", "children", "component"]);
+      rest = _objectWithoutPropertiesLoose__default["default"](props, _excluded$3);
 
@@ -63,3 +62,3 @@ if (component) {
 
-  if (typeof children !== 'function') {
+  if (typeof children !== "function") {
     throw new Error("Must specify either a render prop, a render function as children, or a component prop to " + name);
@@ -78,4 +77,4 @@ }
 
-  var previous = React__default['default'].useRef(value);
-  React__default['default'].useEffect(function () {
+  var previous = React__default["default"].useRef(value);
+  React__default["default"].useEffect(function () {
     if (!isEqual(value, previous.current)) {
@@ -102,3 +101,3 @@ callback();
 function useConstant(init) {
-  var ref = React__default['default'].useRef();
+  var ref = React__default["default"].useRef();
 
@@ -117,3 +116,3 @@ if (!ref.current) {
 
-  if (typeof a !== 'object' || !a || typeof b !== 'object' || !b) {
+  if (typeof a !== "object" || !a || typeof b !== "object" || !b) {
     return false;
@@ -143,3 +142,3 @@ }
 var isSyntheticEvent = function isSyntheticEvent(candidate) {
-  return !!(candidate && typeof candidate.stopPropagation === 'function');
+  return !!(candidate && typeof candidate.stopPropagation === "function");
 };
@@ -150,4 +149,4 @@
 function useLatest(value) {
-  var ref = React__default['default'].useRef(value);
-  React__default['default'].useEffect(function () {
+  var ref = React__default["default"].useRef(value);
+  React__default["default"].useEffect(function () {
     ref.current = value;
@@ -158,3 +157,3 @@ });
 
-var version = "6.5.3";
+var version = "6.5.4";
 
@@ -173,11 +172,12 @@ var addLazyState = function addLazyState(dest, state, keys) {
 var addLazyFormState = function addLazyFormState(dest, state) {
-  return addLazyState(dest, state, ['active', 'dirty', 'dirtyFields', 'dirtySinceLastSubmit', 'dirtyFieldsSinceLastSubmit', 'error', 'errors', 'hasSubmitErrors', 'hasValidationErrors', 'initialValues', 'invalid', 'modified', 'modifiedSinceLastSubmit', 'pristine', 'submitError', 'submitErrors', 'submitFailed', 'submitSucceeded', 'submitting', 'touched', 'valid', 'validating', 'values', 'visited']);
+  return addLazyState(dest, state, ["active", "dirty", "dirtyFields", "dirtySinceLastSubmit", "dirtyFieldsSinceLastSubmit", "error", "errors", "hasSubmitErrors", "hasValidationErrors", "initialValues", "invalid", "modified", "modifiedSinceLastSubmit", "pristine", "submitError", "submitErrors", "submitFailed", "submitSucceeded", "submitting", "touched", "valid", "validating", "values", "visited"]);
 };
 var addLazyFieldMetaState = function addLazyFieldMetaState(dest, state) {
-  return addLazyState(dest, state, ['active', 'data', 'dirty', 'dirtySinceLastSubmit', 'error', 'initial', 'invalid', 'length', 'modified', 'modifiedSinceLastSubmit', 'pristine', 'submitError', 'submitFailed', 'submitSucceeded', 'submitting', 'touched', 'valid', 'validating', 'visited']);
+  return addLazyState(dest, state, ["active", "data", "dirty", "dirtySinceLastSubmit", "error", "initial", "invalid", "length", "modified", "modifiedSinceLastSubmit", "pristine", "submitError", "submitFailed", "submitSucceeded", "submitting", "touched", "valid", "validating", "visited"]);
 };
 
+var _excluded$2 = ["debug", "decorators", "destroyOnUnregister", "form", "initialValues", "initialValuesEqual", "keepDirtyOnReinitialize", "mutators", "onSubmit", "subscription", "validate", "validateOnBlur"];
 var versions = {
-  'final-form': finalForm.version,
-  'react-final-form': version
+  "final-form": finalForm.version,
+  "react-final-form": version
 };
@@ -191,3 +191,4 @@ var all$1 = finalForm.formSubscriptionItems.reduce(function (result, key) {
   var debug = _ref.debug,
-      decorators = _ref.decorators,
+      _ref$decorators = _ref.decorators,
+      decorators = _ref$decorators === void 0 ? [] : _ref$decorators,
       destroyOnUnregister = _ref.destroyOnUnregister,
@@ -204,3 +205,3 @@ alternateFormApi = _ref.form,
       validateOnBlur = _ref.validateOnBlur,
-      rest = _objectWithoutPropertiesLoose__default['default'](_ref, ["debug", "decorators", "destroyOnUnregister", "form", "initialValues", "initialValuesEqual", "keepDirtyOnReinitialize", "mutators", "onSubmit", "subscription", "validate", "validateOnBlur"]);
+      rest = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$2);
 
@@ -257,6 +258,6 @@ var config = {
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [decorators]); // warn about decorator changes
+  }, decorators); // warn about decorator changes
   // istanbul ignore next
 
-  if (process.env.NODE_ENV !== 'production') {
+  if (process.env.NODE_ENV !== "production") {
     // You're never supposed to use hooks inside a conditional, but in this
@@ -267,3 +268,3 @@ // case we can be certain that you're not going to be changing your
     useWhenValueChanges(decorators, function () {
-      console.error('Form decorators should not change from one render to the next as new values will be ignored');
+      console.error("Form decorators should not change from one render to the next as new values will be ignored");
     }, shallowEqual);
@@ -274,3 +275,3 @@ } // allow updatable config
   useWhenValueChanges(debug, function () {
-    form.setConfig('debug', debug);
+    form.setConfig("debug", debug);
   });
@@ -281,18 +282,18 @@ useWhenValueChanges(destroyOnUnregister, function () {
   useWhenValueChanges(keepDirtyOnReinitialize, function () {
-    form.setConfig('keepDirtyOnReinitialize', keepDirtyOnReinitialize);
+    form.setConfig("keepDirtyOnReinitialize", keepDirtyOnReinitialize);
   });
   useWhenValueChanges(initialValues, function () {
-    form.setConfig('initialValues', initialValues);
+    form.setConfig("initialValues", initialValues);
   }, initialValuesEqual || shallowEqual);
   useWhenValueChanges(mutators, function () {
-    form.setConfig('mutators', mutators);
+    form.setConfig("mutators", mutators);
   });
   useWhenValueChanges(onSubmit, function () {
-    form.setConfig('onSubmit', onSubmit);
+    form.setConfig("onSubmit", onSubmit);
   });
   useWhenValueChanges(validate, function () {
-    form.setConfig('validate', validate);
+    form.setConfig("validate", validate);
   });
   useWhenValueChanges(validateOnBlur, function () {
-    form.setConfig('validateOnBlur', validateOnBlur);
+    form.setConfig("validateOnBlur", validateOnBlur);
   });
@@ -303,7 +304,7 @@
       // sometimes not true, e.g. React Native
-      if (typeof event.preventDefault === 'function') {
+      if (typeof event.preventDefault === "function") {
         event.preventDefault();
       }
 
-      if (typeof event.stopPropagation === 'function') {
+      if (typeof event.stopPropagation === "function") {
         // prevent any outer forms from receiving the event too
@@ -318,3 +319,3 @@ event.stopPropagation();
   var renderProps = {
-    form: _extends__default['default']({}, form, {
+    form: _extends__default["default"]({}, form, {
       reset: function reset(eventOrValues) {
@@ -334,5 +335,5 @@ if (isSyntheticEvent(eventOrValues)) {
     value: form
-  }, renderComponent(_extends__default['default']({}, rest, {
+  }, renderComponent(_extends__default["default"]({}, rest, {
     __versions: versions
-  }), renderProps, 'ReactFinalForm'));
+  }), renderProps, "ReactFinalForm"));
 }
@@ -344,3 +345,3 @@
   if (!form) {
-    throw new Error((componentName || 'useForm') + " must be used inside of a <Form> component");
+    throw new Error((componentName || "useForm") + " must be used inside of a <Form> component");
   }
@@ -357,3 +358,3 @@
 
-  var form = useForm('useFormState');
+  var form = useForm("useFormState");
   var firstRender = React__namespace.useRef(true);
@@ -397,8 +398,10 @@ var onChangeRef = React__namespace.useRef(onChange);
 
+var _excluded$1 = ["onChange", "subscription"];
+
 function FormSpy(_ref) {
   var onChange = _ref.onChange,
       subscription = _ref.subscription,
-      rest = _objectWithoutPropertiesLoose__default['default'](_ref, ["onChange", "subscription"]);
+      rest = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$1);
 
-  var reactFinalForm = useForm('FormSpy');
+  var reactFinalForm = useForm("FormSpy");
   var state = useFormState({
@@ -414,3 +417,3 @@ onChange: onChange,
   var renderProps = {
-    form: _extends__default['default']({}, reactFinalForm, {
+    form: _extends__default["default"]({}, reactFinalForm, {
       reset: function reset(eventOrValues) {
@@ -426,6 +429,6 @@ if (isSyntheticEvent(eventOrValues)) {
   };
-  return renderComponent(_extends__default['default']({}, rest, renderProps), state, 'FormSpy');
+  return renderComponent(_extends__default["default"]({}, rest, renderProps), state, "FormSpy");
 }
 
-var isReactNative = typeof window !== 'undefined' && window.navigator && window.navigator.product && window.navigator.product === 'ReactNative';
+var isReactNative = typeof window !== "undefined" && window.navigator && window.navigator.product && window.navigator.product === "ReactNative";
 
@@ -464,3 +467,3 @@ var getSelectedValues = function getSelectedValues(options) {
   switch (type) {
-    case 'checkbox':
+    case "checkbox":
       if (valueProp !== undefined) {
@@ -490,3 +493,3 @@ // we are maintaining an array, not just a boolean
 
-    case 'select-multiple':
+    case "select-multiple":
       return getSelectedValues(event.target.options);
@@ -499,2 +502,23 @@
 
+/**
+ * Creates a callback, even with closures, that will be
+ * instance === for the lifetime of the component, always
+ * calling the most recent version of the function and its
+ * closures.
+ */
+
+function useConstantCallback(callback) {
+  var ref = React__namespace.useRef(callback);
+  React__namespace.useEffect(function () {
+    ref.current = callback;
+  });
+  return React__namespace.useCallback(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return ref.current.apply(null, args);
+  }, []);
+}
+
 var all = finalForm.fieldSubscriptionItems.reduce(function (result, key) {
@@ -506,7 +530,7 @@ result[key] = true;
 var defaultFormat = function defaultFormat(value, name) {
-  return value === undefined ? '' : value;
+  return value === undefined ? "" : value;
 };
 
 var defaultParse = function defaultParse(value, name) {
-  return value === '' ? undefined : value;
+  return value === "" ? undefined : value;
 };
@@ -541,3 +565,3 @@
       _value = _config.value;
-  var form = useForm('useField');
+  var form = useForm("useField");
   var configRef = useLatest(config);
@@ -593,2 +617,3 @@
 
+    // temporarily disable destroyOnUnregister
     var destroyOnUnregister = form.destroyOnUnregister;
@@ -600,2 +625,3 @@ form.destroyOnUnregister = false;
 
+    // return destroyOnUnregister to its original value
     form.destroyOnUnregister = destroyOnUnregister;
@@ -624,45 +650,5 @@ return initialState;
   ]);
-  var handlers = {
-    onBlur: React__namespace.useCallback(function (event) {
-      state.blur();
-
-      if (formatOnBlur) {
-        /**
-         * Here we must fetch the value directly from Final Form because we cannot
-         * trust that our `state` closure has the most recent value. This is a problem
-         * if-and-only-if the library consumer has called `onChange()` immediately
-         * before calling `onBlur()`, but before the field has had a chance to receive
-         * the value update from Final Form.
-         */
-        var fieldState = form.getFieldState(state.name);
-        state.change(format(fieldState.value, state.name));
-      }
-    }, // eslint-disable-next-line react-hooks/exhaustive-deps
-    [state.blur, state.name, format, formatOnBlur]),
-    onChange: React__namespace.useCallback(function (event) {
-      // istanbul ignore next
-      if (process.env.NODE_ENV !== 'production' && event && event.target) {
-        var targetType = event.target.type;
-        var unknown = ~['checkbox', 'radio', 'select-multiple'].indexOf(targetType) && !type && component !== 'select';
-
-        var _value2 = targetType === 'select-multiple' ? state.value : _value;
-
-        if (unknown) {
-          console.error("You must pass `type=\"" + (targetType === 'select-multiple' ? 'select' : targetType) + "\"` prop to your Field(" + name + ") component.\n" + ("Without it we don't know how to unpack your `value` prop - " + (Array.isArray(_value2) ? "[" + _value2 + "]" : "\"" + _value2 + "\"") + "."));
-        }
-      }
-
-      var value = event && event.target ? getValue(event, state.value, _value, isReactNative) : event;
-      state.change(parse(value, name));
-    }, // eslint-disable-next-line react-hooks/exhaustive-deps
-    [_value, name, parse, state.change, state.value, type]),
-    onFocus: React__namespace.useCallback(function (event) {
-      state.focus();
-    }, // eslint-disable-next-line react-hooks/exhaustive-deps
-    [state.focus])
-  };
   var meta = {};
   addLazyFieldMetaState(meta, state);
-
-  var input = _extends__default['default']({
+  var input = {
     name: name,
@@ -674,3 +660,3 @@
       if (formatOnBlur) {
-        if (component === 'input') {
+        if (component === "input") {
           value = defaultFormat(value);
@@ -683,8 +669,8 @@ }
       if (value === null && !allowNull) {
-        value = '';
+        value = "";
       }
 
-      if (type === 'checkbox' || type === 'radio') {
+      if (type === "checkbox" || type === "radio") {
         return _value;
-      } else if (component === 'select' && multiple) {
+      } else if (component === "select" && multiple) {
         return value || [];
@@ -699,3 +685,3 @@ }
 
-      if (type === 'checkbox') {
+      if (type === "checkbox") {
         value = format(value, name);
@@ -708,3 +694,3 @@
         }
-      } else if (type === 'radio') {
+      } else if (type === "radio") {
         return format(value, name) === _value;
@@ -714,6 +700,40 @@ }
       return undefined;
-    }
+    },
 
-  }, handlers);
+    onBlur: useConstantCallback(function (event) {
+      state.blur();
 
+      if (formatOnBlur) {
+        /**
+         * Here we must fetch the value directly from Final Form because we cannot
+         * trust that our `state` closure has the most recent value. This is a problem
+         * if-and-only-if the library consumer has called `onChange()` immediately
+         * before calling `onBlur()`, but before the field has had a chance to receive
+         * the value update from Final Form.
+         */
+        var fieldState = form.getFieldState(state.name);
+        state.change(format(fieldState.value, state.name));
+      }
+    }),
+    onChange: useConstantCallback(function (event) {
+      // istanbul ignore next
+      if (process.env.NODE_ENV !== "production" && event && event.target) {
+        var targetType = event.target.type;
+        var unknown = ~["checkbox", "radio", "select-multiple"].indexOf(targetType) && !type && component !== "select";
+
+        var _value2 = targetType === "select-multiple" ? state.value : _value;
+
+        if (unknown) {
+          console.error("You must pass `type=\"" + (targetType === "select-multiple" ? "select" : targetType) + "\"` prop to your Field(" + name + ") component.\n" + ("Without it we don't know how to unpack your `value` prop - " + (Array.isArray(_value2) ? "[" + _value2 + "]" : "\"" + _value2 + "\"") + "."));
+        }
+      }
+
+      var value = event && event.target ? getValue(event, state.value, _value, isReactNative) : event;
+      state.change(parse(value, name));
+    }),
+    onFocus: useConstantCallback(function (event) {
+      return state.focus();
+    })
+  };
+
   if (multiple) {
@@ -735,2 +755,3 @@ input.multiple = multiple;
 
+var _excluded = ["afterSubmit", "allowNull", "beforeSubmit", "children", "component", "data", "defaultValue", "format", "formatOnBlur", "initialValue", "isEqual", "multiple", "name", "parse", "subscription", "type", "validate", "validateFields", "value"];
 var Field = /*#__PURE__*/React__namespace.forwardRef(function Field(_ref, ref) {
@@ -756,3 +777,3 @@ var afterSubmit = _ref.afterSubmit,
       value = _ref.value,
-      rest = _objectWithoutPropertiesLoose__default['default'](_ref, ["afterSubmit", "allowNull", "beforeSubmit", "children", "component", "data", "defaultValue", "format", "formatOnBlur", "initialValue", "isEqual", "multiple", "name", "parse", "subscription", "type", "validate", "validateFields", "value"]);
+      rest = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded);
 
@@ -780,9 +801,9 @@ var field = useField(name, {
 
-  if (typeof children === 'function') {
-    return children(_extends__default['default']({}, field, rest));
+  if (typeof children === "function") {
+    return children(_extends__default["default"]({}, field, rest));
   }
 
-  if (typeof component === 'string') {
+  if (typeof component === "string") {
     // ignore meta, combine input with any other props
-    return /*#__PURE__*/React__namespace.createElement(component, _extends__default['default']({}, field.input, {
+    return /*#__PURE__*/React__namespace.createElement(component, _extends__default["default"]({}, field.input, {
       children: children,
@@ -794,6 +815,6 @@ ref: ref
   if (!name) {
-    throw new Error('prop name cannot be undefined in <Field> component');
+    throw new Error("prop name cannot be undefined in <Field> component");
   }
 
-  return renderComponent(_extends__default['default']({
+  return renderComponent(_extends__default["default"]({
     children: children,
@@ -800,0 +821,0 @@ component: component,

dist/react-final-form.es.js

@@ -7,2 +7,3 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 
+var _excluded$3 = ["render", "children", "component"];
 // shared logic between components that use either render prop,
@@ -14,3 +15,3 @@ // children render function, or component prop
       component = props.component,
-      rest = _objectWithoutPropertiesLoose(props, ["render", "children", "component"]);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$3);
 
@@ -31,3 +32,3 @@ if (component) {
 
-  if (typeof children !== 'function') {
+  if (typeof children !== "function") {
     throw new Error("Must specify either a render prop, a render function as children, or a component prop to " + name);
@@ -83,3 +84,3 @@ }
 
-  if (typeof a !== 'object' || !a || typeof b !== 'object' || !b) {
+  if (typeof a !== "object" || !a || typeof b !== "object" || !b) {
     return false;
@@ -109,3 +110,3 @@ }
 var isSyntheticEvent = function isSyntheticEvent(candidate) {
-  return !!(candidate && typeof candidate.stopPropagation === 'function');
+  return !!(candidate && typeof candidate.stopPropagation === "function");
 };
@@ -123,3 +124,3 @@
 
-var version = "6.5.3";
+var version = "6.5.4";
 
@@ -138,11 +139,12 @@ var addLazyState = function addLazyState(dest, state, keys) {
 var addLazyFormState = function addLazyFormState(dest, state) {
-  return addLazyState(dest, state, ['active', 'dirty', 'dirtyFields', 'dirtySinceLastSubmit', 'dirtyFieldsSinceLastSubmit', 'error', 'errors', 'hasSubmitErrors', 'hasValidationErrors', 'initialValues', 'invalid', 'modified', 'modifiedSinceLastSubmit', 'pristine', 'submitError', 'submitErrors', 'submitFailed', 'submitSucceeded', 'submitting', 'touched', 'valid', 'validating', 'values', 'visited']);
+  return addLazyState(dest, state, ["active", "dirty", "dirtyFields", "dirtySinceLastSubmit", "dirtyFieldsSinceLastSubmit", "error", "errors", "hasSubmitErrors", "hasValidationErrors", "initialValues", "invalid", "modified", "modifiedSinceLastSubmit", "pristine", "submitError", "submitErrors", "submitFailed", "submitSucceeded", "submitting", "touched", "valid", "validating", "values", "visited"]);
 };
 var addLazyFieldMetaState = function addLazyFieldMetaState(dest, state) {
-  return addLazyState(dest, state, ['active', 'data', 'dirty', 'dirtySinceLastSubmit', 'error', 'initial', 'invalid', 'length', 'modified', 'modifiedSinceLastSubmit', 'pristine', 'submitError', 'submitFailed', 'submitSucceeded', 'submitting', 'touched', 'valid', 'validating', 'visited']);
+  return addLazyState(dest, state, ["active", "data", "dirty", "dirtySinceLastSubmit", "error", "initial", "invalid", "length", "modified", "modifiedSinceLastSubmit", "pristine", "submitError", "submitFailed", "submitSucceeded", "submitting", "touched", "valid", "validating", "visited"]);
 };
 
+var _excluded$2 = ["debug", "decorators", "destroyOnUnregister", "form", "initialValues", "initialValuesEqual", "keepDirtyOnReinitialize", "mutators", "onSubmit", "subscription", "validate", "validateOnBlur"];
 var versions = {
-  'final-form': version$1,
-  'react-final-form': version
+  "final-form": version$1,
+  "react-final-form": version
 };
@@ -156,3 +158,4 @@ var all$1 = formSubscriptionItems.reduce(function (result, key) {
   var debug = _ref.debug,
-      decorators = _ref.decorators,
+      _ref$decorators = _ref.decorators,
+      decorators = _ref$decorators === void 0 ? [] : _ref$decorators,
       destroyOnUnregister = _ref.destroyOnUnregister,
@@ -169,3 +172,3 @@ alternateFormApi = _ref.form,
       validateOnBlur = _ref.validateOnBlur,
-      rest = _objectWithoutPropertiesLoose(_ref, ["debug", "decorators", "destroyOnUnregister", "form", "initialValues", "initialValuesEqual", "keepDirtyOnReinitialize", "mutators", "onSubmit", "subscription", "validate", "validateOnBlur"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
@@ -222,6 +225,6 @@ var config = {
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [decorators]); // warn about decorator changes
+  }, decorators); // warn about decorator changes
   // istanbul ignore next
 
-  if (process.env.NODE_ENV !== 'production') {
+  if (process.env.NODE_ENV !== "production") {
     // You're never supposed to use hooks inside a conditional, but in this
@@ -232,3 +235,3 @@ // case we can be certain that you're not going to be changing your
     useWhenValueChanges(decorators, function () {
-      console.error('Form decorators should not change from one render to the next as new values will be ignored');
+      console.error("Form decorators should not change from one render to the next as new values will be ignored");
     }, shallowEqual);
@@ -239,3 +242,3 @@ } // allow updatable config
   useWhenValueChanges(debug, function () {
-    form.setConfig('debug', debug);
+    form.setConfig("debug", debug);
   });
@@ -246,18 +249,18 @@ useWhenValueChanges(destroyOnUnregister, function () {
   useWhenValueChanges(keepDirtyOnReinitialize, function () {
-    form.setConfig('keepDirtyOnReinitialize', keepDirtyOnReinitialize);
+    form.setConfig("keepDirtyOnReinitialize", keepDirtyOnReinitialize);
   });
   useWhenValueChanges(initialValues, function () {
-    form.setConfig('initialValues', initialValues);
+    form.setConfig("initialValues", initialValues);
   }, initialValuesEqual || shallowEqual);
   useWhenValueChanges(mutators, function () {
-    form.setConfig('mutators', mutators);
+    form.setConfig("mutators", mutators);
   });
   useWhenValueChanges(onSubmit, function () {
-    form.setConfig('onSubmit', onSubmit);
+    form.setConfig("onSubmit", onSubmit);
   });
   useWhenValueChanges(validate, function () {
-    form.setConfig('validate', validate);
+    form.setConfig("validate", validate);
   });
   useWhenValueChanges(validateOnBlur, function () {
-    form.setConfig('validateOnBlur', validateOnBlur);
+    form.setConfig("validateOnBlur", validateOnBlur);
   });
@@ -268,7 +271,7 @@
       // sometimes not true, e.g. React Native
-      if (typeof event.preventDefault === 'function') {
+      if (typeof event.preventDefault === "function") {
         event.preventDefault();
       }
 
-      if (typeof event.stopPropagation === 'function') {
+      if (typeof event.stopPropagation === "function") {
         // prevent any outer forms from receiving the event too
@@ -300,3 +303,3 @@ event.stopPropagation();
     __versions: versions
-  }), renderProps, 'ReactFinalForm'));
+  }), renderProps, "ReactFinalForm"));
 }
@@ -308,3 +311,3 @@
   if (!form) {
-    throw new Error((componentName || 'useForm') + " must be used inside of a <Form> component");
+    throw new Error((componentName || "useForm") + " must be used inside of a <Form> component");
   }
@@ -321,3 +324,3 @@
 
-  var form = useForm('useFormState');
+  var form = useForm("useFormState");
   var firstRender = React.useRef(true);
@@ -361,8 +364,10 @@ var onChangeRef = React.useRef(onChange);
 
+var _excluded$1 = ["onChange", "subscription"];
+
 function FormSpy(_ref) {
   var onChange = _ref.onChange,
       subscription = _ref.subscription,
-      rest = _objectWithoutPropertiesLoose(_ref, ["onChange", "subscription"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
-  var reactFinalForm = useForm('FormSpy');
+  var reactFinalForm = useForm("FormSpy");
   var state = useFormState({
@@ -389,6 +394,6 @@ onChange: onChange,
   };
-  return renderComponent(_extends({}, rest, renderProps), state, 'FormSpy');
+  return renderComponent(_extends({}, rest, renderProps), state, "FormSpy");
 }
 
-var isReactNative = typeof window !== 'undefined' && window.navigator && window.navigator.product && window.navigator.product === 'ReactNative';
+var isReactNative = typeof window !== "undefined" && window.navigator && window.navigator.product && window.navigator.product === "ReactNative";
 
@@ -427,3 +432,3 @@ var getSelectedValues = function getSelectedValues(options) {
   switch (type) {
-    case 'checkbox':
+    case "checkbox":
       if (valueProp !== undefined) {
@@ -453,3 +458,3 @@ // we are maintaining an array, not just a boolean
 
-    case 'select-multiple':
+    case "select-multiple":
       return getSelectedValues(event.target.options);
@@ -462,2 +467,23 @@
 
+/**
+ * Creates a callback, even with closures, that will be
+ * instance === for the lifetime of the component, always
+ * calling the most recent version of the function and its
+ * closures.
+ */
+
+function useConstantCallback(callback) {
+  var ref = React.useRef(callback);
+  React.useEffect(function () {
+    ref.current = callback;
+  });
+  return React.useCallback(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return ref.current.apply(null, args);
+  }, []);
+}
+
 var all = fieldSubscriptionItems.reduce(function (result, key) {
@@ -469,7 +495,7 @@ result[key] = true;
 var defaultFormat = function defaultFormat(value, name) {
-  return value === undefined ? '' : value;
+  return value === undefined ? "" : value;
 };
 
 var defaultParse = function defaultParse(value, name) {
-  return value === '' ? undefined : value;
+  return value === "" ? undefined : value;
 };
@@ -504,3 +530,3 @@
       _value = _config.value;
-  var form = useForm('useField');
+  var form = useForm("useField");
   var configRef = useLatest(config);
@@ -556,2 +582,3 @@
 
+    // temporarily disable destroyOnUnregister
     var destroyOnUnregister = form.destroyOnUnregister;
@@ -563,2 +590,3 @@ form.destroyOnUnregister = false;
 
+    // return destroyOnUnregister to its original value
     form.destroyOnUnregister = destroyOnUnregister;
@@ -587,45 +615,5 @@ return initialState;
   ]);
-  var handlers = {
-    onBlur: React.useCallback(function (event) {
-      state.blur();
-
-      if (formatOnBlur) {
-        /**
-         * Here we must fetch the value directly from Final Form because we cannot
-         * trust that our `state` closure has the most recent value. This is a problem
-         * if-and-only-if the library consumer has called `onChange()` immediately
-         * before calling `onBlur()`, but before the field has had a chance to receive
-         * the value update from Final Form.
-         */
-        var fieldState = form.getFieldState(state.name);
-        state.change(format(fieldState.value, state.name));
-      }
-    }, // eslint-disable-next-line react-hooks/exhaustive-deps
-    [state.blur, state.name, format, formatOnBlur]),
-    onChange: React.useCallback(function (event) {
-      // istanbul ignore next
-      if (process.env.NODE_ENV !== 'production' && event && event.target) {
-        var targetType = event.target.type;
-        var unknown = ~['checkbox', 'radio', 'select-multiple'].indexOf(targetType) && !type && component !== 'select';
-
-        var _value2 = targetType === 'select-multiple' ? state.value : _value;
-
-        if (unknown) {
-          console.error("You must pass `type=\"" + (targetType === 'select-multiple' ? 'select' : targetType) + "\"` prop to your Field(" + name + ") component.\n" + ("Without it we don't know how to unpack your `value` prop - " + (Array.isArray(_value2) ? "[" + _value2 + "]" : "\"" + _value2 + "\"") + "."));
-        }
-      }
-
-      var value = event && event.target ? getValue(event, state.value, _value, isReactNative) : event;
-      state.change(parse(value, name));
-    }, // eslint-disable-next-line react-hooks/exhaustive-deps
-    [_value, name, parse, state.change, state.value, type]),
-    onFocus: React.useCallback(function (event) {
-      state.focus();
-    }, // eslint-disable-next-line react-hooks/exhaustive-deps
-    [state.focus])
-  };
   var meta = {};
   addLazyFieldMetaState(meta, state);
-
-  var input = _extends({
+  var input = {
     name: name,
@@ -637,3 +625,3 @@
       if (formatOnBlur) {
-        if (component === 'input') {
+        if (component === "input") {
           value = defaultFormat(value);
@@ -646,8 +634,8 @@ }
       if (value === null && !allowNull) {
-        value = '';
+        value = "";
       }
 
-      if (type === 'checkbox' || type === 'radio') {
+      if (type === "checkbox" || type === "radio") {
         return _value;
-      } else if (component === 'select' && multiple) {
+      } else if (component === "select" && multiple) {
         return value || [];
@@ -662,3 +650,3 @@ }
 
-      if (type === 'checkbox') {
+      if (type === "checkbox") {
         value = format(value, name);
@@ -671,3 +659,3 @@
         }
-      } else if (type === 'radio') {
+      } else if (type === "radio") {
         return format(value, name) === _value;
@@ -677,6 +665,40 @@ }
       return undefined;
-    }
+    },
 
-  }, handlers);
+    onBlur: useConstantCallback(function (event) {
+      state.blur();
 
+      if (formatOnBlur) {
+        /**
+         * Here we must fetch the value directly from Final Form because we cannot
+         * trust that our `state` closure has the most recent value. This is a problem
+         * if-and-only-if the library consumer has called `onChange()` immediately
+         * before calling `onBlur()`, but before the field has had a chance to receive
+         * the value update from Final Form.
+         */
+        var fieldState = form.getFieldState(state.name);
+        state.change(format(fieldState.value, state.name));
+      }
+    }),
+    onChange: useConstantCallback(function (event) {
+      // istanbul ignore next
+      if (process.env.NODE_ENV !== "production" && event && event.target) {
+        var targetType = event.target.type;
+        var unknown = ~["checkbox", "radio", "select-multiple"].indexOf(targetType) && !type && component !== "select";
+
+        var _value2 = targetType === "select-multiple" ? state.value : _value;
+
+        if (unknown) {
+          console.error("You must pass `type=\"" + (targetType === "select-multiple" ? "select" : targetType) + "\"` prop to your Field(" + name + ") component.\n" + ("Without it we don't know how to unpack your `value` prop - " + (Array.isArray(_value2) ? "[" + _value2 + "]" : "\"" + _value2 + "\"") + "."));
+        }
+      }
+
+      var value = event && event.target ? getValue(event, state.value, _value, isReactNative) : event;
+      state.change(parse(value, name));
+    }),
+    onFocus: useConstantCallback(function (event) {
+      return state.focus();
+    })
+  };
+
   if (multiple) {
@@ -698,2 +720,3 @@ input.multiple = multiple;
 
+var _excluded = ["afterSubmit", "allowNull", "beforeSubmit", "children", "component", "data", "defaultValue", "format", "formatOnBlur", "initialValue", "isEqual", "multiple", "name", "parse", "subscription", "type", "validate", "validateFields", "value"];
 var Field = /*#__PURE__*/React.forwardRef(function Field(_ref, ref) {
@@ -719,3 +742,3 @@ var afterSubmit = _ref.afterSubmit,
       value = _ref.value,
-      rest = _objectWithoutPropertiesLoose(_ref, ["afterSubmit", "allowNull", "beforeSubmit", "children", "component", "data", "defaultValue", "format", "formatOnBlur", "initialValue", "isEqual", "multiple", "name", "parse", "subscription", "type", "validate", "validateFields", "value"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
@@ -743,7 +766,7 @@ var field = useField(name, {
 
-  if (typeof children === 'function') {
+  if (typeof children === "function") {
     return children(_extends({}, field, rest));
   }
 
-  if (typeof component === 'string') {
+  if (typeof component === "string") {
     // ignore meta, combine input with any other props
@@ -757,3 +780,3 @@ return /*#__PURE__*/React.createElement(component, _extends({}, field.input, {
   if (!name) {
-    throw new Error('prop name cannot be undefined in <Field> component');
+    throw new Error("prop name cannot be undefined in <Field> component");
   }
@@ -760,0 +783,0 @@

dist/react-final-form.umd.js

 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('final-form')) :
   typeof define === 'function' && define.amd ? define(['exports', 'react', 'final-form'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['react-final-form'] = {}, global.React, global.FinalForm));
-}(this, (function (exports, React, finalForm) { 'use strict';
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["react-final-form"] = {}, global.React, global.FinalForm));
+})(this, (function (exports, React, finalForm) { 'use strict';
 
@@ -18,5 +18,3 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
             enumerable: true,
-            get: function () {
-              return e[k];
-            }
+            get: function () { return e[k]; }
           });
@@ -26,3 +24,3 @@ }
     }
-    n['default'] = e;
+    n["default"] = e;
     return Object.freeze(n);
@@ -67,2 +65,3 @@ }
 
+  var _excluded$3 = ["render", "children", "component"];
   // shared logic between components that use either render prop,
@@ -74,3 +73,3 @@ // children render function, or component prop
         component = props.component,
-        rest = _objectWithoutPropertiesLoose(props, ["render", "children", "component"]);
+        rest = _objectWithoutPropertiesLoose(props, _excluded$3);
 
@@ -91,3 +90,3 @@ if (component) {
 
-    if (typeof children !== 'function') {
+    if (typeof children !== "function") {
       throw new Error("Must specify either a render prop, a render function as children, or a component prop to " + name);
@@ -106,4 +105,4 @@ }
 
-    var previous = React__default['default'].useRef(value);
-    React__default['default'].useEffect(function () {
+    var previous = React__default["default"].useRef(value);
+    React__default["default"].useEffect(function () {
       if (!isEqual(value, previous.current)) {
@@ -130,3 +129,3 @@ callback();
   function useConstant(init) {
-    var ref = React__default['default'].useRef();
+    var ref = React__default["default"].useRef();
 
@@ -145,3 +144,3 @@ if (!ref.current) {
 
-    if (typeof a !== 'object' || !a || typeof b !== 'object' || !b) {
+    if (typeof a !== "object" || !a || typeof b !== "object" || !b) {
       return false;
@@ -171,3 +170,3 @@ }
   var isSyntheticEvent = function isSyntheticEvent(candidate) {
-    return !!(candidate && typeof candidate.stopPropagation === 'function');
+    return !!(candidate && typeof candidate.stopPropagation === "function");
   };
@@ -178,4 +177,4 @@
   function useLatest(value) {
-    var ref = React__default['default'].useRef(value);
-    React__default['default'].useEffect(function () {
+    var ref = React__default["default"].useRef(value);
+    React__default["default"].useEffect(function () {
       ref.current = value;
@@ -186,3 +185,3 @@ });
 
-  var version = "6.5.3";
+  var version = "6.5.4";
 
@@ -201,11 +200,12 @@ var addLazyState = function addLazyState(dest, state, keys) {
   var addLazyFormState = function addLazyFormState(dest, state) {
-    return addLazyState(dest, state, ['active', 'dirty', 'dirtyFields', 'dirtySinceLastSubmit', 'dirtyFieldsSinceLastSubmit', 'error', 'errors', 'hasSubmitErrors', 'hasValidationErrors', 'initialValues', 'invalid', 'modified', 'modifiedSinceLastSubmit', 'pristine', 'submitError', 'submitErrors', 'submitFailed', 'submitSucceeded', 'submitting', 'touched', 'valid', 'validating', 'values', 'visited']);
+    return addLazyState(dest, state, ["active", "dirty", "dirtyFields", "dirtySinceLastSubmit", "dirtyFieldsSinceLastSubmit", "error", "errors", "hasSubmitErrors", "hasValidationErrors", "initialValues", "invalid", "modified", "modifiedSinceLastSubmit", "pristine", "submitError", "submitErrors", "submitFailed", "submitSucceeded", "submitting", "touched", "valid", "validating", "values", "visited"]);
   };
   var addLazyFieldMetaState = function addLazyFieldMetaState(dest, state) {
-    return addLazyState(dest, state, ['active', 'data', 'dirty', 'dirtySinceLastSubmit', 'error', 'initial', 'invalid', 'length', 'modified', 'modifiedSinceLastSubmit', 'pristine', 'submitError', 'submitFailed', 'submitSucceeded', 'submitting', 'touched', 'valid', 'validating', 'visited']);
+    return addLazyState(dest, state, ["active", "data", "dirty", "dirtySinceLastSubmit", "error", "initial", "invalid", "length", "modified", "modifiedSinceLastSubmit", "pristine", "submitError", "submitFailed", "submitSucceeded", "submitting", "touched", "valid", "validating", "visited"]);
   };
 
+  var _excluded$2 = ["debug", "decorators", "destroyOnUnregister", "form", "initialValues", "initialValuesEqual", "keepDirtyOnReinitialize", "mutators", "onSubmit", "subscription", "validate", "validateOnBlur"];
   var versions = {
-    'final-form': finalForm.version,
-    'react-final-form': version
+    "final-form": finalForm.version,
+    "react-final-form": version
   };
@@ -219,3 +219,4 @@ var all$1 = finalForm.formSubscriptionItems.reduce(function (result, key) {
     var debug = _ref.debug,
-        decorators = _ref.decorators,
+        _ref$decorators = _ref.decorators,
+        decorators = _ref$decorators === void 0 ? [] : _ref$decorators,
         destroyOnUnregister = _ref.destroyOnUnregister,
@@ -232,3 +233,3 @@ alternateFormApi = _ref.form,
         validateOnBlur = _ref.validateOnBlur,
-        rest = _objectWithoutPropertiesLoose(_ref, ["debug", "decorators", "destroyOnUnregister", "form", "initialValues", "initialValuesEqual", "keepDirtyOnReinitialize", "mutators", "onSubmit", "subscription", "validate", "validateOnBlur"]);
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
@@ -285,3 +286,3 @@ var config = {
       }; // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [decorators]); // warn about decorator changes
+    }, decorators); // warn about decorator changes
     // istanbul ignore next
@@ -295,3 +296,3 @@
       useWhenValueChanges(decorators, function () {
-        console.error('Form decorators should not change from one render to the next as new values will be ignored');
+        console.error("Form decorators should not change from one render to the next as new values will be ignored");
       }, shallowEqual);
@@ -302,3 +303,3 @@ } // allow updatable config
     useWhenValueChanges(debug, function () {
-      form.setConfig('debug', debug);
+      form.setConfig("debug", debug);
     });
@@ -309,18 +310,18 @@ useWhenValueChanges(destroyOnUnregister, function () {
     useWhenValueChanges(keepDirtyOnReinitialize, function () {
-      form.setConfig('keepDirtyOnReinitialize', keepDirtyOnReinitialize);
+      form.setConfig("keepDirtyOnReinitialize", keepDirtyOnReinitialize);
     });
     useWhenValueChanges(initialValues, function () {
-      form.setConfig('initialValues', initialValues);
+      form.setConfig("initialValues", initialValues);
     }, initialValuesEqual || shallowEqual);
     useWhenValueChanges(mutators, function () {
-      form.setConfig('mutators', mutators);
+      form.setConfig("mutators", mutators);
     });
     useWhenValueChanges(onSubmit, function () {
-      form.setConfig('onSubmit', onSubmit);
+      form.setConfig("onSubmit", onSubmit);
     });
     useWhenValueChanges(validate, function () {
-      form.setConfig('validate', validate);
+      form.setConfig("validate", validate);
     });
     useWhenValueChanges(validateOnBlur, function () {
-      form.setConfig('validateOnBlur', validateOnBlur);
+      form.setConfig("validateOnBlur", validateOnBlur);
     });
@@ -331,7 +332,7 @@
         // sometimes not true, e.g. React Native
-        if (typeof event.preventDefault === 'function') {
+        if (typeof event.preventDefault === "function") {
           event.preventDefault();
         }
 
-        if (typeof event.stopPropagation === 'function') {
+        if (typeof event.stopPropagation === "function") {
           // prevent any outer forms from receiving the event too
@@ -363,3 +364,3 @@ event.stopPropagation();
       __versions: versions
-    }), renderProps, 'ReactFinalForm'));
+    }), renderProps, "ReactFinalForm"));
   }
@@ -371,3 +372,3 @@
     if (!form) {
-      throw new Error((componentName || 'useForm') + " must be used inside of a <Form> component");
+      throw new Error((componentName || "useForm") + " must be used inside of a <Form> component");
     }
@@ -384,3 +385,3 @@
 
-    var form = useForm('useFormState');
+    var form = useForm("useFormState");
     var firstRender = React__namespace.useRef(true);
@@ -424,8 +425,10 @@ var onChangeRef = React__namespace.useRef(onChange);
 
+  var _excluded$1 = ["onChange", "subscription"];
+
   function FormSpy(_ref) {
     var onChange = _ref.onChange,
         subscription = _ref.subscription,
-        rest = _objectWithoutPropertiesLoose(_ref, ["onChange", "subscription"]);
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
-    var reactFinalForm = useForm('FormSpy');
+    var reactFinalForm = useForm("FormSpy");
     var state = useFormState({
@@ -452,6 +455,6 @@ onChange: onChange,
     };
-    return renderComponent(_extends({}, rest, renderProps), state, 'FormSpy');
+    return renderComponent(_extends({}, rest, renderProps), state, "FormSpy");
   }
 
-  var isReactNative = typeof window !== 'undefined' && window.navigator && window.navigator.product && window.navigator.product === 'ReactNative';
+  var isReactNative = typeof window !== "undefined" && window.navigator && window.navigator.product && window.navigator.product === "ReactNative";
 
@@ -490,3 +493,3 @@ var getSelectedValues = function getSelectedValues(options) {
     switch (type) {
-      case 'checkbox':
+      case "checkbox":
         if (valueProp !== undefined) {
@@ -516,3 +519,3 @@ // we are maintaining an array, not just a boolean
 
-      case 'select-multiple':
+      case "select-multiple":
         return getSelectedValues(event.target.options);
@@ -525,2 +528,23 @@
 
+  /**
+   * Creates a callback, even with closures, that will be
+   * instance === for the lifetime of the component, always
+   * calling the most recent version of the function and its
+   * closures.
+   */
+
+  function useConstantCallback(callback) {
+    var ref = React__namespace.useRef(callback);
+    React__namespace.useEffect(function () {
+      ref.current = callback;
+    });
+    return React__namespace.useCallback(function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return ref.current.apply(null, args);
+    }, []);
+  }
+
   var all = finalForm.fieldSubscriptionItems.reduce(function (result, key) {
@@ -532,7 +556,7 @@ result[key] = true;
   var defaultFormat = function defaultFormat(value, name) {
-    return value === undefined ? '' : value;
+    return value === undefined ? "" : value;
   };
 
   var defaultParse = function defaultParse(value, name) {
-    return value === '' ? undefined : value;
+    return value === "" ? undefined : value;
   };
@@ -567,3 +591,3 @@
         _value = _config.value;
-    var form = useForm('useField');
+    var form = useForm("useField");
     var configRef = useLatest(config);
@@ -619,2 +643,3 @@
 
+      // temporarily disable destroyOnUnregister
       var destroyOnUnregister = form.destroyOnUnregister;
@@ -626,2 +651,3 @@ form.destroyOnUnregister = false;
 
+      // return destroyOnUnregister to its original value
       form.destroyOnUnregister = destroyOnUnregister;
@@ -650,45 +676,5 @@ return initialState;
     ]);
-    var handlers = {
-      onBlur: React__namespace.useCallback(function (event) {
-        state.blur();
-
-        if (formatOnBlur) {
-          /**
-           * Here we must fetch the value directly from Final Form because we cannot
-           * trust that our `state` closure has the most recent value. This is a problem
-           * if-and-only-if the library consumer has called `onChange()` immediately
-           * before calling `onBlur()`, but before the field has had a chance to receive
-           * the value update from Final Form.
-           */
-          var fieldState = form.getFieldState(state.name);
-          state.change(format(fieldState.value, state.name));
-        }
-      }, // eslint-disable-next-line react-hooks/exhaustive-deps
-      [state.blur, state.name, format, formatOnBlur]),
-      onChange: React__namespace.useCallback(function (event) {
-        // istanbul ignore next
-        if (event && event.target) {
-          var targetType = event.target.type;
-          var unknown = ~['checkbox', 'radio', 'select-multiple'].indexOf(targetType) && !type && component !== 'select';
-
-          var _value2 = targetType === 'select-multiple' ? state.value : _value;
-
-          if (unknown) {
-            console.error("You must pass `type=\"" + (targetType === 'select-multiple' ? 'select' : targetType) + "\"` prop to your Field(" + name + ") component.\n" + ("Without it we don't know how to unpack your `value` prop - " + (Array.isArray(_value2) ? "[" + _value2 + "]" : "\"" + _value2 + "\"") + "."));
-          }
-        }
-
-        var value = event && event.target ? getValue(event, state.value, _value, isReactNative) : event;
-        state.change(parse(value, name));
-      }, // eslint-disable-next-line react-hooks/exhaustive-deps
-      [_value, name, parse, state.change, state.value, type]),
-      onFocus: React__namespace.useCallback(function (event) {
-        state.focus();
-      }, // eslint-disable-next-line react-hooks/exhaustive-deps
-      [state.focus])
-    };
     var meta = {};
     addLazyFieldMetaState(meta, state);
-
-    var input = _extends({
+    var input = {
       name: name,
@@ -700,3 +686,3 @@
         if (formatOnBlur) {
-          if (component === 'input') {
+          if (component === "input") {
             value = defaultFormat(value);
@@ -709,8 +695,8 @@ }
         if (value === null && !allowNull) {
-          value = '';
+          value = "";
         }
 
-        if (type === 'checkbox' || type === 'radio') {
+        if (type === "checkbox" || type === "radio") {
           return _value;
-        } else if (component === 'select' && multiple) {
+        } else if (component === "select" && multiple) {
           return value || [];
@@ -725,3 +711,3 @@ }
 
-        if (type === 'checkbox') {
+        if (type === "checkbox") {
           value = format(value, name);
@@ -734,3 +720,3 @@
           }
-        } else if (type === 'radio') {
+        } else if (type === "radio") {
           return format(value, name) === _value;
@@ -740,6 +726,40 @@ }
         return undefined;
-      }
+      },
 
-    }, handlers);
+      onBlur: useConstantCallback(function (event) {
+        state.blur();
 
+        if (formatOnBlur) {
+          /**
+           * Here we must fetch the value directly from Final Form because we cannot
+           * trust that our `state` closure has the most recent value. This is a problem
+           * if-and-only-if the library consumer has called `onChange()` immediately
+           * before calling `onBlur()`, but before the field has had a chance to receive
+           * the value update from Final Form.
+           */
+          var fieldState = form.getFieldState(state.name);
+          state.change(format(fieldState.value, state.name));
+        }
+      }),
+      onChange: useConstantCallback(function (event) {
+        // istanbul ignore next
+        if (event && event.target) {
+          var targetType = event.target.type;
+          var unknown = ~["checkbox", "radio", "select-multiple"].indexOf(targetType) && !type && component !== "select";
+
+          var _value2 = targetType === "select-multiple" ? state.value : _value;
+
+          if (unknown) {
+            console.error("You must pass `type=\"" + (targetType === "select-multiple" ? "select" : targetType) + "\"` prop to your Field(" + name + ") component.\n" + ("Without it we don't know how to unpack your `value` prop - " + (Array.isArray(_value2) ? "[" + _value2 + "]" : "\"" + _value2 + "\"") + "."));
+          }
+        }
+
+        var value = event && event.target ? getValue(event, state.value, _value, isReactNative) : event;
+        state.change(parse(value, name));
+      }),
+      onFocus: useConstantCallback(function (event) {
+        return state.focus();
+      })
+    };
+
     if (multiple) {
@@ -761,2 +781,3 @@ input.multiple = multiple;
 
+  var _excluded = ["afterSubmit", "allowNull", "beforeSubmit", "children", "component", "data", "defaultValue", "format", "formatOnBlur", "initialValue", "isEqual", "multiple", "name", "parse", "subscription", "type", "validate", "validateFields", "value"];
   var Field = /*#__PURE__*/React__namespace.forwardRef(function Field(_ref, ref) {
@@ -782,3 +803,3 @@ var afterSubmit = _ref.afterSubmit,
         value = _ref.value,
-        rest = _objectWithoutPropertiesLoose(_ref, ["afterSubmit", "allowNull", "beforeSubmit", "children", "component", "data", "defaultValue", "format", "formatOnBlur", "initialValue", "isEqual", "multiple", "name", "parse", "subscription", "type", "validate", "validateFields", "value"]);
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
@@ -806,7 +827,7 @@ var field = useField(name, {
 
-    if (typeof children === 'function') {
+    if (typeof children === "function") {
       return children(_extends({}, field, rest));
     }
 
-    if (typeof component === 'string') {
+    if (typeof component === "string") {
       // ignore meta, combine input with any other props
@@ -820,3 +841,3 @@ return /*#__PURE__*/React__namespace.createElement(component, _extends({}, field.input, {
     if (!name) {
-      throw new Error('prop name cannot be undefined in <Field> component');
+      throw new Error("prop name cannot be undefined in <Field> component");
     }
@@ -849,3 +870,3 @@
 
-})));
+}));
 //# sourceMappingURL=react-final-form.umd.js.map

dist/react-final-form.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("final-form")):"function"==typeof define&&define.amd?define(["exports","react","final-form"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["react-final-form"]={},e.React,e.FinalForm)}(this,function(e,t,h){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function r(n){if(n&&n.__esModule)return n;var r=Object.create(null);return n&&Object.keys(n).forEach(function(e){var t;"default"!==e&&(t=Object.getOwnPropertyDescriptor(n,e),Object.defineProperty(r,e,t.get?t:{enumerable:!0,get:function(){return n[e]}}))}),r.default=n,Object.freeze(r)}var E=r(t),O=n(t);function w(){return(w=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n,r=arguments[t];for(n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function S(e,t){if(null==e)return{};for(var n,r={},i=Object.keys(e),u=0;u<i.length;u++)n=i[u],0<=t.indexOf(n)||(r[n]=e[n]);return r}function F(e,t,n){var r=e.render,i=e.children,u=e.component,e=S(e,["render","children","component"]);if(u)return E.createElement(u,Object.assign(t,e,{children:i,render:r}));if(r)return r(void 0===i?Object.assign(t,e):Object.assign(t,e,{children:i}));if("function"!=typeof i)throw new Error("Must specify either a render prop, a render function as children, or a component prop to "+n);return i(Object.assign(t,e))}function V(e,t,n){void 0===n&&(n=function(e,t){return e===t});var r=O.default.useRef(e);O.default.useEffect(function(){n(e,r.current)||(t(),r.current=e)})}var j=function(e,t){if(e===t)return!0;if("object"!=typeof e||!e||"object"!=typeof t||!t)return!1;var n=Object.keys(e),r=Object.keys(t);if(n.length!==r.length)return!1;for(var i=Object.prototype.hasOwnProperty.bind(t),u=0;u<n.length;u++){var a=n[u];if(!i(a)||e[a]!==t[a])return!1}return!0},C=function(e){return!(!e||"function"!=typeof e.stopPropagation)},k=E.createContext();function x(e){var t=O.default.useRef(e);return O.default.useEffect(function(){t.current=e}),t}function R(t,n,e){e.forEach(function(e){Object.defineProperty(t,e,{get:function(){return n[e]},enumerable:!0})})}var t="6.5.3",P=function(e,t){return R(e,t,["active","dirty","dirtyFields","dirtySinceLastSubmit","dirtyFieldsSinceLastSubmit","error","errors","hasSubmitErrors","hasValidationErrors","initialValues","invalid","modified","modifiedSinceLastSubmit","pristine","submitError","submitErrors","submitFailed","submitSucceeded","submitting","touched","valid","validating","values","visited"])},B={"final-form":h.version,"react-final-form":t},q=h.formSubscriptionItems.reduce(function(e,t){return e[t]=!0,e},{});function i(e){var t=e.debug,n=e.decorators,r=e.destroyOnUnregister,i=e.form,u=e.initialValues,a=e.initialValuesEqual,o=e.keepDirtyOnReinitialize,c=e.mutators,l=e.onSubmit,f=e.subscription,s=void 0===f?q:f,d=e.validate,v=e.validateOnBlur,m=S(e,["debug","decorators","destroyOnUnregister","form","initialValues","initialValuesEqual","keepDirtyOnReinitialize","mutators","onSubmit","subscription","validate","validateOnBlur"]),p={debug:t,destroyOnUnregister:r,initialValues:u,keepDirtyOnReinitialize:o,mutators:c,onSubmit:l,validate:d,validateOnBlur:v},b=(f=function(){var e=i||h.createForm(p);return e.pauseValidation(),e},(e=O.default.useRef()).current||(e.current=f()),e.current),f=E.useState(function(){var t={};return b.subscribe(function(e){t=e},s)(),t}),e=f[0],g=f[1],y=x(e);E.useEffect(function(){b.isValidationPaused()&&b.resumeValidation();var e=[b.subscribe(function(e){j(e,y.current)||g(e)},s)].concat(n?n.map(function(e){return e(b)}):[]);return function(){b.pauseValidation(),e.reverse().forEach(function(e){return e()})}},[n]),V(t,function(){b.setConfig("debug",t)}),V(r,function(){b.destroyOnUnregister=!!r}),V(o,function(){b.setConfig("keepDirtyOnReinitialize",o)}),V(u,function(){b.setConfig("initialValues",u)},a||j),V(c,function(){b.setConfig("mutators",c)}),V(l,function(){b.setConfig("onSubmit",l)}),V(d,function(){b.setConfig("validate",d)}),V(v,function(){b.setConfig("validateOnBlur",v)});a={form:w({},b,{reset:function(e){C(e)?b.reset():b.reset(e)}}),handleSubmit:function(e){return e&&("function"==typeof e.preventDefault&&e.preventDefault(),"function"==typeof e.stopPropagation&&e.stopPropagation()),b.submit()}};return P(a,e),E.createElement(k.Provider,{value:b},F(w({},m,{__versions:B}),a,"ReactFinalForm"))}function D(e){var t=E.useContext(k);if(!t)throw new Error((e||"useForm")+" must be used inside of a <Form> component");return t}function u(e){var t=void 0===e?{}:e,n=t.onChange,e=t.subscription,r=void 0===e?q:e,i=D("useFormState"),u=E.useRef(!0),a=E.useRef(n);a.current=n;var t=E.useState(function(){var t={};return i.subscribe(function(e){t=e},r)(),n&&n(t),t}),e=t[0],o=t[1];E.useEffect(function(){return i.subscribe(function(e){u.current?u.current=!1:(o(e),a.current&&a.current(e))},r)},[]);t={};return P(t,e),t}function a(e){var t=e.onChange,n=e.subscription,e=S(e,["onChange","subscription"]),r=D("FormSpy"),n=u({onChange:t,subscription:n});if(t)return null;t={form:w({},r,{reset:function(e){C(e)?r.reset():r.reset(e)}})};return F(w({},e,t),n,"FormSpy")}function U(e,t){return void 0===e?"":e}function A(e,t){return""===e?void 0:e}var _="undefined"!=typeof window&&window.navigator&&window.navigator.product&&"ReactNative"===window.navigator.product,z=h.fieldSubscriptionItems.reduce(function(e,t){return e[t]=!0,e},{}),L=function(e,t){return e===t};function N(r,e){function n(e,t){return y.registerField(r,e,m,{afterSubmit:i,beforeSubmit:function(){var e=h.current,t=e.beforeSubmit,n=e.formatOnBlur,e=e.format;return!n||(e=(void 0===e?U:e)(n=y.getFieldState(r).value,r))!==n&&y.change(r,e),t&&t()},data:a,defaultValue:o,getValidator:function(){return h.current.validate},initialValue:s,isEqual:function(e,t){return(h.current.isEqual||L)(e,t)},silent:t,validateFields:b})}var i=(e=void 0===e?{}:e).afterSubmit,t=e.allowNull,u=e.component,a=e.data,o=e.defaultValue,c=e.format,l=void 0===c?U:c,f=e.formatOnBlur,s=e.initialValue,d=e.multiple,c=e.parse,v=void 0===c?A:c,c=e.subscription,m=void 0===c?z:c,p=e.type,b=e.validateFields,g=e.value,y=D("useField"),h=x(e),O=E.useRef(!0),c=E.useState(function(){var t={},e=y.destroyOnUnregister;return y.destroyOnUnregister=!1,n(function(e){t=e},!0)(),y.destroyOnUnregister=e,t}),S=c[0],F=c[1];E.useEffect(function(){return n(function(e){O.current?O.current=!1:F(e)},!1)},[r,a,o,s]);e={onBlur:E.useCallback(function(e){var t;S.blur(),f&&(t=y.getFieldState(S.name),S.change(l(t.value,S.name)))},[S.blur,S.name,l,f]),onChange:E.useCallback(function(e){e=e&&e.target?function(e,t,n,r){if(!r&&e.nativeEvent&&void 0!==e.nativeEvent.text)return e.nativeEvent.text;if(r&&e.nativeEvent)return e.nativeEvent.text;var i=e.target,r=i.type,u=i.value,a=i.checked;switch(r){case"checkbox":if(void 0===n)return!!a;if(a)return Array.isArray(t)?t.concat(n):[n];if(!Array.isArray(t))return t;var o=t.indexOf(n);return o<0?t:t.slice(0,o).concat(t.slice(o+1));case"select-multiple":return function(e){var t=[];if(e)for(var n=0;n<e.length;n++){var r=e[n];r.selected&&t.push(r.value)}return t}(e.target.options);default:return u}}(e,S.value,g,_):e;S.change(v(e,r))},[g,r,v,S.change,S.value,p]),onFocus:E.useCallback(function(e){S.focus()},[S.focus])},c={};R(c,S,["active","data","dirty","dirtySinceLastSubmit","error","initial","invalid","length","modified","modifiedSinceLastSubmit","pristine","submitError","submitFailed","submitSucceeded","submitting","touched","valid","validating","visited"]);e=w({name:r,get value(){var e=S.value;return f?"input"===u&&(e=U(e)):e=l(e,r),null!==e||t||(e=""),"checkbox"===p||"radio"===p?g:"select"===u&&d?e||[]:e},get checked(){var e=S.value;return"checkbox"===p?(e=l(e,r),void 0===g?!!e:!(!Array.isArray(e)||!~e.indexOf(g))):"radio"===p?l(e,r)===g:void 0}},e);return d&&(e.multiple=d),void 0!==p&&(e.type=p),{input:e,meta:c}}e.Field=E.forwardRef(function(e,t){var n=e.afterSubmit,r=e.allowNull,i=e.beforeSubmit,u=e.children,a=e.component,o=e.data,c=e.defaultValue,l=e.format,f=e.formatOnBlur,s=e.initialValue,d=e.isEqual,v=e.multiple,m=e.name,p=e.parse,b=e.subscription,g=e.type,y=e.validate,h=e.validateFields,O=e.value,e=S(e,["afterSubmit","allowNull","beforeSubmit","children","component","data","defaultValue","format","formatOnBlur","initialValue","isEqual","multiple","name","parse","subscription","type","validate","validateFields","value"]),O=N(m,{afterSubmit:n,allowNull:r,beforeSubmit:i,children:u,component:a,data:o,defaultValue:c,format:l,formatOnBlur:f,initialValue:s,isEqual:d,multiple:v,parse:p,subscription:b,type:g,validate:y,validateFields:h,value:O});if("function"==typeof u)return u(w({},O,e));if("string"==typeof a)return E.createElement(a,w({},O.input,{children:u,ref:t},e));if(!m)throw new Error("prop name cannot be undefined in <Field> component");return F(w({children:u,component:a,ref:t},e),O,"Field("+m+")")}),e.Form=i,e.FormSpy=a,e.useField=N,e.useForm=D,e.useFormState=u,e.version=t,e.withTypes=function(){return{Form:i,FormSpy:a}},Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("final-form")):"function"==typeof define&&define.amd?define(["exports","react","final-form"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["react-final-form"]={},e.React,e.FinalForm)}(this,function(e,t,h){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(r){if(r&&r.__esModule)return r;var n=Object.create(null);return r&&Object.keys(r).forEach(function(e){var t;"default"!==e&&(t=Object.getOwnPropertyDescriptor(r,e),Object.defineProperty(n,e,t.get?t:{enumerable:!0,get:function(){return r[e]}}))}),n.default=r,Object.freeze(n)}var w=n(t),O=r(t);function S(){return(S=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r,n=arguments[t];for(r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function F(e,t){if(null==e)return{};for(var r,n={},i=Object.keys(e),u=0;u<i.length;u++)r=i[u],0<=t.indexOf(r)||(n[r]=e[r]);return n}var a=["render","children","component"];function E(e,t,r){var n=e.render,i=e.children,u=e.component,e=F(e,a);if(u)return w.createElement(u,Object.assign(t,e,{children:i,render:n}));if(n)return n(void 0===i?Object.assign(t,e):Object.assign(t,e,{children:i}));if("function"!=typeof i)throw new Error("Must specify either a render prop, a render function as children, or a component prop to "+r);return i(Object.assign(t,e))}function V(e,t,r){void 0===r&&(r=function(e,t){return e===t});var n=O.default.useRef(e);O.default.useEffect(function(){r(e,n.current)||(t(),n.current=e)})}function j(e,t){if(e===t)return!0;if("object"!=typeof e||!e||"object"!=typeof t||!t)return!1;var r=Object.keys(e),n=Object.keys(t);if(r.length!==n.length)return!1;for(var i=Object.prototype.hasOwnProperty.bind(t),u=0;u<r.length;u++){var a=r[u];if(!i(a)||e[a]!==t[a])return!1}return!0}function C(e){return!(!e||"function"!=typeof e.stopPropagation)}var R=w.createContext();function k(e){var t=O.default.useRef(e);return O.default.useEffect(function(){t.current=e}),t}var i="6.5.4",x=function(t,r,e){e.forEach(function(e){Object.defineProperty(t,e,{get:function(){return r[e]},enumerable:!0})})},P=function(e,t){return x(e,t,["active","dirty","dirtyFields","dirtySinceLastSubmit","dirtyFieldsSinceLastSubmit","error","errors","hasSubmitErrors","hasValidationErrors","initialValues","invalid","modified","modifiedSinceLastSubmit","pristine","submitError","submitErrors","submitFailed","submitSucceeded","submitting","touched","valid","validating","values","visited"])},B=["debug","decorators","destroyOnUnregister","form","initialValues","initialValuesEqual","keepDirtyOnReinitialize","mutators","onSubmit","subscription","validate","validateOnBlur"],q={"final-form":h.version,"react-final-form":i},A=h.formSubscriptionItems.reduce(function(e,t){return e[t]=!0,e},{});function u(e){var t=e.debug,r=e.decorators,n=void 0===r?[]:r,i=e.destroyOnUnregister,u=e.form,a=e.initialValues,o=e.initialValuesEqual,c=e.keepDirtyOnReinitialize,f=e.mutators,l=e.onSubmit,s=e.subscription,d=void 0===s?A:s,v=e.validate,m=e.validateOnBlur,r=F(e,B),p={debug:t,destroyOnUnregister:i,initialValues:a,keepDirtyOnReinitialize:c,mutators:f,onSubmit:l,validate:v,validateOnBlur:m},b=(s=function(){var e=u||h.createForm(p);return e.pauseValidation(),e},(e=O.default.useRef()).current||(e.current=s()),e.current),s=w.useState(function(){var t={};return b.subscribe(function(e){t=e},d)(),t}),e=s[0],g=s[1],y=k(e);w.useEffect(function(){b.isValidationPaused()&&b.resumeValidation();var e=[b.subscribe(function(e){j(e,y.current)||g(e)},d)].concat(n?n.map(function(e){return e(b)}):[]);return function(){b.pauseValidation(),e.reverse().forEach(function(e){return e()})}},n),V(t,function(){b.setConfig("debug",t)}),V(i,function(){b.destroyOnUnregister=!!i}),V(c,function(){b.setConfig("keepDirtyOnReinitialize",c)}),V(a,function(){b.setConfig("initialValues",a)},o||j),V(f,function(){b.setConfig("mutators",f)}),V(l,function(){b.setConfig("onSubmit",l)}),V(v,function(){b.setConfig("validate",v)}),V(m,function(){b.setConfig("validateOnBlur",m)});o={form:S({},b,{reset:function(e){C(e)?b.reset():b.reset(e)}}),handleSubmit:function(e){return e&&("function"==typeof e.preventDefault&&e.preventDefault(),"function"==typeof e.stopPropagation&&e.stopPropagation()),b.submit()}};return P(o,e),w.createElement(R.Provider,{value:b},E(S({},r,{__versions:q}),o,"ReactFinalForm"))}function D(e){var t=w.useContext(R);if(!t)throw new Error((e||"useForm")+" must be used inside of a <Form> component");return t}function o(e){var t=void 0===e?{}:e,r=t.onChange,e=t.subscription,n=void 0===e?A:e,i=D("useFormState"),u=w.useRef(!0),a=w.useRef(r);a.current=r;var t=w.useState(function(){var t={};return i.subscribe(function(e){t=e},n)(),r&&r(t),t}),e=t[0],o=t[1];w.useEffect(function(){return i.subscribe(function(e){u.current?u.current=!1:(o(e),a.current&&a.current(e))},n)},[]);t={};return P(t,e),t}var c=["onChange","subscription"];function f(e){var t=e.onChange,r=e.subscription,e=F(e,c),n=D("FormSpy"),r=o({onChange:t,subscription:r});if(t)return null;t={form:S({},n,{reset:function(e){C(e)?n.reset():n.reset(e)}})};return E(S({},e,t),r,"FormSpy")}var U="undefined"!=typeof window&&window.navigator&&window.navigator.product&&"ReactNative"===window.navigator.product,_=function(e){var t=[];if(e)for(var r=0;r<e.length;r++){var n=e[r];n.selected&&t.push(n.value)}return t};function z(e){var n=w.useRef(e);return w.useEffect(function(){n.current=e}),w.useCallback(function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return n.current.apply(null,t)},[])}function L(e,t){return void 0===e?"":e}function N(e,t){return""===e?void 0:e}function M(e,t){return e===t}var T=h.fieldSubscriptionItems.reduce(function(e,t){return e[t]=!0,e},{});function I(n,e){function r(e,t){return h.registerField(n,e,p,{afterSubmit:i,beforeSubmit:function(){var e=O.current,t=e.beforeSubmit,r=e.formatOnBlur,e=e.format;return!r||(e=(void 0===e?L:e)(r=h.getFieldState(n).value,n))!==r&&h.change(n,e),t&&t()},data:o,defaultValue:c,getValidator:function(){return O.current.validate},initialValue:d,isEqual:function(e,t){return(O.current.isEqual||M)(e,t)},silent:t,validateFields:g})}var t=e=void 0===e?{}:e,i=t.afterSubmit,u=t.allowNull,a=t.component,o=t.data,c=t.defaultValue,f=t.format,l=void 0===f?L:f,s=t.formatOnBlur,d=t.initialValue,v=t.multiple,f=t.parse,m=void 0===f?N:f,f=t.subscription,p=void 0===f?T:f,b=t.type,g=t.validateFields,y=t.value,h=D("useField"),O=k(e),S=w.useRef(!0),t=w.useState(function(){var t={},e=h.destroyOnUnregister;return h.destroyOnUnregister=!1,r(function(e){t=e},!0)(),h.destroyOnUnregister=e,t}),F=t[0],E=t[1];w.useEffect(function(){return r(function(e){S.current?S.current=!1:E(e)},!1)},[n,o,c,d]);e={};x(e,F,["active","data","dirty","dirtySinceLastSubmit","error","initial","invalid","length","modified","modifiedSinceLastSubmit","pristine","submitError","submitFailed","submitSucceeded","submitting","touched","valid","validating","visited"]);t={name:n,get value(){var e=F.value;return s?"input"===a&&(e=L(e)):e=l(e,n),null!==e||u||(e=""),"checkbox"===b||"radio"===b?y:"select"===a&&v?e||[]:e},get checked(){var e=F.value;return"checkbox"===b?(e=l(e,n),void 0===y?!!e:!(!Array.isArray(e)||!~e.indexOf(y))):"radio"===b?l(e,n)===y:void 0},onBlur:z(function(e){var t;F.blur(),s&&(t=h.getFieldState(F.name),F.change(l(t.value,F.name)))}),onChange:z(function(e){e=e&&e.target?function(e,t,r,n){if(!n&&e.nativeEvent&&void 0!==e.nativeEvent.text)return e.nativeEvent.text;if(n&&e.nativeEvent)return e.nativeEvent.text;var i=e.target,n=i.type,u=i.value,a=i.checked;switch(n){case"checkbox":if(void 0===r)return!!a;if(a)return Array.isArray(t)?t.concat(r):[r];if(!Array.isArray(t))return t;var o=t.indexOf(r);return o<0?t:t.slice(0,o).concat(t.slice(o+1));case"select-multiple":return _(e.target.options);default:return u}}(e,F.value,y,U):e;F.change(m(e,n))}),onFocus:z(function(e){return F.focus()})};return v&&(t.multiple=v),void 0!==b&&(t.type=b),{input:t,meta:e}}var G=["afterSubmit","allowNull","beforeSubmit","children","component","data","defaultValue","format","formatOnBlur","initialValue","isEqual","multiple","name","parse","subscription","type","validate","validateFields","value"],t=w.forwardRef(function(e,t){var r=e.afterSubmit,n=e.allowNull,i=e.beforeSubmit,u=e.children,a=e.component,o=e.data,c=e.defaultValue,f=e.format,l=e.formatOnBlur,s=e.initialValue,d=e.isEqual,v=e.multiple,m=e.name,p=e.parse,b=e.subscription,g=e.type,y=e.validate,h=e.validateFields,O=e.value,e=F(e,G),O=I(m,{afterSubmit:r,allowNull:n,beforeSubmit:i,children:u,component:a,data:o,defaultValue:c,format:f,formatOnBlur:l,initialValue:s,isEqual:d,multiple:v,parse:p,subscription:b,type:g,validate:y,validateFields:h,value:O});if("function"==typeof u)return u(S({},O,e));if("string"==typeof a)return w.createElement(a,S({},O.input,{children:u,ref:t},e));if(!m)throw new Error("prop name cannot be undefined in <Field> component");return E(S({children:u,component:a,ref:t},e),O,"Field("+m+")")});e.Field=t,e.Form=u,e.FormSpy=f,e.useField=I,e.useForm=D,e.useFormState=o,e.version=i,e.withTypes=function(){return{Form:u,FormSpy:f}},Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=react-final-form.umd.min.js.map

package.json

 {
   "name": "react-final-form",
-  "version": "6.5.3",
+  "version": "6.5.4",
   "description": "🏁 High performance subscription-based form state management for React",
@@ -31,54 +31,49 @@ "main": "dist/react-final-form.cjs.js",
   "homepage": "https://github.com/final-form/react-final-form#readme",
+  "engines": {
+    "node": "14"
+  },
   "devDependencies": {
-    "@babel/core": "^7.12.3",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-proposal-decorators": "^7.12.1",
-    "@babel/plugin-proposal-export-namespace-from": "^7.12.1",
-    "@babel/plugin-proposal-function-sent": "^7.12.1",
-    "@babel/plugin-proposal-json-strings": "^7.12.1",
-    "@babel/plugin-proposal-numeric-separator": "^7.12.1",
-    "@babel/plugin-proposal-throw-expressions": "^7.12.1",
+    "@babel/core": "^7.15.5",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
-    "@babel/plugin-transform-flow-strip-types": "^7.12.1",
-    "@babel/plugin-transform-react-jsx-source": "^7.12.13",
-    "@babel/plugin-transform-runtime": "^7.12.1",
-    "@babel/preset-env": "^7.12.1",
-    "@babel/preset-flow": "^7.12.1",
-    "@babel/preset-react": "^7.12.1",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@types/react": "^16.9.53",
-    "@typescript-eslint/eslint-plugin": "^4.5.0",
-    "@typescript-eslint/parser": "^4.5.0",
+    "@babel/plugin-transform-flow-strip-types": "^7.14.5",
+    "@babel/plugin-transform-react-jsx-source": "^7.14.5",
+    "@babel/plugin-transform-runtime": "^7.15.0",
+    "@babel/preset-env": "^7.15.6",
+    "@babel/preset-flow": "^7.14.5",
+    "@babel/preset-react": "^7.14.5",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.1.1",
+    "@types/react": "^17.0.24",
+    "@typescript-eslint/eslint-plugin": "^4.32.0",
+    "@typescript-eslint/parser": "^4.32.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.6.0",
-    "bundlesize": "^0.18.0",
-    "doctoc": "^1.4.0",
-    "dtslint": "^4.0.4",
-    "eslint": "^7.11.0",
-    "eslint-config-react-app": "^5.2.1",
+    "babel-jest": "^27.2.3",
+    "bundlesize": "^0.18.1",
+    "doctoc": "^2.0.1",
+    "dtslint": "^4.1.6",
+    "eslint": "^7.32.0",
+    "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-babel": "^5.3.1",
-    "eslint-plugin-flowtype": "^5.2.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-flowtype": "^6.1.0",
+    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.26.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "fast-deep-equal": "^3.1.3",
-    "final-form": "^4.20.1",
-    "flow-bin": "^0.136.0",
-    "glow": "^1.2.2",
+    "final-form": "4.20.3",
+    "flow-bin": "^0.160.2",
     "husky": "^4.3.0",
-    "jest": "^26.6.0",
-    "jest-mock-console": "^1.0.1",
-    "lint-staged": "^10.4.2",
+    "jest": "^27.2.3",
+    "jest-mock-console": "^1.1.0",
+    "lint-staged": "^11.1.2",
     "nps": "^5.10.0",
     "nps-utils": "^1.7.0",
     "opencollective": "^1.0.3",
-    "prettier": "^2.1.2",
-    "prettier-eslint-cli": "^5.0.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "rollup": "^2.32.1",
+    "prettier": "^2.4.1",
+    "prettier-eslint-cli": "^5.0.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "rollup": "^2.57.0",
     "rollup-plugin-babel": "^4.4.0",
@@ -90,9 +85,9 @@ "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-uglify": "^6.0.4",
-    "tar": "^6.0.5",
-    "ts-essentials": "^7.0.1",
+    "tar": "^6.1.11",
+    "ts-essentials": "^8.1.0",
     "tslint": "^6.1.3",
-    "typescript": "^4.0.3"
+    "typescript": "^4.4.3"
   },
   "peerDependencies": {
-    "final-form": "^4.20.0",
+    "final-form": "4.20.3",
     "react": "^16.8.0 || ^17.0.0"
@@ -135,4 +130,4 @@ },
   "dependencies": {
-    "@babel/runtime": "^7.12.1"
+    "@babel/runtime": "^7.15.4"
   }
 }

typescript/index.d.ts

@@ -1,2 +0,2 @@
-import * as React from 'react';
+import * as React from "react";
 import {
@@ -10,8 +10,11 @@ FormApi,
   FieldSubscription,
-  FieldValidator
-} from 'final-form';
+  FieldValidator,
+} from "final-form";
 
-type SupportedInputs = 'input' | 'select' | 'textarea';
+type SupportedInputs = "input" | "select" | "textarea";
 
-export interface ReactContext<FormValues = Record<string, any>, InitialFormValues = Partial<FormValues>> {
+export interface ReactContext<
+  FormValues = Record<string, any>,
+  InitialFormValues = Partial<FormValues>,
+> {
   reactFinalForm: FormApi<FormValues, InitialFormValues>;
@@ -24,3 +27,3 @@ }
     keyof FieldState<FieldValue>,
-    'blur' | 'change' | 'focus' | 'name' | 'value'
+    "blur" | "change" | "focus" | "name" | "value"
   >
@@ -47,5 +50,6 @@ >;
   FieldValue,
-  T extends HTMLElement = HTMLElement
+  T extends HTMLElement = HTMLElement,
+  InputValue = FieldValue
 > {
-  input: FieldInputProps<FieldValue, T>;
+  input: FieldInputProps<InputValue, T>;
   meta: FieldMetaState<FieldValue>;
@@ -55,4 +59,6 @@ [otherProp: string]: any;
 
-export interface FormRenderProps<FormValues = Record<string, any>, InitialFormValues = Partial<FormValues>>
-  extends FormState<FormValues, InitialFormValues>,
+export interface FormRenderProps<
+  FormValues = Record<string, any>,
+  InitialFormValues = Partial<FormValues>,
+> extends FormState<FormValues, InitialFormValues>,
     RenderableProps<FormRenderProps<FormValues>> {
@@ -62,9 +68,11 @@ form: FormApi<FormValues>;
     event?: Partial<
-      Pick<React.SyntheticEvent, 'preventDefault' | 'stopPropagation'>
-    >
+      Pick<React.SyntheticEvent, "preventDefault" | "stopPropagation">
+    >,
   ) => Promise<AnyObject | undefined> | undefined;
 }
 
-export interface FormSpyRenderProps<FormValues = Record<string, any>, InitialFormValues = Partial<FormValues>>
-  extends FormState<FormValues, InitialFormValues> {
+export interface FormSpyRenderProps<
+  FormValues = Record<string, any>,
+  InitialFormValues = Partial<FormValues>,
+> extends FormState<FormValues, InitialFormValues> {
   form: FormApi<FormValues, InitialFormValues>;
@@ -79,4 +87,6 @@ }
 
-export interface FormProps<FormValues = Record<string, any>, InitialFormValues = Partial<FormValues>>
-  extends Config<FormValues, InitialFormValues>,
+export interface FormProps<
+  FormValues = Record<string, any>,
+  InitialFormValues = Partial<FormValues>,
+> extends Config<FormValues, InitialFormValues>,
     RenderableProps<FormRenderProps<FormValues, InitialFormValues>> {
@@ -90,3 +100,3 @@ subscription?: FormSubscription;
 
-export interface UseFieldConfig<FieldValue> {
+export interface UseFieldConfig<FieldValue, InputValue = any> {
   afterSubmit?: () => void;
@@ -97,3 +107,3 @@ allowNull?: boolean;
   defaultValue?: FieldValue;
-  format?: (value: FieldValue, name: string) => any;
+  format?: (value: FieldValue, name: string) => InputValue;
   formatOnBlur?: boolean;
@@ -103,3 +113,3 @@ initialValue?: FieldValue;
   multiple?: boolean;
-  parse?: (value: any, name: string) => FieldValue;
+  parse?: (value: InputValue, name: string) => FieldValue;
   subscription?: FieldSubscription;
@@ -114,5 +124,7 @@ type?: string;
   FieldValue,
-  RP extends FieldRenderProps<FieldValue, T>,
-  T extends HTMLElement = HTMLElement
-> extends UseFieldConfig<FieldValue>, RenderableProps<RP> {
+  RP extends FieldRenderProps<FieldValue, T, InputValue>,
+  T extends HTMLElement = HTMLElement,
+  InputValue = any
+> extends UseFieldConfig<FieldValue, InputValue>,
+    RenderableProps<RP> {
   name: string;
@@ -122,3 +134,6 @@ [otherProp: string]: any;
 
-export interface UseFormStateParams<FormValues = Record<string, any>, InitialFormValues = Partial<FormValues>> {
+export interface UseFormStateParams<
+  FormValues = Record<string, any>,
+  InitialFormValues = Partial<FormValues>,
+> {
   onChange?: (formState: FormState<FormValues, InitialFormValues>) => void;
@@ -128,4 +143,6 @@ subscription?: FormSubscription;
 
-export interface FormSpyProps<FormValues = Record<string, any>, InitialFormValues = Partial<FormValues>>
-  extends UseFormStateParams<FormValues, InitialFormValues>,
+export interface FormSpyProps<
+  FormValues = Record<string, any>,
+  InitialFormValues = Partial<FormValues>,
+> extends UseFormStateParams<FormValues, InitialFormValues>,
     RenderableProps<FormSpyRenderProps<FormValues, InitialFormValues>> {}
@@ -135,27 +152,46 @@
   FieldValue = any,
-  RP extends FieldRenderProps<FieldValue, T> = FieldRenderProps<
+  RP extends FieldRenderProps<FieldValue, T, InputValue> = FieldRenderProps<
     FieldValue,
-    HTMLElement
+    HTMLElement,
+    any
   >,
-  T extends HTMLElement = HTMLElement
+  T extends HTMLElement = HTMLElement,
+  InputValue = any
 >(
-  props: FieldProps<FieldValue, RP, T>
+  props: FieldProps<FieldValue, RP, T, InputValue>
 ) => React.ReactElement;
-export const Form: <FormValues = Record<string, any>, InitialFormValues = Partial<FormValues>>(
+export const Form: <
+  FormValues = Record<string, any>,
+  InitialFormValues = Partial<FormValues>
+>(
   props: FormProps<FormValues, InitialFormValues>
 ) => React.ReactElement;
-export const FormSpy: <FormValues = Record<string, any>, InitialFormValues = Partial<FormValues>>(
+export const FormSpy: <
+  FormValues = Record<string, any>,
+  InitialFormValues = Partial<FormValues>
+>(
   props: FormSpyProps<FormValues, InitialFormValues>
 ) => React.ReactElement;
-export function useField<FieldValue = any, T extends HTMLElement = HTMLElement>(
+export function useField<
+  FieldValue = any,
+  T extends HTMLElement = HTMLElement,
+  InputValue = any
+>(
   name: string,
-  config?: UseFieldConfig<FieldValue>
-): FieldRenderProps<FieldValue, T>;
-export function useForm<FormValues = Record<string, any>, InitialFormValues = Partial<FormValues>>(
-  componentName?: string
-): FormApi<FormValues, InitialFormValues>;
-export function useFormState<FormValues = Record<string, any>, InitialFormValues = Partial<FormValues>>(
+  config?: UseFieldConfig<FieldValue, InputValue>
+): FieldRenderProps<FieldValue, T, InputValue>;
+export function useForm<
+  FormValues = Record<string, any>,
+  InitialFormValues = Partial<FormValues>
+>(componentName?: string): FormApi<FormValues, InitialFormValues>;
+export function useFormState<
+  FormValues = Record<string, any>,
+  InitialFormValues = Partial<FormValues>
+>(
   params?: UseFormStateParams<FormValues, InitialFormValues>
 ): FormState<FormValues, InitialFormValues>;
-export function withTypes<FormValues = Record<string, any>, InitialFormValues = Partial<FormValues>>(): {
+export function withTypes<
+  FormValues = Record<string, any>,
+  InitialFormValues = Partial<FormValues>
+>(): {
   Form: React.FC<FormProps<FormValues, InitialFormValues>>;
@@ -162,0 +198,0 @@ FormSpy: React.FC<FormSpyProps<FormValues, InitialFormValues>>;

No alert changes

Improved metrics

Total package byte prevSize

200850

increased by2.21%

Dev dependency count

53

decreased by-13.11%

Number of package files

20

increased by5.26%

Lines of code

2503

increased by5.17%

Dependency changes

• + Addedfinal-form@4.20.3(transitive)

• - Removedfinal-form@4.20.10(transitive)

• Updated@babel/runtime@^7.15.4