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

package/dist/date-range-picker-l7D9XdFz.js

@@ -0,0 +1,501 @@
+import { n as e, t } from "./icon-DMdotKfc.js";
+import { n, r } from "./i18n-DpW8lqJ1.js";
+import { i, t as a } from "./calendar-C5MWMBJ-.js";
+import { b as ee } from "./field-DKA-qsCV.js";
+import { t as o } from "./date-field-BSxzX9I5.js";
+import { keyedProps as te } from "@slotted/core/selector-key";
+import { tabbables as ne } from "@slotted/core/focus";
+import { createControllable as s } from "@slotted/core/state";
+import { createContext as c, useCallback as l, useContext as u, useEffect as d, useId as re, useImperativeHandle as ie, useLayoutEffect as ae, useMemo as f, useRef as p, useState as m } from "react";
+import { Fragment as oe, jsx as h, jsxs as g } 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 { createPortal as de } from "react-dom";
+import { dateRangePickerMessages as fe } from "@slotted/core/i18n";
+import { blockedAround as pe, clampDate as me, compareDate as he, createDateFormat as ge, isDateRefusedInRun as _e, isSameDate as ve, orderedRun as ye, rangeLength as be, rangeProblems as xe, todayIn as Se } from "@slotted/core/date";
+//#region src/date-range-picker/date-range-picker-defaults.tsx
+var Ce = c({
+	calendar: "gregory",
+	closeOnSelect: "auto",
+	count: "days",
+	months: 2,
+	placement: "bottom-start",
+	size: "md",
+	timeZone: void 0,
+	variant: "outline"
+});
+function we() {
+	return u(Ce);
+}
+function Te({ children: e, ...t }) {
+	let n = we();
+	return /* @__PURE__ */ h(Ce.Provider, {
+		value: {
+			calendar: t.calendar ?? n.calendar,
+			closeOnSelect: t.closeOnSelect ?? n.closeOnSelect,
+			count: t.count ?? n.count,
+			months: t.months ?? n.months,
+			placement: t.placement ?? n.placement,
+			size: t.size ?? n.size,
+			timeZone: t.timeZone ?? n.timeZone,
+			variant: t.variant ?? n.variant
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/date-range-picker/date-range-picker.tsx
+var Ee = "(max-width: 480px) and (pointer: coarse)", De = 366, Oe = c(null);
+function _(e) {
+	return e === null || e.start === null && e.end === null ? null : e;
+}
+function v({ calendar: c, className: u, clearable: Ce = !1, closeOnSelect: Te, contiguous: v = !0, count: ke, defaultOpen: Ae = !1, defaultPosition: je = "start", defaultValue: Me, disabled: Ne, endName: Pe, firstDayOfWeek: y, fixedWeeks: Fe = !0, footer: Ie, invalid: Le, isDateUnavailable: b, locale: Re, max: x, maxLength: S, messages: ze, min: C, minLength: w, months: Be, onKeyDown: Ve, onOpenChange: He, onPositionChange: Ue, onValueChange: We, open: Ge, placement: Ke, position: qe, presets: Je, readOnly: Ye, ref: Xe, render: Ze, required: Qe, size: $e, startName: et, style: tt, timeZone: nt, value: T, variant: rt, weekNumbers: it, yearPivot: at, ...ot }) {
+	let E = ee(), D = we(), st = n(), O = r(fe, ze), k = p(null), ct = p(null), lt = p(null), ut = p(null), A = p(null), j = re(), [M, dt] = m(null), [N, ft] = m(null), [pt, mt] = m("unmounted"), [ht, gt] = m(!1), [_t, vt] = m(!1), [yt, bt] = m(Ae), P = Ge ?? yt, [xt, St] = m(_(Me ?? null)), F = T === void 0 ? xt : _(T), [Ct, wt] = m(je), I = qe ?? Ct, [Tt, Et] = m("day"), [L, R] = m(null), [Dt, Ot] = m(null), z = Re ?? st, kt = nt ?? D.timeZone, At = c ?? D.calendar, jt = $e ?? E?.size ?? D.size, Mt = rt ?? D.variant, Nt = Ke ?? D.placement, Pt = Te ?? D.closeOnSelect, B = ke ?? D.count, Ft = Be ?? D.months, It = (e) => O(`${B}.length`, { count: e }), Lt = Ne ?? E?.disabled, V = Ye ?? E?.readOnly, Rt = Qe ?? E?.required, zt = Lt !== !0 && V !== !0, H = F?.start ?? null, U = F?.end ?? null, W = H !== null && U !== null && he(H, U) <= 0, Bt = f(() => xe(F, {
+		contiguous: v,
+		count: B,
+		max: x,
+		maxLength: S,
+		min: C,
+		minLength: w,
+		unavailable: b
+	}), [
+		v,
+		F,
+		b,
+		x,
+		S,
+		C,
+		w,
+		B
+	]), Vt = Le ?? (Bt.length > 0 || E?.invalid), Ht = f(() => ge({ locale: z }), [z]), Ut = f(() => new Intl.DateTimeFormat(z, {
+		day: "numeric",
+		month: "short",
+		timeZone: "UTC"
+	}), [z]), Wt = (e) => Ut.format(Date.UTC(e.year, e.month - 1, e.day)), G = p(!1), K = l((e, t, n, r = !1) => {
+		s({
+			controlled: Ge,
+			initial: P,
+			onRequest: (e) => {
+				He?.(e.value, e), G.current = r && e.value && !e.cancelled;
+			}
+		}).request(e, t, n) && bt(e), e || R(null);
+	}, [
+		P,
+		He,
+		Ge
+	]), q = l((e, t, n) => {
+		let r = _(e);
+		s({
+			controlled: T === void 0 ? void 0 : F,
+			initial: F,
+			equals: (e, t) => i(e, t),
+			onRequest: (e) => We?.(e.value, e)
+		}).request(r, t, n) && St(r);
+	}, [
+		F,
+		We,
+		T
+	]), [Gt] = m(() => _(Me ?? null));
+	d(() => {
+		let e = k.current?.closest("form");
+		if (e == null) return;
+		let t = (e) => {
+			R(null), q(Gt, "programmatic", e);
+		};
+		return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
+	}, [Gt, q]);
+	let J = l((e, t, n) => {
+		s({
+			controlled: qe,
+			initial: I,
+			onRequest: (e) => Ue?.(e.value, e)
+		}).request(e, t, n) && wt(e);
+	}, [
+		I,
+		Ue,
+		qe
+	]), Y = p(null);
+	d(() => {
+		let e = se({
+			present: P,
+			onStatusChange: mt
+		});
+		return Y.current = e, mt(e.status), () => {
+			e.destroy(), Y.current = null;
+		};
+	}, []), d(() => Y.current?.sync(P), [P]), d(() => Y.current?.setNode(M), [M]);
+	let Kt = P || pt !== "unmounted";
+	d(() => {
+		let e = k.current;
+		if (e === null || ht) return;
+		let t = () => gt(!0);
+		return e.addEventListener("focusin", t), e.addEventListener("pointerdown", t), () => {
+			e.removeEventListener("focusin", t), e.removeEventListener("pointerdown", t);
+		};
+	}, [ht]);
+	let qt = Kt || ht;
+	ae(() => {
+		if (!qt) {
+			ft(null);
+			return;
+		}
+		let e = ce({
+			origin: A.current,
+			disabled: !1
+		});
+		return ft(e.container), () => e.release();
+	}, [qt]), d(() => {
+		if (typeof window > "u" || typeof window.matchMedia != "function") return;
+		let e = window.matchMedia(Ee), t = () => vt(e.matches);
+		return t(), e.addEventListener("change", t), () => e.removeEventListener("change", t);
+	}, []), ae(() => {
+		if (M === null || k.current === null || _t) return;
+		let e = k.current.querySelector("[data-part=\"control\"]") ?? k.current, [t, n = "center"] = Nt.split("-"), r = ue(e, M, {
+			align: n,
+			side: t
+		});
+		return r.update(), () => {
+			r.destroy(), M.removeAttribute("data-positioned");
+		};
+	}, [
+		M,
+		Nt,
+		_t
+	]);
+	let Jt = p(Tt);
+	Jt.current = Tt, d(() => {
+		if (M === null || !P) return;
+		let e = A.current === null ? [] : [A.current], t = le(M, {
+			branches: e,
+			escape: !0,
+			focusOutside: !1,
+			modal: !1,
+			outsidePress: !0,
+			scrollLock: !1,
+			onDismiss: (e) => {
+				if (e.reason === "escape" && Jt.current !== "day") {
+					Et(Jt.current === "year" ? "month" : "day");
+					return;
+				}
+				K(!1, e.reason === "escape" ? "escape" : "outsidePress", e.source), e.reason === "escape" && A.current?.focus({ preventScroll: !0 });
+			}
+		});
+		return () => t.destroy();
+	}, [
+		P,
+		M,
+		K
+	]), d(() => {
+		if (!P || M === null || N === null || !G.current || !N.contains(M)) return;
+		G.current = !1;
+		let e = !1, t = requestAnimationFrame(() => {
+			e = !0;
+			let t = ut.current;
+			if (t === null) return;
+			let n = I === "end" ? U : H;
+			n !== null && t.focusDate(n), t.focus();
+		});
+		return () => {
+			e || (cancelAnimationFrame(t), G.current = !0);
+		};
+	}, [
+		N,
+		I,
+		U,
+		P,
+		M,
+		H
+	]);
+	let Yt = (e) => {
+		if (e.key !== "Tab" || e.altKey || e.ctrlKey || e.metaKey) return;
+		let t = ne(e.currentTarget), n = t[0], r = t[t.length - 1];
+		if (n === void 0 || r === void 0) return;
+		let i = e.currentTarget.ownerDocument.activeElement;
+		e.shiftKey && i === n ? (e.preventDefault(), r.focus()) : !e.shiftKey && i === r && (e.preventDefault(), n.focus());
+	}, Xt = l((e) => (e === "end" ? lt : ct).current?.focus(), []);
+	ie(Xe, () => ({
+		focus: (e) => Xt(e ?? I),
+		open: () => K(!0, "keyboard", void 0, !0),
+		close: () => K(!1, "keyboard", void 0)
+	}), [
+		I,
+		Xt,
+		K
+	]);
+	let X = L === null ? I === "end" && H !== null ? {
+		start: H,
+		end: null
+	} : F : {
+		start: L,
+		end: null
+	}, Z = X !== null && !Array.isArray(X) && "start" in X && X.end === null ? X.start : null, Zt = f(() => Z === null || !v ? {
+		before: null,
+		after: null
+	} : pe(Z, b ?? (() => !1), S ?? De), [
+		v,
+		b,
+		S,
+		Z
+	]), Qt = l((e) => Z === null ? b?.(e) === !0 : _e(Z, e, {
+		contiguous: v,
+		count: B,
+		maxLength: S,
+		minLength: w,
+		unavailable: b
+	}, Zt), [
+		Zt,
+		v,
+		b,
+		S,
+		w,
+		Z,
+		B
+	]), Q = Z !== null && Dt !== null ? ye(Z, Dt) : null, $t = Q?.start ?? L ?? H, en = Q?.end ?? (L === null ? U : null), tn = Q !== null && !ve(Q.start, Z), nn = Q !== null && !tn, rn = Q === null ? W ? It(be(H, U, B)) : "" : It(be(Q.start, Q.end, B)), an = w !== void 0 && S !== void 0 ? O(`${B}.between`, {
+		min: w,
+		max: S
+	}) : w === void 0 ? S === void 0 ? null : O(`${B}.atMost`, { max: S }) : O(`${B}.atLeast`, { min: w }), on = W ? O("change", {
+		start: Ht.describe(H),
+		end: Ht.describe(U),
+		length: rn
+	}) : O("choose"), sn = (e, t) => {
+		(Pt === "always" || Pt === "auto" && e) && (K(!1, "select", t), A.current?.focus({ preventScroll: !0 }));
+	}, cn = (e, t) => {
+		if (e !== null && !Array.isArray(e) && "start" in e) {
+			if (e.end === null) {
+				R(e.start), J("end", "select", t.source), sn(!1, t.source);
+				return;
+			}
+			R(null), q(e, "select", t.source), J("start", "select", t.source), sn(!0, t.source);
+		}
+	}, ln = (e, t) => {
+		R(null), q(e, "select", t), J("start", "select", t), sn(!0, t);
+	}, $ = p(!1), un = (e) => (t) => {
+		let n = $.current ? "pointer" : "keyboard";
+		$.current = !1, e !== I && J(e, n, t);
+	}, dn = (e) => {
+		Ve?.(e), !e.defaultPrevented && zt && e.altKey && e.key === "ArrowDown" && (e.preventDefault(), K(!0, "keyboard", e));
+	}, fn = {
+		held: F,
+		choose: ln
+	}, pn = Kt ? /* @__PURE__ */ h("div", {
+		"data-part": "positioner",
+		"data-part-positioner": "",
+		"data-presentation": _t ? "sheet" : "popover",
+		"data-ui": "date-range-picker",
+		"data-ui-date-range-picker": "",
+		ref: dt,
+		...P ? { "data-open": "" } : {},
+		children: /* @__PURE__ */ g("div", {
+			"aria-label": on,
+			"data-part": "content",
+			"data-part-content": "",
+			id: j,
+			onKeyDown: Yt,
+			role: "dialog",
+			children: [
+				/* @__PURE__ */ g("div", {
+					"data-part": "head",
+					"data-part-head": "",
+					children: [
+						/* @__PURE__ */ h("span", {
+							"data-part": "head-start",
+							"data-part-head-start": "",
+							...$t === null ? { "data-placeholder": "" } : {},
+							...tn ? { "data-pending": "" } : {},
+							children: $t === null ? O("start") : Wt($t)
+						}),
+						" – ",
+						/* @__PURE__ */ h("span", {
+							"data-part": "head-end",
+							"data-part-head-end": "",
+							...en === null ? { "data-placeholder": "" } : {},
+							...nn ? { "data-pending": "" } : {},
+							children: en === null ? O("end") : Wt(en)
+						}),
+						/* @__PURE__ */ h("span", {
+							"aria-live": "polite",
+							"data-part": "length",
+							"data-part-length": "",
+							...Q === null ? {} : { "data-pending": "" },
+							children: rn
+						}),
+						an === null ? null : /* @__PURE__ */ h("span", {
+							"data-part": "limit",
+							"data-part-limit": "",
+							children: an
+						})
+					]
+				}),
+				/* @__PURE__ */ g("div", {
+					"data-part": "panels",
+					"data-part-panels": "",
+					children: [Je === void 0 ? null : /* @__PURE__ */ h(Oe.Provider, {
+						value: fn,
+						children: /* @__PURE__ */ h("div", {
+							"data-part": "presets",
+							"data-part-presets": "",
+							children: Je
+						})
+					}), /* @__PURE__ */ h(a, {
+						defaultFocusedDate: me((I === "end" ? U : H) ?? Se(kt), C, x),
+						fixedWeeks: Fe,
+						isDateUnavailable: Qt,
+						locale: z,
+						max: x,
+						min: C,
+						months: Ft,
+						onPreviewChange: Ot,
+						onValueChange: cn,
+						onViewChange: Et,
+						readOnly: V,
+						ref: ut,
+						selectionMode: "range",
+						timeZone: kt,
+						value: X,
+						view: Tt,
+						weekNumbers: it,
+						...y === void 0 ? {} : { firstDayOfWeek: y }
+					})]
+				}),
+				Ie === void 0 ? null : /* @__PURE__ */ h("div", {
+					"data-part": "footer",
+					"data-part-footer": "",
+					children: Ie
+				})
+			]
+		})
+	}) : null, mn = W && (x === void 0 || he(U, x) < 0) ? U : x, hn = W && (C === void 0 || he(H, C) > 0) ? H : C, gn = {
+		calendar: At,
+		disabled: Lt,
+		isDateUnavailable: b,
+		locale: z,
+		readOnly: V,
+		required: Rt,
+		size: jt,
+		timeZone: kt,
+		variant: "plain",
+		...y === void 0 ? {} : { firstDayOfWeek: y },
+		...at === void 0 ? {} : { yearPivot: at }
+	}, _n = /* @__PURE__ */ g(oe, { children: [/* @__PURE__ */ g("div", {
+		"data-part": "control",
+		"data-part-control": "",
+		...E === void 0 ? {} : {
+			"aria-labelledby": E.ids.label,
+			id: E.ids.control,
+			role: "group"
+		},
+		onKeyDown: dn,
+		onPointerDownCapture: () => {
+			$.current = !0;
+		},
+		children: [
+			/* @__PURE__ */ h("div", {
+				"data-part": "start",
+				"data-part-start": "",
+				onFocus: un("start"),
+				...I === "start" ? { "data-current": "" } : {},
+				children: /* @__PURE__ */ h(o, {
+					...gn,
+					"aria-label": O("start"),
+					id: `${j}-start`,
+					max: mn,
+					min: C,
+					name: et,
+					onValueChange: (e, t) => q({
+						start: e,
+						end: U
+					}, t.reason, t.source),
+					ref: ct,
+					value: H
+				})
+			}),
+			/* @__PURE__ */ h("span", {
+				"aria-hidden": "true",
+				"data-part": "separator",
+				"data-part-separator": "",
+				children: "–"
+			}),
+			/* @__PURE__ */ h("div", {
+				"data-part": "end",
+				"data-part-end": "",
+				onFocus: un("end"),
+				...I === "end" ? { "data-current": "" } : {},
+				children: /* @__PURE__ */ h(o, {
+					...gn,
+					"aria-label": O("end"),
+					id: `${j}-end`,
+					invalid: Bt.includes("order") ? !0 : void 0,
+					max: x,
+					min: hn,
+					name: Pe,
+					onValueChange: (e, t) => q({
+						start: H,
+						end: e
+					}, t.reason, t.source),
+					ref: lt,
+					value: U
+				})
+			}),
+			Ce && F !== null ? /* @__PURE__ */ h("button", {
+				"aria-label": O("clear"),
+				"data-part": "clear",
+				"data-part-clear": "",
+				disabled: !zt,
+				onClick: (e) => {
+					q(null, "clear", e), J("start", "clear", e), Xt("start");
+				},
+				type: "button",
+				children: /* @__PURE__ */ h(t, { children: /* @__PURE__ */ h(e, { name: "x" }) })
+			}) : null,
+			/* @__PURE__ */ h("button", {
+				"aria-controls": P ? j : void 0,
+				"aria-expanded": P,
+				"aria-haspopup": "dialog",
+				"aria-label": on,
+				"data-part": "trigger",
+				"data-part-trigger": "",
+				disabled: !zt,
+				onClick: (e) => K(!P, "pointer", e, !0),
+				ref: A,
+				type: "button",
+				children: /* @__PURE__ */ h(t, { children: /* @__PURE__ */ h(e, { name: "calendar" }) })
+			})
+		]
+	}), N === null ? pn : null] }), vn = te({
+		...ot,
+		children: _n,
+		className: u,
+		style: tt,
+		...Lt === !0 ? { "data-disabled": "" } : {},
+		...Vt === !0 ? { "data-invalid": "" } : {},
+		...V === !0 ? { "data-readonly": "" } : {},
+		...Rt === !0 ? { "data-required": "" } : {},
+		...P ? { "data-open": "" } : {},
+		"data-calendar": At,
+		"data-count": B,
+		"data-part": "root",
+		"data-size": jt,
+		"data-ui": "date-range-picker",
+		"data-variant": Mt,
+		ref: k
+	});
+	return /* @__PURE__ */ g(oe, { children: [Ze === void 0 ? /* @__PURE__ */ h("div", { ...vn }) : Ze(vn), N === null ? null : de(pn, N)] });
+}
+function ke({ children: e, onClick: t, ref: n, render: r, value: a, ...ee }) {
+	let o = u(Oe), ne = typeof a == "function" ? a() : a, s = o !== null && i(o.held, ne), c = te({
+		...ee,
+		children: e,
+		"data-part": "preset",
+		...s ? { "data-selected": "" } : {},
+		onClick: (e) => {
+			t?.(e), !e.defaultPrevented && o?.choose(typeof a == "function" ? a() : a, e);
+		},
+		ref: n,
+		type: "button"
+	});
+	return r === void 0 ? /* @__PURE__ */ h("button", { ...c }) : r(c);
+}
+//#endregion
+export { we as i, ke as n, Te as r, v as t };

package/dist/date-range-picker.js

@@ -1,2 +1,2 @@
-import { i as e, n as t, r as n, t as r } from "./date-range-picker-BUKoddmL.js";
+import { i as e, n as t, r as n, t as r } from "./date-range-picker-l7D9XdFz.js";
 export { r as DateRangePicker, n as DateRangePickerDefaultsProvider, t as DateRangePickerPreset, e as useDateRangePickerDefaults };