@conform-to/react 1.15.1 → 1.17.0

package/dist/future/intent.mjs

@@ -1,5 +1,5 @@
 import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.mjs';
-import { getPathSegments, getRelativePath, isPlainObject, appendPathSegment } from '@conform-to/dom/future';
+import { getPathSegments, getRelativePath, isPlainObject, appendPathSegment, getValueAtPath } from '@conform-to/dom/future';
 import { isOptional, isUndefined, isNullable, appendUniqueItem, merge, updateValueAtPath, isString, getArrayAtPath, createPathIndexUpdater, compactMap, generateUniqueKey, isNumber, transformKeys } from './util.mjs';
 import { getDefaultListKey } from './state.mjs';
 
@@ -42,19 +42,35 @@ function deserializeIntent(value) {
  * Applies intent transformation to submission payload.
  * Returns modified payload or null for reset intent.
  */
-function applyIntent(submission, options) {
-  var _options$handlers, _handler$validatePayl, _handler$validatePayl2;
+function resolveIntent(submission, options) {
+  var _options$handlers, _handler$validate, _handler$validate2;
   if (!submission.intent) {
     return submission.payload;
   }
   var intent = deserializeIntent(submission.intent);
-  var handlers = (_options$handlers = options === null || options === void 0 ? void 0 : options.handlers) !== null && _options$handlers !== void 0 ? _options$handlers : actionHandlers;
+  var handlers = (_options$handlers = options === null || options === void 0 ? void 0 : options.handlers) !== null && _options$handlers !== void 0 ? _options$handlers : intentHandlers;
   var handler = handlers[intent.type];
-  if (handler && handler.onApply && ((_handler$validatePayl = (_handler$validatePayl2 = handler.validatePayload) === null || _handler$validatePayl2 === void 0 ? void 0 : _handler$validatePayl2.call(handler, intent.payload)) !== null && _handler$validatePayl !== void 0 ? _handler$validatePayl : true)) {
-    return handler.onApply(submission.payload, intent.payload);
+  if (handler !== null && handler !== void 0 && handler.resolve && ((_handler$validate = (_handler$validate2 = handler.validate) === null || _handler$validate2 === void 0 ? void 0 : _handler$validate2.call(handler, intent.payload)) !== null && _handler$validate !== void 0 ? _handler$validate : true)) {
+    return handler.resolve(submission.payload, intent.payload);
   }
   return submission.payload;
 }
+
+/**
+ * Resolves an intent after validation by calling the handler's onResolve.
+ * Mutates the result with updated value/error and returns whether the intent was cancelled.
+ */
+function applyIntent(result, intent, options) {
+  if (intent) {
+    var _options$handlers2, _handler$validate3, _handler$validate4;
+    var handlers = (_options$handlers2 = options === null || options === void 0 ? void 0 : options.handlers) !== null && _options$handlers2 !== void 0 ? _options$handlers2 : intentHandlers;
+    var handler = handlers[intent.type];
+    if (handler !== null && handler !== void 0 && handler.apply && ((_handler$validate3 = (_handler$validate4 = handler.validate) === null || _handler$validate4 === void 0 ? void 0 : _handler$validate4.call(handler, intent.payload)) !== null && _handler$validate3 !== void 0 ? _handler$validate3 : true)) {
+      return handler.apply(result, intent.payload);
+    }
+  }
+  return result;
+}
 function insertItem(list, item, index) {
   list.splice(index, 0, item);
 }
@@ -86,36 +102,34 @@ function updateListKeys() {
  * - update: updates specific field values
  * - insert/remove/reorder: manages array field operations
  */
-var actionHandlers = {
+var intentHandlers = {
   reset: {
-    validatePayload(options) {
+    validate(options) {
       return isOptional(options, isPlainObject) && (isUndefined(options === null || options === void 0 ? void 0 : options.defaultValue) || isNullable(options === null || options === void 0 ? void 0 : options.defaultValue, isPlainObject));
     },
-    onApply(_, options) {
+    resolve(_, options) {
       if ((options === null || options === void 0 ? void 0 : options.defaultValue) === null) {
         return {};
       }
       return options === null || options === void 0 ? void 0 : options.defaultValue;
     },
-    onUpdate(_, _ref) {
-      var {
-        targetValue,
-        ctx
-      } = _ref;
-      return ctx.reset(targetValue);
+    apply(result) {
+      return _objectSpread2(_objectSpread2({}, result), {}, {
+        reset: true
+      });
     }
   },
   validate: {
-    validatePayload(name) {
+    validate(name) {
       return isOptional(name, isString);
     },
-    onUpdate(state, _ref2) {
+    update(state, _ref) {
       var _intent$payload;
       var {
         submission,
         intent,
         error
-      } = _ref2;
+      } = _ref;
       var name = (_intent$payload = intent.payload) !== null && _intent$payload !== void 0 ? _intent$payload : '';
       var basePath = getPathSegments(name);
       var allFields = error ?
@@ -134,20 +148,20 @@ var actionHandlers = {
     }
   },
   update: {
-    validatePayload(options) {
+    validate(options) {
       return isPlainObject(options) && isOptional(options.name, isString) && isOptional(options.index, isNumber) && !isUndefined(options.value);
     },
-    onApply(value, options) {
+    resolve(value, options) {
       var _options$value;
       var name = appendPathSegment(options.name, options.index);
       return updateValueAtPath(value, name, (_options$value = options.value) !== null && _options$value !== void 0 ? _options$value : name === '' ? {} : null);
     },
-    onUpdate(state, _ref3) {
+    update(state, _ref2) {
       var {
         type,
         submission,
         intent
-      } = _ref3;
+      } = _ref2;
       if (type === 'server') {
         return state;
       }
@@ -174,63 +188,141 @@ var actionHandlers = {
     }
   },
   insert: {
-    validatePayload(options) {
-      return isPlainObject(options) && isString(options.name) && isOptional(options.index, isNumber);
+    validate(options) {
+      return isPlainObject(options) && isString(options.name) && isOptional(options.index, isNumber) && isOptional(options.from, isString) && isOptional(options.onInvalid, mode => mode === 'revert');
     },
-    onApply(value, options) {
+    resolve(value, options) {
       var _options$index;
-      var list = Array.from(getArrayAtPath(value, options.name));
-      insertItem(list, options.defaultValue, (_options$index = options.index) !== null && _options$index !== void 0 ? _options$index : list.length);
-      return updateValueAtPath(value, options.name, list);
+      var result = value;
+      var itemValue = options.defaultValue;
+      if (options.from !== undefined) {
+        itemValue = getValueAtPath(result, options.from);
+        result = updateValueAtPath(result, options.from, '');
+      }
+      var list = Array.from(getArrayAtPath(result, options.name));
+      insertItem(list, itemValue, (_options$index = options.index) !== null && _options$index !== void 0 ? _options$index : list.length);
+      return updateValueAtPath(result, options.name, list);
     },
-    onUpdate(state, _ref4) {
+    apply(result, options) {
+      var _result$error;
+      // Warn if validation result is not yet available
+      if (typeof result.error === 'undefined' && (options.onInvalid || options.from)) {
+        // eslint-disable-next-line no-console
+        console.warn('intent.insert() with `onInvalid` or `from` requires the validation result to be available synchronously. ' + 'These options are ignored because the error is not yet known.');
+        return result;
+      }
+      var arrayErrors = (_result$error = result.error) === null || _result$error === void 0 ? void 0 : _result$error.fieldErrors[options.name];
+      if (options.onInvalid === 'revert' && arrayErrors !== null && arrayErrors !== void 0 && arrayErrors.length) {
+        return _objectSpread2(_objectSpread2({}, result), {}, {
+          targetValue: undefined
+        });
+      }
+      if (options.from !== undefined) {
+        var _options$index2, _result$error2;
+        var index = (_options$index2 = options.index) !== null && _options$index2 !== void 0 ? _options$index2 : getArrayAtPath(result.submission.payload, options.name).length;
+        var insertedItemPath = appendPathSegment(options.name, index);
+        var insertedItemErrors = (_result$error2 = result.error) === null || _result$error2 === void 0 ? void 0 : _result$error2.fieldErrors[insertedItemPath];
+        if (insertedItemErrors !== null && insertedItemErrors !== void 0 && insertedItemErrors.length) {
+          var _result$error$fieldEr, _result$error3, _result$error$formErr, _result$error4, _result$error5;
+          var fromErrors = (_result$error$fieldEr = (_result$error3 = result.error) === null || _result$error3 === void 0 ? void 0 : _result$error3.fieldErrors[options.from]) !== null && _result$error$fieldEr !== void 0 ? _result$error$fieldEr : [];
+          return _objectSpread2(_objectSpread2({}, result), {}, {
+            targetValue: undefined,
+            error: {
+              formErrors: (_result$error$formErr = (_result$error4 = result.error) === null || _result$error4 === void 0 ? void 0 : _result$error4.formErrors) !== null && _result$error$formErr !== void 0 ? _result$error$formErr : [],
+              fieldErrors: _objectSpread2(_objectSpread2({}, (_result$error5 = result.error) === null || _result$error5 === void 0 ? void 0 : _result$error5.fieldErrors), {}, {
+                [options.from]: [...fromErrors, ...insertedItemErrors],
+                [insertedItemPath]: []
+              })
+            }
+          });
+        }
+      }
+      return result;
+    },
+    update(state, _ref3) {
       var _intent$payload$index;
       var {
         type,
         submission,
-        intent
-      } = _ref4;
+        intent,
+        ctx
+      } = _ref3;
       if (type === 'server') {
         return state;
       }
-      var currentValue = submission.payload;
-      var list = getArrayAtPath(currentValue, intent.payload.name);
-      var index = (_intent$payload$index = intent.payload.index) !== null && _intent$payload$index !== void 0 ? _intent$payload$index : list.length;
+      var from = intent.payload.from;
+      var index = (_intent$payload$index = intent.payload.index) !== null && _intent$payload$index !== void 0 ? _intent$payload$index : getArrayAtPath(submission.payload, intent.payload.name).length;
       var updateListIndex = createPathIndexUpdater(intent.payload.name, currentIndex => index <= currentIndex ? currentIndex + 1 : currentIndex);
-      var touchedFields = appendUniqueItem(compactMap(state.touchedFields, updateListIndex), intent.payload.name);
-      var keys = state.listKeys;
+      var touchedFields = state.touchedFields;
+      var listKeys = state.listKeys;
+      if (!ctx.cancelled) {
+        touchedFields = compactMap(state.touchedFields, updateListIndex);
 
-      // Update the keys only for client updates to avoid double updates if there is no client validation
-      if (type === 'client') {
-        var _state$listKeys$inten;
-        var listKeys = Array.from((_state$listKeys$inten = state.listKeys[intent.payload.name]) !== null && _state$listKeys$inten !== void 0 ? _state$listKeys$inten : getDefaultListKey(state.resetKey, currentValue, intent.payload.name));
-        insertItem(listKeys, generateUniqueKey(), index);
-        keys = _objectSpread2(_objectSpread2({}, updateListKeys(state.listKeys, appendPathSegment(intent.payload.name, index), updateListIndex)), {}, {
-          // Update existing list keys
-          [intent.payload.name]: listKeys
-        });
+        // Update the keys only for client updates to avoid double updates if there is no client validation
+        if (type === 'client') {
+          var _state$listKeys$inten;
+          var selectedListKeys = Array.from((_state$listKeys$inten = state.listKeys[intent.payload.name]) !== null && _state$listKeys$inten !== void 0 ? _state$listKeys$inten : getDefaultListKey(state.resetKey, submission.payload, intent.payload.name));
+          insertItem(selectedListKeys, generateUniqueKey(), index);
+          listKeys = _objectSpread2(_objectSpread2({}, updateListKeys(state.listKeys, appendPathSegment(intent.payload.name, index), updateListIndex)), {}, {
+            // Update existing list keys
+            [intent.payload.name]: selectedListKeys
+          });
+        }
+      }
+      touchedFields = appendUniqueItem(touchedFields, intent.payload.name);
+      if (from !== undefined) {
+        touchedFields = appendUniqueItem(touchedFields, from);
       }
       return _objectSpread2(_objectSpread2({}, state), {}, {
-        listKeys: keys,
+        listKeys,
         touchedFields
       });
     }
   },
   remove: {
-    validatePayload(options) {
-      return isPlainObject(options) && isString(options.name) && isNumber(options.index);
+    validate(options) {
+      return isPlainObject(options) && isString(options.name) && isNumber(options.index) && isOptional(options.onInvalid, v => v === 'revert' || v === 'insert');
     },
-    onApply(value, options) {
+    resolve(value, options) {
       var list = Array.from(getArrayAtPath(value, options.name));
       removeItem(list, options.index);
       return updateValueAtPath(value, options.name, list);
     },
-    onUpdate(state, _ref5) {
+    apply(result, options) {
+      var _result$error6;
+      // Warn if validation result is not yet available
+      if (typeof result.error === 'undefined' && options.onInvalid) {
+        if (process.env.NODE_ENV !== 'production') {
+          // eslint-disable-next-line no-console
+          console.warn('intent.remove() with `onInvalid` requires the validation result to be available synchronously. ' + 'This option is ignored because the error is not yet known.');
+        }
+        return result;
+      }
+      if (result.targetValue && (_result$error6 = result.error) !== null && _result$error6 !== void 0 && _result$error6.fieldErrors[options.name]) {
+        switch (options.onInvalid) {
+          case 'revert':
+            return _objectSpread2(_objectSpread2({}, result), {}, {
+              targetValue: undefined
+            });
+          case 'insert':
+            {
+              var list = Array.from(getArrayAtPath(result.targetValue, options.name));
+              insertItem(list, options.defaultValue, list.length);
+              return _objectSpread2(_objectSpread2({}, result), {}, {
+                targetValue: updateValueAtPath(result.targetValue, options.name, list)
+              });
+            }
+        }
+      }
+      return result;
+    },
+    update(state, _ref4) {
       var {
         type,
         submission,
-        intent
-      } = _ref5;
+        intent,
+        ctx
+      } = _ref4;
       if (type === 'server') {
         return state;
       }
@@ -241,40 +333,54 @@ var actionHandlers = {
         }
         return intent.payload.index < currentIndex ? currentIndex - 1 : currentIndex;
       });
-      var touchedFields = appendUniqueItem(compactMap(state.touchedFields, updateListIndex), intent.payload.name);
-      var keys = state.listKeys;
+      var touchedFields = state.touchedFields;
+      var listKeys = state.listKeys;
 
-      // Update the keys only for client updates to avoid double updates if there is no client validation
-      if (type === 'client') {
-        var _state$listKeys$inten2;
-        var listKeys = Array.from((_state$listKeys$inten2 = state.listKeys[intent.payload.name]) !== null && _state$listKeys$inten2 !== void 0 ? _state$listKeys$inten2 : getDefaultListKey(state.resetKey, currentValue, intent.payload.name));
-        removeItem(listKeys, intent.payload.index);
-        keys = _objectSpread2(_objectSpread2({}, updateListKeys(state.listKeys, appendPathSegment(intent.payload.name, intent.payload.index), updateListIndex)), {}, {
-          // Update existing list keys
-          [intent.payload.name]: listKeys
-        });
+      // If onInvalid is 'insert', we still remove the item and then insert a new item at the end
+      if (!ctx.cancelled || intent.payload.onInvalid === 'insert') {
+        touchedFields = compactMap(touchedFields, updateListIndex);
+
+        // Update the keys only for client updates to avoid double updates if there is no client validation
+        if (type === 'client') {
+          var _state$listKeys$inten2;
+          var selectedListKeys = Array.from((_state$listKeys$inten2 = state.listKeys[intent.payload.name]) !== null && _state$listKeys$inten2 !== void 0 ? _state$listKeys$inten2 : getDefaultListKey(state.resetKey, currentValue, intent.payload.name));
+          removeItem(selectedListKeys, intent.payload.index);
+          listKeys = _objectSpread2(_objectSpread2({}, updateListKeys(state.listKeys, appendPathSegment(intent.payload.name, intent.payload.index), updateListIndex)), {}, {
+            // Update existing list keys
+            [intent.payload.name]: selectedListKeys
+          });
+          if (ctx.cancelled) {
+            var index = selectedListKeys.length;
+            insertItem(selectedListKeys, generateUniqueKey(), index);
+            listKeys = _objectSpread2(_objectSpread2({}, updateListKeys(state.listKeys, appendPathSegment(intent.payload.name, index), updateListIndex)), {}, {
+              // Update existing list keys
+              [intent.payload.name]: selectedListKeys
+            });
+          }
+        }
       }
+      touchedFields = appendUniqueItem(touchedFields, intent.payload.name);
       return _objectSpread2(_objectSpread2({}, state), {}, {
-        listKeys: keys,
+        listKeys: listKeys,
         touchedFields
       });
     }
   },
   reorder: {
-    validatePayload(options) {
+    validate(options) {
       return isPlainObject(options) && isString(options.name) && isNumber(options.from) && isNumber(options.to);
     },
-    onApply(value, options) {
+    resolve(value, options) {
       var list = Array.from(getArrayAtPath(value, options.name));
       reorderItems(list, options.from, options.to);
       return updateValueAtPath(value, options.name, list);
     },
-    onUpdate(state, _ref6) {
+    update(state, _ref5) {
       var {
         type,
         submission,
         intent
-      } = _ref6;
+      } = _ref5;
       if (type === 'server') {
         return state;
       }
@@ -312,4 +418,4 @@ var actionHandlers = {
   }
 };
 
-export { actionHandlers, applyIntent, deserializeIntent, insertItem, removeItem, reorderItems, serializeIntent, updateListKeys };
+export { applyIntent, deserializeIntent, insertItem, intentHandlers, removeItem, reorderItems, resolveIntent, serializeIntent, updateListKeys };

package/dist/future/state.d.ts

@@ -1,5 +1,5 @@
 import { type FieldName, type ValidationAttributes, type Serialize } from '@conform-to/dom/future';
-import type { FieldMetadata, Fieldset, FormContext, FormMetadata, FormState, FormAction, UnknownIntent, ActionHandler, CustomMetadataDefinition } from './types';
+import type { FieldMetadata, Fieldset, FormContext, FormMetadata, FormState, FormAction, UnknownIntent, IntentHandler, BaseFieldMetadata, BaseFormMetadata, DefineConditionalField } from './types';
 export declare function initializeState<ErrorShape>(options?: {
     defaultValue?: Record<string, unknown> | null | undefined;
     resetKey?: string | undefined;
@@ -11,7 +11,8 @@ export declare function initializeState<ErrorShape>(options?: {
  * - Initialize: set initial server value
  */
 export declare function updateState<ErrorShape>(state: FormState<ErrorShape>, action: FormAction<ErrorShape, UnknownIntent | null, {
-    handlers: Record<string, ActionHandler>;
+    handlers: Record<string, IntentHandler>;
+    cancelled: boolean;
     reset: (defaultValue?: Record<string, unknown> | null | undefined) => FormState<ErrorShape>;
 }>): FormState<ErrorShape>;
 /**
@@ -39,32 +40,47 @@ export declare function isValid(state: FormState<any>, name?: string): boolean;
  * e.g. "array[0].key" falls back to "array[].key" if specific constraint not found.
  */
 export declare function getConstraint(context: FormContext<any>, name: string): ValidationAttributes | undefined;
-export declare function getFormMetadata<ErrorShape>(context: FormContext<ErrorShape>, options?: {
+export declare function getFormMetadata<ErrorShape, CustomFormMetadata extends Record<string, unknown> = {}, CustomFieldMetadata extends Record<string, unknown> = {}>(context: FormContext<ErrorShape>, options?: {
     serialize?: Serialize | undefined;
-    customize?: CustomMetadataDefinition | undefined;
-}): FormMetadata<ErrorShape>;
-export declare function getField<FieldShape, ErrorShape = string>(context: FormContext<ErrorShape>, options: {
+    extendFormMetadata?: ((metadata: BaseFormMetadata<ErrorShape>) => CustomFormMetadata) | undefined;
+    extendFieldMetadata?: (<FieldShape>(metadata: BaseFieldMetadata<FieldShape, ErrorShape>, ctx: {
+        form: BaseFormMetadata<ErrorShape>;
+        when: DefineConditionalField;
+    }) => CustomFieldMetadata) | undefined;
+}): FormMetadata<ErrorShape, CustomFormMetadata, CustomFieldMetadata>;
+export declare function getField<FieldShape, ErrorShape = string, CustomFieldMetadata extends Record<string, unknown> = {}>(context: FormContext<ErrorShape>, options: {
     name: FieldName<FieldShape>;
     serialize?: Serialize | undefined;
-    customize?: CustomMetadataDefinition | undefined;
+    extendFieldMetadata?: (<F>(metadata: BaseFieldMetadata<F, ErrorShape>, ctx: {
+        form: BaseFormMetadata<ErrorShape>;
+        when: DefineConditionalField;
+    }) => CustomFieldMetadata) | undefined;
+    form?: BaseFormMetadata<ErrorShape, CustomFieldMetadata> | undefined;
     key?: string | undefined;
-}): FieldMetadata<FieldShape, ErrorShape>;
+}): FieldMetadata<FieldShape, ErrorShape, CustomFieldMetadata>;
 /**
  * Creates a proxy that dynamically generates field objects when properties are accessed.
  */
-export declare function getFieldset<FieldShape = Record<string, any>, ErrorShape = string>(context: FormContext<ErrorShape>, options: {
+export declare function getFieldset<FieldShape = Record<string, any>, ErrorShape = string, CustomFieldMetadata extends Record<string, unknown> = {}>(context: FormContext<ErrorShape>, options: {
     name?: FieldName<FieldShape> | undefined;
     serialize?: Serialize | undefined;
-    customize?: CustomMetadataDefinition | undefined;
-}): Fieldset<FieldShape, ErrorShape>;
+    extendFieldMetadata?: (<F>(metadata: BaseFieldMetadata<F, ErrorShape>, ctx: {
+        form: BaseFormMetadata<ErrorShape>;
+        when: DefineConditionalField;
+    }) => CustomFieldMetadata) | undefined;
+    form?: BaseFormMetadata<ErrorShape, CustomFieldMetadata> | undefined;
+}): Fieldset<FieldShape, ErrorShape, CustomFieldMetadata>;
 /**
  * Creates an array of field objects for list/array inputs
  */
-export declare function getFieldList<FieldShape = Array<any>, ErrorShape = string>(context: FormContext<ErrorShape>, options: {
+export declare function getFieldList<FieldShape = Array<any>, ErrorShape = string, CustomFieldMetadata extends Record<string, unknown> = {}>(context: FormContext<ErrorShape>, options: {
     name: FieldName<FieldShape>;
     serialize?: Serialize | undefined;
-    customize?: CustomMetadataDefinition | undefined;
+    extendFieldMetadata?: (<F>(metadata: BaseFieldMetadata<F, ErrorShape>, ctx: {
+        form: BaseFormMetadata<ErrorShape>;
+        when: DefineConditionalField;
+    }) => CustomFieldMetadata) | undefined;
 }): FieldMetadata<[
     FieldShape
-] extends [Array<infer ItemShape> | null | undefined] ? ItemShape : unknown, ErrorShape>[];
+] extends [Array<infer ItemShape> | null | undefined] ? ItemShape : unknown, ErrorShape, CustomFieldMetadata>[];
 //# sourceMappingURL=state.d.ts.map

package/dist/future/state.js

@@ -57,12 +57,13 @@ function updateState(state, action) {
     type: 'validate'
   };
   var handler = (_action$ctx$handlers = action.ctx.handlers) === null || _action$ctx$handlers === void 0 ? void 0 : _action$ctx$handlers[intent.type];
-  if (typeof (handler === null || handler === void 0 ? void 0 : handler.onUpdate) === 'function') {
-    var _handler$validatePayl, _handler$validatePayl2;
-    if ((_handler$validatePayl = (_handler$validatePayl2 = handler.validatePayload) === null || _handler$validatePayl2 === void 0 ? void 0 : _handler$validatePayl2.call(handler, intent.payload)) !== null && _handler$validatePayl !== void 0 ? _handler$validatePayl : true) {
-      return handler.onUpdate(state, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, action), {}, {
+  if (typeof (handler === null || handler === void 0 ? void 0 : handler.update) === 'function') {
+    var _handler$validate, _handler$validate2;
+    if ((_handler$validate = (_handler$validate2 = handler.validate) === null || _handler$validate2 === void 0 ? void 0 : _handler$validate2.call(handler, intent.payload)) !== null && _handler$validate !== void 0 ? _handler$validate : true) {
+      return handler.update(state, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, action), {}, {
         ctx: {
-          reset: action.ctx.reset
+          reset: action.ctx.reset,
+          cancelled: action.ctx.cancelled
         },
         intent: {
           type: intent.type,
@@ -241,7 +242,8 @@ function getConstraint(context, name) {
   return constraint;
 }
 function getFormMetadata(context, options) {
-  return {
+  var _options$extendFormMe, _options$extendFormMe2;
+  var metadata = {
     key: context.state.resetKey,
     id: context.formId,
     errorId: "".concat(context.formId, "-form-error"),
@@ -274,31 +276,41 @@ function getFormMetadata(context, options) {
       return getField(context, {
         name,
         serialize: options === null || options === void 0 ? void 0 : options.serialize,
-        customize: options === null || options === void 0 ? void 0 : options.customize
+        extendFieldMetadata: options === null || options === void 0 ? void 0 : options.extendFieldMetadata
       });
     },
     getFieldset(name) {
       return getFieldset(context, {
         name,
         serialize: options === null || options === void 0 ? void 0 : options.serialize,
-        customize: options === null || options === void 0 ? void 0 : options.customize
+        extendFieldMetadata: options === null || options === void 0 ? void 0 : options.extendFieldMetadata
       });
     },
     getFieldList(name) {
       return getFieldList(context, {
         name,
         serialize: options === null || options === void 0 ? void 0 : options.serialize,
-        customize: options === null || options === void 0 ? void 0 : options.customize
+        extendFieldMetadata: options === null || options === void 0 ? void 0 : options.extendFieldMetadata
       });
     }
   };
+  var customMetadata = (_options$extendFormMe = options === null || options === void 0 || (_options$extendFormMe2 = options.extendFormMetadata) === null || _options$extendFormMe2 === void 0 ? void 0 : _options$extendFormMe2.call(options, metadata)) !== null && _options$extendFormMe !== void 0 ? _options$extendFormMe : {};
+  var descriptors = Object.getOwnPropertyDescriptors(customMetadata);
+  var extended = Object.create(metadata);
+  Object.defineProperties(extended, descriptors);
+  return extended;
 }
 function getField(context, options) {
+  var _extendFieldMetadata;
   var {
     key,
     name,
     serialize = future.serialize,
-    customize
+    extendFieldMetadata,
+    form = getFormMetadata(context, {
+      serialize,
+      extendFieldMetadata
+    })
   } = options;
   var id = "".concat(context.formId, "-field-").concat(name.replace(/[^a-zA-Z0-9._-]/g, '_'));
   var constraint = getConstraint(context, name);
@@ -317,6 +329,7 @@ function getField(context, options) {
     max: constraint === null || constraint === void 0 ? void 0 : constraint.max,
     step: constraint === null || constraint === void 0 ? void 0 : constraint.step,
     multiple: constraint === null || constraint === void 0 ? void 0 : constraint.multiple,
+    accept: constraint === null || constraint === void 0 ? void 0 : constraint.accept,
     get defaultValue() {
       return getDefaultValue(context, name, serialize);
     },
@@ -351,40 +364,27 @@ function getField(context, options) {
       return getFieldset(context, {
         name: name,
         serialize,
-        customize
+        extendFieldMetadata
       });
     },
+    // @ts-expect-error The return type includes CustomFieldMetadata which BaseFieldMetadata
+    // doesn't account for. This is a type-level limitation; runtime behavior is correct.
     getFieldList() {
       return getFieldList(context, {
-        name: name,
+        name,
         serialize,
-        customize
+        extendFieldMetadata
       });
     }
   };
-  if (typeof customize !== 'function') {
-    return metadata;
-  }
-  var customMetadata = null;
-  return new Proxy(metadata, {
-    get(target, prop, receiver) {
-      var _customMetadata;
-      if (Reflect.has(target, prop)) {
-        return Reflect.get(target, prop, receiver);
-      }
-      (_customMetadata = customMetadata) !== null && _customMetadata !== void 0 ? _customMetadata : customMetadata = customize(metadata);
-      if (Reflect.has(customMetadata, prop)) {
-        return Reflect.get(customMetadata, prop, receiver);
-      }
-
-      // Allow React DevTools to inspect the object
-      // without throwing errors for internal properties
-      if (typeof prop === 'symbol' || prop === '$$typeof') {
-        return undefined;
-      }
-      throw new Error("Property \"".concat(String(prop), "\" does not exist on field metadata. ") + "If you have defined the CustomMetadata interface to include \"".concat(String(prop), "\", make sure to also implement it through the \"defineCustomMetadata\" property on <FormOptionsProvider />."));
-    }
-  });
+  var customMetadata = (_extendFieldMetadata = extendFieldMetadata === null || extendFieldMetadata === void 0 ? void 0 : extendFieldMetadata(metadata, {
+    form,
+    when: util.when
+  })) !== null && _extendFieldMetadata !== void 0 ? _extendFieldMetadata : {};
+  var descriptors = Object.getOwnPropertyDescriptors(customMetadata);
+  var extended = Object.create(metadata);
+  Object.defineProperties(extended, descriptors);
+  return extended;
 }
 
 /**
@@ -394,10 +394,16 @@ function getFieldset(context, options) {
   return new Proxy({}, {
     get(target, name, receiver) {
       if (typeof name === 'string') {
+        var _options$form;
+        (_options$form = options.form) !== null && _options$form !== void 0 ? _options$form : options.form = getFormMetadata(context, {
+          serialize: options === null || options === void 0 ? void 0 : options.serialize,
+          extendFieldMetadata: options === null || options === void 0 ? void 0 : options.extendFieldMetadata
+        });
         return getField(context, {
           name: future.appendPathSegment(options === null || options === void 0 ? void 0 : options.name, name),
           serialize: options.serialize,
-          customize: options.customize
+          extendFieldMetadata: options.extendFieldMetadata,
+          form: options.form
         });
       }
       return Reflect.get(target, name, receiver);
@@ -414,7 +420,7 @@ function getFieldList(context, options) {
     return getField(context, {
       name: future.appendPathSegment(options.name, index),
       serialize: options.serialize,
-      customize: options.customize,
+      extendFieldMetadata: options.extendFieldMetadata,
       key
     });
   });