@conform-to/react 1.15.1 → 1.17.0

package/dist/future/intent.d.ts

@@ -1,5 +1,5 @@
-import type { FormValue, Submission } from '@conform-to/dom/future';
-import type { ActionHandler, IntentDispatcher, UnknownIntent } from './types';
+import type { FormValue, Submission, SubmissionResult } from '@conform-to/dom/future';
+import type { IntentHandler, IntentDispatcher, UnknownIntent } from './types';
 /**
  * Serializes intent to string format: "type" or "type(payload)".
  */
@@ -12,9 +12,16 @@ export declare function deserializeIntent(value: string): UnknownIntent;
  * Applies intent transformation to submission payload.
  * Returns modified payload or null for reset intent.
  */
-export declare function applyIntent(submission: Submission, options?: {
-    handlers?: Record<string, ActionHandler>;
+export declare function resolveIntent(submission: Submission, options?: {
+    handlers?: Record<string, IntentHandler>;
 }): Record<string, FormValue> | undefined;
+/**
+ * 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.
+ */
+export declare function applyIntent<ErrorShape>(result: SubmissionResult<ErrorShape>, intent: UnknownIntent | null, options?: {
+    handlers?: Record<string, IntentHandler>;
+}): SubmissionResult<ErrorShape>;
 export declare function insertItem<Item>(list: Array<Item>, item: Item, index: number): void;
 export declare function removeItem(list: Array<unknown>, index: number): void;
 export declare function reorderItems(list: Array<unknown>, fromIndex: number, toIndex: number): void;
@@ -29,7 +36,7 @@ export declare function updateListKeys(keys: Record<string, string[]> | undefine
  * - update: updates specific field values
  * - insert/remove/reorder: manages array field operations
  */
-export declare const actionHandlers: {
-    [Type in keyof IntentDispatcher]: IntentDispatcher[Type] extends (payload: any) => void ? ActionHandler<IntentDispatcher[Type]> : never;
+export declare const intentHandlers: {
+    [Type in keyof IntentDispatcher]: IntentDispatcher[Type] extends (payload: any) => void ? IntentHandler<IntentDispatcher[Type]> : never;
 };
 //# sourceMappingURL=intent.d.ts.map

package/dist/future/intent.js

@@ -46,19 +46,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);
 }
@@ -90,36 +106,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 util.isOptional(options, future.isPlainObject) && (util.isUndefined(options === null || options === void 0 ? void 0 : options.defaultValue) || util.isNullable(options === null || options === void 0 ? void 0 : options.defaultValue, future.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 _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, result), {}, {
+        reset: true
+      });
     }
   },
   validate: {
-    validatePayload(name) {
+    validate(name) {
       return util.isOptional(name, util.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 = future.getPathSegments(name);
       var allFields = error ?
@@ -138,20 +152,20 @@ var actionHandlers = {
     }
   },
   update: {
-    validatePayload(options) {
+    validate(options) {
       return future.isPlainObject(options) && util.isOptional(options.name, util.isString) && util.isOptional(options.index, util.isNumber) && !util.isUndefined(options.value);
     },
-    onApply(value, options) {
+    resolve(value, options) {
       var _options$value;
       var name = future.appendPathSegment(options.name, options.index);
       return util.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;
       }
@@ -178,63 +192,141 @@ var actionHandlers = {
     }
   },
   insert: {
-    validatePayload(options) {
-      return future.isPlainObject(options) && util.isString(options.name) && util.isOptional(options.index, util.isNumber);
+    validate(options) {
+      return future.isPlainObject(options) && util.isString(options.name) && util.isOptional(options.index, util.isNumber) && util.isOptional(options.from, util.isString) && util.isOptional(options.onInvalid, mode => mode === 'revert');
     },
-    onApply(value, options) {
+    resolve(value, options) {
       var _options$index;
-      var list = Array.from(util.getArrayAtPath(value, options.name));
-      insertItem(list, options.defaultValue, (_options$index = options.index) !== null && _options$index !== void 0 ? _options$index : list.length);
-      return util.updateValueAtPath(value, options.name, list);
+      var result = value;
+      var itemValue = options.defaultValue;
+      if (options.from !== undefined) {
+        itemValue = future.getValueAtPath(result, options.from);
+        result = util.updateValueAtPath(result, options.from, '');
+      }
+      var list = Array.from(util.getArrayAtPath(result, options.name));
+      insertItem(list, itemValue, (_options$index = options.index) !== null && _options$index !== void 0 ? _options$index : list.length);
+      return util.updateValueAtPath(result, options.name, list);
+    },
+    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 _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.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 : util.getArrayAtPath(result.submission.payload, options.name).length;
+        var insertedItemPath = future.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 _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.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: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, (_result$error5 = result.error) === null || _result$error5 === void 0 ? void 0 : _result$error5.fieldErrors), {}, {
+                [options.from]: [...fromErrors, ...insertedItemErrors],
+                [insertedItemPath]: []
+              })
+            }
+          });
+        }
+      }
+      return result;
     },
-    onUpdate(state$1, _ref4) {
+    update(state$1, _ref3) {
       var _intent$payload$index;
       var {
         type,
         submission,
-        intent
-      } = _ref4;
+        intent,
+        ctx
+      } = _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;
+      var from = intent.payload.from;
+      var index = (_intent$payload$index = intent.payload.index) !== null && _intent$payload$index !== void 0 ? _intent$payload$index : util.getArrayAtPath(submission.payload, intent.payload.name).length;
       var updateListIndex = util.createPathIndexUpdater(intent.payload.name, currentIndex => index <= currentIndex ? currentIndex + 1 : currentIndex);
-      var touchedFields = util.appendUniqueItem(util.compactMap(state$1.touchedFields, updateListIndex), intent.payload.name);
-      var keys = state$1.listKeys;
+      var touchedFields = state$1.touchedFields;
+      var listKeys = state$1.listKeys;
+      if (!ctx.cancelled) {
+        touchedFields = util.compactMap(state$1.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$1.listKeys[intent.payload.name]) !== null && _state$listKeys$inten !== void 0 ? _state$listKeys$inten : state.getDefaultListKey(state$1.resetKey, currentValue, intent.payload.name));
-        insertItem(listKeys, util.generateUniqueKey(), index);
-        keys = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, updateListKeys(state$1.listKeys, future.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$1.listKeys[intent.payload.name]) !== null && _state$listKeys$inten !== void 0 ? _state$listKeys$inten : state.getDefaultListKey(state$1.resetKey, submission.payload, intent.payload.name));
+          insertItem(selectedListKeys, util.generateUniqueKey(), index);
+          listKeys = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, updateListKeys(state$1.listKeys, future.appendPathSegment(intent.payload.name, index), updateListIndex)), {}, {
+            // Update existing list keys
+            [intent.payload.name]: selectedListKeys
+          });
+        }
+      }
+      touchedFields = util.appendUniqueItem(touchedFields, intent.payload.name);
+      if (from !== undefined) {
+        touchedFields = util.appendUniqueItem(touchedFields, from);
       }
       return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state$1), {}, {
-        listKeys: keys,
+        listKeys,
         touchedFields
       });
     }
   },
   remove: {
-    validatePayload(options) {
-      return future.isPlainObject(options) && util.isString(options.name) && util.isNumber(options.index);
+    validate(options) {
+      return future.isPlainObject(options) && util.isString(options.name) && util.isNumber(options.index) && util.isOptional(options.onInvalid, v => v === 'revert' || v === 'insert');
     },
-    onApply(value, options) {
+    resolve(value, options) {
       var list = Array.from(util.getArrayAtPath(value, options.name));
       removeItem(list, options.index);
       return util.updateValueAtPath(value, options.name, list);
     },
-    onUpdate(state$1, _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 _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, result), {}, {
+              targetValue: undefined
+            });
+          case 'insert':
+            {
+              var list = Array.from(util.getArrayAtPath(result.targetValue, options.name));
+              insertItem(list, options.defaultValue, list.length);
+              return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, result), {}, {
+                targetValue: util.updateValueAtPath(result.targetValue, options.name, list)
+              });
+            }
+        }
+      }
+      return result;
+    },
+    update(state$1, _ref4) {
       var {
         type,
         submission,
-        intent
-      } = _ref5;
+        intent,
+        ctx
+      } = _ref4;
       if (type === 'server') {
         return state$1;
       }
@@ -245,40 +337,54 @@ var actionHandlers = {
         }
         return intent.payload.index < currentIndex ? currentIndex - 1 : currentIndex;
       });
-      var touchedFields = util.appendUniqueItem(util.compactMap(state$1.touchedFields, updateListIndex), intent.payload.name);
-      var keys = state$1.listKeys;
+      var touchedFields = state$1.touchedFields;
+      var listKeys = state$1.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$1.listKeys[intent.payload.name]) !== null && _state$listKeys$inten2 !== void 0 ? _state$listKeys$inten2 : state.getDefaultListKey(state$1.resetKey, currentValue, intent.payload.name));
-        removeItem(listKeys, intent.payload.index);
-        keys = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, updateListKeys(state$1.listKeys, future.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 = util.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$1.listKeys[intent.payload.name]) !== null && _state$listKeys$inten2 !== void 0 ? _state$listKeys$inten2 : state.getDefaultListKey(state$1.resetKey, currentValue, intent.payload.name));
+          removeItem(selectedListKeys, intent.payload.index);
+          listKeys = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, updateListKeys(state$1.listKeys, future.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, util.generateUniqueKey(), index);
+            listKeys = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, updateListKeys(state$1.listKeys, future.appendPathSegment(intent.payload.name, index), updateListIndex)), {}, {
+              // Update existing list keys
+              [intent.payload.name]: selectedListKeys
+            });
+          }
+        }
       }
+      touchedFields = util.appendUniqueItem(touchedFields, intent.payload.name);
       return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state$1), {}, {
-        listKeys: keys,
+        listKeys: listKeys,
         touchedFields
       });
     }
   },
   reorder: {
-    validatePayload(options) {
+    validate(options) {
       return future.isPlainObject(options) && util.isString(options.name) && util.isNumber(options.from) && util.isNumber(options.to);
     },
-    onApply(value, options) {
+    resolve(value, options) {
       var list = Array.from(util.getArrayAtPath(value, options.name));
       reorderItems(list, options.from, options.to);
       return util.updateValueAtPath(value, options.name, list);
     },
-    onUpdate(state$1, _ref6) {
+    update(state$1, _ref5) {
       var {
         type,
         submission,
         intent
-      } = _ref6;
+      } = _ref5;
       if (type === 'server') {
         return state$1;
       }
@@ -316,11 +422,12 @@ var actionHandlers = {
   }
 };
 
-exports.actionHandlers = actionHandlers;
 exports.applyIntent = applyIntent;
 exports.deserializeIntent = deserializeIntent;
 exports.insertItem = insertItem;
+exports.intentHandlers = intentHandlers;
 exports.removeItem = removeItem;
 exports.reorderItems = reorderItems;
+exports.resolveIntent = resolveIntent;
 exports.serializeIntent = serializeIntent;
 exports.updateListKeys = updateListKeys;