import { useRef, useEffect } from 'react';
import { jsx } from 'react/jsx-runtime';

const YieldWrapper = ({
  nodes
}) => {
  const elRef = useRef(null);
  useEffect(() => {
    const element = elRef.current;
    if (element?.parentNode) {
      const fragment = document.createDocumentFragment();
      for (const node of nodes) {
        fragment.appendChild(node);
      }

      // Replace <span> by fragment with appended nodes
      element.parentNode.replaceChild(fragment, element);
    }
  }, [nodes]);

  // This element is temporary. When mounted, it is replaced by the children nodes received from Ember.
  return /*#__PURE__*/jsx("span", {
    ref: elRef
  });
};

export { YieldWrapper };
//# sourceMappingURL=yield-wrapper.jsx.map