: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
// open from bottom, center
// open from bottom, left
// open from bottom, right
// open from middle, left
// open from bottom, left
// open from middle, right
// open from bottom, right
} // open from center, center
* Given the floating-ui `placement`, compute the framer-motion props for the
* popover's entry animation.
* @param placement A placement string from floating ui
* @return The object containing the motion props
const placementToMotionAnimationProps = placement => {
const translateProp = placement.startsWith('top') || placement.startsWith('bottom') ? 'translateY' : 'translateX';
const translateDirection = placement.startsWith('top') || placement.startsWith('left') ? 1 : -1;
style: PLACEMENT_TO_ANIMATION_ORIGIN[placement],
[translateProp]: `${2 * translateDirection}em`
function isTopBottom(anchorRef) {
function isRef(anchorRef) {
return !!anchorRef?.current;
const getReferenceElement = ({
let referenceElement = null;
referenceElement = anchor;
} else if (isTopBottom(anchorRef)) {
// Create a virtual element for the ref. The expectation is that
// if anchorRef.top is defined, then anchorRef.bottom is defined too.
// Seems to be used by the block toolbar, when multiple blocks are selected
// (top and bottom blocks are used to calculate the resulting rect).
getBoundingClientRect() {
const topRect = anchorRef.top.getBoundingClientRect();
const bottomRect = anchorRef.bottom.getBoundingClientRect();
return new window.DOMRect(topRect.x, topRect.y, topRect.width, bottomRect.bottom - topRect.top);
} else if (isRef(anchorRef)) {
referenceElement = anchorRef.current;
// If `anchorRef` holds directly the element's value (no `current` key)
// This is a weird scenario and should be deprecated.
referenceElement = anchorRef;
// Create a virtual element for the ref.
getBoundingClientRect() {
} else if (getAnchorRect) {
// Create a virtual element for the ref.
getBoundingClientRect() {
var _rect$x, _rect$y, _rect$width, _rect$height;
const rect = getAnchorRect(fallbackReferenceElement);
return new window.DOMRect((_rect$x = rect.x) !== null && _rect$x !== void 0 ? _rect$x : rect.left, (_rect$y = rect.y) !== null && _rect$y !== void 0 ? _rect$y : rect.top, (_rect$width = rect.width) !== null && _rect$width !== void 0 ? _rect$width : rect.right - rect.left, (_rect$height = rect.height) !== null && _rect$height !== void 0 ? _rect$height : rect.bottom - rect.top);
} else if (fallbackReferenceElement) {
// If no explicit ref is passed via props, fall back to
// anchoring to the popover's parent node.
referenceElement = fallbackReferenceElement.parentElement;
// Convert any `undefined` value to `null`.
return (_referenceElement = referenceElement) !== null && _referenceElement !== void 0 ? _referenceElement : null;
* Computes the final coordinate that needs to be applied to the floating
* element when applying transform inline styles, defaulting to `undefined`
* if the provided value is `null` or `NaN`.
* @param c input coordinate (usually as returned from floating-ui)
* @return The coordinate's value to be used for inline styles. An `undefined`
* return value means "no style set" for this coordinate.
const computePopoverPosition = c => c === null || Number.isNaN(c) ? undefined : Math.round(c);
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tooltip/index.js
// eslint-disable-next-line no-restricted-imports
const TooltipInternalContext = (0,external_wp_element_namespaceObject.createContext)({
* Time over anchor to wait before showing tooltip
const TOOLTIP_DELAY = 700;
function UnforwardedTooltip(props, ref) {
} = (0,external_wp_element_namespaceObject.useContext)(TooltipInternalContext);
const baseId = (0,external_wp_compose_namespaceObject.useInstanceId)(tooltip_Tooltip, 'tooltip');
const describedById = text || shortcut ? baseId : undefined;
const isOnlyChild = external_wp_element_namespaceObject.Children.count(children) === 1;
// console error if more than one child element is added
// Compute tooltip's placement:
// - give priority to `placement` prop, if defined
// - otherwise, compute it from the legacy `position` prop (if defined)
// - finally, fallback to the default placement: 'bottom'
if (placement !== undefined) {
computedPlacement = placement;
} else if (position !== undefined) {
computedPlacement = positionToPlacement(position);
external_wp_deprecated_default()('`position` prop in wp.components.tooltip', {
alternative: '`placement` prop'
computedPlacement = computedPlacement || 'bottom';
const tooltipStore = useTooltipStore({
placement: computedPlacement,
return isOnlyChild ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Role, {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(TooltipInternalContext.Provider, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TooltipAnchor, {
onClick: hideOnClick ? tooltipStore.hide : undefined,
render: isOnlyChild ? children : undefined,
children: isOnlyChild ? undefined : children
}), isOnlyChild && (text || shortcut) && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Tooltip, {
className: "components-tooltip",
children: [text, shortcut && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_shortcut, {
className: text ? 'components-tooltip__shortcut' : '',
const tooltip_Tooltip = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTooltip);
/* harmony default export */ const tooltip = (tooltip_Tooltip);
;// CONCATENATED MODULE: external ["wp","warning"]
const external_wp_warning_namespaceObject = window["wp"]["warning"];
var external_wp_warning_default = /*#__PURE__*/__webpack_require__.n(external_wp_warning_namespaceObject);
// EXTERNAL MODULE: ./node_modules/deepmerge/dist/cjs.js
var cjs = __webpack_require__(66);
var cjs_default = /*#__PURE__*/__webpack_require__.n(cjs);
// EXTERNAL MODULE: ./node_modules/fast-deep-equal/es6/index.js
var es6 = __webpack_require__(7734);
var es6_default = /*#__PURE__*/__webpack_require__.n(es6);
;// CONCATENATED MODULE: ./node_modules/is-plain-object/dist/is-plain-object.mjs
* is-plain-object <https://github.com/jonschlinkert/is-plain-object>
* Copyright (c) 2014-2017, Jon Schlinkert.
* Released under the MIT License.
function is_plain_object_isObject(o) {
return Object.prototype.toString.call(o) === '[object Object]';
function isPlainObject(o) {
if (is_plain_object_isObject(o) === false) return false;
// If has modified constructor
if (ctor === undefined) return true;
// If has modified prototype
if (is_plain_object_isObject(prot) === false) return false;
// If constructor does not have an Object-specific method
if (prot.hasOwnProperty('isPrototypeOf') === false) {
// Most likely a plain Object
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/hooks/use-update-effect.js
* A `React.useEffect` that will not run on the first render.
* https://github.com/ariakit/ariakit/blob/reakit/packages/reakit-utils/src/useUpdateEffect.ts
* @param {import('react').EffectCallback} effect
* @param {import('react').DependencyList} deps
function use_update_effect_useUpdateEffect(effect, deps) {
const mounted = (0,external_wp_element_namespaceObject.useRef)(false);
(0,external_wp_element_namespaceObject.useEffect)(() => {
// 1. This hook needs to pass a dep list that isn't an array literal
// 2. `effect` is missing from the array, and will need to be added carefully to avoid additional warnings
// see https://github.com/WordPress/gutenberg/pull/41166
// eslint-disable-next-line react-hooks/exhaustive-deps
/* harmony default export */ const use_update_effect = (use_update_effect_useUpdateEffect);
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/context/context-system-provider.js
const ComponentsContext = (0,external_wp_element_namespaceObject.createContext)( /** @type {Record<string, any>} */{});
const useComponentsContext = () => (0,external_wp_element_namespaceObject.useContext)(ComponentsContext);
* Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.
* Note: This function will warn if it detects an un-memoized `value`
* @param {Record<string, any>} props.value
* @return {Record<string, any>} The consolidated value.
function useContextSystemBridge({
const parentContext = useComponentsContext();
const valueRef = (0,external_wp_element_namespaceObject.useRef)(value);
use_update_effect(() => {
// Objects are equivalent.
es6_default()(valueRef.current, value) &&
// But not the same reference.
valueRef.current !== value) {
true ? external_wp_warning_default()(`Please memoize your context: ${JSON.stringify(value)}`) : 0;
// `parentContext` will always be memoized (i.e., the result of this hook itself)
// or the default value from when the `ComponentsContext` was originally
// initialized (which will never change, it's a static variable)
// so this memoization will prevent `deepmerge()` from rerunning unless
// the references to `value` change OR the `parentContext` has an actual material change
// (because again, it's guaranteed to be memoized or a static reference to the empty object
// so we know that the only changes for `parentContext` are material ones... i.e., why we
// don't have to warn in the `useUpdateEffect` hook above for `parentContext` and we only
// need to bother with the `value`). The `useUpdateEffect` above will ensure that we are
// correctly warning when the `value` isn't being properly memoized. All of that to say
// that this should be super safe to assume that `useMemo` will only run on actual
// changes to the two dependencies, therefore saving us calls to `deepmerge()`!
const config = (0,external_wp_element_namespaceObject.useMemo)(() => {
// Deep clone `parentContext` to avoid mutating it later.
return cjs_default()(parentContext !== null && parentContext !== void 0 ? parentContext : {}, value !== null && value !== void 0 ? value : {}, {
isMergeableObject: isPlainObject
}, [parentContext, value]);
* A Provider component that can modify props for connected components within
* <ContextSystemProvider value={{ Button: { size: 'small' }}}>
* </ContextSystemProvider>
* @template {Record<string, any>} T
* @param {Object} options
* @param {import('react').ReactNode} options.children Children to render.
* @param {T} options.value Props to render into connected components.
* @return {JSX.Element} A Provider wrapped component.
const BaseContextSystemProvider = ({
const contextValue = useContextSystemBridge({
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ComponentsContext.Provider, {
const ContextSystemProvider = (0,external_wp_element_namespaceObject.memo)(BaseContextSystemProvider);
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/context/constants.js
const COMPONENT_NAMESPACE = 'data-wp-component';
const CONNECTED_NAMESPACE = 'data-wp-c16t';
* Special key where the connected namespaces are stored.
* This is attached to Context connected components as a static property.
const CONNECT_STATIC_NAMESPACE = '__contextSystemKey__';
;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/context/utils.js
* Creates a dedicated context namespace HTML attribute for components.
* ns is short for "namespace"
* <div {...ns('Container')} />
* @param {string} componentName The name for the component.
* @return {Record<string, any>} A props object with the namespaced HTML attribute.
function getNamespace(componentName) {
[COMPONENT_NAMESPACE]: componentName
* Creates a dedicated connected context namespace HTML attribute for components.
* ns is short for "namespace"
* @return {Record<string, any>} A props object with the namespaced HTML attribute.
function getConnectedNamespace() {
[CONNECTED_NAMESPACE]: true
;// CONCATENATED MODULE: ./node_modules/tslib/tslib.es6.mjs
/******************************************************************************
Copyright (c) Microsoft Corporation.