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