@anoki/fse-ui/dist/index.es263.js

FSE UI components library

import { j as n } from "./index.es278.js";
import { useState as d, useRef as p, useEffect as k } from "react";
import './components/ui/Tooltip/tooltip.css';/* empty css            */
const M = ({
  children: m,
  label: x,
  opened: u,
  defaultOpened: b = !1,
  position: r = "top",
  withArrow: g = !0,
  delay: a = 0,
  className: w = ""
}) => {
  const [R, s] = d(b), l = p(null), i = p(null), c = p(null), [f, v] = d({ top: 0, left: 0 }), h = u !== void 0 ? u : R, j = () => {
    a > 0 ? l.current = setTimeout(() => s(!0), a) : s(!0);
  }, C = () => {
    l.current && clearTimeout(l.current), s(!1);
  };
  return k(() => {
    if (i.current && c.current) {
      const t = i.current.getBoundingClientRect(), T = c.current.getBoundingClientRect();
      let e = 0, o = 0;
      switch (r) {
        case "top":
          e = t.top - 8, o = t.left + t.width / 2;
          break;
        case "bottom":
          e = t.height + 8, o = t.width / 2 - T.width / 2;
          break;
        case "left":
          e = t.top + t.height / 2, o = (t.left - 8) * -1;
          break;
        case "right":
          e = t.top + t.height / 2, o = t.right + 8;
          break;
      }
      v({ top: e, left: o });
    }
  }, [h, r]), /* @__PURE__ */ n.jsxs(
    "div",
    {
      className: "tooltip-wrapper",
      ref: i,
      onMouseEnter: j,
      onMouseLeave: C,
      children: [
        m,
        h && /* @__PURE__ */ n.jsxs(
          "div",
          {
            className: `tooltip-box tooltip-${r} ${w} p-x24`,
            style: {
              top: f.top,
              left: f.left
            },
            ref: c,
            children: [
              x,
              g && /* @__PURE__ */ n.jsx("div", { className: `tooltip-arrow tooltip-arrow-${r}` })
            ]
          }
        )
      ]
    }
  );
};
export {
  M as Tooltip
};
//# sourceMappingURL=index.es263.js.map