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

package/dist/datetime-field-KtkRmy6M.js

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

package/dist/datetime-field.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "./datetime-field-D2f9u6im.js";
+import { n as e, r as t, t as n } from "./datetime-field-KtkRmy6M.js";
 export { n as DateTimeField, e as DateTimeFieldDefaultsProvider, t as useDateTimeFieldDefaults };