@wordpress/components 19.4.1-next.f435e9e01b.0 → 19.6.1-next.a55ed9455a.0

package/src/flyout/flyout/component.js

@@ -22,7 +22,7 @@ import { useFlyout } from './hook';
 /**
  *
  * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div', false>} props
- * @param {import('react').Ref<any>}                                                                   forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                          forwardedRef
  */
 function Flyout( props, forwardedRef ) {
 	const {

package/src/flyout/flyout-content/component.js

@@ -8,7 +8,7 @@ import { contextConnect, useContextSystem } from '../../ui/context';
 /**
  *
  * @param {import('../../ui/context').WordPressComponentProps<import('../types').ContentProps, 'div', false>} props
- * @param {import('react').Ref<any>}                                                                          forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                                 forwardedRef forwardedRef
  */
 function FlyoutContent( props, forwardedRef ) {
 	const {

package/src/flyout/test/index.js

@@ -44,7 +44,7 @@ describe( 'props', () => {
 
 		const flyouts = screen.getAllByRole( 'dialog' );
 		const trigger = screen.getByText( invisibleFlyoutTriggerContent );
-		// assert only the base flyout rendered
+		// Assert only the base flyout rendered.
 		expect( flyouts ).toHaveLength( 1 );
 		expect( flyouts[ 0 ].id ).toBe( baseFlyoutId );
 		expect( trigger ).not.toBeUndefined();

package/src/focal-point-picker/README.md

@@ -94,3 +94,10 @@ Callback which is called at the end of drag operations.
 -   Required: No
 
 Callback which is called at the start of drag operations.
+
+### `resolvePoint`
+
+-   Type: `Function`
+-   Required: No
+
+Function which is called before internal updates to the value state. It receives the upcoming value and may return a modified one.

package/src/focal-point-picker/index.js

@@ -49,8 +49,9 @@ export class FocalPointPicker extends Component {
 			}
 		};
 		this.onChangeAtControls = ( value ) => {
-			this.updateValue( value );
-			this.props.onChange( value );
+			this.updateValue( value, () => {
+				this.props.onChange( this.state.percentages );
+			} );
 		};
 
 		this.updateBounds = this.updateBounds.bind( this );
@@ -128,15 +129,18 @@ export class FocalPointPicker extends Component {
 		}
 		return bounds;
 	}
-	updateValue( nextValue = {} ) {
-		const { x, y } = nextValue;
+	updateValue( nextValue = {}, callback ) {
+		const resolvedValue =
+			this.props.resolvePoint?.( nextValue ) ?? nextValue;
+
+		const { x, y } = resolvedValue;
 
 		const nextPercentage = {
 			x: parseFloat( x ).toFixed( 2 ),
 			y: parseFloat( y ).toFixed( 2 ),
 		};
 
-		this.setState( { percentages: nextPercentage } );
+		this.setState( { percentages: nextPercentage }, callback );
 	}
 	updateBounds() {
 		this.setState( {
@@ -180,8 +184,9 @@ export class FocalPointPicker extends Component {
 
 		next[ axis ] = roundClamp( value, 0, 1, step );
 
-		this.updateValue( next );
-		this.props.onChange( next );
+		this.updateValue( next, () => {
+			this.props.onChange( this.state.percentages );
+		} );
 	}
 	doDrag( event ) {
 		// Prevents text-selection when dragging.

package/src/focal-point-picker/index.native.js

@@ -27,7 +27,7 @@ import { isVideoType } from './utils';
 
 const MIN_POSITION_VALUE = 0;
 const MAX_POSITION_VALUE = 100;
-const FOCAL_POINT_UNITS = [ { default: '50', label: '%', value: '%' } ];
+const FOCAL_POINT_UNITS = [ { default: 50, label: '%', value: '%' } ];
 
 function FocalPointPicker( props ) {
 	const { focalPoint, onChange, shouldEnableBottomSheetScroll, url } = props;
@@ -53,7 +53,7 @@ function FocalPointPicker( props ) {
 		} );
 	}, [] );
 
-	// Animated coordinates for drag handle
+	// Animated coordinates for drag handle.
 	const pan = useRef( new Animated.ValueXY() ).current;
 
 	/**
@@ -69,7 +69,7 @@ function FocalPointPicker( props ) {
 		}
 	}, [ focalPoint, containerSize ] );
 
-	// Pan responder to manage drag handle interactivity
+	// Pan responder to manage drag handle interactivity.
 	const panResponder = useMemo(
 		() =>
 			PanResponder.create( {
@@ -88,17 +88,17 @@ function FocalPointPicker( props ) {
 					} = event.nativeEvent;
 					locationPageOffsetX = pageX - x;
 					locationPageOffsetY = pageY - y;
-					pan.setValue( { x, y } ); // Set cursor to tap location
-					pan.extractOffset(); // Set offset to current value
+					pan.setValue( { x, y } ); // Set cursor to tap location.
+					pan.extractOffset(); // Set offset to current value.
 				},
-				// Move cursor to match delta drag
+				// Move cursor to match delta drag.
 				onPanResponderMove: Animated.event(
 					[ null, { dx: pan.x, dy: pan.y } ],
 					{ useNativeDriver: false }
 				),
 				onPanResponderRelease: ( event ) => {
 					shouldEnableBottomSheetScroll( true );
-					pan.flattenOffset(); // Flatten offset into value
+					pan.flattenOffset(); // Flatten offset into value.
 					const { pageX, pageY } = event.nativeEvent;
 					// Ideally, x and y below are merely locationX and locationY from the
 					// nativeEvent. However, we are required to compute these relative

package/src/focal-point-picker/stories/index.js

@@ -44,3 +44,33 @@ export const video = () => {
 
 	return <Example url={ url } />;
 };
+
+export const snapping = () => {
+	const snapValues = {
+		x: [ 0, 0.33, 0.66, 1 ],
+		y: [ 0, 0.33, 0.66, 1 ],
+	};
+
+	const threshold = 0.05;
+
+	const maybeSnapFocalPoint = ( value ) => {
+		let x = parseFloat( value.x );
+		let y = parseFloat( value.y );
+
+		snapValues.x.forEach( ( snapValue ) => {
+			if ( snapValue - threshold < x && x < snapValue + threshold ) {
+				x = snapValue;
+			}
+		} );
+
+		snapValues.y.forEach( ( snapValue ) => {
+			if ( snapValue - threshold < y && y < snapValue + threshold ) {
+				y = snapValue;
+			}
+		} );
+
+		return { x, y };
+	};
+
+	return <Example resolvePoint={ maybeSnapFocalPoint } />;
+};

package/src/focal-point-picker/test/index.js

@@ -62,6 +62,34 @@ describe( 'FocalPointPicker', () => {
 		} );
 	} );
 
+	describe( 'resolvePoint handling', () => {
+		it( 'should allow value altering', async () => {
+			const spyChange = jest.fn();
+			const spy = jest.fn();
+			const { getByRole } = render(
+				<Picker
+					value={ { x: 0.25, y: 0.25 } }
+					onChange={ spyChange }
+					resolvePoint={ () => {
+						spy();
+						return { x: 0.91, y: 0.42 };
+					} }
+				/>
+			);
+			// Click and press arrow up
+			const dragArea = getByRole( 'button' );
+			act( () => {
+				fireEvent.mouseDown( dragArea );
+				fireEvent.keyDown( dragArea, { charCode: 0, keyCode: 38 } );
+			} );
+			expect( spy ).toHaveBeenCalled();
+			expect( spyChange ).toHaveBeenCalledWith( {
+				x: '0.91',
+				y: '0.42',
+			} );
+		} );
+	} );
+
 	describe( 'controllability', () => {
 		it( 'should update value from props', () => {
 			const { rerender, getByRole } = render(
@@ -71,5 +99,21 @@ describe( 'FocalPointPicker', () => {
 			rerender( <Picker value={ { x: 0.93, y: 0.5 } } /> );
 			expect( xInput.value ).toBe( '93' );
 		} );
+		it( 'call onChange with the expected values', async () => {
+			const spyChange = jest.fn();
+			const { getByRole } = render(
+				<Picker value={ { x: 0.14, y: 0.62 } } onChange={ spyChange } />
+			);
+			// Click and press arrow up
+			const dragArea = getByRole( 'button' );
+			act( () => {
+				fireEvent.mouseDown( dragArea );
+				fireEvent.keyDown( dragArea, { charCode: 0, keyCode: 38 } );
+			} );
+			expect( spyChange ).toHaveBeenCalledWith( {
+				x: '0.14',
+				y: '0.61',
+			} );
+		} );
 	} );
 } );

package/src/focal-point-picker/tooltip/index.native.js

@@ -79,7 +79,7 @@ function Label( { align, text, xOffset, yOffset } ) {
 		} ).start();
 	};
 
-	// Transforms rely upon onLayout to enable custom offsets additions
+	// Transforms rely upon onLayout to enable custom offsets additions.
 	let tooltipTransforms;
 	if ( dimensions ) {
 		tooltipTransforms = [

package/src/font-size-picker/README.md

@@ -100,8 +100,7 @@ If `true`, the UI will contain a slider, instead of a numeric text input field.
 
 ### withReset
 
-If `true`, a reset button will be displayed alongside the predefined and custom
-font size fields.
+If `true`, a reset button will be displayed alongside the input field when a custom font size is active. Has no effect when `disableCustomFontSizes` or `withSlider` is `true`.
 
 -   Type: `Boolean`
 -   Required: no

package/src/font-size-picker/index.js

@@ -144,7 +144,6 @@ function FontSizePicker(
 									? __( 'Use size preset' )
 									: __( 'Set custom size' )
 							}
-							showTooltip={ false }
 							icon={ settings }
 							onClick={ () => {
 								setShowCustomValueControl(
@@ -232,7 +231,7 @@ function FontSizePicker(
 											);
 										}
 									} }
-									units={ hasUnits ? units : false }
+									units={ hasUnits ? units : [] }
 								/>
 							</FlexItem>
 							{ withReset && (

package/src/font-size-picker/stories/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { number, object, boolean } from '@storybook/addon-knobs';
-
 /**
  * WordPress dependencies
  */
@@ -16,14 +11,30 @@ import FontSizePicker from '../';
 export default {
 	title: 'Components/FontSizePicker',
 	component: FontSizePicker,
+	argTypes: {
+		initialValue: { table: { disable: true } }, // hide prop because it's not actually part of FontSizePicker
+		fallbackFontSize: {
+			description:
+				'If no value exists, this prop defines the starting position for the font size picker slider. Only relevant if `withSlider` is `true`.',
+		},
+		withReset: {
+			description:
+				'If `true`, a reset button will be displayed alongside the input field when a custom font size is active. Has no effect when `disableCustomFontSizes` or `withSlider` is `true`.',
+			control: { type: 'boolean' },
+			table: {
+				type: 'boolean',
+				defaultValue: { summary: true },
+			},
+		},
+	},
 	parameters: {
-		knobs: { disable: false },
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
 	},
 };
 
 const FontSizePickerWithState = ( { initialValue, ...props } ) => {
-	const [ fontSize, setFontSize ] = useState( initialValue || 16 );
-
+	const [ fontSize, setFontSize ] = useState( initialValue );
 	return (
 		<FontSizePicker
 			{ ...props }
@@ -33,57 +44,25 @@ const FontSizePickerWithState = ( { initialValue, ...props } ) => {
 	);
 };
 
-export const _default = () => {
-	const fontSizes = object( 'Font Sizes', [
-		{
-			name: 'Small',
-			slug: 'small',
-			size: 12,
-		},
-		{
-			name: 'Normal',
-			slug: 'normal',
-			size: 16,
-		},
-		{
-			name: 'Big',
-			slug: 'big',
-			size: 26,
-		},
-	] );
-	return <FontSizePickerWithState fontSizes={ fontSizes } />;
-};
-
-export const withSlider = () => {
-	const fontSizes = object( 'Font Sizes', [
-		{
-			name: 'Small',
-			slug: 'small',
-			size: 12,
-		},
-		{
-			name: 'Normal',
-			slug: 'normal',
-			size: 16,
-		},
-		{
-			name: 'Big',
-			slug: 'big',
-			size: 26,
-		},
-	] );
-	const fallbackFontSize = number( 'Fallback Font Size - Slider Only', 16 );
+const TwoFontSizePickersWithState = ( { fontSizes, ...props } ) => {
 	return (
-		<FontSizePickerWithState
-			fontSizes={ fontSizes }
-			fallbackFontSize={ fallbackFontSize }
-			withSlider
-		/>
+		<>
+			<h2>Fewer font sizes</h2>
+			<FontSizePickerWithState
+				{ ...props }
+				fontSizes={ fontSizes.slice( 0, 4 ) }
+			/>
+
+			<h2>More font sizes</h2>
+			<FontSizePickerWithState { ...props } fontSizes={ fontSizes } />
+		</>
 	);
 };
 
-export const withoutCustomSizes = () => {
-	const fontSizes = object( 'Font Sizes', [
+export const Default = FontSizePickerWithState.bind( {} );
+Default.args = {
+	disableCustomFontSizes: false,
+	fontSizes: [
 		{
 			name: 'Small',
 			slug: 'small',
@@ -99,17 +78,36 @@ export const withoutCustomSizes = () => {
 			slug: 'big',
 			size: 26,
 		},
-	] );
-	return (
-		<FontSizePickerWithState
-			fontSizes={ fontSizes }
-			disableCustomFontSizes
-		/>
-	);
+	],
+	initialValue: 16,
+	withSlider: false,
+};
+
+export const WithSlider = FontSizePickerWithState.bind( {} );
+WithSlider.args = {
+	...Default.args,
+	fallbackFontSize: 16,
+	initialValue: undefined,
+	withSlider: true,
 };
 
-export const differentControlBySize = () => {
-	const options = [
+/**
+ * With custom font sizes disabled via the `disableCustomFontSizes` prop, the user will
+ * only be able to pick one of the predefined sizes passed in `fontSizes`.
+ */
+export const WithCustomSizesDisabled = FontSizePickerWithState.bind( {} );
+WithCustomSizesDisabled.args = {
+	...Default.args,
+	disableCustomFontSizes: true,
+};
+
+/**
+ * When there are more than 5 font size options, the UI is no longer a toggle group.
+ */
+export const WithMoreFontSizes = FontSizePickerWithState.bind( {} );
+WithMoreFontSizes.args = {
+	...Default.args,
+	fontSizes: [
 		{
 			name: 'Tiny',
 			slug: 'tiny',
@@ -140,29 +138,36 @@ export const differentControlBySize = () => {
 			slug: 'huge',
 			size: 36,
 		},
-	];
-	const optionsWithUnits = options.map( ( option ) => ( {
+	],
+	initialValue: 8,
+};
+
+/**
+ * When units like `px` are specified explicitly, it will be shown as a label hint.
+ */
+export const WithUnits = TwoFontSizePickersWithState.bind( {} );
+WithUnits.args = {
+	...WithMoreFontSizes.args,
+	fontSizes: WithMoreFontSizes.args.fontSizes.map( ( option ) => ( {
 		...option,
 		size: `${ option.size }px`,
-	} ) );
-	const showMoreFontSizes = boolean( 'Add more font sizes', false );
-	const addUnitsToSizes = boolean( 'Add units to font sizes', false );
-	const _options = addUnitsToSizes ? optionsWithUnits : options;
-	const fontSizes = _options.slice(
-		0,
-		showMoreFontSizes ? _options.length : 4
-	);
-	return (
-		<FontSizePickerWithState fontSizes={ fontSizes } initialValue={ 8 } />
-	);
+	} ) ),
+	initialValue: '8px',
 };
 
-export const withComplexCSSValues = () => {
-	const options = [
+/**
+ * The label hint will not be shown if it is a complex CSS value. Some examples of complex CSS values
+ * in this context are CSS functions like `calc()`, `clamp()`, and `var()`.
+ */
+export const WithComplexCSSValues = TwoFontSizePickersWithState.bind( {} );
+WithComplexCSSValues.args = {
+	...Default.args,
+	fontSizes: [
 		{
 			name: 'Small',
 			slug: 'small',
-			size: '0.65rem',
+			// Adding just one complex css value is enough
+			size: 'clamp(1.75rem, 3vw, 2.25rem)',
 		},
 		{
 			name: 'Medium',
@@ -189,32 +194,6 @@ export const withComplexCSSValues = () => {
 			slug: 'huge',
 			size: '2.8rem',
 		},
-	];
-	const showMoreFontSizes = boolean( 'Add more font sizes', false );
-	const addComplexCssValues = boolean(
-		'Add some complex css values(calc, var, etc..)',
-		true
-	);
-
-	const _options = options.map( ( option, index ) => {
-		const _option = { ...option };
-		// Adding just one complex css value is enough (first element);
-		if ( addComplexCssValues && ! index ) {
-			_option.size = 'clamp(1.75rem, 3vw, 2.25rem)';
-		}
-		return _option;
-	} );
-
-	const fontSizes = _options.slice(
-		0,
-		showMoreFontSizes ? _options.length : 5
-	);
-	return (
-		<div style={ { maxWidth: '248px' } }>
-			<FontSizePickerWithState
-				fontSizes={ fontSizes }
-				initialValue={ '1.125rem' }
-			/>
-		</div>
-	);
+	],
+	initialValue: '1.125rem',
 };

package/src/form-file-upload/README.md

@@ -8,7 +8,7 @@ import { FormFileUpload } from '@wordpress/components';
 const MyFormFileUpload = () => (
 	<FormFileUpload
 		accept="image/*"
-		onChange={ () => console.log( 'new image' ) }
+		onChange={ ( event ) => console.log( event.target.files ) }
 	>
 		Upload
 	</FormFileUpload>

package/src/form-file-upload/stories/index.js

@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { upload as uploadIcon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import FormFileUpload from '../';
+
+export default {
+	title: 'Components/FormFileUpload',
+	component: FormFileUpload,
+};
+
+export const Default = FormFileUpload.bind( {} );
+Default.args = {
+	accept: '',
+	children: 'Select file',
+	multiple: false,
+};
+
+export const RestrictFileTypes = FormFileUpload.bind( {} );
+RestrictFileTypes.args = {
+	...Default.args,
+	accept: 'image/*',
+	children: 'Select image',
+	multiple: false,
+};
+
+export const AllowMultipleFiles = FormFileUpload.bind( {} );
+AllowMultipleFiles.args = {
+	...Default.args,
+	children: 'Select files',
+	multiple: true,
+};
+
+export const WithIcon = FormFileUpload.bind( {} );
+WithIcon.args = {
+	...Default.args,
+	children: 'Upload',
+	icon: uploadIcon,
+};
+
+export const WithCustomRender = FormFileUpload.bind( {} );
+WithCustomRender.args = {
+	...Default.args,
+	render: ( { openFileDialog } ) => (
+		<button onClick={ openFileDialog }>Custom Upload Button</button>
+	),
+};

package/src/form-token-field/index.js

@@ -191,7 +191,7 @@ class FormTokenField extends Component {
 	onKeyPress( event ) {
 		let preventDefault = false;
 		switch ( event.charCode ) {
-			case 44: // comma
+			case 44: // Comma.
 				preventDefault = this.handleCommaKey();
 				break;
 			default:
@@ -294,7 +294,7 @@ class FormTokenField extends Component {
 			selectedSuggestionScroll: true,
 		} ) );
 
-		return true; // preventDefault
+		return true; // PreventDefault.
 	}
 
 	handleDownArrowKey() {
@@ -311,7 +311,7 @@ class FormTokenField extends Component {
 			selectedSuggestionScroll: true,
 		} ) );
 
-		return true; // preventDefault
+		return true; // PreventDefault.
 	}
 
 	handleEscapeKey( event ) {
@@ -321,7 +321,7 @@ class FormTokenField extends Component {
 			selectedSuggestionIndex: -1,
 			selectedSuggestionScroll: false,
 		} );
-		return true; // preventDefault
+		return true; // PreventDefault.
 	}
 
 	handleCommaKey() {
@@ -329,7 +329,7 @@ class FormTokenField extends Component {
 			this.addNewToken( this.state.incompleteTokenValue );
 		}
 
-		return true; // preventDefault
+		return true; // PreventDefault.
 	}
 
 	moveInputToIndex( index ) {
@@ -366,7 +366,7 @@ class FormTokenField extends Component {
 
 		if ( index < this.props.value.length ) {
 			this.deleteToken( this.props.value[ index ] );
-			// update input offset since it's the offset from the last token
+			// Update input offset since it's the offset from the last token.
 			this.moveInputToIndex( index );
 		}
 	}

package/src/form-token-field/style.scss

@@ -22,6 +22,7 @@
 	input[type="text"].components-form-token-field__input {
 		display: inline-block;
 		flex: 1;
+		font-family: inherit;
 		font-size: 16px;
 		width: 100%;
 		max-width: 100%;

package/src/form-token-field/suggestions-list.js

@@ -14,7 +14,7 @@ import { withSafeTimeout, useRefEffect } from '@wordpress/compose';
 const emptyList = Object.freeze( [] );
 
 const handleMouseDown = ( e ) => {
-	// By preventing default here, we will not lose focus of <input> when clicking a suggestion
+	// By preventing default here, we will not lose focus of <input> when clicking a suggestion.
 	e.preventDefault();
 };
 
@@ -34,7 +34,7 @@ function SuggestionsList( {
 	const listRef = useRefEffect(
 		( listNode ) => {
 			// only have to worry about scrolling selected suggestion into view
-			// when already expanded
+			// when already expanded.
 			if (
 				selectedIndex > -1 &&
 				scrollIntoView &&