@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
216 lines (215 loc) • 8.77 kB
JavaScript
"use client";
import { rem } from "../../core/utils/units-converters/rem.mjs";
import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
import { factory } from "../../core/factory/factory.mjs";
import { Box } from "../../core/Box/Box.mjs";
import { useResizeObserver } from "./use-resize-observer.mjs";
import { ScrollAreaCorner } from "./ScrollAreaCorner/ScrollAreaCorner.mjs";
import { ScrollAreaRoot } from "./ScrollAreaRoot/ScrollAreaRoot.mjs";
import { ScrollAreaScrollbar } from "./ScrollAreaScrollbar/ScrollAreaScrollbar.mjs";
import { ScrollAreaThumb } from "./ScrollAreaThumb/ScrollAreaThumb.mjs";
import { ScrollAreaViewport } from "./ScrollAreaViewport/ScrollAreaViewport.mjs";
import ScrollArea_module_default from "./ScrollArea.module.mjs";
import { useEffectEvent, useRef, useState } from "react";
import { useIsomorphicEffect } from "@mantine/hooks";
import { jsx, jsxs } from "react/jsx-runtime";
import { useMergeRefs } from "@floating-ui/react";
//#region packages/@mantine/core/src/components/ScrollArea/ScrollArea.tsx
const defaultProps = {
scrollHideDelay: 1e3,
type: "hover",
scrollbars: "xy"
};
const varsResolver = createVarsResolver((_, { scrollbarSize, overscrollBehavior, scrollbars }) => {
let overrideOverscrollBehavior = overscrollBehavior;
if (overscrollBehavior && scrollbars) {
if (scrollbars === "x") overrideOverscrollBehavior = `${overscrollBehavior} auto`;
else if (scrollbars === "y") overrideOverscrollBehavior = `auto ${overscrollBehavior}`;
}
return { root: {
"--scrollarea-scrollbar-size": rem(scrollbarSize),
"--scrollarea-over-scroll-behavior": overrideOverscrollBehavior
} };
});
const ScrollArea = factory((_props) => {
const props = useProps("ScrollArea", defaultProps, _props);
const { classNames, className, style, styles, unstyled, scrollbarSize, vars, type, scrollHideDelay, viewportProps, viewportRef, onScrollPositionChange, children, offsetScrollbars, scrollbars, onBottomReached, onTopReached, onLeftReached, onRightReached, overscrollBehavior, startScrollPosition, attributes, ...others } = props;
const [scrollbarHovered, setScrollbarHovered] = useState(false);
const [verticalThumbVisible, setVerticalThumbVisible] = useState(false);
const [horizontalThumbVisible, setHorizontalThumbVisible] = useState(false);
const prevAtTopRef = useRef(true);
const prevAtBottomRef = useRef(false);
const prevAtLeftRef = useRef(true);
const prevAtRightRef = useRef(false);
const getStyles = useStyles({
name: "ScrollArea",
props,
classes: ScrollArea_module_default,
className,
style,
classNames,
styles,
unstyled,
attributes,
vars,
varsResolver
});
const localViewportRef = useRef(null);
const combinedViewportRef = useMergeRefs([viewportRef, localViewportRef]);
useIsomorphicEffect(() => {
if (startScrollPosition && localViewportRef.current) localViewportRef.current.scrollTo({
left: startScrollPosition.x ?? 0,
top: startScrollPosition.y ?? 0
});
}, []);
useResizeObserver(offsetScrollbars === "present" ? localViewportRef.current : null, () => {
const element = localViewportRef.current;
if (element) {
setVerticalThumbVisible(element.scrollHeight > element.clientHeight);
setHorizontalThumbVisible(element.scrollWidth > element.clientWidth);
}
});
return /* @__PURE__ */ jsxs(ScrollAreaRoot, {
getStyles,
type: type === "never" ? "always" : type,
scrollHideDelay,
scrollbars,
...getStyles("root"),
...others,
children: [
/* @__PURE__ */ jsx(ScrollAreaViewport, {
...viewportProps,
...getStyles("viewport", { style: viewportProps?.style }),
ref: combinedViewportRef,
"data-offset-scrollbars": offsetScrollbars === true ? "xy" : offsetScrollbars || void 0,
"data-scrollbars": scrollbars || void 0,
"data-horizontal-hidden": offsetScrollbars === "present" && !horizontalThumbVisible ? "true" : void 0,
"data-vertical-hidden": offsetScrollbars === "present" && !verticalThumbVisible ? "true" : void 0,
onScroll: (e) => {
viewportProps?.onScroll?.(e);
onScrollPositionChange?.({
x: e.currentTarget.scrollLeft,
y: e.currentTarget.scrollTop
});
const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = e.currentTarget;
const isAtBottom = scrollTop - (scrollHeight - clientHeight) >= -.8;
const isAtTop = scrollTop === 0;
if (isAtBottom && !prevAtBottomRef.current) onBottomReached?.();
if (isAtTop && !prevAtTopRef.current) onTopReached?.();
prevAtBottomRef.current = isAtBottom;
prevAtTopRef.current = isAtTop;
const isAtRight = scrollLeft - (scrollWidth - clientWidth) >= -.8;
const isAtLeft = scrollLeft === 0;
if (isAtRight && !prevAtRightRef.current) onRightReached?.();
if (isAtLeft && !prevAtLeftRef.current) onLeftReached?.();
prevAtRightRef.current = isAtRight;
prevAtLeftRef.current = isAtLeft;
},
children
}),
(scrollbars === "xy" || scrollbars === "x") && /* @__PURE__ */ jsx(ScrollAreaScrollbar, {
...getStyles("scrollbar"),
orientation: "horizontal",
"data-hidden": type === "never" || offsetScrollbars === "present" && !horizontalThumbVisible ? true : void 0,
forceMount: true,
onMouseEnter: () => setScrollbarHovered(true),
onMouseLeave: () => setScrollbarHovered(false),
children: /* @__PURE__ */ jsx(ScrollAreaThumb, { ...getStyles("thumb") })
}),
(scrollbars === "xy" || scrollbars === "y") && /* @__PURE__ */ jsx(ScrollAreaScrollbar, {
...getStyles("scrollbar"),
orientation: "vertical",
"data-hidden": type === "never" || offsetScrollbars === "present" && !verticalThumbVisible ? true : void 0,
forceMount: true,
onMouseEnter: () => setScrollbarHovered(true),
onMouseLeave: () => setScrollbarHovered(false),
children: /* @__PURE__ */ jsx(ScrollAreaThumb, { ...getStyles("thumb") })
}),
/* @__PURE__ */ jsx(ScrollAreaCorner, {
...getStyles("corner"),
"data-hovered": scrollbarHovered || void 0,
"data-hidden": type === "never" || void 0
})
]
});
});
ScrollArea.displayName = "@mantine/core/ScrollArea";
const ScrollAreaAutosize = factory((props) => {
const { children, classNames, styles, scrollbarSize, scrollHideDelay, type, dir, offsetScrollbars, overscrollBehavior, viewportRef, onScrollPositionChange, unstyled, variant, viewportProps, scrollbars, style, vars, onBottomReached, onTopReached, startScrollPosition, onOverflowChange, ...others } = useProps("ScrollAreaAutosize", defaultProps, props);
const viewportObserverRef = useRef(null);
const combinedViewportRef = useMergeRefs([viewportRef, viewportObserverRef]);
const overflowingRef = useRef(false);
const didMountRef = useRef(false);
const handleOverflowCheck = useEffectEvent(() => {
const el = viewportObserverRef.current;
if (!el || !onOverflowChange) return;
const isOverflowing = el.scrollHeight > el.clientHeight;
if (isOverflowing !== overflowingRef.current) {
if (didMountRef.current) onOverflowChange(isOverflowing);
else {
didMountRef.current = true;
if (isOverflowing) onOverflowChange(true);
}
overflowingRef.current = isOverflowing;
}
});
useResizeObserver(onOverflowChange ? viewportObserverRef.current : null, handleOverflowCheck);
return /* @__PURE__ */ jsx(Box, {
...others,
variant,
style: [{
display: "flex",
overflow: "hidden"
}, style],
children: /* @__PURE__ */ jsx(Box, {
style: {
display: "flex",
flexDirection: "column",
flex: 1,
overflow: "hidden",
...scrollbars === "y" && { minWidth: 0 },
...scrollbars === "x" && { minHeight: 0 },
...scrollbars === "xy" && {
minWidth: 0,
minHeight: 0
},
...scrollbars === false && {
minWidth: 0,
minHeight: 0
}
},
children: /* @__PURE__ */ jsx(ScrollArea, {
classNames,
styles,
scrollHideDelay,
scrollbarSize,
type,
dir,
offsetScrollbars,
overscrollBehavior,
viewportRef: combinedViewportRef,
onScrollPositionChange,
unstyled,
variant,
viewportProps,
vars,
scrollbars,
onBottomReached,
onTopReached,
startScrollPosition,
"data-autosize": "true",
children
})
})
});
});
ScrollArea.classes = ScrollArea_module_default;
ScrollArea.varsResolver = varsResolver;
ScrollAreaAutosize.displayName = "@mantine/core/ScrollAreaAutosize";
ScrollAreaAutosize.classes = ScrollArea_module_default;
ScrollArea.Autosize = ScrollAreaAutosize;
//#endregion
export { ScrollArea, ScrollAreaAutosize };
//# sourceMappingURL=ScrollArea.mjs.map