@wordpress/components 19.14.0 → 19.17.0

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

@@ -1,180 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import { styles, wordpress } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import RangeControl from '../index';
-
-const ICONS = { styles, wordpress };
-
-export default {
-	title: 'Components/RangeControl',
-	component: RangeControl,
-	argTypes: {
-		afterIcon: {
-			control: { type: 'select' },
-			options: Object.keys( ICONS ),
-			mapping: ICONS,
-		},
-		allowReset: { control: { type: 'boolean' } },
-		beforeIcon: {
-			control: { type: 'select' },
-			options: Object.keys( ICONS ),
-			mapping: ICONS,
-		},
-		color: { control: { type: 'color' } },
-		disabled: { control: { type: 'boolean' } },
-		help: { control: { type: 'text' } },
-		initialPosition: { control: { type: 'number' } },
-		marks: { control: { type: 'object' } },
-		min: { control: { type: 'number' } },
-		max: { control: { type: 'number' } },
-		railColor: { control: { type: 'color' } },
-		showTooltip: { control: { type: 'boolean' } },
-		step: { control: { type: 'number' } },
-		trackColor: { control: { type: 'color' } },
-		withInputField: { control: { type: 'boolean' } },
-	},
-	parameters: {
-		docs: { source: { state: 'open' } },
-	},
-};
-
-const RangeControlWithState = ( props ) => {
-	const [ value, setValue ] = useState();
-
-	return <RangeControl { ...props } value={ value } onChange={ setValue } />;
-};
-
-export const Default = RangeControlWithState.bind( {} );
-Default.args = {
-	label: 'Range label',
-};
-
-/**
- * The `initialPosition` prop sets the starting position of the slider when no `value` is provided.
- */
-export const InitialValueZero = RangeControlWithState.bind( {} );
-InitialValueZero.args = {
-	...Default.args,
-	initialPosition: 0,
-	max: 20,
-};
-
-/**
- * Setting the `step` prop to `"any"` will allow users to select non-integer values.
- * This also overrides both `withInputField` and `showTooltip` props to `false`.
- */
-export const WithAnyStep = ( props ) => {
-	const [ value, setValue ] = useState( 1.2345 );
-
-	return (
-		<>
-			<RangeControl value={ value } onChange={ setValue } { ...props } />
-			<p>Current value: { value }</p>
-		</>
-	);
-};
-WithAnyStep.args = {
-	label: 'Brightness',
-	step: 'any',
-};
-
-export const WithHelp = RangeControlWithState.bind( {} );
-WithHelp.args = {
-	...Default.args,
-	label: 'How many columns should this use?',
-	help: 'Please select the number of columns you would like this to contain.',
-};
-
-/**
- * Set `min` and `max` values to constrain the range of allowed values.
- */
-export const WithMinimumAndMaximumLimits = RangeControlWithState.bind( {} );
-WithMinimumAndMaximumLimits.args = {
-	...Default.args,
-	min: 2,
-	max: 10,
-};
-
-export const WithIconBefore = RangeControlWithState.bind( {} );
-WithIconBefore.args = {
-	...Default.args,
-	beforeIcon: wordpress,
-};
-
-export const WithIconAfter = RangeControlWithState.bind( {} );
-WithIconAfter.args = {
-	...Default.args,
-	afterIcon: wordpress,
-};
-
-export const WithReset = RangeControlWithState.bind( {} );
-WithReset.args = {
-	...Default.args,
-	allowReset: true,
-};
-
-/**
- * Use `marks` to render a visual representation of `step` ticks. Custom mark indicators can be provided by an `Array`.
- */
-export const WithMarks = ( props ) => {
-	const marksBase = [
-		{ value: 0, label: '0' },
-		{ value: 1, label: '1' },
-		{ value: 2, label: '2' },
-		{ value: 8, label: '8' },
-		{ value: 10, label: '10' },
-	];
-	const marksWithDecimal = [
-		...marksBase,
-		{ value: 3.5, label: '3.5' },
-		{ value: 5.8, label: '5.8' },
-	];
-	const marksWithNegatives = [
-		...marksBase,
-		{ value: -1, label: '-1' },
-		{ value: -2, label: '-2' },
-		{ value: -4, label: '-4' },
-		{ value: -8, label: '-8' },
-	];
-	const stepInteger = { min: 0, max: 10, step: 1 };
-	const stepDecimal = { min: 0, max: 10, step: 0.1 };
-	const minNegative = { min: -10, max: 10, step: 1 };
-	const rangeNegative = { min: -10, max: -1, step: 1 };
-
-	const Range = ( localProps ) => {
-		const label = Array.isArray( localProps.marks )
-			? 'Custom'
-			: 'Automatic';
-		return <RangeControl { ...{ ...localProps, ...props, label } } />;
-	};
-
-	return (
-		<>
-			<h2>Integer Step</h2>
-			<Range marks { ...stepInteger } />
-			<Range marks={ marksBase } { ...stepInteger } />
-
-			<h2>Decimal Step</h2>
-			<Range marks { ...stepDecimal } />
-			<Range marks={ marksWithDecimal } { ...stepDecimal } />
-
-			<h2>Negative Minimum</h2>
-			<Range marks { ...minNegative } />
-			<Range marks={ marksWithNegatives } { ...minNegative } />
-
-			<h2>Negative Range</h2>
-			<Range marks { ...rangeNegative } />
-			<Range marks={ marksWithNegatives } { ...rangeNegative } />
-
-			<h2>Any Step</h2>
-			<Range marks { ...{ ...stepInteger, step: 'any' } } />
-			<Range marks={ marksBase } { ...{ ...stepInteger, step: 'any' } } />
-		</>
-	);
-};

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,131 +0,0 @@
-// @ts-nocheck
-
-/**
- * WordPress dependencies
- */
-import { useCallback, useRef, useEffect, useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { useControlledState } from '../utils/hooks';
-import { clamp } from '../utils/math';
-
-const noop = () => {};
-
-/**
- * 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/scroll-lock/stories/index.js

@@ -1,71 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Button from '../../button';
-import ScrollLock from '../';
-
-export default { title: 'Components/ScrollLock', component: ScrollLock };
-
-const Example = () => {
-	const [ isScrollLocked, setScrollLocked ] = useState( false );
-	const toggleLock = () => setScrollLocked( ! isScrollLocked );
-
-	return (
-		<StripedBackground>
-			<div>Start scrolling down...</div>
-			<ToggleContainer>
-				<Button variant="secondary" onClick={ toggleLock }>
-					Toggle Scroll Lock
-				</Button>
-				{ isScrollLocked && <ScrollLock /> }
-				<p>
-					Scroll locked:{ ' ' }
-					<strong>{ isScrollLocked ? 'Yes' : 'No' }</strong>
-				</p>
-			</ToggleContainer>
-		</StripedBackground>
-	);
-};
-
-function StripedBackground( props ) {
-	return (
-		<div
-			style={ {
-				backgroundColor: '#fff',
-				backgroundImage:
-					'linear-gradient(transparent 50%, rgba(0, 0, 0, 0.05) 50%)',
-				backgroundSize: '50px 50px',
-				height: 3000,
-				position: 'relative',
-			} }
-			{ ...props }
-		/>
-	);
-}
-
-function ToggleContainer( props ) {
-	const { children } = props;
-	return (
-		<div
-			style={ {
-				position: 'sticky',
-				top: 0,
-				padding: 40,
-				display: 'flex',
-				justifyContent: 'center',
-				textAlign: 'center',
-			} }
-		>
-			<div>{ children }</div>
-		</div>
-	);
-}
-
-export const _default = () => {
-	return <Example />;
-};