import { jsxs as f, jsx as t } from "react/jsx-runtime";
import { IconDotsHorizontal as p } from "@frontify/fondue-icons";
import { useFocusRing as c } from "@react-aria/focus";
import { useState as w, useRef as d } from "react";
import { Menu as b } from "../Menu/Menu.es.js";
import { FOCUS_VISIBLE_STYLE as v } from "../../utilities/focusStyle.es.js";
import { merge as g } from "../../utilities/merge.es.js";
import { MenuItem as h } from "../MenuItem/MenuItem.es.js";
const x = ({ items: s, "data-test-id": i = "overflow-menu" }) => {
  const [o, n] = w(!1), r = d(null), { isFocusVisible: l, focusProps: a } = c(), u = () => {
    var e;
    (e = r.current) == null || e.focus(), n(!1);
  };
  return /* @__PURE__ */ f("div", { "data-test-id": i, className: "tw-relative tw-bottom-0 tw-top-0 tw-flex", children: [
    /* @__PURE__ */ t(
      "button",
      {
        "aria-haspopup": "true",
        "aria-expanded": o,
        "aria-label": "Open overflow menu",
        ref: r,
        className: g([
          "tw-w-6 tw-h-6 hover:tw-bg-box-neutral-strong-inverse-hover tw-rounded tw-flex tw-justify-center tw-items-center",
          o ? "tw-bg-box-neutral-strong-inverse-pressed" : "tw-bg-box-neutral-strong-inverse",
          l && v
        ]),
        type: "button",
        onClick: () => {
          n(!o);
        },
        ...a,
        children: /* @__PURE__ */ t(p, {})
      }
    ),
    /* @__PURE__ */ t(b, { triggerRef: r, onClose: u, open: o, children: s.map((e, m) => /* @__PURE__ */ t(h, { link: e.link, onClick: e.onClick, children: e.label }, `overflow-menu-item-${m}`)) })
  ] });
};
x.displayName = "FondueOverflowMenu";
export {
  x as OverflowMenu
};
//# sourceMappingURL=OverflowMenu.es.js.map
