@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
44 lines • 2.24 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useTooltipContentScroll = void 0;
const react_1 = __importDefault(require("react"));
const resizeObserver_1 = require("../../../utils/resizeObserver/resizeObserver");
const hasScroll_1 = require("../../../utils/scroll/hasScroll");
/**
* Custom hook that determines if the tooltip content has scroll and provides a ref to the content element.
*
* @param tooltipRef - Ref to the tooltip element.
* @returns An object containing the `contentHasScroll` boolean and the `contentRefHandler` callback function.
*/
const useTooltipContentScroll = ({ tooltipRef, }) => {
const [contentHasScroll, setContentHasScroll] = react_1.default.useState(false);
const resizeObserverRef = react_1.default.useRef();
const contentRefHandler = react_1.default.useCallback((innerContentElement) => {
if (innerContentElement) {
const handleInnerContentResize = (innerContentElement) => {
const _hasScroll = (0, hasScroll_1.hasScroll)(innerContentElement);
// If the tooltip content has scroll and the focus is not already inside the tooltip, focus the inner content
if (_hasScroll && !tooltipRef.current?.contains(document.activeElement)) {
// Set the tab index to allow focus
innerContentElement.setAttribute('tabindex', '0');
innerContentElement.focus();
}
setContentHasScroll(_hasScroll);
};
handleInnerContentResize(innerContentElement);
resizeObserverRef.current = new resizeObserver_1.ResizeObserver(() => {
handleInnerContentResize(innerContentElement);
});
resizeObserverRef.current.observe(innerContentElement);
}
else {
resizeObserverRef.current?.disconnect();
}
}, []);
return { contentHasScroll, contentRefHandler };
};
exports.useTooltipContentScroll = useTooltipContentScroll;
//# sourceMappingURL=useTooltipContentScroll.js.map