@wordpress/components 19.10.0 → 19.13.0

package/src/form-token-field/stories/index.js

@@ -1,102 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, text } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import FormTokenField from '../';
-
-export default {
-	title: 'Components/FormTokenField',
-	component: FormTokenField,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const continents = [
-	'Africa',
-	'America',
-	'Antarctica',
-	'Asia',
-	'Europe',
-	'Oceania',
-];
-
-const getKnobs = () => ( {
-	showHowTo: boolean( 'Show how to instructions', true ),
-	expandOnFocus: boolean( 'Expand on focus', false ),
-	placeholder: text( 'Placeholder', '' ),
-	enableValidation: boolean( 'Validate that value is in suggestions', false ),
-} );
-
-const FormTokenFieldExample = () => {
-	const knobs = getKnobs();
-	const [ selectedContinents, setSelectedContinents ] = useState( [] );
-
-	return (
-		<FormTokenField
-			value={ selectedContinents }
-			suggestions={ continents }
-			onChange={ ( tokens ) => setSelectedContinents( tokens ) }
-			label="Type a continent"
-			placeholder={ knobs.placeholder }
-			__experimentalExpandOnFocus={ knobs.expandOnFocus }
-			__experimentalShowHowTo={ knobs.showHowTo }
-			__experimentalValidateInput={
-				knobs.enableValidation
-					? ( newValue ) => continents.includes( newValue )
-					: () => true
-			}
-		/>
-	);
-};
-
-export const _default = () => {
-	return <FormTokenFieldExample />;
-};
-
-const FormTokenFieldAsyncExample = () => {
-	const knobs = getKnobs();
-	const [ selectedContinents, setSelectedContinents ] = useState( [] );
-	const [ availableContinents, setAvailableContinents ] = useState( [] );
-	const searchContinents = ( input ) => {
-		const timeout = setTimeout( () => {
-			const available = continents.filter( ( continent ) =>
-				continent.toLowerCase().includes( input.toLowerCase() )
-			);
-			setAvailableContinents( available );
-		}, 1000 );
-
-		return () => clearTimeout( timeout );
-	};
-
-	return (
-		<FormTokenField
-			value={ selectedContinents }
-			suggestions={ availableContinents }
-			onChange={ ( tokens ) => setSelectedContinents( tokens ) }
-			onInputChange={ searchContinents }
-			label="Type a continent"
-			placeholder={ knobs.placeholder }
-			__experimentalExpandOnFocus={ knobs.expandOnFocus }
-			__experimentalShowHowTo={ knobs.showHowTo }
-			__experimentalValidateInput={
-				knobs.enableValidation
-					? ( newValue ) => continents.includes( newValue )
-					: () => true
-			}
-		/>
-	);
-};
-
-export const _async = () => {
-	return <FormTokenFieldAsyncExample />;
-};

package/src/form-token-field/token-input.js

@@ -1,81 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-
-class TokenInput extends Component {
-	constructor() {
-		super( ...arguments );
-		this.onChange = this.onChange.bind( this );
-		this.bindInput = this.bindInput.bind( this );
-	}
-
-	focus() {
-		this.input.focus();
-	}
-
-	hasFocus() {
-		return this.input === this.input.ownerDocument.activeElement;
-	}
-
-	bindInput( ref ) {
-		this.input = ref;
-	}
-
-	onChange( event ) {
-		this.props.onChange( {
-			value: event.target.value,
-		} );
-	}
-
-	render() {
-		const {
-			value,
-			isExpanded,
-			instanceId,
-			selectedSuggestionIndex,
-			className,
-			onChange,
-			...props
-		} = this.props;
-		const size = value ? value.length + 1 : 0;
-
-		return (
-			<input
-				ref={ this.bindInput }
-				id={ `components-form-token-input-${ instanceId }` }
-				type="text"
-				{ ...props }
-				value={ value || '' }
-				onChange={ onChange ? this.onChange : undefined }
-				size={ size }
-				className={ classnames(
-					className,
-					'components-form-token-field__input'
-				) }
-				autoComplete="off"
-				role="combobox"
-				aria-expanded={ isExpanded }
-				aria-autocomplete="list"
-				aria-owns={
-					isExpanded
-						? `components-form-token-suggestions-${ instanceId }`
-						: undefined
-				}
-				aria-activedescendant={
-					selectedSuggestionIndex !== -1
-						? `components-form-token-suggestions-${ instanceId }-${ selectedSuggestionIndex }`
-						: undefined
-				}
-				aria-describedby={ `components-form-token-suggestions-howto-${ instanceId }` }
-			/>
-		);
-	}
-}
-
-export default TokenInput;

package/src/mobile/html-text-input/container.android.js

@@ -1,23 +0,0 @@
-/**
- * External dependencies
- */
-import { ScrollView } from 'react-native';
-
-/**
- * Internal dependencies
- */
-import KeyboardAvoidingView from '../keyboard-avoiding-view';
-import styles from './style.android.scss';
-
-const HTMLInputContainer = ( { children, parentHeight } ) => (
-	<KeyboardAvoidingView
-		style={ styles.keyboardAvoidingView }
-		parentHeight={ parentHeight }
-	>
-		<ScrollView style={ styles.scrollView }>{ children }</ScrollView>
-	</KeyboardAvoidingView>
-);
-
-HTMLInputContainer.scrollEnabled = false;
-
-export default HTMLInputContainer;

package/src/mobile/html-text-input/container.ios.js

@@ -1,50 +0,0 @@
-/**
- * External dependencies
- */
-import { UIManager, PanResponder } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import KeyboardAvoidingView from '../keyboard-avoiding-view';
-import styles from './style.ios.scss';
-
-class HTMLInputContainer extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.panResponder = PanResponder.create( {
-			onStartShouldSetPanResponderCapture: () => true,
-
-			onPanResponderMove: ( e, gestureState ) => {
-				if ( gestureState.dy > 100 && gestureState.dy < 110 ) {
-					// Keyboard.dismiss() and this.textInput.blur() are not working here
-					// They require to know the currentlyFocusedID under the hood but
-					// during this gesture there's no currentlyFocusedID.
-					UIManager.blur( e.target );
-				}
-			},
-		} );
-	}
-
-	render() {
-		return (
-			<KeyboardAvoidingView
-				style={ styles.keyboardAvoidingView }
-				{ ...this.panResponder.panHandlers }
-				parentHeight={ this.props.parentHeight }
-			>
-				{ this.props.children }
-			</KeyboardAvoidingView>
-		);
-	}
-}
-
-HTMLInputContainer.scrollEnabled = true;
-
-export default HTMLInputContainer;

package/src/popover/test/utils.js

@@ -1,304 +0,0 @@
-/**
- * Internal dependencies
- */
-import {
-	computePopoverPosition,
-	computePopoverYAxisPosition,
-	computePopoverXAxisPosition,
-	offsetIframe,
-} from '../utils';
-
-describe( 'computePopoverYAxisPosition', () => {
-	it( 'should leave the position as is there’s enought space', () => {
-		const anchorRect = {
-			top: 10,
-			left: 10,
-			bottom: 30,
-			right: 30,
-			width: 20,
-			height: 20,
-		};
-
-		const contentSize = {
-			width: 200,
-			height: 300,
-		};
-
-		expect(
-			computePopoverYAxisPosition( anchorRect, contentSize, 'bottom' )
-		).toEqual( {
-			contentHeight: null,
-			popoverTop: 30,
-			yAxis: 'bottom',
-		} );
-	} );
-
-	it( "should switch to bottom position if there's not enough space", () => {
-		const anchorRect = {
-			top: 10,
-			left: 10,
-			bottom: 30,
-			right: 30,
-			width: 20,
-			height: 20,
-		};
-
-		const contentSize = {
-			width: 200,
-			height: 300,
-		};
-
-		expect(
-			computePopoverYAxisPosition( anchorRect, contentSize, 'top' )
-		).toEqual( {
-			contentHeight: null,
-			popoverTop: 30,
-			yAxis: 'bottom',
-		} );
-	} );
-
-	it( "should set a maxHeight if there's not enough space in any direction", () => {
-		const anchorRect = {
-			top: 400,
-			left: 10,
-			bottom: 420,
-			right: 30,
-			width: 20,
-			height: 20,
-		};
-
-		const contentSize = {
-			width: 200,
-			height: 500,
-		};
-
-		expect(
-			computePopoverYAxisPosition( anchorRect, contentSize, 'bottom' )
-		).toEqual( {
-			contentHeight: 390,
-			popoverTop: 400,
-			yAxis: 'top',
-		} );
-	} );
-
-	it( 'should position a popover in the middle', () => {
-		const anchorRect = {
-			top: 400,
-			left: 10,
-			bottom: 30,
-			right: 30,
-			width: 20,
-			height: 20,
-		};
-
-		const contentSize = {
-			width: 200,
-			height: 300,
-		};
-
-		expect(
-			computePopoverYAxisPosition( anchorRect, contentSize, 'middle' )
-		).toEqual( {
-			contentHeight: null,
-			popoverTop: 410,
-			yAxis: 'middle',
-		} );
-	} );
-} );
-
-describe( 'computePopoverXAxisPosition', () => {
-	it( 'should leave the position as is there’s enought space', () => {
-		const anchorRect = {
-			top: 10,
-			left: 10,
-			bottom: 30,
-			right: 30,
-			width: 20,
-			height: 20,
-		};
-
-		const contentSize = {
-			width: 200,
-			height: 300,
-		};
-
-		expect(
-			computePopoverXAxisPosition( anchorRect, contentSize, 'right' )
-		).toEqual( {
-			contentWidth: null,
-			popoverLeft: 20,
-			xAxis: 'right',
-		} );
-	} );
-
-	it( "should switch to right position if there's not enough space", () => {
-		const anchorRect = {
-			top: 10,
-			left: 10,
-			bottom: 30,
-			right: 30,
-			width: 20,
-			height: 20,
-		};
-
-		const contentSize = {
-			width: 200,
-			height: 300,
-		};
-
-		expect(
-			computePopoverXAxisPosition( anchorRect, contentSize, 'center' )
-		).toEqual( {
-			contentWidth: null,
-			popoverLeft: 20,
-			xAxis: 'right',
-		} );
-	} );
-
-	it( "should center popover if there's not enough space in any direction", () => {
-		const anchorRect = {
-			top: 10,
-			left: 400,
-			bottom: 30,
-			right: 420,
-			width: 20,
-			height: 20,
-		};
-
-		const contentSize = {
-			width: 800,
-			height: 300,
-		};
-
-		expect(
-			computePopoverXAxisPosition( anchorRect, contentSize, 'right' )
-		).toEqual( {
-			contentWidth: null,
-			popoverLeft: 512,
-			xAxis: 'center',
-		} );
-	} );
-
-	it( 'should set the content width to the viewport width if content is too wide', () => {
-		const anchorRect = {
-			top: 10,
-			left: 400,
-			bottom: 30,
-			right: 420,
-			width: 20,
-			height: 20,
-		};
-
-		const contentSize = {
-			width: 1500,
-			height: 300,
-		};
-
-		expect(
-			computePopoverXAxisPosition( anchorRect, contentSize, 'right' )
-		).toEqual( {
-			contentWidth: 1024,
-			popoverLeft: 512,
-			xAxis: 'center',
-		} );
-	} );
-} );
-
-describe( 'computePopoverPosition', () => {
-	it( 'should leave the position as is there’s enought space', () => {
-		const anchorRect = {
-			top: 10,
-			left: 10,
-			bottom: 30,
-			right: 30,
-			width: 20,
-			height: 20,
-		};
-
-		const contentSize = {
-			width: 200,
-			height: 300,
-		};
-
-		expect(
-			computePopoverPosition( anchorRect, contentSize, 'bottom right' )
-		).toEqual( {
-			contentWidth: null,
-			popoverLeft: 20,
-			xAxis: 'right',
-			contentHeight: null,
-			popoverTop: 30,
-			yAxis: 'bottom',
-		} );
-	} );
-} );
-
-describe( 'offsetIframe', () => {
-	let parent;
-
-	beforeEach( () => {
-		parent = document.createElement( 'div' );
-		document.body.appendChild( parent );
-	} );
-
-	afterEach( () => {
-		parent.remove();
-	} );
-
-	it( 'returns rect without changes if element is not an iframe', () => {
-		const rect = {
-			left: 50,
-			top: 50,
-			bottom: 100,
-			right: 100,
-			width: 50,
-			height: 50,
-		};
-		const offsettedRect = offsetIframe( rect, parent.ownerDocument );
-
-		expect( offsettedRect ).toEqual( rect );
-	} );
-
-	it( 'returns offsetted rect if element is in an iframe', () => {
-		const iframeLeft = 25;
-		const iframeTop = 50;
-		const childLeft = 10;
-		const childTop = 100;
-
-		const iframe = document.createElement( 'iframe' );
-		parent.appendChild( iframe );
-		// JSDom doesn't have a layout engine
-		// so we need to mock getBoundingClientRect and DOMRect.
-		iframe.getBoundingClientRect = jest.fn( () => ( {
-			width: 100,
-			height: 100,
-			top: iframeTop,
-			left: iframeLeft,
-		} ) );
-		iframe.contentWindow.DOMRect = jest.fn(
-			( left, top, width, height ) => ( {
-				left,
-				top,
-				right: left + width,
-				bottom: top + height,
-				width,
-				height,
-			} )
-		);
-
-		const child = document.createElement( 'div' );
-		iframe.contentWindow.document.body.appendChild( child );
-		child.getBoundingClientRect = jest.fn( () => ( {
-			width: 100,
-			height: 100,
-			top: childTop,
-			left: childLeft,
-		} ) );
-
-		const rect = child.getBoundingClientRect();
-		const offsettedRect = offsetIframe( rect, child.ownerDocument, parent );
-
-		expect( offsettedRect.left ).toBe( iframeLeft + childLeft );
-		expect( offsettedRect.top ).toBe( iframeTop + childTop );
-	} );
-} );