@lekoala/date-picker 0.5.1 → 0.5.3

package/src/date-calendar.js

@@ -1,3 +1,4 @@
+import { activationIntents } from "./activation-intents.js";
 import { CalendarModel } from "./calendar-model.js";
 import {
   getDefaultControlClasses,
@@ -162,9 +163,18 @@ export class DateCalendarElement extends HTMLElement {
     this._id = `date-calendar-${++uid}`;
     this._model = new CalendarModel();
     this._connected = false;
+    /** Connect/disconnect generation guarding deferred work. */
+    this._lifecycleId = 0;
     this._rendering = false;
+    /** Persistent live heading; render() updates its text after it is attached. @type {HTMLHeadingElement | null} */
+    this._heading = null;
+    /** Replaceable visual subtree kept separate from the persistent live heading. @type {HTMLDivElement | null} */
+    this._renderRoot = null;
     /** @type {DateSource | null} */
     this._source = null;
+    /** Intent the host attached to the next activation of `date`.
+     * @type {{date: string, intent: unknown} | null} */
+    this._hostIntent = null;
     this._sourceStates = new Map();
     this._loadedRanges = new Set();
     this._loadController = null;
@@ -203,6 +213,7 @@ export class DateCalendarElement extends HTMLElement {
 
   connectedCallback() {
     if (this._connected) return;
+    this._lifecycleId++;
     upgradeProperties(this, [
       "locale",
       "min",
@@ -244,6 +255,7 @@ export class DateCalendarElement extends HTMLElement {
     this._stopDefaultMessages?.();
     this._stopDefaultMessages = null;
     this._connected = false;
+    this._lifecycleId++;
     this._loadController?.abort();
     this._loadController = null;
     this._loadingKey = "";
@@ -254,12 +266,43 @@ export class DateCalendarElement extends HTMLElement {
     this.removeEventListener("focusin", this._onFocusIn);
   }
 
-  attributeChangedCallback() {
-    if (!this._connected || this._rendering) return;
+  /** @param {string} name @param {string|null} _oldValue @param {string|null} newValue */
+  attributeChangedCallback(name, _oldValue, newValue) {
+    if (this._rendering) return;
+    if (name === "value" && newValue && !isDate(newValue)) {
+      this._reflect("value", this._model.value);
+      return;
+    }
+    if ((name === "min" || name === "max") && newValue && !isDate(newValue)) {
+      this._reflect(name, "");
+      if (this._connected) {
+        this._syncModel();
+        this.render();
+      }
+      return;
+    }
+    if (name === "display" && newValue) {
+      try {
+        if (monthKey(newValue) !== newValue) throw new TypeError("Non-canonical month");
+      } catch {
+        this._reflect("display", this._model.display);
+        return;
+      }
+    }
+    if (!this._connected) return;
     this._syncModel();
     this.render();
   }
 
+  /** Run a focus microtask only in the lifecycle that scheduled it. @param {() => void} callback */
+  _queueFocus(callback) {
+    const lifecycleId = this._lifecycleId;
+    queueMicrotask(() => {
+      if (!this._connected || lifecycleId !== this._lifecycleId) return;
+      callback();
+    });
+  }
+
   /** @public */
   get locale() {
     return resolveLocale(this.getAttribute("locale") || "");
@@ -537,7 +580,7 @@ export class DateCalendarElement extends HTMLElement {
     return { start: first[0], end: last[6] };
   }
 
-  /** @public @param {string} date */
+  /** @public @param {string} date @returns {DateState & {disabled: boolean}} */
   getDateState(date) {
     const fromSource = this._sourceStates.get(date) || {};
     const local = this._dateState?.(date, { ...fromSource }) || {};
@@ -665,7 +708,7 @@ export class DateCalendarElement extends HTMLElement {
       // Same month: no full render, just move the roving tabindex.
       this._moveFocusDom(previousFocused, this._model.focused, moveFocus);
     }
-    if (moveFocus) queueMicrotask(() => this.focusGrid());
+    if (moveFocus) this._queueFocus(() => this.focusGrid());
   }
 
   /** @param {string} previous @param {string} next @param {boolean} [moveFocus] */
@@ -681,6 +724,16 @@ export class DateCalendarElement extends HTMLElement {
     }
   }
 
+  /** Leave exactly one roving tab stop, on `date`'s cell when rendered.
+   * @param {string} date */
+  _syncRovingDom(date) {
+    for (const cell of this.querySelectorAll('.dp-day[tabindex="0"]')) {
+      if (cell instanceof HTMLElement && cell.dataset.date !== date) cell.tabIndex = -1;
+    }
+    const cell = this.querySelector(`.dp-day[data-date="${CSS.escape(date)}"]`);
+    if (cell instanceof HTMLElement) cell.tabIndex = 0;
+  }
+
   /** @param {string} previousValue @param {string} nextValue */
   _moveSelectionDom(previousValue, nextValue) {
     if (previousValue) {
@@ -767,21 +820,33 @@ export class DateCalendarElement extends HTMLElement {
    * @param {string} date @returns {Promise<boolean>}
    */
   async activateDate(date) {
+    if (!this._connected) return false;
+    const lifecycleId = this._lifecycleId;
+    const hostIntent = this._hostIntent?.date === date ? this._hostIntent.intent : undefined;
+    this._hostIntent = null;
+    /** @param {Event} event */
+    const tagged = (event) => {
+      if (hostIntent !== undefined) activationIntents.set(event, hostIntent);
+      return event;
+    };
     // Guarantee remote state before deciding: a date clicked before the
     // source resolves must not be treated as available, and a cancelled or
     // failed load must not authorize it either.
     const confirmed = await this.ensureDate(date);
+    if (!this._connected || lifecycleId !== this._lifecycleId) return false;
     const state = this.getDateState(date);
     if (!confirmed || state.disabled) {
-      this.dispatchEvent(new CustomEvent("dateinvalid", { detail: { date, state }, bubbles: true }));
+      this.dispatchEvent(tagged(new CustomEvent("dateinvalid", { detail: { date, state }, bubbles: true })));
       return false;
     }
     const accepted = this.dispatchEvent(
-      new CustomEvent("dateactivate", {
-        detail: { date, state },
-        bubbles: true,
-        cancelable: true,
-      }),
+      tagged(
+        new CustomEvent("dateactivate", {
+          detail: { date, state },
+          bubbles: true,
+          cancelable: true,
+        }),
+      ),
     );
     if (!accepted) return false;
     if (this.selection === "single") {
@@ -820,6 +885,8 @@ export class DateCalendarElement extends HTMLElement {
     this._model.setFocused(this._clamp(date));
     this._reflect("display", this._model.display);
     if (previousDisplay !== this.display) this._emitDisplayChange();
+    // Engines that do not focus a clicked cell still need the tab stop moved.
+    else this._syncRovingDom(this._model.focused);
     void this.activateDate(date);
   }
 
@@ -832,9 +899,8 @@ export class DateCalendarElement extends HTMLElement {
     }
     if (target instanceof HTMLInputElement && target.matches(".dp-year-input")) {
       const year = Number(target.value);
-      // 9999 is a valid civil year but its December grid overflows into 10000,
-      // so the editable range stops one year short of the unrenderable month.
-      if (!Number.isInteger(year) || year < 1 || year > 9998) {
+      // 9999-12 overflows into 10000, but _setDisplay() clamps it to 9999-11.
+      if (!Number.isInteger(year) || year < 1 || year > 9999) {
         if (this._connected) this.render(false);
         return;
       }
@@ -855,6 +921,8 @@ export class DateCalendarElement extends HTMLElement {
     const date = target.dataset.date || "";
     if (!isDate(date)) return;
     this._model.focused = date;
+    // A pointer focuses the cell directly; keep exactly one tab stop on it.
+    this._syncRovingDom(date);
     this.dispatchEvent(
       new CustomEvent("datefocus", { detail: { date, state: this.getDateState(date) }, bubbles: true }),
     );
@@ -915,8 +983,8 @@ export class DateCalendarElement extends HTMLElement {
     const nextKey = stepMonthKey(display, 1);
     const prevDisabled = Boolean(minMonth && prevKey !== null && prevKey < minMonth);
     const nextDisabled = Boolean(maxMonth && nextKey !== null && nextKey > maxMonth);
-    const minYearAttr = this.min ? ` min="${Number(this.min.slice(0, 4))}"` : "";
-    const maxYearAttr = this.max ? ` max="${Number(this.max.slice(0, 4))}"` : "";
+    const minYearAttr = ` min="${this.min ? Number(this.min.slice(0, 4)) : 1}"`;
+    const maxYearAttr = ` max="${this.max ? Number(this.max.slice(0, 4)) : 9999}"`;
     const showWeeks = this.showWeekNumbers && this.firstDay === 1;
     const weekHeader = showWeeks
       ? `<th scope="col" class="dp-week-heading" abbr="${escapeHtml(this.messages.week)}">#</th>`
@@ -981,8 +1049,21 @@ export class DateCalendarElement extends HTMLElement {
     const yearControl = `<label class="dp-visually-hidden" for="${this._id}-year">${escapeHtml(this.messages.year)}</label>
           <input id="${this._id}-year" class="dp-year-input ${yearClass}" type="number" inputmode="numeric" value="${displayYear}"${minYearAttr}${maxYearAttr} aria-label="${escapeHtml(this.messages.year)}">`;
 
+    if (!this._heading?.isConnected || !this._renderRoot?.isConnected) {
+      this.replaceChildren();
+      const heading = document.createElement("h2");
+      heading.id = headingId;
+      heading.className = "dp-calendar-heading dp-visually-hidden";
+      heading.setAttribute("aria-live", "polite");
+      const renderRoot = document.createElement("div");
+      renderRoot.className = "dp-calendar-render";
+      this.append(heading, renderRoot);
+      this._heading = heading;
+      this._renderRoot = renderRoot;
+    }
+
     this._rendering = true;
-    this.innerHTML = `
+    this._renderRoot.innerHTML = `
       <div class="dp-calendar-shell">
         <div class="dp-calendar-header">
           ${yearFirst ? yearControl : monthControl}
@@ -990,18 +1071,18 @@ export class DateCalendarElement extends HTMLElement {
           <button type="button" class="dp-nav dp-prev ${navClass}" data-calendar-action="previous" aria-label="${escapeHtml(this.messages.previousMonth)}"${prevDisabled ? " disabled" : ""}><svg aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m4 10 4-4 4 4"/></svg></button>
           <button type="button" class="dp-nav dp-next ${navClass}" data-calendar-action="next" aria-label="${escapeHtml(this.messages.nextMonth)}"${nextDisabled ? " disabled" : ""}><svg aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m4 6 4 4 4-4"/></svg></button>
         </div>
-        <h2 id="${headingId}" class="dp-calendar-heading dp-visually-hidden" aria-live="polite">${escapeHtml(formatMonthYear(`${display}-15`, locale))}</h2>
         <table id="${gridId}" class="dp-grid" role="grid" aria-labelledby="${headingId}">
           <thead><tr>${weekHeader}${dayHeaders}</tr></thead>
           <tbody>${rows}</tbody>
         </table>
       </div>`;
+    this._heading.textContent = formatMonthYear(`${display}-15`, locale);
     this._rendering = false;
     this._paintedRange = { ...this._highlightedRange };
     this._paintedPreview = this.hasAttribute("data-range-preview");
 
     if (focusKey) {
-      queueMicrotask(() => {
+      this._queueFocus(() => {
         let selector = focusKey;
         // A day-cell key goes stale across display changes: the old date can
         // reappear as outside-month padding in the new month (fixed-weeks or

package/src/date-field.js

@@ -1,6 +1,15 @@
 import { isDate } from "./date.js";
 import { createDateAdapter } from "./intl.js";
 
+/**
+ * Whether the user may edit this input right now. `:disabled` is the effective
+ * state: the `disabled` property misses a disabled ancestor `<fieldset>`.
+ * @param {HTMLInputElement} input
+ */
+export function isEditable(input) {
+  return !input.matches(":disabled") && !input.readOnly;
+}
+
 /**
  * Owns a single editable form field inside a picker: the visible input, its
  * hidden canonical ISO field, the Intl adapter and the text commit pipeline
@@ -26,6 +35,8 @@ export class DateFieldController {
     this.canonical = "";
     this._dirty = false;
     this._commitId = 0;
+    /** A torn-down controller is terminal: no commit may start or resume. */
+    this._disposed = false;
     this._originalName = input.getAttribute("name") || "";
     /** @type {MutationObserver | null} */
     this._attributeObserver = null;
@@ -38,11 +49,33 @@ export class DateFieldController {
      * @type {((date: string, options?: {moveDisplay?: boolean}) => Promise<{ok: boolean, message?: string}>) | null}
      */
     this.confirm = null;
+    /** Canonical value behind a `defaultValue` the enhancement generated, or null. @type {string | null} */
+    this._generatedDefault = null;
   }
 
   /** @param {string} locale */
   setLocale(locale) {
+    const generated = this._generatedDefault;
+    const previous = generated ? this.adapter.format(generated) : null;
     this.adapter = createDateAdapter(locale || "");
+    // A generated default is localized text: reformat it so a later form reset
+    // never parses the old locale's text with the new adapter. An app-changed
+    // default no longer matches and stays untouched.
+    if (generated && this.input.defaultValue === previous) {
+      this.input.defaultValue = this.adapter.format(generated);
+    }
+  }
+
+  /**
+   * Make the current text the reset default when the author provided none.
+   * Never redefine an author-provided `input.defaultValue`: the next reset must
+   * use the native default (which the app may change).
+   */
+  adoptDefault() {
+    const input = this.input;
+    if (input.getAttribute("value") != null || input.defaultValue !== "") return;
+    input.defaultValue = input.value;
+    this._generatedDefault = this.canonical && input.value ? this.canonical : null;
   }
 
   /** @param {Record<string, string>} messages */
@@ -65,7 +98,7 @@ export class DateFieldController {
   }
 
   get isDisabled() {
-    return this.input.disabled;
+    return this.input.matches(":disabled");
   }
 
   get isReadOnly() {
@@ -148,34 +181,44 @@ export class DateFieldController {
    * `options` is forwarded to the `confirm` gate so a revalidation can ask it
    * not to move the calendar display (source reloads must not re-home it).
    * @param {{moveDisplay?: boolean}} [options]
-   * @returns {Promise<{status: "ok" | "clear" | "invalid" | "stale", value?: string}>}
+   * @returns {Promise<{status: "ok" | "clear" | "invalid" | "stale", value?: string, commitId: number}>}
    */
   async commit(options = {}) {
     const input = this.input;
     const commitId = ++this._commitId;
+    if (this._disposed) return { status: "stale", commitId };
     const text = input.value.trim();
     if (!text) {
-      if (commitId !== this._commitId) return { status: "stale" };
+      if (commitId !== this._commitId) return { status: "stale", commitId };
       input.setCustomValidity("");
-      return { status: "clear", value: "" };
+      return { status: "clear", value: "", commitId };
     }
     const parsed = this.adapter.parse(text);
     if (!parsed) {
-      if (commitId !== this._commitId) return { status: "stale" };
+      if (commitId !== this._commitId) return { status: "stale", commitId };
       if (this.hidden) this.hidden.value = "";
       input.setCustomValidity(this.messages.invalidDate);
-      return { status: "invalid" };
+      return { status: "invalid", commitId };
     }
     if (this.confirm) {
       const result = await this.confirm(parsed, options);
-      if (commitId !== this._commitId) return { status: "stale" };
+      // A disconnect tears this controller down while the confirm is pending;
+      // its result must not touch validity or the hidden field any more.
+      if (this._disposed || commitId !== this._commitId) return { status: "stale", commitId };
       if (!result?.ok) {
         if (this.hidden) this.hidden.value = "";
         input.setCustomValidity(result?.message || this.messages.unavailableDate);
-        return { status: "invalid" };
+        return { status: "invalid", commitId };
       }
     }
-    return { status: "ok", value: parsed };
+    return { status: "ok", value: parsed, commitId };
+  }
+
+  /** A coordinator must re-check this after awaiting commit(), including for
+   * synchronous clear/invalid results whose Promise resumes in a microtask.
+   * @param {number} commitId */
+  isCommitCurrent(commitId) {
+    return commitId === this._commitId;
   }
 
   /**
@@ -203,8 +246,12 @@ export class DateFieldController {
   }
 
   /** Remove the hidden field and attribute observer, restoring the original
-   * authored `name` on the visible input. */
+   * authored `name` on the visible input. A disconnect is a teardown, not a
+   * pause: in-flight commits are invalidated and later ones are refused, so a
+   * reconnected picker rebuilds from the live DOM instead of resuming them. */
   teardown() {
+    this.dirty();
+    this._disposed = true;
     this._attributeObserver?.disconnect();
     this._attributeObserver = null;
     const hiddenName = this.hidden?.getAttribute("name") || this._originalName;