@conform-to/dom 1.8.0 → 1.8.2

package/README.md

@@ -7,7 +7,7 @@
  ╚══════╝  ╚═════╝  ╚═╝  ╚══╝ ╚═╝        ╚═════╝  ╚═╝   ╚═╝ ╚═╝   ╚═╝
 ```
 
-Version 1.8.0 / License MIT / Copyright (c) 2024 Edmund Hung
+Version 1.8.2 / License MIT / Copyright (c) 2024 Edmund Hung
 
 A type-safe form validation library utilizing web fundamentals to progressively enhance HTML Forms with full support for server frameworks like Remix and Next.js.
 

package/dist/dom.d.ts

@@ -53,13 +53,16 @@ export declare function createGlobalFormsObserver(): {
 export declare function change(element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, value: string | string[] | File | File[] | FileList | null): void;
 export declare function focus(element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): void;
 export declare function blur(element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): void;
-export declare function normalizeFieldValue(value: unknown): [string[] | null, FileList | null];
+export declare function normalizeStringValues(value: unknown): string[] | undefined;
+export declare function normalizeFileValues(value: unknown): FileList | undefined;
 /**
  * Updates the DOM element with the provided value and defaultValue.
+ * If the value or defaultValue is undefined, it will keep the current value instead
  */
 export declare function updateField(element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, options: {
     value?: unknown;
     defaultValue?: unknown;
 }): void;
+export declare function isDirtyInput(element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): boolean;
 export {};
 //# sourceMappingURL=dom.d.ts.map

package/dist/dom.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var formdata = require('./formdata.js');
 var util = require('./util.js');
 
 /**
@@ -329,69 +330,68 @@ function blur(element) {
   }));
   element.dispatchEvent(new FocusEvent('blur'));
 }
-function normalizeFieldValue(value) {
-  if (typeof value === 'undefined') {
-    return [null, null];
+function normalizeStringValues(value) {
+  if (typeof value === 'undefined') return undefined;
+  if (value === null) return [];
+  if (typeof value === 'string') return [value];
+  if (Array.isArray(value) && value.every(v => typeof v === 'string')) {
+    return Array.from(value);
   }
-  if (value === null) {
-    return [[], createFileList([])];
-  }
-  if (typeof value === 'string') {
-    return [[value], null];
-  }
-  if (Array.isArray(value)) {
-    if (value.every(item => typeof item === 'string')) {
-      return [Array.from(value), null];
-    }
-    if (value.every(item => item instanceof File)) {
-      return [null, createFileList(value)];
-    }
-  }
-  if (value instanceof FileList) {
-    return [null, value];
-  }
-  if (value instanceof File) {
-    return [null, createFileList([value])];
+  throw new Error('Expected string or string[] value for string based input');
+}
+function normalizeFileValues(value) {
+  if (typeof value === 'undefined') return undefined;
+  if (value === null) return createFileList([]);
+  if (formdata.isGlobalInstance(value, 'File')) return createFileList([value]);
+  if (formdata.isGlobalInstance(value, 'FileList')) return value;
+  if (Array.isArray(value) && value.every(item => formdata.isGlobalInstance(item, 'File'))) {
+    return createFileList(value);
   }
-  return [null, null];
+  throw new Error('Expected File, FileList or File[] for file input');
 }
 
 /**
  * Updates the DOM element with the provided value and defaultValue.
+ * If the value or defaultValue is undefined, it will keep the current value instead
  */
 function updateField(element, options) {
   var _value$;
-  var [value, file] = normalizeFieldValue(options.value);
-  var [defaultValue] = normalizeFieldValue(options.defaultValue);
   if (isInputElement(element)) {
     switch (element.type) {
       case 'file':
         {
-          element.files = file;
+          var files = normalizeFileValues(options.value);
+          if (files) {
+            element.files = files;
+          }
           return;
         }
       case 'checkbox':
       case 'radio':
         {
-          if (value) {
-            var checked = value.includes(element.value);
+          var _value = normalizeStringValues(options.value);
+          var _defaultValue = normalizeStringValues(options.defaultValue);
+          if (_value) {
+            var checked = _value.includes(element.value);
             if (element.type === 'checkbox' ? checked !== element.checked : checked) {
               // Simulate a click to update the checked state
               element.click();
             }
             element.checked = checked;
           }
-          if (defaultValue) {
-            element.defaultChecked = defaultValue.includes(element.value);
+          if (_defaultValue) {
+            element.defaultChecked = _defaultValue.includes(element.value);
           }
           return;
         }
     }
   } else if (isSelectElement(element)) {
-    var shouldUnselect = value && value.length === 0;
+    var _value2 = normalizeStringValues(options.value);
+    var _defaultValue2 = normalizeStringValues(options.defaultValue);
+    var shouldUnselect = _value2 && _value2.length === 0;
     for (var option of element.options) {
-      if (value) {
-        var index = value.indexOf(option.value);
+      if (_value2) {
+        var index = _value2.indexOf(option.value);
         var selected = index > -1;
 
         // Update the selected state of the option
@@ -401,11 +401,11 @@ function updateField(element, options) {
 
         // Remove the option from the value array
         if (selected) {
-          value.splice(index, 1);
+          _value2.splice(index, 1);
         }
       }
-      if (defaultValue) {
-        var _index = defaultValue.indexOf(option.value);
+      if (_defaultValue2) {
+        var _index = _defaultValue2.indexOf(option.value);
         var _selected = _index > -1;
 
         // Update the selected state of the option
@@ -415,15 +415,15 @@ function updateField(element, options) {
 
         // Remove the option from the defaultValue array
         if (_selected) {
-          defaultValue.splice(_index, 1);
+          _defaultValue2.splice(_index, 1);
         }
       }
     }
 
     // We have already removed all selected options from the value and defaultValue array at this point
-    var missingOptions = new Set([...(value !== null && value !== void 0 ? value : []), ...(defaultValue !== null && defaultValue !== void 0 ? defaultValue : [])]);
+    var missingOptions = new Set([...(_value2 !== null && _value2 !== void 0 ? _value2 : []), ...(_defaultValue2 !== null && _defaultValue2 !== void 0 ? _defaultValue2 : [])]);
     for (var optionValue of missingOptions) {
-      element.options.add(new Option(optionValue, optionValue, defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.includes(optionValue), value === null || value === void 0 ? void 0 : value.includes(optionValue)));
+      element.options.add(new Option(optionValue, optionValue, _defaultValue2 === null || _defaultValue2 === void 0 ? void 0 : _defaultValue2.includes(optionValue), _value2 === null || _value2 === void 0 ? void 0 : _value2.includes(optionValue)));
     }
 
     // If the select element is not multiple and the value is an empty array, unset the selected index
@@ -433,6 +433,8 @@ function updateField(element, options) {
     }
     return;
   }
+  var value = normalizeStringValues(options.value);
+  var defaultValue = normalizeStringValues(options.defaultValue);
   var inputValue = (_value$ = value === null || value === void 0 ? void 0 : value[0]) !== null && _value$ !== void 0 ? _value$ : '';
   if (element.value !== inputValue) {
     /**
@@ -450,12 +452,10 @@ function updateField(element, options) {
     } = Object.getOwnPropertyDescriptor(prototype, 'value') || {};
     if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
       prototypeValueSetter.call(element, inputValue);
+    } else if (valueSetter) {
+      valueSetter.call(element, inputValue);
     } else {
-      if (valueSetter) {
-        valueSetter.call(element, inputValue);
-      } else {
-        throw new Error('The given element does not have a value setter');
-      }
+      throw new Error('The given element does not have a value setter');
     }
   }
   if (defaultValue) {
@@ -463,6 +463,25 @@ function updateField(element, options) {
     element.defaultValue = (_defaultValue$ = defaultValue[0]) !== null && _defaultValue$ !== void 0 ? _defaultValue$ : '';
   }
 }
+function isDirtyInput(element) {
+  var _element$files$length, _element$files;
+  if (isInputElement(element)) {
+    switch (element.type) {
+      case 'checkbox':
+      case 'radio':
+        return element.checked !== element.defaultChecked;
+      case 'file':
+        return ((_element$files$length = (_element$files = element.files) === null || _element$files === void 0 ? void 0 : _element$files.length) !== null && _element$files$length !== void 0 ? _element$files$length : 0) > 0;
+      default:
+        return element.value !== element.defaultValue;
+    }
+  } else if (isSelectElement(element)) {
+    return Array.from(element.options).some(option => option.selected !== option.defaultSelected);
+  } else if (isTextAreaElement(element)) {
+    return element.value !== element.defaultValue;
+  }
+  return false;
+}
 
 exports.blur = blur;
 exports.change = change;
@@ -472,10 +491,12 @@ exports.focus = focus;
 exports.getFormAction = getFormAction;
 exports.getFormEncType = getFormEncType;
 exports.getFormMethod = getFormMethod;
+exports.isDirtyInput = isDirtyInput;
 exports.isFieldElement = isFieldElement;
 exports.isInputElement = isInputElement;
 exports.isSelectElement = isSelectElement;
 exports.isTextAreaElement = isTextAreaElement;
-exports.normalizeFieldValue = normalizeFieldValue;
+exports.normalizeFileValues = normalizeFileValues;
+exports.normalizeStringValues = normalizeStringValues;
 exports.requestSubmit = requestSubmit;
 exports.updateField = updateField;

package/dist/dom.mjs

@@ -1,3 +1,4 @@
+import { isGlobalInstance } from './formdata.mjs';
 import { invariant } from './util.mjs';
 
 /**
@@ -325,69 +326,68 @@ function blur(element) {
   }));
   element.dispatchEvent(new FocusEvent('blur'));
 }
-function normalizeFieldValue(value) {
-  if (typeof value === 'undefined') {
-    return [null, null];
+function normalizeStringValues(value) {
+  if (typeof value === 'undefined') return undefined;
+  if (value === null) return [];
+  if (typeof value === 'string') return [value];
+  if (Array.isArray(value) && value.every(v => typeof v === 'string')) {
+    return Array.from(value);
   }
-  if (value === null) {
-    return [[], createFileList([])];
-  }
-  if (typeof value === 'string') {
-    return [[value], null];
-  }
-  if (Array.isArray(value)) {
-    if (value.every(item => typeof item === 'string')) {
-      return [Array.from(value), null];
-    }
-    if (value.every(item => item instanceof File)) {
-      return [null, createFileList(value)];
-    }
-  }
-  if (value instanceof FileList) {
-    return [null, value];
-  }
-  if (value instanceof File) {
-    return [null, createFileList([value])];
+  throw new Error('Expected string or string[] value for string based input');
+}
+function normalizeFileValues(value) {
+  if (typeof value === 'undefined') return undefined;
+  if (value === null) return createFileList([]);
+  if (isGlobalInstance(value, 'File')) return createFileList([value]);
+  if (isGlobalInstance(value, 'FileList')) return value;
+  if (Array.isArray(value) && value.every(item => isGlobalInstance(item, 'File'))) {
+    return createFileList(value);
   }
-  return [null, null];
+  throw new Error('Expected File, FileList or File[] for file input');
 }
 
 /**
  * Updates the DOM element with the provided value and defaultValue.
+ * If the value or defaultValue is undefined, it will keep the current value instead
  */
 function updateField(element, options) {
   var _value$;
-  var [value, file] = normalizeFieldValue(options.value);
-  var [defaultValue] = normalizeFieldValue(options.defaultValue);
   if (isInputElement(element)) {
     switch (element.type) {
       case 'file':
         {
-          element.files = file;
+          var files = normalizeFileValues(options.value);
+          if (files) {
+            element.files = files;
+          }
           return;
         }
       case 'checkbox':
       case 'radio':
         {
-          if (value) {
-            var checked = value.includes(element.value);
+          var _value = normalizeStringValues(options.value);
+          var _defaultValue = normalizeStringValues(options.defaultValue);
+          if (_value) {
+            var checked = _value.includes(element.value);
             if (element.type === 'checkbox' ? checked !== element.checked : checked) {
               // Simulate a click to update the checked state
               element.click();
             }
             element.checked = checked;
           }
-          if (defaultValue) {
-            element.defaultChecked = defaultValue.includes(element.value);
+          if (_defaultValue) {
+            element.defaultChecked = _defaultValue.includes(element.value);
           }
           return;
         }
     }
   } else if (isSelectElement(element)) {
-    var shouldUnselect = value && value.length === 0;
+    var _value2 = normalizeStringValues(options.value);
+    var _defaultValue2 = normalizeStringValues(options.defaultValue);
+    var shouldUnselect = _value2 && _value2.length === 0;
     for (var option of element.options) {
-      if (value) {
-        var index = value.indexOf(option.value);
+      if (_value2) {
+        var index = _value2.indexOf(option.value);
         var selected = index > -1;
 
         // Update the selected state of the option
@@ -397,11 +397,11 @@ function updateField(element, options) {
 
         // Remove the option from the value array
         if (selected) {
-          value.splice(index, 1);
+          _value2.splice(index, 1);
         }
       }
-      if (defaultValue) {
-        var _index = defaultValue.indexOf(option.value);
+      if (_defaultValue2) {
+        var _index = _defaultValue2.indexOf(option.value);
         var _selected = _index > -1;
 
         // Update the selected state of the option
@@ -411,15 +411,15 @@ function updateField(element, options) {
 
         // Remove the option from the defaultValue array
         if (_selected) {
-          defaultValue.splice(_index, 1);
+          _defaultValue2.splice(_index, 1);
         }
       }
     }
 
     // We have already removed all selected options from the value and defaultValue array at this point
-    var missingOptions = new Set([...(value !== null && value !== void 0 ? value : []), ...(defaultValue !== null && defaultValue !== void 0 ? defaultValue : [])]);
+    var missingOptions = new Set([...(_value2 !== null && _value2 !== void 0 ? _value2 : []), ...(_defaultValue2 !== null && _defaultValue2 !== void 0 ? _defaultValue2 : [])]);
     for (var optionValue of missingOptions) {
-      element.options.add(new Option(optionValue, optionValue, defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.includes(optionValue), value === null || value === void 0 ? void 0 : value.includes(optionValue)));
+      element.options.add(new Option(optionValue, optionValue, _defaultValue2 === null || _defaultValue2 === void 0 ? void 0 : _defaultValue2.includes(optionValue), _value2 === null || _value2 === void 0 ? void 0 : _value2.includes(optionValue)));
     }
 
     // If the select element is not multiple and the value is an empty array, unset the selected index
@@ -429,6 +429,8 @@ function updateField(element, options) {
     }
     return;
   }
+  var value = normalizeStringValues(options.value);
+  var defaultValue = normalizeStringValues(options.defaultValue);
   var inputValue = (_value$ = value === null || value === void 0 ? void 0 : value[0]) !== null && _value$ !== void 0 ? _value$ : '';
   if (element.value !== inputValue) {
     /**
@@ -446,12 +448,10 @@ function updateField(element, options) {
     } = Object.getOwnPropertyDescriptor(prototype, 'value') || {};
     if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
       prototypeValueSetter.call(element, inputValue);
+    } else if (valueSetter) {
+      valueSetter.call(element, inputValue);
     } else {
-      if (valueSetter) {
-        valueSetter.call(element, inputValue);
-      } else {
-        throw new Error('The given element does not have a value setter');
-      }
+      throw new Error('The given element does not have a value setter');
     }
   }
   if (defaultValue) {
@@ -459,5 +459,24 @@ function updateField(element, options) {
     element.defaultValue = (_defaultValue$ = defaultValue[0]) !== null && _defaultValue$ !== void 0 ? _defaultValue$ : '';
   }
 }
+function isDirtyInput(element) {
+  var _element$files$length, _element$files;
+  if (isInputElement(element)) {
+    switch (element.type) {
+      case 'checkbox':
+      case 'radio':
+        return element.checked !== element.defaultChecked;
+      case 'file':
+        return ((_element$files$length = (_element$files = element.files) === null || _element$files === void 0 ? void 0 : _element$files.length) !== null && _element$files$length !== void 0 ? _element$files$length : 0) > 0;
+      default:
+        return element.value !== element.defaultValue;
+    }
+  } else if (isSelectElement(element)) {
+    return Array.from(element.options).some(option => option.selected !== option.defaultSelected);
+  } else if (isTextAreaElement(element)) {
+    return element.value !== element.defaultValue;
+  }
+  return false;
+}
 
-export { blur, change, createFileList, createGlobalFormsObserver, focus, getFormAction, getFormEncType, getFormMethod, isFieldElement, isInputElement, isSelectElement, isTextAreaElement, normalizeFieldValue, requestSubmit, updateField };
+export { blur, change, createFileList, createGlobalFormsObserver, focus, getFormAction, getFormEncType, getFormMethod, isDirtyInput, isFieldElement, isInputElement, isSelectElement, isTextAreaElement, normalizeFileValues, normalizeStringValues, requestSubmit, updateField };

package/dist/form.js

@@ -582,12 +582,15 @@ function createFormContext(options) {
                 var paths = formdata.getChildPaths(parentPaths, element.name);
                 if (paths) {
                   var value = formdata.getValue(intent.payload.value, formdata.formatPaths(paths));
-                  dom.updateField(element, {
-                    value: typeof value === 'string' || Array.isArray(value) && value.every(item => typeof item === 'string') ? value : null
-                  });
+                  var inputValue = typeof value === 'string' || Array.isArray(value) && value.every(item => typeof item === 'string') ? value : undefined;
+                  if (typeof inputValue !== 'undefined' || _name5 === '' && paths.length > 1) {
+                    dom.updateField(element, {
+                      value: inputValue !== null && inputValue !== void 0 ? inputValue : null
+                    });
 
-                  // Update the element attribute to notify useControl / useInputControl hook
-                  element.dataset.conform = util.generateId();
+                    // Update the element attribute to notify useControl / useInputControl hook
+                    element.dataset.conform = util.generateId();
+                  }
                 }
               }
             }
@@ -599,10 +602,13 @@ function createFormContext(options) {
             for (var _element of formElement.elements) {
               if (dom.isFieldElement(_element) && _element.name && formdata.isPrefix(_element.name, prefix)) {
                 var _value2 = formdata.getValue(meta.defaultValue, _element.name);
-                var defaultValue = typeof _value2 === 'string' || Array.isArray(_value2) && _value2.every(item => typeof item === 'string') ? _value2 : null;
+                var defaultValue = typeof _value2 === 'string' || Array.isArray(_value2) && _value2.every(item => typeof item === 'string') ? _value2 : undefined;
+                if (typeof defaultValue === 'undefined' && !_element.dataset.conform && 'defaultValue' in _element && !dom.isDirtyInput(_element)) {
+                  continue;
+                }
                 dom.updateField(_element, {
-                  defaultValue,
-                  value: defaultValue
+                  defaultValue: defaultValue,
+                  value: defaultValue !== null && defaultValue !== void 0 ? defaultValue : null
                 });
 
                 // Update the element attribute to notify useControl / useInputControl hook

package/dist/form.mjs

@@ -1,6 +1,6 @@
 import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
 import { flatten, formatName, getValue, isPlainObject, isPrefix, setValue, normalize, getFormData, getPaths, getChildPaths, formatPaths } from './formdata.mjs';
-import { getFormAction, getFormEncType, getFormMethod, isFieldElement, requestSubmit, updateField } from './dom.mjs';
+import { getFormAction, getFormEncType, getFormMethod, isFieldElement, requestSubmit, isDirtyInput, updateField } from './dom.mjs';
 import { generateId, clone, invariant } from './util.mjs';
 import { serialize, setListState, setListValue, setState, INTENT, serializeIntent, root, getSubmissionContext } from './submission.mjs';
 
@@ -578,12 +578,15 @@ function createFormContext(options) {
                 var paths = getChildPaths(parentPaths, element.name);
                 if (paths) {
                   var value = getValue(intent.payload.value, formatPaths(paths));
-                  updateField(element, {
-                    value: typeof value === 'string' || Array.isArray(value) && value.every(item => typeof item === 'string') ? value : null
-                  });
+                  var inputValue = typeof value === 'string' || Array.isArray(value) && value.every(item => typeof item === 'string') ? value : undefined;
+                  if (typeof inputValue !== 'undefined' || _name5 === '' && paths.length > 1) {
+                    updateField(element, {
+                      value: inputValue !== null && inputValue !== void 0 ? inputValue : null
+                    });
 
-                  // Update the element attribute to notify useControl / useInputControl hook
-                  element.dataset.conform = generateId();
+                    // Update the element attribute to notify useControl / useInputControl hook
+                    element.dataset.conform = generateId();
+                  }
                 }
               }
             }
@@ -595,10 +598,13 @@ function createFormContext(options) {
             for (var _element of formElement.elements) {
               if (isFieldElement(_element) && _element.name && isPrefix(_element.name, prefix)) {
                 var _value2 = getValue(meta.defaultValue, _element.name);
-                var defaultValue = typeof _value2 === 'string' || Array.isArray(_value2) && _value2.every(item => typeof item === 'string') ? _value2 : null;
+                var defaultValue = typeof _value2 === 'string' || Array.isArray(_value2) && _value2.every(item => typeof item === 'string') ? _value2 : undefined;
+                if (typeof defaultValue === 'undefined' && !_element.dataset.conform && 'defaultValue' in _element && !isDirtyInput(_element)) {
+                  continue;
+                }
                 updateField(_element, {
-                  defaultValue,
-                  value: defaultValue
+                  defaultValue: defaultValue,
+                  value: defaultValue !== null && defaultValue !== void 0 ? defaultValue : null
                 });
 
                 // Update the element attribute to notify useControl / useInputControl hook

package/package.json

@@ -3,7 +3,7 @@
   "description": "A set of opinionated helpers built on top of the Constraint Validation API",
   "homepage": "https://conform.guide",
   "license": "MIT",
-  "version": "1.8.0",
+  "version": "1.8.2",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",