@wordpress/components 30.8.2-next.dc3f6d3c1.0 → 30.9.0

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

@@ -0,0 +1,206 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import timezoneMock from 'timezone-mock';
+
+/**
+ * WordPress dependencies
+ */
+import { getSettings, setSettings, type DateSettings } from '@wordpress/date';
+
+/**
+ * Internal dependencies
+ */
+import DateTimePicker from '..';
+
+describe( 'DateTimePicker', () => {
+	let originalSettings: DateSettings;
+	beforeAll( () => {
+		originalSettings = getSettings();
+		setSettings( {
+			...originalSettings,
+			timezone: {
+				offset: -5,
+				offsetFormatted: '-5',
+				string: 'America/New_York',
+				abbr: 'EST',
+			},
+		} );
+	} );
+
+	afterEach( () => {
+		jest.restoreAllMocks();
+		timezoneMock.unregister();
+	} );
+
+	afterAll( () => {
+		setSettings( originalSettings );
+	} );
+
+	it( 'should display and select dates correctly when timezones match', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+
+		timezoneMock.register( 'US/Eastern' );
+
+		const { rerender } = render(
+			<DateTimePicker
+				currentDate="2025-11-15T00:00:00"
+				onChange={ onChange }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'button', {
+				name: 'November 15, 2025. Selected',
+			} )
+		).toBeVisible();
+
+		onChange.mockImplementation( ( newDate ) => {
+			rerender(
+				<DateTimePicker currentDate={ newDate } onChange={ onChange } />
+			);
+		} );
+
+		await user.click(
+			screen.getByRole( 'button', { name: 'November 20, 2025' } )
+		);
+
+		expect( onChange ).toHaveBeenCalledWith( '2025-11-20T00:00:00' );
+		expect(
+			screen.getByRole( 'button', {
+				name: 'November 20, 2025. Selected',
+			} )
+		).toBeVisible();
+	} );
+
+	describe( 'timezone differences between browser and site', () => {
+		describe.each( [
+			{
+				direction: 'browser behind site',
+				timezone: 'US/Pacific' as const,
+				time: '21:00:00', // Evening: shifts to next day UTC
+			},
+			{
+				// Test a scenario where local time is UTC time, to verify that
+				// using gmdateI18n (UTC) for formatting works correctly when
+				// the browser's timezone already has no offset from UTC.
+				direction: 'browser matches UTC (zero offset)',
+				timezone: 'UTC' as const,
+				time: '00:00:00',
+			},
+			{
+				direction: 'browser ahead of site',
+				timezone: 'Australia/Adelaide' as const,
+				time: '00:00:00', // Midnight: shifts to previous day UTC
+			},
+		] )( '$direction', ( { timezone, time } ) => {
+			describe.each( [
+				{
+					period: 'DST start',
+					initialDate: `2025-03-10T${ time }`,
+					initialButton: 'March 10, 2025. Selected',
+					clickButton: 'March 11, 2025',
+					expectedDay: 11,
+					expectedDate: `2025-03-11T${ time }`,
+					selectedButton: 'March 11, 2025. Selected',
+					wrongMonthButton: 'February 28, 2025',
+				},
+				{
+					period: 'DST end',
+					initialDate: `2025-11-01T${ time }`,
+					initialButton: 'November 1, 2025. Selected',
+					clickButton: 'November 2, 2025',
+					expectedDay: 2,
+					expectedDate: `2025-11-02T${ time }`,
+					selectedButton: 'November 2, 2025. Selected',
+					wrongMonthButton: 'October 31, 2025',
+				},
+			] )(
+				'$period',
+				( {
+					initialDate,
+					initialButton,
+					clickButton,
+					expectedDay,
+					expectedDate,
+					selectedButton,
+					wrongMonthButton,
+				} ) => {
+					it( 'should display and select dates correctly', async () => {
+						const user = userEvent.setup();
+						const onChange = jest.fn();
+
+						timezoneMock.register( timezone );
+
+						const { rerender } = render(
+							<DateTimePicker
+								currentDate={ initialDate }
+								onChange={ onChange }
+							/>
+						);
+
+						// Calendar should not show dates from wrong month
+						expect(
+							screen.queryByRole( 'button', {
+								name: wrongMonthButton,
+							} )
+						).not.toBeInTheDocument();
+
+						// Should show correct initial date as selected
+						expect(
+							screen.getByRole( 'button', {
+								name: initialButton,
+							} )
+						).toBeVisible();
+
+						onChange.mockImplementation( ( newDate ) => {
+							rerender(
+								<DateTimePicker
+									currentDate={ newDate }
+									onChange={ onChange }
+								/>
+							);
+						} );
+
+						await user.click(
+							screen.getByRole( 'button', { name: clickButton } )
+						);
+
+						expect( screen.getByLabelText( 'Day' ) ).toHaveValue(
+							expectedDay
+						);
+						expect( onChange ).toHaveBeenCalledWith( expectedDate );
+						expect(
+							screen.getByRole( 'button', {
+								name: selectedButton,
+							} )
+						).toBeVisible();
+					} );
+				}
+			);
+		} );
+	} );
+
+	it( 'should preserve time when changing date', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+
+		timezoneMock.register( 'UTC' );
+
+		render(
+			<DateTimePicker
+				currentDate="2025-11-15T14:30:00"
+				onChange={ onChange }
+			/>
+		);
+
+		await user.click(
+			screen.getByRole( 'button', { name: 'November 20, 2025' } )
+		);
+
+		expect( onChange ).toHaveBeenCalledWith( '2025-11-20T14:30:00' );
+	} );
+} );

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

@@ -0,0 +1,128 @@
+/**
+ * External dependencies
+ */
+import timezoneMock from 'timezone-mock';
+
+/**
+ * Internal dependencies
+ */
+import { inputToDate } from '../utils';
+
+describe( 'inputToDate', () => {
+	describe( 'timezoneless strings parsed as UTC', () => {
+		describe.each( [
+			{
+				timezone: 'US/Pacific' as const,
+				description: 'Pacific time (behind UTC)',
+			},
+			{
+				timezone: 'UTC' as const,
+				description: 'UTC (zero offset)',
+			},
+			{
+				timezone: 'Australia/Adelaide' as const,
+				description: 'Adelaide (ahead of UTC)',
+			},
+		] )( 'in $description', ( { timezone } ) => {
+			beforeEach( () => {
+				timezoneMock.register( timezone );
+			} );
+
+			afterEach( () => {
+				timezoneMock.unregister();
+			} );
+
+			it( 'should parse midnight as UTC midnight, preventing day shifts', () => {
+				const result = inputToDate( '2025-11-01T00:00:00' );
+
+				// Should always be Nov 1 00:00 in UTC, regardless of browser timezone
+				expect( result.getUTCFullYear() ).toBe( 2025 );
+				expect( result.getUTCMonth() ).toBe( 10 ); // November (0-indexed)
+				expect( result.getUTCDate() ).toBe( 1 );
+				expect( result.getUTCHours() ).toBe( 0 );
+				expect( result.getUTCMinutes() ).toBe( 0 );
+				expect( result.getUTCSeconds() ).toBe( 0 );
+			} );
+
+			it( 'should preserve non-midnight times in UTC, preventing day shifts', () => {
+				const result = inputToDate( '2025-06-20T15:30:45' );
+
+				expect( result.getUTCFullYear() ).toBe( 2025 );
+				expect( result.getUTCMonth() ).toBe( 5 ); // June (0-indexed)
+				expect( result.getUTCDate() ).toBe( 20 );
+				expect( result.getUTCHours() ).toBe( 15 );
+				expect( result.getUTCMinutes() ).toBe( 30 );
+				expect( result.getUTCSeconds() ).toBe( 45 );
+			} );
+
+			it( 'should parse date-only strings as midnight UTC', () => {
+				const result = inputToDate( '2025-03-15' );
+
+				expect( result.getUTCFullYear() ).toBe( 2025 );
+				expect( result.getUTCMonth() ).toBe( 2 ); // March (0-indexed)
+				expect( result.getUTCDate() ).toBe( 15 );
+				expect( result.getUTCHours() ).toBe( 0 );
+				expect( result.getUTCMinutes() ).toBe( 0 );
+				expect( result.getUTCSeconds() ).toBe( 0 );
+			} );
+		} );
+	} );
+
+	describe( 'strings with timezone indicators', () => {
+		describe.each( [
+			{
+				input: '2025-11-01T00:00:00Z',
+				expectedHour: 0,
+				expectedMinute: 0,
+				description: 'Z suffix',
+			},
+			{
+				input: '2025-11-01T10:00:00+05:30',
+				expectedHour: 4,
+				expectedMinute: 30,
+				description: '+HH:MM offset',
+			},
+			{
+				input: '2025-11-01T10:00:00-08:00',
+				expectedHour: 18,
+				expectedMinute: 0,
+				description: '-HH:MM offset',
+			},
+			// There's a few other valid formats in ISO-8601 (HHMM, HH, etc.),
+			// but those aren't included in the ECMAScript specification, which
+			// only includes "Z"-suffixed or "HH:mm"-suffixed strings.
+			//
+			// See: https://tc39.es/ecma262/#sec-date-time-string-format
+		] )( '$description', ( { input, expectedHour, expectedMinute } ) => {
+			it( 'should respect explicit timezone offset', () => {
+				const result = inputToDate( input );
+
+				expect( result.getUTCFullYear() ).toBe( 2025 );
+				expect( result.getUTCMonth() ).toBe( 10 ); // November
+				expect( result.getUTCDate() ).toBe( 1 );
+				expect( result.getUTCHours() ).toBe( expectedHour );
+				expect( result.getUTCMinutes() ).toBe( expectedMinute );
+			} );
+		} );
+	} );
+
+	describe( 'non-string inputs', () => {
+		it( 'should handle Date objects', () => {
+			const input = new Date( '2025-11-01T00:00:00Z' );
+			const result = inputToDate( input );
+
+			expect( result.getUTCFullYear() ).toBe( 2025 );
+			expect( result.getUTCMonth() ).toBe( 10 );
+			expect( result.getUTCDate() ).toBe( 1 );
+		} );
+
+		it( 'should convert timestamps to Date', () => {
+			const timestamp = Date.UTC( 2025, 10, 1, 0, 0, 0 );
+			const result = inputToDate( timestamp );
+
+			expect( result.getUTCFullYear() ).toBe( 2025 );
+			expect( result.getUTCMonth() ).toBe( 10 );
+			expect( result.getUTCDate() ).toBe( 1 );
+		} );
+	} );
+} );

package/src/date-time/utils.ts

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { toDate } from 'date-fns';
+import { UTCDateMini } from '@date-fns/utc';
 
 /**
  * Internal dependencies
@@ -11,14 +12,22 @@ import type { InputAction } from '../input-control/reducer/actions';
 import { COMMIT, PRESS_DOWN, PRESS_UP } from '../input-control/reducer/actions';
 
 /**
- * Like date-fn's toDate, but tries to guess the format when a string is
- * given.
+ * Like date-fns's toDate, but tries to guess the format when a string is
+ * given. For timezoneless strings, parse it as UTC using `@date-fns/utc` to
+ * ensure calendar dates remain consistent across different browser timezones.
  *
  * @param input Value to turn into a date.
  */
 export function inputToDate( input: Date | string | number ): Date {
 	if ( typeof input === 'string' ) {
-		return new Date( input );
+		// Strings without timezone indicators are parsed as UTC to prevent day-
+		// shift bugs across browser timezones. Note that JavaScript doesn't
+		// fully support ISO-8601 time strings, so the behavior of passing these
+		// through to the Date constructor is non-deterministic.
+		//
+		// See: https://tc39.es/ecma262/#sec-date-time-string-format
+		const hasTimezone = /Z|[+-]\d{2}(:?\d{2})?$/.test( input );
+		return hasTimezone ? new Date( input ) : new UTCDateMini( input + 'Z' );
 	}
 	return toDate( input );
 }

package/src/draggable/stories/index.story.tsx

@@ -3,6 +3,7 @@
  */
 import type { Meta, StoryFn } from '@storybook/react';
 import type { DragEvent } from 'react';
+import { fn } from '@storybook/test';
 
 /**
  * WordPress dependencies
@@ -24,8 +25,12 @@ const meta: Meta< typeof Draggable > = {
 		elementId: { control: false },
 		__experimentalDragComponent: { control: false },
 	},
+	args: {
+		onDragStart: fn(),
+		onDragEnd: fn(),
+		onDragOver: fn(),
+	},
 	parameters: {
-		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
 		docs: { source: { code: '' } },
 	},

package/src/drop-zone/stories/index.story.tsx

@@ -7,6 +7,7 @@ import type { Meta, StoryFn } from '@storybook/react';
  * WordPress dependencies
  */
 import { upload, media } from '@wordpress/icons';
+import { fn } from '@storybook/test';
 
 /**
  * Internal dependencies
@@ -26,8 +27,12 @@ const meta: Meta< typeof DropZone > = {
 			mapping: ICONS,
 		},
 	},
+	args: {
+		onFilesDrop: fn(),
+		onHTMLDrop: fn(),
+		onDrop: fn(),
+	},
 	parameters: {
-		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},

package/src/dropdown/stories/index.story.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 
 /**
  * Internal dependencies
@@ -18,6 +19,10 @@ const meta: Meta< typeof Dropdown > = {
 	component: Dropdown,
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { DropdownContentWrapper },
+	args: {
+		onClose: fn(),
+		onToggle: fn(),
+	},
 	argTypes: {
 		focusOnMount: {
 			options: [ 'firstElement', true, false ],
@@ -34,7 +39,6 @@ const meta: Meta< typeof Dropdown > = {
 		onClose: { control: false },
 	},
 	parameters: {
-		actions: { argTypesRegex: '^on.*' },
 		controls: {
 			expanded: true,
 		},

package/src/dropdown-menu/stories/index.story.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 
 /**
  * Internal dependencies
@@ -27,10 +28,12 @@ const meta: Meta< typeof DropdownMenu > = {
 	component: DropdownMenu,
 	id: 'components-dropdownmenu',
 	parameters: {
-		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},
+	args: {
+		onToggle: fn(),
+	},
 	argTypes: {
 		icon: {
 			options: [ 'menu', 'chevronDown', 'more' ],

package/src/external-link/index.tsx

@@ -7,7 +7,7 @@ import type { ForwardedRef } from 'react';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 import { forwardRef } from '@wordpress/element';
 
 /**
@@ -73,7 +73,7 @@ function UnforwardedExternalLink(
 					__( '(opens in a new tab)' )
 				}
 			>
-				↗
+				{ isRTL() ? '\u2196' : '\u2197' }
 			</span>
 		</a>
 		/* eslint-enable react/jsx-no-target-blank */

package/src/focal-point-picker/stories/index.story.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import type { Meta, StoryFn } from '@storybook/react';
+import { fn } from '@storybook/test';
 
 /**
  * WordPress dependencies
@@ -19,8 +20,13 @@ const meta: Meta< typeof FocalPointPicker > = {
 		help: { control: 'text' },
 		label: { control: 'text' },
 	},
+	args: {
+		onChange: fn(),
+		onDrag: fn(),
+		onDragEnd: fn(),
+		onDragStart: fn(),
+	},
 	parameters: {
-		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},

package/src/font-size-picker/stories/index.story.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import type { Meta, StoryFn } from '@storybook/react';
+import { fn } from '@storybook/test';
 
 /**
  * WordPress dependencies
@@ -23,8 +24,10 @@ const meta: Meta< typeof FontSizePicker > = {
 			options: [ 'px', 'em', 'rem', 'vw', 'vh' ],
 		},
 	},
+	args: {
+		onChange: fn(),
+	},
 	parameters: {
-		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},

package/src/gradient-picker/stories/index.story.tsx

@@ -2,6 +2,8 @@
  * External dependencies
  */
 import type { Meta, StoryFn } from '@storybook/react';
+import { fn } from '@storybook/test';
+
 /**
  * WordPress dependencies
  */
@@ -19,7 +21,9 @@ const meta: Meta< typeof GradientPicker > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
-		actions: { argTypesRegex: '^on.*' },
+	},
+	args: {
+		onChange: fn(),
 	},
 	argTypes: {
 		value: { control: false },

package/src/input-control/stories/index.story.tsx

@@ -2,6 +2,8 @@
  * External dependencies
  */
 import type { Meta, StoryFn } from '@storybook/react';
+import { fn } from '@storybook/test';
+
 /**
  * WordPress dependencies
  */
@@ -31,8 +33,12 @@ const meta: Meta< typeof InputControl > = {
 		value: { control: { disable: true } },
 	},
 	tags: [ 'status-experimental' ],
+	args: {
+		onChange: fn(),
+		onValidate: fn(),
+		onKeyDown: fn(),
+	},
 	parameters: {
-		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},

package/src/menu/stories/index.story.tsx

@@ -3,6 +3,7 @@
  */
 import type { StoryObj, Meta } from '@storybook/react';
 import { css } from '@emotion/react';
+import { fn } from '@storybook/test';
 
 /**
  * WordPress dependencies
@@ -52,12 +53,14 @@ const meta: Meta< typeof Menu > = {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		Popover: Menu.Popover,
 	},
+	args: {
+		onOpenChange: fn(),
+	},
 	argTypes: {
 		children: { control: false },
 	},
 	tags: [ 'status-private' ],
 	parameters: {
-		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
 		docs: {
 			canvas: { sourceState: 'shown' },

package/src/modal/style.scss

@@ -106,6 +106,20 @@
 	@include break-large() {
 		max-height: 70%;
 	}
+
+	&.is-full-screen {
+		// When full screen, make sure the children container is full height.
+		.components-modal__content {
+			display: flex;
+			// If this container is scrollable, bottom padding won't apply so we use margin instead.
+			margin-bottom: $grid-unit-40;
+			padding-bottom: 0;
+
+			> :last-child {
+				flex: 1;
+			}
+		}
+	}
 }
 
 @keyframes components-modal__appear-animation {

package/src/navigable-container/stories/navigable-menu.story.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import type { Meta, StoryFn } from '@storybook/react';
+import { fn } from '@storybook/test';
 
 /**
  * Internal dependencies
@@ -15,8 +16,11 @@ const meta: Meta< typeof NavigableMenu > = {
 	argTypes: {
 		children: { control: false },
 	},
+	args: {
+		onKeyDown: fn(),
+		onNavigate: fn(),
+	},
 	parameters: {
-		actions: { argTypesRegex: '^on.*' },
 		controls: {
 			expanded: true,
 		},

package/src/navigable-container/stories/tabbable-container.story.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import type { Meta, StoryFn } from '@storybook/react';
+import { fn } from '@storybook/test';
 
 /**
  * Internal dependencies
@@ -15,8 +16,11 @@ const meta: Meta< typeof TabbableContainer > = {
 	argTypes: {
 		children: { control: false },
 	},
+	args: {
+		onKeyDown: fn(),
+		onNavigate: fn(),
+	},
 	parameters: {
-		actions: { argTypesRegex: '^on.*' },
 		controls: {
 			expanded: true,
 		},

package/src/navigation/stories/index.story.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import type { Meta } from '@storybook/react';
+import { fn } from '@storybook/test';
 
 /**
  * Internal dependencies
@@ -44,8 +45,10 @@ const meta: Meta< typeof Navigation > = {
 		children: { control: false },
 		onActivateMenu: { control: false },
 	},
+	args: {
+		onActivateMenu: fn(),
+	},
 	parameters: {
-		actions: { argTypesRegex: '^on.*' },
 		controls: {
 			expanded: true,
 		},

package/src/notice/stories/index.story.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import type { Meta, StoryFn } from '@storybook/react';
+import { fn } from '@storybook/test';
 
 /**
  * WordPress dependencies
@@ -22,8 +23,11 @@ const meta: Meta< typeof Notice > = {
 	component: Notice,
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { NoticeList },
+	args: {
+		onDismiss: fn(),
+		onRemove: fn(),
+	},
 	parameters: {
-		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},