@veracity/vui/dist/sidemenu/sidemenuItem.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { cs } from "../utils/styles.js";
import { omitThemingProps } from "../core/theme.js";
import vui from "../core/vui.js";
import { Box } from "../box/box.js";
import { Icon } from "../icon/icon.js";
import { T } from "../t/t.js";
import { Button } from "../button/button.js";
import Popover from "../popover/popover.js";
import useSidemenuItem from "./useSidemenuItem.js";
import { useEffect } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/sidemenu/sidemenuItem.tsx
/** A menu item. */
const SidemenuItem = vui((props, ref) => {
	const { className, children, icon, iconSize = "md", isActive, isExpanded = true, pl = 0, py = 0, onClick, onCollapse, onExpand, title, ...rest } = omitThemingProps(props);
	const { isExpandedVertically, setIsExpandedVertically, isDark, size, isExpandedHorizontally, styles } = useSidemenuItem(isExpanded);
	useEffect(() => {
		if (isExpandedVertically) onExpand?.();
		if (!isExpandedVertically) onCollapse?.();
	}, [isExpandedVertically]);
	const hasChildrenExpanded = !!children && isExpandedHorizontally;
	const InnerContent = () => /* @__PURE__ */ jsxs(Box, {
		centerV: true,
		px: 1.5,
		py: 1,
		w: "100%",
		whiteSpace: "pre",
		children: [/* @__PURE__ */ jsx(Icon, {
			ml: iconSize === "sm" ? "4px" : 0,
			name: icon,
			size: iconSize
		}), /* @__PURE__ */ jsx(T, {
			isTruncated: true,
			ml: 2,
			children: title
		})]
	});
	const toggle = (e) => {
		e.preventDefault();
		e.stopPropagation();
		setIsExpandedVertically(!isExpandedVertically);
	};
	const buttonStyles = {
		alignItems: "center",
		border: "none",
		borderRadius: 0,
		borderLeft: !hasChildrenExpanded && children ? "none" : "3px solid transparent",
		borderLeftColor: isActive ? isDark ? "digiGreen.main" : "seaBlue.main" : void 0,
		bg: isDark ? "darkBlue.main" : isActive ? "skyBlue.95" : "white",
		color: hasChildrenExpanded ? "seaBlue.main" : isDark ? "digiGreen.main" : "sandstone.10",
		h: "auto",
		justifyContent: "space-between",
		onClick: () => onClick?.(),
		pl,
		py,
		size: "md",
		variant: "tertiary",
		intent: isDark ? "contrast" : "brand",
		w: "100%",
		...styles.item,
		minH: size === "lg" ? "56px" : "40px",
		hoverBg: isDark ? "seaBlue.main" : "skyBlue.90",
		...rest
	};
	return /* @__PURE__ */ jsxs(Box, {
		flexDirection: "column",
		ref,
		w: "100%",
		children: [!hasChildrenExpanded && children ? /* @__PURE__ */ jsxs(Popover, {
			offset: [0, 52 - 240 - 2],
			placement: "right-start",
			trigger: "mouseenter",
			children: [/* @__PURE__ */ jsx(Popover.Trigger, {
				as: Box,
				className: cs("vui-sidemenu-item-popover", className),
				children: /* @__PURE__ */ jsx(Box, {
					...buttonStyles,
					borderLeft: `3px solid ${isDark ? "digiGreen.main" : "seaBlue.main"}`,
					children: /* @__PURE__ */ jsx(InnerContent, {})
				})
			}), /* @__PURE__ */ jsx(Popover.Content, {
				elevation: "none",
				children: /* @__PURE__ */ jsx(Box, {
					flexDirection: "column",
					justifyContent: "start",
					w: "100%",
					children
				})
			})]
		}) : /* @__PURE__ */ jsxs(Button, {
			className: cs("vui-sidemenu-item", className),
			...buttonStyles,
			children: [/* @__PURE__ */ jsx(InnerContent, {}), hasChildrenExpanded && /* @__PURE__ */ jsx(Button, {
				"aria-label": isExpandedVertically ? "Collapse" : "Expand",
				className: "vui-sidemenu-item-expand",
				icon: isExpandedVertically ? "falChevronUp" : "falChevronDown",
				onClick: toggle,
				size: "sm",
				variant: "tertiary",
				intent: isDark ? "contrast" : "brand"
			})]
		}), !!children && hasChildrenExpanded && isExpandedVertically && /* @__PURE__ */ jsx(Box, {
			flexDirection: "column",
			justifyContent: "start",
			w: "100%",
			children
		})]
	});
});
SidemenuItem.displayName = "SidemenuItem";

//#endregion
export { SidemenuItem, SidemenuItem as default };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=sidemenuItem.js.map