@wethegit/react-modal/dist/react-modal.js

A customizable, accessible modal window component for React projects.

import { jsx as l, jsxs as y } from "react/jsx-runtime";
import M from "react-dom";
import { forwardRef as _, useRef as f, useEffect as w, useState as F, useCallback as m } from "react";
function i(o = []) {
  if (!o || !Array.isArray(o) || !o.length)
    return;
  const e = [];
  return o.forEach((n) => {
    typeof n == "string" && e.push(n);
  }), e.flat().join(" ");
}
const g = "_modalVisuallyHidden_1s1k3_1", v = {
  modalVisuallyHidden: g
}, h = _(
  function(e, n) {
    return /* @__PURE__ */ l("div", { ...e, className: v.modalVisuallyHidden, ref: n, tabIndex: 0 });
  }
), x = "_modalFocusBounds_xz88e_1", E = {
  modalFocusBounds: x
}, p = _(function(e, n) {
  return /* @__PURE__ */ l("div", { className: E.modalFocusBounds, ref: n, tabIndex: 0 });
}), B = "_modalInner_1rf32_1", k = {
  modalInner: B
};
function C({ children: o, className: e, ...n }) {
  const r = f(null), d = f(null), s = f(null), c = () => {
    const t = d.current;
    t && t.focus();
  }, u = () => {
    const t = s.current;
    t && t.focus();
  };
  return w(() => {
    c();
  }, []), /* @__PURE__ */ y(
    "div",
    {
      className: i([k.modalInner, e]),
      ref: r,
      role: "dialog",
      "aria-modal": "true",
      tabIndex: 0,
      ...n,
      children: [
        /* @__PURE__ */ l(h, { onFocus: u }),
        /* @__PURE__ */ l(p, { ref: d }),
        o,
        /* @__PURE__ */ l(p, { ref: s }),
        /* @__PURE__ */ l(h, { onFocus: c })
      ]
    }
  );
}
const b = "_ModalFixed_1a3wg_1", $ = "_ModalAbsolute_1a3wg_5", I = {
  ModalFixed: b,
  ModalAbsolute: $
};
function S({ renderTo: o, className: e, ...n }) {
  const r = i([I.ModalFixed, e]), d = /* @__PURE__ */ l(C, { className: r, ...n });
  return o ? M.createPortal(d, o) : d;
}
const H = "_modalBackdrop_1wima_1", N = {
  modalBackdrop: H
};
function j({ className: o, ...e }) {
  return /* @__PURE__ */ l("div", { className: i([N.modalBackdrop, o]), ...e });
}
const V = "_modalContent_x5n6k_1", A = {
  modalContent: V
};
function D({ className: o, ...e }) {
  return /* @__PURE__ */ l("div", { className: i([A.modalContent, o]), ...e });
}
var L = /* @__PURE__ */ ((o) => (o.CLOSED = "closed", o.OPEN = "open", o))(L || {});
function z(o = {}) {
  const { triggerRef: e, hash: n } = o, [r, d] = F(
    "closed"
    /* CLOSED */
  ), s = m(() => {
    let t;
    d((a) => a !== "closed" ? "closed" : (t = a, a)), t !== "closed" && (n && window && window.location.hash === `#${n}` && (window.location.hash = "", window.history.replaceState({}, "", window.location.pathname)), e && e.current && e.current.focus());
  }, [e, n]), c = m(() => {
    let t;
    d((a) => a !== "open" ? "open" : (t = a, a)), t !== "open" && n && window && window.location.hash !== `#${n}` && (window.location.hash = `#${n}`);
  }, [n]), u = m(() => {
    r === "closed" ? c() : s();
  }, [s, c, r]);
  return w(() => {
    if (!n)
      return;
    const t = () => {
      window.location.hash === `#${n}` ? c() : s();
    };
    return t(), window.addEventListener("hashchange", t), () => {
      window.removeEventListener("hashchange", t);
    };
  }, [s, c, n]), w(() => {
    const t = (a) => {
      a.code === "Escape" && s();
    };
    return window.addEventListener("keyup", t), () => {
      window.removeEventListener("keyup", t);
    };
  }, [s]), {
    isOpen: r !== "closed",
    toggle: u
  };
}
export {
  S as Modal,
  j as ModalBackdrop,
  D as ModalContent,
  L as ModalStates,
  z as useModal
};