import {
  Tooltip
} from "./chunk-ACVANQJ4.js";
import {
  Typo
} from "./chunk-PARGQUJB.js";
import {
  __objRest,
  __spreadProps,
  __spreadValues
} from "./chunk-2NMEKWO5.js";

// src/atoms/ellipsis-tooltip.tsx
import { useEffect, useRef, useState } from "react";
import { jsx } from "react/jsx-runtime";
function EllipsisTooltip(props) {
  const _a = props, { children, style, lineClamp = 2 } = _a, rest = __objRest(_a, ["children", "style", "lineClamp"]);
  const ref = useRef(null);
  const [tooltipDisplay, setTooltipDisplay] = useState(
    "none"
  );
  useEffect(() => {
    if (ref.current) {
      const typo = ref.current;
      const mouseOver = () => {
        if (typo.clientHeight < typo.scrollHeight) {
          setTooltipDisplay("block");
        }
      };
      const mouseOut = () => {
        setTooltipDisplay("none");
      };
      ref.current.addEventListener("mouseenter", mouseOver);
      ref.current.addEventListener("mouseleave", mouseOut);
    }
  }, [children]);
  return /* @__PURE__ */ jsx(Tooltip, { content: children, style: { display: tooltipDisplay }, children: /* @__PURE__ */ jsx(
    Typo,
    __spreadProps(__spreadValues({}, rest), {
      ref,
      style: __spreadValues({
        width: "100%",
        textOverflow: "ellipsis",
        overflow: "hidden",
        WebkitLineClamp: lineClamp,
        display: "-webkit-box",
        WebkitBoxOrient: "vertical",
        wordBreak: "break-word"
      }, style),
      children
    })
  ) });
}

export {
  EllipsisTooltip
};
//# sourceMappingURL=chunk-BCRXWYJ3.js.map