@solostylist/ui-kit 2.0.0 → 2.0.2

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

@@ -0,0 +1,232 @@
+import { actionHoverMedia as e, getFocusVisibleStyle as t, reducedMotionMedia as n } from "../theme/components/action-styles.js";
+import { SListActionItem as r } from "../s-list-action-item/s-list-action-item.js";
+import { SPopover as i } from "../s-popover/s-popover.js";
+import { Box as a, ButtonBase as o, Paper as s, Typography as c, styled as l } from "@mui/material";
+//#region lib/s-mega-menu/mega-menu-slots.tsx
+var u = 44, d = .75, f = l("nav", {
+	name: "SMegaMenu",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	alignItems: "center",
+	display: "flex",
+	flexWrap: "nowrap",
+	gap: e.spacing(1.25),
+	minWidth: 0,
+	[e.breakpoints.down("lg")]: { gap: e.spacing(.75) }
+})), p = l(o, {
+	name: "SMegaMenu",
+	slot: "Trigger",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: r }) => ({
+	...r.typography.body1,
+	alignItems: "center",
+	backgroundColor: "transparent",
+	border: "1px solid transparent",
+	borderRadius: r.radius.md,
+	color: (r.vars ?? r).palette.text.primary,
+	display: "inline-flex",
+	gap: r.spacing(1.25),
+	minHeight: u,
+	minWidth: 0,
+	padding: r.spacing(.75, 1.5),
+	position: "relative",
+	textDecoration: "none",
+	transition: r.transitions.create([
+		"background-color",
+		"border-color",
+		"color"
+	], { duration: r.transitions.duration.shorter }),
+	whiteSpace: "nowrap",
+	[e]: { "&:hover": { backgroundColor: (r.vars ?? r).palette.action.hover } },
+	"&.Mui-focusVisible": {
+		backgroundColor: (r.vars ?? r).palette.action.focus,
+		...t(r)
+	},
+	"&.Mui-disabled": { color: (r.vars ?? r).palette.text.disabled },
+	[r.breakpoints.down("lg")]: { padding: r.spacing(.75, 1) },
+	[n]: { transition: "none" },
+	variants: [{
+		props: ({ ownerState: e }) => e.open,
+		style: {
+			backgroundColor: (r.vars ?? r).palette.action.selected,
+			"&::after": {
+				content: "\"\"",
+				height: r.spacing(2.5),
+				left: 0,
+				position: "absolute",
+				top: "100%",
+				width: "100%"
+			},
+			[e]: { "&:hover": { backgroundColor: (r.vars ?? r).palette.action.selected } }
+		}
+	}, {
+		props: ({ ownerState: e }) => e.active,
+		style: {
+			backgroundColor: (r.vars ?? r).palette.action.selected,
+			color: (r.vars ?? r).palette.text.primary,
+			fontWeight: r.typography.fontWeightMedium,
+			[e]: { "&:hover": { backgroundColor: (r.vars ?? r).palette.action.selected } }
+		}
+	}]
+})), m = l("span", {
+	name: "SMegaMenu",
+	slot: "TriggerArrow",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	alignItems: "center",
+	color: "inherit",
+	display: "inline-flex",
+	flexShrink: 0,
+	transition: e.transitions.create(["transform"], { duration: e.transitions.duration.shorter }),
+	[n]: { transition: "none" },
+	variants: [{
+		props: ({ ownerState: e }) => e.open,
+		style: { transform: "rotate(180deg)" }
+	}]
+})), h = l(i, {
+	name: "SMegaMenu",
+	slot: "Popover",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({ pointerEvents: "none" }), g = l(a, {
+	name: "SMegaMenu",
+	slot: "Panel",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	minWidth: 0,
+	variants: [
+		{
+			props: ({ ownerState: e }) => e.resolvedLayout === "list",
+			style: {
+				display: "block",
+				paddingBlock: e.spacing(d)
+			}
+		},
+		{
+			props: ({ ownerState: e }) => e.resolvedLayout === "columns",
+			style: {
+				alignItems: "start",
+				columnGap: e.spacing(5),
+				display: "grid",
+				gridAutoColumns: "1fr",
+				gridAutoFlow: "column",
+				padding: e.spacing(d)
+			}
+		},
+		{
+			props: ({ ownerState: e }) => e.scrollable,
+			style: {
+				maxHeight: "min(70vh, 620px)",
+				overflowY: "auto"
+			}
+		}
+	]
+})), _ = l(a, {
+	name: "SMegaMenu",
+	slot: "Column",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	display: "flex",
+	flexDirection: "column",
+	gap: e.spacing(d),
+	minWidth: 0
+})), v = l(c, {
+	name: "SMegaMenu",
+	slot: "Heading",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	...e.typography.subtitle1,
+	color: (e.vars ?? e).palette.text.primary,
+	margin: 0,
+	padding: e.spacing(1, 1.5, .5),
+	whiteSpace: "nowrap"
+})), y = l(r, {
+	name: "SMegaMenu",
+	slot: "Item",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	borderRadius: e.radius.md,
+	flex: "0 0 auto",
+	paddingInline: e.spacing(1.5),
+	whiteSpace: "nowrap",
+	variants: [{
+		props: ({ ownerState: e }) => e.resolvedLayout === "list",
+		style: {
+			marginInline: e.spacing(d),
+			width: `calc(100% - ${e.spacing(d * 2)})`
+		}
+	}]
+})), b = l(a, {
+	name: "SMegaMenu",
+	slot: "SubmenuNode",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	minWidth: 0,
+	position: "relative",
+	variants: [{
+		props: ({ ownerState: e }) => e.open,
+		style: { "&::after": {
+			content: "\"\"",
+			height: "100%",
+			left: "100%",
+			position: "absolute",
+			top: 0,
+			width: e.spacing(1.5)
+		} }
+	}, {
+		props: ({ ownerState: e }) => e.open && e.side === "left",
+		style: { "&::after": {
+			left: "auto",
+			right: "100%"
+		} }
+	}]
+})), x = l(s, {
+	name: "SMegaMenu",
+	slot: "Submenu",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	backgroundColor: (e.vars ?? e).palette.background.paper,
+	backgroundImage: "none",
+	border: "1px solid",
+	borderColor: (e.vars ?? e).palette.divider,
+	borderRadius: e.radius.md,
+	left: `calc(100% + ${e.spacing(1.5)})`,
+	minWidth: e.spacing(25),
+	opacity: 0,
+	overflow: "visible",
+	pointerEvents: "none",
+	position: "absolute",
+	top: 0,
+	transform: `translateX(${e.spacing(1)})`,
+	transition: e.transitions.create([
+		"opacity",
+		"transform",
+		"visibility"
+	], { duration: e.transitions.duration.shorter }),
+	visibility: "hidden",
+	width: "max-content",
+	zIndex: 1,
+	[n]: {
+		transform: "none",
+		transition: "none"
+	},
+	variants: [{
+		props: ({ ownerState: e }) => e.side === "left",
+		style: {
+			left: "auto",
+			right: `calc(100% + ${e.spacing(1.5)})`,
+			transform: `translateX(-${e.spacing(1)})`
+		}
+	}, {
+		props: ({ ownerState: e }) => e.open,
+		style: {
+			opacity: 1,
+			pointerEvents: "auto",
+			transform: "translateX(0)",
+			visibility: "visible",
+			zIndex: 2
+		}
+	}]
+}));
+//#endregion
+export { _ as SMegaMenuColumn, v as SMegaMenuHeading, y as SMegaMenuItemRoot, g as SMegaMenuPanel, h as SMegaMenuPopover, f as SMegaMenuRoot, x as SMegaMenuSubmenu, b as SMegaMenuSubmenuNode, p as SMegaMenuTrigger, m as SMegaMenuTriggerArrow };

package/dist/s-mega-menu/mega-menu-trigger.d.ts

@@ -0,0 +1,35 @@
+import { SMegaMenuItem, SMegaMenuOwnerState, SMegaMenuSlotProps, SMegaMenuSlots, SMegaMenuTriggerState } from './types';
+import * as React from 'react';
+export interface MegaMenuTriggerButtonProps<T = unknown> {
+    /** The trigger points at the active `href`. */
+    active: boolean;
+    /** The item has children, so the trigger owns a panel. */
+    hasPanel: boolean;
+    item: SMegaMenuItem<T>;
+    /** Default element used when the item has an `href`. */
+    linkComponent?: React.ElementType;
+    onClick: React.MouseEventHandler<HTMLElement>;
+    onFocus: React.FocusEventHandler<HTMLElement>;
+    onKeyDown: React.KeyboardEventHandler<HTMLElement>;
+    onPointerEnter: React.PointerEventHandler<HTMLElement>;
+    onPointerLeave: React.PointerEventHandler<HTMLElement>;
+    /** The trigger's panel is open. */
+    open: boolean;
+    ownerState: SMegaMenuOwnerState<T>;
+    /** `id` of the panel surface, referenced by `aria-controls` while open. */
+    panelId: string;
+    /** Registers the rendered element so the menu can anchor to it and restore focus. */
+    registerRef: (id: string, node: HTMLElement | null) => void;
+    renderTrigger?: (item: SMegaMenuItem<T>, state: SMegaMenuTriggerState<T>) => React.ReactNode;
+    slotProps?: SMegaMenuSlotProps<T>;
+    slots?: SMegaMenuSlots;
+    /** Stable accessible relationship target for the panel's `aria-labelledby`. */
+    triggerId: string;
+}
+/**
+ * A single top-level trigger.
+ *
+ * Extracted from `SMegaMenu` so the per-item `useForkRef` stays a top-level hook
+ * instead of being called inside a render loop.
+ */
+export declare function MegaMenuTriggerButton<T>({ active, hasPanel, item, linkComponent, onClick, onFocus, onKeyDown, onPointerEnter, onPointerLeave, open, ownerState, panelId, registerRef, renderTrigger, slotProps, slots, triggerId, }: Readonly<MegaMenuTriggerButtonProps<T>>): React.JSX.Element;

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

@@ -0,0 +1,2 @@
+import { t as e } from "../mega-menu-trigger-BcOo8I5_.js";
+export { e as MegaMenuTriggerButton };

package/dist/s-mega-menu/s-mega-menu.d.ts

@@ -0,0 +1,23 @@
+import { SMegaMenuProps } from './types';
+import * as React from 'react';
+interface SMegaMenuComponent {
+    <T = unknown>(props: SMegaMenuProps<T> & React.RefAttributes<HTMLElement>): React.JSX.Element;
+    displayName?: string;
+}
+/**
+ * Multi-level navigation mega menu built on `SPopover`.
+ *
+ * The panel opens on hover, click/tap and keyboard, and — the point of
+ * the component — never closes while the pointer or focus travels between the
+ * trigger and the panel content:
+ *
+ * 1. An invisible `::after` bridge under an open trigger covers the vertical gap,
+ *    and a second bridge on every submenu wrapper covers the horizontal gap, so
+ *    `pointerleave` usually does not fire at all while crossing.
+ * 2. Any `pointerleave` that does fire only *schedules* a close after
+ *    `closeDelay`; entering the panel surface cancels the pending close.
+ * 3. Focus never closes the panel unless `relatedTarget` is outside both the
+ *    navigation root and the panel surface.
+ */
+export declare const SMegaMenu: SMegaMenuComponent;
+export default SMegaMenu;

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

@@ -0,0 +1,228 @@
+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 ee } from "../useControlled-DqNPBJNp.js";
+import { t as a } from "../mergeSlotProps-DC8r4QzS.js";
+import { t as te } from "../mega-menu-trigger-BcOo8I5_.js";
+import { contains as o, focusAdjacentTrigger as s, getFirstRow as c } from "./utils.js";
+import { SMegaMenuPopover as ne, SMegaMenuRoot as re } from "./mega-menu-slots.js";
+import { MegaMenuPanelContent as ie } from "./mega-menu-panel.js";
+import * as l from "react";
+import { jsx as u, jsxs as ae } from "react/jsx-runtime";
+import { useMediaQuery as oe, useThemeProps as se } from "@mui/material";
+//#region lib/s-mega-menu/s-mega-menu.tsx
+var ce = 0;
+function d(e, t) {
+	return e.href === t || !!e.children?.some((e) => d(e, t));
+}
+function f(f, p) {
+	let { activeHref: m, closeDelay: h = ce, defaultOpenId: g = null, getIsActive: _, items: v, keepMounted: y = !1, layout: b = "auto", linkComponent: x, onOpenChange: S, openDelay: C = 0, openId: le, renderItem: ue, renderTrigger: de, slotProps: w, slots: T, sx: fe, ...E } = se({
+		props: f,
+		name: "SMegaMenu"
+	}), [D, O] = ee({
+		controlled: le,
+		default: g,
+		name: "SMegaMenu",
+		state: "openId"
+	}), [k, A] = l.useState(null), pe = oe("(prefers-reduced-motion: reduce)", { noSsr: !0 }), j = l.useId(), M = `${j}-panel`, N = l.useRef(null), P = l.useRef(/* @__PURE__ */ new Map()), F = l.useRef(void 0), I = l.useRef(void 0), L = l.useRef(!1), R = l.useRef(0), me = n(N, p), [z, he] = l.useState(g);
+	D != null && D !== z && he(D);
+	let B = v.find((e) => e.id === (D ?? z)) ?? null, V = B ? v.indexOf(B) : -1, ge = V >= 0 ? `${j}-trigger-${V}` : void 0, H = !!(D == null ? null : B)?.children?.length && k != null, U = {
+		activeHref: m,
+		closeDelay: h,
+		items: v,
+		keepMounted: y,
+		layout: b,
+		openDelay: C,
+		openId: D ?? null
+	};
+	l.useEffect(() => {}, [v, b]);
+	let W = l.useCallback(() => typeof document > "u" ? null : document.getElementById(M), [M]), G = l.useCallback(() => {
+		F.current &&= (clearTimeout(F.current), void 0), I.current &&= (clearTimeout(I.current), void 0);
+	}, []);
+	l.useEffect(() => G, [G]);
+	let K = r((e) => _ ? _(e) : !!(m && d(e, m))), q = r((e, t, n, r, i = !1) => {
+		G(), !(e.disabled || D === e.id) && (L.current = i, A(t), O(e.id), S?.(n, e.id, e, r));
+	}), J = r(({ event: e, focusTrigger: t = !1, reason: n }) => {
+		G(), D != null && (t && P.current.get(D)?.focus(), L.current = !1, O(null), S?.(e, null, null, n));
+	}), Y = r((e) => {
+		G(), I.current = setTimeout(() => J({
+			event: e,
+			reason: "pointerLeave"
+		}), h);
+	});
+	l.useEffect(() => {
+		if (D == null) return;
+		let e = P.current.get(D);
+		e && e !== k && A(e);
+	}, [k, D]), l.useEffect(() => {
+		H && L.current && (L.current = !1, c(W())?.focus());
+	}, [W, H]), l.useEffect(() => {
+		if (!H) return;
+		let e = (e) => {
+			o(W(), e.target) || o(N.current, e.target) || J({
+				event: e,
+				reason: "outsidePress"
+			});
+		};
+		return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
+	}, [
+		J,
+		W,
+		H
+	]);
+	let _e = l.useCallback((e, t) => {
+		t ? P.current.set(e, t) : P.current.delete(e);
+	}, []), X = r((e) => {
+		let t = e.relatedTarget;
+		!t || o(N.current, t) || o(W(), t) || J({
+			event: e,
+			reason: "blur"
+		});
+	}), ve = r((e, t) => {
+		if (e.disabled || t.pointerType === "touch" || Date.now() < R.current || !e.children?.length) return;
+		let n = t.currentTarget, r = t.nativeEvent;
+		if (G(), C > 0 && D == null) {
+			F.current = setTimeout(() => q(e, n, r, "triggerHover"), C);
+			return;
+		}
+		q(e, n, t, "triggerHover");
+	}), ye = r((e) => {
+		Date.now() >= R.current && (R.current = 0), e.pointerType !== "touch" && Y(e.nativeEvent);
+	}), be = r((e, t) => {
+		let n = !!e.children?.length;
+		if (n && D !== e.id) {
+			q(e, t.currentTarget, t, "triggerClick");
+			return;
+		}
+		if (n) {
+			R.current = Date.now() + 300, J({
+				event: t,
+				reason: "triggerClick"
+			});
+			return;
+		}
+		J({
+			event: t,
+			reason: "itemClick"
+		});
+	}), xe = r((e, t) => {
+		D != null && D !== e.id && J({
+			event: t,
+			reason: "triggerFocus"
+		});
+	}), Se = r((e, t) => {
+		let n = t.currentTarget, r = !!e.children?.length;
+		switch (t.key) {
+			case "ArrowDown":
+				if (!r) break;
+				t.preventDefault(), D === e.id ? c(W())?.focus() : q(e, n, t, "triggerKeyDown", !0);
+				break;
+			case "ArrowRight":
+				t.preventDefault(), s(N.current, n, 1);
+				break;
+			case "ArrowLeft":
+				t.preventDefault(), s(N.current, n, -1);
+				break;
+			case "Escape":
+				D != null && (t.preventDefault(), J({
+					event: t,
+					reason: "escapeKeyDown"
+				}));
+				break;
+			default: break;
+		}
+	}), Ce = r((e) => {
+		e.pointerType !== "touch" && G();
+	}), we = r((e) => {
+		e.pointerType !== "touch" && Y(e.nativeEvent);
+	}), Z = r((e) => {
+		e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), J({
+			event: e,
+			focusTrigger: !0,
+			reason: "escapeKeyDown"
+		}));
+	}), Te = {
+		closeMenu: J,
+		getIsActive: K,
+		keepMounted: y,
+		linkComponent: x,
+		ownerState: U,
+		renderItem: ue,
+		slotProps: w,
+		slots: T
+	}, Q = T?.root ?? re, $ = T?.popover ?? ne, { ref: Ee, sx: De, ...Oe } = i(Q, a(t(w?.root, U), {
+		...E,
+		onBlurCapture: X
+	}), U), ke = n(Ee, me), { slotProps: Ae, sx: je, ...Me } = t(w?.popover, U) ?? {}, Ne = a(Ae?.paper, {
+		"aria-labelledby": ge,
+		id: M,
+		onBlurCapture: X,
+		onKeyDown: Z,
+		onPointerEnter: Ce,
+		onPointerLeave: we,
+		sx: [(e) => ({
+			maxWidth: "92vw",
+			minWidth: e.spacing(25),
+			overflow: "visible",
+			pointerEvents: "auto",
+			width: "max-content"
+		})],
+		role: "region",
+		tabIndex: -1
+	}), Pe = i($, a(Me, {
+		anchorEl: k,
+		disableAutoFocus: !0,
+		disableEnforceFocus: !0,
+		disableRestoreFocus: !0,
+		disableScrollLock: !0,
+		hideBackdrop: !0,
+		keepMounted: y,
+		onClose: (e, t) => J({
+			event: e,
+			focusTrigger: t === "escapeKeyDown",
+			reason: t === "escapeKeyDown" ? "escapeKeyDown" : "outsidePress"
+		}),
+		placement: "bottom-start",
+		transitionDuration: pe ? 0 : void 0
+	}), U);
+	return /* @__PURE__ */ ae(Q, {
+		...Oe,
+		ref: ke,
+		sx: [...e(De), ...e(fe)],
+		children: [v.map((e, t) => /* @__PURE__ */ u(te, {
+			active: K(e),
+			hasPanel: !!e.children?.length,
+			item: e,
+			linkComponent: x,
+			onClick: (t) => be(e, t),
+			onFocus: (t) => xe(e, t),
+			onKeyDown: (t) => Se(e, t),
+			onPointerEnter: (t) => ve(e, t),
+			onPointerLeave: ye,
+			open: H && D === e.id,
+			ownerState: U,
+			panelId: M,
+			registerRef: _e,
+			renderTrigger: de,
+			slotProps: w,
+			slots: T,
+			triggerId: `${j}-trigger-${t}`
+		}, e.id)), /* @__PURE__ */ u($, {
+			...Pe,
+			open: H,
+			slotProps: { paper: Ne },
+			sx: [...e(je)],
+			children: B?.children?.length ? /* @__PURE__ */ u(ie, {
+				ctx: Te,
+				depth: 0,
+				items: B.children
+			}) : null
+		})]
+	});
+}
+var p = l.forwardRef(f);
+p.displayName = "SMegaMenu";
+//#endregion
+export { p as SMegaMenu, p as default };