@conform-to/dom 1.3.0 → 1.5.0

package/README.md

@@ -0,0 +1,36 @@
+```
+ ███████╗  ██████╗  ███╗  ██╗ ████████╗  ██████╗  ███████╗  ███╗ ███╗
+██╔═════╝ ██╔═══██╗ ████╗ ██║ ██╔═════╝ ██╔═══██╗ ██╔═══██╗ ████████║
+██║       ██║   ██║ ██╔██╗██║ ███████╗  ██║   ██║ ███████╔╝ ██╔██╔██║
+██║       ██║   ██║ ██║╚████║ ██╔════╝  ██║   ██║ ██╔═══██╗ ██║╚═╝██║
+╚███████╗ ╚██████╔╝ ██║ ╚███║ ██║       ╚██████╔╝ ██║   ██║ ██║   ██║
+ ╚══════╝  ╚═════╝  ╚═╝  ╚══╝ ╚═╝        ╚═════╝  ╚═╝   ╚═╝ ╚═╝   ╚═╝
+```
+
+Version 1.5.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.
+
+# Getting Started
+
+Check out the overview and tutorial at our website https://conform.guide
+
+# Features
+
+- Progressive enhancement first APIs
+- Type-safe field inference
+- Fine-grained subscription
+- Built-in accessibility helpers
+- Automatic type coercion with Zod
+
+# Documentation
+
+- Validation: https://conform.guide/validation
+- Nested object and Array: https://conform.guide/complex-structures
+- UI Integrations: https://conform.guide/integration/ui-libraries
+- Intent button: https://conform.guide/intent-button
+- Accessibility Guide: https://conform.guide/accessibility
+
+# Support
+
+To report a bug, please open an issue on the repository at https://github.com/edmundhung/conform. For feature requests and questions, you can post them in the Discussions section.

package/form.d.ts

@@ -35,6 +35,7 @@ export type Constraint = {
 export type FormMeta<FormError> = {
     formId: string;
     isValueUpdated: boolean;
+    pendingIntents: Intent[];
     submissionStatus?: 'error' | 'success';
     defaultValue: Record<string, unknown>;
     initialValue: Record<string, unknown>;
@@ -98,6 +99,7 @@ export type SubscriptionSubject = {
 } & {
     formId?: boolean;
     status?: boolean;
+    pendingIntents?: boolean;
 };
 export type SubscriptionScope = {
     prefix?: string[];
@@ -123,6 +125,7 @@ export type FormContext<Schema extends Record<string, any> = any, FormError = st
     onBlur(event: Event): void;
     onUpdate(options: Partial<FormOptions<Schema, FormError, FormValue>>): void;
     observe(): () => void;
+    runSideEffect(intents: Intent[]): void;
     subscribe(callback: () => void, getSubject?: () => SubscriptionSubject | undefined): () => void;
     getState(): FormState<FormError>;
     getSerializedState(): string;
@@ -144,4 +147,14 @@ 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 {};

package/form.js

@@ -8,13 +8,17 @@ var dom = require('./dom.js');
 var util = require('./util.js');
 var submission = require('./submission.js');
 
-function createFormMeta(options, initialized) {
+function createFormMeta(options, isResetting) {
   var _lastResult$initialVa, _options$constraint, _lastResult$state$val, _lastResult$state, _ref;
-  var lastResult = !initialized ? options.lastResult : undefined;
+  var lastResult = !isResetting ? options.lastResult : undefined;
   var defaultValue = options.defaultValue ? submission.serialize(options.defaultValue) : {};
   var initialValue = (_lastResult$initialVa = lastResult === null || lastResult === void 0 ? void 0 : lastResult.initialValue) !== null && _lastResult$initialVa !== void 0 ? _lastResult$initialVa : defaultValue;
   var result = {
     formId: options.formId,
+    pendingIntents: isResetting ? [{
+      type: 'reset',
+      payload: {}
+    }] : [],
     isValueUpdated: false,
     submissionStatus: lastResult === null || lastResult === void 0 ? void 0 : lastResult.status,
     defaultValue,
@@ -22,7 +26,7 @@ function createFormMeta(options, initialized) {
     value: initialValue,
     constraint: (_options$constraint = options.constraint) !== null && _options$constraint !== void 0 ? _options$constraint : {},
     validated: (_lastResult$state$val = lastResult === null || lastResult === void 0 || (_lastResult$state = lastResult.state) === null || _lastResult$state === void 0 ? void 0 : _lastResult$state.validated) !== null && _lastResult$state$val !== void 0 ? _lastResult$state$val : {},
-    key: !initialized ? getDefaultKey(defaultValue) : _rollupPluginBabelHelpers.objectSpread2({
+    key: !isResetting ? getDefaultKey(defaultValue) : _rollupPluginBabelHelpers.objectSpread2({
       '': util.generateId()
     }, getDefaultKey(defaultValue)),
     // The `lastResult` should comes from the server which we won't expect the error to be null
@@ -282,6 +286,7 @@ function shouldNotify(prev, next, cache, scope) {
 function createFormContext(options) {
   var subscribers = [];
   var latestOptions = options;
+  var processedIntents = new Set();
   var meta = createFormMeta(options);
   var state = createFormState(meta);
   function getFormElement() {
@@ -295,6 +300,7 @@ function createFormContext(options) {
     var value = next.value === next.initialValue ? initialValue : !state || prev.value !== next.value ? createValueProxy(next.value) : state.value;
     return {
       submissionStatus: next.submissionStatus,
+      pendingIntents: next.pendingIntents,
       defaultValue,
       initialValue,
       value,
@@ -328,7 +334,7 @@ function createFormContext(options) {
     for (var subscriber of subscribers) {
       var _subscriber$getSubjec;
       var subject = (_subscriber$getSubjec = subscriber.getSubject) === null || _subscriber$getSubjec === void 0 ? void 0 : _subscriber$getSubjec.call(subscriber);
-      if (!subject || subject.formId && prevMeta.formId !== nextMeta.formId || subject.status && prevState.submissionStatus !== nextState.submissionStatus || shouldNotify(prevState.error, nextState.error, cache.error, subject.error) || shouldNotify(prevState.initialValue, nextState.initialValue, cache.initialValue, subject.initialValue) || shouldNotify(prevState.key, nextState.key, cache.key, subject.key, (prev, next) => prev !== next) || shouldNotify(prevState.valid, nextState.valid, cache.valid, subject.valid, compareBoolean) || shouldNotify(prevState.dirty, nextState.dirty, cache.dirty, subject.dirty, compareBoolean) || shouldNotify(prevState.value, nextState.value, cache.value, subject.value)) {
+      if (!subject || subject.formId && prevMeta.formId !== nextMeta.formId || subject.status && prevState.submissionStatus !== nextState.submissionStatus || subject.pendingIntents && prevMeta.pendingIntents !== nextMeta.pendingIntents || shouldNotify(prevState.error, nextState.error, cache.error, subject.error) || shouldNotify(prevState.initialValue, nextState.initialValue, cache.initialValue, subject.initialValue) || shouldNotify(prevState.key, nextState.key, cache.key, subject.key, (prev, next) => prev !== next) || shouldNotify(prevState.valid, nextState.valid, cache.valid, subject.valid, compareBoolean) || shouldNotify(prevState.dirty, nextState.dirty, cache.dirty, subject.dirty, compareBoolean) || shouldNotify(prevState.value, nextState.value, cache.value, subject.value)) {
         subscriber.callback();
       }
     }
@@ -425,6 +431,7 @@ function createFormContext(options) {
     });
   }
   function reset() {
+    processedIntents.clear();
     updateFormMeta(createFormMeta(latestOptions, true));
   }
   function onReset(event) {
@@ -449,7 +456,9 @@ function createFormContext(options) {
       }
       return result;
     }, {});
+    var pendingIntents = result.intent ? meta.pendingIntents.filter(intent => !processedIntents.has(intent)).concat(result.intent) : meta.pendingIntents;
     var update = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, meta), {}, {
+      pendingIntents,
       isValueUpdated: false,
       submissionStatus: result.status,
       value: result.initialValue,
@@ -557,6 +566,55 @@ function createFormContext(options) {
       observer.disconnect();
     };
   }
+  function runSideEffect(intents) {
+    var formElement = getFormElement();
+    if (!formElement) {
+      return;
+    }
+    for (var intent of intents) {
+      switch (intent.type) {
+        case 'update':
+          {
+            var _name5 = formdata.formatName(intent.payload.name, intent.payload.index);
+            var parentPaths = formdata.getPaths(_name5);
+            for (var element of formElement.elements) {
+              if (dom.isFieldElement(element)) {
+                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 : ''
+                  });
+
+                  // Update the element attribute to notify useControl / useInputControl hook
+                  element.dataset.conform = util.generateId();
+                }
+              }
+            }
+            break;
+          }
+        case 'reset':
+          {
+            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)) {
+                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, {
+                  defaultValue,
+                  value: defaultValue
+                });
+
+                // Update the element attribute to notify useControl / useInputControl hook
+                _element.dataset.conform = util.generateId();
+              }
+            }
+            break;
+          }
+      }
+      processedIntents.add(intent);
+    }
+  }
   return {
     getFormId() {
       return meta.formId;
@@ -572,6 +630,7 @@ function createFormContext(options) {
     insert: createFormControl('insert'),
     remove: createFormControl('remove'),
     reorder: createFormControl('reorder'),
+    runSideEffect,
     subscribe,
     getState,
     getSerializedState,
@@ -579,4 +638,97 @@ 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/form.mjs

@@ -1,16 +1,20 @@
 import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
-import { flatten, formatName, getValue, isPlainObject, isPrefix, setValue, normalize, getFormData, getPaths, formatPaths } from './formdata.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 { generateId, clone, invariant } from './util.mjs';
 import { serialize, setListState, setListValue, setState, INTENT, serializeIntent, root, getSubmissionContext } from './submission.mjs';
 
-function createFormMeta(options, initialized) {
+function createFormMeta(options, isResetting) {
   var _lastResult$initialVa, _options$constraint, _lastResult$state$val, _lastResult$state, _ref;
-  var lastResult = !initialized ? options.lastResult : undefined;
+  var lastResult = !isResetting ? options.lastResult : undefined;
   var defaultValue = options.defaultValue ? serialize(options.defaultValue) : {};
   var initialValue = (_lastResult$initialVa = lastResult === null || lastResult === void 0 ? void 0 : lastResult.initialValue) !== null && _lastResult$initialVa !== void 0 ? _lastResult$initialVa : defaultValue;
   var result = {
     formId: options.formId,
+    pendingIntents: isResetting ? [{
+      type: 'reset',
+      payload: {}
+    }] : [],
     isValueUpdated: false,
     submissionStatus: lastResult === null || lastResult === void 0 ? void 0 : lastResult.status,
     defaultValue,
@@ -18,7 +22,7 @@ function createFormMeta(options, initialized) {
     value: initialValue,
     constraint: (_options$constraint = options.constraint) !== null && _options$constraint !== void 0 ? _options$constraint : {},
     validated: (_lastResult$state$val = lastResult === null || lastResult === void 0 || (_lastResult$state = lastResult.state) === null || _lastResult$state === void 0 ? void 0 : _lastResult$state.validated) !== null && _lastResult$state$val !== void 0 ? _lastResult$state$val : {},
-    key: !initialized ? getDefaultKey(defaultValue) : _objectSpread2({
+    key: !isResetting ? getDefaultKey(defaultValue) : _objectSpread2({
       '': generateId()
     }, getDefaultKey(defaultValue)),
     // The `lastResult` should comes from the server which we won't expect the error to be null
@@ -278,6 +282,7 @@ function shouldNotify(prev, next, cache, scope) {
 function createFormContext(options) {
   var subscribers = [];
   var latestOptions = options;
+  var processedIntents = new Set();
   var meta = createFormMeta(options);
   var state = createFormState(meta);
   function getFormElement() {
@@ -291,6 +296,7 @@ function createFormContext(options) {
     var value = next.value === next.initialValue ? initialValue : !state || prev.value !== next.value ? createValueProxy(next.value) : state.value;
     return {
       submissionStatus: next.submissionStatus,
+      pendingIntents: next.pendingIntents,
       defaultValue,
       initialValue,
       value,
@@ -324,7 +330,7 @@ function createFormContext(options) {
     for (var subscriber of subscribers) {
       var _subscriber$getSubjec;
       var subject = (_subscriber$getSubjec = subscriber.getSubject) === null || _subscriber$getSubjec === void 0 ? void 0 : _subscriber$getSubjec.call(subscriber);
-      if (!subject || subject.formId && prevMeta.formId !== nextMeta.formId || subject.status && prevState.submissionStatus !== nextState.submissionStatus || shouldNotify(prevState.error, nextState.error, cache.error, subject.error) || shouldNotify(prevState.initialValue, nextState.initialValue, cache.initialValue, subject.initialValue) || shouldNotify(prevState.key, nextState.key, cache.key, subject.key, (prev, next) => prev !== next) || shouldNotify(prevState.valid, nextState.valid, cache.valid, subject.valid, compareBoolean) || shouldNotify(prevState.dirty, nextState.dirty, cache.dirty, subject.dirty, compareBoolean) || shouldNotify(prevState.value, nextState.value, cache.value, subject.value)) {
+      if (!subject || subject.formId && prevMeta.formId !== nextMeta.formId || subject.status && prevState.submissionStatus !== nextState.submissionStatus || subject.pendingIntents && prevMeta.pendingIntents !== nextMeta.pendingIntents || shouldNotify(prevState.error, nextState.error, cache.error, subject.error) || shouldNotify(prevState.initialValue, nextState.initialValue, cache.initialValue, subject.initialValue) || shouldNotify(prevState.key, nextState.key, cache.key, subject.key, (prev, next) => prev !== next) || shouldNotify(prevState.valid, nextState.valid, cache.valid, subject.valid, compareBoolean) || shouldNotify(prevState.dirty, nextState.dirty, cache.dirty, subject.dirty, compareBoolean) || shouldNotify(prevState.value, nextState.value, cache.value, subject.value)) {
         subscriber.callback();
       }
     }
@@ -421,6 +427,7 @@ function createFormContext(options) {
     });
   }
   function reset() {
+    processedIntents.clear();
     updateFormMeta(createFormMeta(latestOptions, true));
   }
   function onReset(event) {
@@ -445,7 +452,9 @@ function createFormContext(options) {
       }
       return result;
     }, {});
+    var pendingIntents = result.intent ? meta.pendingIntents.filter(intent => !processedIntents.has(intent)).concat(result.intent) : meta.pendingIntents;
     var update = _objectSpread2(_objectSpread2({}, meta), {}, {
+      pendingIntents,
       isValueUpdated: false,
       submissionStatus: result.status,
       value: result.initialValue,
@@ -553,6 +562,55 @@ function createFormContext(options) {
       observer.disconnect();
     };
   }
+  function runSideEffect(intents) {
+    var formElement = getFormElement();
+    if (!formElement) {
+      return;
+    }
+    for (var intent of intents) {
+      switch (intent.type) {
+        case 'update':
+          {
+            var _name5 = formatName(intent.payload.name, intent.payload.index);
+            var parentPaths = getPaths(_name5);
+            for (var element of formElement.elements) {
+              if (isFieldElement(element)) {
+                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 : ''
+                  });
+
+                  // Update the element attribute to notify useControl / useInputControl hook
+                  element.dataset.conform = generateId();
+                }
+              }
+            }
+            break;
+          }
+        case 'reset':
+          {
+            var prefix = formatName(intent.payload.name, intent.payload.index);
+            for (var _element of formElement.elements) {
+              if (isFieldElement(_element) && 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, {
+                  defaultValue,
+                  value: defaultValue
+                });
+
+                // Update the element attribute to notify useControl / useInputControl hook
+                _element.dataset.conform = generateId();
+              }
+            }
+            break;
+          }
+      }
+      processedIntents.add(intent);
+    }
+  }
   return {
     getFormId() {
       return meta.formId;
@@ -568,6 +626,7 @@ function createFormContext(options) {
     insert: createFormControl('insert'),
     remove: createFormControl('remove'),
     reorder: createFormControl('reorder'),
+    runSideEffect,
     subscribe,
     getState,
     getSerializedState,
@@ -575,4 +634,96 @@ function createFormContext(options) {
   };
 }
 
-export { createFormContext };
+/**
+ * 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 };

package/formdata.d.ts

@@ -30,6 +30,11 @@ export declare function formatName(prefix: string | undefined, path?: string | n
  * Check if a name match the prefix paths
  */
 export declare function isPrefix(name: string, prefix: string): boolean;
+/**
+ * Compare the parent and child paths to get the relative paths
+ * Returns null if the child paths do not start with the parent paths
+ */
+export declare function getChildPaths(parentNameOrPaths: string | Array<string | number>, childName: string): (string | number)[] | null;
 /**
  * Assign a value to a target object by following the paths
  */

package/formdata.js

@@ -81,6 +81,19 @@ function isPrefix(name, prefix) {
   return paths.length >= prefixPaths.length && prefixPaths.every((path, index) => paths[index] === path);
 }
 
+/**
+ * Compare the parent and child paths to get the relative paths
+ * Returns null if the child paths do not start with the parent paths
+ */
+function getChildPaths(parentNameOrPaths, childName) {
+  var parentPaths = typeof parentNameOrPaths === 'string' ? getPaths(parentNameOrPaths) : parentNameOrPaths;
+  var childPaths = getPaths(childName);
+  if (childPaths.length >= parentPaths.length && parentPaths.every((path, index) => childPaths[index] === path)) {
+    return childPaths.slice(parentPaths.length);
+  }
+  return null;
+}
+
 /**
  * Assign a value to a target object by following the paths
  */
@@ -204,6 +217,7 @@ function flatten(data) {
 exports.flatten = flatten;
 exports.formatName = formatName;
 exports.formatPaths = formatPaths;
+exports.getChildPaths = getChildPaths;
 exports.getFormData = getFormData;
 exports.getPaths = getPaths;
 exports.getValue = getValue;

package/formdata.mjs

@@ -77,6 +77,19 @@ function isPrefix(name, prefix) {
   return paths.length >= prefixPaths.length && prefixPaths.every((path, index) => paths[index] === path);
 }
 
+/**
+ * Compare the parent and child paths to get the relative paths
+ * Returns null if the child paths do not start with the parent paths
+ */
+function getChildPaths(parentNameOrPaths, childName) {
+  var parentPaths = typeof parentNameOrPaths === 'string' ? getPaths(parentNameOrPaths) : parentNameOrPaths;
+  var childPaths = getPaths(childName);
+  if (childPaths.length >= parentPaths.length && parentPaths.every((path, index) => childPaths[index] === path)) {
+    return childPaths.slice(parentPaths.length);
+  }
+  return null;
+}
+
 /**
  * Assign a value to a target object by following the paths
  */
@@ -197,4 +210,4 @@ function flatten(data) {
   return result;
 }
 
-export { flatten, formatName, formatPaths, getFormData, getPaths, getValue, isFile, isPlainObject, isPrefix, normalize, setValue };
+export { flatten, formatName, formatPaths, getChildPaths, getFormData, getPaths, getValue, isFile, isPlainObject, isPrefix, normalize, setValue };

package/index.d.ts

@@ -1,4 +1,4 @@
-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 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 Submission, type SubmissionResult, type Intent, INTENT, STATE, serializeIntent, parse, } from './submission';
 export { getPaths, formatPaths, isPrefix } from './formdata';

package/index.js

@@ -10,6 +10,7 @@ var formdata = require('./formdata.js');
 
 
 exports.unstable_createFormContext = form.createFormContext;
+exports.unstable_updateFieldValue = form.updateFieldValue;
 exports.isFieldElement = dom.isFieldElement;
 exports.INTENT = submission.INTENT;
 exports.STATE = submission.STATE;

package/index.mjs

@@ -1,4 +1,4 @@
-export { createFormContext as unstable_createFormContext } from './form.mjs';
+export { createFormContext as unstable_createFormContext, updateFieldValue as unstable_updateFieldValue } from './form.mjs';
 export { isFieldElement } from './dom.mjs';
 export { INTENT, STATE, parse, serializeIntent } from './submission.mjs';
 export { formatPaths, getPaths, isPrefix } from './formdata.mjs';

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.3.0",
+  "version": "1.5.0",
   "main": "index.js",
   "module": "index.mjs",
   "types": "index.d.ts",