@frontify/fondue
Version:
Design system of Frontify
43 lines (42 loc) • 1.73 kB
JavaScript
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