@wordpress/components 20.0.0 → 21.0.0

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 );
-	} );
-} );

package/src/number-control/index.js

@@ -1,192 +0,0 @@
-// @ts-nocheck
-/**
- * External dependencies
- */
-import classNames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-import { isRTL } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { Input } from './styles/number-control-styles';
-import * as inputControlActionTypes from '../input-control/reducer/actions';
-import { add, subtract, roundClamp } from '../utils/math';
-import { isValueEmpty } from '../utils/values';
-
-export function NumberControl(
-	{
-		__unstableStateReducer: stateReducerProp,
-		className,
-		dragDirection = 'n',
-		hideHTMLArrows = false,
-		isDragEnabled = true,
-		isShiftStepEnabled = true,
-		label,
-		max = Infinity,
-		min = -Infinity,
-		required = false,
-		shiftStep = 10,
-		step = 1,
-		type: typeProp = 'number',
-		value: valueProp,
-		...props
-	},
-	ref
-) {
-	const isStepAny = step === 'any';
-	const baseStep = isStepAny ? 1 : parseFloat( step );
-	const baseValue = roundClamp( 0, min, max, baseStep );
-	const constrainValue = ( value, stepOverride ) => {
-		// When step is "any" clamp the value, otherwise round and clamp it.
-		return isStepAny
-			? Math.min( max, Math.max( min, value ) )
-			: roundClamp( value, min, max, stepOverride ?? baseStep );
-	};
-
-	const autoComplete = typeProp === 'number' ? 'off' : null;
-	const classes = classNames( 'components-number-control', className );
-
-	/**
-	 * "Middleware" function that intercepts updates from InputControl.
-	 * This allows us to tap into actions to transform the (next) state for
-	 * InputControl.
-	 *
-	 * @param {Object} state  State from InputControl
-	 * @param {Object} action Action triggering state change
-	 * @return {Object} The updated state to apply to InputControl
-	 */
-	const numberControlStateReducer = ( state, action ) => {
-		const nextState = { ...state };
-
-		const { type, payload } = action;
-		const event = payload?.event;
-		const currentValue = nextState.value;
-
-		/**
-		 * Handles custom UP and DOWN Keyboard events
-		 */
-		if (
-			type === inputControlActionTypes.PRESS_UP ||
-			type === inputControlActionTypes.PRESS_DOWN
-		) {
-			const enableShift = event.shiftKey && isShiftStepEnabled;
-
-			const incrementalValue = enableShift
-				? parseFloat( shiftStep ) * baseStep
-				: baseStep;
-			let nextValue = isValueEmpty( currentValue )
-				? baseValue
-				: currentValue;
-
-			if ( event?.preventDefault ) {
-				event.preventDefault();
-			}
-
-			if ( type === inputControlActionTypes.PRESS_UP ) {
-				nextValue = add( nextValue, incrementalValue );
-			}
-
-			if ( type === inputControlActionTypes.PRESS_DOWN ) {
-				nextValue = subtract( nextValue, incrementalValue );
-			}
-
-			nextState.value = constrainValue(
-				nextValue,
-				enableShift ? incrementalValue : null
-			);
-		}
-
-		/**
-		 * Handles drag to update events
-		 */
-		if ( type === inputControlActionTypes.DRAG && isDragEnabled ) {
-			const [ x, y ] = payload.delta;
-			const enableShift = payload.shiftKey && isShiftStepEnabled;
-			const modifier = enableShift
-				? parseFloat( shiftStep ) * baseStep
-				: baseStep;
-
-			let directionModifier;
-			let delta;
-
-			switch ( dragDirection ) {
-				case 'n':
-					delta = y;
-					directionModifier = -1;
-					break;
-
-				case 'e':
-					delta = x;
-					directionModifier = isRTL() ? -1 : 1;
-					break;
-
-				case 's':
-					delta = y;
-					directionModifier = 1;
-					break;
-
-				case 'w':
-					delta = x;
-					directionModifier = isRTL() ? 1 : -1;
-					break;
-			}
-
-			if ( delta !== 0 ) {
-				delta = Math.ceil( Math.abs( delta ) ) * Math.sign( delta );
-				const distance = delta * modifier * directionModifier;
-
-				nextState.value = constrainValue(
-					add( currentValue, distance ),
-					enableShift ? modifier : null
-				);
-			}
-		}
-
-		/**
-		 * Handles commit (ENTER key press or blur)
-		 */
-		if (
-			type === inputControlActionTypes.PRESS_ENTER ||
-			type === inputControlActionTypes.COMMIT
-		) {
-			const applyEmptyValue = required === false && currentValue === '';
-
-			nextState.value = applyEmptyValue
-				? currentValue
-				: constrainValue( currentValue );
-		}
-
-		return nextState;
-	};
-
-	return (
-		<Input
-			autoComplete={ autoComplete }
-			inputMode="numeric"
-			{ ...props }
-			className={ classes }
-			dragDirection={ dragDirection }
-			hideHTMLArrows={ hideHTMLArrows }
-			isDragEnabled={ isDragEnabled }
-			label={ label }
-			max={ max }
-			min={ min }
-			ref={ ref }
-			required={ required }
-			step={ step }
-			type={ typeProp }
-			value={ valueProp }
-			__unstableStateReducer={ ( state, action ) => {
-				const baseState = numberControlStateReducer( state, action );
-				return stateReducerProp?.( baseState, action ) ?? baseState;
-			} }
-		/>
-	);
-}
-
-export default forwardRef( NumberControl );