@wordpress/components 30.7.2-next.2f1c7c01b.0 → 30.8.0

package/src/color-picker/component.tsx

@@ -1,9 +1,9 @@
 /**
  * External dependencies
  */
-import type { ForwardedRef } from 'react';
+import type { ClipboardEvent, ForwardedRef } from 'react';
 import type { Colord } from 'colord';
-import { colord, extend } from 'colord';
+import { colord, extend, getFormat } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 
 /**
@@ -76,8 +76,57 @@ const UnconnectedColorPicker = (
 		copyFormat || 'hex'
 	);
 
+	/*
+	 * ! Listener intended for the CAPTURE phase
+	 *
+	 * Capture paste events over the entire color picker, looking for clipboard
+	 * data that could be parsed as a color. If not, let the paste event
+	 * propagate normally, so that individual input controls within the
+	 * component have a chance to handle it.
+	 */
+	const maybeHandlePaste = useCallback(
+		( event: ClipboardEvent ) => {
+			const pastedText = event.clipboardData?.getData( 'text' )?.trim();
+			if ( ! pastedText ) {
+				return;
+			}
+
+			const parsedColor = colord( pastedText );
+			if ( ! parsedColor.isValid() ) {
+				return;
+			}
+
+			// Apply all valid colors, even if the format isn't supported in
+			// the UI (e.g. names like "cyan" or, in the future color spaces
+			// like "lch" if we add the right colord plugins)
+			handleChange( parsedColor );
+
+			// This redundancy helps TypeScript and is safer than assertions
+			const supportedFormats: Record< string, ColorType | undefined > = {
+				hex: 'hex',
+				rgb: 'rgb',
+				hsl: 'hsl',
+			};
+
+			const detectedFormat = String( getFormat( pastedText ) );
+			const newColorType = supportedFormats[ detectedFormat ];
+			if ( newColorType ) {
+				setColorType( newColorType );
+			}
+
+			// Stop at capture phase; no bubbling
+			event.stopPropagation();
+			event.preventDefault();
+		},
+		[ handleChange, setColorType ]
+	);
+
 	return (
-		<ColorfulWrapper ref={ forwardedRef } { ...divProps }>
+		<ColorfulWrapper
+			ref={ forwardedRef }
+			{ ...divProps }
+			onPasteCapture={ maybeHandlePaste }
+		>
 			<Picker
 				onChange={ handleChange }
 				color={ safeColordColor }

package/src/confirm-dialog/component.tsx

@@ -29,6 +29,7 @@ const UnconnectedConfirmDialog = (
 		children,
 		confirmButtonText,
 		cancelButtonText,
+		isBusy,
 		...otherProps
 	} = useContextSystem( props, 'ConfirmDialog' );
 
@@ -100,6 +101,8 @@ const UnconnectedConfirmDialog = (
 								ref={ cancelButtonRef }
 								variant="tertiary"
 								onClick={ handleEvent( onCancel ) }
+								accessibleWhenDisabled
+								disabled={ isBusy }
 							>
 								{ cancelLabel }
 							</Button>
@@ -108,6 +111,9 @@ const UnconnectedConfirmDialog = (
 								ref={ confirmButtonRef }
 								variant="primary"
 								onClick={ handleEvent( onConfirm ) }
+								accessibleWhenDisabled
+								disabled={ isBusy }
+								isBusy={ isBusy }
 							>
 								{ confirmLabel }
 							</Button>

package/src/confirm-dialog/test/index.tsx

@@ -349,5 +349,71 @@ describe( 'Confirm', () => {
 
 			expect( onConfirm ).toHaveBeenCalled();
 		} );
+
+		it( 'should handle `isBusy` prop with different combinations', () => {
+			const { rerender } = render(
+				<ConfirmDialog
+					isOpen
+					onConfirm={ noop }
+					onCancel={ noop }
+					isBusy
+				>
+					Are you sure?
+				</ConfirmDialog>
+			);
+
+			let cancelButton = screen.getByRole( 'button', {
+				name: 'Cancel',
+			} );
+			let confirmButton = screen.getByRole( 'button', { name: 'OK' } );
+
+			// Only confirm button shows busy spinner
+			expect( cancelButton ).not.toHaveClass( 'is-busy' );
+			expect( confirmButton ).toHaveClass( 'is-busy' );
+
+			// Both buttons are disabled (exposed via aria-disabled due to accessibleWhenDisabled)
+			// Intentionally rely on aria-disabled rather than disabled attribute
+			expect( cancelButton ).toHaveAttribute( 'aria-disabled', 'true' );
+			expect( confirmButton ).toHaveAttribute( 'aria-disabled', 'true' );
+
+			// Test when isBusy is false
+			rerender(
+				<ConfirmDialog
+					isOpen
+					onConfirm={ noop }
+					onCancel={ noop }
+					isBusy={ false }
+				>
+					Are you sure?
+				</ConfirmDialog>
+			);
+
+			cancelButton = screen.getByRole( 'button', {
+				name: 'Cancel',
+			} );
+			confirmButton = screen.getByRole( 'button', { name: 'OK' } );
+
+			expect( cancelButton ).not.toHaveClass( 'is-busy' );
+			expect( confirmButton ).not.toHaveClass( 'is-busy' );
+			expect( cancelButton ).toBeEnabled();
+			expect( confirmButton ).toBeEnabled();
+
+			// Test when isBusy is undefined
+			rerender(
+				<ConfirmDialog isOpen onConfirm={ noop } onCancel={ noop }>
+					Are you sure?
+				</ConfirmDialog>
+			);
+
+			cancelButton = screen.getByRole( 'button', {
+				name: 'Cancel',
+			} );
+			confirmButton = screen.getByRole( 'button', { name: 'OK' } );
+
+			expect( cancelButton ).not.toHaveClass( 'is-busy' );
+			expect( confirmButton ).not.toHaveClass( 'is-busy' );
+			expect( cancelButton ).toBeEnabled();
+			expect( confirmButton ).toBeEnabled();
+		} );
 	} );
 } );

package/src/confirm-dialog/types.ts

@@ -50,4 +50,10 @@ export type ConfirmDialogProps = {
 	 * It also implicitly toggles the controlled mode if set or the uncontrolled mode if it's not set.
 	 */
 	isOpen?: boolean;
+	/**
+	 * Indicates activity while an action is being performed.
+	 * When `true`, the confirm button will show a busy state.
+	 * Both buttons will be disabled.
+	 */
+	isBusy?: boolean;
 };

package/src/custom-select-control/index.tsx

@@ -43,13 +43,13 @@ function applyOptionDeprecations( {
 	};
 }
 
-function getDescribedBy( currentValue: string, describedBy?: string ) {
+function getDescribedBy( currentName: string, describedBy?: string ) {
 	if ( describedBy ) {
 		return describedBy;
 	}
 
 	// translators: %s: The selected option.
-	return sprintf( __( 'Currently selected: %s' ), currentValue );
+	return sprintf( __( 'Currently selected: %s' ), currentName );
 }
 
 function CustomSelectControl< T extends CustomSelectOption >(
@@ -84,7 +84,7 @@ function CustomSelectControl< T extends CustomSelectOption >(
 	const store = Ariakit.useSelectStore< string >( {
 		async setValue( nextValue ) {
 			const nextOption = options.find(
-				( item ) => item.name === nextValue
+				( item ) => item.key === nextValue
 			);
 
 			if ( ! onChange || ! nextOption ) {
@@ -108,12 +108,12 @@ function CustomSelectControl< T extends CustomSelectOption >(
 			};
 			onChange( changeObject );
 		},
-		value: value?.name,
+		value: value?.key,
 		// Setting the first option as a default value when no value is provided
 		// is already done natively by the underlying Ariakit component,
 		// but doing this explicitly avoids the `onChange` callback from firing
 		// on initial render, thus making this implementation closer to the v1.
-		defaultValue: options[ 0 ]?.name,
+		defaultValue: options[ 0 ]?.key,
 	} );
 
 	const children = options
@@ -134,7 +134,7 @@ function CustomSelectControl< T extends CustomSelectOption >(
 			return (
 				<CustomSelectItem
 					key={ key }
-					value={ name }
+					value={ key }
 					children={ hint ? withHint : name }
 					style={ style }
 					className={ clsx(
@@ -151,22 +151,25 @@ function CustomSelectControl< T extends CustomSelectOption >(
 
 	const currentValue = Ariakit.useStoreState( store, 'value' );
 
-	const renderSelectedValueHint = () => {
-		const selectedOptionHint = options
+	const selectedOption =
+		options
 			?.map( applyOptionDeprecations )
-			?.find( ( { name } ) => currentValue === name )?.hint;
+			?.find( ( { key } ) => currentValue === key ) ?? options[ 0 ];
+
+	const renderSelectedValue = () => {
+		if ( ! showSelectedHint || ! selectedOption.hint ) {
+			return selectedOption?.name;
+		}
 
 		return (
 			<Styled.SelectedExperimentalHintWrapper>
-				{ currentValue }
-				{ selectedOptionHint && (
-					<Styled.SelectedExperimentalHintItem
-						// Keeping the classname for legacy reasons
-						className="components-custom-select-control__hint"
-					>
-						{ selectedOptionHint }
-					</Styled.SelectedExperimentalHintItem>
-				) }
+				{ selectedOption?.name }
+				<Styled.SelectedExperimentalHintItem
+					// Keeping the classname for legacy reasons
+					className="components-custom-select-control__hint"
+				>
+					{ selectedOption?.hint }
+				</Styled.SelectedExperimentalHintItem>
 			</Styled.SelectedExperimentalHintWrapper>
 		);
 	};
@@ -188,9 +191,7 @@ function CustomSelectControl< T extends CustomSelectOption >(
 		<>
 			<_CustomSelect
 				aria-describedby={ descriptionId }
-				renderSelectedValue={
-					showSelectedHint ? renderSelectedValueHint : undefined
-				}
+				renderSelectedValue={ renderSelectedValue }
 				size={ translatedSize }
 				store={ store }
 				className={ clsx(
@@ -205,7 +206,7 @@ function CustomSelectControl< T extends CustomSelectOption >(
 			</_CustomSelect>
 			<VisuallyHidden>
 				<span id={ descriptionId }>
-					{ getDescribedBy( currentValue, describedBy ) }
+					{ getDescribedBy( selectedOption?.name, describedBy ) }
 				</span>
 			</VisuallyHidden>
 		</>

package/src/modal/index.tsx

@@ -365,6 +365,7 @@ function UnforwardedModal(
 									? focusOnMountRef
 									: null,
 							] ) }
+							className="components-modal__children-container"
 						>
 							{ children }
 						</div>

package/src/utils/math.js

@@ -81,12 +81,12 @@ export function clamp( value, min, max ) {
  */
 export function ensureValidStep( value, min, step ) {
 	const baseValue = getNumber( value );
+	const minValue = getNumber( min );
 	const stepValue = getNumber( step );
 	const precision = Math.max( getPrecision( step ), getPrecision( min ) );
-	const realMin = Math.abs( min ) === Infinity ? 0 : min;
 	// If the step is not a factor of the minimum then the step must be
 	// offset by the minimum.
-	const tare = realMin % stepValue ? realMin : 0;
+	const tare = minValue % stepValue ? minValue : 0;
 	const rounded = Math.round( ( baseValue - tare ) / stepValue ) * stepValue;
 	const fromMin = rounded + tare;
 	return precision ? getNumber( fromMin.toFixed( precision ) ) : fromMin;