@wordpress/compose 8.0.0 → 8.1.1

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

@@ -1,170 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useCallback, useEffect, useRef } from '@wordpress/element';
-
-/**
- * Input types which are classified as button types, for use in considering
- * whether element is a (focus-normalized) button.
- *
- * @type {string[]}
- */
-const INPUT_BUTTON_TYPES = [ 'button', 'submit' ];
-
-/**
- * @typedef {HTMLButtonElement | HTMLLinkElement | HTMLInputElement} FocusNormalizedButton
- */
-
-/**
- * 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} eventTarget The target from a mouse or touch event.
- *
- * @return {eventTarget is FocusNormalizedButton} Whether element is a button.
- */
-function isFocusNormalizedButton( eventTarget ) {
-	switch ( eventTarget.nodeName ) {
-		case 'A':
-		case 'BUTTON':
-			return true;
-
-		case 'INPUT':
-			return INPUT_BUTTON_TYPES.includes(
-				/** @type {HTMLInputElement} */ ( eventTarget ).type
-			);
-	}
-
-	return false;
-}
-
-/**
- * @typedef {React.SyntheticEvent} SyntheticEvent
- */
-
-/**
- * @callback EventCallback
- * @param {SyntheticEvent} event input related event.
- */
-
-/**
- * @typedef FocusOutsideReactElement
- * @property {EventCallback} handleFocusOutside callback for a focus outside event.
- */
-
-/**
- * @typedef {React.RefObject<FocusOutsideReactElement | undefined>} FocusOutsideRef
- */
-
-/**
- * @typedef {Object} FocusOutsideReturnValue
- * @property {EventCallback} onFocus      An event handler for focus events.
- * @property {EventCallback} onBlur       An event handler for blur events.
- * @property {EventCallback} onMouseDown  An event handler for mouse down events.
- * @property {EventCallback} onMouseUp    An event handler for mouse up events.
- * @property {EventCallback} onTouchStart An event handler for touch start events.
- * @property {EventCallback} onTouchEnd   An event handler for touch end events.
- */
-
-/**
- * A react hook that can be used to check whether focus has moved outside the
- * element the event handlers are bound to.
- *
- * @param {EventCallback} onFocusOutside A callback triggered when focus moves outside
- *                                       the element the event handlers are bound to.
- *
- * @return {FocusOutsideReturnValue} An object containing event handlers. Bind the event handlers
- *                                   to a wrapping element element to capture when focus moves
- *                                   outside that element.
- */
-export default function useFocusOutside( onFocusOutside ) {
-	const currentOnFocusOutside = useRef( onFocusOutside );
-	useEffect( () => {
-		currentOnFocusOutside.current = onFocusOutside;
-	}, [ onFocusOutside ] );
-
-	const preventBlurCheck = useRef( false );
-
-	/**
-	 * @type {React.RefObject<number | undefined>}
-	 */
-	const blurCheckTimeoutId = useRef();
-
-	/**
-	 * Cancel a blur check timeout.
-	 */
-	const cancelBlurCheck = useCallback( () => {
-		clearTimeout( blurCheckTimeoutId.current );
-	}, [] );
-
-	// Cancel blur checks on unmount.
-	useEffect( () => {
-		return () => cancelBlurCheck();
-	}, [] );
-
-	// Cancel a blur check if the callback or ref is no longer provided.
-	useEffect( () => {
-		if ( ! onFocusOutside ) {
-			cancelBlurCheck();
-		}
-	}, [ 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
-	 *
-	 * @param {SyntheticEvent} event Event for mousedown or mouseup.
-	 */
-	const normalizeButtonFocus = useCallback( ( event ) => {
-		const { type, target } = event;
-		const isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );
-
-		if ( isInteractionEnd ) {
-			preventBlurCheck.current = false;
-		} else if ( isFocusNormalizedButton( target ) ) {
-			preventBlurCheck.current = true;
-		}
-	}, [] );
-
-	/**
-	 * A callback triggered when a blur event occurs on the element the handler
-	 * is bound to.
-	 *
-	 * Calls the `onFocusOutside` callback in an immediate timeout if focus has
-	 * move outside the bound element and is still within the document.
-	 *
-	 * @param {SyntheticEvent} event Blur event.
-	 */
-	const queueBlurCheck = useCallback( ( event ) => {
-		// React does not allow using an event reference asynchronously
-		// due to recycling behavior, except when explicitly persisted.
-		event.persist();
-
-		// Skip blur check if clicking button. See `normalizeButtonFocus`.
-		if ( preventBlurCheck.current ) {
-			return;
-		}
-
-		blurCheckTimeoutId.current = setTimeout( () => {
-			if ( 'function' === typeof currentOnFocusOutside.current ) {
-				currentOnFocusOutside.current( event );
-			}
-		}, 0 );
-	}, [] );
-
-	return {
-		onFocus: cancelBlurCheck,
-		onMouseDown: normalizeButtonFocus,
-		onMouseUp: normalizeButtonFocus,
-		onTouchStart: normalizeButtonFocus,
-		onTouchEnd: normalizeButtonFocus,
-		onBlur: queueBlurCheck,
-	};
-}

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

@@ -1,2 +0,0 @@
-const useKeyboardShortcut = () => null;
-export default useKeyboardShortcut;

package/src/hooks/use-network-connectivity/index.native.js

@@ -1,59 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useEffect, useState } from '@wordpress/element';
-import {
-	requestConnectionStatus,
-	subscribeConnectionStatus,
-} from '@wordpress/react-native-bridge';
-
-/**
- * @typedef {Object} NetworkInformation
- *
- * @property {boolean} [isConnected] Whether the device is connected to a network.
- */
-
-/**
- * Returns the current network connectivity status provided by the native bridge.
- *
- * @example
- *
- * ```jsx
- * const { isConnected } = useNetworkConnectivity();
- * ```
- *
- * @return {NetworkInformation} Network information.
- */
-export default function useNetworkConnectivity() {
-	const [ isConnected, setIsConnected ] = useState( true );
-
-	useEffect( () => {
-		let isCurrent = true;
-
-		requestConnectionStatus( ( isBridgeConnected ) => {
-			if ( ! isCurrent ) {
-				return;
-			}
-
-			setIsConnected( isBridgeConnected );
-		} );
-
-		return () => {
-			isCurrent = false;
-		};
-	}, [] );
-
-	useEffect( () => {
-		const subscription = subscribeConnectionStatus(
-			( { isConnected: isBridgeConnected } ) => {
-				setIsConnected( isBridgeConnected );
-			}
-		);
-
-		return () => {
-			subscription.remove();
-		};
-	}, [] );
-
-	return { isConnected };
-}

package/src/hooks/use-network-connectivity/test/index.native.js

@@ -1,87 +0,0 @@
-/**
- * External dependencies
- */
-import { act, renderHook } from 'test/helpers';
-
-/**
- * WordPress dependencies
- */
-import {
-	requestConnectionStatus,
-	subscribeConnectionStatus,
-} from '@wordpress/react-native-bridge';
-
-/**
- * Internal dependencies
- */
-import useNetworkConnectivity from '../index';
-
-describe( 'useNetworkConnectivity', () => {
-	it( 'should optimisitically presume network connectivity', () => {
-		const { result } = renderHook( () => useNetworkConnectivity() );
-
-		expect( result.current.isConnected ).toBe( true );
-	} );
-
-	describe( 'when network connectivity is available', () => {
-		beforeAll( () => {
-			requestConnectionStatus.mockImplementation( ( callback ) => {
-				callback( true );
-				return { remove: jest.fn() };
-			} );
-		} );
-
-		it( 'should return true', () => {
-			const { result } = renderHook( () => useNetworkConnectivity() );
-
-			expect( result.current.isConnected ).toBe( true );
-		} );
-
-		it( 'should update the status when network connectivity changes', () => {
-			let subscriptionCallback;
-			subscribeConnectionStatus.mockImplementation( ( callback ) => {
-				subscriptionCallback = callback;
-				return { remove: jest.fn() };
-			} );
-
-			const { result } = renderHook( () => useNetworkConnectivity() );
-
-			expect( result.current.isConnected ).toBe( true );
-
-			act( () => subscriptionCallback( { isConnected: false } ) );
-
-			expect( result.current.isConnected ).toBe( false );
-		} );
-	} );
-
-	describe( 'when network connectivity is unavailable', () => {
-		beforeAll( () => {
-			requestConnectionStatus.mockImplementation( ( callback ) => {
-				callback( false );
-				return { remove: jest.fn() };
-			} );
-		} );
-
-		it( 'should return false', () => {
-			const { result } = renderHook( () => useNetworkConnectivity() );
-
-			expect( result.current.isConnected ).toBe( false );
-		} );
-
-		it( 'should update the status when network connectivity changes', () => {
-			let subscriptionCallback;
-			subscribeConnectionStatus.mockImplementation( ( callback ) => {
-				subscriptionCallback = callback;
-				return { remove: jest.fn() };
-			} );
-
-			const { result } = renderHook( () => useNetworkConnectivity() );
-
-			expect( result.current.isConnected ).toBe( false );
-
-			act( () => subscriptionCallback( { isConnected: true } ) );
-
-			expect( result.current.isConnected ).toBe( true );
-		} );
-	} );
-} );

package/src/hooks/use-preferred-color-scheme/index.android.js

@@ -1,30 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState, useEffect } from '@wordpress/element';
-import {
-	subscribePreferredColorScheme,
-	isInitialColorSchemeDark,
-} from '@wordpress/react-native-bridge';
-
-/**
- * Returns the color scheme value when it changes. Possible values: [ 'light', 'dark' ]
- *
- * @return {string} return current color scheme.
- */
-function usePreferredColorScheme() {
-	const [ currentColorScheme, setCurrentColorScheme ] = useState(
-		isInitialColorSchemeDark ? 'dark' : 'light'
-	);
-	useEffect( () => {
-		subscribePreferredColorScheme( ( { isPreferredColorSchemeDark } ) => {
-			const colorScheme = isPreferredColorSchemeDark ? 'dark' : 'light';
-			if ( colorScheme !== currentColorScheme ) {
-				setCurrentColorScheme( colorScheme );
-			}
-		} );
-	} );
-	return currentColorScheme;
-}
-
-export default usePreferredColorScheme;

package/src/hooks/use-preferred-color-scheme/index.ios.js

@@ -1,13 +0,0 @@
-/**
- * External dependencies
- */
-import { useColorScheme } from 'react-native';
-
-/**
- * Returns the color scheme value when it changes. Possible values: [ 'light', 'dark' ]
- *
- * @return {string} return current color scheme.
- */
-const usePreferredColorScheme = useColorScheme;
-
-export default usePreferredColorScheme;

package/src/hooks/use-preferred-color-scheme-style/index.native.js

@@ -1,33 +0,0 @@
-/**
- * Internal dependencies
- */
-import usePreferredColorScheme from '../use-preferred-color-scheme';
-
-/**
- * Selects which of the passed style objects should be applied depending on the
- * user's preferred color scheme.
- *
- * The "light" color schemed is assumed to be the default, and its styles are
- * always applied. The "dark" styles will always extend those defined for the
- * light case.
- *
- * @example
- * const light = { padding: 10, backgroundColor: 'white' };
- * const dark = { backgroundColor: 'black' };
- * usePreferredColorSchemeStyle( light, dark);
- * // On light mode:
- * // => { padding: 10, backgroundColor: 'white' }
- * // On dark mode:
- * // => { padding: 10, backgroundColor: 'black' }
- * @param {Object} lightStyle
- * @param {Object} darkStyle
- * @return {Object} the combined styles depending on the current color scheme
- */
-const usePreferredColorSchemeStyle = ( lightStyle, darkStyle ) => {
-	const colorScheme = usePreferredColorScheme();
-	const isDarkMode = colorScheme === 'dark';
-
-	return isDarkMode ? { ...lightStyle, ...darkStyle } : lightStyle;
-};
-
-export default usePreferredColorSchemeStyle;

package/src/hooks/use-resize-observer/index.native.js

@@ -1 +0,0 @@
-export { default } from './legacy/index.native';

package/src/hooks/use-resize-observer/legacy/index.native.js

@@ -1,59 +0,0 @@
-/**
- * External dependencies
- */
-import { View, StyleSheet } from 'react-native';
-/**
- * WordPress dependencies
- */
-import { useState, useCallback } from '@wordpress/element';
-
-/**
- * Hook which allows to listen the resize event of any target element when it changes sizes.
- *
- * @example
- *
- * ```js
- * const App = () => {
- * 	const [ resizeListener, sizes ] = useResizeObserver();
- *
- * 	return (
- * 		<View>
- * 			{ resizeListener }
- * 			Your content here
- * 		</View>
- * 	);
- * };
- * ```
- */
-const useResizeObserver = () => {
-	const [ measurements, setMeasurements ] = useState( null );
-
-	const onLayout = useCallback( ( { nativeEvent } ) => {
-		const { width, height } = nativeEvent.layout;
-		setMeasurements( ( prevState ) => {
-			if (
-				! prevState ||
-				prevState.width !== width ||
-				prevState.height !== height
-			) {
-				return {
-					width: Math.floor( width ),
-					height: Math.floor( height ),
-				};
-			}
-			return prevState;
-		} );
-	}, [] );
-
-	const observer = (
-		<View
-			testID="resize-observer"
-			style={ StyleSheet.absoluteFill }
-			onLayout={ onLayout }
-		/>
-	);
-
-	return [ observer, measurements ];
-};
-
-export default useResizeObserver;

package/src/hooks/use-resize-observer/legacy/test/index.native.js

@@ -1,46 +0,0 @@
-/**
- * External dependencies
- */
-import { render, fireEvent } from 'test/helpers';
-import { View } from 'react-native';
-
-/**
- * Internal dependencies
- */
-import useResizeObserver from '..';
-
-const TestComponent = ( { onLayout } ) => {
-	const [ resizeObserver, sizes ] = useResizeObserver();
-
-	return (
-		<View testID="test-component" sizes={ sizes } onLayout={ onLayout }>
-			{ resizeObserver }
-		</View>
-	);
-};
-
-describe( 'useResizeObserver()', () => {
-	it( 'should return "{ width: 300, height: 500 }"', () => {
-		const mockNativeEvent = {
-			nativeEvent: {
-				layout: {
-					width: 300,
-					height: 500,
-				},
-			},
-		};
-
-		const { getByTestId } = render(
-			<TestComponent onLayout={ mockNativeEvent } />
-		);
-
-		const resizeObserver = getByTestId( 'resize-observer' );
-		fireEvent( resizeObserver, 'layout', mockNativeEvent );
-
-		const testComponent = getByTestId( 'test-component' );
-		expect( testComponent.props.sizes ).toMatchObject( {
-			width: 300,
-			height: 500,
-		} );
-	} );
-} );

package/src/index.native.js

@@ -1,44 +0,0 @@
-// The `createHigherOrderComponent` helper and helper types.
-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 `ObservableMap` data structure
-export * from './utils/observable-map';
-
-// The `compose` and `pipe` helpers (inspired by `flowRight` and `flow` from Lodash).
-export { default as compose } from './higher-order/compose';
-export { default as pipe } from './higher-order/pipe';
-
-// Higher-order components.
-export { default as ifCondition } from './higher-order/if-condition';
-export { default as pure } from './higher-order/pure';
-export { default as withGlobalEvents } from './higher-order/with-global-events';
-export { default as withInstanceId } from './higher-order/with-instance-id';
-export { default as withSafeTimeout } from './higher-order/with-safe-timeout';
-export { default as withState } from './higher-order/with-state';
-export { default as withPreferredColorScheme } from './higher-order/with-preferred-color-scheme';
-export { default as withNetworkConnectivity } from './higher-order/with-network-connectivity';
-
-// Hooks.
-export { default as useConstrainedTabbing } from './hooks/use-constrained-tabbing';
-export { default as __experimentalUseDragging } from './hooks/use-dragging';
-export { default as __experimentalUseFocusOutside } from './hooks/use-focus-outside';
-export { default as useInstanceId } from './hooks/use-instance-id';
-export { default as useIsomorphicLayoutEffect } from './hooks/use-isomorphic-layout-effect';
-export { default as useKeyboardShortcut } from './hooks/use-keyboard-shortcut';
-export { default as useMediaQuery } from './hooks/use-media-query';
-export { default as usePrevious } from './hooks/use-previous';
-export { default as useReducedMotion } from './hooks/use-reduced-motion';
-export { default as useViewportMatch } from './hooks/use-viewport-match';
-export { default as usePreferredColorScheme } from './hooks/use-preferred-color-scheme';
-export { default as usePreferredColorSchemeStyle } from './hooks/use-preferred-color-scheme-style';
-export { default as useResizeObserver } from './hooks/use-resize-observer';
-export { default as useDebounce } from './hooks/use-debounce';
-export { default as useDebouncedInput } from './hooks/use-debounced-input';
-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 useNetworkConnectivity } from './hooks/use-network-connectivity';
-export { default as useObservableValue } from './hooks/use-observable-value';