stimeo-ui 0.2.0 → 0.3.0

data/dist/controllers/context_menu_controller.js

@@ -2,6 +2,12 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/context_menu_controller.ts
 
+// src/utils/arrow_step.ts
+function isReservedArrowChord(event, allow = []) {
+  if (!event.key.startsWith("Arrow")) return false;
+  return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
+}
+
 // src/utils/escape_layer.ts
 function claimsWhileFocusWithin(element) {
   return () => {
@@ -156,16 +162,16 @@ var ContextMenuController = class extends Controller {
   connect() {
     this.#closeMenu();
     this.element.addEventListener("click", this.#onItemClickCapture, true);
-    document.addEventListener("click", this.#onOutsidePointer);
-    document.addEventListener("contextmenu", this.#onOutsidePointer);
+    document.addEventListener("click", this.#onOutsidePointer, true);
+    document.addEventListener("contextmenu", this.#onOutsidePointer, true);
   }
   /** Releases the listeners, stack membership, and pending Tab-close task. */
   disconnect() {
     this.#timers.clearAll();
     this.#escapeLayer.deactivate();
     this.element.removeEventListener("click", this.#onItemClickCapture, true);
-    document.removeEventListener("click", this.#onOutsidePointer);
-    document.removeEventListener("contextmenu", this.#onOutsidePointer);
+    document.removeEventListener("click", this.#onOutsidePointer, true);
+    document.removeEventListener("contextmenu", this.#onOutsidePointer, true);
   }
   /**
    * Opens the menu from a `contextmenu` event: suppresses the native menu and
@@ -177,6 +183,7 @@ var ContextMenuController = class extends Controller {
   }
   /** Keyboard entry on the region: `Shift+F10` / `ContextMenu` open at center. */
   onRegionKeydown(event) {
+    if (event.defaultPrevented) return;
     const isContextKey = event.key === "ContextMenu" || event.key === "F10" && event.shiftKey;
     if (!isContextKey) return;
     event.preventDefault();
@@ -185,6 +192,8 @@ var ContextMenuController = class extends Controller {
   }
   /** Roving focus and closing keys inside the menu. */
   onItemKeydown(event) {
+    if (event.defaultPrevented) return;
+    if (isReservedArrowChord(event)) return;
     const items = this.#navigableItems;
     const currentIndex = items.indexOf(event.currentTarget);
     switch (event.key) {
@@ -247,7 +256,13 @@ var ContextMenuController = class extends Controller {
     this.#closeMenu();
     if (this.hasRegionTarget) this.regionTarget.focus();
   }
-  /** Closes when a click or context-menu invocation lands outside this instance. */
+  /**
+   * Closes when a click or context-menu invocation lands outside this instance.
+   * Both subscriptions observe in the capture phase, so the target is judged
+   * against the tree the user actually pressed even when a consumer handler
+   * detaches it, and application code that stops bubbling cannot leave the menu
+   * open.
+   */
   #onOutsidePointer = (event) => {
     if (this.#isOpen && !this.element.contains(event.target)) this.#closeMenu();
   };
@@ -265,18 +280,25 @@ var ContextMenuController = class extends Controller {
     event.preventDefault();
     event.stopImmediatePropagation();
   };
-  /** Menu items eligible for roving focus (excludes disabled / hidden). */
+  /** Menu items eligible for roving focus (excludes hidden / natively disabled). */
   get #navigableItems() {
     return this.itemTargets.filter((item) => this.#isNavigable(item));
   }
   /**
-   * An item can take roving focus unless it is `hidden`, `aria-disabled="true"`,
-   * or a natively `disabled` form control. CSS-only visibility is not detectable
-   * here and is the consumer's responsibility.
+   * An item can take roving focus unless it is `hidden` or a natively `disabled`
+   * form control. CSS-only visibility is not detectable here and is the
+   * consumer's responsibility.
+   *
+   * **`aria-disabled="true"` stays reachable.** APG separates the two attributes
+   * by intent: `disabled` is for controls whose existence can be inferred from a
+   * neighbour (a greyed Next next to a Prev), while `aria-disabled` marks a
+   * control that must stay *discoverable* — and it names menu items as the
+   * example. Skipping it would hide the command's existence from a keyboard user
+   * entirely. Activation is suppressed separately, so the item announces itself
+   * and does nothing.
    */
   #isNavigable(item) {
     if (item.hasAttribute("hidden")) return false;
-    if (item.getAttribute("aria-disabled") === "true") return false;
     return !item.disabled;
   }
   /** Whether the menu is currently visible. */

data/dist/controllers/count_up_controller.js

@@ -1,5 +1,12 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/count_up_controller.ts
+
+// src/utils/reduced_motion.ts
+function prefersReducedMotion() {
+  return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
 // src/controllers/count_up_controller.ts
 var CountUpController = class extends Controller {
   static values = {
@@ -32,7 +39,7 @@ var CountUpController = class extends Controller {
     this.#finalText = this.element.textContent ?? "";
     const target = Number.parseInt(this.#finalText.replace(/[^0-9-]/g, ""), 10);
     if (Number.isNaN(target)) return;
-    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+    if (prefersReducedMotion()) {
       this.element.setAttribute("data-count-up-done", "true");
       this.dispatch("end", { detail: { value: target } });
       return;

data/dist/controllers/currency_input_controller.js

@@ -0,0 +1,147 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/currency_input_controller.ts
+var CurrencyInputController = class extends Controller {
+  static targets = ["display", "field", "srValue"];
+  static values = {
+    locale: { type: String, default: "en-US" },
+    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. */
+  #lastValue = null;
+  /** Normalizes any pre-filled display value to its fixed-precision form. */
+  connect() {
+    if (!this.hasDisplayTarget) return;
+    const parsed = this.#parse(this.displayTarget.value);
+    this.#lastValue = parsed === null ? null : round(parsed, this.precisionValue);
+    if (this.displayTarget.value.trim() !== "") {
+      this.#reformat(true);
+    } else {
+      this.#reflect(null, "");
+    }
+  }
+  /** Re-groups digits as the user types, preserving the caret position. */
+  onInput() {
+    this.#reformat(false);
+  }
+  /** Applies the fixed-precision rounding on blur. */
+  format() {
+    this.#reformat(true);
+  }
+  /**
+   * Parses the display value, rewrites it grouped (optionally at fixed
+   * precision), keeps the caret stable by digit count, and syncs the field,
+   * the screen-reader span, and the `change` event.
+   */
+  #reformat(fixedPrecision) {
+    if (!this.hasDisplayTarget) return;
+    const raw = this.displayTarget.value;
+    const number = this.#parse(raw);
+    if (number === null) {
+      this.displayTarget.value = "";
+      this.#reflect(null, "");
+      return;
+    }
+    const value = fixedPrecision ? round(number, this.precisionValue) : number;
+    const caret = this.displayTarget.selectionStart;
+    const digitsBeforeCaret = typeof caret === "number" ? countDigits(raw.slice(0, caret)) : null;
+    const formatted = this.#formatNumber(value, fixedPrecision);
+    this.displayTarget.value = formatted;
+    if (digitsBeforeCaret !== null) this.#restoreCaret(formatted, digitsBeforeCaret);
+    this.#reflect(value, formatted);
+  }
+  /** Restores the caret to sit just after the n-th digit of the new string. */
+  #restoreCaret(formatted, digitsBefore) {
+    let seen = 0;
+    let position = formatted.length;
+    for (let i = 0; i < formatted.length; i++) {
+      if (seen >= digitsBefore) {
+        position = i;
+        break;
+      }
+      if (/\d/.test(formatted[i])) seen += 1;
+    }
+    try {
+      this.displayTarget.setSelectionRange(position, position);
+    } catch {
+    }
+  }
+  /** Writes the normalized value to the field, the SR span, and `change`. */
+  #reflect(value, formatted) {
+    const isEmpty = value === null;
+    if (this.hasFieldTarget) this.fieldTarget.value = isEmpty ? "" : String(value);
+    if (this.hasSrValueTarget) {
+      this.srValueTarget.textContent = isEmpty ? "" : this.#accessibleText(value);
+    }
+    this.element.toggleAttribute("data-stimeo--currency-input-empty", isEmpty);
+    if (value !== this.#lastValue) {
+      this.#lastValue = value;
+      if (!isEmpty) this.dispatch("change", { detail: { value, formatted } });
+    }
+  }
+  /** Parses arbitrary input text into a finite number, or `null` when blank. */
+  #parse(text) {
+    if (text.trim() === "") return null;
+    const { decimal } = this.#separators();
+    let cleaned = "";
+    let sawDot = false;
+    for (let i = 0; i < text.length; i++) {
+      const ch = text[i];
+      if (ch >= "0" && ch <= "9") cleaned += ch;
+      else if ((ch === "-" || ch === "+") && cleaned === "") cleaned += ch;
+      else if ((ch === decimal || ch === ".") && !sawDot) {
+        cleaned += ".";
+        sawDot = true;
+      }
+    }
+    if (cleaned === "" || cleaned === "-" || cleaned === "+" || cleaned === ".") return null;
+    const value = Number(cleaned);
+    return Number.isFinite(value) ? value : null;
+  }
+  /** Formats a number with grouping for the display field. */
+  #formatNumber(value, fixedPrecision) {
+    const formatter = new Intl.NumberFormat(this.localeValue, {
+      useGrouping: true,
+      minimumFractionDigits: fixedPrecision ? this.precisionValue : 0,
+      maximumFractionDigits: this.precisionValue
+    });
+    return formatter.format(value);
+  }
+  /** The text announced to assistive tech (currency-aware when configured). */
+  #accessibleText(value) {
+    if (this.currencyValue) {
+      return new Intl.NumberFormat(this.localeValue, {
+        style: "currency",
+        currency: this.currencyValue
+      }).format(value);
+    }
+    return new Intl.NumberFormat(this.localeValue, {
+      minimumFractionDigits: this.precisionValue,
+      maximumFractionDigits: this.precisionValue
+    }).format(value);
+  }
+  /** Resolves the locale's grouping and decimal separator characters. */
+  #separators() {
+    const parts = new Intl.NumberFormat(this.localeValue).formatToParts(11111.1);
+    const group = parts.find((p) => p.type === "group")?.value ?? ",";
+    const decimal = parts.find((p) => p.type === "decimal")?.value ?? ".";
+    return { group, decimal };
+  }
+};
+function countDigits(text) {
+  let count = 0;
+  for (const ch of text) if (ch >= "0" && ch <= "9") count += 1;
+  return count;
+}
+function round(value, precision) {
+  const factor = 10 ** Math.max(0, precision);
+  const rounded = Math.round(value * factor) / factor;
+  return rounded === 0 ? 0 : rounded;
+}
+
+export { CurrencyInputController };
+//# sourceMappingURL=currency_input_controller.js.map
+//# sourceMappingURL=currency_input_controller.js.map

data/dist/controllers/data_grid_controller.js

@@ -0,0 +1,246 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/data_grid_controller.ts
+
+// src/utils/logical_scroll.ts
+function isRtl(element) {
+  return window.getComputedStyle(element).direction === "rtl";
+}
+
+// src/utils/arrow_step.ts
+function logicalArrowKey(key, element) {
+  if (key !== "ArrowRight" && key !== "ArrowLeft") return key;
+  if (!isRtl(element)) return key;
+  return key === "ArrowRight" ? "ArrowLeft" : "ArrowRight";
+}
+function isReservedArrowChord(event, allow = []) {
+  if (!event.key.startsWith("Arrow")) return false;
+  return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
+}
+
+// src/controllers/data_grid_controller.ts
+var SORT_CYCLE = ["none", "ascending", "descending"];
+function nextSortDirection(current) {
+  const index = SORT_CYCLE.indexOf(current);
+  const from = index < 0 ? 0 : index;
+  return SORT_CYCLE[(from + 1) % SORT_CYCLE.length] ?? "ascending";
+}
+var DataGridController = class extends Controller {
+  static targets = ["columnHeader", "row", "cell"];
+  static values = {
+    selection: { type: String, default: "none" }
+  };
+  static actions = ["onKeydown", "sort", "toggleSelect"];
+  static events = ["selectionchange", "sort"];
+  /** Gates the row callback so it does not re-walk every row once per authored row on mount. */
+  #connected = false;
+  /**
+   * Establishes a single tab stop across all navigable cells/headers and brings
+   * the rows to their baseline.
+   *
+   * Normalizing here rather than leaving it to {@link selectionValueChanged}
+   * guarantees exactly one pass per mount: a re-attached element reuses its
+   * cached Stimulus context, whose value observer already knows the `selection`
+   * attribute, so the Value callback does not fire a second time.
+   */
+  connect() {
+    const cells = this.#navigableCells();
+    const active = cells.find((cell) => cell.tabIndex === 0) ?? cells[0];
+    this.#setActiveCell(active, { focus: false });
+    this.#normalizeSelection();
+    this.#connected = true;
+  }
+  /** Reopens the row callback for the next mount. */
+  disconnect() {
+    this.#connected = false;
+  }
+  /**
+   * Keeps `aria-multiselectable` in step with the `selection` Value. Fires on connect
+   * (so it self-heals after a Turbo morph) and on any runtime change, so the ARIA
+   * never drifts from the selection logic, which reads `selectionValue` live.
+   */
+  selectionValueChanged() {
+    this.#syncSelectable();
+    this.#normalizeSelection();
+  }
+  /**
+   * Re-establishes the row baseline for a row added after connect.
+   *
+   * Each pass walks every row, and Stimulus reports the authored rows one by one
+   * before `connect()`, so the mount is gated to keep it linear in the row count
+   * rather than quadratic; `connect()` runs the single baseline pass instead.
+   */
+  rowTargetConnected() {
+    if (!this.#connected) return;
+    this.#normalizeSelection();
+  }
+  /**
+   * Brings the authored rows to the shape the APG requires, without changing
+   * which rows the author chose.
+   *
+   * Every selectable row gets an explicit value — an absent `aria-selected` means
+   * "not selectable" in ARIA, so a forgotten attribute hides a selectable row —
+   * and a single-select grid keeps at most one `true`, first in DOM order.
+   * A grid that declares `selection="none"` has no selectable rows, so the
+   * attribute is removed rather than written: in ARIA its absence is what "not
+   * selectable" looks like.
+   */
+  #normalizeSelection() {
+    const rows = this.rowTargets;
+    if (this.selectionValue === "none") {
+      for (const row of rows) row.removeAttribute("aria-selected");
+      return;
+    }
+    const single = this.selectionValue === "single";
+    const first = rows.find((row) => row.getAttribute("aria-selected") === "true");
+    for (const row of rows) {
+      if (single) {
+        row.setAttribute("aria-selected", row === first ? "true" : "false");
+      } else if (row.getAttribute("aria-selected") !== "true") {
+        row.setAttribute("aria-selected", "false");
+      }
+    }
+  }
+  /**
+   * Mirrors `selection="multiple"` onto `aria-multiselectable` (APG Grid) so SRs
+   * announce that more than one row can be selected; cleared for single/none so a
+   * grid never carries a misleading attribute.
+   */
+  #syncSelectable() {
+    if (this.selectionValue === "multiple") {
+      this.element.setAttribute("aria-multiselectable", "true");
+    } else {
+      this.element.removeAttribute("aria-multiselectable");
+    }
+  }
+  /** Cycles the activated column header's sort and emits `sort`. */
+  sort(event) {
+    const header = event.currentTarget;
+    if (!this.columnHeaderTargets.includes(header)) return;
+    const direction = nextSortDirection(header.getAttribute("aria-sort") ?? "none");
+    for (const other of this.columnHeaderTargets) {
+      other.setAttribute("aria-sort", other === header ? direction : "none");
+    }
+    this.#setActiveCell(header, { focus: false });
+    this.dispatch("sort", { detail: { column: header, direction } });
+  }
+  /** Toggles selection of the row owning the event target. Bound optionally. */
+  toggleSelect(event) {
+    if (this.selectionValue === "none") return;
+    const row = event.currentTarget.closest("[role='row']");
+    if (row && this.rowTargets.includes(row)) this.#toggleRow(row);
+  }
+  /** Grid navigation + sort/select activation. Bound to cells and headers. */
+  onKeydown(event) {
+    if (event.defaultPrevented) return;
+    if (isReservedArrowChord(event)) return;
+    const cell = event.currentTarget;
+    const matrix = this.#matrix();
+    const position = this.#locate(matrix, cell);
+    if (!position) return;
+    const [row, col] = position;
+    const rowCells = matrix[row] ?? [];
+    let target;
+    switch (logicalArrowKey(event.key, this.element)) {
+      case "ArrowRight":
+        target = this.#cellInRow(matrix, row, col + 1);
+        break;
+      case "ArrowLeft":
+        target = this.#cellInRow(matrix, row, Math.max(col - 1, 0));
+        break;
+      case "ArrowDown":
+        target = this.#cellInRow(matrix, Math.min(row + 1, matrix.length - 1), col);
+        break;
+      case "ArrowUp":
+        target = this.#cellInRow(matrix, Math.max(row - 1, 0), col);
+        break;
+      case "Home":
+        target = event.ctrlKey ? this.#cellInRow(matrix, 0, 0) : rowCells[0];
+        break;
+      case "End":
+        target = event.ctrlKey ? this.#cellInRow(matrix, matrix.length - 1, Number.POSITIVE_INFINITY) : rowCells[rowCells.length - 1];
+        break;
+      case "Enter":
+      case " ":
+        this.#activate(cell);
+        event.preventDefault();
+        return;
+      default:
+        return;
+    }
+    if (target) {
+      event.preventDefault();
+      this.#setActiveCell(target, { focus: true });
+    }
+  }
+  /** Performs a header's sort or a cell row's selection toggle on activation. */
+  #activate(cell) {
+    if (this.columnHeaderTargets.includes(cell)) {
+      this.#cycleSort(cell);
+      return;
+    }
+    if (this.selectionValue === "none") return;
+    const row = cell.closest("[role='row']");
+    if (row && this.rowTargets.includes(row)) this.#toggleRow(row);
+  }
+  /** Shared sort logic for both click and keyboard activation. */
+  #cycleSort(header) {
+    const direction = nextSortDirection(header.getAttribute("aria-sort") ?? "none");
+    for (const other of this.columnHeaderTargets) {
+      other.setAttribute("aria-sort", other === header ? direction : "none");
+    }
+    this.dispatch("sort", { detail: { column: header, direction } });
+  }
+  /** Toggles a row's `aria-selected`, honoring single vs. multiple selection. */
+  #toggleRow(row) {
+    const selected = row.getAttribute("aria-selected") === "true";
+    if (this.selectionValue === "single") {
+      for (const other of this.rowTargets) {
+        if (other !== row) other.setAttribute("aria-selected", "false");
+      }
+    }
+    row.setAttribute("aria-selected", selected ? "false" : "true");
+    const rows = this.rowTargets.filter((r) => r.getAttribute("aria-selected") === "true");
+    this.dispatch("selectionchange", { detail: { rows } });
+  }
+  /** Makes `cell` the single tabbable cell (roving) and optionally focuses it. */
+  #setActiveCell(cell, { focus }) {
+    if (!cell) return;
+    for (const candidate of this.#navigableCells()) {
+      candidate.tabIndex = candidate === cell ? 0 : -1;
+    }
+    if (focus) cell.focus();
+  }
+  /** All navigable elements (headers + cells) in DOM order. */
+  #navigableCells() {
+    return this.#matrix().flat();
+  }
+  /** The grid as rows of navigable cells, derived from each `role="row"`. */
+  #matrix() {
+    const navigable = /* @__PURE__ */ new Set([...this.columnHeaderTargets, ...this.cellTargets]);
+    const rows = Array.from(this.element.querySelectorAll("[role='row']"));
+    return rows.map(
+      (row) => Array.from(row.children).filter(
+        (child) => navigable.has(child)
+      )
+    ).filter((cells) => cells.length > 0);
+  }
+  /** Finds `[rowIndex, colIndex]` of `cell` within `matrix`, or null. */
+  #locate(matrix, cell) {
+    for (let row = 0; row < matrix.length; row++) {
+      const col = (matrix[row] ?? []).indexOf(cell);
+      if (col !== -1) return [row, col];
+    }
+    return null;
+  }
+  /** The cell at `[row, col]`, clamping `col` to that row's last cell. */
+  #cellInRow(matrix, row, col) {
+    const cells = matrix[row];
+    if (!cells || cells.length === 0) return void 0;
+    return cells[Math.min(col, cells.length - 1)];
+  }
+};
+
+export { DataGridController };
+//# sourceMappingURL=data_grid_controller.js.map
+//# sourceMappingURL=data_grid_controller.js.map