react-final-form - npm Package Compare versions

Comparing version 6.3.3 to 6.3.4

dist/react-final-form.cjs.js

@@ -122,3 +122,3 @@ 'use strict';
 
-var version = "6.3.3";
+var version = "6.3.4";
 
@@ -137,3 +137,3 @@ var addLazyState = function addLazyState(dest, state, keys) {
 var addLazyFormState = function addLazyFormState(dest, state) {
-  return addLazyState(dest, state, ['active', 'dirty', 'dirtyFields', 'dirtySinceLastSubmit', 'error', 'errors', 'hasSubmitErrors', 'hasValidationErrors', 'initialValues', 'invalid', 'modified', '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', 'pristine', 'submitError', 'submitErrors', 'submitFailed', 'submitSucceeded', 'submitting', 'touched', 'valid', 'validating', 'values', 'visited']);
 };
@@ -473,2 +473,3 @@ var addLazyFieldMetaState = function addLazyFieldMetaState(dest, state) {
       component = _config.component,
+      data = _config.data,
       defaultValue = _config.defaultValue,
@@ -491,34 +492,41 @@ _config$format = _config.format,
   var register = function register(callback) {
-    return form.registerField(name, callback, subscription, {
-      afterSubmit: afterSubmit,
-      beforeSubmit: function beforeSubmit() {
-        var _configRef$current = configRef.current,
-            beforeSubmit = _configRef$current.beforeSubmit,
-            formatOnBlur = _configRef$current.formatOnBlur,
-            _configRef$current$fo = _configRef$current.format,
-            format = _configRef$current$fo === void 0 ? defaultFormat : _configRef$current$fo;
+    return (// avoid using `state` const in any closures created inside `register`
+      // because they would refer `state` from current execution context
+      // whereas actual `state` would defined in the subsequent `useField` hook
+      // execution
+      // (that would be caused by `setState` call performed in `register` callback)
+      form.registerField(name, callback, subscription, {
+        afterSubmit: afterSubmit,
+        beforeSubmit: function beforeSubmit() {
+          var _configRef$current = configRef.current,
+              beforeSubmit = _configRef$current.beforeSubmit,
+              formatOnBlur = _configRef$current.formatOnBlur,
+              _configRef$current$fo = _configRef$current.format,
+              format = _configRef$current$fo === void 0 ? defaultFormat : _configRef$current$fo;
 
-        if (formatOnBlur) {
-          var _ref = form.getFieldState(state.name),
-              value = _ref.value;
+          if (formatOnBlur) {
+            var _ref = form.getFieldState(name),
+                value = _ref.value;
 
-          var formatted = format(value, state.name);
+            var formatted = format(value, name);
 
-          if (formatted !== value) {
-            state.change(formatted);
+            if (formatted !== value) {
+              form.change(name, formatted);
+            }
           }
-        }
 
-        return beforeSubmit && beforeSubmit();
-      },
-      defaultValue: defaultValue,
-      getValidator: function getValidator() {
-        return configRef.current.validate;
-      },
-      initialValue: initialValue,
-      isEqual: function isEqual(a, b) {
-        return (configRef.current.isEqual || defaultIsEqual)(a, b);
-      },
-      validateFields: validateFields
-    });
+          return beforeSubmit && beforeSubmit();
+        },
+        data: data,
+        defaultValue: defaultValue,
+        getValidator: function getValidator() {
+          return configRef.current.validate;
+        },
+        initialValue: initialValue,
+        isEqual: function isEqual(a, b) {
+          return (configRef.current.isEqual || defaultIsEqual)(a, b);
+        },
+        validateFields: validateFields
+      })
+    );
   };
@@ -552,3 +560,3 @@
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [name, defaultValue, // If we want to allow inline fat-arrow field-level validation functions, we
+  [name, data, defaultValue, // If we want to allow inline fat-arrow field-level validation functions, we
   // cannot reregister field every time validate function !==.
@@ -667,2 +675,3 @@ // validate,
       component = _ref.component,
+      data = _ref.data,
       defaultValue = _ref.defaultValue,
@@ -681,3 +690,3 @@ format = _ref.format,
       value = _ref.value,
-      rest = _objectWithoutPropertiesLoose(_ref, ["afterSubmit", "allowNull", "beforeSubmit", "children", "component", "defaultValue", "format", "formatOnBlur", "initialValue", "isEqual", "multiple", "name", "parse", "subscription", "type", "validate", "validateFields", "value"]);
+      rest = _objectWithoutPropertiesLoose(_ref, ["afterSubmit", "allowNull", "beforeSubmit", "children", "component", "data", "defaultValue", "format", "formatOnBlur", "initialValue", "isEqual", "multiple", "name", "parse", "subscription", "type", "validate", "validateFields", "value"]);
 
@@ -690,2 +699,3 @@ var field = useField(name, {
     component: component,
+    data: data,
     defaultValue: defaultValue,
@@ -692,0 +702,0 @@ format: format,

dist/react-final-form.es.js

@@ -115,3 +115,3 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 
-var version = "6.3.3";
+var version = "6.3.4";
 
@@ -130,3 +130,3 @@ var addLazyState = function addLazyState(dest, state, keys) {
 var addLazyFormState = function addLazyFormState(dest, state) {
-  return addLazyState(dest, state, ['active', 'dirty', 'dirtyFields', 'dirtySinceLastSubmit', 'error', 'errors', 'hasSubmitErrors', 'hasValidationErrors', 'initialValues', 'invalid', 'modified', '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', 'pristine', 'submitError', 'submitErrors', 'submitFailed', 'submitSucceeded', 'submitting', 'touched', 'valid', 'validating', 'values', 'visited']);
 };
@@ -466,2 +466,3 @@ var addLazyFieldMetaState = function addLazyFieldMetaState(dest, state) {
       component = _config.component,
+      data = _config.data,
       defaultValue = _config.defaultValue,
@@ -484,34 +485,41 @@ _config$format = _config.format,
   var register = function register(callback) {
-    return form.registerField(name, callback, subscription, {
-      afterSubmit: afterSubmit,
-      beforeSubmit: function beforeSubmit() {
-        var _configRef$current = configRef.current,
-            beforeSubmit = _configRef$current.beforeSubmit,
-            formatOnBlur = _configRef$current.formatOnBlur,
-            _configRef$current$fo = _configRef$current.format,
-            format = _configRef$current$fo === void 0 ? defaultFormat : _configRef$current$fo;
+    return (// avoid using `state` const in any closures created inside `register`
+      // because they would refer `state` from current execution context
+      // whereas actual `state` would defined in the subsequent `useField` hook
+      // execution
+      // (that would be caused by `setState` call performed in `register` callback)
+      form.registerField(name, callback, subscription, {
+        afterSubmit: afterSubmit,
+        beforeSubmit: function beforeSubmit() {
+          var _configRef$current = configRef.current,
+              beforeSubmit = _configRef$current.beforeSubmit,
+              formatOnBlur = _configRef$current.formatOnBlur,
+              _configRef$current$fo = _configRef$current.format,
+              format = _configRef$current$fo === void 0 ? defaultFormat : _configRef$current$fo;
 
-        if (formatOnBlur) {
-          var _ref = form.getFieldState(state.name),
-              value = _ref.value;
+          if (formatOnBlur) {
+            var _ref = form.getFieldState(name),
+                value = _ref.value;
 
-          var formatted = format(value, state.name);
+            var formatted = format(value, name);
 
-          if (formatted !== value) {
-            state.change(formatted);
+            if (formatted !== value) {
+              form.change(name, formatted);
+            }
           }
-        }
 
-        return beforeSubmit && beforeSubmit();
-      },
-      defaultValue: defaultValue,
-      getValidator: function getValidator() {
-        return configRef.current.validate;
-      },
-      initialValue: initialValue,
-      isEqual: function isEqual(a, b) {
-        return (configRef.current.isEqual || defaultIsEqual)(a, b);
-      },
-      validateFields: validateFields
-    });
+          return beforeSubmit && beforeSubmit();
+        },
+        data: data,
+        defaultValue: defaultValue,
+        getValidator: function getValidator() {
+          return configRef.current.validate;
+        },
+        initialValue: initialValue,
+        isEqual: function isEqual(a, b) {
+          return (configRef.current.isEqual || defaultIsEqual)(a, b);
+        },
+        validateFields: validateFields
+      })
+    );
   };
@@ -545,3 +553,3 @@
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [name, defaultValue, // If we want to allow inline fat-arrow field-level validation functions, we
+  [name, data, defaultValue, // If we want to allow inline fat-arrow field-level validation functions, we
   // cannot reregister field every time validate function !==.
@@ -660,2 +668,3 @@ // validate,
       component = _ref.component,
+      data = _ref.data,
       defaultValue = _ref.defaultValue,
@@ -674,3 +683,3 @@ format = _ref.format,
       value = _ref.value,
-      rest = _objectWithoutPropertiesLoose(_ref, ["afterSubmit", "allowNull", "beforeSubmit", "children", "component", "defaultValue", "format", "formatOnBlur", "initialValue", "isEqual", "multiple", "name", "parse", "subscription", "type", "validate", "validateFields", "value"]);
+      rest = _objectWithoutPropertiesLoose(_ref, ["afterSubmit", "allowNull", "beforeSubmit", "children", "component", "data", "defaultValue", "format", "formatOnBlur", "initialValue", "isEqual", "multiple", "name", "parse", "subscription", "type", "validate", "validateFields", "value"]);
 
@@ -683,2 +692,3 @@ var field = useField(name, {
     component: component,
+    data: data,
     defaultValue: defaultValue,
@@ -685,0 +695,0 @@ format: format,

dist/react-final-form.umd.js

@@ -151,3 +151,3 @@ (function (global, factory) {
 
-  var version = "6.3.3";
+  var version = "6.3.4";
 
@@ -166,3 +166,3 @@ var addLazyState = function addLazyState(dest, state, keys) {
   var addLazyFormState = function addLazyFormState(dest, state) {
-    return addLazyState(dest, state, ['active', 'dirty', 'dirtyFields', 'dirtySinceLastSubmit', 'error', 'errors', 'hasSubmitErrors', 'hasValidationErrors', 'initialValues', 'invalid', 'modified', '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', 'pristine', 'submitError', 'submitErrors', 'submitFailed', 'submitSucceeded', 'submitting', 'touched', 'valid', 'validating', 'values', 'visited']);
   };
@@ -502,2 +502,3 @@ var addLazyFieldMetaState = function addLazyFieldMetaState(dest, state) {
         component = _config.component,
+        data = _config.data,
         defaultValue = _config.defaultValue,
@@ -520,34 +521,41 @@ _config$format = _config.format,
     var register = function register(callback) {
-      return form.registerField(name, callback, subscription, {
-        afterSubmit: afterSubmit,
-        beforeSubmit: function beforeSubmit() {
-          var _configRef$current = configRef.current,
-              beforeSubmit = _configRef$current.beforeSubmit,
-              formatOnBlur = _configRef$current.formatOnBlur,
-              _configRef$current$fo = _configRef$current.format,
-              format = _configRef$current$fo === void 0 ? defaultFormat : _configRef$current$fo;
+      return (// avoid using `state` const in any closures created inside `register`
+        // because they would refer `state` from current execution context
+        // whereas actual `state` would defined in the subsequent `useField` hook
+        // execution
+        // (that would be caused by `setState` call performed in `register` callback)
+        form.registerField(name, callback, subscription, {
+          afterSubmit: afterSubmit,
+          beforeSubmit: function beforeSubmit() {
+            var _configRef$current = configRef.current,
+                beforeSubmit = _configRef$current.beforeSubmit,
+                formatOnBlur = _configRef$current.formatOnBlur,
+                _configRef$current$fo = _configRef$current.format,
+                format = _configRef$current$fo === void 0 ? defaultFormat : _configRef$current$fo;
 
-          if (formatOnBlur) {
-            var _ref = form.getFieldState(state.name),
-                value = _ref.value;
+            if (formatOnBlur) {
+              var _ref = form.getFieldState(name),
+                  value = _ref.value;
 
-            var formatted = format(value, state.name);
+              var formatted = format(value, name);
 
-            if (formatted !== value) {
-              state.change(formatted);
+              if (formatted !== value) {
+                form.change(name, formatted);
+              }
             }
-          }
 
-          return beforeSubmit && beforeSubmit();
-        },
-        defaultValue: defaultValue,
-        getValidator: function getValidator() {
-          return configRef.current.validate;
-        },
-        initialValue: initialValue,
-        isEqual: function isEqual(a, b) {
-          return (configRef.current.isEqual || defaultIsEqual)(a, b);
-        },
-        validateFields: validateFields
-      });
+            return beforeSubmit && beforeSubmit();
+          },
+          data: data,
+          defaultValue: defaultValue,
+          getValidator: function getValidator() {
+            return configRef.current.validate;
+          },
+          initialValue: initialValue,
+          isEqual: function isEqual(a, b) {
+            return (configRef.current.isEqual || defaultIsEqual)(a, b);
+          },
+          validateFields: validateFields
+        })
+      );
     };
@@ -581,3 +589,3 @@
     }, // eslint-disable-next-line react-hooks/exhaustive-deps
-    [name, defaultValue, // If we want to allow inline fat-arrow field-level validation functions, we
+    [name, data, defaultValue, // If we want to allow inline fat-arrow field-level validation functions, we
     // cannot reregister field every time validate function !==.
@@ -696,2 +704,3 @@ // validate,
         component = _ref.component,
+        data = _ref.data,
         defaultValue = _ref.defaultValue,
@@ -710,3 +719,3 @@ format = _ref.format,
         value = _ref.value,
-        rest = _objectWithoutPropertiesLoose(_ref, ["afterSubmit", "allowNull", "beforeSubmit", "children", "component", "defaultValue", "format", "formatOnBlur", "initialValue", "isEqual", "multiple", "name", "parse", "subscription", "type", "validate", "validateFields", "value"]);
+        rest = _objectWithoutPropertiesLoose(_ref, ["afterSubmit", "allowNull", "beforeSubmit", "children", "component", "data", "defaultValue", "format", "formatOnBlur", "initialValue", "isEqual", "multiple", "name", "parse", "subscription", "type", "validate", "validateFields", "value"]);
 
@@ -719,2 +728,3 @@ var field = useField(name, {
       component: component,
+      data: data,
       defaultValue: defaultValue,
@@ -721,0 +731,0 @@ format: format,

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

package.json

 {
   "name": "react-final-form",
-  "version": "6.3.3",
+  "version": "6.3.4",
   "description": "🏁 High performance subscription-based form state management for React",
@@ -5,0 +5,0 @@ "main": "dist/react-final-form.cjs.js",

typescript/index.d.ts

@@ -27,3 +27,4 @@ import * as React from 'react';
 
-interface FieldInputProps<FieldValue, T extends HTMLElement = HTMLElement> extends AnyObject {
+interface FieldInputProps<FieldValue, T extends HTMLElement = HTMLElement>
+  extends AnyObject {
   name: string;
@@ -43,12 +44,19 @@ onBlur: (event?: React.FocusEvent<T>) => void;
 
-export interface FieldRenderProps<FieldValue, T extends HTMLElement = HTMLElement> {
+export interface FieldRenderProps<
+  FieldValue,
+  T extends HTMLElement = HTMLElement
+> {
   input: FieldInputProps<FieldValue, T>;
   meta: FieldMetaState<FieldValue>;
+  [otherProp: string]: any;
 }
 
 export interface FormRenderProps<FormValues = AnyObject>
-  extends FormState<FormValues>, RenderableProps<FormRenderProps<FormValues>> {
+  extends FormState<FormValues>,
+    RenderableProps<FormRenderProps<FormValues>> {
   form: FormApi<FormValues>;
   handleSubmit: (
-    event?: React.SyntheticEvent<HTMLFormElement>
+    event?: Partial<
+      Pick<React.SyntheticEvent, 'preventDefault' | 'stopPropagation'>
+    >
   ) => Promise<AnyObject | undefined> | undefined;
@@ -81,2 +89,3 @@ }
   beforeSubmit?: () => void | boolean;
+  data?: AnyObject;
   defaultValue?: FieldValue;
@@ -117,3 +126,3 @@ format?: (value: FieldValue, name: string) => any;
   RP extends FieldRenderProps<FieldValue, T> = FieldRenderProps<
-    any,
+    FieldValue,
     HTMLElement
@@ -120,0 +129,0 @@ >,

No alert changes

Improved metrics

Total package byte prevSize

188085

1.63%

Lines of code

2295

1.86%

No dependency changes