stimeo-ui 0.16.0 → 0.18.0

data/dist/controllers/form_validation_controller.js

@@ -1,15 +1,11 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/form_validation_controller.ts
-
-// src/utils/default_attribute.ts
 function setDefaultAttribute(element, name, value) {
   if (element.hasAttribute(name)) return false;
   element.setAttribute(name, value);
   return true;
 }
 
-// src/utils/focus_candidate.ts
 function inheritsFieldsetDisabled(control) {
   let fieldset = control.closest("fieldset[disabled]");
   while (fieldset) {
@@ -19,8 +15,19 @@ function inheritsFieldsetDisabled(control) {
   }
   return false;
 }
+function unslotted(element) {
+  return element.assignedSlot === null && element.parentElement?.shadowRoot != null;
+}
+function flatTreeParent(element) {
+  if (unslotted(element)) return null;
+  const parent = element.assignedSlot ?? element.parentNode;
+  if (parent instanceof ShadowRoot) return parent.host;
+  return parent instanceof Element ? parent : null;
+}
 function canTakeFocus(element) {
-  if (element.closest("[hidden], [inert]")) return false;
+  for (let node = element; node; node = flatTreeParent(node)) {
+    if (unslotted(node) || node.matches("[hidden], [inert]")) return false;
+  }
   if (element instanceof HTMLInputElement && element.type === "hidden") return false;
   if (!("disabled" in element)) return true;
   if (element.disabled) return false;
@@ -84,7 +91,17 @@ function firstTabStop(root) {
   return null;
 }
 
-// src/controllers/form_validation_controller.ts
+var ListenerSet = class {
+  #abort = new AbortController();
+  add(target, type, handler, options) {
+    target.addEventListener(type, handler, { ...options, signal: this.#abort.signal });
+  }
+  dispose() {
+    this.#abort.abort();
+    this.#abort = new AbortController();
+  }
+};
+
 var CONSTRAINT_MESSAGE_KEYS = [
   ["valueMissing", "value-missing"],
   ["typeMismatch", "type-mismatch"],
@@ -101,11 +118,9 @@ var DISALLOW_PART = "disallow";
 var DISALLOW_WHITESPACE_DEFAULT = "Please enter a value that is not only whitespace.";
 var FORM_FIELD_INVALID_ATTR = "data-stimeo--form-field-invalid";
 var FormValidationController = class _FormValidationController extends Controller {
-  /** The generic message override, in the namespace this controller is registered under. */
   get #messageAttribute() {
     return `data-${this.identifier}-${MESSAGE_PART}`;
   }
-  /** Marks the `novalidate` this controller applied, so an authored one is left alone. */
   get #novalidateMarker() {
     return `data-${this.identifier}-${_FormValidationController.#NOVALIDATE_PART}`;
   }
@@ -118,23 +133,12 @@ var FormValidationController = class _FormValidationController extends Controlle
   };
   static actions = ["validate"];
   static events = ["valid", "invalid"];
-  /** Suffix of the marker recording that we added `novalidate`, so we only remove our own. */
   static #NOVALIDATE_PART = "novalidate";
-  /** Object-backed groups already interacted with — the input revalidation gate. */
   #touchedGroups = /* @__PURE__ */ new WeakSet();
-  /** String-backed fallback radio groups already interacted with. */
   #touchedRadioGroups = /* @__PURE__ */ new Set();
-  /**
-   * Last message this controller wrote through `setCustomValidity`, kept as a
-   * two-layer ownership ledger: a value is cleared only while the live message
-   * still equals the recorded write. Iterable so disconnect can release every
-   * surviving loan without touching a consumer's later custom error.
-   */
   #ownedCustomErrors = /* @__PURE__ */ new Map();
-  /** Last invalid message routed to each field, suppressing duplicate reports. */
   #reportedErrors = /* @__PURE__ */ new WeakMap();
-  /** Exact document that owns the delegated listeners for this connection. */
-  #listenerDocument = null;
+  #listeners = new ListenerSet();
   #onSubmit = (event) => {
     if (event.target !== this.element) return;
     const invalid = this.#validateAll();
@@ -172,50 +176,30 @@ var FormValidationController = class _FormValidationController extends Controlle
     this.#markTouched(group.key);
     this.#applyGroup(group);
   };
-  /** Suppresses native bubbles and binds the submit / blur / input listeners. */
   connect() {
     if (setDefaultAttribute(this.element, "novalidate", "")) {
       this.element.setAttribute(this.#novalidateMarker, "");
     }
-    this.#listenerDocument = this.element.ownerDocument;
-    this.#listenerDocument.addEventListener("submit", this.#onSubmit, true);
-    this.#listenerDocument.addEventListener("focusout", this.#onFocusOut);
-    this.#listenerDocument.addEventListener("input", this.#onInput);
-    this.#listenerDocument.addEventListener("change", this.#onChange);
+    const { ownerDocument } = this.element;
+    this.#listeners.add(ownerDocument, "submit", this.#onSubmit, { capture: true });
+    this.#listeners.add(ownerDocument, "focusout", this.#onFocusOut);
+    this.#listeners.add(ownerDocument, "input", this.#onInput);
+    this.#listeners.add(ownerDocument, "change", this.#onChange);
   }
-  /** Tears down listeners and restores `novalidate` if we added it. */
   disconnect() {
-    this.#listenerDocument?.removeEventListener("submit", this.#onSubmit, true);
-    this.#listenerDocument?.removeEventListener("focusout", this.#onFocusOut);
-    this.#listenerDocument?.removeEventListener("input", this.#onInput);
-    this.#listenerDocument?.removeEventListener("change", this.#onChange);
-    this.#listenerDocument = null;
+    this.#listeners.dispose();
     for (const [control, message] of this.#ownedCustomErrors) {
       if (control.validationMessage === message) control.setCustomValidity("");
     }
     this.#ownedCustomErrors.clear();
-    this.#touchedRadioGroups.clear();
     if (this.element.hasAttribute(this.#novalidateMarker)) {
       this.element.removeAttribute("novalidate");
       this.element.removeAttribute(this.#novalidateMarker);
     }
   }
-  /**
-   * Validates every control now, rendering or clearing each field's message, and
-   * returns whether the whole form is valid. Marks every field/group touched so
-   * a later input from any sibling re-validates it. Bound via `data-action`
-   * (`#validate`) or callable directly (e.g. before a programmatic submit).
-   */
   validate() {
     return this.#validateAll().length === 0;
   }
-  /**
-   * Validates every control and returns one invalid control per field. Controls
-   * are grouped by field first (see {@link #keyFor}) so a field with several
-   * controls — a radio group, or a mirror plus its visible control — reflects
-   * *all* of them: a valid sibling must never clear an invalid one's message.
-   * Each group's first invalid control supplies the message and the focus target.
-   */
   #validateAll() {
     const invalid = [];
     for (const group of this.#snapshot().groups.values()) {
@@ -225,7 +209,6 @@ var FormValidationController = class _FormValidationController extends Controlle
     }
     return invalid;
   }
-  /** Builds the current field table in one pass over form controls and DOM depth. */
   #snapshot() {
     const fields = this.#fieldOutlets();
     const groups = /* @__PURE__ */ new Map();
@@ -243,7 +226,6 @@ var FormValidationController = class _FormValidationController extends Controlle
     }
     return { groups, groupByControl };
   }
-  /** Records that a whole field/group, rather than one sibling control, was visited. */
   #markTouched(key) {
     if (typeof key === "string") {
       this.#touchedRadioGroups.add(key);
@@ -254,13 +236,6 @@ var FormValidationController = class _FormValidationController extends Controlle
   #isTouched(key) {
     return typeof key === "string" ? this.#touchedRadioGroups.has(key) : this.#touchedGroups.has(key);
   }
-  /**
-   * Runs native constraint validation across a field's controls and routes the
-   * result to its `stimeo--form-field` outlet: the first invalid control's
-   * `validationMessage` is shown, an all-valid field is cleared. Returns the
-   * first invalid control (for the invalid list / focus), or `null` when valid.
-   * Routing goes through the outlet, so the ARIA wiring is never duplicated here.
-   */
   #applyGroup(group) {
     for (const control of group.controls) this.#syncCustomValidity(control);
     const firstInvalid = group.controls.find((control) => !control.checkValidity()) ?? null;
@@ -277,14 +252,6 @@ var FormValidationController = class _FormValidationController extends Controlle
     }
     return firstInvalid;
   }
-  /**
-   * Resolves the message to show for an invalid control: a per-constraint
-   * override (`data-stimeo--form-validation-message-<constraint>`) for the first failing
-   * `ValidityState` flag, then a generic `data-stimeo--form-validation-message`
-   * override, then the browser's native `validationMessage`. Authoring an override
-   * gives controlled, localizable, theme-able wording with **no consumer JS** —
-   * and sidesteps headless browsers that return an empty native message.
-   */
   #messageFor(control) {
     if (control.validity.customError) return control.validationMessage;
     for (const [flag, key] of CONSTRAINT_MESSAGE_KEYS) {
@@ -294,17 +261,6 @@ var FormValidationController = class _FormValidationController extends Controlle
     }
     return control.validationMessage || this.#authoredMessage(control, this.#messageAttribute) || "";
   }
-  /**
-   * Applies (or clears) a declarative custom constraint via `setCustomValidity`,
-   * for controls that opt in with `data-stimeo--form-validation-disallow`. The supported
-   * rule is `"whitespace"` — a value that is non-empty but blank
-   * after trimming (which slips past `required` / `minlength`); its message follows
-   * the whitespace-specific → generic → default chain.
-   *
-   * Don't-clobber-authored-state: an unknown/absent rule is never written, an
-   * existing consumer custom error wins, and a controller error is only cleared
-   * while the live message still equals the recorded controller write.
-   */
   #syncCustomValidity(control) {
     const recorded = this.#ownedCustomErrors.get(control);
     const ownsCurrent = recorded !== void 0 && control.validationMessage === recorded;
@@ -319,16 +275,10 @@ var FormValidationController = class _FormValidationController extends Controlle
     if (!ownsCurrent || recorded !== message) control.setCustomValidity(message);
     this.#ownedCustomErrors.set(control, message);
   }
-  /** Returns a non-blank authored message, otherwise falls through to a fallback. */
   #authoredMessage(control, attribute) {
     const message = control.getAttribute(attribute);
     return message && message.trim().length > 0 ? message : null;
   }
-  /**
-   * A grouping key that collects controls belonging to the same field: the owning
-   * `stimeo--form-field` when present, else a radio group's shared `name`, else
-   * the control itself (always distinct).
-   */
   #keyFor(control, field) {
     if (field) return field;
     if (control instanceof HTMLInputElement && control.type === "radio" && control.name) {
@@ -336,15 +286,6 @@ var FormValidationController = class _FormValidationController extends Controlle
     }
     return control;
   }
-  /**
-   * Where focus should land for an invalid control. A visible control is focused
-   * directly — the case for native fields and radios. A validatable mirror
-   * (the `hidden` attribute) cannot receive focus, so focus is delegated to the
-   * visible widget: the owning field's `control` target when it is itself
-   * focusable, else its first focusable descendant (e.g. a roving-tabindex
-   * member). Resolved structurally — never by probing `focus()` — so behavior
-   * is deterministic and CSS-independent.
-   */
   #focusTargetFor(control) {
     if (canTakeFocus(control)) return control;
     const field = this.#fieldFor(control, this.#fieldOutlets());
@@ -353,7 +294,6 @@ var FormValidationController = class _FormValidationController extends Controlle
     if (isTabStop(root)) return root;
     return firstTabStop(root);
   }
-  /** Pairs each live outlet element with its controller once per operation. */
   #fieldOutlets() {
     const fields = /* @__PURE__ */ new Map();
     const elements = this.stimeoFormFieldOutletElements;
@@ -365,7 +305,6 @@ var FormValidationController = class _FormValidationController extends Controlle
     }
     return fields;
   }
-  /** The nearest configured field ancestor of `control`, if any. */
   #fieldFor(control, fields) {
     let ancestor = control;
     while (ancestor) {
@@ -375,7 +314,6 @@ var FormValidationController = class _FormValidationController extends Controlle
     }
     return void 0;
   }
-  /** This form's native controls that participate in constraint validation. */
   get #controls() {
     const controls = [];
     for (const element of Array.from(this.element.elements)) {
@@ -383,18 +321,14 @@ var FormValidationController = class _FormValidationController extends Controlle
     }
     return controls;
   }
-  /** Narrows an event target to a validatable control. */
   #controlFrom(target) {
     return target instanceof Element && this.#isValidatable(target) && target.form === this.element ? target : null;
   }
   #isValidatable(element) {
-    return (element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement) && // `willValidate` already excludes disabled, read-only, input[type=hidden],
-    // and button-type controls. The `hidden` attribute intentionally does not
-    // bar a text mirror from constraint validation.
+    return (element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement) &&
     element.willValidate;
   }
 };
 
 export { FormValidationController };
-//# sourceMappingURL=form_validation_controller.js.map
 //# sourceMappingURL=form_validation_controller.js.map