@wordpress/compose 5.0.1 → 5.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/compose",
-	"version": "5.0.1",
+	"version": "5.0.5",
 	"description": "WordPress higher-order components (HOCs).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -30,15 +30,15 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@babel/runtime": "^7.13.10",
-		"@types/lodash": "4.14.149",
+		"@types/lodash": "^4.14.172",
 		"@types/mousetrap": "^1.6.8",
-		"@wordpress/deprecated": "^3.2.1",
-		"@wordpress/dom": "^3.2.2",
-		"@wordpress/element": "^4.0.0",
+		"@wordpress/deprecated": "^3.2.2",
+		"@wordpress/dom": "^3.2.6",
+		"@wordpress/element": "^4.0.3",
 		"@wordpress/is-shallow-equal": "^4.2.0",
-		"@wordpress/keycodes": "^3.2.1",
-		"@wordpress/priority-queue": "^2.2.1",
-		"clipboard": "^2.0.1",
+		"@wordpress/keycodes": "^3.2.3",
+		"@wordpress/priority-queue": "^2.2.2",
+		"clipboard": "^2.0.8",
 		"lodash": "^4.17.21",
 		"mousetrap": "^1.6.5",
 		"react-resize-aware": "^3.1.0",
@@ -47,5 +47,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "8b67fbd424bc67f81c2d825877f0fae726d6363a"
+	"gitHead": "393c2b5533837fd637e998d23f0124c081a10df0"
 }

package/src/higher-order/if-condition/index.tsx

@@ -2,7 +2,6 @@
  * Internal dependencies
  */
 import createHigherOrderComponent from '../../utils/create-higher-order-component';
-// eslint-disable-next-line no-duplicate-imports
 import type { HigherOrderComponent } from '../../utils/create-higher-order-component';
 
 /**

package/src/higher-order/pure/index.tsx

@@ -8,7 +8,6 @@ import { Component } from '@wordpress/element';
  * Internal dependencies
  */
 import createHigherOrderComponent from '../../utils/create-higher-order-component';
-// eslint-disable-next-line no-duplicate-imports
 import type { SimpleHigherOrderComponent } from '../../utils/create-higher-order-component';
 
 /**

package/src/higher-order/with-instance-id/index.tsx

@@ -8,7 +8,6 @@ import type { ComponentType } from 'react';
  * Internal dependencies
  */
 import createHigherOrderComponent from '../../utils/create-higher-order-component';
-// eslint-disable-next-line no-duplicate-imports
 import type { PropInjectingHigherOrderComponent } from '../../utils/create-higher-order-component';
 import useInstanceId from '../../hooks/use-instance-id';
 

package/src/higher-order/with-safe-timeout/index.tsx

@@ -14,7 +14,6 @@ import { Component } from '@wordpress/element';
  * Internal dependencies
  */
 import createHigherOrderComponent from '../../utils/create-higher-order-component';
-// eslint-disable-next-line no-duplicate-imports
 import type { PropInjectingHigherOrderComponent } from '../../utils/create-higher-order-component';
 
 /**

package/src/hooks/use-constrained-tabbing/index.js

@@ -3,7 +3,11 @@
  */
 import { TAB } from '@wordpress/keycodes';
 import { focus } from '@wordpress/dom';
-import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import useRefEffect from '../use-ref-effect';
 
 /**
  * In Dialogs/modals, the tabbing must be constrained to the content of
@@ -27,46 +31,48 @@ import { useCallback } from '@wordpress/element';
  * ```
  */
 function useConstrainedTabbing() {
-	const ref = useCallback( ( /** @type {Element} */ node ) => {
-		if ( ! node ) {
-			return;
-		}
-		node.addEventListener( 'keydown', ( /** @type {Event} */ event ) => {
-			if ( ! ( event instanceof window.KeyboardEvent ) ) {
-				return;
-			}
+	return useRefEffect( ( /** @type {HTMLElement} */ node ) => {
+		/** @type {number|undefined} */
+		let timeoutId;
+
+		function onKeyDown( /** @type {KeyboardEvent} */ event ) {
+			const { keyCode, shiftKey, target } = event;
 
-			if ( event.keyCode !== TAB ) {
+			if ( keyCode !== TAB ) {
 				return;
 			}
 
-			const tabbables = focus.tabbable.find( node );
-			if ( ! tabbables.length ) {
+			const action = shiftKey ? 'findPrevious' : 'findNext';
+			const nextElement =
+				focus.tabbable[ action ](
+					/** @type {HTMLElement} */ ( target )
+				) || null;
+
+			// 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.
+			if ( node.contains( nextElement ) ) {
 				return;
 			}
-			const firstTabbable = tabbables[ 0 ];
-			const lastTabbable = tabbables[ tabbables.length - 1 ];
 
-			if ( event.shiftKey && event.target === firstTabbable ) {
-				event.preventDefault();
-				/** @type {HTMLElement} */ ( lastTabbable ).focus();
-			} else if ( ! event.shiftKey && event.target === lastTabbable ) {
-				event.preventDefault();
-				/** @type {HTMLElement} */ ( firstTabbable ).focus();
-				/*
-				 * When pressing Tab and none of the tabbables has focus, the keydown
-				 * event happens on the wrapper div: move focus on the first tabbable.
-				 */
-			} else if (
-				! tabbables.includes( /** @type {Element} */ ( event.target ) )
-			) {
-				event.preventDefault();
-				/** @type {HTMLElement} */ ( firstTabbable ).focus();
-			}
-		} );
-	}, [] );
+			const domAction = shiftKey ? 'append' : 'prepend';
+			const { ownerDocument } = node;
+			const trap = ownerDocument.createElement( 'div' );
 
-	return ref;
+			trap.tabIndex = -1;
+			node[ domAction ]( trap );
+			trap.focus();
+			// Remove after the browser moves focus to the next element.
+			timeoutId = setTimeout( () => node.removeChild( trap ) );
+		}
+
+		node.addEventListener( 'keydown', onKeyDown );
+		return () => {
+			node.removeEventListener( 'keydown', onKeyDown );
+			clearTimeout( timeoutId );
+		};
+	}, [] );
 }
 
 export default useConstrainedTabbing;

package/src/hooks/use-debounce/index.js

@@ -23,7 +23,7 @@ import { useEffect } from '@wordpress/element';
  * @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 {TFunc & import('lodash').Cancelable} Debounced function.
+ * @return {import('lodash').DebouncedFunc<TFunc>} Debounced function.
  */
 export default function useDebounce( fn, wait, options ) {
 	/* eslint-enable jsdoc/valid-types */

package/src/hooks/use-drop-zone/index.js

@@ -73,18 +73,24 @@ export default function useDropZone( {
 			/**
 			 * Checks if an element is in the drop zone.
 			 *
-			 * @param {HTMLElement|null} elementToCheck
+			 * @param {EventTarget|null} targetToCheck
 			 *
 			 * @return {boolean} True if in drop zone, false if not.
 			 */
-			function isElementInZone( elementToCheck ) {
+			function isElementInZone( targetToCheck ) {
+				const { defaultView } = ownerDocument;
 				if (
-					! elementToCheck ||
-					! element.contains( elementToCheck )
+					! 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;
@@ -155,11 +161,7 @@ export default function useDropZone( {
 				// leaving the drop zone, which means the `relatedTarget`
 				// (element that has been entered) should be outside the drop
 				// zone.
-				if (
-					isElementInZone(
-						/** @type {HTMLElement|null} */ ( event.relatedTarget )
-					)
-				) {
+				if ( isElementInZone( event.relatedTarget ) ) {
 					return;
 				}
 

package/src/hooks/use-fixed-window-list/index.js

@@ -0,0 +1,174 @@
+/**
+ * External dependencies
+ */
+import { debounce } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useLayoutEffect } from '@wordpress/element';
+import { getScrollContainer } from '@wordpress/dom';
+import { PAGEUP, PAGEDOWN, HOME, END } from '@wordpress/keycodes';
+
+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<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
+ */
+export default function useFixedWindowList(
+	elementRef,
+	itemHeight,
+	totalItems,
+	options
+) {
+	const initWindowSize = options?.initWindowSize ?? DEFAULT_INIT_WINDOW_SIZE;
+	const useWindowing = options?.useWindowing ?? true;
+
+	const [ fixedListWindow, setFixedListWindow ] = useState( {
+		visibleItems: initWindowSize,
+		start: 0,
+		end: initWindowSize,
+		itemInView: ( /** @type {number} */ index ) => {
+			return index >= 0 && index <= initWindowSize;
+		},
+	} );
+
+	useLayoutEffect( () => {
+		if ( ! useWindowing ) {
+			return;
+		}
+		const scrollContainer = getScrollContainer( elementRef.current );
+		const measureWindow = (
+			/** @type {boolean | undefined} */ initRender
+		) => {
+			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?.windowOverscan ?? 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 = debounce( () => {
+			measureWindow();
+		}, 16 );
+		scrollContainer?.addEventListener( 'scroll', debounceMeasureList );
+		scrollContainer?.ownerDocument?.defaultView?.addEventListener(
+			'resize',
+			debounceMeasureList
+		);
+		scrollContainer?.ownerDocument?.defaultView?.addEventListener(
+			'resize',
+			debounceMeasureList
+		);
+
+		return () => {
+			scrollContainer?.removeEventListener(
+				'scroll',
+				debounceMeasureList
+			);
+			scrollContainer?.ownerDocument?.defaultView?.removeEventListener(
+				'resize',
+				debounceMeasureList
+			);
+		};
+	}, [ itemHeight, elementRef, totalItems ] );
+
+	useLayoutEffect( () => {
+		if ( ! useWindowing ) {
+			return;
+		}
+		const scrollContainer = getScrollContainer( elementRef.current );
+		const handleKeyDown = ( /** @type {KeyboardEvent} */ event ) => {
+			switch ( event.keyCode ) {
+				case HOME: {
+					return scrollContainer?.scrollTo( { top: 0 } );
+				}
+				case END: {
+					return scrollContainer?.scrollTo( {
+						top: totalItems * itemHeight,
+					} );
+				}
+				case PAGEUP: {
+					return scrollContainer?.scrollTo( {
+						top:
+							scrollContainer.scrollTop -
+							fixedListWindow.visibleItems * itemHeight,
+					} );
+				}
+				case PAGEDOWN: {
+					return scrollContainer?.scrollTo( {
+						top:
+							scrollContainer.scrollTop +
+							fixedListWindow.visibleItems * itemHeight,
+					} );
+				}
+			}
+		};
+		scrollContainer?.ownerDocument?.defaultView?.addEventListener(
+			'keydown',
+			handleKeyDown
+		);
+		return () => {
+			scrollContainer?.ownerDocument?.defaultView?.removeEventListener(
+				'keydown',
+				handleKeyDown
+			);
+		};
+	}, [ totalItems, itemHeight, elementRef, fixedListWindow.visibleItems ] );
+
+	return [ fixedListWindow, setFixedListWindow ];
+}

package/src/hooks/use-focusable-iframe/README.md

@@ -0,0 +1,29 @@
+# useFocusableIframe
+
+By default, it is not possible to detect when an iframe is focused or clicked
+within. This hook uses a technique which checks whether the target of a window
+`blur` event is the iframe, inferring that this has resulted in the focus of the
+iframe. It dispatches an emulated
+[`FocusEvent`](https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent) on
+the iframe element with event bubbling, so a parent component binding its own
+`onFocus` event will account for focus transitioning within the iframe.
+
+## Usage
+
+Use with an `iframe`. You may pass `onFocus` directly as the callback to be
+invoked when the iframe receives focus, or on an ancestor component since the
+event will bubble.
+
+```jsx
+import { useFocusableIframe } from '@wordpress/compose';
+
+const MyFocusableIframe = () => {
+    return(
+        <iframe
+            ref={ useFocusableIframe() }
+            src="/my-iframe-url"
+            onFocus={ () => console.log( 'iframe is focused' ) }
+        />
+    );
+};
+```

package/src/hooks/use-focusable-iframe/index.js

@@ -0,0 +1,34 @@
+/**
+ * Internal dependencies
+ */
+import useRefEffect from '../use-ref-effect';
+
+/**
+ * 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.
+ */
+export default 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 );
+		};
+	}, [] );
+}

package/src/hooks/use-previous/index.ts

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Use something's value from the previous render.
+ * Based on https://usehooks.com/usePrevious/.
+ *
+ * @param  value The value to track.
+ *
+ * @return The value from the previous render.
+ */
+export default function usePrevious< T >( value: T ): T | undefined {
+	const ref = useRef< T >();
+
+	// Store current value in ref.
+	useEffect( () => {
+		ref.current = value;
+	}, [ value ] ); // Re-run when value changes.
+
+	// Return previous value (happens before update in useEffect above).
+	return ref.current;
+}

package/src/hooks/use-reduced-motion/index.js

@@ -3,23 +3,12 @@
  */
 import useMediaQuery from '../use-media-query';
 
-/**
- * Whether or not the user agent is Internet Explorer.
- *
- * @type {boolean}
- */
-const IS_IE =
-	typeof window !== 'undefined' &&
-	window.navigator.userAgent.indexOf( 'Trident' ) >= 0;
-
 /**
  * Hook returning whether the user has a preference for reduced motion.
  *
  * @return {boolean} Reduced motion preference value.
  */
-const useReducedMotion =
-	process.env.FORCE_REDUCED_MOTION || IS_IE
-		? () => true
-		: () => useMediaQuery( '(prefers-reduced-motion: reduce)' );
+const useReducedMotion = () =>
+	useMediaQuery( '(prefers-reduced-motion: reduce)' );
 
 export default useReducedMotion;

package/src/hooks/use-throttle/index.js

@@ -22,7 +22,7 @@ import { useEffect } from '@wordpress/element';
  * @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 {TFunc & import('lodash').Cancelable} Throttled function.
+ * @return {import('lodash').DebouncedFunc<TFunc>} Throttled function.
  */
 export default function useThrottle( fn, wait, options ) {
 	const throttled = useMemoOne( () => throttle( fn, wait, options ), [

package/src/index.js

@@ -36,3 +36,5 @@ export { default as useThrottle } from './hooks/use-throttle';
 export { default as useMergeRefs } from './hooks/use-merge-refs';
 export { default as useRefEffect } from './hooks/use-ref-effect';
 export { default as __experimentalUseDropZone } from './hooks/use-drop-zone';
+export { default as useFocusableIframe } from './hooks/use-focusable-iframe';
+export { default as __experimentalUseFixedWindowList } from './hooks/use-fixed-window-list';