@octax-app/hot-date-react 0.0.7 → 0.0.8

package/dist/{hot-date-B8i-uiIl.js → hot-date-DIgUxVss.js}

@@ -78,7 +78,7 @@ function y(e) {
 	return /^\d+$/.test(t) ? Number(t) : l[t] ?? null;
 }
 //#endregion
-//#region node_modules/.pnpm/@js-temporal+polyfill@0.4.4/node_modules/@js-temporal/polyfill/dist/index.esm.js
+//#region node_modules/@js-temporal/polyfill/dist/index.esm.js
 var b = /* @__PURE__ */ c((/* @__PURE__ */ o(((e, t) => {
 	(function(n, r) {
 		typeof e == "object" && t !== void 0 ? t.exports = r() : typeof define == "function" && define.amd ? define(r) : (n ||= self, n.JSBI = r());
@@ -8805,6 +8805,7 @@ var Gc = class extends HTMLElement {
 	parser = new Pc();
 	internals;
 	styleObserver = null;
+	fieldElement;
 	inputElement;
 	ghostElement;
 	ghostTypedElement;
@@ -8822,12 +8823,15 @@ var Gc = class extends HTMLElement {
 		super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.append(Wc().content.cloneNode(!0));
 		let e = this.shadowRoot;
 		if (!e) throw Error("Unable to create shadow root.");
-		this.inputElement = e.querySelector("input") ?? document.createElement("input"), this.ghostElement = e.querySelector(".ghost") ?? document.createElement("div"), this.ghostTypedElement = e.querySelector(".ghost-typed") ?? document.createElement("span"), this.ghostTailElement = e.querySelector(".ghost-tail") ?? document.createElement("span"), this.ghostHintElement = e.querySelector(".ghost-hint") ?? document.createElement("kbd"), this.ghostResolutionElement = e.querySelector(".ghost-resolution") ?? document.createElement("span"), this.ambiguityElement = document.createElement("div"), this.ambiguityElement.setAttribute("slot", "ambiguity"), this.ambiguityElement.hidden = !0, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : null, this.bindEvents();
+		this.fieldElement = e.querySelector(".field") ?? document.createElement("div"), this.inputElement = e.querySelector("input") ?? document.createElement("input"), this.ghostElement = e.querySelector(".ghost") ?? document.createElement("div"), this.ghostTypedElement = e.querySelector(".ghost-typed") ?? document.createElement("span"), this.ghostTailElement = e.querySelector(".ghost-tail") ?? document.createElement("span"), this.ghostHintElement = e.querySelector(".ghost-hint") ?? document.createElement("kbd"), this.ghostResolutionElement = e.querySelector(".ghost-resolution") ?? document.createElement("span"), this.ambiguityElement = document.createElement("div"), this.ambiguityElement.setAttribute("slot", "ambiguity"), this.ambiguityElement.hidden = !0, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : null, this.bindEvents();
 	}
 	connectedCallback() {
 		this.ambiguityElement.parentNode !== this && this.append(this.ambiguityElement), this.updateStyles(), this.syncExternalStyles(), this.updateHintVisibility(), this.syncInputPresentation(), this.parseAndRender(), this.styleObserver || (this.styleObserver = new MutationObserver(() => this.syncExternalStyles()), this.styleObserver.observe(document.head, {
 			childList: !0,
 			subtree: !0
+		}), this.styleObserver.observe(document.documentElement, {
+			attributes: !0,
+			attributeFilter: ["class"]
 		}));
 	}
 	disconnectedCallback() {
@@ -8976,26 +8980,28 @@ var Gc = class extends HTMLElement {
 	}
 	syncExternalStyles() {
 		if (!this.shadowRoot) return;
+		let e = Array.from(document.documentElement.classList);
+		this.fieldElement.className = "field" + (e.length ? " " + e.join(" ") : "");
 		try {
 			document.adoptedStyleSheets.length > 0 && (this.shadowRoot.adoptedStyleSheets = [...document.adoptedStyleSheets]);
 		} catch {}
-		let e = new Set(Array.from(this.shadowRoot.querySelectorAll("link[data-ext]")).map((e) => e.href));
-		document.querySelectorAll("link[rel=\"stylesheet\"]").forEach((t) => {
-			if (!e.has(t.href)) {
-				let e = document.createElement("link");
-				e.rel = "stylesheet", e.href = t.href, e.dataset.ext = "", this.shadowRoot.append(e);
+		let t = new Set(Array.from(this.shadowRoot.querySelectorAll("link[data-ext]")).map((e) => e.href));
+		document.querySelectorAll("link[rel=\"stylesheet\"]").forEach((e) => {
+			if (!t.has(e.href)) {
+				let t = document.createElement("link");
+				t.rel = "stylesheet", t.href = e.href, t.dataset.ext = "", this.shadowRoot.append(t);
 			}
 		});
-		let t = Array.from(document.head.querySelectorAll("style")), n = Array.from(this.shadowRoot.querySelectorAll("style[data-ext-style]"));
-		t.forEach((e, t) => {
-			let r = e.textContent ?? "";
-			if (n[t]) n[t].textContent !== r && (n[t].textContent = r);
+		let n = Array.from(document.head.querySelectorAll("style")), r = Array.from(this.shadowRoot.querySelectorAll("style[data-ext-style]"));
+		n.forEach((e, t) => {
+			let n = e.textContent ?? "";
+			if (r[t]) r[t].textContent !== n && (r[t].textContent = n);
 			else {
 				let e = document.createElement("style");
-				e.dataset.extStyle = "", e.textContent = r, this.shadowRoot.append(e);
+				e.dataset.extStyle = "", e.textContent = n, this.shadowRoot.append(e);
 			}
 		});
-		for (let e = t.length; e < n.length; e++) n[e].remove();
+		for (let e = n.length; e < r.length; e++) r[e].remove();
 		requestAnimationFrame(() => {
 			let e = window.getComputedStyle(this.inputElement);
 			this.ghostElement.style.font = e.font;

package/dist/hot-date-react.js

@@ -1,4 +1,4 @@
-import { t as e } from "./hot-date-B8i-uiIl.js";
+import { t as e } from "./hot-date-DIgUxVss.js";
 import { useEffect as t, useRef as n, useState as r } from "react";
 import { jsx as i } from "react/jsx-runtime";
 //#region src/react/format.ts
@@ -101,12 +101,12 @@ function p({ value: e, defaultValue: a, onChange: s, onCommit: c, onClear: l, on
 		let e = H.current, t = J.current;
 		if (!e || t == null) return;
 		let n = T ? o(t, T) ?? t : t;
-		e.value = n, W(!!n), n && (e.setAttribute("display-value", u(n)), e.forceDisplayMode(n));
+		e.value = n, W(!!n), n && (e.setAttribute("display-value", u(n)), e.forceDisplayMode?.(n));
 	}, []), t(() => {
 		let t = H.current;
 		if (!t || e === void 0) return;
 		let n = e ? T ? o(e, T) ?? e : e : null;
-		t.value = n, W(!!n), n ? (t.setAttribute("display-value", u(n)), G || t.forceDisplayMode(n)) : (t.removeAttribute("display-value"), G || t.forceDisplayMode(null));
+		t.value = n, W(!!n), n ? (t.setAttribute("display-value", u(n)), G || t.forceDisplayMode?.(n)) : (t.removeAttribute("display-value"), G || t.forceDisplayMode?.(null));
 	}, [
 		e,
 		T,
@@ -114,24 +114,24 @@ function p({ value: e, defaultValue: a, onChange: s, onCommit: c, onClear: l, on
 	]), t(() => {
 		let e = H.current;
 		if (!e) return;
-		let t = (e) => {
+		let t = e.shadowRoot?.querySelector("input") ?? null, n = (e) => {
 			let t = e.detail;
 			W(!!t.value), s?.(d(t.value, T));
-		}, n = (e) => {
+		}, r = (e) => {
 			let t = e.detail;
 			c?.(d(t.value, T));
-		}, r = () => {
+		}, i = () => {
 			W(!1), l?.();
-		}, i = (e) => {
-			K(!0), p?.(e);
 		}, a = (e) => {
+			K(!0), p?.(e);
+		}, o = (e) => {
 			K(!1), m?.(e);
-		}, o = (e) => h?.(e), u = (e) => g?.(e), f = (e) => {
+		}, u = (e) => h?.(e), f = (e) => g?.(e), E = (e) => {
 			let t = e.detail;
 			_?.(t.rawInput);
-		}, E = (e) => v?.(e), D = (e) => y?.(e), O = (e) => b?.(e), k = (e) => x?.(e), A = (e) => S?.(e), j = (e) => C?.(e), M = (e) => w?.(e);
-		return e.addEventListener("value-change", t), e.addEventListener("value-commit", n), e.addEventListener("clear", r), e.addEventListener("focusin", i), e.addEventListener("focusout", a), e.addEventListener("keydown", o), e.addEventListener("keyup", u), e.addEventListener("raw-input-change", f), e.addEventListener("paste", E), e.addEventListener("click", D), e.addEventListener("mouseenter", O), e.addEventListener("mouseleave", k), e.addEventListener("mousedown", A), e.addEventListener("mouseup", j), e.addEventListener("mousemove", M), () => {
-			e.removeEventListener("value-change", t), e.removeEventListener("value-commit", n), e.removeEventListener("clear", r), e.removeEventListener("focusin", i), e.removeEventListener("focusout", a), e.removeEventListener("keydown", o), e.removeEventListener("keyup", u), e.removeEventListener("raw-input-change", f), e.removeEventListener("paste", E), e.removeEventListener("click", D), e.removeEventListener("mouseenter", O), e.removeEventListener("mouseleave", k), e.removeEventListener("mousedown", A), e.removeEventListener("mouseup", j), e.removeEventListener("mousemove", M);
+		}, D = (e) => v?.(e), O = (e) => y?.(e), k = (e) => b?.(e), A = (e) => x?.(e), j = (e) => S?.(e), M = (e) => C?.(e), N = (e) => w?.(e);
+		return e.addEventListener("value-change", n), e.addEventListener("value-commit", r), e.addEventListener("clear", i), e.addEventListener("focusin", a), e.addEventListener("focusout", o), e.addEventListener("raw-input-change", E), e.addEventListener("click", O), e.addEventListener("mouseenter", k), e.addEventListener("mouseleave", A), e.addEventListener("mousedown", j), e.addEventListener("mouseup", M), e.addEventListener("mousemove", N), t?.addEventListener("keydown", u), t?.addEventListener("keyup", f), t?.addEventListener("paste", D), () => {
+			e.removeEventListener("value-change", n), e.removeEventListener("value-commit", r), e.removeEventListener("clear", i), e.removeEventListener("focusin", a), e.removeEventListener("focusout", o), e.removeEventListener("raw-input-change", E), e.removeEventListener("click", O), e.removeEventListener("mouseenter", k), e.removeEventListener("mouseleave", A), e.removeEventListener("mousedown", j), e.removeEventListener("mouseup", M), e.removeEventListener("mousemove", N), t?.removeEventListener("keydown", u), t?.removeEventListener("keyup", f), t?.removeEventListener("paste", D);
 		};
 	}, [
 		s,

package/dist/hot-date.d.ts

@@ -5,6 +5,7 @@ export declare class HotDateElement extends HTMLElement {
     private readonly parser;
     private readonly internals;
     private styleObserver;
+    private readonly fieldElement;
     private readonly inputElement;
     private readonly ghostElement;
     private readonly ghostTypedElement;

package/dist/hot-date.js

@@ -1,2 +1,2 @@
-import { t as e } from "./hot-date-B8i-uiIl.js";
+import { t as e } from "./hot-date-DIgUxVss.js";
 export { e as HotDateElement };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octax-app/hot-date-react",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "React wrapper for the hot-date natural language date input web component.",
   "type": "module",
   "main": "./dist/hot-date-react.js",