@conform-to/react 1.6.1 → 1.7.0

package/README.md

@@ -7,7 +7,7 @@
  ╚══════╝  ╚═════╝  ╚═╝  ╚══╝ ╚═╝        ╚═════╝  ╚═╝   ╚═╝ ╚═╝   ╚═╝
 ```
 
-Version 1.6.1 / License MIT / Copyright (c) 2024 Edmund Hung
+Version 1.7.0 / License MIT / Copyright (c) 2024 Edmund Hung
 
 A type-safe form validation library utilizing web fundamentals to progressively enhance HTML Forms with full support for server frameworks like Remix and Next.js.
 

package/dist/context.d.ts

@@ -10,6 +10,9 @@ export type Metadata<Schema, FormSchema extends Record<string, unknown>, FormErr
     errorId: string;
     descriptionId: string;
     name: FieldName<Schema, FormSchema, FormError>;
+    defaultValue: string | undefined;
+    defaultOptions: string[] | undefined;
+    defaultChecked: boolean | undefined;
     initialValue: FormValue<Schema>;
     value: FormValue<Schema>;
     errors: FormError | undefined;

package/dist/context.js

@@ -74,6 +74,29 @@ function getMetadata(context, subjectRef, stateSnapshot) {
     name,
     errorId: "".concat(id, "-error"),
     descriptionId: "".concat(id, "-description"),
+    get defaultValue() {
+      var initialValue = this.initialValue;
+      if (typeof initialValue === 'string') {
+        return initialValue;
+      }
+      if (Array.isArray(initialValue)) {
+        return initialValue[0];
+      }
+    },
+    get defaultOptions() {
+      var initialValue = this.initialValue;
+      if (typeof initialValue === 'string') {
+        return [initialValue];
+      }
+      if (Array.isArray(initialValue) && initialValue.every(item => typeof item === 'string')) {
+        return initialValue;
+      }
+    },
+    get defaultChecked() {
+      if (this.initialValue === 'on') {
+        return true;
+      }
+    },
     get initialValue() {
       return state.initialValue[name];
     },

package/dist/context.mjs

@@ -70,6 +70,29 @@ function getMetadata(context, subjectRef, stateSnapshot) {
     name,
     errorId: "".concat(id, "-error"),
     descriptionId: "".concat(id, "-description"),
+    get defaultValue() {
+      var initialValue = this.initialValue;
+      if (typeof initialValue === 'string') {
+        return initialValue;
+      }
+      if (Array.isArray(initialValue)) {
+        return initialValue[0];
+      }
+    },
+    get defaultOptions() {
+      var initialValue = this.initialValue;
+      if (typeof initialValue === 'string') {
+        return [initialValue];
+      }
+      if (Array.isArray(initialValue) && initialValue.every(item => typeof item === 'string')) {
+        return initialValue;
+      }
+    },
+    get defaultChecked() {
+      if (this.initialValue === 'on') {
+        return true;
+      }
+    },
     get initialValue() {
       return state.initialValue[name];
     },

package/dist/future/hooks.d.ts

@@ -0,0 +1,90 @@
+export declare const formObserver: {
+    onFieldUpdate(callback: (event: {
+        type: "input" | "reset" | "mutation";
+        target: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+    }) => void): () => void;
+    onFormUpdate(callback: (event: {
+        type: "submit" | "input" | "reset" | "mutation";
+        target: HTMLFormElement;
+        submitter?: HTMLInputElement | HTMLButtonElement | null;
+    }) => void): () => void;
+    dispose(): void;
+};
+export type Control = {
+    /**
+     * Current value of the base input. Undefined if the registered input
+     * is a multi-select, file input, or checkbox group.
+     */
+    value: string | undefined;
+    /**
+     * Selected options of the base input. Defined only when the registered input
+     * is a multi-select or checkbox group.
+     */
+    checked: boolean | undefined;
+    /**
+     * Checked state of the base input. Defined only when the registered input
+     * is a single checkbox or radio input.
+     */
+    options: string[] | undefined;
+    /**
+     * Selected files of the base input. Defined only when the registered input
+     * is a file input.
+     */
+    files: File[] | undefined;
+    /**
+     * Registers the base input element(s). Accepts a single input or an array for groups.
+     */
+    register: (element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLCollectionOf<HTMLInputElement> | NodeListOf<HTMLInputElement> | null | undefined) => void;
+    /**
+     * Programmatically updates the input value and emits
+     * both [change](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) and
+     * [input](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event) events.
+     */
+    change(value: string | string[] | boolean | File | File[] | FileList): void;
+    /**
+     * Emits [blur](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event) and
+     * [focusout](https://developer.mozilla.org/en-US/docs/Web/API/Element/focusout_event) events.
+     * Does not actually move focus.
+     */
+    focus(): void;
+    /**
+     * Emits [focus](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event) and
+     * [focusin](https://developer.mozilla.org/en-US/docs/Web/API/Element/focusin_event) events.
+     * This does not move the actual keyboard focus to the input. Use `element.focus()` instead
+     * if you want to move focus to the input.
+     */
+    blur(): void;
+};
+/**
+ * A React hook that lets you sync the state of an input and dispatch native form events from it.
+ * This is useful when emulating native input behavior — typically by rendering a hidden base input
+ * and syncing it with a custom input.
+ *
+ * @example
+ * ```ts
+ * const control = useControl(options);
+ * ```
+ */
+export declare function useControl(options?: {
+    /**
+     * The initial value of the base input. It will be used to set the value
+     * when the input is first registered.
+     */
+    defaultValue?: string | string[] | File | File[] | null | undefined;
+    /**
+     * Whether the base input should be checked by default. It will be applied
+     * when the input is first registered.
+     */
+    defaultChecked?: boolean | undefined;
+    /**
+     * The value of a checkbox or radio input when checked. This sets the
+     * value attribute of the base input.
+     */
+    value?: string;
+    /**
+     * A callback function that is triggered when the base input is focused.
+     * Use this to delegate focus to a custom input.
+     */
+    onFocus?: () => void;
+}): Control;
+//# sourceMappingURL=hooks.d.ts.map

package/dist/future/hooks.js

@@ -0,0 +1,179 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dom = require('@conform-to/dom');
+var react = require('react');
+var util = require('./util.js');
+
+var formObserver = dom.unstable_createGlobalFormsObserver();
+/**
+ * A React hook that lets you sync the state of an input and dispatch native form events from it.
+ * This is useful when emulating native input behavior — typically by rendering a hidden base input
+ * and syncing it with a custom input.
+ *
+ * @example
+ * ```ts
+ * const control = useControl(options);
+ * ```
+ */
+function useControl(options) {
+  var inputRef = react.useRef(null);
+  var eventDispatched = react.useRef({});
+  var defaultSnapshot = util.getDefaultSnapshot(options === null || options === void 0 ? void 0 : options.defaultValue, options === null || options === void 0 ? void 0 : options.defaultChecked, options === null || options === void 0 ? void 0 : options.value);
+  var snapshotRef = react.useRef(defaultSnapshot);
+  var optionsRef = react.useRef(options);
+  react.useEffect(() => {
+    optionsRef.current = options;
+  });
+
+  // This is necessary to ensure that input is re-registered
+  // if the onFocus handler changes
+  var shouldHandleFocus = typeof (options === null || options === void 0 ? void 0 : options.onFocus) === 'function';
+  var snapshot = react.useSyncExternalStore(react.useCallback(callback => formObserver.onFieldUpdate(event => {
+    var input = event.target;
+    if (Array.isArray(inputRef.current) ? inputRef.current.some(item => item === input) : inputRef.current === input) {
+      callback();
+    }
+  }), []), () => {
+    var input = inputRef.current;
+    var prev = snapshotRef.current;
+    var next = !input ? defaultSnapshot : Array.isArray(input) ? {
+      value: util.getRadioGroupValue(input),
+      options: util.getCheckboxGroupValue(input)
+    } : util.getInputSnapshot(input);
+    if (dom.unstable_deepEqual(prev, next)) {
+      return prev;
+    }
+    snapshotRef.current = next;
+    return next;
+  }, () => snapshotRef.current);
+  react.useEffect(() => {
+    var createEventListener = listener => {
+      return event => {
+        if (Array.isArray(inputRef.current) ? inputRef.current.some(item => item === event.target) : inputRef.current === event.target) {
+          var timer = eventDispatched.current[listener];
+          if (timer) {
+            clearTimeout(timer);
+          }
+          eventDispatched.current[listener] = window.setTimeout(() => {
+            eventDispatched.current[listener] = undefined;
+          });
+          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 || _optionsRef$current$o.call(_optionsRef$current);
+          }
+        }
+      };
+    };
+    var inputHandler = createEventListener('change');
+    var focusHandler = createEventListener('focus');
+    var blurHandler = createEventListener('blur');
+    document.addEventListener('input', inputHandler, true);
+    document.addEventListener('focusin', focusHandler, true);
+    document.addEventListener('focusout', blurHandler, true);
+    return () => {
+      document.removeEventListener('input', inputHandler, true);
+      document.removeEventListener('focusin', focusHandler, true);
+      document.removeEventListener('focusout', blurHandler, true);
+    };
+  }, []);
+  return {
+    value: snapshot.value,
+    checked: snapshot.checked,
+    options: snapshot.options,
+    files: snapshot.files,
+    register: react.useCallback(element => {
+      if (!element) {
+        inputRef.current = null;
+      } else if (dom.isFieldElement(element)) {
+        inputRef.current = element;
+        if (shouldHandleFocus) {
+          util.focusable(element);
+        }
+        if (element.type === 'checkbox' || element.type === 'radio') {
+          var _optionsRef$current$v, _optionsRef$current2;
+          // React set the value as empty string incorrectly when the value is undefined
+          // This make sure the checkbox value falls back to the default value "on" properly
+          // @see https://github.com/facebook/react/issues/17590
+          element.value = (_optionsRef$current$v = (_optionsRef$current2 = optionsRef.current) === null || _optionsRef$current2 === void 0 ? void 0 : _optionsRef$current2.value) !== null && _optionsRef$current$v !== void 0 ? _optionsRef$current$v : 'on';
+        }
+        util.initializeField(element, optionsRef.current);
+      } else {
+        var _inputs$0$name, _inputs$, _inputs$0$type, _inputs$2;
+        var inputs = Array.from(element);
+        var name = (_inputs$0$name = (_inputs$ = inputs[0]) === null || _inputs$ === void 0 ? void 0 : _inputs$.name) !== null && _inputs$0$name !== void 0 ? _inputs$0$name : '';
+        var type = (_inputs$0$type = (_inputs$2 = inputs[0]) === null || _inputs$2 === void 0 ? void 0 : _inputs$2.type) !== null && _inputs$0$type !== void 0 ? _inputs$0$type : '';
+        if (!name || !(type === 'checkbox' || type === 'radio') || !inputs.every(input => input.name === name && input.type === type)) {
+          throw new Error('You can only register a checkbox or radio group with the same name');
+        }
+        inputRef.current = inputs;
+        for (var input of inputs) {
+          var _optionsRef$current3;
+          if (shouldHandleFocus) {
+            util.focusable(input);
+          }
+          util.initializeField(input, {
+            // We will not be uitlizing defaultChecked / value on checkbox / radio group
+            defaultValue: (_optionsRef$current3 = optionsRef.current) === null || _optionsRef$current3 === void 0 ? void 0 : _optionsRef$current3.defaultValue
+          });
+        }
+      }
+    }, [shouldHandleFocus]),
+    change: react.useCallback(value => {
+      if (!eventDispatched.current.change) {
+        var _inputRef$current;
+        var _element = Array.isArray(inputRef.current) ? (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.find(input => {
+          var wasChecked = input.checked;
+          var isChecked = Array.isArray(value) ? value.some(item => item === input.value) : input.value === value;
+          switch (input.type) {
+            case 'checkbox':
+              // We assume that only one checkbox can be checked at a time
+              // So we will pick the first element with checked state changed
+              return wasChecked !== isChecked;
+            case 'radio':
+              // We cannot uncheck a radio button
+              // So we will pick the first element that should be checked
+              return isChecked;
+            default:
+              return false;
+          }
+        }) : inputRef.current;
+        if (_element) {
+          dom.unstable_change(_element, typeof value === 'boolean' ? value ? _element.value : null : value);
+        }
+      }
+      if (eventDispatched.current.change) {
+        clearTimeout(eventDispatched.current.change);
+      }
+      eventDispatched.current.change = undefined;
+    }, []),
+    focus: react.useCallback(() => {
+      if (!eventDispatched.current.focus) {
+        var _element2 = Array.isArray(inputRef.current) ? inputRef.current[0] : inputRef.current;
+        if (_element2) {
+          dom.unstable_focus(_element2);
+        }
+      }
+      if (eventDispatched.current.focus) {
+        clearTimeout(eventDispatched.current.focus);
+      }
+      eventDispatched.current.focus = undefined;
+    }, []),
+    blur: react.useCallback(() => {
+      if (!eventDispatched.current.blur) {
+        var _element3 = Array.isArray(inputRef.current) ? inputRef.current[0] : inputRef.current;
+        if (_element3) {
+          dom.unstable_blur(_element3);
+        }
+      }
+      if (eventDispatched.current.blur) {
+        clearTimeout(eventDispatched.current.blur);
+      }
+      eventDispatched.current.blur = undefined;
+    }, [])
+  };
+}
+
+exports.formObserver = formObserver;
+exports.useControl = useControl;

package/dist/future/hooks.mjs

@@ -0,0 +1,174 @@
+import { unstable_createGlobalFormsObserver, unstable_deepEqual, isFieldElement, unstable_change, unstable_focus, unstable_blur } from '@conform-to/dom';
+import { useRef, useEffect, useSyncExternalStore, useCallback } from 'react';
+import { getDefaultSnapshot, getRadioGroupValue, getCheckboxGroupValue, getInputSnapshot, focusable, initializeField } from './util.mjs';
+
+var formObserver = unstable_createGlobalFormsObserver();
+/**
+ * A React hook that lets you sync the state of an input and dispatch native form events from it.
+ * This is useful when emulating native input behavior — typically by rendering a hidden base input
+ * and syncing it with a custom input.
+ *
+ * @example
+ * ```ts
+ * const control = useControl(options);
+ * ```
+ */
+function useControl(options) {
+  var inputRef = useRef(null);
+  var eventDispatched = useRef({});
+  var defaultSnapshot = getDefaultSnapshot(options === null || options === void 0 ? void 0 : options.defaultValue, options === null || options === void 0 ? void 0 : options.defaultChecked, options === null || options === void 0 ? void 0 : options.value);
+  var snapshotRef = useRef(defaultSnapshot);
+  var optionsRef = useRef(options);
+  useEffect(() => {
+    optionsRef.current = options;
+  });
+
+  // This is necessary to ensure that input is re-registered
+  // if the onFocus handler changes
+  var shouldHandleFocus = typeof (options === null || options === void 0 ? void 0 : options.onFocus) === 'function';
+  var snapshot = useSyncExternalStore(useCallback(callback => formObserver.onFieldUpdate(event => {
+    var input = event.target;
+    if (Array.isArray(inputRef.current) ? inputRef.current.some(item => item === input) : inputRef.current === input) {
+      callback();
+    }
+  }), []), () => {
+    var input = inputRef.current;
+    var prev = snapshotRef.current;
+    var next = !input ? defaultSnapshot : Array.isArray(input) ? {
+      value: getRadioGroupValue(input),
+      options: getCheckboxGroupValue(input)
+    } : getInputSnapshot(input);
+    if (unstable_deepEqual(prev, next)) {
+      return prev;
+    }
+    snapshotRef.current = next;
+    return next;
+  }, () => snapshotRef.current);
+  useEffect(() => {
+    var createEventListener = listener => {
+      return event => {
+        if (Array.isArray(inputRef.current) ? inputRef.current.some(item => item === event.target) : inputRef.current === event.target) {
+          var timer = eventDispatched.current[listener];
+          if (timer) {
+            clearTimeout(timer);
+          }
+          eventDispatched.current[listener] = window.setTimeout(() => {
+            eventDispatched.current[listener] = undefined;
+          });
+          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 || _optionsRef$current$o.call(_optionsRef$current);
+          }
+        }
+      };
+    };
+    var inputHandler = createEventListener('change');
+    var focusHandler = createEventListener('focus');
+    var blurHandler = createEventListener('blur');
+    document.addEventListener('input', inputHandler, true);
+    document.addEventListener('focusin', focusHandler, true);
+    document.addEventListener('focusout', blurHandler, true);
+    return () => {
+      document.removeEventListener('input', inputHandler, true);
+      document.removeEventListener('focusin', focusHandler, true);
+      document.removeEventListener('focusout', blurHandler, true);
+    };
+  }, []);
+  return {
+    value: snapshot.value,
+    checked: snapshot.checked,
+    options: snapshot.options,
+    files: snapshot.files,
+    register: useCallback(element => {
+      if (!element) {
+        inputRef.current = null;
+      } else if (isFieldElement(element)) {
+        inputRef.current = element;
+        if (shouldHandleFocus) {
+          focusable(element);
+        }
+        if (element.type === 'checkbox' || element.type === 'radio') {
+          var _optionsRef$current$v, _optionsRef$current2;
+          // React set the value as empty string incorrectly when the value is undefined
+          // This make sure the checkbox value falls back to the default value "on" properly
+          // @see https://github.com/facebook/react/issues/17590
+          element.value = (_optionsRef$current$v = (_optionsRef$current2 = optionsRef.current) === null || _optionsRef$current2 === void 0 ? void 0 : _optionsRef$current2.value) !== null && _optionsRef$current$v !== void 0 ? _optionsRef$current$v : 'on';
+        }
+        initializeField(element, optionsRef.current);
+      } else {
+        var _inputs$0$name, _inputs$, _inputs$0$type, _inputs$2;
+        var inputs = Array.from(element);
+        var name = (_inputs$0$name = (_inputs$ = inputs[0]) === null || _inputs$ === void 0 ? void 0 : _inputs$.name) !== null && _inputs$0$name !== void 0 ? _inputs$0$name : '';
+        var type = (_inputs$0$type = (_inputs$2 = inputs[0]) === null || _inputs$2 === void 0 ? void 0 : _inputs$2.type) !== null && _inputs$0$type !== void 0 ? _inputs$0$type : '';
+        if (!name || !(type === 'checkbox' || type === 'radio') || !inputs.every(input => input.name === name && input.type === type)) {
+          throw new Error('You can only register a checkbox or radio group with the same name');
+        }
+        inputRef.current = inputs;
+        for (var input of inputs) {
+          var _optionsRef$current3;
+          if (shouldHandleFocus) {
+            focusable(input);
+          }
+          initializeField(input, {
+            // We will not be uitlizing defaultChecked / value on checkbox / radio group
+            defaultValue: (_optionsRef$current3 = optionsRef.current) === null || _optionsRef$current3 === void 0 ? void 0 : _optionsRef$current3.defaultValue
+          });
+        }
+      }
+    }, [shouldHandleFocus]),
+    change: useCallback(value => {
+      if (!eventDispatched.current.change) {
+        var _inputRef$current;
+        var _element = Array.isArray(inputRef.current) ? (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.find(input => {
+          var wasChecked = input.checked;
+          var isChecked = Array.isArray(value) ? value.some(item => item === input.value) : input.value === value;
+          switch (input.type) {
+            case 'checkbox':
+              // We assume that only one checkbox can be checked at a time
+              // So we will pick the first element with checked state changed
+              return wasChecked !== isChecked;
+            case 'radio':
+              // We cannot uncheck a radio button
+              // So we will pick the first element that should be checked
+              return isChecked;
+            default:
+              return false;
+          }
+        }) : inputRef.current;
+        if (_element) {
+          unstable_change(_element, typeof value === 'boolean' ? value ? _element.value : null : value);
+        }
+      }
+      if (eventDispatched.current.change) {
+        clearTimeout(eventDispatched.current.change);
+      }
+      eventDispatched.current.change = undefined;
+    }, []),
+    focus: useCallback(() => {
+      if (!eventDispatched.current.focus) {
+        var _element2 = Array.isArray(inputRef.current) ? inputRef.current[0] : inputRef.current;
+        if (_element2) {
+          unstable_focus(_element2);
+        }
+      }
+      if (eventDispatched.current.focus) {
+        clearTimeout(eventDispatched.current.focus);
+      }
+      eventDispatched.current.focus = undefined;
+    }, []),
+    blur: useCallback(() => {
+      if (!eventDispatched.current.blur) {
+        var _element3 = Array.isArray(inputRef.current) ? inputRef.current[0] : inputRef.current;
+        if (_element3) {
+          unstable_blur(_element3);
+        }
+      }
+      if (eventDispatched.current.blur) {
+        clearTimeout(eventDispatched.current.blur);
+      }
+      eventDispatched.current.blur = undefined;
+    }, [])
+  };
+}
+
+export { formObserver, useControl };

package/dist/future/index.d.ts

@@ -0,0 +1,2 @@
+export { useControl } from './hooks';
+//# sourceMappingURL=index.d.ts.map

package/dist/future/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var hooks = require('./hooks.js');
+
+
+
+exports.useControl = hooks.useControl;

package/dist/future/index.mjs

@@ -0,0 +1 @@
+export { useControl } from './hooks.mjs';

package/dist/future/util.d.ts

@@ -0,0 +1,37 @@
+export declare function focusable(element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): void;
+export declare function initializeField(element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, options: {
+    defaultValue?: string | string[] | File | File[] | null;
+    defaultChecked?: boolean;
+    value?: string;
+} | undefined): void;
+export declare function getRadioGroupValue(inputs: Array<HTMLInputElement>): string | undefined;
+export declare function getCheckboxGroupValue(inputs: Array<HTMLInputElement>): string[] | undefined;
+export type InputSnapshot = {
+    value?: string;
+    options?: string[];
+    checked?: boolean;
+    files?: File[];
+};
+export declare function getInputSnapshot(input: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): {
+    files: File[] | undefined;
+    value?: undefined;
+    checked?: undefined;
+    options?: undefined;
+} | {
+    value: string;
+    checked: boolean;
+    files?: undefined;
+    options?: undefined;
+} | {
+    options: string[];
+    files?: undefined;
+    value?: undefined;
+    checked?: undefined;
+} | {
+    value: string;
+    files?: undefined;
+    checked?: undefined;
+    options?: undefined;
+};
+export declare function getDefaultSnapshot(defaultValue: string | string[] | File | File[] | FileList | null | undefined, defaultChecked: boolean | undefined, value: string | undefined): InputSnapshot;
+//# sourceMappingURL=util.d.ts.map

package/dist/future/util.js

@@ -0,0 +1,134 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dom = require('@conform-to/dom');
+
+function focusable(element) {
+  if (!element.hidden && element.type !== 'hidden') {
+    return;
+  }
+
+  // Style the element to be visually hidden
+  element.style.position = 'absolute';
+  element.style.width = '1px';
+  element.style.height = '1px';
+  element.style.padding = '0';
+  element.style.margin = '-1px';
+  element.style.overflow = 'hidden';
+  element.style.clip = 'rect(0,0,0,0)';
+  element.style.whiteSpace = 'nowrap';
+  element.style.border = '0';
+
+  // Hide the element from screen readers
+  element.setAttribute('aria-hidden', 'true');
+
+  // Make sure people won't tab to this element
+  element.tabIndex = -1;
+
+  // Set the element to be visible again so it can be focused
+  if (element.hidden) {
+    element.hidden = false;
+  }
+  if (element.type === 'hidden') {
+    element.setAttribute('type', 'text');
+  }
+}
+function initializeField(element, options) {
+  var _options$value;
+  if (element.dataset.conform) {
+    return;
+  }
+  var defaultValue = typeof (options === null || options === void 0 ? void 0 : options.value) === 'string' || typeof (options === null || options === void 0 ? void 0 : options.defaultChecked) === 'boolean' ? options.defaultChecked ? (_options$value = options.value) !== null && _options$value !== void 0 ? _options$value : 'on' : null : options === null || options === void 0 ? void 0 : options.defaultValue;
+
+  // Update the value of the element, including the default value
+  dom.unstable_updateField(element, {
+    value: defaultValue,
+    defaultValue
+  });
+  element.dataset.conform = 'initialized';
+}
+function getRadioGroupValue(inputs) {
+  for (var input of inputs) {
+    if (input.type === 'radio' && input.checked) {
+      return input.value;
+    }
+  }
+}
+function getCheckboxGroupValue(inputs) {
+  var values;
+  for (var input of inputs) {
+    if (input.type === 'checkbox') {
+      var _values;
+      (_values = values) !== null && _values !== void 0 ? _values : values = [];
+      if (input.checked) {
+        values.push(input.value);
+      }
+    }
+  }
+  return values;
+}
+function getInputSnapshot(input) {
+  if (input instanceof HTMLInputElement) {
+    switch (input.type) {
+      case 'file':
+        return {
+          files: input.files ? Array.from(input.files) : undefined
+        };
+      case 'radio':
+      case 'checkbox':
+        return {
+          value: input.value,
+          checked: input.checked
+        };
+    }
+  } else if (input instanceof HTMLSelectElement && input.multiple) {
+    return {
+      options: Array.from(input.selectedOptions).map(option => option.value)
+    };
+  }
+  return {
+    value: input.value
+  };
+}
+function getDefaultSnapshot(defaultValue, defaultChecked, value) {
+  if (typeof value === 'string' || typeof defaultChecked === 'boolean') {
+    return {
+      value: value !== null && value !== void 0 ? value : 'on',
+      checked: defaultChecked
+    };
+  }
+  if (typeof defaultValue === 'string') {
+    return {
+      value: defaultValue
+    };
+  }
+  if (Array.isArray(defaultValue) && defaultValue.every(item => typeof item === 'string')) {
+    return {
+      options: defaultValue
+    };
+  }
+  if (defaultValue instanceof FileList) {
+    return {
+      files: Array.from(defaultValue)
+    };
+  }
+  if (Array.isArray(defaultValue)) {
+    return {
+      files: defaultValue
+    };
+  }
+  if (defaultValue) {
+    return {
+      files: [defaultValue]
+    };
+  }
+  return {};
+}
+
+exports.focusable = focusable;
+exports.getCheckboxGroupValue = getCheckboxGroupValue;
+exports.getDefaultSnapshot = getDefaultSnapshot;
+exports.getInputSnapshot = getInputSnapshot;
+exports.getRadioGroupValue = getRadioGroupValue;
+exports.initializeField = initializeField;

package/dist/future/util.mjs

@@ -0,0 +1,125 @@
+import { unstable_updateField } from '@conform-to/dom';
+
+function focusable(element) {
+  if (!element.hidden && element.type !== 'hidden') {
+    return;
+  }
+
+  // Style the element to be visually hidden
+  element.style.position = 'absolute';
+  element.style.width = '1px';
+  element.style.height = '1px';
+  element.style.padding = '0';
+  element.style.margin = '-1px';
+  element.style.overflow = 'hidden';
+  element.style.clip = 'rect(0,0,0,0)';
+  element.style.whiteSpace = 'nowrap';
+  element.style.border = '0';
+
+  // Hide the element from screen readers
+  element.setAttribute('aria-hidden', 'true');
+
+  // Make sure people won't tab to this element
+  element.tabIndex = -1;
+
+  // Set the element to be visible again so it can be focused
+  if (element.hidden) {
+    element.hidden = false;
+  }
+  if (element.type === 'hidden') {
+    element.setAttribute('type', 'text');
+  }
+}
+function initializeField(element, options) {
+  var _options$value;
+  if (element.dataset.conform) {
+    return;
+  }
+  var defaultValue = typeof (options === null || options === void 0 ? void 0 : options.value) === 'string' || typeof (options === null || options === void 0 ? void 0 : options.defaultChecked) === 'boolean' ? options.defaultChecked ? (_options$value = options.value) !== null && _options$value !== void 0 ? _options$value : 'on' : null : options === null || options === void 0 ? void 0 : options.defaultValue;
+
+  // Update the value of the element, including the default value
+  unstable_updateField(element, {
+    value: defaultValue,
+    defaultValue
+  });
+  element.dataset.conform = 'initialized';
+}
+function getRadioGroupValue(inputs) {
+  for (var input of inputs) {
+    if (input.type === 'radio' && input.checked) {
+      return input.value;
+    }
+  }
+}
+function getCheckboxGroupValue(inputs) {
+  var values;
+  for (var input of inputs) {
+    if (input.type === 'checkbox') {
+      var _values;
+      (_values = values) !== null && _values !== void 0 ? _values : values = [];
+      if (input.checked) {
+        values.push(input.value);
+      }
+    }
+  }
+  return values;
+}
+function getInputSnapshot(input) {
+  if (input instanceof HTMLInputElement) {
+    switch (input.type) {
+      case 'file':
+        return {
+          files: input.files ? Array.from(input.files) : undefined
+        };
+      case 'radio':
+      case 'checkbox':
+        return {
+          value: input.value,
+          checked: input.checked
+        };
+    }
+  } else if (input instanceof HTMLSelectElement && input.multiple) {
+    return {
+      options: Array.from(input.selectedOptions).map(option => option.value)
+    };
+  }
+  return {
+    value: input.value
+  };
+}
+function getDefaultSnapshot(defaultValue, defaultChecked, value) {
+  if (typeof value === 'string' || typeof defaultChecked === 'boolean') {
+    return {
+      value: value !== null && value !== void 0 ? value : 'on',
+      checked: defaultChecked
+    };
+  }
+  if (typeof defaultValue === 'string') {
+    return {
+      value: defaultValue
+    };
+  }
+  if (Array.isArray(defaultValue) && defaultValue.every(item => typeof item === 'string')) {
+    return {
+      options: defaultValue
+    };
+  }
+  if (defaultValue instanceof FileList) {
+    return {
+      files: Array.from(defaultValue)
+    };
+  }
+  if (Array.isArray(defaultValue)) {
+    return {
+      files: defaultValue
+    };
+  }
+  if (defaultValue) {
+    return {
+      files: [defaultValue]
+    };
+  }
+  return {};
+}
+
+export { focusable, getCheckboxGroupValue, getDefaultSnapshot, getInputSnapshot, getRadioGroupValue, initializeField };

package/dist/integrations.js

@@ -102,7 +102,7 @@ function useInputEvent(onUpdate) {
           eventDispatched.current.change = true;
           var element = ref.current;
           if (element) {
-            dom.unstable_updateFieldValue(element, {
+            dom.unstable_updateField(element, {
               value
             });
 
@@ -223,7 +223,7 @@ function useControl(meta) {
     // This is now handled mostly by the side effect
     // But we still need to set the initial value for backward compatibility
     if (!element.dataset.conform) {
-      dom.unstable_updateFieldValue(element, {
+      dom.unstable_updateField(element, {
         value
       });
     }

package/dist/integrations.mjs

@@ -1,4 +1,4 @@
-import { unstable_updateFieldValue } from '@conform-to/dom';
+import { unstable_updateField } from '@conform-to/dom';
 import { useRef, useEffect, useMemo, useState } from 'react';
 
 function getFormElement(formId) {
@@ -98,7 +98,7 @@ function useInputEvent(onUpdate) {
           eventDispatched.current.change = true;
           var element = ref.current;
           if (element) {
-            unstable_updateFieldValue(element, {
+            unstable_updateField(element, {
               value
             });
 
@@ -219,7 +219,7 @@ function useControl(meta) {
     // This is now handled mostly by the side effect
     // But we still need to set the initial value for backward compatibility
     if (!element.dataset.conform) {
-      unstable_updateFieldValue(element, {
+      unstable_updateField(element, {
         value
       });
     }

package/dist/vitest.config.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("vite").UserConfig;
+export default _default;
+//# sourceMappingURL=vitest.config.d.ts.map

package/package.json

@@ -3,7 +3,7 @@
   "description": "Conform view adapter for react",
   "homepage": "https://conform.guide",
   "license": "MIT",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -14,6 +14,13 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.js",
       "default": "./dist/index.mjs"
+    },
+    "./future": {
+      "types": "./dist/future/index.d.ts",
+      "module": "./dist/future/index.mjs",
+      "import": "./dist/future/index.mjs",
+      "require": "./dist/future/index.js",
+      "default": "./dist/future/index.mjs"
     }
   },
   "files": [
@@ -34,7 +41,7 @@
     "url": "https://github.com/edmundhung/conform/issues"
   },
   "dependencies": {
-    "@conform-to/dom": "1.6.1"
+    "@conform-to/dom": "1.7.0"
   },
   "devDependencies": {
     "@babel/core": "^7.17.8",
@@ -46,7 +53,8 @@
     "@types/react": "^18.2.43",
     "react": "^18.2.0",
     "rollup-plugin-copy": "^3.4.0",
-    "rollup": "^2.79.1"
+    "rollup": "^2.79.1",
+    "vitest-browser-react": "^0.1.1"
   },
   "peerDependencies": {
     "react": ">=18"