stimeo-ui 0.2.0 → 0.3.0

data/dist/controllers/date_range_picker_controller.js

@@ -0,0 +1,441 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/date_range_picker_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/utils/dates.ts
+function toISODateString(date) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+function parseISODateString(dateStr) {
+  if (!dateStr) return null;
+  const match = dateStr.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+  if (!match) return null;
+  const [, y, m, d] = match;
+  const year = Number(y);
+  const month = Number(m);
+  const day = Number(d);
+  const date = new Date(year, month - 1, day);
+  if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {
+    return null;
+  }
+  return date;
+}
+function parseISOMonthString(monthStr) {
+  if (!monthStr) return null;
+  const match = monthStr.match(/^(\d{4})-(\d{2})$/);
+  if (!match) return null;
+  const [, y, m] = match;
+  const month = Number(m);
+  if (month < 1 || month > 12) return null;
+  return { year: Number(y), month };
+}
+function toISOMonthString(date) {
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`;
+}
+
+// src/utils/safe_timeout.ts
+var TimerRegistry = class {
+  /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
+  ids = /* @__PURE__ */ new Set();
+  /**
+   * Cancels a single tracked timer.
+   *
+   * No-ops if the id is unknown (already cleared, fired, or never owned by this
+   * registry), so callers can clear defensively without guarding.
+   */
+  clear(id) {
+    if (this.ids.delete(id)) {
+      this.cancel(id);
+    }
+  }
+  /**
+   * Cancels every tracked timer. Call this from a controller's `disconnect()`
+   * to guarantee no timer outlives the element.
+   */
+  clearAll() {
+    for (const id of this.ids) {
+      this.cancel(id);
+    }
+    this.ids.clear();
+  }
+  /** Number of timers currently tracked (pending). */
+  get size() {
+    return this.ids.size;
+  }
+};
+var SafeTimeout = class extends TimerRegistry {
+  /**
+   * Schedules `callback` after `delay` ms and returns the timer id.
+   *
+   * The id is removed from the registry automatically when the timeout fires,
+   * so {@link TimerRegistry.size | size} reflects only still-pending timers.
+   */
+  set(callback, delay) {
+    const id = this.schedule(() => {
+      this.ids.delete(id);
+      callback();
+    }, delay);
+    this.ids.add(id);
+    return id;
+  }
+  schedule(callback, delay) {
+    return window.setTimeout(callback, delay);
+  }
+  cancel(id) {
+    window.clearTimeout(id);
+  }
+};
+
+// src/controllers/date_range_picker_controller.ts
+var GRID_SIZE = 42;
+var DateRangePickerController = class extends Controller {
+  static targets = ["grid", "monthLabel", "cell", "status", "startField", "endField"];
+  static values = {
+    min: { type: String, default: "" },
+    max: { type: String, default: "" }
+  };
+  static actions = ["applyPreset", "next", "onKeydown", "prev", "previewTo", "selectDate"];
+  static events = ["change"];
+  /** The month currently rendered, as `YYYY-MM`. */
+  #viewMonth = "";
+  /** The confirmed range endpoints (ISO), or "" when unset. */
+  #startDate = "";
+  #endDate = "";
+  /** The first endpoint of an in-progress selection (ISO), or "" when idle. */
+  #pendingStart = "";
+  /** The hovered/focused date previewed while selecting (ISO), or "". */
+  #previewDate = "";
+  /** The roving-focus date in the grid (local time). */
+  #focusedDate = /* @__PURE__ */ new Date();
+  /** Deferred focus after an async month transition (cancelled on teardown). */
+  #focusTimer = new SafeTimeout();
+  /** Seeds the range from any pre-filled hidden fields and renders the grid. */
+  connect() {
+    this.#startDate = this.hasStartFieldTarget ? normalizeISO(this.startFieldTarget.value) : "";
+    this.#endDate = this.hasEndFieldTarget ? normalizeISO(this.endFieldTarget.value) : "";
+    const anchor = parseISODateString(this.#startDate) ?? this.#clampToBounds(/* @__PURE__ */ new Date()) ?? /* @__PURE__ */ new Date();
+    this.#focusedDate = anchor;
+    this.#viewMonth = toISOMonthString(anchor);
+    if (this.hasGridTarget) this.gridTarget.setAttribute("aria-multiselectable", "true");
+    this.#render();
+  }
+  /** Cancels any pending deferred focus so it never fires on a detached element. */
+  disconnect() {
+    this.#focusTimer.clearAll();
+  }
+  /** Navigates to the previous month. */
+  prev(event) {
+    event?.preventDefault();
+    this.#shiftMonth(-1);
+  }
+  /** Navigates to the next month. */
+  next(event) {
+    event?.preventDefault();
+    this.#shiftMonth(1);
+  }
+  /** Confirms a range endpoint from a clicked cell. */
+  selectDate(event) {
+    const cell = this.#cellFrom(event.target);
+    if (!cell) return;
+    const date = cell.getAttribute("data-date");
+    if (!date || cell.getAttribute("aria-disabled") === "true") return;
+    this.#choose(date);
+  }
+  /** Previews the range up to a hovered/focused cell while selecting. */
+  previewTo(event) {
+    const cell = this.#cellFrom(event.target);
+    if (!cell) return;
+    const date = cell.getAttribute("data-date");
+    if (!date) return;
+    if (event.type.startsWith("focus")) {
+      const parsed = parseISODateString(date);
+      if (parsed) this.#focusedDate = parsed;
+      if (!this.#pendingStart && cell.getAttribute("tabindex") !== "0") {
+        this.#render();
+      }
+    }
+    if (this.#pendingStart) {
+      this.#previewDate = date;
+      this.#render();
+    }
+  }
+  /** Applies a named preset (`today` / `last7` / `last30` / `thisMonth`). */
+  applyPreset(event) {
+    const button = event.target?.closest("[data-range]");
+    const name = button?.getAttribute("data-range");
+    if (!name) return;
+    const range = computePreset(name);
+    if (!range) return;
+    const start = this.#clampISO(range.start);
+    const end = this.#clampISO(range.end);
+    if (!start || !end) return;
+    this.#startDate = start;
+    this.#endDate = end;
+    this.#pendingStart = "";
+    this.#previewDate = "";
+    const endDate = parseISODateString(end);
+    if (endDate) this.#focusedDate = endDate;
+    this.#commitFields();
+    this.#transitionTo(toISOMonthString(parseISODateString(end) ?? /* @__PURE__ */ new Date()), end);
+    this.#announce();
+    this.dispatch("change", { detail: { start, end } });
+  }
+  /** Grid keyboard navigation, selection (Enter/Space), and Escape-to-cancel. */
+  onKeydown(event) {
+    if (event.defaultPrevented) return;
+    if (isReservedArrowChord(event)) return;
+    const cell = this.#cellFrom(event.target);
+    if (!cell) return;
+    const dateStr = cell.getAttribute("data-date");
+    const date = dateStr ? parseISODateString(dateStr) : null;
+    if (!date) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (dateStr && cell.getAttribute("aria-disabled") !== "true") this.#choose(dateStr);
+      return;
+    }
+    if (event.key === "Escape") {
+      if (this.#pendingStart && !event.isComposing) {
+        event.preventDefault();
+        this.#pendingStart = "";
+        this.#previewDate = "";
+        this.#render();
+      }
+      return;
+    }
+    let next = null;
+    switch (logicalArrowKey(event.key, this.element)) {
+      case "ArrowLeft":
+        next = addDays(date, -1);
+        break;
+      case "ArrowRight":
+        next = addDays(date, 1);
+        break;
+      case "ArrowUp":
+        next = addDays(date, -7);
+        break;
+      case "ArrowDown":
+        next = addDays(date, 7);
+        break;
+      case "Home":
+        next = addDays(date, -date.getDay());
+        break;
+      case "End":
+        next = addDays(date, 6 - date.getDay());
+        break;
+      case "PageUp":
+        next = shiftMonthClamped(date, -1);
+        break;
+      case "PageDown":
+        next = shiftMonthClamped(date, 1);
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    this.#moveFocusTo(next);
+  }
+  /** Records a chosen date as either the pending start or the confirmed end. */
+  #choose(date) {
+    if (!this.#pendingStart) {
+      this.#pendingStart = date;
+      this.#previewDate = date;
+      const parsed = parseISODateString(date);
+      if (parsed) this.#focusedDate = parsed;
+      this.#render();
+      return;
+    }
+    const [start, end] = date < this.#pendingStart ? [date, this.#pendingStart] : [this.#pendingStart, date];
+    this.#startDate = start;
+    this.#endDate = end;
+    this.#pendingStart = "";
+    this.#previewDate = "";
+    this.#commitFields();
+    this.#render();
+    this.#announce();
+    this.dispatch("change", { detail: { start, end } });
+  }
+  /** Moves roving focus to `date`, transitioning the month when needed. */
+  #moveFocusTo(date) {
+    this.#focusedDate = date;
+    if (this.#pendingStart) this.#previewDate = toISODateString(date);
+    this.#transitionTo(toISOMonthString(date), toISODateString(date));
+  }
+  /** Renders `month`, then focuses the cell for `dateStr` (deferred if async). */
+  #transitionTo(month, dateStr) {
+    const isTransition = month !== this.#viewMonth;
+    this.#viewMonth = month;
+    this.#render();
+    const focusCell = () => {
+      this.cellTargets.find((c) => c.getAttribute("data-date") === dateStr)?.focus();
+    };
+    if (isTransition) {
+      this.#focusTimer.set(focusCell, 0);
+    } else {
+      focusCell();
+    }
+  }
+  /** Shifts the displayed month by `delta`, keeping focus within it. */
+  #shiftMonth(delta) {
+    const info = parseISOMonthString(this.#viewMonth);
+    if (!info) return;
+    const target = new Date(info.year, info.month - 1 + delta, 1);
+    this.#viewMonth = toISOMonthString(target);
+    const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
+    target.setDate(Math.min(this.#focusedDate.getDate(), lastDay));
+    this.#focusedDate = target;
+    this.#render();
+  }
+  /** Builds the six-week grid and binds range/roving/disabled state per cell. */
+  #render() {
+    const info = parseISOMonthString(this.#viewMonth);
+    if (!info) return;
+    const { year, month } = info;
+    if (this.hasMonthLabelTarget) {
+      const lang = document.documentElement.lang || "en";
+      const formatter = new Intl.DateTimeFormat(lang, { month: "long", year: "numeric" });
+      this.monthLabelTarget.textContent = formatter.format(new Date(year, month - 1, 1));
+    }
+    const [rangeStart, rangeEnd] = this.#visualRange();
+    const days = gridDays(year, month);
+    const focusedStr = toISODateString(this.#focusedDate);
+    const todayStr = toISODateString(/* @__PURE__ */ new Date());
+    for (let i = 0; i < GRID_SIZE; i++) {
+      const el = this.cellTargets[i];
+      const date = days[i];
+      if (!el || !date) continue;
+      const iso = toISODateString(date);
+      el.setAttribute("data-date", iso);
+      el.textContent = String(date.getDate());
+      el.setAttribute("data-outside", String(date.getMonth() !== month - 1));
+      el.setAttribute("data-today", String(iso === todayStr));
+      el.setAttribute("tabindex", iso === focusedStr ? "0" : "-1");
+      if (this.#outOfBounds(iso)) el.setAttribute("aria-disabled", "true");
+      else el.removeAttribute("aria-disabled");
+      const isStart = !!rangeStart && iso === rangeStart;
+      const isEnd = !!rangeEnd && iso === rangeEnd && rangeEnd !== rangeStart;
+      const inside = !!rangeStart && !!rangeEnd && iso > rangeStart && iso < rangeEnd;
+      el.toggleAttribute("data-range-start", isStart);
+      el.toggleAttribute("data-range-end", isEnd);
+      el.toggleAttribute("data-in-range", inside);
+      el.setAttribute(
+        "aria-selected",
+        String(
+          !!this.#startDate && iso === this.#startDate || !!this.#endDate && iso === this.#endDate
+        )
+      );
+    }
+  }
+  /** The ordered [start, end] pair to paint: the preview while selecting, else confirmed. */
+  #visualRange() {
+    if (this.#pendingStart) {
+      const other = this.#previewDate || this.#pendingStart;
+      return this.#pendingStart <= other ? [this.#pendingStart, other] : [other, this.#pendingStart];
+    }
+    return [this.#startDate, this.#endDate];
+  }
+  /** Writes the confirmed range to the hidden fields. */
+  #commitFields() {
+    if (this.hasStartFieldTarget) this.startFieldTarget.value = this.#startDate;
+    if (this.hasEndFieldTarget) this.endFieldTarget.value = this.#endDate;
+  }
+  /** Announces the confirmed range in the live status region. */
+  #announce() {
+    if (this.hasStatusTarget && this.#startDate && this.#endDate) {
+      this.statusTarget.textContent = `${this.#startDate} \u2013 ${this.#endDate}`;
+    }
+  }
+  /** True when `iso` falls outside the `[min, max]` bounds. */
+  #outOfBounds(iso) {
+    if (this.minValue && iso < this.minValue) return true;
+    if (this.maxValue && iso > this.maxValue) return true;
+    return false;
+  }
+  /** Clamps an ISO date string into `[min, max]`, or "" when unparseable. */
+  #clampISO(iso) {
+    if (!iso) return "";
+    if (this.minValue && iso < this.minValue) return this.minValue;
+    if (this.maxValue && iso > this.maxValue) return this.maxValue;
+    return iso;
+  }
+  /** Clamps a Date into `[min, max]`, returning null only when unparseable. */
+  #clampToBounds(date) {
+    const clamped = this.#clampISO(toISODateString(date));
+    return parseISODateString(clamped);
+  }
+  /** Resolves the cell element from an event target, or null. */
+  #cellFrom(target) {
+    return target?.closest(
+      "[data-stimeo--date-range-picker-target='cell']"
+    ) ?? null;
+  }
+};
+function addDays(date, n) {
+  const next = new Date(date);
+  next.setDate(next.getDate() + n);
+  return next;
+}
+function shiftMonthClamped(date, delta) {
+  const target = new Date(date.getFullYear(), date.getMonth() + delta, 1);
+  const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
+  target.setDate(Math.min(date.getDate(), lastDay));
+  return target;
+}
+function gridDays(year, month) {
+  const first = new Date(year, month - 1, 1);
+  const start = new Date(first);
+  start.setDate(first.getDate() - first.getDay());
+  const days = [];
+  const current = new Date(start);
+  for (let i = 0; i < GRID_SIZE; i++) {
+    days.push(new Date(current));
+    current.setDate(current.getDate() + 1);
+  }
+  return days;
+}
+function normalizeISO(value) {
+  const date = parseISODateString(value.trim());
+  return date ? toISODateString(date) : "";
+}
+function computePreset(name) {
+  const today = /* @__PURE__ */ new Date();
+  const todayStr = toISODateString(today);
+  switch (name) {
+    case "today":
+      return { start: todayStr, end: todayStr };
+    case "last7":
+      return { start: toISODateString(addDays(today, -6)), end: todayStr };
+    case "last30":
+      return { start: toISODateString(addDays(today, -29)), end: todayStr };
+    case "thisMonth": {
+      const start = new Date(today.getFullYear(), today.getMonth(), 1);
+      const end = new Date(today.getFullYear(), today.getMonth() + 1, 0);
+      return { start: toISODateString(start), end: toISODateString(end) };
+    }
+    default:
+      return null;
+  }
+}
+
+export { DateRangePickerController };
+//# sourceMappingURL=date_range_picker_controller.js.map
+//# sourceMappingURL=date_range_picker_controller.js.map

data/dist/controllers/dismissible_controller.js

@@ -0,0 +1,117 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/dismissible_controller.ts
+
+// src/utils/focus_trap.ts
+var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+// src/controllers/dismissible_controller.ts
+var DismissibleController = class extends Controller {
+  static targets = ["root", "fallback"];
+  static values = {
+    mode: { type: String, default: "remove" },
+    closeOnEscape: { type: Boolean, default: false }
+  };
+  static actions = ["dismiss"];
+  static events = ["dismiss"];
+  connect() {
+    const root = this.#root;
+    if (!root.hasAttribute("data-state")) {
+      root.setAttribute("data-state", "open");
+    }
+    this.#syncEscapeListener();
+  }
+  disconnect() {
+    this.element.removeEventListener("keydown", this.#onKeydown);
+  }
+  /** Keeps the Escape listener aligned with a live `closeOnEscape` Value. */
+  closeOnEscapeValueChanged() {
+    this.#syncEscapeListener();
+  }
+  /** Dismisses the element. Bound via `data-action` (click on the close button). */
+  dismiss() {
+    this.#performDismiss();
+  }
+  /** Dismisses on Escape when `closeOnEscape` is set and focus is inside. */
+  #onKeydown = (event) => {
+    if (event.key !== "Escape" || event.defaultPrevented || event.isComposing) return;
+    if (!this.closeOnEscapeValue) return;
+    const active = document.activeElement;
+    if (!active || !this.element.contains(active)) return;
+    event.preventDefault();
+    this.#performDismiss();
+  };
+  /** Adds or removes the one stable listener reference without duplicating it. */
+  #syncEscapeListener() {
+    this.element.removeEventListener("keydown", this.#onKeydown);
+    if (this.closeOnEscapeValue) {
+      this.element.addEventListener("keydown", this.#onKeydown);
+    }
+  }
+  /** The element to dismiss: the explicit `root` target, or the host element. */
+  get #root() {
+    return this.hasRootTarget ? this.rootTarget : this.element;
+  }
+  #performDismiss() {
+    const root = this.#root;
+    const mode = this.modeValue === "hide" ? "hide" : "remove";
+    this.#retreatFocus(root);
+    root.setAttribute("data-state", "closing");
+    this.dispatch("dismiss", { detail: { mode } });
+    if (mode === "hide") {
+      root.hidden = true;
+    } else {
+      root.remove();
+    }
+  }
+  /**
+   * Moves focus out of `root` *before* it is removed, but only when focus is
+   * actually inside it — otherwise the user's place elsewhere is left undisturbed.
+   */
+  #retreatFocus(root) {
+    const active = document.activeElement;
+    if (!(active instanceof HTMLElement) || !root.contains(active)) return;
+    for (const candidate of this.#focusFallbacks(root)) {
+      candidate.focus();
+      if (document.activeElement === candidate) return;
+    }
+    document.body.focus();
+  }
+  /** Yields available focus fallbacks in precedence order, stopping after focus succeeds. */
+  *#focusFallbacks(root) {
+    const explicitFallback = this.hasFallbackTarget ? this.fallbackTarget : null;
+    if (explicitFallback && !root.contains(explicitFallback) && this.#isFocusAvailable(explicitFallback)) {
+      yield explicitFallback;
+    }
+    const candidates = document.querySelectorAll(FOCUSABLE);
+    for (const element of candidates) {
+      if (element === explicitFallback || root.contains(element) || !(root.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_FOLLOWING)) {
+        continue;
+      }
+      if (this.#isFocusAvailable(element)) yield element;
+    }
+    for (let index = candidates.length - 1; index >= 0; index -= 1) {
+      const element = candidates.item(index);
+      if (element === explicitFallback || root.contains(element) || !(root.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING)) {
+        continue;
+      }
+      if (this.#isFocusAvailable(element)) yield element;
+    }
+  }
+  /** Whether focus is allowed by the element and its semantic ancestors. */
+  #isFocusAvailable(element) {
+    if (!element.matches(FOCUSABLE) && !element.hasAttribute("tabindex") && !element.isContentEditable) {
+      return false;
+    }
+    if (element.matches(":disabled")) return false;
+    if (element instanceof HTMLInputElement && element.type === "hidden") return false;
+    for (let current = element; current; current = current.parentElement) {
+      if (current.hidden || current.inert) return false;
+    }
+    return true;
+  }
+};
+
+export { DismissibleController };
+//# sourceMappingURL=dismissible_controller.js.map
+//# sourceMappingURL=dismissible_controller.js.map