@wordpress/components 34.0.0 → 35.0.1

package/src/mobile/link-settings/style.native.scss

@@ -1,4 +0,0 @@
-.linkSettingsPanel {
-	padding-left: 0;
-	padding-right: 0;
-}

package/src/mobile/link-settings/test/edit.native.js

@@ -1,325 +0,0 @@
-// noinspection DuplicatedCode
-
-/**
- * External dependencies
- */
-import Clipboard from '@react-native-clipboard/clipboard';
-import {
-	fireEvent,
-	initializeEditor,
-	waitForElementToBeRemoved,
-} from 'test/helpers';
-/**
- * WordPress dependencies
- */
-import { registerCoreBlocks } from '@wordpress/block-library';
-import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
-
-// Mock debounce to prevent potentially belated state updates.
-jest.mock( '@wordpress/compose/src/utils/debounce', () => ( {
-	debounce: ( fn ) => {
-		fn.cancel = jest.fn();
-		return fn;
-	},
-} ) );
-// Mock link suggestions that are fetched by the link picker
-// when typing a search query.
-jest.mock( '@wordpress/core-data/src/fetch', () => ( {
-	__experimentalFetchLinkSuggestions: jest.fn().mockResolvedValue( [ {} ] ),
-} ) );
-
-/**
- * Utility function to unregister all core block types previously registered
- * when staging the Redux Store `beforeAll` integration tests start running.
- *
- * This should probably be extracted into a utility module for future tests.
- */
-const unregisterBlocks = () => {
-	const blocks = getBlockTypes();
-
-	blocks.forEach( ( { name } ) => unregisterBlockType( name ) );
-};
-
-/**
- * ### TODO
- * + Try to figure out why I can't `console.log(JSON.stringify(subject.toJSON()))` anymore.
- */
-describe.each( [
-	[
-		{
-			type: 'core/button',
-			initialHtml: `
-				<!-- wp:button {"style":{"border":{"radius":"5px"}}} -->
-				<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" style="border-radius:5px">Link</a></div>
-				<!-- /wp:button -->
-			`,
-			toJSON: () => 'core/button',
-		},
-	],
-	[
-		{
-			type: 'core/image',
-			initialHtml: `
-				<!-- wp:image {"id":20,"sizeSlug":"large","linkDestination":"custom"} -->
-				<figure class="wp-block-image size-large">
-					<img class="wp-image-20" src="https://tonytahmouchtest.files.wordpress.com/2021/10/img_0111-2.jpg?w=1024" alt="" />
-				</figure>
-				<!-- /wp:image -->
-			`,
-			toJSON: () => 'core/image',
-		},
-	],
-] )( '<LinkSettings/> from %j', ( { type, initialHtml } ) => {
-	beforeAll( () => {
-		registerCoreBlocks();
-	} );
-
-	afterAll( () => {
-		unregisterBlocks();
-	} );
-
-	/**
-	 * GIVEN an EDITOR is displayed with an EDIT IMAGE BLOCK or EDIT BUTTON BLOCK;
-	 * GIVEN the CLIPBOARD has a URL copied;
-	 * WHEN the USER selects the SETTINGS BUTTON on the EDIT IMAGE BLOCK or EDIT BUTTON BLOCK;
-	 */
-	it( 'should display the LINK SETTINGS with an EMPTY LINK TO field.', async () => {
-		// Arrange.
-		const url = 'https://tonytahmouchtest.files.wordpress.com';
-		const subject = await initializeEditor( { initialHtml } );
-		Clipboard.getString.mockReturnValue( url );
-
-		// Act.
-		const [ block ] = await subject.findAllByLabelText(
-			type === 'core/image' ? /Image Block/ : /Button Block/
-		);
-		fireEvent.press( block );
-		fireEvent.press( block );
-		fireEvent.press( await subject.findByLabelText( 'Open Settings' ) );
-
-		// Assert.
-		const linkToField = await subject.findByLabelText(
-			`Link to, ${
-				type === 'core/image' ? 'None' : 'Search or type URL'
-			}`
-		);
-		expect( linkToField ).toBeTruthy();
-	} );
-
-	describe( '<LinkPicker/>', () => {
-		describe( 'Hide Clipboard Link Suggestion - Invalid URL in Clipboard', () => {
-			/**
-			 * GIVEN a SETTINGS BOTTOM SHEET is displayed;
-			 * GIVEN the CLIPBOARD has a NON-URL copied;
-			 * GIVEN the STATE has NO URL;
-			 * WHEN the USER selects the LINK TO cell;
-			 */
-			it( 'should display the LINK PICKER with NO FROM CLIPBOARD CELL.', async () => {
-				// Arrange.
-				const url = 'tonytahmouchtest.files.wordpress.com';
-				const subject = await initializeEditor( { initialHtml } );
-				Clipboard.getString.mockReturnValue( url );
-
-				// Act.
-				const [ block ] = await subject.findAllByLabelText(
-					type === 'core/image' ? /Image Block/ : /Button Block/
-				);
-				fireEvent.press( block );
-				fireEvent.press( block );
-				fireEvent.press( subject.getByLabelText( 'Open Settings' ) );
-				fireEvent.press(
-					subject.getByLabelText(
-						`Link to, ${
-							type === 'core/image'
-								? 'None'
-								: 'Search or type URL'
-						}`
-					)
-				);
-				if ( type === 'core/image' ) {
-					fireEvent.press( subject.getByLabelText( /Custom URL/ ) );
-				}
-				await subject.findByLabelText( 'Apply' );
-
-				// Assert.
-				expect(
-					subject.queryByLabelText( /Copy URL from the clipboard[,]/ )
-				).toBeNull();
-			} );
-		} );
-
-		describe( 'Hide Clipboard Link Suggestion - Valid and Same URL in Clipboard', () => {
-			/**
-			 * GIVEN a SETTINGS BOTTOM SHEET is displayed;
-			 * GIVEN the CLIPBOARD has a URL copied;
-			 * GIVEN the STATE has the SAME URL as the CLIPBOARD;
-			 * WHEN the USER selects the LINK TO cell;
-			 */
-			it( 'should display the LINK PICKER with NO FROM CLIPBOARD CELL.', async () => {
-				// Arrange.
-				const url = 'https://tonytahmouchtest.files.wordpress.com';
-				const subject = await initializeEditor( { initialHtml } );
-				Clipboard.getString.mockReturnValue( url );
-
-				// Act.
-				const [ block ] = await subject.findAllByLabelText(
-					type === 'core/image' ? /Image Block/ : /Button Block/
-				);
-				fireEvent.press( block );
-				fireEvent.press( block );
-				fireEvent.press( subject.getByLabelText( 'Open Settings' ) );
-				fireEvent.press(
-					subject.getByLabelText(
-						`Link to, ${
-							type === 'core/image'
-								? 'None'
-								: 'Search or type URL'
-						}`
-					)
-				);
-				if ( type === 'core/image' ) {
-					fireEvent.press(
-						subject.getByLabelText( 'Custom URL. Empty' )
-					);
-				}
-				fireEvent.press(
-					await subject.findByLabelText(
-						`Copy URL from the clipboard, ${ url }`
-					)
-				);
-				fireEvent.press(
-					await subject.findByLabelText(
-						`Link to, ${
-							type === 'core/image' ? 'Custom URL' : url
-						}`
-					)
-				);
-
-				if ( type === 'core/image' ) {
-					fireEvent.press(
-						subject.getByLabelText( `Custom URL, ${ url }` )
-					);
-				}
-				await waitForElementToBeRemoved( () =>
-					subject.getByTestId( 'link-picker-loading' )
-				);
-				await subject.findByLabelText( 'Apply' );
-
-				// Assert.
-				expect(
-					subject.queryByLabelText( /Copy URL from the clipboard[,]/ )
-				).toBeNull();
-			} );
-		} );
-
-		describe( 'Show Clipboard Link Suggestion - Valid and Different URL in Clipboard', () => {
-			/**
-			 * GIVEN a SETTINGS BOTTOM SHEET is displayed;
-			 * GIVEN the CLIPBOARD has a URL copied;
-			 * GIVEN the STATE has NO URL;
-			 * WHEN the USER selects the LINK TO cell;
-			 */
-			it(
-				'should display the LINK PICKER with the FROM CLIPBOARD CELL populated' +
-					' with the URL from the CLIPBOARD.',
-				async () => {
-					// Arrange.
-					const url = 'https://tonytahmouchtest.files.wordpress.com';
-					const subject = await initializeEditor( { initialHtml } );
-					Clipboard.getString.mockReturnValue( url );
-
-					// Act.
-					const [ block ] = await subject.findAllByLabelText(
-						type === 'core/image' ? /Image Block/ : /Button Block/
-					);
-					fireEvent.press( block );
-					fireEvent.press( block );
-					fireEvent.press(
-						subject.getByLabelText( 'Open Settings' )
-					);
-					fireEvent.press(
-						subject.getByLabelText(
-							`Link to, ${
-								type === 'core/image'
-									? 'None'
-									: 'Search or type URL'
-							}`
-						)
-					);
-					if ( type === 'core/image' ) {
-						fireEvent.press(
-							subject.getByLabelText( /Custom URL/ )
-						);
-					}
-					await subject.findByLabelText(
-						`Copy URL from the clipboard, ${ url }`
-					);
-
-					// Assert.
-					const clipboardUrl = await subject.findByText( url );
-					expect( clipboardUrl ).toBeTruthy();
-					const clipboardNote = await subject.findByText(
-						__( 'From clipboard' )
-					);
-					expect( clipboardNote ).toBeTruthy();
-				}
-			);
-		} );
-
-		describe( 'Press Clipboard Link Suggestion', () => {
-			/**
-			 * GIVEN a LINK PICKER SHEET is displayed;
-			 * GIVEN the FROM CLIPBOARD CELL is displayed;
-			 * WHEN the FROM CLIPBOARD CELL is pressed;
-			 */
-			it(
-				'should display the LINK SETTINGS with the URL from the CLIPBOARD' +
-					' populated in the LINK TO field.',
-				async () => {
-					// Arrange.
-					const url = 'https://tonytahmouchtest.files.wordpress.com';
-					const subject = await initializeEditor( { initialHtml } );
-					Clipboard.getString.mockReturnValue( url );
-
-					// Act.
-					const [ block ] = await subject.findAllByLabelText(
-						type === 'core/image' ? /Image Block/ : /Button Block/
-					);
-					fireEvent.press( block );
-					fireEvent.press( block );
-					fireEvent.press(
-						subject.getByLabelText( 'Open Settings' )
-					);
-					fireEvent.press(
-						subject.getByLabelText(
-							`Link to, ${
-								type === 'core/image'
-									? 'None'
-									: 'Search or type URL'
-							}`
-						)
-					);
-					if ( type === 'core/image' ) {
-						fireEvent.press(
-							subject.getByLabelText( /Custom URL/ )
-						);
-					}
-					fireEvent.press(
-						await subject.findByLabelText(
-							`Copy URL from the clipboard, ${ url }`
-						)
-					);
-
-					// Assert.
-					const linkToField = await subject.findByLabelText(
-						`Link to, ${
-							type === 'core/image' ? 'Custom URL' : url
-						}`
-					);
-					expect( linkToField ).toBeTruthy();
-				}
-			);
-		} );
-	} );
-} );

package/src/mobile/link-settings/test/link-settings-navigation.native.js

@@ -1,94 +0,0 @@
-/**
- * External dependencies
- */
-import { Keyboard, Platform } from 'react-native';
-import { render, fireEvent } from 'test/helpers';
-
-/**
- * Internal dependencies
- */
-import LinkSettingsNavigation from '../link-settings-navigation';
-
-beforeAll( () => {
-	jest.useFakeTimers( { legacyFakeTimers: true } );
-} );
-
-afterAll( () => {
-	jest.runOnlyPendingTimers();
-	jest.useRealTimers();
-} );
-
-jest.spyOn( Keyboard, 'dismiss' );
-
-const subject = (
-	<LinkSettingsNavigation
-		setAttributes={ () => {} }
-		hasPicker
-		options={ {
-			url: {
-				label: 'Link URL',
-				placeholder: 'Add URL',
-				autoFocus: false,
-			},
-		} }
-		isVisible
-		withBottomSheet
-	/>
-);
-
-describe( 'Android', () => {
-	it( 'improves back animation performance by dismissing keyboard beforehand', async () => {
-		const screen = render( subject );
-		fireEvent.press( screen.getByText( 'Link to' ) );
-		// Await back button to allow async state updates to complete
-		const backButton = await screen.findByLabelText( 'Go back' );
-		Keyboard.dismiss.mockClear();
-		fireEvent.press( backButton );
-
-		expect( Keyboard.dismiss ).toHaveBeenCalledTimes( 1 );
-	} );
-
-	it( 'improves apply animation performance by dismissing keyboard beforehand', async () => {
-		const screen = render( subject );
-		fireEvent.press( screen.getByText( 'Link to' ) );
-		// Await back button to allow async state updates to complete
-		const backButton = await screen.findByLabelText( 'Apply' );
-		Keyboard.dismiss.mockClear();
-		fireEvent.press( backButton );
-
-		expect( Keyboard.dismiss ).toHaveBeenCalledTimes( 1 );
-	} );
-} );
-
-describe( 'iOS', () => {
-	const originalPlatform = Platform.OS;
-	beforeAll( () => {
-		Platform.OS = 'ios';
-	} );
-
-	afterAll( () => {
-		Platform.OS = originalPlatform;
-	} );
-
-	it( 'improves back animation performance by dismissing keyboard beforehand', async () => {
-		const screen = render( subject );
-		fireEvent.press( screen.getByText( 'Link to' ) );
-		// Await back button to allow async state updates to complete
-		const backButton = await screen.findByLabelText( 'Go back' );
-		Keyboard.dismiss.mockClear();
-		fireEvent.press( backButton );
-
-		expect( Keyboard.dismiss ).toHaveBeenCalledTimes( 1 );
-	} );
-
-	it( 'improves apply animation performance by dismissing keyboard beforehand', async () => {
-		const screen = render( subject );
-		fireEvent.press( screen.getByText( 'Link to' ) );
-		// Await back button to allow async state updates to complete
-		const backButton = await screen.findByLabelText( 'Apply' );
-		Keyboard.dismiss.mockClear();
-		fireEvent.press( backButton );
-
-		expect( Keyboard.dismiss ).toHaveBeenCalledTimes( 1 );
-	} );
-} );

package/src/mobile/media-edit/index.native.js

@@ -1,125 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import {
-	requestMediaEditor,
-	mediaSources,
-} from '@wordpress/react-native-bridge';
-
-/**
- * Internal dependencies
- */
-import Picker from '../picker';
-
-export const MEDIA_TYPE_IMAGE = 'image';
-
-export const MEDIA_EDITOR = 'MEDIA_EDITOR';
-
-const editOption = {
-	id: MEDIA_EDITOR,
-	value: MEDIA_EDITOR,
-	label: __( 'Edit' ),
-	requiresModal: true,
-	types: [ MEDIA_TYPE_IMAGE ],
-};
-
-const replaceOption = {
-	id: mediaSources.deviceLibrary,
-	value: mediaSources.deviceLibrary,
-	label: __( 'Replace' ),
-	types: [ MEDIA_TYPE_IMAGE ],
-};
-
-export class MediaEdit extends Component {
-	constructor( props ) {
-		super( props );
-		this.onPickerPresent = this.onPickerPresent.bind( this );
-		this.onPickerSelect = this.onPickerSelect.bind( this );
-		this.getMediaOptionsItems = this.getMediaOptionsItems.bind( this );
-		this.getDestructiveButtonIndex =
-			this.getDestructiveButtonIndex.bind( this );
-	}
-
-	getMediaOptionsItems() {
-		const { pickerOptions, openReplaceMediaOptions, source } = this.props;
-
-		return [
-			source?.uri && editOption,
-			openReplaceMediaOptions && replaceOption,
-			...( pickerOptions ? pickerOptions : [] ),
-		].filter( Boolean );
-	}
-
-	getDestructiveButtonIndex() {
-		const options = this.getMediaOptionsItems();
-		const destructiveButtonIndex = options.findIndex(
-			( option ) => option?.destructiveButton
-		);
-
-		return destructiveButtonIndex !== -1
-			? destructiveButtonIndex + 1
-			: undefined;
-	}
-
-	onPickerPresent() {
-		if ( this.picker ) {
-			this.picker.presentPicker();
-		}
-	}
-
-	onPickerSelect( value ) {
-		const {
-			onSelect,
-			pickerOptions,
-			multiple = false,
-			openReplaceMediaOptions,
-		} = this.props;
-
-		switch ( value ) {
-			case MEDIA_EDITOR:
-				requestMediaEditor( this.props.source.uri, ( media ) => {
-					if ( ( multiple && media ) || ( media && media.id ) ) {
-						onSelect( media );
-					}
-				} );
-				break;
-			default:
-				const optionSelected =
-					pickerOptions &&
-					pickerOptions.find( ( option ) => option.id === value );
-
-				if ( optionSelected && optionSelected.onPress ) {
-					optionSelected.onPress();
-					return;
-				}
-
-				if ( openReplaceMediaOptions ) {
-					openReplaceMediaOptions();
-				}
-		}
-	}
-
-	render() {
-		const mediaOptions = () => (
-			<Picker
-				hideCancelButton
-				ref={ ( instance ) => ( this.picker = instance ) }
-				options={ this.getMediaOptionsItems() }
-				leftAlign
-				onChange={ this.onPickerSelect }
-				// translators: %s: block title e.g: "Paragraph".
-				title={ __( 'Media options' ) }
-				destructiveButtonIndex={ this.getDestructiveButtonIndex() }
-			/>
-		);
-
-		return this.props.render( {
-			open: this.onPickerPresent,
-			mediaOptions,
-		} );
-	}
-}
-
-export default MediaEdit;

package/src/mobile/picker/index.android.js

@@ -1,104 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Component, Fragment } from '@wordpress/element';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import BottomSheet from '../bottom-sheet';
-import styles from './styles.scss';
-import PanelBody from '../../panel/body';
-import TextControl from '../../text-control';
-
-function Separator() {
-	const separatorStyle = usePreferredColorSchemeStyle(
-		styles[ 'components-picker__separator' ],
-		styles[ 'components-picker__separator--dark' ]
-	);
-
-	return <View style={ separatorStyle } />;
-}
-
-export default class Picker extends Component {
-	constructor() {
-		super( ...arguments );
-		this.onClose = this.onClose.bind( this );
-		this.onCellPress = this.onCellPress.bind( this );
-
-		this.state = {
-			isVisible: false,
-		};
-	}
-
-	presentPicker() {
-		this.setState( { isVisible: true } );
-	}
-
-	onClose() {
-		this.setState( { isVisible: false } );
-	}
-
-	onCellPress( value ) {
-		const { onChange } = this.props;
-		onChange( value );
-		this.onClose();
-	}
-
-	getOptions() {
-		const { options, leftAlign } = this.props;
-
-		return options.map( ( option ) => (
-			<Fragment key={ `${ option.label }-${ option.value }` }>
-				{ options.length > 1 && option.separated && <Separator /> }
-				<BottomSheet.Cell
-					icon={ option.icon }
-					leftAlign={ leftAlign }
-					label={ option.label }
-					separatorType="none"
-					onPress={ () => this.onCellPress( option.value ) }
-					disabled={ option.disabled }
-					style={
-						option.disabled &&
-						styles[ 'components-picker__button--disabled' ]
-					}
-				/>
-			</Fragment>
-		) );
-	}
-
-	render() {
-		const { hideCancelButton, title, testID } = this.props;
-		const { isVisible } = this.state;
-
-		return (
-			<BottomSheet
-				isVisible={ isVisible }
-				onClose={ this.onClose }
-				hideHeader
-				testID={ testID }
-			>
-				<PanelBody
-					title={ title }
-					style={ styles[ 'components-picker__panel' ] }
-				>
-					{ this.getOptions() }
-					{ ! hideCancelButton && (
-						<TextControl
-							label={ __( 'Cancel' ) }
-							onPress={ this.onClose }
-							separatorType="none"
-						/>
-					) }
-				</PanelBody>
-			</BottomSheet>
-		);
-	}
-}