@conform-to/react 1.15.1 → 1.17.0

package/README.md

@@ -7,7 +7,7 @@
  ╚══════╝  ╚═════╝  ╚═╝  ╚══╝ ╚═╝        ╚═════╝  ╚═╝   ╚═╝ ╚═╝   ╚═╝
 ```
 
-Version 1.15.1 / 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.d.ts

@@ -0,0 +1,43 @@
+import { FieldName } from '@conform-to/dom';
+import { StandardSchemaV1 } from './standard-schema';
+import { FormRef, FormsConfig, FormContext, FormMetadata, FormOptions, Fieldset, FieldMetadata, InferOutput, InferInput, IntentDispatcher } from './types';
+export declare function configureForms<BaseErrorShape = string, BaseSchema = StandardSchemaV1, CustomFormMetadata extends Record<string, unknown> = {}, CustomFieldMetadata extends Record<string, unknown> = {}>(config?: Partial<FormsConfig<BaseErrorShape, BaseSchema, CustomFormMetadata, CustomFieldMetadata>>): {
+    FormProvider: (props: {
+        context: FormContext<BaseErrorShape>;
+        children: React.ReactNode;
+    }) => React.ReactElement;
+    useForm: {
+        <Schema extends BaseSchema, ErrorShape extends BaseErrorShape = BaseErrorShape, Value = InferOutput<Schema>>(schema: Schema, options: FormOptions<InferInput<Schema> extends Record<string, any> ? InferInput<Schema> : never, ErrorShape, Value, Schema, string extends ErrorShape ? never : "onValidate">): {
+            form: FormMetadata<ErrorShape, CustomFormMetadata, CustomFieldMetadata>;
+            fields: Fieldset<InferInput<Schema>, ErrorShape, CustomFieldMetadata>;
+            intent: IntentDispatcher<InferInput<Schema> extends Record<string, any> ? InferInput<Schema> : never>;
+        };
+        <FormShape extends Record<string, any> = Record<string, any>, ErrorShape extends BaseErrorShape = BaseErrorShape, Value = undefined>(options: FormOptions<FormShape, ErrorShape, Value, undefined, undefined extends Value ? "onValidate" : never> & {
+            /**
+             * @deprecated Use `useForm(schema, options)` instead for better type inference.
+             *
+             * Optional standard schema for validation (e.g., Zod, Valibot, Yup).
+             * Removes the need for manual onValidate setup.
+             */
+            schema: StandardSchemaV1<FormShape, Value>;
+        }): {
+            form: FormMetadata<ErrorShape, CustomFormMetadata, CustomFieldMetadata>;
+            fields: Fieldset<FormShape, ErrorShape, CustomFieldMetadata>;
+            intent: IntentDispatcher<FormShape>;
+        };
+        <FormShape extends Record<string, any> = Record<string, any>, ErrorShape extends BaseErrorShape = BaseErrorShape, Value = undefined>(options: FormOptions<FormShape, ErrorShape, Value, undefined, "onValidate">): {
+            form: FormMetadata<ErrorShape, CustomFormMetadata, CustomFieldMetadata>;
+            fields: Fieldset<FormShape, ErrorShape, CustomFieldMetadata>;
+            intent: IntentDispatcher<FormShape>;
+        };
+    };
+    useFormMetadata: (options?: {
+        formId?: string;
+    }) => FormMetadata<BaseErrorShape, CustomFormMetadata, CustomFieldMetadata>;
+    useField: <FieldShape = any>(name: FieldName<FieldShape>, options?: {
+        formId?: string;
+    }) => FieldMetadata<FieldShape, BaseErrorShape, CustomFieldMetadata>;
+    useIntent: <FormShape extends Record<string, any>>(formRef: FormRef) => IntentDispatcher<FormShape>;
+    config: FormsConfig<BaseErrorShape, BaseSchema, CustomFormMetadata, CustomFieldMetadata>;
+};
+//# sourceMappingURL=forms.d.ts.map