@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
100 lines (99 loc) • 3.79 kB
JavaScript
"use client";
require("../../_virtual/_rolldown/runtime.cjs");
const require_rem = require("../../core/utils/units-converters/rem.cjs");
const require_get_default_z_index = require("../../core/utils/get-default-z-index/get-default-z-index.cjs");
const require_get_size = require("../../core/utils/get-size/get-size.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_DirectionProvider = require("../../core/DirectionProvider/DirectionProvider.cjs");
const require_ScrollArea = require("../ScrollArea/ScrollArea.cjs");
const require_ModalBase = require("../ModalBase/ModalBase.cjs");
const require_Drawer_context = require("./Drawer.context.cjs");
const require_Drawer_module = require("./Drawer.module.cjs");
let react_jsx_runtime = require("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: require_get_default_z_index.getDefaultZIndex("modal"),
position: "left"
};
const varsResolver = require_create_vars_resolver.createVarsResolver((_, { position, size, offset }) => ({ root: {
"--drawer-size": require_get_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": require_rem.rem(offset)
} }));
const DrawerRoot = require_factory.factory((_props) => {
const props = require_use_props.useProps("DrawerRoot", defaultProps, _props);
const { classNames, className, style, styles, unstyled, vars, scrollAreaComponent, position, transitionProps, radius, attributes, ...others } = props;
const { dir } = require_DirectionProvider.useDirection();
const getStyles = require_use_styles.useStyles({
name: "Drawer",
classes: require_Drawer_module.default,
props,
className,
style,
classNames,
styles,
unstyled,
attributes,
vars,
varsResolver
});
const drawerTransition = (dir === "rtl" ? rtlTransitions : transitions)[position];
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Drawer_context.DrawerProvider, {
value: {
scrollAreaComponent,
getStyles,
radius
},
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ModalBase.ModalBase, {
...getStyles("root"),
transitionProps: {
transition: drawerTransition,
...transitionProps
},
"data-offset-scrollbars": scrollAreaComponent === require_ScrollArea.ScrollArea.Autosize || void 0,
unstyled,
...others
})
});
});
DrawerRoot.classes = require_Drawer_module.default;
DrawerRoot.varsResolver = varsResolver;
DrawerRoot.displayName = "@mantine/core/DrawerRoot";
//#endregion
exports.DrawerRoot = DrawerRoot;
//# sourceMappingURL=DrawerRoot.cjs.map