@wordpress/components 35.0.0 → 35.0.1

package/src/tooltip/index.native.js

@@ -1,292 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	Animated,
-	Easing,
-	Keyboard,
-	Platform,
-	StyleSheet,
-	Text,
-	View,
-} from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import {
-	cloneElement,
-	createContext,
-	useContext,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from '@wordpress/element';
-import { usePrevious } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { createSlotFill } from '../slot-fill';
-import styles from './style.scss';
-
-const RIGHT_ALIGN_ARROW_OFFSET = 16;
-const TOOLTIP_VERTICAL_OFFSET = 2;
-
-const TooltipContext = createContext( {
-	onHandleScreenTouch: () => {},
-} );
-const { Fill, Slot } = createSlotFill( 'Tooltip' );
-
-const useKeyboardVisibility = () => {
-	const [ keyboardVisible, setKeyboardVisible ] = useState( false );
-	const previousKeyboardVisible = usePrevious( keyboardVisible );
-
-	useEffect( () => {
-		const showListener = Keyboard.addListener( 'keyboardDidShow', () => {
-			if ( previousKeyboardVisible !== true ) {
-				setKeyboardVisible( true );
-			}
-		} );
-		const keyboardHideEvent = Platform.select( {
-			android: 'keyboardDidHide',
-			ios: 'keyboardWillHide',
-		} );
-		const hideListener = Keyboard.addListener( keyboardHideEvent, () => {
-			if ( previousKeyboardVisible !== false ) {
-				setKeyboardVisible( false );
-			}
-		} );
-		return () => {
-			showListener.remove();
-			hideListener.remove();
-		};
-		// See https://github.com/WordPress/gutenberg/pull/41166
-	}, [] );
-
-	return keyboardVisible;
-};
-
-const Tooltip = ( {
-	children,
-	position = 'top',
-	text,
-	visible: initialVisible = false,
-} ) => {
-	const referenceElementRef = useRef( null );
-	const animationValue = useRef( new Animated.Value( 0 ) ).current;
-	const [ , horizontalPosition = 'center' ] = position.split( ' ' );
-	const [ visible, setVisible ] = useState( initialVisible );
-	const [ animating, setAnimating ] = useState( false );
-	const hidden = ! visible && ! animating;
-	const previousVisible = usePrevious( visible );
-	const [ referenceLayout, setReferenceLayout ] = useState( {
-		height: 0,
-		width: 0,
-		x: 0,
-		y: 0,
-	} );
-	const [ tooltipLayout, setTooltipLayout ] = useState( {
-		height: 0,
-		width: 0,
-	} );
-	const { onHandleScreenTouch } = useContext( TooltipContext );
-	const keyboardVisible = useKeyboardVisibility();
-
-	// Register callback to dismiss the tooltip whenever the screen is touched.
-	useEffect( () => {
-		if ( visible ) {
-			onHandleScreenTouch( () => {
-				setAnimating( true );
-				setVisible( false );
-			} );
-		}
-		return () => onHandleScreenTouch( null );
-		// See https://github.com/WordPress/gutenberg/pull/41166
-	}, [ visible ] );
-
-	// Manage visibility animation.
-	useEffect( () => {
-		if (
-			// Initial render and visibility enabled, animate show.
-			( typeof previousVisible === 'undefined' && visible ) ||
-			// Previously visible, animate hide
-			( previousVisible && previousVisible !== visible )
-		) {
-			setAnimating( true );
-			startAnimation();
-		}
-		// See https://github.com/WordPress/gutenberg/pull/41166
-	}, [ visible ] );
-
-	// Manage tooltip visibility and position in relation to keyboard.
-	useEffect( () => {
-		if ( ! visible ) {
-			return;
-		}
-
-		// Update tooltip position if keyboard is visible.
-		if ( keyboardVisible ) {
-			getReferenceElementPosition();
-		}
-
-		// Hide tooltip if keyboard hides
-		if ( typeof previousVisible !== 'undefined' && ! keyboardVisible ) {
-			setAnimating( true );
-			setVisible( false );
-		}
-		// See https://github.com/WordPress/gutenberg/pull/41166
-	}, [ visible, keyboardVisible ] );
-
-	// Manage tooltip position during keyboard frame changes.
-	useEffect( () => {
-		const frameListener = Keyboard.addListener(
-			'keyboardWillChangeFrame',
-			() => {
-				if ( visible ) {
-					getReferenceElementPosition();
-				}
-			}
-		);
-
-		return () => {
-			frameListener.remove();
-		};
-	}, [ visible ] );
-
-	const startAnimation = () => {
-		Animated.timing( animationValue, {
-			toValue: visible ? 1 : 0,
-			duration: visible ? 300 : 150,
-			useNativeDriver: true,
-			delay: visible ? 500 : 0,
-			easing: Easing.out( Easing.quad ),
-		} ).start( () => {
-			setAnimating( false );
-		} );
-	};
-
-	const tooltipStyles = [
-		styles.tooltip,
-		{
-			left:
-				referenceLayout.x +
-				Math.floor( referenceLayout.width / 2 ) -
-				( horizontalPosition === 'right'
-					? RIGHT_ALIGN_ARROW_OFFSET
-					: Math.floor( tooltipLayout.width / 2 ) ),
-			top:
-				referenceLayout.y -
-				tooltipLayout.height -
-				TOOLTIP_VERTICAL_OFFSET,
-		},
-	];
-	const tooltipBoxStyles = [
-		styles.tooltip__box,
-		horizontalPosition === 'right' && styles[ 'tooltip--rightAlign' ],
-		{
-			elevation: 2,
-			opacity: animationValue,
-			shadowColor: styles.tooltip__shadow?.color,
-			shadowOffset: { height: 2, width: 0 },
-			shadowOpacity: 0.25,
-			shadowRadius: 2,
-			transform: [
-				{
-					translateY: animationValue.interpolate( {
-						inputRange: [ 0, 1 ],
-						outputRange: [ visible ? 4 : -8, -8 ],
-					} ),
-				},
-			],
-		},
-	];
-	const arrowStyles = [
-		styles.tooltip__arrow,
-		horizontalPosition === 'right' &&
-			styles[ 'tooltip__arrow--rightAlign' ],
-	];
-
-	const getReferenceElementPosition = () => {
-		// rAF allows render to complete before calculating layout
-		// eslint-disable-next-line no-undef
-		requestAnimationFrame( () => {
-			if ( ! referenceElementRef.current ) {
-				return;
-			}
-			referenceElementRef.current.measure(
-				( _x, _y, width, height, pageX, pageY ) => {
-					setReferenceLayout( {
-						height,
-						width,
-						x: pageX,
-						y: pageY,
-					} );
-				}
-			);
-		} );
-	};
-	const getTooltipLayout = ( { nativeEvent } ) => {
-		const { height, width } = nativeEvent.layout;
-		setTooltipLayout( { height, width } );
-	};
-
-	if ( hidden ) {
-		return children;
-	}
-
-	return (
-		<>
-			{ cloneElement( children, {
-				ref: referenceElementRef,
-				onLayout: getReferenceElementPosition,
-			} ) }
-			<Fill>
-				<View onLayout={ getTooltipLayout } style={ tooltipStyles }>
-					<Animated.View style={ tooltipBoxStyles }>
-						<Text style={ styles.tooltip__text }>{ text }</Text>
-						<View style={ arrowStyles } />
-					</Animated.View>
-				</View>
-			</Fill>
-		</>
-	);
-};
-
-const TooltipSlot = ( { children, ...rest } ) => {
-	const [ handleScreenTouch, setHandleScreenTouch ] = useState( null );
-	const onHandleScreenTouch = ( callback ) => {
-		// Must use function to set state below as `callback` is a function itself.
-		setHandleScreenTouch( () => callback );
-	};
-	const handleTouchStart = () => {
-		handleScreenTouch();
-		setHandleScreenTouch( null );
-	};
-	// Memoize context value to avoid unnecessary rerenders of the Provider's children
-	// See https://github.com/WordPress/gutenberg/pull/41166
-	const value = useMemo( () => ( { onHandleScreenTouch } ) );
-
-	return (
-		<TooltipContext.Provider value={ value }>
-			<View
-				onTouchStart={
-					typeof handleScreenTouch === 'function'
-						? handleTouchStart
-						: undefined
-				}
-				pointerEvents="box-none"
-				style={ StyleSheet.absoluteFill }
-				testID="tooltip-overlay"
-			>
-				{ children }
-				<Slot { ...rest } />
-			</View>
-		</TooltipContext.Provider>
-	);
-};
-
-Tooltip.Slot = TooltipSlot;
-
-export default Tooltip;

package/src/tooltip/style.native.scss

@@ -1,39 +0,0 @@
-$tooltipColor: #2c2c2d;
-$tooltipArrowSize: 8px;
-$tooltipArrowOffset: -($tooltipArrowSize - 1);
-
-.tooltip {
-	position: absolute;
-}
-
-.tooltip__box {
-	background-color: $tooltipColor;
-	border-radius: 4px;
-}
-
-.tooltip__shadow {
-	color: $black;
-}
-
-.tooltip__text {
-	color: $white;
-	font-size: 14px;
-	padding: 16px 14px;
-}
-
-.tooltip__arrow {
-	border-color: $tooltipColor transparent transparent transparent;
-	border-style: solid;
-	border-width: $tooltipArrowSize $tooltipArrowSize 0 $tooltipArrowSize;
-	bottom: $tooltipArrowOffset;
-	height: 0;
-	left: 50%;
-	margin-left: -$tooltipArrowSize;
-	position: absolute;
-	top: 100%;
-	width: 0;
-}
-
-.tooltip__arrow--rightAlign {
-	left: 16px;
-}

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

@@ -1,98 +0,0 @@
-/**
- * External dependencies
- */
-import { fireEvent, render, act } from 'test/helpers';
-import { Keyboard, Text } from 'react-native';
-
-/**
- * Internal dependencies
- */
-import Tooltip from '../index';
-import { Provider as SlotFillProvider } from '../../slot-fill';
-
-// Minimal tree to render tooltip.
-const TooltipSlot = ( { children } ) => (
-	<SlotFillProvider>
-		<Tooltip.Slot>{ children }</Tooltip.Slot>
-	</SlotFillProvider>
-);
-
-let keyboardAddListenerSpy;
-const keyboardHandlers = [];
-
-beforeAll( () => {
-	keyboardAddListenerSpy = jest
-		.spyOn( Keyboard, 'addListener' )
-		.mockImplementation( ( event, handler ) => {
-			const length = keyboardHandlers.push( [ event, handler ] );
-			return {
-				remove: () => {
-					keyboardHandlers.splice( length - 1 );
-				},
-			};
-		} );
-} );
-
-afterAll( () => {
-	keyboardAddListenerSpy.mockRestore();
-} );
-
-it( 'displays the message', () => {
-	const screen = render(
-		<TooltipSlot>
-			<Tooltip visible text="A helpful message">
-				<Text>I need help</Text>
-			</Tooltip>
-		</TooltipSlot>
-	);
-
-	expect( screen.getByText( 'A helpful message' ) ).toBeTruthy();
-} );
-
-it( 'dismisses when the screen is tapped', () => {
-	const screen = render(
-		<TooltipSlot>
-			<Tooltip visible text="A helpful message">
-				<Text>I need help</Text>
-			</Tooltip>
-		</TooltipSlot>
-	);
-
-	expect( screen.getByText( 'A helpful message' ) ).toBeTruthy();
-
-	fireEvent( screen.getByTestId( 'tooltip-overlay' ), 'touchStart' );
-
-	expect( screen.queryByText( 'A helpful message' ) ).toBeNull();
-} );
-
-it( 'dismisses when the keyboard closes', () => {
-	const screen = render(
-		<TooltipSlot>
-			<Tooltip visible text="A helpful message">
-				<Text>I need help</Text>
-			</Tooltip>
-		</TooltipSlot>
-	);
-
-	// Show keyboard.
-	act( () => {
-		keyboardHandlers.forEach( ( [ event, handler ] ) => {
-			if ( event === 'keyboardDidShow' ) {
-				handler();
-			}
-		} );
-	} );
-
-	expect( screen.getByText( 'A helpful message' ) ).toBeTruthy();
-
-	// Hide keyboard
-	act( () => {
-		keyboardHandlers.forEach( ( [ event, handler ] ) => {
-			if ( event === 'keyboardDidHide' ) {
-				handler();
-			}
-		} );
-	} );
-
-	expect( screen.queryByText( 'A helpful message' ) ).toBeNull();
-} );

package/src/unit-control/index.native.js

@@ -1,202 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	Text,
-	View,
-	TouchableWithoutFeedback,
-	Platform,
-	findNodeHandle,
-} from 'react-native';
-
-/**
- * Internal dependencies
- */
-import RangeCell from '../mobile/bottom-sheet/range-cell';
-import StepperCell from '../mobile/bottom-sheet/stepper-cell';
-import Picker from '../mobile/picker';
-import styles from './style.scss';
-import { CSS_UNITS, hasUnits, getAccessibleLabelForUnit } from './utils';
-
-/**
- * WordPress dependencies
- */
-import { useRef, useCallback, useMemo, memo } from '@wordpress/element';
-import { withPreferredColorScheme } from '@wordpress/compose';
-import { __, sprintf } from '@wordpress/i18n';
-
-function UnitControl( {
-	currentInput,
-	label,
-	value,
-	onChange,
-	onUnitChange,
-	initialPosition,
-	min,
-	max,
-	separatorType,
-	units = CSS_UNITS,
-	unit,
-	getStylesFromColorScheme,
-	...props
-} ) {
-	const pickerRef = useRef();
-	const anchorNodeRef = useRef();
-
-	const onPickerPresent = useCallback( () => {
-		if ( pickerRef?.current ) {
-			pickerRef.current.presentPicker();
-		}
-		// It would be great if the deps could be addressed in the context of
-		// https://github.com/WordPress/gutenberg/pull/39218
-	}, [ pickerRef?.current ] );
-
-	const currentInputValue = currentInput === null ? value : currentInput;
-	const initialControlValue = isFinite( currentInputValue )
-		? currentInputValue
-		: initialPosition;
-
-	const unitButtonTextStyle = getStylesFromColorScheme(
-		styles.unitButtonText,
-		styles.unitButtonTextDark
-	);
-
-	/* translators: accessibility text. Inform about current unit value. %s: Current unit value. */
-	const accessibilityLabel = sprintf( __( 'Current unit is %s' ), unit );
-
-	const accessibilityHint =
-		Platform.OS === 'ios'
-			? __( 'Double tap to open Action Sheet with available options' )
-			: __( 'Double tap to open Bottom Sheet with available options' );
-
-	const renderUnitButton = useMemo( () => {
-		const unitButton = (
-			<View style={ styles.unitButton }>
-				<Text style={ unitButtonTextStyle }>{ unit }</Text>
-			</View>
-		);
-
-		if ( hasUnits( units ) && units?.length > 1 ) {
-			return (
-				<TouchableWithoutFeedback
-					onPress={ onPickerPresent }
-					accessibilityLabel={ accessibilityLabel }
-					accessibilityRole="button"
-					accessibilityHint={ accessibilityHint }
-				>
-					{ unitButton }
-				</TouchableWithoutFeedback>
-			);
-		}
-
-		return unitButton;
-	}, [
-		onPickerPresent,
-		accessibilityLabel,
-		accessibilityHint,
-		unitButtonTextStyle,
-		unit,
-		units,
-	] );
-
-	const getAnchor = useCallback(
-		() =>
-			anchorNodeRef?.current
-				? findNodeHandle( anchorNodeRef?.current )
-				: undefined,
-		// It would be great if the deps could be addressed in the context of
-		// https://github.com/WordPress/gutenberg/pull/39218
-		[ anchorNodeRef?.current ]
-	);
-
-	const getDecimal = ( step ) => {
-		// Return the decimal offset based on the step size.
-		// if step size is 0.1 we expect the offset to be 1.
-		// for example 12 + 0.1 we would expect the see 12.1 (not 12.10 or 12 );
-		// steps are defined in the CSS_UNITS and they vary from unit to unit.
-		const stepToString = step;
-		const splitStep = stepToString.toString().split( '.' );
-		return splitStep[ 1 ] ? splitStep[ 1 ].length : 0;
-	};
-
-	const renderUnitPicker = useCallback( () => {
-		// Keeping for legacy reasons, although `false` should not be a valid
-		// value for the `units` prop anymore.
-		if ( units === false ) {
-			return null;
-		}
-		return (
-			<View style={ styles.unitMenu } ref={ anchorNodeRef }>
-				{ renderUnitButton }
-				{ hasUnits( units ) && units?.length > 1 ? (
-					<Picker
-						ref={ pickerRef }
-						options={ units }
-						onChange={ onUnitChange }
-						hideCancelButton
-						leftAlign
-						getAnchor={ getAnchor }
-					/>
-				) : null }
-			</View>
-		);
-	}, [ pickerRef, units, onUnitChange, getAnchor, renderUnitButton ] );
-
-	let step = props.step;
-
-	/*
-	 * If no step prop has been passed, lookup the active unit and
-	 * try to get step from `units`, or default to a value of `1`
-	 */
-	if ( ! step && units ) {
-		const activeUnit = units.find( ( option ) => option.value === unit );
-		step = activeUnit?.step ?? 1;
-	}
-
-	const decimalNum = getDecimal( step );
-
-	return (
-		<>
-			{ unit !== '%' ? (
-				<StepperCell
-					label={ label }
-					max={ max }
-					min={ min }
-					onChange={ onChange }
-					separatorType={ separatorType }
-					value={ value }
-					step={ step }
-					defaultValue={ initialControlValue }
-					shouldDisplayTextInput
-					decimalNum={ decimalNum }
-					openUnitPicker={ onPickerPresent }
-					unitLabel={ getAccessibleLabelForUnit( unit ) }
-					{ ...props }
-				>
-					{ renderUnitPicker() }
-				</StepperCell>
-			) : (
-				<RangeCell
-					label={ label }
-					onChange={ onChange }
-					minimumValue={ min }
-					maximumValue={ max }
-					value={ value }
-					step={ step }
-					unit={ unit }
-					defaultValue={ initialControlValue }
-					separatorType={ separatorType }
-					decimalNum={ decimalNum }
-					openUnitPicker={ onPickerPresent }
-					unitLabel={ getAccessibleLabelForUnit( unit ) }
-					{ ...props }
-				>
-					{ renderUnitPicker() }
-				</RangeCell>
-			) }
-		</>
-	);
-}
-
-export { useCustomUnits } from './utils';
-export default memo( withPreferredColorScheme( UnitControl ) );

package/src/unit-control/style.native.scss

@@ -1,19 +0,0 @@
-.unitButtonText {
-	color: $blue-wordpress;
-}
-
-.unitButtonTextDark {
-	color: $blue-30;
-}
-
-.unitButton {
-	padding-right: $grid-unit;
-	padding-left: $grid-unit;
-	align-items: flex-end;
-	justify-content: flex-end;
-}
-
-.unitMenu {
-	justify-content: center;
-	align-items: center;
-}