analytica-frontend-lib/dist/chunk-OSTHYDKM.js

Repositório público dos componentes utilizados nas plataformas da Analytica Ensino

"use strict";Object.defineProperty(exports, "__esModule", {value: true});

var _chunkANT66KVKjs = require('./chunk-ANT66KVK.js');


var _chunkTN3AYOMVjs = require('./chunk-TN3AYOMV.js');

// src/components/Tooltip/Tooltip.tsx






var _react = require('react');
var _reactdom = require('react-dom');
var _jsxruntime = require('react/jsx-runtime');
var POSITION_CLASSES = {
  top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
  bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
  left: "right-full top-1/2 -translate-y-1/2 mr-2",
  right: "left-full top-1/2 -translate-y-1/2 ml-2"
};
var TOOLTIP_GAP_PX = 8;
var computePortalCoords = (triggerRect, position, tooltipRect) => {
  switch (position) {
    case "bottom":
      return {
        top: triggerRect.bottom + TOOLTIP_GAP_PX,
        left: triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2
      };
    case "left":
      return {
        top: triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2,
        left: triggerRect.left - tooltipRect.width - TOOLTIP_GAP_PX
      };
    case "right":
      return {
        top: triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2,
        left: triggerRect.right + TOOLTIP_GAP_PX
      };
    case "top":
    default:
      return {
        top: triggerRect.top - tooltipRect.height - TOOLTIP_GAP_PX,
        left: triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2
      };
  }
};
var TOOLTIP_CONTENT_CLASSES = _chunkTN3AYOMVjs.cn.call(void 0, 
  "whitespace-nowrap",
  "px-4 py-2 rounded-lg",
  "bg-background-dark text-white",
  "text-sm font-medium",
  "shadow-[0px_3px_10px_0px_rgba(38,38,38,0.2)]",
  "transition-opacity duration-150"
);
function Tooltip({
  content,
  children,
  position = "top",
  className,
  contentClassName,
  disabled = false,
  usePortal = false
}) {
  const triggerRef = _react.useRef.call(void 0, null);
  const tooltipRef = _react.useRef.call(void 0, null);
  const [open, setOpen] = _react.useState.call(void 0, false);
  const [coords, setCoords] = _react.useState.call(void 0, {
    top: 0,
    left: 0
  });
  const updatePosition = _react.useCallback.call(void 0, () => {
    if (!triggerRef.current || !tooltipRef.current) return;
    const triggerRect = triggerRef.current.getBoundingClientRect();
    const tooltipRect = {
      width: tooltipRef.current.offsetWidth,
      height: tooltipRef.current.offsetHeight
    };
    setCoords(computePortalCoords(triggerRect, position, tooltipRect));
  }, [position]);
  _react.useLayoutEffect.call(void 0, () => {
    if (!usePortal || !open) return;
    updatePosition();
    const onViewportChange = () => updatePosition();
    window.addEventListener("resize", onViewportChange);
    window.addEventListener("scroll", onViewportChange, true);
    return () => {
      window.removeEventListener("resize", onViewportChange);
      window.removeEventListener("scroll", onViewportChange, true);
    };
  }, [usePortal, open, updatePosition, content]);
  _react.useEffect.call(void 0, () => {
    if (!usePortal) return;
    const node = triggerRef.current;
    if (!node) return;
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);
    node.addEventListener("mouseenter", handleOpen);
    node.addEventListener("mouseleave", handleClose);
    node.addEventListener("focusin", handleOpen);
    node.addEventListener("focusout", handleClose);
    return () => {
      node.removeEventListener("mouseenter", handleOpen);
      node.removeEventListener("mouseleave", handleClose);
      node.removeEventListener("focusin", handleOpen);
      node.removeEventListener("focusout", handleClose);
    };
  }, [usePortal]);
  if (disabled) {
    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children });
  }
  if (usePortal) {
    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
      _chunkANT66KVKjs.Text_default,
      {
        as: "span",
        ref: triggerRef,
        className: _chunkTN3AYOMVjs.cn.call(void 0, "relative inline-flex", className),
        "aria-describedby": open ? "tooltip-portal" : void 0,
        children: [
          children,
          open && typeof document !== "undefined" && _reactdom.createPortal.call(void 0, 
            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
              "div",
              {
                ref: tooltipRef,
                id: "tooltip-portal",
                role: "tooltip",
                style: {
                  position: "fixed",
                  top: coords.top,
                  left: coords.left,
                  zIndex: 9999
                },
                className: _chunkTN3AYOMVjs.cn.call(void 0, TOOLTIP_CONTENT_CLASSES, contentClassName),
                children: content
              }
            ),
            document.body
          )
        ]
      }
    );
  }
  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkTN3AYOMVjs.cn.call(void 0, "relative inline-flex group", className), children: [
    children,
    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
      "div",
      {
        role: "tooltip",
        className: _chunkTN3AYOMVjs.cn.call(void 0, 
          "absolute z-50",
          TOOLTIP_CONTENT_CLASSES,
          "opacity-0 invisible",
          "group-hover:opacity-100 group-hover:visible",
          "group-focus-within:opacity-100 group-focus-within:visible",
          POSITION_CLASSES[position],
          contentClassName
        ),
        children: content
      }
    )
  ] });
}
var Tooltip_default = Tooltip;




exports.Tooltip = Tooltip; exports.Tooltip_default = Tooltip_default;
//# sourceMappingURL=chunk-OSTHYDKM.js.map