import { jsx as H } from "react/jsx-runtime";
import * as C from "react";
import { useId as I, useRef as x, useContext as M, useInsertionEffect as S } from "react";
import { MotionConfigContext as v } from "../../context/MotionConfigContext.es.js";
import { useComposedRefs as F } from "../../utils/use-composed-ref.es.js";
import { isHTMLElement as h } from "../../../../../../../motion-dom@12.38.0/node_modules/motion-dom/dist/es/utils/is-html-element.es.js";
class L extends C.Component {
  getSnapshotBeforeUpdate(r) {
    const o = this.props.childRef.current;
    if (h(o) && r.isPresent && !this.props.isPresent && this.props.pop !== !1) {
      const n = o.offsetParent, f = h(n) && n.offsetWidth || 0, i = h(n) && n.offsetHeight || 0, p = getComputedStyle(o), t = this.props.sizeRef.current;
      t.height = parseFloat(p.height), t.width = parseFloat(p.width), t.top = o.offsetTop, t.left = o.offsetLeft, t.right = f - t.width - t.left, t.bottom = i - t.height - t.top;
    }
    return null;
  }
  /**
   * Required with getSnapshotBeforeUpdate to stop React complaining.
   */
  componentDidUpdate() {
  }
  render() {
    return this.props.children;
  }
}
function B({ children: e, isPresent: r, anchorX: o, anchorY: n, root: f, pop: i }) {
  var d;
  const p = I(), t = x(null), a = x({
    width: 0,
    height: 0,
    top: 0,
    left: 0,
    right: 0,
    bottom: 0
  }), { nonce: c } = M(v), R = ((d = e.props) == null ? void 0 : d.ref) ?? (e == null ? void 0 : e.ref), $ = F(t, R);
  return S(() => {
    const { width: l, height: u, top: b, left: w, right: y, bottom: P } = a.current;
    if (r || i === !1 || !t.current || !l || !u)
      return;
    const z = o === "left" ? `left: ${w}` : `right: ${y}`, E = n === "bottom" ? `bottom: ${P}` : `top: ${b}`;
    t.current.dataset.motionPopId = p;
    const s = document.createElement("style");
    c && (s.nonce = c);
    const m = f ?? document.head;
    return m.appendChild(s), s.sheet && s.sheet.insertRule(`
          [data-motion-pop-id="${p}"] {
            position: absolute !important;
            width: ${l}px !important;
            height: ${u}px !important;
            ${z}px !important;
            ${E}px !important;
          }
        `), () => {
      var g;
      (g = t.current) == null || g.removeAttribute("data-motion-pop-id"), m.contains(s) && m.removeChild(s);
    };
  }, [r]), H(L, { isPresent: r, childRef: t, sizeRef: a, pop: i, children: i === !1 ? e : C.cloneElement(e, { ref: $ }) });
}
export {
  B as PopChild
};
//# sourceMappingURL=PopChild.es.js.map
