@tanstack/react-form 0.0.1

package/build/umd/index.development.js

@@ -0,0 +1,907 @@
+/**
+ * react-form
+ *
+ * Copyright (c) TanStack
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('use-sync-external-store/shim/with-selector'), require('react')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'use-sync-external-store/shim/with-selector', 'react'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactForm = {}, global.withSelector, global.React));
+})(this, (function (exports, withSelector, React) { 'use strict';
+
+  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+  function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+      Object.keys(e).forEach(function (k) {
+        if (k !== 'default') {
+          var d = Object.getOwnPropertyDescriptor(e, k);
+          Object.defineProperty(n, k, d.get ? d : {
+            enumerable: true,
+            get: function () { return e[k]; }
+          });
+        }
+      });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+  }
+
+  var React__namespace = /*#__PURE__*/_interopNamespace(React);
+  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+  function _extends() {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+
+      return target;
+    };
+    return _extends.apply(this, arguments);
+  }
+
+  /**
+   * store
+   *
+   * Copyright (c) TanStack
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE.md file in the root directory of this source tree.
+   *
+   * @license MIT
+   */
+  class Store {
+    listeners = new Set();
+    batching = false;
+    queue = [];
+    constructor(initialState, options) {
+      this.state = initialState;
+      this.options = options;
+    }
+    subscribe = listener => {
+      this.listeners.add(listener);
+      const unsub = this.options?.onSubscribe?.(listener, this);
+      return () => {
+        this.listeners.delete(listener);
+        unsub?.();
+      };
+    };
+    setState = updater => {
+      const previous = this.state;
+      this.state = this.options?.updateFn ? this.options.updateFn(previous)(updater) : updater(previous);
+      if (this.state === previous) return;
+      this.options?.onUpdate?.(this.state, previous);
+      this.queue.push(() => {
+        this.listeners.forEach(listener => listener(this.state, previous));
+      });
+      this.#flush();
+    };
+    #flush = () => {
+      if (this.batching) return;
+      this.queue.forEach(cb => cb());
+      this.queue = [];
+    };
+    batch = cb => {
+      this.batching = true;
+      cb();
+      this.batching = false;
+      this.#flush();
+    };
+  }
+
+  /**
+   * form-core
+   *
+   * Copyright (c) TanStack
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE.md file in the root directory of this source tree.
+   *
+   * @license MIT
+   */
+
+  function functionalUpdate(updater, input) {
+    return typeof updater === 'function' ? updater(input) : updater;
+  }
+  function getBy(obj, path) {
+    if (!path) {
+      throw new Error('A path string is required to use getBy');
+    }
+
+    const pathArray = makePathArray(path);
+    const pathObj = pathArray;
+    return pathObj.reduce((current, pathPart) => {
+      if (typeof current !== 'undefined') {
+        return current[pathPart];
+      }
+
+      return undefined;
+    }, obj);
+  }
+  function setBy(obj, _path, updater) {
+    const path = makePathArray(_path);
+
+    function doSet(parent) {
+      if (!path.length) {
+        return functionalUpdate(updater, parent);
+      }
+
+      const key = path.shift();
+
+      if (typeof key === 'string') {
+        if (typeof parent === 'object') {
+          return { ...parent,
+            [key]: doSet(parent[key])
+          };
+        }
+
+        return {
+          [key]: doSet()
+        };
+      }
+
+      if (typeof key === 'number') {
+        if (Array.isArray(parent)) {
+          const prefix = parent.slice(0, key);
+          return [...(prefix.length ? prefix : new Array(key)), doSet(parent[key]), ...parent.slice(key + 1)];
+        }
+
+        return [...new Array(key), doSet()];
+      }
+
+      throw new Error('Uh oh!');
+    }
+
+    return doSet(obj);
+  }
+  const reFindNumbers0 = /^(\d*)$/gm;
+  const reFindNumbers1 = /\.(\d*)\./gm;
+  const reFindNumbers2 = /^(\d*)\./gm;
+  const reFindNumbers3 = /\.(\d*$)/gm;
+  const reFindMultiplePeriods = /\.{2,}/gm;
+
+  function makePathArray(str) {
+    return str.replace('[', '.').replace(']', '').replace(reFindNumbers0, '__int__$1').replace(reFindNumbers1, '.__int__$1.').replace(reFindNumbers2, '__int__$1.').replace(reFindNumbers3, '.__int__$1').replace(reFindMultiplePeriods, '.').split('.').map(d => {
+      if (d.indexOf('__int__') === 0) {
+        return parseInt(d.substring('__int__'.length), 10);
+      }
+
+      return d;
+    });
+  }
+
+  function getDefaultFormState(defaultState) {
+    return {
+      values: {},
+      fieldMeta: {},
+      canSubmit: true,
+      isFieldsValid: false,
+      isFieldsValidating: false,
+      isFormValid: false,
+      isFormValidating: false,
+      isSubmitted: false,
+      isSubmitting: false,
+      isTouched: false,
+      isValid: false,
+      isValidating: false,
+      submissionAttempts: 0,
+      formValidationCount: 0,
+      ...defaultState
+    };
+  }
+  class FormApi {
+    // // This carries the context for nested fields
+    constructor(_opts) {
+      var _opts$defaultValues, _opts$defaultState;
+
+      this.options = {};
+      this.fieldInfo = {};
+      this.validationMeta = {};
+
+      this.update = options => {
+        this.store.batch(() => {
+          if (options.defaultState && options.defaultState !== this.options.defaultState) {
+            this.store.setState(prev => ({ ...prev,
+              ...options.defaultState
+            }));
+          }
+
+          if (options.defaultValues !== this.options.defaultValues) {
+            this.store.setState(prev => ({ ...prev,
+              values: options.defaultValues
+            }));
+          }
+        });
+        this.options = options;
+      };
+
+      this.reset = () => this.store.setState(() => getDefaultFormState(this.options.defaultValues));
+
+      this.validateAllFields = async () => {
+        const fieldValidationPromises = [];
+        this.store.batch(() => {
+          void Object.values(this.fieldInfo).forEach(field => {
+            Object.values(field.instances).forEach(instance => {
+              // If any fields are not touched
+              if (!instance.state.meta.isTouched) {
+                // Mark them as touched
+                instance.setMeta(prev => ({ ...prev,
+                  isTouched: true
+                })); // Validate the field
+
+                if (instance.options.validate) {
+                  fieldValidationPromises.push(instance.validate());
+                }
+              }
+            });
+          });
+        });
+        return Promise.all(fieldValidationPromises);
+      };
+
+      this.validateForm = async () => {
+        const {
+          validate
+        } = this.options;
+
+        if (!validate) {
+          return;
+        } // Use the formValidationCount for all field instances to
+        // track freshness of the validation
+
+
+        this.store.setState(prev => ({ ...prev,
+          isValidating: true,
+          formValidationCount: prev.formValidationCount + 1
+        }));
+        const formValidationCount = this.state.formValidationCount;
+
+        const checkLatest = () => formValidationCount === this.state.formValidationCount;
+
+        if (!this.validationMeta.validationPromise) {
+          this.validationMeta.validationPromise = new Promise((resolve, reject) => {
+            this.validationMeta.validationResolve = resolve;
+            this.validationMeta.validationReject = reject;
+          });
+        }
+
+        const doValidation = async () => {
+          try {
+            const error = await validate(this.state.values, this);
+
+            if (checkLatest()) {
+              var _this$validationMeta$, _this$validationMeta;
+
+              this.store.setState(prev => ({ ...prev,
+                isValidating: false,
+                error: error ? typeof error === 'string' ? error : 'Invalid Form Values' : null
+              }));
+              (_this$validationMeta$ = (_this$validationMeta = this.validationMeta).validationResolve) == null ? void 0 : _this$validationMeta$.call(_this$validationMeta, error);
+            }
+          } catch (err) {
+            if (checkLatest()) {
+              var _this$validationMeta$2, _this$validationMeta2;
+
+              (_this$validationMeta$2 = (_this$validationMeta2 = this.validationMeta).validationReject) == null ? void 0 : _this$validationMeta$2.call(_this$validationMeta2, err);
+            }
+          } finally {
+            delete this.validationMeta.validationPromise;
+          }
+        };
+
+        doValidation();
+        return this.validationMeta.validationPromise;
+      };
+
+      this.handleSubmit = async e => {
+        e.preventDefault();
+        e.stopPropagation(); // Check to see that the form and all fields have been touched
+        // If they have not, touch them all and run validation
+        // Run form validation
+        // Submit the form
+
+        this.store.setState(old => ({ ...old,
+          // Submittion attempts mark the form as not submitted
+          isSubmitted: false,
+          // Count submission attempts
+          submissionAttempts: old.submissionAttempts + 1
+        })); // Don't let invalid forms submit
+
+        if (!this.state.canSubmit) return;
+        this.store.setState(d => ({ ...d,
+          isSubmitting: true
+        }));
+
+        const done = () => {
+          this.store.setState(prev => ({ ...prev,
+            isSubmitting: false
+          }));
+        }; // Validate all fields
+
+
+        await this.validateAllFields(); // Fields are invalid, do not submit
+
+        if (!this.state.isFieldsValid) {
+          var _this$options$onInval, _this$options;
+
+          done();
+          (_this$options$onInval = (_this$options = this.options).onInvalidSubmit) == null ? void 0 : _this$options$onInval.call(_this$options, this.state.values, this);
+          return;
+        } // Run validation for the form
+
+
+        await this.validateForm();
+
+        if (!this.state.isValid) {
+          var _this$options$onInval2, _this$options2;
+
+          done();
+          (_this$options$onInval2 = (_this$options2 = this.options).onInvalidSubmit) == null ? void 0 : _this$options$onInval2.call(_this$options2, this.state.values, this);
+          return;
+        }
+
+        try {
+          var _this$options$onSubmi, _this$options3;
+
+          // Run the submit code
+          await ((_this$options$onSubmi = (_this$options3 = this.options).onSubmit) == null ? void 0 : _this$options$onSubmi.call(_this$options3, this.state.values, this));
+          this.store.batch(() => {
+            this.store.setState(prev => ({ ...prev,
+              isSubmitted: true
+            }));
+            done();
+          });
+        } catch (err) {
+          done();
+          throw err;
+        }
+      };
+
+      this.getFieldValue = field => getBy(this.state.values, field);
+
+      this.getFieldMeta = field => {
+        return this.state.fieldMeta[field];
+      };
+
+      this.getFieldInfo = field => {
+        var _this$fieldInfo;
+
+        return (_this$fieldInfo = this.fieldInfo)[field] || (_this$fieldInfo[field] = {
+          instances: {}
+        });
+      };
+
+      this.setFieldMeta = (field, updater) => {
+        this.store.setState(prev => {
+          return { ...prev,
+            fieldMeta: { ...prev.fieldMeta,
+              [field]: functionalUpdate(updater, prev.fieldMeta[field])
+            }
+          };
+        });
+      };
+
+      this.setFieldValue = (field, updater, opts) => {
+        var _opts$touch;
+
+        const touch = (_opts$touch = opts == null ? void 0 : opts.touch) != null ? _opts$touch : true;
+        this.store.batch(() => {
+          this.store.setState(prev => {
+            return { ...prev,
+              values: setBy(prev.values, field, updater)
+            };
+          });
+
+          if (touch) {
+            this.setFieldMeta(field, prev => ({ ...prev,
+              isTouched: true
+            }));
+          }
+        });
+      };
+
+      this.pushFieldValue = (field, value, opts) => {
+        return this.setFieldValue(field, prev => [...(Array.isArray(prev) ? prev : []), value], opts);
+      };
+
+      this.insertFieldValue = (field, index, value, opts) => {
+        this.setFieldValue(field, prev => {
+          // invariant( // TODO: bring in invariant
+          //   Array.isArray(prev),
+          //   `Cannot insert a field value into a non-array field. Check that this field's existing value is an array: ${field}.`
+          // )
+          return prev.map((d, i) => i === index ? value : d);
+        }, opts);
+      };
+
+      this.spliceFieldValue = (field, index, opts) => {
+        this.setFieldValue(field, prev => {
+          // invariant( // TODO: bring in invariant
+          //   Array.isArray(prev),
+          //   `Cannot insert a field value into a non-array field. Check that this field's existing value is an array: ${field}.`
+          // )
+          return prev.filter((_d, i) => i !== index);
+        }, opts);
+      };
+
+      this.swapFieldValues = (field, index1, index2) => {
+        this.setFieldValue(field, prev => {
+          const prev1 = prev[index1];
+          const prev2 = prev[index2];
+          return setBy(setBy(prev, [index1], prev2), [index2], prev1);
+        });
+      };
+
+      this.store = new Store(getDefaultFormState({ ...(_opts == null ? void 0 : _opts.defaultState),
+        values: (_opts$defaultValues = _opts == null ? void 0 : _opts.defaultValues) != null ? _opts$defaultValues : _opts == null ? void 0 : (_opts$defaultState = _opts.defaultState) == null ? void 0 : _opts$defaultState.values,
+        isFormValid: !(_opts != null && _opts.validate)
+      }), {
+        onUpdate: next => {
+          // Computed state
+          const fieldMetaValues = Object.values(next.fieldMeta);
+          const isFieldsValidating = fieldMetaValues.some(field => field == null ? void 0 : field.isValidating);
+          const isFieldsValid = !fieldMetaValues.some(field => field == null ? void 0 : field.error);
+          const isTouched = fieldMetaValues.some(field => field == null ? void 0 : field.isTouched);
+          const isValidating = isFieldsValidating || next.isFormValidating;
+          const isFormValid = !next.formError;
+          const isValid = isFieldsValid && isFormValid;
+          const canSubmit = next.submissionAttempts === 0 && !isTouched || !isValidating && !next.isSubmitting && isValid;
+          next = { ...next,
+            isFieldsValidating,
+            isFieldsValid,
+            isFormValid,
+            isValid,
+            canSubmit,
+            isTouched
+          }; // Create a shortcut for the state
+          // Write it back to the store
+
+          this.store.state = next;
+          this.state = next;
+        }
+      });
+      this.state = this.store.state;
+      this.update(_opts || {});
+    }
+
+  }
+
+  var id = 0;
+
+  function _classPrivateFieldLooseKey(name) {
+    return "__private_" + id++ + "_" + name;
+  }
+
+  function _classPrivateFieldLooseBase(receiver, privateKey) {
+    if (!Object.prototype.hasOwnProperty.call(receiver, privateKey)) {
+      throw new TypeError("attempted to use private field on non-instance");
+    }
+
+    return receiver;
+  }
+
+  let uid = 0;
+
+  var _updateStore = /*#__PURE__*/_classPrivateFieldLooseKey("updateStore");
+
+  var _validate = /*#__PURE__*/_classPrivateFieldLooseKey("validate");
+
+  class FieldApi {
+    constructor(_opts) {
+      var _this$getMeta;
+
+      this.options = {};
+
+      this.mount = () => {
+        const info = this.getInfo();
+        info.instances[this.uid] = this;
+        const unsubscribe = this.form.store.subscribe(() => {
+          _classPrivateFieldLooseBase(this, _updateStore)[_updateStore]();
+        });
+        return () => {
+          unsubscribe();
+          delete info.instances[this.uid];
+
+          if (!Object.keys(info.instances).length) {
+            delete this.form.fieldInfo[this.name];
+          }
+        };
+      };
+
+      Object.defineProperty(this, _updateStore, {
+        writable: true,
+        value: () => {
+          this.store.batch(() => {
+            const nextValue = this.getValue();
+            const nextMeta = this.getMeta();
+
+            if (nextValue !== this.state.value) {
+              this.store.setState(prev => ({ ...prev,
+                value: nextValue
+              }));
+            }
+
+            if (nextMeta !== this.state.meta) {
+              this.store.setState(prev => ({ ...prev,
+                meta: nextMeta
+              }));
+            }
+          });
+        }
+      });
+
+      this.update = opts => {
+        this.options = {
+          validateOn: 'change',
+          validateAsyncOn: 'blur',
+          validateAsyncDebounceMs: 0,
+          ...opts
+        }; // Default Value
+
+        if (this.state.value === undefined && this.options.defaultValue !== undefined) {
+          this.setValue(this.options.defaultValue);
+        } // Default Meta
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+
+
+        if (this.getMeta() === undefined) {
+          this.setMeta(this.state.meta);
+        }
+      };
+
+      this.getValue = () => this.form.getFieldValue(this.name);
+
+      this.setValue = (updater, options) => this.form.setFieldValue(this.name, updater, options);
+
+      this.getMeta = () => this.form.getFieldMeta(this.name);
+
+      this.setMeta = updater => this.form.setFieldMeta(this.name, updater);
+
+      this.getInfo = () => this.form.getFieldInfo(this.name);
+
+      this.pushValue = value => this.form.pushFieldValue(this.name, value);
+
+      this.insertValue = (index, value) => this.form.insertFieldValue(this.name, index, value);
+
+      this.removeValue = index => this.form.spliceFieldValue(this.name, index);
+
+      this.swapValues = (aIndex, bIndex) => this.form.swapFieldValues(this.name, aIndex, bIndex);
+
+      this.getSubField = name => new FieldApi({
+        name: this.name + "." + name,
+        form: this.form
+      });
+
+      Object.defineProperty(this, _validate, {
+        writable: true,
+        value: async isAsync => {
+          if (!this.options.validate) {
+            return;
+          }
+
+          this.setMeta(prev => ({ ...prev,
+            isValidating: true
+          })); // Use the validationCount for all field instances to
+          // track freshness of the validation
+
+          const validationCount = (this.getInfo().validationCount || 0) + 1;
+          this.getInfo().validationCount = validationCount;
+
+          const checkLatest = () => validationCount === this.getInfo().validationCount;
+
+          if (!this.getInfo().validationPromise) {
+            this.getInfo().validationPromise = new Promise((resolve, reject) => {
+              this.getInfo().validationResolve = resolve;
+              this.getInfo().validationReject = reject;
+            });
+          }
+
+          try {
+            const rawError = await this.options.validate(this.state.value, this);
+
+            if (checkLatest()) {
+              var _this$getInfo$validat, _this$getInfo;
+
+              const error = (() => {
+                if (rawError) {
+                  if (typeof rawError !== 'string') {
+                    return 'Invalid Form Values';
+                  }
+
+                  return rawError;
+                }
+
+                return undefined;
+              })();
+
+              this.setMeta(prev => ({ ...prev,
+                isValidating: false,
+                error
+              }));
+              (_this$getInfo$validat = (_this$getInfo = this.getInfo()).validationResolve) == null ? void 0 : _this$getInfo$validat.call(_this$getInfo, error);
+            }
+          } catch (error) {
+            if (checkLatest()) {
+              var _this$getInfo$validat2, _this$getInfo2;
+
+              (_this$getInfo$validat2 = (_this$getInfo2 = this.getInfo()).validationReject) == null ? void 0 : _this$getInfo$validat2.call(_this$getInfo2, error);
+              throw error;
+            }
+          } finally {
+            if (checkLatest()) {
+              this.setMeta(prev => ({ ...prev,
+                isValidating: false
+              }));
+              delete this.getInfo().validationPromise;
+            }
+          }
+
+          return this.getInfo().validationPromise;
+        }
+      });
+
+      this.validate = () => _classPrivateFieldLooseBase(this, _validate)[_validate](false);
+
+      this.validateAsync = () => _classPrivateFieldLooseBase(this, _validate)[_validate](true);
+
+      this.getChangeProps = (props = {}) => {
+        return { ...props,
+          value: this.state.value,
+          onChange: value => {
+            this.setValue(value);
+            props.onChange == null ? void 0 : props.onChange(value);
+          },
+          onBlur: e => {
+            this.setMeta(prev => ({ ...prev,
+              isTouched: true
+            }));
+            const {
+              validateOn
+            } = this.options;
+
+            if (validateOn === 'blur' || validateOn.split('-')[0] === 'blur') {
+              this.validate();
+            }
+
+            props.onBlur == null ? void 0 : props.onBlur(e);
+          }
+        };
+      };
+
+      this.getInputProps = (props = {}) => {
+        return { ...props,
+          value: String(this.state.value),
+          onChange: e => {
+            this.setValue(e.target.value);
+            props.onChange == null ? void 0 : props.onChange(e.target.value);
+          },
+          onBlur: this.getChangeProps(props).onBlur
+        };
+      };
+
+      this.form = _opts.form;
+      this.uid = uid++; // Support field prefixing from FieldScope
+
+      let fieldPrefix = '';
+
+      if (this.form.fieldName) {
+        fieldPrefix = this.form.fieldName + ".";
+      }
+
+      this.name = fieldPrefix + _opts.name;
+      this.store = new Store({
+        value: this.getValue(),
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        meta: (_this$getMeta = this.getMeta()) != null ? _this$getMeta : {
+          isValidating: false,
+          isTouched: false,
+          ...this.options.defaultMeta
+        }
+      }, {
+        onUpdate: next => {
+          next.meta.touchedError = next.meta.isTouched ? next.meta.error : undefined; // Do not validate pristine fields
+
+          if (!this.options.validatePristine && !next.meta.isTouched) return; // If validateOn is set to a variation of change, run the validation
+
+          if (this.options.validateOn === 'change' || this.options.validateOn.split('-')[0] === 'change') {
+            try {
+              this.validate();
+            } catch (err) {
+              console.error('An error occurred during validation', err);
+            }
+          }
+
+          this.state = next;
+        }
+      });
+      this.state = this.store.state;
+      this.update(_opts);
+    }
+
+  }
+
+  /**
+   * react-store
+   *
+   * Copyright (c) TanStack
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE.md file in the root directory of this source tree.
+   *
+   * @license MIT
+   */
+
+  function useStore(store, selector = d => d) {
+    const slice = withSelector.useSyncExternalStoreWithSelector(store.subscribe, () => store.state, () => store.state, selector, shallow);
+    return slice;
+  }
+  function shallow(objA, objB) {
+    if (Object.is(objA, objB)) {
+      return true;
+    }
+    if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+      return false;
+    }
+    const keysA = Object.keys(objA);
+    if (keysA.length !== Object.keys(objB).length) {
+      return false;
+    }
+    for (let i = 0; i < keysA.length; i++) {
+      if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  const formContext = /*#__PURE__*/React__namespace.createContext(null);
+  function useFormContext(customFormApi) {
+    const formApi = React__namespace.useContext(formContext);
+
+    if (customFormApi) {
+      return customFormApi;
+    }
+
+    if (!formApi) {
+      throw new Error("You are trying to use the form API outside of a form!");
+    }
+
+    return formApi;
+  }
+
+  function createUseField(formApi) {
+    const useFormField = opts => {
+      return useField({ ...opts,
+        form: formApi
+      });
+    };
+
+    return useFormField;
+  }
+  function useField(opts) {
+    // invariant( // TODO:
+    //   opts.name,
+    //   `useField: A field is required to use this hook. eg, useField('myField', options)`
+    // )
+    // Get the form API either manually or from context
+    const formApi = useFormContext(opts.form);
+    const [fieldApi] = React__namespace.useState(() => new FieldApi({ ...opts,
+      form: formApi
+    })); // Keep options up to date as they are rendered
+
+    fieldApi.update({ ...opts,
+      form: formApi
+    });
+    useStore(fieldApi.store); // Instantiates field meta and removes it when unrendered
+
+    React__namespace.useEffect(() => fieldApi.mount(), [fieldApi]);
+    return fieldApi;
+  }
+
+  function createFieldComponent(formApi) {
+    const ConnectedField = props => /*#__PURE__*/React__namespace.createElement(Field, _extends({}, props, {
+      form: formApi
+    }));
+
+    return ConnectedField;
+  }
+  function Field({
+    children,
+    ...fieldOptions
+  }) {
+    const fieldApi = useField(fieldOptions);
+    return functionalUpdate(children, fieldApi);
+  }
+
+  //
+  function useForm(opts) {
+    const [formApi] = React__default["default"].useState(() => {
+      // @ts-ignore
+      const api = new FormApi(opts || {});
+      api.Form = createFormComponent(api);
+      api.Field = createFieldComponent(api);
+      api.useField = createUseField(api);
+
+      api.useStore = ( // @ts-ignore
+      selector) => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        return useStore(api.store, selector);
+      };
+
+      api.Subscribe = ( // @ts-ignore
+      props) => {
+        return functionalUpdate(props.children, // eslint-disable-next-line react-hooks/rules-of-hooks
+        useStore(api.store, props.selector));
+      };
+
+      return api;
+    }); // React.useEffect(() => formApi.mount(), [])
+
+    return formApi;
+  }
+  function createFormComponent(formApi) {
+    const Form = ({
+      children,
+      noFormElement,
+      ...rest
+    }) => {
+      const isSubmitting = formApi.useStore(state => state.isSubmitting);
+      return /*#__PURE__*/React__default["default"].createElement(formContext.Provider, {
+        value: formApi
+      }, noFormElement ? children : /*#__PURE__*/React__default["default"].createElement("form", _extends({
+        onSubmit: formApi.handleSubmit,
+        disabled: isSubmitting
+      }, rest), formApi.options.debugForm ? /*#__PURE__*/React__default["default"].createElement("div", {
+        style: {
+          margin: '2rem 0'
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        style: {
+          fontWeight: 'bolder'
+        }
+      }, "Form State"), /*#__PURE__*/React__default["default"].createElement("pre", null, /*#__PURE__*/React__default["default"].createElement("code", null, JSON.stringify(formApi, safeStringifyReplace(), 2)))) : null, children));
+    };
+
+    return Form;
+  }
+
+  function safeStringifyReplace() {
+    const set = new Set();
+    return (_key, value) => {
+      if (typeof value === 'object' || Array.isArray(value)) {
+        if (set.has(value)) {
+          return '(circular value)';
+        }
+
+        set.add(value);
+      }
+
+      return typeof value === 'function' ? undefined : value;
+    };
+  }
+
+  exports.Field = Field;
+  exports.createFieldComponent = createFieldComponent;
+  exports.createFormComponent = createFormComponent;
+  exports.createUseField = createUseField;
+  exports.useField = useField;
+  exports.useForm = useForm;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=index.development.js.map