@wordpress/components 27.3.0 → 27.5.0

package/src/item-group/item/hook.ts

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import type { ElementType } from 'react';
-
 /**
  * WordPress dependencies
  */
@@ -32,11 +27,7 @@ export function useItem( props: WordPressComponentProps< ItemProps, 'div' > ) {
 
 	const size = sizeProp || contextSize;
 
-	const as =
-		asProp ||
-		( ( typeof onClick !== 'undefined'
-			? 'button'
-			: 'div' ) as ElementType );
+	const as = asProp || ( typeof onClick !== 'undefined' ? 'button' : 'div' );
 
 	const cx = useCx();
 

package/src/item-group/test/__snapshots__/index.js.snap

@@ -11,8 +11,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1n28wmo-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-gg7ygh-View-large-item-spacedAround e19lxcc00"
+-         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
++         class="components-item css-1h3jinl-PolymorphicDiv-large-item-spacedAround e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -24,8 +24,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1n28wmo-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-gg7ygh-View-large-item-spacedAround e19lxcc00"
+-         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
++         class="components-item css-1h3jinl-PolymorphicDiv-large-item-spacedAround e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -44,8 +44,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-1lf4kzd-View-medium-item e19lxcc00"
-+       class="components-item css-1vv4aem-View-large-item e19lxcc00"
+-       class="components-item css-tpom78-PolymorphicDiv-medium-item e19lxcc00"
++       class="components-item css-vss65r-PolymorphicDiv-large-item e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -114,8 +114,8 @@ Snapshot Diff:
 @@ -1,18 +1,18 @@
   <div>
     <div
--     class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
-+     class="components-item-group css-18qvw1m-View-separated-rounded e19lxcc00"
+-     class="components-item-group css-1iattls-PolymorphicDiv-rounded e19lxcc00"
++     class="components-item-group css-zgfros-PolymorphicDiv-separated-rounded e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="ItemGroup"
       role="list"
@@ -125,8 +125,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1n28wmo-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-1lf4kzd-View-medium-item e19lxcc00"
+-         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
++         class="components-item css-tpom78-PolymorphicDiv-medium-item e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -142,8 +142,8 @@ Snapshot Diff:
 @@ -1,18 +1,18 @@
   <div>
     <div
--     class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
-+     class="components-item-group css-acyoj6-View-bordered-rounded e19lxcc00"
+-     class="components-item-group css-1iattls-PolymorphicDiv-rounded e19lxcc00"
++     class="components-item-group css-1ibn92o-PolymorphicDiv-bordered-rounded e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="ItemGroup"
       role="list"
@@ -153,8 +153,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1n28wmo-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-1lf4kzd-View-medium-item e19lxcc00"
+-         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
++         class="components-item css-tpom78-PolymorphicDiv-medium-item e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -170,8 +170,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
-+     class="components-item-group css-1mm2cvy-View e19lxcc00"
+-     class="components-item-group css-1iattls-PolymorphicDiv-rounded e19lxcc00"
++     class="components-item-group css-161q9d5-PolymorphicDiv e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="ItemGroup"
       role="list"

package/src/mobile/bottom-sheet-select-control/index.native.js

@@ -16,6 +16,10 @@ import { BottomSheet } from '@wordpress/components';
  */
 import styles from './style.scss';
 
+const EMPTY_OPTION = {
+	label: '',
+};
+
 const BottomSheetSelectControl = ( {
 	label,
 	icon,
@@ -34,9 +38,9 @@ const BottomSheetSelectControl = ( {
 		};
 	};
 
-	const selectedOption = items.find(
-		( option ) => option.value === selectedValue
-	);
+	const selectedOption =
+		items.find( ( option ) => option.value === selectedValue ) ??
+		EMPTY_OPTION;
 
 	const goBack = () => {
 		setShowSubSheet( false );

package/src/mobile/gradient/index.native.js

@@ -51,7 +51,9 @@ export function getGradientAngle( gradientValue ) {
 		}
 	} else if ( angleType === 'angle' ) {
 		return parseFloat( angle );
-	} else return 4 * angleBase;
+	} else {
+		return 4 * angleBase;
+	}
 }
 
 export function getGradientColorGroup( gradientValue ) {

package/src/mobile/keyboard-aware-flat-list/index.android.js

@@ -18,8 +18,10 @@ import {
  */
 import useScroll from './use-scroll';
 import KeyboardAvoidingView from '../keyboard-avoiding-view';
+import { OPTIMIZATION_ITEMS_THRESHOLD, OPTIMIZATION_PROPS } from './shared';
 
 const AnimatedFlatList = Animated.createAnimatedComponent( FlatList );
+const EMPTY_OBJECT = {};
 
 export const KeyboardAwareFlatList = ( { onScroll, ...props }, ref ) => {
 	const { extraScrollHeight, scrollEnabled, shouldPreventAutomaticScroll } =
@@ -41,8 +43,6 @@ export const KeyboardAwareFlatList = ( { onScroll, ...props }, ref ) => {
 
 	const getFlatListRef = useCallback(
 		( flatListRef ) => {
-			// On Android, we get the ref of the associated scroll
-			// view to the FlatList.
 			scrollViewRef.current = flatListRef?.getNativeScrollRef();
 		},
 		[ scrollViewRef ]
@@ -57,12 +57,21 @@ export const KeyboardAwareFlatList = ( { onScroll, ...props }, ref ) => {
 		};
 	} );
 
+	const optimizationProps =
+		props.data?.length > OPTIMIZATION_ITEMS_THRESHOLD
+			? OPTIMIZATION_PROPS
+			: EMPTY_OBJECT;
+
 	return (
 		<KeyboardAvoidingView style={ { flex: 1 } }>
 			<AnimatedFlatList
 				ref={ getFlatListRef }
 				onScroll={ scrollHandler }
 				onContentSizeChange={ onContentSizeChange }
+				// Disable clipping to fix focus losing.
+				// See https://github.com/wordpress-mobile/gutenberg-mobile/pull/741#issuecomment-472746541
+				removeClippedSubviews={ false }
+				{ ...optimizationProps }
 				{ ...props }
 			/>
 		</KeyboardAvoidingView>

package/src/mobile/keyboard-aware-flat-list/index.ios.js

@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-
-import { ScrollView, FlatList } from 'react-native';
+import { FlatList, View } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 /**
@@ -22,9 +21,12 @@ import { useThrottle } from '@wordpress/compose';
 import useScroll from './use-scroll';
 import useTextInputOffset from './use-text-input-offset';
 import useTextInputCaretPosition from './use-text-input-caret-position';
+import { OPTIMIZATION_ITEMS_THRESHOLD, OPTIMIZATION_PROPS } from './shared';
+import styles from './styles.scss';
 
 const DEFAULT_FONT_SIZE = 16;
-const AnimatedScrollView = Animated.createAnimatedComponent( ScrollView );
+const AnimatedFlatList = Animated.createAnimatedComponent( FlatList );
+const EMPTY_OBJECT = {};
 
 /** @typedef {import('@wordpress/element').RefObject} RefObject */
 /**
@@ -35,7 +37,6 @@ const AnimatedScrollView = Animated.createAnimatedComponent( ScrollView );
  * @param {number}    props.extraScrollHeight            Extra scroll height for the content.
  * @param {Function}  props.onScroll                     Function to be called when the list is scrolled.
  * @param {boolean}   props.scrollEnabled                Whether the list can be scrolled.
- * @param {Object}    props.scrollViewStyle              Additional style for the ScrollView component.
  * @param {boolean}   props.shouldPreventAutomaticScroll Whether to prevent scrolling when there's a Keyboard offset set.
  * @param {Object}    props...                           Other props to pass to the FlatList component.
  * @param {RefObject} ref
@@ -46,7 +47,6 @@ export const KeyboardAwareFlatList = (
 		extraScrollHeight,
 		onScroll,
 		scrollEnabled,
-		scrollViewStyle,
 		shouldPreventAutomaticScroll,
 		...props
 	},
@@ -105,7 +105,12 @@ export const KeyboardAwareFlatList = (
 	// extra padding at the bottom.
 	const contentInset = { bottom: keyboardOffset };
 
-	const style = [ { flex: 1 }, scrollViewStyle ];
+	const getFlatListRef = useCallback(
+		( flatListRef ) => {
+			scrollViewRef.current = flatListRef?.getNativeScrollRef();
+		},
+		[ scrollViewRef ]
+	);
 
 	useImperativeHandle( ref, () => {
 		return {
@@ -116,20 +121,26 @@ export const KeyboardAwareFlatList = (
 		};
 	} );
 
+	const optimizationProps =
+		props.data?.length > OPTIMIZATION_ITEMS_THRESHOLD
+			? OPTIMIZATION_PROPS
+			: EMPTY_OBJECT;
+
 	return (
-		<AnimatedScrollView
-			automaticallyAdjustContentInsets={ false }
-			contentInset={ contentInset }
-			keyboardShouldPersistTaps="handled"
-			onContentSizeChange={ onContentSizeChange }
-			onScroll={ scrollHandler }
-			ref={ scrollViewRef }
-			scrollEnabled={ scrollEnabled }
-			scrollEventThrottle={ 16 }
-			style={ style }
-		>
-			<FlatList { ...props } scrollEnabled={ false } />
-		</AnimatedScrollView>
+		<View style={ styles.list__container }>
+			<AnimatedFlatList
+				ref={ getFlatListRef }
+				automaticallyAdjustContentInsets={ false }
+				contentInset={ contentInset }
+				keyboardShouldPersistTaps="handled"
+				onContentSizeChange={ onContentSizeChange }
+				onScroll={ scrollHandler }
+				scrollEventThrottle={ 16 }
+				style={ styles.list__content }
+				{ ...optimizationProps }
+				{ ...props }
+			/>
+		</View>
 	);
 };
 

package/src/mobile/keyboard-aware-flat-list/shared.native.js

@@ -0,0 +1,26 @@
+/**
+ * Optimization properties for FlatList.
+ * @typedef {Object} OptimizationProps
+ * @property {number} maxToRenderPerBatch - Controls the amount of items rendered per batch during scrolling.
+ *                                        Increasing this number reduces visual blank areas but may affect responsiveness.
+ *                                        Default: 10
+ * @property {number} windowSize          - Measurement unit representing viewport height.
+ *                                        Default: 21 (10 viewports above, 10 below, and 1 in between).
+ *                                        Larger values reduce chances of seeing blank spaces while scrolling but increase memory consumption.
+ *                                        Smaller values save memory but increase chances of seeing blank areas.
+ */
+
+/**
+ * Threshold for applying optimization settings.
+ * @type {number}
+ */
+export const OPTIMIZATION_ITEMS_THRESHOLD = 30;
+
+/**
+ * Optimization properties for FlatList.
+ * @type {OptimizationProps}
+ */
+export const OPTIMIZATION_PROPS = {
+	maxToRenderPerBatch: 15,
+	windowSize: 17,
+};

package/src/mobile/keyboard-aware-flat-list/styles.native.scss

@@ -0,0 +1,8 @@
+.list__container {
+	flex-grow: 1;
+	align-items: stretch;
+}
+
+.list__content {
+	margin-bottom: $mobile-block-toolbar-height;
+}

package/src/modal/aria-helper.ts

@@ -25,7 +25,9 @@ export function modalize( modalElement?: HTMLDivElement ) {
 	const hiddenElements: Element[] = [];
 	hiddenElementsByDepth.push( hiddenElements );
 	for ( const element of elements ) {
-		if ( element === modalElement ) continue;
+		if ( element === modalElement ) {
+			continue;
+		}
 
 		if ( elementShouldBeHidden( element ) ) {
 			element.setAttribute( 'aria-hidden', 'true' );
@@ -56,8 +58,11 @@ export function elementShouldBeHidden( element: Element ) {
  */
 export function unmodalize() {
 	const hiddenElements = hiddenElementsByDepth.pop();
-	if ( ! hiddenElements ) return;
+	if ( ! hiddenElements ) {
+		return;
+	}
 
-	for ( const element of hiddenElements )
+	for ( const element of hiddenElements ) {
 		element.removeAttribute( 'aria-hidden' );
+	}
 }

package/src/modal/index.tsx

@@ -154,7 +154,9 @@ function UnforwardedModal(
 	useEffect( () => {
 		dismissers.push( refOnRequestClose );
 		const [ first, second ] = dismissers;
-		if ( second ) first?.current?.();
+		if ( second ) {
+			first?.current?.();
+		}
 
 		const nested = nestedDismissers.current;
 		return () => {
@@ -243,7 +245,9 @@ function UnforwardedModal(
 		onPointerUp: ( { target, button } ) => {
 			const isSameTarget = target === pressTarget;
 			pressTarget = null;
-			if ( button === 0 && isSameTarget ) onRequestClose();
+			if ( button === 0 && isSameTarget ) {
+				onRequestClose();
+			}
 		},
 	};
 

package/src/modal/test/index.tsx

@@ -178,7 +178,9 @@ describe( 'Modal', () => {
 					{ isShown && (
 						<Modal
 							onKeyDown={ ( { key } ) => {
-								if ( key === 'o' ) setIsShown( false );
+								if ( key === 'o' ) {
+									setIsShown( false );
+								}
 							} }
 							onRequestClose={ noop }
 						>
@@ -402,12 +404,17 @@ describe( 'Modal', () => {
 					metaKey,
 				} ) => {
 					if ( key === 'a' ) {
-						if ( metaKey ) return setIsA1Shown( ( v ) => ! v );
+						if ( metaKey ) {
+							return setIsA1Shown( ( v ) => ! v );
+						}
 						return setIsAShown( ( v ) => ! v );
 					}
-					if ( key === 'b' ) return setIsBShown( ( v ) => ! v );
-					if ( key === 'c' )
+					if ( key === 'b' ) {
+						return setIsBShown( ( v ) => ! v );
+					}
+					if ( key === 'c' ) {
 						return setIsClassOverriden( ( v ) => ! v );
+					}
 				};
 				document.addEventListener( 'keydown', toggles );
 				return () =>

package/src/navigation/README.md

@@ -1,5 +1,9 @@
 # Navigation
 
+<div class="callout callout-alert">
+This component is deprecated. Consider using `Navigator` instead.
+</div>
+
 <div class="callout callout-alert">
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>

package/src/navigation/back-button/index.tsx

@@ -64,6 +64,9 @@ function UnforwardedNavigationBackButton(
 	);
 }
 
+/**
+ * @deprecated Use `Navigator` instead.
+ */
 export const NavigationBackButton = forwardRef(
 	UnforwardedNavigationBackButton
 );

package/src/navigation/group/index.tsx

@@ -19,6 +19,9 @@ import type { NavigationGroupProps } from '../types';
 
 let uniqueId = 0;
 
+/**
+ * @deprecated Use `Navigator` instead.
+ */
 export function NavigationGroup( {
 	children,
 	className,

package/src/navigation/index.tsx

@@ -28,6 +28,8 @@ const noop = () => {};
 /**
  * Render a navigation list with optional groupings and hierarchy.
  *
+ * @deprecated Use `Navigator` instead.
+ *
  * ```jsx
  * import {
  *   __experimentalNavigation as Navigation,

package/src/navigation/item/index.tsx

@@ -22,6 +22,9 @@ import type { NavigationItemProps } from '../types';
 
 const noop = () => {};
 
+/**
+ * @deprecated Use `Navigator` instead.
+ */
 export function NavigationItem( props: NavigationItemProps ) {
 	const {
 		badge,

package/src/navigation/menu/index.tsx

@@ -23,6 +23,9 @@ import { MenuUI } from '../styles/navigation-styles';
 
 import type { NavigationMenuProps } from '../types';
 
+/**
+ * @deprecated Use `Navigator` instead.
+ */
 export function NavigationMenu( props: NavigationMenuProps ) {
 	const {
 		backButtonLabel,

package/src/navigation/stories/index.story.tsx

@@ -19,8 +19,14 @@ import { MoreExamplesStory } from './utils/more-examples';
 import { HideIfEmptyStory } from './utils/hide-if-empty';
 import './style.css';
 
+/**
+ * Render a navigation list with optional groupings and hierarchy.
+ *
+ * This component is deprecated. Consider using `Navigator` instead.
+ */
 const meta: Meta< typeof Navigation > = {
-	title: 'Components (Experimental)/Navigation',
+	title: 'Components (Deprecated)/Navigation',
+	id: 'components-navigation',
 	component: Navigation,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170

package/src/navigation/styles/navigation-styles.tsx

@@ -15,7 +15,7 @@ import { COLORS } from '../../utils/colors-values';
 import Button from '../../button';
 import { Text } from '../../text';
 import { Heading } from '../../heading';
-import { reduceMotion, rtl } from '../../utils';
+import { rtl } from '../../utils';
 import { space } from '../../utils/space';
 
 export const NavigationUI = styled.div`
@@ -173,7 +173,6 @@ export const ItemBadgeUI = styled.span`
 	display: inline-flex;
 	padding: ${ space( 1 ) } ${ space( 3 ) };
 	border-radius: 2px;
-	animation: fade-in 250ms ease-out;
 
 	@keyframes fade-in {
 		from {
@@ -184,7 +183,9 @@ export const ItemBadgeUI = styled.span`
 		}
 	}
 
-	${ reduceMotion( 'animation' ) };
+	@media not ( prefers-reduced-motion ) {
+		animation: fade-in 250ms ease-out;
+	}
 `;
 
 export const ItemTitleUI = styled( Text )`

package/src/navigator/navigator-provider/component.tsx

@@ -80,6 +80,13 @@ function goTo(
 		...restOptions
 	} = options;
 
+	const isNavigatingToSamePath =
+		locationHistory.length > 0 &&
+		locationHistory[ locationHistory.length - 1 ].path === path;
+	if ( isNavigatingToSamePath ) {
+		return locationHistory;
+	}
+
 	const isNavigatingToPreviousPath =
 		isBack &&
 		locationHistory.length > 1 &&
@@ -146,7 +153,6 @@ function routerReducer(
 	action: RouterAction
 ): RouterState {
 	let { screens, locationHistory, matchedPath } = state;
-
 	switch ( action.type ) {
 		case 'add':
 			screens = addScreen( state, action.screen );

package/src/panel/body.tsx

@@ -109,7 +109,9 @@ const PanelBodyTitle = forwardRef(
 		}: WordPressComponentProps< PanelBodyTitleProps, 'button' >,
 		ref: React.ForwardedRef< any >
 	) => {
-		if ( ! title ) return null;
+		if ( ! title ) {
+			return null;
+		}
 
 		return (
 			<h2 className="components-panel__body-title">

package/src/panel/style.scss

@@ -32,6 +32,7 @@
 
 .components-panel__header {
 	display: flex;
+	flex-shrink: 0;
 	justify-content: space-between;
 	align-items: center;
 	padding: 0 $grid-unit-20;

package/src/placeholder/style.scss

@@ -3,23 +3,20 @@
 	font-size: $default-font-size;
 	box-sizing: border-box;
 	position: relative;
-	padding: 1em;
+	padding: $grid-unit-30;
 	width: 100%;
 	text-align: left;
 	margin: 0;
 	color: $gray-900;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: $grid-unit-20;
 
 	// Some editor styles unset this.
 	-moz-font-smoothing: subpixel-antialiased;
 	-webkit-font-smoothing: subpixel-antialiased;
 
-	// IE11 doesn't read rules inside this query. They are applied only to modern browsers.
-	@supports (position: sticky) {
-		display: flex;
-		flex-direction: column;
-		justify-content: top;
-		align-items: flex-start;
-	}
 
 	// Block UI appearance.
 	border-radius: $radius-block-ui;
@@ -42,15 +39,14 @@
 }
 
 .components-placeholder__label {
-	display: flex;
 	font-weight: 600;
-	margin-bottom: $grid-unit-20;
 	align-items: center;
+	display: flex;
 
 	> svg,
 	.dashicon,
 	.block-editor-block-icon {
-		margin-right: $grid-unit-15;
+		margin-right: $grid-unit-05;
 		fill: currentColor;
 		// Optimizate for high contrast modes.
 		// See also https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/.
@@ -71,6 +67,8 @@
 	flex-direction: row;
 	width: 100%;
 	flex-wrap: wrap;
+	gap: $grid-unit-15;
+	justify-content: flex-start;
 
 	p {
 		font-family: $default-font;
@@ -89,24 +87,11 @@
 	flex: 1 1 auto;
 }
 
-.components-placeholder__instructions {
-	margin-bottom: 1em;
-}
-
 .components-placeholder__error {
-	margin-top: 1em;
 	width: 100%;
+	gap: $grid-unit-10;
 }
 
-.components-placeholder__fieldset .components-button {
-	margin-right: $grid-unit-15;
-	margin-bottom: $grid-unit-15; // If buttons wrap we need vertical space between.
-
-	&:last-child {
-		margin-bottom: 0;
-		margin-right: 0;
-	}
-}
 
 // Any `<Button />` component with `variant="link"` prop will need extra spacing if placed
 // immediately after a button which is *not* an `variant="link"` style button. This is because
@@ -123,14 +108,6 @@
 
 // Element queries to show different layouts at various sizes.
 .components-placeholder {
-	// Medium and large sizes.
-	&.is-large {
-		.components-placeholder__label {
-			font-size: 18pt;
-			font-weight: normal;
-		}
-	}
-
 	// Medium and small sizes.
 	&.is-medium,
 	&.is-small {
@@ -143,16 +120,15 @@
 			flex-direction: column;
 		}
 
-		.components-placeholder__fieldset .components-button {
-			margin-right: auto;
+		.components-placeholder__fieldset > *,
+		.components-button {
+			width: 100%;
+			justify-content: center;
 		}
 	}
 
-	// Small sizes.
 	&.is-small {
-		.components-button {
-			padding: 0 $grid-unit-10 2px;
-		}
+		padding: $grid-unit-20;
 	}
 }
 
@@ -183,8 +159,6 @@
 	}
 
 	.components-placeholder__fieldset {
-		width: auto;
-
 		// Unset intrinsic margins.
 		margin-left: 0;
 		margin-right: 0;