@mantine/core/esm/components/Drawer/DrawerRoot.mjs

React components library focused on usability, accessibility and developer experience

"use client";
import { rem } from "../../core/utils/units-converters/rem.mjs";
import { getDefaultZIndex } from "../../core/utils/get-default-z-index/get-default-z-index.mjs";
import { getSize } from "../../core/utils/get-size/get-size.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 { useDirection } from "../../core/DirectionProvider/DirectionProvider.mjs";
import { ScrollArea } from "../ScrollArea/ScrollArea.mjs";
import { ModalBase } from "../ModalBase/ModalBase.mjs";
import { DrawerProvider } from "./Drawer.context.mjs";
import Drawer_module_default from "./Drawer.module.mjs";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/Drawer/DrawerRoot.tsx
function getDrawerAlign(position) {
	switch (position) {
		case "top": return "flex-start";
		case "bottom": return "flex-end";
		default: return;
	}
}
function getDrawerFlex(position) {
	if (position === "top" || position === "bottom") return "0 0 calc(100% - var(--drawer-offset, 0rem) * 2)";
}
const transitions = {
	top: "slide-down",
	bottom: "slide-up",
	left: "slide-right",
	right: "slide-left"
};
const rtlTransitions = {
	top: "slide-down",
	bottom: "slide-up",
	right: "slide-right",
	left: "slide-left"
};
const defaultProps = {
	closeOnClickOutside: true,
	withinPortal: true,
	lockScroll: true,
	trapFocus: true,
	returnFocus: true,
	closeOnEscape: true,
	keepMounted: false,
	zIndex: getDefaultZIndex("modal"),
	position: "left"
};
const varsResolver = createVarsResolver((_, { position, size, offset }) => ({ root: {
	"--drawer-size": getSize(size, "drawer-size"),
	"--drawer-flex": getDrawerFlex(position),
	"--drawer-height": position === "left" || position === "right" ? void 0 : "var(--drawer-size)",
	"--drawer-align": getDrawerAlign(position),
	"--drawer-justify": position === "right" ? "flex-end" : void 0,
	"--drawer-offset": rem(offset)
} }));
const DrawerRoot = factory((_props) => {
	const props = useProps("DrawerRoot", defaultProps, _props);
	const { classNames, className, style, styles, unstyled, vars, scrollAreaComponent, position, transitionProps, radius, attributes, ...others } = props;
	const { dir } = useDirection();
	const getStyles = useStyles({
		name: "Drawer",
		classes: Drawer_module_default,
		props,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		vars,
		varsResolver
	});
	const drawerTransition = (dir === "rtl" ? rtlTransitions : transitions)[position];
	return /* @__PURE__ */ jsx(DrawerProvider, {
		value: {
			scrollAreaComponent,
			getStyles,
			radius
		},
		children: /* @__PURE__ */ jsx(ModalBase, {
			...getStyles("root"),
			transitionProps: {
				transition: drawerTransition,
				...transitionProps
			},
			"data-offset-scrollbars": scrollAreaComponent === ScrollArea.Autosize || void 0,
			unstyled,
			...others
		})
	});
});
DrawerRoot.classes = Drawer_module_default;
DrawerRoot.varsResolver = varsResolver;
DrawerRoot.displayName = "@mantine/core/DrawerRoot";
//#endregion
export { DrawerRoot };

//# sourceMappingURL=DrawerRoot.mjs.map