@playbooks/ui/dist/modals.es.js

An interface library for Playbooks.

import { jsxs, jsx } from "react/jsx-runtime";
import { useState, useRef, useEffect } from "react";
import { createPortal } from "react-dom";
import { F as Fade } from "./fade.es-DSuuKNg3.js";
import "./wrappers.es-CZI3goQs.js";
import { u as useKeyDown } from "./keyboard.es-jSLAvGP_.js";
import { AccentBtn } from "./buttons.es.js";
import { useUI } from "./context.es.js";
import { Font } from "./fonts.es.js";
import { Div, Span } from "./html.es.js";
const ModalWrapper = ({
  name = "ModalWrapper",
  open,
  onClose,
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.modalWrapper();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsxs(Div, { ...computed, children: [
    children,
    /* @__PURE__ */ jsx(ModalBackdrop, { open, onClose, tailwind: tailwind?.backdrop })
  ] });
};
const ModalBackdrop = ({
  name = "ModalBackdrop",
  open,
  onClose,
  tailwind,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.modalBackdrop({ open });
  const computed = { ...base, ...props, tailwind, name };
  return /* @__PURE__ */ jsx(Div, { onClick: onClose, ...computed });
};
const Modal = ({ name = "Modal", open, onClose, tailwind, className, children, ...props }) => {
  const [show, setShow] = useState(false);
  const context = useUI();
  const base = context?.theme?.modal({ open: show });
  const computed = { ...base, ...props, tailwind, className, name };
  const nodeRef = useRef(null);
  useEffect(() => {
    const el = document.querySelector("body");
    open ? el.classList?.add("overflow-hidden") : el.classList?.remove("overflow-hidden");
  }, [open]);
  useKeyDown(onKeyDown, [open]);
  function onKeyDown(e) {
    if (!open) return;
    if (e.target.dataset.name === "FormInput") return;
    if (e.keyCode === 27 && typeof onClose === "function") onClose();
  }
  const onEnter = () => setShow(true);
  const onExit = () => setShow(false);
  if (typeof window === "undefined") return null;
  return createPortal(
    /* @__PURE__ */ jsx(Fade, { ref: nodeRef, show: open, timeout: 200, onEnter, onExit, children: /* @__PURE__ */ jsx(ModalWrapper, { open: show, onClose, tailwind: tailwind?.wrapper, children: /* @__PURE__ */ jsx(Div, { ref: nodeRef, ...computed, children }) }) }),
    document.body
  );
};
const ModalHeader = ({
  name = "ModalHeader",
  onClose,
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.modalHeader();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsxs(Div, { ...computed, children: [
    /* @__PURE__ */ jsx(Span, { children }),
    onClose && /* @__PURE__ */ jsx(AccentBtn, { alt: "close", size: "icon", icon: "xmark", onClick: onClose })
  ] });
};
const ModalTitle = ({
  name = "ModalTitle",
  size = "h4",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.modalTitle();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Font, { size, ...computed, children });
};
const ModalSubtitle = ({
  name = "ModalSubtitle",
  size = "p",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.modalSubtitle();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Font, { size, ...computed, children });
};
const ModalBody = ({
  name = "ModalBody",
  size,
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.modalBody({ size });
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children });
};
const ModalFooter = ({
  name = "ModalFooter",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.modalFooter();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children });
};
export {
  Modal,
  ModalBackdrop,
  ModalBody,
  ModalFooter,
  ModalHeader,
  ModalSubtitle,
  ModalTitle,
  ModalWrapper
};