@solostylist/ui-kit 2.0.2 → 2.0.3

package/dist/s-mega-menu/mega-menu-panel.js

@@ -1,14 +1,12 @@
 import { toSxArray as e } from "../utils/sx.js";
 import { resolveOwnerStateSlotProps as t } from "../utils/slots.js";
-import { t as n } from "../useForkRef-BuNFTXxE.js";
-import { t as r } from "../useEventCallback-DGCsaRIu.js";
-import { t as i } from "../appendOwnerState-CFQTq3pb.js";
-import { t as a } from "../mergeSlotProps-DC8r4QzS.js";
-import { t as o } from "../ChevronRight-DsPfsFKB.js";
-import { LIST_ATTRIBUTE as s, NODE_ATTRIBUTE as c, PANEL_ATTRIBUTE as l, ROW_ATTRIBUTE as u, focusAdjacentList as d, focusRowByOffset as f, getFirstRow as p, getSiblingRows as m, hasNestedChildren as h, resolveLayout as g, resolveSubmenuSide as _ } from "./utils.js";
-import { SMegaMenuColumn as v, SMegaMenuHeading as y, SMegaMenuItemRoot as b, SMegaMenuPanel as x, SMegaMenuSubmenu as S, SMegaMenuSubmenuNode as C } from "./mega-menu-slots.js";
-import * as w from "react";
-import { jsx as T, jsxs as E } from "react/jsx-runtime";
+import { LIST_ATTRIBUTE as n, NODE_ATTRIBUTE as r, PANEL_ATTRIBUTE as i, ROW_ATTRIBUTE as a, focusAdjacentList as o, focusRowByOffset as s, getFirstRow as c, getSiblingRows as l, hasNestedChildren as u, resolveLayout as d, resolveSubmenuSide as f } from "./utils.js";
+import { SMegaMenuColumn as p, SMegaMenuHeading as m, SMegaMenuItemRoot as h, SMegaMenuPanel as g, SMegaMenuSubmenu as _, SMegaMenuSubmenuNode as v } from "./mega-menu-slots.js";
+import * as y from "react";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+import { mergeSlotProps as S, useEventCallback as C, useForkRef as w } from "@mui/material/utils";
+import T from "@mui/utils/appendOwnerState";
+import E from "@mui/icons-material/ChevronRight";
 //#region lib/s-mega-menu/mega-menu-panel.tsx
 function D(e, t, n) {
 	return {
@@ -19,43 +17,43 @@ function D(e, t, n) {
 		...n
 	};
 }
-function O({ closeParent: e, ctx: s, depth: c, item: l, onOpenSubmenu: p, onRowClick: h, open: g = !1, resolvedLayout: _, rowRef: v, side: y = "right", submenuId: x, triggerId: S }) {
-	let C = D(s, l, {
-		depth: c,
+function O({ closeParent: e, ctx: n, depth: r, item: i, onOpenSubmenu: c, onRowClick: u, open: d = !1, resolvedLayout: f, rowRef: p, side: m = "right", submenuId: g, triggerId: _ }) {
+	let v = D(n, i, {
+		depth: r,
 		heading: !1,
-		open: g,
-		resolvedLayout: _,
-		side: y
-	}), w = s.slots?.item ?? b, E = C.hasChildren, O = r((t) => {
-		let n = t.currentTarget;
+		open: d,
+		resolvedLayout: f,
+		side: m
+	}), y = n.slots?.item ?? h, x = v.hasChildren, O = C((t) => {
+		let r = t.currentTarget;
 		switch (t.key) {
 			case "ArrowDown":
-				t.preventDefault(), f(m(n), n, 1);
+				t.preventDefault(), s(l(r), r, 1);
 				break;
 			case "ArrowUp":
-				t.preventDefault(), f(m(n), n, -1);
+				t.preventDefault(), s(l(r), r, -1);
 				break;
 			case "Home":
-				t.preventDefault(), m(n)[0]?.focus();
+				t.preventDefault(), l(r)[0]?.focus();
 				break;
 			case "End": {
 				t.preventDefault();
-				let e = m(n);
+				let e = l(r);
 				e[e.length - 1]?.focus();
 				break;
 			}
 			case "ArrowRight":
-				t.preventDefault(), p ? p() : d(n, 1);
+				t.preventDefault(), c ? c() : o(r, 1);
 				break;
 			case "ArrowLeft":
-				t.preventDefault(), e ? e() : d(n, -1) || s.closeMenu({
+				t.preventDefault(), e ? e() : o(r, -1) || n.closeMenu({
 					event: t,
 					focusTrigger: !0,
 					reason: "triggerKeyDown"
 				});
 				break;
 			case "Escape":
-				t.preventDefault(), s.closeMenu({
+				t.preventDefault(), n.closeMenu({
 					event: t,
 					focusTrigger: !0,
 					reason: "escapeKeyDown"
@@ -63,145 +61,145 @@ function O({ closeParent: e, ctx: s, depth: c, item: l, onOpenSubmenu: p, onRowC
 				break;
 			default: break;
 		}
-	}), k = E ? void 0 : l.component ?? (l.href ? s.linkComponent : void 0), A = E ? void 0 : l.href, { slotProps: j, ...M } = t(s.slotProps?.item, C) ?? {}, { ref: N, ...P } = i(w, a(M, {
-		[u]: "",
-		"aria-controls": E ? x : void 0,
-		"aria-current": C.active && A ? "page" : void 0,
-		"aria-expanded": E ? g : void 0,
+	}), k = x ? void 0 : i.component ?? (i.href ? n.linkComponent : void 0), A = x ? void 0 : i.href, { slotProps: j, ...M } = t(n.slotProps?.item, v) ?? {}, { ref: N, ...P } = T(y, S(M, {
+		[a]: "",
+		"aria-controls": x ? g : void 0,
+		"aria-current": v.active && A ? "page" : void 0,
+		"aria-expanded": x ? d : void 0,
 		component: k,
-		description: l.description,
-		disabled: l.disabled,
+		description: i.description,
+		disabled: i.disabled,
 		href: A,
-		icon: l.icon,
-		onClick: h,
+		icon: i.icon,
+		onClick: u,
 		onKeyDown: O,
-		rel: A ? l.rel : void 0,
-		selected: C.active,
+		rel: A ? i.rel : void 0,
+		selected: v.active,
 		slotProps: {
 			...j,
-			label: a(j?.label, { variant: c === 0 ? "body1" : "body2" }),
-			trailing: a(j?.trailing, { sx: { color: "inherit" } })
+			label: S(j?.label, { variant: r === 0 ? "body1" : "body2" }),
+			trailing: S(j?.trailing, { sx: { color: "inherit" } })
 		},
-		target: A ? l.target : void 0,
-		trailing: E ? /* @__PURE__ */ T(o, { fontSize: "small" }) : void 0,
-		id: S,
-		variant: _ === "columns" ? "plain" : "inset"
-	}), C), F = n(N, v);
-	return /* @__PURE__ */ T(w, {
+		target: A ? i.target : void 0,
+		trailing: x ? /* @__PURE__ */ b(E, { fontSize: "small" }) : void 0,
+		id: _,
+		variant: f === "columns" ? "plain" : "inset"
+	}), v), F = w(N, p);
+	return /* @__PURE__ */ b(y, {
 		...P,
 		ref: F,
-		label: s.renderItem ? s.renderItem(l, C) : l.label
+		label: n.renderItem ? n.renderItem(i, v) : i.label
 	});
 }
-function k({ closeParent: o, ctx: s, depth: l, item: u, onSubmenuOpenChange: d, open: f = !1, resolvedLayout: m }) {
-	let h = w.useRef(null), g = w.useRef(null), v = w.useRef(null), y = w.useRef(void 0), b = w.useRef(!1), [x, k] = w.useState("right"), A = w.useId(), M = `${A}-submenu`, N = `${A}-trigger`, P = u.children ?? [], F = w.useCallback(() => {
-		y.current &&= (clearTimeout(y.current), void 0);
+function k({ closeParent: n, ctx: i, depth: a, item: o, onSubmenuOpenChange: s, open: l = !1, resolvedLayout: u }) {
+	let d = y.useRef(null), p = y.useRef(null), m = y.useRef(null), h = y.useRef(void 0), g = y.useRef(!1), [E, k] = y.useState("right"), A = y.useId(), M = `${A}-submenu`, N = `${A}-trigger`, P = o.children ?? [], F = y.useCallback(() => {
+		h.current &&= (clearTimeout(h.current), void 0);
 	}, []);
-	w.useEffect(() => F, [F]);
-	let I = r(() => {
-		k(_(h.current, g.current));
+	y.useEffect(() => F, [F]);
+	let I = C(() => {
+		k(f(d.current, p.current));
 	});
-	w.useLayoutEffect(() => {
-		f && (I(), b.current && (b.current = !1, p(g.current)?.focus()));
-	}, [f, I]);
-	let L = r(() => {
-		F(), !u.disabled && (I(), d?.(!0));
-	}), R = r(() => {
-		F(), y.current = setTimeout(() => d?.(!1), s.ownerState.closeDelay);
-	}), z = r((e) => {
-		F(), d?.(!1), e && v.current?.focus();
-	}), B = r(() => {
-		if (f) {
-			p(g.current)?.focus();
+	y.useLayoutEffect(() => {
+		l && (I(), g.current && (g.current = !1, c(p.current)?.focus()));
+	}, [l, I]);
+	let L = C(() => {
+		F(), !o.disabled && (I(), s?.(!0));
+	}), R = C(() => {
+		F(), h.current = setTimeout(() => s?.(!1), i.ownerState.closeDelay);
+	}), z = C((e) => {
+		F(), s?.(!1), e && m.current?.focus();
+	}), B = C(() => {
+		if (l) {
+			c(p.current)?.focus();
 			return;
 		}
-		b.current = !0, L();
-	}), V = r(() => {
-		if (!f) {
+		g.current = !0, L();
+	}), V = C(() => {
+		if (!l) {
 			L();
 			return;
 		}
 		z(!1);
-	}), H = D(s, u, {
-		depth: l,
+	}), H = D(i, o, {
+		depth: a,
 		heading: !1,
-		open: f,
-		resolvedLayout: m,
-		side: x
-	}), U = s.slots?.submenuNode ?? C, W = s.slots?.submenu ?? S, G = r((e) => {
+		open: l,
+		resolvedLayout: u,
+		side: E
+	}), U = i.slots?.submenuNode ?? v, W = i.slots?.submenu ?? _, G = C((e) => {
 		let t = e.relatedTarget;
 		!t || e.currentTarget.contains(t) || z(!1);
-	}), { ref: K, ...q } = i(U, a(t(s.slotProps?.submenuNode, H), {
-		[c]: "",
-		"data-side": x,
+	}), { ref: K, ...q } = T(U, S(t(i.slotProps?.submenuNode, H), {
+		[r]: "",
+		"data-side": E,
 		onBlurCapture: G,
 		onFocus: I,
 		onPointerEnter: (e) => {
-			!u.disabled && e.pointerType !== "touch" && L();
+			!o.disabled && e.pointerType !== "touch" && L();
 		},
 		onPointerLeave: (e) => {
 			e.pointerType !== "touch" && R();
 		}
-	}), H), J = n(K, h), { ref: Y, sx: X, ...Z } = i(W, a(t(s.slotProps?.submenu, H), {
-		"aria-hidden": f ? void 0 : !0,
+	}), H), J = w(K, d), { ref: Y, sx: X, ...Z } = T(W, S(t(i.slotProps?.submenu, H), {
+		"aria-hidden": l ? void 0 : !0,
 		"aria-labelledby": N,
 		id: M,
 		role: "region"
-	}), H), Q = n(Y, g);
-	return /* @__PURE__ */ E(U, {
+	}), H), Q = w(Y, p);
+	return /* @__PURE__ */ x(U, {
 		...q,
 		ref: J,
-		children: [/* @__PURE__ */ T(O, {
-			closeParent: o,
-			ctx: s,
-			depth: l,
-			item: u,
+		children: [/* @__PURE__ */ b(O, {
+			closeParent: n,
+			ctx: i,
+			depth: a,
+			item: o,
 			onOpenSubmenu: B,
 			onRowClick: V,
-			open: f,
-			resolvedLayout: m,
-			rowRef: v,
-			side: x,
+			open: l,
+			resolvedLayout: u,
+			rowRef: m,
+			side: E,
 			submenuId: M,
 			triggerId: N
-		}), /* @__PURE__ */ T(W, {
+		}), /* @__PURE__ */ b(W, {
 			...Z,
 			ref: Q,
 			sx: [...e(X)],
-			children: f || s.keepMounted ? /* @__PURE__ */ T(j, {
+			children: l || i.keepMounted ? /* @__PURE__ */ b(j, {
 				closeParent: () => z(!0),
-				ctx: s,
-				depth: l + 1,
+				ctx: i,
+				depth: a + 1,
 				items: P
 			}) : null
 		})]
 	});
 }
-function A({ closeParent: e, ctx: n, depth: r, item: o }) {
-	let c = D(n, o, {
-		depth: r,
+function A({ closeParent: e, ctx: r, depth: i, item: a }) {
+	let o = D(r, a, {
+		depth: i,
 		heading: !0,
 		open: !1,
 		resolvedLayout: "columns",
 		side: "right"
-	}), l = `${w.useId()}-heading`, u = n.slots?.column ?? v, d = n.slots?.heading ?? y, f = i(u, a(t(n.slotProps?.column, c), {
-		[s]: "",
-		"aria-labelledby": l
-	}), c), p = i(d, a(t(n.slotProps?.heading, c), {
+	}), s = `${y.useId()}-heading`, c = r.slots?.column ?? p, l = r.slots?.heading ?? m, u = T(c, S(t(r.slotProps?.column, o), {
+		[n]: "",
+		"aria-labelledby": s
+	}), o), d = T(l, S(t(r.slotProps?.heading, o), {
 		component: "h3",
-		id: l
-	}), c);
-	return /* @__PURE__ */ E(u, {
-		...f,
-		children: [/* @__PURE__ */ T(d, {
-			...p,
-			children: n.renderItem ? n.renderItem(o, c) : o.label
-		}), (o.children ?? []).map((t) => /* @__PURE__ */ T(O, {
+		id: s
+	}), o);
+	return /* @__PURE__ */ x(c, {
+		...u,
+		children: [/* @__PURE__ */ b(l, {
+			...d,
+			children: r.renderItem ? r.renderItem(a, o) : a.label
+		}), (a.children ?? []).map((t) => /* @__PURE__ */ b(O, {
 			closeParent: e,
-			ctx: n,
-			depth: r + 1,
+			ctx: r,
+			depth: i + 1,
 			item: t,
-			onRowClick: (e) => n.closeMenu({
+			onRowClick: (e) => r.closeMenu({
 				event: e,
 				reason: "itemClick"
 			}),
@@ -209,43 +207,43 @@ function A({ closeParent: e, ctx: n, depth: r, item: o }) {
 		}, t.id))]
 	});
 }
-function j({ closeParent: n, ctx: r, depth: o, items: c }) {
-	let u = g(c, r.ownerState.layout), [d, f] = w.useState(null), p = u === "columns" || !h(c), m = {
-		...r.ownerState,
+function j({ closeParent: r, ctx: a, depth: o, items: s }) {
+	let c = d(s, a.ownerState.layout), [l, f] = y.useState(null), p = c === "columns" || !u(s), m = {
+		...a.ownerState,
 		depth: o,
-		resolvedLayout: u,
+		resolvedLayout: c,
 		scrollable: p
-	}, _ = r.slots?.panel ?? x, { sx: v, ...y } = i(_, a(t(r.slotProps?.panel, m), {
-		[l]: "",
-		...u === "list" ? { [s]: "" } : {}
+	}, h = a.slots?.panel ?? g, { sx: _, ...v } = T(h, S(t(a.slotProps?.panel, m), {
+		[i]: "",
+		...c === "list" ? { [n]: "" } : {}
 	}), m);
-	return /* @__PURE__ */ T(_, {
-		...y,
-		sx: [...e(v)],
-		children: u === "columns" ? c.map((e) => /* @__PURE__ */ T(A, {
-			closeParent: n,
-			ctx: r,
+	return /* @__PURE__ */ b(h, {
+		...v,
+		sx: [...e(_)],
+		children: c === "columns" ? s.map((e) => /* @__PURE__ */ b(A, {
+			closeParent: r,
+			ctx: a,
 			depth: o,
 			item: e,
-			resolvedLayout: u
-		}, e.id)) : c.map((e) => e.children?.length ? /* @__PURE__ */ T(k, {
-			closeParent: n,
-			ctx: r,
+			resolvedLayout: c
+		}, e.id)) : s.map((e) => e.children?.length ? /* @__PURE__ */ b(k, {
+			closeParent: r,
+			ctx: a,
 			depth: o,
 			item: e,
 			onSubmenuOpenChange: (t) => f((n) => t ? e.id : n === e.id ? null : n),
-			open: d === e.id,
-			resolvedLayout: u
-		}, e.id) : /* @__PURE__ */ T(O, {
-			closeParent: n,
-			ctx: r,
+			open: l === e.id,
+			resolvedLayout: c
+		}, e.id) : /* @__PURE__ */ b(O, {
+			closeParent: r,
+			ctx: a,
 			depth: o,
 			item: e,
-			onRowClick: (e) => r.closeMenu({
+			onRowClick: (e) => a.closeMenu({
 				event: e,
 				reason: "itemClick"
 			}),
-			resolvedLayout: u
+			resolvedLayout: c
 		}, e.id))
 	});
 }

package/dist/s-mega-menu/mega-menu-trigger.js

@@ -1,2 +1,49 @@
-import { t as e } from "../mega-menu-trigger-BcOo8I5_.js";
-export { e as MegaMenuTriggerButton };
+import { resolveOwnerStateSlotProps as e } from "../utils/slots.js";
+import { TRIGGER_ATTRIBUTE as t } from "./utils.js";
+import { SMegaMenuTrigger as n, SMegaMenuTriggerArrow as r } from "./mega-menu-slots.js";
+import * as i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { mergeSlotProps as s, useForkRef as c } from "@mui/material/utils";
+import l from "@mui/utils/appendOwnerState";
+import u from "@mui/icons-material/KeyboardArrowDown";
+//#region lib/s-mega-menu/mega-menu-trigger.tsx
+function d({ active: d, hasPanel: f, item: p, linkComponent: m, onClick: h, onFocus: g, onKeyDown: _, onPointerEnter: v, onPointerLeave: y, open: b, ownerState: x, panelId: S, registerRef: C, renderTrigger: w, slotProps: T, slots: E, triggerId: D }) {
+	let O = {
+		...x,
+		active: d,
+		hasPanel: f,
+		item: p,
+		open: b
+	}, k = E?.trigger ?? n, A = E?.triggerArrow ?? r, j = f || !p.href ? "button" : p.component ?? m ?? "a", { ref: M, ...N } = l(k, s(e(T?.trigger, O), {
+		[t]: "",
+		"aria-controls": b ? S : void 0,
+		"aria-current": d && !f ? "page" : void 0,
+		"aria-expanded": f ? b : void 0,
+		component: j,
+		disabled: p.disabled,
+		href: f ? void 0 : p.href,
+		id: D,
+		nativeButton: j === "button",
+		onClick: h,
+		onFocus: g,
+		onKeyDown: _,
+		onPointerEnter: v,
+		onPointerLeave: y,
+		rel: p.rel,
+		target: p.target
+	}), O), P = l(A, e(T?.triggerArrow, O) ?? {}, O), F = c(M, i.useCallback((e) => C(p.id, e), [p.id, C]));
+	return /* @__PURE__ */ a(k, {
+		...N,
+		ref: F,
+		children: w ? w(p, O) : /* @__PURE__ */ o(i.Fragment, { children: [
+			p.icon,
+			/* @__PURE__ */ a("span", { children: p.label }),
+			f ? /* @__PURE__ */ a(A, {
+				...P,
+				children: /* @__PURE__ */ a(u, { fontSize: "small" })
+			}) : null
+		] })
+	});
+}
+//#endregion
+export { d as MegaMenuTriggerButton };