@mantine/core/cjs/components/ScrollArea/ScrollArea.cjs

React components library focused on usability, accessibility and developer experience

"use client";
require("../../_virtual/_rolldown/runtime.cjs");
const require_rem = require("../../core/utils/units-converters/rem.cjs");
const require_create_vars_resolver = require("../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
const require_factory = require("../../core/factory/factory.cjs");
const require_Box = require("../../core/Box/Box.cjs");
const require_use_resize_observer = require("./use-resize-observer.cjs");
const require_ScrollAreaCorner = require("./ScrollAreaCorner/ScrollAreaCorner.cjs");
const require_ScrollAreaRoot = require("./ScrollAreaRoot/ScrollAreaRoot.cjs");
const require_ScrollAreaScrollbar = require("./ScrollAreaScrollbar/ScrollAreaScrollbar.cjs");
const require_ScrollAreaThumb = require("./ScrollAreaThumb/ScrollAreaThumb.cjs");
const require_ScrollAreaViewport = require("./ScrollAreaViewport/ScrollAreaViewport.cjs");
const require_ScrollArea_module = require("./ScrollArea.module.cjs");
let react = require("react");
let _mantine_hooks = require("@mantine/hooks");
let react_jsx_runtime = require("react/jsx-runtime");
let _floating_ui_react = require("@floating-ui/react");
//#region packages/@mantine/core/src/components/ScrollArea/ScrollArea.tsx
const defaultProps = {
	scrollHideDelay: 1e3,
	type: "hover",
	scrollbars: "xy"
};
const varsResolver = require_create_vars_resolver.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": require_rem.rem(scrollbarSize),
		"--scrollarea-over-scroll-behavior": overrideOverscrollBehavior
	} };
});
const ScrollArea = require_factory.factory((_props) => {
	const props = require_use_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] = (0, react.useState)(false);
	const [verticalThumbVisible, setVerticalThumbVisible] = (0, react.useState)(false);
	const [horizontalThumbVisible, setHorizontalThumbVisible] = (0, react.useState)(false);
	const prevAtTopRef = (0, react.useRef)(true);
	const prevAtBottomRef = (0, react.useRef)(false);
	const prevAtLeftRef = (0, react.useRef)(true);
	const prevAtRightRef = (0, react.useRef)(false);
	const getStyles = require_use_styles.useStyles({
		name: "ScrollArea",
		props,
		classes: require_ScrollArea_module.default,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		vars,
		varsResolver
	});
	const localViewportRef = (0, react.useRef)(null);
	const combinedViewportRef = (0, _floating_ui_react.useMergeRefs)([viewportRef, localViewportRef]);
	(0, _mantine_hooks.useIsomorphicEffect)(() => {
		if (startScrollPosition && localViewportRef.current) localViewportRef.current.scrollTo({
			left: startScrollPosition.x ?? 0,
			top: startScrollPosition.y ?? 0
		});
	}, []);
	require_use_resize_observer.useResizeObserver(offsetScrollbars === "present" ? localViewportRef.current : null, () => {
		const element = localViewportRef.current;
		if (element) {
			setVerticalThumbVisible(element.scrollHeight > element.clientHeight);
			setHorizontalThumbVisible(element.scrollWidth > element.clientWidth);
		}
	});
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ScrollAreaRoot.ScrollAreaRoot, {
		getStyles,
		type: type === "never" ? "always" : type,
		scrollHideDelay,
		scrollbars,
		...getStyles("root"),
		...others,
		children: [
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScrollAreaViewport.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__ */ (0, react_jsx_runtime.jsx)(require_ScrollAreaScrollbar.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__ */ (0, react_jsx_runtime.jsx)(require_ScrollAreaThumb.ScrollAreaThumb, { ...getStyles("thumb") })
			}),
			(scrollbars === "xy" || scrollbars === "y") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScrollAreaScrollbar.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__ */ (0, react_jsx_runtime.jsx)(require_ScrollAreaThumb.ScrollAreaThumb, { ...getStyles("thumb") })
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScrollAreaCorner.ScrollAreaCorner, {
				...getStyles("corner"),
				"data-hovered": scrollbarHovered || void 0,
				"data-hidden": type === "never" || void 0
			})
		]
	});
});
ScrollArea.displayName = "@mantine/core/ScrollArea";
const ScrollAreaAutosize = require_factory.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 } = require_use_props.useProps("ScrollAreaAutosize", defaultProps, props);
	const viewportObserverRef = (0, react.useRef)(null);
	const combinedViewportRef = (0, _floating_ui_react.useMergeRefs)([viewportRef, viewportObserverRef]);
	const overflowingRef = (0, react.useRef)(false);
	const didMountRef = (0, react.useRef)(false);
	const handleOverflowCheck = (0, react.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;
		}
	});
	require_use_resize_observer.useResizeObserver(onOverflowChange ? viewportObserverRef.current : null, handleOverflowCheck);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
		...others,
		variant,
		style: [{
			display: "flex",
			overflow: "hidden"
		}, style],
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.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__ */ (0, react_jsx_runtime.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 = require_ScrollArea_module.default;
ScrollArea.varsResolver = varsResolver;
ScrollAreaAutosize.displayName = "@mantine/core/ScrollAreaAutosize";
ScrollAreaAutosize.classes = require_ScrollArea_module.default;
ScrollArea.Autosize = ScrollAreaAutosize;
//#endregion
exports.ScrollArea = ScrollArea;
exports.ScrollAreaAutosize = ScrollAreaAutosize;

//# sourceMappingURL=ScrollArea.cjs.map