@wordpress/components
Version:
UI components for WordPress.
52 lines (51 loc) • 1.51 kB
JavaScript
// packages/components/src/slot-fill/fill.tsx
import { useObservableValue } from "@wordpress/compose";
import { useContext, useLayoutEffect, useRef, createPortal } from "@wordpress/element";
import SlotFillContext from "./context.mjs";
import StyleProvider from "../style-provider/index.mjs";
import { jsx as _jsx } from "react/jsx-runtime";
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,
children: childrenRef.current
});
return () => registry.unregisterFill(name, instance);
}, [registry, name]);
useLayoutEffect(() => {
registry.updateFill(name, {
instance: instanceRef.current,
children: childrenRef.current
});
});
const slot = useObservableValue(registry.slots, name);
if (!slot) {
return null;
}
if (slot.type === "children") {
return null;
}
const portalEl = slot.ref.current;
if (!portalEl) {
return null;
}
const wrappedChildren = typeof children === "function" ? children(slot.fillProps ?? {}) : children;
return createPortal(/* @__PURE__ */ _jsx(StyleProvider, {
document: portalEl.ownerDocument,
children: wrappedChildren
}), portalEl);
}
export {
Fill as default
};
//# sourceMappingURL=fill.mjs.map