@wordpress/components 20.0.0 → 21.0.0

package/src/popover/utils.js

@@ -1,107 +0,0 @@
-/**
- * @typedef {import('../animate').AppearOrigin} AppearOrigin
- * @typedef {import('@floating-ui/react-dom').Placement} FloatingUIPlacement
- * @typedef {	'top left' | 'top center' | 'top right' | 'middle left' | 'middle center' | 'middle right' | 'bottom left' | 'bottom center' | 'bottom right' | 'bottom left' | 'bottom center' | 'bottom right' } LegacyPosition
- */
-
-/**
- * Converts the `Popover`'s legacy "position" prop to the new "placement" prop
- * (used by `floating-ui`).
- *
- * @param {LegacyPosition} position The legacy position
- * @return {FloatingUIPlacement} The corresponding placement
- */
-export const positionToPlacement = ( position ) => {
-	const [ x, y, z ] = position.split( ' ' );
-
-	if ( [ 'top', 'bottom' ].includes( x ) ) {
-		let suffix = '';
-		if ( ( !! z && z === 'left' ) || y === 'right' ) {
-			suffix = '-start';
-		} else if ( ( !! z && z === 'right' ) || y === 'left' ) {
-			suffix = '-end';
-		}
-
-		// @ts-expect-error More TypeScript effort would be required to reconcile `string` and `Placement` types.
-		return x + suffix;
-	}
-
-	// @ts-expect-error More TypeScript effort would be required to reconcile `string` and `Placement` types.
-	return y;
-};
-
-/**
- * @typedef AnimationOrigin
- * @type {Object}
- * @property {number} originX A number between 0 and 1 (in CSS logical properties jargon, 0 is "start", 0.5 is "center", and 1 is "end")
- * @property {number} originY A number between 0 and 1 (0 is top, 0.5 is center, and 1 is bottom)
- */
-
-/** @type {Object.<FloatingUIPlacement, {originX: number, originY: number}>} */
-const PLACEMENT_TO_ANIMATION_ORIGIN = {
-	top: { originX: 0.5, originY: 1 }, // open from bottom, center
-	'top-start': { originX: 0, originY: 1 }, // open from bottom, left
-	'top-end': { originX: 1, originY: 1 }, // open from bottom, right
-	right: { originX: 0, originY: 0.5 }, // open from middle, left
-	'right-start': { originX: 0, originY: 0 }, // open from top, left
-	'right-end': { originX: 0, originY: 1 }, // open from bottom, left
-	bottom: { originX: 0.5, originY: 0 }, // open from top, center
-	'bottom-start': { originX: 0, originY: 0 }, // open from top, left
-	'bottom-end': { originX: 1, originY: 0 }, // open from top, right
-	left: { originX: 1, originY: 0.5 }, // open from middle, right
-	'left-start': { originX: 1, originY: 0 }, // open from top, right
-	'left-end': { originX: 1, originY: 1 }, // open from bottom, right
-};
-
-/**
- * Given the floating-ui `placement`, compute the framer-motion props for the
- * popover's entry animation.
- *
- * @param {FloatingUIPlacement} placement A placement string from floating ui
- * @return {import('framer-motion').MotionProps} The object containing the motion props
- */
-export const placementToMotionAnimationProps = ( placement ) => {
-	const translateProp =
-		placement.startsWith( 'top' ) || placement.startsWith( 'bottom' )
-			? 'translateY'
-			: 'translateX';
-	const translateDirection =
-		placement.startsWith( 'top' ) || placement.startsWith( 'left' )
-			? 1
-			: -1;
-
-	return {
-		style: PLACEMENT_TO_ANIMATION_ORIGIN[ placement ],
-		initial: {
-			opacity: 0,
-			scale: 0,
-			[ translateProp ]: `${ 2 * translateDirection }em`,
-		},
-		animate: { opacity: 1, scale: 1, [ translateProp ]: 0 },
-		transition: { duration: 0.1, ease: [ 0, 0, 0.2, 1 ] },
-	};
-};
-
-/**
- * @typedef FrameOffset
- * @type {Object}
- * @property {number} x A numerical value representing the horizontal offset of the frame.
- * @property {number} y A numerical value representing the vertical offset of the frame.
- */
-
-/**
- * Returns the offset of a document's frame element.
- *
- * @param {Document} document A document. This will usually be the document within an iframe.
- *
- * @return {FrameOffset|undefined} The offset of the document's frame element,
- *                                 or undefined if the document has no frame element.
- */
-export const getFrameOffset = ( document ) => {
-	const frameElement = document?.defaultView?.frameElement;
-	if ( ! frameElement ) {
-		return;
-	}
-	const iframeRect = frameElement.getBoundingClientRect();
-	return { x: iframeRect.left, y: iframeRect.top };
-};

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

@@ -1,39 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, text } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import SearchControl from '../';
-
-export default {
-	title: 'Components/SearchControl',
-	component: SearchControl,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-export const _default = () => {
-	const [ value, setValue ] = useState();
-	const label = text( 'Label', 'Label Text' );
-	const hideLabelFromVision = boolean( 'Hide Label From Vision', true );
-	const help = text( 'Help Text', 'Help text to explain the input.' );
-
-	return (
-		<SearchControl
-			label={ label }
-			hideLabelFromVision={ hideLabelFromVision }
-			help={ help }
-			value={ value }
-			onChange={ setValue }
-		/>
-	);
-};

package/src/tab-panel/stories/index.js

@@ -1,39 +0,0 @@
-/**
- * External dependencies
- */
-import { text } from '@storybook/addon-knobs';
-
-/**
- * Internal dependencies
- */
-import TabPanel from '../';
-
-export default {
-	title: 'Components/TabPanel',
-	component: TabPanel,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-export const _default = () => {
-	return (
-		<TabPanel
-			className="my-tab-panel"
-			tabs={ [
-				{
-					name: 'tab1',
-					title: text( 'Tab 1 title', 'Tab 1' ),
-					className: 'tab-one',
-				},
-				{
-					name: 'tab2',
-					title: text( 'Tab 2 title', 'Tab 2' ),
-					className: 'tab-two',
-				},
-			] }
-		>
-			{ ( tab ) => <p>Selected tab: { tab.title }</p> }
-		</TabPanel>
-	);
-};

package/src/tab-panel/test/index.js

@@ -1,179 +0,0 @@
-/**
- * External dependencies
- */
-import TestUtils from 'react-dom/test-utils';
-
-/**
- * Internal dependencies
- */
-import TabPanel from '../';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-
-describe( 'TabPanel', () => {
-	const getElementByClass = ( wrapper, className ) => {
-		return TestUtils.findRenderedDOMComponentWithClass(
-			wrapper,
-			className
-		);
-	};
-
-	const getElementsByClass = ( wrapper, className ) => {
-		return TestUtils.scryRenderedDOMComponentsWithClass(
-			wrapper,
-			className
-		);
-	};
-
-	const elementClick = ( element ) => {
-		TestUtils.Simulate.click( element );
-	};
-
-	// This is needed because TestUtils does not accept a stateless component.
-	// anything run through a HOC ends up as a stateless component.
-	const getTestComponent = ( WrappedComponent, props ) => {
-		class TestComponent extends Component {
-			render() {
-				return <WrappedComponent { ...props } />;
-			}
-		}
-		return <TestComponent />;
-	};
-
-	describe( 'basic rendering', () => {
-		it( 'should render a tabpanel, and clicking should change tabs', () => {
-			const props = {
-				className: 'test-panel',
-				activeClass: 'active-tab',
-				tabs: [
-					{
-						name: 'alpha',
-						title: 'Alpha',
-						className: 'alpha',
-					},
-					{
-						name: 'beta',
-						title: 'Beta',
-						className: 'beta',
-					},
-					{
-						name: 'gamma',
-						title: 'Gamma',
-						className: 'gamma',
-					},
-				],
-				children: ( tab ) => {
-					return (
-						<p tabIndex="0" className={ tab.name + '-view' }>
-							{ tab.name }
-						</p>
-					);
-				},
-			};
-
-			let wrapper;
-			TestUtils.act( () => {
-				wrapper = TestUtils.renderIntoDocument(
-					getTestComponent( TabPanel, props )
-				);
-			} );
-
-			const alphaTab = getElementByClass( wrapper, 'alpha' );
-			const betaTab = getElementByClass( wrapper, 'beta' );
-			const gammaTab = getElementByClass( wrapper, 'gamma' );
-
-			const getAlphaViews = () =>
-				getElementsByClass( wrapper, 'alpha-view' );
-			const getBetaViews = () =>
-				getElementsByClass( wrapper, 'beta-view' );
-			const getGammaViews = () =>
-				getElementsByClass( wrapper, 'gamma-view' );
-
-			const getActiveTab = () =>
-				getElementByClass( wrapper, 'active-tab' );
-			const getActiveView = () =>
-				getElementByClass(
-					wrapper,
-					'components-tab-panel__tab-content'
-				).firstChild.textContent;
-
-			expect( getActiveTab().innerHTML ).toBe( 'Alpha' );
-			expect( getAlphaViews() ).toHaveLength( 1 );
-			expect( getBetaViews() ).toHaveLength( 0 );
-			expect( getGammaViews() ).toHaveLength( 0 );
-			expect( getActiveView() ).toBe( 'alpha' );
-
-			elementClick( betaTab );
-
-			expect( getActiveTab().innerHTML ).toBe( 'Beta' );
-			expect( getAlphaViews() ).toHaveLength( 0 );
-			expect( getBetaViews() ).toHaveLength( 1 );
-			expect( getGammaViews() ).toHaveLength( 0 );
-			expect( getActiveView() ).toBe( 'beta' );
-
-			elementClick( betaTab );
-
-			expect( getActiveTab().innerHTML ).toBe( 'Beta' );
-			expect( getAlphaViews() ).toHaveLength( 0 );
-			expect( getBetaViews() ).toHaveLength( 1 );
-			expect( getGammaViews() ).toHaveLength( 0 );
-			expect( getActiveView() ).toBe( 'beta' );
-
-			elementClick( gammaTab );
-
-			expect( getActiveTab().innerHTML ).toBe( 'Gamma' );
-			expect( getAlphaViews() ).toHaveLength( 0 );
-			expect( getBetaViews() ).toHaveLength( 0 );
-			expect( getGammaViews() ).toHaveLength( 1 );
-			expect( getActiveView() ).toBe( 'gamma' );
-
-			elementClick( alphaTab );
-
-			expect( getActiveTab().innerHTML ).toBe( 'Alpha' );
-			expect( getAlphaViews() ).toHaveLength( 1 );
-			expect( getBetaViews() ).toHaveLength( 0 );
-			expect( getGammaViews() ).toHaveLength( 0 );
-			expect( getActiveView() ).toBe( 'alpha' );
-		} );
-	} );
-
-	it( 'should render with a tab initially selected by prop initialTabIndex', () => {
-		const props = {
-			className: 'test-panel',
-			activeClass: 'active-tab',
-			initialTabName: 'beta',
-			tabs: [
-				{
-					name: 'alpha',
-					title: 'Alpha',
-					className: 'alpha',
-				},
-				{
-					name: 'beta',
-					title: 'Beta',
-					className: 'beta',
-				},
-			],
-			children: ( tab ) => {
-				return (
-					<p tabIndex="0" className={ tab.name + '-view' }>
-						{ tab.name }
-					</p>
-				);
-			},
-		};
-
-		let wrapper;
-		TestUtils.act( () => {
-			wrapper = TestUtils.renderIntoDocument(
-				getTestComponent( TabPanel, props )
-			);
-		} );
-
-		const getActiveTab = () => getElementByClass( wrapper, 'active-tab' );
-		expect( getActiveTab().innerHTML ).toBe( 'Beta' );
-	} );
-} );

package/src/toggle-control/index.js

@@ -1,55 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useInstanceId } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import FormToggle from '../form-toggle';
-import BaseControl from '../base-control';
-
-export default function ToggleControl( {
-	label,
-	checked,
-	help,
-	className,
-	onChange,
-	disabled,
-} ) {
-	function onChangeToggle( event ) {
-		onChange( event.target.checked );
-	}
-	const instanceId = useInstanceId( ToggleControl );
-	const id = `inspector-toggle-control-${ instanceId }`;
-
-	let describedBy, helpLabel;
-	if ( help ) {
-		describedBy = id + '__help';
-		helpLabel = typeof help === 'function' ? help( checked ) : help;
-	}
-
-	return (
-		<BaseControl
-			id={ id }
-			help={ helpLabel }
-			className={ classnames( 'components-toggle-control', className ) }
-		>
-			<FormToggle
-				id={ id }
-				checked={ checked }
-				onChange={ onChangeToggle }
-				aria-describedby={ describedBy }
-				disabled={ disabled }
-			/>
-			<label htmlFor={ id } className="components-toggle-control__label">
-				{ label }
-			</label>
-		</BaseControl>
-	);
-}

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

@@ -1,64 +0,0 @@
-/**
- * External dependencies
- */
-import { text } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import ToggleControl from '../';
-
-export default {
-	title: 'Components/ToggleControl',
-	component: ToggleControl,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const ToggleControlWithState = ( {
-	helpTextChecked,
-	helpTextUnchecked,
-	...props
-} ) => {
-	const [ hasFixedBackground, setHasFixedBackground ] = useState( true );
-	return (
-		<ToggleControl
-			{ ...props }
-			help={ hasFixedBackground ? helpTextChecked : helpTextUnchecked }
-			checked={ hasFixedBackground }
-			onChange={ setHasFixedBackground }
-		/>
-	);
-};
-
-export const _default = () => {
-	const label = text( 'Label', 'Does this have a fixed background?' );
-
-	return <ToggleControlWithState label={ label } />;
-};
-
-export const withHelpText = () => {
-	const label = text( 'Label', 'Does this have a fixed background?' );
-	const helpTextChecked = text(
-		'Help When Checked',
-		'Has fixed background.'
-	);
-	const helpTextUnchecked = text(
-		'Help When Unchecked',
-		'No fixed background.'
-	);
-
-	return (
-		<ToggleControlWithState
-			label={ label }
-			helpTextChecked={ helpTextChecked }
-			helpTextUnchecked={ helpTextUnchecked }
-		/>
-	);
-};

package/src/toggle-control/style.scss

@@ -1,14 +0,0 @@
-.components-toggle-control .components-base-control__field {
-	display: flex;
-	margin-bottom: $grid-unit-05 * 3;
-	line-height: initial;
-	align-items: center;
-
-	.components-form-toggle {
-		margin-right: $grid-unit-15;
-	}
-
-	.components-toggle-control__label {
-		display: block;
-	}
-}

package/src/toggle-control/test/index.js

@@ -1,52 +0,0 @@
-/**
- * External dependencies
- */
-import renderer from 'react-test-renderer';
-
-/**
- * Internal dependencies
- */
-import ToggleControl from '../';
-
-describe( 'ToggleControl', () => {
-	it( 'triggers change callback with numeric value', () => {
-		// Mount: With shallow, cannot find input child of BaseControl.
-		const onChange = jest.fn();
-		const wrapper = renderer.create(
-			<ToggleControl onChange={ onChange } />
-		);
-		wrapper.root
-			.findByType( 'input' )
-			.props.onChange( { target: { checked: true } } );
-
-		expect( onChange ).toHaveBeenCalledWith( true );
-	} );
-
-	describe( 'help', () => {
-		it( 'does not render input with describedby if no help prop', () => {
-			// Mount: With shallow, cannot find input child of BaseControl.
-			const onChange = jest.fn();
-			const wrapper = renderer.create(
-				<ToggleControl onChange={ onChange } />
-			);
-
-			const input = wrapper.root.findByType( 'input' );
-
-			expect( input.props[ 'aria-describedby' ] ).toBeUndefined();
-		} );
-
-		it( 'renders input with describedby if help prop', () => {
-			// Mount: With shallow, cannot find input child of BaseControl.
-			const onChange = jest.fn();
-			const wrapper = renderer.create(
-				<ToggleControl onChange={ onChange } help={ true } />
-			);
-
-			const input = wrapper.root.findByType( 'input' );
-
-			expect( input.props[ 'aria-describedby' ] ).toMatch(
-				/^inspector-toggle-control-.*__help$/
-			);
-		} );
-	} );
-} );

package/src/ui/__storybook-utils/example-grid.js

@@ -1,61 +0,0 @@
-/**
- * Internal dependencies
- */
-import { Grid } from '../../grid';
-import { Surface } from '../../surface';
-import { Text } from '../../text';
-import { View } from '../../view';
-import { VStack } from '../../v-stack';
-
-const Container = ( { children } ) => (
-	<div
-		style={ {
-			maxWidth: 1280,
-			width: '100%',
-			marginLeft: 'auto',
-			marginRight: 'auto',
-		} }
-	>
-		{ children }
-	</div>
-);
-
-export const ExampleGrid = ( { children } ) => (
-	<Container>
-		<Grid columns={ [ 2, 2, 4 ] } gap="1px">
-			{ children }
-		</Grid>
-	</Container>
-);
-
-export const ExampleGridItem = ( { children } ) => (
-	<Surface
-		variant="secondary"
-		style={ {
-			padding: 20,
-		} }
-	>
-		<VStack alignment="center">{ children }</VStack>
-	</Surface>
-);
-
-export const ExampleMetaContent = ( { title, items = [] } ) => {
-	return (
-		<Grid templateColumns="60px 1fr">
-			<View>
-				<Text size="caption" weight="bold" align="right" isBlock>
-					{ title }
-				</Text>
-			</View>
-			<VStack spacing={ 1 }>
-				{ items.map( ( item, index ) => (
-					<View key={ index }>
-						<Text size="caption" isBlock>
-							{ item }
-						</Text>
-					</View>
-				) ) }
-			</VStack>
-		</Grid>
-	);
-};

package/src/ui/__storybook-utils/index.js

@@ -1 +0,0 @@
-export * from './example-grid';

package/src/ui/__storybook-utils/page.js

@@ -1,29 +0,0 @@
-/**
- * Internal dependencies
- */
-import { VStack } from '../../v-stack';
-import { View } from '../../view';
-import { Heading } from '../../heading';
-import { Divider } from '../../divider';
-
-function Page( { title = 'Component', children } ) {
-	return (
-		<div
-			style={ {
-				paddingTop: 24,
-				paddingBottom: '20vh',
-				maxWidth: '1280px',
-				marginLeft: 'auto',
-				marginRight: 'auto',
-			} }
-		>
-			<VStack spacing={ 6 }>
-				<Heading size={ 1 }>{ title }</Heading>
-				<Divider />
-				<View>{ children }</View>
-			</VStack>
-		</div>
-	);
-}
-
-export default Page;

package/src/utils/keyboard.js

@@ -1,28 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { RIGHT, UP, DOWN, LEFT } from '@wordpress/keycodes';
-
-/**
- * @type {number[]}
- */
-const arrowKeys = [ RIGHT, UP, DOWN, LEFT ];
-
-/**
- * Normalizes the 'key' property of a KeyboardEvent in IE/Edge
- *
- * Source:
- * https://github.com/downshift-js/downshift/blob/a71005bd879d05d7dcb892d1e0dc5c6ca74e9d39/src/utils.js#L279
- *
- * @param {import('react').KeyboardEvent} event A keyboardEvent object
- *
- * @return {string} The keyboard key
- */
-export function normalizeArrowKey( event ) {
-	const { key, keyCode } = event;
-
-	if ( arrowKeys.includes( keyCode ) && key.indexOf( 'Arrow' ) !== 0 ) {
-		return `Arrow${ key }`;
-	}
-	return key;
-}