@wordpress/components 20.0.2-next.957ca95e4c.0 → 21.0.1

package/src/focal-point-picker/stories/index.js

@@ -1,76 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-/**
- * Internal dependencies
- */
-import FocalPointPicker from '../';
-
-export default {
-	title: 'Components/FocalPointPicker',
-	component: FocalPointPicker,
-};
-
-const Example = ( props ) => {
-	const [ focalPoint, setFocalPoint ] = useState( {
-		x: 0.5,
-		y: 0.5,
-	} );
-
-	return (
-		<FocalPointPicker
-			value={ focalPoint }
-			onChange={ setFocalPoint }
-			{ ...props }
-		/>
-	);
-};
-
-export const _default = () => {
-	return <Example />;
-};
-
-export const image = () => {
-	const url =
-		'https://i0.wp.com/themes.svn.wordpress.org/twentytwenty/1.3/screenshot.png?w=572&strip=al';
-
-	return <Example url={ url } />;
-};
-
-export const video = () => {
-	const url =
-		'https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm';
-
-	return <Example url={ url } />;
-};
-
-export const snapping = () => {
-	const snapValues = {
-		x: [ 0, 0.33, 0.66, 1 ],
-		y: [ 0, 0.33, 0.66, 1 ],
-	};
-
-	const threshold = 0.05;
-
-	const maybeSnapFocalPoint = ( value ) => {
-		let x = parseFloat( value.x );
-		let y = parseFloat( value.y );
-
-		snapValues.x.forEach( ( snapValue ) => {
-			if ( snapValue - threshold < x && x < snapValue + threshold ) {
-				x = snapValue;
-			}
-		} );
-
-		snapValues.y.forEach( ( snapValue ) => {
-			if ( snapValue - threshold < y && y < snapValue + threshold ) {
-				y = snapValue;
-			}
-		} );
-
-		return { x, y };
-	};
-
-	return <Example resolvePoint={ maybeSnapFocalPoint } />;
-};

package/src/navigable-container/test/menu.js

@@ -1,310 +0,0 @@
-/**
- * External dependencies
- */
-import { fireEvent, render, screen } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import { UP, DOWN, LEFT, RIGHT, SPACE } from '@wordpress/keycodes';
-
-/**
- * Internal dependencies
- */
-import { NavigableMenu } from '../menu';
-
-function simulateVisible( container, selector ) {
-	const elements = container.querySelectorAll( selector );
-	elements.forEach( ( elem ) => {
-		elem.getClientRects = () => [
-			'trick-jsdom-into-having-size-for-element-rect',
-		];
-	} );
-}
-
-function fireKeyDown( node, keyCode, shiftKey ) {
-	const interaction = {
-		stopped: false,
-	};
-
-	const event = new window.KeyboardEvent( 'keydown', {
-		keyCode,
-		shiftKey,
-	} );
-	event.stopImmediatePropagation = () => {
-		interaction.stopped = true;
-	};
-	fireEvent( node, event );
-
-	return interaction;
-}
-
-describe( 'NavigableMenu', () => {
-	it( 'vertical: should navigate by up and down', () => {
-		let currentIndex = 0;
-		const { container } = render(
-			/*
-				Disabled because of our rule restricting literal IDs, preferring
-				`withInstanceId`. In this case, it's fine to use literal IDs.
-			*/
-			/* eslint-disable no-restricted-syntax */
-			<NavigableMenu
-				orientation="vertical"
-				onNavigate={ ( index ) => ( currentIndex = index ) }
-			>
-				<span tabIndex="-1" id="btn1">
-					One
-				</span>
-				<span tabIndex="-1" id="btn2">
-					Two
-				</span>
-				<span id="btn-deep-wrapper">
-					<span id="btn-deep" tabIndex="-1">
-						Deep
-					</span>
-				</span>
-				<span tabIndex="-1" id="btn3">
-					Three
-				</span>
-			</NavigableMenu>
-			/* eslint-enable no-restricted-syntax */
-		);
-
-		simulateVisible( container, '*' );
-
-		container.querySelector( '#btn1' ).focus();
-
-		// Navigate options.
-		function assertKeyDown( keyCode, expectedActiveIndex, expectedStop ) {
-			const interaction = fireKeyDown(
-				screen.getByRole( 'menu' ),
-				keyCode,
-				false
-			);
-			expect( currentIndex ).toBe( expectedActiveIndex );
-			expect( interaction.stopped ).toBe( expectedStop );
-		}
-
-		assertKeyDown( DOWN, 1, true );
-		assertKeyDown( DOWN, 2, true );
-		assertKeyDown( DOWN, 3, true );
-		assertKeyDown( DOWN, 0, true );
-		assertKeyDown( UP, 3, true );
-		assertKeyDown( UP, 2, true );
-		assertKeyDown( UP, 1, true );
-		assertKeyDown( UP, 0, true );
-		assertKeyDown( LEFT, 0, true );
-		assertKeyDown( RIGHT, 0, true );
-		assertKeyDown( SPACE, 0, false );
-	} );
-
-	it( 'vertical: should navigate by up and down, and stop at edges', () => {
-		let currentIndex = 0;
-		const { container } = render(
-			/*
-				Disabled because of our rule restricting literal IDs, preferring
-				`withInstanceId`. In this case, it's fine to use literal IDs.
-			*/
-			/* eslint-disable no-restricted-syntax */
-			<NavigableMenu
-				cycle={ false }
-				orientation="vertical"
-				onNavigate={ ( index ) => ( currentIndex = index ) }
-			>
-				<span tabIndex="-1" id="btn1">
-					One
-				</span>
-				<span tabIndex="-1" id="btn2">
-					Two
-				</span>
-				<span tabIndex="-1" id="btn3">
-					Three
-				</span>
-			</NavigableMenu>
-			/* eslint-enable no-restricted-syntax */
-		);
-
-		simulateVisible( container, '*' );
-
-		container.querySelector( '#btn1' ).focus();
-
-		// Navigate options.
-		function assertKeyDown( keyCode, expectedActiveIndex, expectedStop ) {
-			const interaction = fireKeyDown(
-				screen.getByRole( 'menu' ),
-				keyCode,
-				false
-			);
-			expect( currentIndex ).toBe( expectedActiveIndex );
-			expect( interaction.stopped ).toBe( expectedStop );
-		}
-
-		assertKeyDown( DOWN, 1, true );
-		assertKeyDown( DOWN, 2, true );
-		assertKeyDown( DOWN, 2, true );
-		assertKeyDown( UP, 1, true );
-		assertKeyDown( UP, 0, true );
-		assertKeyDown( UP, 0, true );
-		assertKeyDown( LEFT, 0, true );
-		assertKeyDown( RIGHT, 0, true );
-		assertKeyDown( SPACE, 0, false );
-	} );
-
-	it( 'horizontal: should navigate by left and right', () => {
-		let currentIndex = 0;
-		const { container } = render(
-			/*
-				Disabled because of our rule restricting literal IDs, preferring
-				`withInstanceId`. In this case, it's fine to use literal IDs.
-			*/
-			/* eslint-disable no-restricted-syntax */
-			<NavigableMenu
-				orientation="horizontal"
-				onNavigate={ ( index ) => ( currentIndex = index ) }
-			>
-				<span tabIndex="-1" id="btn1">
-					One
-				</span>
-				<span tabIndex="-1" id="btn2">
-					Two
-				</span>
-				<span id="btn-deep-wrapper">
-					<span id="btn-deep" tabIndex="-1">
-						Deep
-					</span>
-				</span>
-				<span tabIndex="-1" id="btn3">
-					Three
-				</span>
-			</NavigableMenu>
-			/* eslint-enable no-restricted-syntax */
-		);
-
-		simulateVisible( container, '*' );
-
-		container.querySelector( '#btn1' ).focus();
-
-		// Navigate options.
-		function assertKeyDown( keyCode, expectedActiveIndex, expectedStop ) {
-			const interaction = fireKeyDown(
-				screen.getByRole( 'menu' ),
-				keyCode,
-				false
-			);
-			expect( currentIndex ).toBe( expectedActiveIndex );
-			expect( interaction.stopped ).toBe( expectedStop );
-		}
-
-		assertKeyDown( RIGHT, 1, true );
-		assertKeyDown( RIGHT, 2, true );
-		assertKeyDown( RIGHT, 3, true );
-		assertKeyDown( RIGHT, 0, true );
-		assertKeyDown( LEFT, 3, true );
-		assertKeyDown( LEFT, 2, true );
-		assertKeyDown( LEFT, 1, true );
-		assertKeyDown( LEFT, 0, true );
-		assertKeyDown( UP, 0, true );
-		assertKeyDown( DOWN, 0, true );
-		assertKeyDown( SPACE, 0, false );
-	} );
-
-	it( 'horizontal: should navigate by left and right, and stop at edges', () => {
-		let currentIndex = 0;
-		const { container } = render(
-			/*
-				Disabled because of our rule restricting literal IDs, preferring
-				`withInstanceId`. In this case, it's fine to use literal IDs.
-			*/
-			/* eslint-disable no-restricted-syntax */
-			<NavigableMenu
-				cycle={ false }
-				orientation="horizontal"
-				onNavigate={ ( index ) => ( currentIndex = index ) }
-			>
-				<span tabIndex="-1" id="btn1">
-					One
-				</span>
-				<span tabIndex="-1" id="btn2">
-					Two
-				</span>
-				<span tabIndex="-1" id="btn3">
-					Three
-				</span>
-			</NavigableMenu>
-			/* eslint-enable no-restricted-syntax */
-		);
-
-		simulateVisible( container, '*' );
-
-		container.querySelector( '#btn1' ).focus();
-
-		// Navigate options.
-		function assertKeyDown( keyCode, expectedActiveIndex, expectedStop ) {
-			const interaction = fireKeyDown(
-				screen.getByRole( 'menu' ),
-				keyCode,
-				false
-			);
-			expect( currentIndex ).toBe( expectedActiveIndex );
-			expect( interaction.stopped ).toBe( expectedStop );
-		}
-
-		assertKeyDown( RIGHT, 1, true );
-		assertKeyDown( RIGHT, 2, true );
-		assertKeyDown( RIGHT, 2, true );
-		assertKeyDown( LEFT, 1, true );
-		assertKeyDown( LEFT, 0, true );
-		assertKeyDown( LEFT, 0, true );
-		assertKeyDown( DOWN, 0, true );
-		assertKeyDown( UP, 0, true );
-		assertKeyDown( SPACE, 0, false );
-	} );
-
-	it( 'both: should navigate by up/down and left/right', () => {
-		let currentIndex = 0;
-		const { container } = render(
-			/*
-				Disabled because of our rule restricting literal IDs, preferring
-				`withInstanceId`. In this case, it's fine to use literal IDs.
-			*/
-			/* eslint-disable no-restricted-syntax */
-			<NavigableMenu
-				orientation="both"
-				onNavigate={ ( index ) => ( currentIndex = index ) }
-			>
-				<button id="btn1">One</button>
-				<button id="btn2">Two</button>
-				<button id="btn3">Three</button>
-			</NavigableMenu>
-			/* eslint-enable no-restricted-syntax */
-		);
-
-		simulateVisible( container, '*' );
-
-		container.querySelector( '#btn1' ).focus();
-
-		// Navigate options.
-		function assertKeyDown( keyCode, expectedActiveIndex, expectedStop ) {
-			const interaction = fireKeyDown(
-				screen.getByRole( 'menu' ),
-				keyCode
-			);
-			expect( currentIndex ).toBe( expectedActiveIndex );
-			expect( interaction.stopped ).toBe( expectedStop );
-		}
-
-		assertKeyDown( DOWN, 1, true );
-		assertKeyDown( DOWN, 2, true );
-		assertKeyDown( DOWN, 0, true );
-		assertKeyDown( RIGHT, 1, true );
-		assertKeyDown( RIGHT, 2, true );
-		assertKeyDown( RIGHT, 0, true );
-		assertKeyDown( UP, 2, true );
-		assertKeyDown( UP, 1, true );
-		assertKeyDown( UP, 0, true );
-		assertKeyDown( LEFT, 2, true );
-		assertKeyDown( LEFT, 1, true );
-		assertKeyDown( LEFT, 0, true );
-		assertKeyDown( SPACE, 0, false );
-	} );
-} );

package/src/navigable-container/test/tabbable.js

@@ -1,158 +0,0 @@
-/**
- * External dependencies
- */
-import { fireEvent, render } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import { TAB, SPACE } from '@wordpress/keycodes';
-
-/**
- * Internal dependencies
- */
-import { TabbableContainer } from '../tabbable';
-
-function simulateVisible( container, selector ) {
-	const elements = container.querySelectorAll( selector );
-	elements.forEach( ( elem ) => {
-		elem.getClientRects = () => [
-			'trick-jsdom-into-having-size-for-element-rect',
-		];
-	} );
-}
-
-function fireKeyDown( node, keyCode, shiftKey ) {
-	const interaction = {
-		stopped: false,
-	};
-
-	const event = new window.KeyboardEvent( 'keydown', {
-		keyCode,
-		shiftKey,
-	} );
-	event.stopImmediatePropagation = () => {
-		interaction.stopped = true;
-	};
-	fireEvent( node, event );
-
-	return interaction;
-}
-
-describe( 'TabbableContainer', () => {
-	it( 'should navigate by keypresses', () => {
-		let currentIndex = 0;
-		const { container } = render(
-			/*
-				Disabled because of our rule restricting literal IDs, preferring
-				`withInstanceId`. In this case, it's fine to use literal IDs.
-			*/
-			/* eslint-disable no-restricted-syntax */
-			<TabbableContainer
-				className="wrapper"
-				onNavigate={ ( index ) => ( currentIndex = index ) }
-			>
-				<div className="section" id="section1" tabIndex="0">
-					Section One
-				</div>
-				<div className="section" id="section2" tabIndex="0">
-					Section Two
-				</div>
-				<div className="deep-section-wrapper">
-					<div className="section" id="section-deep" tabIndex="0">
-						Section to <strong>not</strong> skip
-					</div>
-				</div>
-				<div className="section" id="section3" tabIndex="0">
-					Section Three
-				</div>
-			</TabbableContainer>
-			/* eslint-enable no-restricted-syntax */
-		);
-
-		simulateVisible( container, '*' );
-
-		container.querySelector( '#section1' ).focus();
-
-		// Navigate options.
-		function assertKeyDown(
-			keyCode,
-			shiftKey,
-			expectedActiveIndex,
-			expectedStop
-		) {
-			const interaction = fireKeyDown(
-				container.querySelector( '.wrapper' ),
-				keyCode,
-				shiftKey
-			);
-			expect( currentIndex ).toBe( expectedActiveIndex );
-			expect( interaction.stopped ).toBe( expectedStop );
-		}
-
-		assertKeyDown( TAB, false, 1, true );
-		assertKeyDown( TAB, false, 2, true );
-		assertKeyDown( TAB, false, 3, true );
-		assertKeyDown( TAB, false, 0, true );
-		assertKeyDown( TAB, true, 3, true );
-		assertKeyDown( TAB, true, 2, true );
-		assertKeyDown( TAB, true, 1, true );
-		assertKeyDown( TAB, true, 0, true );
-		assertKeyDown( SPACE, false, 0, false );
-	} );
-
-	it( 'should navigate by keypresses and stop at edges', () => {
-		let currentIndex = 0;
-		const { container } = render(
-			/*
-				Disabled because of our rule restricting literal IDs, preferring
-				`withInstanceId`. In this case, it's fine to use literal IDs.
-			*/
-			/* eslint-disable no-restricted-syntax */
-			<TabbableContainer
-				cycle={ false }
-				className="wrapper"
-				onNavigate={ ( index ) => ( currentIndex = index ) }
-			>
-				<div className="section" id="section1" tabIndex="0">
-					Section One
-				</div>
-				<div className="section" id="section2" tabIndex="0">
-					Section Two
-				</div>
-				<div className="section" id="section3" tabIndex="0">
-					Section Three
-				</div>
-			</TabbableContainer>
-			/* eslint-enable no-restricted-syntax */
-		);
-
-		simulateVisible( container, '*' );
-
-		container.querySelector( '#section1' ).focus();
-
-		// Navigate options.
-		function assertKeyDown(
-			keyCode,
-			shiftKey,
-			expectedActiveIndex,
-			expectedStop
-		) {
-			const interaction = fireKeyDown(
-				container.querySelector( '.wrapper' ),
-				keyCode,
-				shiftKey
-			);
-			expect( currentIndex ).toBe( expectedActiveIndex );
-			expect( interaction.stopped ).toBe( expectedStop );
-		}
-
-		assertKeyDown( TAB, false, 1, true );
-		assertKeyDown( TAB, false, 2, true );
-		assertKeyDown( TAB, false, 2, true );
-		assertKeyDown( TAB, true, 1, true );
-		assertKeyDown( TAB, true, 0, true );
-		assertKeyDown( TAB, true, 0, true );
-		assertKeyDown( SPACE, false, 0, false );
-	} );
-} );