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

package/build-types/validated-form-controls/test/input-control.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=input-control.d.ts.map

package/build-types/validated-form-controls/test/input-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/test/input-control.tsx"],"names":[],"mappings":""}

package/build-types/validated-form-controls/test/number-control.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=number-control.d.ts.map

package/build-types/validated-form-controls/test/number-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/test/number-control.tsx"],"names":[],"mappings":""}

package/build-types/validated-form-controls/test/radio-control.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=radio-control.d.ts.map

package/build-types/validated-form-controls/test/radio-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/test/radio-control.tsx"],"names":[],"mappings":""}

package/build-types/validated-form-controls/test/range-control.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=range-control.d.ts.map

package/build-types/validated-form-controls/test/range-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/test/range-control.tsx"],"names":[],"mappings":""}

package/build-types/validated-form-controls/test/select-control.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=select-control.d.ts.map

package/build-types/validated-form-controls/test/select-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/test/select-control.tsx"],"names":[],"mappings":""}

package/build-types/validated-form-controls/test/text-control.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=text-control.d.ts.map

package/build-types/validated-form-controls/test/text-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/test/text-control.tsx"],"names":[],"mappings":""}

package/build-types/validated-form-controls/test/textarea-control.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=textarea-control.d.ts.map

package/build-types/validated-form-controls/test/textarea-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/test/textarea-control.tsx"],"names":[],"mappings":""}

package/build-types/validated-form-controls/test/toggle-control.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=toggle-control.d.ts.map

package/build-types/validated-form-controls/test/toggle-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/test/toggle-control.tsx"],"names":[],"mappings":""}

package/build-types/validated-form-controls/test/toggle-group-control.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=toggle-group-control.d.ts.map

package/build-types/validated-form-controls/test/toggle-group-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/test/toggle-group-control.tsx"],"names":[],"mappings":""}

package/build-types/validated-form-controls/validity-indicator.d.ts

@@ -1,4 +1,5 @@
-export declare function ValidityIndicator({ type, message, }: {
+export declare function ValidityIndicator({ id, type, message, }: {
+    id?: string;
     type: 'validating' | 'valid' | 'invalid';
     message?: string;
 }): import("react").JSX.Element;

package/build-types/validated-form-controls/validity-indicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"validity-indicator.d.ts","sourceRoot":"","sources":["../../src/validated-form-controls/validity-indicator.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,iBAAiB,CAAE,EAClC,IAAI,EACJ,OAAO,GACP,EAAE;IACF,IAAI,EAAE,YAAY,GAAG,OAAO,GAAG,SAAS,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,+BAyBA"}
+{"version":3,"file":"validity-indicator.d.ts","sourceRoot":"","sources":["../../src/validated-form-controls/validity-indicator.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,iBAAiB,CAAE,EAClC,EAAE,EACF,IAAI,EACJ,OAAO,GACP,EAAE;IACF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,YAAY,GAAG,OAAO,GAAG,SAAS,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,+BA0BA"}

package/build-types/view/types.d.ts

@@ -0,0 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+export type ViewProps = {
+    children?: ReactNode;
+};
+//# sourceMappingURL=types.d.ts.map

package/build-types/view/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/view/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,SAAS,GAAG;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "32.2.1-next.v.202602191100.0+2f8ac7442",
+	"version": "32.2.1",
 	"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.40.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/base-styles": "^6.16.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/compose": "^7.40.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/date": "^5.40.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/deprecated": "^4.40.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/dom": "^4.40.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/element": "^6.40.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/escape-html": "^3.40.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/hooks": "^4.40.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/html-entities": "^4.40.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/i18n": "^6.13.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/icons": "^11.7.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/is-shallow-equal": "^5.40.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/keycodes": "^4.40.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/primitives": "^4.40.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/private-apis": "^1.40.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/rich-text": "^7.40.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/warning": "^3.40.1-next.v.202602191100.0+2f8ac7442",
+		"@wordpress/a11y": "^4.40.1",
+		"@wordpress/base-styles": "^6.16.1",
+		"@wordpress/compose": "^7.40.1",
+		"@wordpress/date": "^5.40.1",
+		"@wordpress/deprecated": "^4.40.1",
+		"@wordpress/dom": "^4.40.1",
+		"@wordpress/element": "^6.40.1",
+		"@wordpress/escape-html": "^3.40.1",
+		"@wordpress/hooks": "^4.40.1",
+		"@wordpress/html-entities": "^4.40.1",
+		"@wordpress/i18n": "^6.13.1",
+		"@wordpress/icons": "^11.7.1",
+		"@wordpress/is-shallow-equal": "^5.40.1",
+		"@wordpress/keycodes": "^4.40.1",
+		"@wordpress/primitives": "^4.40.1",
+		"@wordpress/private-apis": "^1.40.1",
+		"@wordpress/rich-text": "^7.40.1",
+		"@wordpress/warning": "^3.40.1",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -107,7 +107,7 @@
 		"@storybook/react-vite": "^10.1.11",
 		"@testing-library/jest-dom": "^6.9.1",
 		"@types/jest": "^29.5.14",
-		"@wordpress/jest-console": "^8.40.1-next.v.202602191100.0+2f8ac7442",
+		"@wordpress/jest-console": "^8.40.1",
 		"snapshot-diff": "^0.10.0",
 		"storybook": "^10.1.11",
 		"timezone-mock": "^1.3.6"
@@ -119,5 +119,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "de48b2351a7efb8a33a83067612960a0cf239592"
+	"gitHead": "adb6623c9f32490cfc73c7ac7f122578c1f10c65"
 }

package/src/autocomplete/index.tsx

@@ -393,17 +393,41 @@ export function useAutocomplete( {
 	};
 }
 
-function useLastDifferentValue( value: UseAutocompleteProps[ 'record' ] ) {
-	const history = useRef< Set< typeof value > >( new Set() );
+/**
+ * Checks whether two records represent the same user-visible state
+ * (same text content and cursor position).
+ */
+function recordValuesMatch(
+	a: UseAutocompleteProps[ 'record' ],
+	b: UseAutocompleteProps[ 'record' ]
+) {
+	return a.text === b.text && a.start === b.start && a.end === b.end;
+}
 
-	history.current.add( value );
+/**
+ * Tracks the last record whose value differed from the current one.
+ * Used to determine whether the user has actually typed something
+ */
+export function useLastDifferentValue(
+	value: UseAutocompleteProps[ 'record' ]
+) {
+	const history = useRef< Array< typeof value > >( [] );
+
+	const lastEntry = history.current[ history.current.length - 1 ];
+
+	// Only add to history if the value is meaningfully different from
+	// the most recent entry (analogous to Set.add being a no-op for
+	// duplicate references in the original implementation).
+	if ( ! lastEntry || ! recordValuesMatch( value, lastEntry ) ) {
+		history.current.push( value );
+	}
 
 	// Keep the history size to 2.
-	if ( history.current.size > 2 ) {
-		history.current.delete( Array.from( history.current )[ 0 ] );
+	if ( history.current.length > 2 ) {
+		history.current.shift();
 	}
 
-	return Array.from( history.current )[ 0 ];
+	return history.current[ 0 ];
 }
 
 export function useAutocompleteProps( options: UseAutocompleteProps ) {

package/src/autocomplete/test/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { render, screen, renderHook } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -13,9 +13,118 @@ import { useRef } from '@wordpress/element';
  * Internal dependencies
  */
 import { getAutoCompleterUI } from '../autocompleter-ui';
+import { useLastDifferentValue } from '..';
 
 type FruitOption = { visual: string; name: string; id: number };
 
+function makeRecord( text: string ) {
+	return {
+		text,
+		formats: [],
+		replacements: [],
+		start: text.length,
+		end: text.length,
+	};
+}
+
+describe( 'useLastDifferentValue', () => {
+	it( 'should return the current record on first render', () => {
+		const record = makeRecord( 'Hello' );
+		const { result } = renderHook(
+			( { value } ) => useLastDifferentValue( value ),
+			{ initialProps: { value: record } }
+		);
+
+		expect( result.current.text ).toBe( 'Hello' );
+	} );
+
+	it( 'should return the previous record when text changes', () => {
+		const record1 = makeRecord( 'Hello' );
+		const { result, rerender } = renderHook(
+			( { value } ) => useLastDifferentValue( value ),
+			{ initialProps: { value: record1 } }
+		);
+
+		const record2 = makeRecord( 'Hello/' );
+		rerender( { value: record2 } );
+
+		expect( result.current.text ).toBe( 'Hello' );
+	} );
+
+	it( 'should not update when re-rendered with a new reference but same text', () => {
+		const record1 = makeRecord( 'Hello' );
+		const { result, rerender } = renderHook(
+			( { value } ) => useLastDifferentValue( value ),
+			{ initialProps: { value: record1 } }
+		);
+
+		// User types "/"
+		const record2 = makeRecord( 'Hello/' );
+		rerender( { value: record2 } );
+		expect( result.current.text ).toBe( 'Hello' );
+
+		// RESET_BLOCKS creates a new record object with the same text.
+		const record3 = makeRecord( 'Hello/' );
+		rerender( { value: record3 } );
+		expect( result.current.text ).toBe( 'Hello' );
+	} );
+
+	it( 'should survive multiple same-text re-renders', () => {
+		const record1 = makeRecord( 'Hello' );
+		const { result, rerender } = renderHook(
+			( { value } ) => useLastDifferentValue( value ),
+			{ initialProps: { value: record1 } }
+		);
+
+		// User types "/"
+		const record2 = makeRecord( 'Hello/' );
+		rerender( { value: record2 } );
+
+		// Multiple syncs, each producing new references with the same text.
+		for ( let i = 0; i < 5; i++ ) {
+			rerender( { value: makeRecord( 'Hello/' ) } );
+		}
+
+		expect( result.current.text ).toBe( 'Hello' );
+	} );
+
+	it( 'should track consecutive text changes correctly', () => {
+		const { result, rerender } = renderHook(
+			( { value } ) => useLastDifferentValue( value ),
+			{ initialProps: { value: makeRecord( 'A' ) } }
+		);
+
+		rerender( { value: makeRecord( 'AB' ) } );
+		expect( result.current.text ).toBe( 'A' );
+
+		rerender( { value: makeRecord( 'ABC' ) } );
+		expect( result.current.text ).toBe( 'AB' );
+
+		rerender( { value: makeRecord( 'ABCD' ) } );
+		expect( result.current.text ).toBe( 'ABC' );
+	} );
+
+	it( 'should update when cursor position changes without text change', () => {
+		const { result, rerender } = renderHook(
+			( { value } ) => useLastDifferentValue( value ),
+			{ initialProps: { value: makeRecord( 'Hello' ) } }
+		);
+
+		// User types "/"
+		rerender( { value: makeRecord( 'Hello/' ) } );
+		expect( result.current.text ).toBe( 'Hello' );
+
+		// User moves cursor left (same text, different position).
+		rerender( {
+			value: { ...makeRecord( 'Hello/' ), start: 0, end: 0 },
+		} );
+
+		// The returned record should now match the current text,
+		// so that didUserInput evaluates to false.
+		expect( result.current.text ).toBe( 'Hello/' );
+	} );
+} );
+
 describe( 'AutocompleterUI', () => {
 	describe( 'click outside behavior', () => {
 		it( 'should call reset function when a click on another element occurs', async () => {

package/src/button/style.scss

@@ -48,11 +48,6 @@
 		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 	}
 
-	// Windows High Contrast mode will show this outline, but not the box-shadow.
-	&:focus {
-		outline: 3px solid transparent;
-	}
-
 	/**
 	 * Primary button style.
 	 */
@@ -276,6 +271,14 @@
 		}
 	}
 
+	// Windows High Contrast mode will show this outline, but not the box-shadow.
+	// This rule is placed after variant outline declarations (e.g. is-primary,
+	// is-secondary, is-tertiary) to ensure it wins by source order at the same
+	// specificity, while not using `:not(:active)` to avoid outline flicker.
+	&:focus {
+		outline: 3px solid transparent;
+	}
+
 	&:not(:disabled, [aria-disabled="true"]):active {
 		color: $components-color-foreground;
 	}

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/form-token-field/style.scss

@@ -25,6 +25,7 @@
 		flex: 1;
 		font-family: inherit;
 		font-size: 16px;
+		line-height: 1; // Override forms.css styles
 		width: 100%;
 		max-width: 100%;
 		margin-left: 4px;

package/src/private-apis.ts

@@ -14,8 +14,6 @@ import { Tabs } from './tabs';
 import { kebabCase, normalizeTextString } from './utils/strings';
 import { withIgnoreIMEEvents } from './utils/with-ignore-ime-events';
 import { lock } from './lock-unlock';
-import Avatar from './avatar';
-import AvatarGroup from './avatar-group';
 import Badge from './badge';
 
 import { DateCalendar, DateRangeCalendar, TZDate } from './calendar';
@@ -36,8 +34,6 @@ import { ValidatedFormTokenField } from './validated-form-controls/components/fo
 export const privateApis = {};
 lock( privateApis, {
 	__experimentalPopoverLegacyPositionToPlacement,
-	Avatar,
-	AvatarGroup,
 	ComponentsContext,
 	Tabs,
 	Theme,