@espressif/dashboard-ui-components 1.11.1 → 1.12.0

package/dist/components/nav-bar/nav-bar-details-panel.js

@@ -1,51 +1,165 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AnimatePresence, motion } from "motion/react";
+import { cn } from "../../utils/cn.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, MotionConfig, motion } from "motion/react";
 import { createPortal } from "react-dom";
 //#region src/components/nav-bar/nav-bar-details-panel.tsx
-function NavBarDetailsPanel({ item, openDetailsId, onClose, navBottomOffset, navWidth, navLeft }) {
+var NavBarDetailsPanel = React$1.forwardRef(function NavBarDetailsPanel({ item, openDetailsId, onClose, frame, backgroundClassName = "bg-background", themeClassName, backdropCoversBar = false, direction = 0, onExitComplete, onPointerEnter, onPointerLeave }, ref) {
+	const [content, setContent] = React$1.useState(null);
+	const contentHeight = useHeight(content);
 	if (typeof document === "undefined") return null;
-	return createPortal(/* @__PURE__ */ jsx(AnimatePresence, { children: openDetailsId && item?.details && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(motion.div, {
-		className: "fixed inset-0 z-40 bg-black/20",
-		style: { top: navBottomOffset },
-		initial: { opacity: 0 },
-		animate: { opacity: 1 },
-		exit: { opacity: 0 },
-		transition: { duration: .15 },
-		onClick: onClose,
-		"aria-hidden": "true"
-	}, `navbar-backdrop-${openDetailsId}`), /* @__PURE__ */ jsx(motion.div, {
-		className: "fixed z-50 border-b border-header-border bg-background shadow-lg overflow-hidden",
-		style: {
-			top: navBottomOffset,
-			left: navLeft,
-			width: navWidth
-		},
-		initial: {
-			opacity: 0,
-			height: 0
-		},
-		animate: {
-			opacity: 1,
-			height: "auto"
-		},
-		exit: {
-			opacity: 0,
-			height: 0
-		},
-		transition: {
-			duration: .2,
-			ease: [
-				.25,
-				.1,
-				.25,
-				1
-			]
-		},
-		children: /* @__PURE__ */ jsx("div", {
-			className: "mx-auto w-full px-4 lg:px-6 py-6",
-			children: item.details
+	return createPortal(/* @__PURE__ */ jsx(MotionConfig, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ jsx(AnimatePresence, {
+			onExitComplete,
+			children: openDetailsId && item?.details && /* @__PURE__ */ jsxs(React$1.Fragment, { children: [/* @__PURE__ */ jsx(motion.div, {
+				"data-slot": "nav-bar-details-backdrop",
+				className: "fixed inset-0 z-40 bg-black/20 backdrop-blur-[var(--espd-navbar-backdrop-blur,var(--espd-overlay-blur,0px))]",
+				style: { top: backdropCoversBar ? 0 : frame.bottom },
+				initial: { opacity: 0 },
+				animate: { opacity: 1 },
+				exit: { opacity: 0 },
+				transition: { duration: .15 },
+				onClick: onClose,
+				"aria-hidden": "true"
+			}), /* @__PURE__ */ jsx(motion.div, {
+				ref,
+				"data-slot": "nav-bar-details-panel",
+				onPointerEnter,
+				onPointerLeave,
+				className: cn("fixed z-50 overflow-hidden shadow-[shadow:var(--espd-elevation-navbar,var(--espd-elevation-overlay,var(--shadow-lg)))]", backgroundClassName, themeClassName),
+				style: {
+					top: frame.bottom,
+					left: frame.left,
+					width: frame.width,
+					borderStyle: "solid",
+					borderColor: frame.borderColor,
+					borderWidth: `0 ${frame.borderWidth} ${frame.borderWidth}`,
+					borderBottomLeftRadius: frame.radius,
+					borderBottomRightRadius: frame.radius,
+					clipPath: "inset(0 -80px -80px -80px)"
+				},
+				initial: {
+					opacity: 0,
+					height: 0
+				},
+				animate: {
+					opacity: 1,
+					height: contentHeight ?? "auto"
+				},
+				exit: {
+					opacity: 0,
+					height: 0,
+					transition: PANEL_EXIT
+				},
+				transition: PANEL_TRANSITION,
+				children: /* @__PURE__ */ jsx("div", {
+					ref: setContent,
+					className: "grid",
+					children: /* @__PURE__ */ jsx(AnimatePresence, {
+						initial: true,
+						custom: direction,
+						children: /* @__PURE__ */ jsx(motion.div, {
+							custom: direction,
+							variants: CONTENT_VARIANTS,
+							initial: "enter",
+							animate: "center",
+							exit: "exit",
+							className: "[grid-area:1/1] mx-auto w-full px-4 lg:px-6 py-6",
+							children: item.details
+						}, openDetailsId)
+					})
+				})
+			})] }, "navbar-details")
 		})
-	}, `navbar-panel-${openDetailsId}`)] }) }), document.body);
+	}), document.body);
+});
+var PANEL_TRANSITION = {
+	height: {
+		type: "spring",
+		stiffness: 380,
+		damping: 36,
+		mass: .9
+	},
+	opacity: {
+		duration: .18,
+		ease: "easeOut"
+	}
+};
+var PANEL_EXIT = {
+	duration: .18,
+	ease: [
+		.4,
+		0,
+		1,
+		1
+	]
+};
+var SLIDE_PX = 28;
+/**
+* Content motion, by direction. Opening fresh (0), it rises a few pixels out
+* of a soft blur; switching items, it slides in from the side the pointer
+* moved to while the old content drifts out the other way.
+*/
+var CONTENT_VARIANTS = {
+	enter: (direction) => ({
+		opacity: 0,
+		x: direction * SLIDE_PX,
+		y: direction === 0 ? 8 : 0,
+		filter: "blur(4px)"
+	}),
+	center: {
+		opacity: 1,
+		x: 0,
+		y: 0,
+		filter: "blur(0px)",
+		transition: {
+			x: {
+				type: "spring",
+				stiffness: 420,
+				damping: 38
+			},
+			y: {
+				type: "spring",
+				stiffness: 420,
+				damping: 38
+			},
+			opacity: {
+				duration: .2,
+				delay: .04
+			},
+			filter: {
+				duration: .2,
+				delay: .04
+			}
+		}
+	},
+	exit: (direction) => ({
+		opacity: 0,
+		x: direction * -28,
+		filter: "blur(4px)",
+		transition: {
+			duration: .14,
+			ease: "easeIn"
+		}
+	})
+};
+/** The element's height while it is mounted, `undefined` until measured. */
+function useHeight(element) {
+	const [height, setHeight] = React$1.useState();
+	React$1.useLayoutEffect(() => {
+		if (!element) {
+			setHeight(void 0);
+			return;
+		}
+		if (typeof ResizeObserver === "undefined") return;
+		const measure = () => setHeight(element.offsetHeight || void 0);
+		measure();
+		const ro = new ResizeObserver(measure);
+		ro.observe(element);
+		return () => ro.disconnect();
+	}, [element]);
+	return height;
 }
 //#endregion
 export { NavBarDetailsPanel };

package/dist/components/nav-bar/nav-bar-mobile-menu.js

@@ -2,16 +2,34 @@ import { cn } from "../../utils/cn.js";
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from "../../core/animate-ui/components/radix/sheet.js";
 import * as React$1 from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ChevronDown } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 //#region src/components/nav-bar/nav-bar-mobile-menu.tsx
 function NavBarMobileMenu({ items, activeId, onItemClick, open, onOpenChange, linkComponent, title, colorClasses }) {
-	const [expandedId, setExpandedId] = React$1.useState(null);
+	const [detailsId, setDetailsId] = React$1.useState(null);
+	const detailsItem = detailsId ? items.find((item) => item.id === detailsId) : void 0;
+	const listRef = React$1.useRef(null);
+	const backRef = React$1.useRef(null);
+	const returnFocusId = React$1.useRef(null);
 	React$1.useEffect(() => {
-		if (!open) setExpandedId(null);
+		if (!open) setDetailsId(null);
 	}, [open]);
+	const showDetails = Boolean(detailsItem?.details);
+	React$1.useEffect(() => {
+		if (listRef.current) listRef.current.inert = showDetails;
+	}, [showDetails]);
+	React$1.useEffect(() => {
+		if (detailsId) backRef.current?.focus();
+		else if (returnFocusId.current) {
+			const id = returnFocusId.current;
+			Array.from(listRef.current?.querySelectorAll("[data-mobile-nav-item-id]") ?? []).find((el) => el.dataset.mobileNavItemId === id)?.querySelector("button")?.focus();
+			returnFocusId.current = null;
+		}
+	}, [detailsId]);
 	const handleItemClick = (item) => {
 		if (item.details) {
-			setExpandedId(expandedId === item.id ? null : item.id);
+			returnFocusId.current = item.id;
+			setDetailsId(item.id);
 			return;
 		}
 		onItemClick(item);
@@ -22,34 +40,82 @@ function NavBarMobileMenu({ items, activeId, onItemClick, open, onOpenChange, li
 		onOpenChange,
 		children: /* @__PURE__ */ jsxs(SheetContent, {
 			side: "left",
-			className: "w-[18rem] p-0",
+			className: "w-[min(20rem,calc(100vw-3rem))] p-0",
 			showCloseButton: true,
 			children: [title && /* @__PURE__ */ jsx(SheetHeader, {
 				className: "px-4 pt-4 pb-2",
 				children: /* @__PURE__ */ jsx(SheetTitle, { children: title })
-			}), /* @__PURE__ */ jsx("nav", {
-				className: "flex flex-col py-2",
-				"aria-label": "Mobile navigation",
-				children: items.map((item) => {
-					const isActive = activeId === item.id;
-					const isExpanded = expandedId === item.id;
-					return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(MobileMenuItemTrigger, {
-						item,
-						isActive,
-						isExpanded,
-						onClick: () => handleItemClick(item),
-						linkComponent,
-						colorClasses
-					}), item.details && isExpanded && /* @__PURE__ */ jsx("div", {
-						className: "px-4 py-3 border-b border-border/50 bg-muted/30 overflow-x-auto text-sm",
-						children: item.details
-					})] }, item.id);
-				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "relative flex-1 min-h-0 overflow-hidden",
+				children: [/* @__PURE__ */ jsx(motion.div, {
+					ref: listRef,
+					className: "absolute inset-0 overflow-y-auto",
+					initial: false,
+					animate: {
+						x: showDetails ? "-30%" : 0,
+						opacity: showDetails ? 0 : 1
+					},
+					transition: SLIDE_TRANSITION,
+					children: /* @__PURE__ */ jsx("nav", {
+						className: "flex flex-col py-2",
+						"aria-label": "Mobile navigation",
+						children: items.map((item) => /* @__PURE__ */ jsx("div", {
+							"data-mobile-nav-item-id": item.id,
+							children: /* @__PURE__ */ jsx(MobileMenuItemTrigger, {
+								item,
+								isActive: activeId === item.id,
+								onClick: () => handleItemClick(item),
+								linkComponent,
+								colorClasses
+							})
+						}, item.id))
+					})
+				}), /* @__PURE__ */ jsx(AnimatePresence, {
+					initial: false,
+					children: showDetails && detailsItem && /* @__PURE__ */ jsxs(motion.div, {
+						className: "absolute inset-0 flex flex-col bg-background",
+						initial: { x: "100%" },
+						animate: { x: 0 },
+						exit: { x: "100%" },
+						transition: SLIDE_TRANSITION,
+						role: "region",
+						"aria-label": detailsItem.label,
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-1 px-2 h-11 shrink-0 border-b border-border/50",
+							children: [/* @__PURE__ */ jsx("button", {
+								ref: backRef,
+								type: "button",
+								onClick: () => setDetailsId(null),
+								className: cn("inline-flex items-center justify-center size-8 shrink-0 cursor-pointer", "rounded-[var(--espd-own-radius,var(--espd-radius-item,var(--radius-md)))]", "text-foreground/60 hover:text-foreground hover:bg-foreground/5 transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"),
+								"aria-label": "Back to menu",
+								children: /* @__PURE__ */ jsx(ChevronLeft, {
+									className: "size-4",
+									"aria-hidden": "true"
+								})
+							}), /* @__PURE__ */ jsx("span", {
+								className: "truncate text-sm font-semibold text-foreground",
+								children: detailsItem.label
+							})]
+						}), /* @__PURE__ */ jsx("div", {
+							className: "flex-1 min-h-0 overflow-y-auto px-4 py-4 text-sm",
+							children: detailsItem.details
+						})]
+					}, detailsItem.id)
+				})]
 			})]
 		})
 	});
 }
-function MobileMenuItemTrigger({ item, isActive, isExpanded, onClick, linkComponent, colorClasses }) {
+var SLIDE_TRANSITION = {
+	duration: .22,
+	ease: [
+		.25,
+		.1,
+		.25,
+		1
+	]
+};
+function MobileMenuItemTrigger({ item, isActive, onClick, linkComponent, colorClasses }) {
 	const classes = cn("flex items-center gap-2 min-w-0 w-full px-4 h-11 text-sm font-medium", "text-foreground transition-colors", colorClasses ? colorClasses.hoverBgClass : "hover:bg-foreground/5", isActive && colorClasses && `${colorClasses.textClass} ${colorClasses.bgClass}`, item.disabled && "opacity-50 pointer-events-none");
 	const activeStyle = isActive && colorClasses?.textStyle ? {
 		...colorClasses.textStyle,
@@ -64,8 +130,8 @@ function MobileMenuItemTrigger({ item, isActive, isExpanded, onClick, linkCompon
 			className: "truncate flex-1 text-left",
 			children: item.label
 		}),
-		item.details && /* @__PURE__ */ jsx(ChevronDown, {
-			className: cn("size-4 shrink-0 text-foreground/40 transition-transform duration-200", isExpanded && "rotate-180"),
+		item.details && /* @__PURE__ */ jsx(ChevronRight, {
+			className: "size-4 shrink-0 text-foreground/40",
 			"aria-hidden": "true"
 		})
 	] });
@@ -74,7 +140,7 @@ function MobileMenuItemTrigger({ item, isActive, isExpanded, onClick, linkCompon
 		className: classes,
 		style: activeStyle,
 		onClick,
-		"aria-expanded": isExpanded,
+		"aria-haspopup": "true",
 		disabled: item.disabled,
 		children: content
 	});