@wordpress/components 35.0.0 → 35.1.1-next.v.202606191442.0

package/src/draggable/index.native.js

@@ -1,234 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	Gesture,
-	GestureDetector,
-	LongPressGestureHandler,
-} from 'react-native-gesture-handler';
-import Animated, {
-	useSharedValue,
-	runOnJS,
-	useAnimatedReaction,
-	useAnimatedGestureHandler,
-} from 'react-native-reanimated';
-
-/**
- * WordPress dependencies
- */
-import { createContext, useContext, useRef, useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
-const Context = createContext( {} );
-const { Provider } = Context;
-
-/**
- * Draggable component.
- *
- * @param {Object}            props               Component props.
- * @param {React.JSX.Element} props.children      Children to be rendered.
- * @param {Function}          [props.onDragEnd]   Callback when dragging ends.
- * @param {Function}          [props.onDragOver]  Callback when dragging happens over an element.
- * @param {Function}          [props.onDragStart] Callback when dragging starts.
- * @param {string}            [props.testID]      Id used for querying the pan gesture in tests.
- *
- * @return {React.JSX.Element} The component to be rendered.
- */
-const Draggable = ( {
-	children,
-	onDragEnd,
-	onDragOver,
-	onDragStart,
-	testID,
-} ) => {
-	const isDragging = useSharedValue( false );
-	const isPanActive = useSharedValue( false );
-	const draggingId = useSharedValue( '' );
-	const panGestureRef = useRef();
-	const currentFirstTouchId = useSharedValue( null );
-
-	const initialPosition = {
-		x: useSharedValue( 0 ),
-		y: useSharedValue( 0 ),
-	};
-	const lastPosition = {
-		x: useSharedValue( 0 ),
-		y: useSharedValue( 0 ),
-	};
-
-	useAnimatedReaction(
-		() => isDragging.value,
-		( result, previous ) => {
-			if ( result === previous ) {
-				return;
-			}
-
-			if ( result ) {
-				if ( onDragStart ) {
-					onDragStart( {
-						x: initialPosition.x.value,
-						y: initialPosition.y.value,
-						id: draggingId.value,
-					} );
-				}
-			} else if ( previous !== null && onDragEnd ) {
-				onDragEnd( {
-					x: lastPosition.x.value,
-					y: lastPosition.y.value,
-					id: draggingId.value,
-				} );
-			}
-		}
-	);
-
-	function getFirstTouchEvent( event ) {
-		'worklet';
-
-		return event.allTouches.find(
-			( touch ) => touch.id === currentFirstTouchId.value
-		);
-	}
-
-	const panGesture = Gesture.Pan()
-		.manualActivation( true )
-		.onTouchesDown( ( event ) => {
-			if ( ! currentFirstTouchId.value ) {
-				const firstEvent = event.allTouches[ 0 ];
-				const { x = 0, y = 0 } = firstEvent;
-
-				currentFirstTouchId.value = firstEvent.id;
-
-				initialPosition.x.value = x;
-				initialPosition.y.value = y;
-			}
-		} )
-		.onTouchesMove( ( event, state ) => {
-			if ( ! isPanActive.value && isDragging.value ) {
-				isPanActive.value = true;
-				state.activate();
-			}
-
-			if ( isPanActive.value && isDragging.value ) {
-				const firstEvent = getFirstTouchEvent( event );
-
-				if ( ! firstEvent ) {
-					state.end();
-					return;
-				}
-
-				lastPosition.x.value = firstEvent.x;
-				lastPosition.y.value = firstEvent.y;
-
-				if ( onDragOver ) {
-					onDragOver( firstEvent );
-				}
-			}
-		} )
-		.onTouchesCancelled( ( _event, state ) => {
-			state.end();
-		} )
-		.onEnd( () => {
-			currentFirstTouchId.value = null;
-			isPanActive.value = false;
-			isDragging.value = false;
-		} )
-		.withRef( panGestureRef )
-		.shouldCancelWhenOutside( false )
-		.withTestId( testID );
-
-	const providerValue = useMemo( () => {
-		return { panGestureRef, isDragging, isPanActive, draggingId };
-	}, [
-		// `isDragging`, `isPanActive` and `draggingId` are created using the
-		// `useSharedValue` hook provided by the `react-native-reanimated`, which in
-		// theory should guarantee that the value of these variables remains stable.
-		// ESLint can't pick this up, and that's why they have to be specified as
-		// dependencies for this hook call.
-		isDragging,
-		isPanActive,
-		draggingId,
-	] );
-
-	return (
-		<GestureDetector gesture={ panGesture }>
-			<Animated.View style={ styles.draggable__container }>
-				<Provider value={ providerValue }>{ children }</Provider>
-			</Animated.View>
-		</GestureDetector>
-	);
-};
-
-/**
- * Draggable trigger component.
- *
- * This component acts as the trigger for the dragging functionality.
- *
- * @param {Object}            props                  Component props.
- * @param {React.JSX.Element} props.children         Children to be rendered.
- * @param {*}                 props.id               Identifier passed within the event callbacks.
- * @param {boolean}           [props.enabled]        Enables the long-press gesture.
- * @param {number}            [props.maxDistance]    Maximum distance, that defines how far the finger is allowed to travel during a long press gesture.
- * @param {number}            [props.minDuration]    Minimum time, that a finger must remain pressed on the corresponding view.
- * @param {Function}          [props.onLongPress]    Callback when long-press gesture is triggered over an element.
- * @param {Function}          [props.onLongPressEnd] Callback when long-press gesture ends.
- * @param {string}            [props.testID]         Id used for querying the long-press gesture handler in tests.
- *
- * @return {React.JSX.Element} The component to be rendered.
- */
-const DraggableTrigger = ( {
-	children,
-	enabled = true,
-	id,
-	maxDistance = 1000,
-	minDuration = 500,
-	onLongPress,
-	onLongPressEnd,
-	testID,
-} ) => {
-	const { panGestureRef, isDragging, isPanActive, draggingId } =
-		useContext( Context );
-
-	const gestureHandler = useAnimatedGestureHandler( {
-		onActive: () => {
-			if ( isDragging.value ) {
-				return;
-			}
-
-			draggingId.value = id;
-			isDragging.value = true;
-			if ( onLongPress ) {
-				runOnJS( onLongPress )( id );
-			}
-		},
-		onEnd: () => {
-			if ( ! isPanActive.value ) {
-				isDragging.value = false;
-			}
-
-			if ( onLongPressEnd ) {
-				runOnJS( onLongPressEnd )( id );
-			}
-		},
-	} );
-
-	return (
-		<LongPressGestureHandler
-			enabled={ enabled }
-			minDurationMs={ minDuration }
-			maxDist={ maxDistance }
-			simultaneousHandlers={ panGestureRef }
-			shouldCancelWhenOutside={ false }
-			onGestureEvent={ gestureHandler }
-			testID={ testID }
-		>
-			{ children }
-		</LongPressGestureHandler>
-	);
-};
-
-export { DraggableTrigger };
-export default Draggable;

package/src/draggable/style.native.scss

@@ -1,3 +0,0 @@
-.draggable__container {
-	flex: 1;
-}

package/src/draggable/test/index.native.js

@@ -1,138 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from 'test/helpers';
-import {
-	fireGestureHandler,
-	getByGestureTestId,
-} from 'react-native-gesture-handler/jest-utils';
-import { State } from 'react-native-gesture-handler';
-import Animated from 'react-native-reanimated';
-
-/**
- * Internal dependencies
- */
-import Draggable, { DraggableTrigger } from '../../draggable';
-
-// Touch event type constants have been extracted from original source code, as they are not exported in the package.
-// Reference: https://github.com/software-mansion/react-native-gesture-handler/blob/90895e5f38616a6be256fceec6c6a391cd9ad7c7/src/TouchEventType.ts
-const TouchEventType = {
-	UNDETERMINED: 0,
-	TOUCHES_DOWN: 1,
-	TOUCHES_MOVE: 2,
-	TOUCHES_UP: 3,
-	TOUCHES_CANCELLED: 4,
-};
-
-// Reanimated uses "requestAnimationFrame" for notifying shared value updates when using "useAnimatedReaction" hook.
-// For testing, we mock the "requestAnimationFrame" so it calls the callback passed instantly.
-let requestAnimationFrameCopy;
-beforeEach( () => {
-	jest.useFakeTimers();
-	requestAnimationFrameCopy = global.requestAnimationFrame;
-	global.requestAnimationFrame = ( callback ) => callback();
-} );
-afterEach( () => {
-	jest.useRealTimers();
-	global.requestAnimationFrame = requestAnimationFrameCopy;
-} );
-
-describe( 'Draggable', () => {
-	it( 'triggers onLongPress handler', () => {
-		const triggerId = 'trigger-id';
-		const onLongPress = jest.fn();
-		const { getByTestId } = render(
-			<Draggable>
-				<DraggableTrigger
-					id={ triggerId }
-					enabled
-					minDuration={ 500 }
-					onLongPress={ onLongPress }
-					testID="draggableTrigger"
-				>
-					<Animated.View />
-				</DraggableTrigger>
-			</Draggable>
-		);
-
-		const draggableTrigger = getByTestId( 'draggableTrigger' );
-		fireGestureHandler( draggableTrigger, [
-			{ oldState: State.BEGAN, state: State.ACTIVE },
-			{ state: State.ACTIVE },
-		] );
-		jest.runOnlyPendingTimers();
-
-		expect( onLongPress ).toHaveBeenCalledTimes( 1 );
-		expect( onLongPress ).toHaveBeenCalledWith( triggerId );
-	} );
-
-	it( 'triggers dragging handlers', () => {
-		const triggerId = 'trigger-id';
-		const onDragStart = jest.fn();
-		const onDragOver = jest.fn();
-		const onDragEnd = jest.fn();
-		const { getByTestId } = render(
-			<Draggable
-				onDragStart={ onDragStart }
-				onDragOver={ onDragOver }
-				onDragEnd={ onDragEnd }
-				testID="draggable"
-			>
-				<DraggableTrigger id={ triggerId } testID="draggableTrigger">
-					<Animated.View />
-				</DraggableTrigger>
-			</Draggable>
-		);
-
-		const draggableTrigger = getByTestId( 'draggableTrigger' );
-		const draggable = getByGestureTestId( 'draggable' );
-		const touchEventId = 1;
-		const touchEvents = [
-			{ id: touchEventId, x: 0, y: 0 },
-			{ id: touchEventId, x: 100, y: 100 },
-			{ id: touchEventId, x: 50, y: 50 },
-		];
-		fireGestureHandler( draggableTrigger, [
-			{ oldState: State.BEGAN, state: State.ACTIVE },
-			{ state: State.ACTIVE },
-		] );
-		jest.runOnlyPendingTimers();
-		fireGestureHandler( draggable, [
-			// TOUCHES_DOWN event is only received on ACTIVE state, so we have to fire it manually.
-			{ oldState: State.BEGAN, state: State.ACTIVE },
-			{
-				allTouches: [ touchEvents[ 0 ] ],
-				eventType: TouchEventType.TOUCHES_DOWN,
-			},
-			{
-				allTouches: [ touchEvents[ 1 ] ],
-				eventType: TouchEventType.TOUCHES_MOVE,
-			},
-			{
-				allTouches: [ touchEvents[ 2 ] ],
-				eventType: TouchEventType.TOUCHES_MOVE,
-			},
-			{ state: State.END },
-		] );
-		// TODO(jest-console): Fix the warning and remove the expect below.
-		expect( console ).toHaveWarnedWith(
-			'[Reanimated] setGestureState() cannot be used with Jest.'
-		);
-
-		expect( onDragStart ).toHaveBeenCalledTimes( 1 );
-		expect( onDragStart ).toHaveBeenCalledWith( {
-			id: triggerId,
-			x: touchEvents[ 0 ].x,
-			y: touchEvents[ 0 ].y,
-		} );
-		expect( onDragOver ).toHaveBeenCalledTimes( 2 );
-		expect( onDragOver ).toHaveBeenNthCalledWith( 1, touchEvents[ 1 ] );
-		expect( onDragOver ).toHaveBeenNthCalledWith( 2, touchEvents[ 2 ] );
-		expect( onDragEnd ).toHaveBeenCalledTimes( 1 );
-		expect( onDragEnd ).toHaveBeenCalledWith( {
-			id: triggerId,
-			x: touchEvents[ 2 ].x,
-			y: touchEvents[ 2 ].y,
-		} );
-	} );
-} );

package/src/dropdown/index.native.js

@@ -1,59 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-
-class Dropdown extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.toggle = this.toggle.bind( this );
-		this.close = this.close.bind( this );
-
-		this.state = {
-			isOpen: false,
-		};
-	}
-
-	componentWillUnmount() {
-		const { isOpen } = this.state;
-		const { onToggle } = this.props;
-		if ( isOpen && onToggle ) {
-			onToggle( false );
-		}
-	}
-
-	componentDidUpdate( prevProps, prevState ) {
-		const { isOpen } = this.state;
-		const { onToggle } = this.props;
-		if ( prevState.isOpen !== isOpen && onToggle ) {
-			onToggle( isOpen );
-		}
-	}
-
-	toggle() {
-		this.setState( ( state ) => ( {
-			isOpen: ! state.isOpen,
-		} ) );
-	}
-
-	close() {
-		this.setState( { isOpen: false } );
-	}
-
-	render() {
-		const { isOpen } = this.state;
-		const { renderContent, renderToggle } = this.props;
-
-		const args = { isOpen, onToggle: this.toggle, onClose: this.close };
-
-		return (
-			<>
-				{ renderToggle( args ) }
-				{ isOpen && renderContent( args ) }
-			</>
-		);
-	}
-}
-
-export default Dropdown;

package/src/dropdown-menu/index.native.js

@@ -1,152 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-import { Platform } from 'react-native';
-/**
- * WordPress dependencies
- */
-import { withPreferredColorScheme } from '@wordpress/compose';
-import { menu } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import Button from '../button';
-import Dropdown from '../dropdown';
-import BottomSheet from '../mobile/bottom-sheet';
-import PanelBody from '../panel/body';
-
-function mergeProps( defaultProps = {}, props = {} ) {
-	const mergedProps = {
-		...defaultProps,
-		...props,
-	};
-
-	if ( props.className && defaultProps.className ) {
-		mergedProps.className = clsx( props.className, defaultProps.className );
-	}
-
-	return mergedProps;
-}
-
-/**
- * Whether the argument is a function.
- *
- * @param {*} maybeFunc The argument to check.
- * @return {boolean} True if the argument is a function, false otherwise.
- */
-function isFunction( maybeFunc ) {
-	return typeof maybeFunc === 'function';
-}
-
-function DropdownMenu( {
-	children,
-	className,
-	controls,
-	icon = menu,
-	label,
-	popoverProps,
-	toggleProps,
-} ) {
-	if ( ! controls?.length && ! isFunction( children ) ) {
-		return null;
-	}
-
-	// Normalize controls to nested array of objects (sets of controls)
-	let controlSets;
-	if ( controls?.length ) {
-		controlSets = controls;
-		if ( ! Array.isArray( controlSets[ 0 ] ) ) {
-			controlSets = [ controlSets ];
-		}
-	}
-	const mergedPopoverProps = mergeProps(
-		{
-			className: 'components-dropdown-menu__popover',
-		},
-		popoverProps
-	);
-
-	return (
-		<Dropdown
-			className={ clsx( 'components-dropdown-menu', className ) }
-			popoverProps={ mergedPopoverProps }
-			renderToggle={ ( { isOpen, onToggle } ) => {
-				const mergedToggleProps = mergeProps(
-					{
-						className: clsx( 'components-dropdown-menu__toggle', {
-							'is-opened': isOpen,
-						} ),
-					},
-					toggleProps
-				);
-
-				return (
-					<Button
-						{ ...mergedToggleProps }
-						icon={ icon }
-						onClick={ ( event ) => {
-							onToggle( event );
-							if ( mergedToggleProps.onClick ) {
-								mergedToggleProps.onClick( event );
-							}
-						} }
-						aria-haspopup="true"
-						aria-expanded={ isOpen }
-						label={ label }
-					>
-						{ mergedToggleProps.children }
-					</Button>
-				);
-			} }
-			renderContent={ ( { isOpen, onClose, ...props } ) => {
-				return (
-					<BottomSheet
-						hideHeader
-						isVisible={ isOpen }
-						onClose={ onClose }
-					>
-						{ isFunction( children ) ? children( props ) : null }
-						<PanelBody
-							title={ label }
-							style={ { paddingLeft: 0, paddingRight: 0 } }
-						>
-							{ controlSets?.flatMap(
-								( controlSet, indexOfSet ) =>
-									controlSet.map(
-										( control, indexOfControl ) => (
-											<BottomSheet.Cell
-												key={ [
-													indexOfSet,
-													indexOfControl,
-												].join() }
-												label={ control.title }
-												onPress={ () => {
-													onClose();
-													if ( control.onClick ) {
-														control.onClick();
-													}
-												} }
-												editable={ false }
-												icon={ control.icon }
-												leftAlign
-												isSelected={ control.isActive }
-												separatorType={
-													Platform.OS === 'android'
-														? 'none'
-														: 'leftMargin'
-												}
-											/>
-										)
-									)
-							) }
-						</PanelBody>
-					</BottomSheet>
-				);
-			} }
-		/>
-	);
-}
-
-export default withPreferredColorScheme( DropdownMenu );

package/src/external-link/index.native.js

@@ -1,25 +0,0 @@
-/**
- * External dependencies
- */
-
-import { TouchableOpacity, Text, Linking } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { external, Icon } from '@wordpress/icons';
-
-export function ExternalLink( { href, children } ) {
-	return (
-		<TouchableOpacity
-			onPress={ () => Linking.openURL( href ) }
-			accessibilityLabel={ __( 'Open link in a browser' ) }
-		>
-			<Text>{ children }</Text>
-			<Icon icon={ external } />
-		</TouchableOpacity>
-	);
-}
-
-export default ExternalLink;

package/src/focal-point-picker/focal-point.native.js

@@ -1,30 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Path, SVG } from '@wordpress/primitives';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
-export default function FocalPoint( { height, style, width } ) {
-	return (
-		<SVG
-			height={ height }
-			style={ style }
-			viewBox="0 0 30 30"
-			width={ width }
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<Path
-				style={ styles.focalPointIconPathOutline }
-				d="M15 1C7.3 1 1 7.3 1 15s6.3 14 14 14 14-6.3 14-14S22.7 1 15 1zm0 22c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8z"
-			/>
-			<Path
-				style={ styles.focalPointIconPathFill }
-				d="M15 3C8.4 3 3 8.4 3 15s5.4 12 12 12 12-5.4 12-12S21.6 3 15 3zm0 22C9.5 25 5 20.5 5 15S9.5 5 15 5s10 4.5 10 10-4.5 10-10 10z"
-			/>
-		</SVG>
-	);
-}