@wordpress/components 19.4.0 → 19.5.0

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';

package/src/index.native.js

@@ -134,4 +134,8 @@ export {
 	withGlobalStyles,
 	getMergedGlobalStyles,
 } from './mobile/global-styles-context';
-export { getGlobalStyles } from './mobile/global-styles-context/utils';
+export {
+	getGlobalStyles,
+	getColorsAndGradients,
+	useMobileGlobalStylesColors,
+} from './mobile/global-styles-context/utils';

package/src/input-control/index.tsx

@@ -3,7 +3,7 @@
  */
 import { noop } from 'lodash';
 import classNames from 'classnames';
-import type { Ref } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -45,7 +45,7 @@ export function InputControl(
 		value,
 		...props
 	}: InputControlProps,
-	ref: Ref< HTMLInputElement >
+	ref: ForwardedRef< HTMLInputElement >
 ) {
 	const [ isFocused, setIsFocused ] = useState( false );
 

package/src/input-control/input-base.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Ref } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -66,7 +66,7 @@ export function InputBase(
 		suffix,
 		...props
 	}: InputBaseProps,
-	ref: Ref< HTMLDivElement >
+	ref: ForwardedRef< HTMLDivElement >
 ) {
 	const id = useUniqueId( idProp );
 	const hideLabel = hideLabelFromVision || ! label;

package/src/input-control/input-field.tsx

@@ -2,14 +2,14 @@
  * External dependencies
  */
 import { noop } from 'lodash';
-import { useDrag } from 'react-use-gesture';
+import { useDrag } from '@use-gesture/react';
 import type {
 	SyntheticEvent,
 	ChangeEvent,
 	KeyboardEvent,
 	PointerEvent,
 	FocusEvent,
-	Ref,
+	ForwardedRef,
 	MouseEvent,
 } from 'react';
 
@@ -53,7 +53,7 @@ function InputField(
 		type,
 		...props
 	}: WordPressComponentProps< InputFieldProps, 'input', false >,
-	ref: Ref< HTMLInputElement >
+	ref: ForwardedRef< HTMLInputElement >
 ) {
 	const {
 		// State
@@ -168,9 +168,6 @@ function InputField(
 	const dragGestureProps = useDrag< PointerEvent< HTMLInputElement > >(
 		( dragProps ) => {
 			const { distance, dragging, event } = dragProps;
-			// The event is persisted to prevent errors in components using this
-			// to check if a modifier key was held while dragging.
-			event.persist();
 
 			if ( ! distance ) return;
 			event.stopPropagation();
@@ -196,6 +193,7 @@ function InputField(
 		{
 			threshold: dragThreshold,
 			enabled: isDragEnabled,
+			pointer: { capture: false },
 		}
 	);
 

package/src/input-control/reducer/reducer.ts

@@ -50,6 +50,9 @@ export const composeStateReducers = (
 ): StateReducer => {
 	return ( ...args ) => {
 		return fns.reduceRight( ( state, fn ) => {
+			// TODO: Assess whether this can be replaced with a more standard `compose` implementation
+			// like wp.data.compose() (aka lodash flowRight) or Redux compose().
+			// The current implementation only works by functions mutating the original state object.
 			const fnState = fn( ...args );
 			return isEmpty( fnState ) ? state : { ...state, ...fnState };
 		}, {} as InputState );

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

@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 import InputControl from '../';
 
 export default {
-	title: 'Components/InputControl',
+	title: 'Components (Experimental)/InputControl',
 	component: InputControl,
 	parameters: {
 		knobs: { disable: false },

package/src/input-control/types.ts

@@ -7,7 +7,7 @@ import type {
 	ChangeEvent,
 	SyntheticEvent,
 } from 'react';
-import type { useDrag } from 'react-use-gesture';
+import type { useDrag } from '@use-gesture/react';
 
 /**
  * Internal dependencies

package/src/item-group/item/component.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Ref } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * Internal dependencies
@@ -13,7 +13,7 @@ import { View } from '../../view';
 
 function Item(
 	props: WordPressComponentProps< ItemProps, 'div' >,
-	forwardedRef: Ref< any >
+	forwardedRef: ForwardedRef< any >
 ) {
 	const { role, wrapperClassName, ...otherProps } = useItem( props );
 

package/src/item-group/item-group/component.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Ref } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * Internal dependencies
@@ -14,7 +14,7 @@ import type { ItemGroupProps } from '../types';
 
 function ItemGroup(
 	props: WordPressComponentProps< ItemGroupProps, 'div' >,
-	forwardedRef: Ref< any >
+	forwardedRef: ForwardedRef< any >
 ) {
 	const {
 		isBordered,

package/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js

@@ -128,7 +128,16 @@ const BottomSheetNavigationScreen = ( {
 				</TouchableHighlight>
 			</ScrollView>
 		);
-	}, [ children, isFocused, safeAreaBottomInset, listProps ] );
+	}, [
+		children,
+		isFocused,
+		safeAreaBottomInset,
+		listProps,
+		name,
+		isScrollable,
+		isNested,
+		onLayout,
+	] );
 };
 
 export default BottomSheetNavigationScreen;

package/src/mobile/color-settings/palette.screen.native.js

@@ -13,8 +13,10 @@ import {
 	ColorControl,
 	PanelBody,
 	BottomSheetContext,
+	useMobileGlobalStylesColors,
 } from '@wordpress/components';
 import { useRoute, useNavigation } from '@react-navigation/native';
+
 /**
  * Internal dependencies
  */
@@ -27,6 +29,7 @@ import { colorsUtils } from './utils';
 import styles from './style.scss';
 
 const HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 };
+const THEME_PALETTE_NAME = 'Theme';
 
 const PaletteScreen = () => {
 	const route = useRoute();
@@ -45,10 +48,15 @@ const PaletteScreen = () => {
 	const [ currentValue, setCurrentValue ] = useState( colorValue );
 	const isGradientColor = isGradient( currentValue );
 	const selectedSegmentIndex = isGradientColor ? 1 : 0;
+	const allAvailableColors = useMobileGlobalStylesColors();
 
 	const [ currentSegment, setCurrentSegment ] = useState(
 		segments[ selectedSegmentIndex ]
 	);
+	const isGradientSegment = currentSegment === colorsUtils.segments[ 1 ];
+	const currentSegmentColors = ! isGradientSegment
+		? defaultSettings.colors
+		: defaultSettings.gradients;
 
 	const horizontalSeparatorStyle = usePreferredColorSchemeStyle(
 		styles.horizontalSeparator,
@@ -176,15 +184,37 @@ const PaletteScreen = () => {
 					<NavBar.Heading>{ label } </NavBar.Heading>
 				</NavBar>
 			) }
-			<ColorPalette
-				setColor={ setColor }
-				activeColor={ currentValue }
-				isGradientColor={ isGradientColor }
-				currentSegment={ currentSegment }
-				onCustomPress={ onCustomPress }
-				shouldEnableBottomSheetScroll={ shouldEnableBottomSheetScroll }
-				defaultSettings={ defaultSettings }
-			/>
+
+			<View style={ styles.colorPalettes }>
+				{ currentSegmentColors.map( ( palette, paletteKey ) => {
+					const paletteSettings = {
+						colors: palette.colors,
+						gradients: palette.gradients,
+						allColors: allAvailableColors,
+					};
+					const enableCustomColor =
+						! isGradientSegment &&
+						palette.name === THEME_PALETTE_NAME;
+
+					return (
+						<ColorPalette
+							enableCustomColor={ enableCustomColor }
+							label={ palette.name }
+							key={ paletteKey }
+							setColor={ setColor }
+							activeColor={ currentValue }
+							isGradientColor={ isGradientColor }
+							currentSegment={ currentSegment }
+							onCustomPress={ onCustomPress }
+							shouldEnableBottomSheetScroll={
+								shouldEnableBottomSheetScroll
+							}
+							defaultSettings={ paletteSettings }
+						/>
+					);
+				} ) }
+			</View>
+
 			{ isCustomGadientShown && (
 				<>
 					<View style={ horizontalSeparatorStyle } />

package/src/mobile/color-settings/style.native.scss

@@ -16,6 +16,10 @@
 	padding: 12px $grid-unit-20;
 }
 
+.colorPalettes {
+	padding: $grid-unit-10 0;
+}
+
 .colorIndicator {
 	width: 24px;
 	height: 24px;

package/src/mobile/global-styles-context/test/fixtures/theme.native.js

@@ -20,6 +20,11 @@ export const GLOBAL_STYLES_PALETTE = [
 		color: '#D1D1E4',
 		name: 'Purple',
 	},
+	{
+		color: '#cf1594',
+		name: 'Color 2 ',
+		slug: 'custom-color-2',
+	},
 ];
 
 export const GLOBAL_STYLES_GRADIENTS = {
@@ -91,6 +96,11 @@ export const DEFAULT_GLOBAL_STYLES = {
 				fontSize: 'var(--wp--preset--font-size--normal)',
 			},
 		},
+		'core/separator': {
+			color: {
+				text: 'var:preset|color|custom-color-2',
+			},
+		},
 	},
 };
 
@@ -132,6 +142,11 @@ export const PARSED_GLOBAL_STYLES = {
 				fontSize: '18px',
 			},
 		},
+		'core/separator': {
+			color: {
+				text: '#cf1594',
+			},
+		},
 	},
 };
 
@@ -172,6 +187,18 @@ export const RAW_FEATURES = {
 					name: 'Purple',
 				},
 			],
+			custom: [
+				{
+					color: '#1bf5c1',
+					name: 'Color 1 ',
+					slug: 'custom-color-1',
+				},
+				{
+					color: '#cf1594',
+					name: 'Color 2 ',
+					slug: 'custom-color-2',
+				},
+			],
 		},
 		gradients: {
 			default: [

package/src/mobile/global-styles-context/test/utils.native.js

@@ -125,14 +125,14 @@ describe( 'getGlobalStyles', () => {
 
 		expect( globalStyles ).toEqual(
 			expect.objectContaining( {
-				colors: RAW_FEATURES.color,
-				gradients,
 				__experimentalFeatures: {
 					color: {
 						palette: RAW_FEATURES.color.palette,
 						gradients,
 						text: true,
 						background: true,
+						defaultPalette: true,
+						defaultGradients: true,
 					},
 					typography: {
 						fontSizes: RAW_FEATURES.typography.fontSizes,