@frontify/fondue/dist/components/Tooltip/Tooltip.es.js

Design system of Frontify

import { jsxs as S, Fragment as A, jsx as m } from "react/jsx-runtime";
import { useRef as F, useState as w, useCallback as L, useEffect as P } from "react";
import { useClickOutside as j } from "../../hooks/useClickOutside.es.js";
import { Overlay as B } from "../../utilities/dialogs/Overlay.es.js";
import { Z_INDEX_TOOLTIP as H } from "../../utilities/dialogs/constants.es.js";
import { checkIfContainInteractiveElements as D } from "../../utilities/elements.es.js";
import { FOCUS_VISIBLE_STYLE as U } from "../../utilities/focusStyle.es.js";
import { merge as h } from "../../utilities/merge.es.js";
import { ARROW_DARK_THEME as K } from "../../utilities/overlayStyle.es.js";
import { Modality as V } from "../../types/dialog.es.js";
const W = (t) => {
  const e = /<br\s*\/?>/;
  return t.split(e).join(`
`);
}, T = (t, e, i) => {
  let o = i;
  return o && window.clearTimeout(o), e > 0 ? o = window.setTimeout(t, e) : t(), o;
}, E = (t) => t.pointerType === "mouse", X = ({
  id: t,
  children: e,
  offset: i = [0, 8],
  flip: o = !0,
  content: b,
  placement: x = "bottom",
  withArrow: I = !0,
  size: k = "spacious",
  openOnMount: v = !1,
  maxWidth: O = 200,
  maxHeight: R = "auto",
  enablePortal: y = !0,
  enterDelay: C = 0,
  leaveDelay: u = 200,
  disabled: s = !1,
  zIndex: _ = H,
  "data-test-id": c = "fondue-tooltip"
}) => {
  const r = F(null), [p, d] = w(v), [g, M] = w(!1), f = () => {
    s || (r.current = T(() => d(!0), C, r.current));
  }, a = L(() => {
    r.current = T(() => d(!1), u, r.current);
  }, [u]), { dismissibleElementRef: n } = j(a, []), N = {
    onBlur: a,
    onFocus: f,
    onPointerEnter: (l) => {
      E(l) && f();
    },
    onPointerLeave: (l) => {
      E(l) && a();
    }
  };
  return P(() => {
    M(D(n.current));
  }, [n]), /* @__PURE__ */ S(A, { children: [
    /* @__PURE__ */ m(
      "div",
      {
        ref: n,
        tabIndex: g || s ? void 0 : 0,
        "aria-describedby": t,
        "aria-disabled": s,
        "data-test-id": `${c}-button`,
        className: h(["tw-inline-block tw-rounded tw-max-w-[100%] tw-outline-none", U]),
        ...N,
        children: e
      }
    ),
    /* @__PURE__ */ m(
      B,
      {
        id: t,
        "aria-hidden": !p,
        open: p,
        theme: "dark",
        withArrow: I,
        arrowCustomColors: K,
        anchor: n,
        placement: x,
        offset: i,
        flip: o,
        enablePortal: y,
        role: "tooltip",
        "data-test-id": c,
        modality: V.NonModal,
        maxWidth: O,
        maxHeight: R,
        zIndex: _,
        shadow: "none",
        isDialog: !1,
        darkUnderlay: !1,
        children: /* @__PURE__ */ m(
          "p",
          {
            className: h([
              k === "spacious" ? "tw-pt-2 tw-px-3 tw-pb-2.5" : "tw-pt-1 tw-px-2 tw-pb-1.5",
              "tw-text-heading-medium tw-whitespace-pre-line tw-break-words"
            ]),
            children: W(b)
          }
        )
      }
    )
  ] });
};
X.displayName = "FondueTooltip";
export {
  X as Tooltip
};
//# sourceMappingURL=Tooltip.es.js.map