synapse-react-client/dist/utils/hooks/useOverlay.js

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

import { jsx as E } from "react/jsx-runtime";
import { useRef as v, useState as _, useEffect as h, useCallback as r } from "react";
import { Popover as D, Fade as L, Paper as M } from "@mui/material";
function T(n) {
  n && clearTimeout(n);
}
const A = 250, C = 500;
function H(n, i, c = A, l = C, a = {}, f = {
  vertical: "top",
  horizontal: "right"
}, g = {
  vertical: "center",
  horizontal: "left"
}) {
  const s = v(!1), m = v(null), [o, p] = _(!1);
  h(() => (s.current = !0, () => {
    s.current = !1;
  }), []);
  const e = r(
    (t = o, S = !0) => {
      T(m.current), S ? m.current = setTimeout(
        () => {
          s.current && p(t);
        },
        t ? c : l
      ) : p(t);
    },
    [l, c, o]
  ), x = r(
    (t = !0) => {
      e(!0, t);
    },
    [e]
  ), u = r(
    (t = !0) => {
      e(!1, t);
    },
    [e]
  );
  return { OverlayComponent: r(
    () => /* @__PURE__ */ E(
      D,
      {
        anchorEl: i.current,
        open: o,
        anchorOrigin: f,
        transformOrigin: g,
        sx: { pointerEvents: "none" },
        slots: {
          transition: L
        },
        children: /* @__PURE__ */ E(
          M,
          {
            ...a,
            onMouseEnter: () => {
              e(!0, !1);
            },
            onMouseLeave: () => {
              u(!0);
            },
            sx: {
              pointerEvents: "auto",
              width: "max-content",
              minWidth: "300px",
              ...a.sx
            },
            children: n
          }
        )
      }
    ),
    [n, o, f, i, e, u]
  ), isShowing: o, toggleShow: x, toggleHide: u, toggle: e };
}
export {
  H as useOverlay
};
//# sourceMappingURL=useOverlay.js.map