@wordpress/components 32.5.0 → 32.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "32.5.0",
+	"version": "32.6.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -64,24 +64,24 @@
 		"@types/highlight-words-core": "1.2.1",
 		"@types/react": "^18.3.27",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.43.0",
-		"@wordpress/base-styles": "^6.19.0",
-		"@wordpress/compose": "^7.43.0",
-		"@wordpress/date": "^5.43.0",
-		"@wordpress/deprecated": "^4.43.0",
-		"@wordpress/dom": "^4.43.0",
-		"@wordpress/element": "^6.43.0",
-		"@wordpress/escape-html": "^3.43.0",
-		"@wordpress/hooks": "^4.43.0",
-		"@wordpress/html-entities": "^4.43.0",
-		"@wordpress/i18n": "^6.16.0",
-		"@wordpress/icons": "^12.1.0",
-		"@wordpress/is-shallow-equal": "^5.43.0",
-		"@wordpress/keycodes": "^4.43.0",
-		"@wordpress/primitives": "^4.43.0",
-		"@wordpress/private-apis": "^1.43.0",
-		"@wordpress/rich-text": "^7.43.0",
-		"@wordpress/warning": "^3.43.0",
+		"@wordpress/a11y": "^4.44.0",
+		"@wordpress/base-styles": "^6.20.0",
+		"@wordpress/compose": "^7.44.0",
+		"@wordpress/date": "^5.44.0",
+		"@wordpress/deprecated": "^4.44.0",
+		"@wordpress/dom": "^4.44.0",
+		"@wordpress/element": "^6.44.0",
+		"@wordpress/escape-html": "^3.44.0",
+		"@wordpress/hooks": "^4.44.0",
+		"@wordpress/html-entities": "^4.44.0",
+		"@wordpress/i18n": "^6.17.0",
+		"@wordpress/icons": "^12.2.0",
+		"@wordpress/is-shallow-equal": "^5.44.0",
+		"@wordpress/keycodes": "^4.44.0",
+		"@wordpress/primitives": "^4.44.0",
+		"@wordpress/private-apis": "^1.44.0",
+		"@wordpress/rich-text": "^7.44.0",
+		"@wordpress/warning": "^3.44.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -107,7 +107,7 @@
 		"@storybook/react-vite": "^10.2.8",
 		"@testing-library/jest-dom": "^6.9.1",
 		"@types/jest": "^29.5.14",
-		"@wordpress/jest-console": "^8.43.0",
+		"@wordpress/jest-console": "^8.44.0",
 		"snapshot-diff": "^0.10.0",
 		"storybook": "^10.2.8",
 		"timezone-mock": "^1.3.6"
@@ -119,5 +119,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2cea90674d11aa521ec3f71652fb3a6a4c383969"
+	"gitHead": "b862d8c84121a47bbeff882f6c87e61681ce2e0d"
 }

package/src/alignment-matrix-control/README.md

@@ -43,7 +43,7 @@ underlying `grid` widget.
 
 ### `onChange`
 
- - Type: `(newValue: AlignmentMatrixControlValue) => void`
+ - Type: `((newValue: AlignmentMatrixControlValue) => void)`
  - Required: No
 
 A function that receives the updated alignment value.

package/src/alignment-matrix-control/style.module.scss

@@ -15,7 +15,7 @@
 	border-radius: $radius-medium;
 	outline: none;
 
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 }
 
 .grid-row {

package/src/angle-picker-control/style.module.scss

@@ -31,6 +31,7 @@
 	border-radius: $radius-round;
 	box-sizing: border-box;
 	display: block;
+	/* stylelint-disable-next-line plugin/use-logical-properties-and-values -- Geometric centering */
 	left: 50%;
 	top: 4px;
 	transform: translateX(-50%);

package/src/autocomplete/README.md

@@ -78,7 +78,7 @@ In addition, a completer may optionally declare:
 
 #### name
 
-The name of the completer. Useful for identifying a specific completer to be overridden via extensibility hooks.
+The name of the completer. Useful for identifying a specific completer to be overridden via extensibility hooks. Each completer should have a unique name.
 
 -   Type: `String`
 -   Required: Yes
@@ -145,7 +145,7 @@ A class name to apply to the autocompletion popup menu.
 
 #### isDebounced
 
-Whether to apply debouncing for the autocompleter. Set to true to enable debouncing.
+Whether to debounce the autocompleter. This setting only affects the `options` argument; it is ignored by the `useItems`.
 
 -   Type: `Boolean`
 -   Required: No

package/src/autocomplete/autocompleter-ui.native.js

@@ -34,185 +34,178 @@ import { __unstableAutocompletionItemsFill as AutocompletionItemsFill } from '..
 
 const { compose: stylesCompose } = StyleSheet;
 
-export function getAutoCompleterUI( autocompleter ) {
+export function AutocompleterUI( {
+	autocompleter,
+	filterValue,
+	selectedIndex,
+	onChangeOptions,
+	onSelect,
+	reset,
+} ) {
+	// The useItems hook is derived from the autocompleter prop. This is safe
+	// because the parent renders this component with a key that triggers
+	// remount when the completer changes.
 	const useItems = autocompleter.useItems
 		? autocompleter.useItems
 		: getDefaultUseItems( autocompleter );
+	const [ items ] = useItems( filterValue );
+	const filteredItems = items.filter( ( item ) => ! item.isDisabled );
+	const scrollViewRef = useRef();
+	const animationValue = useRef( new Animated.Value( 0 ) ).current;
+	const [ isVisible, setIsVisible ] = useState( false );
+
+	useEffect( () => {
+		if ( ! isVisible && filterValue.length > 0 ) {
+			setIsVisible( true );
+		}
+	}, [ isVisible, filterValue ] );
 
-	function AutocompleterUI( {
-		filterValue,
-		selectedIndex,
-		onChangeOptions,
-		onSelect,
-		value,
-		reset,
-	} ) {
-		const [ items ] = useItems( filterValue );
-		const filteredItems = items.filter( ( item ) => ! item.isDisabled );
-		const scrollViewRef = useRef();
-		const animationValue = useRef( new Animated.Value( 0 ) ).current;
-		const [ isVisible, setIsVisible ] = useState( false );
-		const { text } = value;
-
-		useEffect( () => {
-			if ( ! isVisible && text.length > 0 ) {
-				setIsVisible( true );
-			}
-		}, [ isVisible, text ] );
-
-		useLayoutEffect( () => {
-			onChangeOptions( items );
-			scrollViewRef.current?.scrollTo( { x: 0, animated: false } );
-
-			if ( isVisible && text.length > 0 ) {
-				startAnimation( true );
-			} else if ( isVisible && text.length === 0 ) {
-				startAnimation( false );
-			}
-			// We want to avoid introducing unexpected side effects.
-			// See https://github.com/WordPress/gutenberg/pull/41820
-		}, [ items, isVisible, text ] );
-
-		const activeItemStyles = usePreferredColorSchemeStyle(
-			styles[ 'components-autocomplete__item-active' ],
-			styles[ 'components-autocomplete__item-active-dark' ]
-		);
-
-		const iconStyles = usePreferredColorSchemeStyle(
-			styles[ 'components-autocomplete__icon' ],
-			styles[ 'components-autocomplete__icon-active-dark' ]
-		);
-
-		const activeIconStyles = usePreferredColorSchemeStyle(
-			styles[ 'components-autocomplete__icon-active ' ],
-			styles[ 'components-autocomplete__icon-active-dark' ]
-		);
-
-		const textStyles = usePreferredColorSchemeStyle(
-			styles[ 'components-autocomplete__text' ],
-			styles[ 'components-autocomplete__text-dark' ]
-		);
-
-		const activeTextStyles = usePreferredColorSchemeStyle(
-			styles[ 'components-autocomplete__text-active' ],
-			styles[ 'components-autocomplete__text-active-dark' ]
-		);
-
-		const startAnimation = useCallback(
-			( show ) => {
-				Animated.timing( animationValue, {
-					toValue: show ? 1 : 0,
-					duration: show ? 200 : 100,
-					useNativeDriver: true,
-				} ).start( ( { finished } ) => {
-					if ( finished && ! show && isVisible ) {
-						setIsVisible( false );
-						reset();
-					}
-				} );
-			},
-			// We want to avoid introducing unexpected side effects.
-			// See https://github.com/WordPress/gutenberg/pull/41820
-			[ isVisible ]
-		);
-
-		const contentStyles = {
-			transform: [
-				{
-					translateY: animationValue.interpolate( {
-						inputRange: [ 0, 1 ],
-						outputRange: [
-							styles[ 'components-autocomplete' ].height,
-							0,
-						],
-					} ),
-				},
-			],
-		};
-
-		if ( ! filteredItems.length > 0 || ! isVisible ) {
-			return null;
+	useLayoutEffect( () => {
+		onChangeOptions( items );
+		scrollViewRef.current?.scrollTo( { x: 0, animated: false } );
+
+		if ( isVisible && filterValue.length > 0 ) {
+			startAnimation( true );
+		} else if ( isVisible && filterValue.length === 0 ) {
+			startAnimation( false );
 		}
+		// We want to avoid introducing unexpected side effects.
+		// See https://github.com/WordPress/gutenberg/pull/41820
+	}, [ items, isVisible, filterValue ] );
+
+	const activeItemStyles = usePreferredColorSchemeStyle(
+		styles[ 'components-autocomplete__item-active' ],
+		styles[ 'components-autocomplete__item-active-dark' ]
+	);
+
+	const iconStyles = usePreferredColorSchemeStyle(
+		styles[ 'components-autocomplete__icon' ],
+		styles[ 'components-autocomplete__icon-active-dark' ]
+	);
+
+	const activeIconStyles = usePreferredColorSchemeStyle(
+		styles[ 'components-autocomplete__icon-active ' ],
+		styles[ 'components-autocomplete__icon-active-dark' ]
+	);
+
+	const textStyles = usePreferredColorSchemeStyle(
+		styles[ 'components-autocomplete__text' ],
+		styles[ 'components-autocomplete__text-dark' ]
+	);
+
+	const activeTextStyles = usePreferredColorSchemeStyle(
+		styles[ 'components-autocomplete__text-active' ],
+		styles[ 'components-autocomplete__text-active-dark' ]
+	);
+
+	const startAnimation = useCallback(
+		( show ) => {
+			Animated.timing( animationValue, {
+				toValue: show ? 1 : 0,
+				duration: show ? 200 : 100,
+				useNativeDriver: true,
+			} ).start( ( { finished } ) => {
+				if ( finished && ! show && isVisible ) {
+					setIsVisible( false );
+					reset();
+				}
+			} );
+		},
+		// We want to avoid introducing unexpected side effects.
+		// See https://github.com/WordPress/gutenberg/pull/41820
+		[ isVisible ]
+	);
+
+	const contentStyles = {
+		transform: [
+			{
+				translateY: animationValue.interpolate( {
+					inputRange: [ 0, 1 ],
+					outputRange: [
+						styles[ 'components-autocomplete' ].height,
+						0,
+					],
+				} ),
+			},
+		],
+	};
 
-		return (
-			<AutocompletionItemsFill>
-				<View style={ styles[ 'components-autocomplete' ] }>
-					<Animated.View style={ contentStyles }>
-						<BackgroundView>
-							<ScrollView
-								testID="autocompleter"
-								ref={ scrollViewRef }
-								horizontal
-								contentContainerStyle={
-									styles[ 'components-autocomplete__content' ]
-								}
-								showsHorizontalScrollIndicator={ false }
-								keyboardShouldPersistTaps="always"
-								accessibilityLabel={
-									// translators: Slash inserter autocomplete results
-									__( 'Slash inserter results' )
-								}
-							>
-								{ filteredItems.map( ( option, index ) => {
-									const isActive = index === selectedIndex;
-									const itemStyle = stylesCompose(
-										styles[
-											'components-autocomplete__item'
-										],
-										isActive && activeItemStyles
-									);
-									const textStyle = stylesCompose(
-										textStyles,
-										isActive && activeTextStyles
-									);
-									const iconStyle = stylesCompose(
-										iconStyles,
-										isActive && activeIconStyles
-									);
-									const iconSource =
-										option?.value?.icon?.src ||
-										option?.value?.icon;
-
-									return (
-										<TouchableOpacity
-											activeOpacity={ 0.5 }
-											style={ itemStyle }
-											key={ index }
-											onPress={ () => onSelect( option ) }
-											accessibilityLabel={ sprintf(
-												// translators: %s: Block name e.g. "Image block"
-												__( '%s block' ),
-												option?.value?.title
-											) }
-										>
-											<View
-												style={
-													styles[
-														'components-autocomplete__icon'
-													]
-												}
-											>
-												<Icon
-													icon={ iconSource }
-													size={ 24 }
-													style={ iconStyle }
-												/>
-											</View>
-											<Text style={ textStyle }>
-												{ option?.value?.title }
-											</Text>
-										</TouchableOpacity>
-									);
-								} ) }
-							</ScrollView>
-						</BackgroundView>
-					</Animated.View>
-				</View>
-			</AutocompletionItemsFill>
-		);
+	if ( ! filteredItems.length > 0 || ! isVisible ) {
+		return null;
 	}
 
-	return AutocompleterUI;
+	return (
+		<AutocompletionItemsFill>
+			<View style={ styles[ 'components-autocomplete' ] }>
+				<Animated.View style={ contentStyles }>
+					<BackgroundView>
+						<ScrollView
+							testID="autocompleter"
+							ref={ scrollViewRef }
+							horizontal
+							contentContainerStyle={
+								styles[ 'components-autocomplete__content' ]
+							}
+							showsHorizontalScrollIndicator={ false }
+							keyboardShouldPersistTaps="always"
+							accessibilityLabel={
+								// translators: Slash inserter autocomplete results
+								__( 'Slash inserter results' )
+							}
+						>
+							{ filteredItems.map( ( option, index ) => {
+								const isActive = index === selectedIndex;
+								const itemStyle = stylesCompose(
+									styles[ 'components-autocomplete__item' ],
+									isActive && activeItemStyles
+								);
+								const textStyle = stylesCompose(
+									textStyles,
+									isActive && activeTextStyles
+								);
+								const iconStyle = stylesCompose(
+									iconStyles,
+									isActive && activeIconStyles
+								);
+								const iconSource =
+									option?.value?.icon?.src ||
+									option?.value?.icon;
+
+								return (
+									<TouchableOpacity
+										activeOpacity={ 0.5 }
+										style={ itemStyle }
+										key={ index }
+										onPress={ () => onSelect( option ) }
+										accessibilityLabel={ sprintf(
+											// translators: %s: Block name e.g. "Image block"
+											__( '%s block' ),
+											option?.value?.title
+										) }
+									>
+										<View
+											style={
+												styles[
+													'components-autocomplete__icon'
+												]
+											}
+										>
+											<Icon
+												icon={ iconSource }
+												size={ 24 }
+												style={ iconStyle }
+											/>
+										</View>
+										<Text style={ textStyle }>
+											{ option?.value?.title }
+										</Text>
+									</TouchableOpacity>
+								);
+							} ) }
+						</ScrollView>
+					</BackgroundView>
+				</Animated.View>
+			</View>
+		</AutocompletionItemsFill>
+	);
 }
-
-export default getAutoCompleterUI;