@wordpress/components 25.9.1 → 25.11.0

package/src/autocomplete/index.tsx

@@ -22,6 +22,8 @@ import {
 	isCollapsed,
 	getTextContent,
 } from '@wordpress/rich-text';
+import { speak } from '@wordpress/a11y';
+import { isAppleOS } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -39,6 +41,35 @@ import type {
 	WPCompleter,
 } from './types';
 
+const getNodeText = ( node: React.ReactNode ): string => {
+	if ( node === null ) {
+		return '';
+	}
+
+	switch ( typeof node ) {
+		case 'string':
+		case 'number':
+			return node.toString();
+			break;
+		case 'boolean':
+			return '';
+			break;
+		case 'object': {
+			if ( node instanceof Array ) {
+				return node.map( getNodeText ).join( '' );
+			}
+			if ( 'props' in node ) {
+				return getNodeText( node.props.children );
+			}
+			break;
+		}
+		default:
+			return '';
+	}
+
+	return '';
+};
+
 const EMPTY_FILTERED_OPTIONS: KeyedOption[] = [];
 
 export function useAutocomplete( {
@@ -163,20 +194,35 @@ export function useAutocomplete( {
 		) {
 			return;
 		}
+
 		switch ( event.key ) {
-			case 'ArrowUp':
-				setSelectedIndex(
+			case 'ArrowUp': {
+				const newIndex =
 					( selectedIndex === 0
 						? filteredOptions.length
-						: selectedIndex ) - 1
-				);
+						: selectedIndex ) - 1;
+				setSelectedIndex( newIndex );
+				// See the related PR as to why this is necessary: https://github.com/WordPress/gutenberg/pull/54902.
+				if ( isAppleOS() ) {
+					speak(
+						getNodeText( filteredOptions[ newIndex ].label ),
+						'assertive'
+					);
+				}
 				break;
+			}
 
-			case 'ArrowDown':
-				setSelectedIndex(
-					( selectedIndex + 1 ) % filteredOptions.length
-				);
+			case 'ArrowDown': {
+				const newIndex = ( selectedIndex + 1 ) % filteredOptions.length;
+				setSelectedIndex( newIndex );
+				if ( isAppleOS() ) {
+					speak(
+						getNodeText( filteredOptions[ newIndex ].label ),
+						'assertive'
+					);
+				}
 				break;
+			}
 
 			case 'Escape':
 				setAutocompleter( null );
@@ -218,82 +264,95 @@ export function useAutocomplete( {
 			return;
 		}
 
-		const completer = completers?.find(
-			( { triggerPrefix, allowContext } ) => {
-				const index = textContent.lastIndexOf( triggerPrefix );
-
-				if ( index === -1 ) {
-					return false;
-				}
-
-				const textWithoutTrigger = textContent.slice(
-					index + triggerPrefix.length
+		// Find the completer with the highest triggerPrefix index in the
+		// textContent.
+		const completer = completers.reduce< WPCompleter | null >(
+			( lastTrigger, currentCompleter ) => {
+				const triggerIndex = textContent.lastIndexOf(
+					currentCompleter.triggerPrefix
 				);
+				const lastTriggerIndex =
+					lastTrigger !== null
+						? textContent.lastIndexOf( lastTrigger.triggerPrefix )
+						: -1;
+
+				return triggerIndex > lastTriggerIndex
+					? currentCompleter
+					: lastTrigger;
+			},
+			null
+		);
 
-				const tooDistantFromTrigger = textWithoutTrigger.length > 50; // 50 chars seems to be a good limit.
-				// This is a final barrier to prevent the effect from completing with
-				// an extremely long string, which causes the editor to slow-down
-				// significantly. This could happen, for example, if `matchingWhileBackspacing`
-				// is true and one of the "words" end up being too long. If that's the case,
-				// it will be caught by this guard.
-				if ( tooDistantFromTrigger ) return false;
-
-				const mismatch = filteredOptions.length === 0;
-				const wordsFromTrigger = textWithoutTrigger.split( /\s/ );
-				// We need to allow the effect to run when not backspacing and if there
-				// was a mismatch. i.e when typing a trigger + the match string or when
-				// clicking in an existing trigger word on the page. We do that if we
-				// detect that we have one word from trigger in the current textual context.
-				//
-				// Ex.: "Some text @a" <-- "@a" will be detected as the trigger word and
-				// allow the effect to run. It will run until there's a mismatch.
-				const hasOneTriggerWord = wordsFromTrigger.length === 1;
-				// This is used to allow the effect to run when backspacing and if
-				// "touching" a word that "belongs" to a trigger. We consider a "trigger
-				// word" any word up to the limit of 3 from the trigger character.
-				// Anything beyond that is ignored if there's a mismatch. This allows
-				// us to "escape" a mismatch when backspacing, but still imposing some
-				// sane limits.
-				//
-				// Ex: "Some text @marcelo sekkkk" <--- "kkkk" caused a mismatch, but
-				// if the user presses backspace here, it will show the completion popup again.
-				const matchingWhileBackspacing =
-					backspacing.current &&
-					textWithoutTrigger.split( /\s/ ).length <= 3;
-
-				if (
-					mismatch &&
-					! ( matchingWhileBackspacing || hasOneTriggerWord )
-				) {
-					return false;
-				}
-
-				const textAfterSelection = getTextContent(
-					slice( record, undefined, getTextContent( record ).length )
-				);
+		if ( ! completer ) {
+			if ( autocompleter ) reset();
+			return;
+		}
 
-				if (
-					allowContext &&
-					! allowContext(
-						textContent.slice( 0, index ),
-						textAfterSelection
-					)
-				) {
-					return false;
-				}
+		const { allowContext, triggerPrefix } = completer;
+		const triggerIndex = textContent.lastIndexOf( triggerPrefix );
+		const textWithoutTrigger = textContent.slice(
+			triggerIndex + triggerPrefix.length
+		);
 
-				if (
-					/^\s/.test( textWithoutTrigger ) ||
-					/\s\s+$/.test( textWithoutTrigger )
-				) {
-					return false;
-				}
+		const tooDistantFromTrigger = textWithoutTrigger.length > 50; // 50 chars seems to be a good limit.
+		// This is a final barrier to prevent the effect from completing with
+		// an extremely long string, which causes the editor to slow-down
+		// significantly. This could happen, for example, if `matchingWhileBackspacing`
+		// is true and one of the "words" end up being too long. If that's the case,
+		// it will be caught by this guard.
+		if ( tooDistantFromTrigger ) return;
+
+		const mismatch = filteredOptions.length === 0;
+		const wordsFromTrigger = textWithoutTrigger.split( /\s/ );
+		// We need to allow the effect to run when not backspacing and if there
+		// was a mismatch. i.e when typing a trigger + the match string or when
+		// clicking in an existing trigger word on the page. We do that if we
+		// detect that we have one word from trigger in the current textual context.
+		//
+		// Ex.: "Some text @a" <-- "@a" will be detected as the trigger word and
+		// allow the effect to run. It will run until there's a mismatch.
+		const hasOneTriggerWord = wordsFromTrigger.length === 1;
+		// This is used to allow the effect to run when backspacing and if
+		// "touching" a word that "belongs" to a trigger. We consider a "trigger
+		// word" any word up to the limit of 3 from the trigger character.
+		// Anything beyond that is ignored if there's a mismatch. This allows
+		// us to "escape" a mismatch when backspacing, but still imposing some
+		// sane limits.
+		//
+		// Ex: "Some text @marcelo sekkkk" <--- "kkkk" caused a mismatch, but
+		// if the user presses backspace here, it will show the completion popup again.
+		const matchingWhileBackspacing =
+			backspacing.current && wordsFromTrigger.length <= 3;
+
+		if ( mismatch && ! ( matchingWhileBackspacing || hasOneTriggerWord ) ) {
+			if ( autocompleter ) reset();
+			return;
+		}
 
-				return /[\u0000-\uFFFF]*$/.test( textWithoutTrigger );
-			}
+		const textAfterSelection = getTextContent(
+			slice( record, undefined, getTextContent( record ).length )
 		);
 
-		if ( ! completer ) {
+		if (
+			allowContext &&
+			! allowContext(
+				textContent.slice( 0, triggerIndex ),
+				textAfterSelection
+			)
+		) {
+			if ( autocompleter ) reset();
+			return;
+		}
+
+		if (
+			/^\s/.test( textWithoutTrigger ) ||
+			/\s\s+$/.test( textWithoutTrigger )
+		) {
+			if ( autocompleter ) reset();
+			return;
+		}
+
+		if ( ! /[\u0000-\uFFFF]*$/.test( textWithoutTrigger ) ) {
 			if ( autocompleter ) reset();
 			return;
 		}

package/src/button/style.scss

@@ -308,8 +308,7 @@
 	}
 
 	// Toggled style.
-	&[aria-pressed="true"],
-	&[aria-pressed="mixed"] {
+	&.is-pressed {
 		color: $components-color-foreground-inverted;
 		background: $components-color-foreground;
 

package/src/circular-option-picker/circular-option-picker-option.tsx

@@ -8,7 +8,7 @@ import type { ForwardedRef } from 'react';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { forwardRef, useContext, useEffect } from '@wordpress/element';
+import { forwardRef, useContext } from '@wordpress/element';
 import { Icon, check } from '@wordpress/icons';
 
 /**
@@ -16,15 +16,9 @@ import { Icon, check } from '@wordpress/icons';
  */
 import { CircularOptionPickerContext } from './circular-option-picker-context';
 import Button from '../button';
-import { CompositeItem } from '../composite';
+import { CompositeItem } from '../composite/v2';
 import Tooltip from '../tooltip';
-import type {
-	OptionProps,
-	CircularOptionPickerCompositeState,
-	CircularOptionPickerContextProps,
-} from './types';
-
-const hasSelectedOption = new Map();
+import type { OptionProps, CircularOptionPickerCompositeStore } from './types';
 
 function UnforwardedOptionAsButton(
 	props: {
@@ -40,7 +34,7 @@ function UnforwardedOptionAsButton(
 			{ ...additionalProps }
 			aria-pressed={ isPressed }
 			ref={ forwardedRef }
-		></Button>
+		/>
 	);
 }
 
@@ -51,38 +45,29 @@ function UnforwardedOptionAsOption(
 		id: string;
 		className?: string;
 		isSelected?: boolean;
-		context: CircularOptionPickerContextProps;
+		compositeStore: CircularOptionPickerCompositeStore;
 	},
 	forwardedRef: ForwardedRef< any >
 ) {
-	const { id, isSelected, context, ...additionalProps } = props;
-	const { isComposite, ..._compositeState } = context;
-	const compositeState =
-		_compositeState as CircularOptionPickerCompositeState;
-	const { baseId, currentId, setCurrentId } = compositeState;
+	const { id, isSelected, compositeStore, ...additionalProps } = props;
+	const activeId = compositeStore.useState( 'activeId' );
 
-	useEffect( () => {
-		// If we call `setCurrentId` here, it doesn't update for other
-		// Option renders in the same pass. So we have to store our own
-		// map to make sure that we only set the first selected option.
-		// We still need to check `currentId` because the control will
-		// update this as the user moves around, and that state should
-		// be maintained as the group gains and loses focus.
-		if ( isSelected && ! currentId && ! hasSelectedOption.get( baseId ) ) {
-			hasSelectedOption.set( baseId, true );
-			setCurrentId( id );
-		}
-	}, [ baseId, currentId, id, isSelected, setCurrentId ] );
+	if ( isSelected && ! activeId ) {
+		compositeStore.setActiveId( id );
+	}
 
 	return (
 		<CompositeItem
-			{ ...additionalProps }
-			{ ...compositeState }
-			as={ Button }
+			render={
+				<Button
+					{ ...additionalProps }
+					role="option"
+					aria-selected={ !! isSelected }
+					ref={ forwardedRef }
+				/>
+			}
+			store={ compositeStore }
 			id={ id }
-			role="option"
-			aria-selected={ !! isSelected }
-			ref={ forwardedRef }
 		/>
 	);
 }
@@ -96,8 +81,9 @@ export function Option( {
 	tooltipText,
 	...additionalProps
 }: OptionProps ) {
-	const compositeContext = useContext( CircularOptionPickerContext );
-	const { isComposite, baseId } = compositeContext;
+	const { baseId, compositeStore } = useContext(
+		CircularOptionPickerContext
+	);
 	const id = useInstanceId(
 		Option,
 		baseId || 'components-circular-option-picker__option'
@@ -109,10 +95,10 @@ export function Option( {
 		...additionalProps,
 	};
 
-	const optionControl = isComposite ? (
+	const optionControl = compositeStore ? (
 		<OptionAsOption
 			{ ...commonProps }
-			context={ compositeContext }
+			compositeStore={ compositeStore }
 			isSelected={ isSelected }
 		/>
 	) : (

package/src/circular-option-picker/circular-option-picker.tsx

@@ -7,14 +7,13 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { useEffect } from '@wordpress/element';
 import { isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { CircularOptionPickerContext } from './circular-option-picker-context';
-import { Composite, useCompositeState } from '../composite';
+import { Composite, useCompositeStore } from '../composite/v2';
 import type {
 	CircularOptionPickerProps,
 	ListboxCircularOptionPickerProps,
@@ -85,30 +84,15 @@ function ListboxCircularOptionPicker(
 		children,
 		...additionalProps
 	} = props;
-	const rtl = isRTL();
 
-	const compositeState = useCompositeState( { baseId, loop, rtl } );
-	const { setBaseId, setLoop, setRTL } = compositeState;
-
-	// These are necessary as `useCompositeState` is sealed after
-	// the first render, so although unlikely to happen, if a state
-	// property should change, we need to process it accordingly.
-
-	useEffect( () => {
-		setBaseId( baseId );
-	}, [ setBaseId, baseId ] );
-
-	useEffect( () => {
-		setLoop( loop );
-	}, [ setLoop, loop ] );
-
-	useEffect( () => {
-		setRTL( rtl );
-	}, [ setRTL, rtl ] );
+	const compositeStore = useCompositeStore( {
+		focusLoop: loop,
+		rtl: isRTL(),
+	} );
 
 	const compositeContext = {
-		isComposite: true,
-		...compositeState,
+		baseId,
+		compositeStore,
 	};
 
 	return (
@@ -116,7 +100,8 @@ function ListboxCircularOptionPicker(
 			<CircularOptionPickerContext.Provider value={ compositeContext }>
 				<Composite
 					{ ...additionalProps }
-					{ ...compositeState }
+					id={ baseId }
+					store={ compositeStore }
 					role={ 'listbox' }
 				>
 					{ options }
@@ -134,10 +119,8 @@ function ButtonsCircularOptionPicker(
 	const { actions, options, children, baseId, ...additionalProps } = props;
 
 	return (
-		<div { ...additionalProps }>
-			<CircularOptionPickerContext.Provider
-				value={ { isComposite: false, baseId } }
-			>
+		<div { ...additionalProps } id={ baseId }>
+			<CircularOptionPickerContext.Provider value={ { baseId } }>
 				{ options }
 				{ children }
 				{ actions }

package/src/circular-option-picker/types.ts

@@ -14,7 +14,7 @@ import type { Icon } from '@wordpress/icons';
 import type { ButtonAsButtonProps } from '../button/types';
 import type { DropdownProps } from '../dropdown/types';
 import type { WordPressComponentProps } from '../context';
-import type { CompositeState } from '../composite';
+import type { CompositeStore } from '../composite/v2';
 
 type CommonCircularOptionPickerProps = {
 	/**
@@ -123,7 +123,8 @@ export type OptionProps = Omit<
 	>;
 };
 
-export type CircularOptionPickerCompositeState = CompositeState;
-export type CircularOptionPickerContextProps =
-	| { isComposite?: false; baseId?: string }
-	| ( { isComposite: true } & CircularOptionPickerCompositeState );
+export type CircularOptionPickerCompositeStore = CompositeStore;
+export type CircularOptionPickerContextProps = {
+	baseId?: string;
+	compositeStore?: CircularOptionPickerCompositeStore;
+};

package/src/color-palette/index.tsx

@@ -147,6 +147,10 @@ export function CustomColorPickerDropdown( {
 	const popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(
 		() => ( {
 			shift: true,
+			// Disabling resize as it would otherwise cause the popover to show
+			// scrollbars while dragging the color picker's handle close to the
+			// popover edge.
+			resize: false,
 			...( isRenderedInSidebar
 				? {
 						// When in the sidebar: open to the left (stacking),
@@ -299,6 +303,7 @@ function UnforwardedColorPalette(
 								style={ {
 									background: value,
 								} }
+								type="button"
 							/>
 							<VStack
 								className="components-color-palette__custom-color-text-wrapper"
@@ -307,7 +312,7 @@ function UnforwardedColorPalette(
 								<Truncate className="components-color-palette__custom-color-name">
 									{ value
 										? buttonLabelName
-										: 'No color selected' }
+										: __( 'No color selected' ) }
 								</Truncate>
 								{ /*
 								This `Truncate` is always rendered, even if

package/src/color-picker/component.tsx

@@ -10,7 +10,7 @@ import namesPlugin from 'colord/plugins/names';
  * WordPress dependencies
  */
 import { useCallback, useState, useMemo } from '@wordpress/element';
-import { useDebounce } from '@wordpress/compose';
+import { useDebounce, useMergeRefs } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -49,8 +49,24 @@ const UnconnectedColorPicker = (
 		onChange,
 		defaultValue = '#fff',
 		copyFormat,
+
+		// Context
+		onPickerDragStart,
+		onPickerDragEnd,
 		...divProps
-	} = useContextSystem( props, 'ColorPicker' );
+	} = useContextSystem<
+		ColorPickerProps & {
+			onPickerDragStart?: ( event: MouseEvent ) => void;
+			onPickerDragEnd?: ( event: MouseEvent ) => void;
+		}
+	>( props, 'ColorPicker' );
+
+	const [ containerEl, setContainerEl ] = useState< HTMLElement | null >(
+		null
+	);
+	const containerRef = ( node: HTMLElement | null ) => {
+		setContainerEl( node );
+	};
 
 	// Use a safe default value for the color and remove the possibility of `undefined`.
 	const [ color, setColor ] = useControlledValue( {
@@ -77,11 +93,17 @@ const UnconnectedColorPicker = (
 	);
 
 	return (
-		<ColorfulWrapper ref={ forwardedRef } { ...divProps }>
+		<ColorfulWrapper
+			ref={ useMergeRefs( [ containerRef, forwardedRef ] ) }
+			{ ...divProps }
+		>
 			<Picker
+				containerEl={ containerEl }
 				onChange={ handleChange }
 				color={ safeColordColor }
 				enableAlpha={ enableAlpha }
+				onDragStart={ onPickerDragStart }
+				onDragEnd={ onPickerDragEnd }
 			/>
 			<AuxiliaryColorArtefactWrapper>
 				<AuxiliaryColorArtefactHStackHeader justify="space-between">

package/src/color-picker/picker.tsx

@@ -7,18 +7,112 @@ import { colord } from 'colord';
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
+import { useMemo, useEffect, useRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 import type { PickerProps } from './types';
 
-export const Picker = ( { color, enableAlpha, onChange }: PickerProps ) => {
+/**
+ * Track the start and the end of drag pointer events related to controlling
+ * the picker's saturation / hue / alpha, and fire the corresponding callbacks.
+ * This is particularly useful to implement synergies like the one with the
+ * `Popover` component, where a pointer events "trap" is rendered while
+ * the user is dragging the pointer to avoid potential interference with iframe
+ * elements.
+ *
+ * @param props
+ * @param props.containerEl
+ * @param props.onDragStart
+ * @param props.onDragEnd
+ */
+const useOnPickerDrag = ( {
+	containerEl,
+	onDragStart,
+	onDragEnd,
+}: Pick< PickerProps, 'containerEl' | 'onDragStart' | 'onDragEnd' > ) => {
+	const isDragging = useRef( false );
+	const leftWhileDragging = useRef( false );
+	useEffect( () => {
+		if ( ! containerEl || ( ! onDragStart && ! onDragEnd ) ) {
+			return;
+		}
+		const interactiveElements = [
+			containerEl.querySelector( '.react-colorful__saturation' ),
+			containerEl.querySelector( '.react-colorful__hue' ),
+			containerEl.querySelector( '.react-colorful__alpha' ),
+		].filter( ( el ) => !! el ) as Element[];
+
+		if ( interactiveElements.length === 0 ) {
+			return;
+		}
+
+		const doc = containerEl.ownerDocument;
+
+		const onPointerUp: EventListener = ( event ) => {
+			isDragging.current = false;
+			leftWhileDragging.current = false;
+			onDragEnd?.( event as MouseEvent );
+		};
+
+		const onPointerDown: EventListener = ( event ) => {
+			isDragging.current = true;
+			onDragStart?.( event as MouseEvent );
+		};
+
+		const onPointerLeave: EventListener = () => {
+			leftWhileDragging.current = isDragging.current;
+		};
+
+		// Try to detect if the user released the pointer while away from the
+		// current window. If the check is successfull, the dragEnd callback will
+		// called as soon as the pointer re-enters the window (better late than never)
+		const onPointerEnter: EventListener = ( event ) => {
+			const noPointerButtonsArePressed =
+				( event as PointerEvent ).buttons === 0;
+
+			if ( leftWhileDragging.current && noPointerButtonsArePressed ) {
+				onPointerUp( event );
+			}
+		};
+
+		// The pointerdown event is added on the interactive elements,
+		// while the remaining events are added on the document object since
+		// the pointer wouldn't necessarily be hovering the initial interactive
+		// element at that point.
+		interactiveElements.forEach( ( el ) =>
+			el.addEventListener( 'pointerdown', onPointerDown )
+		);
+		doc.addEventListener( 'pointerup', onPointerUp );
+		doc.addEventListener( 'pointerenter', onPointerEnter );
+		doc.addEventListener( 'pointerleave', onPointerLeave );
+
+		return () => {
+			interactiveElements.forEach( ( el ) =>
+				el.removeEventListener( 'pointerdown', onPointerDown )
+			);
+			doc.removeEventListener( 'pointerup', onPointerUp );
+			doc.removeEventListener( 'pointerenter', onPointerEnter );
+			doc.removeEventListener( 'pointerleave', onPointerUp );
+		};
+	}, [ onDragStart, onDragEnd, containerEl ] );
+};
+
+export const Picker = ( {
+	color,
+	enableAlpha,
+	onChange,
+	onDragStart,
+	onDragEnd,
+	containerEl,
+}: PickerProps ) => {
 	const Component = enableAlpha
 		? RgbaStringColorPicker
 		: RgbStringColorPicker;
 	const rgbColor = useMemo( () => color.toRgbString(), [ color ] );
 
+	useOnPickerDrag( { containerEl, onDragStart, onDragEnd } );
+
 	return (
 		<Component
 			color={ rgbColor }

package/src/color-picker/styles.ts

@@ -81,7 +81,6 @@ export const ColorfulWrapper = styled.div`
 		align-items: center;
 		width: 216px;
 		height: auto;
-		overflow: hidden;
 	}
 
 	.react-colorful__saturation {