@wordpress/components 28.2.0 → 28.4.0

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

@@ -1,4 +1,29 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
 /**
  * Internal dependencies
  */
-export { default } from './default-component';
+import _CustomSelect from './custom-select';
+import type { CustomSelectProps } from './types';
+import type { WordPressComponentProps } from '../context';
+import Item from './item';
+
+function CustomSelectControlV2(
+	props: WordPressComponentProps< CustomSelectProps, 'button', false >
+) {
+	const { defaultValue, onChange, value, ...restProps } = props;
+	// Forward props + store from v2 implementation
+	const store = Ariakit.useSelectStore( {
+		setValue: ( nextValue ) => onChange?.( nextValue ),
+		defaultValue,
+		value,
+	} );
+
+	return <_CustomSelect { ...restProps } store={ store } />;
+}
+
+CustomSelectControlV2.Item = Item;
+
+export default CustomSelectControlV2;

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

@@ -17,7 +17,11 @@ export function CustomSelectItem( {
 }: WordPressComponentProps< CustomSelectItemProps, 'div', false > ) {
 	const customSelectContext = useContext( CustomSelectContext );
 	return (
-		<Styled.SelectItem store={ customSelectContext?.store } { ...props }>
+		<Styled.SelectItem
+			store={ customSelectContext?.store }
+			size={ customSelectContext?.size ?? 'default' }
+			{ ...props }
+		>
 			{ children ?? props.value }
 			<Styled.SelectedItemCheck>
 				<Icon icon={ check } />

package/src/custom-select-control-v2/stories/{default.story.tsx → index.story.tsx}

@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 import CustomSelectControlV2 from '..';
 
 const meta: Meta< typeof CustomSelectControlV2 > = {
-	title: 'Components/CustomSelectControl v2/Default',
+	title: 'Components/CustomSelectControl v2',
 	component: CustomSelectControlV2,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170

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

@@ -1,9 +1,8 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
-import { css } from '@emotion/react';
+import { css, keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 /**
  * Internal dependencies
@@ -11,124 +10,220 @@ import styled from '@emotion/styled';
 import { COLORS, CONFIG } from '../utils';
 import { space } from '../utils/space';
 import { chevronIconSize } from '../select-control/styles/select-control-styles';
+import { fontSizeStyles } from '../input-control/styles/input-control-styles';
 import type { CustomSelectButtonSize } from './types';
 
-const ITEM_PADDING = space( 2 );
-
-const truncateStyles = css`
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-`;
-
-export const WithHintWrapper = styled.div`
-	display: flex;
-	justify-content: space-between;
-	flex: 1;
-`;
-
-export const SelectedExperimentalHintWrapper = styled.div`
-	${ truncateStyles }
-`;
-
-export const SelectedExperimentalHintItem = styled.span`
-	color: ${ COLORS.theme.gray[ 600 ] };
-	margin-inline-start: ${ space( 2 ) };
-`;
+// 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)
+	default: 16, // space(4)
+};
+
+const getSelectSize = (
+	size: NonNullable< CustomSelectButtonSize[ 'size' ] >,
+	heightProperty: 'minHeight' | 'height'
+) => {
+	const sizes = {
+		compact: {
+			[ heightProperty ]: 32,
+			paddingInlineStart: INLINE_PADDING.compact,
+			paddingInlineEnd: INLINE_PADDING.compact + chevronIconSize,
+		},
+		default: {
+			[ heightProperty ]: 40,
+			paddingInlineStart: INLINE_PADDING.default,
+			paddingInlineEnd: INLINE_PADDING.default + chevronIconSize,
+		},
+		small: {
+			[ heightProperty ]: 24,
+			paddingInlineStart: INLINE_PADDING.small,
+			paddingInlineEnd: INLINE_PADDING.small + chevronIconSize,
+		},
+	};
 
-export const ExperimentalHintItem = styled.span`
-	color: ${ COLORS.theme.gray[ 600 ] };
-	text-align: right;
-	margin-inline-end: ${ space( 1 ) };
-`;
+	return sizes[ size ] || sizes.default;
+};
+
+const getSelectItemSize = (
+	size: NonNullable< CustomSelectButtonSize[ 'size' ] >
+) => {
+	// Used to visually align the checkmark with the chevron
+	const checkmarkCorrection = 6;
+	const sizes = {
+		compact: {
+			paddingInlineStart: INLINE_PADDING.compact,
+			paddingInlineEnd: INLINE_PADDING.compact - checkmarkCorrection,
+		},
+		default: {
+			paddingInlineStart: INLINE_PADDING.default,
+			paddingInlineEnd: INLINE_PADDING.default - checkmarkCorrection,
+		},
+		small: {
+			paddingInlineStart: INLINE_PADDING.small,
+			paddingInlineEnd: INLINE_PADDING.small - checkmarkCorrection,
+		},
+	};
 
-export const SelectLabel = styled( Ariakit.SelectLabel )`
-	font-size: 11px;
-	font-weight: 500;
-	line-height: 1.4;
-	text-transform: uppercase;
-	margin-bottom: ${ space( 2 ) };
-`;
+	return sizes[ size ] || sizes.default;
+};
 
 export const Select = styled( Ariakit.Select, {
 	// Do not forward `hasCustomRenderProp` to the underlying Ariakit.Select component
 	shouldForwardProp: ( prop ) => prop !== 'hasCustomRenderProp',
-} )( ( {
-	size,
-	hasCustomRenderProp,
-}: {
-	size: NonNullable< CustomSelectButtonSize[ 'size' ] >;
-	hasCustomRenderProp: boolean;
-} ) => {
-	const heightProperty = hasCustomRenderProp ? 'minHeight' : 'height';
-
-	const getSize = () => {
-		const sizes = {
-			compact: {
-				[ heightProperty ]: 32,
-				paddingInlineStart: 8,
-				paddingInlineEnd: 8 + chevronIconSize,
-			},
-			default: {
-				[ heightProperty ]: 40,
-				paddingInlineStart: 16,
-				paddingInlineEnd: 16 + chevronIconSize,
-			},
-			small: {
-				[ heightProperty ]: 24,
-				paddingInlineStart: 8,
-				paddingInlineEnd: 8 + chevronIconSize,
-			},
-		};
-
-		return sizes[ size ] || sizes.default;
-	};
-
-	return css`
+} )(
+	( {
+		size,
+		hasCustomRenderProp,
+	}: {
+		size: NonNullable< CustomSelectButtonSize[ 'size' ] >;
+		hasCustomRenderProp: boolean;
+	} ) => css`
 		display: block;
 		background-color: ${ COLORS.theme.background };
 		border: none;
 		color: ${ COLORS.theme.foreground };
 		cursor: pointer;
 		font-family: inherit;
-		font-size: ${ CONFIG.fontSize };
-		text-align: left;
+		text-align: start;
+		user-select: none;
 		width: 100%;
 
 		&[data-focus-visible] {
 			outline: none; // handled by InputBase component
 		}
 
-		${ getSize() }
+		${ getSelectSize( size, hasCustomRenderProp ? 'minHeight' : 'height' ) }
 		${ ! hasCustomRenderProp && truncateStyles }
-	`;
+		${ fontSizeStyles( { inputSize: size } ) }
+	`
+);
+
+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;
+
+	background-color: ${ COLORS.theme.background };
 	border-radius: 2px;
-	background: ${ COLORS.theme.background };
 	border: 1px solid ${ COLORS.theme.foreground };
 
+	/* z-index(".components-popover") */
+	z-index: 1000000;
+
+	max-height: min( var( --popover-available-height, 400px ), 400px );
+	overflow: auto;
+	overscroll-behavior: contain;
+
+	/* The smallest size without overflowing the container. */
+	min-width: min-content;
+
+	/* Animation */
+	animation-duration: ${ ANIMATION_PARAMS.DURATION };
+	animation-timing-function: ${ ANIMATION_PARAMS.EASING };
+	animation-name: ${ slideDownAndFade };
+	will-change: transform, opacity;
+	@media ( prefers-reduced-motion ) {
+		animation-duration: 0s;
+	}
+
 	&[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;
 	}
 `;
 
-export const SelectItem = styled( Ariakit.SelectItem )`
+export const SelectItem = styled( Ariakit.SelectItem )(
+	( {
+		size,
+	}: {
+		size: NonNullable< CustomSelectButtonSize[ 'size' ] >;
+	} ) => css`
+		cursor: default;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		font-size: ${ CONFIG.fontSize };
+		// TODO: reassess line-height for non-legacy v2
+		line-height: 28px;
+		padding-block: ${ space( 2 ) };
+		scroll-margin: ${ space( 1 ) };
+		user-select: none;
+
+		&[aria-disabled='true'] {
+			cursor: not-allowed;
+		}
+
+		&[data-active-item] {
+			background-color: ${ COLORS.theme.gray[ 300 ] };
+		}
+
+		${ getSelectItemSize( size ) }
+	`
+);
+
+const truncateStyles = css`
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+`;
+
+export const SelectedExperimentalHintWrapper = styled.div`
+	${ truncateStyles }
+`;
+
+export const SelectedExperimentalHintItem = styled.span`
+	color: ${ COLORS.theme.gray[ 600 ] };
+	margin-inline-start: ${ space( 2 ) };
+`;
+
+export const WithHintItemWrapper = styled.div`
 	display: flex;
-	align-items: center;
 	justify-content: space-between;
-	padding: ${ ITEM_PADDING };
-	font-size: ${ CONFIG.fontSize };
-	line-height: 2.15rem; // TODO: Remove this in default but keep for back-compat in legacy
-	&[data-active-item] {
-		background-color: ${ COLORS.theme.gray[ 300 ] };
-	}
+	align-items: center;
+	flex-wrap: wrap;
+	flex: 1;
+	column-gap: ${ space( 4 ) };
+`;
+
+export const WithHintItemHint = styled.span`
+	color: ${ COLORS.theme.gray[ 600 ] };
+	text-align: initial;
+	line-height: ${ CONFIG.fontLineHeightBase };
+	padding-inline-end: ${ space( 1 ) };
+	margin-block: ${ space( 1 ) };
 `;
 
 export const SelectedItemCheck = styled( Ariakit.SelectItemCheck )`
 	display: flex;
 	align-items: center;
-	margin-inline-start: ${ ITEM_PADDING };
-	font-size: 24px; // Size of checkmark icon
+	margin-inline-start: ${ space( 2 ) };
+
+	// Keep the checkmark vertically aligned at the top. Since the item text has a
+	// 28px line height and the checkmark is 24px tall, a (28-24)/2 = 2px margin
+	// is applied to keep the correct alignment between the text and the checkmark.
+	align-self: start;
+	margin-block-start: 2px;
+
+	// Since the checkmark's dimensions are applied with 'em' units, setting a
+	// font size of 0 allows the space reserved for the checkmark to collapse for
+	// items that are not selected or that don't have an associated item hint.
+	font-size: 0;
+	${ WithHintItemWrapper } ~ &,
+	&:not(:empty) {
+		font-size: 24px; // Size of checkmark icon
+	}
 `;

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

@@ -105,14 +105,14 @@ describe.each( [
 		await press.Enter();
 		expect(
 			screen.getByRole( 'listbox', {
-				name: 'label!',
+				name: defaultProps.label,
 			} )
 		).toBeVisible();
 
 		await press.Escape();
 		expect(
 			screen.queryByRole( 'listbox', {
-				name: 'label!',
+				name: defaultProps.label,
 			} )
 		).not.toBeInTheDocument();
 
@@ -134,7 +134,7 @@ describe.each( [
 			await press.Enter();
 			expect(
 				screen.getByRole( 'listbox', {
-					name: 'label!',
+					name: defaultProps.label,
 				} )
 			).toHaveFocus();
 
@@ -156,7 +156,7 @@ describe.each( [
 			await press.Enter();
 			expect(
 				screen.getByRole( 'listbox', {
-					name: 'label!',
+					name: defaultProps.label,
 				} )
 			).toHaveFocus();
 
@@ -182,7 +182,7 @@ describe.each( [
 
 			expect(
 				screen.queryByRole( 'listbox', {
-					name: 'label!',
+					name: defaultProps.label,
 					hidden: true,
 				} )
 			).not.toBeInTheDocument();
@@ -416,4 +416,34 @@ describe.each( [
 			screen.getByRole( 'option', { name: 'july-9' } )
 		).toBeVisible();
 	} );
+
+	it( 'Should open the select popover when focussing the trigger button and pressing arrow down', async () => {
+		render( <Component { ...defaultProps } /> );
+
+		const currentSelectedItem = screen.getByRole( 'combobox', {
+			expanded: false,
+		} );
+
+		await sleep();
+		await press.Tab();
+		expect( currentSelectedItem ).toHaveFocus();
+		expect( currentSelectedItem ).toHaveTextContent( items[ 0 ].value );
+
+		await press.ArrowDown();
+		expect(
+			screen.getByRole( 'listbox', {
+				name: defaultProps.label,
+			} )
+		).toBeVisible();
+	} );
+
+	it( 'Should label the component correctly even when the label is not visible', () => {
+		render( <Component { ...defaultProps } hideLabelFromVision /> );
+
+		expect(
+			screen.getByRole( 'combobox', {
+				name: defaultProps.label,
+			} )
+		).toBeVisible();
+	} );
 } );

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

@@ -1,9 +1,7 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type * as Ariakit from '@ariakit/react';
-import type { FocusEventHandler, MouseEventHandler } from 'react';
 
 export type CustomSelectStore = {
 	/**
@@ -12,8 +10,6 @@ export type CustomSelectStore = {
 	store: Ariakit.SelectStore;
 };
 
-export type CustomSelectContext = CustomSelectStore | undefined;
-
 type CustomSelectSize< Size = 'compact' | 'default' > = {
 	/**
 	 * The size of the control.
@@ -27,6 +23,10 @@ export type CustomSelectButtonSize = CustomSelectSize<
 	'compact' | 'default' | 'small'
 >;
 
+export type CustomSelectContext =
+	| ( CustomSelectStore & CustomSelectButtonSize )
+	| undefined;
+
 export type CustomSelectButtonProps = {
 	/**
 	 * An optional default value for the control when used in uncontrolled mode.
@@ -49,7 +49,20 @@ export type CustomSelectButtonProps = {
 	value?: string | string[];
 };
 
+// Props only exposed on the internal implementation
+export type _CustomSelectInternalProps = {
+	/**
+	 * True if the consumer is emulating the legacy component behavior and look
+	 */
+	isLegacy?: boolean;
+};
+
+// Props that are exposed in exported components
 export type _CustomSelectProps = CustomSelectButtonProps & {
+	/**
+	 * Additional className added to the root wrapper element.
+	 */
+	className?: string;
 	/**
 	 * The child elements. This should be composed of `CustomSelectItem` components.
 	 */
@@ -66,117 +79,7 @@ export type _CustomSelectProps = CustomSelectButtonProps & {
 	label: string;
 };
 
-export type CustomSelectProps = _CustomSelectProps &
-	CustomSelectButtonProps &
-	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 CustomSelectProps = _CustomSelectProps & CustomSelectSize;
 
 export type CustomSelectItemProps = {
 	/**

package/src/date-time/README.md

@@ -56,6 +56,14 @@ Whether we use a 12-hour clock. With a 12-hour clock, an AM/PM widget is display
 -   Required: No
 -   Default: false
 
+### `dateOrder`: `'dmy' | 'mdy' | 'ymd'`
+
+The order of day, month, and year. This prop overrides the time format determined by `is12Hour` prop.
+
+-   Type: `string`
+-   Required: No
+-   Default: `'dmy'`
+
 ### `isInvalidDate`: `( date: Date ) => boolean`
 
 A callback function which receives a Date object representing a day as an argument, and should return a Boolean to signify if the day is valid or not.

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

@@ -7,7 +7,6 @@ import type { ForwardedRef } from 'react';
  * WordPress dependencies
  */
 import { forwardRef } from '@wordpress/element';
-import { __, _x } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -25,6 +24,7 @@ function UnforwardedDateTimePicker(
 	{
 		currentDate,
 		is12Hour,
+		dateOrder,
 		isInvalidDate,
 		onMonthPreviewed = noop,
 		onChange,
@@ -40,6 +40,7 @@ function UnforwardedDateTimePicker(
 					currentTime={ currentDate }
 					onChange={ onChange }
 					is12Hour={ is12Hour }
+					dateOrder={ dateOrder }
 				/>
 				<DatePicker
 					currentDate={ currentDate }

package/src/date-time/index.ts

@@ -3,7 +3,8 @@
  */
 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 };
+export { DatePicker, TimePicker, TimeInput };
 export default DateTimePicker;