@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
39 lines (38 loc) • 1.42 kB
JavaScript
"use client";
import { Box } from "../../../core/Box/Box.mjs";
import { useScrollAreaContext } from "../ScrollArea.context.mjs";
import { useMergedRef } from "@mantine/hooks";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/ScrollArea/ScrollAreaViewport/ScrollAreaViewport.tsx
function ScrollAreaViewport({ children, style, ref, onWheel, ...others }) {
const ctx = useScrollAreaContext();
const rootRef = useMergedRef(ref, ctx.onViewportChange);
const handleWheel = (event) => {
onWheel?.(event);
if (ctx.scrollbarXEnabled && ctx.viewport && event.shiftKey) {
const { scrollTop, scrollHeight, clientHeight, scrollWidth, clientWidth } = ctx.viewport;
const isAtTop = scrollTop < 1;
const isAtBottom = scrollTop >= scrollHeight - clientHeight - 1;
if (scrollWidth > clientWidth && (isAtTop || isAtBottom)) event.stopPropagation();
}
};
return /* @__PURE__ */ jsx(Box, {
...others,
ref: rootRef,
onWheel: handleWheel,
style: {
overflowX: ctx.scrollbarXEnabled ? "scroll" : "hidden",
overflowY: ctx.scrollbarYEnabled ? "scroll" : "hidden",
...style
},
children: /* @__PURE__ */ jsx("div", {
...ctx.getStyles("content"),
ref: ctx.onContentChange,
children
})
});
}
ScrollAreaViewport.displayName = "@mantine/core/ScrollAreaViewport";
//#endregion
export { ScrollAreaViewport };
//# sourceMappingURL=ScrollAreaViewport.mjs.map