@vincentwings/react-modal/dist/index.cjs

A lightweight and flexible modal component for React, inspired by jquery-modal.

var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.js
var index_exports = {};
__export(index_exports, {
  Modal: () => Modal_default,
  ModalProvider: () => ModalProvider,
  useModal: () => useModal
});
module.exports = __toCommonJS(index_exports);

// src/Modal.jsx
var import_react = __toESM(require("react"), 1);
var Modal = ({
  isOpen,
  // Whether modal is open
  onClose,
  // Function to call on close
  fadeDuration = 300,
  // ms of fade animation
  fadeDelay = 0.5,
  // multiplier delay before content animates
  escapeClose = true,
  // can close modal with Escape key
  clickClose = true,
  // can close modal by clicking overlay
  showClose = true,
  // show close "×" button in corner
  closeText = "\xD7",
  // text/icon inside close button
  useTransform = true,
  // whether modal should slide in (translateY)
  useBorderRadius = true,
  // whether modal should have rounded corners
  overlayColor = "rgba(0, 0, 0, 0.4)",
  // background of the overlay
  backgroundColor = "#fff",
  // background of modal itself
  textColor = "#2a2a2a",
  // default text color inside modal
  borderRadius = "12px",
  // default radius for modal box
  children
  // content of the modal
}) => {
  const modalRef = (0, import_react.useRef)();
  const [visible, setVisible] = (0, import_react.useState)(false);
  const [animating, setAnimating] = (0, import_react.useState)(false);
  (0, import_react.useEffect)(() => {
    if (isOpen) {
      setVisible(true);
      setTimeout(() => setAnimating(true), fadeDuration * fadeDelay);
    } else if (visible) {
      setAnimating(false);
      setTimeout(() => setVisible(false), fadeDuration);
    }
  }, [isOpen, fadeDuration, fadeDelay, visible]);
  (0, import_react.useEffect)(() => {
    if (!visible || !modalRef.current) return;
    const focusables = modalRef.current.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
    if (focusables.length > 0) focusables[0].focus();
    const handleKeyDown = (e) => {
      if (escapeClose && e.key === "Escape") {
        onClose();
        return;
      }
      if (e.key === "Tab") {
        handleFocusTrap(e, focusables);
      }
    };
    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [visible, escapeClose, onClose]);
  const handleFocusTrap = (e, focusables) => {
    const first = focusables[0];
    const last = focusables[focusables.length - 1];
    const isShiftTab = e.shiftKey && document.activeElement === first;
    const isTabAtEnd = !e.shiftKey && document.activeElement === last;
    if (isShiftTab || isTabAtEnd) {
      e.preventDefault();
      const target = isShiftTab ? last : first;
      target.focus();
    }
  };
  if (!visible) return null;
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: `modal-overlay ${animating ? "open" : ""}`,
      onClick: clickClose ? onClose : void 0,
      role: "dialog",
      "aria-modal": "true",
      style: {
        backgroundColor: overlayColor,
        transition: `opacity ${fadeDuration}ms`,
        opacity: animating ? 1 : 0,
        pointerEvents: animating ? "auto" : "none"
      }
    },
    /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        className: `modal ${animating ? "open" : ""}`,
        onClick: (e) => e.stopPropagation(),
        ref: modalRef,
        style: {
          transition: `opacity ${fadeDuration}ms, transform ${fadeDuration}ms`,
          opacity: animating ? 1 : 0,
          transform: useTransform ? animating ? "translateY(0)" : "translateY(-20px)" : "none",
          backgroundColor,
          color: textColor,
          borderRadius: useBorderRadius ? borderRadius : "0"
        }
      },
      showClose && /* @__PURE__ */ import_react.default.createElement("button", { className: "modal-close", onClick: onClose }, closeText),
      /* @__PURE__ */ import_react.default.createElement("div", { className: "modal-content" }, children)
    )
  );
};
var Modal_default = Modal;

// src/ModalManager.jsx
var import_react2 = __toESM(require("react"), 1);
var ModalContext = (0, import_react2.createContext)();
var ModalProvider = ({ children }) => {
  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
  const [modalContent, setModalContent] = (0, import_react2.useState)(null);
  const [modalOptions, setModalOptions] = (0, import_react2.useState)({});
  const openModal = (content, options = {}) => {
    setIsOpen(false);
    setTimeout(() => {
      setModalContent(content);
      setModalOptions(options);
      setIsOpen(true);
    }, 10);
  };
  const closeModal = () => {
    setIsOpen(false);
    setModalContent(null);
    setModalOptions({});
  };
  return (
    // Provide modal context to the children tree
    /* @__PURE__ */ import_react2.default.createElement(ModalContext.Provider, { value: { openModal, closeModal } }, children, /* @__PURE__ */ import_react2.default.createElement(Modal_default, { isOpen, onClose: closeModal, ...modalOptions }, modalContent))
  );
};
var useModal = () => (0, import_react2.useContext)(ModalContext);
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Modal,
  ModalProvider,
  useModal
});
//# sourceMappingURL=index.cjs.map