stimeo-ui 0.4.0 → 0.6.0

package/dist/controllers/date_range_picker_controller.js

@@ -18,6 +18,35 @@ function isReservedArrowChord(event, allow = []) {
   return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
 }
 
+// src/utils/before_cache_reset.ts
+var BeforeCacheReset = class _BeforeCacheReset {
+  /** Every subscribed instance, iterated by the one shared document listener. */
+  static #subscribers = /* @__PURE__ */ new Set();
+  /** The shared listener; installed while at least one instance is subscribed. */
+  static #onBeforeCache = () => {
+    for (const subscriber of _BeforeCacheReset.#subscribers) subscriber.#rewind();
+  };
+  #rewind;
+  /** @param rewind - the pass that returns this controller's state to its initial form. */
+  constructor(rewind) {
+    this.#rewind = rewind;
+  }
+  /** Subscribes to `turbo:before-cache`; call from `connect()`. Idempotent. */
+  activate() {
+    const first = _BeforeCacheReset.#subscribers.size === 0;
+    _BeforeCacheReset.#subscribers.add(this);
+    if (first) {
+      document.addEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
+    }
+  }
+  /** Unsubscribes; call from `disconnect()`. Safe when never subscribed. */
+  deactivate() {
+    _BeforeCacheReset.#subscribers.delete(this);
+    if (_BeforeCacheReset.#subscribers.size > 0) return;
+    document.removeEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
+  }
+};
+
 // src/utils/dates.ts
 function toISODateString(date) {
   const year = date.getFullYear();
@@ -138,16 +167,34 @@ var SafeTimeout = class extends TimerRegistry {
   }
 };
 
+// src/utils/string_list.ts
+function parseStringList(raw, fallback = []) {
+  const text = raw.trim();
+  if (text.length === 0) return [...fallback];
+  let parsed;
+  try {
+    parsed = JSON.parse(text);
+  } catch {
+    return [...fallback];
+  }
+  if (!Array.isArray(parsed)) return [...fallback];
+  return parsed.filter((entry) => typeof entry === "string");
+}
+
 // 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: "" }
+    max: { type: String, default: "" },
+    // A JSON list read through `parseStringList` rather than Stimulus's `Array`
+    // type: that reader throws out of the value observer before any callback
+    // runs, so one malformed attribute would stop the picker from connecting.
+    disabledDates: { type: String, default: "" }
   };
   static actions = ["applyPreset", "next", "onKeydown", "prev", "previewTo", "selectDate"];
-  static events = ["change"];
+  static events = ["change", "monthchange"];
   /** The month currently rendered, as `YYYY-MM`. */
   #viewMonth = "";
   /** The confirmed range endpoints (ISO), or "" when unset. */
@@ -161,7 +208,12 @@ var DateRangePickerController = class extends Controller {
   #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. */
+  /** The declared unavailable dates, indexed for the per-cell paint lookup. */
+  #disabledDates = /* @__PURE__ */ new Set();
+  /** Rewinds an unfinished selection before Turbo snapshots the page. */
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
+  /** Last painted month, or `null` until the initial paint has settled. */
+  #announcedMonth = null;
   /**
    * Collapses a morph that swaps render inputs into one repaint, and refuses the
    * pass Stimulus delivers before `connect()`.
@@ -169,10 +221,17 @@ var DateRangePickerController = class extends Controller {
   #repaint = new MicrotaskCoalescer(() => {
     this.#render();
   });
+  /** Seeds and normalizes the range from optional hidden fields, then paints the grid. */
   connect() {
     this.#repaint.activate();
-    this.#startDate = this.hasStartFieldTarget ? normalizeISO(this.startFieldTarget.value) : "";
-    this.#endDate = this.hasEndFieldTarget ? normalizeISO(this.endFieldTarget.value) : "";
+    this.#beforeCache.activate();
+    const authoredStart = this.hasStartFieldTarget ? normalizeISO(this.startFieldTarget.value) : "";
+    const authoredEnd = this.hasEndFieldTarget ? normalizeISO(this.endFieldTarget.value) : "";
+    [this.#startDate, this.#endDate] = orderRange(authoredStart, authoredEnd);
+    this.#pendingStart = "";
+    this.#previewDate = "";
+    this.#announcedMonth = null;
+    this.#commitFields();
     const anchor = parseISODateString(this.#startDate) ?? this.#clampToBounds(/* @__PURE__ */ new Date()) ?? /* @__PURE__ */ new Date();
     this.#focusedDate = anchor;
     this.#viewMonth = toISOMonthString(anchor);
@@ -182,6 +241,7 @@ var DateRangePickerController = class extends Controller {
   /** Cancels any pending deferred focus so it never fires on a detached element. */
   disconnect() {
     this.#repaint.cancel();
+    this.#beforeCache.deactivate();
     this.#focusTimer.clearAll();
   }
   /** Repaints when application code (or a Turbo morph) changes `min` at runtime. */
@@ -192,6 +252,11 @@ var DateRangePickerController = class extends Controller {
   maxValueChanged() {
     this.#repaint.schedule();
   }
+  /** Re-indexes the unavailable dates and repaints when the declared set changes. */
+  disabledDatesValueChanged() {
+    this.#disabledDates = new Set(parseStringList(this.disabledDatesValue));
+    this.#repaint.schedule();
+  }
   /** Navigates to the previous month. */
   prev(event) {
     event?.preventDefault();
@@ -207,7 +272,7 @@ var DateRangePickerController = class extends Controller {
     const cell = this.#cellFrom(event.target);
     if (!cell) return;
     const date = cell.getAttribute("data-date");
-    if (!date || cell.getAttribute("aria-disabled") === "true") return;
+    if (!date || !this.#isSelectable(date)) return;
     this.#choose(date);
   }
   /** Previews the range up to a hovered/focused cell while selecting. */
@@ -216,28 +281,27 @@ var DateRangePickerController = class extends Controller {
     if (!cell) return;
     const date = cell.getAttribute("data-date");
     if (!date) return;
+    let shouldRender = false;
     if (event.type.startsWith("focus")) {
       const parsed = parseISODateString(date);
       if (parsed) this.#focusedDate = parsed;
-      if (!this.#pendingStart && cell.getAttribute("tabindex") !== "0") {
-        this.#render();
-      }
+      shouldRender = cell.getAttribute("tabindex") !== "0";
     }
-    if (this.#pendingStart) {
+    if (this.#pendingStart && this.#isSelectable(date) && this.#previewDate !== date) {
       this.#previewDate = date;
-      this.#render();
+      shouldRender = true;
     }
+    if (shouldRender) 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);
+    const range = computePreset(button?.getAttribute("data-range") ?? "");
     if (!range) return;
-    const start = this.#clampISO(range.start);
-    const end = this.#clampISO(range.end);
-    if (!start || !end) return;
+    const intersection = this.#intersectRange(range);
+    if (!intersection) return;
+    const { start, end } = intersection;
+    if (!this.#isSelectable(start) || !this.#isSelectable(end)) return;
     this.#startDate = start;
     this.#endDate = end;
     this.#pendingStart = "";
@@ -255,12 +319,12 @@ var DateRangePickerController = class extends Controller {
     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;
+    const dateStr = cell.getAttribute("data-date") ?? "";
+    const date = parseISODateString(dateStr);
     if (!date) return;
     if (event.key === "Enter" || event.key === " ") {
       event.preventDefault();
-      if (dateStr && cell.getAttribute("aria-disabled") !== "true") this.#choose(dateStr);
+      if (this.#isSelectable(dateStr)) this.#choose(dateStr);
       return;
     }
     if (event.key === "Escape") {
@@ -293,10 +357,10 @@ var DateRangePickerController = class extends Controller {
         next = addDays(date, 6 - date.getDay());
         break;
       case "PageUp":
-        next = shiftMonthClamped(date, -1);
+        next = event.shiftKey ? shiftYearClamped(date, -1) : shiftMonthClamped(date, -1);
         break;
       case "PageDown":
-        next = shiftMonthClamped(date, 1);
+        next = event.shiftKey ? shiftYearClamped(date, 1) : shiftMonthClamped(date, 1);
         break;
       default:
         return;
@@ -327,12 +391,14 @@ var DateRangePickerController = class extends Controller {
   /** 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));
+    const iso = toISODateString(date);
+    if (this.#pendingStart && this.#isSelectable(iso)) this.#previewDate = iso;
+    this.#transitionTo(toISOMonthString(date), iso);
   }
   /** Renders `month`, then focuses the cell for `dateStr` (deferred if async). */
   #transitionTo(month, dateStr) {
     const isTransition = month !== this.#viewMonth;
+    this.#focusTimer.clearAll();
     this.#viewMonth = month;
     this.#render();
     const focusCell = () => {
@@ -355,22 +421,28 @@ var DateRangePickerController = class extends Controller {
     this.#focusedDate = target;
     this.#render();
   }
-  /** Builds the six-week grid and binds range/roving/disabled state per cell. */
+  /**
+   * Builds the six-week grid and binds range/roving/disabled state per cell.
+   *
+   * @stimeoRenderRoot
+   */
   #render() {
     const info = parseISOMonthString(this.#viewMonth);
     if (!info) return;
     const { year, month } = info;
+    if (this.#previewDate && !this.#isSelectable(this.#previewDate)) this.#previewDate = "";
     if (this.hasMonthLabelTarget) {
       const lang = document.documentElement.lang || "en";
-      const formatter = new Intl.DateTimeFormat(lang, { month: "long", year: "numeric" });
+      const formatter = monthFormatter(lang);
       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());
+    const cells = this.cellTargets;
     for (let i = 0; i < GRID_SIZE; i++) {
-      const el = this.cellTargets[i];
+      const el = cells[i];
       const date = days[i];
       if (!el || !date) continue;
       const iso = toISODateString(date);
@@ -379,8 +451,8 @@ var DateRangePickerController = class extends Controller {
       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");
+      if (this.#isSelectable(iso)) el.removeAttribute("aria-disabled");
+      else el.setAttribute("aria-disabled", "true");
       const isStart = !!rangeStart && iso === rangeStart;
       const isEnd = !!rangeEnd && iso === rangeEnd && rangeEnd !== rangeStart;
       const inside = !!rangeStart && !!rangeEnd && iso > rangeStart && iso < rangeEnd;
@@ -394,6 +466,16 @@ var DateRangePickerController = class extends Controller {
         )
       );
     }
+    for (const extra of cells.slice(GRID_SIZE)) extra.setAttribute("tabindex", "-1");
+    if (!cells.some((cell) => cell.getAttribute("tabindex") === "0")) {
+      const fallback = cells.find((cell) => cell.getAttribute("data-outside") === "false") ?? cells[0];
+      fallback?.setAttribute("tabindex", "0");
+    }
+    const previous = this.#announcedMonth;
+    this.#announcedMonth = this.#viewMonth;
+    if (previous !== null && previous !== this.#viewMonth) {
+      this.dispatch("monthchange", { detail: { month: this.#viewMonth } });
+    }
   }
   /** The ordered [start, end] pair to paint: the preview while selecting, else confirmed. */
   #visualRange() {
@@ -414,15 +496,25 @@ var DateRangePickerController = class extends Controller {
       this.statusTarget.textContent = `${this.#startDate} \u2013 ${this.#endDate}`;
     }
   }
+  /**
+   * True when `iso` may be chosen as a range endpoint.
+   *
+   * The single availability question in the controller: the grid paint, the
+   * preview, and both commit paths ask it, so a cell's `aria-disabled` and what
+   * a click on that cell does are the same decision rather than two that have to
+   * be kept in step.
+   */
+  #isSelectable(iso) {
+    return !this.#outOfBounds(iso) && !this.#disabledDates.has(iso);
+  }
   /** 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. */
+  /** Clamps a generated ISO date string into `[min, max]`. */
   #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;
@@ -432,6 +524,27 @@ var DateRangePickerController = class extends Controller {
     const clamped = this.#clampISO(toISODateString(date));
     return parseISODateString(clamped);
   }
+  /**
+   * Intersects a preset with `[min, max]`, rejecting a disjoint interval.
+   *
+   * Only the bounds narrow a preset here: `disabledDates` excludes single days,
+   * not sub-intervals, so it cannot shrink one to a still-contiguous range. A
+   * day it excludes is still refused as an endpoint — the caller checks that —
+   * but a preset that merely spans one keeps its span.
+   */
+  #intersectRange(range) {
+    const start = this.minValue && range.start < this.minValue ? this.minValue : range.start;
+    const end = this.maxValue && range.end > this.maxValue ? this.maxValue : range.end;
+    return start <= end ? { start, end } : null;
+  }
+  /** Removes provisional range state before Turbo freezes a cached snapshot. */
+  #rewindForCache() {
+    this.#focusTimer.clearAll();
+    if (!this.#pendingStart && !this.#previewDate) return;
+    this.#pendingStart = "";
+    this.#previewDate = "";
+    this.#render();
+  }
   /** Resolves the cell element from an event target, or null. */
   #cellFrom(target) {
     return target?.closest(
@@ -450,6 +563,12 @@ function shiftMonthClamped(date, delta) {
   target.setDate(Math.min(date.getDate(), lastDay));
   return target;
 }
+function shiftYearClamped(date, delta) {
+  const target = new Date(date.getFullYear() + delta, date.getMonth(), 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);
@@ -466,6 +585,18 @@ function normalizeISO(value) {
   const date = parseISODateString(value.trim());
   return date ? toISODateString(date) : "";
 }
+function orderRange(start, end) {
+  return start && end && end < start ? [end, start] : [start, end];
+}
+function monthFormatter(locale) {
+  const options = { month: "long", year: "numeric" };
+  try {
+    return new Intl.DateTimeFormat(locale, options);
+  } catch (error) {
+    if (!(error instanceof RangeError)) throw error;
+    return new Intl.DateTimeFormat("en", options);
+  }
+}
 function computePreset(name) {
   const today = /* @__PURE__ */ new Date();
   const todayStr = toISODateString(today);