@wordpress/components 19.12.0 → 19.15.0

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

@@ -1,320 +0,0 @@
-/**
- * External dependencies
- */
-import { fireEvent, render } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import RangeControl from '../';
-
-const getRangeInput = ( container ) =>
-	container.querySelector( 'input[type="range"]' );
-const getNumberInput = ( container ) =>
-	container.querySelector( 'input[type="number"]' );
-const getResetButton = ( container ) =>
-	container.querySelector( '.components-range-control__reset' );
-
-describe( 'RangeControl', () => {
-	describe( '#render()', () => {
-		it( 'should trigger change callback with numeric value', () => {
-			const onChange = jest.fn();
-
-			const { container } = render(
-				<RangeControl onChange={ onChange } />
-			);
-
-			const rangeInput = getRangeInput( container );
-			const numberInput = getNumberInput( container );
-
-			rangeInput.focus();
-			fireEvent.change( rangeInput, { target: { value: '5' } } );
-
-			numberInput.focus();
-			fireEvent.change( numberInput, { target: { value: '10' } } );
-
-			expect( onChange ).toHaveBeenCalledWith( 5 );
-			expect( onChange ).toHaveBeenCalledWith( 10 );
-		} );
-
-		it( 'should render with icons', () => {
-			const { container } = render(
-				<RangeControl
-					beforeIcon="format-image"
-					afterIcon="format-video"
-				/>
-			);
-
-			const beforeIcon = container.querySelector(
-				'.dashicons-format-image'
-			);
-			const afterIcon = container.querySelector(
-				'.dashicons-format-image'
-			);
-
-			expect( beforeIcon ).toBeTruthy();
-			expect( afterIcon ).toBeTruthy();
-		} );
-	} );
-
-	describe( 'validation', () => {
-		it( 'should not apply if new value is lower than minimum', () => {
-			const { container } = render( <RangeControl min={ 11 } /> );
-
-			const rangeInput = getRangeInput( container );
-			const numberInput = getNumberInput( container );
-
-			fireEvent.change( numberInput, { target: { value: '10' } } );
-			fireEvent.blur( numberInput );
-
-			expect( rangeInput.value ).not.toBe( '10' );
-		} );
-
-		it( 'should not apply if new value is greater than maximum', () => {
-			const { container } = render( <RangeControl max={ 20 } /> );
-
-			const rangeInput = getRangeInput( container );
-			const numberInput = getNumberInput( container );
-
-			fireEvent.change( numberInput, { target: { value: '21' } } );
-			fireEvent.blur( numberInput );
-
-			expect( rangeInput.value ).not.toBe( '21' );
-		} );
-
-		it( 'should not call onChange if new value is invalid', () => {
-			const onChange = jest.fn();
-			const { container } = render(
-				<RangeControl onChange={ onChange } min={ 10 } max={ 20 } />
-			);
-
-			const numberInput = getNumberInput( container );
-
-			numberInput.focus();
-			fireEvent.change( numberInput, { target: { value: '25e' } } );
-
-			expect( onChange ).not.toHaveBeenCalled();
-		} );
-
-		it( 'should keep invalid values in number input until loss of focus', () => {
-			const onChange = jest.fn();
-			const { container } = render(
-				<RangeControl onChange={ onChange } min={ -1 } max={ 1 } />
-			);
-
-			const rangeInput = getRangeInput( container );
-			const numberInput = getNumberInput( container );
-
-			numberInput.focus();
-			fireEvent.change( numberInput, { target: { value: '-1.1' } } );
-
-			expect( numberInput.value ).toBe( '-1.1' );
-			expect( rangeInput.value ).toBe( '-1' );
-
-			fireEvent.blur( numberInput );
-			expect( onChange ).toHaveBeenCalledWith( -1 );
-			expect( numberInput.value ).toBe( '-1' );
-		} );
-
-		it( 'should validate when provided a max or min of zero', () => {
-			const { container } = render(
-				<RangeControl min={ -100 } max={ 0 } />
-			);
-
-			const rangeInput = getRangeInput( container );
-			const numberInput = getNumberInput( container );
-
-			numberInput.focus();
-			fireEvent.change( numberInput, { target: { value: '1' } } );
-			fireEvent.blur( numberInput );
-
-			expect( rangeInput.value ).toBe( '0' );
-		} );
-
-		it( 'should validate when min and max are negative', () => {
-			const { container } = render(
-				<RangeControl min={ -100 } max={ -50 } />
-			);
-
-			const rangeInput = getRangeInput( container );
-			const numberInput = getNumberInput( container );
-
-			numberInput.focus();
-
-			fireEvent.change( numberInput, { target: { value: '-101' } } );
-			expect( rangeInput.value ).toBe( '-100' );
-
-			fireEvent.change( numberInput, { target: { value: '-49' } } );
-			expect( rangeInput.value ).toBe( '-50' );
-
-			fireEvent.change( numberInput, { target: { value: '-50' } } );
-			expect( rangeInput.value ).toBe( '-50' );
-		} );
-
-		it( 'should take into account the step starting from min', () => {
-			const onChange = jest.fn();
-			const { container } = render(
-				<RangeControl
-					onChange={ onChange }
-					min={ 0.1 }
-					step={ 0.125 }
-				/>
-			);
-
-			const rangeInput = getRangeInput( container );
-			const numberInput = getNumberInput( container );
-
-			numberInput.focus();
-			fireEvent.change( numberInput, { target: { value: '0.125' } } );
-
-			expect( onChange ).toHaveBeenCalledWith( 0.125 );
-			expect( rangeInput.value ).toBe( '0.125' );
-
-			fireEvent.change( numberInput, { target: { value: '0.225' } } );
-
-			expect( onChange ).toHaveBeenCalledWith( 0.225 );
-			expect( rangeInput.value ).toBe( '0.225' );
-		} );
-	} );
-
-	describe( 'initialPosition / value', () => {
-		it( 'should render initial rendered value of 50% of min/max, if no initialPosition or value is defined', () => {
-			const { container } = render(
-				<RangeControl min={ 0 } max={ 10 } />
-			);
-
-			const rangeInput = getRangeInput( container );
-
-			expect( rangeInput.value ).toBe( '5' );
-		} );
-
-		it( 'should render initialPosition if no value is provided', () => {
-			const { container } = render(
-				<RangeControl initialPosition={ 50 } />
-			);
-
-			const rangeInput = getRangeInput( container );
-
-			expect( rangeInput.value ).toBe( '50' );
-		} );
-
-		it( 'should render value instead of initialPosition is provided', () => {
-			const { container } = render(
-				<RangeControl initialPosition={ 50 } value={ 10 } />
-			);
-
-			const rangeInput = getRangeInput( container );
-
-			expect( rangeInput.value ).toBe( '10' );
-		} );
-	} );
-
-	describe( 'input field', () => {
-		it( 'should render an input field by default', () => {
-			const { container } = render( <RangeControl /> );
-
-			const numberInput = getNumberInput( container );
-
-			expect( numberInput ).toBeTruthy();
-		} );
-
-		it( 'should not render an input field, if disabled', () => {
-			const { container } = render(
-				<RangeControl withInputField={ false } />
-			);
-
-			const numberInput = getNumberInput( container );
-
-			expect( numberInput ).toBeFalsy();
-		} );
-
-		it( 'should render a zero value into input range and field', () => {
-			const { container } = render( <RangeControl value={ 0 } /> );
-
-			const rangeInput = getRangeInput( container );
-			const numberInput = getNumberInput( container );
-
-			expect( rangeInput.value ).toBe( '0' );
-			expect( numberInput.value ).toBe( '0' );
-		} );
-
-		it( 'should update both field and range on change', () => {
-			const { container } = render( <RangeControl /> );
-
-			const rangeInput = getRangeInput( container );
-			const numberInput = getNumberInput( container );
-
-			rangeInput.focus();
-			fireEvent.change( rangeInput, { target: { value: 13 } } );
-
-			expect( rangeInput.value ).toBe( '13' );
-			expect( numberInput.value ).toBe( '13' );
-
-			numberInput.focus();
-			fireEvent.change( numberInput, { target: { value: 7 } } );
-
-			expect( rangeInput.value ).toBe( '7' );
-			expect( numberInput.value ).toBe( '7' );
-		} );
-
-		it( 'should reset input values if next value is removed', () => {
-			const { container } = render( <RangeControl /> );
-
-			const rangeInput = getRangeInput( container );
-			const numberInput = getNumberInput( container );
-
-			fireEvent.change( numberInput, { target: { value: '' } } );
-			fireEvent.blur( numberInput );
-
-			// Reset to 50. Median value of min: 0, max: 100.
-			expect( rangeInput.value ).toBe( '50' );
-			// Input field should be blank.
-			expect( numberInput.value ).toBe( '' );
-		} );
-	} );
-
-	describe( 'reset', () => {
-		it( 'should reset to a custom fallback value, defined by a parent component', () => {
-			const spy = jest.fn();
-			const { container } = render(
-				<RangeControl
-					initialPosition={ 10 }
-					allowReset={ true }
-					onChange={ spy }
-					resetFallbackValue={ 33 }
-				/>
-			);
-
-			const resetButton = getResetButton( container );
-			const rangeInput = getRangeInput( container );
-			const numberInput = getNumberInput( container );
-
-			fireEvent.click( resetButton );
-
-			expect( rangeInput.value ).toBe( '33' );
-			expect( numberInput.value ).toBe( '33' );
-			expect( spy ).toHaveBeenCalledWith( 33 );
-		} );
-
-		it( 'should reset to a 50% of min/max value, of no initialPosition or value is defined', () => {
-			const { container } = render(
-				<RangeControl
-					initialPosition={ undefined }
-					min={ 0 }
-					max={ 100 }
-					allowReset={ true }
-					resetFallbackValue={ undefined }
-				/>
-			);
-
-			const resetButton = getResetButton( container );
-			const rangeInput = getRangeInput( container );
-			const numberInput = getNumberInput( container );
-
-			fireEvent.click( resetButton );
-
-			expect( rangeInput.value ).toBe( '50' );
-			expect( numberInput.value ).toBe( '' );
-		} );
-	} );
-} );

package/src/range-control/utils.js

@@ -1,132 +0,0 @@
-// @ts-nocheck
-/**
- * External dependencies
- */
-import { clamp, noop } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { useCallback, useRef, useEffect, useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { useControlledState } from '../utils/hooks';
-
-/**
- * A float supported clamp function for a specific value.
- *
- * @param {number|null} value The value to clamp.
- * @param {number}      min   The minimum value.
- * @param {number}      max   The maximum value.
- *
- * @return {number} A (float) number
- */
-export function floatClamp( value, min, max ) {
-	if ( typeof value !== 'number' ) {
-		return null;
-	}
-
-	return parseFloat( clamp( value, min, max ) );
-}
-
-/**
- * Hook to store a clamped value, derived from props.
- *
- * @param {Object} settings         Hook settings.
- * @param {number} settings.min     The minimum value.
- * @param {number} settings.max     The maximum value.
- * @param {number} settings.value   The current value.
- * @param {any}    settings.initial The initial value.
- *
- * @return {[*, Function]} The controlled value and the value setter.
- */
-export function useControlledRangeValue( {
-	min,
-	max,
-	value: valueProp,
-	initial,
-} ) {
-	const [ state, setInternalState ] = useControlledState(
-		floatClamp( valueProp, min, max ),
-		{ initial, fallback: null }
-	);
-
-	const setState = useCallback(
-		( nextValue ) => {
-			if ( nextValue === null ) {
-				setInternalState( null );
-			} else {
-				setInternalState( floatClamp( nextValue, min, max ) );
-			}
-		},
-		[ min, max ]
-	);
-
-	return [ state, setState ];
-}
-
-/**
- * Hook to encapsulate the debouncing "hover" to better handle the showing
- * and hiding of the Tooltip.
- *
- * @param {Object}   settings                     Hook settings.
- * @param {Function} [settings.onShow=noop]       A callback function invoked when the element is shown.
- * @param {Function} [settings.onHide=noop]       A callback function invoked when the element is hidden.
- * @param {Function} [settings.onMouseMove=noop]  A callback function invoked when the mouse is moved.
- * @param {Function} [settings.onMouseLeave=noop] A callback function invoked when the mouse is moved out of the element.
- * @param {number}   [settings.timeout=300]       Timeout before the element is shown or hidden.
- *
- * @return {Object} Bound properties for use on a React.Node.
- */
-export function useDebouncedHoverInteraction( {
-	onHide = noop,
-	onMouseLeave = noop,
-	onMouseMove = noop,
-	onShow = noop,
-	timeout = 300,
-} ) {
-	const [ show, setShow ] = useState( false );
-	const timeoutRef = useRef();
-
-	const setDebouncedTimeout = useCallback(
-		( callback ) => {
-			window.clearTimeout( timeoutRef.current );
-
-			timeoutRef.current = setTimeout( callback, timeout );
-		},
-		[ timeout ]
-	);
-
-	const handleOnMouseMove = useCallback( ( event ) => {
-		onMouseMove( event );
-
-		setDebouncedTimeout( () => {
-			if ( ! show ) {
-				setShow( true );
-				onShow();
-			}
-		} );
-	}, [] );
-
-	const handleOnMouseLeave = useCallback( ( event ) => {
-		onMouseLeave( event );
-
-		setDebouncedTimeout( () => {
-			setShow( false );
-			onHide();
-		} );
-	}, [] );
-
-	useEffect( () => {
-		return () => {
-			window.clearTimeout( timeoutRef.current );
-		};
-	} );
-
-	return {
-		onMouseMove: handleOnMouseMove,
-		onMouseLeave: handleOnMouseLeave,
-	};
-}

package/src/scrollable/test/index.js

@@ -1,31 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { Scrollable } from '../index';
-
-describe( 'props', () => {
-	let base;
-
-	beforeEach( () => {
-		( { container: base } = render(
-			<Scrollable>WordPress.org - Code is Poetry</Scrollable>
-		) );
-	} );
-	test( 'should render correctly', () => {
-		expect( base.firstChild ).toMatchSnapshot();
-	} );
-
-	test( 'should render smoothScroll', () => {
-		const { container } = render(
-			<Scrollable smoothScroll>WordPress.org - Code is Poetry</Scrollable>
-		);
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-} );

package/src/spacer/stories/index.js

@@ -1,59 +0,0 @@
-/**
- * External dependencies
- */
-import { number } from '@storybook/addon-knobs';
-
-/**
- * Internal dependencies
- */
-/**
- * Internal dependencies
- */
-import { Spacer } from '..';
-
-export default {
-	component: Spacer,
-	title: 'Components (Experimental)/Spacer',
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const PROPS = [
-	'margin',
-	'marginY',
-	'marginX',
-	'marginTop',
-	'marginBottom',
-	'marginLeft',
-	'marginRight',
-
-	'padding',
-	'paddingY',
-	'paddingX',
-	'paddingTop',
-	'paddingBottom',
-	'paddingLeft',
-	'paddingRight',
-];
-
-const BlackBox = () => (
-	<div
-		style={ { backgroundColor: 'black', width: '100px', height: '100px' } }
-	/>
-);
-
-export const _default = () => {
-	const props = PROPS.reduce(
-		( acc, prop ) => ( { ...acc, [ prop ]: number( prop, undefined ) } ),
-		{}
-	);
-
-	return (
-		<>
-			<BlackBox />
-			<Spacer { ...props }>This is the spacer</Spacer>
-			<BlackBox />
-		</>
-	);
-};

package/src/spacer/test/index.js

@@ -1,146 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { Spacer } from '../index';
-
-describe( 'props', () => {
-	let base;
-	beforeEach( () => {
-		base = render( <Spacer /> ).container;
-	} );
-
-	test( 'should render correctly', () => {
-		expect( base.firstChild ).toMatchSnapshot();
-	} );
-
-	test( 'should render margin', () => {
-		const { container } = render( <Spacer margin={ 5 } /> );
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-
-	test( 'should render marginX', () => {
-		const { container } = render( <Spacer marginX={ 5 } /> );
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-
-	test( 'should render marginY', () => {
-		const { container } = render( <Spacer marginY={ 5 } /> );
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-
-	test( 'should render marginTop', () => {
-		const { container } = render( <Spacer marginTop={ 5 } /> );
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-
-	test( 'should render marginBottom', () => {
-		const { container } = render( <Spacer marginBottom={ 5 } /> );
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-
-	test( 'should render marginLeft', () => {
-		const { container } = render( <Spacer marginLeft={ 5 } /> );
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-
-	test( 'should render marginRight', () => {
-		const { container } = render( <Spacer marginRight={ 5 } /> );
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-
-	test( 'should override margin props from less to more specific', () => {
-		const { container } = render(
-			<Spacer
-				margin={ 10 }
-				marginX={ 3 }
-				marginRight={ 5 }
-				marginBottom={ 1 }
-			/>
-		);
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-
-	test( 'should render padding', () => {
-		const { container } = render( <Spacer padding={ 5 } /> );
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-
-	test( 'should render paddingX', () => {
-		const { container } = render( <Spacer paddingX={ 5 } /> );
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-
-	test( 'should render paddingY', () => {
-		const { container } = render( <Spacer paddingY={ 5 } /> );
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-
-	test( 'should render paddingTop', () => {
-		const { container } = render( <Spacer paddingTop={ 5 } /> );
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-
-	test( 'should render paddingBottom', () => {
-		const { container } = render( <Spacer paddingBottom={ 5 } /> );
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-
-	test( 'should render paddingLeft', () => {
-		const { container } = render( <Spacer paddingLeft={ 5 } /> );
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-
-	test( 'should render paddingRight', () => {
-		const { container } = render( <Spacer paddingRight={ 5 } /> );
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-
-	test( 'should override padding props from less to more specific', () => {
-		const { container } = render(
-			<Spacer
-				padding={ 10 }
-				paddingY={ 2 }
-				paddingTop={ 5 }
-				paddingLeft={ 3 }
-			/>
-		);
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-} );