import classNames from "classnames";
import React, { useContext, useState } from "react";
import { RicosContext } from "./../../ricos-context/index.js";
import { FocusManager } from "./../../_shared/focus-manager/focus-manager.js";
import { UiComponentsProvider } from "./../../ui-components/index.js";
import styles from "../statics/styles/drawer-scss.js";
const Drawer = ({
  children,
  closeModal,
  modalConfig: { positioning },
  zIndex
}) => {
  const { jsdomMode, isMobile } = useContext(RicosContext);
  const [ref, setRef] = useState(null);
  const onModalClick = (e) => e.stopPropagation();
  const onOverlayClick = () => closeModal();
  const { placement } = positioning || {};
  return /* @__PURE__ */ React.createElement("div", { onClick: onOverlayClick, className: styles.overlay, style: { zIndex } }, /* @__PURE__ */ React.createElement(
    FocusManager,
    {
      focusTrapOptions: {
        returnFocusOnDeactivate: false
      },
      jsdomMode
    },
    /* @__PURE__ */ React.createElement(
      "div",
      {
        tabIndex: 0,
        onClick: onModalClick,
        className: classNames(
          styles.content,
          styles.contentBox,
          placement && styles[placementClassNameMapper[placement]],
          {
            [styles.mobile]: isMobile
          }
        ),
        ref: setRef,
        role: "dialog"
      },
      ref && /* @__PURE__ */ React.createElement(UiComponentsProvider, { containerEl: ref }, children)
    )
  ));
};
const placementClassNameMapper = {
  right: "drawerR",
  left: "drawerL",
  top: "drawerT",
  bottom: "drawerB"
};
export {
  Drawer
};
//# sourceMappingURL=drawer.js.map
