@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
88 lines (87 loc) • 2.51 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const reactResizeDetector = require("react-resize-detector");
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const OverflowTooltip_styles = require("./OverflowTooltip.styles.cjs");
const Tooltip = require("../Tooltip/Tooltip.cjs");
const Typography = require("../Typography/Typography.cjs");
const isParagraph = (children = "") => /\s/.test(children);
const HvOverflowTooltip = (props) => {
const {
id,
classes: classesProp,
className,
data,
open,
paragraphOverflow,
placement = "top-start",
tooltipsProps
} = uikitReactUtils.useDefaultProps("HvOverflowTooltip", props);
const { classes, cx } = OverflowTooltip_styles.useClasses(classesProp);
const {
height = 0,
width = 0,
ref
} = reactResizeDetector.useResizeDetector({
refreshMode: "debounce",
refreshOptions: {
trailing: true
},
handleHeight: false
});
const isParag = React.useMemo(
() => paragraphOverflow && isParagraph(data?.toString()),
[data, paragraphOverflow]
);
const isOverflowing = React.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 = React.useMemo(
() => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
Tooltip.HvTooltip,
{
id,
disableHoverListener: !isOverflowing,
open,
placement,
title: /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: classes.tooltipData, variant: "body", children: data }),
"aria-label": null,
"aria-labelledby": null,
...tooltipsProps,
children: content
}
);
};
exports.overflowTooltipClasses = OverflowTooltip_styles.staticClasses;
exports.HvOverflowTooltip = HvOverflowTooltip;