@uva-glass/component-library/dist/components/ModalDialog/ModalDialog.js

React components UvA

import { jsx as i, Fragment as v, jsxs as c } from "react/jsx-runtime";
import { useDialog as G } from "@react-aria/dialog";
import { FocusScope as J } from "@react-aria/focus";
import { useModal as Q, useOverlay as W, usePreventScroll as X, OverlayContainer as Y } from "@react-aria/overlays";
import { c as t } from "../../clsx-OuTLNxxd.js";
import { useRef as S, useState as T, useEffect as Z } from "react";
import { Backdrop as $ } from "../Backdrop/Backdrop.js";
import { OverlayCloseButton as oo } from "../OverlayCloseButton/OverlayCloseButton.js";
import { Spinner as lo } from "../Spinner/Spinner.js";
import '../../assets/ModalDialog.css';const o = {
  "modal-dialog": "_modal-dialog_rtimw_1",
  "modal-dialog--padded": "_modal-dialog--padded_rtimw_18",
  "modal-dialog__content": "_modal-dialog__content_rtimw_22",
  "modal-dialog__children": "_modal-dialog__children_rtimw_33",
  "modal-dialog__title": "_modal-dialog__title_rtimw_37",
  "modal-dialog--confirm": "_modal-dialog--confirm_rtimw_44",
  "modal-dialog__buttons": "_modal-dialog__buttons_rtimw_48",
  "modal-dialog__buttons--border": "_modal-dialog__buttons--border_rtimw_61",
  "modal-dialog__buttons--shadow": "_modal-dialog__buttons--shadow_rtimw_78",
  "modal-dialog__close": "_modal-dialog__close_rtimw_82",
  "modal-dialog--slim": "_modal-dialog--slim_rtimw_100",
  "modal-dialog--wide": "_modal-dialog--wide_rtimw_104",
  "modal-dialog--content-with-buttons": "_modal-dialog--content-with-buttons_rtimw_118"
};
function _o(y) {
  const {
    buttons: d,
    children: x,
    isDismissable: _ = !0,
    isKeyboardDismissDisabled: B = !_,
    isLoading: D,
    spinnerAriaValueText: P = "Loading",
    closeButtonAriaValueText: C = "Close",
    isOpen: a,
    noValidate: E = !1,
    onClose: g,
    onSubmit: L,
    role: N = "dialog",
    title: r,
    headerContent: s,
    variant: n = "dialog",
    padded: u,
    slim: F,
    wide: H,
    noButtonBorder: f = !1
  } = y, m = S(null), p = S(null), [O, V] = T(!1), [k, z] = T(!1), { dialogProps: A, titleProps: I } = G({ role: N }, m), { modalProps: M } = Q({ isDisabled: !a }), { overlayProps: R, underlayProps: j } = W(
    { isDismissable: _, isKeyboardDismissDisabled: B, isOpen: a, onClose: g },
    m
  );
  X({ isDisabled: !a }), Z(() => {
    const l = p.current;
    function h() {
      if (l) {
        const w = l.scrollHeight, b = l.clientHeight, q = l.scrollTop;
        V(w > b), z(q + b >= w);
      }
    }
    function e() {
      h();
    }
    l && (l.addEventListener("scroll", e), window.addEventListener("resize", e));
    const U = setTimeout(() => {
      h();
    }, 0);
    return () => {
      l && l.removeEventListener("scroll", e), window.removeEventListener("resize", e), clearTimeout(U);
    };
  }, [a, s]);
  function K(l) {
    l.stopPropagation();
  }
  return a ? /* @__PURE__ */ i(Y, { children: /* @__PURE__ */ i($, { ...j, children: D ? /* @__PURE__ */ i(lo, { ariaValueText: P }) : /* @__PURE__ */ i(v, { children: /* @__PURE__ */ i(J, { autoFocus: !0, contain: !0, restoreFocus: !0, children: /* @__PURE__ */ c(
    "div",
    {
      ...A,
      ...M,
      ...R,
      className: t(o["modal-dialog"], {
        [o["modal-dialog--confirm"]]: n === "confirm",
        [o["modal-dialog--padded"]]: u,
        [o["modal-dialog--slim"]]: F,
        [o["modal-dialog--wide"]]: H
      }),
      onKeyUp: K,
      role: "presentation",
      ref: m,
      children: [
        (r || s) && n === "dialog" && /* @__PURE__ */ c(v, { children: [
          r && /* @__PURE__ */ i("h1", { ...I, className: o["modal-dialog__title"], children: r }),
          s,
          n === "dialog" && /* @__PURE__ */ i("span", { className: o["modal-dialog__close"], children: /* @__PURE__ */ i(
            oo,
            {
              "aria-label": C,
              onClick: g,
              paddedModal: u
            }
          ) })
        ] }),
        /* @__PURE__ */ c(
          "form",
          {
            className: t(o["modal-dialog__content"], {
              [o["modal-dialog--content-with-buttons"]]: d
            }),
            onSubmit: L,
            noValidate: E,
            ref: p,
            children: [
              /* @__PURE__ */ i("div", { className: t({ [o["modal-dialog__children"]]: !f }), children: x }),
              d && /* @__PURE__ */ i(
                "div",
                {
                  className: t(o["modal-dialog__buttons"], {
                    [o["modal-dialog__buttons--border"]]: !f,
                    [o["modal-dialog__buttons--shadow"]]: O && !k
                  }),
                  children: d
                }
              )
            ]
          }
        )
      ]
    }
  ) }) }) }) }) : null;
}
export {
  _o as ModalDialog
};
//# sourceMappingURL=ModalDialog.js.map