: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
/* eslint-enable jsdoc/no-undefined-types */
// Disable reason: We're doing something pretty JavaScript-y here where the
// ref will always have a current value that is not null or undefined but it
// needs to start as undefined. We don't want to change the return type so
// it's easier to just ts-ignore this specific line that's complaining about
// undefined not being part of T.
const ref = (0,external_wp_element_namespaceObject.useRef)();
* A hook to facilitate drag and drop handling.
* @param {Object} props Named parameters.
* @param {?HTMLElement} [props.dropZoneElement] Optional element to be used as the drop zone.
* @param {boolean} [props.isDisabled] Whether or not to disable the drop zone.
* @param {(e: DragEvent) => void} [props.onDragStart] Called when dragging has started.
* @param {(e: DragEvent) => void} [props.onDragEnter] Called when the zone is entered.
* @param {(e: DragEvent) => void} [props.onDragOver] Called when the zone is moved within.
* @param {(e: DragEvent) => void} [props.onDragLeave] Called when the zone is left.
* @param {(e: MouseEvent) => void} [props.onDragEnd] Called when dragging has ended.
* @param {(e: DragEvent) => void} [props.onDrop] Called when dropping in the zone.
* @return {import('react').RefCallback<HTMLElement>} Ref callback to be passed to the drop zone element.
onDragStart: _onDragStart,
onDragEnter: _onDragEnter,
onDragLeave: _onDragLeave,
const onDropRef = useFreshRef(_onDrop);
const onDragStartRef = useFreshRef(_onDragStart);
const onDragEnterRef = useFreshRef(_onDragEnter);
const onDragLeaveRef = useFreshRef(_onDragLeave);
const onDragEndRef = useFreshRef(_onDragEnd);
const onDragOverRef = useFreshRef(_onDragOver);
return useRefEffect(elem => {
// If a custom dropZoneRef is passed, use that instead of the element.
// This allows the dropzone to cover an expanded area, rather than
// be restricted to the area of the ref returned by this hook.
const element = dropZoneElement !== null && dropZoneElement !== void 0 ? dropZoneElement : elem;
* Checks if an element is in the drop zone.
* @param {EventTarget|null} targetToCheck
* @return {boolean} True if in drop zone, false if not.
function isElementInZone(targetToCheck) {
if (!targetToCheck || !defaultView || !(targetToCheck instanceof defaultView.HTMLElement) || !element.contains(targetToCheck)) {
/** @type {HTMLElement|null} */
let elementToCheck = targetToCheck;
if (elementToCheck.dataset.isDropZone) {
return elementToCheck === element;
} while (elementToCheck = elementToCheck.parentElement);
function maybeDragStart( /** @type {DragEvent} */event) {
// Note that `dragend` doesn't fire consistently for file and
// HTML drag events where the drag origin is outside the browser
// window. In Firefox it may also not fire if the originating
ownerDocument.addEventListener('dragend', maybeDragEnd);
ownerDocument.addEventListener('mousemove', maybeDragEnd);
if (onDragStartRef.current) {
onDragStartRef.current(event);
function onDragEnter( /** @type {DragEvent} */event) {
// The `dragenter` event will also fire when entering child
// elements, but we only want to call `onDragEnter` when
// entering the drop zone, which means the `relatedTarget`
// (element that has been left) should be outside the drop zone.
if (element.contains( /** @type {Node} */event.relatedTarget)) {
if (onDragEnterRef.current) {
onDragEnterRef.current(event);
function onDragOver( /** @type {DragEvent} */event) {
// Only call onDragOver for the innermost hovered drop zones.
if (!event.defaultPrevented && onDragOverRef.current) {
onDragOverRef.current(event);
// Prevent the browser default while also signalling to parent
// drop zones that `onDragOver` is already handled.
function onDragLeave( /** @type {DragEvent} */event) {
// The `dragleave` event will also fire when leaving child
// elements, but we only want to call `onDragLeave` when
// leaving the drop zone, which means the `relatedTarget`
// (element that has been entered) should be outside the drop
// Note: This is not entirely reliable in Safari due to this bug
// https://bugs.webkit.org/show_bug.cgi?id=66547
if (isElementInZone(event.relatedTarget)) {
if (onDragLeaveRef.current) {
onDragLeaveRef.current(event);
function onDrop( /** @type {DragEvent} */event) {
// Don't handle drop if an inner drop zone already handled it.
if (event.defaultPrevented) {
// Prevent the browser default while also signalling to parent
// drop zones that `onDrop` is already handled.
// This seemingly useless line has been shown to resolve a
// Safari issue where files dragged directly from the dock are
// eslint-disable-next-line no-unused-expressions
event.dataTransfer && event.dataTransfer.files.length;
onDropRef.current(event);
function maybeDragEnd( /** @type {MouseEvent} */event) {
ownerDocument.removeEventListener('dragend', maybeDragEnd);
ownerDocument.removeEventListener('mousemove', maybeDragEnd);
if (onDragEndRef.current) {
onDragEndRef.current(event);
element.dataset.isDropZone = 'true';
element.addEventListener('drop', onDrop);
element.addEventListener('dragenter', onDragEnter);
element.addEventListener('dragover', onDragOver);
element.addEventListener('dragleave', onDragLeave);
// The `dragstart` event doesn't fire if the drag started outside
ownerDocument.addEventListener('dragenter', maybeDragStart);
delete element.dataset.isDropZone;
element.removeEventListener('drop', onDrop);
element.removeEventListener('dragenter', onDragEnter);
element.removeEventListener('dragover', onDragOver);
element.removeEventListener('dragleave', onDragLeave);
ownerDocument.removeEventListener('dragend', maybeDragEnd);
ownerDocument.removeEventListener('mousemove', maybeDragEnd);
ownerDocument.removeEventListener('dragenter', maybeDragStart);
}, [isDisabled, dropZoneElement] // Refresh when the passed in dropZoneElement changes.
;// CONCATENATED MODULE: ./node_modules/@wordpress/compose/build-module/hooks/use-focusable-iframe/index.js
* Dispatches a bubbling focus event when the iframe receives focus. Use
* `onFocus` as usual on the iframe or a parent element.
* @return Ref to pass to the iframe.
function useFocusableIframe() {
return useRefEffect(element => {
* Checks whether the iframe is the activeElement, inferring that it has
* then received focus, and dispatches a focus event.
if (ownerDocument && ownerDocument.activeElement === element) {
defaultView.addEventListener('blur', checkFocus);
defaultView.removeEventListener('blur', checkFocus);
;// CONCATENATED MODULE: ./node_modules/@wordpress/compose/build-module/hooks/use-fixed-window-list/index.js
const DEFAULT_INIT_WINDOW_SIZE = 30;
* @typedef {Object} WPFixedWindowList
* @property {number} visibleItems Items visible in the current viewport
* @property {number} start Start index of the window
* @property {number} end End index of the window
* @property {(index:number)=>boolean} itemInView Returns true if item is in the window
* @typedef {Object} WPFixedWindowListOptions
* @property {number} [windowOverscan] Renders windowOverscan number of items before and after the calculated visible window.
* @property {boolean} [useWindowing] When false avoids calculating the window size
* @property {number} [initWindowSize] Initial window size to use on first render before we can calculate the window size.
* @property {any} [expandedState] Used to recalculate the window size when the expanded state of a list changes.
* @param {import('react').RefObject<HTMLElement>} elementRef Used to find the closest scroll container that contains element.
* @param { number } itemHeight Fixed item height in pixels
* @param { number } totalItems Total items in list
* @param { WPFixedWindowListOptions } [options] Options object
* @return {[ WPFixedWindowList, setFixedListWindow:(nextWindow:WPFixedWindowList)=>void]} Array with the fixed window list and setter
function useFixedWindowList(elementRef, itemHeight, totalItems, options) {
var _options$initWindowSi, _options$useWindowing;
const initWindowSize = (_options$initWindowSi = options?.initWindowSize) !== null && _options$initWindowSi !== void 0 ? _options$initWindowSi : DEFAULT_INIT_WINDOW_SIZE;
const useWindowing = (_options$useWindowing = options?.useWindowing) !== null && _options$useWindowing !== void 0 ? _options$useWindowing : true;
const [fixedListWindow, setFixedListWindow] = (0,external_wp_element_namespaceObject.useState)({
visibleItems: initWindowSize,
itemInView: ( /** @type {number} */index) => {
return index >= 0 && index <= initWindowSize;
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
const scrollContainer = (0,external_wp_dom_namespaceObject.getScrollContainer)(elementRef.current);
const measureWindow = ( /** @type {boolean | undefined} */initRender) => {
var _options$windowOversc;
const visibleItems = Math.ceil(scrollContainer.clientHeight / itemHeight);
// Aim to keep opening list view fast, afterward we can optimize for scrolling.
const windowOverscan = initRender ? visibleItems : (_options$windowOversc = options?.windowOverscan) !== null && _options$windowOversc !== void 0 ? _options$windowOversc : visibleItems;
const firstViewableIndex = Math.floor(scrollContainer.scrollTop / itemHeight);
const start = Math.max(0, firstViewableIndex - windowOverscan);
const end = Math.min(totalItems - 1, firstViewableIndex + visibleItems + windowOverscan);
setFixedListWindow(lastWindow => {
itemInView: ( /** @type {number} */index) => {
return start <= index && index <= end;
if (lastWindow.start !== nextWindow.start || lastWindow.end !== nextWindow.end || lastWindow.visibleItems !== nextWindow.visibleItems) {
const debounceMeasureList = debounce(() => {
scrollContainer?.addEventListener('scroll', debounceMeasureList);
scrollContainer?.ownerDocument?.defaultView?.addEventListener('resize', debounceMeasureList);
scrollContainer?.ownerDocument?.defaultView?.addEventListener('resize', debounceMeasureList);
scrollContainer?.removeEventListener('scroll', debounceMeasureList);
scrollContainer?.ownerDocument?.defaultView?.removeEventListener('resize', debounceMeasureList);
}, [itemHeight, elementRef, totalItems, options?.expandedState, options?.windowOverscan, useWindowing]);
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
const scrollContainer = (0,external_wp_dom_namespaceObject.getScrollContainer)(elementRef.current);
const handleKeyDown = ( /** @type {KeyboardEvent} */event) => {
case external_wp_keycodes_namespaceObject.HOME:
return scrollContainer?.scrollTo({
case external_wp_keycodes_namespaceObject.END:
return scrollContainer?.scrollTo({
top: totalItems * itemHeight
case external_wp_keycodes_namespaceObject.PAGEUP:
return scrollContainer?.scrollTo({
top: scrollContainer.scrollTop - fixedListWindow.visibleItems * itemHeight
case external_wp_keycodes_namespaceObject.PAGEDOWN:
return scrollContainer?.scrollTo({
top: scrollContainer.scrollTop + fixedListWindow.visibleItems * itemHeight
scrollContainer?.ownerDocument?.defaultView?.addEventListener('keydown', handleKeyDown);
scrollContainer?.ownerDocument?.defaultView?.removeEventListener('keydown', handleKeyDown);
}, [totalItems, itemHeight, elementRef, fixedListWindow.visibleItems, useWindowing, options?.expandedState]);
return [fixedListWindow, setFixedListWindow];
;// CONCATENATED MODULE: ./node_modules/@wordpress/compose/build-module/hooks/use-observable-value/index.js
* React hook that lets you observe an entry in an `ObservableMap`. The hook returns the
* current value corresponding to the key, or `undefined` when there is no value stored.
* It also observes changes to the value and triggers an update of the calling component
* in case the value changes.
* @template K The type of the keys in the map.
* @template V The type of the values in the map.
* @param map The `ObservableMap` to observe.
* @param name The map key to observe.
* @return The value corresponding to the map key requested.
function useObservableValue(map, name) {
const [subscribe, getValue] = (0,external_wp_element_namespaceObject.useMemo)(() => [listener => map.subscribe(name, listener), () => map.get(name)], [map, name]);
return (0,external_wp_element_namespaceObject.useSyncExternalStore)(subscribe, getValue, getValue);
;// CONCATENATED MODULE: ./node_modules/@wordpress/compose/build-module/index.js
// The `createHigherOrderComponent` helper and helper types.
// The `debounce` helper and its types.
// The `throttle` helper and its types.
// The `ObservableMap` data structure
// The `compose` and `pipe` helpers (inspired by `flowRight` and `flow` from Lodash).
// Higher-order components.
(window.wp = window.wp || {}).compose = __webpack_exports__;