@wordpress/components 22.0.0 → 23.0.0

package/src/base-field/test/index.js

@@ -1,67 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { useBaseField } from '../index';
-import { View } from '../../view';
-
-const TestField = ( props ) => {
-	return <View { ...useBaseField( props ) } />;
-};
-
-describe( 'base field', () => {
-	it( 'should render correctly', () => {
-		const base = render( <TestField /> ).container;
-		expect( base.firstChild ).toMatchSnapshot();
-	} );
-
-	describe( 'props', () => {
-		it( 'should render error styles', () => {
-			const base = render( <TestField /> ).container;
-			const { container } = render( <TestField hasError /> );
-			expect( container.firstChild ).toMatchStyleDiffSnapshot(
-				base.firstChild
-			);
-		} );
-
-		it( 'should render inline styles', () => {
-			const base = render( <TestField /> ).container;
-			const { container } = render( <TestField isInline /> );
-			expect( container.firstChild ).toMatchStyleDiffSnapshot(
-				base.firstChild
-			);
-		} );
-
-		it( 'should render subtle styles', () => {
-			const base = render( <TestField /> ).container;
-			const { container } = render( <TestField isSubtle /> );
-			expect( container.firstChild ).toMatchStyleDiffSnapshot(
-				base.firstChild
-			);
-		} );
-	} );
-
-	describe( 'useBaseField', () => {
-		it( 'should pass through disabled and defaultValue props', () => {
-			// wrap this in a component so that `useContext` calls don't fail inside the hook
-			// assertions will still run as normal when we `render` the component :)
-			const Component = () => {
-				const disabled = Symbol.for( 'disabled' );
-				const defaultValue = Symbol.for( 'defaultValue' );
-
-				const result = useBaseField( { disabled, defaultValue } );
-
-				expect( result.disabled ).toBe( disabled );
-				expect( result.defaultValue ).toBe( defaultValue );
-
-				return null;
-			};
-
-			render( <Component /> );
-		} );
-	} );
-} );

package/src/dashicon/index.js

@@ -1,26 +0,0 @@
-/**
- * @typedef OwnProps
- *
- * @property {import('./types').IconKey} icon        Icon name
- * @property {string}                    [className] Class name
- */
-/** @typedef {import('react').ComponentPropsWithoutRef<'span'> & OwnProps} Props */
-
-/**
- * @param {Props} props
- * @return {JSX.Element} Element
- */
-function Dashicon( { icon, className, ...extraProps } ) {
-	const iconClass = [
-		'dashicon',
-		'dashicons',
-		'dashicons-' + icon,
-		className,
-	]
-		.filter( Boolean )
-		.join( ' ' );
-
-	return <span className={ iconClass } { ...extraProps } />;
-}
-
-export default Dashicon;

package/src/draggable/stories/index.js

@@ -1,72 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import { Icon, more } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import Draggable from '../';
-
-export default { title: 'Components/Draggable', component: Draggable };
-
-const Box = ( props ) => {
-	return (
-		<div
-			{ ...props }
-			style={ {
-				alignItems: 'center',
-				display: 'flex',
-				justifyContent: 'center',
-				width: 100,
-				height: 100,
-				background: '#ddd',
-			} }
-		/>
-	);
-};
-
-const DraggalbeExample = () => {
-	const [ isDragging, setDragging ] = useState( false );
-
-	// Allow for the use of ID in the example.
-	/* eslint-disable no-restricted-syntax */
-	return (
-		<div>
-			<p>Is Dragging? { isDragging ? 'Yes' : 'No' }</p>
-			<div
-				id="draggable-example-box"
-				style={ { display: 'inline-flex' } }
-			>
-				<Draggable elementId="draggable-example-box">
-					{ ( { onDraggableStart, onDraggableEnd } ) => {
-						const handleOnDragStart = ( event ) => {
-							setDragging( true );
-							onDraggableStart( event );
-						};
-						const handleOnDragEnd = ( event ) => {
-							setDragging( false );
-							onDraggableEnd( event );
-						};
-
-						return (
-							<Box
-								onDragStart={ handleOnDragStart }
-								onDragEnd={ handleOnDragEnd }
-								draggable
-							>
-								<Icon icon={ more } />
-							</Box>
-						);
-					} }
-				</Draggable>
-			</div>
-		</div>
-	);
-	/* eslint-enable no-restricted-syntax */
-};
-
-export const _default = () => {
-	return <DraggalbeExample />;
-};

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

@@ -1,478 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import { UP, DOWN, ENTER } from '@wordpress/keycodes';
-
-/**
- * Internal dependencies
- */
-import BaseNumberControl from '../';
-
-const getInput = () => screen.getByTestId( 'input' );
-
-const fireKeyDown = ( data ) =>
-	fireEvent.keyDown( document.activeElement || document.body, data );
-
-const NumberControl = ( props ) => (
-	<BaseNumberControl { ...props } data-testid="input" />
-);
-
-function StatefulNumberControl( props ) {
-	const [ value, setValue ] = useState( props.value );
-	const handleOnChange = ( v ) => setValue( v );
-
-	return (
-		<NumberControl
-			{ ...props }
-			value={ value }
-			onChange={ handleOnChange }
-		/>
-	);
-}
-
-describe( 'NumberControl', () => {
-	describe( 'Basic rendering', () => {
-		it( 'should render', () => {
-			render( <NumberControl /> );
-			expect( getInput() ).not.toBeNull();
-		} );
-
-		it( 'should render custom className', () => {
-			render( <NumberControl className="hello" /> );
-			expect( getInput() ).toBeTruthy();
-		} );
-	} );
-
-	describe( 'onChange handling', () => {
-		it( 'should provide onChange callback with number value', () => {
-			const spy = jest.fn();
-
-			render(
-				<NumberControl value={ 5 } onChange={ ( v ) => spy( v ) } />
-			);
-
-			const input = getInput();
-			input.focus();
-			fireEvent.change( input, { target: { value: 10 } } );
-
-			expect( spy ).toHaveBeenCalledWith( '10' );
-		} );
-
-		it( 'should call onChange callback when value is clamped on blur', async () => {
-			const spy = jest.fn();
-			render(
-				<NumberControl
-					value={ 5 }
-					min={ 4 }
-					max={ 10 }
-					onChange={ ( v ) => spy( v ) }
-				/>
-			);
-
-			const input = getInput();
-			input.focus();
-			fireEvent.change( input, { target: { value: 1 } } );
-
-			// Before blurring, the value is still un-clamped
-			expect( input.value ).toBe( '1' );
-
-			input.blur();
-
-			// After blur, value is clamped
-			expect( input.value ).toBe( '4' );
-
-			// After the blur, the `onChange` callback fires asynchronously.
-			await waitFor( () => {
-				expect( spy ).toHaveBeenCalledTimes( 2 );
-			} );
-
-			expect( spy ).toHaveBeenNthCalledWith( 1, '1' );
-			expect( spy ).toHaveBeenNthCalledWith( 2, 4 );
-		} );
-
-		it( 'should call onChange callback when value is not valid', () => {
-			const spy = jest.fn();
-			render(
-				<NumberControl
-					value={ 5 }
-					min={ 1 }
-					max={ 10 }
-					onChange={ ( v, extra ) =>
-						spy( v, extra.event.target.validity.valid )
-					}
-				/>
-			);
-
-			const input = getInput();
-			input.focus();
-			fireEvent.change( input, { target: { value: 14 } } );
-
-			expect( input.value ).toBe( '14' );
-
-			fireKeyDown( { keyCode: ENTER } );
-
-			expect( input.value ).toBe( '10' );
-
-			expect( spy ).toHaveBeenCalledTimes( 2 );
-
-			// First call: invalid, unclamped value
-			expect( spy ).toHaveBeenNthCalledWith( 1, '14', false );
-			// Second call: valid, clamped value
-			expect( spy ).toHaveBeenNthCalledWith( 2, 10, true );
-		} );
-	} );
-
-	describe( 'Validation', () => {
-		it( 'should clamp value within range on ENTER keypress', () => {
-			render( <NumberControl value={ 5 } min={ 0 } max={ 10 } /> );
-
-			const input = getInput();
-			input.focus();
-			fireEvent.change( input, { target: { value: -100 } } );
-			fireKeyDown( { keyCode: ENTER } );
-
-			/**
-			 * This is zero because the value has been adjusted to
-			 * respect the min/max range of the input.
-			 */
-
-			expect( input.value ).toBe( '0' );
-		} );
-
-		it( 'should clamp value within range on blur', () => {
-			render( <NumberControl value={ 5 } min={ 0 } max={ 10 } /> );
-
-			const input = getInput();
-			input.focus();
-			fireEvent.change( input, { target: { value: 41 } } );
-
-			// Before blurring, the value is still un-clamped
-			expect( input.value ).toBe( '41' );
-
-			input.blur();
-
-			// After blur, value is clamped
-			expect( input.value ).toBe( '10' );
-		} );
-
-		it( 'should parse to number value on ENTER keypress when required', () => {
-			render( <NumberControl value={ 5 } required={ true } /> );
-
-			const input = getInput();
-			input.focus();
-			fireEvent.change( input, { target: { value: '10 abc' } } );
-			fireKeyDown( { keyCode: ENTER } );
-
-			expect( input.value ).toBe( '0' );
-		} );
-
-		it( 'should parse to empty string on ENTER keypress when not required', () => {
-			render( <NumberControl value={ 5 } required={ false } /> );
-
-			const input = getInput();
-			input.focus();
-			fireEvent.change( input, { target: { value: '10 abc' } } );
-			fireKeyDown( { keyCode: ENTER } );
-
-			expect( input.value ).toBe( '' );
-		} );
-
-		it( 'should accept empty string on ENTER keypress for optional field', () => {
-			render( <NumberControl value={ 5 } required={ false } /> );
-
-			const input = getInput();
-			input.focus();
-			fireEvent.change( input, { target: { value: '' } } );
-			fireKeyDown( { keyCode: ENTER } );
-
-			expect( input.value ).toBe( '' );
-		} );
-
-		it( 'should not enforce numerical value for empty string when required is omitted', () => {
-			render( <NumberControl value={ 5 } /> );
-
-			const input = getInput();
-			input.focus();
-			fireEvent.change( input, { target: { value: '' } } );
-			fireKeyDown( { keyCode: ENTER } );
-
-			expect( input.value ).toBe( '' );
-		} );
-
-		it( 'should enforce numerical value for empty string when required', () => {
-			render( <NumberControl value={ 5 } required={ true } /> );
-
-			const input = getInput();
-			input.focus();
-			fireEvent.change( input, { target: { value: '' } } );
-			fireKeyDown( { keyCode: ENTER } );
-
-			expect( input.value ).toBe( '0' );
-		} );
-	} );
-
-	describe( 'Key UP interactions', () => {
-		it( 'should fire onKeyDown callback', () => {
-			const spy = jest.fn();
-
-			render( <StatefulNumberControl value={ 5 } onKeyDown={ spy } /> );
-
-			getInput().focus();
-			fireKeyDown( { keyCode: UP } );
-
-			expect( spy ).toHaveBeenCalled();
-		} );
-
-		it( 'should increment by step on key UP press', () => {
-			render( <StatefulNumberControl value={ 5 } /> );
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: UP } );
-
-			expect( input.value ).toBe( '6' );
-		} );
-
-		it( 'should increment from a negative value', () => {
-			render( <StatefulNumberControl value={ -5 } /> );
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: UP } );
-
-			expect( input.value ).toBe( '-4' );
-		} );
-
-		it( 'should increment while preserving the decimal value when `step` is “any”', () => {
-			render( <StatefulNumberControl value={ 866.5309 } step="any" /> );
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: UP } );
-
-			expect( input.value ).toBe( '867.5309' );
-		} );
-
-		it( 'should increment by shiftStep on key UP + shift press', () => {
-			render( <StatefulNumberControl value={ 5 } shiftStep={ 10 } /> );
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: UP, shiftKey: true } );
-
-			expect( input.value ).toBe( '20' );
-		} );
-
-		it( 'should increment by shiftStep while preserving the decimal value when `step` is “any”', () => {
-			render( <StatefulNumberControl value={ 857.5309 } step="any" /> );
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: UP, shiftKey: true } );
-
-			expect( input.value ).toBe( '867.5309' );
-		} );
-
-		it( 'should increment by custom shiftStep on key UP + shift press', () => {
-			render( <StatefulNumberControl value={ 5 } shiftStep={ 100 } /> );
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: UP, shiftKey: true } );
-
-			expect( input.value ).toBe( '100' );
-		} );
-
-		it( 'should increment but be limited by max on shiftStep', () => {
-			render(
-				<StatefulNumberControl
-					value={ 5 }
-					shiftStep={ 100 }
-					max={ 99 }
-				/>
-			);
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: UP, shiftKey: true } );
-
-			expect( input.value ).toBe( '99' );
-		} );
-
-		it( 'should not increment by shiftStep if disabled', () => {
-			render(
-				<StatefulNumberControl
-					value={ 5 }
-					shiftStep={ 100 }
-					isShiftStepEnabled={ false }
-				/>
-			);
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: UP, shiftKey: true } );
-
-			expect( input.value ).toBe( '6' );
-		} );
-	} );
-
-	describe( 'Key DOWN interactions', () => {
-		it( 'should fire onKeyDown callback', () => {
-			const spy = jest.fn();
-			render( <StatefulNumberControl value={ 5 } onKeyDown={ spy } /> );
-
-			getInput().focus();
-			fireKeyDown( { keyCode: DOWN } );
-
-			expect( spy ).toHaveBeenCalled();
-		} );
-
-		it( 'should decrement by step on key DOWN press', () => {
-			render( <StatefulNumberControl value={ 5 } /> );
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: DOWN } );
-
-			expect( input.value ).toBe( '4' );
-		} );
-
-		it( 'should decrement from a negative value', () => {
-			render( <StatefulNumberControl value={ -5 } /> );
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: DOWN } );
-
-			expect( input.value ).toBe( '-6' );
-		} );
-
-		it( 'should decrement while preserving the decimal value when `step` is “any”', () => {
-			render( <StatefulNumberControl value={ 868.5309 } step="any" /> );
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: DOWN } );
-
-			expect( input.value ).toBe( '867.5309' );
-		} );
-
-		it( 'should decrement by shiftStep on key DOWN + shift press', () => {
-			render( <StatefulNumberControl value={ 5 } /> );
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: DOWN, shiftKey: true } );
-
-			expect( input.value ).toBe( '0' );
-		} );
-
-		it( 'should decrement by shiftStep while preserving the decimal value when `step` is “any”', () => {
-			render( <StatefulNumberControl value={ 877.5309 } step="any" /> );
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: DOWN, shiftKey: true } );
-
-			expect( input.value ).toBe( '867.5309' );
-		} );
-
-		it( 'should decrement by custom shiftStep on key DOWN + shift press', () => {
-			render( <StatefulNumberControl value={ 5 } shiftStep={ 100 } /> );
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: DOWN, shiftKey: true } );
-
-			expect( input.value ).toBe( '-100' );
-		} );
-
-		it( 'should decrement but be limited by min on shiftStep', () => {
-			render(
-				<StatefulNumberControl
-					value={ 5 }
-					shiftStep={ 100 }
-					min={ 4 }
-				/>
-			);
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: DOWN, shiftKey: true } );
-
-			expect( input.value ).toBe( '4' );
-		} );
-
-		it( 'should not decrement by shiftStep if disabled', () => {
-			render(
-				<StatefulNumberControl
-					value={ 5 }
-					shiftStep={ 100 }
-					isShiftStepEnabled={ false }
-				/>
-			);
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: DOWN, shiftKey: true } );
-
-			expect( input.value ).toBe( '4' );
-		} );
-	} );
-
-	describe( 'custom spin buttons', () => {
-		test.each( [ undefined, 'none', 'native' ] )(
-			'should not appear when spinControls = %s',
-			( spinControls ) => {
-				render( <NumberControl spinControls={ spinControls } /> );
-				expect(
-					screen.queryByLabelText( 'Increment' )
-				).not.toBeInTheDocument();
-				expect(
-					screen.queryByLabelText( 'Decrement' )
-				).not.toBeInTheDocument();
-			}
-		);
-
-		test.each( [
-			[ 'up', '1', {} ],
-			[ 'up', '2', { value: '1' } ],
-			[ 'up', '12', { value: '10', step: '2' } ],
-			[ 'up', '10', { value: '10', max: '10' } ],
-			[ 'down', '-1', {} ],
-			[ 'down', '1', { value: '2' } ],
-			[ 'down', '10', { value: '12', step: '2' } ],
-			[ 'down', '10', { value: '10', min: '10' } ],
-		] )(
-			'should spin %s to %s when props = %o',
-			async ( direction, expectedValue, props ) => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
-				const onChange = jest.fn();
-				render(
-					<NumberControl
-						{ ...props }
-						spinControls="custom"
-						onChange={ onChange }
-					/>
-				);
-				await user.click(
-					screen.getByLabelText(
-						direction === 'up' ? 'Increment' : 'Decrement'
-					)
-				);
-				expect( onChange ).toHaveBeenCalledWith( expectedValue, {
-					event: expect.anything(),
-				} );
-			}
-		);
-	} );
-} );