@wordpress/components 28.3.0 → 28.5.0

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import * as Ariakit from '@ariakit/react';
-import { css } from '@emotion/react';
+import { css, keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 /**
  * Internal dependencies
@@ -13,6 +13,13 @@ import { chevronIconSize } from '../select-control/styles/select-control-styles'
 import { fontSizeStyles } from '../input-control/styles/input-control-styles';
 import type { CustomSelectButtonSize } from './types';
 
+// TODO: extract to common utils and apply to relevant components
+const ANIMATION_PARAMS = {
+	SLIDE_AMOUNT: '2px',
+	DURATION: '400ms',
+	EASING: 'cubic-bezier( 0.16, 1, 0.3, 1 )',
+};
+
 const INLINE_PADDING = {
 	compact: 8, // space(2)
 	small: 8, // space(2)
@@ -98,6 +105,14 @@ export const Select = styled( Ariakit.Select, {
 	`
 );
 
+const slideDownAndFade = keyframes( {
+	'0%': {
+		opacity: 0,
+		transform: `translateY(-${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,
+	},
+	'100%': { opacity: 1, transform: 'translateY(0)' },
+} );
+
 export const SelectPopover = styled( Ariakit.SelectPopover )`
 	display: flex;
 	flex-direction: column;
@@ -113,11 +128,22 @@ export const SelectPopover = styled( Ariakit.SelectPopover )`
 	overflow: auto;
 	overscroll-behavior: contain;
 
-	// The smallest size without overflowing the container.
+	/* The smallest size without overflowing the container. */
 	min-width: min-content;
 
+	/* Animation */
+	&[data-open] {
+		@media not ( prefers-reduced-motion ) {
+			animation-duration: ${ ANIMATION_PARAMS.DURATION };
+			animation-timing-function: ${ ANIMATION_PARAMS.EASING };
+			animation-name: ${ slideDownAndFade };
+			will-change: transform, opacity;
+		}
+	}
+
 	&[data-focus-visible] {
-		outline: none; // outline will be on the trigger, rather than the popover
+		/* The outline will be on the trigger, rather than the popover. */
+		outline: none;
 	}
 `;
 

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

@@ -1,8 +1,9 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
-import { click, press, sleep, type } from '@ariakit/test';
+import { screen } from '@testing-library/react';
+import { click, press, type } from '@ariakit/test';
+import { render } from '@ariakit/test/react';
 
 /**
  * WordPress dependencies
@@ -66,7 +67,7 @@ describe.each( [
 	const [ , Component ] = modeAndComponent;
 
 	it( 'Should replace the initial selection when a new item is selected', async () => {
-		render( <Component { ...defaultProps } /> );
+		await render( <Component { ...defaultProps } /> );
 
 		const currentSelectedItem = screen.getByRole( 'combobox', {
 			expanded: false,
@@ -94,13 +95,12 @@ describe.each( [
 	} );
 
 	it( 'Should keep current selection if dropdown is closed without changing selection', async () => {
-		render( <Component { ...defaultProps } /> );
+		await render( <Component { ...defaultProps } /> );
 
 		const currentSelectedItem = screen.getByRole( 'combobox', {
 			expanded: false,
 		} );
 
-		await sleep();
 		await press.Tab();
 		await press.Enter();
 		expect(
@@ -121,13 +121,12 @@ describe.each( [
 
 	describe( 'Keyboard behavior and accessibility', () => {
 		it( 'Should be able to change selection using keyboard', async () => {
-			render( <Component { ...defaultProps } /> );
+			await render( <Component { ...defaultProps } /> );
 
 			const currentSelectedItem = screen.getByRole( 'combobox', {
 				expanded: false,
 			} );
 
-			await sleep();
 			await press.Tab();
 			expect( currentSelectedItem ).toHaveFocus();
 
@@ -145,13 +144,12 @@ describe.each( [
 		} );
 
 		it( 'Should be able to type characters to select matching options', async () => {
-			render( <Component { ...defaultProps } /> );
+			await render( <Component { ...defaultProps } /> );
 
 			const currentSelectedItem = screen.getByRole( 'combobox', {
 				expanded: false,
 			} );
 
-			await sleep();
 			await press.Tab();
 			await press.Enter();
 			expect(
@@ -166,13 +164,12 @@ describe.each( [
 		} );
 
 		it( 'Can change selection with a focused input and closed dropdown if typed characters match an option', async () => {
-			render( <Component { ...defaultProps } /> );
+			await render( <Component { ...defaultProps } /> );
 
 			const currentSelectedItem = screen.getByRole( 'combobox', {
 				expanded: false,
 			} );
 
-			await sleep();
 			await press.Tab();
 			expect( currentSelectedItem ).toHaveFocus();
 			expect( currentSelectedItem ).toHaveTextContent( 'violets' );
@@ -194,7 +191,7 @@ describe.each( [
 		} );
 
 		it( 'Should have correct aria-selected value for selections', async () => {
-			render( <Component { ...defaultProps } /> );
+			await render( <Component { ...defaultProps } /> );
 
 			const currentSelectedItem = screen.getByRole( 'combobox', {
 				expanded: false,
@@ -244,7 +241,7 @@ describe.each( [
 				'ultraviolet morning light',
 			];
 
-			render(
+			await render(
 				<Component
 					defaultValue={ defaultValues }
 					onChange={ onChangeMock }
@@ -326,7 +323,7 @@ describe.each( [
 				'ultraviolet morning light',
 			];
 
-			render(
+			await render(
 				<Component defaultValue={ defaultValues } label="Multi-select">
 					{ defaultValues.map( ( item ) => (
 						<UncontrolledCustomSelectControlV2.Item
@@ -382,7 +379,7 @@ describe.each( [
 			return <img src={ `${ value }.jpg` } alt={ value as string } />;
 		};
 
-		render(
+		await render(
 			<Component label="Rendered" renderSelectedValue={ renderValue }>
 				<UncontrolledCustomSelectControlV2.Item value="april-29">
 					{ renderValue( 'april-29' ) }
@@ -418,13 +415,12 @@ describe.each( [
 	} );
 
 	it( 'Should open the select popover when focussing the trigger button and pressing arrow down', async () => {
-		render( <Component { ...defaultProps } /> );
+		await render( <Component { ...defaultProps } /> );
 
 		const currentSelectedItem = screen.getByRole( 'combobox', {
 			expanded: false,
 		} );
 
-		await sleep();
 		await press.Tab();
 		expect( currentSelectedItem ).toHaveFocus();
 		expect( currentSelectedItem ).toHaveTextContent( items[ 0 ].value );
@@ -437,8 +433,8 @@ describe.each( [
 		).toBeVisible();
 	} );
 
-	it( 'Should label the component correctly even when the label is not visible', () => {
-		render( <Component { ...defaultProps } hideLabelFromVision /> );
+	it( 'Should label the component correctly even when the label is not visible', async () => {
+		await render( <Component { ...defaultProps } hideLabelFromVision /> );
 
 		expect(
 			screen.getByRole( 'combobox', {

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import type * as Ariakit from '@ariakit/react';
-import type { FocusEventHandler, MouseEventHandler } from 'react';
 
 export type CustomSelectStore = {
 	/**
@@ -82,114 +81,6 @@ export type _CustomSelectProps = CustomSelectButtonProps & {
 
 export type CustomSelectProps = _CustomSelectProps & CustomSelectSize;
 
-/**
- * The legacy object structure for the options array.
- */
-type LegacyOption = {
-	key: string;
-	name: string;
-	style?: React.CSSProperties;
-	className?: string;
-	__experimentalHint?: string;
-	[ key: string ]: any;
-};
-
-/**
- * The legacy object returned from the onChange event.
- */
-type LegacyOnChangeObject = {
-	highlightedIndex?: number;
-	inputValue?: string;
-	isOpen?: boolean;
-	type?: string;
-	selectedItem: LegacyOption;
-};
-
-export type LegacyCustomSelectProps = {
-	/**
-	 * Optional classname for the component.
-	 */
-	className?: string;
-	/**
-	 * Used to visually hide the label. It will always be visible to screen readers.
-	 *
-	 */
-	hideLabelFromVision?: boolean;
-	/**
-	 * Pass in a description that will be shown to screen readers associated with the
-	 * select trigger button. If no value is passed, the text "Currently selected:
-	 * selectedItem.name" will be used fully translated.
-	 */
-	describedBy?: string;
-	/**
-	 * Label for the control.
-	 */
-	label: string;
-	/**
-	 * Function called with the control's internal state changes. The `selectedItem`
-	 * property contains the next selected item.
-	 */
-	onChange?: ( newValue: LegacyOnChangeObject ) => void;
-	/**
-	 * A handler for `onBlur` events.
-	 *
-	 * @ignore
-	 */
-	onBlur?: FocusEventHandler< HTMLButtonElement >;
-	/**
-	 * A handler for `onFocus` events.
-	 *
-	 * @ignore
-	 */
-	onFocus?: FocusEventHandler< HTMLButtonElement >;
-	/**
-	 * A handler for `onMouseOver` events.
-	 *
-	 * @ignore
-	 */
-	onMouseOut?: MouseEventHandler< HTMLButtonElement >;
-	/**
-	 * A handler for `onMouseOut` events.
-	 *
-	 * @ignore
-	 */
-	onMouseOver?: MouseEventHandler< HTMLButtonElement >;
-	/**
-	 * The options that can be chosen from.
-	 */
-	options: Array< LegacyOption >;
-	/**
-	 * The size of the control.
-	 *
-	 * @default 'default'
-	 */
-	size?: 'default' | 'small' | '__unstable-large';
-	/**
-	 * Can be used to externally control the value of the control.
-	 */
-	value?: LegacyOption;
-	/**
-	 * Legacy way to add additional text to the right of each option.
-	 *
-	 * @default false
-	 */
-	__experimentalShowSelectedHint?: boolean;
-	/**
-	 * Opt-in prop for an unconstrained width style which became the default in
-	 * WordPress 6.5. The prop is no longer needed and can be safely removed.
-	 *
-	 * @deprecated
-	 * @ignore
-	 */
-	__nextUnconstrainedWidth?: boolean;
-	/**
-	 * Start opting into the larger default height that will become the default size in a future version.
-	 *
-	 * @default false
-	 */
-	__next40pxDefaultSize?: boolean;
-};
-
 export type CustomSelectItemProps = {
 	/**
 	 * The value of the select item. This will be used as the children if

package/src/date-time/index.ts

@@ -3,8 +3,7 @@
  */
 import { default as DatePicker } from './date';
 import { default as TimePicker } from './time';
-import { default as TimeInput } from './time-input';
 import { default as DateTimePicker } from './date-time';
 
-export { DatePicker, TimePicker, TimeInput };
+export { DatePicker, TimePicker };
 export default DateTimePicker;

package/src/date-time/stories/time.story.tsx

@@ -16,6 +16,8 @@ import TimePicker from '../time';
 const meta: Meta< typeof TimePicker > = {
 	title: 'Components/TimePicker',
 	component: TimePicker,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { 'TimePicker.TimeInput': TimePicker.TimeInput },
 	argTypes: {
 		currentTime: { control: 'date' },
 		onChange: { action: 'onChange', control: { type: null } },
@@ -49,3 +51,18 @@ const Template: StoryFn< typeof TimePicker > = ( {
 };
 
 export const Default: StoryFn< typeof TimePicker > = Template.bind( {} );
+
+const TimeInputTemplate: StoryFn< typeof TimePicker.TimeInput > = ( args ) => {
+	return <TimePicker.TimeInput { ...args } />;
+};
+
+/**
+ * The time input can be used in isolation as `<TimePicker.TimeInput />`. In this case, the `value` will be passed
+ * as an object in 24-hour format (`{ hours: number, minutes: number }`).
+ */
+export const TimeInput = TimeInputTemplate.bind( {} );
+TimeInput.args = {
+	label: 'Time',
+};
+// Hide TimePicker controls because they don't apply to TimeInput
+TimeInput.parameters = { controls: { include: [] } };

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

@@ -32,7 +32,7 @@ import {
 	validateInputElementTarget,
 } from '../utils';
 import { TIMEZONELESS_FORMAT } from '../constants';
-import { TimeInput } from '../time-input';
+import { TimeInput } from './time-input';
 
 const VALID_DATE_ORDERS = [ 'dmy', 'mdy', 'ymd' ];
 
@@ -77,10 +77,28 @@ export function TimePicker( {
 		);
 	}, [ currentTime ] );
 
+	const monthOptions = [
+		{ value: '01', label: __( 'January' ) },
+		{ value: '02', label: __( 'February' ) },
+		{ value: '03', label: __( 'March' ) },
+		{ value: '04', label: __( 'April' ) },
+		{ value: '05', label: __( 'May' ) },
+		{ value: '06', label: __( 'June' ) },
+		{ value: '07', label: __( 'July' ) },
+		{ value: '08', label: __( 'August' ) },
+		{ value: '09', label: __( 'September' ) },
+		{ value: '10', label: __( 'October' ) },
+		{ value: '11', label: __( 'November' ) },
+		{ value: '12', label: __( 'December' ) },
+	] as const;
+
 	const { day, month, year, minutes, hours } = useMemo(
 		() => ( {
 			day: format( date, 'dd' ),
-			month: format( date, 'MM' ),
+			month: format(
+				date,
+				'MM'
+			) as ( typeof monthOptions )[ number ][ 'value' ],
 			year: format( date, 'yyyy' ),
 			minutes: format( date, 'mm' ),
 			hours: format( date, 'HH' ),
@@ -146,20 +164,7 @@ export function TimePicker( {
 				__next40pxDefaultSize
 				__nextHasNoMarginBottom
 				value={ month }
-				options={ [
-					{ value: '01', label: __( 'January' ) },
-					{ value: '02', label: __( 'February' ) },
-					{ value: '03', label: __( 'March' ) },
-					{ value: '04', label: __( 'April' ) },
-					{ value: '05', label: __( 'May' ) },
-					{ value: '06', label: __( 'June' ) },
-					{ value: '07', label: __( 'July' ) },
-					{ value: '08', label: __( 'August' ) },
-					{ value: '09', label: __( 'September' ) },
-					{ value: '10', label: __( 'October' ) },
-					{ value: '11', label: __( 'November' ) },
-					{ value: '12', label: __( 'December' ) },
-				] }
+				options={ monthOptions }
 				onChange={ ( value ) => {
 					const newDate = setMonth( date, Number( value ) - 1 );
 					setDate( newDate );
@@ -252,4 +257,29 @@ export function TimePicker( {
 	);
 }
 
+/**
+ * A component to input a time.
+ *
+ * Values are passed as an object in 24-hour format (`{ hours: number, minutes: number }`).
+ *
+ * ```jsx
+ * import { TimePicker } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyTimeInput = () => {
+ * 	const [ time, setTime ] = useState( { hours: 13, minutes: 30 } );
+ *
+ * 	return (
+ * 		<TimePicker.TimeInput
+ * 			value={ time }
+ * 			onChange={ setTime }
+ * 			label="Time"
+ * 		/>
+ * 	);
+ * };
+ * ```
+ */
+TimePicker.TimeInput = TimeInput;
+Object.assign( TimePicker.TimeInput, { displayName: 'TimePicker.TimeInput' } );
+
 export default TimePicker;

package/src/date-time/time/styles.ts

@@ -62,6 +62,7 @@ export const HoursInput = styled( NumberControl )`
 export const TimeSeparator = styled.span`
 	border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 700 ] };
 	border-bottom: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 700 ] };
+	font-size: ${ CONFIG.fontSize };
 	line-height: calc(
 		${ CONFIG.controlHeight } - ${ CONFIG.borderWidth } * 2
 	);

package/src/date-time/{time-input → time/time-input}/index.tsx

@@ -18,20 +18,20 @@ import {
 	HoursInput,
 	MinutesInput,
 	Fieldset,
-} from '../time/styles';
-import { HStack } from '../../h-stack';
-import Button from '../../button';
-import ButtonGroup from '../../button-group';
+} from '../styles';
+import { HStack } from '../../../h-stack';
+import Button from '../../../button';
+import ButtonGroup from '../../../button-group';
 import {
 	from12hTo24h,
 	from24hTo12h,
 	buildPadInputStateReducer,
 	validateInputElementTarget,
-} from '../utils';
-import type { TimeInputProps } from '../types';
-import type { InputChangeCallback } from '../../input-control/types';
-import { useControlledValue } from '../../utils';
-import BaseControl from '../../base-control';
+} from '../../utils';
+import type { TimeInputProps } from '../../types';
+import type { InputChangeCallback } from '../../../input-control/types';
+import { useControlledValue } from '../../../utils';
+import BaseControl from '../../../base-control';
 
 export function TimeInput( {
 	value: valueProp,

package/src/dimension-control/test/__snapshots__/index.test.js.snap

@@ -120,6 +120,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   box-sizing: border-box;
   border: none;
   box-shadow: none!important;
+  color: currentColor;
   cursor: inherit;
   display: block;
   font-family: inherit;
@@ -405,6 +406,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   box-sizing: border-box;
   border: none;
   box-shadow: none!important;
+  color: currentColor;
   cursor: inherit;
   display: block;
   font-family: inherit;
@@ -700,6 +702,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   box-sizing: border-box;
   border: none;
   box-shadow: none!important;
+  color: currentColor;
   cursor: inherit;
   display: block;
   font-family: inherit;
@@ -1007,6 +1010,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   box-sizing: border-box;
   border: none;
   box-shadow: none!important;
+  color: currentColor;
   cursor: inherit;
   display: block;
   font-family: inherit;

package/src/disabled/README.md

@@ -33,7 +33,7 @@ const MyDisabled = () => {
 };
 ```
 
-A component can detect if it has been wrapped in a `<Disabled />` by accessing its [context](https://reactjs.org/docs/context.html) using `Disabled.Context`.
+A component can detect if it has been wrapped in a `<Disabled />` by accessing its [context](https://react.dev/learn/passing-data-deeply-with-context) using `Disabled.Context`.
 
 ```jsx
 function CustomButton( props ) {

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -41,36 +41,37 @@ const meta: Meta< typeof Dropdown > = {
 };
 export default meta;
 
-const Template: StoryFn< typeof Dropdown > = ( args ) => (
-	<div style={ { height: 150 } }>
-		<Dropdown { ...args } />
-	</div>
-);
-
-export const Default = Template.bind( {} );
-Default.args = {
-	renderToggle: ( { isOpen, onToggle } ) => (
-		<Button onClick={ onToggle } aria-expanded={ isOpen } variant="primary">
-			Open dropdown
-		</Button>
-	),
-	renderContent: () => <div>This is the dropdown content.</div>,
+export const Default: StoryObj< typeof Dropdown > = {
+	args: {
+		renderToggle: ( { isOpen, onToggle } ) => (
+			<Button
+				onClick={ onToggle }
+				aria-expanded={ isOpen }
+				variant="primary"
+			>
+				Open dropdown
+			</Button>
+		),
+		renderContent: () => <div>This is the dropdown content.</div>,
+	},
 };
 
 /**
  * To apply more padding to the dropdown content, use the provided `<DropdownContentWrapper>`
  * convenience wrapper. A `paddingSize` of `"medium"` is suitable for relatively larger dropdowns (default is `"small"`).
  */
-export const WithMorePadding = Template.bind( {} );
-WithMorePadding.args = {
-	...Default.args,
-	renderContent: () => (
-		<DropdownContentWrapper paddingSize="medium">
-			{ /* eslint-disable react/no-unescaped-entities */ }
-			Content wrapped with <code>paddingSize="medium"</code>.
-			{ /* eslint-enable react/no-unescaped-entities */ }
-		</DropdownContentWrapper>
-	),
+export const WithMorePadding: StoryObj< typeof Dropdown > = {
+	...Default,
+	args: {
+		...Default.args,
+		renderContent: () => (
+			<DropdownContentWrapper paddingSize="medium">
+				{ /* eslint-disable react/no-unescaped-entities */ }
+				Content wrapped with <code>paddingSize="medium"</code>.
+				{ /* eslint-enable react/no-unescaped-entities */ }
+			</DropdownContentWrapper>
+		),
+	},
 };
 
 /**
@@ -78,31 +79,35 @@ WithMorePadding.args = {
  * with a `paddingSize` of `"none"`. This can also serve as a clean foundation to add arbitrary
  * paddings, for example when child components already have padding on their own.
  */
-export const WithNoPadding = Template.bind( {} );
-WithNoPadding.args = {
-	...Default.args,
-	renderContent: () => (
-		<DropdownContentWrapper paddingSize="none">
-			{ /* eslint-disable react/no-unescaped-entities */ }
-			Content wrapped with <code>paddingSize="none"</code>.
-			{ /* eslint-enable react/no-unescaped-entities */ }
-		</DropdownContentWrapper>
-	),
+export const WithNoPadding: StoryObj< typeof Dropdown > = {
+	...Default,
+	args: {
+		...Default.args,
+		renderContent: () => (
+			<DropdownContentWrapper paddingSize="none">
+				{ /* eslint-disable react/no-unescaped-entities */ }
+				Content wrapped with <code>paddingSize="none"</code>.
+				{ /* eslint-enable react/no-unescaped-entities */ }
+			</DropdownContentWrapper>
+		),
+	},
 };
 
-export const WithMenuItems = Template.bind( {} );
-WithMenuItems.args = {
-	...Default.args,
-	renderContent: () => (
-		<>
-			<MenuGroup label="Group 1">
-				<MenuItem>Item 1</MenuItem>
-				<MenuItem>Item 2</MenuItem>
-			</MenuGroup>
-			<MenuGroup label="Group 2">
-				<MenuItem>Item 1</MenuItem>
-				<MenuItem>Item 2</MenuItem>
-			</MenuGroup>
-		</>
-	),
+export const WithMenuItems: StoryObj< typeof Dropdown > = {
+	...Default,
+	args: {
+		...Default.args,
+		renderContent: () => (
+			<>
+				<MenuGroup label="Group 1">
+					<MenuItem>Item 1</MenuItem>
+					<MenuItem>Item 2</MenuItem>
+				</MenuGroup>
+				<MenuGroup label="Group 2">
+					<MenuItem>Item 1</MenuItem>
+					<MenuItem>Item 2</MenuItem>
+				</MenuGroup>
+			</>
+		),
+	},
 };