@conform-to/react 1.19.3 → 1.20.0

package/dist/future/state.mjs

@@ -1,6 +1,6 @@
 import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.mjs';
-import { parsePath, getRelativePath, appendPath, deepEqual, getPathValue, normalize, formatPath } from '@conform-to/dom/future';
-import { when, generateUniqueKey, merge, getPathArray } from './util.mjs';
+import { parsePath, getRelativePath, appendPath, deepEqual, formatPath, getPathValue, normalize, isPlainObject } from '@conform-to/dom/future';
+import { when, generateUniqueKey, merge, appendUniqueItem, getPathArray } from './util.mjs';
 
 function initializeState(options) {
   var _options$resetKey, _options$defaultValue;
@@ -12,7 +12,12 @@ function initializeState(options) {
     serverValue: null,
     serverError: null,
     clientError: null,
-    touchedFields: []
+    touchedFields: [],
+    customState: initializeCustomState({
+      handlers: options === null || options === void 0 ? void 0 : options.customStateHandlers,
+      currentState: options === null || options === void 0 ? void 0 : options.lastCustomState,
+      result: options === null || options === void 0 ? void 0 : options.result
+    })
   };
 }
 
@@ -23,28 +28,30 @@ function initializeState(options) {
  * - Initialize: set initial server value
  */
 function updateState(state, action) {
-  var _action$targetValue, _action$targetValue2, _action$intent, _action$ctx$handlers;
-  if (action.reset) {
-    return action.ctx.reset(action.targetValue);
+  var _action$result$target, _action$result$target2, _action$intent, _action$ctx$intentHan;
+  if (action.result.reset) {
+    return action.ctx.reset();
   }
-  var value = (_action$targetValue = action.targetValue) !== null && _action$targetValue !== void 0 ? _action$targetValue : action.submission.payload;
+  var value = (_action$result$target = action.result.targetValue) !== null && _action$result$target !== void 0 ? _action$result$target : action.result.submission.payload;
+  var isClientAction = action.type === 'client' || action.type === 'client:async';
+  var hasIntentEffects = action.type !== 'server' && action.type !== 'client:async';
 
   // Apply the form error and target value from the result first
-  state = action.type === 'client' ? merge(state, {
-    targetValue: (_action$targetValue2 = action.targetValue) !== null && _action$targetValue2 !== void 0 ? _action$targetValue2 : state.targetValue,
-    serverValue: action.targetValue ? null : state.serverValue,
+  state = isClientAction ? merge(state, {
+    targetValue: action.type === 'client' ? (_action$result$target2 = action.result.targetValue) !== null && _action$result$target2 !== void 0 ? _action$result$target2 : state.targetValue : state.targetValue,
+    serverValue: action.type === 'client' && action.result.targetValue ? null : state.serverValue,
     // Update client error only if the error is different from the previous one to minimize unnecessary re-renders
-    clientError: typeof action.error !== 'undefined' && !deepEqual(state.clientError, action.error) ? action.error : state.clientError,
+    clientError: typeof action.result.error !== 'undefined' && !deepEqual(state.clientError, action.result.error) ? action.result.error : state.clientError,
     // Reset server error if form value is changed
-    serverError: typeof action.error !== 'undefined' && !deepEqual(state.serverValue, value) ? null : state.serverError
+    serverError: typeof action.result.error !== 'undefined' && !deepEqual(state.serverValue, value) ? null : state.serverError
   }) : merge(state, {
     // Clear client error to avoid showing stale errors
     clientError: null,
     // Update server error if the error is defined.
     // There is no need to check if the error is different as we are updating other states as well
-    serverError: typeof action.error !== 'undefined' ? action.error : state.serverError,
-    listKeys: action.type === 'server' && action.targetValue ? pruneListKeys(state.listKeys, action.targetValue) : state.listKeys,
-    targetValue: action.type === 'server' && action.targetValue ? action.targetValue : state.targetValue,
+    serverError: typeof action.result.error !== 'undefined' ? action.result.error : state.serverError,
+    listKeys: action.type === 'server' && action.result.targetValue ? pruneListKeys(state.listKeys, action.result.targetValue) : state.listKeys,
+    targetValue: action.type === 'server' && action.result.targetValue ? action.result.targetValue : state.targetValue,
     // Keep track of the value that the serverError is based on
     serverValue: !deepEqual(state.serverValue, value) ? value : state.serverValue
   });
@@ -52,23 +59,250 @@ function updateState(state, action) {
   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.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, _objectSpread2(_objectSpread2({}, action), {}, {
-        ctx: {
-          reset: action.ctx.reset,
-          cancelled: action.ctx.cancelled
-        },
-        intent: {
-          type: intent.type,
-          payload: intent.payload
-        }
+  var handler = (_action$ctx$intentHan = action.ctx.intentHandlers) === null || _action$ctx$intentHan === void 0 ? void 0 : _action$ctx$intentHan[intent.type];
+  if (handler && action.type === 'client' && hasIntentEffects) {
+    if (typeof handler.move === 'function') {
+      var handleMove = handler.move;
+      state = moveState(state, action.result.submission.payload, value, name => handleMove({
+        name,
+        payload: intent.payload,
+        status: action.ctx.status,
+        targetValue: action.result.targetValue
       }));
+    } else if (typeof handler.resolve === 'function') {
+      state = invalidateState(state, action.result.submission.payload, value);
+    }
+  }
+  if (handler && action.type !== 'server' && hasIntentEffects && typeof handler.touch === 'function') {
+    var touchedFields = state.touchedFields;
+    for (var _name of getFields(action.result)) {
+      if (handler.touch({
+        name: _name,
+        payload: intent.payload
+      })) {
+        touchedFields = appendUniqueItem(touchedFields, _name);
+      }
+    }
+    state = merge(state, {
+      touchedFields
+    });
+  }
+  return merge(state, {
+    customState: updateCustomState(state.customState, action, {
+      handlers: action.ctx.customStateHandlers
+    })
+  });
+}
+function getFields(result) {
+  var fields = result.submission.fields;
+  if (result.error) {
+    fields = fields.concat(Object.keys(result.error.fieldErrors));
+  }
+  var fieldsSet = new Set(['']);
+  for (var field of fields) {
+    var paths = parsePath(field);
+    for (var index = 1; index <= paths.length; index++) {
+      fieldsSet.add(formatPath(paths.slice(0, index)));
+    }
+  }
+  return Array.from(fieldsSet);
+}
+function getApplyStatus(baseTargetValue, finalTargetValue) {
+  if (baseTargetValue === finalTargetValue) {
+    return 'applied';
+  }
+  return typeof finalTargetValue === 'undefined' ? 'reverted' : 'modified';
+}
+
+/**
+ * Fallback state transition for intents that change the payload shape without
+ * providing a `move()` mapping. It drops list keys and touched fields under
+ * changed paths so stale client state does not point at the wrong fields.
+ */
+function invalidateState(state, previousValue, nextValue) {
+  if (previousValue === nextValue) {
+    return state;
+  }
+  var changedNames = [];
+  var stack = [{
+    previousValue,
+    nextValue,
+    name: ''
+  }];
+  var _loop = function _loop() {
+      var current = stack.pop();
+      if (!current) {
+        return 0; // break
+      }
+      if (Object.is(current.previousValue, current.nextValue)) {
+        return 1; // continue
+      }
+      if (Array.isArray(current.previousValue) && Array.isArray(current.nextValue)) {
+        changedNames = changedNames.concat(current.name);
+        return 1; // continue
+      }
+      if (isPlainObject(current.previousValue) && isPlainObject(current.nextValue)) {
+        for (var key of new Set([...Object.keys(current.previousValue), ...Object.keys(current.nextValue)])) {
+          stack.push({
+            previousValue: current.previousValue[key],
+            nextValue: current.nextValue[key],
+            name: appendPath(current.name, key)
+          });
+        }
+        return 1; // continue
+      }
+      var basePath = parsePath(current.name);
+      if (changedNames.some(existingName => getRelativePath(current.name, parsePath(existingName)) !== null)) {
+        return 1; // continue
+      }
+      changedNames = changedNames.filter(existingName => getRelativePath(existingName, basePath) === null).concat(current.name);
+    },
+    _ret;
+  while (stack.length > 0) {
+    _ret = _loop();
+    if (_ret === 0) break;
+    if (_ret === 1) continue;
+  }
+  var basePaths = changedNames.map(parsePath);
+  if (basePaths.length === 0) {
+    return state;
+  }
+  var listKeys = state.listKeys;
+  var touchedFields = state.touchedFields;
+  if (Object.keys(state.listKeys).length > 0) {
+    var changed = false;
+    var entries = Object.entries(state.listKeys).filter(_ref => {
+      var [name] = _ref;
+      var keep = !basePaths.some(basePath => getRelativePath(name, basePath) !== null);
+      changed || (changed = !keep);
+      return keep;
+    });
+    if (changed) {
+      listKeys = Object.fromEntries(entries);
+    }
+  }
+  if (state.touchedFields.length > 0) {
+    var _changed = false;
+    var nextTouchedFields = state.touchedFields.filter(name => {
+      var keep = !basePaths.some(basePath => getRelativePath(name, basePath) !== null);
+      _changed || (_changed = !keep);
+      return keep;
+    });
+    if (_changed) {
+      touchedFields = nextTouchedFields;
     }
   }
-  return state;
+  return merge(state, {
+    listKeys,
+    touchedFields
+  });
+}
+
+/**
+ * Preserves list keys and touched fields for intents that can map old field
+ * paths to new ones, such as insert, remove, and reorder.
+ */
+function moveState(state, previousValue, nextValue, move) {
+  if (previousValue === nextValue) {
+    return state;
+  }
+  function collectListEntries(value) {
+    var name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    var entries = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+    if (Array.isArray(value)) {
+      entries.push(name);
+      for (var index = 0; index < value.length; index++) {
+        collectListEntries(value[index], appendPath(name, index), entries);
+      }
+    } else if (isPlainObject(value)) {
+      for (var [key, childValue] of Object.entries(value)) {
+        collectListEntries(childValue, appendPath(name, key), entries);
+      }
+    }
+    return entries;
+  }
+  function getListEntry(name) {
+    if (name === null) {
+      return null;
+    }
+    var paths = parsePath(name);
+    var index = paths[paths.length - 1];
+    if (typeof index !== 'number') {
+      return null;
+    }
+    return {
+      name: formatPath(paths.slice(0, -1)),
+      index
+    };
+  }
+  var targetSlots = {};
+  var getTargetSlots = listName => {
+    var _targetSlots$listName;
+    return (_targetSlots$listName = targetSlots[listName]) !== null && _targetSlots$listName !== void 0 ? _targetSlots$listName : targetSlots[listName] = Array.from({
+      length: getPathArray(nextValue, listName).length
+    }, () => undefined);
+  };
+  for (var listName of collectListEntries(previousValue)) {
+    var _state$listKeys$listN;
+    var sourceKeys = (_state$listKeys$listN = state.listKeys[listName]) !== null && _state$listKeys$listN !== void 0 ? _state$listKeys$listN : getDefaultListKey(state.resetKey, previousValue, listName);
+    for (var index = 0; index < sourceKeys.length; index++) {
+      var _entry$index, _target$_entry$index;
+      var entry = getListEntry(move(appendPath(listName, index)));
+      if (!entry) {
+        continue;
+      }
+      var target = getTargetSlots(entry.name);
+      if (entry.index >= target.length) {
+        continue;
+      }
+      (_target$_entry$index = target[_entry$index = entry.index]) !== null && _target$_entry$index !== void 0 ? _target$_entry$index : target[_entry$index] = sourceKeys[index];
+    }
+  }
+  var touchedFields = state.touchedFields;
+  for (var [_index, currentName] of state.touchedFields.entries()) {
+    var movedName = move(currentName);
+    if (movedName === currentName) {
+      continue;
+    }
+    touchedFields = state.touchedFields.slice(0, _index);
+    if (movedName !== null) {
+      touchedFields.push(movedName);
+    }
+    for (var nextName of state.touchedFields.slice(_index + 1)) {
+      var _movedName = move(nextName);
+      if (_movedName !== null) {
+        touchedFields.push(_movedName);
+      }
+    }
+    break;
+  }
+  var changed = false;
+  var result = {};
+  var listNames = new Set([...Object.keys(state.listKeys), ...Object.keys(targetSlots)]);
+  for (var _listName of listNames) {
+    var keys = targetSlots[_listName];
+    var currentKeys = state.listKeys[_listName];
+    if (!keys) {
+      changed = true;
+      continue;
+    }
+    var nextKeys = keys.map(key => key !== null && key !== void 0 ? key : generateUniqueKey());
+    var defaultKeys = getDefaultListKey(state.resetKey, nextValue, _listName);
+    if (deepEqual(nextKeys, defaultKeys)) {
+      changed || (changed = typeof currentKeys !== 'undefined');
+      continue;
+    }
+    if (currentKeys && deepEqual(currentKeys, nextKeys)) {
+      result[_listName] = currentKeys;
+      continue;
+    }
+    result[_listName] = nextKeys;
+    changed = true;
+  }
+  return merge(state, {
+    listKeys: changed ? result : state.listKeys,
+    touchedFields
+  });
 }
 
 /**
@@ -77,8 +311,8 @@ function updateState(state, action) {
  */
 function pruneListKeys(listKeys, targetValue) {
   var result = listKeys;
-  for (var [name, keys] of Object.entries(listKeys)) {
-    var list = getPathArray(targetValue, name);
+  for (var [_name2, keys] of Object.entries(listKeys)) {
+    var list = getPathArray(targetValue, _name2);
 
     // Reset list keys only if the length has changed
     // to minimize potential UI state loss due to key changes
@@ -89,22 +323,26 @@ function pruneListKeys(listKeys, targetValue) {
       }
 
       // Remove the list key to force regeneration
-      delete result[name];
+      delete result[_name2];
     }
   }
   return result;
 }
 function getDefaultPayload(context, name) {
-  var _ref, _context$state$server;
-  var value = getPathValue((_ref = (_context$state$server = context.state.serverValue) !== null && _context$state$server !== void 0 ? _context$state$server : context.state.targetValue) !== null && _ref !== void 0 ? _ref : context.state.defaultValue, name);
+  var _ref2, _context$state$server;
+  var value = getPathValue((_ref2 = (_context$state$server = context.state.serverValue) !== null && _context$state$server !== void 0 ? _context$state$server : context.state.targetValue) !== null && _ref2 !== void 0 ? _ref2 : context.state.defaultValue, name);
   if (value === null) {
     return null;
   }
-  return normalize(value, context.serialize, name);
+  return normalize(value, {
+    serialize: context.serialize,
+    stripEmptyValue: false,
+    name
+  });
 }
 function getDefaultValue(context, name) {
-  var _ref2, _context$state$server2;
-  var value = getPathValue((_ref2 = (_context$state$server2 = context.state.serverValue) !== null && _context$state$server2 !== void 0 ? _context$state$server2 : context.state.targetValue) !== null && _ref2 !== void 0 ? _ref2 : context.state.defaultValue, name);
+  var _ref3, _context$state$server2;
+  var value = getPathValue((_ref3 = (_context$state$server2 = context.state.serverValue) !== null && _context$state$server2 !== void 0 ? _context$state$server2 : context.state.targetValue) !== null && _ref3 !== void 0 ? _ref3 : context.state.defaultValue, name);
   var serializedValue = context.serialize(value, {
     name
   });
@@ -114,8 +352,8 @@ function getDefaultValue(context, name) {
   return '';
 }
 function getDefaultOptions(context, name) {
-  var _ref3, _context$state$server3;
-  var value = getPathValue((_ref3 = (_context$state$server3 = context.state.serverValue) !== null && _context$state$server3 !== void 0 ? _context$state$server3 : context.state.targetValue) !== null && _ref3 !== void 0 ? _ref3 : context.state.defaultValue, name);
+  var _ref4, _context$state$server3;
+  var value = getPathValue((_ref4 = (_context$state$server3 = context.state.serverValue) !== null && _context$state$server3 !== void 0 ? _context$state$server3 : context.state.targetValue) !== null && _ref4 !== void 0 ? _ref4 : context.state.defaultValue, name);
   var serializedValue = context.serialize(value, {
     name
   });
@@ -128,8 +366,8 @@ function getDefaultOptions(context, name) {
   return [];
 }
 function isDefaultChecked(context, name) {
-  var _ref4, _context$state$server4;
-  var value = getPathValue((_ref4 = (_context$state$server4 = context.state.serverValue) !== null && _context$state$server4 !== void 0 ? _context$state$server4 : context.state.targetValue) !== null && _ref4 !== void 0 ? _ref4 : context.state.defaultValue, name);
+  var _ref5, _context$state$server4;
+  var value = getPathValue((_ref5 = (_context$state$server4 = context.state.serverValue) !== null && _context$state$server4 !== void 0 ? _context$state$server4 : context.state.targetValue) !== null && _ref5 !== void 0 ? _ref5 : context.state.defaultValue, name);
   var serializedValue = context.serialize(value, {
     name
   });
@@ -159,8 +397,8 @@ function getDefaultListKey(prefix, initialValue, name) {
   return getPathArray(initialValue, name).map((_, index) => "".concat(prefix, "-").concat(appendPath(name, index)));
 }
 function getListKey(context, name) {
-  var _context$state$listKe, _context$state$listKe2, _ref5, _context$state$server5;
-  return (_context$state$listKe = (_context$state$listKe2 = context.state.listKeys) === null || _context$state$listKe2 === void 0 ? void 0 : _context$state$listKe2[name]) !== null && _context$state$listKe !== void 0 ? _context$state$listKe : getDefaultListKey(context.state.resetKey, (_ref5 = (_context$state$server5 = context.state.serverValue) !== null && _context$state$server5 !== void 0 ? _context$state$server5 : context.state.targetValue) !== null && _ref5 !== void 0 ? _ref5 : context.state.defaultValue, name);
+  var _context$state$listKe, _context$state$listKe2, _ref6, _context$state$server5;
+  return (_context$state$listKe = (_context$state$listKe2 = context.state.listKeys) === null || _context$state$listKe2 === void 0 ? void 0 : _context$state$listKe2[name]) !== null && _context$state$listKe !== void 0 ? _context$state$listKe : getDefaultListKey(context.state.resetKey, (_ref6 = (_context$state$server5 = context.state.serverValue) !== null && _context$state$server5 !== void 0 ? _context$state$server5 : context.state.targetValue) !== null && _ref6 !== void 0 ? _ref6 : context.state.defaultValue, name);
 }
 function getErrors(state, name) {
   var _state$serverError;
@@ -200,8 +438,8 @@ function getFieldErrors(state, name) {
  */
 function hasFieldError(error, name) {
   var basePath = parsePath(name);
-  return Object.entries(error.fieldErrors).some(_ref6 => {
-    var [field, fieldError] = _ref6;
+  return Object.entries(error.fieldErrors).some(_ref7 => {
+    var [field, fieldError] = _ref7;
     return getRelativePath(field, basePath) !== null && fieldError !== null;
   });
 }
@@ -241,6 +479,9 @@ function getFormMetadata(context, options) {
     errorId: "".concat(context.formId, "-form-error"),
     descriptionId: "".concat(context.formId, "-form-description"),
     defaultValue: context.state.defaultValue,
+    get customState() {
+      return context.state.customState;
+    },
     get errors() {
       return getErrors(context.state);
     },
@@ -410,5 +651,57 @@ function getFieldList(context, options) {
     });
   });
 }
+function defineCustomState(definition) {
+  return definition;
+}
+function mergeCustomStateHandlers(globalCustomState, inlineCustomState) {
+  if (globalCustomState && inlineCustomState) {
+    for (var key of Object.keys(inlineCustomState)) {
+      if (Object.prototype.hasOwnProperty.call(globalCustomState, key)) {
+        throw new Error("Duplicate custom state key \"".concat(key, "\""));
+      }
+    }
+  }
+  return _objectSpread2(_objectSpread2({}, globalCustomState), inlineCustomState);
+}
+function initializeCustomState(options) {
+  var _options$handlers;
+  return Object.fromEntries(Object.entries((_options$handlers = options.handlers) !== null && _options$handlers !== void 0 ? _options$handlers : {}).map(_ref8 => {
+    var [key, handler] = _ref8;
+    if (!options.currentState || !Object.prototype.hasOwnProperty.call(options.currentState, key) || handler.reset === undefined || handler.reset === true) {
+      return [key, handler.initialize()];
+    }
+    var currentState = options.currentState[key];
+    if (typeof handler.reset === 'function') {
+      return [key, handler.reset(currentState, {
+        result: options.result
+      })];
+    }
+    return [key, currentState];
+  }));
+}
+function updateCustomState(state, action, options) {
+  if (!options.handlers) {
+    return state;
+  }
+  return Object.fromEntries(Object.entries(options.handlers).map(_ref9 => {
+    var [key, handler] = _ref9;
+    var nextState = state[key];
+    if (action.type !== 'server' && action.type !== 'client:async' && handler.handleIntent) {
+      nextState = handler.handleIntent(nextState, {
+        intent: action.intent,
+        submission: action.result.submission
+      });
+    }
+    if (handler.handleResult && typeof action.result.error !== 'undefined') {
+      nextState = handler.handleResult(nextState, {
+        intent: action.intent,
+        result: action.result,
+        phase: action.type === 'client' || action.type === 'client:async' ? 'client' : 'server'
+      });
+    }
+    return [key, nextState];
+  }));
+}
 
-export { getDefaultListKey, getDefaultOptions, getDefaultPayload, getDefaultValue, getErrors, getField, getFieldErrors, getFieldList, getFieldset, getFormMetadata, getListKey, hasFieldError, initializeState, isDefaultChecked, isTouched, isValid, pruneListKeys, updateState };
+export { defineCustomState, getApplyStatus, getDefaultListKey, getDefaultOptions, getDefaultPayload, getDefaultValue, getErrors, getField, getFieldErrors, getFieldList, getFields, getFieldset, getFormMetadata, getListKey, hasFieldError, initializeCustomState, initializeState, invalidateState, isDefaultChecked, isTouched, isValid, mergeCustomStateHandlers, moveState, pruneListKeys, updateCustomState, updateState };