@slotted/react 0.1.0-beta.7 → 0.1.0-beta.9

package/dist/datetime-field-D2f9u6im.js

@@ -1,411 +0,0 @@
-import { n as e, t } from "./icon-T9Yt4tnm.js";
-import { n, r } from "./i18n-DpW8lqJ1.js";
-import { b as i } from "./field-BxQFpOXS.js";
-import { createControllable as a } from "@slotted/core/state";
-import { createContext as o, useCallback as s, useContext as c, useEffect as l, useId as u, useImperativeHandle as d, useMemo as f, useRef as p, useState as m } from "react";
-import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { datetimeFieldMessages as ee } from "@slotted/core/i18n";
-import { DATE_TIME_UNITS as te, EMPTY_SEGMENTS as ne, boundSegment as re, clearSegment as ie, commitTyping as ae, createDateTimeFormat as oe, dateTimeOf as v, dayWindow as se, fieldRange as ce, halfOfField as le, incompleteHalf as ue, isDateTimeInRange as de, isRelativeKey as fe, isSameDateTime as pe, isTimeInRange as me, nowDateTimeIn as he, parseDuration as ge, resolveRelativeDateTime as _e, segmentsOfDateTime as y, stepSegment as b, toISODateTime as ve, typeDayPeriod as ye, typeDigit as be } from "@slotted/core/date";
-//#region src/datetime-field/datetime-field-defaults.tsx
-var x = o({
-	calendar: "gregory",
-	firstDayOfWeek: void 0,
-	granularity: "minute",
-	hourCycle: void 0,
-	relative: !0,
-	size: "md",
-	timeZone: void 0,
-	variant: "outline",
-	yearPivot: void 0
-});
-function S() {
-	return c(x);
-}
-function xe({ children: e, ...t }) {
-	let n = S();
-	return /* @__PURE__ */ g(x.Provider, {
-		value: {
-			calendar: t.calendar ?? n.calendar,
-			firstDayOfWeek: t.firstDayOfWeek ?? n.firstDayOfWeek,
-			granularity: t.granularity ?? n.granularity,
-			hourCycle: t.hourCycle ?? n.hourCycle,
-			relative: t.relative ?? n.relative,
-			size: t.size ?? n.size,
-			timeZone: t.timeZone ?? n.timeZone,
-			variant: t.variant ?? n.variant,
-			yearPivot: t.yearPivot ?? n.yearPivot
-		},
-		children: e
-	});
-}
-//#endregion
-//#region src/datetime-field/datetime-field.tsx
-var Se = {
-	year: 10,
-	month: 5,
-	day: 5,
-	hour: 3,
-	minute: 15,
-	second: 15,
-	dayPeriod: 1
-}, Ce = {
-	date: {
-		year: 2e3,
-		month: 1,
-		day: 1
-	},
-	time: {
-		hour: 12,
-		minute: 0,
-		second: 0
-	}
-};
-function we({ "aria-describedby": o, "aria-label": c, "aria-labelledby": ce, calendar: le, className: x, clearable: xe = !1, defaultValue: we, disabled: Te, end: De, firstDayOfWeek: Oe, granularity: ke, hourCycle: Ae, id: je, invalid: Me, isDateUnavailable: Ne, isTimeUnavailable: Pe, locale: Fe, max: C, messages: Ie, maxTime: Le, min: w, minTime: Re, name: ze, onKeyDown: Be, onPaste: Ve, onValueChange: He, readOnly: Ue, ref: We, referenceDateTime: Ge, relative: Ke, render: qe, required: Je, size: Ye, start: Xe, style: Ze, timeZone: Qe, value: T, variant: $e, yearPivot: et, ...tt }) {
-	let E = i(), nt = E?.registerControl;
-	l(() => nt?.(), [nt]);
-	let D = S(), rt = n(), it = r(ee, Ie), O = p(null), at = p(null), ot = u(), st = Fe ?? rt, ct = Qe ?? D.timeZone, k = ke ?? D.granularity, lt = Ae ?? D.hourCycle, ut = le ?? D.calendar, A = Oe ?? D.firstDayOfWeek, j = et ?? D.yearPivot, dt = Ke ?? D.relative, ft = Ye ?? E?.size ?? D.size, pt = $e ?? D.variant, M = Te ?? E?.disabled, N = Ue ?? E?.readOnly, mt = Me ?? E?.invalid, ht = Je ?? E?.required, P = f(() => oe({
-		granularity: k,
-		hourCycle: lt,
-		locale: st,
-		...A === void 0 ? {} : { firstDayOfWeek: A },
-		...j === void 0 ? {} : { yearPivot: j }
-	}), [
-		A,
-		k,
-		lt,
-		st,
-		j
-	]), [gt, _t] = m(() => Ce);
-	l(() => _t(he(ct)), [ct]);
-	let F = Ge ?? gt, I = f(() => {
-		let e = P.toDisplay(F.time.hour);
-		return {
-			...F.date,
-			dayPeriod: e.dayPeriod ?? 0,
-			hour: e.hour,
-			hourCycle: P.hourCycle,
-			minute: F.time.minute,
-			second: F.time.second
-		};
-	}, [F, P]), [vt, yt] = m(() => y(T ?? we ?? null, P)), [L, R] = m(void 0), [z, B] = m(null), V = p(vt), H = () => V.current;
-	l(() => {
-		T !== void 0 && (pe(v(V.current, P), T) || (V.current = y(T, P), yt(V.current)));
-	}, [P, T]);
-	let U = vt, W = v(U, P), bt = ue(U, P), G = f(() => P.pattern.filter((e) => e.type !== "literal").map((e) => e.type), [P]), K = s((e, t, n) => {
-		let r = v(V.current, P);
-		V.current = e, yt(e), e.typing === null && a({
-			controlled: T,
-			initial: r,
-			equals: pe,
-			onRequest: (t) => {
-				He?.(t.value, {
-					...t,
-					incomplete: ue(e, P),
-					segments: e
-				});
-			}
-		}).request(v(e, P), t, n);
-	}, [
-		P,
-		He,
-		T
-	]), q = s((e) => {
-		R(e), O.current?.querySelector(`[data-part="segment"][data-field="${e}"]`)?.focus();
-	}, []), xt = s(() => {
-		let e = H(), t = G.find((t) => e[t] === null) ?? G[0];
-		t !== void 0 && q(t);
-	}, [G, q]), J = s((e, t) => {
-		let n = G.indexOf(e) + t, r = G[n];
-		r !== void 0 && q(r);
-	}, [G, q]);
-	d(We, () => ({
-		focus: () => {
-			let e = G[0];
-			e !== void 0 && q(e);
-		},
-		clear: () => K(ne, "clear", void 0),
-		get activeField() {
-			return L;
-		}
-	}), [
-		L,
-		K,
-		G,
-		q
-	]);
-	let Y = M !== !0 && N !== !0, X = z !== null, Z = f(() => {
-		if (z === null) return null;
-		let e = ge(z, { units: te });
-		return e === null ? null : _e(F, e);
-	}, [F, z]), St = Z !== null && (Z.date.year !== F.date.year || Z.date.month !== F.date.month || Z.date.day !== F.date.day);
-	l(() => {
-		if (!X) return;
-		let e = at.current;
-		e !== null && (e.focus(), e.setSelectionRange(e.value.length, e.value.length));
-	}, [X]);
-	let Ct = s(() => {
-		B(null);
-		let e = G[0];
-		e !== void 0 && q(e);
-	}, [G, q]), wt = s((e) => {
-		if (Z === null) {
-			B(null);
-			return;
-		}
-		K(y(Z, P), "keyboard", e), B(null);
-	}, [
-		K,
-		P,
-		Z
-	]), Q = (e) => {
-		e.preventDefault(), e.stopPropagation();
-	}, Tt = (e) => (t) => {
-		if (Be?.(t), t.defaultPrevented) return;
-		let n = O.current !== null && getComputedStyle(O.current).direction === "rtl", r = n ? "ArrowLeft" : "ArrowRight", i = n ? "ArrowRight" : "ArrowLeft";
-		if (t.key === r) {
-			Q(t), J(e, 1);
-			return;
-		}
-		if (t.key === i) {
-			Q(t), J(e, -1);
-			return;
-		}
-		if (Y && !t.altKey) {
-			if (dt && fe(t.key)) {
-				Q(t), B(t.key);
-				return;
-			}
-			switch (t.key) {
-				case "ArrowUp":
-					Q(t), K(b(H(), e, 1, I), "keyboard", t);
-					return;
-				case "ArrowDown":
-					Q(t), K(b(H(), e, -1, I), "keyboard", t);
-					return;
-				case "PageUp":
-					Q(t), K(b(H(), e, Se[e], I), "keyboard", t);
-					return;
-				case "PageDown":
-					Q(t), K(b(H(), e, -Se[e], I), "keyboard", t);
-					return;
-				case "Home":
-					Q(t), K(re(H(), e, "min", I), "keyboard", t);
-					return;
-				case "End":
-					Q(t), K(re(H(), e, "max", I), "keyboard", t);
-					return;
-				case "Backspace":
-				case "Delete":
-					Q(t), K(ie(H(), e), "clear", t);
-					return;
-			}
-			if (e === "dayPeriod" && /^\p{L}$/u.test(t.key)) {
-				let n = ye(H(), t.key, P.time);
-				if (n === null) return;
-				Q(t), K(n.segments, "keyboard", t), n.advance && J(e, 1);
-				return;
-			}
-			if (/^\d$/.test(t.key)) {
-				Q(t);
-				let n = be(H(), e, Number(t.key), P.time, I);
-				K(n.segments, "keyboard", t), n.advance && J(e, 1);
-			}
-		}
-	}, Et = (e) => {
-		if (Be?.(e), !e.defaultPrevented) {
-			if (e.key === "Enter") {
-				Q(e), wt(e);
-				let t = G[0];
-				t !== void 0 && q(t);
-				return;
-			}
-			e.key === "Escape" && (Q(e), Ct());
-		}
-	}, Dt = (e) => {
-		if (Ve?.(e), e.defaultPrevented || !Y) return;
-		let t = e.clipboardData.getData("text/plain"), n = P.parse(t);
-		if (n !== null) {
-			e.preventDefault(), K(y(n, P), "keyboard", e);
-			return;
-		}
-		dt && ge(t, { units: te }) !== null && (e.preventDefault(), B(t.trim()));
-	}, Ot = () => {
-		R(void 0);
-		let e = H();
-		e.typing !== null && K(ae(e, P.time, I), "blur", void 0);
-	}, kt = (e) => {
-		e.target?.closest("[data-part=\"segment\"], button, a, input, select, textarea") ?? (e.preventDefault(), X || xt());
-	}, At = (e) => {
-		K(ne, "clear", e);
-		let t = G[0];
-		t !== void 0 && q(t);
-	}, jt = `${ot}-value`, Mt = W === null ? void 0 : P.describe(W), $ = W === null ? null : se(W.date, {
-		max: C,
-		maxTime: Le,
-		min: w,
-		minTime: Re
-	}), Nt = W !== null && (!de(W, w, C) || $ === null || !me(W.time, $.earliest, $.latest)), Pt = W !== null && (Ne?.(W.date) === !0 || Pe?.(W.time, W.date) === !0), Ft = mt === !0 || Pt || Nt, It = G.every((e) => U[e] === null), Lt = xe && !It && Y && !X, Rt = f(() => {
-		let e = [];
-		for (let t of P.pattern) {
-			let n = t.half ?? "date", r = e[e.length - 1];
-			r !== void 0 && r.half === n ? r.parts.push(t) : e.push({
-				half: n,
-				parts: [t]
-			});
-		}
-		return e;
-	}, [P]), zt = /* @__PURE__ */ _(h, { children: [
-		Xe === void 0 ? null : /* @__PURE__ */ g("span", {
-			"data-part": "start",
-			children: Xe
-		}),
-		X ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g("input", {
-			"aria-describedby": [o, E?.describedBy].filter(Boolean).join(" ") || void 0,
-			"aria-label": it("duration"),
-			"data-part": "duration",
-			onBlur: (e) => wt(e),
-			onChange: (e) => B(e.target.value),
-			onKeyDown: Et,
-			placeholder: "+40m, 1h30, +2d",
-			ref: at,
-			type: "text",
-			value: z
-		}), /* @__PURE__ */ _("span", {
-			"aria-live": "polite",
-			"data-part": "preview",
-			role: "status",
-			...Z === null ? {} : { "data-resolved": "" },
-			...St ? { "data-rolls-day": "" } : {},
-			children: [/* @__PURE__ */ g(t, {
-				directional: !0,
-				children: /* @__PURE__ */ g(e, { name: "chevron-right" })
-			}), Z === null ? "" : St ? /* @__PURE__ */ _(h, { children: [
-				/* @__PURE__ */ g("span", {
-					"data-part": "preview-date",
-					children: P.describeDate(Z.date, "short")
-				}),
-				", ",
-				P.time.format(Z.time)
-			] }) : P.time.format(Z.time)]
-		})] }) : /* @__PURE__ */ g("div", {
-			"aria-describedby": [o, E?.describedBy].filter(Boolean).join(" ") || void 0,
-			"aria-disabled": M === !0 || void 0,
-			"aria-invalid": Ft ? !0 : void 0,
-			"aria-label": c,
-			"aria-labelledby": c === void 0 ? [ce ?? E?.ids.label, jt].filter(Boolean).join(" ") : void 0,
-			"aria-readonly": N === !0 || void 0,
-			"aria-required": ht === !0 || void 0,
-			"data-part": "segments",
-			id: je ?? E?.ids.control,
-			onPaste: Dt,
-			role: "group",
-			children: Rt.map((e) => /* @__PURE__ */ g("span", {
-				"data-half": e.half,
-				"data-part": "half",
-				children: e.parts.map((t, n) => {
-					if (t.type === "literal") return t.boundary === !0 && t.drawn === !1 ? null : /* @__PURE__ */ g("span", {
-						"aria-hidden": "true",
-						"data-part": "literal",
-						...t.boundary === !0 ? { "data-boundary": "" } : {},
-						children: t.value
-					}, `literal-${e.half}-${String(n)}`);
-					let r = t.type;
-					return /* @__PURE__ */ g(Ee, {
-						disabled: M === !0,
-						field: r,
-						format: P,
-						onBlur: Ot,
-						onFocus: () => R(r),
-						onKeyDown: Tt(r),
-						placeholder: t.value,
-						readOnly: N === !0,
-						segments: U,
-						tabIndex: r === (L ?? G[0]) ? 0 : -1
-					}, r);
-				})
-			}, e.half))
-		}),
-		/* @__PURE__ */ g("span", {
-			"data-part": "value-text",
-			hidden: !0,
-			id: jt,
-			children: Mt
-		}),
-		Lt ? /* @__PURE__ */ g("button", {
-			"aria-label": it("clear"),
-			"data-part": "clear",
-			onClick: At,
-			type: "button",
-			children: /* @__PURE__ */ g(t, { children: /* @__PURE__ */ g(e, { name: "x" }) })
-		}) : null,
-		De === void 0 ? null : /* @__PURE__ */ g("span", {
-			"data-part": "end",
-			children: De
-		}),
-		/* @__PURE__ */ g("input", {
-			"data-part": "hidden-input",
-			name: ze,
-			readOnly: !0,
-			type: "hidden",
-			value: W === null ? "" : ve(W)
-		})
-	] }), Bt = {
-		...tt,
-		children: zt,
-		className: x,
-		style: Ze,
-		...M === !0 ? { "data-disabled": "" } : {},
-		...Ft ? { "data-invalid": "" } : {},
-		...N === !0 ? { "data-readonly": "" } : {},
-		...ht === !0 ? { "data-required": "" } : {},
-		...X ? { "data-relative": "" } : {},
-		...bt === null ? {} : { "data-incomplete": bt },
-		"data-calendar": ut,
-		"data-cycle": P.usesDayPeriod ? "12" : "24",
-		"data-granularity": k,
-		"data-part": "root",
-		"data-size": ft,
-		"data-ui": "datetime-field",
-		"data-variant": pt,
-		onMouseDown: kt,
-		ref: O
-	};
-	return qe === void 0 ? /* @__PURE__ */ g("div", { ...Bt }) : qe(Bt);
-}
-function Te(e, t, n) {
-	let r = n[e];
-	if (r === null) return t.pattern.find((t) => t.type === e)?.value ?? "";
-	let i = n.typing;
-	return i !== null && i.field === e ? String(r).padStart(i.digits, "0") : t.formatValue(r, e);
-}
-function Ee({ disabled: e, field: t, format: n, onBlur: r, onFocus: i, onKeyDown: a, placeholder: o, readOnly: s, segments: c, tabIndex: l }) {
-	let u = c[t], d = ce(t, {
-		hourCycle: n.hourCycle,
-		...c.month === null ? {} : { month: c.month },
-		...c.year === null ? {} : { year: c.year }
-	}), f = u === null ? void 0 : t === "dayPeriod" ? n.dayPeriodNames()[+(u === 1)] : t === "month" ? n.date.monthNames("long")[u - 1] : String(u);
-	return /* @__PURE__ */ g("div", {
-		"aria-disabled": e ? !0 : void 0,
-		"aria-label": o,
-		"aria-readonly": s ? !0 : void 0,
-		"aria-valuemax": d.max,
-		"aria-valuemin": d.min,
-		"aria-valuenow": u ?? void 0,
-		"aria-valuetext": f,
-		"data-field": t,
-		"data-half": le(t),
-		"data-part": "segment",
-		...u === null ? { "data-placeholder": "" } : {},
-		onBlur: r,
-		onFocus: i,
-		onKeyDown: a,
-		onMouseDown: (e) => {
-			e.preventDefault(), e.currentTarget.focus();
-		},
-		role: "spinbutton",
-		tabIndex: e ? -1 : l,
-		children: Te(t, n, c)
-	});
-}
-//#endregion
-export { xe as n, S as r, we as t };