@hitachivantara/uikit-react-core/dist/Drawer/Drawer.js

UI Kit Core React components.

import { HvIcon } from "../icons.js";
import { HvIconButton } from "../IconButton/IconButton.js";
import { useClasses } from "./Drawer.styles.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { forwardRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import MuiDrawer from "@mui/material/Drawer";
//#region src/Drawer/Drawer.tsx
/**
* The Drawer component provides a foundation to create a sliding pane.
* It only provides the pane with a close button, the rest of the
* content can be customized.
*/
var HvDrawer = forwardRef(function HvDrawer(props, ref) {
	const { className, classes: classesProp, children, open, onClose, anchor = "right", buttonTitle = "Close", hideBackdrop, disableBackdropClick = false, ...others } = useDefaultProps("HvDrawer", props);
	const { classes, cx } = useClasses(classesProp);
	const handleOnClose = (event, reason) => {
		if (reason === "backdropClick" && disableBackdropClick) return;
		onClose?.(event, reason);
	};
	return /* @__PURE__ */ jsxs(MuiDrawer, {
		ref,
		className: cx(classes.root, className),
		anchor,
		open,
		classes: { paper: classes.paper },
		hideBackdrop,
		...!hideBackdrop && { slotProps: { backdrop: { classes: { root: classes.background } } } },
		onClose: handleOnClose,
		...others,
		children: [onClose && /* @__PURE__ */ jsx(HvIconButton, {
			className: classes.closeButton,
			onClick: onClose,
			title: buttonTitle,
			children: /* @__PURE__ */ jsx(HvIcon, { name: "Close" })
		}), children]
	});
});
//#endregion
export { HvDrawer };