@conform-to/dom 1.8.0 → 1.8.1

package/README.md

@@ -7,7 +7,7 @@
  ╚══════╝  ╚═════╝  ╚═╝  ╚══╝ ╚═╝        ╚═════╝  ╚═╝   ╚═╝ ╚═╝   ╚═╝
 ```
 
-Version 1.8.0 / License MIT / Copyright (c) 2024 Edmund Hung
+Version 1.8.1 / 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,9 +53,11 @@ 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;

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) {
@@ -476,6 +476,7 @@ 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) {
@@ -460,4 +460,4 @@ function updateField(element, options) {
   }
 }
 
-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, isFieldElement, isInputElement, isSelectElement, isTextAreaElement, normalizeFileValues, normalizeStringValues, requestSubmit, updateField };

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.1",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",