* for more details.
*
* @see https://github.com/FezVrasta/react-resize-aware
*
* @example
*
* ```js
* const App = () => {
* const [ resizeListener, sizes ] = useResizeObserver();
*
* return (
*
* { resizeListener }
* Your content here
*
* );
* };
* ```
*
*/
/* harmony default export */ var use_resize_observer = ((dist_default()));
;// CONCATENATED MODULE: external ["wp","priorityQueue"]
var external_wp_priorityQueue_namespaceObject = window["wp"]["priorityQueue"];
;// CONCATENATED MODULE: ./node_modules/@wordpress/compose/build-module/hooks/use-async-list/index.js
/**
* WordPress dependencies
*/
/**
* Returns the first items from list that are present on state.
*
* @param list New array.
* @param state Current state.
* @return First items present iin state.
*/
function getFirstItemsPresentInState(list, state) {
const firstItems = [];
for (let i = 0; i < list.length; i++) {
const item = list[i];
if (!state.includes(item)) {
break;
}
firstItems.push(item);
}
return firstItems;
}
/**
* React hook returns an array which items get asynchronously appended from a source array.
* This behavior is useful if we want to render a list of items asynchronously for performance reasons.
*
* @param list Source array.
* @param config Configuration object.
*
* @return Async array.
*/
function useAsyncList(list) {
let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
step: 1
};
const {
step = 1
} = config;
const [current, setCurrent] = (0,external_wp_element_namespaceObject.useState)([]);
(0,external_wp_element_namespaceObject.useEffect)(() => {
// On reset, we keep the first items that were previously rendered.
let firstItems = getFirstItemsPresentInState(list, current);
if (firstItems.length < step) {
firstItems = firstItems.concat(list.slice(firstItems.length, step));
}
setCurrent(firstItems);
let nextIndex = firstItems.length;
const asyncQueue = (0,external_wp_priorityQueue_namespaceObject.createQueue)();
const append = () => {
if (list.length <= nextIndex) {
return;
}
setCurrent(state => [...state, ...list.slice(nextIndex, nextIndex + step)]);
nextIndex += step;
asyncQueue.add({}, append);
};
asyncQueue.add({}, append);
return () => asyncQueue.reset();
}, [list]);
return current;
}
/* harmony default export */ var use_async_list = (useAsyncList);
;// CONCATENATED MODULE: ./node_modules/@wordpress/compose/build-module/hooks/use-warn-on-change/index.js
/**
* Internal dependencies
*/
// Disable reason: Object and object are distinctly different types in TypeScript and we mean the lowercase object in thise case
// but eslint wants to force us to use `Object`. See https://stackoverflow.com/questions/49464634/difference-between-object-and-object-in-typescript
/* eslint-disable jsdoc/check-types */
/**
* Hook that performs a shallow comparison between the preview value of an object
* and the new one, if there's a difference, it prints it to the console.
* this is useful in performance related work, to check why a component re-renders.
*
* @example
*
* ```jsx
* function MyComponent(props) {
* useWarnOnChange(props);
*
* return "Something";
* }
* ```
*
* @param {object} object Object which changes to compare.
* @param {string} prefix Just a prefix to show when console logging.
*/
function useWarnOnChange(object) {
let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'Change detection';
const previousValues = usePrevious(object);
Object.entries(previousValues !== null && previousValues !== void 0 ? previousValues : []).forEach(_ref => {
let [key, value] = _ref;
if (value !== object[
/** @type {keyof typeof object} */
key]) {
// eslint-disable-next-line no-console
console.warn(`${prefix}: ${key} key changed:`, value, object[
/** @type {keyof typeof object} */
key]
/* eslint-enable jsdoc/check-types */
);
}
});
}
/* harmony default export */ var use_warn_on_change = (useWarnOnChange);
// EXTERNAL MODULE: external "React"
var external_React_ = __webpack_require__(9196);
;// CONCATENATED MODULE: ./node_modules/use-memo-one/dist/use-memo-one.esm.js
function areInputsEqual(newInputs, lastInputs) {
if (newInputs.length !== lastInputs.length) {
return false;
}
for (var i = 0; i < newInputs.length; i++) {
if (newInputs[i] !== lastInputs[i]) {
return false;
}
}
return true;
}
function useMemoOne(getResult, inputs) {
var initial = (0,external_React_.useState)(function () {
return {
inputs: inputs,
result: getResult()
};
})[0];
var isFirstRun = (0,external_React_.useRef)(true);
var committed = (0,external_React_.useRef)(initial);
var useCache = isFirstRun.current || Boolean(inputs && committed.current.inputs && areInputsEqual(inputs, committed.current.inputs));
var cache = useCache ? committed.current : {
inputs: inputs,
result: getResult()
};
(0,external_React_.useEffect)(function () {
isFirstRun.current = false;
committed.current = cache;
}, [cache]);
return cache.result;
}
function useCallbackOne(callback, inputs) {
return useMemoOne(function () {
return callback;
}, inputs);
}
var useMemo = (/* unused pure expression or super */ null && (useMemoOne));
var useCallback = (/* unused pure expression or super */ null && (useCallbackOne));
;// CONCATENATED MODULE: ./node_modules/@wordpress/compose/build-module/hooks/use-debounce/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/* eslint-disable jsdoc/valid-types */
/**
* Debounces a function with Lodash's `debounce`. A new debounced function will
* be returned and any scheduled calls cancelled if any of the arguments change,
* including the function to debounce, so please wrap functions created on
* render in components in `useCallback`.
*
* @see https://docs-lodash.com/v4/debounce/
*
* @template {(...args: any[]) => void} TFunc
*
* @param {TFunc} fn The function to debounce.
* @param {number} [wait] The number of milliseconds to delay.
* @param {import('lodash').DebounceSettings} [options] The options object.
* @return {import('lodash').DebouncedFunc} Debounced function.
*/
function useDebounce(fn, wait, options) {
/* eslint-enable jsdoc/valid-types */
const debounced = useMemoOne(() => (0,external_lodash_namespaceObject.debounce)(fn, wait, options), [fn, wait, options]);
(0,external_wp_element_namespaceObject.useEffect)(() => () => debounced.cancel(), [debounced]);
return debounced;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/compose/build-module/hooks/use-throttle/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Throttles a function with Lodash's `throttle`. A new throttled function will
* be returned and any scheduled calls cancelled if any of the arguments change,
* including the function to throttle, so please wrap functions created on
* render in components in `useCallback`.
*
* @see https://docs-lodash.com/v4/throttle/
*
* @template {(...args: any[]) => void} TFunc
*
* @param {TFunc} fn The function to throttle.
* @param {number} [wait] The number of milliseconds to throttle invocations to.
* @param {import('lodash').ThrottleSettings} [options] The options object. See linked documentation for details.
* @return {import('lodash').DebouncedFunc} Throttled function.
*/
function useThrottle(fn, wait, options) {
const throttled = useMemoOne(() => (0,external_lodash_namespaceObject.throttle)(fn, wait, options), [fn, wait, options]);
(0,external_wp_element_namespaceObject.useEffect)(() => () => throttled.cancel(), [throttled]);
return throttled;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/compose/build-module/hooks/use-drop-zone/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/* eslint-disable jsdoc/valid-types */
/**
* @template T
* @param {T} value
* @return {import('react').MutableRefObject} A ref with the value.
*/
function useFreshRef(value) {
/* eslint-enable jsdoc/valid-types */
/* eslint-disable jsdoc/no-undefined-types */
/** @type {import('react').MutableRefObject} */
/* 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.
// @ts-ignore
const ref = (0,external_wp_element_namespaceObject.useRef)();
ref.current = value;
return ref;
}
/**
* A hook to facilitate drag and drop handling.
*
* @param {Object} props Named parameters.
* @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} Ref callback to be passed to the drop zone element.
*/
function useDropZone(_ref) {
let {
isDisabled,
onDrop: _onDrop,
onDragStart: _onDragStart,
onDragEnter: _onDragEnter,
onDragLeave: _onDragLeave,
onDragEnd: _onDragEnd,
onDragOver: _onDragOver
} = _ref;
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(element => {
if (isDisabled) {
return;
}
let isDragging = false;
const {
ownerDocument
} = element;
/**
* 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) {
const {
defaultView
} = ownerDocument;
if (!targetToCheck || !defaultView || !(targetToCheck instanceof defaultView.HTMLElement) || !element.contains(targetToCheck)) {
return false;
}
/** @type {HTMLElement|null} */
let elementToCheck = targetToCheck;
do {
if (elementToCheck.dataset.isDropZone) {
return elementToCheck === element;
}
} while (elementToCheck = elementToCheck.parentElement);
return false;
}
function maybeDragStart(
/** @type {DragEvent} */
event) {
if (isDragging) {
return;
}
isDragging = true;
ownerDocument.removeEventListener('dragenter', maybeDragStart); // 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
// node is removed.
ownerDocument.addEventListener('dragend', maybeDragEnd);
ownerDocument.addEventListener('mousemove', maybeDragEnd);
if (onDragStartRef.current) {
onDragStartRef.current(event);
}
}
function onDragEnter(
/** @type {DragEvent} */
event) {
event.preventDefault(); // 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)) {
return;
}
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.
event.preventDefault();
}
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
// zone.
if (isElementInZone(event.relatedTarget)) {
return;
}
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) {
return;
} // Prevent the browser default while also signalling to parent
// drop zones that `onDrop` is already handled.
event.preventDefault(); // This seemingly useless line has been shown to resolve a
// Safari issue where files dragged directly from the dock are
// not recognized.
// eslint-disable-next-line no-unused-expressions
event.dataTransfer && event.dataTransfer.files.length;
if (onDropRef.current) {
onDropRef.current(event);
}
maybeDragEnd(event);
}
function maybeDragEnd(
/** @type {MouseEvent} */
event) {
if (!isDragging) {
return;
}
isDragging = false;
ownerDocument.addEventListener('dragenter', maybeDragStart);
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
// the document.
ownerDocument.addEventListener('dragenter', maybeDragStart);
return () => {
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.addEventListener('dragenter', maybeDragStart);
};
}, [isDisabled]);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/compose/build-module/hooks/use-focusable-iframe/index.js
/**
* Internal dependencies
*/
/**
* Dispatches a bubbling focus event when the iframe receives focus. Use
* `onFocus` as usual on the iframe or a parent element.
*
* @return {Object} Ref to pass to the iframe.
*/
function useFocusableIframe() {
return useRefEffect(element => {
const {
ownerDocument
} = element;
if (!ownerDocument) return;
const {
defaultView
} = ownerDocument;
if (!defaultView) return;
/**
* Checks whether the iframe is the activeElement, inferring that it has
* then received focus, and dispatches a focus event.
*/
function checkFocus() {
if (ownerDocument && ownerDocument.activeElement === element) {
/** @type {HTMLElement} */
element.focus();
}
}
defaultView.addEventListener('blur', checkFocus);
return () => {
defaultView.removeEventListener('blur', checkFocus);
};
}, []);
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/compose/build-module/hooks/use-fixed-window-list/index.js
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
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.
*/
/**
*
* @param {import('react').RefObject} 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 === null || options === void 0 ? void 0 : options.initWindowSize) !== null && _options$initWindowSi !== void 0 ? _options$initWindowSi : DEFAULT_INIT_WINDOW_SIZE;
const useWindowing = (_options$useWindowing = options === null || options === void 0 ? void 0 : options.useWindowing) !== null && _options$useWindowing !== void 0 ? _options$useWindowing : true;
const [fixedListWindow, setFixedListWindow] = (0,external_wp_element_namespaceObject.useState)({
visibleItems: initWindowSize,
start: 0,
end: initWindowSize,
itemInView: (
/** @type {number} */
index) => {
return index >= 0 && index <= initWindowSize;
}
});
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
var _scrollContainer$owne, _scrollContainer$owne2, _scrollContainer$owne3, _scrollContainer$owne4;
if (!useWindowing) {
return;
}
const scrollContainer = (0,external_wp_dom_namespaceObject.getScrollContainer)(elementRef.current);
const measureWindow = (
/** @type {boolean | undefined} */
initRender) => {
var _options$windowOversc;
if (!scrollContainer) {
return;
}
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 === null || options === void 0 ? void 0 : 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 => {
const nextWindow = {
visibleItems,
start,
end,
itemInView: (
/** @type {number} */
index) => {
return start <= index && index <= end;
}
};
if (lastWindow.start !== nextWindow.start || lastWindow.end !== nextWindow.end || lastWindow.visibleItems !== nextWindow.visibleItems) {
return nextWindow;
}
return lastWindow;
});
};
measureWindow(true);
const debounceMeasureList = (0,external_lodash_namespaceObject.debounce)(() => {
measureWindow();
}, 16);
scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.addEventListener('scroll', debounceMeasureList);
scrollContainer === null || scrollContainer === void 0 ? void 0 : (_scrollContainer$owne = scrollContainer.ownerDocument) === null || _scrollContainer$owne === void 0 ? void 0 : (_scrollContainer$owne2 = _scrollContainer$owne.defaultView) === null || _scrollContainer$owne2 === void 0 ? void 0 : _scrollContainer$owne2.addEventListener('resize', debounceMeasureList);
scrollContainer === null || scrollContainer === void 0 ? void 0 : (_scrollContainer$owne3 = scrollContainer.ownerDocument) === null || _scrollContainer$owne3 === void 0 ? void 0 : (_scrollContainer$owne4 = _scrollContainer$owne3.defaultView) === null || _scrollContainer$owne4 === void 0 ? void 0 : _scrollContainer$owne4.addEventListener('resize', debounceMeasureList);
return () => {
var _scrollContainer$owne5, _scrollContainer$owne6;
scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.removeEventListener('scroll', debounceMeasureList);
scrollContainer === null || scrollContainer === void 0 ? void 0 : (_scrollContainer$owne5 = scrollContainer.ownerDocument) === null || _scrollContainer$owne5 === void 0 ? void 0 : (_scrollContainer$owne6 = _scrollContainer$owne5.defaultView) === null || _scrollContainer$owne6 === void 0 ? void 0 : _scrollContainer$owne6.removeEventListener('resize', debounceMeasureList);
};
}, [itemHeight, elementRef, totalItems]);
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
var _scrollContainer$owne7, _scrollContainer$owne8;
if (!useWindowing) {
return;
}
const scrollContainer = (0,external_wp_dom_namespaceObject.getScrollContainer)(elementRef.current);
const handleKeyDown = (
/** @type {KeyboardEvent} */
event) => {
switch (event.keyCode) {
case external_wp_keycodes_namespaceObject.HOME:
{
return scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTo({
top: 0
});
}
case external_wp_keycodes_namespaceObject.END:
{
return scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTo({
top: totalItems * itemHeight
});
}
case external_wp_keycodes_namespaceObject.PAGEUP:
{
return scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTo({
top: scrollContainer.scrollTop - fixedListWindow.visibleItems * itemHeight
});
}
case external_wp_keycodes_namespaceObject.PAGEDOWN:
{
return scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTo({
top: scrollContainer.scrollTop + fixedListWindow.visibleItems * itemHeight
});
}
}
};
scrollContainer === null || scrollContainer === void 0 ? void 0 : (_scrollContainer$owne7 = scrollContainer.ownerDocument) === null || _scrollContainer$owne7 === void 0 ? void 0 : (_scrollContainer$owne8 = _scrollContainer$owne7.defaultView) === null || _scrollContainer$owne8 === void 0 ? void 0 : _scrollContainer$owne8.addEventListener('keydown', handleKeyDown);
return () => {
var _scrollContainer$owne9, _scrollContainer$owne10;
scrollContainer === null || scrollContainer === void 0 ? void 0 : (_scrollContainer$owne9 = scrollContainer.ownerDocument) === null || _scrollContainer$owne9 === void 0 ? void 0 : (_scrollContainer$owne10 = _scrollContainer$owne9.defaultView) === null || _scrollContainer$owne10 === void 0 ? void 0 : _scrollContainer$owne10.removeEventListener('keydown', handleKeyDown);
};
}, [totalItems, itemHeight, elementRef, fixedListWindow.visibleItems]);
return [fixedListWindow, setFixedListWindow];
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/compose/build-module/index.js
// Utils
// Compose helper (aliased flowRight from Lodash)
// Higher-order components
// Hooks
}();
(window.wp = window.wp || {}).compose = __webpack_exports__;
/******/ })()
;