@conform-to/react 1.16.0 → 1.17.0

package/README.md

@@ -7,7 +7,7 @@
  ╚══════╝  ╚═════╝  ╚═╝  ╚══╝ ╚═╝        ╚═════╝  ╚═╝   ╚═╝ ╚═╝   ╚═╝
 ```
 
-Version 1.16.0 / License MIT / Copyright (c) 2025 Edmund Hung
+Version 1.17.0 / License MIT / Copyright (c) 2025 Edmund Hung
 
 Progressively enhance HTML forms with React. Build resilient, type-safe forms with no hassle using web standards.
 

package/dist/context.js

@@ -189,6 +189,7 @@ function getFieldMetadata(context, subjectRef, stateSnapshot) {
         case 'pattern':
         case 'step':
         case 'multiple':
+        case 'accept':
           return (_state$constraint$nam = state.constraint[name]) === null || _state$constraint$nam === void 0 ? void 0 : _state$constraint$nam[key];
         case 'getFieldList':
           {

package/dist/context.mjs

@@ -185,6 +185,7 @@ function getFieldMetadata(context, subjectRef, stateSnapshot) {
         case 'pattern':
         case 'step':
         case 'multiple':
+        case 'accept':
           return (_state$constraint$nam = state.constraint[name]) === null || _state$constraint$nam === void 0 ? void 0 : _state$constraint$nam[key];
         case 'getFieldList':
           {

package/dist/future/dom.d.ts

@@ -34,4 +34,14 @@ export declare function resetFormValue(form: HTMLFormElement, defaultValue: Reco
  * Each property access returns a function that submits the intent to the form.
  */
 export declare function createIntentDispatcher<FormShape extends Record<string, any>>(formElement: HTMLFormElement | (() => HTMLFormElement | null), intentName: string): IntentDispatcher<FormShape>;
+/**
+ * Restores values from preserved inputs and removes them.
+ * Called when PreserveBoundary mounts.
+ */
+export declare function cleanupPreservedInputs(boundary: HTMLElement, form: HTMLFormElement, name?: string): void;
+/**
+ * Clones inputs as hidden elements to preserve their values.
+ * Called when PreserveBoundary unmounts.
+ */
+export declare function preserveInputs(inputs: Iterable<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>, form: HTMLFormElement, name?: string): void;
 //# sourceMappingURL=dom.d.ts.map

package/dist/future/dom.js

@@ -237,7 +237,132 @@ function createIntentDispatcher(formElement, intentName) {
     }
   });
 }
+var PERSIST_ATTR = 'data-conform-persist';
+var containerCache = new WeakMap();
 
+/**
+ * Gets or creates a hidden container for persisted inputs.
+ * Using a container div instead of appending directly to <form> provides ~10x
+ * better performance (form.elements bookkeeping is expensive at scale).
+ */
+function getPersistContainer(form) {
+  var container = containerCache.get(form);
+
+  // Verify container is still attached to the form
+  if (container && container.parentNode !== form) {
+    container = undefined;
+  }
+  if (!container) {
+    container = form.ownerDocument.createElement('div');
+    container.setAttribute(PERSIST_ATTR, '');
+    container.hidden = true;
+    form.appendChild(container);
+    containerCache.set(form, container);
+  }
+  return container;
+}
+
+/**
+ * Restores values from preserved inputs and removes them.
+ * Called when PreserveBoundary mounts.
+ */
+function cleanupPreservedInputs(boundary, form, name) {
+  var inputs = boundary.querySelectorAll('input,select,textarea');
+  var container = getPersistContainer(form);
+  for (var input of inputs) {
+    if (!future.isFieldElement(input) || !input.name) {
+      continue;
+    }
+
+    // For checkbox/radio, match by field name + value (+ boundary name if provided)
+    // For other inputs, match by field name only (+ boundary name if provided)
+    var isCheckboxOrRadio = input.type === 'checkbox' || input.type === 'radio';
+
+    // Query the persist container, not the whole form
+    var boundarySelector = name ? "[".concat(PERSIST_ATTR, "=\"").concat(name, "\"]") : '';
+    var selector = isCheckboxOrRadio ? "".concat(boundarySelector, "[name=\"").concat(input.name, "\"][value=\"").concat(input.value, "\"]") : "".concat(boundarySelector, "[name=\"").concat(input.name, "\"]");
+    var persisted = container.querySelector(selector);
+    if (persisted) {
+      if (input instanceof HTMLInputElement && persisted instanceof HTMLInputElement) {
+        if (isCheckboxOrRadio) {
+          input.checked = persisted.checked;
+        } else if (input.type === 'file') {
+          // Restore files from the persisted input (may be empty)
+          input.files = persisted.files;
+        } else {
+          input.value = persisted.value;
+        }
+      } else if (input instanceof HTMLSelectElement && persisted instanceof HTMLSelectElement) {
+        var _loop = function _loop(option) {
+          var _persistedOption$sele;
+          var persistedOption = Array.from(persisted.options).find(o => o.value === option.value);
+          option.selected = (_persistedOption$sele = persistedOption === null || persistedOption === void 0 ? void 0 : persistedOption.selected) !== null && _persistedOption$sele !== void 0 ? _persistedOption$sele : false;
+        };
+        for (var option of input.options) {
+          _loop(option);
+        }
+      } else if (input instanceof HTMLTextAreaElement && persisted instanceof HTMLTextAreaElement) {
+        input.value = persisted.value;
+      }
+      persisted.remove();
+    }
+  }
+
+  // If name is provided, remove any remaining persisted inputs with this name
+  // (handles the case where inputs were removed from the boundary)
+  if (name) {
+    var remainingPersisted = container.querySelectorAll("[".concat(PERSIST_ATTR, "=\"").concat(name, "\"]"));
+    remainingPersisted.forEach(el => el.remove());
+  }
+}
+
+/**
+ * Clones inputs as hidden elements to preserve their values.
+ * Called when PreserveBoundary unmounts.
+ */
+function preserveInputs(inputs, form, name) {
+  // Get the persist container once, outside the loop
+  var container = getPersistContainer(form);
+  for (var input of inputs) {
+    if (!future.isFieldElement(input) || !input.name) {
+      continue;
+    }
+
+    // Skip unchecked checkbox/radio (they don't contribute to FormData)
+    if (input instanceof HTMLInputElement && (input.type === 'checkbox' || input.type === 'radio') && !input.checked) {
+      continue;
+    }
+
+    // Clone the input element
+    var clone = input.cloneNode(true);
+
+    // Mark with name if provided, and hide it
+    if (name) {
+      clone.setAttribute(PERSIST_ATTR, name);
+    }
+    clone.hidden = true;
+
+    // Copy dynamic state that cloneNode doesn't preserve
+    if (input instanceof HTMLSelectElement) {
+      // cloneNode doesn't copy selected state for options
+      for (var i = 0; i < input.options.length; i++) {
+        var inputOption = input.options[i];
+        var cloneOption = clone.options[i];
+        if (inputOption && cloneOption) {
+          cloneOption.selected = inputOption.selected;
+        }
+      }
+    } else if (input instanceof HTMLInputElement && input.type === 'file') {
+      // cloneNode doesn't copy files
+      clone.files = input.files;
+    }
+
+    // Append to persist container (faster than appending directly to form)
+    container.appendChild(clone);
+  }
+}
+
+exports.cleanupPreservedInputs = cleanupPreservedInputs;
 exports.createDefaultSnapshot = createDefaultSnapshot;
 exports.createIntentDispatcher = createIntentDispatcher;
 exports.focusFirstInvalidField = focusFirstInvalidField;
@@ -248,5 +373,6 @@ exports.getRadioGroupValue = getRadioGroupValue;
 exports.getSubmitEvent = getSubmitEvent;
 exports.initializeField = initializeField;
 exports.makeInputFocusable = makeInputFocusable;
+exports.preserveInputs = preserveInputs;
 exports.resetFormValue = resetFormValue;
 exports.updateFormValue = updateFormValue;

package/dist/future/dom.mjs

@@ -233,5 +233,129 @@ function createIntentDispatcher(formElement, intentName) {
     }
   });
 }
+var PERSIST_ATTR = 'data-conform-persist';
+var containerCache = new WeakMap();
 
-export { createDefaultSnapshot, createIntentDispatcher, focusFirstInvalidField, getCheckboxGroupValue, getFormElement, getInputSnapshot, getRadioGroupValue, getSubmitEvent, initializeField, makeInputFocusable, resetFormValue, updateFormValue };
+/**
+ * Gets or creates a hidden container for persisted inputs.
+ * Using a container div instead of appending directly to <form> provides ~10x
+ * better performance (form.elements bookkeeping is expensive at scale).
+ */
+function getPersistContainer(form) {
+  var container = containerCache.get(form);
+
+  // Verify container is still attached to the form
+  if (container && container.parentNode !== form) {
+    container = undefined;
+  }
+  if (!container) {
+    container = form.ownerDocument.createElement('div');
+    container.setAttribute(PERSIST_ATTR, '');
+    container.hidden = true;
+    form.appendChild(container);
+    containerCache.set(form, container);
+  }
+  return container;
+}
+
+/**
+ * Restores values from preserved inputs and removes them.
+ * Called when PreserveBoundary mounts.
+ */
+function cleanupPreservedInputs(boundary, form, name) {
+  var inputs = boundary.querySelectorAll('input,select,textarea');
+  var container = getPersistContainer(form);
+  for (var input of inputs) {
+    if (!isFieldElement(input) || !input.name) {
+      continue;
+    }
+
+    // For checkbox/radio, match by field name + value (+ boundary name if provided)
+    // For other inputs, match by field name only (+ boundary name if provided)
+    var isCheckboxOrRadio = input.type === 'checkbox' || input.type === 'radio';
+
+    // Query the persist container, not the whole form
+    var boundarySelector = name ? "[".concat(PERSIST_ATTR, "=\"").concat(name, "\"]") : '';
+    var selector = isCheckboxOrRadio ? "".concat(boundarySelector, "[name=\"").concat(input.name, "\"][value=\"").concat(input.value, "\"]") : "".concat(boundarySelector, "[name=\"").concat(input.name, "\"]");
+    var persisted = container.querySelector(selector);
+    if (persisted) {
+      if (input instanceof HTMLInputElement && persisted instanceof HTMLInputElement) {
+        if (isCheckboxOrRadio) {
+          input.checked = persisted.checked;
+        } else if (input.type === 'file') {
+          // Restore files from the persisted input (may be empty)
+          input.files = persisted.files;
+        } else {
+          input.value = persisted.value;
+        }
+      } else if (input instanceof HTMLSelectElement && persisted instanceof HTMLSelectElement) {
+        var _loop = function _loop(option) {
+          var _persistedOption$sele;
+          var persistedOption = Array.from(persisted.options).find(o => o.value === option.value);
+          option.selected = (_persistedOption$sele = persistedOption === null || persistedOption === void 0 ? void 0 : persistedOption.selected) !== null && _persistedOption$sele !== void 0 ? _persistedOption$sele : false;
+        };
+        for (var option of input.options) {
+          _loop(option);
+        }
+      } else if (input instanceof HTMLTextAreaElement && persisted instanceof HTMLTextAreaElement) {
+        input.value = persisted.value;
+      }
+      persisted.remove();
+    }
+  }
+
+  // If name is provided, remove any remaining persisted inputs with this name
+  // (handles the case where inputs were removed from the boundary)
+  if (name) {
+    var remainingPersisted = container.querySelectorAll("[".concat(PERSIST_ATTR, "=\"").concat(name, "\"]"));
+    remainingPersisted.forEach(el => el.remove());
+  }
+}
+
+/**
+ * Clones inputs as hidden elements to preserve their values.
+ * Called when PreserveBoundary unmounts.
+ */
+function preserveInputs(inputs, form, name) {
+  // Get the persist container once, outside the loop
+  var container = getPersistContainer(form);
+  for (var input of inputs) {
+    if (!isFieldElement(input) || !input.name) {
+      continue;
+    }
+
+    // Skip unchecked checkbox/radio (they don't contribute to FormData)
+    if (input instanceof HTMLInputElement && (input.type === 'checkbox' || input.type === 'radio') && !input.checked) {
+      continue;
+    }
+
+    // Clone the input element
+    var clone = input.cloneNode(true);
+
+    // Mark with name if provided, and hide it
+    if (name) {
+      clone.setAttribute(PERSIST_ATTR, name);
+    }
+    clone.hidden = true;
+
+    // Copy dynamic state that cloneNode doesn't preserve
+    if (input instanceof HTMLSelectElement) {
+      // cloneNode doesn't copy selected state for options
+      for (var i = 0; i < input.options.length; i++) {
+        var inputOption = input.options[i];
+        var cloneOption = clone.options[i];
+        if (inputOption && cloneOption) {
+          cloneOption.selected = inputOption.selected;
+        }
+      }
+    } else if (input instanceof HTMLInputElement && input.type === 'file') {
+      // cloneNode doesn't copy files
+      clone.files = input.files;
+    }
+
+    // Append to persist container (faster than appending directly to form)
+    container.appendChild(clone);
+  }
+}
+
+export { cleanupPreservedInputs, createDefaultSnapshot, createIntentDispatcher, focusFirstInvalidField, getCheckboxGroupValue, getFormElement, getInputSnapshot, getRadioGroupValue, getSubmitEvent, initializeField, makeInputFocusable, preserveInputs, resetFormValue, updateFormValue };

package/dist/future/forms.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/dist/future/forms.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.mjs';
 import { isFieldElement } from '@conform-to/dom';
 import { DEFAULT_INTENT_NAME, serialize } from '@conform-to/dom/future';

package/dist/future/hooks.d.ts

@@ -15,6 +15,25 @@ export declare function FormProvider(props: {
     context: FormContext;
     children: React.ReactNode;
 }): React.ReactElement;
+/**
+ * Preserves form field values when its contents are unmounted.
+ * Useful for multi-step forms and virtualized lists.
+ *
+ * @see https://conform.guide/api/react/future/PreserveBoundary
+ */
+export declare function PreserveBoundary(props: {
+    /**
+     * A unique name for the boundary within the form. Used to ensure proper
+     * unmount/remount behavior and to isolate preserved inputs between boundaries.
+     */
+    name: string;
+    /**
+     * The id of the form to associate with. Only needed when the boundary
+     * is rendered outside the form element.
+     */
+    form?: string;
+    children: React.ReactNode;
+}): React.ReactElement;
 /**
  * @deprecated Replaced by the `configureForms` factory API. This will be removed in the next minor version. If you are not ready to migrate, please pin to `v1.16.0`.
  */

package/dist/future/hooks.js

@@ -39,6 +39,47 @@ function FormProvider(props) {
   });
 }
 
+/**
+ * Preserves form field values when its contents are unmounted.
+ * Useful for multi-step forms and virtualized lists.
+ *
+ * @see https://conform.guide/api/react/future/PreserveBoundary
+ */
+function PreserveBoundary(props) {
+  // name is used as key so React properly unmounts/remounts when switching
+  // between boundaries. Without it, both sides of a ternary share
+  // key={undefined} and React reuses the instance (useId and key prop
+  // can't help here). This is why name is required.
+  return /*#__PURE__*/jsxRuntime.jsx(PreserveBoundaryImpl, _rollupPluginBabelHelpers.objectSpread2({}, props), props.name);
+}
+function PreserveBoundaryImpl(props) {
+  var fieldsetRef = react.useRef(null);
+
+  // useLayoutEffect to restore values before paint, avoiding flash of default values
+  useSafeLayoutEffect(() => {
+    var fieldset = fieldsetRef.current;
+    if (!fieldset || !fieldset.form) {
+      return;
+    }
+    var form = fieldset.form;
+
+    // On mount: restore values from preserved inputs
+    dom.cleanupPreservedInputs(fieldset, form, props.name);
+    return () => {
+      // On unmount: preserve input values
+      dom.preserveInputs(fieldset.querySelectorAll('input,select,textarea'), form, props.name);
+    };
+  }, [props.name]);
+  return /*#__PURE__*/jsxRuntime.jsx("fieldset", {
+    ref: fieldsetRef,
+    form: props.form,
+    style: {
+      display: 'contents'
+    },
+    children: props.children
+  });
+}
+
 /**
  * @deprecated Replaced by the `configureForms` factory API. This will be removed in the next minor version. If you are not ready to migrate, please pin to `v1.16.0`.
  */
@@ -77,11 +118,16 @@ function useConform(formRef, options) {
       resetKey: INITIAL_KEY
     });
     if (lastResult) {
-      state$1 = state.updateState(state$1, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, lastResult), {}, {
+      var intent$1 = lastResult.submission.intent ? intent.deserializeIntent(lastResult.submission.intent) : null;
+      var result = intent.applyIntent(lastResult, intent$1, {
+        handlers: intent.intentHandlers
+      });
+      state$1 = state.updateState(state$1, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, result), {}, {
         type: 'initialize',
-        intent: lastResult.submission.intent ? intent.deserializeIntent(lastResult.submission.intent) : null,
+        intent: intent$1,
         ctx: {
-          handlers: intent.actionHandlers,
+          handlers: intent.intentHandlers,
+          cancelled: result !== lastResult,
           reset: defaultValue => state.initializeState({
             defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : options.defaultValue,
             resetKey: INITIAL_KEY
@@ -99,14 +145,17 @@ function useConform(formRef, options) {
   var lastAsyncResultRef = react.useRef(null);
   var abortControllerRef = react.useRef(null);
   var handleSubmission = react.useCallback(function (type, result) {
-    var _optionsRef$current$o, _optionsRef$current;
     var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : optionsRef.current;
     var intent$1 = result.submission.intent ? intent.deserializeIntent(result.submission.intent) : null;
-    setState(state$1 => state.updateState(state$1, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, result), {}, {
+    var finalResult = intent.applyIntent(result, intent$1, {
+      handlers: intent.intentHandlers
+    });
+    setState(state$1 => state.updateState(state$1, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, finalResult), {}, {
       type,
       intent: intent$1,
       ctx: {
-        handlers: intent.actionHandlers,
+        handlers: intent.intentHandlers,
+        cancelled: finalResult !== result,
         reset(defaultValue) {
           return state.initializeState({
             defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : options.defaultValue
@@ -117,14 +166,15 @@ function useConform(formRef, options) {
 
     // TODO: move on error handler to a new effect
     var formElement = dom.getFormElement(formRef);
-    if (!formElement || !result.error) {
-      return;
+    if (formElement && result.error) {
+      var _optionsRef$current$o, _optionsRef$current;
+      (_optionsRef$current$o = (_optionsRef$current = optionsRef.current).onError) === null || _optionsRef$current$o === void 0 || _optionsRef$current$o.call(_optionsRef$current, {
+        formElement,
+        error: result.error,
+        intent: intent$1
+      });
     }
-    (_optionsRef$current$o = (_optionsRef$current = optionsRef.current).onError) === null || _optionsRef$current$o === void 0 || _optionsRef$current$o.call(_optionsRef$current, {
-      formElement,
-      error: result.error,
-      intent: intent$1
-    });
+    return finalResult;
   }, [formRef, optionsRef]);
   if (options.key !== keyRef.current) {
     keyRef.current = options.key;
@@ -200,17 +250,11 @@ function useConform(formRef, options) {
       if (pendingValueRef.current !== undefined) {
         submission.payload = pendingValueRef.current;
       }
-      var value = intent.applyIntent(submission);
+      var value = intent.resolveIntent(submission);
       var submissionResult = future.report(submission, {
         keepFiles: true,
         value
       });
-
-      // If there is target value, keep track of it as pending value
-      if (submission.payload !== value) {
-        var _ref;
-        pendingValueRef.current = (_ref = value !== null && value !== void 0 ? value : optionsRef.current.defaultValue) !== null && _ref !== void 0 ? _ref : {};
-      }
       var validateResult =
       // Skip validation on form reset
       value !== undefined ? (_optionsRef$current$o2 = (_optionsRef$current2 = optionsRef.current).onValidate) === null || _optionsRef$current$o2 === void 0 ? void 0 : _optionsRef$current$o2.call(_optionsRef$current2, {
@@ -237,11 +281,11 @@ function useConform(formRef, options) {
       }
       if (typeof asyncResult !== 'undefined') {
         // Update the form when the validation result is resolved
-        asyncResult.then(_ref2 => {
+        asyncResult.then(_ref => {
           var {
             error,
             value
-          } = _ref2;
+          } = _ref;
           // Update the form with the validation result
           // There is no need to flush the update in this case
           if (!abortController.signal.aborted) {
@@ -249,7 +293,7 @@ function useConform(formRef, options) {
             handleSubmission('server', submissionResult);
 
             // If the form is meant to be submitted and there is no error
-            if (error === null && !submission.intent) {
+            if (submissionResult.error === null && !submission.intent) {
               var _event = future.createSubmitEvent(submitEvent.submitter);
 
               // Keep track of the submit event so we can skip validation on the next submit
@@ -264,15 +308,19 @@ function useConform(formRef, options) {
           }
         });
       }
-      handleSubmission('client', submissionResult);
+      var clientResult = handleSubmission('client', submissionResult);
+      if (clientResult.reset || clientResult.targetValue !== undefined) {
+        var _ref2, _clientResult$targetV;
+        pendingValueRef.current = (_ref2 = (_clientResult$targetV = clientResult.targetValue) !== null && _clientResult$targetV !== void 0 ? _clientResult$targetV : optionsRef.current.defaultValue) !== null && _ref2 !== void 0 ? _ref2 : {};
+      }
       if (
       // If client validation happens
       (typeof syncResult !== 'undefined' || typeof asyncResult !== 'undefined') && (
       // Either the form is not meant to be submitted (i.e. intent is present) or there is an error / pending validation
-      submissionResult.submission.intent || submissionResult.error !== null)) {
+      clientResult.submission.intent || clientResult.error !== null)) {
         event.preventDefault();
       }
-      result = submissionResult;
+      result = clientResult;
     }
 
     // We might not prevent form submission if server validation is required
@@ -838,6 +886,7 @@ exports.FormOptionsProvider = FormOptionsProvider;
 exports.FormProvider = FormProvider;
 exports.GlobalFormOptionsContext = GlobalFormOptionsContext;
 exports.INITIAL_KEY = INITIAL_KEY;
+exports.PreserveBoundary = PreserveBoundary;
 exports.useConform = useConform;
 exports.useControl = useControl;
 exports.useField = useField;