"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const createEventHandler = require("../../../core/utils/create-event-handler/create-event-handler.cjs");
require("clsx");
const useProps = require("../../../core/MantineProvider/use-props/use-props.cjs");
const factory = require("../../../core/factory/factory.cjs");
const Popover = require("../../Popover/Popover.cjs");
const Menu_context = require("../Menu.context.cjs");
const Menu_module_css = require("../Menu.module.css.cjs");
const useMergedRef = require("../../../../../../../../@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-merged-ref/use-merged-ref.cjs");
const defaultProps = {};
const MenuDropdown = factory.factory((props, ref) => {
  const {
    classNames,
    className,
    style,
    styles,
    vars,
    onMouseEnter,
    onMouseLeave,
    onKeyDown,
    children,
    ...others
  } = useProps.useProps("MenuDropdown", defaultProps, props);
  const wrapperRef = React.useRef(null);
  const ctx = Menu_context.useMenuContext();
  const handleKeyDown = createEventHandler.createEventHandler(onKeyDown, (event) => {
    var _a, _b;
    if (event.key === "ArrowUp" || event.key === "ArrowDown") {
      event.preventDefault();
      (_b = (_a = wrapperRef.current) == null ? void 0 : _a.querySelectorAll("[data-menu-item]:not(:disabled)")[0]) == null ? void 0 : _b.focus();
    }
  });
  const handleMouseEnter = createEventHandler.createEventHandler(
    onMouseEnter,
    () => (ctx.trigger === "hover" || ctx.trigger === "click-hover") && ctx.openDropdown()
  );
  const handleMouseLeave = createEventHandler.createEventHandler(
    onMouseLeave,
    () => (ctx.trigger === "hover" || ctx.trigger === "click-hover") && ctx.closeDropdown()
  );
  return /* @__PURE__ */ jsxRuntime.jsxs(
    Popover.Popover.Dropdown,
    {
      ...others,
      onMouseEnter: handleMouseEnter,
      onMouseLeave: handleMouseLeave,
      role: "menu",
      "aria-orientation": "vertical",
      ref: useMergedRef.useMergedRef(ref, wrapperRef),
      ...ctx.getStyles("dropdown", {
        className,
        style,
        styles,
        classNames,
        withStaticClass: false
      }),
      tabIndex: -1,
      "data-menu-dropdown": true,
      onKeyDown: handleKeyDown,
      children: [
        /* @__PURE__ */ jsxRuntime.jsx("div", { tabIndex: -1, "data-autofocus": true, "data-mantine-stop-propagation": true, style: { outline: 0 } }),
        children
      ]
    }
  );
});
MenuDropdown.classes = Menu_module_css.default;
MenuDropdown.displayName = "@mantine/core/MenuDropdown";
exports.MenuDropdown = MenuDropdown;
