// packages/components/src/slot-fill/fill.ts
import { useContext, useLayoutEffect, useRef } from "@wordpress/element";
import SlotFillContext from "./context.js";
function Fill({
  name,
  children
}) {
  const registry = useContext(SlotFillContext);
  const instanceRef = useRef({});
  const childrenRef = useRef(children);
  useLayoutEffect(() => {
    childrenRef.current = children;
  }, [children]);
  useLayoutEffect(() => {
    const instance = instanceRef.current;
    registry.registerFill(name, instance, childrenRef.current);
    return () => registry.unregisterFill(name, instance);
  }, [registry, name]);
  useLayoutEffect(() => {
    registry.updateFill(name, instanceRef.current, childrenRef.current);
  });
  return null;
}
export {
  Fill as default
};
//# sourceMappingURL=fill.js.map
