@wordpress/components 25.4.0 → 25.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "25.4.0",
+	"version": "25.5.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -41,23 +41,23 @@
 		"@floating-ui/react-dom": "1.0.0",
 		"@radix-ui/react-dropdown-menu": "2.0.4",
 		"@use-gesture/react": "^10.2.24",
-		"@wordpress/a11y": "^3.38.0",
-		"@wordpress/compose": "^6.15.0",
-		"@wordpress/date": "^4.38.0",
-		"@wordpress/deprecated": "^3.38.0",
-		"@wordpress/dom": "^3.38.0",
-		"@wordpress/element": "^5.15.0",
-		"@wordpress/escape-html": "^2.38.0",
-		"@wordpress/hooks": "^3.38.0",
-		"@wordpress/html-entities": "^3.38.0",
-		"@wordpress/i18n": "^4.38.0",
-		"@wordpress/icons": "^9.29.0",
-		"@wordpress/is-shallow-equal": "^4.38.0",
-		"@wordpress/keycodes": "^3.38.0",
-		"@wordpress/primitives": "^3.36.0",
-		"@wordpress/private-apis": "^0.20.0",
-		"@wordpress/rich-text": "^6.15.0",
-		"@wordpress/warning": "^2.38.0",
+		"@wordpress/a11y": "^3.39.0",
+		"@wordpress/compose": "^6.16.0",
+		"@wordpress/date": "^4.39.0",
+		"@wordpress/deprecated": "^3.39.0",
+		"@wordpress/dom": "^3.39.0",
+		"@wordpress/element": "^5.16.0",
+		"@wordpress/escape-html": "^2.39.0",
+		"@wordpress/hooks": "^3.39.0",
+		"@wordpress/html-entities": "^3.39.0",
+		"@wordpress/i18n": "^4.39.0",
+		"@wordpress/icons": "^9.30.0",
+		"@wordpress/is-shallow-equal": "^4.39.0",
+		"@wordpress/keycodes": "^3.39.0",
+		"@wordpress/primitives": "^3.37.0",
+		"@wordpress/private-apis": "^0.21.0",
+		"@wordpress/rich-text": "^6.16.0",
+		"@wordpress/warning": "^2.39.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -66,7 +66,7 @@
 		"dom-scroll-into-view": "^1.2.1",
 		"downshift": "^6.0.15",
 		"fast-deep-equal": "^3.1.3",
-		"framer-motion": "~10.11.6",
+		"framer-motion": "^10.13.0",
 		"gradient-parser": "^0.1.5",
 		"highlight-words-core": "^1.2.2",
 		"is-plain-object": "^5.0.0",
@@ -87,5 +87,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6f14d11ed4cb59df110a28ebaa23ecba95eb673a"
+	"gitHead": "b898cf1dc8e70841d1647ea0994ac6278acc18a7"
 }

package/src/border-control/border-control-dropdown/component.tsx

@@ -30,12 +30,8 @@ import type { DropdownProps as DropdownComponentProps } from '../../dropdown/typ
 import type { ColorProps, DropdownProps } from '../types';
 
 const getAriaLabelColorValue = ( colorValue: string ) => {
-	const isHex = colorValue.startsWith( '#' );
-
 	// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
-	const displayValue = colorValue.replace( /^var\((.+)\)$/, '$1' );
-
-	return isHex ? displayValue.split( '' ).join( '-' ) : displayValue;
+	return colorValue.replace( /^var\((.+)\)$/, '$1' );
 };
 
 const getColorObject = (
@@ -79,14 +75,14 @@ const getToggleAriaLabel = (
 			const ariaLabelValue = getAriaLabelColorValue( colorObject.color );
 			return style
 				? sprintf(
-						// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0". %3$s: The current border style selection e.g. "solid".
+						// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:". %3$s: The current border style selection e.g. "solid".
 						'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".',
 						colorObject.name,
 						ariaLabelValue,
 						style
 				  )
 				: sprintf(
-						// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
+						// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:".
 						'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".',
 						colorObject.name,
 						ariaLabelValue
@@ -97,13 +93,13 @@ const getToggleAriaLabel = (
 			const ariaLabelValue = getAriaLabelColorValue( colorValue );
 			return style
 				? sprintf(
-						// translators: %1$s: The color's hex code, with added hyphens e.g: "#-f-0-0". %2$s: The current border style selection e.g. "solid".
+						// translators: %1$s: The color's hex code e.g.: "#f00:". %2$s: The current border style selection e.g. "solid".
 						'Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".',
 						ariaLabelValue,
 						style
 				  )
 				: sprintf(
-						// translators: %1$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
+						// translators: %1$s: The color's hex code e.g: "#f00".
 						'Border color and style picker. The currently selected color has a value of "%1$s".',
 						ariaLabelValue
 				  );
@@ -114,7 +110,7 @@ const getToggleAriaLabel = (
 
 	if ( colorObject ) {
 		return sprintf(
-			// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
+			// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g: "#f00".
 			'Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".',
 			colorObject.name,
 			getAriaLabelColorValue( colorObject.color )
@@ -123,7 +119,7 @@ const getToggleAriaLabel = (
 
 	if ( colorValue ) {
 		return sprintf(
-			// translators: %1$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
+			// translators: %1$s: The color's hex code e.g: "#f00".
 			'Border color picker. The currently selected color has a value of "%1$s".',
 			getAriaLabelColorValue( colorValue )
 		);

package/src/border-control/test/index.js

@@ -215,7 +215,7 @@ describe( 'BorderControl', () => {
 
 				expect(
 					screen.getByLabelText(
-						'Border color and style picker. The currently selected color is called "Blue" and has a value of "#-7-2-a-e-e-6".'
+						'Border color and style picker. The currently selected color is called "Blue" and has a value of "#72aee6".'
 					)
 				).toBeInTheDocument();
 			} );
@@ -226,7 +226,7 @@ describe( 'BorderControl', () => {
 
 				expect(
 					screen.getByLabelText(
-						'Border color and style picker. The currently selected color has a value of "#-4-b-1-d-8-0".'
+						'Border color and style picker. The currently selected color has a value of "#4b1d80".'
 					)
 				).toBeInTheDocument();
 			} );
@@ -239,7 +239,7 @@ describe( 'BorderControl', () => {
 
 				expect(
 					screen.getByLabelText(
-						'Border color and style picker. The currently selected color is called "Blue" and has a value of "#-7-2-a-e-e-6". The currently selected style is "dotted".'
+						'Border color and style picker. The currently selected color is called "Blue" and has a value of "#72aee6". The currently selected style is "dotted".'
 					)
 				).toBeInTheDocument();
 			} );
@@ -252,7 +252,7 @@ describe( 'BorderControl', () => {
 
 				expect(
 					screen.getByLabelText(
-						'Border color and style picker. The currently selected color has a value of "#-4-b-1-d-8-0". The currently selected style is "dashed".'
+						'Border color and style picker. The currently selected color has a value of "#4b1d80". The currently selected style is "dashed".'
 					)
 				).toBeInTheDocument();
 			} );
@@ -280,7 +280,7 @@ describe( 'BorderControl', () => {
 
 				expect(
 					screen.getByLabelText(
-						'Border color picker. The currently selected color is called "Blue" and has a value of "#-7-2-a-e-e-6".'
+						'Border color picker. The currently selected color is called "Blue" and has a value of "#72aee6".'
 					)
 				).toBeInTheDocument();
 			} );
@@ -294,7 +294,7 @@ describe( 'BorderControl', () => {
 
 				expect(
 					screen.getByLabelText(
-						'Border color picker. The currently selected color has a value of "#-4-b-1-d-8-0".'
+						'Border color picker. The currently selected color has a value of "#4b1d80".'
 					)
 				).toBeInTheDocument();
 			} );

package/src/color-palette/index.tsx

@@ -224,12 +224,12 @@ function UnforwardedColorPalette(
 	const displayValue = value?.replace( /^var\((.+)\)$/, '$1' );
 	const customColorAccessibleLabel = !! displayValue
 		? sprintf(
-				// translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
+				// translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code e.g: "#f00".
 				__(
 					'Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'
 				),
 				buttonLabelName,
-				isHex ? displayValue.split( '' ).join( '-' ) : displayValue
+				displayValue
 		  )
 		: __( 'Custom color picker.' );
 

package/src/color-palette/test/__snapshots__/index.tsx.snap

@@ -193,7 +193,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
         <button
           aria-expanded="false"
           aria-haspopup="true"
-          aria-label="Custom color picker. The currently selected color is called "red" and has a value of "#-f-0-0"."
+          aria-label="Custom color picker. The currently selected color is called "red" and has a value of "#f00"."
           class="components-color-palette__custom-color-button"
           style="background: rgb(255, 0, 0);"
         />

package/src/color-palette/test/index.tsx

@@ -240,11 +240,7 @@ describe( 'ColorPalette', () => {
 		expect( screen.getByText( EXAMPLE_COLORS[ 0 ].color ) ).toBeVisible();
 		expect(
 			screen.getByRole( 'button', {
-				name: `Custom color picker. The currently selected color is called "${
-					EXAMPLE_COLORS[ 0 ].name
-				}" and has a value of "${ EXAMPLE_COLORS[ 0 ].color
-					.split( '' )
-					.join( '-' ) }".`,
+				name: `Custom color picker. The currently selected color is called "${ EXAMPLE_COLORS[ 0 ].name }" and has a value of "${ EXAMPLE_COLORS[ 0 ].color }".`,
 				expanded: false,
 			} )
 		).toBeInTheDocument();

package/src/draggable/test/index.native.js

@@ -110,6 +110,10 @@ describe( 'Draggable', () => {
 			},
 			{ state: State.END },
 		] );
+		// TODO(jest-console): Fix the warning and remove the expect below.
+		expect( console ).toHaveWarnedWith(
+			'[Reanimated] You can not use setGestureState in non-worklet function.'
+		);
 
 		expect( onDragStart ).toHaveBeenCalledTimes( 1 );
 		expect( onDragStart ).toHaveBeenCalledWith( {

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Animated, PanResponder, View } from 'react-native';
+import { Animated, PanResponder, StyleSheet, View } from 'react-native';
 import Video from 'react-native-video';
 
 /**
@@ -164,7 +164,7 @@ function FocalPointPicker( props ) {
 		},
 	];
 	const FOCAL_POINT_SIZE = 50;
-	const focalPointStyles = [
+	const focalPointStyles = StyleSheet.flatten( [
 		styles.focalPoint,
 		{
 			height: FOCAL_POINT_SIZE,
@@ -172,7 +172,7 @@ function FocalPointPicker( props ) {
 			marginTop: -( FOCAL_POINT_SIZE / 2 ),
 			width: FOCAL_POINT_SIZE,
 		},
-	];
+	] );
 
 	const onTooltipPress = () => setTooltipVisible( false );
 	const onMediaLayout = ( event ) => {
@@ -243,9 +243,10 @@ function FocalPointPicker( props ) {
 									yOffset={ -( FOCAL_POINT_SIZE / 2 ) }
 								/>
 								<FocalPoint
-									height={ styles.focalPoint?.height }
+									height={ focalPointStyles.height }
 									style={ focalPointStyles }
-									width={ styles.focalPoint?.width }
+									testID="focal-point-picker-handle"
+									width={ focalPointStyles.width }
 								/>
 							</Animated.View>
 						) }

package/src/menu-item/README.md

@@ -34,6 +34,13 @@ MenuItem supports the following props. Any additional props are passed through t
 
 Element to render as child of button.
 
+### `disabled`
+
+-   Type: `boolean`
+-   Required: No
+
+Refer to documentation for [Button's `disabled` prop](/packages/components/src/button/README.md#disabled-boolean).
+
 ### `info`
 
 -   Type: `string`

package/src/menu-items-choice/index.tsx

@@ -58,6 +58,7 @@ function MenuItemsChoice( {
 					<MenuItem
 						key={ item.value }
 						role="menuitemradio"
+						disabled={ item.disabled }
 						icon={ isSelected && check }
 						info={ item.info }
 						isSelected={ isSelected }

package/src/menu-items-choice/types.ts

@@ -2,6 +2,7 @@
  * Internal dependencies
  */
 import type { ShortcutProps } from '../shortcut/types';
+import type { ButtonAsButtonProps } from '../button/types';
 
 export type MenuItemsChoiceProps = {
 	/**
@@ -38,6 +39,10 @@ export type MenuItemChoice = {
 	 * Unique value for choice.
 	 */
 	value: string;
+	/**
+	 * Whether the menu item is disabled.
+	 */
+	disabled?: ButtonAsButtonProps[ 'disabled' ];
 	/**
 	 * Additional information which will be rendered below the given label.
 	 */

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

@@ -6,7 +6,7 @@ import { createContext } from '@wordpress/element';
 // Navigation context in BottomSheet is necessary for controlling the
 // height of navigation container.
 export const BottomSheetNavigationContext = createContext( {
-	currentHeight: 1,
+	currentHeight: { value: 0 },
 	setHeight: () => {},
 } );
 

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

@@ -1,15 +1,19 @@
 /**
  * External dependencies
  */
-import { View, Easing } from 'react-native';
 import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
+import Animated, {
+	Easing,
+	useAnimatedStyle,
+	useSharedValue,
+	withTiming,
+} from 'react-native-reanimated';
 
 /**
  * WordPress dependencies
  */
 import {
-	useState,
 	useContext,
 	useMemo,
 	useCallback,
@@ -23,11 +27,11 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { performLayoutAnimation } from '../../layout-animation';
 import {
 	BottomSheetNavigationContext,
 	BottomSheetNavigationProvider,
 } from './bottom-sheet-navigation-context';
+import { BottomSheetContext } from '../bottom-sheet-context';
 
 import styles from './styles.scss';
 
@@ -57,7 +61,8 @@ const options = {
 	cardStyleInterpolator: fadeConfig,
 };
 
-const ANIMATION_DURATION = 190;
+const HEIGHT_ANIMATION_DURATION = 300;
+const DEFAULT_HEIGHT = 1;
 
 function BottomSheetNavigationContainer( {
 	children,
@@ -65,11 +70,14 @@ function BottomSheetNavigationContainer( {
 	main,
 	theme,
 	style,
+	testID,
 } ) {
 	const Stack = useRef( createStackNavigator() ).current;
-	const context = useContext( BottomSheetNavigationContext );
-	const [ currentHeight, setCurrentHeight ] = useState(
-		context.currentHeight || 1
+	const navigationContext = useContext( BottomSheetNavigationContext );
+	const { maxHeight: sheetMaxHeight, isMaxHeightSet: isSheetMaxHeightSet } =
+		useContext( BottomSheetContext );
+	const currentHeight = useSharedValue(
+		navigationContext.currentHeight?.value || DEFAULT_HEIGHT
 	);
 
 	const backgroundStyle = usePreferredColorSchemeStyle(
@@ -77,47 +85,49 @@ function BottomSheetNavigationContainer( {
 		styles.backgroundDark
 	);
 
-	const _theme = theme || {
-		...DefaultTheme,
-		colors: {
-			...DefaultTheme.colors,
-			background: backgroundStyle.backgroundColor,
-		},
-	};
+	const defaultTheme = useMemo(
+		() => ( {
+			...DefaultTheme,
+			colors: {
+				...DefaultTheme.colors,
+				background: backgroundStyle.backgroundColor,
+			},
+		} ),
+		[ backgroundStyle.backgroundColor ]
+	);
+	const _theme = theme || defaultTheme;
 
 	const setHeight = useCallback(
 		( height ) => {
-			// The screen is fullHeight.
 			if (
-				typeof height === 'string' &&
-				typeof height !== typeof currentHeight
+				height > DEFAULT_HEIGHT &&
+				Math.round( height ) !== Math.round( currentHeight.value )
 			) {
-				performLayoutAnimation( ANIMATION_DURATION );
-				setCurrentHeight( height );
-
-				return;
-			}
-
-			if (
-				height > 1 &&
-				Math.round( height ) !== Math.round( currentHeight )
-			) {
-				if ( currentHeight === 1 ) {
-					setCurrentHeight( height );
-				} else if ( animate ) {
-					performLayoutAnimation( ANIMATION_DURATION );
-					setCurrentHeight( height );
+				// If max height is set in the bottom sheet, we clamp
+				// the new height using that value.
+				const newHeight = isSheetMaxHeightSet
+					? Math.min( sheetMaxHeight, height )
+					: height;
+				const shouldAnimate =
+					animate && currentHeight.value !== DEFAULT_HEIGHT;
+
+				if ( shouldAnimate ) {
+					currentHeight.value = withTiming( newHeight, {
+						duration: HEIGHT_ANIMATION_DURATION,
+						easing: Easing.out( Easing.cubic ),
+					} );
 				} else {
-					setCurrentHeight( height );
+					currentHeight.value = newHeight;
 				}
 			}
 		},
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[ currentHeight ]
+		[ animate, currentHeight, isSheetMaxHeightSet, sheetMaxHeight ]
 	);
 
+	const animatedStyles = useAnimatedStyle( () => ( {
+		height: currentHeight.value,
+	} ) );
+
 	const screens = useMemo( () => {
 		return Children.map( children, ( child ) => {
 			let screen = child;
@@ -136,38 +146,47 @@ function BottomSheetNavigationContainer( {
 				/>
 			);
 		} );
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ children ] );
+	}, [ children, main ] );
 
 	return useMemo( () => {
 		return (
-			<View style={ [ style, { height: currentHeight } ] }>
+			<Animated.View
+				style={ [ style, animatedStyles ] }
+				testID={ testID }
+			>
 				<BottomSheetNavigationProvider
-					value={ {
-						setHeight,
-						currentHeight,
-					} }
+					value={ { setHeight, currentHeight } }
 				>
 					{ main ? (
 						<NavigationContainer theme={ _theme }>
-							<Stack.Navigator screenOptions={ options }>
+							<Stack.Navigator
+								screenOptions={ options }
+								detachInactiveScreens={ false }
+							>
 								{ screens }
 							</Stack.Navigator>
 						</NavigationContainer>
 					) : (
-						<Stack.Navigator screenOptions={ options }>
+						<Stack.Navigator
+							screenOptions={ options }
+							detachInactiveScreens={ false }
+						>
 							{ screens }
 						</Stack.Navigator>
 					) }
 				</BottomSheetNavigationProvider>
-			</View>
+			</Animated.View>
 		);
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ currentHeight, _theme ] );
+	}, [
+		_theme,
+		animatedStyles,
+		currentHeight,
+		main,
+		screens,
+		setHeight,
+		style,
+		testID,
+	] );
 }
 
 export default BottomSheetNavigationContainer;

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

@@ -6,13 +6,17 @@ import {
 	useNavigation,
 	useFocusEffect,
 } from '@react-navigation/native';
-import { View, ScrollView, TouchableHighlight } from 'react-native';
+import {
+	ScrollView,
+	TouchableHighlight,
+	useWindowDimensions,
+	View,
+} from 'react-native';
 
 /**
  * WordPress dependencies
  */
 import { BottomSheetContext } from '@wordpress/components';
-import { debounce } from '@wordpress/compose';
 import { useRef, useCallback, useContext, useMemo } from '@wordpress/element';
 
 /**
@@ -29,7 +33,7 @@ const BottomSheetNavigationScreen = ( {
 	name,
 } ) => {
 	const navigation = useNavigation();
-	const heightRef = useRef( { maxHeight: 0 } );
+	const maxHeight = useRef( 0 );
 	const isFocused = useIsFocused();
 	const {
 		onHandleHardwareButtonPress,
@@ -38,16 +42,10 @@ const BottomSheetNavigationScreen = ( {
 		listProps,
 		safeAreaBottomInset,
 	} = useContext( BottomSheetContext );
+	const { height: windowHeight } = useWindowDimensions();
 
 	const { setHeight } = useContext( BottomSheetNavigationContext );
 
-	// Disable reason: deferring this refactor to the native team.
-	// see https://github.com/WordPress/gutenberg/pull/41166
-	// eslint-disable-next-line react-hooks/exhaustive-deps
-	const setHeightDebounce = useCallback( debounce( setHeight, 10 ), [
-		setHeight,
-	] );
-
 	useFocusEffect(
 		useCallback( () => {
 			onHandleHardwareButtonPress( () => {
@@ -81,17 +79,14 @@ const BottomSheetNavigationScreen = ( {
 	useFocusEffect(
 		useCallback( () => {
 			if ( fullScreen ) {
-				setHeight( '100%' );
+				setHeight( windowHeight );
 				setIsFullScreen( true );
-			} else if ( heightRef.current.maxHeight !== 0 ) {
+			} else if ( maxHeight.current !== 0 ) {
 				setIsFullScreen( false );
-				setHeight( heightRef.current.maxHeight );
+				setHeight( maxHeight.current );
 			}
 			return () => {};
-			// Disable reason: deferring this refactor to the native team.
-			// see https://github.com/WordPress/gutenberg/pull/41166
-			// eslint-disable-next-line react-hooks/exhaustive-deps
-		}, [ setHeight ] )
+		}, [ fullScreen, setHeight, setIsFullScreen, windowHeight ] )
 	);
 
 	const onLayout = ( { nativeEvent } ) => {
@@ -99,10 +94,9 @@ const BottomSheetNavigationScreen = ( {
 			return;
 		}
 		const { height } = nativeEvent.layout;
-
-		if ( heightRef.current.maxHeight !== height && isFocused ) {
-			heightRef.current.maxHeight = height;
-			setHeightDebounce( height );
+		if ( maxHeight.current !== height && isFocused ) {
+			maxHeight.current = height;
+			setHeight( height );
 		}
 	};