stimeo-ui 0.7.0 → 0.8.0

data/dist/controllers/input_mask_controller.js

@@ -1,5 +1,74 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/input_mask_controller.ts
+
+// src/utils/composition_tracker.ts
+var CompositionTracker = class {
+  #observedTargets = /* @__PURE__ */ new Set();
+  #activeTargets = /* @__PURE__ */ new Set();
+  #onStart;
+  #onEnd;
+  constructor(options = {}) {
+    this.#onStart = options.onStart;
+    this.#onEnd = options.onEnd;
+  }
+  /** Starts lifecycle tracking for `target`; repeated calls are idempotent. */
+  observe(target) {
+    if (this.#observedTargets.has(target)) return;
+    target.addEventListener("compositionstart", this.#handleStart);
+    target.addEventListener("compositionend", this.#handleEnd);
+    this.#observedTargets.add(target);
+  }
+  /** Stops tracking one target and clears any active composition it owned. */
+  unobserve(target) {
+    if (!this.#observedTargets.delete(target)) return;
+    target.removeEventListener("compositionstart", this.#handleStart);
+    target.removeEventListener("compositionend", this.#handleEnd);
+    this.#activeTargets.delete(target);
+  }
+  /** Releases every listener and clears state so reconnect starts cleanly. */
+  disconnect() {
+    for (const target of this.#observedTargets) {
+      target.removeEventListener("compositionstart", this.#handleStart);
+      target.removeEventListener("compositionend", this.#handleEnd);
+    }
+    this.#observedTargets.clear();
+    this.#activeTargets.clear();
+  }
+  /** True when lifecycle tracking or the current event reports composition. */
+  isComposing(event) {
+    return this.#activeTargets.size > 0 || event?.isComposing === true;
+  }
+  #handleStart = (event) => {
+    if (event.currentTarget) this.#activeTargets.add(event.currentTarget);
+    this.#onStart?.(event);
+  };
+  #handleEnd = (event) => {
+    if (event.currentTarget) this.#activeTargets.delete(event.currentTarget);
+    this.#onEnd?.(event);
+  };
+};
+
+// src/utils/focus_candidate.ts
+function inheritsFieldsetDisabled(control) {
+  let fieldset = control.closest("fieldset[disabled]");
+  while (fieldset) {
+    const legend = Array.from(fieldset.children).find((child) => child.tagName === "LEGEND");
+    if (!legend?.contains(control)) return true;
+    fieldset = fieldset.parentElement?.closest("fieldset[disabled]") ?? null;
+  }
+  return false;
+}
+
+// src/utils/half_width.ts
+var FULL_WIDTH_SHIFT = 65248;
+function halfWidthChar(char) {
+  if (char >= "\uFF01" && char <= "\uFF5E") {
+    return String.fromCharCode(char.charCodeAt(0) - FULL_WIDTH_SHIFT);
+  }
+  return char === "\u3000" ? " " : char;
+}
+
 // src/controllers/input_mask_controller.ts
 var DEFAULT_TOKENS = {
   "9": "\\d",
@@ -7,6 +76,11 @@ var DEFAULT_TOKENS = {
   "*": "[A-Za-z0-9]"
 };
 var UNMASK_ATTR = "data-stimeo--input-mask-unmask";
+function acceptedForm(regex, char) {
+  if (regex.test(char)) return char;
+  const half = halfWidthChar(char);
+  return half !== char && regex.test(half) ? half : null;
+}
 function applyMask(value, pattern, tokens) {
   let masked = "";
   let unmasked = "";
@@ -18,17 +92,21 @@ function applyMask(value, pattern, tokens) {
     if (regex) totalTokens += 1;
     if (valueIndex >= value.length) continue;
     if (regex) {
-      while (valueIndex < value.length && !regex.test(value[valueIndex] ?? "")) valueIndex += 1;
-      const char = value[valueIndex];
-      if (char === void 0) continue;
-      masked += char;
-      unmasked += char;
+      let taken = null;
+      while (valueIndex < value.length) {
+        taken = acceptedForm(regex, value[valueIndex] ?? "");
+        if (taken !== null) break;
+        valueIndex += 1;
+      }
+      if (taken === null) continue;
+      masked += taken;
+      unmasked += taken;
       tokenFlags.push(true);
       valueIndex += 1;
     } else {
       masked += patternChar;
       tokenFlags.push(false);
-      if (value[valueIndex] === patternChar) valueIndex += 1;
+      if (halfWidthChar(value[valueIndex] ?? "") === halfWidthChar(patternChar)) valueIndex += 1;
     }
   }
   return {
@@ -38,67 +116,169 @@ function applyMask(value, pattern, tokens) {
     tokenFlags
   };
 }
+function compileTokens(declaration) {
+  const map = /* @__PURE__ */ new Map();
+  for (const [key, source] of Object.entries({ ...DEFAULT_TOKENS, ...parseTokens(declaration) })) {
+    try {
+      map.set(key, new RegExp(`^(?:${source})$`));
+    } catch {
+    }
+  }
+  return map;
+}
+function parseTokens(declaration) {
+  let parsed;
+  try {
+    parsed = JSON.parse(declaration);
+  } catch {
+    return {};
+  }
+  if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) return {};
+  const tokens = {};
+  for (const [key, source] of Object.entries(parsed)) {
+    if (typeof source === "string") tokens[key] = source;
+  }
+  return tokens;
+}
+function deletionOf(event) {
+  const inputType = event instanceof InputEvent ? event.inputType : "";
+  if (!inputType.startsWith("delete")) return null;
+  return inputType.endsWith("Forward") ? "forward" : "backward";
+}
+function tokenCharOffset(tokenFlags, n) {
+  let seen = 0;
+  for (let i = 0; i < tokenFlags.length; i += 1) {
+    if (!tokenFlags[i]) continue;
+    seen += 1;
+    if (seen === n) return i;
+  }
+  return -1;
+}
 var InputMaskController = class extends Controller {
   static values = {
     pattern: { type: String, default: "" },
-    tokens: { type: Object, default: {} },
+    tokens: { type: String, default: "" },
     unmaskToHidden: { type: Boolean, default: true }
   };
   static actions = ["format"];
-  static events = ["change"];
+  static events = ["change", "reconcile"];
+  /** The value this controller last committed, and the baseline both events compare. */
+  #lastValue = null;
+  #started = false;
+  /** Validated token map; the hot path never parses the `tokens` declaration. */
+  #tokens = compileTokens("");
+  /** Holds mid-composition input so the IME's uncommitted text is never rewritten. */
+  #composition = new CompositionTracker({ onEnd: () => this.#reformat("edit") });
+  /** Re-parses the declaration and re-formats under the tokens it now selects. */
+  tokensValueChanged() {
+    this.#tokens = compileTokens(this.tokensValue);
+    if (this.#started) this.#reformat("reconcile");
+  }
+  patternValueChanged() {
+    if (this.#started) this.#reformat("reconcile");
+  }
+  /** Clears a sink it stops maintaining so a submit cannot carry a stale raw value. */
+  unmaskToHiddenValueChanged() {
+    if (!this.#started) return;
+    if (!this.unmaskToHiddenValue) {
+      const sink = this.#resolveSink();
+      if (sink) sink.value = "";
+    }
+    this.#reformat("reconcile");
+  }
   connect() {
-    this.#apply();
+    this.#started = true;
+    this.#composition.observe(this.element);
+    this.#lastValue = this.element.value;
+    this.#reformat("reconcile");
+  }
+  disconnect() {
+    this.#started = false;
+    this.#composition.disconnect();
   }
   /** Formats the field on input, preserving the caret. Bound via `data-action`. */
-  format() {
-    this.#apply();
+  format(event) {
+    if (this.#composition.isComposing(event)) return;
+    this.#reformat("edit", deletionOf(event));
   }
-  /** Core reformat: mask the current value, restore the caret, sync, and announce. */
-  #apply() {
-    if (!this.patternValue) return;
+  /**
+   * Core reformat: mask the current value, restore the caret, sync the sink and
+   * the state hooks, and report a moved value under the event `cause` selects.
+   */
+  #reformat(cause, deletion = null) {
     const input = this.element;
-    const previous = input.value;
-    const caret = input.selectionStart ?? previous.length;
-    const tokens = this.#tokenRegexes();
-    const significant = this.#countSignificant(previous.slice(0, caret), tokens);
-    const result = applyMask(previous, this.patternValue, tokens);
+    const raw = input.value;
+    if (this.patternValue === "") {
+      this.#flag("data-mask-complete", false);
+      this.#flag("data-mask-empty", raw.length === 0);
+      this.#lastValue = raw;
+      return;
+    }
+    const caret = input.selectionStart ?? raw.length;
+    let anchor = this.#significantBefore(raw.slice(0, caret));
+    let result = applyMask(raw, this.patternValue, this.#tokens);
+    if (deletion !== null && result.masked === this.#lastValue) {
+      const target = deletion === "backward" ? anchor : anchor + 1;
+      const offset = tokenCharOffset(result.tokenFlags, target);
+      if (offset >= 0) {
+        anchor = target - 1;
+        result = applyMask(
+          result.masked.slice(0, offset) + result.masked.slice(offset + 1),
+          this.patternValue,
+          this.#tokens
+        );
+      }
+    }
+    if (input.readOnly || input.disabled || inheritsFieldsetDisabled(input)) {
+      this.#publish(result, raw);
+      this.#lastValue = raw;
+      return;
+    }
     input.value = result.masked;
-    this.#restoreCaret(input, result.tokenFlags, significant);
+    this.#restoreCaret(result.tokenFlags, anchor);
+    this.#publish(result, result.masked);
+    if (result.masked === this.#lastValue) return;
+    this.#lastValue = result.masked;
+    const detail = { masked: result.masked, unmasked: result.unmasked, complete: result.complete };
+    if (cause === "edit") this.dispatch("change", { detail });
+    else this.dispatch("reconcile", { detail });
+  }
+  /** Syncs the raw-value sink and the state hooks for the `shown` field text. */
+  #publish(result, shown) {
     if (this.unmaskToHiddenValue) {
-      const unmask = this.#unmaskField();
-      if (unmask) unmask.value = result.unmasked;
+      const sink = this.#resolveSink();
+      if (sink) sink.value = result.unmasked;
     }
     this.#flag("data-mask-complete", result.complete);
-    this.#flag("data-mask-empty", result.masked.length === 0);
-    if (result.masked !== previous) {
-      this.dispatch("change", {
-        detail: { masked: result.masked, unmasked: result.unmasked, complete: result.complete }
-      });
-    }
+    this.#flag("data-mask-empty", shown.length === 0);
+  }
+  /**
+   * How many token slots the text before the caret fills. Masking that prefix is
+   * what makes a rejected character — or a literal that also matches a token —
+   * count exactly as the rendering counts it, so the caret cannot drift.
+   */
+  #significantBefore(prefix) {
+    return applyMask(prefix, this.patternValue, this.#tokens).unmasked.length;
   }
   /** Places the caret after the `n`-th token char (skipping following literals). */
-  #restoreCaret(input, tokenFlags, n) {
+  #restoreCaret(tokenFlags, n) {
     let position;
     if (n <= 0) {
       let i = 0;
       while (i < tokenFlags.length && !tokenFlags[i]) i += 1;
       position = i;
     } else {
-      let seen = 0;
-      position = tokenFlags.length;
-      for (let i = 0; i < tokenFlags.length; i += 1) {
-        if (!tokenFlags[i]) continue;
-        seen += 1;
-        if (seen === n) {
-          let j = i + 1;
-          while (j < tokenFlags.length && !tokenFlags[j]) j += 1;
-          position = j;
-          break;
-        }
+      const offset = tokenCharOffset(tokenFlags, n);
+      if (offset < 0) {
+        position = tokenFlags.length;
+      } else {
+        let j = offset + 1;
+        while (j < tokenFlags.length && !tokenFlags[j]) j += 1;
+        position = j;
       }
     }
     try {
-      input.setSelectionRange(position, position);
+      this.element.setSelectionRange(position, position);
     } catch {
     }
   }
@@ -107,52 +287,47 @@ var InputMaskController = class extends Controller {
    * can coexist in one form:
    *
    * 1. **Explicit pairing** — a sink whose attribute value names this input's
-   *    `id` (`data-stimeo--input-mask-unmask="zip"`), looked up across the form
-   *    (or the document when the input is form-less).
-   * 2. **Nearest container** — otherwise, walking up from the input (stopping at
-   *    the form boundary), the first *value-less* sink in the closest ancestor.
-   *    Wrapped input+sink pairs each find their own sink, and the single
-   *    form-level sink keeps working unchanged. A sink claimed by another
-   *    input's id is never matched here.
+   *    `id` (`data-stimeo--input-mask-unmask="zip"`).
+   * 2. **Nearest container** — otherwise, walking up from the input, the first
+   *    *value-less* sink in the closest ancestor. Wrapped input+sink pairs each
+   *    find their own sink, and the single form-level sink keeps working
+   *    unchanged. A sink claimed by another input's id is never matched here.
+   *
+   * Both steps only ever consider the associated form's own controls, so a sink
+   * belonging to a different form (or to none) is never written, while one the
+   * `form` attribute associates from elsewhere in the document still resolves —
+   * for either the input or the sink, neither of which needs to contain or be
+   * contained by the form. A form-less input reads the document instead.
    */
-  #unmaskField() {
+  #resolveSink() {
+    const candidates = this.#sinkCandidates();
     const id = this.element.id;
     if (id.length > 0) {
-      const scope = this.element.form ?? document;
-      const quoted = id.replace(/["\\]/g, "\\$&");
-      const paired = scope.querySelector(`input[${UNMASK_ATTR}="${quoted}"]`);
+      const paired = candidates.find((sink) => sink.getAttribute(UNMASK_ATTR) === id);
       if (paired) return paired;
     }
+    const free = candidates.filter((sink) => sink.getAttribute(UNMASK_ATTR) === "");
     for (let node = this.element.parentElement; node !== null; node = node.parentElement) {
-      const sink = node.querySelector(`input[${UNMASK_ATTR}=""]`);
+      const ancestor = node;
+      const sink = free.find((candidate) => ancestor.contains(candidate));
       if (sink) return sink;
-      if (node === this.element.form) break;
     }
     return null;
   }
-  /** Counts characters in `text` that fill any token (the caret-significant chars). */
-  #countSignificant(text, tokens) {
-    let count = 0;
-    for (const char of text) {
-      for (const regex of tokens.values()) {
-        if (regex.test(char)) {
-          count += 1;
-          break;
-        }
-      }
-    }
-    return count;
-  }
-  /** Compiles the effective token map (defaults with the user `tokens` merged over). */
-  #tokenRegexes() {
-    const map = /* @__PURE__ */ new Map();
-    for (const [key, source] of Object.entries({ ...DEFAULT_TOKENS, ...this.tokensValue })) {
-      try {
-        map.set(key, new RegExp(`^(?:${source})$`));
-      } catch {
-      }
+  /**
+   * Every sink the input's form owns, in document order — one collection read per
+   * resolution, so the cost tracks the form's own controls and not the depth of
+   * the markup around it. `form.elements` lists controls the `form` attribute
+   * associates from anywhere in the document, and lists nothing another form owns.
+   */
+  #sinkCandidates() {
+    const form = this.element.form;
+    if (form === null) {
+      return Array.from(document.querySelectorAll(`input[${UNMASK_ATTR}]`));
     }
-    return map;
+    return Array.from(form.elements).filter(
+      (element) => element instanceof HTMLInputElement && element.hasAttribute(UNMASK_ATTR)
+    );
   }
   /** Sets a boolean `data-*` flag to `"true"` when `on`, else removes it. */
   #flag(name, on) {