@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
60 lines (59 loc) • 2.16 kB
JavaScript
"use client";
import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
import { Box } from "../../../core/Box/Box.mjs";
import { ScrollAreaProvider } from "../ScrollArea.context.mjs";
import { useState } from "react";
import { useMergedRef } from "@mantine/hooks";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/ScrollArea/ScrollAreaRoot/ScrollAreaRoot.tsx
const defaultProps = {
scrollHideDelay: 1e3,
type: "hover"
};
function ScrollAreaRoot(_props) {
const { type, scrollHideDelay, scrollbars, getStyles, ref, ...others } = useProps("ScrollAreaRoot", defaultProps, _props);
const [scrollArea, setScrollArea] = useState(null);
const [viewport, setViewport] = useState(null);
const [content, setContent] = useState(null);
const [scrollbarX, setScrollbarX] = useState(null);
const [scrollbarY, setScrollbarY] = useState(null);
const [cornerWidth, setCornerWidth] = useState(0);
const [cornerHeight, setCornerHeight] = useState(0);
const [scrollbarXEnabled, setScrollbarXEnabled] = useState(false);
const [scrollbarYEnabled, setScrollbarYEnabled] = useState(false);
const rootRef = useMergedRef(ref, (node) => setScrollArea(node));
return /* @__PURE__ */ jsx(ScrollAreaProvider, {
value: {
type,
scrollHideDelay,
scrollArea,
viewport,
onViewportChange: setViewport,
content,
onContentChange: setContent,
scrollbarX,
onScrollbarXChange: setScrollbarX,
scrollbarXEnabled,
onScrollbarXEnabledChange: setScrollbarXEnabled,
scrollbarY,
onScrollbarYChange: setScrollbarY,
scrollbarYEnabled,
onScrollbarYEnabledChange: setScrollbarYEnabled,
onCornerWidthChange: setCornerWidth,
onCornerHeightChange: setCornerHeight,
getStyles
},
children: /* @__PURE__ */ jsx(Box, {
...others,
ref: rootRef,
__vars: {
"--sa-corner-width": scrollbars !== "xy" ? "0px" : `${cornerWidth}px`,
"--sa-corner-height": scrollbars !== "xy" ? "0px" : `${cornerHeight}px`
}
})
});
}
ScrollAreaRoot.displayName = "@mantine/core/ScrollAreaRoot";
//#endregion
export { ScrollAreaRoot };
//# sourceMappingURL=ScrollAreaRoot.mjs.map