alinea/dist/dashboard/view/Modal.js

[](https://npmjs.org/package/alinea) [](https://packagephobia.com/result?p=alinea)

import "../../chunks/chunk-U5RRZUYZ.js";

// src/dashboard/view/Modal.tsx
import { IconButton } from "alinea/dashboard/view/IconButton";
import { IcRoundClose } from "alinea/ui/icons/IcRoundClose";
import { fromModule } from "alinea/ui/util/Styler";
import { useRef } from "react";
import { createPortal } from "react-dom";

// src/dashboard/view/Modal.module.scss
var Modal_module_default = {
  "root": "alinea-Modal",
  "is-open": "alinea-Modal-is-open",
  "isOpen": "alinea-Modal-is-open",
  "root-background": "alinea-Modal-background",
  "rootBackground": "alinea-Modal-background",
  "root-inner": "alinea-Modal-inner",
  "rootInner": "alinea-Modal-inner",
  "root-inner-close": "alinea-Modal-inner-close",
  "rootInnerClose": "alinea-Modal-inner-close"
};

// src/dashboard/view/Modal.tsx
import { jsx, jsxs } from "react/jsx-runtime";
var styles = fromModule(Modal_module_default);
var modalTarget = null;
function Modal({ children, ...props }) {
  const modalRef = useRef(null);
  if (!props.open)
    return null;
  const inner = /* @__PURE__ */ jsxs("div", { ...props, ref: modalRef, className: styles.root({ open: props.open }), children: [
    /* @__PURE__ */ jsx("div", { className: styles.root.background(), onClick: props.onClose }),
    /* @__PURE__ */ jsxs("div", { className: styles.root.inner.mergeProps(props)(), children: [
      children,
      /* @__PURE__ */ jsx(
        IconButton,
        {
          className: styles.root.inner.close(),
          size: 18,
          icon: IcRoundClose,
          onClick: props.onClose
        }
      )
    ] })
  ] });
  if (!modalTarget)
    return inner;
  return createPortal(inner, modalTarget);
}
function ModalPortal() {
  return /* @__PURE__ */ jsx(
    "div",
    {
      ref: (element) => {
        modalTarget = element;
      }
    }
  );
}
export {
  Modal,
  ModalPortal
};