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

React components UvA

import { jsx as e, Fragment as m, jsxs as i } from "react/jsx-runtime";
import { useDialog as j } from "@react-aria/dialog";
import { FocusScope as k } from "@react-aria/focus";
import { useModal as A, useOverlay as C, usePreventScroll as K, OverlayContainer as M } from "@react-aria/overlays";
import { c as d } from "../../clsx-OuTLNxxd.js";
import { useRef as y, useState as f, useEffect as U } from "react";
import { OverlayCloseButton as V } from "../OverlayCloseButton/OverlayCloseButton.js";
import { Spinner as q } from "../Spinner/Spinner.js";
import '../../assets/PageOverlay.css';const o = {
  "page-overlay__container": "_page-overlay__container_1et9u_1",
  "page-overlay": "_page-overlay_1et9u_1",
  "page-overlay__content": "_page-overlay__content_1et9u_20",
  "page-overlay__children": "_page-overlay__children_1et9u_32",
  "page-overlay__title": "_page-overlay__title_1et9u_36",
  "page-overlay__buttons-bar": "_page-overlay__buttons-bar_1et9u_43",
  "page-overlay__buttons-bar--shadow": "_page-overlay__buttons-bar--shadow_1et9u_69",
  "page-overlay__close": "_page-overlay__close_1et9u_73"
};
function $({
  buttons: t,
  children: h,
  isLoading: b,
  spinnerAriaValueText: S = "Loading",
  closeButtonAriaValueText: w = "Close",
  isOpen: a,
  noValidate: N = !1,
  onClose: _,
  onSubmit: P,
  title: s,
  headerContent: n
}) {
  const c = y(null), u = y(null), [T, E] = f(!1), [x, L] = f(!1), { dialogProps: F, titleProps: H } = j({ role: "dialog" }, c), { modalProps: z } = A({ isDisabled: !a }), { overlayProps: B } = C({ isOpen: a, onClose: _ }, c);
  K({ isDisabled: !a }), U(() => {
    const r = u.current;
    if (!r) return;
    function p() {
      const v = r.scrollHeight, g = r.clientHeight, R = r.scrollTop;
      E(v > g), L(R + g >= v);
    }
    function l() {
      p();
    }
    r.addEventListener("scroll", l), window.addEventListener("resize", l);
    const I = setTimeout(() => {
      p();
    }, 0);
    return () => {
      r.removeEventListener("scroll", l), window.removeEventListener("resize", l), clearTimeout(I);
    };
  }, [a, n]);
  function D(r) {
    r.stopPropagation();
  }
  return a ? /* @__PURE__ */ e(M, { className: o["page-overlay__container"], children: b ? /* @__PURE__ */ e(q, { ariaValueText: S }) : /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(k, { autoFocus: !0, contain: !0, restoreFocus: !0, children: /* @__PURE__ */ i(
    "div",
    {
      ...F,
      ...z,
      ...B,
      className: o["page-overlay"],
      onKeyUp: D,
      role: "presentation",
      ref: c,
      children: [
        (s || n) && /* @__PURE__ */ i(m, { children: [
          s && /* @__PURE__ */ e("h1", { ...H, className: o["page-overlay__title"], children: s }),
          n,
          /* @__PURE__ */ e("span", { className: o["page-overlay__close"], children: /* @__PURE__ */ e(V, { "aria-label": w, onClick: _ }) })
        ] }),
        /* @__PURE__ */ i(
          "form",
          {
            className: d(o["page-overlay__content"], {
              [o["page-overlay--content-with-buttons"]]: t
            }),
            onSubmit: P,
            noValidate: N,
            ref: u,
            children: [
              /* @__PURE__ */ e("div", { className: o["page-overlay__children"], children: h }),
              t && /* @__PURE__ */ e(
                "div",
                {
                  className: d(o["page-overlay__buttons-bar"], {
                    [o["page-overlay__buttons-bar--shadow"]]: T && !x
                  }),
                  children: t
                }
              )
            ]
          }
        )
      ]
    }
  ) }) }) }) : null;
}
export {
  $ as PageOverlay
};
//# sourceMappingURL=PageOverlay.js.map