@wordpress/components 18.0.0 → 19.0.3

package/src/ui/color-picker/picker.tsx

@@ -1,26 +0,0 @@
-/**
- * External dependencies
- */
-import type { ColorFormats } from 'tinycolor2';
-import { HslColorPicker, HslaColorPicker } from 'react-colorful';
-
-interface PickerProps {
-	color: ColorFormats.HSL | ColorFormats.HSLA;
-	enableAlpha: boolean;
-	onChange: ( nextColor: ColorFormats.HSL | ColorFormats.HSLA ) => void;
-}
-
-export const Picker = ( { color, enableAlpha, onChange }: PickerProps ) => {
-	// RC accepts s and l as a range from 0 - 100, whereas tinycolor expects a decimal value representing the percentage
-	// so we need to make sure that we're giving RC the correct color format that it expects
-	const reactColorfulColor = {
-		h: color.h,
-		s: color.s <= 1 ? Math.floor( color.s * 100 ) : color.s,
-		l: color.l <= 1 ? Math.floor( color.l * 100 ) : color.l,
-		a: ( color as ColorFormats.HSLA ).a,
-	};
-
-	const Component = enableAlpha ? HslaColorPicker : HslColorPicker;
-
-	return <Component color={ reactColorfulColor } onChange={ onChange } />;
-};

package/src/ui/color-picker/stories/index.js

@@ -1,81 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, select } from '@storybook/addon-knobs';
-import colorize from 'tinycolor2';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { ColorPicker } from '..';
-import { Flex } from '../../../flex';
-import { Spacer } from '../../../spacer';
-import { space } from '../../utils/space';
-
-export default {
-	component: ColorPicker,
-	title: 'Components (Experimental)/ColorPicker',
-};
-
-const PROP_UNSET = 'unset';
-
-const Example = () => {
-	const [ color, setColor ] = useState( undefined );
-	const props = {
-		enableAlpha: boolean( 'enableAlpha', false ),
-		copyFormat: select(
-			'copyFormat',
-			[ PROP_UNSET, 'rgb', 'hsl', 'hex' ],
-			PROP_UNSET
-		),
-	};
-
-	if ( props.copyFormat === PROP_UNSET ) {
-		delete props.copyFormat;
-	}
-
-	return (
-		<Flex
-			as={ Spacer }
-			gap={ space( 2 ) }
-			justify="space-around"
-			align="flex-start"
-			marginTop={ space( 10 ) }
-		>
-			<ColorPicker { ...props } color={ color } onChange={ setColor } />
-			<div style={ { width: 200, textAlign: 'center' } }>
-				{ colorize( color ).toHslString() }
-			</div>
-			<ColorPicker { ...props } color={ color } onChange={ setColor } />
-		</Flex>
-	);
-};
-
-export const _default = () => {
-	return <Example />;
-};
-
-const LegacyExample = () => {
-	const [ legacyColor, setLegacyColor ] = useState( '#fff' );
-	const legacyProps = {
-		color: legacyColor,
-		onChangeComplete: setLegacyColor,
-		disableAlpha: boolean( 'disableAlpha', true ),
-	};
-
-	return (
-		<Flex align="flex-start" justify="flex-start">
-			<ColorPicker { ...legacyProps } />
-			<pre style={ { width: '20em' } }>
-				{ JSON.stringify( legacyColor, undefined, 4 ) }
-			</pre>
-		</Flex>
-	);
-};
-
-export const legacy = () => <LegacyExample />;

package/src/ui/color-picker/test/index.js

@@ -1,168 +0,0 @@
-/**
- * External dependencies
- */
-import { render, fireEvent } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { ColorPicker } from '..';
-
-/**
- * Ordinarily we'd try to select the compnoent by role but the silder role appears
- * on several elements and we'd end up encoding assumptions about order when
- * trying to select the appropriate element. We might as well just use the classname
- * on the container which will be more durable if, for example, the order changes.
- *
- * @param {HTMLElement} container
- * @return {HTMLElement} The saturation element
- */
-function getSaturation( container ) {
-	return container.querySelector(
-		'.react-colorful__saturation .react-colorful__interactive'
-	);
-}
-
-// Fix to pass `pageX` and `pageY`
-// See https://github.com/testing-library/react-testing-library/issues/268
-class FakeMouseEvent extends window.MouseEvent {
-	constructor( type, values = {} ) {
-		super( type, { buttons: 1, bubbles: true, ...values } );
-
-		Object.assign( this, {
-			pageX: values.pageX || 0,
-			pageY: values.pageY || 0,
-		} );
-	}
-}
-
-function moveReactColorfulSlider( sliderElement, from, to ) {
-	fireEvent( sliderElement, new FakeMouseEvent( 'mousedown', from ) );
-	fireEvent( sliderElement, new FakeMouseEvent( 'mousemove', to ) );
-}
-
-const sleep = ( ms ) => {
-	const promise = new Promise( ( resolve ) => setTimeout( resolve, ms ) );
-	jest.advanceTimersByTime( ms + 1 );
-	return promise;
-};
-
-const hslMatcher = expect.objectContaining( {
-	h: expect.any( Number ),
-	s: expect.any( Number ),
-	l: expect.any( Number ),
-} );
-
-const hslaMatcher = expect.objectContaining( {
-	h: expect.any( Number ),
-	s: expect.any( Number ),
-	l: expect.any( Number ),
-	a: expect.any( Number ),
-} );
-
-const legacyColorMatcher = {
-	color: expect.anything(),
-	hex: expect.any( String ),
-	hsl: hslaMatcher,
-	hsv: expect.objectContaining( {
-		h: expect.any( Number ),
-		s: expect.any( Number ),
-		v: expect.any( Number ),
-		a: expect.any( Number ),
-	} ),
-	rgb: expect.objectContaining( {
-		r: expect.any( Number ),
-		g: expect.any( Number ),
-		b: expect.any( Number ),
-		a: expect.any( Number ),
-	} ),
-	oldHue: expect.any( Number ),
-	source: 'hex',
-};
-
-describe( 'ColorPicker', () => {
-	describe( 'legacy props', () => {
-		it( 'should fire onChangeComplete with the legacy color format', async () => {
-			const onChangeComplete = jest.fn();
-			const color = '#fff';
-
-			const { container } = render(
-				<ColorPicker
-					onChangeComplete={ onChangeComplete }
-					color={ color }
-				/>
-			);
-
-			const saturation = getSaturation( container );
-			moveReactColorfulSlider(
-				saturation,
-				{ pageX: 0, pageY: 0 },
-				{ pageX: 10, pageY: 10 }
-			);
-
-			// `onChange` is debounced so we need to sleep for at least 1ms before checking that onChange was called
-			await sleep( 1 );
-
-			expect( onChangeComplete ).toHaveBeenCalledWith(
-				legacyColorMatcher
-			);
-		} );
-	} );
-
-	it( 'should fire onChange with the HSLA value', async () => {
-		const onChange = jest.fn();
-		const color = {
-			h: 125,
-			s: 0.2,
-			l: 0.5,
-			a: 0.5,
-		};
-
-		const { container } = render(
-			<ColorPicker onChange={ onChange } color={ color } enableAlpha />
-		);
-
-		const saturation = getSaturation( container );
-		moveReactColorfulSlider(
-			saturation,
-			{ pageX: 0, pageY: 0 },
-			{ pageX: 10, pageY: 10 }
-		);
-
-		// `onChange` is debounced so we need to sleep for at least 1ms before checking that onChange was called
-		await sleep( 1 );
-
-		expect( onChange ).toHaveBeenCalledWith( hslaMatcher );
-	} );
-
-	it( 'should fire onChange with the HSL value', async () => {
-		const onChange = jest.fn();
-		const color = {
-			h: 125,
-			s: 0.2,
-			l: 0.5,
-			// add alpha to prove it's ignored
-			a: 0.5,
-		};
-
-		const { container } = render(
-			<ColorPicker
-				onChange={ onChange }
-				color={ color }
-				enableAlpha={ false }
-			/>
-		);
-
-		const saturation = getSaturation( container );
-		moveReactColorfulSlider(
-			saturation,
-			{ pageX: 0, pageY: 0 },
-			{ pageX: 10, pageY: 10 }
-		);
-
-		// `onChange` is debounced so we need to sleep for at least 1ms before checking that onChange was called
-		await sleep( 1 );
-
-		expect( onChange ).toHaveBeenCalledWith( hslMatcher );
-	} );
-} );

package/src/unit-control/unit-select-control.js

@@ -1,70 +0,0 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-import classnames from 'classnames';
-
-/**
- * Internal dependencies
- */
-import { UnitSelect, UnitLabel } from './styles/unit-control-styles';
-import { CSS_UNITS, hasUnits } from './utils';
-
-/**
- * Renders a `select` if there are multiple units.
- * Otherwise, renders a non-selectable label.
- *
- * @param {Object}   props                     Component props.
- * @param {string}   [props.className]         Class to set on the `select` element.
- * @param {boolean}  [props.isTabbable=true]   Whether the control can be focused via keyboard navigation.
- * @param {Array}    [props.options=CSS_UNITS] Available units to select from.
- * @param {Function} [props.onChange=noop]     A callback function invoked when the value is changed.
- * @param {string}   [props.size="default"]    Size of the control option. Supports "default" and "small".
- * @param {string}   [props.value="px"]        Current unit.
- */
-export default function UnitSelectControl( {
-	className,
-	isTabbable = true,
-	options = CSS_UNITS,
-	onChange = noop,
-	size = 'default',
-	value = 'px',
-	...props
-} ) {
-	if ( ! hasUnits( options ) || options.length === 1 ) {
-		return (
-			<UnitLabel
-				className="components-unit-control__unit-label"
-				size={ size }
-			>
-				{ value }
-			</UnitLabel>
-		);
-	}
-
-	const handleOnChange = ( event ) => {
-		const { value: unitValue } = event.target;
-		const data = options.find( ( option ) => option.value === unitValue );
-
-		onChange( unitValue, { event, data } );
-	};
-
-	const classes = classnames( 'components-unit-control__select', className );
-
-	return (
-		<UnitSelect
-			className={ classes }
-			onChange={ handleOnChange }
-			size={ size }
-			tabIndex={ isTabbable ? null : '-1' }
-			value={ value }
-			{ ...props }
-		>
-			{ options.map( ( option ) => (
-				<option value={ option.value } key={ option.value }>
-					{ option.label }
-				</option>
-			) ) }
-		</UnitSelect>
-	);
-}

package/src/utils/hooks/test/use-jump-step.js

@@ -1,127 +0,0 @@
-/**
- * External dependencies
- */
-import { render, fireEvent, screen } from '@testing-library/react';
-import { noop } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import { SHIFT } from '@wordpress/keycodes';
-
-/**
- * Internal dependencies
- */
-import useJumpStep from '../use-jump-step';
-
-const getInput = () => screen.getByTestId( 'input' );
-
-describe( 'hooks', () => {
-	describe( 'useJumpStep', () => {
-		const Example = ( {
-			value: valueProp,
-			onChange = noop,
-			step = 1,
-			shiftStep = 10,
-			isShiftStepEnabled = true,
-		} ) => {
-			const [ state, setState ] = useState( valueProp );
-			const jumpStep = useJumpStep( {
-				step,
-				shiftStep,
-				isShiftStepEnabled,
-			} );
-
-			const handleOnChange = ( event ) => {
-				const nextValue = event.target.value;
-				setState( nextValue );
-				onChange( nextValue );
-			};
-
-			return (
-				<input
-					data-testid="input"
-					type="number"
-					value={ state }
-					onChange={ handleOnChange }
-					step={ jumpStep }
-				/>
-			);
-		};
-
-		it( 'should use initial step value', () => {
-			render( <Example value={ 10 } step={ 66 } /> );
-			const input = getInput();
-
-			expect( input.getAttribute( 'step' ) ).toBe( '66' );
-		} );
-
-		it( 'should modify step value on shift key down/up press', () => {
-			render( <Example value={ 10 } /> );
-			const input = getInput();
-
-			expect( input.getAttribute( 'step' ) ).toBe( '1' );
-
-			fireEvent.keyDown( window, { keyCode: SHIFT, shiftKey: true } );
-
-			expect( input.getAttribute( 'step' ) ).toBe( '10' );
-
-			fireEvent.keyUp( window, { keyCode: SHIFT, shiftKey: false } );
-
-			expect( input.getAttribute( 'step' ) ).toBe( '1' );
-		} );
-
-		it( 'should not jump step if disabled', () => {
-			render(
-				<Example
-					value={ 10 }
-					isShiftStepEnabled={ false }
-					step={ 1 }
-					shiftStep={ 15 }
-				/>
-			);
-			const input = getInput();
-
-			expect( input.getAttribute( 'step' ) ).toBe( '1' );
-
-			fireEvent.keyDown( window, { keyCode: SHIFT, shiftKey: true } );
-
-			expect( input.getAttribute( 'step' ) ).toBe( '1' );
-
-			fireEvent.keyUp( window, { keyCode: SHIFT, shiftKey: false } );
-
-			expect( input.getAttribute( 'step' ) ).toBe( '1' );
-		} );
-
-		it( 'should calculate jumpStep value, using step as a multiplier to shiftStep', () => {
-			render( <Example value={ 10 } step={ 0.5 } shiftStep={ 10 } /> );
-			const input = getInput();
-
-			expect( input.getAttribute( 'step' ) ).toBe( '0.5' );
-
-			fireEvent.keyDown( window, { keyCode: SHIFT, shiftKey: true } );
-
-			expect( input.getAttribute( 'step' ) ).toBe( '5' );
-
-			fireEvent.keyUp( window, { keyCode: SHIFT, shiftKey: false } );
-
-			expect( input.getAttribute( 'step' ) ).toBe( '0.5' );
-		} );
-
-		it( 'should allow for float values in step and shiftStep', () => {
-			render( <Example value={ 10 } step={ 0.001 } shiftStep={ 10 } /> );
-			const input = getInput();
-
-			expect( input.getAttribute( 'step' ) ).toBe( '0.001' );
-
-			fireEvent.keyDown( window, { keyCode: SHIFT, shiftKey: true } );
-
-			expect( input.getAttribute( 'step' ) ).toBe( '0.01' );
-
-			fireEvent.keyUp( window, { keyCode: SHIFT, shiftKey: false } );
-
-			expect( input.getAttribute( 'step' ) ).toBe( '0.001' );
-		} );
-	} );
-} );

package/src/utils/hooks/use-jump-step.js

@@ -1,51 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useEffect, useState } from '@wordpress/element';
-
-/**
- * A custom hook that calculates a step value (used by elements like input
- * [type="number"]). This value can be modified based on whether the Shift
- * key is being held down.
- *
- * For example, a shiftStep of 10, and a step of 1...
- * Starting from 10, the next incremented value will be 11.
- *
- * Holding down shift...
- * Starting from 10, the next incremented value will be 20.
- *
- * @param {Object}  props                           Properties for the hook.
- * @param {boolean} [props.isShiftStepEnabled=true] Determines if jumping values with shift is enabled
- * @param {number}  [props.shiftStep=10]            Multiplier to jump by, when holding shift key.
- * @param {number}  [props.step=1]                  Multiplier to jump by, when not-holding shift key.
- *
- * @return {number} The jump step value.
- */
-function useJumpStep( {
-	isShiftStepEnabled = true,
-	shiftStep = 10,
-	step = 1,
-} ) {
-	const [ isShiftKey, setIsShiftKey ] = useState( false );
-
-	useEffect( () => {
-		/** @type {(event: KeyboardEvent)=>void} */
-		const handleShiftKeyToggle = ( event ) => {
-			setIsShiftKey( event.shiftKey );
-		};
-
-		window.addEventListener( 'keydown', handleShiftKeyToggle );
-		window.addEventListener( 'keyup', handleShiftKeyToggle );
-
-		return () => {
-			window.removeEventListener( 'keydown', handleShiftKeyToggle );
-			window.removeEventListener( 'keyup', handleShiftKeyToggle );
-		};
-	}, [] );
-
-	const isEnabled = isShiftStepEnabled && isShiftKey;
-
-	return isEnabled ? shiftStep * step : step;
-}
-
-export default useJumpStep;