@hitachivantara/uikit-react-core/dist/esm/OverflowTooltip/OverflowTooltip.js

Core React components for the NEXT Design System.

import { jsx } from "react/jsx-runtime";
import { useMemo } from "react";
import { useResizeDetector } from "react-resize-detector";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { useClasses } from "./OverflowTooltip.styles.js";
import { staticClasses } from "./OverflowTooltip.styles.js";
import { HvTooltip } from "../Tooltip/Tooltip.js";
import { HvTypography } from "../Typography/Typography.js";
const isParagraph = (children = "") => /\s/.test(children);
const HvOverflowTooltip = (props) => {
  const {
    id,
    classes: classesProp,
    className,
    data,
    open,
    paragraphOverflow,
    placement = "top-start",
    tooltipsProps
  } = useDefaultProps("HvOverflowTooltip", props);
  const { classes, cx } = useClasses(classesProp);
  const {
    height = 0,
    width = 0,
    ref
  } = useResizeDetector({
    refreshMode: "debounce",
    refreshOptions: {
      trailing: true
    },
    handleHeight: false
  });
  const isParag = useMemo(
    () => paragraphOverflow && isParagraph(data?.toString()),
    [data, paragraphOverflow]
  );
  const isOverflowing = useMemo(() => {
    if (isParag) {
      const scrollHeight = ref.current?.scrollHeight || 0;
      return scrollHeight - height >= 1;
    }
    const scrollWidth = ref.current?.scrollWidth || 0;
    return scrollWidth - width >= 1;
  }, [height, isParag, ref, width]);
  const content = useMemo(
    () => /* @__PURE__ */ jsx(
      "div",
      {
        ref,
        className: cx(
          {
            [classes.tooltipAnchor]: !isParag,
            [classes.tooltipAnchorParagraph]: isParag
          },
          className
        ),
        children: data
      }
    ),
    [
      className,
      classes.tooltipAnchor,
      classes.tooltipAnchorParagraph,
      cx,
      data,
      isParag,
      ref
    ]
  );
  return /* @__PURE__ */ jsx(
    HvTooltip,
    {
      id,
      disableHoverListener: !isOverflowing,
      open,
      placement,
      title: /* @__PURE__ */ jsx(HvTypography, { className: classes.tooltipData, variant: "body", children: data }),
      "aria-label": null,
      "aria-labelledby": null,
      ...tooltipsProps,
      children: content
    }
  );
};
export {
  HvOverflowTooltip,
  staticClasses as overflowTooltipClasses
};