synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
163 lines (162 loc) • 5.87 kB
JavaScript
import { jsx as n, jsxs as d, Fragment as D } from "react/jsx-runtime";
import { Button as p, Typography as u, Tooltip as f, Popper as M, Fade as S, Paper as P, ClickAwayListener as $, MenuList as B, MenuItem as E, ListItemIcon as F, ListItemText as j, Divider as A } from "@mui/material";
import { useId as K, useState as O, useRef as R } from "react";
import h from "../IconSvg/IconSvg.js";
function G(m) {
const {
buttonTooltip: c,
dropdownButtonText: x,
items: a = [],
convertSingleItemToButton: v = !0,
renderMenuIfNoItems: b = !1,
buttonProps: I = {}
} = m, r = K(), [i, t] = O(!1), l = R(null), s = a.flat().length;
if (!b && s === 0)
return null;
if (v && s === 1) {
const e = a.flat()[0];
return /* @__PURE__ */ n(
p,
{
component: "href" in e ? "a" : "button",
title: e.tooltipText,
variant: "outlined",
href: "href" in e ? e.href : void 0,
rel: "href" in e ? "noopener noreferrer" : void 0,
onClick: "onClick" in e ? e.onClick : void 0,
disabled: e.disabled,
endIcon: e.icon && /* @__PURE__ */ n(h, { icon: e.icon, wrap: !1 }),
children: /* @__PURE__ */ n(u, { variant: "buttonLink", children: e.text })
}
);
}
const k = () => {
t((e) => !e);
}, y = (e) => {
l.current && l.current.contains(e.target) || t(!1);
};
function T(e) {
e.key === "Tab" ? (e.preventDefault(), t(!1)) : e.key === "Escape" && t(!1);
}
return /* @__PURE__ */ d(D, { children: [
/* @__PURE__ */ n(
f,
{
title: c ? /* @__PURE__ */ n("div", { style: { whiteSpace: "pre-line" }, children: c }) : void 0,
placement: "top",
children: /* @__PURE__ */ n("span", { children: /* @__PURE__ */ n(
p,
{
variant: "outlined",
ref: l,
id: `composition-button-${r}`,
"aria-controls": i ? `composition-menu-${r}` : void 0,
"aria-expanded": i ? "true" : void 0,
"aria-haspopup": "true",
onClick: k,
...I,
children: /* @__PURE__ */ n(u, { variant: "buttonLink", children: x })
}
) })
}
),
/* @__PURE__ */ n(
M,
{
open: i,
anchorEl: l.current,
role: void 0,
placement: "bottom-end",
transition: !0,
style: {
// Fixes issue where react-flow (provenance) would appear above the menu
zIndex: 10
},
children: ({ TransitionProps: e }) => /* @__PURE__ */ n(S, { ...e, children: /* @__PURE__ */ n(P, { children: /* @__PURE__ */ n($, { onClickAway: y, children: /* @__PURE__ */ n(
B,
{
autoFocusItem: i,
id: `composition-menu-${r}`,
"aria-labelledby": `composition-button-${r}`,
onKeyDown: T,
children: a.map((g, w, C) => [
g.map((o) => /* @__PURE__ */ n(
f,
{
title: o.tooltipText,
placement: "left",
children: /* @__PURE__ */ d(
E,
{
component: "a",
sx: {
// Override the anchor-specific state styles, we don't want it to look like an anchor
"&:hover": {
color: "unset"
},
"&:focus": {
color: "unset",
textDecoration: "unset"
}
},
disabled: o.disabled,
href: "href" in o ? o.href : void 0,
rel: "href" in o ? "noopener noreferrer" : void 0,
style: { pointerEvents: "auto" },
onClick: (L) => {
!o.disabled && "onClick" in o && o.onClick && (t(!1), o.onClick(L));
},
children: [
/* @__PURE__ */ n(
F,
{
style: {
// MUI has specified a more specific minWidth for ListItemIcon inside a MenuList than
// we can create with sx, so apply an inline style for this property only.
minWidth: "30px"
},
children: o.icon && /* @__PURE__ */ n(
h,
{
icon: o.icon,
sx: {
width: "17px",
height: "17px",
...o.iconSx
},
wrap: !1
}
)
}
),
/* @__PURE__ */ n(
j,
{
sx: { marginTop: 0 },
slotProps: {
primary: {
variant: "smallText1",
sx: o.textSx
}
},
children: o.text
}
)
]
}
)
},
o.text
)),
w < C.length - 1 && /* @__PURE__ */ n(A, {})
])
}
) }) }) })
}
)
] });
}
export {
G as DropdownMenu
};
//# sourceMappingURL=DropdownMenu.js.map