@wordpress/components 25.3.0 → 25.5.0

package/src/item-group/stories/index.tsx

@@ -39,20 +39,25 @@ Default.args = {
 	children: (
 		[
 			{
-				children: 'First item',
+				children: 'First button item',
 				// eslint-disable-next-line no-alert
 				onClick: () => alert( 'First item clicked' ),
 			},
 			{
-				children: 'Second item',
+				children: 'Second button item',
 				// eslint-disable-next-line no-alert
 				onClick: () => alert( 'Second item clicked' ),
 			},
 			{
-				children: 'Third item',
+				children: 'Third button item',
 				// eslint-disable-next-line no-alert
 				onClick: () => alert( 'Third item clicked' ),
 			},
+			{
+				children: 'Anchor item',
+				as: 'a',
+				href: 'https://wordpress.org',
+			},
 		] as ItemProps[]
 	 ).map( mapPropsToItem ),
 };

package/src/item-group/styles.ts

@@ -6,34 +6,45 @@ import { css } from '@emotion/react';
 /**
  * Internal dependencies
  */
-import { CONFIG, COLORS } from '../utils';
-
-export const unstyledButton = css`
-	appearance: none;
-	border: 1px solid transparent;
-	cursor: pointer;
-	background: none;
-	text-align: start;
-
-	svg,
-	path {
-		fill: currentColor;
-	}
-
-	&:hover {
-		color: ${ COLORS.ui.theme };
-	}
-
-	&:focus-visible {
-		box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
-			var(
-				--wp-components-color-accent,
-				var( --wp-admin-theme-color, ${ COLORS.ui.theme } )
-			);
-		// Windows high contrast mode.
-		outline: 2px solid transparent;
-	}
-`;
+import { CONFIG, COLORS, font } from '../utils';
+
+export const unstyledButton = ( as: 'a' | 'button' ) => {
+	return css`
+		font-size: ${ font( 'default.fontSize' ) };
+		font-family: inherit;
+		appearance: none;
+		border: 1px solid transparent;
+		cursor: pointer;
+		background: none;
+		text-align: start;
+		text-decoration: ${ as === 'a' ? 'none' : undefined };
+
+		svg,
+		path {
+			fill: currentColor;
+		}
+
+		&:hover {
+			color: ${ COLORS.ui.theme };
+		}
+
+		&:focus {
+			box-shadow: none;
+			outline: none;
+		}
+
+		&:focus-visible {
+			box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
+				var(
+					--wp-components-color-accent,
+					var( --wp-admin-theme-color, ${ COLORS.ui.theme } )
+				);
+			// Windows high contrast mode.
+			outline: 2px solid transparent;
+			outline-offset: 0;
+		}
+	`;
+};
 
 export const itemWrapper = css`
 	width: 100%;

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 );
 		}
 	};