@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
41 lines (40 loc) • 1.61 kB
JavaScript
"use client";
import { useScrollAreaContext } from "../ScrollArea.context.mjs";
import { ScrollAreaScrollbarAuto } from "./ScrollAreaScrollbarAuto.mjs";
import { useEffect, useState } from "react";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarHover.tsx
function ScrollAreaScrollbarHover(props) {
const { forceMount, ...scrollbarProps } = props;
const context = useScrollAreaContext();
const [visible, setVisible] = useState(false);
useEffect(() => {
const { scrollArea } = context;
let hideTimer = 0;
if (scrollArea) {
const handlePointerEnter = () => {
window.clearTimeout(hideTimer);
setVisible(true);
};
const handlePointerLeave = () => {
hideTimer = window.setTimeout(() => setVisible(false), context.scrollHideDelay);
};
scrollArea.addEventListener("pointerenter", handlePointerEnter);
scrollArea.addEventListener("pointerleave", handlePointerLeave);
return () => {
window.clearTimeout(hideTimer);
scrollArea.removeEventListener("pointerenter", handlePointerEnter);
scrollArea.removeEventListener("pointerleave", handlePointerLeave);
};
}
}, [context.scrollArea, context.scrollHideDelay]);
if (forceMount || visible) return /* @__PURE__ */ jsx(ScrollAreaScrollbarAuto, {
"data-state": visible ? "visible" : "hidden",
...scrollbarProps
});
return null;
}
ScrollAreaScrollbarHover.displayName = "@mantine/core/ScrollAreaScrollbarHover";
//#endregion
export { ScrollAreaScrollbarHover };
//# sourceMappingURL=ScrollAreaScrollbarHover.mjs.map