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

package/dist/multi-select.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, d as n, i as r, l as i, n as a, o, r as s, s as c, t as l, u } from "./multi-select-B8z6ApgW.js";
+import { a as e, c as t, d as n, i as r, l as i, n as a, o, r as s, s as c, t as l, u } from "./multi-select-BwBY-V0x.js";
 export { i as MULTI_SELECT_FALLBACK, c as MultiSelect, r as MultiSelectContent, e as MultiSelectControl, u as MultiSelectDefaultsProvider, l as MultiSelectGroup, a as MultiSelectItem, s as MultiSelectSeparator, o as NARROW_WIDTH, t as useMultiSelect, n as useMultiSelectDefaults };

package/dist/navigation-menu-parts-BH_bD_nB.js

@@ -0,0 +1,492 @@
+import { n as e, t } from "./icon-DMdotKfc.js";
+import { r as n } from "./i18n-DpW8lqJ1.js";
+import { keyedProps as r, withSelectorKey as i } from "@slotted/core/selector-key";
+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, useLayoutEffect as f, useMemo as p, useReducer as m, useRef as h, useState as g } from "react";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+import { createPresence as b } from "@slotted/core/presence";
+import { createDismissableLayer as x } from "@slotted/core/dismissable-layer";
+import { navigationMenuMessages as ee } from "@slotted/core/i18n";
+import { createHoverIntent as te, focusTarget as S, measureViewport as C, motionBetween as ne, writeGeometry as w } from "@slotted/core/navigation-menu";
+//#region src/navigation-menu/navigation-menu-defaults.tsx
+var T = {
+	arrow: !1,
+	closeDelay: 300,
+	closeOnSelect: !0,
+	openDelay: 200,
+	size: "md"
+}, E = o(T);
+function D() {
+	return c(E);
+}
+function re({ children: e, ...t }) {
+	let n = D(), r = p(() => ({
+		arrow: t.arrow ?? n.arrow,
+		closeDelay: t.closeDelay ?? n.closeDelay,
+		closeOnSelect: t.closeOnSelect ?? n.closeOnSelect,
+		openDelay: t.openDelay ?? n.openDelay,
+		size: t.size ?? n.size
+	}), [
+		t.arrow,
+		t.closeDelay,
+		t.closeOnSelect,
+		t.openDelay,
+		t.size,
+		n
+	]);
+	return /* @__PURE__ */ v(E.Provider, {
+		value: r,
+		children: e
+	});
+}
+//#endregion
+//#region src/navigation-menu/navigation-menu.tsx
+var ie = 8, O = o(void 0), k = o(!1);
+function A() {
+	let e = c(O);
+	if (e === void 0) throw Error("Every navigation-menu part must be rendered inside NavigationMenu.");
+	return e;
+}
+var j = ":scope > [data-part=\"list\"] > [data-part=\"item\"]";
+function ae({ arrow: e, children: t, className: i, closeDelay: o, closeOnSelect: u, defaultValue: m, messages: b, onBlur: T, onKeyDown: E, onPointerEnter: re, onPointerLeave: A, onValueChange: ae, openDelay: M, orientation: oe, ref: N, render: P, size: se, style: ce, value: F, ...I }) {
+	let L = D(), R = c(O), z = c(k), B = R !== void 0 && z, le = n(ee, b), V = e ?? L.arrow, H = o ?? L.closeDelay, U = u ?? L.closeOnSelect, W = M ?? L.openDelay, G = oe ?? (B ? "vertical" : "horizontal"), ue = se ?? L.size, [de, fe] = g(m ?? null), K = F === void 0 ? de : F, [q, pe] = g(null), [me, he] = g(!1), [ge, _e] = g(!1), J = h(/* @__PURE__ */ new Map()), ve = s((e, t) => (J.current.set(e, t), () => {
+		J.current.get(e) === t && J.current.delete(e);
+	}), []), ye = s(() => {
+		let e = Y.current.currentValue, t = e === null ? void 0 : J.current.get(e);
+		return t === void 0 ? null : q?.ownerDocument.getElementById(t) ?? null;
+	}, [q]), [be, xe] = g(0), [Se, Ce] = g({
+		from: null,
+		to: K,
+		enter: null,
+		exit: null
+	}), Y = h({
+		currentValue: K,
+		onValueChange: ae,
+		value: F
+	});
+	Y.current = {
+		currentValue: K,
+		onValueChange: ae,
+		value: F
+	};
+	let X = s((e, t, n) => {
+		a({
+			controlled: Y.current.value,
+			initial: Y.current.currentValue,
+			onRequest: (e) => Y.current.onValueChange?.(e.value, e)
+		}).request(e, t, n) && fe(e);
+	}, []), we = s((e) => {
+		B && R !== void 0 ? R.select(e) : X(null, "select", e);
+	}, [
+		B,
+		R,
+		X
+	]), Z = s(() => xe((e) => e + 1), []), Te = h(K);
+	f(() => {
+		let e = Te.current;
+		if (e === K) return;
+		Te.current = K;
+		let t = q === null ? [] : [...q.querySelectorAll(j)].map((e) => e.dataset.value ?? "");
+		Ce({
+			from: e,
+			to: K,
+			...ne(t, e, K)
+		});
+	}, [K, q]);
+	let Q = h(!1);
+	f(() => {
+		if (q === null) return;
+		if (K === null) {
+			Q.current = !1;
+			return;
+		}
+		let e = q.querySelector(`${j}[data-value="${CSS.escape(K)}"]`), t = e?.querySelector(":scope > [data-part=\"trigger\"]"), n = e?.querySelector(":scope > [data-part=\"content\"]");
+		if (_e(!!(t && n)), !t || !n) {
+			Q.current = !1;
+			return;
+		}
+		let r = C(q, t, n, G, ie);
+		if (B) {
+			let e = q.querySelector(":scope > [data-part=\"list\"]");
+			r.blockSize = Math.max(r.blockSize, e?.offsetHeight ?? 0);
+		}
+		let i = !Q.current;
+		i && q.style.setProperty("transition", "none"), w(q, r), i && (q.offsetWidth, q.style.removeProperty("transition")), Q.current = !0, he(!0), B && R?.remeasure();
+	}, [
+		K,
+		B,
+		R,
+		G,
+		q,
+		be
+	]), l(() => {
+		if (q === null || K === null || typeof ResizeObserver > "u") return;
+		let e = q.querySelector(`${j}[data-value="${CSS.escape(K)}"] > [data-part="content"]`), t = new ResizeObserver(Z);
+		e && t.observe(e);
+		let n = q.ownerDocument.defaultView;
+		return n?.addEventListener("resize", Z), () => {
+			t.disconnect(), n?.removeEventListener("resize", Z);
+		};
+	}, [
+		K,
+		Z,
+		q
+	]), l(() => {
+		if (q === null || K === null || B) return;
+		let e = ye(), t = x(q, {
+			...e !== null && !q.contains(e) ? { branches: [e] } : {},
+			escape: !0,
+			focusOutside: !1,
+			modal: !1,
+			outsidePress: !0,
+			scrollLock: !1,
+			onDismiss: (e) => {
+				let t = e.reason === "escape" ? "escape" : "outsidePress", n = q.querySelector(`${j}[data-value="${CSS.escape(Y.current.currentValue ?? "")}"] > [data-part="trigger"]`);
+				X(null, t, e.source), t === "escape" && n?.focus();
+			}
+		});
+		return () => t.destroy();
+	}, [
+		K,
+		B,
+		ye,
+		X,
+		q
+	]);
+	let $ = p(() => te({
+		openDelay: W,
+		closeDelay: H,
+		isOpen: () => Y.current.currentValue !== null,
+		open: (e) => X(e, "pointer"),
+		close: () => X(null, "pointer")
+	}), [
+		X,
+		H,
+		W
+	]);
+	l(() => () => $.destroy(), [$]);
+	let Ee = s((e, t) => $.enter(e, t), [$]), De = (e) => {
+		re?.(e), $.stay();
+	}, Oe = (e) => {
+		A?.(e), !B && e.pointerType !== "touch" && $.leave();
+	}, ke = (e) => {
+		if (T?.(e), B || q === null) return;
+		let t = e.relatedTarget;
+		(t === null || !q.contains(t) && !ye()?.contains(t)) && Y.current.currentValue !== null && X(null, "blur", e.nativeEvent);
+	}, Ae = (e) => {
+		if (E?.(e), e.defaultPrevented || q === null) return;
+		let t = e.target, n = t.closest("[data-ui=\"navigation-menu\"]"), r = t.closest("[data-part=\"content\"]")?.closest("[data-ui=\"navigation-menu\"]");
+		if (n !== q && r !== q) return;
+		let i = S(q, t, e.key, {
+			orientation: G,
+			dir: getComputedStyle(q).direction === "rtl" ? "rtl" : "ltr"
+		});
+		i !== null && (e.preventDefault(), i.focus());
+	};
+	d(N, () => ({
+		open: (e) => X(e, "programmatic"),
+		close: () => X(null, "programmatic"),
+		focus: (e) => {
+			if (q === null) return;
+			let t = e === void 0 ? `${j} > :is([data-part="trigger"], [data-part="link"])` : `${j}[data-value="${CSS.escape(e)}"] > :is([data-part="trigger"], [data-part="link"])`;
+			q.querySelector(t)?.focus();
+		},
+		root: q
+	}), [X, q]);
+	let je = p(() => ({
+		arrow: V,
+		closeOnSelect: U,
+		hover: Ee,
+		motion: Se,
+		nested: B,
+		orientation: G,
+		register: ve,
+		remeasure: Z,
+		request: X,
+		root: q,
+		select: we,
+		value: K
+	}), [
+		K,
+		Ee,
+		Se,
+		B,
+		ve,
+		Z,
+		X,
+		V,
+		U,
+		G,
+		q,
+		we
+	]), Me = B ? null : /* @__PURE__ */ v("div", {
+		"data-part": "viewport",
+		"data-part-viewport": "",
+		...K !== null && ge ? { "data-open": "" } : {},
+		...me ? { "data-positioned": "" } : {},
+		children: V ? /* @__PURE__ */ v("span", {
+			"aria-hidden": "true",
+			"data-part": "arrow",
+			"data-part-arrow": ""
+		}) : null
+	}), Ne = r({
+		...I,
+		...B ? {} : { "aria-label": I["aria-label"] ?? le("navigation") },
+		children: /* @__PURE__ */ y(_, { children: [t, Me] }),
+		className: i,
+		...B ? { "data-nested": "" } : {},
+		"data-orientation": G,
+		"data-part": "root",
+		"data-size": ue,
+		"data-ui": "navigation-menu",
+		onBlur: ke,
+		onKeyDown: Ae,
+		onPointerEnter: De,
+		onPointerLeave: Oe,
+		ref: pe,
+		style: ce
+	}), Pe = B ? "div" : "nav";
+	return /* @__PURE__ */ v(O.Provider, {
+		value: je,
+		children: /* @__PURE__ */ v(k.Provider, {
+			value: B,
+			children: P === void 0 ? /* @__PURE__ */ v(Pe, { ...Ne }) : P(Ne)
+		})
+	});
+}
+//#endregion
+//#region src/navigation-menu/navigation-menu-parts.tsx
+function M(e, ...t) {
+	for (let n of t) typeof n == "function" ? n(e) : n != null && (n.current = e);
+}
+function oe(e) {
+	return e.detail === 0 ? "keyboard" : "pointer";
+}
+var N = o(void 0);
+function P() {
+	let e = c(N);
+	if (e === void 0) throw Error("NavigationMenuTrigger and NavigationMenuContent must be rendered inside NavigationMenuItem.");
+	return e;
+}
+function se({ children: e, ref: t, render: n, ...i }) {
+	let a = r({
+		...i,
+		children: e,
+		"data-part": "list"
+	});
+	return n === void 0 ? /* @__PURE__ */ v("ul", {
+		...a,
+		ref: t
+	}) : n(a);
+}
+function ce({ children: e, disabled: t = !1, ref: n, render: i, value: a, ...o }) {
+	let d = A(), f = c(N), m = u(), [h, _] = g(null), [y, b] = g(() => /* @__PURE__ */ new Set()), x = d.value === a, { register: ee } = d;
+	l(() => ee(a, m), [
+		m,
+		ee,
+		a
+	]);
+	let te = s((e, t) => {
+		b((n) => {
+			if (n.has(e) === t) return n;
+			let r = new Set(n);
+			return t ? r.add(e) : r.delete(e), r;
+		});
+	}, []), S = y.size > 0, C = f?.reportCurrent;
+	l(() => {
+		if (C !== void 0) return C(m, S), () => C(m, !1);
+	}, [
+		m,
+		S,
+		C
+	]);
+	let ne = p(() => ({
+		contentId: m,
+		disabled: t,
+		hasCurrent: y.size > 0,
+		open: x,
+		reportCurrent: te,
+		setTrigger: _,
+		trigger: h,
+		value: a
+	}), [
+		m,
+		y,
+		t,
+		x,
+		te,
+		h,
+		a
+	]), w = r({
+		...o,
+		children: e,
+		...t ? { "data-disabled": "" } : {},
+		...x ? { "data-open": "" } : {},
+		"data-part": "item",
+		"data-value": a
+	});
+	return /* @__PURE__ */ v(N.Provider, {
+		value: ne,
+		children: i === void 0 ? /* @__PURE__ */ v("li", {
+			...w,
+			ref: n
+		}) : i(w)
+	});
+}
+function F({ children: n, disabled: r, onClick: a, onPointerEnter: o, ref: s, ...c }) {
+	let l = A(), u = P(), d = r ?? u.disabled, f = l.orientation === "vertical", p = (e) => {
+		a?.(e), !(e.defaultPrevented || d) && l.request(u.open ? null : u.value, oe(e), e.nativeEvent);
+	}, m = (e) => {
+		o?.(e), !(e.defaultPrevented || d) && (l.root === null || l.root.contains(e.currentTarget)) && l.hover(u.value, e.pointerType);
+	};
+	return /* @__PURE__ */ y("button", {
+		type: "button",
+		...c,
+		"aria-controls": u.contentId,
+		"aria-expanded": u.open,
+		...u.open ? { "data-open": "" } : {},
+		...i(u.hasCurrent ? { "data-current": "" } : {}, "part", "trigger"),
+		disabled: d,
+		onClick: p,
+		onPointerEnter: m,
+		ref: (e) => M(e, u.setTrigger, s),
+		children: [n, /* @__PURE__ */ v("span", {
+			"aria-hidden": "true",
+			"data-part": "indicator",
+			"data-part-indicator": "",
+			children: /* @__PURE__ */ v(t, {
+				directional: f,
+				children: /* @__PURE__ */ v(e, { name: f ? "chevron-right" : "chevron-down" })
+			})
+		})]
+	});
+}
+function I({ children: e, columns: t = 1, ref: n, render: i, ...a }) {
+	let o = A(), s = P(), [, c] = m((e) => e + 1, 0), [u] = g(() => b({
+		present: s.open,
+		onStatusChange: () => c()
+	}));
+	f(() => u.sync(s.open), [s.open, u]), l(() => () => u.stop(), [u]);
+	let { motion: d } = o, p = !s.open && u.status === "exiting", h = s.open && d.to === s.value ? d.enter : p && d.from === s.value ? d.exit : null, _ = r({
+		...a,
+		children: e,
+		"data-columns": String(t),
+		...h ? { "data-motion": h } : {},
+		...s.open ? { "data-open": "" } : {},
+		"data-part": "content",
+		hidden: !s.open && !u.mounted,
+		id: s.contentId
+	});
+	return /* @__PURE__ */ v(k.Provider, {
+		value: !0,
+		children: i === void 0 ? /* @__PURE__ */ v("div", {
+			..._,
+			ref: (e) => M(e, u.setNode, n)
+		}) : i(_)
+	});
+}
+function L({ children: e, closeOnSelect: t, current: n, disabled: i = !1, onClick: a, ref: o, render: s, ...d }) {
+	let f = A(), p = c(N), m = c(k), h = u(), g = n ?? d["aria-current"] === "page", _ = p?.reportCurrent;
+	l(() => {
+		if (m && _ !== void 0) return _(h, g), () => _(h, !1);
+	}, [
+		m,
+		g,
+		h,
+		_
+	]);
+	let y = (e) => {
+		if (i) {
+			e.preventDefault();
+			return;
+		}
+		a?.(e), !e.defaultPrevented && m && (t ?? f.closeOnSelect) && f.select(e.nativeEvent);
+	}, b = r({
+		...d,
+		...g ? {
+			"aria-current": "page",
+			"data-current": ""
+		} : {},
+		...i ? {
+			"aria-disabled": "true",
+			"data-disabled": ""
+		} : {},
+		children: e,
+		"data-part": "link",
+		onClick: y,
+		ref: (e) => M(e, o)
+	});
+	return s === void 0 ? /* @__PURE__ */ v("a", { ...b }) : s(b);
+}
+function R({ children: e, ref: t, render: n, ...i }) {
+	let a = r({
+		...i,
+		children: e,
+		"data-part": "links"
+	});
+	return n === void 0 ? /* @__PURE__ */ v("ul", {
+		...a,
+		ref: t
+	}) : n(a);
+}
+var z = o(void 0);
+function B({ children: e, ref: t, render: n, ...i }) {
+	let a = u(), o = r({
+		...i,
+		"aria-labelledby": i["aria-labelledby"] ?? a,
+		children: e,
+		"data-part": "group",
+		role: "group"
+	});
+	return /* @__PURE__ */ v(z.Provider, {
+		value: a,
+		children: n === void 0 ? /* @__PURE__ */ v("div", {
+			...o,
+			ref: t
+		}) : n(o)
+	});
+}
+function le({ children: e, ref: t, render: n, ...i }) {
+	let a = c(z), o = r({
+		...i,
+		children: e,
+		"data-part": "group-label",
+		...a !== void 0 && i.id === void 0 ? { id: a } : {}
+	});
+	return n === void 0 ? /* @__PURE__ */ v("div", {
+		...o,
+		ref: t
+	}) : n(o);
+}
+function V({ children: e, ref: t, render: n, ...i }) {
+	let a = r({
+		...i,
+		children: e,
+		"data-part": "footer"
+	});
+	return n === void 0 ? /* @__PURE__ */ v("div", {
+		...a,
+		ref: t
+	}) : n(a);
+}
+function H({ children: e, ...t }) {
+	return /* @__PURE__ */ v("span", {
+		"aria-hidden": "true",
+		...i(t, "part", "icon"),
+		children: e
+	});
+}
+function U({ children: e, ...t }) {
+	return /* @__PURE__ */ v("span", {
+		...i(t, "part", "label"),
+		children: e
+	});
+}
+function W({ children: e, ...t }) {
+	return /* @__PURE__ */ v("span", {
+		...i(t, "part", "description"),
+		children: e
+	});
+}
+//#endregion
+export { re as _, le as a, U as c, se as d, F as f, T as g, A as h, B as i, L as l, ae as m, W as n, H as o, P as p, V as r, ce as s, I as t, R as u, D as v };

package/dist/navigation-menu.js

@@ -1,2 +1,2 @@
-import { _ as e, a as t, c as n, d as r, f as i, g as a, h as o, i as s, l as c, m as l, n as u, o as d, p as f, r as p, s as m, t as h, u as g, v as _ } from "./navigation-menu-parts-Cn-OAadu.js";
+import { _ as e, a as t, c as n, d as r, f as i, g as a, h as o, i as s, l as c, m as l, n as u, o as d, p as f, r as p, s as m, t as h, u as g, v as _ } from "./navigation-menu-parts-BH_bD_nB.js";
 export { a as NAVIGATION_MENU_FALLBACK, l as NavigationMenu, h as NavigationMenuContent, e as NavigationMenuDefaultsProvider, u as NavigationMenuDescription, p as NavigationMenuFooter, s as NavigationMenuGroup, t as NavigationMenuGroupLabel, d as NavigationMenuIcon, m as NavigationMenuItem, n as NavigationMenuLabel, c as NavigationMenuLink, g as NavigationMenuLinks, r as NavigationMenuList, i as NavigationMenuTrigger, o as useNavigationMenu, _ as useNavigationMenuDefaults, f as useNavigationMenuItem };