@frontify/fondue/dist/utilities/dialogs/Overlay.es.js

Design system of Frontify

import { jsxs as K, Fragment as V, jsx as s } from "react/jsx-runtime";
import { useState as W, useEffect as p, useCallback as $ } from "react";
import { useClickOutside as X } from "../../hooks/useClickOutside.es.js";
import { useDropdownAutoHeight as Z } from "../../hooks/useDropdownAutoHeight.es.js";
import { useFocusTrap as q } from "../../hooks/useFocusTrap.es.js";
import { useHandleCloseOnEscape as J } from "../../hooks/useHandleCloseOnEscape.es.js";
import { useMemoizedId as Q } from "../../hooks/useMemoizedId.es.js";
import { useMobileDetection as U } from "../../hooks/useMobileDetection.es.js";
import { Z_INDEX_MODAL_BACKDROP as tt } from "./constants.es.js";
import { merge as g, mergeRefs as et } from "../merge.es.js";
import { OVERLAY_CONTAINER_LIGHT_THEME_STYLING as ot, OVERLAY_CONTAINER_DARK_THEME_STYLING as it } from "../overlayStyle.es.js";
import { Modality as o, overlayBorderRadius as rt, overlayShadowMap as st } from "../../types/dialog.es.js";
import { Popper as nt } from "../../components/Popper/Popper.es.js";
import { Portal as lt } from "../../components/Portal/Portal.es.js";
const Nt = ({
  id: w,
  open: t,
  anchor: r,
  placement: b = "bottom-start",
  offset: M = [0, 8],
  flip: E = !0,
  enablePortal: v,
  children: x,
  role: N = "region",
  "data-test-id": n = "fondue-overlay",
  maxWidth: y = "auto",
  maxHeight: R = "auto",
  minWidth: _ = 0,
  minHeight: h = 0,
  handleClose: l,
  modality: e = o.NonModal,
  darkUnderlay: O,
  autoHeight: A,
  zIndex: H,
  isDetached: I,
  verticalAlignment: T,
  strategy: m,
  theme: k = "light",
  withArrow: C,
  arrowCustomColors: L,
  roundedCorners: B = !0,
  shadow: D = "large",
  isDialog: d = !0,
  width: S,
  borderRadius: Y = "small"
}) => {
  const u = Q(w), [i, z] = W(null);
  p(() => {
    const c = r == null ? void 0 : r.current;
    c && z(c);
  }, [r]);
  const { maxHeight: G } = Z(
    { current: i },
    { isOpen: t, autoResize: !0 }
  ), P = A ? G : R, f = $(() => {
    t && e !== o.BlockingModal && l && (l(), i == null || i.focus());
  }, [l, e, t, i]), { elementRef: j } = q(t, e === o.NonModal, i), { dismissibleElementRef: F } = X(f);
  J(t, {
    isBlockingModal: e === o.BlockingModal,
    callback: f
  }), p(() => (e !== o.NonModal && (t && (document.body.style.pointerEvents = "none", m === "fixed" && (document.body.style.overflow = "hidden")), t || (document.body.style.pointerEvents = "auto", document.body.style.overflow = "auto")), () => {
    e !== o.NonModal && (document.body.style.pointerEvents = "auto");
  }), [t, e, m]);
  const a = U();
  return /* @__PURE__ */ K(V, { children: [
    /* @__PURE__ */ s(
      nt,
      {
        anchor: r,
        "data-test-id": n,
        open: t,
        placement: b,
        offset: M,
        flip: E,
        enablePortal: v,
        zIndex: H,
        isDetached: I,
        verticalAlignment: T,
        strategy: m,
        withArrow: C,
        arrowCustomColors: L,
        children: /* @__PURE__ */ s(
          "div",
          {
            ref: et(F, j),
            "data-test-id": `${n}-content`,
            className: g([
              "tw-flex tw-flex-col tw-pointer-events-auto",
              k === "light" ? ot : it,
              B && rt[Y],
              st[D]
            ]),
            role: N,
            id: u,
            "aria-hidden": !t,
            "aria-labelledby": u,
            style: {
              width: S,
              minWidth: a && d ? "90vw" : _,
              minHeight: h,
              maxWidth: a && d ? "90vw" : y,
              maxHeight: P
            },
            children: x
          }
        )
      }
    ),
    d && e !== o.NonModal && t && /* @__PURE__ */ s(lt, { children: /* @__PURE__ */ s(
      "div",
      {
        "data-test-id": `${n}-underlay`,
        className: g([
          "tw-fixed tw-top-0 tw-left-0 tw-bottom-0 tw-right-0",
          (O || a) && "tw-transition-opacity tw-bg-box-neutral-mighty tw-opacity-50"
        ]),
        style: { zIndex: tt }
      }
    ) })
  ] });
};
export {
  Nt as Overlay
};
//# sourceMappingURL=Overlay.es.js.map