@conform-to/react 1.0.0-pre.0 → 1.0.0-pre.2

package/hooks.mjs

@@ -1,6 +1,6 @@
 import { createForm } from '@conform-to/dom';
 import { useState, useRef, useEffect, useLayoutEffect, useId } from 'react';
-import { useSubjectRef, useFormStore, useFormContext, getBaseMetadata, getFieldMetadata } from './context.mjs';
+import { useSubjectRef, useFormState, getFormMetadata, useRegistry, getFieldMetadata } from './context.mjs';
 
 /**
  * useLayoutEffect is client-only.
@@ -11,26 +11,39 @@ function useFormId(preferredId) {
   var id = useId();
   return preferredId !== null && preferredId !== void 0 ? preferredId : id;
 }
+function useNoValidate() {
+  var defaultNoValidate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+  var [noValidate, setNoValidate] = useState(defaultNoValidate);
+  useSafeLayoutEffect(() => {
+    // This is necessary to fix an issue in strict mode with related to our proxy setup
+    // It avoids the component from being rerendered without re-rendering the child
+    // Which reset the proxy but failed to capture its usage within child component
+    if (!noValidate) {
+      setNoValidate(true);
+    }
+  }, [noValidate]);
+  return noValidate;
+}
 function useForm(options) {
   var formId = useFormId(options.id);
-  var initializeForm = () => createForm(formId, options);
-  var [form, setForm] = useState(initializeForm);
+  var initializeContext = () => createForm(formId, options);
+  var [form, setForm] = useState(initializeContext);
 
   // If id changes, reinitialize the form immediately
   if (formId !== form.id) {
-    setForm(initializeForm);
+    setForm(initializeContext);
   }
   var optionsRef = useRef(options);
-  var metadata = useFormMetadata({
-    formId,
-    context: form,
-    defaultNoValidate: options.defaultNoValidate
-  });
-  var fields = useFieldset({
-    formId,
-    context: form
-  });
-  useSafeLayoutEffect(() => form.initialize(), [form]);
+  useSafeLayoutEffect(() => {
+    document.addEventListener('input', form.input);
+    document.addEventListener('focusout', form.blur);
+    document.addEventListener('reset', form.reset);
+    return () => {
+      document.removeEventListener('input', form.input);
+      document.removeEventListener('focusout', form.blur);
+      document.removeEventListener('reset', form.reset);
+    };
+  }, [form]);
   useSafeLayoutEffect(() => {
     if (options.lastResult === optionsRef.current.lastResult) {
       // If there is no change, do nothing
@@ -47,108 +60,40 @@ function useForm(options) {
     optionsRef.current = options;
     form.update(options);
   });
+  var subjectRef = useSubjectRef();
+  var state = useFormState(form, subjectRef);
+  var noValidate = useNoValidate(options.defaultNoValidate);
+  var meta = getFormMetadata(formId, state, subjectRef, form, noValidate);
   return {
-    context: form,
-    fields,
-    form: metadata
+    meta,
+    fields: meta.getFieldset()
   };
 }
 function useFormMetadata(options) {
-  var _options$defaultNoVal;
-  var subjectRef = useSubjectRef();
-  var form = useFormStore(options.formId, options.context);
-  var context = useFormContext(form, subjectRef);
-  var metadata = getBaseMetadata(options.formId, context, {
-    subjectRef
-  });
-  var [noValidate, setNoValidate] = useState((_options$defaultNoVal = options.defaultNoValidate) !== null && _options$defaultNoVal !== void 0 ? _options$defaultNoVal : true);
-  useSafeLayoutEffect(() => {
-    // This is necessary to fix an issue in strict mode with related to our proxy setup
-    // It avoids the component from being rerendered without re-rendering the child
-    // Which reset the proxy but failed to capture its usage within child component
-    if (!noValidate) {
-      setNoValidate(true);
-    }
-  }, [noValidate]);
-  return new Proxy(metadata, {
-    get(target, key, receiver) {
-      switch (key) {
-        case 'onSubmit':
-          return event => {
-            var submitEvent = event.nativeEvent;
-            var result = form.submit(submitEvent);
-            if (submitEvent.defaultPrevented) {
-              event.preventDefault();
-            }
-            return result;
-          };
-        case 'onReset':
-          return event => form.reset(event.nativeEvent);
-        case 'noValidate':
-          return noValidate;
-      }
-      return Reflect.get(target, key, receiver);
-    }
-  });
-}
-function useFieldset(options) {
   var subjectRef = useSubjectRef();
-  var form = useFormStore(options.formId, options.context);
-  var context = useFormContext(form, subjectRef);
-  return new Proxy({}, {
-    get(target, prop, receiver) {
-      var getMetadata = key => getFieldMetadata(options.formId, context, {
-        name: options.name,
-        key: key,
-        subjectRef
-      });
-
-      // To support array destructuring
-      if (prop === Symbol.iterator) {
-        var _index = 0;
-        return () => ({
-          next: () => ({
-            value: getMetadata(_index++),
-            done: false
-          })
-        });
-      }
-      var index = Number(prop);
-      if (typeof prop === 'string') {
-        return getMetadata(Number.isNaN(index) ? prop : index);
-      }
-      return Reflect.get(target, prop, receiver);
-    }
-  });
-}
-function useFieldList(options) {
-  var _context$initialValue;
-  var subjectRef = useSubjectRef({
-    initialValue: {
-      name: [options.name]
-    }
-  });
-  var form = useFormStore(options.formId, options.context);
-  var context = useFormContext(form, subjectRef);
-  var initialValue = (_context$initialValue = context.initialValue[options.name]) !== null && _context$initialValue !== void 0 ? _context$initialValue : [];
-  if (!Array.isArray(initialValue)) {
-    throw new Error('The initial value at the given name is not a list');
-  }
-  return Array(initialValue.length).fill(0).map((_, index) => getFieldMetadata(options.formId, context, {
-    name: options.name,
-    key: index,
-    subjectRef
-  }));
+  var form = useRegistry(options.formId);
+  var state = useFormState(form, subjectRef);
+  var noValidate = useNoValidate(options.defaultNoValidate);
+  return getFormMetadata(options.formId, state, subjectRef, form, noValidate);
 }
 function useField(options) {
   var subjectRef = useSubjectRef();
-  var form = useFormStore(options.formId, options.context);
-  var context = useFormContext(form, subjectRef);
-  var metadata = getFieldMetadata(options.formId, context, {
-    name: options.name,
-    subjectRef
-  });
-  return metadata;
+  var context = useRegistry(options.formId);
+  var state = useFormState(context, subjectRef);
+  var meta = getFieldMetadata(options.formId, state, subjectRef, options.name);
+  var form = getFormMetadata(options.formId, state, subjectRef, context, false);
+  return {
+    meta,
+    // @ts-expect-error The types is used as a hint only
+    get fields() {
+      return meta.getFieldset();
+    },
+    // @ts-expect-error The types is used as a hint only
+    get list() {
+      return meta.getFieldList();
+    },
+    form
+  };
 }
 
-export { useField, useFieldList, useFieldset, useForm, useFormId, useFormMetadata, useSafeLayoutEffect };
+export { useField, useForm, useFormId, useFormMetadata, useNoValidate, useSafeLayoutEffect };

package/index.d.ts

@@ -1,6 +1,6 @@
-export { type Submission, type FieldName, requestIntent, isFieldElement, } from '@conform-to/dom';
-export { type Field, type FieldMetadata as FieldConfig, FormProvider, FormStateInput, } from './context';
-export { useForm, useFormMetadata, useFieldset, useFieldList, useField, } from './hooks';
-export { useInputEvent } from './integrations';
-export * as conform from './helpers';
-export * as intent from './intent';
+export { type Submission, type SubmissionResult, type Intent, type FormId, type FieldName, requestIntent, requestSubmit, isFieldElement, intent, } from '@conform-to/dom';
+export { type FieldProps, type FieldMetadata, type FormMetadata, FormProvider, FormStateInput, } from './context';
+export { useForm, useFormMetadata, useField } from './hooks';
+export { useInputControl } from './integrations';
+export { validateConstraint } from './validitystate';
+export { getFormProps, getFieldsetProps, getInputProps, getSelectProps, getTextareaProps, getCollectionProps, getControlButtonProps, } from './helpers';

package/index.js

@@ -6,11 +6,15 @@ var dom = require('@conform-to/dom');
 var context = require('./context.js');
 var hooks = require('./hooks.js');
 var integrations = require('./integrations.js');
+var validitystate = require('./validitystate.js');
 var helpers = require('./helpers.js');
-var intent = require('./intent.js');
 
 
 
+Object.defineProperty(exports, 'intent', {
+	enumerable: true,
+	get: function () { return dom.intent; }
+});
 Object.defineProperty(exports, 'isFieldElement', {
 	enumerable: true,
 	get: function () { return dom.isFieldElement; }
@@ -19,13 +23,21 @@ Object.defineProperty(exports, 'requestIntent', {
 	enumerable: true,
 	get: function () { return dom.requestIntent; }
 });
+Object.defineProperty(exports, 'requestSubmit', {
+	enumerable: true,
+	get: function () { return dom.requestSubmit; }
+});
 exports.FormProvider = context.FormProvider;
 exports.FormStateInput = context.FormStateInput;
 exports.useField = hooks.useField;
-exports.useFieldList = hooks.useFieldList;
-exports.useFieldset = hooks.useFieldset;
 exports.useForm = hooks.useForm;
 exports.useFormMetadata = hooks.useFormMetadata;
-exports.useInputEvent = integrations.useInputEvent;
-exports.conform = helpers;
-exports.intent = intent;
+exports.useInputControl = integrations.useInputControl;
+exports.validateConstraint = validitystate.validateConstraint;
+exports.getCollectionProps = helpers.getCollectionProps;
+exports.getControlButtonProps = helpers.getControlButtonProps;
+exports.getFieldsetProps = helpers.getFieldsetProps;
+exports.getFormProps = helpers.getFormProps;
+exports.getInputProps = helpers.getInputProps;
+exports.getSelectProps = helpers.getSelectProps;
+exports.getTextareaProps = helpers.getTextareaProps;

package/index.mjs

@@ -1,8 +1,6 @@
-export { isFieldElement, requestIntent } from '@conform-to/dom';
+export { intent, isFieldElement, requestIntent, requestSubmit } from '@conform-to/dom';
 export { FormProvider, FormStateInput } from './context.mjs';
-export { useField, useFieldList, useFieldset, useForm, useFormMetadata } from './hooks.mjs';
-export { useInputEvent } from './integrations.mjs';
-import * as helpers from './helpers.mjs';
-export { helpers as conform };
-import * as intent from './intent.mjs';
-export { intent };
+export { useField, useForm, useFormMetadata } from './hooks.mjs';
+export { useInputControl } from './integrations.mjs';
+export { validateConstraint } from './validitystate.mjs';
+export { getCollectionProps, getControlButtonProps, getFieldsetProps, getFormProps, getInputProps, getSelectProps, getTextareaProps } from './helpers.mjs';

package/integrations.d.ts

@@ -1,23 +1,34 @@
-import { type FieldElement } from '@conform-to/dom';
-import { type RefObject } from 'react';
-export type InputControl = {
-    change: (eventOrValue: {
-        target: {
-            value: string;
-        };
-    } | string | boolean) => void;
+import { type FieldElement, type FormValue, FieldName, FormId } from '@conform-to/dom';
+import { type FieldMetadata } from './context';
+export type InputControl<Value> = {
+    value: Value;
+    change: (value: Value) => void;
     focus: () => void;
     blur: () => void;
 };
-/**
- * Returns a ref object and a set of helpers that dispatch corresponding dom event.
- *
- * @see https://conform.guide/api/react#useinputevent
- */
-export declare function useInputEvent(options: {
-    ref: RefObject<FieldElement> | (() => Element | RadioNodeList | FieldElement | null | undefined);
-    onInput?: (event: Event) => void;
-    onFocus?: (event: FocusEvent) => void;
-    onBlur?: (event: FocusEvent) => void;
-    onReset?: (event: Event) => void;
-}): InputControl;
+export declare function getFieldElement(formId: string, name: string, match?: (element: FieldElement) => boolean): FieldElement | null;
+export declare function getEventTarget(formId: string, name: string): FieldElement;
+export declare function useInputControl<Schema>(metadata: FieldMetadata<Schema, any, any>, options?: {
+    onFocus?: (event: Event) => void;
+}): InputControl<string | undefined>;
+export declare function useInputControl<Schema>(options: {
+    key?: string;
+    name: FieldName<Schema>;
+    formId: FormId<any, any>;
+    initialValue: FormValue<Schema>;
+    onFocus?: (event: Event) => void;
+}): InputControl<string | undefined>;
+export declare function useInputControl<Schema, Value>(metadata: FieldMetadata<Schema, any, any>, options: {
+    initialize: (value: FormValue<Schema> | undefined) => Value;
+    serialize?: (value: Value) => string;
+    onFocus?: (event: Event) => void;
+}): InputControl<Value>;
+export declare function useInputControl<Schema, Value>(options: {
+    key?: string;
+    name: FieldName<Schema>;
+    formId: FormId<any, any>;
+    initialValue: FormValue<Schema>;
+    initialize: (value: FormValue<Schema> | undefined) => Value;
+    serialize?: (value: Value) => string;
+    onFocus?: (event: Event) => void;
+}): InputControl<Value>;

package/integrations.js

@@ -2,90 +2,104 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
 var dom = require('@conform-to/dom');
 var react = require('react');
-var hooks = require('./hooks.js');
 
-/**
- * Returns a ref object and a set of helpers that dispatch corresponding dom event.
- *
- * @see https://conform.guide/api/react#useinputevent
- */
-function useInputEvent(options) {
-  var optionsRef = react.useRef(options);
+function getFieldElement(formId, name) {
+  var _document$forms$named;
+  var match = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : () => true;
+  var element = (_document$forms$named = document.forms.namedItem(formId)) === null || _document$forms$named === void 0 ? void 0 : _document$forms$named.elements.namedItem(name);
+  if (element) {
+    var items = element instanceof Element ? [element] : Array.from(element.values());
+    for (var item of items) {
+      if (dom.isFieldElement(item) && match(item)) {
+        return item;
+      }
+    }
+  }
+  return null;
+}
+function getEventTarget(formId, name) {
+  var element = getFieldElement(formId, name);
+  if (element) {
+    return element;
+  }
+  var form = document.forms.namedItem(formId);
+  var input = document.createElement('input');
+  input.type = 'hidden';
+  input.name = name;
+  form === null || form === void 0 ? void 0 : form.appendChild(input);
+  return input;
+}
+function useInputControl(metadata, options) {
+  var _options$initialize, _options$serialize, _options$onFocus;
   var eventDispatched = react.useRef({
-    onInput: false,
-    onFocus: false,
-    onBlur: false
+    change: false,
+    focus: false,
+    blur: false
   });
-  hooks.useSafeLayoutEffect(() => {
-    optionsRef.current = options;
+  var [key, setKey] = react.useState(metadata.key);
+  var initialize = (_options$initialize = options === null || options === void 0 ? void 0 : options.initialize) !== null && _options$initialize !== void 0 ? _options$initialize : 'initialize' in metadata && metadata.initialize ? metadata.initialize : value => value === null || value === void 0 ? void 0 : value.toString();
+  var serialize = (_options$serialize = options === null || options === void 0 ? void 0 : options.serialize) !== null && _options$serialize !== void 0 ? _options$serialize : 'serialize' in metadata && metadata.serialize ? metadata.serialize : undefined;
+  var onFocus = (_options$onFocus = options === null || options === void 0 ? void 0 : options.onFocus) !== null && _options$onFocus !== void 0 ? _options$onFocus : 'onFocus' in metadata ? metadata.onFocus : undefined;
+  var optionsRef = react.useRef({
+    initialize,
+    serialize,
+    onFocus
   });
-  hooks.useSafeLayoutEffect(() => {
+  var [value, setValue] = react.useState(() => initialize(metadata.initialValue));
+  if (key !== metadata.key) {
+    setValue(initialize(metadata.initialValue));
+    setKey(metadata.key);
+  }
+  react.useEffect(() => {
+    optionsRef.current = {
+      initialize,
+      serialize,
+      onFocus
+    };
+  });
+  react.useEffect(() => {
     var createEventListener = listener => {
       return event => {
-        var _optionsRef$current, _optionsRef$current2, _optionsRef$current3;
-        var element = typeof ((_optionsRef$current = optionsRef.current) === null || _optionsRef$current === void 0 ? void 0 : _optionsRef$current.ref) === 'function' ? (_optionsRef$current2 = optionsRef.current) === null || _optionsRef$current2 === void 0 ? void 0 : _optionsRef$current2.ref() : (_optionsRef$current3 = optionsRef.current) === null || _optionsRef$current3 === void 0 ? void 0 : _optionsRef$current3.ref.current;
-        if (dom.isFieldElement(element) && (listener === 'onReset' ? event.target === element.form : event.target === element)) {
-          var _optionsRef$current4, _optionsRef$current4$;
-          if (listener !== 'onReset') {
-            eventDispatched.current[listener] = true;
+        var element = getFieldElement(metadata.formId, metadata.name, element => element === event.target);
+        if (element) {
+          if (listener === 'focus') {
+            var _optionsRef$current, _optionsRef$current$o;
+            (_optionsRef$current = optionsRef.current) === null || _optionsRef$current === void 0 || (_optionsRef$current$o = _optionsRef$current.onFocus) === null || _optionsRef$current$o === void 0 ? void 0 : _optionsRef$current$o.call(_optionsRef$current, event);
           }
-          (_optionsRef$current4 = optionsRef.current) === null || _optionsRef$current4 === void 0 || (_optionsRef$current4$ = _optionsRef$current4[listener]) === null || _optionsRef$current4$ === void 0 ? void 0 : _optionsRef$current4$.call(_optionsRef$current4, event);
+          eventDispatched.current[listener] = true;
         }
       };
     };
-    var inputHandler = createEventListener('onInput');
-    var focusHandler = createEventListener('onFocus');
-    var blurHandler = createEventListener('onBlur');
-    var resetHandler = createEventListener('onReset');
-
-    // focus/blur event does not bubble
+    var inputHandler = createEventListener('change');
+    var focusHandler = createEventListener('focus');
+    var blurHandler = createEventListener('blur');
     document.addEventListener('input', inputHandler, true);
-    document.addEventListener('focus', focusHandler, true);
-    document.addEventListener('blur', blurHandler, true);
-    document.addEventListener('reset', resetHandler);
+    document.addEventListener('focusin', focusHandler, true);
+    document.addEventListener('focusout', blurHandler, true);
     return () => {
       document.removeEventListener('input', inputHandler, true);
-      document.removeEventListener('focus', focusHandler, true);
-      document.removeEventListener('blur', blurHandler, true);
-      document.removeEventListener('reset', resetHandler);
-    };
-  }, []);
-  var control = react.useMemo(() => {
-    var dispatch = (listener, fn) => {
-      if (!eventDispatched.current[listener]) {
-        var _optionsRef$current5, _optionsRef$current6, _optionsRef$current7;
-        var _element = typeof ((_optionsRef$current5 = optionsRef.current) === null || _optionsRef$current5 === void 0 ? void 0 : _optionsRef$current5.ref) === 'function' ? (_optionsRef$current6 = optionsRef.current) === null || _optionsRef$current6 === void 0 ? void 0 : _optionsRef$current6.ref() : (_optionsRef$current7 = optionsRef.current) === null || _optionsRef$current7 === void 0 ? void 0 : _optionsRef$current7.ref.current;
-        if (!dom.isFieldElement(_element)) {
-          // eslint-disable-next-line no-console
-          console.warn('Failed to dispatch event; is the input mounted?');
-          return;
-        }
-
-        // To avoid recursion
-        eventDispatched.current[listener] = true;
-        fn(_element);
-      }
-      eventDispatched.current[listener] = false;
+      document.removeEventListener('focusin', focusHandler, true);
+      document.removeEventListener('focusout', blurHandler, true);
     };
+  }, [metadata.formId, metadata.name]);
+  var handlers = react.useMemo(() => {
     return {
-      change(eventOrValue) {
-        dispatch('onInput', element => {
-          if (element instanceof HTMLInputElement && (element.type === 'checkbox' || element.type === 'radio')) {
-            if (typeof eventOrValue !== 'boolean') {
-              throw new Error('You should pass a boolean when changing a checkbox or radio input');
+      change(value) {
+        if (!eventDispatched.current.change) {
+          var _ref, _optionsRef$current$s, _optionsRef$current$s2, _optionsRef$current2;
+          var _element = getEventTarget(metadata.formId, metadata.name);
+          var serializedValue = (_ref = (_optionsRef$current$s = (_optionsRef$current$s2 = (_optionsRef$current2 = optionsRef.current).serialize) === null || _optionsRef$current$s2 === void 0 ? void 0 : _optionsRef$current$s2.call(_optionsRef$current2, value)) !== null && _optionsRef$current$s !== void 0 ? _optionsRef$current$s : value === null || value === void 0 ? void 0 : value.toString()) !== null && _ref !== void 0 ? _ref : '';
+          eventDispatched.current.change = true;
+          if (_element instanceof HTMLInputElement && (_element.type === 'checkbox' || _element.type === 'radio')) {
+            if (_element.checked ? _element.value !== serializedValue : _element.value === serializedValue) {
+              _element.click();
             }
-            element.checked = eventOrValue;
           } else {
-            if (typeof eventOrValue === 'boolean') {
-              throw new Error('You can pass a boolean only when changing a checkbox or radio input');
-            }
-            var value = typeof eventOrValue === 'string' ? eventOrValue : eventOrValue.target.value;
-
-            // No change event will triggered on React if `element.value` is updated
-            // before dispatching the event
-            if (element.value !== value) {
+            // No change event will be triggered on React if `element.value` is already updated
+            if (_element.value !== serializedValue) {
               /**
                * Triggering react custom change event
                * Solution based on dom-testing-library
@@ -94,52 +108,64 @@ function useInputEvent(options) {
                */
               var {
                 set: valueSetter
-              } = Object.getOwnPropertyDescriptor(element, 'value') || {};
-              var prototype = Object.getPrototypeOf(element);
+              } = Object.getOwnPropertyDescriptor(_element, 'value') || {};
+              var prototype = Object.getPrototypeOf(_element);
               var {
                 set: prototypeValueSetter
               } = Object.getOwnPropertyDescriptor(prototype, 'value') || {};
               if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
-                prototypeValueSetter.call(element, value);
+                prototypeValueSetter.call(_element, value);
               } else {
                 if (valueSetter) {
-                  valueSetter.call(element, value);
+                  valueSetter.call(_element, value);
                 } else {
                   throw new Error('The given element does not have a value setter');
                 }
               }
             }
-          }
 
-          // Dispatch input event with the updated input value
-          element.dispatchEvent(new InputEvent('input', {
-            bubbles: true
-          }));
-          // Dispatch change event (necessary for select to update the selected option)
-          element.dispatchEvent(new Event('change', {
-            bubbles: true
-          }));
-        });
+            // Dispatch input event with the updated input value
+            _element.dispatchEvent(new InputEvent('input', {
+              bubbles: true
+            }));
+            // Dispatch change event (necessary for select to update the selected option)
+            _element.dispatchEvent(new Event('change', {
+              bubbles: true
+            }));
+          }
+        }
+        setValue(value);
+        eventDispatched.current.change = false;
       },
       focus() {
-        dispatch('onFocus', element => {
-          element.dispatchEvent(new FocusEvent('focusin', {
+        if (!eventDispatched.current.focus) {
+          var _element2 = getEventTarget(metadata.formId, metadata.name);
+          eventDispatched.current.focus = true;
+          _element2.dispatchEvent(new FocusEvent('focusin', {
             bubbles: true
           }));
-          element.dispatchEvent(new FocusEvent('focus'));
-        });
+          _element2.dispatchEvent(new FocusEvent('focus'));
+        }
+        eventDispatched.current.focus = false;
       },
       blur() {
-        dispatch('onBlur', element => {
-          element.dispatchEvent(new FocusEvent('focusout', {
+        if (!eventDispatched.current.blur) {
+          var _element3 = getEventTarget(metadata.formId, metadata.name);
+          eventDispatched.current.blur = true;
+          _element3.dispatchEvent(new FocusEvent('focusout', {
             bubbles: true
           }));
-          element.dispatchEvent(new FocusEvent('blur'));
-        });
+          _element3.dispatchEvent(new FocusEvent('blur'));
+        }
+        eventDispatched.current.blur = false;
       }
     };
-  }, [optionsRef]);
-  return control;
+  }, [metadata.formId, metadata.name]);
+  return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, handlers), {}, {
+    value
+  });
 }
 
-exports.useInputEvent = useInputEvent;
+exports.getEventTarget = getEventTarget;
+exports.getFieldElement = getFieldElement;
+exports.useInputControl = useInputControl;