@wordpress/compose 8.1.0 → 8.1.2-next.v.202606191442.0

package/src/higher-order/with-network-connectivity/index.native.js

@@ -1,19 +0,0 @@
-/**
- * Internal dependencies
- */
-import { createHigherOrderComponent } from '../../utils/create-higher-order-component';
-import useNetworkConnectivity from '../../hooks/use-network-connectivity';
-
-const withNetworkConnectivity = createHigherOrderComponent(
-	( WrappedComponent ) => {
-		return ( props ) => {
-			const { isConnected } = useNetworkConnectivity();
-			return (
-				<WrappedComponent { ...props } isConnected={ isConnected } />
-			);
-		};
-	},
-	'withNetworkConnectivity'
-);
-
-export default withNetworkConnectivity;

package/src/higher-order/with-preferred-color-scheme/index.native.js

@@ -1,40 +0,0 @@
-/**
- * Internal dependencies
- */
-import { createHigherOrderComponent } from '../../utils/create-higher-order-component';
-import usePreferredColorScheme from '../../hooks/use-preferred-color-scheme';
-
-/**
- * WordPress dependencies
- */
-import { useCallback } from '@wordpress/element';
-
-const withPreferredColorScheme = createHigherOrderComponent(
-	( WrappedComponent ) => ( props ) => {
-		const colorScheme = usePreferredColorScheme();
-		const isDarkMode = colorScheme === 'dark';
-
-		const getStyles = useCallback(
-			( lightStyles, darkStyles ) => {
-				const finalDarkStyles = {
-					...lightStyles,
-					...darkStyles,
-				};
-
-				return isDarkMode ? finalDarkStyles : lightStyles;
-			},
-			[ isDarkMode ]
-		);
-
-		return (
-			<WrappedComponent
-				preferredColorScheme={ colorScheme }
-				getStylesFromColorScheme={ getStyles }
-				{ ...props }
-			/>
-		);
-	},
-	'withPreferredColorScheme'
-);
-
-export default withPreferredColorScheme;

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

@@ -1,14 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRef } from '@wordpress/element';
-
-function useConstrainedTabbing() {
-	const ref = useRef();
-
-	// Do nothing on mobile as tabbing is not a mobile behavior.
-
-	return ref;
-}
-
-export default useConstrainedTabbing;

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

@@ -1,74 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import useIsomorphicLayoutEffect from '../use-isomorphic-layout-effect';
-
-// Event handlers that are triggered from `document` listeners accept a MouseEvent,
-// while those triggered from React listeners accept a React.MouseEvent.
-/**
- * @param {Object}                        props
- * @param {(e: React.MouseEvent) => void} props.onDragStart
- * @param {(e: MouseEvent) => void}       props.onDragMove
- * @param {(e?: MouseEvent) => void}      props.onDragEnd
- */
-export default function useDragging( { onDragStart, onDragMove, onDragEnd } ) {
-	const [ isDragging, setIsDragging ] = useState( false );
-
-	const eventsRef = useRef( {
-		onDragStart,
-		onDragMove,
-		onDragEnd,
-	} );
-	useIsomorphicLayoutEffect( () => {
-		eventsRef.current.onDragStart = onDragStart;
-		eventsRef.current.onDragMove = onDragMove;
-		eventsRef.current.onDragEnd = onDragEnd;
-	}, [ onDragStart, onDragMove, onDragEnd ] );
-
-	/** @type {(e: MouseEvent) => void} */
-	const onMouseMove = useCallback(
-		( event ) =>
-			eventsRef.current.onDragMove &&
-			eventsRef.current.onDragMove( event ),
-		[]
-	);
-	/** @type {(e?: MouseEvent) => void} */
-	const endDrag = useCallback( ( event ) => {
-		if ( eventsRef.current.onDragEnd ) {
-			eventsRef.current.onDragEnd( event );
-		}
-		document.removeEventListener( 'mousemove', onMouseMove );
-		document.removeEventListener( 'mouseup', endDrag );
-		setIsDragging( false );
-	}, [] );
-	/** @type {(e: React.MouseEvent) => void} */
-	const startDrag = useCallback( ( event ) => {
-		if ( eventsRef.current.onDragStart ) {
-			eventsRef.current.onDragStart( event );
-		}
-		document.addEventListener( 'mousemove', onMouseMove );
-		document.addEventListener( 'mouseup', endDrag );
-		setIsDragging( true );
-	}, [] );
-
-	// Remove the global events when unmounting if needed.
-	useEffect( () => {
-		return () => {
-			if ( isDragging ) {
-				document.removeEventListener( 'mousemove', onMouseMove );
-				document.removeEventListener( 'mouseup', endDrag );
-			}
-		};
-	}, [ isDragging ] );
-
-	return {
-		startDrag,
-		endDrag,
-		isDragging,
-	};
-}

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.MutableRefObject<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.MutableRefObject<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,
-		} );
-	} );
-} );