@lekoala/date-picker 0.5.0 → 0.5.2

package/src/date-calendar.js

@@ -1,5 +1,14 @@
+import { activationIntents } from "./activation-intents.js";
 import { CalendarModel } from "./calendar-model.js";
-import { getDefaultControlClasses, resolveControlClasses, sameControlClasses } from "./control-classes.js";
+import {
+  getDefaultControlClasses,
+  normalizeControlClasses,
+  resolveControlClasses,
+  sameControlClasses,
+  setDefaultControlClasses,
+  subscribeDefaultControlClasses,
+  usesDefaultControlClasses,
+} from "./control-classes.js";
 import {
   addDays,
   clampDate,
@@ -21,8 +30,9 @@ import {
   resolveLocale,
   weekdayNames,
 } from "./intl.js";
-import { getDefaultMessages } from "./messages.js";
+import { getDefaultMessages, setDefaultMessages, subscribeDefaultMessages } from "./messages.js";
 import { normalizeDateStates } from "./source.js";
+import { upgradeProperties } from "./upgrade-properties.js";
 
 let uid = 0;
 
@@ -128,6 +138,26 @@ export class DateCalendarElement extends HTMLElement {
     "month-format",
   ];
 
+  /** @public @param {Partial<import("./control-classes.js").ControlClasses>} classes */
+  static setDefaultControlClasses(classes) {
+    setDefaultControlClasses(classes);
+  }
+
+  /** @public */
+  static getDefaultControlClasses() {
+    return getDefaultControlClasses();
+  }
+
+  /** @public @param {Partial<typeof import("./messages.js").DEFAULT_MESSAGES>} messages */
+  static setDefaultMessages(messages) {
+    setDefaultMessages(messages);
+  }
+
+  /** @public */
+  static getDefaultMessages() {
+    return getDefaultMessages();
+  }
+
   constructor() {
     super();
     this._id = `date-calendar-${++uid}`;
@@ -136,6 +166,9 @@ export class DateCalendarElement extends HTMLElement {
     this._rendering = false;
     /** @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;
@@ -158,8 +191,14 @@ export class DateCalendarElement extends HTMLElement {
     this._paintedPreview = false;
     /** @type {Map<string, DateState>} States of the current rendered grid. */
     this._renderedStates = new Map();
-    this._messages = getDefaultMessages();
-    this._controlClasses = getDefaultControlClasses();
+    /** @type {typeof import("./messages.js").DEFAULT_MESSAGES | null} */
+    this._messages = null;
+    /** @type {Partial<import("./control-classes.js").ControlClasses> | null} */
+    this._controlClasses = null;
+    /** @type {(() => void) | null} */
+    this._stopDefaultMessages = null;
+    /** @type {(() => void) | null} */
+    this._stopDefaultControlClasses = null;
     this._onClick = this._onClick.bind(this);
     this._onChange = this._onChange.bind(this);
     this._onKeyDown = this._onKeyDown.bind(this);
@@ -168,16 +207,46 @@ export class DateCalendarElement extends HTMLElement {
 
   connectedCallback() {
     if (this._connected) return;
+    upgradeProperties(this, [
+      "locale",
+      "min",
+      "max",
+      "firstDay",
+      "selection",
+      "monthFormat",
+      "fixedWeeks",
+      "showWeekNumbers",
+      "controlClasses",
+      "messages",
+      "source",
+      "dateState",
+      "renderDay",
+      "isDateDisabled",
+      "highlightedRange",
+      "value",
+      "display",
+    ]);
+    this._syncModel();
+    upgradeProperties(this, ["focusedDate"]);
+    this._stopDefaultControlClasses = subscribeDefaultControlClasses(() => {
+      if (usesDefaultControlClasses(this._controlClasses)) this.render();
+    });
+    this._stopDefaultMessages = subscribeDefaultMessages(() => {
+      if (this._messages === null) this.render();
+    });
     this._connected = true;
     this.addEventListener("click", this._onClick);
     this.addEventListener("change", this._onChange);
     this.addEventListener("keydown", this._onKeyDown);
     this.addEventListener("focusin", this._onFocusIn);
-    this._syncModel();
     this.render();
   }
 
   disconnectedCallback() {
+    this._stopDefaultControlClasses?.();
+    this._stopDefaultControlClasses = null;
+    this._stopDefaultMessages?.();
+    this._stopDefaultMessages = null;
     this._connected = false;
     this._loadController?.abort();
     this._loadController = null;
@@ -328,29 +397,30 @@ export class DateCalendarElement extends HTMLElement {
   }
 
   /**
-   * Author classes for header controls; merged with global defaults.
+   * Author classes for header controls; omitted roles follow current global defaults.
    * @public
    * @returns {import("./control-classes.js").ControlClasses}
    */
   get controlClasses() {
-    return { ...this._controlClasses };
+    return resolveControlClasses(this._controlClasses);
   }
 
   /** @param {Partial<import("./control-classes.js").ControlClasses> | null} value */
   set controlClasses(value) {
-    const classes = resolveControlClasses(value);
-    if (sameControlClasses(classes, this._controlClasses)) return;
-    this._controlClasses = classes;
+    const previous = this.controlClasses;
+    this._controlClasses = normalizeControlClasses(value);
+    if (sameControlClasses(previous, this.controlClasses)) return;
     if (this._connected) this.render();
   }
 
-  /** @public */
+  /** @public @returns {typeof import("./messages.js").DEFAULT_MESSAGES} */
   get messages() {
-    return this._messages;
+    return this._messages ?? getDefaultMessages();
   }
 
+  /** @param {Partial<typeof import("./messages.js").DEFAULT_MESSAGES> | null} value */
   set messages(value) {
-    this._messages = { ...getDefaultMessages(), ...(value || {}) };
+    this._messages = value == null ? null : { ...getDefaultMessages(), ...value };
     if (this._connected) this.render();
   }
 
@@ -471,7 +541,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 }) || {};
@@ -615,6 +685,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) {
@@ -648,8 +728,8 @@ export class DateCalendarElement extends HTMLElement {
     return [
       formatLongDate(date, this.locale),
       description,
-      rangeLabel ? this._messages[rangeLabel] : "",
-      state.disabled ? this._messages.unavailable : "",
+      rangeLabel ? this.messages[rangeLabel] : "",
+      state.disabled ? this.messages.unavailable : "",
     ]
       .filter(Boolean)
       .join(". ");
@@ -701,21 +781,30 @@ export class DateCalendarElement extends HTMLElement {
    * @param {string} date @returns {Promise<boolean>}
    */
   async activateDate(date) {
+    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);
     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") {
@@ -754,6 +843,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);
   }
 
@@ -766,9 +857,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;
       }
@@ -789,6 +879,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 }),
     );
@@ -849,11 +941,11 @@ 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>`
+      ? `<th scope="col" class="dp-week-heading" abbr="${escapeHtml(this.messages.week)}">#</th>`
       : "";
 
     const monthOptions = names
@@ -906,14 +998,14 @@ export class DateCalendarElement extends HTMLElement {
     // select via `data-year-first`.
     const yearFirst = monthYearOrder(locale)[0] === "year";
     this.toggleAttribute("data-year-first", yearFirst);
-    const classes = this._controlClasses;
+    const classes = this.controlClasses;
     const monthClass = escapeHtml(classes.month || "dp-skin");
     const yearClass = escapeHtml(classes.year || "dp-skin");
     const navClass = escapeHtml(classes.nav || "dp-skin");
-    const monthControl = `<label class="dp-visually-hidden" for="${this._id}-month">${escapeHtml(this._messages.month)}</label>
-          <select id="${this._id}-month" class="dp-month-select ${monthClass}" aria-label="${escapeHtml(this._messages.month)}">${monthOptions}</select>`;
-    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)}">`;
+    const monthControl = `<label class="dp-visually-hidden" for="${this._id}-month">${escapeHtml(this.messages.month)}</label>
+          <select id="${this._id}-month" class="dp-month-select ${monthClass}" aria-label="${escapeHtml(this.messages.month)}">${monthOptions}</select>`;
+    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)}">`;
 
     this._rendering = true;
     this.innerHTML = `
@@ -921,8 +1013,8 @@ export class DateCalendarElement extends HTMLElement {
         <div class="dp-calendar-header">
           ${yearFirst ? yearControl : monthControl}
           ${yearFirst ? monthControl : yearControl}
-          <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>
+          <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}">

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
@@ -38,11 +47,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 +96,7 @@ export class DateFieldController {
   }
 
   get isDisabled() {
-    return this.input.disabled;
+    return this.input.matches(":disabled");
   }
 
   get isReadOnly() {