@slotted/react 0.1.0-beta.1 → 0.1.0-beta.3

package/dist/dashboard-grid.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, o as r, r as i, t as a } from "./dashboard-grid-nfhEewA4.js";
+import { a as e, i as t, n, o as r, r as i, t as a } from "./dashboard-grid-CBMP_-JV.js";
 export { t as DASHBOARD_GRID_FALLBACK, i as DashboardGrid, e as DashboardGridDefaultsProvider, n as DashboardWidget, r as useDashboardGridDefaults, a as usePersistedDashboardLayout };

package/dist/{data-grid-BUgOJuGp.js → data-grid-BKaGMqIm.js}

@@ -1,27 +1,27 @@
 import { n as e, t } from "./icon-T9Yt4tnm.js";
-import { _ as n, c as r, g as i, n as a, t as o } from "./menu-parts-BQej6eU9.js";
+import { _ as n, c as r, g as i, n as a, t as o } from "./menu-parts-W58pVNUt.js";
 import { n as s, r as c } from "./i18n-DpW8lqJ1.js";
-import { n as l } from "./icon-button-TnvMhK4o.js";
-import { a as u, i as d, n as f, r as p } from "./tooltip-BggqPDcW.js";
-import { t as m } from "./checkbox-CwUOc-3u.js";
+import { n as l } from "./icon-button-CCWkCDMs.js";
+import { a as u, i as d, n as f, r as p } from "./tooltip-DbKTPe_i.js";
+import { t as m } from "./checkbox-DfxFHZaU.js";
 import { i as h } from "./skeleton-2LSpg84Z.js";
-import { t as g } from "./text-field-BktZbmzD.js";
-import { a as _, d as ee, f as te, l as ne, r as re, t as ie } from "./popover-DE22lSpV.js";
+import { t as g } from "./text-field-DLfIZ0fk.js";
+import { a as _, d as ee, f as te, l as ne, r as re, t as ie } from "./popover-Be7JWbGJ.js";
 import { t as v } from "./visually-hidden-CE6u5JLW.js";
 import { i as ae, n as oe, o as se, r as ce, t as le } from "./result-state-CZsQfdN4.js";
-import { t as ue } from "./date-picker-DQ5SIhdA.js";
-import { t as de } from "./date-field-D_kLLTfL.js";
-import { t as fe } from "./date-range-picker-lpB08hK_.js";
-import { t as pe } from "./datetime-picker-0F0kDW-8.js";
-import { t as me } from "./datetime-field-T1gNdJ7t.js";
-import { t as he } from "./datetime-range-picker-ClnEleth.js";
-import { a as ge, i as _e, n as ve, s as ye } from "./multi-select-CfzsvAeI.js";
-import { t as be } from "./number-field-J_koud1r.js";
-import { a as xe, t as Se } from "./segmented-control-Cy_5D3Nj.js";
-import { c as Ce, i as we, n as Te, o as Ee, s as De } from "./select-UTwKjheK.js";
-import { t as Oe } from "./time-picker-DuT1tf5-.js";
-import { t as ke } from "./time-field-DCG_VtGO.js";
-import { t as Ae } from "./time-range-picker-HwBvrrXN.js";
+import { t as ue } from "./date-picker-4X-_2ltN.js";
+import { t as de } from "./date-field-CYcN6diW.js";
+import { t as fe } from "./date-range-picker-CNOAtHwU.js";
+import { t as pe } from "./datetime-picker-HDVlUhzy.js";
+import { t as me } from "./datetime-field-B8TrmsDK.js";
+import { t as he } from "./datetime-range-picker-IqOFJtdW.js";
+import { a as ge, i as _e, n as ve, s as ye } from "./multi-select-DQ5ds0fX.js";
+import { t as be } from "./number-field-BFIAmv-z.js";
+import { a as xe, t as Se } from "./segmented-control-DmuOGiu6.js";
+import { c as Ce, i as we, n as Te, o as Ee, s as De } from "./select-DOFqPy26.js";
+import { t as Oe } from "./time-picker-CRQsMJbQ.js";
+import { t as ke } from "./time-field-DrhiCtUl.js";
+import { t as Ae } from "./time-range-picker-DlZJsj1e.js";
 import { createControllable as je } from "@slotted/core/state";
 import { createContext as Me, createElement as Ne, memo as Pe, useCallback as y, useContext as Fe, useEffect as b, useId as Ie, useImperativeHandle as Le, useLayoutEffect as Re, useMemo as x, useRef as S, useState as C } from "react";
 import { Fragment as ze, jsx as w, jsxs as T } from "react/jsx-runtime";

package/dist/data-grid.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./data-grid-BUgOJuGp.js";
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./data-grid-BKaGMqIm.js";
 export { e as DRAG_COLUMN, n as DataGrid, i as DataGridDefaultsProvider, r as EXPANDER_COLUMN, a as SELECTION_COLUMN, t as useDataGridDefaults, o as usePersistedGridView };

package/dist/{data-list-2xfDpHVC.js → data-list-oICmxGkA.js}

@@ -1,13 +1,13 @@
 import { n as e, t } from "./icon-T9Yt4tnm.js";
-import { _ as n, g as r, h as i, m as a, n as o, o as s, t as c } from "./menu-parts-BQej6eU9.js";
+import { _ as n, g as r, h as i, m as a, n as o, o as s, t as c } from "./menu-parts-W58pVNUt.js";
 import { n as ee, r as te } from "./i18n-DpW8lqJ1.js";
-import { n as l } from "./icon-button-TnvMhK4o.js";
-import { t as ne } from "./checkbox-CwUOc-3u.js";
+import { n as l } from "./icon-button-CCWkCDMs.js";
+import { t as ne } from "./checkbox-DfxFHZaU.js";
 import { i as u, n as d } from "./skeleton-2LSpg84Z.js";
 import { t as f } from "./visually-hidden-CE6u5JLW.js";
 import { n as p, o as re, r as m, t as ie } from "./result-state-CZsQfdN4.js";
-import { n as ae, r as oe } from "./list-C1Y8MWp2.js";
-import { a as se, c as ce, i as le, n as ue, o as de, r as fe, t as pe, u as me } from "./list-item-DN_mcouU.js";
+import { n as ae, r as oe } from "./list-WsQ6ZzCa.js";
+import { a as se, c as ce, i as le, n as ue, o as de, r as fe, t as pe, u as me } from "./list-item-DpCwZIrd.js";
 import { Fragment as he, createContext as ge, useContext as _e, useEffect as ve, useId as ye, useImperativeHandle as be, useLayoutEffect as xe, useMemo as Se, useRef as h, useState as g } from "react";
 import { jsx as _, jsxs as v } from "react/jsx-runtime";
 import { dataListMessages as Ce } from "@slotted/core/i18n";

package/dist/data-list.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "./data-list-2xfDpHVC.js";
+import { n as e, r as t, t as n } from "./data-list-oICmxGkA.js";
 export { n as DataList, e as DataListDefaultsProvider, t as useDataListDefaults };

package/dist/{date-field-D_kLLTfL.js → date-field-CYcN6diW.js}

@@ -1,6 +1,6 @@
 import { n as e, t } from "./icon-T9Yt4tnm.js";
 import { n, r } from "./i18n-DpW8lqJ1.js";
-import { b as i } from "./field-BJh5HI7w.js";
+import { b as i } from "./field-NJaCxl2h.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 ee, jsx as h, jsxs as te } from "react/jsx-runtime";

package/dist/date-field.js

@@ -1,2 +1,2 @@
-import { i as e, n as t, r as n, t as r } from "./date-field-D_kLLTfL.js";
+import { i as e, n as t, r as n, t as r } from "./date-field-CYcN6diW.js";
 export { t as DATE_FIELD_YEAR_PIVOT, r as DateField, n as DateFieldDefaultsProvider, e as useDateFieldDefaults };

package/dist/date-picker-4X-_2ltN.js

@@ -0,0 +1,264 @@
+import { n as e, t } from "./icon-T9Yt4tnm.js";
+import { n, r } from "./i18n-DpW8lqJ1.js";
+import { n as i, r as ee, t as te } from "./calendar-B3mio8iQ.js";
+import { b as ne } from "./field-NJaCxl2h.js";
+import { t as re } from "./date-field-CYcN6diW.js";
+import { tabbables as ie } from "@slotted/core/focus";
+import { createControllable as a } from "@slotted/core/state";
+import { createContext as o, useCallback as s, useContext as c, useEffect as l, useId as ae, useImperativeHandle as oe, useMemo as se, useRef as u, useState as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { createPresence as ce } from "@slotted/core/presence";
+import { createPortalRoot as le } from "@slotted/core/portal";
+import { createDismissableLayer as ue } from "@slotted/core/dismissable-layer";
+import { createPositioner as de } from "@slotted/core/positioner";
+import { createPortal as fe } from "react-dom";
+import { datePickerMessages as pe } from "@slotted/core/i18n";
+import { createDateFormat as me, isDateInRange as he } from "@slotted/core/date";
+//#region src/date-picker/date-picker-defaults.tsx
+var h = o({
+	calendar: "gregory",
+	closeOnSelect: "auto",
+	placement: "bottom-start",
+	size: "md",
+	timeZone: void 0,
+	variant: "outline"
+});
+function g() {
+	return c(h);
+}
+function _({ children: e, ...t }) {
+	let n = g();
+	return /* @__PURE__ */ p(h.Provider, {
+		value: {
+			calendar: t.calendar ?? n.calendar,
+			closeOnSelect: t.closeOnSelect ?? n.closeOnSelect,
+			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-picker/date-picker.tsx
+var ge = "(max-width: 480px) and (pointer: coarse)";
+function _e({ calendar: o, className: c, clearable: h = !1, closeOnSelect: _, defaultOpen: _e = !1, defaultValue: v, defaultView: ve, disabled: ye, firstDayOfWeek: y, fixedWeeks: be = !0, footer: xe, invalid: Se, isDateUnavailable: b, locale: Ce, max: x, messages: we, min: S, months: Te, name: Ee, onKeyDown: De, onOpenChange: C, onValueChange: Oe, open: w, placement: ke, presets: Ae, readOnly: je, ref: Me, render: Ne, required: Pe, selectionMode: Fe = "single", size: Ie, style: Le, timeZone: Re, value: T, variant: ze, weekNumbers: Be, yearPivot: E, ...Ve }) {
+	let D = ne(), O = g(), He = n(), k = r(pe, we), A = u(null), j = u(null), M = u(null), N = ae(), [P, Ue] = d(null), [F, I] = d(null), [We, L] = d("unmounted"), [Ge, R] = d(!1), [z, Ke] = d(!1), [qe, Je] = d(_e), B = u(!1), V = w ?? qe, [H, Ye] = d(v ?? null), U = T ?? H, [W, G] = d(ve ?? "day"), K = Ce ?? He, Xe = Re ?? O.timeZone, Ze = o ?? O.calendar, Qe = Ie ?? D?.size ?? O.size, $e = ze ?? O.variant, et = ke ?? O.placement, tt = _ ?? O.closeOnSelect, q = ye ?? D?.disabled, J = je ?? D?.readOnly, nt = Se ?? (i(T ?? H).some((e) => !he(e, S, x) || b?.(e) === !0) ? !0 : D?.invalid), rt = Pe ?? D?.required, it = q !== !0 && J !== !0, at = se(() => me({ locale: K }), [K]), Y = s((e, t, n) => {
+		a({
+			controlled: w,
+			initial: V,
+			onRequest: (e) => {
+				C?.(e.value, e), B.current = e.value && !e.cancelled;
+			}
+		}).request(e, t, n) && Je(e);
+	}, [
+		V,
+		C,
+		w
+	]), X = s((e, t) => {
+		a({
+			controlled: T,
+			initial: U,
+			equals: () => !1,
+			onRequest: (e) => Oe?.(e.value, e)
+		}).request(e, t.reason, t.source) && Ye(e);
+	}, [
+		U,
+		Oe,
+		T
+	]), [ot] = d(() => v ?? null);
+	l(() => {
+		let e = A.current?.closest("form");
+		if (e == null) return;
+		let t = (e) => X(ot, {
+			reason: "programmatic",
+			source: e
+		});
+		return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
+	}, [ot, X]);
+	let Z = u(null);
+	l(() => {
+		let e = ce({
+			present: V,
+			onStatusChange: L
+		});
+		return Z.current = e, L(e.status), () => {
+			e.destroy(), Z.current = null;
+		};
+	}, []), l(() => Z.current?.sync(V), [V]), l(() => Z.current?.setNode(P), [P]);
+	let Q = We !== "unmounted";
+	l(() => {
+		if (!Q) {
+			I(null);
+			return;
+		}
+		let e = le({
+			origin: M.current,
+			disabled: !1
+		});
+		return I(e.container), () => e.release();
+	}, [Q]), l(() => {
+		if (typeof window > "u" || typeof window.matchMedia != "function") return;
+		let e = window.matchMedia(ge), t = () => Ke(e.matches);
+		return t(), e.addEventListener("change", t), () => e.removeEventListener("change", t);
+	}, []), l(() => {
+		if (P === null || A.current === null || z) return;
+		let e = !0, t = A.current.querySelector("[data-part=\"control\"]") ?? A.current, [n, r = "center"] = et.split("-"), i = de(t, P, {
+			align: r === void 0 ? "center" : r,
+			side: n
+		});
+		return i.update().then(() => {
+			e && R(!0);
+		}), () => {
+			e = !1, i.destroy(), R(!1);
+		};
+	}, [
+		P,
+		et,
+		z
+	]);
+	let $ = u(W);
+	$.current = W, l(() => {
+		if (P === null || !V) return;
+		let e = M.current === null ? [] : [M.current], t = ue(P, {
+			branches: e,
+			escape: !0,
+			focusOutside: !1,
+			modal: !1,
+			outsidePress: !0,
+			scrollLock: !1,
+			onDismiss: (e) => {
+				if (e.reason === "escape" && $.current !== "day") {
+					G($.current === "year" ? "month" : "day");
+					return;
+				}
+				Y(!1, e.reason === "escape" ? "escape" : "outsidePress", e.source), e.reason === "escape" && M.current?.focus({ preventScroll: !0 });
+			}
+		});
+		return () => t.destroy();
+	}, [
+		V,
+		P,
+		Y
+	]), l(() => {
+		P !== null && F !== null && V && B.current && F.contains(P) && (B.current = !1, P.querySelector("[data-part=\"day\"][tabindex=\"0\"]")?.focus({ preventScroll: !0 }));
+	}, [
+		F,
+		V,
+		P
+	]);
+	let st = (e) => {
+		if (e.key !== "Tab" || e.altKey || e.ctrlKey || e.metaKey) return;
+		let t = ie(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());
+	};
+	oe(Me, () => ({
+		focus: () => j.current?.focus(),
+		open: () => Y(!0, "keyboard", void 0),
+		close: () => Y(!1, "keyboard", void 0)
+	}), [Y]);
+	let ct = i(U), lt = ct.length === 0 ? k("choose") : k("change", { date: ct.map((e) => at.describe(e)).join(" – ") }), ut = tt === "always" || tt === "auto" && Fe === "single", dt = (e) => {
+		De?.(e), !e.defaultPrevented && it && e.altKey && e.key === "ArrowDown" && (e.preventDefault(), Y(!0, "keyboard", e));
+	}, ft = ee(U) || Array.isArray(U) ? void 0 : U ?? null, pt = Q ? /* @__PURE__ */ p("div", {
+		"data-part": "positioner",
+		"data-presentation": z ? "sheet" : "popover",
+		"data-ui": "date-picker",
+		ref: Ue,
+		...V ? { "data-open": "" } : {},
+		...Ge ? { "data-positioned": "" } : {},
+		children: /* @__PURE__ */ m("div", {
+			"aria-label": lt,
+			"data-part": "content",
+			id: N,
+			onKeyDown: st,
+			role: "dialog",
+			children: [
+				Ae === void 0 ? null : /* @__PURE__ */ p("div", {
+					"data-part": "presets",
+					children: Ae
+				}),
+				/* @__PURE__ */ p(te, {
+					fixedWeeks: be,
+					isDateUnavailable: b,
+					locale: K,
+					max: x,
+					min: S,
+					months: Te,
+					onValueChange: (e, t) => {
+						X(e, t), ut && (Y(!1, "select", t.source), M.current?.focus({ preventScroll: !0 }));
+					},
+					onViewChange: G,
+					readOnly: J,
+					selectionMode: Fe,
+					timeZone: Xe,
+					value: U,
+					view: W,
+					weekNumbers: Be,
+					...y === void 0 ? {} : { firstDayOfWeek: y }
+				}),
+				xe === void 0 ? null : /* @__PURE__ */ p("div", {
+					"data-part": "footer",
+					children: xe
+				})
+			]
+		})
+	}) : null, mt = /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("div", {
+		"data-part": "control",
+		onKeyDown: dt,
+		children: /* @__PURE__ */ p(re, {
+			calendar: Ze,
+			clearable: h,
+			disabled: q,
+			end: /* @__PURE__ */ p("button", {
+				"aria-controls": V ? N : void 0,
+				"aria-expanded": V,
+				"aria-haspopup": "dialog",
+				"aria-label": lt,
+				"data-part": "trigger",
+				disabled: !it,
+				onClick: (e) => Y(!V, "pointer", e),
+				ref: M,
+				type: "button",
+				children: /* @__PURE__ */ p(t, { children: /* @__PURE__ */ p(e, { name: "calendar" }) })
+			}),
+			invalid: nt,
+			isDateUnavailable: b,
+			locale: K,
+			max: x,
+			min: S,
+			name: Ee,
+			onValueChange: (e, t) => X(e, t),
+			readOnly: J,
+			ref: j,
+			required: rt,
+			size: Qe,
+			timeZone: Xe,
+			variant: $e,
+			...y === void 0 ? {} : { firstDayOfWeek: y },
+			...E === void 0 ? {} : { yearPivot: E },
+			...ft === void 0 ? {} : { value: ft }
+		})
+	}), F === null ? pt : null] }), ht = {
+		...Ve,
+		children: mt,
+		className: c,
+		style: Le,
+		...q === !0 ? { "data-disabled": "" } : {},
+		...nt === !0 ? { "data-invalid": "" } : {},
+		...J === !0 ? { "data-readonly": "" } : {},
+		...rt === !0 ? { "data-required": "" } : {},
+		...V ? { "data-open": "" } : {},
+		"data-calendar": Ze,
+		"data-part": "root",
+		"data-size": Qe,
+		"data-ui": "date-picker",
+		"data-variant": $e,
+		ref: A
+	};
+	return /* @__PURE__ */ m(f, { children: [Ne === void 0 ? /* @__PURE__ */ p("div", { ...ht }) : Ne(ht), F === null ? null : fe(pt, F)] });
+}
+//#endregion
+export { _ as n, g as r, _e as t };

package/dist/date-picker.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "./date-picker-DQ5SIhdA.js";
+import { n as e, r as t, t as n } from "./date-picker-4X-_2ltN.js";
 export { n as DatePicker, e as DatePickerDefaultsProvider, t as useDatePickerDefaults };