@slotted/react 0.1.0-beta.4 → 0.1.0-beta.6

package/dist/time-picker-D6SlQWNF.js

@@ -0,0 +1,402 @@
+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 { t as ee } from "./time-field-BI9n607q.js";
+import { createControllable as a } from "@slotted/core/state";
+import { createContext as te, useCallback as o, useContext as ne, useEffect as s, useId as re, useImperativeHandle as ie, useLayoutEffect as ae, useMemo as c, useRef as l, useState as u } from "react";
+import { Fragment as oe, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { createPresence as se } from "@slotted/core/presence";
+import { createPortalRoot as ce } from "@slotted/core/portal";
+import { createDismissableLayer as le } from "@slotted/core/dismissable-layer";
+import { createPositioner as ue } from "@slotted/core/positioner";
+import { createTypeahead as de, isPrintable as fe } from "@slotted/core/typeahead";
+import { createPortal as pe } from "react-dom";
+import { timePickerMessages as me } from "@slotted/core/i18n";
+import { createTimeFormat as he, hourJump as ge, isSameTime as p, isTimeInRange as _e, isTruncated as ve, nearestIndex as ye, nowIn as be, timeList as xe, toISOTime as Se } from "@slotted/core/date";
+//#region src/time-picker/time-picker-defaults.tsx
+var Ce = 900, m = 1440, h = te({
+	closeOnSelect: "auto",
+	granularity: "minute",
+	hourCycle: void 0,
+	maxOptions: m,
+	placement: "bottom-start",
+	size: "md",
+	step: 900,
+	timeZone: void 0,
+	unavailableOptions: "disable",
+	variant: "outline"
+});
+function g() {
+	return ne(h);
+}
+function we({ children: e, ...t }) {
+	let n = g();
+	return /* @__PURE__ */ d(h.Provider, {
+		value: {
+			closeOnSelect: t.closeOnSelect ?? n.closeOnSelect,
+			granularity: t.granularity ?? n.granularity,
+			hourCycle: t.hourCycle ?? n.hourCycle,
+			maxOptions: t.maxOptions ?? n.maxOptions,
+			placement: t.placement ?? n.placement,
+			size: t.size ?? n.size,
+			step: t.step ?? n.step,
+			timeZone: t.timeZone ?? n.timeZone,
+			unavailableOptions: t.unavailableOptions ?? n.unavailableOptions,
+			variant: t.variant ?? n.variant
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/time-picker/time-picker.tsx
+var Te = "(max-width: 480px) and (pointer: coarse)", Ee = {
+	hour: 12,
+	minute: 0,
+	second: 0
+};
+function De({ className: te, clearable: ne = !1, closeOnSelect: Ce, defaultHighlightedValue: m, defaultOpen: h = !1, defaultValue: we, disabled: De, footer: Oe, granularity: ke, highlightedValue: _, hourCycle: Ae, invalid: je, isTimeUnavailable: v, locale: Me, max: y, maxOptions: Ne, messages: Pe, min: b, name: Fe, onHighlightedValueChange: Ie, onKeyDown: x, onOpenChange: Le, onValueChange: Re, open: S, options: ze, placement: Be, presets: Ve, readOnly: He, ref: Ue, referenceTime: We, relative: Ge, render: Ke, renderOption: qe, required: Je, size: Ye, step: Xe, style: Ze, timeZone: Qe, unavailableOptions: $e, value: et, variant: tt, ...nt }) {
+	let C = i(), w = g(), rt = n(), T = r(me, Pe), E = l(null), it = l(null), D = l(null), O = l(null), at = re(), [k, ot] = u(null), [A, st] = u(null), [ct, lt] = u("unmounted"), [j, ut] = u(!1), [M, dt] = u(!1), [ft, pt] = u(h), N = S ?? ft, [mt, ht] = u(we ?? null), P = et ?? mt, F = Me ?? rt, gt = Qe ?? w.timeZone, I = ke ?? w.granularity, L = Ae ?? w.hourCycle, _t = Ye ?? C?.size ?? w.size, vt = tt ?? w.variant, yt = Be ?? w.placement, bt = Ce ?? w.closeOnSelect, xt = Xe ?? w.step, St = Ne ?? w.maxOptions, Ct = $e ?? w.unavailableOptions, R = De ?? C?.disabled, z = He ?? C?.readOnly, wt = Je ?? C?.required, B = R !== !0 && z !== !0, V = c(() => he({
+		granularity: I,
+		hourCycle: L,
+		locale: F
+	}), [
+		I,
+		L,
+		F
+	]), [Tt, Et] = u(() => Ee);
+	s(() => Et(be(gt)), [gt]);
+	let H = We ?? Tt, Dt = P !== null && (!_e(P, b, y) || v?.(P) === !0), Ot = je ?? (Dt ? !0 : C?.invalid), U = c(() => ({
+		isTimeUnavailable: v,
+		max: y,
+		maxOptions: St,
+		min: b,
+		options: ze,
+		step: xt
+	}), [
+		v,
+		y,
+		b,
+		ze,
+		St,
+		xt
+	]), W = c(() => {
+		let e = xe(U);
+		return Ct === "hide" ? e.filter((e) => !e.unavailable) : e;
+	}, [U, Ct]), kt = c(() => ve(U), [U]), At = c(() => W.map((e) => V.format(e.time)), [V, W]), G = o(() => {
+		if (W.length === 0) return -1;
+		let e = ye(W, P ?? H);
+		if (e >= 0 && W[e]?.unavailable !== !0) return e;
+		let t = W.findIndex((e) => !e.unavailable);
+		return t >= 0 ? t : 0;
+	}, [
+		H,
+		P,
+		W
+	]), [jt, Mt] = u(m ?? null), K = _ ?? jt, q = c(() => K === null ? -1 : W.findIndex((e) => p(e.time, K)), [K, W]), J = o((e, t, n) => {
+		a({
+			controlled: _,
+			initial: K,
+			equals: p,
+			onRequest: (e) => Ie?.(e.value, e)
+		}).request(e, t, n) && Mt(e);
+	}, [
+		K,
+		_,
+		Ie
+	]), Y = o((e, t) => {
+		let n = W[Math.max(0, Math.min(W.length - 1, e))];
+		n !== void 0 && J(n.time, "keyboard", t);
+	}, [W, J]), X = o((e, t, n) => {
+		a({
+			controlled: S,
+			initial: N,
+			onRequest: (e) => Le?.(e.value, e)
+		}).request(e, t, n) && pt(e);
+	}, [
+		N,
+		Le,
+		S
+	]), Z = o((e, t) => {
+		a({
+			controlled: et,
+			initial: P,
+			equals: p,
+			onRequest: (e) => Re?.(e.value, e)
+		}).request(e, t.reason, t.source) && ht(e);
+	}, [
+		P,
+		Re,
+		et
+	]), Q = l(null);
+	s(() => {
+		let e = se({
+			present: N,
+			onStatusChange: lt
+		});
+		return Q.current = e, lt(e.status), () => {
+			e.destroy(), Q.current = null;
+		};
+	}, []), s(() => Q.current?.sync(N), [N]), s(() => Q.current?.setNode(k), [k]);
+	let Nt = N || ct !== "unmounted";
+	s(() => {
+		let e = E.current;
+		if (e === null || j) return;
+		let t = () => ut(!0);
+		return e.addEventListener("focusin", t), e.addEventListener("pointerdown", t), () => {
+			e.removeEventListener("focusin", t), e.removeEventListener("pointerdown", t);
+		};
+	}, [j]);
+	let Pt = Nt || j;
+	ae(() => {
+		if (!Pt) {
+			st(null);
+			return;
+		}
+		let e = ce({
+			origin: D.current,
+			disabled: !1
+		});
+		return st(e.container), () => e.release();
+	}, [Pt]), s(() => {
+		if (typeof window > "u" || typeof window.matchMedia != "function") return;
+		let e = window.matchMedia(Te), t = () => dt(e.matches);
+		return t(), e.addEventListener("change", t), () => e.removeEventListener("change", t);
+	}, []), ae(() => {
+		if (k === null || E.current === null || M) return;
+		let e = E.current.querySelector("[data-part=\"control\"]") ?? E.current, [t, n = "center"] = yt.split("-"), r = ue(e, k, {
+			align: n,
+			side: t
+		});
+		return r.update(), () => {
+			r.destroy(), k.removeAttribute("data-positioned");
+		};
+	}, [
+		k,
+		yt,
+		M
+	]), s(() => {
+		if (k === null || !N) return;
+		let e = D.current === null ? [] : [D.current], t = le(k, {
+			branches: e,
+			escape: !0,
+			focusOutside: !1,
+			modal: !1,
+			outsidePress: !0,
+			scrollLock: !1,
+			onDismiss: (e) => {
+				X(!1, e.reason === "escape" ? "escape" : "outsidePress", e.source), e.reason === "escape" && D.current?.focus({ preventScroll: !0 });
+			}
+		});
+		return () => t.destroy();
+	}, [
+		N,
+		k,
+		X
+	]), s(() => {
+		if (!N) return;
+		let e = G();
+		e < 0 || J(W[e]?.time ?? null, "programmatic", void 0);
+	}, [N, W]), s(() => {
+		!N || q < 0 || (O.current?.querySelectorAll("[data-part=\"option\"]")[q])?.scrollIntoView?.({ block: "nearest" });
+	}, [q, N]);
+	let Ft = l(de({ locale: () => F }));
+	s(() => {
+		let e = Ft.current;
+		return () => e.destroy();
+	}, []), ie(Ue, () => ({
+		focus: () => it.current?.focus(),
+		open: () => X(!0, "keyboard", void 0),
+		close: () => X(!1, "keyboard", void 0)
+	}), [X]);
+	let It = P === null ? T("choose") : T("change", { time: V.describe(P) }), Lt = bt !== "never", Rt = o((e, t) => {
+		!e.unavailable && B && (Z(e.time, {
+			reason: "select",
+			source: t
+		}), J(e.time, "pointer", t), Lt && (X(!1, "select", t), D.current?.focus({ preventScroll: !0 })));
+	}, [
+		Lt,
+		B,
+		J,
+		Z,
+		X
+	]), $ = o((e) => {
+		O.current?.querySelectorAll("[data-part=\"option\"]")[e]?.focus();
+	}, []), zt = o((e) => {
+		let t = q >= 0 ? q : G();
+		t < 0 || (Y(t, e), requestAnimationFrame(() => $(t)));
+	}, [
+		$,
+		q,
+		Y,
+		G
+	]), Bt = (e) => {
+		x?.(e), !e.defaultPrevented && B && (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), N || X(!0, "keyboard", e), zt(e));
+	}, Vt = (e) => {
+		if (x?.(e), e.defaultPrevented) return;
+		let t = q >= 0 ? q : 0;
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), Y(t + 1, e), $(Math.min(W.length - 1, t + 1));
+				return;
+			case "ArrowUp":
+				e.preventDefault(), Y(t - 1, e), $(Math.max(0, t - 1));
+				return;
+			case "Home":
+				e.preventDefault(), Y(0, e), $(0);
+				return;
+			case "End":
+				e.preventDefault(), Y(W.length - 1, e), $(W.length - 1);
+				return;
+			case "PageDown": {
+				e.preventDefault();
+				let n = ge(W, t, 1);
+				Y(n, e), $(n);
+				return;
+			}
+			case "PageUp": {
+				e.preventDefault();
+				let n = ge(W, t, -1);
+				Y(n, e), $(n);
+				return;
+			}
+			case "Enter":
+			case " ": {
+				e.preventDefault();
+				let n = W[t];
+				n !== void 0 && Rt(n, e);
+				return;
+			}
+		}
+		if (fe(e.key, Ft.current.query.length > 0)) {
+			let n = Ft.current.match(e.key, At, t);
+			if (n < 0) return;
+			e.preventDefault(), Y(n, e), $(n);
+		}
+	}, Ht = (e) => {
+		x?.(e), !e.defaultPrevented && B && e.altKey && e.key === "ArrowDown" && (e.preventDefault(), X(!0, "keyboard", e));
+	}, Ut = Nt ? /* @__PURE__ */ d("div", {
+		"data-part": "positioner",
+		"data-presentation": M ? "sheet" : "popover",
+		"data-ui": "time-picker",
+		ref: ot,
+		...N ? { "data-open": "" } : {},
+		children: /* @__PURE__ */ f("div", {
+			"aria-label": It,
+			"data-part": "content",
+			id: at,
+			role: "listbox",
+			...kt ? { "aria-description": T("truncated") } : {},
+			children: [
+				Ve === void 0 ? null : /* @__PURE__ */ d("div", {
+					"data-part": "presets",
+					children: Ve
+				}),
+				/* @__PURE__ */ d("div", {
+					"data-part": "head",
+					children: /* @__PURE__ */ d("button", {
+						"data-part": "now",
+						onClick: (e) => Z(H, {
+							reason: "select",
+							source: e
+						}),
+						type: "button",
+						children: T("now")
+					})
+				}),
+				W.length === 0 ? /* @__PURE__ */ d("div", {
+					"data-part": "empty",
+					children: T("empty")
+				}) : /* @__PURE__ */ d("div", {
+					"data-part": "list",
+					onKeyDown: Vt,
+					ref: O,
+					...kt ? { "data-truncated": "" } : {},
+					children: W.map((e, t) => {
+						let n = At[t] ?? "", r = p(e.time, P), i = t === q;
+						return /* @__PURE__ */ d("div", {
+							"aria-disabled": e.unavailable ? !0 : void 0,
+							"aria-selected": r,
+							"data-part": "option",
+							onClick: (t) => Rt(e, t),
+							role: "option",
+							tabIndex: i ? 0 : -1,
+							...e.unavailable ? { "data-disabled": "" } : {},
+							...r ? { "data-selected": "" } : {},
+							...i ? { "data-current": "" } : {},
+							children: qe === void 0 ? n : qe({
+								current: i,
+								label: n,
+								selected: r,
+								time: e.time,
+								unavailable: e.unavailable
+							})
+						}, Se(e.time));
+					})
+				}),
+				Oe === void 0 ? null : /* @__PURE__ */ d("div", {
+					"data-part": "footer",
+					children: Oe
+				})
+			]
+		})
+	}) : null, Wt = /* @__PURE__ */ f(oe, { children: [/* @__PURE__ */ d("div", {
+		"data-part": "control",
+		onKeyDown: Ht,
+		children: /* @__PURE__ */ d(ee, {
+			clearable: ne,
+			disabled: R,
+			end: /* @__PURE__ */ d("button", {
+				"aria-controls": N ? at : void 0,
+				"aria-expanded": N,
+				"aria-haspopup": "listbox",
+				"aria-label": It,
+				"data-part": "trigger",
+				disabled: !B,
+				onClick: (e) => {
+					X(!N, "pointer", e), N || zt(e);
+				},
+				onKeyDown: Bt,
+				ref: D,
+				type: "button",
+				children: /* @__PURE__ */ d(t, { children: /* @__PURE__ */ d(e, { name: "clock" }) })
+			}),
+			granularity: I,
+			invalid: Ot,
+			isTimeUnavailable: v,
+			locale: F,
+			max: y,
+			min: b,
+			name: Fe,
+			onValueChange: (e, t) => Z(e, t),
+			readOnly: z,
+			ref: it,
+			required: wt,
+			size: _t,
+			timeZone: gt,
+			value: P,
+			variant: vt,
+			...L === void 0 ? {} : { hourCycle: L },
+			...We === void 0 ? {} : { referenceTime: We },
+			...Ge === void 0 ? {} : { relative: Ge }
+		})
+	}), A === null ? Ut : null] }), Gt = {
+		...nt,
+		children: Wt,
+		className: te,
+		style: Ze,
+		...R === !0 ? { "data-disabled": "" } : {},
+		...Ot === !0 ? { "data-invalid": "" } : {},
+		...z === !0 ? { "data-readonly": "" } : {},
+		...wt === !0 ? { "data-required": "" } : {},
+		...N ? { "data-open": "" } : {},
+		"data-granularity": I,
+		"data-part": "root",
+		"data-size": _t,
+		"data-ui": "time-picker",
+		"data-variant": vt,
+		ref: E
+	};
+	return /* @__PURE__ */ f(oe, { children: [Ke === void 0 ? /* @__PURE__ */ d("div", { ...Gt }) : Ke(Gt), A === null ? null : pe(Ut, A)] });
+}
+//#endregion
+export { g as a, we as i, m as n, Ce as r, De as t };

package/dist/time-picker.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, r, t as i } from "./time-picker-CRQsMJbQ.js";
+import { a as e, i as t, n, r, t as i } from "./time-picker-D6SlQWNF.js";
 export { n as TIME_PICKER_MAX_OPTIONS, r as TIME_PICKER_STEP, i as TimePicker, t as TimePickerDefaultsProvider, e as useTimePickerDefaults };