@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
33 lines (32 loc) • 1.47 kB
JavaScript
"use client";
import { useScrollAreaContext } from "../ScrollArea.context.mjs";
import { useResizeObserver } from "../use-resize-observer.mjs";
import { ScrollAreaScrollbarVisible } from "./ScrollAreaScrollbarVisible.mjs";
import { useState } from "react";
import { useDebouncedCallback } from "@mantine/hooks";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarAuto.tsx
function ScrollAreaScrollbarAuto(props) {
const context = useScrollAreaContext();
const { forceMount, ...scrollbarProps } = props;
const [visible, setVisible] = useState(false);
const isHorizontal = props.orientation === "horizontal";
const handleResize = useDebouncedCallback(() => {
if (context.viewport) {
const isOverflowX = context.viewport.offsetWidth < context.viewport.scrollWidth;
const isOverflowY = context.viewport.offsetHeight < context.viewport.scrollHeight;
setVisible(isHorizontal ? isOverflowX : isOverflowY);
}
}, 10);
useResizeObserver(context.viewport, handleResize);
useResizeObserver(context.content, handleResize);
if (forceMount || visible) return /* @__PURE__ */ jsx(ScrollAreaScrollbarVisible, {
"data-state": visible ? "visible" : "hidden",
...scrollbarProps
});
return null;
}
ScrollAreaScrollbarAuto.displayName = "@mantine/core/ScrollAreaScrollbarAuto";
//#endregion
export { ScrollAreaScrollbarAuto };
//# sourceMappingURL=ScrollAreaScrollbarAuto.mjs.map