@wordpress/components 19.4.1 → 19.5.0

package/src/card/card-media/component.js

@@ -7,7 +7,7 @@ import { useCardMedia } from './hook';
 
 /**
  * @param {import('../../ui/context').WordPressComponentProps<{ children: import('react').ReactNode }, 'div'>} props
- * @param {import('react').Ref<any>}                                                                           forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                                  forwardedRef
  */
 function CardMedia( props, forwardedRef ) {
 	const cardMediaProps = useCardMedia( props );

package/src/color-palette/index.native.js

@@ -34,6 +34,7 @@ let scrollPosition = 0;
 let customIndicatorWidth = 0;
 
 function ColorPalette( {
+	enableCustomColor = true,
 	setColor,
 	activeColor,
 	isGradientColor,
@@ -46,6 +47,7 @@ function ColorPalette( {
 	shouldShowCustomVerticalSeparator = true,
 	customColorIndicatorStyles,
 	customIndicatorWrapperStyles,
+	label,
 } ) {
 	const customSwatchGradients = [
 		'linear-gradient(120deg, rgba(255,0,0,.8) 0%, rgba(255,255,255,1) 70.71%)',
@@ -62,6 +64,7 @@ function ColorPalette( {
 	const opacity = useRef( new Animated.Value( 1 ) ).current;
 
 	const defaultColors = uniq( map( defaultSettings.colors, 'color' ) );
+	const mergedColors = uniq( map( defaultSettings.allColors, 'color' ) );
 	const defaultGradientColors = uniq(
 		map( defaultSettings.gradients, 'gradient' )
 	);
@@ -72,6 +75,7 @@ function ColorPalette( {
 		: customSwatchGradients;
 	const isCustomGradientColor = isGradientColor && isSelectedCustom();
 	const shouldShowCustomIndicator =
+		enableCustomColor &&
 		shouldShowCustomIndicatorOption &&
 		( ! isGradientSegment || isCustomGradientColor );
 
@@ -92,8 +96,8 @@ function ColorPalette( {
 
 	function isSelectedCustom() {
 		const isWithinColors =
-			activeColor && colors && colors.includes( activeColor );
-		if ( activeColor ) {
+			activeColor && mergedColors && mergedColors.includes( activeColor );
+		if ( enableCustomColor && activeColor ) {
 			if ( isGradientSegment ) {
 				return isGradientColor && ! isWithinColors;
 			}
@@ -206,93 +210,106 @@ function ColorPalette( {
 	];
 
 	return (
-		<ScrollView
-			contentContainerStyle={ styles.contentContainer }
-			style={ styles.container }
-			horizontal
-			showsHorizontalScrollIndicator={ false }
-			keyboardShouldPersistTaps="always"
-			disableScrollViewPanResponder
-			scrollEventThrottle={ 16 }
-			onScroll={ onScroll }
-			onContentSizeChange={ onContentSizeChange }
-			onScrollBeginDrag={ () => shouldEnableBottomSheetScroll( false ) }
-			onScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }
-			ref={ scrollViewRef }
-			testID="color-palette"
-		>
-			{ shouldShowCustomIndicator && (
-				<View
-					style={ customIndicatorWrapperStyle }
-					onLayout={ onCustomIndicatorLayout }
-				>
-					{ shouldShowCustomVerticalSeparator && (
-						<View style={ verticalSeparatorStyle } />
-					) }
-					<TouchableWithoutFeedback
-						onPress={ onCustomPress }
-						accessibilityRole={ 'button' }
-						accessibilityState={ { selected: isSelectedCustom() } }
-						accessibilityHint={ accessibilityHint }
-					>
-						<View style={ customIndicatorWrapperStyle }>
-							<ColorIndicator
-								withCustomPicker={ ! isGradientSegment }
-								color={ customIndicatorColor }
-								isSelected={ isSelectedCustom() }
-								style={ [
-									styles.colorIndicator,
-									customColorIndicatorStyles,
-								] }
-							/>
-							{ shouldShowCustomLabel && (
-								<Text style={ customTextStyle }>
-									{ isIOS
-										? customText
-										: customText.toUpperCase() }
-								</Text>
-							) }
-						</View>
-					</TouchableWithoutFeedback>
-				</View>
+		<>
+			{ label && (
+				<Text accessibilityRole="header" style={ styles.headerText }>
+					{ label }
+				</Text>
 			) }
-			{ colors.map( ( color ) => {
-				const scaleValue = isSelected( color ) ? scaleInterpolation : 1;
-				return (
-					<View key={ `${ color }-${ isSelected( color ) }` }>
+
+			<ScrollView
+				contentContainerStyle={ styles.contentContainer }
+				horizontal
+				showsHorizontalScrollIndicator={ false }
+				keyboardShouldPersistTaps="always"
+				disableScrollViewPanResponder
+				scrollEventThrottle={ 16 }
+				onScroll={ onScroll }
+				onContentSizeChange={ onContentSizeChange }
+				onScrollBeginDrag={ () =>
+					shouldEnableBottomSheetScroll( false )
+				}
+				onScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }
+				ref={ scrollViewRef }
+				testID={ `color-palette${ label ? '-' + label : '' }` }
+			>
+				{ colors.map( ( color ) => {
+					const scaleValue = isSelected( color )
+						? scaleInterpolation
+						: 1;
+					return (
+						<View key={ `${ color }-${ isSelected( color ) }` }>
+							<TouchableWithoutFeedback
+								onPress={ () => onColorPress( color ) }
+								accessibilityRole={ 'button' }
+								accessibilityState={ {
+									selected: isSelected( color ),
+								} }
+								accessibilityHint={ color }
+								testID={ color }
+							>
+								<Animated.View
+									style={ {
+										transform: [
+											{
+												scale: scaleValue,
+											},
+										],
+									} }
+								>
+									<ColorIndicator
+										color={ color }
+										isSelected={ isSelected( color ) }
+										opacity={ opacity }
+										style={ [
+											styles.colorIndicator,
+											customColorIndicatorStyles,
+										] }
+									/>
+								</Animated.View>
+							</TouchableWithoutFeedback>
+						</View>
+					);
+				} ) }
+				{ shouldShowCustomIndicator && (
+					<View
+						style={ customIndicatorWrapperStyle }
+						onLayout={ onCustomIndicatorLayout }
+					>
+						{ shouldShowCustomVerticalSeparator && (
+							<View style={ verticalSeparatorStyle } />
+						) }
 						<TouchableWithoutFeedback
-							onPress={ () => onColorPress( color ) }
+							onPress={ onCustomPress }
 							accessibilityRole={ 'button' }
 							accessibilityState={ {
-								selected: isSelected( color ),
+								selected: isSelectedCustom(),
 							} }
-							accessibilityHint={ color }
-							testID={ color }
+							accessibilityHint={ accessibilityHint }
 						>
-							<Animated.View
-								style={ {
-									transform: [
-										{
-											scale: scaleValue,
-										},
-									],
-								} }
-							>
+							<View style={ customIndicatorWrapperStyle }>
 								<ColorIndicator
-									color={ color }
-									isSelected={ isSelected( color ) }
-									opacity={ opacity }
+									withCustomPicker={ ! isGradientSegment }
+									color={ customIndicatorColor }
+									isSelected={ isSelectedCustom() }
 									style={ [
 										styles.colorIndicator,
 										customColorIndicatorStyles,
 									] }
 								/>
-							</Animated.View>
+								{ shouldShowCustomLabel && (
+									<Text style={ customTextStyle }>
+										{ isIOS
+											? customText
+											: customText.toUpperCase() }
+									</Text>
+								) }
+							</View>
 						</TouchableWithoutFeedback>
 					</View>
-				);
-			} ) }
-		</ScrollView>
+				) }
+			</ScrollView>
+		</>
 	);
 }
 

package/src/color-palette/style.native.scss

@@ -1,12 +1,8 @@
 .contentContainer {
-	flex-direction: row-reverse;
+	flex-direction: row;
 	padding: 0 $grid-unit-20;
 }
 
-.container {
-	padding-bottom: $grid-unit-20;
-}
-
 .verticalSeparator {
 	border-width: $border-width * 0.5;
 	border-color: $light-gray-400;
@@ -42,3 +38,12 @@
 	letter-spacing: 1.25;
 	font-weight: 500;
 }
+
+.headerText {
+	color: $gray;
+	padding-top: 8;
+	font-size: 14;
+	font-weight: 500;
+	padding-left: $grid-unit-20;
+	padding-right: $grid-unit-20;
+}

package/src/color-picker/component.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Ref } from 'react';
+import type { ForwardedRef } from 'react';
 import { colord, extend, Colord } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 
@@ -54,7 +54,7 @@ const options = [
 
 const ColorPicker = (
 	props: WordPressComponentProps< ColorPickerProps, 'div', false >,
-	forwardedRef: Ref< any >
+	forwardedRef: ForwardedRef< any >
 ) => {
 	const {
 		enableAlpha = false,

package/src/color-picker/hex-input.tsx

@@ -24,10 +24,13 @@ interface HexInputProps {
 }
 
 export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
-	const handleValidate = ( value: string ) => {
-		if ( ! colord( '#' + value ).isValid() ) {
-			throw new Error( 'Invalid hex color input' );
-		}
+	const handleChange = ( nextValue: string | undefined ) => {
+		if ( ! nextValue ) return;
+		const hexValue = nextValue.startsWith( '#' )
+			? nextValue
+			: '#' + nextValue;
+
+		onChange( colord( hexValue ) );
 	};
 
 	return (
@@ -43,11 +46,8 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 				</Spacer>
 			}
 			value={ color.toHex().slice( 1 ).toUpperCase() }
-			onChange={ ( nextValue ) => {
-				onChange( colord( '#' + nextValue ) );
-			} }
-			onValidate={ handleValidate }
-			maxLength={ enableAlpha ? 8 : 6 }
+			onChange={ handleChange }
+			maxLength={ enableAlpha ? 9 : 7 }
 			label={ __( 'Hex color' ) }
 			hideLabelFromVision
 		/>

package/src/confirm-dialog/component.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Ref, KeyboardEvent } from 'react';
+import type { ForwardedRef, KeyboardEvent } from 'react';
 
 /**
  * WordPress dependencies
@@ -28,7 +28,7 @@ import { useCx } from '../utils/hooks/use-cx';
 
 function ConfirmDialog(
 	props: WordPressComponentProps< OwnProps, 'div', false >,
-	forwardedRef: Ref< any >
+	forwardedRef: ForwardedRef< any >
 ) {
 	const {
 		isOpen: isOpenProp,

package/src/divider/component.tsx

@@ -3,7 +3,7 @@
  */
 // eslint-disable-next-line no-restricted-imports
 import { Separator } from 'reakit';
-import type { Ref } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * Internal dependencies
@@ -18,7 +18,7 @@ import type { Props } from './types';
 
 function Divider(
 	props: WordPressComponentProps< Props, 'hr', false >,
-	forwardedRef: Ref< any >
+	forwardedRef: ForwardedRef< any >
 ) {
 	const contextProps = useContextSystem( props, 'Divider' );
 

package/src/elevation/component.js

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

package/src/flex/flex/component.js

@@ -8,7 +8,7 @@ import { View } from '../../view';
 
 /**
  * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexProps, 'div'>} props
- * @param {import('react').Ref<any>}                                                                forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                       forwardedRef
  */
 function Flex( props, forwardedRef ) {
 	const { children, isColumn, ...otherProps } = useFlex( props );

package/src/flex/flex-block/component.js

@@ -7,7 +7,7 @@ import { useFlexBlock } from './hook';
 
 /**
  * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexBlockProps, 'div'>} props
- * @param {import('react').Ref<any>}                                                                     forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                            forwardedRef
  */
 function FlexBlock( props, forwardedRef ) {
 	const flexBlockProps = useFlexBlock( props );

package/src/flex/flex-item/component.js

@@ -7,7 +7,7 @@ import { useFlexItem } from './hook';
 
 /**
  * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexItemProps, 'div'>} props
- * @param {import('react').Ref<any>}                                                                    forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                           forwardedRef
  */
 function FlexItem( props, forwardedRef ) {
 	const flexItemProps = useFlexItem( props );

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/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/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/font-size-picker/index.js

@@ -144,7 +144,6 @@ function FontSizePicker(
 									? __( 'Use size preset' )
 									: __( 'Set custom size' )
 							}
-							showTooltip={ false }
 							icon={ settings }
 							onClick={ () => {
 								setShowCustomValueControl(

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/grid/component.js

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

package/src/h-stack/component.js

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

package/src/heading/component.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Ref } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * Internal dependencies
@@ -12,7 +12,7 @@ import { useHeading, HeadingProps } from './hook';
 
 function Heading(
 	props: WordPressComponentProps< HeadingProps, 'h1' >,
-	forwardedRef: Ref< any >
+	forwardedRef: ForwardedRef< any >
 ) {
 	const headerProps = useHeading( props );
 

package/src/index.js

@@ -100,6 +100,8 @@ export { default as __experimentalNavigationMenu } from './navigation/menu';
 export {
 	NavigatorProvider as __experimentalNavigatorProvider,
 	NavigatorScreen as __experimentalNavigatorScreen,
+	NavigatorButton as __experimentalNavigatorButton,
+	NavigatorBackButton as __experimentalNavigatorBackButton,
 	useNavigator as __experimentalUseNavigator,
 } from './navigator';
 export { default as Notice } from './notice';