@frontify/fondue/dist/components/Popper/Popper.es.js

Design system of Frontify

import { jsx as f, jsxs as H } from "react/jsx-runtime";
import { useState as n, useEffect as m, useMemo as W, useLayoutEffect as j } from "react";
import { usePopper as V } from "react-popper";
import { EnablePortalWrapper as z } from "../../utilities/dialogs/EnablePortalWrapper.es.js";
import { merge as G } from "../../utilities/merge.es.js";
const M = 200, $ = 400, B = "100px", X = 12, E = 7, k = ({ dimension: e, isVerticalAlignedToTop: t }) => ({
  left: `${(window.innerWidth - e.width) / 2}px`,
  top: t ? B : `${(window.innerHeight - e.height) / 2}px`,
  transform: "none"
}), q = (e) => {
  switch (!0) {
    case e.includes("top"):
      return "before:tw-border-t-0 before:tw-border-l-0 tw-bottom-[-6px]";
    case e.includes("right"):
      return "before:tw-border-t-0 before:tw-border-r-0 tw-left-[-6px]";
    case e.includes("bottom"):
      return "before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px]";
    case e.includes("left"):
      return "before:tw-border-b-0 before:tw-border-l-0 tw-right-[-6px]";
    default:
      return "before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px]";
  }
}, J = (e, t) => {
  switch (!0) {
    case e.includes("end"):
      return [t[0] + E, t[1]];
    case e.includes("start"):
      return [t[0] - E, t[1]];
    default:
      return t;
  }
}, K = ({
  children: e,
  open: t,
  placement: w = "bottom-start",
  offset: p = [0, 8],
  flip: g = !0,
  enablePortal: O = !0,
  zIndex: P = "auto",
  isDetached: i = !1,
  verticalAlignment: _,
  strategy: h = "absolute",
  anchor: d,
  withArrow: l = !1,
  arrowCustomColors: T
}) => {
  const [x, A] = n(null), [R, y] = n(null), [L, I] = n(null), [N, F] = n(p), [S, D] = n({
    width: M,
    height: $
  });
  m(() => {
    const o = d == null ? void 0 : d.current;
    A(o);
  }, [d]);
  const U = i ? document.body : x, r = V(U, R, {
    placement: w,
    modifiers: [
      { name: "offset", options: { offset: N } },
      {
        name: "flip",
        enabled: g
      },
      { name: "arrow", options: { element: L, padding: X } }
    ],
    strategy: h
  }), a = r.state ? r.state.placement : w, v = W(() => q(a), [a]);
  m(() => {
    const o = l ? J(a, p) : p;
    F((s) => o[0] !== s[0] || o[1] !== s[1] ? o : s);
  }, [a, p, l]), j(() => {
    const o = () => {
      var s, u, b, c;
      i && r.state && t && D({
        width: (u = (s = r.state.rects) == null ? void 0 : s.popper) == null ? void 0 : u.width,
        height: (c = (b = r.state.rects) == null ? void 0 : b.popper) == null ? void 0 : c.height
      });
    };
    return o(), window.addEventListener("resize", o), () => {
      window.removeEventListener("resize", o);
    };
  }, [i, t, r.state]);
  const C = i ? k({ dimension: S, isVerticalAlignedToTop: _ === "top" }) : {};
  return t && /* @__PURE__ */ f(z, { enablePortal: O, children: /* @__PURE__ */ H(
    "div",
    {
      ref: y,
      style: {
        zIndex: P,
        ...r.styles.popper,
        ...C
      },
      ...r.attributes.popper,
      children: [
        e,
        l && /* @__PURE__ */ f(
          "div",
          {
            "data-test-id": "popper-arrow",
            "data-popper-arrow": l,
            "aria-hidden": "true",
            ref: I,
            style: r.styles.arrow,
            className: G([
              "tw-absolute tw-w-3 tw-h-3 tw-pointer-events-none before:tw-absolute before:tw-w-3 before:tw-h-3 before:tw-rotate-45",
              T,
              v
            ])
          }
        )
      ]
    }
  ) });
};
K.displayName = "FonduePopper";
export {
  K as Popper
};
//# sourceMappingURL=Popper.es.js.map