@intility/bifrost-react/dist/components/Ellipsis/Ellipsis.js

React library for Intility's design system, Bifrost.

"use client";

import { c as _c } from "react-compiler-runtime";
import { forwardRef, useRef, useState } from "react";
import classNames from "classnames";
import Tooltip from "../Tooltip/Tooltip.js";
import setRef from "../../utils/setRef.js";
import useResizeObserver from "../../hooks/useResizeObserver.js";
import { jsx as _jsx } from "react/jsx-runtime";
/**
 * Show ellipsis `...` for text overflow, with a tooltip for full text if
 * overflowing.
 *
 * @see https://bifrost.intility.com/react/ellipsis
 *
 * @example
 * <Ellipsis>Long text</Ellipsis>
 */
const Ellipsis = /*#__PURE__*/forwardRef((t0, ref) => {
  const $ = _c(17);
  const {
    lines: t1,
    padded: t2,
    children,
    ...props
  } = t0;
  const lines = t1 === undefined ? 1 : t1;
  const padded = t2 === undefined ? false : t2;
  const [hasOverflow, setHasOverflow] = useState(false);
  const spanRef = useRef(null);
  let t3;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t3 = () => {
      if (!spanRef.current) {
        return;
      }
      setHasOverflow(spanRef.current.scrollHeight > spanRef.current.clientHeight);
    };
    $[0] = t3;
  } else {
    t3 = $[0];
  }
  useResizeObserver(spanRef, t3);
  const T0 = Tooltip;
  const t4 = "neutral";
  const t5 = !hasOverflow;
  let t6;
  if ($[1] !== ref) {
    t6 = r => {
      setRef(ref, r);
      setRef(spanRef, r);
    };
    $[1] = ref;
    $[2] = t6;
  } else {
    t6 = $[2];
  }
  const t7 = classNames("bf-ellipsis", props.className, {
    "bf-ellipsis-padded": padded,
    "bf-ellipsis-line": lines === 1
  });
  let t8;
  if ($[3] !== lines || $[4] !== props.style) {
    t8 = {
      "--bf-ellipsis-lines": lines,
      ...props.style
    };
    $[3] = lines;
    $[4] = props.style;
    $[5] = t8;
  } else {
    t8 = $[5];
  }
  const t9 = t8;
  let t10;
  if ($[6] !== children || $[7] !== props || $[8] !== t6 || $[9] !== t7 || $[10] !== t9) {
    t10 = /*#__PURE__*/_jsx("span", {
      ...props,
      ref: t6,
      className: t7,
      style: t9,
      children: children
    });
    $[6] = children;
    $[7] = props;
    $[8] = t6;
    $[9] = t7;
    $[10] = t9;
    $[11] = t10;
  } else {
    t10 = $[11];
  }
  let t11;
  if ($[12] !== T0 || $[13] !== children || $[14] !== t10 || $[15] !== t5) {
    t11 = /*#__PURE__*/_jsx(T0, {
      content: children,
      state: t4,
      disabled: t5,
      children: t10
    });
    $[12] = T0;
    $[13] = children;
    $[14] = t10;
    $[15] = t5;
    $[16] = t11;
  } else {
    t11 = $[16];
  }
  return t11;
});
Ellipsis.displayName = "Ellipsis";
export default Ellipsis;