@wordpress/compose 5.16.0 → 5.17.0

package/build-types/utils/throttle/index.d.ts

@@ -0,0 +1,77 @@
+/**
+ * Parts of this source were derived and modified from lodash,
+ * released under the MIT license.
+ *
+ * https://github.com/lodash/lodash
+ *
+ * Copyright JS Foundation and other contributors <https://js.foundation/>
+ *
+ * Based on Underscore.js, copyright Jeremy Ashkenas,
+ * DocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>
+ *
+ * This software consists of voluntary contributions made by many
+ * individuals. For exact contribution history, see the revision history
+ * available at https://github.com/lodash/lodash
+ *
+ * The following license applies to all parts of this software except as
+ * documented below:
+ *
+ * ====
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining
+ * a copy of this software and associated documentation files (the
+ * "Software"), to deal in the Software without restriction, including
+ * without limitation the rights to use, copy, modify, merge, publish,
+ * distribute, sublicense, and/or sell copies of the Software, and to
+ * permit persons to whom the Software is furnished to do so, subject to
+ * the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+ * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+ * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+ * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+export interface ThrottleOptions {
+    leading?: boolean;
+    trailing?: boolean;
+}
+/**
+ * A simplified and properly typed version of lodash's `throttle`, that
+ * always uses timers instead of sometimes using rAF.
+ *
+ * Creates a throttled function that only invokes `func` at most once per
+ * every `wait` milliseconds. The throttled function comes with a `cancel`
+ * method to cancel delayed `func` invocations and a `flush` method to
+ * immediately invoke them. Provide `options` to indicate whether `func`
+ * should be invoked on the leading and/or trailing edge of the `wait`
+ * timeout. The `func` is invoked with the last arguments provided to the
+ * throttled function. Subsequent calls to the throttled function return
+ * the result of the last `func` invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the throttled function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * @param {Function}                   func             The function to throttle.
+ * @param {number}                     wait             The number of milliseconds to throttle invocations to.
+ * @param {Partial< ThrottleOptions >} options          The options object.
+ * @param {boolean}                    options.leading  Specify invoking on the leading edge of the timeout.
+ * @param {boolean}                    options.trailing Specify invoking on the trailing edge of the timeout.
+ * @return Returns the new throttled function.
+ */
+export declare const throttle: <FunctionT extends (...args: unknown[]) => unknown>(func: FunctionT, wait: number, options?: ThrottleOptions | undefined) => {
+    (this: unknown, ...args: Parameters<FunctionT>): ReturnType<FunctionT>;
+    cancel: () => void;
+    flush: () => ReturnType<FunctionT>;
+    pending: () => boolean;
+};
+//# sourceMappingURL=index.d.ts.map

package/build-types/utils/throttle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/throttle/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAOH,MAAM,WAAW,eAAe;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,QAAQ,+BAAkC,OAAO,EAAE,KAAM,OAAO,yBAEtE,MAAM;;;;;CAeZ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/compose",
-	"version": "5.16.0",
+	"version": "5.17.0",
 	"description": "WordPress higher-order components (HOCs).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -30,17 +30,15 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@types/lodash": "^4.14.172",
 		"@types/mousetrap": "^1.6.8",
-		"@wordpress/deprecated": "^3.18.0",
-		"@wordpress/dom": "^3.18.0",
-		"@wordpress/element": "^4.16.0",
-		"@wordpress/is-shallow-equal": "^4.18.0",
-		"@wordpress/keycodes": "^3.18.0",
-		"@wordpress/priority-queue": "^2.18.0",
+		"@wordpress/deprecated": "^3.19.0",
+		"@wordpress/dom": "^3.19.0",
+		"@wordpress/element": "^4.17.0",
+		"@wordpress/is-shallow-equal": "^4.19.0",
+		"@wordpress/keycodes": "^3.19.0",
+		"@wordpress/priority-queue": "^2.19.0",
 		"change-case": "^4.1.2",
 		"clipboard": "^2.0.8",
-		"lodash": "^4.17.21",
 		"mousetrap": "^1.6.5",
 		"use-memo-one": "^1.1.1"
 	},
@@ -50,5 +48,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "23e136283fa1d3b8d9d8b33869f871ad5eb77726"
+	"gitHead": "8d42d2febb7d0ba8372a33e560a62f5a5f6a9112"
 }

package/src/higher-order/with-global-events/listener.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { without } from 'lodash';
-
 /**
  * Class responsible for orchestrating event handling on the global window,
  * binding a single event to be shared across all handling instances, and
@@ -27,9 +22,12 @@ class Listener {
 	}
 
 	remove( /** @type {any} */ eventType, /** @type {any} */ instance ) {
-		this.listeners[ eventType ] = without(
-			this.listeners[ eventType ],
-			instance
+		if ( ! this.listeners[ eventType ] ) {
+			return;
+		}
+
+		this.listeners[ eventType ] = this.listeners[ eventType ].filter(
+			( /** @type {any} */ listener ) => listener !== instance
 		);
 
 		if ( ! this.listeners[ eventType ].length ) {

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { without } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -64,7 +59,7 @@ const withSafeTimeout = createHigherOrderComponent(
 
 			clearTimeout( id: number ) {
 				clearTimeout( id );
-				this.timeouts = without( this.timeouts, id );
+				this.timeouts.filter( ( timeoutId ) => timeoutId !== id );
 			}
 
 			render() {

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { includes } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -89,8 +84,7 @@ export default function useDisabled( {
 
 				focus.focusable.find( node ).forEach( ( focusable ) => {
 					if (
-						includes(
-							DISABLED_ELIGIBLE_NODE_NAMES,
+						DISABLED_ELIGIBLE_NODE_NAMES.includes(
 							focusable.nodeName
 						) &&
 						// @ts-ignore

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

@@ -107,11 +107,6 @@ export default function useDropZone( {
 
 				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
@@ -202,7 +197,6 @@ export default function useDropZone( {
 
 				isDragging = false;
 
-				ownerDocument.addEventListener( 'dragenter', maybeDragStart );
 				ownerDocument.removeEventListener( 'dragend', maybeDragEnd );
 				ownerDocument.removeEventListener( 'mousemove', maybeDragEnd );
 
@@ -221,12 +215,6 @@ export default function useDropZone( {
 			ownerDocument.addEventListener( 'dragenter', maybeDragStart );
 
 			return () => {
-				onDropRef.current = null;
-				onDragStartRef.current = null;
-				onDragEnterRef.current = null;
-				onDragLeaveRef.current = null;
-				onDragEndRef.current = null;
-				onDragOverRef.current = null;
 				delete element.dataset.isDropZone;
 				element.removeEventListener( 'drop', onDrop );
 				element.removeEventListener( 'dragenter', onDragEnter );
@@ -234,7 +222,10 @@ export default function useDropZone( {
 				element.removeEventListener( 'dragleave', onDragLeave );
 				ownerDocument.removeEventListener( 'dragend', maybeDragEnd );
 				ownerDocument.removeEventListener( 'mousemove', maybeDragEnd );
-				ownerDocument.addEventListener( 'dragenter', maybeDragStart );
+				ownerDocument.removeEventListener(
+					'dragenter',
+					maybeDragStart
+				);
 			};
 		},
 		[ isDisabled ]

package/src/hooks/use-focus-outside/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { includes } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -42,8 +37,7 @@ function isFocusNormalizedButton( eventTarget ) {
 			return true;
 
 		case 'INPUT':
-			return includes(
-				INPUT_BUTTON_TYPES,
+			return INPUT_BUTTON_TYPES.includes(
 				/** @type {HTMLInputElement} */ ( eventTarget ).type
 			);
 	}
@@ -136,7 +130,7 @@ export default function useFocusOutside( onFocusOutside ) {
 	 */
 	const normalizeButtonFocus = useCallback( ( event ) => {
 		const { type, target } = event;
-		const isInteractionEnd = includes( [ 'mouseup', 'touchend' ], type );
+		const isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );
 
 		if ( isInteractionEnd ) {
 			preventBlurCheck.current = false;

package/src/hooks/use-focus-outside/index.native.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { includes } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -39,8 +34,7 @@ function isFocusNormalizedButton( eventTarget ) {
 			return true;
 
 		case 'INPUT':
-			return includes(
-				INPUT_BUTTON_TYPES,
+			return INPUT_BUTTON_TYPES.includes(
 				/** @type {HTMLInputElement} */ ( eventTarget ).type
 			);
 	}
@@ -133,7 +127,7 @@ export default function useFocusOutside( onFocusOutside ) {
 	 */
 	const normalizeButtonFocus = useCallback( ( event ) => {
 		const { type, target } = event;
-		const isInteractionEnd = includes( [ 'mouseup', 'touchend' ], type );
+		const isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );
 
 		if ( isInteractionEnd ) {
 			preventBlurCheck.current = false;

package/src/hooks/use-keyboard-shortcut/index.js

@@ -3,7 +3,6 @@
  */
 import Mousetrap from 'mousetrap';
 import 'mousetrap/plugins/global-bind/mousetrap-global-bind';
-import { castArray } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -60,7 +59,10 @@ function useKeyboardShortcut(
 				  // necessary to maintain the existing behavior.
 				  /** @type {Element} */ ( /** @type {unknown} */ ( document ) )
 		);
-		castArray( shortcuts ).forEach( ( shortcut ) => {
+		const shortcutsArray = Array.isArray( shortcuts )
+			? shortcuts
+			: [ shortcuts ];
+		shortcutsArray.forEach( ( shortcut ) => {
 			const keys = shortcut.split( '+' );
 			// Determines whether a key is a modifier by the length of the string.
 			// E.g. if I add a pass a shortcut Shift+Cmd+M, it'll determine that

package/src/hooks/use-merge-refs/index.js

@@ -71,6 +71,7 @@ function assignRef( ref, value ) {
  */
 export default function useMergeRefs( refs ) {
 	const element = useRef();
+	const isAttached = useRef( false );
 	const didElementChange = useRef( false );
 	/* eslint-disable jsdoc/no-undefined-types */
 	/** @type {import('react').MutableRefObject<TRef[]>} */
@@ -86,7 +87,10 @@ export default function useMergeRefs( refs ) {
 	// ref with the node, except when the element changes in the same cycle, in
 	// which case the ref callbacks will already have been called.
 	useLayoutEffect( () => {
-		if ( didElementChange.current === false ) {
+		if (
+			didElementChange.current === false &&
+			isAttached.current === true
+		) {
 			refs.forEach( ( ref, index ) => {
 				const previousRef = previousRefs.current[ index ];
 				if ( ref !== previousRef ) {
@@ -113,6 +117,7 @@ export default function useMergeRefs( refs ) {
 		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`.

package/src/hooks/use-merge-refs/test/index.js

@@ -41,6 +41,7 @@ describe( 'useMergeRefs', () => {
 		tagName: TagName = 'div',
 		disable1,
 		disable2,
+		unused,
 	} ) {
 		function refCallback1( value ) {
 			refCallback1.history.push( value );
@@ -63,6 +64,10 @@ describe( 'useMergeRefs', () => {
 			! disable2 && ref2,
 		] );
 
+		if ( unused ) {
+			return <TagName ref={ ref1 } />;
+		}
+
 		return <TagName ref={ mergedRefs } />;
 	}
 
@@ -327,4 +332,43 @@ describe( 'useMergeRefs', () => {
 			[ [], [ originalElement, null ] ],
 		] );
 	} );
+
+	it( 'should allow the hook being unused', () => {
+		const rootElement = document.getElementById( 'root' );
+
+		ReactDOM.render( <MergedRefs unused />, rootElement );
+
+		const originalElement = rootElement.firstElementChild;
+
+		// Render 1: ref 1 should updated, ref 2 should not.
+		expect( renderCallback.history ).toEqual( [
+			[ [ originalElement ], [] ],
+		] );
+
+		ReactDOM.render( <MergedRefs />, rootElement );
+
+		// Render 2: ref 2 should be updated as well.
+		expect( renderCallback.history ).toEqual( [
+			[ [ originalElement, null, originalElement ], [ originalElement ] ],
+			[ [], [] ],
+		] );
+
+		ReactDOM.render( <MergedRefs unused />, rootElement );
+
+		// Render 3: ref 2 should be updated with null
+		expect( renderCallback.history ).toEqual( [
+			[
+				[
+					originalElement,
+					null,
+					originalElement,
+					null,
+					originalElement,
+				],
+				[ originalElement, null ],
+			],
+			[ [], [] ],
+			[ [], [] ],
+		] );
+	} );
 } );

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { throttle } from 'lodash';
 import { useMemoOne } from 'use-memo-one';
 
 /**
@@ -10,7 +9,12 @@ import { useMemoOne } from 'use-memo-one';
 import { useEffect } from '@wordpress/element';
 
 /**
- * Throttles a function with Lodash's `throttle`. A new throttled function will
+ * Internal dependencies
+ */
+import { throttle } from '../../utils/throttle';
+
+/**
+ * Throttles a function similar to 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`.
@@ -19,14 +23,14 @@ import { useEffect } from '@wordpress/element';
  *
  * @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<TFunc>} Throttled function.
+ * @param {TFunc}                                          fn        The function to throttle.
+ * @param {number}                                         [wait]    The number of milliseconds to throttle invocations to.
+ * @param {import('../../utils/throttle').ThrottleOptions} [options] The options object. See linked documentation for details.
+ * @return {import('../../utils/debounce').DebouncedFunc<TFunc>} Throttled function.
  */
 export default function useThrottle( fn, wait, options ) {
 	const throttled = useMemoOne(
-		() => throttle( fn, wait, options ),
+		() => throttle( fn, wait ?? 0, options ),
 		[ fn, wait, options ]
 	);
 	useEffect( () => () => throttled.cancel(), [ throttled ] );

package/src/index.js

@@ -2,6 +2,8 @@
 export * from './utils/create-higher-order-component';
 // The `debounce` helper and its types.
 export * from './utils/debounce';
+// The `throttle` helper and its types.
+export * from './utils/throttle';
 
 // The `compose` and `pipe` helpers (inspired by `flowRight` and `flow` from Lodash).
 export { default as compose } from './higher-order/compose';

package/src/index.native.js

@@ -2,6 +2,8 @@
 export * from './utils/create-higher-order-component';
 // The `debounce` helper and its types.
 export * from './utils/debounce';
+// The `throttle` helper and its types.
+export * from './utils/throttle';
 
 // The `compose` and `pipe` helpers (inspired by `flowRight` and `flow` from Lodash).
 export { default as compose } from './higher-order/compose';

package/src/utils/throttle/index.ts

@@ -0,0 +1,95 @@
+/**
+ * Parts of this source were derived and modified from lodash,
+ * released under the MIT license.
+ *
+ * https://github.com/lodash/lodash
+ *
+ * Copyright JS Foundation and other contributors <https://js.foundation/>
+ *
+ * Based on Underscore.js, copyright Jeremy Ashkenas,
+ * DocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>
+ *
+ * This software consists of voluntary contributions made by many
+ * individuals. For exact contribution history, see the revision history
+ * available at https://github.com/lodash/lodash
+ *
+ * The following license applies to all parts of this software except as
+ * documented below:
+ *
+ * ====
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining
+ * a copy of this software and associated documentation files (the
+ * "Software"), to deal in the Software without restriction, including
+ * without limitation the rights to use, copy, modify, merge, publish,
+ * distribute, sublicense, and/or sell copies of the Software, and to
+ * permit persons to whom the Software is furnished to do so, subject to
+ * the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+ * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+ * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+ * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+/**
+ * Internal dependencies
+ */
+import { debounce } from '../debounce';
+
+export interface ThrottleOptions {
+	leading?: boolean;
+	trailing?: boolean;
+}
+
+/**
+ * A simplified and properly typed version of lodash's `throttle`, that
+ * always uses timers instead of sometimes using rAF.
+ *
+ * Creates a throttled function that only invokes `func` at most once per
+ * every `wait` milliseconds. The throttled function comes with a `cancel`
+ * method to cancel delayed `func` invocations and a `flush` method to
+ * immediately invoke them. Provide `options` to indicate whether `func`
+ * should be invoked on the leading and/or trailing edge of the `wait`
+ * timeout. The `func` is invoked with the last arguments provided to the
+ * throttled function. Subsequent calls to the throttled function return
+ * the result of the last `func` invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the throttled function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * @param {Function}                   func             The function to throttle.
+ * @param {number}                     wait             The number of milliseconds to throttle invocations to.
+ * @param {Partial< ThrottleOptions >} options          The options object.
+ * @param {boolean}                    options.leading  Specify invoking on the leading edge of the timeout.
+ * @param {boolean}                    options.trailing Specify invoking on the trailing edge of the timeout.
+ * @return Returns the new throttled function.
+ */
+export const throttle = < FunctionT extends ( ...args: unknown[] ) => unknown >(
+	func: FunctionT,
+	wait: number,
+	options?: ThrottleOptions
+) => {
+	let leading = true;
+	let trailing = true;
+
+	if ( options ) {
+		leading = 'leading' in options ? !! options.leading : leading;
+		trailing = 'trailing' in options ? !! options.trailing : trailing;
+	}
+	return debounce( func, wait, {
+		leading,
+		trailing,
+		maxWait: wait,
+	} );
+};