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