: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
(0,external_wp_element_namespaceObject.useEffect)(() => {
focusOnMountRef.current = focusOnMount;
return useRefEffect(node => {
var _node$ownerDocument$a;
if (!node || focusOnMountRef.current === false) {
if (node.contains((_node$ownerDocument$a = node.ownerDocument?.activeElement) !== null && _node$ownerDocument$a !== void 0 ? _node$ownerDocument$a : null)) {
if (focusOnMountRef.current === 'firstElement') {
timerId.current = setTimeout(() => {
const firstTabbable = external_wp_dom_namespaceObject.focus.tabbable.find(node)[0];
clearTimeout(timerId.current);
;// CONCATENATED MODULE: ./node_modules/@wordpress/compose/build-module/hooks/use-focus-return/index.js
/** @type {Element|null} */
* Adds the unmount behavior of returning focus to the element which had it
* previously as is expected for roles like menus or dialogs.
* @param {() => void} [onFocusReturn] Overrides the default return behavior.
* @return {import('react').RefCallback<HTMLElement>} Element Ref.
* import { useFocusReturn } from '@wordpress/compose';
* const WithFocusReturn = () => {
* const ref = useFocusReturn()
function useFocusReturn(onFocusReturn) {
/** @type {import('react').MutableRefObject<null | HTMLElement>} */
const ref = (0,external_wp_element_namespaceObject.useRef)(null);
/** @type {import('react').MutableRefObject<null | Element>} */
const focusedBeforeMount = (0,external_wp_element_namespaceObject.useRef)(null);
const onFocusReturnRef = (0,external_wp_element_namespaceObject.useRef)(onFocusReturn);
(0,external_wp_element_namespaceObject.useEffect)(() => {
onFocusReturnRef.current = onFocusReturn;
return (0,external_wp_element_namespaceObject.useCallback)(node => {
// Set ref to be used when unmounting.
// Only set when the node mounts.
if (focusedBeforeMount.current) {
focusedBeforeMount.current = node.ownerDocument.activeElement;
} else if (focusedBeforeMount.current) {
const isFocused = ref.current?.contains(ref.current?.ownerDocument.activeElement);
if (ref.current?.isConnected && !isFocused) {
(_origin = origin) !== null && _origin !== void 0 ? _origin : origin = focusedBeforeMount.current;
// Defer to the component's own explicit focus return behavior, if
// specified. This allows for support that the `onFocusReturn`
// decides to allow the default behavior to occur under some
if (onFocusReturnRef.current) {
onFocusReturnRef.current();
/** @type {null|HTMLElement} */(!focusedBeforeMount.current.isConnected ? origin : focusedBeforeMount.current)?.focus();
/* harmony default export */ const use_focus_return = (useFocusReturn);
;// CONCATENATED MODULE: ./node_modules/@wordpress/compose/build-module/hooks/use-focus-outside/index.js
* Input types which are classified as button types, for use in considering
* whether element is a (focus-normalized) button.
const INPUT_BUTTON_TYPES = ['button', 'submit'];
* List of HTML button elements subject to focus normalization
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
* Returns true if the given element is a button element subject to focus
* normalization, or false otherwise.
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
* @param eventTarget The target from a mouse or touch event.
* @return Whether the element is a button element subject to focus normalization.
function isFocusNormalizedButton(eventTarget) {
if (!(eventTarget instanceof window.HTMLElement)) {
switch (eventTarget.nodeName) {
return INPUT_BUTTON_TYPES.includes(eventTarget.type);
* A react hook that can be used to check whether focus has moved outside the
* element the event handlers are bound to.
* @param onFocusOutside A callback triggered when focus moves outside
* the element the event handlers are bound to.
* @return An object containing event handlers. Bind the event handlers to a
* wrapping element element to capture when focus moves outside that element.
function useFocusOutside(onFocusOutside) {
const currentOnFocusOutside = (0,external_wp_element_namespaceObject.useRef)(onFocusOutside);
(0,external_wp_element_namespaceObject.useEffect)(() => {
currentOnFocusOutside.current = onFocusOutside;
const preventBlurCheck = (0,external_wp_element_namespaceObject.useRef)(false);
const blurCheckTimeoutId = (0,external_wp_element_namespaceObject.useRef)();
* Cancel a blur check timeout.
const cancelBlurCheck = (0,external_wp_element_namespaceObject.useCallback)(() => {
clearTimeout(blurCheckTimeoutId.current);
// Cancel blur checks on unmount.
(0,external_wp_element_namespaceObject.useEffect)(() => {
return () => cancelBlurCheck();
// Cancel a blur check if the callback or ref is no longer provided.
(0,external_wp_element_namespaceObject.useEffect)(() => {
}, [onFocusOutside, cancelBlurCheck]);
* Handles a mousedown or mouseup event to respectively assign and
* unassign a flag for preventing blur check on button elements. Some
* browsers, namely Firefox and Safari, do not emit a focus event on
* button elements when clicked, while others do. The logic here
* intends to normalize this as treating click on buttons as focus.
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
const normalizeButtonFocus = (0,external_wp_element_namespaceObject.useCallback)(event => {
const isInteractionEnd = ['mouseup', 'touchend'].includes(type);
preventBlurCheck.current = false;
} else if (isFocusNormalizedButton(target)) {
preventBlurCheck.current = true;
* A callback triggered when a blur event occurs on the element the handler
* Calls the `onFocusOutside` callback in an immediate timeout if focus has
* move outside the bound element and is still within the document.
const queueBlurCheck = (0,external_wp_element_namespaceObject.useCallback)(event => {
// React does not allow using an event reference asynchronously
// due to recycling behavior, except when explicitly persisted.
// Skip blur check if clicking button. See `normalizeButtonFocus`.
if (preventBlurCheck.current) {
// The usage of this attribute should be avoided. The only use case
// would be when we load modals that are not React components and
// therefore don't exist in the React tree. An example is opening
// the Media Library modal from another dialog.
// This attribute should contain a selector of the related target
// we want to ignore, because we still need to trigger the blur event
const ignoreForRelatedTarget = event.target.getAttribute('data-unstable-ignore-focus-outside-for-relatedtarget');
if (ignoreForRelatedTarget && event.relatedTarget?.closest(ignoreForRelatedTarget)) {
blurCheckTimeoutId.current = setTimeout(() => {
// If document is not focused then focus should remain
// inside the wrapped component and therefore we cancel
// this blur event thereby leaving focus in place.
// https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus.
if (!document.hasFocus()) {
if ('function' === typeof currentOnFocusOutside.current) {
currentOnFocusOutside.current(event);
onFocus: cancelBlurCheck,
onMouseDown: normalizeButtonFocus,
onMouseUp: normalizeButtonFocus,
onTouchStart: normalizeButtonFocus,
onTouchEnd: normalizeButtonFocus,
;// CONCATENATED MODULE: ./node_modules/@wordpress/compose/build-module/hooks/use-merge-refs/index.js
/* eslint-disable jsdoc/valid-types */
* @typedef {T extends import('react').Ref<infer R> ? R : never} TypeFromRef
/* eslint-enable jsdoc/valid-types */
* @param {import('react').Ref<T>} ref
function assignRef(ref, value) {
if (typeof ref === 'function') {
} else if (ref && ref.hasOwnProperty('current')) {
/* eslint-disable jsdoc/no-undefined-types */
/** @type {import('react').MutableRefObject<T>} */ref.current = value;
/* eslint-enable jsdoc/no-undefined-types */
* Merges refs into one ref callback.
* It also ensures that the merged ref callbacks are only called when they
* change (as a result of a `useCallback` dependency update) OR when the ref
* value changes, just as React does when passing a single ref callback to the
* As expected, if you pass a new function on every render, the ref callback
* will be called after every render.
* If you don't wish a ref callback to be called after every render, wrap it
* with `useCallback( callback, dependencies )`. When a dependency changes, the
* old ref callback will be called with `null` and the new ref callback will be
* called with the same value.
* To make ref callbacks easier to use, you can also pass the result of
* `useRefEffect`, which makes cleanup easier by allowing you to return a
* cleanup function instead of handling `null`.
* It's also possible to _disable_ a ref (and its behaviour) by simply not
* const ref = useRefEffect( ( node ) => {
* node.addEventListener( ... );
* node.removeEventListener( ... );
* }, [ ...dependencies ] );
* const otherRef = useRef();
* const mergedRefs useMergeRefs( [
* return <div ref={ mergedRefs } />;
* @template {import('react').Ref<any>} TRef
* @param {Array<TRef>} refs The refs to be merged.
* @return {import('react').RefCallback<TypeFromRef<TRef>>} The merged ref callback.
function useMergeRefs(refs) {
const element = (0,external_wp_element_namespaceObject.useRef)();
const isAttached = (0,external_wp_element_namespaceObject.useRef)(false);
const didElementChange = (0,external_wp_element_namespaceObject.useRef)(false);
/* eslint-disable jsdoc/no-undefined-types */
/** @type {import('react').MutableRefObject<TRef[]>} */
/* eslint-enable jsdoc/no-undefined-types */
const previousRefs = (0,external_wp_element_namespaceObject.useRef)([]);
const currentRefs = (0,external_wp_element_namespaceObject.useRef)(refs);
// Update on render before the ref callback is called, so the ref callback
// always has access to the current refs.
currentRefs.current = refs;
// If any of the refs change, call the previous ref with `null` and the new
// ref with the node, except when the element changes in the same cycle, in
// which case the ref callbacks will already have been called.
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
if (didElementChange.current === false && isAttached.current === true) {
refs.forEach((ref, index) => {
const previousRef = previousRefs.current[index];
if (ref !== previousRef) {
assignRef(previousRef, null);
assignRef(ref, element.current);
previousRefs.current = refs;
// No dependencies, must be reset after every render so ref callbacks are
// correctly called after a ref change.
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
didElementChange.current = false;
// There should be no dependencies so that `callback` is only called when
return (0,external_wp_element_namespaceObject.useCallback)(value => {
// Update the element so it can be used when calling ref callbacks on a
assignRef(element, value);
didElementChange.current = true;
isAttached.current = value !== null;
// When an element changes, the current ref callback should be called
// with the new element and the previous one with `null`.
const refsToAssign = value ? currentRefs.current : previousRefs.current;
// Update the latest refs.
for (const ref of refsToAssign) {
;// CONCATENATED MODULE: ./node_modules/@wordpress/compose/build-module/hooks/use-dialog/index.js
* Returns a ref and props to apply to a dialog wrapper to enable the following behaviors:
* - return focus on unmount.
* @param options Dialog Options.
function useDialog(options) {
const currentOptions = (0,external_wp_element_namespaceObject.useRef)();
constrainTabbing = options.focusOnMount !== false
(0,external_wp_element_namespaceObject.useEffect)(() => {
currentOptions.current = options;
}, Object.values(options));
const constrainedTabbingRef = use_constrained_tabbing();
const focusOnMountRef = useFocusOnMount(options.focusOnMount);
const focusReturnRef = use_focus_return();
const focusOutsideProps = useFocusOutside(event => {
// This unstable prop is here only to manage backward compatibility
// for the Popover component otherwise, the onClose should be enough.
if (currentOptions.current?.__unstableOnClose) {
currentOptions.current.__unstableOnClose('focus-outside', event);
} else if (currentOptions.current?.onClose) {
currentOptions.current.onClose();
const closeOnEscapeRef = (0,external_wp_element_namespaceObject.useCallback)(node => {
node.addEventListener('keydown', event => {
if (event.keyCode === external_wp_keycodes_namespaceObject.ESCAPE && !event.defaultPrevented && currentOptions.current?.onClose) {
currentOptions.current.onClose();
return [useMergeRefs([constrainTabbing ? constrainedTabbingRef : null, options.focusOnMount !== false ? focusReturnRef : null, options.focusOnMount !== false ? focusOnMountRef : null, closeOnEscapeRef]), {
/* harmony default export */ const use_dialog = (useDialog);
;// CONCATENATED MODULE: ./node_modules/@wordpress/compose/build-module/hooks/use-disabled/index.js
* In some circumstances, such as block previews, all focusable DOM elements
* (input fields, links, buttons, etc.) need to be disabled. This hook adds the
* behavior to disable nested DOM elements to the returned ref.
* If you can, prefer the use of the inert HTML attribute.
* @param {Object} config Configuration object.
* @param {boolean=} config.isDisabled Whether the element should be disabled.
* @return {import('react').RefCallback<HTMLElement>} Element Ref.
* import { useDisabled } from '@wordpress/compose';
* const DisabledExample = () => {
* const disabledRef = useDisabled();
* <div ref={ disabledRef }>
* <a href="#">This link will have tabindex set to -1</a>
* <input placeholder="This input will have the disabled attribute added to it." type="text" />
isDisabled: isDisabledProp = false
return useRefEffect(node => {
const defaultView = node?.ownerDocument?.defaultView;
/** A variable keeping track of the previous updates in order to restore them. */
node.childNodes.forEach(child => {
if (!(child instanceof defaultView.HTMLElement)) {
It is recommended that you Edit text format, this type of Fix handles quite a lot in one request
