@wordpress/components 34.0.0 → 35.0.1

package/src/autocomplete/autocompleter-ui.native.js

@@ -1,211 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	View,
-	Animated,
-	StyleSheet,
-	Text,
-	TouchableOpacity,
-	ScrollView,
-} from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import {
-	useLayoutEffect,
-	useEffect,
-	useRef,
-	useState,
-	useCallback,
-} from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import BackgroundView from './background-view';
-import getDefaultUseItems from './get-default-use-items';
-import styles from './style.scss';
-import Icon from '../icon';
-import { __unstableAutocompletionItemsFill as AutocompletionItemsFill } from '../mobile/autocompletion-items';
-
-const { compose: stylesCompose } = StyleSheet;
-
-export function AutocompleterUI( {
-	autocompleter,
-	filterValue,
-	selectedIndex,
-	onChangeOptions,
-	onSelect,
-	reset,
-} ) {
-	// The useItems hook is derived from the autocompleter prop. This is safe
-	// because the parent renders this component with a key that triggers
-	// remount when the completer changes.
-	const useItems = autocompleter.useItems
-		? autocompleter.useItems
-		: getDefaultUseItems( autocompleter );
-	const [ items ] = useItems( filterValue );
-	const filteredItems = items.filter( ( item ) => ! item.isDisabled );
-	const scrollViewRef = useRef();
-	const animationValue = useRef( new Animated.Value( 0 ) ).current;
-	const [ isVisible, setIsVisible ] = useState( false );
-
-	useEffect( () => {
-		if ( ! isVisible && filterValue.length > 0 ) {
-			setIsVisible( true );
-		}
-	}, [ isVisible, filterValue ] );
-
-	useLayoutEffect( () => {
-		onChangeOptions( items );
-		scrollViewRef.current?.scrollTo( { x: 0, animated: false } );
-
-		if ( isVisible && filterValue.length > 0 ) {
-			startAnimation( true );
-		} else if ( isVisible && filterValue.length === 0 ) {
-			startAnimation( false );
-		}
-		// We want to avoid introducing unexpected side effects.
-		// See https://github.com/WordPress/gutenberg/pull/41820
-	}, [ items, isVisible, filterValue ] );
-
-	const activeItemStyles = usePreferredColorSchemeStyle(
-		styles[ 'components-autocomplete__item-active' ],
-		styles[ 'components-autocomplete__item-active-dark' ]
-	);
-
-	const iconStyles = usePreferredColorSchemeStyle(
-		styles[ 'components-autocomplete__icon' ],
-		styles[ 'components-autocomplete__icon-active-dark' ]
-	);
-
-	const activeIconStyles = usePreferredColorSchemeStyle(
-		styles[ 'components-autocomplete__icon-active ' ],
-		styles[ 'components-autocomplete__icon-active-dark' ]
-	);
-
-	const textStyles = usePreferredColorSchemeStyle(
-		styles[ 'components-autocomplete__text' ],
-		styles[ 'components-autocomplete__text-dark' ]
-	);
-
-	const activeTextStyles = usePreferredColorSchemeStyle(
-		styles[ 'components-autocomplete__text-active' ],
-		styles[ 'components-autocomplete__text-active-dark' ]
-	);
-
-	const startAnimation = useCallback(
-		( show ) => {
-			Animated.timing( animationValue, {
-				toValue: show ? 1 : 0,
-				duration: show ? 200 : 100,
-				useNativeDriver: true,
-			} ).start( ( { finished } ) => {
-				if ( finished && ! show && isVisible ) {
-					setIsVisible( false );
-					reset();
-				}
-			} );
-		},
-		// We want to avoid introducing unexpected side effects.
-		// See https://github.com/WordPress/gutenberg/pull/41820
-		[ isVisible ]
-	);
-
-	const contentStyles = {
-		transform: [
-			{
-				translateY: animationValue.interpolate( {
-					inputRange: [ 0, 1 ],
-					outputRange: [
-						styles[ 'components-autocomplete' ].height,
-						0,
-					],
-				} ),
-			},
-		],
-	};
-
-	if ( ! filteredItems.length > 0 || ! isVisible ) {
-		return null;
-	}
-
-	return (
-		<AutocompletionItemsFill>
-			<View style={ styles[ 'components-autocomplete' ] }>
-				<Animated.View style={ contentStyles }>
-					<BackgroundView>
-						<ScrollView
-							testID="autocompleter"
-							ref={ scrollViewRef }
-							horizontal
-							contentContainerStyle={
-								styles[ 'components-autocomplete__content' ]
-							}
-							showsHorizontalScrollIndicator={ false }
-							keyboardShouldPersistTaps="always"
-							accessibilityLabel={
-								// translators: Slash inserter autocomplete results
-								__( 'Slash inserter results' )
-							}
-						>
-							{ filteredItems.map( ( option, index ) => {
-								const isActive = index === selectedIndex;
-								const itemStyle = stylesCompose(
-									styles[ 'components-autocomplete__item' ],
-									isActive && activeItemStyles
-								);
-								const textStyle = stylesCompose(
-									textStyles,
-									isActive && activeTextStyles
-								);
-								const iconStyle = stylesCompose(
-									iconStyles,
-									isActive && activeIconStyles
-								);
-								const iconSource =
-									option?.value?.icon?.src ||
-									option?.value?.icon;
-
-								return (
-									<TouchableOpacity
-										activeOpacity={ 0.5 }
-										style={ itemStyle }
-										key={ index }
-										onPress={ () => onSelect( option ) }
-										accessibilityLabel={ sprintf(
-											// translators: %s: Block name e.g. "Image block"
-											__( '%s block' ),
-											option?.value?.title
-										) }
-									>
-										<View
-											style={
-												styles[
-													'components-autocomplete__icon'
-												]
-											}
-										>
-											<Icon
-												icon={ iconSource }
-												size={ 24 }
-												style={ iconStyle }
-											/>
-										</View>
-										<Text style={ textStyle }>
-											{ option?.value?.title }
-										</Text>
-									</TouchableOpacity>
-								);
-							} ) }
-						</ScrollView>
-					</BackgroundView>
-				</Animated.View>
-			</View>
-		</AutocompletionItemsFill>
-	);
-}

package/src/autocomplete/background-view.android.js

@@ -1,25 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
-const BackgroundView = ( { children } ) => {
-	const backgroundStyles = usePreferredColorSchemeStyle(
-		styles[ 'components-autocomplete__background' ],
-		styles[ 'components-autocomplete__background-dark' ]
-	);
-
-	return <View style={ backgroundStyles }>{ children }</View>;
-};
-
-export default BackgroundView;

package/src/autocomplete/background-view.ios.js

@@ -1,23 +0,0 @@
-/**
- * External dependencies
- */
-import { BlurView } from '@react-native-community/blur';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
-const BackgroundView = ( { children } ) => {
-	return (
-		<BlurView
-			style={ styles[ 'components-autocomplete__background-blur' ] }
-			blurType="prominent"
-			blurAmount={ 10 }
-		>
-			{ children }
-		</BlurView>
-	);
-};
-
-export default BackgroundView;

package/src/autocomplete/style.android.scss

@@ -1,7 +0,0 @@
-@import "./style.native.scss";
-
-.components-autocomplete {
-	width: 100%;
-	height: $mobile-header-toolbar-height;
-	bottom: $mobile-header-toolbar-height;
-}

package/src/autocomplete/style.native.scss

@@ -1,74 +0,0 @@
-.components-autocomplete {
-	width: 100%;
-	height: $mobile-header-toolbar-height;
-	overflow: hidden;
-}
-
-.components-autocomplete__background {
-	height: $mobile-header-toolbar-height;
-	background-color: $gray-0;
-}
-
-.components-autocomplete__background-dark {
-	background-color: $app-background-dark-alt;
-}
-
-.components-autocomplete__background-blur {
-	width: 100%;
-	height: $mobile-header-toolbar-height;
-}
-
-.components-autocomplete__content {
-	flex-grow: 1;
-	padding-left: 6px;
-}
-
-.components-autocomplete__item {
-	flex-direction: row;
-	align-items: center;
-	padding: 5px 12px 5px 8px;
-	margin-right: 2px;
-	margin-top: 3px;
-	margin-bottom: 3px;
-}
-
-.components-autocomplete__icon {
-	margin-right: 4px;
-	color: $gray-darken-30;
-}
-
-.components-autocomplete__icon-active {
-	color: $gray-dark;
-}
-
-.components-autocomplete__icon-active-dark {
-	color: $gray-20;
-}
-
-.components-autocomplete__text {
-	color: $gray-darken-30;
-}
-
-.components-autocomplete__text-dark {
-	color: $gray-20;
-}
-
-.components-autocomplete__text-active {
-	color: $gray-dark;
-	text-decoration: underline;
-	text-decoration-color: $gray-darken-30;
-}
-
-.components-autocomplete__text-active-dark {
-	color: $gray-20;
-	text-decoration-color: $gray-20;
-}
-
-.components-autocomplete__item-active {
-	border-radius: 22px;
-	background-color: transparentize($color: $gray-darken-20, $amount: 0.9);
-}
-
-.components-autocomplete__item-active-dark {
-	background-color: $dark-ultra-dim;
-}

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

@@ -1,14 +0,0 @@
-/**
- * External dependencies
- */
-import { Text, View } from 'react-native';
-
-export default function BaseControl( { label, help, children } ) {
-	return (
-		<View accessible accessibilityLabel={ label }>
-			{ label && <Text>{ label }</Text> }
-			{ children }
-			{ help && <Text>{ help }</Text> }
-		</View>
-	);
-}

package/src/button/index.native.js

@@ -1,236 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	StyleSheet,
-	TouchableOpacity,
-	Text,
-	View,
-	Platform,
-} from 'react-native';
-import { LongPressGestureHandler, State } from 'react-native-gesture-handler';
-
-/**
- * WordPress dependencies
- */
-import { Children, cloneElement, useCallback } from '@wordpress/element';
-import {
-	usePreferredColorScheme,
-	usePreferredColorSchemeStyle,
-} from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import Tooltip from '../tooltip';
-import Icon from '../icon';
-import style from './style.scss';
-
-const isAndroid = Platform.OS === 'android';
-const marginBottom = isAndroid ? -0.5 : 0;
-const marginLeft = -3;
-
-const styles = StyleSheet.create( {
-	container: {
-		flex: 1,
-		padding: 3,
-		justifyContent: 'center',
-		alignItems: 'center',
-	},
-	buttonInactive: {
-		flex: 1,
-		flexDirection: 'row',
-		justifyContent: 'center',
-		alignItems: 'center',
-	},
-	fixedRatio: {
-		aspectRatio: 1,
-	},
-	buttonActive: {
-		flex: 1,
-		flexDirection: 'row',
-		justifyContent: 'center',
-		alignItems: 'center',
-		borderRadius: 6,
-	},
-	subscriptInactive: {
-		color: '#7b9ab1', // $toolbar-button.
-		fontWeight: 'bold',
-		fontSize: 13,
-		alignSelf: 'flex-end',
-		marginLeft,
-		marginBottom,
-	},
-	subscriptInactiveDark: {
-		color: '#a7aaad', // $gray_20.
-	},
-	subscriptActive: {
-		color: 'white',
-		fontWeight: 'bold',
-		fontSize: 13,
-		alignSelf: 'flex-end',
-		marginLeft,
-		marginBottom,
-	},
-} );
-
-export function Button( props ) {
-	const {
-		children,
-		onClick,
-		onLongPress,
-		disabled,
-		hint,
-		fixedRatio = true,
-		isPressed,
-		'aria-disabled': ariaDisabled,
-		'data-subscript': subscript,
-		testID,
-		icon,
-		iconSize,
-		showTooltip,
-		label,
-		shortcut,
-		tooltipPosition,
-		isActiveStyle,
-		customContainerStyles,
-		hitSlop,
-	} = props;
-	const preferredColorScheme = usePreferredColorScheme();
-
-	const isDisabled = ariaDisabled || disabled;
-
-	const containerStyle = [
-		styles.container,
-		customContainerStyles && { ...customContainerStyles },
-	];
-
-	const buttonActiveColorStyles = usePreferredColorSchemeStyle(
-		style[ 'components-button-light--active' ],
-		style[ 'components-button-dark--active' ]
-	);
-
-	const buttonViewStyle = {
-		opacity: isDisabled ? 0.3 : 1,
-		...( fixedRatio && styles.fixedRatio ),
-		...( isPressed ? styles.buttonActive : styles.buttonInactive ),
-		...( isPressed ? buttonActiveColorStyles : {} ),
-		...( isPressed &&
-			isActiveStyle?.borderRadius && {
-				borderRadius: isActiveStyle.borderRadius,
-			} ),
-		...( isActiveStyle?.backgroundColor && {
-			backgroundColor: isActiveStyle.backgroundColor,
-		} ),
-	};
-
-	const states = [];
-	if ( isPressed ) {
-		states.push( 'selected' );
-	}
-
-	if ( isDisabled ) {
-		states.push( 'disabled' );
-	}
-
-	const subscriptInactive = usePreferredColorSchemeStyle(
-		styles.subscriptInactive,
-		styles.subscriptInactiveDark
-	);
-
-	const newChildren = Children.map( children, ( child ) => {
-		return child
-			? cloneElement( child, {
-					colorScheme: preferredColorScheme,
-					isPressed,
-			  } )
-			: child;
-	} );
-
-	// Should show the tooltip if...
-	const shouldShowTooltip =
-		! isDisabled &&
-		// An explicit tooltip is passed or...
-		( ( showTooltip && label ) ||
-			// There's a shortcut or...
-			shortcut ||
-			// There's a label and...
-			( !! label &&
-				// The children are empty and...
-				( ! children ||
-					( Array.isArray( children ) && ! children.length ) ) &&
-				// The tooltip is not explicitly disabled.
-				false !== showTooltip ) );
-
-	const newIcon = icon
-		? cloneElement( <Icon icon={ icon } size={ iconSize } />, {
-				isPressed,
-		  } )
-		: null;
-
-	const longPressHandler = useCallback(
-		( { nativeEvent } ) => {
-			if ( nativeEvent.state === State.ACTIVE && onLongPress ) {
-				onLongPress();
-			}
-		},
-		[ onLongPress ]
-	);
-
-	const element = (
-		<TouchableOpacity
-			activeOpacity={ 0.7 }
-			accessible
-			accessibilityLabel={ label }
-			accessibilityStates={ states }
-			accessibilityRole="button"
-			accessibilityHint={ hint }
-			onPress={ onClick }
-			style={ containerStyle }
-			disabled={ isDisabled }
-			testID={ testID }
-			hitSlop={ hitSlop }
-		>
-			<LongPressGestureHandler
-				minDurationMs={ 500 }
-				maxDist={ 150 }
-				onHandlerStateChange={ longPressHandler }
-			>
-				<View style={ buttonViewStyle }>
-					<View style={ { flexDirection: 'row' } }>
-						{ newIcon }
-						{ newChildren }
-						{ subscript && (
-							<Text
-								style={
-									isPressed
-										? styles.subscriptActive
-										: subscriptInactive
-								}
-							>
-								{ subscript }
-							</Text>
-						) }
-					</View>
-				</View>
-			</LongPressGestureHandler>
-		</TouchableOpacity>
-	);
-
-	if ( ! shouldShowTooltip ) {
-		return element;
-	}
-
-	return (
-		<Tooltip
-			text={ label }
-			shortcut={ shortcut }
-			position={ tooltipPosition }
-			visible={ showTooltip === true }
-		>
-			{ element }
-		</Tooltip>
-	);
-}
-
-export default Button;

package/src/button/style.native.scss

@@ -1,9 +0,0 @@
-.components-button-light--active {
-	border-color: $light-dim;
-	background-color: $light-dim;
-}
-
-.components-button-dark--active {
-	border-color: $dark-quaternary;
-	background-color: $dark-quaternary;
-}

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

@@ -1,24 +0,0 @@
-/**
- * Internal dependencies
- */
-import ColorCell from '../mobile/bottom-sheet/color-cell';
-
-function ColorControl( {
-	label,
-	onPress,
-	color,
-	withColorIndicator,
-	...props
-} ) {
-	return (
-		<ColorCell
-			label={ label }
-			onPress={ onPress }
-			color={ color }
-			withColorIndicator={ withColorIndicator }
-			{ ...props }
-		/>
-	);
-}
-
-export default ColorControl;

package/src/color-indicator/index.native.js

@@ -1,80 +0,0 @@
-/**
- * External dependencies
- */
-import { View, Animated } from 'react-native';
-/**
- * WordPress dependencies
- */
-import { Icon, check } from '@wordpress/icons';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-import Gradient from '../mobile/gradient';
-import { colorsUtils } from '../mobile/color-settings/utils';
-
-function SelectedIcon( { opacity } ) {
-	return (
-		<Animated.View style={ [ styles.selected, { opacity } ] }>
-			<View style={ [ styles.outline, styles.selectedOutline ] } />
-			<Icon icon={ check } style={ styles.icon } size={ 24 } />
-		</Animated.View>
-	);
-}
-
-function ColorIndicator( {
-	color,
-	isSelected,
-	withCustomPicker,
-	style,
-	opacity,
-} ) {
-	const { isGradient } = colorsUtils;
-
-	const outlineStyle = usePreferredColorSchemeStyle(
-		styles.outline,
-		styles.outlineDark
-	);
-
-	if ( isGradient( color ) ) {
-		return (
-			<Gradient
-				style={ [ styles.circleOption, style ] }
-				gradientValue={ color }
-			>
-				<View style={ outlineStyle } />
-				{ isSelected && <SelectedIcon opacity={ opacity } /> }
-			</Gradient>
-		);
-	} else if ( withCustomPicker ) {
-		return (
-			<View style={ [ styles.circleOption, style ] }>
-				<View style={ outlineStyle } />
-				{ color.map( ( gradientValue ) => {
-					return (
-						<Gradient
-							gradientValue={ gradientValue }
-							style={ [
-								styles.circleOption,
-								styles.absolute,
-								style,
-							] }
-							key={ gradientValue }
-						/>
-					);
-				} ) }
-				{ isSelected && <SelectedIcon /> }
-			</View>
-		);
-	}
-	return (
-		<View
-			style={ [ styles.circleOption, style, { backgroundColor: color } ] }
-		>
-			<View style={ outlineStyle } />
-			{ isSelected && <SelectedIcon opacity={ opacity } /> }
-		</View>
-	);
-}
-export default ColorIndicator;