: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
instanceMap.set(object, instances + 1);
* Specify the useInstanceId *function* signatures.
* More accurately, useInstanceId distinguishes between three different
* 1. When only object is given, the returned value is a number
* 2. When object and prefix is given, the returned value is a string
* 3. When preferredId is given, the returned value is the type of preferredId
* @param object Object reference to create an id for.
* Provides a unique instance ID.
* @param object Object reference to create an id for.
* @param [prefix] Prefix for the unique id.
* @param [preferredId] Default ID to use.
* @return The unique instance id.
function useInstanceId(object, prefix, preferredId) {
return (0,external_wp_element_namespaceObject.useMemo)(() => {
const id = createId(object);
return prefix ? `${prefix}-${id}` : id;
}, [object, preferredId, prefix]);
/* harmony default export */ const use_instance_id = (useInstanceId);
;// CONCATENATED MODULE: ./node_modules/@wordpress/compose/build-module/higher-order/with-instance-id/index.js
* A Higher Order Component used to be provide a unique instance ID by
const withInstanceId = createHigherOrderComponent(WrappedComponent => {
const instanceId = use_instance_id(WrappedComponent);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WrappedComponent, {
/* harmony default export */ const with_instance_id = (withInstanceId);
;// CONCATENATED MODULE: ./node_modules/@wordpress/compose/build-module/higher-order/with-safe-timeout/index.js
* We cannot use the `Window['setTimeout']` and `Window['clearTimeout']`
* types here because those functions include functionality that is not handled
* by this component, like the ability to pass extra arguments.
* In the case of this component, we only handle the simplest case where
* `setTimeout` only accepts a function (not a string) and an optional delay.
* A higher-order component used to provide and manage delayed function calls
* that ought to be bound to a component's lifecycle.
const withSafeTimeout = createHigherOrderComponent(OriginalComponent => {
return class WrappedComponent extends external_wp_element_namespaceObject.Component {
this.setTimeout = this.setTimeout.bind(this);
this.clearTimeout = this.clearTimeout.bind(this);
this.timeouts.forEach(clearTimeout);
const id = setTimeout(() => {
this.timeouts = this.timeouts.filter(timeoutId => timeoutId !== id);
(0,external_ReactJSXRuntime_namespaceObject.jsx)(OriginalComponent, {
setTimeout: this.setTimeout,
clearTimeout: this.clearTimeout
/* harmony default export */ const with_safe_timeout = (withSafeTimeout);
;// CONCATENATED MODULE: ./node_modules/@wordpress/compose/build-module/higher-order/with-state/index.js
* A Higher Order Component used to provide and manage internal component state
* @deprecated Use `useState` instead.
* @param {any} initialState Optional initial state of the component.
* @return {any} A higher order component wrapper accepting a component that takes the state props + its own props + `setState` and returning a component that only accepts the own props.
function withState(initialState = {}) {
external_wp_deprecated_default()('wp.compose.withState', {
alternative: 'wp.element.useState'
return createHigherOrderComponent(OriginalComponent => {
return class WrappedComponent extends external_wp_element_namespaceObject.Component {
constructor( /** @type {any} */props) {
this.setState = this.setState.bind(this);
this.state = initialState;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(OriginalComponent, {
;// CONCATENATED MODULE: external ["wp","dom"]
const external_wp_dom_namespaceObject = window["wp"]["dom"];
;// CONCATENATED MODULE: ./node_modules/@wordpress/compose/build-module/hooks/use-ref-effect/index.js
* Effect-like ref callback. Just like with `useEffect`, this allows you to
* return a cleanup function to be run if the ref changes or one of the
* dependencies changes. The ref is provided as an argument to the callback
* functions. The main difference between this and `useEffect` is that
* the `useEffect` callback is not called when the ref changes, but this is.
* Pass the returned ref callback as the component's ref and merge multiple refs
* It's worth noting that if the dependencies array is empty, there's not
* strictly a need to clean up event handlers for example, because the node is
* to be removed. It *is* necessary if you add dependencies because the ref
* callback will be called multiple times for the same node.
* @param callback Callback with ref as argument.
* @param dependencies Dependencies of the callback.
function useRefEffect(callback, dependencies) {
const cleanup = (0,external_wp_element_namespaceObject.useRef)();
return (0,external_wp_element_namespaceObject.useCallback)(node => {
cleanup.current = callback(node);
} else if (cleanup.current) {
;// CONCATENATED MODULE: ./node_modules/@wordpress/compose/build-module/hooks/use-constrained-tabbing/index.js
* In Dialogs/modals, the tabbing must be constrained to the content of
* the wrapper element. This hook adds the behavior to the returned ref.
* @return {import('react').RefCallback<Element>} Element Ref.
* import { useConstrainedTabbing } from '@wordpress/compose';
* const ConstrainedTabbingExample = () => {
* const constrainedTabbingRef = useConstrainedTabbing()
* <div ref={ constrainedTabbingRef }>
function useConstrainedTabbing() {
return useRefEffect(( /** @type {HTMLElement} */node) => {
function onKeyDown( /** @type {KeyboardEvent} */event) {
const action = shiftKey ? 'findPrevious' : 'findNext';
const nextElement = external_wp_dom_namespaceObject.focus.tabbable[action]( /** @type {HTMLElement} */target) || null;
// When the target element contains the element that is about to
// receive focus, for example when the target is a tabbable
// container, browsers may disagree on where to move focus next.
// In this case we can't rely on native browsers behavior. We need
// to manage focus instead.
// See https://github.com/WordPress/gutenberg/issues/46041.
if ( /** @type {HTMLElement} */target.contains(nextElement)) {
// If the element that is about to receive focus is inside the
// area, rely on native browsers behavior and let tabbing follow
// the native tab sequence.
if (node.contains(nextElement)) {
// If the element that is about to receive focus is outside the
// area, move focus to a div and insert it at the start or end of
// the area, depending on the direction. Without preventing default
// behaviour, the browser will then move focus to the next element.
const domAction = shiftKey ? 'append' : 'prepend';
const trap = ownerDocument.createElement('div');
// Remove itself when the trap loses focus.
trap.addEventListener('blur', () => node.removeChild(trap));
node.addEventListener('keydown', onKeyDown);
node.removeEventListener('keydown', onKeyDown);
/* harmony default export */ const use_constrained_tabbing = (useConstrainedTabbing);
// EXTERNAL MODULE: ./node_modules/clipboard/dist/clipboard.js
var dist_clipboard = __webpack_require__(3758);
var clipboard_default = /*#__PURE__*/__webpack_require__.n(dist_clipboard);
;// CONCATENATED MODULE: ./node_modules/@wordpress/compose/build-module/hooks/use-copy-on-click/index.js
/* eslint-disable jsdoc/no-undefined-types */
* Copies the text to the clipboard when the element is clicked.
* @param {import('react').RefObject<string | Element | NodeListOf<Element>>} ref Reference with the element.
* @param {string|Function} text The text to copy.
* @param {number} [timeout] Optional timeout to reset the returned
* state. 4 seconds by default.
* @return {boolean} Whether or not the text has been copied. Resets after the
function useCopyOnClick(ref, text, timeout = 4000) {
/* eslint-enable jsdoc/no-undefined-types */
external_wp_deprecated_default()('wp.compose.useCopyOnClick', {
alternative: 'wp.compose.useCopyToClipboard'
/** @type {import('react').MutableRefObject<Clipboard | undefined>} */
const clipboard = (0,external_wp_element_namespaceObject.useRef)();
const [hasCopied, setHasCopied] = (0,external_wp_element_namespaceObject.useState)(false);
(0,external_wp_element_namespaceObject.useEffect)(() => {
/** @type {number | undefined} */
// Clipboard listens to click events.
clipboard.current = new (clipboard_default())(ref.current, {
text: () => typeof text === 'function' ? text() : text
clipboard.current.on('success', ({
// Clearing selection will move focus back to the triggering button,
// ensuring that it is not reset to the body, and further that it is
// kept within the rendered node.
// Handle ClipboardJS focus bug, see https://github.com/zenorocha/clipboard.js/issues/680
/** @type {HTMLElement} */trigger.focus();
timeoutId = setTimeout(() => setHasCopied(false), timeout);
clipboard.current.destroy();
}, [text, timeout, setHasCopied]);
;// CONCATENATED MODULE: ./node_modules/@wordpress/compose/build-module/hooks/use-copy-to-clipboard/index.js
* @return {import('react').RefObject<T>} The updated ref
function useUpdatedRef(value) {
const ref = (0,external_wp_element_namespaceObject.useRef)(value);
* Copies the given text to the clipboard when the element is clicked.
* @template {HTMLElement} TElementType
* @param {string | (() => string)} text The text to copy. Use a function if not
* already available and expensive to compute.
* @param {Function} onSuccess Called when to text is copied.
* @return {import('react').Ref<TElementType>} A ref to assign to the target element.
function useCopyToClipboard(text, onSuccess) {
// Store the dependencies as refs and continuously update them so they're
// fresh when the callback is called.
const textRef = useUpdatedRef(text);
const onSuccessRef = useUpdatedRef(onSuccess);
return useRefEffect(node => {
// Clipboard listens to click events.
const clipboard = new (clipboard_default())(node, {
return typeof textRef.current === 'function' ? textRef.current() : textRef.current || '';
clipboard.on('success', ({
// Clearing selection will move focus back to the triggering
// button, ensuring that it is not reset to the body, and
// further that it is kept within the rendered node.
if (onSuccessRef.current) {
;// CONCATENATED MODULE: external ["wp","keycodes"]
const external_wp_keycodes_namespaceObject = window["wp"]["keycodes"];
;// CONCATENATED MODULE: ./node_modules/@wordpress/compose/build-module/hooks/use-focus-on-mount/index.js
* Hook used to focus the first tabbable element on mount.
* @param {boolean | 'firstElement'} focusOnMount Focus on mount mode.
* @return {import('react').RefCallback<HTMLElement>} Ref callback.
* import { useFocusOnMount } from '@wordpress/compose';
* const WithFocusOnMount = () => {
* const ref = useFocusOnMount()
function useFocusOnMount(focusOnMount = 'firstElement') {
const focusOnMountRef = (0,external_wp_element_namespaceObject.useRef)(focusOnMount);
* Sets focus on a DOM element.
* @param {HTMLElement} target The DOM element to set focus to.
const setFocus = target => {
// When focusing newly mounted dialogs,
// the position of the popover is often not right on the first render
// This prevents the layout shifts when focusing the dialogs.
/** @type {import('react').MutableRefObject<ReturnType<setTimeout> | undefined>} */
const timerId = (0,external_wp_element_namespaceObject.useRef)();