import { jsx } from "react/jsx-runtime";
import React, { forwardRef } from "react";
import styled from "styled-components";
import { Content as MenuListRoot, Portal } from "@radix-ui/react-dropdown-menu";
import { node, number, oneOf, string } from "prop-types";
import Box from "../../Box";
const StyledMenuList = styled(MenuListRoot)`
  display: flex;
  flex-direction: column;
  align-items: center;
  ${({
  zIndex,
  theme: {
    yoga: {
      components: { menu },
      elevations
    }
  }
}) => {
  return `
    margin: ${menu.margin.default}px 0;
    padding: 0;
    min-width: ${menu.width.min}px;
    max-width: ${menu.width.max}px;
    border-radius: ${menu.border.radius}px;
    background-color: ${menu.backgroundColor.white};
    box-shadow: ${elevations.small};
    z-index: ${zIndex};
  `;
}}
`;
const MenuList = forwardRef(
  ({
    children,
    align = "start",
    alignOffset = 0,
    side = "bottom",
    sideOffset = 4,
    zIndex = "auto"
  }, ref) => {
    return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
      StyledMenuList,
      {
        align,
        alignOffset,
        asChild: true,
        side,
        sideOffset,
        zIndex,
        children: /* @__PURE__ */ jsx(Box, { as: "ul", m: "zero", ref, children })
      }
    ) });
  }
);
MenuList.propTypes = {
  /** Component to be rendered inside the Menu.List container */
  children: node.isRequired,
  /** Setup the vertical placement relative to Menu.Action component */
  align: oneOf(["start", "center", "end"]),
  /** Add vertical space between the Menu.Action and the Menu.List */
  alignOffset: number,
  /** Setup the horizontal placement relative to Menu.Action component */
  side: oneOf(["top", "right", "bottom", "left"]),
  /** Add horizontal space between the Menu.Action and the Menu.List */
  sideOffset: number,
  /** Add z-index value to Menu.List. Set to 'auto' by default */
  zIndex: string || number
};
MenuList.displayName = "Menu.List";
var MenuList_default = MenuList;
export {
  MenuList_default as default
};
