@spear-ai/spectral 1.9.0 → 1.10.0

package/dist/DateTimePicker/DateTimeInput.d.ts

@@ -1,6 +1,6 @@
+import { ComponentProps, Ref } from 'react';
 import { Period, TimePickerTranslations, TimePickerType } from './DateTimeUtils';
-import { ComponentProps } from 'react';
-export interface DateTimeInputProps extends Omit<ComponentProps<'input'>, 'onChange'> {
+export interface DateTimeInputProps extends Omit<ComponentProps<'input'>, 'onChange' | 'type'> {
     date: Date | undefined;
     /** Locale for number formatting */
     locale?: string;
@@ -13,7 +13,9 @@ export interface DateTimeInputProps extends Omit<ComponentProps<'input'>, 'onCha
     translations?: TimePickerTranslations;
 }
 export declare const DateTimeInput: {
-    ({ className, date, disabled, id, locale, name, onKeyDown, onLeftFocus, onRightFocus, period, picker, setDate, translations, ...props }: DateTimeInputProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, date, disabled, id, locale, name, onKeyDown, onLeftFocus, onRightFocus, period, picker, ref, setDate, translations, ...props }: DateTimeInputProps & {
+        ref?: Ref<HTMLInputElement>;
+    }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=DateTimeInput.d.ts.map

package/dist/DateTimePicker/DateTimeInput.js

@@ -1,91 +1,136 @@
 "use client";
 import "../styles/main.css";
-import { jsx as K } from "react/jsx-runtime";
-import { getResolvedLocale as B, getDateByType as O, formatTimeNumber as R, getAriaValueMinMax as p, getAriaValueNow as _, getAriaLabel as P, DEFAULT_TRANSLATIONS as j, getArrowByType as C, setDateByType as c } from "./DateTimeUtils.js";
-import { Input as G } from "../primitives/input.js";
-import { cn as W } from "../utils/twUtils.js";
-import { useState as x, useMemo as i, useEffect as Y, useCallback as N } from "react";
-const q = 2e3, z = ({ className: V, date: f, disabled: b, id: S, locale: A, name: E, onKeyDown: L, onLeftFocus: T, onRightFocus: w, period: l, picker: e, setDate: m, translations: d = j, ...M }) => {
-  const [n, y] = x(!1), [v, U] = x("0"), g = i(() => B(A), [A]), a = i(() => {
-    if (f) return f;
-    const t = /* @__PURE__ */ new Date();
-    return t.setHours(0, 0, 0, 0), t;
-  }, [f]), r = i(() => O(a, e), [a, e]), D = i(() => R(parseInt(r, 10), g), [r, g]), $ = i(() => {
-    const { min: t, max: o } = p(e);
-    return {
-      "aria-label": P(e, d),
-      "aria-valuemin": t,
-      "aria-valuemax": o,
-      "aria-valuenow": _(a, e),
-      "aria-valuetext": D
-    };
-  }, [a, e, D, d]);
-  Y(() => {
-    if (!n) return;
-    const t = setTimeout(() => {
-      y(!1);
-    }, q);
-    return () => clearTimeout(t);
-  }, [n]);
-  const I = N(
-    (t) => e === "12hours" && n && r.startsWith("1") && v === "0" ? `0${t}` : n ? `${r[1]}${t}` : `0${t}`,
-    [e, n, r, v]
-  ), h = N(
-    (t) => {
-      if (t.key !== "Tab") {
-        if ((["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End"].includes(t.key) || t.key >= "0" && t.key <= "9") && t.preventDefault(), t.key === "ArrowRight") {
-          w?.();
-          return;
-        }
-        if (t.key === "ArrowLeft") {
-          T?.();
-          return;
-        }
-        if (t.key === "ArrowUp" || t.key === "ArrowDown") {
-          const o = t.key === "ArrowUp" ? 1 : -1, s = C(o, e, r);
-          n && y(!1);
-          const u = new Date(a);
-          m(c(u, e, s, l));
-          return;
-        }
-        if (t.key === "Home" || t.key === "End") {
-          const { min: o, max: s } = p(e), u = (t.key === "Home" ? o : s).toString().padStart(2, "0"), H = new Date(a);
-          m(c(H, e, u, l));
-          return;
-        }
-        if (t.key >= "0" && t.key <= "9") {
-          e === "12hours" && U(t.key);
-          const o = I(t.key);
-          n && w?.(), y((u) => !u);
-          const s = new Date(a);
-          m(c(s, e, o, l));
-        }
-      }
-    },
-    [I, r, a, n, T, w, l, e, m]
-  );
-  return /* @__PURE__ */ K(
-    G,
-    {
-      className: W("text-center tabular-nums", V),
-      "data-slot": "datetime-input",
-      "data-testid": `spectral-datetime-input-${e}`,
-      disabled: b,
-      id: S ?? e,
-      inputMode: "numeric",
-      name: E ?? e,
-      onKeyDown: (t) => {
-        L?.(t), h(t);
-      },
-      readOnly: !0,
-      role: "spinbutton",
-      value: D,
-      ...$,
-      ...M
-    }
-  );
-};
-z.displayName = "DateTimeInput";
-export {
-  z as DateTimeInput
+import { t as e } from "../twUtils-VNWgstKL.js";
+import { Input as t } from "../primitives/input.js";
+import { F as n, S as r, _ as i, g as a, h as o, m as s, p as c, t as l, v as u } from "../DateTimeUtils-DVvG6H-p.js";
+import { useCallback as d, useEffect as f, useMemo as p, useRef as m } from "react";
+import { jsx as h } from "react/jsx-runtime";
+//#region src/components/DateTimePicker/DateTimeInput.tsx
+var g = (...e) => (t) => {
+	e.forEach((e) => {
+		e && (typeof e == "function" ? e(t) : e.current = t);
+	});
+}, _ = ({ className: _, date: v, disabled: y, id: b, locale: x, name: S, onKeyDown: C, onLeftFocus: w, onRightFocus: T, period: E, picker: D, ref: O, setDate: k, translations: A = l, ...j }) => {
+	let M = m(null), N = g(M, O), P = m(""), F = m(!1), I = p(() => r(x), [x]), L = p(() => {
+		if (v) return v;
+		let e = /* @__PURE__ */ new Date();
+		return e.setHours(0, 0, 0, 0), e;
+	}, [v]), { min: R, max: z } = p(() => o(D), [D]), B = p(() => u(L, D), [L, D]), V = p(() => c(parseInt(B, 10), I), [B, I]), H = p(() => ({
+		"aria-label": s(D, A),
+		"aria-valuemin": R,
+		"aria-valuemax": z,
+		"aria-valuenow": a(L, D),
+		"aria-valuetext": V
+	}), [
+		L,
+		D,
+		V,
+		A,
+		R,
+		z
+	]);
+	f(() => {
+		M.current && !F.current && (M.current.value = V);
+	}, [V]);
+	let U = d((e) => {
+		P.current = "", F.current = !1, k(n(new Date(L), D, e, E));
+	}, [
+		L,
+		D,
+		E,
+		k
+	]), W = d((e) => {
+		if (e.key === "Tab") {
+			if (P.current) {
+				let e = parseInt(P.current, 10);
+				isNaN(e) || U(Math.max(R, Math.min(z, e)).toString().padStart(2, "0"));
+			}
+			return;
+		}
+		if (e.key === "ArrowRight") {
+			if (e.preventDefault(), P.current) {
+				let e = parseInt(P.current, 10);
+				isNaN(e) || U(Math.max(R, Math.min(z, e)).toString().padStart(2, "0"));
+			}
+			T?.();
+			return;
+		}
+		if (e.key === "ArrowLeft") {
+			if (e.preventDefault(), P.current) {
+				let e = parseInt(P.current, 10);
+				isNaN(e) || U(Math.max(R, Math.min(z, e)).toString().padStart(2, "0"));
+			}
+			w?.();
+			return;
+		}
+		if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+			e.preventDefault(), P.current = "", F.current = !1;
+			let t = i(e.key === "ArrowUp" ? 1 : -1, D, B);
+			k(n(new Date(L), D, t, E));
+			return;
+		}
+		if (e.key === "Home" || e.key === "End") {
+			e.preventDefault(), P.current = "", F.current = !1;
+			let t = (e.key === "Home" ? R : z).toString().padStart(2, "0");
+			k(n(new Date(L), D, t, E));
+			return;
+		}
+		if (e.key >= "0" && e.key <= "9") {
+			e.preventDefault();
+			let t = P.current + e.key, n = parseInt(t, 10);
+			t.length >= 2 || n * 10 > z ? (U(Math.max(R, Math.min(z, n)).toString().padStart(2, "0")), T?.()) : (P.current = t, F.current = !0, M.current && (M.current.value = c(n, I)));
+			return;
+		}
+		if (e.key === "Backspace") if (e.preventDefault(), P.current) {
+			let e = P.current.slice(0, -1);
+			P.current = e, F.current = e.length > 0, M.current && (M.current.value = e ? c(parseInt(e, 10), I) : V);
+		} else P.current = "", U(R.toString().padStart(2, "0")), M.current && (M.current.value = c(R, I));
+	}, [
+		B,
+		L,
+		R,
+		z,
+		w,
+		T,
+		E,
+		D,
+		k,
+		U,
+		V,
+		I
+	]), G = d(() => {
+		F.current || (P.current = "");
+	}, []), K = d(() => {
+		if (P.current) {
+			let e = parseInt(P.current, 10);
+			isNaN(e) ? (P.current = "", F.current = !1) : U(Math.max(R, Math.min(z, e)).toString().padStart(2, "0"));
+		}
+	}, [
+		R,
+		z,
+		U
+	]);
+	return /* @__PURE__ */ h(t, {
+		className: e("text-center tabular-nums", _),
+		"data-slot": "datetime-input",
+		"data-testid": `spectral-datetime-input-${D}`,
+		defaultValue: V,
+		disabled: y,
+		id: b ?? D,
+		inputMode: "numeric",
+		name: S ?? D,
+		onBlur: K,
+		onFocus: G,
+		onKeyDown: (e) => {
+			C?.(e), W(e);
+		},
+		readOnly: !0,
+		ref: N,
+		role: "spinbutton",
+		...H,
+		...j
+	});
 };
+_.displayName = "DateTimeInput";
+//#endregion
+export { _ as DateTimeInput };