@samline/forms 2.7.2 → 2.8.0

package/dist/index.cjs

@@ -41,7 +41,7 @@ module.exports = __toCommonJS(src_exports);
 
 // src/api/append.ts
 var createAppend = (state2, helpers) => ({ tag, content, class: className, atStart = false }) => {
-  if (!state2.element) return null;
+  if (!state2.element || state2.isDestroyed) return null;
   helpers.clearFieldCache();
   if (className) {
     const classSelector = className.trim().split(/\s+/)[0];
@@ -77,6 +77,7 @@ var createAddCleanup = (state2, _helpers) => (cleanup) => {
 
 // src/api/auto-submit.ts
 var createAutoSubmit = (state2, helpers) => (next = true) => {
+  if (state2.isDestroyed) return state2.api;
   state2.autoSubmitEnabled = next !== false;
   if (!state2.autoSubmitEnabled && state2.autoSubmitTimer) {
     clearTimeout(state2.autoSubmitTimer);
@@ -89,6 +90,7 @@ var createAutoSubmit = (state2, helpers) => (next = true) => {
 
 // src/api/clear-errors.ts
 var createClearErrors = (state2, helpers) => (fields) => {
+  if (state2.isDestroyed) return state2.api;
   if (!fields) {
     state2.manualErrors = {};
     helpers.syncVisualState();
@@ -215,6 +217,7 @@ var isFormatChar = (char) => {
   return true;
 };
 var restoreCursor = (field, position) => {
+  if (field.ownerDocument.activeElement !== field) return;
   const max = field.value.length;
   const safe = clamp(position, 0, max);
   const apply = () => {
@@ -609,7 +612,7 @@ var mergeErrors = (left, right) => {
 var createGetState = (state2, helpers) => () => {
   const values = helpers.getValues();
   const errors = cloneErrors(helpers.getMergedErrors());
-  const filledFields = helpers.getTrackedFieldNames().filter((name) => {
+  const filledFields = Object.keys(values).filter((name) => {
     const value = values[name];
     if (Array.isArray(value)) return value.length > 0;
     if (typeof value === "string") return value.trim().length > 0;
@@ -782,6 +785,7 @@ var createGetValue = (state2, helpers) => (name) => readFieldValue(helpers.getFi
 
 // src/api/observe.ts
 var createObserve = (state2, helpers) => (field, callback) => {
+  if (state2.isDestroyed) return () => void 0;
   const callbacks = state2.watchedFields.get(field) ?? /* @__PURE__ */ new Set();
   callbacks.add(callback);
   state2.watchedFields.set(field, callbacks);
@@ -799,44 +803,49 @@ var createObserve = (state2, helpers) => (field, callback) => {
 
 // src/api/on-submit.ts
 var createOnSubmit = (state2, _helpers) => (callback, preventDefault = true) => {
+  if (state2.isDestroyed) return state2.api;
   state2.submitHandlers.add({ callback, preventDefault });
   return state2.api;
 };
 
 // src/api/prefill.ts
-var createPrefill = (state2, _helpers) => (fieldName) => {
-  if (!state2.element) return state2.api;
+var createPrefill = (state2, helpers) => (fieldName) => {
+  if (!state2.element || state2.isDestroyed) return state2.api;
   const params = new URLSearchParams(window.location.search);
-  params.forEach((value, key) => {
-    if (fieldName && fieldName !== key) return;
-    state2.api.setValue(key, value);
-  });
+  const keys = Array.from(new Set(params.keys())).filter(
+    (key) => !fieldName || fieldName === key
+  );
+  if (keys.length === 0) return state2.api;
+  state2.autoSubmitSuspended = true;
+  try {
+    for (const key of keys) {
+      const values = params.getAll(key);
+      state2.api.setValue(key, values.length > 1 ? values : values[0]);
+    }
+  } finally {
+    state2.autoSubmitSuspended = false;
+  }
+  helpers.scheduleAutoSubmit();
   return state2.api;
 };
 
 // src/api/reset.ts
 var createReset = (state2, helpers) => () => {
-  if (!state2.element) return state2.api;
-  state2.element.reset();
-  resetFormattedFields(state2);
-  state2.manualErrors = {};
-  state2.validationErrors = {};
-  state2.validationGroupErrors = {};
-  state2.validationElementErrors.clear();
-  clearAttributes(state2.element, [
-    state2.attributes.error,
-    state2.attributes.filled,
-    "aria-invalid"
-  ]);
-  helpers.syncVisualState();
-  helpers.notifySubscribers();
+  if (!state2.element || state2.isDestroyed) return state2.api;
+  state2.isResetting = true;
+  try {
+    state2.element.reset();
+  } finally {
+    state2.isResetting = false;
+  }
+  helpers.applyReset();
   return state2.api;
 };
 
 // src/api/validate.ts
 var createValidate = (state2, helpers) => (fields) => {
+  if (state2.isDestroyed) return { isValid: true, errors: {} };
   state2.isValidated = true;
-  helpers.syncVisualState(fields);
   return helpers.validateNames(fields);
 };
 
@@ -845,6 +854,7 @@ var createRevalidate = createValidate;
 
 // src/api/set-errors.ts
 var createSetErrors = (state2, helpers) => (fields) => {
+  if (state2.isDestroyed) return state2.api;
   if (Array.isArray(fields)) {
     state2.manualErrors = {
       ...state2.manualErrors,
@@ -863,6 +873,7 @@ var createSetErrors = (state2, helpers) => (fields) => {
 
 // src/api/set-value.ts
 var createSetValue = (state2, helpers) => (name, value) => {
+  if (state2.isDestroyed) return state2.api;
   const fields = helpers.getFieldsByName(name);
   if (fields.length === 0) return state2.api;
   writeFieldValue(fields, value);
@@ -874,6 +885,7 @@ var createSetValue = (state2, helpers) => (name, value) => {
 
 // src/api/subscribe.ts
 var createSubscribe = (state2, _helpers) => (listener) => {
+  if (state2.isDestroyed) return () => void 0;
   state2.subscribers.add(listener);
   listener(state2.api.getState());
   return () => {
@@ -1084,6 +1096,9 @@ var createFormController = (target, options = {}) => {
     submitCount: 0,
     pendingSubmitCount: 0,
     autoSubmitTimer: null,
+    isAutoSubmitting: false,
+    autoSubmitSuspended: false,
+    isResetting: false,
     isDestroyed: false,
     listeners: [],
     mutationObserver: null,
@@ -1128,12 +1143,20 @@ var createFormController = (target, options = {}) => {
     state2.fieldCache.set(name, fields);
     return fields;
   };
-  const getTrackedFieldNames = () => {
-    if (!state2.element) return Object.keys(state2.validators);
-    const names = new Set(Object.keys(state2.validators));
+  const indexFieldsByName = () => {
+    const index = /* @__PURE__ */ new Map();
+    if (!state2.element) return index;
     for (const field of getNamedFields(state2.element)) {
-      names.add(field.name);
+      const bucket = index.get(field.name);
+      if (bucket) bucket.push(field);
+      else index.set(field.name, [field]);
     }
+    return index;
+  };
+  const getTrackedFieldNames = (index = indexFieldsByName()) => {
+    if (!state2.element) return Object.keys(state2.validators);
+    const names = new Set(Object.keys(state2.validators));
+    for (const name of index.keys()) names.add(name);
     for (const [canonical, entry] of state2.formattedFields) {
       names.add(canonical);
       if (entry.displayName && entry.displayName !== canonical) {
@@ -1144,8 +1167,9 @@ var createFormController = (target, options = {}) => {
   };
   const getValues = () => {
     const values = {};
-    for (const name of getTrackedFieldNames()) {
-      values[name] = readFieldValue(getFieldsByName(name));
+    const index = indexFieldsByName();
+    for (const name of getTrackedFieldNames(index)) {
+      values[name] = readFieldValue(index.get(name) ?? []);
     }
     return values;
   };
@@ -1238,29 +1262,54 @@ var createFormController = (target, options = {}) => {
     const snapshot = state2.api.getState();
     callbacks.forEach((callback) => callback(value, fieldElement, state2.element, snapshot));
   };
+  const runAutoSubmit = () => {
+    state2.autoSubmitTimer = null;
+    if (!state2.element || state2.isDestroyed || !state2.autoSubmitEnabled) return;
+    state2.isAutoSubmitting = true;
+    try {
+      submitForm(state2.element);
+    } finally {
+      state2.isAutoSubmitting = false;
+    }
+  };
   const scheduleAutoSubmit = () => {
-    if (!state2.element || !state2.autoSubmitEnabled) return;
+    if (!state2.element || !state2.autoSubmitEnabled || state2.autoSubmitSuspended) return;
     if (state2.autoSubmitTimer) clearTimeout(state2.autoSubmitTimer);
+    state2.autoSubmitTimer = null;
     if (state2.autoSubmitDebounce > 0) {
-      state2.autoSubmitTimer = setTimeout(
-        () => submitForm(state2.element),
-        state2.autoSubmitDebounce
-      );
+      state2.autoSubmitTimer = setTimeout(runAutoSubmit, state2.autoSubmitDebounce);
       return;
     }
-    submitForm(state2.element);
+    runAutoSubmit();
+  };
+  const emitAllFieldWatchers = () => {
+    for (const name of Array.from(state2.watchedFields.keys())) emitFieldWatchers(name);
+  };
+  const applyReset = () => {
+    if (!state2.element || state2.isDestroyed) return;
+    clearFieldCache();
+    resetFormattedFields(state2);
+    state2.manualErrors = {};
+    state2.validationErrors = {};
+    state2.validationGroupErrors = {};
+    state2.validationElementErrors.clear();
+    clearAttributes(state2.element, [attributes.error, attributes.filled, "aria-invalid"]);
+    syncVisualState();
+    emitAllFieldWatchers();
+    notifySubscribers();
   };
   const helpers = {
     notifySubscribers,
     clearFieldCache,
     getFieldsByName,
-    getTrackedFieldNames,
+    getTrackedFieldNames: () => getTrackedFieldNames(),
     getValues,
     getMergedErrors,
     syncVisualState,
     validateNames,
     emitFieldWatchers,
-    scheduleAutoSubmit
+    scheduleAutoSubmit,
+    applyReset
   };
   const handleDelegatedEvent = (event) => {
     const target2 = event.target;
@@ -1289,6 +1338,23 @@ var createFormController = (target, options = {}) => {
     if (target2.form !== state2.element || state2.element?.contains(target2)) return;
     handleDelegatedEvent(event);
   };
+  const isFocusable = (candidate) => {
+    if (!candidate.isConnected || candidate.disabled || candidate.hidden) return false;
+    return !(candidate instanceof HTMLInputElement && candidate.type === "hidden");
+  };
+  const focusFirstInvalidField = (errors) => {
+    const candidates = [];
+    for (const name of Object.keys(errors)) {
+      const fields = getFieldsByName(resolveDisplayNameForName(state2, name)).filter(isFocusable);
+      const elementErrors = state2.validationElementErrors.get(name);
+      const field = fields.find((candidate) => elementErrors?.has(candidate)) ?? fields[0];
+      if (field) candidates.push(field);
+    }
+    candidates.sort(
+      (left, right) => left.compareDocumentPosition(right) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+    );
+    candidates[0]?.focus();
+  };
   const handleSubmitEvent = (event) => {
     if (!state2.element || state2.isDestroyed || !state2.api) return;
     if (normalizedOptions.clearErrorsOnSubmit) state2.manualErrors = {};
@@ -1299,23 +1365,7 @@ var createFormController = (target, options = {}) => {
     state2.submitCount += 1;
     notifySubscribers();
     if (!validation.isValid) {
-      for (const name of Object.keys(validation.errors)) {
-        const displayName = resolveDisplayNameForName(state2, name);
-        const fields = getFieldsByName(displayName);
-        const elementErrors = state2.validationElementErrors.get(name);
-        const field = fields.find((candidate2) => {
-          if (!candidate2.isConnected || candidate2.disabled || candidate2.hidden) return false;
-          if (candidate2 instanceof HTMLInputElement && candidate2.type === "hidden") return false;
-          return elementErrors?.has(candidate2);
-        }) ?? fields.find((candidate2) => {
-          if (!candidate2.isConnected || candidate2.disabled || candidate2.hidden) return false;
-          return !(candidate2 instanceof HTMLInputElement && candidate2.type === "hidden");
-        });
-        if (field) {
-          field.focus();
-          break;
-        }
-      }
+      if (!state2.isAutoSubmitting) focusFirstInvalidField(validation.errors);
       return;
     }
     const candidate = event;
@@ -1328,7 +1378,13 @@ var createFormController = (target, options = {}) => {
     try {
       for (const handler of handlers) {
         const result = handler.callback(state2.element, data, formData, snapshot);
-        if (result && typeof result.then === "function") pending.push(Promise.resolve(result));
+        if (result && typeof result.then === "function") {
+          pending.push(
+            Promise.resolve(result).catch((error) => {
+              console.error("[forms] submit handler failed", error);
+            })
+          );
+        }
       }
     } catch (error) {
       synchronousError = error;
@@ -1344,9 +1400,21 @@ var createFormController = (target, options = {}) => {
     }
     if (hasSynchronousError) throw synchronousError;
   };
+  const handleResetEvent = (event) => {
+    if (state2.isResetting) return;
+    const timer = setTimeout(() => {
+      state2.cleanups.delete(cancel);
+      if (!event.defaultPrevented) applyReset();
+    }, 0);
+    const cancel = () => clearTimeout(timer);
+    state2.cleanups.add(cancel);
+  };
   const startMutationObserver = () => {
     if (!state2.element || typeof MutationObserver === "undefined") return;
-    state2.mutationObserver = new MutationObserver(() => {
+    const touchesFields = (node) => node instanceof Element && (isFieldElement(node) || node.querySelector("input, select, textarea") !== null);
+    const isRelevant = (record) => record.type === "attributes" || Array.from(record.addedNodes).some(touchesFields) || Array.from(record.removedNodes).some(touchesFields);
+    state2.mutationObserver = new MutationObserver((records) => {
+      if (state2.isDestroyed || !records.some(isRelevant)) return;
       clearFieldCache();
       if (state2.isValidated) {
         validateNames();
@@ -1399,6 +1467,7 @@ var createFormController = (target, options = {}) => {
     addListener2(state2.element, "input", handleDelegatedEvent);
     addListener2(document, "input", handleExternalDelegatedEvent);
     addListener2(state2.element, "submit", handleSubmitEvent);
+    addListener2(state2.element, "reset", handleResetEvent);
     startMutationObserver();
   }
   if (normalizedOptions.autoSubmit) {