@wordpress/components 19.12.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/radio-control/index.js

@@ -1,69 +0,0 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useInstanceId } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import BaseControl from '../base-control';
-
-export default function RadioControl( {
-	label,
-	className,
-	selected,
-	help,
-	onChange,
-	hideLabelFromVision,
-	options = [],
-	...props
-} ) {
-	const instanceId = useInstanceId( RadioControl );
-	const id = `inspector-radio-control-${ instanceId }`;
-	const onChangeValue = ( event ) => onChange( event.target.value );
-
-	return (
-		! isEmpty( options ) && (
-			<BaseControl
-				label={ label }
-				id={ id }
-				hideLabelFromVision={ hideLabelFromVision }
-				help={ help }
-				className={ classnames(
-					className,
-					'components-radio-control'
-				) }
-			>
-				{ options.map( ( option, index ) => (
-					<div
-						key={ `${ id }-${ index }` }
-						className="components-radio-control__option"
-					>
-						<input
-							id={ `${ id }-${ index }` }
-							className="components-radio-control__input"
-							type="radio"
-							name={ id }
-							value={ option.value }
-							onChange={ onChangeValue }
-							checked={ option.value === selected }
-							aria-describedby={
-								!! help ? `${ id }__help` : undefined
-							}
-							{ ...props }
-						/>
-						<label htmlFor={ `${ id }-${ index }` }>
-							{ option.label }
-						</label>
-					</div>
-				) ) }
-			</BaseControl>
-		)
-	);
-}

package/src/radio-control/stories/index.js

@@ -1,41 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import RadioControl from '../';
-
-export default { title: 'Components/RadioControl', component: RadioControl };
-
-const RadioControlWithState = ( props ) => {
-	const [ option, setOption ] = useState( 'public' );
-
-	return (
-		<RadioControl { ...props } selected={ option } onChange={ setOption } />
-	);
-};
-
-const options = [
-	{ label: 'Public', value: 'public' },
-	{ label: 'Private', value: 'private' },
-	{ label: 'Password Protected', value: 'password' },
-];
-
-export const _default = () => {
-	return (
-		<RadioControlWithState label="Post visibility" options={ options } />
-	);
-};
-
-export const withHelp = () => {
-	return (
-		<RadioControlWithState
-			help="The visibility level for the current post"
-			label="Post visibility"
-			options={ options }
-		/>
-	);
-};

package/src/tree-select/index.js

@@ -1,48 +0,0 @@
-/**
- * External dependencies
- */
-import { unescape as unescapeString, repeat, flatMap, compact } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { useMemo } from '@wordpress/element';
-/**
- * Internal dependencies
- */
-import { SelectControl } from '../';
-
-function getSelectOptions( tree, level = 0 ) {
-	return flatMap( tree, ( treeNode ) => [
-		{
-			value: treeNode.id,
-			label:
-				repeat( '\u00A0', level * 3 ) + unescapeString( treeNode.name ),
-		},
-		...getSelectOptions( treeNode.children || [], level + 1 ),
-	] );
-}
-
-export default function TreeSelect( {
-	label,
-	noOptionLabel,
-	onChange,
-	selectedId,
-	tree,
-	...props
-} ) {
-	const options = useMemo( () => {
-		return compact( [
-			noOptionLabel && { value: '', label: noOptionLabel },
-			...getSelectOptions( tree ),
-		] );
-	}, [ noOptionLabel, tree ] );
-
-	return (
-		<SelectControl
-			{ ...{ label, options, onChange } }
-			value={ selectedId }
-			{ ...props }
-		/>
-	);
-}

package/src/tree-select/stories/index.js

@@ -1,80 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, object, text } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import TreeSelect from '../';
-
-export default {
-	title: 'Components/TreeSelect',
-	component: TreeSelect,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const TreeSelectWithState = ( props ) => {
-	const [ selection, setSelection ] = useState();
-
-	return (
-		<TreeSelect
-			{ ...props }
-			onChange={ setSelection }
-			selectedId={ selection }
-		/>
-	);
-};
-
-export const _default = () => {
-	const label = text( 'Label', 'Label Text' );
-	const noOptionLabel = text( 'No Option Label', 'No parent page' );
-	const hideLabelFromVision = boolean( 'Hide Label From Vision', false );
-	const help = text(
-		'Help Text',
-		'Help text to explain the select control.'
-	);
-	const tree = object( 'Tree', [
-		{
-			name: 'Page 1',
-			id: 'p1',
-			children: [
-				{ name: 'Descend 1 of page 1', id: 'p11' },
-				{ name: 'Descend 2 of page 1', id: 'p12' },
-			],
-		},
-		{
-			name: 'Page 2',
-			id: 'p2',
-			children: [
-				{
-					name: 'Descend 1 of page 2',
-					id: 'p21',
-					children: [
-						{
-							name: 'Descend 1 of Descend 1 of page 2',
-							id: 'p211',
-						},
-					],
-				},
-			],
-		},
-	] );
-
-	return (
-		<TreeSelectWithState
-			label={ label }
-			noOptionLabel={ noOptionLabel }
-			hideLabelFromVision={ hideLabelFromVision }
-			help={ help }
-			tree={ tree }
-		/>
-	);
-};

package/src/z-stack/stories/index.js

@@ -1,70 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, number } from '@storybook/addon-knobs';
-
-/**
- * Internal dependencies
- */
-import { Elevation } from '../../elevation';
-import { HStack } from '../../h-stack';
-import { View } from '../../view';
-import { ZStack } from '..';
-
-export default {
-	component: ZStack,
-	title: 'Components (Experimental)/ZStack',
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const Avatar = ( { backgroundColor } ) => {
-	return (
-		<View>
-			<View
-				style={ {
-					border: '3px solid black',
-					borderRadius: '9999px',
-					height: '48px',
-					width: '48px',
-					backgroundColor,
-				} }
-			/>
-			<Elevation
-				borderRadius={ 9999 }
-				isInteractive={ false }
-				value={ 3 }
-			/>
-		</View>
-	);
-};
-
-const AnimatedAvatars = () => {
-	const props = {
-		offset: number( 'offset', 20 ),
-		isLayered: boolean( 'isLayered', true ),
-		isReversed: boolean( 'isReversed', false ),
-	};
-
-	return (
-		<HStack>
-			<View>
-				<ZStack { ...props }>
-					<Avatar backgroundColor="#444" />
-					<Avatar backgroundColor="#777" />
-					<Avatar backgroundColor="#aaa" />
-					<Avatar backgroundColor="#fff" />
-				</ZStack>
-			</View>
-		</HStack>
-	);
-};
-
-export const _default = () => {
-	return (
-		<View>
-			<AnimatedAvatars />
-		</View>
-	);
-};