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

Core React components for the NEXT Design System.

import { jsxs, jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import MuiDrawer from "@mui/material/Drawer";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { HvIcon } from "../icons.js";
import { setId } from "../utils/setId.js";
import { useClasses } from "./Drawer.styles.js";
import { staticClasses } from "./Drawer.styles.js";
import { HvIconButton } from "../IconButton/IconButton.js";
const HvDrawer = forwardRef(function HvDrawer2(props, ref) {
  const {
    className,
    classes: classesProp,
    id,
    children,
    open,
    onClose,
    anchor = "right",
    buttonTitle = "Close",
    showBackdrop = true,
    hideBackdrop,
    disableBackdropClick = false,
    ...others
  } = useDefaultProps("HvDrawer", props);
  const { classes, cx } = useClasses(classesProp);
  const handleOnClose = (event, reason) => {
    if (reason === "backdropClick" && disableBackdropClick) return;
    onClose?.(event, reason);
  };
  const shouldHideBackdrop = hideBackdrop ?? !showBackdrop;
  return /* @__PURE__ */ jsxs(
    MuiDrawer,
    {
      ref,
      className: cx(classes.root, className),
      id,
      anchor,
      open,
      classes: {
        paper: classes.paper
      },
      hideBackdrop: shouldHideBackdrop,
      ...!shouldHideBackdrop && {
        slotProps: {
          backdrop: {
            classes: {
              root: classes.background
            }
          }
        }
      },
      onClose: handleOnClose,
      ...others,
      children: [
        /* @__PURE__ */ jsx(
          HvIconButton,
          {
            id: setId(id, "close"),
            className: classes.closeButton,
            onClick: onClose,
            title: buttonTitle,
            children: /* @__PURE__ */ jsx(HvIcon, { name: "Close" })
          }
        ),
        children
      ]
    }
  );
});
export {
  HvDrawer,
  staticClasses as drawerClasses
};