@mortenbrudvik/waveui 0.13.0 → 0.14.1

package/dist/components/layout/Overflow.mjs

@@ -1,163 +1,62 @@
 "use client";
 import { cn as e } from "../../lib/cn.mjs";
-import { isDev as t, reportMissingContext as n, warnOnce as r } from "../../lib/dev.mjs";
-import { overflowClassNames as i, overflowItemClassNames as a } from "../../lib/classNames.mjs";
-import { useMergedRefs as o } from "../../hooks/useMergedRefs.mjs";
-import * as s from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { flattenChildren as t, isElementOfType as n } from "../../lib/children.mjs";
+import { reportMissingContext as r, warnOnce as i } from "../../lib/dev.mjs";
+import { overflowClassNames as a, overflowDividerClassNames as o, overflowItemClassNames as s } from "../../lib/classNames.mjs";
+import { useEventCallback as c } from "../../hooks/useEventCallback.mjs";
+import { FOCUSABLE_SELECTOR as l, getFirstTabbable as u, isFocusable as d } from "../../lib/focus.mjs";
+import { useMergedRefs as f } from "../../hooks/useMergedRefs.mjs";
+import { mergeProps as p } from "../../lib/mergeProps.mjs";
+import { usePreserveFocus as m } from "../../hooks/usePreserveFocus.mjs";
+import { isCloneableElement as h, unwrapFragment as g } from "../../lib/renderTrigger.mjs";
+import { NO_GROUPS as _, NO_IDS as v, OverflowStore as y, hasResizeObserver as b, sameIds as x } from "./Overflow.store.mjs";
+import * as S from "react";
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
 //#region src/components/layout/Overflow.tsx
-var u = [];
-function d() {
-	return s.useReducer((e) => e + 1, 0)[1];
+function T() {
+	return S.useReducer((e) => e + 1, 0)[1];
 }
-function f() {
-	return typeof ResizeObserver < "u";
-}
-function p(e, t) {
-	return e === t ? 0 : e.compareDocumentPosition(t) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
-}
-var m = {
-	childList: !0,
-	subtree: !0
-};
-function h(e, t) {
-	return e.length === t.length && e.every((e, n) => e === t[n]);
-}
-function g(e) {
-	r(`Overflow:duplicate:${e}`, `Overflow: several items share the itemId "${e}". Item ids must be unique within an Overflow; items with the same itemId are hidden and shown together.`);
-}
-var _ = () => {};
-function v(e) {
-	let t = 0, n = 0, r = e.ownerDocument.defaultView;
-	if (r) {
-		let i = r.getComputedStyle(e);
-		t = (parseFloat(i.paddingLeft) || 0) + (parseFloat(i.paddingRight) || 0), n = parseFloat(i.columnGap) || 0;
-	}
-	return {
-		available: e.clientWidth - t,
-		gap: n
-	};
-}
-var y = class {
-	container = null;
-	button = null;
-	buttonWidth = 0;
-	items = /* @__PURE__ */ new Map();
-	itemIdCounts = /* @__PURE__ */ new Map();
-	widths = /* @__PURE__ */ new WeakMap();
-	listeners = /* @__PURE__ */ new Set();
-	hidden = u;
-	pinned = !1;
-	order = [];
-	connected = !1;
-	observer = null;
-	reorderObserver = null;
-	removeResizeListener = null;
-	subscribe = (e) => (this.listeners.add(e), () => {
-		this.listeners.delete(e);
-	});
-	getSnapshot = () => this.hidden;
-	getServerSnapshot = () => u;
-	getPinned = () => this.pinned;
-	getServerPinned = () => !1;
-	connect = () => {
-		if (this.connected = !0, f()) {
-			this.observer = new ResizeObserver(() => this.measure());
-			for (let e of this.observedElements()) this.observer.observe(e);
-		} else if (typeof window < "u") {
-			let e = () => this.measure();
-			window.addEventListener("resize", e), this.removeResizeListener = () => window.removeEventListener("resize", e);
-		}
-		return typeof MutationObserver < "u" && (this.reorderObserver = new MutationObserver(() => this.checkOrder()), this.container && this.reorderObserver.observe(this.container, m)), this.measure(), () => {
-			this.connected = !1, this.observer?.disconnect(), this.observer = null, this.reorderObserver?.disconnect(), this.reorderObserver = null, this.removeResizeListener?.(), this.removeResizeListener = null;
-		};
-	};
-	setContainer = (e) => {
-		e !== this.container && (this.container && this.observer?.unobserve(this.container), this.container = e, e && this.observer?.observe(e), this.reorderObserver && (this.reorderObserver.disconnect(), e && this.reorderObserver.observe(e, m)), this.measure());
-	};
-	checkOrder = () => {
-		let e = this.order;
-		for (let t = 1; t < e.length; t++) if (p(e[t - 1], e[t]) > 0) {
-			this.measure();
-			return;
-		}
-	};
-	setButton = (e) => {
-		e !== this.button && (this.button && this.observer?.unobserve(this.button), this.button = e, e && this.observer?.observe(e), this.measure());
-	};
-	registerItem(e, t) {
-		return this.items.set(e, t), this.observer?.observe(e), this.measure(), () => {
-			this.items.get(e) === t && (this.items.delete(e), this.observer?.unobserve(e), this.measure());
-		};
-	}
-	registerItemId = (e) => {
-		if (!t) return _;
-		let n = this.itemIdCounts, r = (n.get(e) ?? 0) + 1;
-		return n.set(e, r), r > 1 && g(e), () => {
-			let t = (n.get(e) ?? 1) - 1;
-			t > 0 ? n.set(e, t) : n.delete(e);
-		};
-	};
-	observedElements() {
-		let e = Array.from(this.items.keys());
-		return this.container && e.push(this.container), this.button && e.push(this.button), e;
-	}
-	measure() {
-		let e = this.container;
-		if (!this.connected || !e) return;
-		let t = Array.from(this.items).filter(([t]) => t.isConnected && e.contains(t)).sort(([e], [t]) => p(e, t));
-		this.order = t.map(([e]) => e);
-		for (let [e] of t) e.hasAttribute("data-overflow-hidden") || this.widths.set(e, e.offsetWidth);
-		this.button?.isConnected && (this.buttonWidth = this.button.offsetWidth);
-		let { available: n, gap: r } = v(e), i = t.map(([e]) => this.widths.get(e) ?? 0), a = i.reduce((e, t, n) => e + t + (n > 0 ? r : 0), 0), o = u, s = !1;
-		if (a > n) {
-			let e = n - (this.buttonWidth > 0 ? this.buttonWidth + r : 0), a = 0, c = t.length;
-			for (let n = 0; n < t.length; n++) {
-				let t = a + i[n] + (n > 0 ? r : 0);
-				if (n > 0 && t > e) {
-					c = n;
-					break;
-				}
-				a = t;
-			}
-			o = t.slice(c).map(([, e]) => e), s = o.length > 0 && i[0] + this.buttonWidth > n;
-		}
-		let c = !h(o, this.hidden);
-		if (c || s !== this.pinned) {
-			c && (this.hidden = o.length > 0 ? o : u), this.pinned = s;
-			for (let e of Array.from(this.listeners)) e();
-		}
-	}
-}, b = s.createContext(null), x = {
+var E = S.createContext(null), D = {
 	store: /* @__PURE__ */ new y(),
-	hiddenIds: u,
-	hiddenSet: /* @__PURE__ */ new Set()
+	hiddenIds: v,
+	hiddenSet: /* @__PURE__ */ new Set(),
+	groupVisibility: _,
+	direction: "end",
+	orientation: "horizontal",
+	hasHiddenItems: !1
 };
-function S(e) {
-	return s.useContext(b) || (n(e, "Overflow"), x);
+function O(e) {
+	return S.useContext(E) || (r(e, "Overflow"), D);
 }
-function C() {
-	let { hiddenIds: e } = S("useOverflowMenu");
-	return s.useMemo(() => ({
+function k() {
+	let { hiddenIds: e } = O("useOverflowMenu");
+	return S.useMemo(() => ({
 		hiddenIds: [...e],
 		count: e.length
 	}), [e]);
 }
-function w(e) {
-	let { hiddenSet: t } = S("useIsOverflowItemVisible");
+function A(e) {
+	let { hiddenSet: t } = O("useIsOverflowItemVisible");
 	return !t.has(e);
 }
-function T(e) {
+function j(e) {
+	let { groupVisibility: t } = O("useIsOverflowGroupVisible");
+	return t[e] ?? "visible";
+}
+function M() {
+	return O("useHasHiddenItems").hasHiddenItems;
+}
+function N(e) {
 	return e.nodeType === Node.ELEMENT_NODE;
 }
-function E(e, t, n) {
+function P(e, t, n) {
 	for (let r of n) r.type === "childList" && r.target === t && (r.removedNodes.forEach((t) => {
-		T(t) && e.unobserve(t);
+		N(t) && e.unobserve(t);
 	}), r.addedNodes.forEach((n) => {
-		T(n) && n.parentNode === t && e.observe(n);
+		N(n) && n.parentNode === t && e.observe(n);
 	}));
 }
-var D = class {
+var F = class {
 	element = null;
 	value = !1;
 	listeners = /* @__PURE__ */ new Set();
@@ -174,7 +73,7 @@ var D = class {
 		this.teardown?.(), this.teardown = null, this.element = null;
 	}
 	observe(e) {
-		let t = () => this.check(), n = [], r = f() ? new ResizeObserver(t) : null;
+		let t = () => this.check(), n = [], r = b() ? new ResizeObserver(t) : null;
 		if (r) {
 			r.observe(e);
 			for (let t of Array.from(e.children)) r.observe(t);
@@ -182,7 +81,7 @@ var D = class {
 		} else typeof window < "u" && (window.addEventListener("resize", t), n.push(() => window.removeEventListener("resize", t)));
 		if (typeof MutationObserver < "u") {
 			let i = new MutationObserver((n) => {
-				r && E(r, e, n), t();
+				r && P(r, e, n), t();
 			});
 			i.observe(e, {
 				childList: !0,
@@ -200,71 +99,220 @@ var D = class {
 		}
 	}
 };
-function O(e) {
+function I(e) {
 	return typeof e == "object" && !!e && "current" in e;
 }
-function k(e) {
-	let [t] = s.useState(() => new D()), n = s.useSyncExternalStore(t.subscribe, t.getSnapshot, t.getServerSnapshot), r = d();
-	return s.useLayoutEffect(() => {
+function L(e) {
+	let [t] = S.useState(() => new F()), n = S.useSyncExternalStore(t.subscribe, t.getSnapshot, t.getServerSnapshot), r = T();
+	return S.useLayoutEffect(() => {
 		let n = t.subscribe(r);
-		t.setElement(O(e) ? e.current : e), n();
-	}), s.useLayoutEffect(() => () => t.disconnect(), [t]), n;
+		t.setElement(I(e) ? e.current : e), n();
+	}), S.useLayoutEffect(() => () => t.disconnect(), [t]), n;
+}
+var R = {
+	horizontal: "items-center",
+	vertical: "flex-col items-start"
+}, z = {
+	horizontal: "flex shrink-0 items-center self-stretch",
+	vertical: "flex shrink-0 flex-col items-start self-stretch"
+}, B = {
+	end: {
+		horizontal: "sticky -end-1 flex shrink-0 items-center self-stretch ps-1 data-[overflow-pinned]:bg-background data-[overflow-pinned]:pe-1",
+		vertical: "sticky -bottom-1 flex shrink-0 items-center self-stretch pt-1 data-[overflow-pinned]:bg-background data-[overflow-pinned]:pb-1"
+	},
+	"before-hidden": {
+		horizontal: "sticky -end-1 flex shrink-0 items-center self-stretch data-[overflow-pinned]:bg-background data-[overflow-pinned]:pe-1",
+		vertical: "sticky -bottom-1 flex shrink-0 items-center self-stretch data-[overflow-pinned]:bg-background data-[overflow-pinned]:pb-1"
+	}
+}, V = "wave-overflow-button";
+function H(e) {
+	return d(e) ? e : u(e) ?? Array.from(e.querySelectorAll(l)).find(d) ?? null;
+}
+function U(e, t) {
+	let n = new Set(t), r = e.findIndex(({ id: e }) => n.has(e)), i = r < 0 ? [...e].reverse() : [
+		...e.filter(({ id: e }) => n.has(e)),
+		...e.slice(0, r).reverse(),
+		...e.slice(r).filter(({ id: e }) => !n.has(e))
+	];
+	for (let { element: e } of i) {
+		let t = H(e);
+		if (t) return t;
+	}
+	return null;
+}
+function W({ store: e, hiddenIds: t, buttonRef: n, ...r }) {
+	let i = S.useRef(null), a = f(n, i), o = S.useRef(v);
+	return S.useLayoutEffect(() => {
+		o.current = t;
+	}), m(i, () => U(e.getItemElements(), o.current)), /* @__PURE__ */ C("div", {
+		ref: a,
+		...r
+	});
+}
+W.displayName = "OverflowButtonSlot";
+function G(e, r, i) {
+	let a = t(e).map(({ key: e, node: t }) => S.isValidElement(t) ? S.cloneElement(t, { key: e }) : t);
+	if (!r) return {
+		nodes: a,
+		missing: !1
+	};
+	let o = i === void 0 ? -1 : a.findIndex((e) => n(e, q) && e.props.itemId === i);
+	return a.splice(o < 0 ? a.length : o, 0, r), {
+		nodes: a,
+		missing: i !== void 0 && o < 0
+	};
 }
-var A = ({ overflowButton: t, children: n, className: r, ref: a, ...u }) => {
-	let [f] = s.useState(() => new y()), p = s.useSyncExternalStore(f.subscribe, f.getSnapshot, f.getServerSnapshot), m = s.useSyncExternalStore(f.subscribe, f.getPinned, f.getServerPinned), h = s.useCallback((e) => f.setContainer(e), [f]), g = s.useCallback((e) => f.setButton(e), [f]), _ = o(a, h), v = d();
-	s.useLayoutEffect(() => {
-		let e = f.subscribe(v), t = f.connect();
+var K = ({ overflowButton: t, buttonPosition: n = "end", overflowDirection: r = "end", orientation: o = "horizontal", minimumVisible: s = 0, hasHiddenItems: l = !1, onOverflowChange: u, children: d, className: p, ref: m, ...h }) => {
+	let [g] = S.useState(() => new y()), _ = S.useSyncExternalStore(g.subscribe, g.getSnapshot, g.getServerSnapshot), b = S.useSyncExternalStore(g.subscribe, g.getMeasured, g.getServerFlag), D = S.useSyncExternalStore(g.subscribe, g.getButtonCovers, g.getServerFlag), O = S.useSyncExternalStore(g.subscribe, g.getGroups, g.getServerGroups), k = S.useCallback((e) => g.setContainer(e), [g]), A = S.useCallback((e) => g.setButton(e), [g]), j = f(m, k), M = T();
+	S.useLayoutEffect(() => {
+		g.setConfig({
+			direction: r,
+			orientation: o,
+			minimumVisible: s,
+			hasHiddenItems: l
+		});
+	}, [
+		g,
+		r,
+		o,
+		s,
+		l
+	]), S.useLayoutEffect(() => {
+		let e = g.subscribe(M), t = g.connect();
 		return e(), t;
-	}, [f, v]), s.useLayoutEffect(() => {
-		f.checkOrder();
+	}, [g, M]), S.useLayoutEffect(() => {
+		g.checkOrder();
 	});
-	let x = s.useMemo(() => new Set(p), [p]), S = s.useMemo(() => [...p], [p]), C = s.useMemo(() => ({
-		store: f,
-		hiddenIds: p,
-		hiddenSet: x
+	let N = S.useMemo(() => new Set(_), [_]), P = S.useMemo(() => [..._], [_]), F = _.length, I = S.useMemo(() => ({
+		store: g,
+		hiddenIds: _,
+		hiddenSet: N,
+		groupVisibility: O,
+		direction: r,
+		orientation: o,
+		hasHiddenItems: F > 0
 	}), [
-		f,
-		p,
-		x
-	]), w = p.length;
-	return /* @__PURE__ */ c(b.Provider, {
-		value: C,
-		children: /* @__PURE__ */ l("div", {
-			ref: _,
-			className: e(i.root, "flex items-center overflow-hidden p-1", r),
-			...u,
-			children: [n, w > 0 && t && /* @__PURE__ */ c("div", {
-				ref: g,
-				"data-overflow-button": "",
-				"data-overflow-pinned": m ? "" : void 0,
-				className: e(i.overflowButton, "sticky -end-1 flex shrink-0 items-center self-stretch ps-1 data-[overflow-pinned]:bg-background data-[overflow-pinned]:pe-1"),
-				children: t(w, S)
-			})]
+		g,
+		_,
+		N,
+		O,
+		r,
+		o,
+		F
+	]), L = c(u), z = S.useRef(v), H = t !== void 0;
+	S.useEffect(() => {
+		let e = g.getSnapshot();
+		x(e, _) && g.isSettled(H) && (x(e, z.current) || (z.current = e, L([...e], {
+			visibleItems: g.getVisibleIds(),
+			groupVisibility: Object.assign(Object.create(null), g.getGroups())
+		})));
+	}, [
+		g,
+		_,
+		H,
+		L
+	]);
+	let U = (F > 0 || l && !b) && t ? /* @__PURE__ */ C(W, {
+		store: g,
+		hiddenIds: _,
+		buttonRef: A,
+		role: h.role === "list" ? "listitem" : void 0,
+		"data-overflow-button": "",
+		"data-overflow-pinned": D ? "" : void 0,
+		className: e(a.overflowButton, B[n][o]),
+		children: t(F, P)
+	}, V) : null, K = n === "before-hidden" ? G(d, U, _[0]) : null, q = K?.missing ?? !1;
+	return S.useEffect(() => {
+		q && i("Overflow:button-position", "Overflow: buttonPosition=\"before-hidden\" puts the button before the first hidden item only when that item is a child of the Overflow (Fragments and arrays are opened), not one rendered by another component; the button is rendered after the items instead.");
+	}, [q]), /* @__PURE__ */ C(E.Provider, {
+		value: I,
+		children: /* @__PURE__ */ w("div", {
+			ref: j,
+			className: e(a.root, "flex overflow-hidden p-1", R[o], p),
+			"data-orientation": o,
+			"data-overflow-direction": r,
+			"data-button-position": n,
+			...h,
+			children: [K ? K.nodes : d, K ? null : U]
 		})
 	});
 };
-A.displayName = "Overflow";
-var j = ({ itemId: t, children: n, className: r, style: i, ref: l, "aria-hidden": u, inert: d, ...f }) => {
-	let { store: p, hiddenSet: m } = S("OverflowItem"), h = m.has(t);
-	s.useEffect(() => p.registerItemId(t), [p, t]);
-	let g = s.useCallback((e) => e ? p.registerItem(e, t) : void 0, [p, t]), _ = o(l, g);
-	return /* @__PURE__ */ c("div", {
-		ref: _,
-		className: e(a.root, "shrink-0", r),
-		...f,
-		style: h ? {
+K.displayName = "Overflow";
+var q = ({ itemId: t, priority: n, pinned: r = !1, groupId: a, asChild: o = !1, children: c, className: l, style: u, ref: d, "aria-hidden": m, inert: _, ...v }) => {
+	let { store: y, hiddenSet: b } = O("OverflowItem"), x = b.has(t);
+	S.useEffect(() => y.registerItemId(t), [y, t]);
+	let w = o ? g(c) : void 0, T = h(w) ? w : null, { ref: E, ...D } = (T ? T.props : null) ?? {}, k = o && T === null && c != null;
+	S.useEffect(() => {
+		k && i("Overflow.Item:as-child-children", "Overflow.Item: asChild expects a single React element child (not text or several elements); the children are rendered inside a <div> instead.");
+	}, [k]);
+	let A = S.useCallback((e) => e ? y.registerItem(e, t) : void 0, [y, t]), j = S.useRef(null), M = f(d, A, j, E);
+	S.useLayoutEffect(() => {
+		j.current && y.setItemMeta(j.current, n, r, a);
+	});
+	let N = e(s.root, "shrink-0", l);
+	if (T) {
+		let e = x ? {
+			"aria-hidden": !0,
+			inert: !0,
+			"data-overflow-hidden": ""
+		} : {};
+		!x && m !== void 0 && (e["aria-hidden"] = m), !x && _ !== void 0 && (e.inert = _);
+		let t = p({
+			...v,
+			...e,
+			className: N,
+			style: u
+		}, D, { oursWin: [
+			"aria-hidden",
+			"inert",
+			"data-overflow-hidden"
+		] }), n = t.style;
+		return S.cloneElement(T, {
+			...t,
+			ref: M,
+			style: x ? {
+				...n,
+				display: "none"
+			} : n
+		});
+	}
+	return /* @__PURE__ */ C("div", {
+		ref: M,
+		className: N,
+		...v,
+		style: x ? {
+			...u,
+			display: "none"
+		} : u,
+		"aria-hidden": x ? !0 : m,
+		inert: x ? !0 : _,
+		"data-overflow-hidden": x ? "" : void 0,
+		children: c
+	});
+};
+q.displayName = "OverflowItem";
+var J = ({ groupId: t, children: n, className: r, style: i, ref: a, "aria-hidden": s, inert: c, ...l }) => {
+	let { store: u, groupVisibility: d, orientation: p } = O("OverflowDivider"), m = d[t] === "hidden", h = S.useCallback((e) => e ? u.registerDivider(e, t) : void 0, [u, t]), g = f(a, h);
+	return /* @__PURE__ */ C("div", {
+		ref: g,
+		className: e(o.root, z[p], r),
+		...l,
+		style: m ? {
 			...i,
 			display: "none"
 		} : i,
-		"aria-hidden": h ? !0 : u,
-		inert: h ? !0 : d,
-		"data-overflow-hidden": h ? "" : void 0,
+		"aria-hidden": m ? !0 : s,
+		inert: m ? !0 : c,
+		"data-overflow-hidden": m ? "" : void 0,
 		children: n
 	});
 };
-j.displayName = "OverflowItem";
-var M = /* @__PURE__ */ Object.assign(A, { Item: j });
+J.displayName = "OverflowDivider";
+var Y = /* @__PURE__ */ Object.assign(K, {
+	Item: q,
+	Divider: J
+});
 //#endregion
-export { M as Overflow, j as OverflowItem, w as useIsOverflowItemVisible, k as useIsOverflowing, C as useOverflowMenu };
+export { Y as Overflow, J as OverflowDivider, q as OverflowItem, M as useHasHiddenItems, j as useIsOverflowGroupVisible, A as useIsOverflowItemVisible, L as useIsOverflowing, k as useOverflowMenu };
 
 //# sourceMappingURL=Overflow.mjs.map