@conform-to/react 1.11.0 → 1.12.0

package/dist/future/intent.js

@@ -109,22 +109,16 @@ var actionHandlers = {
       } = _ref;
       var name = (_intent$payload = intent.payload) !== null && _intent$payload !== void 0 ? _intent$payload : '';
       var basePath = future.getPathSegments(name);
+      var allFields = error ?
+      // Consider fields / fieldset with errors as touched too
+      submission.fields.concat(Object.keys(error.fieldErrors)) : submission.fields;
       var touchedFields = util.appendUniqueItem(state.touchedFields, name);
-      for (var field of submission.fields) {
+      for (var field of allFields) {
         // Add all child fields to the touched fields too
         if (future.getRelativePath(field, basePath) !== null) {
           touchedFields = util.appendUniqueItem(touchedFields, field);
         }
       }
-
-      // We couldn't find out all the fields from the FormData, e.g. unchecked checkboxes.
-      // or fieldsets without any fields, but we can at least include missing
-      // required fields based on the form error
-      if (name === '' && error) {
-        for (var _name of Object.keys(error.fieldErrors)) {
-          touchedFields = util.appendUniqueItem(touchedFields, _name);
-        }
-      }
       return util.merge(state, {
         touchedFields
       });
@@ -143,6 +137,9 @@ var actionHandlers = {
         submission,
         intent
       } = _ref2;
+      if (type === 'server') {
+        return state;
+      }
       var listKeys = state.listKeys;
 
       // Update the keys only for client updates to avoid double updates if there is no client validation
@@ -182,6 +179,9 @@ var actionHandlers = {
         submission,
         intent
       } = _ref3;
+      if (type === 'server') {
+        return state$1;
+      }
       var currentValue = submission.payload;
       var list = util.getArrayAtPath(currentValue, intent.payload.name);
       var index = (_intent$payload$index = intent.payload.index) !== null && _intent$payload$index !== void 0 ? _intent$payload$index : list.length;
@@ -220,6 +220,9 @@ var actionHandlers = {
         submission,
         intent
       } = _ref4;
+      if (type === 'server') {
+        return state$1;
+      }
       var currentValue = submission.payload;
       var updateListIndex = util.createPathIndexUpdater(intent.payload.name, currentIndex => {
         if (intent.payload.index === currentIndex) {
@@ -261,6 +264,9 @@ var actionHandlers = {
         submission,
         intent
       } = _ref5;
+      if (type === 'server') {
+        return state$1;
+      }
       var currentValue = submission.payload;
       var updateListIndex = util.createPathIndexUpdater(intent.payload.name, currentIndex => {
         if (intent.payload.from === intent.payload.to) {

package/dist/future/intent.mjs

@@ -105,22 +105,16 @@ var actionHandlers = {
       } = _ref;
       var name = (_intent$payload = intent.payload) !== null && _intent$payload !== void 0 ? _intent$payload : '';
       var basePath = getPathSegments(name);
+      var allFields = error ?
+      // Consider fields / fieldset with errors as touched too
+      submission.fields.concat(Object.keys(error.fieldErrors)) : submission.fields;
       var touchedFields = appendUniqueItem(state.touchedFields, name);
-      for (var field of submission.fields) {
+      for (var field of allFields) {
         // Add all child fields to the touched fields too
         if (getRelativePath(field, basePath) !== null) {
           touchedFields = appendUniqueItem(touchedFields, field);
         }
       }
-
-      // We couldn't find out all the fields from the FormData, e.g. unchecked checkboxes.
-      // or fieldsets without any fields, but we can at least include missing
-      // required fields based on the form error
-      if (name === '' && error) {
-        for (var _name of Object.keys(error.fieldErrors)) {
-          touchedFields = appendUniqueItem(touchedFields, _name);
-        }
-      }
       return merge(state, {
         touchedFields
       });
@@ -139,6 +133,9 @@ var actionHandlers = {
         submission,
         intent
       } = _ref2;
+      if (type === 'server') {
+        return state;
+      }
       var listKeys = state.listKeys;
 
       // Update the keys only for client updates to avoid double updates if there is no client validation
@@ -178,6 +175,9 @@ var actionHandlers = {
         submission,
         intent
       } = _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;
@@ -216,6 +216,9 @@ var actionHandlers = {
         submission,
         intent
       } = _ref4;
+      if (type === 'server') {
+        return state;
+      }
       var currentValue = submission.payload;
       var updateListIndex = createPathIndexUpdater(intent.payload.name, currentIndex => {
         if (intent.payload.index === currentIndex) {
@@ -257,6 +260,9 @@ var actionHandlers = {
         submission,
         intent
       } = _ref5;
+      if (type === 'server') {
+        return state;
+      }
       var currentValue = submission.payload;
       var updateListIndex = createPathIndexUpdater(intent.payload.name, currentIndex => {
         if (intent.payload.from === intent.payload.to) {

package/dist/future/state.d.ts

@@ -1,5 +1,5 @@
 import { type ValidationAttributes, type Serialize } from '@conform-to/dom/future';
-import type { FieldMetadata, FieldName, Fieldset, FormContext, FormMetadata, FormState, FormAction, UnknownIntent, ActionHandler } from './types';
+import type { FieldMetadata, FieldName, Fieldset, FormContext, FormMetadata, FormState, FormAction, UnknownIntent, ActionHandler, CustomMetadataDefinition } from './types';
 export declare function initializeState<ErrorShape>(resetKey?: string): FormState<ErrorShape>;
 /**
  * Updates form state based on action type:
@@ -31,12 +31,14 @@ 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: {
-    serialize: Serialize;
+export declare function getFormMetadata<ErrorShape>(context: FormContext<ErrorShape>, options?: {
+    serialize?: Serialize;
+    customize?: CustomMetadataDefinition;
 }): FormMetadata<ErrorShape>;
 export declare function getField<FieldShape, ErrorShape = string>(context: FormContext<ErrorShape>, options: {
     name: FieldName<FieldShape>;
-    serialize: Serialize;
+    serialize?: Serialize;
+    customize?: CustomMetadataDefinition;
     key?: string;
 }): FieldMetadata<FieldShape, ErrorShape>;
 /**
@@ -44,14 +46,16 @@ export declare function getField<FieldShape, ErrorShape = string>(context: FormC
  */
 export declare function getFieldset<FieldShape = Record<string, any>, ErrorShape = string>(context: FormContext<ErrorShape>, options: {
     name?: FieldName<FieldShape>;
-    serialize: Serialize;
+    serialize?: Serialize;
+    customize?: CustomMetadataDefinition;
 }): Fieldset<FieldShape, ErrorShape>;
 /**
  * Creates an array of field objects for list/array inputs
  */
 export declare function getFieldList<FieldShape = Array<any>, ErrorShape = string>(context: FormContext<ErrorShape>, options: {
     name: FieldName<FieldShape>;
-    serialize: Serialize;
+    serialize?: Serialize;
+    customize?: CustomMetadataDefinition;
 }): FieldMetadata<[
     FieldShape
 ] extends [Array<infer ItemShape> | null | undefined] ? ItemShape : unknown, ErrorShape>[];

package/dist/future/state.js

@@ -25,7 +25,7 @@ function initializeState(resetKey) {
  * - Initialize: set initial intended value
  */
 function updateState(state, action) {
-  var _action$intendedValue, _action$intendedValue2;
+  var _action$intendedValue, _action$intendedValue2, _action$intent, _action$ctx$handlers;
   if (action.intendedValue === null) {
     return action.ctx.reset();
   }
@@ -48,23 +48,20 @@ function updateState(state, action) {
     // Keep track of the value that the serverError is based on
     serverIntendedValue: !future.deepEqual(state.serverIntendedValue, value) ? value : state.serverIntendedValue
   });
-  if (action.type !== 'server' && typeof action.intent !== 'undefined') {
-    var _action$intent, _action$ctx$handlers;
-    // Validate the whole form if no intent is provided (default submission)
-    var intent = (_action$intent = action.intent) !== null && _action$intent !== void 0 ? _action$intent : {
-      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), {}, {
-          intent: {
-            type: intent.type,
-            payload: intent.payload
-          }
-        }));
-      }
+  // Validate the whole form if no intent is provided (default submission)
+  var intent = (_action$intent = action.intent) !== null && _action$intent !== void 0 ? _action$intent : {
+    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), {}, {
+        intent: {
+          type: intent.type,
+          payload: intent.payload
+        }
+      }));
     }
   }
   return state;
@@ -237,27 +234,41 @@ function getFormMetadata(context, options) {
     },
     context,
     getField(name) {
-      return getField(context, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, options), {}, {
-        name
-      }));
+      return getField(context, {
+        name,
+        serialize: options === null || options === void 0 ? void 0 : options.serialize,
+        customize: options === null || options === void 0 ? void 0 : options.customize
+      });
     },
     getFieldset(name) {
-      return getFieldset(context, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, options), {}, {
-        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
+      });
     },
     getFieldList(name) {
-      return getFieldList(context, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, options), {}, {
-        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
+      });
     }
   };
 }
 function getField(context, options) {
-  var id = "".concat(context.formId, "-field-").concat(options.name.replace(/[^a-zA-Z0-9._-]/g, '_'));
-  var constraint = getConstraint(context, options.name);
+  var {
+    key,
+    name,
+    serialize = future.serialize,
+    customize
+  } = options;
+  var id = "".concat(context.formId, "-field-").concat(name.replace(/[^a-zA-Z0-9._-]/g, '_'));
+  var constraint = getConstraint(context, name);
   var metadata = {
-    id: id,
+    key,
+    name,
+    id,
     descriptionId: "".concat(id, "-description"),
     errorId: "".concat(id, "-error"),
     formId: context.formId,
@@ -270,38 +281,63 @@ function getField(context, options) {
     step: constraint === null || constraint === void 0 ? void 0 : constraint.step,
     multiple: constraint === null || constraint === void 0 ? void 0 : constraint.multiple,
     get defaultValue() {
-      return getDefaultValue(context, options.name, options.serialize);
+      return getDefaultValue(context, name, serialize);
     },
     get defaultOptions() {
-      return getDefaultOptions(context, options.name, options.serialize);
+      return getDefaultOptions(context, name, serialize);
     },
     get defaultChecked() {
-      return isDefaultChecked(context, options.name, options.serialize);
+      return isDefaultChecked(context, name, serialize);
     },
     get touched() {
-      return isTouched(context.state, options.name);
+      return isTouched(context.state, name);
     },
     get valid() {
-      return isValid(context.state, options.name);
+      return isValid(context.state, name);
     },
     get invalid() {
       return !this.valid;
     },
     get errors() {
-      return getErrors(context.state, options.name);
+      return getErrors(context.state, name);
     },
     get fieldErrors() {
-      return getFieldErrors(context.state, options.name);
-    }
-  };
-  return Object.assign(metadata, {
-    key: options.key,
-    name: options.name,
+      return getFieldErrors(context.state, name);
+    },
+    get ariaInvalid() {
+      return !this.valid ? true : undefined;
+    },
+    get ariaDescribedBy() {
+      return !this.valid ? this.errorId : undefined;
+    },
     getFieldset() {
-      return getFieldset(context, options);
+      return getFieldset(context, {
+        name: name,
+        serialize,
+        customize
+      });
     },
     getFieldList() {
-      return getFieldList(context, options);
+      return getFieldList(context, {
+        name: name,
+        serialize,
+        customize
+      });
+    }
+  };
+  if (typeof customize !== 'function') {
+    return metadata;
+  }
+  return new Proxy(metadata, {
+    get(target, prop, receiver) {
+      if (Reflect.has(target, prop)) {
+        return Reflect.get(target, prop, receiver);
+      }
+      var customMetadata = customize(metadata);
+      if (Reflect.has(customMetadata, prop)) {
+        return Reflect.get(customMetadata, prop, receiver);
+      }
+      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 />."));
     }
   });
 }
@@ -313,9 +349,11 @@ function getFieldset(context, options) {
   return new Proxy({}, {
     get(target, name, receiver) {
       if (typeof name === 'string') {
-        return getField(context, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, options), {}, {
-          name: future.appendPathSegment(options === null || options === void 0 ? void 0 : options.name, name)
-        }));
+        return getField(context, {
+          name: future.appendPathSegment(options === null || options === void 0 ? void 0 : options.name, name),
+          serialize: options.serialize,
+          customize: options.customize
+        });
       }
       return Reflect.get(target, name, receiver);
     }
@@ -328,10 +366,12 @@ function getFieldset(context, options) {
 function getFieldList(context, options) {
   var keys = getListKey(context, options.name);
   return keys.map((key, index) => {
-    return getField(context, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, options), {}, {
+    return getField(context, {
       name: future.appendPathSegment(options.name, index),
+      serialize: options.serialize,
+      customize: options.customize,
       key
-    }));
+    });
   });
 }
 

package/dist/future/state.mjs

@@ -21,7 +21,7 @@ function initializeState(resetKey) {
  * - Initialize: set initial intended value
  */
 function updateState(state, action) {
-  var _action$intendedValue, _action$intendedValue2;
+  var _action$intendedValue, _action$intendedValue2, _action$intent, _action$ctx$handlers;
   if (action.intendedValue === null) {
     return action.ctx.reset();
   }
@@ -44,23 +44,20 @@ function updateState(state, action) {
     // Keep track of the value that the serverError is based on
     serverIntendedValue: !deepEqual(state.serverIntendedValue, value) ? value : state.serverIntendedValue
   });
-  if (action.type !== 'server' && typeof action.intent !== 'undefined') {
-    var _action$intent, _action$ctx$handlers;
-    // Validate the whole form if no intent is provided (default submission)
-    var intent = (_action$intent = action.intent) !== null && _action$intent !== void 0 ? _action$intent : {
-      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, _objectSpread2(_objectSpread2({}, action), {}, {
-          intent: {
-            type: intent.type,
-            payload: intent.payload
-          }
-        }));
-      }
+  // Validate the whole form if no intent is provided (default submission)
+  var intent = (_action$intent = action.intent) !== null && _action$intent !== void 0 ? _action$intent : {
+    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, _objectSpread2(_objectSpread2({}, action), {}, {
+        intent: {
+          type: intent.type,
+          payload: intent.payload
+        }
+      }));
     }
   }
   return state;
@@ -233,27 +230,41 @@ function getFormMetadata(context, options) {
     },
     context,
     getField(name) {
-      return getField(context, _objectSpread2(_objectSpread2({}, options), {}, {
-        name
-      }));
+      return getField(context, {
+        name,
+        serialize: options === null || options === void 0 ? void 0 : options.serialize,
+        customize: options === null || options === void 0 ? void 0 : options.customize
+      });
     },
     getFieldset(name) {
-      return getFieldset(context, _objectSpread2(_objectSpread2({}, options), {}, {
-        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
+      });
     },
     getFieldList(name) {
-      return getFieldList(context, _objectSpread2(_objectSpread2({}, options), {}, {
-        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
+      });
     }
   };
 }
 function getField(context, options) {
-  var id = "".concat(context.formId, "-field-").concat(options.name.replace(/[^a-zA-Z0-9._-]/g, '_'));
-  var constraint = getConstraint(context, options.name);
+  var {
+    key,
+    name,
+    serialize: serialize$1 = serialize,
+    customize
+  } = options;
+  var id = "".concat(context.formId, "-field-").concat(name.replace(/[^a-zA-Z0-9._-]/g, '_'));
+  var constraint = getConstraint(context, name);
   var metadata = {
-    id: id,
+    key,
+    name,
+    id,
     descriptionId: "".concat(id, "-description"),
     errorId: "".concat(id, "-error"),
     formId: context.formId,
@@ -266,38 +277,63 @@ function getField(context, options) {
     step: constraint === null || constraint === void 0 ? void 0 : constraint.step,
     multiple: constraint === null || constraint === void 0 ? void 0 : constraint.multiple,
     get defaultValue() {
-      return getDefaultValue(context, options.name, options.serialize);
+      return getDefaultValue(context, name, serialize$1);
     },
     get defaultOptions() {
-      return getDefaultOptions(context, options.name, options.serialize);
+      return getDefaultOptions(context, name, serialize$1);
     },
     get defaultChecked() {
-      return isDefaultChecked(context, options.name, options.serialize);
+      return isDefaultChecked(context, name, serialize$1);
     },
     get touched() {
-      return isTouched(context.state, options.name);
+      return isTouched(context.state, name);
     },
     get valid() {
-      return isValid(context.state, options.name);
+      return isValid(context.state, name);
     },
     get invalid() {
       return !this.valid;
     },
     get errors() {
-      return getErrors(context.state, options.name);
+      return getErrors(context.state, name);
     },
     get fieldErrors() {
-      return getFieldErrors(context.state, options.name);
-    }
-  };
-  return Object.assign(metadata, {
-    key: options.key,
-    name: options.name,
+      return getFieldErrors(context.state, name);
+    },
+    get ariaInvalid() {
+      return !this.valid ? true : undefined;
+    },
+    get ariaDescribedBy() {
+      return !this.valid ? this.errorId : undefined;
+    },
     getFieldset() {
-      return getFieldset(context, options);
+      return getFieldset(context, {
+        name: name,
+        serialize: serialize$1,
+        customize
+      });
     },
     getFieldList() {
-      return getFieldList(context, options);
+      return getFieldList(context, {
+        name: name,
+        serialize: serialize$1,
+        customize
+      });
+    }
+  };
+  if (typeof customize !== 'function') {
+    return metadata;
+  }
+  return new Proxy(metadata, {
+    get(target, prop, receiver) {
+      if (Reflect.has(target, prop)) {
+        return Reflect.get(target, prop, receiver);
+      }
+      var customMetadata = customize(metadata);
+      if (Reflect.has(customMetadata, prop)) {
+        return Reflect.get(customMetadata, prop, receiver);
+      }
+      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 />."));
     }
   });
 }
@@ -309,9 +345,11 @@ function getFieldset(context, options) {
   return new Proxy({}, {
     get(target, name, receiver) {
       if (typeof name === 'string') {
-        return getField(context, _objectSpread2(_objectSpread2({}, options), {}, {
-          name: appendPathSegment(options === null || options === void 0 ? void 0 : options.name, name)
-        }));
+        return getField(context, {
+          name: appendPathSegment(options === null || options === void 0 ? void 0 : options.name, name),
+          serialize: options.serialize,
+          customize: options.customize
+        });
       }
       return Reflect.get(target, name, receiver);
     }
@@ -324,10 +362,12 @@ function getFieldset(context, options) {
 function getFieldList(context, options) {
   var keys = getListKey(context, options.name);
   return keys.map((key, index) => {
-    return getField(context, _objectSpread2(_objectSpread2({}, options), {}, {
+    return getField(context, {
       name: appendPathSegment(options.name, index),
+      serialize: options.serialize,
+      customize: options.customize,
       key
-    }));
+    });
   });
 }