@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
40 lines (39 loc) • 1.62 kB
JavaScript
"use client";
require("../../../_virtual/_rolldown/runtime.cjs");
const require_Box = require("../../../core/Box/Box.cjs");
const require_ScrollArea_context = require("../ScrollArea.context.cjs");
let _mantine_hooks = require("@mantine/hooks");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/ScrollArea/ScrollAreaViewport/ScrollAreaViewport.tsx
function ScrollAreaViewport({ children, style, ref, onWheel, ...others }) {
const ctx = require_ScrollArea_context.useScrollAreaContext();
const rootRef = (0, _mantine_hooks.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__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
...others,
ref: rootRef,
onWheel: handleWheel,
style: {
overflowX: ctx.scrollbarXEnabled ? "scroll" : "hidden",
overflowY: ctx.scrollbarYEnabled ? "scroll" : "hidden",
...style
},
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
...ctx.getStyles("content"),
ref: ctx.onContentChange,
children
})
});
}
ScrollAreaViewport.displayName = "@mantine/core/ScrollAreaViewport";
//#endregion
exports.ScrollAreaViewport = ScrollAreaViewport;
//# sourceMappingURL=ScrollAreaViewport.cjs.map