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

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

import { jsxs as s, Fragment as O, jsx as e } from "react/jsx-runtime";
import { Box as z, Popover as C, DialogTitle as E, DialogContent as b, DialogActions as k, Button as L } from "@mui/material";
import { useState as M, useRef as S } from "react";
import u from "./HoverPopover.module.scss.js";
function T(t) {
  switch (t) {
    case "top":
      return {
        anchorOrigin: { vertical: "top", horizontal: "center" },
        transformOrigin: { vertical: "bottom", horizontal: "center" }
      };
    case "bottom":
      return {
        anchorOrigin: { vertical: "bottom", horizontal: "center" },
        transformOrigin: { vertical: "top", horizontal: "center" }
      };
    case "left":
      return {
        anchorOrigin: { vertical: "center", horizontal: "left" },
        transformOrigin: { vertical: "center", horizontal: "right" }
      };
    case "right":
      return {
        anchorOrigin: { vertical: "center", horizontal: "right" },
        transformOrigin: { vertical: "center", horizontal: "left" }
      };
  }
}
const A = 150;
function y({
  children: t,
  popoverContent: p,
  title: l,
  placement: h = "right",
  maxWidth: g = 500,
  minWidth: m = 300,
  maxHeight: f = 400,
  actionButton: r
}) {
  const [c, n] = M(null), o = S(null), i = () => {
    o.current !== null && (clearTimeout(o.current), o.current = null);
  }, a = () => {
    i(), o.current = setTimeout(() => {
      n(null);
    }, A);
  }, { anchorOrigin: d, transformOrigin: v } = T(h);
  return /* @__PURE__ */ s(O, { children: [
    /* @__PURE__ */ e(
      z,
      {
        component: "span",
        onMouseEnter: (x) => {
          i(), n(x.currentTarget);
        },
        onMouseLeave: a,
        className: u.triggerWrapper,
        children: t
      }
    ),
    /* @__PURE__ */ s(
      C,
      {
        open: c !== null,
        anchorEl: c,
        anchorOrigin: d,
        transformOrigin: v,
        onClose: () => n(null),
        disableAutoFocus: !0,
        disableEnforceFocus: !0,
        disableScrollLock: !0,
        slotProps: {
          backdrop: { sx: { pointerEvents: "none" } },
          paper: {
            onMouseEnter: i,
            onMouseLeave: a,
            className: u.paper,
            sx: { maxWidth: g, minWidth: m }
          }
        },
        children: [
          l && /* @__PURE__ */ e(E, { sx: { fontSize: "18px", padding: "16px 10px" }, children: l }),
          /* @__PURE__ */ e(b, { sx: { maxHeight: f, padding: "10px" }, children: p }),
          r && /* @__PURE__ */ e(k, { sx: { paddingX: "10px" }, children: /* @__PURE__ */ e(
            L,
            {
              color: r.color ?? "primary",
              variant: r.variant ?? "contained",
              fullWidth: !0,
              onClick: () => {
                r.onClick(), r.closeOnClick && n(null);
              },
              children: r.content
            }
          ) })
        ]
      }
    )
  ] });
}
export {
  y as HoverPopover
};
//# sourceMappingURL=HoverPopover.js.map