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

UI Kit Core React components.

import { HvTooltip } from "../Tooltip/Tooltip.js";
import { useClasses } from "./OverflowTooltip.styles.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { useMemo, useState } from "react";
import { jsx } from "react/jsx-runtime";
import { useResizeDetector } from "react-resize-detector";
//#region src/OverflowTooltip/OverflowTooltip.tsx
var isParagraph = (children = "") => /\s/.test(children);
/**
* Displays a tooltip automatically when the text content overflows its container.
*/
var HvOverflowTooltip = (props) => {
	const { classes: classesProp, className, data, paragraphOverflow, tooltipsProps, ...others } = useDefaultProps("HvOverflowTooltip", props);
	const { classes, cx } = useClasses(classesProp);
	const [isOverflowing, setIsOverflowing] = useState(false);
	const isParag = useMemo(() => paragraphOverflow && isParagraph(data?.toString()), [data, paragraphOverflow]);
	const { ref } = useResizeDetector({
		refreshMode: "throttle",
		disableRerender: true,
		refreshRate: 100,
		refreshOptions: {
			trailing: true,
			leading: true
		},
		onResize({ width, height, entry }) {
			const { scrollHeight = 0, scrollWidth = 0 } = entry?.target || {};
			setIsOverflowing(isParag ? scrollHeight - (height || 0) >= 1 : scrollWidth - (width || 0) >= 1);
		}
	});
	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, {
		disableHoverListener: !isOverflowing,
		classes: { tooltip: classes.tooltipData },
		title: data,
		"aria-label": null,
		"aria-labelledby": null,
		...tooltipsProps,
		...others,
		children: content
	});
};
//#endregion
export { HvOverflowTooltip };