@wordpress/components/build/slot-fill/bubbles-virtually/slot.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _view = require("../../view");
var _slotFillContext = _interopRequireDefault(require("./slot-fill-context"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function Slot(props, forwardedRef) {
  const {
    name,
    fillProps = {},
    as,
    // `children` is not allowed. However, if it is passed,
    // it will be displayed as is, so remove `children`.
    children,
    ...restProps
  } = props;
  const registry = (0, _element.useContext)(_slotFillContext.default);
  const ref = (0, _element.useRef)(null);

  // We don't want to unregister and register the slot whenever
  // `fillProps` change, which would cause the fill to be re-mounted. Instead,
  // we can just update the slot (see hook below).
  // For more context, see https://github.com/WordPress/gutenberg/pull/44403#discussion_r994415973
  const fillPropsRef = (0, _element.useRef)(fillProps);
  (0, _element.useLayoutEffect)(() => {
    fillPropsRef.current = fillProps;
  }, [fillProps]);
  (0, _element.useLayoutEffect)(() => {
    registry.registerSlot(name, ref, fillPropsRef.current);
    return () => registry.unregisterSlot(name, ref);
  }, [registry, name]);
  (0, _element.useLayoutEffect)(() => {
    registry.updateSlot(name, ref, fillPropsRef.current);
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {
    as: as,
    ref: (0, _compose.useMergeRefs)([forwardedRef, ref]),
    ...restProps
  });
}
var _default = exports.default = (0, _element.forwardRef)(Slot);
//# sourceMappingURL=slot.js.map