import { cs } from "../utils/styles.js";
import { useStyleConfig } from "../core/theme.js";
import vui from "../core/vui.js";
import Box from "../box/box.js";
import List from "../list/list.js";
import PopoverContent from "../popover/popoverContent.js";
import { useMenuContext } from "./context.js";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/menu/menuList.tsx
/** Displays a list of menu items in a popover content element. */
const MenuList = vui((props, ref) => {
	const { className, contentProps, contentRef, maxH, slotTop, slotBottom, ...rest } = props;
	const styles = useStyleConfig("Menu", useMenuContext());
	return /* @__PURE__ */ jsx(PopoverContent, {
		borderRadius: 0,
		ref: contentRef,
		...contentProps,
		children: /* @__PURE__ */ jsxs(Box, {
			flexDirection: "column",
			children: [
				slotTop,
				/* @__PURE__ */ jsx(List, {
					className: cs("vui-menuList", className),
					isInteractive: true,
					py: 1,
					ref,
					w: "100%",
					...styles.list,
					...rest,
					maxH
				}),
				slotBottom
			]
		})
	});
});
MenuList.Divider = List.Divider;
MenuList.Heading = List.Heading;
MenuList.Icon = List.Icon;
MenuList.Item = List.Item;
MenuList.Text = List.Text;
MenuList.displayName = "MenuList";

//#endregion
export { MenuList as default };
globalThis.__vuiVersion__ = "4.0.0-beta.1"
//# sourceMappingURL=menuList.js.map