synapse-react-client/dist/components/styled/StyledPopover.js

[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie

import { jsxs as l, jsx as r } from "react/jsx-runtime";
import { LightTooltip as w } from "./LightTooltip.js";
import { spreadSx as P } from "../../theme/spreadSx.js";
import { Box as n, Button as p, tooltipClasses as b } from "@mui/material";
import { useAtom as y, atom as g } from "jotai";
import { useId as j } from "react";
const I = {
  mt: 2,
  display: "flex",
  justifyContent: "space-between",
  flexDirection: "row-reverse",
  "> button": {
    flexGrow: 1,
    maxWidth: "45%"
  }
}, M = g(null);
function L({
  children: s,
  popoverContent: c,
  placement: d = "bottom-start",
  showCloseButton: a = !0,
  actionButton: o,
  sx: m,
  maxWidth: x = "500px",
  minWidth: f = "300px",
  containerSx: u
}) {
  const e = j(), [v, t] = y(
    M
  ), h = v === e, k = /* @__PURE__ */ l(n, { sx: { padding: "20px" }, children: [
    c,
    /* @__PURE__ */ l(n, { sx: I, children: [
      o && /* @__PURE__ */ r(
        p,
        {
          color: o.color || "primary",
          variant: o.variant || "contained",
          onClick: () => {
            o.onClick(), o.closePopoverOnClick && t(null);
          },
          children: o.content
        }
      ),
      a && /* @__PURE__ */ r(
        p,
        {
          variant: "outlined",
          onClick: () => t(null),
          children: "Close"
        }
      )
    ] })
  ] });
  return /* @__PURE__ */ r(
    w,
    {
      title: k,
      placement: d,
      open: h,
      sx: P(m, {
        [`& .${b.tooltip}`]: {
          maxWidth: { maxWidth: x },
          minWidth: { minWidth: f }
        }
      }),
      children: /* @__PURE__ */ r(
        n,
        {
          role: "button",
          className: "PopoverContainer",
          onClick: (i) => {
            i.preventDefault(), i.stopPropagation(), t((C) => C == e ? null : e);
          },
          sx: { display: "inline-block", cursor: "pointer", ...u },
          children: s
        }
      )
    }
  );
}
export {
  L as StyledPopover
};
//# sourceMappingURL=StyledPopover.js.map