@playbooks/ui/dist/tooltips.cjs

An interface library for Playbooks.

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require$$0 = require("react/jsx-runtime");
const React = require("react");
const usePopper = require("./usePopper-C8J9okfs.cjs");
const html = require("./toast-context-kVz4KXNu.cjs");
const Tooltip = ({
  id,
  name = "Tooltip",
  open,
  placement = "right",
  html: html$1,
  onClick,
  onHover,
  className,
  children,
  tailwind,
  ...props
}) => {
  const [show, setShow] = React.useState(false);
  const { theme } = html.useInterface();
  const base = theme.tooltip({ open: show, placement });
  const computed = { ...base, ...props, tailwind, className, name };
  const [refElement, setRefElement] = React.useState(null);
  const [popElement, setPopElement] = React.useState(null);
  const [arrowElement, setArrowElement] = React.useState(null);
  const nodeRef = React.useRef(null);
  const { styles: popperStyles, attributes } = usePopper.usePopper(refElement, popElement, {
    placement,
    strategy: "fixed",
    modifiers: [
      { name: "arrow", options: { element: arrowElement } },
      { name: "offset", options: { offset: [0, 5] } }
    ]
  });
  const onEnter = () => setShow(true);
  const onExit = () => setShow(false);
  const onShow = (e) => {
    if (!onClick) e.preventDefault();
    return onClick ? onClick() : null;
  };
  const onMouseEnter = () => {
    return !open && onHover ? onHover() : null;
  };
  const onMouseLeave = () => {
    return open && onHover ? onHover() : null;
  };
  return /* @__PURE__ */ require$$0.jsxs(
    html.Span,
    {
      id,
      ref: setRefElement,
      name,
      onClick: onShow,
      onMouseEnter,
      onMouseLeave,
      children: [
        children,
        /* @__PURE__ */ require$$0.jsx(html.fadeExports.Fade, { ref: nodeRef, show: open, timeout: 200, onEnter, onExit, children: /* @__PURE__ */ require$$0.jsx(html.Div, { ref: setPopElement, zIndex: "z-10", style: popperStyles.popper, ...attributes.popper, children: /* @__PURE__ */ require$$0.jsxs(html.Div, { ref: nodeRef, ...computed, children: [
          /* @__PURE__ */ require$$0.jsx(
            TooltipArrow,
            {
              setArrowElement,
              style: { ...popperStyles.popper, ...popperStyles.arrow },
              tailwind: tailwind == null ? void 0 : tailwind.arrow
            }
          ),
          /* @__PURE__ */ require$$0.jsx(TooltipInner, { tailwind: tailwind == null ? void 0 : tailwind.inner, children: html$1 })
        ] }) }) })
      ]
    }
  );
};
const TooltipInner = ({
  name = "TooltipInner",
  className,
  children,
  tailwind,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.tooltipInner();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsx(html.Div, { ...computed, children });
};
const TooltipArrow = ({
  name = "TooltipArrow",
  setArrowElement,
  tailwind,
  className,
  style,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.tooltipArrow();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsx(html.Div, { ref: setArrowElement, style, children: /* @__PURE__ */ require$$0.jsx(html.Div, { ...computed }) });
};
exports.Tooltip = Tooltip;
exports.TooltipArrow = TooltipArrow;
exports.TooltipInner = TooltipInner;