@wordpress/components 32.2.1-next.v.202602111440.0 → 32.2.1

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

@@ -31,7 +31,7 @@ export const CustomSelectContext =
 CustomSelectContext.displayName = 'CustomSelectContext';
 
 function defaultRenderSelectedValue(
-	value: CustomSelectButtonProps[ 'value' ]
+	value: CustomSelectButtonProps[ 'defaultValue' ]
 ) {
 	const isValueEmpty = Array.isArray( value )
 		? value.length === 0

package/src/custom-select-control-v2/stories/index.story.tsx

@@ -55,11 +55,11 @@ const meta: Meta< typeof CustomSelectControlV2 > = {
 export default meta;
 
 const Template: StoryFn< typeof CustomSelectControlV2 > = ( props ) => {
-	const [ value, setValue ] = useState< string | string[] >();
+	const [ value, setValue ] = useState< string | readonly string[] >();
 	return (
 		<CustomSelectControlV2
 			{ ...props }
-			onChange={ ( nextValue: string | string[] ) => {
+			onChange={ ( nextValue ) => {
 				setValue( nextValue );
 				props.onChange?.( nextValue );
 			} }
@@ -114,7 +114,7 @@ MultipleSelection.args = {
 	),
 };
 
-const renderItem = ( gravatar: string | string[] ) => {
+const renderItem = ( gravatar: string | readonly string[] ) => {
 	const avatar = `https://gravatar.com/avatar?d=${ gravatar }`;
 	return (
 		<div style={ { display: 'flex', alignItems: 'center' } }>

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

@@ -47,11 +47,11 @@ const defaultProps = {
 };
 
 const ControlledCustomSelectControl = ( props: CustomSelectProps ) => {
-	const [ value, setValue ] = useState< string | string[] >();
+	const [ value, setValue ] = useState< string | readonly string[] >();
 	return (
 		<UncontrolledCustomSelectControlV2
 			{ ...props }
-			onChange={ ( nextValue: string | string[] ) => {
+			onChange={ ( nextValue ) => {
 				setValue( nextValue );
 				props.onChange?.( nextValue );
 			} }
@@ -375,7 +375,7 @@ describe.each( [
 	} );
 
 	it( 'Should allow rendering a custom value when using `renderSelectedValue`', async () => {
-		const renderValue = ( value: string | string[] ) => {
+		const renderValue = ( value: string | readonly string[] ) => {
 			return <img src={ `${ value }.jpg` } alt={ value as string } />;
 		};
 

package/src/custom-select-control-v2/types.ts

@@ -32,21 +32,21 @@ export type CustomSelectButtonProps = {
 	 * An optional default value for the control when used in uncontrolled mode.
 	 * If left `undefined`, the first non-disabled item will be used.
 	 */
-	defaultValue?: string | string[];
+	defaultValue?: string | readonly string[];
 	/**
 	 * A function that receives the new value of the input.
 	 */
-	onChange?: ( newValue: string | string[] ) => void;
+	onChange?: ( newValue: string | readonly string[] ) => void;
 	/**
 	 * Can be used to render select UI with custom styled values.
 	 */
 	renderSelectedValue?: (
-		selectedValue: string | string[]
+		selectedValue: string | readonly string[]
 	) => React.ReactNode;
 	/**
 	 * The value of the control when used in uncontrolled mode.
 	 */
-	value?: string | string[];
+	value?: string | readonly string[];
 };
 
 // Props only exposed on the internal implementation

package/src/date-time/date/index.tsx

@@ -314,7 +314,7 @@ function Day( {
 	onClick,
 	onKeyDown,
 }: DayProps ) {
-	const ref = useRef< HTMLButtonElement >();
+	const ref = useRef< HTMLButtonElement >( null );
 
 	// Focus the day when it becomes focusable, e.g. because an arrow key is
 	// pressed. Only do this if focus is allowed - this stops us stealing focus

package/src/date-time/test/utils.test.ts

@@ -1,17 +1,14 @@
-/**
- * External dependencies
- */
 import timezoneMock from 'timezone-mock';
-
-/**
- * WordPress dependencies
- */
 import { getSettings, setSettings, type DateSettings } from '@wordpress/date';
+import { inputToDate, getDaysInMonth } from '../utils';
 
-/**
- * Internal dependencies
- */
-import { inputToDate } from '../utils';
+describe( 'getDaysInMonth', () => {
+	it( 'should return the number of days in the month', () => {
+		expect( getDaysInMonth( 2026, 0 ) ).toBe( 31 );
+		expect( getDaysInMonth( 2026, 1 ) ).toBe( 28 );
+		expect( getDaysInMonth( 2028, 1 ) ).toBe( 29 );
+	} );
+} );
 
 describe( 'inputToDate', () => {
 	let originalSettings: DateSettings;

package/src/date-time/time/index.tsx

@@ -1,18 +1,7 @@
-/**
- * External dependencies
- */
 import { startOfMinute } from 'date-fns';
-
-/**
- * WordPress dependencies
- */
 import { useState, useMemo, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { date as formatDate } from '@wordpress/date';
-
-/**
- * Internal dependencies
- */
 import BaseControl from '../../base-control';
 import { VisuallyHidden } from '../../visually-hidden';
 import SelectControl from '../../select-control';
@@ -33,6 +22,7 @@ import {
 	buildPadInputStateReducer,
 	validateInputElementTarget,
 	setInConfiguredTimezone,
+	getDaysInMonth,
 } from '../utils';
 import { TIMEZONELESS_FORMAT } from '../constants';
 import { TimeInput } from './time-input';
@@ -150,7 +140,7 @@ export function TimePicker( {
 			value={ day }
 			step={ 1 }
 			min={ 1 }
-			max={ 31 }
+			max={ getDaysInMonth( Number( year ), Number( month ) - 1 ) }
 			required
 			spinControls="none"
 			isPressEnterToChange

package/src/date-time/time/test/index.tsx

@@ -158,6 +158,75 @@ describe( 'TimePicker', () => {
 		expect( onChangeSpy ).toHaveBeenCalledWith( '1986-10-18T11:59:00' );
 	} );
 
+	it( 'should call onChange with a bounded day if out of bounds', async () => {
+		const user = userEvent.setup();
+
+		const onChangeSpy = jest.fn();
+
+		render(
+			<TimePicker
+				currentTime="2026-02-05T00:00:00"
+				onChange={ onChangeSpy }
+				is12Hour
+			/>
+		);
+
+		const dayInput = screen.getByLabelText( 'Day' );
+
+		await user.clear( dayInput );
+		await user.type( dayInput, '30' );
+		await user.keyboard( '{Tab}' );
+
+		expect( onChangeSpy ).toHaveBeenCalledWith( '2026-02-28T00:00:00' );
+		expect( dayInput ).toHaveValue( 28 );
+	} );
+
+	it( 'should clamp day when switching months', async () => {
+		const user = userEvent.setup();
+
+		const onChangeSpy = jest.fn();
+
+		render(
+			<TimePicker
+				currentTime="2026-03-31T00:00:00"
+				onChange={ onChangeSpy }
+				is12Hour
+			/>
+		);
+
+		const monthSelect = screen.getByLabelText( 'Month' );
+		const dayInput = screen.getByLabelText( 'Day' );
+
+		await user.selectOptions( monthSelect, '02' );
+
+		expect( onChangeSpy ).toHaveBeenCalledWith( '2026-02-28T00:00:00' );
+		expect( dayInput ).toHaveValue( 28 );
+	} );
+
+	it( 'should clamp day when switching year from leap to non-leap', async () => {
+		const user = userEvent.setup();
+
+		const onChangeSpy = jest.fn();
+
+		render(
+			<TimePicker
+				currentTime="2028-02-29T00:00:00"
+				onChange={ onChangeSpy }
+				is12Hour
+			/>
+		);
+
+		const dayInput = screen.getByLabelText( 'Day' );
+		const yearInput = screen.getByLabelText( 'Year' );
+
+		await user.clear( yearInput );
+		await user.type( yearInput, '2026' );
+		await user.keyboard( '{Tab}' );
+
+		expect( onChangeSpy ).toHaveBeenCalledWith( '2026-02-28T00:00:00' );
+		expect( dayInput ).toHaveValue( 28 );
+	} );
+
 	it( 'should switch to PM correctly', async () => {
 		const user = userEvent.setup();
 

package/src/date-time/utils.ts

@@ -110,6 +110,19 @@ export function buildPadInputStateReducer( pad: number ) {
 	};
 }
 
+/**
+ * Returns the number of days in a month.
+ *
+ * @param year  The year
+ * @param month The month, zero-indexed (0-11)
+ *
+ * @return The number of days in the month
+ */
+export const getDaysInMonth = ( year: number, month: number ) =>
+	// Take advantage of JavaScript's built-in date wrapping logic, where day 0
+	// of the next month is interpreted as the last day of the preceding month.
+	new Date( year, month + 1, 0 ).getDate();
+
 /**
  * Updates specific date fields in the configured timezone and returns a new
  * UTC date.
@@ -139,6 +152,11 @@ export function setInConfiguredTimezone(
 		...updates,
 	};
 
+	// Clamp the day to the last valid day of the month, to avoid producing
+	// invalid date strings (e.g. "2026-02-31").
+	const daysInMonth = getDaysInMonth( values.year, values.month );
+	values.date = Math.min( values.date, daysInMonth );
+
 	const year = String( values.year ).padStart( 4, '0' );
 	const month = String( values.month + 1 ).padStart( 2, '0' );
 	const day = String( values.date ).padStart( 2, '0' );

package/src/draggable/index.native.js

@@ -29,14 +29,14 @@ const { Provider } = Context;
 /**
  * Draggable component.
  *
- * @param {Object}      props               Component props.
- * @param {JSX.Element} props.children      Children to be rendered.
- * @param {Function}    [props.onDragEnd]   Callback when dragging ends.
- * @param {Function}    [props.onDragOver]  Callback when dragging happens over an element.
- * @param {Function}    [props.onDragStart] Callback when dragging starts.
- * @param {string}      [props.testID]      Id used for querying the pan gesture in tests.
+ * @param {Object}            props               Component props.
+ * @param {React.JSX.Element} props.children      Children to be rendered.
+ * @param {Function}          [props.onDragEnd]   Callback when dragging ends.
+ * @param {Function}          [props.onDragOver]  Callback when dragging happens over an element.
+ * @param {Function}          [props.onDragStart] Callback when dragging starts.
+ * @param {string}            [props.testID]      Id used for querying the pan gesture in tests.
  *
- * @return {JSX.Element} The component to be rendered.
+ * @return {React.JSX.Element} The component to be rendered.
  */
 const Draggable = ( {
 	children,
@@ -167,17 +167,17 @@ const Draggable = ( {
  *
  * This component acts as the trigger for the dragging functionality.
  *
- * @param {Object}      props                  Component props.
- * @param {JSX.Element} props.children         Children to be rendered.
- * @param {*}           props.id               Identifier passed within the event callbacks.
- * @param {boolean}     [props.enabled]        Enables the long-press gesture.
- * @param {number}      [props.maxDistance]    Maximum distance, that defines how far the finger is allowed to travel during a long press gesture.
- * @param {number}      [props.minDuration]    Minimum time, that a finger must remain pressed on the corresponding view.
- * @param {Function}    [props.onLongPress]    Callback when long-press gesture is triggered over an element.
- * @param {Function}    [props.onLongPressEnd] Callback when long-press gesture ends.
- * @param {string}      [props.testID]         Id used for querying the long-press gesture handler in tests.
+ * @param {Object}            props                  Component props.
+ * @param {React.JSX.Element} props.children         Children to be rendered.
+ * @param {*}                 props.id               Identifier passed within the event callbacks.
+ * @param {boolean}           [props.enabled]        Enables the long-press gesture.
+ * @param {number}            [props.maxDistance]    Maximum distance, that defines how far the finger is allowed to travel during a long press gesture.
+ * @param {number}            [props.minDuration]    Minimum time, that a finger must remain pressed on the corresponding view.
+ * @param {Function}          [props.onLongPress]    Callback when long-press gesture is triggered over an element.
+ * @param {Function}          [props.onLongPressEnd] Callback when long-press gesture ends.
+ * @param {string}            [props.testID]         Id used for querying the long-press gesture handler in tests.
  *
- * @return {JSX.Element} The component to be rendered.
+ * @return {React.JSX.Element} The component to be rendered.
  */
 const DraggableTrigger = ( {
 	children,

package/src/draggable/types.ts

@@ -16,7 +16,7 @@ export type DraggableProps = {
 		 * `onDragEnd` handler.
 		 */
 		onDraggableEnd: ( event: DragEvent ) => void;
-	} ) => JSX.Element | null;
+	} ) => React.JSX.Element | null;
 	/**
 	 * Whether to append the cloned element to the `ownerDocument` body.
 	 * By default, elements sourced by id are appended to the element's wrapper.

package/src/drop-zone/types.ts

@@ -10,7 +10,7 @@ export type DropZoneProps = {
 	 *
 	 * @default "upload"
 	 */
-	icon?: JSX.Element;
+	icon?: React.JSX.Element;
 	/**
 	 * A string to be shown within the drop zone area.
 	 *

package/src/dropdown/index.tsx

@@ -61,7 +61,7 @@ const UnconnectedDropdown = (
 	// re-renders when the popover's anchor updates.
 	const [ fallbackPopoverAnchor, setFallbackPopoverAnchor ] =
 		useState< HTMLDivElement | null >( null );
-	const containerRef = useRef< HTMLDivElement >();
+	const containerRef = useRef< HTMLDivElement >( null );
 
 	const [ isOpen, setIsOpen ] = useControlledValue( {
 		defaultValue: defaultOpen,

package/src/dropdown-menu/types.ts

@@ -58,7 +58,7 @@ type ToggleProps = Partial<
 		'label' | 'text'
 	>
 > & {
-	as?: React.ElementType | keyof JSX.IntrinsicElements;
+	as?: React.ElementType | keyof React.JSX.IntrinsicElements;
 	'data-toolbar-item'?: boolean;
 };
 

package/src/external-link/index.tsx

@@ -67,7 +67,11 @@ function UnforwardedExternalLink(
 				{ children }
 			</span>
 			<span
-				className="components-external-link__icon"
+				className={ clsx(
+					'components-external-link__icon',
+					// This class prevents the arrow from being replaced by a Twemoji image.
+					'wp-exclude-emoji'
+				) }
 				aria-label={
 					/* translators: accessibility text */
 					__( '(opens in a new tab)' )