"use client";
import { jsx, jsxs } from "../../packages/jsx/src/jsx-runtime.js";
import { keyframes } from "@emotion/react";
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
import { useContext, useCallback } from "react";
import { DropdownContext } from "./DropdownContext.js";
import { Duration } from "../../tokens/Duration.js";
import { Spacing } from "../../tokens/Spacing.js";
import { BorderRadius } from "../../tokens/BorderRadius.js";
const animationSlideDown = keyframes({
  from: { opacity: 0, transform: `translateY(-${Spacing["8px"]})` },
  to: { opacity: 1, transform: "translateY(0)" }
});
const animationSlideUp = keyframes({
  from: { opacity: 0, transform: `translateY(${Spacing["8px"]})` },
  to: { opacity: 1, transform: "translateY(0)" }
});
const DropdownMenu = ({
  onCloseAutoFocus: onCloseAutoFocusOriginal,
  className,
  children,
  maxHeight = "calc(100vh - 64px)",
  header,
  ...props
}) => {
  const context = useContext(DropdownContext);
  const onCloseAutoFocus = useCallback(
    (event) => {
      onCloseAutoFocusOriginal == null ? void 0 : onCloseAutoFocusOriginal(event);
      setTimeout(() => {
        if (context.type === "select" && context.selectedValue !== context.value && context.onValueChange) {
          context.onValueChange(context.selectedValue);
        }
      }, 0);
    },
    [onCloseAutoFocusOriginal, context]
  );
  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
    DropdownMenuPrimitive.Content,
    {
      sideOffset: 8,
      role: context.type === "select" ? "listbox" : "menu",
      onCloseAutoFocus,
      className,
      sx: {
        zIndex: 1e3,
        maxHeight,
        borderRadius: BorderRadius.S,
        border: "White4",
        bg: "Panes",
        '&[data-side="bottom"]': { animationName: animationSlideDown.toString() },
        '&[data-side="top"]': { animationName: animationSlideUp.toString() },
        animationDuration: Duration["200ms"],
        display: "flex",
        flexDirection: "column"
      },
      ...props,
      children: [
        header,
        /* @__PURE__ */ jsx("div", { role: "presentation", sx: { overflowX: "clip", overflowY: "auto", py: Spacing["16px"] }, children })
      ]
    }
  ) });
};
DropdownMenu.displayName = "Dropdown.Menu";
export {
  DropdownMenu
};
