@lekoala/date-picker 0.5.2 → 0.5.3

package/dist/date-picker.js

@@ -1,4 +1,4 @@
-/*** @lekoala/date-picker v0.5.2 - https://github.com/lekoala/date-picker ***/
+/*** @lekoala/date-picker v0.5.3 - https://github.com/lekoala/date-picker ***/
 (() => {
   var __defProp = Object.defineProperty;
   var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -78,9 +78,11 @@
     const text = String(value || "");
     const monthMatch = MONTH_RE.exec(text);
     if (monthMatch) {
+      const year = Number(monthMatch[1]);
       const month = Number(monthMatch[2]);
-      if (month >= 1 && month <= 12)
+      if (year >= 1 && year <= 9999 && month >= 1 && month <= 12) {
         return `${monthMatch[1]}-${String(month).padStart(2, "0")}`;
+      }
     }
     const parsed = parseDate(text);
     if (!parsed)
@@ -849,7 +851,10 @@
       this._id = `date-calendar-${++uid}`;
       this._model = new CalendarModel;
       this._connected = false;
+      this._lifecycleId = 0;
       this._rendering = false;
+      this._heading = null;
+      this._renderRoot = null;
       this._source = null;
       this._hostIntent = null;
       this._sourceStates = new Map;
@@ -876,6 +881,7 @@
     connectedCallback() {
       if (this._connected)
         return;
+      this._lifecycleId++;
       upgradeProperties(this, [
         "locale",
         "min",
@@ -918,6 +924,7 @@
       this._stopDefaultMessages?.();
       this._stopDefaultMessages = null;
       this._connected = false;
+      this._lifecycleId++;
       this._loadController?.abort();
       this._loadController = null;
       this._loadingKey = "";
@@ -927,12 +934,43 @@
       this.removeEventListener("keydown", this._onKeyDown);
       this.removeEventListener("focusin", this._onFocusIn);
     }
-    attributeChangedCallback() {
-      if (!this._connected || this._rendering)
+    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();
     }
+    _queueFocus(callback) {
+      const lifecycleId = this._lifecycleId;
+      queueMicrotask(() => {
+        if (!this._connected || lifecycleId !== this._lifecycleId)
+          return;
+        callback();
+      });
+    }
     get locale() {
       return resolveLocale(this.getAttribute("locale") || "");
     }
@@ -1273,7 +1311,7 @@
         this._moveFocusDom(previousFocused, this._model.focused, moveFocus);
       }
       if (moveFocus)
-        queueMicrotask(() => this.focusGrid());
+        this._queueFocus(() => this.focusGrid());
     }
     _moveFocusDom(previous, next, moveFocus = true) {
       const prevCell = previous ? this.querySelector(`.dp-day[data-date="${CSS.escape(previous)}"]`) : null;
@@ -1357,6 +1395,9 @@
         target.focus();
     }
     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;
       const tagged = (event) => {
@@ -1365,6 +1406,8 @@
         return event;
       };
       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(tagged(new CustomEvent("dateinvalid", { detail: { date, state }, bubbles: true })));
@@ -1549,8 +1592,20 @@
           <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)}">`;
+      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}
@@ -1558,17 +1613,17 @@
           <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;
           if (selector.startsWith(".dp-day[data-date=")) {
             selector = `.dp-day[data-date="${CSS.escape(this._model.focused)}"]`;
@@ -1982,6 +2037,7 @@
       this.canonical = "";
       this._dirty = false;
       this._commitId = 0;
+      this._disposed = false;
       this._originalName = input.getAttribute("name") || "";
       this._attributeObserver = null;
       this.onAttributesChanged = null;
@@ -2084,34 +2140,39 @@
     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" };
+          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" };
+          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" };
+        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 };
+    }
+    isCommitCurrent(commitId) {
+      return commitId === this._commitId;
     }
     setCanonical(value, options = {}) {
       const next = value || "";
@@ -2132,6 +2193,8 @@
       return parsed && isDate(parsed) ? parsed : "";
     }
     teardown() {
+      this.dirty();
+      this._disposed = true;
       this._attributeObserver?.disconnect();
       this._attributeObserver = null;
       const hiddenName = this.hidden?.getAttribute("name") || this._originalName;
@@ -2214,7 +2277,7 @@
       this._originalDescribedBy = "";
       this._rangeOriginalDescribedBy = ["", ""];
       this._formatHint = null;
-      this._generatedPlaceholder = false;
+      this._generatedPlaceholders = new WeakSet;
       this._controller = null;
       this._stopTracking = null;
       this._open = false;
@@ -2231,6 +2294,9 @@
     _rangeMode() {
       return this.hasAttribute("range") && Boolean(this._range);
     }
+    _ownsField(field) {
+      return this._connected && (field === this._field || Boolean(this._fields?.includes(field)));
+    }
     connectedCallback() {
       if (this._connected)
         return;
@@ -2368,6 +2434,7 @@
       this._stopDefaultMessages?.();
       this._stopDefaultMessages = null;
       this._connected = false;
+      this._suppressFocusOpen = false;
       this.hide(false);
       this._controller?.abort();
       this._controller = null;
@@ -2408,7 +2475,21 @@
       input.removeAttribute("aria-controls");
     }
     attributeChangedCallback(name, oldValue, newValue) {
-      if (!this._connected || this._reflecting || oldValue === newValue)
+      if (this._reflecting || oldValue === newValue)
+        return;
+      if (name === "value" && newValue && !isDate(newValue)) {
+        this._reflectValue(this._value);
+        return;
+      }
+      if ((name === "min" || name === "max") && newValue && !isDate(newValue)) {
+        this.removeAttribute(name);
+        if (this._connected) {
+          this._syncCalendarOptions();
+          this.validate();
+        }
+        return;
+      }
+      if (!this._connected)
         return;
       if (name === "value") {
         if (this._rangeMode())
@@ -2695,7 +2776,7 @@
           return;
         this.hide(false);
         queueMicrotask(() => {
-          if (!event.defaultPrevented)
+          if (!signal.aborted && !event.defaultPrevented)
             restore();
         });
       }, { capture: true, signal });
@@ -2737,7 +2818,7 @@
       button.addEventListener("click", (event) => {
         if (this._open) {
           if (event.detail === 0) {
-            setTimeout(() => this._calendar?.focusGrid(), 0);
+            this._defer(() => this._calendar?.focusGrid());
             return;
           }
           this.hide(false);
@@ -2758,7 +2839,7 @@
           return;
         const intent = activationIntents.get(custom);
         queueMicrotask(() => {
-          if (custom.defaultPrevented || !this._connected)
+          if (signal.aborted || custom.defaultPrevented || !this._connected)
             return;
           if (intent && intent.id !== this._activationId)
             return;
@@ -2823,7 +2904,7 @@
         if (!isDate(date))
           return;
         queueMicrotask(() => {
-          if (custom.defaultPrevented || !this._connected || !this._range)
+          if (signal.aborted || custom.defaultPrevented || !this._connected || !this._range)
             return;
           const intent = activationIntents.get(custom);
           if (intent === undefined || intent.id !== this._activationId)
@@ -2876,7 +2957,7 @@
       }
       if (event.detail === 0) {
         this._activateRangeEndpoint(endpoint);
-        setTimeout(() => this._calendar?.focusGrid(), 0);
+        this._defer(() => this._calendar?.focusGrid());
         return;
       }
       if (endpoint !== this._range?.activeEndpoint) {
@@ -2892,7 +2973,7 @@
       if (this._open) {
         if (this._rangeMode() && endpoint)
           this._activateRangeEndpoint(endpoint);
-        setTimeout(() => this._calendar?.focusGrid(), 0);
+        this._defer(() => this._calendar?.focusGrid());
         return;
       }
       if (this._rangeMode())
@@ -2908,7 +2989,7 @@
           this._range?.focus(endpoint);
         }
         if (this._open) {
-          setTimeout(() => this._calendar?.focusGrid(), 0);
+          this._defer(() => this._calendar?.focusGrid());
         } else {
           this.show();
         }
@@ -3178,9 +3259,9 @@
         this._fields[1].setLocale(this.locale);
         hint.textContent = `${this.messages.formatHint}: ${this._fields[0].placeholder}`;
         for (const [index, field] of this._fields.entries()) {
-          if (!field.input.hasAttribute("placeholder") || this._generatedPlaceholder) {
+          if (!field.input.hasAttribute("placeholder") || this._generatedPlaceholders.has(field.input)) {
             field.input.placeholder = field.placeholder;
-            this._generatedPlaceholder = true;
+            this._generatedPlaceholders.add(field.input);
           }
           const canonical = index === 1 ? this._range?.end || "" : this._range?.start || "";
           if (canonical)
@@ -3194,9 +3275,9 @@
         return;
       field.setLocale(this.locale);
       hint.textContent = `${this.messages.formatHint}: ${field.placeholder}`;
-      if (!field.input.hasAttribute("placeholder") || this._generatedPlaceholder) {
+      if (!field.input.hasAttribute("placeholder") || this._generatedPlaceholders.has(field.input)) {
         field.input.placeholder = field.placeholder;
-        this._generatedPlaceholder = true;
+        this._generatedPlaceholders.add(field.input);
       }
       if (this._value)
         field.input.value = field.format(this._value);
@@ -3279,6 +3360,9 @@
       if (!options.force && !field.isDirty)
         return false;
       const result = await field.commit(options);
+      if (!this._ownsField(field) || !field.isCommitCurrent(result.commitId)) {
+        return false;
+      }
       if (result.status === "stale" || result.status === "invalid")
         return false;
       this._setValue(result.value || "", {
@@ -3297,6 +3381,8 @@
       if (!field?.isDirty)
         return false;
       const result = await field.commit();
+      if (!this._ownsField(field) || !field.isCommitCurrent(result.commitId))
+        return false;
       if (result.status === "stale")
         return false;
       if (result.status === "invalid") {
@@ -3423,6 +3509,14 @@
         input.setCustomValidity("");
       this._timeOrderOwned.clear();
     }
+    _defer(callback) {
+      const controller = this._controller;
+      setTimeout(() => {
+        if (!this._connected || !controller || controller.signal.aborted || this._controller !== controller)
+          return;
+        callback();
+      }, 0);
+    }
     _restoreDefault() {
       const field = this._field;
       if (!field)
@@ -3459,10 +3553,10 @@
       if (!input)
         return;
       this._suppressFocusOpen = true;
-      setTimeout(() => {
+      this._defer(() => {
         input.focus();
         this._suppressFocusOpen = false;
-      }, 0);
+      });
     }
     _restoreFocus() {
       const target = this._returnFocus;
@@ -3470,10 +3564,10 @@
       if (!(target instanceof HTMLElement) || !target.isConnected || target.matches(":disabled"))
         return;
       this._suppressFocusOpen = true;
-      setTimeout(() => {
+      this._defer(() => {
         target.focus();
         this._suppressFocusOpen = false;
-      }, 0);
+      });
     }
     _resolveRangeEndpoint() {
       if (!this._fields)
@@ -3497,6 +3591,8 @@
           return true;
         for (const [index, field] of fields.entries()) {
           const result = await field.commit({ moveDisplay: false });
+          if (!this._ownsField(field) || !field.isCommitCurrent(result.commitId))
+            continue;
           if (result.status === "invalid")
             this._orderTags.delete(index);
           if (result.status === "ok" || result.status === "clear") {
@@ -3509,8 +3605,11 @@
         return fields.every((field) => field.input.checkValidity());
       }
       const input = this._field?.input;
-      if (!input)
-        return true;
+      if (!input) {
+        const dateInputs = this.hasAttribute("range") ? this.querySelectorAll(":scope > input[data-range-start], :scope > input[data-range-end]") : this._input ? [this._input] : [];
+        const timeInputs = this.querySelectorAll(":scope > input[type=time][data-time-start], :scope > input[type=time][data-time-end]");
+        return [...dateInputs, ...timeInputs].every((candidate) => candidate instanceof HTMLInputElement && candidate.checkValidity());
+      }
       await this._commitText(false, { force: true, moveDisplay: false });
       this._revalidateTimeOrder("start");
       this._revalidateTimeOrder("end");
@@ -3549,8 +3648,14 @@
       });
       position();
       this._stopTracking = autoUpdate(this, panel, position);
-      if (options.moveFocus !== false)
-        queueMicrotask(() => calendar.focusGrid());
+      if (options.moveFocus !== false) {
+        const controller = this._controller;
+        queueMicrotask(() => {
+          if (!this._connected || !controller || controller.signal.aborted || this._controller !== controller)
+            return;
+          calendar.focusGrid();
+        });
+      }
       this.dispatchEvent(new Event("open", { bubbles: true }));
     }
     _setExpanded(expanded) {