@uva-glass/component-library/dist/components/Tooltip/Tooltip.js

React components UvA

import { jsxs as M, jsx as R } from "react/jsx-runtime";
import { useRef as y, useState as E, useCallback as b, useEffect as f } from "react";
import '../../assets/Tooltip.css';const j = "_tooltip_small_g4g5w_8", I = "_tooltip_medium_g4g5w_9", N = "_tooltip_large_g4g5w_10", p = {
  "tooltip-container": "_tooltip-container_g4g5w_1",
  tooltip_small: j,
  tooltip_medium: I,
  tooltip_large: N,
  "tooltip_under-trigger": "_tooltip_under-trigger_g4g5w_64"
};
function Y({ element: L, id: _, text: k, size: n = "medium", openUnderTrigger: s = !1 }) {
  const l = y(null), c = y(null), [i, e] = E(!1), [d, x] = E({ top: 0, left: 0 }), g = n === "small" && 20 || n === "large" && 35 || 27, m = n === "small" && 25 || n === "large" && 70 || 47, o = b(() => {
    if (l.current && c.current) {
      const t = l.current.getBoundingClientRect(), v = c.current.getBoundingClientRect(), a = window.scrollY, O = window.scrollX;
      let r = t.top + a + g - v.height;
      const B = t.left + O + m + (t.width - v.width) / 2;
      r -= a, r < 0 && (r = t.bottom + a), x({ top: r, left: B });
    }
  }, [m, g]), u = b(
    (t) => {
      t.key === "Escape" && e(!1);
    },
    [e]
  );
  function w() {
    e(!0);
  }
  function h() {
    e(!1);
  }
  function C() {
    e(!i);
  }
  return f(() => {
    if (!l.current) return;
    const t = l.current;
    return t.addEventListener("keyup", u, !0), () => {
      t.removeEventListener("keyup", u, !0);
    };
  }, [u]), f(() => (o(), window.addEventListener("resize", o), () => {
    window.removeEventListener("resize", o);
  }), [o]), f(() => {
    i && !s && o();
  }, [i, s, o]), /* @__PURE__ */ M(
    "div",
    {
      className: p["tooltip-container"],
      onBlur: h,
      onFocus: w,
      onMouseEnter: w,
      onMouseLeave: h,
      onMouseUp: C,
      ref: l,
      role: "button",
      tabIndex: -1,
      children: [
        /* @__PURE__ */ R("div", { "aria-describedby": i ? _ : void 0, children: L }),
        i && /* @__PURE__ */ R(
          "span",
          {
            ref: c,
            className: s ? p["tooltip_under-trigger"] : p[`tooltip_${n}`],
            id: _,
            role: "tooltip",
            style: s ? {} : { top: d.top, left: d.left },
            children: k
          }
        )
      ]
    }
  );
}
export {
  Y as Tooltip
};
//# sourceMappingURL=Tooltip.js.map