@conform-to/dom 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/dom.d.ts

@@ -3,19 +3,13 @@
  * includes `<input>`, `<select>` and `<textarea>`.
  */
 export type FieldElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-/**
- * HTML Element that can be used as a form control,
- * includes `<input>`, `<select>`, `<textarea>` and `<button>`.
- */
-export type FormControl = FieldElement | HTMLButtonElement;
 /**
  * Form Control element. It can either be a submit button or a submit input.
  */
 export type Submitter = HTMLInputElement | HTMLButtonElement;
-/**
- * A type guard to check if the provided element is a form control
- */
-export declare function isFormControl(element: unknown): element is FormControl;
+export declare function isInputElement(element: Element): element is HTMLInputElement;
+export declare function isSelectElement(element: Element): element is HTMLSelectElement;
+export declare function isTextAreaElement(element: Element): element is HTMLTextAreaElement;
 /**
  * A type guard to check if the provided element is a field element, which
  * is a form control excluding submit, button and reset type.
@@ -41,4 +35,31 @@ export declare function getFormMethod(event: SubmitEvent): 'GET' | 'POST' | 'PUT
  * If the submitter is not mounted, it will be appended to the form and removed after submission.
  */
 export declare function requestSubmit(form: HTMLFormElement | null | undefined, submitter: Submitter | null): void;
+export declare function createFileList(value: File | File[]): FileList;
+type InputCallback = (event: {
+    type: 'input' | 'reset' | 'mutation';
+    target: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+}) => void;
+type FormCallback = (event: {
+    type: 'submit' | 'input' | 'reset' | 'mutation';
+    target: HTMLFormElement;
+    submitter?: HTMLInputElement | HTMLButtonElement | null;
+}) => void;
+export declare function createGlobalFormsObserver(): {
+    onFieldUpdate(callback: InputCallback): () => void;
+    onFormUpdate(callback: FormCallback): () => void;
+    dispose(): void;
+};
+export declare function change(element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, value: string | string[] | File | File[] | FileList | null): void;
+export declare function focus(element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): void;
+export declare function blur(element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): void;
+export declare function normalizeFieldValue(value: unknown): [string[] | null, FileList | null];
+/**
+ * Updates the DOM element with the provided value and defaultValue.
+ */
+export declare function updateField(element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, options: {
+    value?: unknown;
+    defaultValue?: unknown;
+}): void;
+export {};
 //# sourceMappingURL=dom.d.ts.map

package/dist/dom.js

@@ -9,20 +9,18 @@ var util = require('./util.js');
  * includes `<input>`, `<select>` and `<textarea>`.
  */
 
-/**
- * HTML Element that can be used as a form control,
- * includes `<input>`, `<select>`, `<textarea>` and `<button>`.
- */
-
 /**
  * Form Control element. It can either be a submit button or a submit input.
  */
 
-/**
- * A type guard to check if the provided element is a form control
- */
-function isFormControl(element) {
-  return element instanceof Element && (element.tagName === 'INPUT' || element.tagName === 'SELECT' || element.tagName === 'TEXTAREA' || element.tagName === 'BUTTON');
+function isInputElement(element) {
+  return element.tagName === 'INPUT';
+}
+function isSelectElement(element) {
+  return element.tagName === 'SELECT';
+}
+function isTextAreaElement(element) {
+  return element.tagName === 'TEXTAREA';
 }
 
 /**
@@ -30,7 +28,15 @@ function isFormControl(element) {
  * is a form control excluding submit, button and reset type.
  */
 function isFieldElement(element) {
-  return isFormControl(element) && element.type !== 'submit' && element.type !== 'button' && element.type !== 'reset';
+  if (element instanceof Element) {
+    if (isInputElement(element)) {
+      return element.type !== 'submit' && element.type !== 'button' && element.type !== 'reset';
+    }
+    if (isSelectElement(element) || isTextAreaElement(element)) {
+      return true;
+    }
+  }
+  return false;
 }
 
 /**
@@ -87,18 +93,361 @@ function requestSubmit(form, submitter) {
   if (typeof form.requestSubmit === 'function') {
     form.requestSubmit(submitter);
   } else {
-    var event = new SubmitEvent('submit', {
+    var _event = new SubmitEvent('submit', {
       bubbles: true,
       cancelable: true,
       submitter
     });
-    form.dispatchEvent(event);
+    form.dispatchEvent(_event);
+  }
+}
+function createFileList(value) {
+  var dataTransfer = new DataTransfer();
+  if (Array.isArray(value)) {
+    for (var file of value) {
+      dataTransfer.items.add(file);
+    }
+  } else {
+    dataTransfer.items.add(value);
+  }
+  return dataTransfer.files;
+}
+function createGlobalFormsObserver() {
+  var inputListeners = new Set();
+  var formListeners = new Set();
+  var cleanup = null;
+  function initialize() {
+    var observer = new MutationObserver(handleMutation);
+    observer.observe(document.body, {
+      subtree: true,
+      childList: true,
+      attributeFilter: ['form', 'name', 'data-conform']
+    });
+    document.addEventListener('input', handleInput);
+    document.addEventListener('reset', handleReset);
+    document.addEventListener('submit', handleSubmit, true);
+    return () => {
+      document.removeEventListener('input', handleInput);
+      document.removeEventListener('reset', handleReset);
+      document.removeEventListener('submit', handleSubmit, true);
+      observer.disconnect();
+    };
+  }
+  function handleInput(event) {
+    var target = event.target;
+    if (isFieldElement(target)) {
+      inputListeners.forEach(callback => callback({
+        type: 'input',
+        target
+      }));
+      var form = target.form;
+      if (form) {
+        formListeners.forEach(callback => callback({
+          type: 'input',
+          target: form
+        }));
+      }
+    }
+  }
+  function handleReset(event) {
+    var form = event.target;
+    if (form instanceof HTMLFormElement) {
+      // Reset event is fired before the form is reset, so we need to wait for the next tick
+      setTimeout(() => {
+        formListeners.forEach(callback => {
+          callback({
+            type: 'reset',
+            target: form
+          });
+        });
+        var _loop = function _loop(target) {
+          if (isFieldElement(target)) {
+            inputListeners.forEach(callback => {
+              callback({
+                type: 'reset',
+                target
+              });
+            });
+          }
+        };
+        for (var target of form.elements) {
+          _loop(target);
+        }
+      });
+    }
+  }
+  function handleSubmit(event) {
+    var target = event.target;
+    var submitter = event.submitter;
+    if (target instanceof HTMLFormElement) {
+      formListeners.forEach(callback => callback({
+        type: 'submit',
+        target,
+        submitter
+      }));
+    }
+  }
+  function handleMutation(mutations) {
+    var seenForms = new Set();
+    var seenInputs = new Set();
+    var collectInputs = node => {
+      if (isFieldElement(node)) {
+        return [node];
+      }
+      return node instanceof Element ? Array.from(node.querySelectorAll('input,select,textarea')) : [];
+    };
+    for (var mutation of mutations) {
+      switch (mutation.type) {
+        case 'childList':
+          {
+            var nodes = [...mutation.addedNodes, ...mutation.removedNodes];
+            for (var node of nodes) {
+              for (var input of collectInputs(node)) {
+                seenInputs.add(input);
+                if (input.form) {
+                  seenForms.add(input.form);
+                }
+              }
+            }
+            break;
+          }
+        case 'attributes':
+          {
+            if (isFieldElement(mutation.target)) {
+              seenInputs.add(mutation.target);
+              if (mutation.target.form) {
+                seenForms.add(mutation.target.form);
+              }
+            }
+            break;
+          }
+      }
+    }
+    var _loop2 = function _loop2(target) {
+      formListeners.forEach(callback => {
+        callback({
+          type: 'mutation',
+          target
+        });
+      });
+    };
+    for (var target of seenForms) {
+      _loop2(target);
+    }
+    var _loop3 = function _loop3(_target) {
+      inputListeners.forEach(callback => {
+        callback({
+          type: 'mutation',
+          target: _target
+        });
+      });
+    };
+    for (var _target of seenInputs) {
+      _loop3(_target);
+    }
+  }
+  return {
+    onFieldUpdate(callback) {
+      var _cleanup;
+      cleanup = (_cleanup = cleanup) !== null && _cleanup !== void 0 ? _cleanup : initialize();
+      inputListeners.add(callback);
+      return () => {
+        inputListeners.delete(callback);
+      };
+    },
+    onFormUpdate(callback) {
+      var _cleanup2;
+      cleanup = (_cleanup2 = cleanup) !== null && _cleanup2 !== void 0 ? _cleanup2 : initialize();
+      formListeners.add(callback);
+      return () => {
+        formListeners.delete(callback);
+      };
+    },
+    dispose() {
+      var _cleanup3;
+      (_cleanup3 = cleanup) === null || _cleanup3 === void 0 || _cleanup3();
+      cleanup = null;
+      inputListeners.clear();
+      formListeners.clear();
+    }
+  };
+}
+function change(element, value) {
+  // The value should be set to the element before dispatching the event
+  updateField(element, {
+    value
+  });
+
+  // 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
+  }));
+}
+function focus(element) {
+  // Only focusin event will be bubbled
+  element.dispatchEvent(new FocusEvent('focusin', {
+    bubbles: true
+  }));
+  element.dispatchEvent(new FocusEvent('focus'));
+}
+function blur(element) {
+  // Only focusout event will be bubbled
+  element.dispatchEvent(new FocusEvent('focusout', {
+    bubbles: true
+  }));
+  element.dispatchEvent(new FocusEvent('blur'));
+}
+function normalizeFieldValue(value) {
+  if (typeof value === 'undefined') {
+    return [null, null];
+  }
+  if (value === null) {
+    return [[], createFileList([])];
+  }
+  if (typeof value === 'string') {
+    return [[value], null];
+  }
+  if (Array.isArray(value)) {
+    if (value.every(item => typeof item === 'string')) {
+      return [Array.from(value), null];
+    }
+    if (value.every(item => item instanceof File)) {
+      return [null, createFileList(value)];
+    }
+  }
+  if (value instanceof FileList) {
+    return [null, value];
+  }
+  if (value instanceof File) {
+    return [null, createFileList([value])];
+  }
+  return [null, null];
+}
+
+/**
+ * Updates the DOM element with the provided value and defaultValue.
+ */
+function updateField(element, options) {
+  var _value$;
+  var [value, file] = normalizeFieldValue(options.value);
+  var [defaultValue] = normalizeFieldValue(options.defaultValue);
+  if (isInputElement(element)) {
+    switch (element.type) {
+      case 'file':
+        {
+          element.files = file;
+          return;
+        }
+      case 'checkbox':
+      case 'radio':
+        {
+          if (value) {
+            var checked = value.includes(element.value);
+            if (element.type === 'checkbox' ? checked !== element.checked : checked) {
+              // Simulate a click to update the checked state
+              element.click();
+            }
+            element.checked = checked;
+          }
+          if (defaultValue) {
+            element.defaultChecked = defaultValue.includes(element.value);
+          }
+          return;
+        }
+    }
+  } else if (isSelectElement(element)) {
+    var shouldUnselect = value && value.length === 0;
+    for (var option of element.options) {
+      if (value) {
+        var index = value.indexOf(option.value);
+        var selected = index > -1;
+
+        // Update the selected state of the option
+        if (option.selected !== selected) {
+          option.selected = selected;
+        }
+
+        // Remove the option from the value array
+        if (selected) {
+          value.splice(index, 1);
+        }
+      }
+      if (defaultValue) {
+        var _index = defaultValue.indexOf(option.value);
+        var _selected = _index > -1;
+
+        // Update the selected state of the option
+        if (option.defaultSelected !== _selected) {
+          option.defaultSelected = _selected;
+        }
+
+        // Remove the option from the defaultValue array
+        if (_selected) {
+          defaultValue.splice(_index, 1);
+        }
+      }
+    }
+
+    // We have already removed all selected options from the value and defaultValue array at this point
+    var missingOptions = new Set([...(value !== null && value !== void 0 ? value : []), ...(defaultValue !== null && defaultValue !== void 0 ? defaultValue : [])]);
+    for (var optionValue of missingOptions) {
+      element.options.add(new Option(optionValue, optionValue, defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.includes(optionValue), value === null || value === void 0 ? void 0 : value.includes(optionValue)));
+    }
+
+    // If the select element is not multiple and the value is an empty array, unset the selected index
+    // This is to prevent the select element from showing the first option as selected
+    if (shouldUnselect) {
+      element.selectedIndex = -1;
+    }
+    return;
+  }
+  var inputValue = (_value$ = value === null || value === void 0 ? void 0 : value[0]) !== null && _value$ !== void 0 ? _value$ : '';
+  if (element.value !== inputValue) {
+    /**
+     * Triggering react custom change event
+     * Solution based on dom-testing-library
+     * @see https://github.com/facebook/react/issues/10135#issuecomment-401496776
+     * @see https://github.com/testing-library/dom-testing-library/blob/main/src/events.js#L104-L123
+     */
+    var {
+      set: valueSetter
+    } = Object.getOwnPropertyDescriptor(element, 'value') || {};
+    var prototype = Object.getPrototypeOf(element);
+    var {
+      set: prototypeValueSetter
+    } = Object.getOwnPropertyDescriptor(prototype, 'value') || {};
+    if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
+      prototypeValueSetter.call(element, inputValue);
+    } else {
+      if (valueSetter) {
+        valueSetter.call(element, inputValue);
+      } else {
+        throw new Error('The given element does not have a value setter');
+      }
+    }
+  }
+  if (defaultValue) {
+    var _defaultValue$;
+    element.defaultValue = (_defaultValue$ = defaultValue[0]) !== null && _defaultValue$ !== void 0 ? _defaultValue$ : '';
   }
 }
 
+exports.blur = blur;
+exports.change = change;
+exports.createFileList = createFileList;
+exports.createGlobalFormsObserver = createGlobalFormsObserver;
+exports.focus = focus;
 exports.getFormAction = getFormAction;
 exports.getFormEncType = getFormEncType;
 exports.getFormMethod = getFormMethod;
 exports.isFieldElement = isFieldElement;
-exports.isFormControl = isFormControl;
+exports.isInputElement = isInputElement;
+exports.isSelectElement = isSelectElement;
+exports.isTextAreaElement = isTextAreaElement;
+exports.normalizeFieldValue = normalizeFieldValue;
 exports.requestSubmit = requestSubmit;
+exports.updateField = updateField;

package/dist/dom.mjs

@@ -5,20 +5,18 @@ import { invariant } from './util.mjs';
  * includes `<input>`, `<select>` and `<textarea>`.
  */
 
-/**
- * HTML Element that can be used as a form control,
- * includes `<input>`, `<select>`, `<textarea>` and `<button>`.
- */
-
 /**
  * Form Control element. It can either be a submit button or a submit input.
  */
 
-/**
- * A type guard to check if the provided element is a form control
- */
-function isFormControl(element) {
-  return element instanceof Element && (element.tagName === 'INPUT' || element.tagName === 'SELECT' || element.tagName === 'TEXTAREA' || element.tagName === 'BUTTON');
+function isInputElement(element) {
+  return element.tagName === 'INPUT';
+}
+function isSelectElement(element) {
+  return element.tagName === 'SELECT';
+}
+function isTextAreaElement(element) {
+  return element.tagName === 'TEXTAREA';
 }
 
 /**
@@ -26,7 +24,15 @@ function isFormControl(element) {
  * is a form control excluding submit, button and reset type.
  */
 function isFieldElement(element) {
-  return isFormControl(element) && element.type !== 'submit' && element.type !== 'button' && element.type !== 'reset';
+  if (element instanceof Element) {
+    if (isInputElement(element)) {
+      return element.type !== 'submit' && element.type !== 'button' && element.type !== 'reset';
+    }
+    if (isSelectElement(element) || isTextAreaElement(element)) {
+      return true;
+    }
+  }
+  return false;
 }
 
 /**
@@ -83,13 +89,347 @@ function requestSubmit(form, submitter) {
   if (typeof form.requestSubmit === 'function') {
     form.requestSubmit(submitter);
   } else {
-    var event = new SubmitEvent('submit', {
+    var _event = new SubmitEvent('submit', {
       bubbles: true,
       cancelable: true,
       submitter
     });
-    form.dispatchEvent(event);
+    form.dispatchEvent(_event);
+  }
+}
+function createFileList(value) {
+  var dataTransfer = new DataTransfer();
+  if (Array.isArray(value)) {
+    for (var file of value) {
+      dataTransfer.items.add(file);
+    }
+  } else {
+    dataTransfer.items.add(value);
+  }
+  return dataTransfer.files;
+}
+function createGlobalFormsObserver() {
+  var inputListeners = new Set();
+  var formListeners = new Set();
+  var cleanup = null;
+  function initialize() {
+    var observer = new MutationObserver(handleMutation);
+    observer.observe(document.body, {
+      subtree: true,
+      childList: true,
+      attributeFilter: ['form', 'name', 'data-conform']
+    });
+    document.addEventListener('input', handleInput);
+    document.addEventListener('reset', handleReset);
+    document.addEventListener('submit', handleSubmit, true);
+    return () => {
+      document.removeEventListener('input', handleInput);
+      document.removeEventListener('reset', handleReset);
+      document.removeEventListener('submit', handleSubmit, true);
+      observer.disconnect();
+    };
+  }
+  function handleInput(event) {
+    var target = event.target;
+    if (isFieldElement(target)) {
+      inputListeners.forEach(callback => callback({
+        type: 'input',
+        target
+      }));
+      var form = target.form;
+      if (form) {
+        formListeners.forEach(callback => callback({
+          type: 'input',
+          target: form
+        }));
+      }
+    }
+  }
+  function handleReset(event) {
+    var form = event.target;
+    if (form instanceof HTMLFormElement) {
+      // Reset event is fired before the form is reset, so we need to wait for the next tick
+      setTimeout(() => {
+        formListeners.forEach(callback => {
+          callback({
+            type: 'reset',
+            target: form
+          });
+        });
+        var _loop = function _loop(target) {
+          if (isFieldElement(target)) {
+            inputListeners.forEach(callback => {
+              callback({
+                type: 'reset',
+                target
+              });
+            });
+          }
+        };
+        for (var target of form.elements) {
+          _loop(target);
+        }
+      });
+    }
+  }
+  function handleSubmit(event) {
+    var target = event.target;
+    var submitter = event.submitter;
+    if (target instanceof HTMLFormElement) {
+      formListeners.forEach(callback => callback({
+        type: 'submit',
+        target,
+        submitter
+      }));
+    }
+  }
+  function handleMutation(mutations) {
+    var seenForms = new Set();
+    var seenInputs = new Set();
+    var collectInputs = node => {
+      if (isFieldElement(node)) {
+        return [node];
+      }
+      return node instanceof Element ? Array.from(node.querySelectorAll('input,select,textarea')) : [];
+    };
+    for (var mutation of mutations) {
+      switch (mutation.type) {
+        case 'childList':
+          {
+            var nodes = [...mutation.addedNodes, ...mutation.removedNodes];
+            for (var node of nodes) {
+              for (var input of collectInputs(node)) {
+                seenInputs.add(input);
+                if (input.form) {
+                  seenForms.add(input.form);
+                }
+              }
+            }
+            break;
+          }
+        case 'attributes':
+          {
+            if (isFieldElement(mutation.target)) {
+              seenInputs.add(mutation.target);
+              if (mutation.target.form) {
+                seenForms.add(mutation.target.form);
+              }
+            }
+            break;
+          }
+      }
+    }
+    var _loop2 = function _loop2(target) {
+      formListeners.forEach(callback => {
+        callback({
+          type: 'mutation',
+          target
+        });
+      });
+    };
+    for (var target of seenForms) {
+      _loop2(target);
+    }
+    var _loop3 = function _loop3(_target) {
+      inputListeners.forEach(callback => {
+        callback({
+          type: 'mutation',
+          target: _target
+        });
+      });
+    };
+    for (var _target of seenInputs) {
+      _loop3(_target);
+    }
+  }
+  return {
+    onFieldUpdate(callback) {
+      var _cleanup;
+      cleanup = (_cleanup = cleanup) !== null && _cleanup !== void 0 ? _cleanup : initialize();
+      inputListeners.add(callback);
+      return () => {
+        inputListeners.delete(callback);
+      };
+    },
+    onFormUpdate(callback) {
+      var _cleanup2;
+      cleanup = (_cleanup2 = cleanup) !== null && _cleanup2 !== void 0 ? _cleanup2 : initialize();
+      formListeners.add(callback);
+      return () => {
+        formListeners.delete(callback);
+      };
+    },
+    dispose() {
+      var _cleanup3;
+      (_cleanup3 = cleanup) === null || _cleanup3 === void 0 || _cleanup3();
+      cleanup = null;
+      inputListeners.clear();
+      formListeners.clear();
+    }
+  };
+}
+function change(element, value) {
+  // The value should be set to the element before dispatching the event
+  updateField(element, {
+    value
+  });
+
+  // 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
+  }));
+}
+function focus(element) {
+  // Only focusin event will be bubbled
+  element.dispatchEvent(new FocusEvent('focusin', {
+    bubbles: true
+  }));
+  element.dispatchEvent(new FocusEvent('focus'));
+}
+function blur(element) {
+  // Only focusout event will be bubbled
+  element.dispatchEvent(new FocusEvent('focusout', {
+    bubbles: true
+  }));
+  element.dispatchEvent(new FocusEvent('blur'));
+}
+function normalizeFieldValue(value) {
+  if (typeof value === 'undefined') {
+    return [null, null];
+  }
+  if (value === null) {
+    return [[], createFileList([])];
+  }
+  if (typeof value === 'string') {
+    return [[value], null];
+  }
+  if (Array.isArray(value)) {
+    if (value.every(item => typeof item === 'string')) {
+      return [Array.from(value), null];
+    }
+    if (value.every(item => item instanceof File)) {
+      return [null, createFileList(value)];
+    }
+  }
+  if (value instanceof FileList) {
+    return [null, value];
+  }
+  if (value instanceof File) {
+    return [null, createFileList([value])];
+  }
+  return [null, null];
+}
+
+/**
+ * Updates the DOM element with the provided value and defaultValue.
+ */
+function updateField(element, options) {
+  var _value$;
+  var [value, file] = normalizeFieldValue(options.value);
+  var [defaultValue] = normalizeFieldValue(options.defaultValue);
+  if (isInputElement(element)) {
+    switch (element.type) {
+      case 'file':
+        {
+          element.files = file;
+          return;
+        }
+      case 'checkbox':
+      case 'radio':
+        {
+          if (value) {
+            var checked = value.includes(element.value);
+            if (element.type === 'checkbox' ? checked !== element.checked : checked) {
+              // Simulate a click to update the checked state
+              element.click();
+            }
+            element.checked = checked;
+          }
+          if (defaultValue) {
+            element.defaultChecked = defaultValue.includes(element.value);
+          }
+          return;
+        }
+    }
+  } else if (isSelectElement(element)) {
+    var shouldUnselect = value && value.length === 0;
+    for (var option of element.options) {
+      if (value) {
+        var index = value.indexOf(option.value);
+        var selected = index > -1;
+
+        // Update the selected state of the option
+        if (option.selected !== selected) {
+          option.selected = selected;
+        }
+
+        // Remove the option from the value array
+        if (selected) {
+          value.splice(index, 1);
+        }
+      }
+      if (defaultValue) {
+        var _index = defaultValue.indexOf(option.value);
+        var _selected = _index > -1;
+
+        // Update the selected state of the option
+        if (option.defaultSelected !== _selected) {
+          option.defaultSelected = _selected;
+        }
+
+        // Remove the option from the defaultValue array
+        if (_selected) {
+          defaultValue.splice(_index, 1);
+        }
+      }
+    }
+
+    // We have already removed all selected options from the value and defaultValue array at this point
+    var missingOptions = new Set([...(value !== null && value !== void 0 ? value : []), ...(defaultValue !== null && defaultValue !== void 0 ? defaultValue : [])]);
+    for (var optionValue of missingOptions) {
+      element.options.add(new Option(optionValue, optionValue, defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.includes(optionValue), value === null || value === void 0 ? void 0 : value.includes(optionValue)));
+    }
+
+    // If the select element is not multiple and the value is an empty array, unset the selected index
+    // This is to prevent the select element from showing the first option as selected
+    if (shouldUnselect) {
+      element.selectedIndex = -1;
+    }
+    return;
+  }
+  var inputValue = (_value$ = value === null || value === void 0 ? void 0 : value[0]) !== null && _value$ !== void 0 ? _value$ : '';
+  if (element.value !== inputValue) {
+    /**
+     * Triggering react custom change event
+     * Solution based on dom-testing-library
+     * @see https://github.com/facebook/react/issues/10135#issuecomment-401496776
+     * @see https://github.com/testing-library/dom-testing-library/blob/main/src/events.js#L104-L123
+     */
+    var {
+      set: valueSetter
+    } = Object.getOwnPropertyDescriptor(element, 'value') || {};
+    var prototype = Object.getPrototypeOf(element);
+    var {
+      set: prototypeValueSetter
+    } = Object.getOwnPropertyDescriptor(prototype, 'value') || {};
+    if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
+      prototypeValueSetter.call(element, inputValue);
+    } else {
+      if (valueSetter) {
+        valueSetter.call(element, inputValue);
+      } else {
+        throw new Error('The given element does not have a value setter');
+      }
+    }
+  }
+  if (defaultValue) {
+    var _defaultValue$;
+    element.defaultValue = (_defaultValue$ = defaultValue[0]) !== null && _defaultValue$ !== void 0 ? _defaultValue$ : '';
   }
 }
 
-export { getFormAction, getFormEncType, getFormMethod, isFieldElement, isFormControl, requestSubmit };
+export { blur, change, createFileList, createGlobalFormsObserver, focus, getFormAction, getFormEncType, getFormMethod, isFieldElement, isInputElement, isSelectElement, isTextAreaElement, normalizeFieldValue, requestSubmit, updateField };

package/dist/form.d.ts

@@ -147,15 +147,5 @@ export type FormContext<Schema extends Record<string, any> = any, FormError = st
     };
 };
 export declare function createFormContext<Schema extends Record<string, any>, FormError = string[], FormValue = Schema>(options: FormOptions<Schema, FormError, FormValue>): FormContext<Schema, FormError, FormValue>;
-/**
- * Updates the DOM element with the provided value.
- *
- * @param element The form element to update
- * @param options The options to update the form element
- */
-export declare function updateFieldValue(element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, options: {
-    value?: string | string[];
-    defaultValue?: string | string[];
-}): void;
 export {};
 //# sourceMappingURL=form.d.ts.map

package/dist/form.js

@@ -582,8 +582,8 @@ function createFormContext(options) {
                 var paths = formdata.getChildPaths(parentPaths, element.name);
                 if (paths) {
                   var value = formdata.getValue(intent.payload.value, formdata.formatPaths(paths));
-                  updateFieldValue(element, {
-                    value: typeof value === 'string' || Array.isArray(value) && value.every(item => typeof item === 'string') ? value : ''
+                  dom.updateField(element, {
+                    value: typeof value === 'string' || Array.isArray(value) && value.every(item => typeof item === 'string') ? value : null
                   });
 
                   // Update the element attribute to notify useControl / useInputControl hook
@@ -597,10 +597,10 @@ function createFormContext(options) {
           {
             var prefix = formdata.formatName(intent.payload.name, intent.payload.index);
             for (var _element of formElement.elements) {
-              if (dom.isFieldElement(_element) && formdata.isPrefix(_element.name, prefix)) {
+              if (dom.isFieldElement(_element) && _element.name && formdata.isPrefix(_element.name, prefix)) {
                 var _value2 = formdata.getValue(meta.defaultValue, _element.name);
-                var defaultValue = typeof _value2 === 'string' || Array.isArray(_value2) && _value2.every(item => typeof item === 'string') ? _value2 : _element instanceof HTMLSelectElement ? [] : '';
-                updateFieldValue(_element, {
+                var defaultValue = typeof _value2 === 'string' || Array.isArray(_value2) && _value2.every(item => typeof item === 'string') ? _value2 : null;
+                dom.updateField(_element, {
                   defaultValue,
                   value: defaultValue
                 });
@@ -638,97 +638,4 @@ function createFormContext(options) {
   };
 }
 
-/**
- * Updates the DOM element with the provided value.
- *
- * @param element The form element to update
- * @param options The options to update the form element
- */
-function updateFieldValue(element, options) {
-  var value = typeof options.value === 'undefined' ? null : Array.isArray(options.value) ? Array.from(options.value) : [options.value];
-  var defaultValue = typeof options.defaultValue === 'undefined' ? null : Array.isArray(options.defaultValue) ? Array.from(options.defaultValue) : [options.defaultValue];
-  if (element instanceof HTMLInputElement && (element.type === 'checkbox' || element.type === 'radio')) {
-    if (value) {
-      element.checked = value.includes(element.value);
-    }
-    if (defaultValue) {
-      element.defaultChecked = defaultValue.includes(element.value);
-    }
-  } else if (element instanceof HTMLSelectElement) {
-    // If the select element is not multiple and the value is an empty array, unset the selected index
-    // This is to prevent the select element from showing the first option as selected
-    if (value && value.length === 0 && !element.multiple) {
-      element.selectedIndex = -1;
-    }
-    for (var option of element.options) {
-      if (value) {
-        var index = value.indexOf(option.value);
-        var selected = index > -1;
-
-        // Update the selected state of the option
-        if (option.selected !== selected) {
-          option.selected = selected;
-        }
-
-        // Remove the option from the value array
-        if (selected) {
-          value.splice(index, 1);
-        }
-      }
-      if (defaultValue) {
-        var _index = defaultValue.indexOf(option.value);
-        var _selected = _index > -1;
-
-        // Update the selected state of the option
-        if (option.selected !== _selected) {
-          option.defaultSelected = _selected;
-        }
-
-        // Remove the option from the defaultValue array
-        if (_selected) {
-          defaultValue.splice(_index, 1);
-        }
-      }
-    }
-
-    // We have already removed all selected options from the value and defaultValue array at this point
-    var missingOptions = new Set([...(value !== null && value !== void 0 ? value : []), ...(defaultValue !== null && defaultValue !== void 0 ? defaultValue : [])]);
-    for (var optionValue of missingOptions) {
-      element.options.add(new Option(optionValue, optionValue, defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.includes(optionValue), value === null || value === void 0 ? void 0 : value.includes(optionValue)));
-    }
-  } else {
-    if (value) {
-      var _value$;
-      /**
-       * Triggering react custom change event
-       * Solution based on dom-testing-library
-       * @see https://github.com/facebook/react/issues/10135#issuecomment-401496776
-       * @see https://github.com/testing-library/dom-testing-library/blob/main/src/events.js#L104-L123
-       */
-      var inputValue = (_value$ = value[0]) !== null && _value$ !== void 0 ? _value$ : '';
-      var {
-        set: valueSetter
-      } = Object.getOwnPropertyDescriptor(element, 'value') || {};
-      var prototype = Object.getPrototypeOf(element);
-      var {
-        set: prototypeValueSetter
-      } = Object.getOwnPropertyDescriptor(prototype, 'value') || {};
-      if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
-        prototypeValueSetter.call(element, inputValue);
-      } else {
-        if (valueSetter) {
-          valueSetter.call(element, inputValue);
-        } else {
-          throw new Error('The given element does not have a value setter');
-        }
-      }
-    }
-    if (defaultValue) {
-      var _defaultValue$;
-      element.defaultValue = (_defaultValue$ = defaultValue[0]) !== null && _defaultValue$ !== void 0 ? _defaultValue$ : '';
-    }
-  }
-}
-
 exports.createFormContext = createFormContext;
-exports.updateFieldValue = updateFieldValue;

package/dist/form.mjs

@@ -1,6 +1,6 @@
 import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
 import { flatten, formatName, getValue, isPlainObject, isPrefix, setValue, normalize, getFormData, getPaths, getChildPaths, formatPaths } from './formdata.mjs';
-import { getFormAction, getFormEncType, getFormMethod, isFieldElement, requestSubmit } from './dom.mjs';
+import { getFormAction, getFormEncType, getFormMethod, isFieldElement, requestSubmit, updateField } from './dom.mjs';
 import { generateId, clone, invariant } from './util.mjs';
 import { serialize, setListState, setListValue, setState, INTENT, serializeIntent, root, getSubmissionContext } from './submission.mjs';
 
@@ -578,8 +578,8 @@ function createFormContext(options) {
                 var paths = getChildPaths(parentPaths, element.name);
                 if (paths) {
                   var value = getValue(intent.payload.value, formatPaths(paths));
-                  updateFieldValue(element, {
-                    value: typeof value === 'string' || Array.isArray(value) && value.every(item => typeof item === 'string') ? value : ''
+                  updateField(element, {
+                    value: typeof value === 'string' || Array.isArray(value) && value.every(item => typeof item === 'string') ? value : null
                   });
 
                   // Update the element attribute to notify useControl / useInputControl hook
@@ -593,10 +593,10 @@ function createFormContext(options) {
           {
             var prefix = formatName(intent.payload.name, intent.payload.index);
             for (var _element of formElement.elements) {
-              if (isFieldElement(_element) && isPrefix(_element.name, prefix)) {
+              if (isFieldElement(_element) && _element.name && isPrefix(_element.name, prefix)) {
                 var _value2 = getValue(meta.defaultValue, _element.name);
-                var defaultValue = typeof _value2 === 'string' || Array.isArray(_value2) && _value2.every(item => typeof item === 'string') ? _value2 : _element instanceof HTMLSelectElement ? [] : '';
-                updateFieldValue(_element, {
+                var defaultValue = typeof _value2 === 'string' || Array.isArray(_value2) && _value2.every(item => typeof item === 'string') ? _value2 : null;
+                updateField(_element, {
                   defaultValue,
                   value: defaultValue
                 });
@@ -634,96 +634,4 @@ function createFormContext(options) {
   };
 }
 
-/**
- * Updates the DOM element with the provided value.
- *
- * @param element The form element to update
- * @param options The options to update the form element
- */
-function updateFieldValue(element, options) {
-  var value = typeof options.value === 'undefined' ? null : Array.isArray(options.value) ? Array.from(options.value) : [options.value];
-  var defaultValue = typeof options.defaultValue === 'undefined' ? null : Array.isArray(options.defaultValue) ? Array.from(options.defaultValue) : [options.defaultValue];
-  if (element instanceof HTMLInputElement && (element.type === 'checkbox' || element.type === 'radio')) {
-    if (value) {
-      element.checked = value.includes(element.value);
-    }
-    if (defaultValue) {
-      element.defaultChecked = defaultValue.includes(element.value);
-    }
-  } else if (element instanceof HTMLSelectElement) {
-    // If the select element is not multiple and the value is an empty array, unset the selected index
-    // This is to prevent the select element from showing the first option as selected
-    if (value && value.length === 0 && !element.multiple) {
-      element.selectedIndex = -1;
-    }
-    for (var option of element.options) {
-      if (value) {
-        var index = value.indexOf(option.value);
-        var selected = index > -1;
-
-        // Update the selected state of the option
-        if (option.selected !== selected) {
-          option.selected = selected;
-        }
-
-        // Remove the option from the value array
-        if (selected) {
-          value.splice(index, 1);
-        }
-      }
-      if (defaultValue) {
-        var _index = defaultValue.indexOf(option.value);
-        var _selected = _index > -1;
-
-        // Update the selected state of the option
-        if (option.selected !== _selected) {
-          option.defaultSelected = _selected;
-        }
-
-        // Remove the option from the defaultValue array
-        if (_selected) {
-          defaultValue.splice(_index, 1);
-        }
-      }
-    }
-
-    // We have already removed all selected options from the value and defaultValue array at this point
-    var missingOptions = new Set([...(value !== null && value !== void 0 ? value : []), ...(defaultValue !== null && defaultValue !== void 0 ? defaultValue : [])]);
-    for (var optionValue of missingOptions) {
-      element.options.add(new Option(optionValue, optionValue, defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.includes(optionValue), value === null || value === void 0 ? void 0 : value.includes(optionValue)));
-    }
-  } else {
-    if (value) {
-      var _value$;
-      /**
-       * Triggering react custom change event
-       * Solution based on dom-testing-library
-       * @see https://github.com/facebook/react/issues/10135#issuecomment-401496776
-       * @see https://github.com/testing-library/dom-testing-library/blob/main/src/events.js#L104-L123
-       */
-      var inputValue = (_value$ = value[0]) !== null && _value$ !== void 0 ? _value$ : '';
-      var {
-        set: valueSetter
-      } = Object.getOwnPropertyDescriptor(element, 'value') || {};
-      var prototype = Object.getPrototypeOf(element);
-      var {
-        set: prototypeValueSetter
-      } = Object.getOwnPropertyDescriptor(prototype, 'value') || {};
-      if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
-        prototypeValueSetter.call(element, inputValue);
-      } else {
-        if (valueSetter) {
-          valueSetter.call(element, inputValue);
-        } else {
-          throw new Error('The given element does not have a value setter');
-        }
-      }
-    }
-    if (defaultValue) {
-      var _defaultValue$;
-      element.defaultValue = (_defaultValue$ = defaultValue[0]) !== null && _defaultValue$ !== void 0 ? _defaultValue$ : '';
-    }
-  }
-}
-
-export { createFormContext, updateFieldValue };
+export { createFormContext };

package/dist/formdata.d.ts

@@ -64,4 +64,5 @@ export declare function flatten(data: unknown, options?: {
     resolve?: (data: unknown) => unknown;
     prefix?: string;
 }): Record<string, unknown>;
+export declare function deepEqual<Value>(prev: Value, next: Value): boolean;
 //# sourceMappingURL=formdata.d.ts.map

package/dist/formdata.js

@@ -213,7 +213,43 @@ function flatten(data) {
   }
   return result;
 }
+function deepEqual(prev, next) {
+  if (prev === next) {
+    return true;
+  }
+  if (!prev || !next) {
+    return false;
+  }
+  if (Array.isArray(prev) && Array.isArray(next)) {
+    if (prev.length !== next.length) {
+      return false;
+    }
+    for (var i = 0; i < prev.length; i++) {
+      if (!deepEqual(prev[i], next[i])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  if (isPlainObject(prev) && isPlainObject(next)) {
+    var prevKeys = Object.keys(prev);
+    var nextKeys = Object.keys(next);
+    if (prevKeys.length !== nextKeys.length) {
+      return false;
+    }
+    for (var key of prevKeys) {
+      if (!Object.prototype.hasOwnProperty.call(next, key) ||
+      // @ts-expect-error FIXME
+      !deepEqual(prev[key], next[key])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  return false;
+}
 
+exports.deepEqual = deepEqual;
 exports.flatten = flatten;
 exports.formatName = formatName;
 exports.formatPaths = formatPaths;

package/dist/formdata.mjs

@@ -209,5 +209,40 @@ function flatten(data) {
   }
   return result;
 }
+function deepEqual(prev, next) {
+  if (prev === next) {
+    return true;
+  }
+  if (!prev || !next) {
+    return false;
+  }
+  if (Array.isArray(prev) && Array.isArray(next)) {
+    if (prev.length !== next.length) {
+      return false;
+    }
+    for (var i = 0; i < prev.length; i++) {
+      if (!deepEqual(prev[i], next[i])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  if (isPlainObject(prev) && isPlainObject(next)) {
+    var prevKeys = Object.keys(prev);
+    var nextKeys = Object.keys(next);
+    if (prevKeys.length !== nextKeys.length) {
+      return false;
+    }
+    for (var key of prevKeys) {
+      if (!Object.prototype.hasOwnProperty.call(next, key) ||
+      // @ts-expect-error FIXME
+      !deepEqual(prev[key], next[key])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  return false;
+}
 
-export { flatten, formatName, formatPaths, getChildPaths, getFormData, getPaths, getValue, isFile, isPlainObject, isPrefix, normalize, setValue };
+export { deepEqual, flatten, formatName, formatPaths, getChildPaths, getFormData, getPaths, getValue, isFile, isPlainObject, isPrefix, normalize, setValue };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-export { type Combine, type Constraint, type ControlButtonProps, type FormId, type FieldName, type DefaultValue, type FormValue, type FormOptions, type FormState, type FormContext, type SubscriptionSubject, type SubscriptionScope, createFormContext as unstable_createFormContext, updateFieldValue as unstable_updateFieldValue, } from './form';
-export { type FieldElement, isFieldElement } from './dom';
+export { type Combine, type Constraint, type ControlButtonProps, type FormId, type FieldName, type DefaultValue, type FormValue, type FormOptions, type FormState, type FormContext, type SubscriptionSubject, type SubscriptionScope, createFormContext as unstable_createFormContext, } from './form';
+export { type FieldElement, isFieldElement, updateField as unstable_updateField, createFileList, createGlobalFormsObserver as unstable_createGlobalFormsObserver, focus as unstable_focus, change as unstable_change, blur as unstable_blur, } from './dom';
 export { type Submission, type SubmissionResult, type Intent, INTENT, STATE, serializeIntent, parse, } from './submission';
-export { getPaths, formatPaths, isPrefix } from './formdata';
+export { getPaths, formatPaths, isPrefix, deepEqual as unstable_deepEqual, } from './formdata';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -10,8 +10,13 @@ var formdata = require('./formdata.js');
 
 
 exports.unstable_createFormContext = form.createFormContext;
-exports.unstable_updateFieldValue = form.updateFieldValue;
+exports.createFileList = dom.createFileList;
 exports.isFieldElement = dom.isFieldElement;
+exports.unstable_blur = dom.blur;
+exports.unstable_change = dom.change;
+exports.unstable_createGlobalFormsObserver = dom.createGlobalFormsObserver;
+exports.unstable_focus = dom.focus;
+exports.unstable_updateField = dom.updateField;
 exports.INTENT = submission.INTENT;
 exports.STATE = submission.STATE;
 exports.parse = submission.parse;
@@ -19,3 +24,4 @@ exports.serializeIntent = submission.serializeIntent;
 exports.formatPaths = formdata.formatPaths;
 exports.getPaths = formdata.getPaths;
 exports.isPrefix = formdata.isPrefix;
+exports.unstable_deepEqual = formdata.deepEqual;

package/dist/index.mjs

@@ -1,4 +1,4 @@
-export { createFormContext as unstable_createFormContext, updateFieldValue as unstable_updateFieldValue } from './form.mjs';
-export { isFieldElement } from './dom.mjs';
+export { createFormContext as unstable_createFormContext } from './form.mjs';
+export { createFileList, isFieldElement, blur as unstable_blur, change as unstable_change, createGlobalFormsObserver as unstable_createGlobalFormsObserver, focus as unstable_focus, updateField as unstable_updateField } from './dom.mjs';
 export { INTENT, STATE, parse, serializeIntent } from './submission.mjs';
-export { formatPaths, getPaths, isPrefix } from './formdata.mjs';
+export { formatPaths, getPaths, isPrefix, deepEqual as unstable_deepEqual } from './formdata.mjs';

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": "A set of opinionated helpers built on top of the Constraint Validation API",
   "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",