stimeo-ui 0.14.0 → 0.16.0

data/dist/controllers/currency_input_controller.js

@@ -3,11 +3,19 @@ import { Controller } from '@hotwired/stimulus';
 // src/controllers/currency_input_controller.ts
 
 // src/utils/composition_tracker.ts
+var COMPOSITION_INPUT_TYPES = /* @__PURE__ */ new Set([
+  "insertCompositionText",
+  "insertFromComposition",
+  "deleteCompositionText",
+  "deleteByComposition"
+]);
 var CompositionTracker = class {
   #observedTargets = /* @__PURE__ */ new Set();
   #activeTargets = /* @__PURE__ */ new Set();
   #onStart;
   #onEnd;
+  /** The field whose confirming `input` is still owed, while the window is open. */
+  #confirmedTarget = null;
   constructor(options = {}) {
     this.#onStart = options.onStart;
     this.#onEnd = options.onEnd;
@@ -17,6 +25,7 @@ var CompositionTracker = class {
     if (this.#observedTargets.has(target)) return;
     target.addEventListener("compositionstart", this.#handleStart);
     target.addEventListener("compositionend", this.#handleEnd);
+    target.addEventListener("keydown", this.#handleKeydown);
     this.#observedTargets.add(target);
   }
   /** Stops tracking one target and clears any active composition it owned. */
@@ -24,29 +33,52 @@ var CompositionTracker = class {
     if (!this.#observedTargets.delete(target)) return;
     target.removeEventListener("compositionstart", this.#handleStart);
     target.removeEventListener("compositionend", this.#handleEnd);
+    target.removeEventListener("keydown", this.#handleKeydown);
     this.#activeTargets.delete(target);
+    if (this.#confirmedTarget === target) this.#confirmedTarget = null;
   }
   /** 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);
+      target.removeEventListener("keydown", this.#handleKeydown);
     }
     this.#observedTargets.clear();
     this.#activeTargets.clear();
+    this.#confirmedTarget = null;
   }
   /** True when lifecycle tracking or the current event reports composition. */
   isComposing(event) {
     return this.#activeTargets.size > 0 || event?.isComposing === true;
   }
+  /**
+   * Whether `event` is the `input` echoing the composition just confirmed.
+   *
+   * Asking closes the window either way, so one confirmation is folded at most
+   * once and a consumer asks once per `input`.
+   */
+  consumesConfirmedInput(event) {
+    const confirmed = this.#confirmedTarget;
+    this.#confirmedTarget = null;
+    if (confirmed === null || confirmed !== event.target) return false;
+    const inputType = event.inputType;
+    return !inputType || COMPOSITION_INPUT_TYPES.has(inputType);
+  }
   #handleStart = (event) => {
+    this.#confirmedTarget = null;
     if (event.currentTarget) this.#activeTargets.add(event.currentTarget);
     this.#onStart?.(event);
   };
   #handleEnd = (event) => {
     if (event.currentTarget) this.#activeTargets.delete(event.currentTarget);
+    this.#confirmedTarget = event.target;
     this.#onEnd?.(event);
   };
+  /** A key on an observed field opens an edit of its own, so no echo is owed. */
+  #handleKeydown = () => {
+    this.#confirmedTarget = null;
+  };
 };
 
 // src/utils/half_width.ts
@@ -88,24 +120,39 @@ function construct(factory, locale, options, fallbackLocale) {
   }
 }
 
+// src/utils/locale.ts
+function resolveLocale(element, declared = "") {
+  return declared || element.closest("[lang]")?.getAttribute("lang") || void 0;
+}
+
 // src/controllers/currency_input_controller.ts
+var FALLBACK_LOCALE = "en-US";
 var CurrencyInputController = class extends Controller {
   static targets = ["display", "field", "srValue"];
   static values = {
-    locale: { type: String, default: "en-US" },
+    locale: { type: String, default: "" },
     currency: { type: String, default: "" },
     precision: { type: Number, default: 2 }
   };
   static actions = ["format", "onInput"];
-  static events = ["change"];
-  /** Last committed numeric value, to suppress duplicate `change` dispatches. */
+  static events = ["change", "reconcile"];
+  /** The numeric value last committed; both events report only a move away from it. */
   #lastValue = null;
   #started = false;
+  /** A declaration change that arrived mid-composition, applied once nothing composes. */
+  #changeHeld = false;
+  /** The display a composition is running on, until that composition ends. */
+  #composing = null;
+  /**
+   * The display text this controller last rendered. It tells this controller's own
+   * text, written with the separators in force, from text the page wrote.
+   */
+  #rendered = null;
   /** Validated mirrors of the Values; the hot path never reads a raw Value. */
-  #locale = "en-US";
+  #locale;
   #currency = "";
   #precision = 2;
-  /** Formatters rebuilt only when a Value changes, never per keystroke. */
+  /** Formatters rebuilt when the declarations are taken in, never per keystroke. */
   #grouping;
   #fixed;
   #accessible;
@@ -113,11 +160,25 @@ var CurrencyInputController = class extends Controller {
   #decimal = ".";
   /** The locale's non-Latin digits mapped back to ASCII (empty for Latin locales). */
   #digits = /* @__PURE__ */ new Map();
-  /** Holds mid-composition input so the IME's uncommitted text is never rewritten. */
+  /**
+   * Holds mid-composition input so the IME's uncommitted text is never rewritten.
+   * The confirmed text is formatted once, and a declaration change the composition
+   * held back is applied after it.
+   */
   #composition = new CompositionTracker({
-    onEnd: () => this.#reformat(false)
+    onStart: (event) => {
+      this.#composing = event.currentTarget;
+    },
+    onEnd: () => {
+      this.#composing = null;
+      this.#reformat(false, "edit");
+      this.#applyHeldChange();
+    }
   });
-  /** Re-validates on declaration changes and re-renders the committed display. */
+  /**
+   * Re-validates on declaration changes and re-renders the committed display,
+   * reporting a value the re-render moved as `reconcile`.
+   */
   localeValueChanged() {
     this.#applyValueChange();
   }
@@ -128,52 +189,123 @@ var CurrencyInputController = class extends Controller {
     this.#applyValueChange();
   }
   /**
-   * Scans the display under the *outgoing* configuration (its separators wrote
-   * that text), then revalidates and re-renders under the new one — so a locale
-   * switch re-interprets the value, never the old text with new separators.
+   * Reads the display with the declarations its text was written for, then
+   * re-renders it under the new ones — so a locale switch re-interprets the
+   * value, never the old text with new separators, and text the page wrote for
+   * the declarations it changes is never read with the old ones.
+   *
+   * While the display is composing, its text is the IME's: the change is held,
+   * configuration and all, until the composition ends, so the confirmed text is
+   * read with the separators it was typed against before the change applies.
+   *
+   * @stimeoRenderRoot
    */
   #applyValueChange() {
-    const scan = this.#started && this.hasDisplayTarget ? this.#scan(this.displayTarget.value) : null;
-    this.#revalidate();
-    if (!scan || !this.hasDisplayTarget) return;
+    if (this.#composition.isComposing()) {
+      this.#changeHeld = true;
+      return;
+    }
+    if (!this.#started || !this.hasDisplayTarget) return;
+    const scan = this.#readDisplay();
     if (document.activeElement === this.displayTarget) {
       const formatted = this.#render(scan.parts);
-      this.displayTarget.value = formatted;
-      this.#reflect(scan.value, formatted);
-    } else if (scan.value === null) {
-      this.displayTarget.value = "";
-      this.#reflect(null, "");
+      this.#show(formatted);
+      this.#reflect(scan.value, formatted, "reconcile");
     } else {
-      const rounded = round(scan.value, this.#precision);
-      const formatted = this.#fixed.format(rounded);
-      this.displayTarget.value = formatted;
-      this.#reflect(rounded, formatted);
+      this.#renderFixed(scan.value, "reconcile");
     }
   }
-  /** Normalizes any pre-filled display value to its fixed-precision form. */
+  /** Applies a declaration change a composition held back. */
+  #applyHeldChange() {
+    if (!this.#changeHeld) return;
+    this.#changeHeld = false;
+    this.#applyValueChange();
+  }
+  /**
+   * Reads the display and takes in the declarations the page carries now. This
+   * controller's own rendering was written with the separators in force, so it
+   * is read before they change; any other text is the page's, written for the
+   * declarations it carries, so it is read after.
+   */
+  #readDisplay() {
+    const text = this.displayTarget.value;
+    const own = text === this.#rendered ? this.#scan(text) : null;
+    this.#takeInDeclarations();
+    return own ?? this.#scan(text);
+  }
+  /** Takes in the declarations the page carries now, a change a composition held among them. */
+  #takeInDeclarations() {
+    this.#changeHeld = false;
+    this.#revalidate();
+  }
+  /**
+   * Takes in the declarations the page carries now and normalizes the display
+   * to its fixed-precision form.
+   *
+   * A display still showing this controller's own last rendering is not read
+   * back: its separators may belong to declarations that changed while the
+   * controller was away, and the committed value is known anyway. That value is
+   * re-rendered at the current fixed precision, which rounds it whether
+   * `precision` changed meanwhile or the entry was left unrounded mid-typing, and
+   * a move the rounding causes is reported as `reconcile`. Any other text is the
+   * page's, written for the declarations it carries, so it is read with them.
+   */
   connect() {
     this.#started = true;
+    this.#takeInDeclarations();
     if (!this.hasDisplayTarget) return;
+    if (this.displayTarget.value === this.#rendered) {
+      this.#renderFixed(this.#lastValue, "reconcile");
+      return;
+    }
     const { value } = this.#scan(this.displayTarget.value);
     this.#lastValue = value === null ? null : round(value, this.#precision);
-    if (value === null) {
-      this.displayTarget.value = "";
-      this.#reflect(null, "");
-    } else {
-      this.#reformat(true);
-    }
+    this.#renderFixed(value, "reconcile");
   }
+  /**
+   * Releases the composition listeners. A composition still running hears no
+   * `compositionend` once they are gone, so it ends here; a change it held is
+   * taken in on the next `connect()`.
+   */
   disconnect() {
-    this.#started = false;
+    this.#endUntrackedComposition();
     this.#composition.disconnect();
+    this.#started = false;
   }
-  /** Tracks composition on an arriving (or swapped-in) display and normalizes it. */
+  /**
+   * Tracks composition on an arriving (or swapped-in) display and normalizes it
+   * under the declarations the page carries now, reading this controller's own
+   * rendering with the separators it was written under; an amount that differs
+   * from the committed one is the page's, so it is reported as `reconcile`.
+   */
   displayTargetConnected(target) {
     this.#composition.observe(target);
-    if (this.#started) this.#reformat(true);
+    if (!this.#started) return;
+    this.#renderFixed(this.#readDisplay().value, "reconcile");
   }
+  /**
+   * Stops tracking a display that leaves. A composition running on it hears no
+   * `compositionend` any more, so it ends here; a change it held waits for the
+   * next display to be read.
+   */
   displayTargetDisconnected(target) {
     this.#composition.unobserve(target);
+    this.#endUntrackedComposition();
+  }
+  /**
+   * Ends a composition no `compositionend` will reach. A display still in place —
+   * one a move re-inserted, or the display of a controller that moves — holds the
+   * text the composition left, typed against the declarations in force, so it is
+   * read as `compositionend` would read it and becomes this controller's own
+   * rendering. The page's move ended the composition, so a value it moves is
+   * reported as `reconcile`. A display that left takes its composition along.
+   */
+  #endUntrackedComposition() {
+    const display = this.#composing;
+    this.#composing = null;
+    if (this.hasDisplayTarget && this.displayTarget === display) {
+      this.#reformat(false, "reconcile");
+    }
   }
   /** Syncs a late-arriving hidden field without touching the display or events. */
   fieldTargetConnected() {
@@ -186,33 +318,23 @@ var CurrencyInputController = class extends Controller {
   /** Re-groups digits as the user types, preserving the caret position. */
   onInput(event) {
     if (this.#composition.isComposing(event)) return;
-    this.#reformat(false);
+    this.#reformat(false, "edit");
   }
   /** Applies the fixed-precision rounding on blur. */
   format() {
-    this.#reformat(true);
+    this.#reformat(true, "edit");
   }
   /**
    * Parses the display value, rewrites it grouped (optionally at fixed
    * precision), keeps the caret stable by significant characters, and syncs the
-   * field, the screen-reader span, and the `change` event.
-   *
-   * @stimeoRenderRoot
+   * field, the screen-reader span, and the event `cause` selects.
    */
-  #reformat(fixedPrecision) {
+  #reformat(fixedPrecision, cause) {
     if (!this.hasDisplayTarget) return;
     const raw = this.displayTarget.value;
     const { parts, value } = this.#scan(raw);
     if (fixedPrecision) {
-      if (value === null) {
-        this.displayTarget.value = "";
-        this.#reflect(null, "");
-        return;
-      }
-      const rounded = round(value, this.#precision);
-      const formatted2 = this.#fixed.format(rounded);
-      this.displayTarget.value = formatted2;
-      this.#reflect(rounded, formatted2);
+      this.#renderFixed(value, cause);
       return;
     }
     const formatted = this.#render(parts);
@@ -222,12 +344,31 @@ var CurrencyInputController = class extends Controller {
       this.displayTarget.value = formatted;
       if (anchor !== null) this.#restoreCaret(formatted, anchor);
     }
-    this.#reflect(value, value === null ? "" : formatted);
+    this.#rendered = formatted;
+    this.#reflect(value, formatted, cause);
+  }
+  /**
+   * Shows `value` at the fixed precision — an empty display for no value — and
+   * reports a move under the event `cause` selects.
+   */
+  #renderFixed(value, cause) {
+    if (value === null) {
+      this.#show("");
+      this.#reflect(null, "", cause);
+      return;
+    }
+    const rounded = round(value, this.#precision);
+    const formatted = this.#fixed.format(rounded);
+    this.#show(formatted);
+    this.#reflect(rounded, formatted, cause);
+  }
+  /** Writes `text` to the display as this controller's own rendering. */
+  #show(text) {
+    this.displayTarget.value = text;
+    this.#rendered = text;
   }
   /**
    * The in-progress rendering: grouped integer, sign and fraction as typed.
-   *
-   * @stimeoRenderRoot
    */
   #render(parts) {
     const int = parts.int === "" ? "" : this.#grouping.format(BigInt(parts.int));
@@ -287,15 +428,22 @@ var CurrencyInputController = class extends Controller {
     if (this.hasSrValueTarget) {
       this.srValueTarget.textContent = isEmpty ? "" : this.#accessible.format(value);
     }
-    this.element.toggleAttribute("data-stimeo--currency-input-empty", isEmpty);
+    this.element.toggleAttribute(`data-${this.identifier}-empty`, isEmpty);
   }
-  /** {@link #write}, then reports a moved value as `change` (`""` rides with `null`). */
-  #reflect(value, formatted) {
+  /**
+   * {@link #write}, then reports a moved value under the event `cause` selects:
+   * `change` for the user's edit, `reconcile` for a move the page caused. The
+   * display may hold an in-progress `-`, but a `null` value always rides with an
+   * empty `formatted`, whichever event reports it, so consumers can treat the
+   * pair as cleared.
+   */
+  #reflect(value, formatted, cause) {
     this.#write(value);
-    if (value !== this.#lastValue) {
-      this.#lastValue = value;
-      this.dispatch("change", { detail: { value, formatted } });
-    }
+    if (value === this.#lastValue) return;
+    this.#lastValue = value;
+    const detail = { value, formatted: value === null ? "" : formatted };
+    if (cause === "edit") this.dispatch("change", { detail });
+    else this.dispatch("reconcile", { detail });
   }
   /**
    * Scans arbitrary input text into its number-shaped parts and value. Keeps
@@ -327,10 +475,15 @@ var CurrencyInputController = class extends Controller {
   #isDecimalMark(ch) {
     return ch === this.#decimal || ch === "." && this.#group !== ".";
   }
-  /** Re-syncs field / srValue / hook from the current display without dispatching. */
+  /**
+   * Re-syncs field / srValue / hook without dispatching: from the display, or —
+   * while it is composing, when its text is not committed yet — from the value
+   * last committed.
+   */
   #resync() {
     if (!this.hasDisplayTarget) return;
-    this.#write(this.#scan(this.displayTarget.value).value);
+    const value = this.#composition.isComposing() ? this.#lastValue : this.#scan(this.displayTarget.value).value;
+    this.#write(value);
   }
   /**
    * Validates the declared Values, falling back to each Value's default when a
@@ -339,8 +492,9 @@ var CurrencyInputController = class extends Controller {
    * formatters from the validated set.
    */
   #revalidate() {
-    const declaredLocale = intlFormatter(Intl.NumberFormat, this.localeValue, {});
-    this.#locale = declaredLocale === null ? "en-US" : this.localeValue;
+    const resolved = resolveLocale(this.element, this.localeValue);
+    const usable = intlFormatter(Intl.NumberFormat, resolved, {});
+    this.#locale = usable === null ? FALLBACK_LOCALE : resolved;
     const precision = this.precisionValue;
     this.#precision = Number.isInteger(precision) && precision >= 0 && precision <= 100 ? precision : 2;
     this.#currency = "";
@@ -355,7 +509,7 @@ var CurrencyInputController = class extends Controller {
       Intl.NumberFormat,
       this.#locale,
       { useGrouping: true, maximumFractionDigits: 0 },
-      this.#locale
+      FALLBACK_LOCALE
     );
     this.#fixed = intlFormatter(
       Intl.NumberFormat,
@@ -365,15 +519,15 @@ var CurrencyInputController = class extends Controller {
         minimumFractionDigits: this.#precision,
         maximumFractionDigits: this.#precision
       },
-      this.#locale
+      FALLBACK_LOCALE
     );
     this.#accessible = this.#currency ? intlFormatter(
       Intl.NumberFormat,
       this.#locale,
       { style: "currency", currency: this.#currency },
-      this.#locale
+      FALLBACK_LOCALE
     ) : this.#fixed;
-    const parts = intlFormatter(Intl.NumberFormat, this.#locale, {}, this.#locale).formatToParts(
+    const parts = intlFormatter(Intl.NumberFormat, this.#locale, {}, FALLBACK_LOCALE).formatToParts(
       11111.1
     );
     this.#group = parts.find((p) => p.type === "group")?.value ?? ",";
@@ -383,7 +537,7 @@ var CurrencyInputController = class extends Controller {
       Intl.NumberFormat,
       this.#locale,
       { useGrouping: false },
-      this.#locale
+      FALLBACK_LOCALE
     );
     for (let i = 0; i <= 9; i++) {
       const digit = digitFormatter.format(i);