@wordpress/components 25.12.0 → 25.14.0

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

@@ -0,0 +1,149 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { CustomSelect, CustomSelectItem } from '..';
+
+const meta: Meta< typeof CustomSelect > = {
+	title: 'Components (Experimental)/CustomSelectControl v2',
+	component: CustomSelect,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		CustomSelectItem,
+	},
+	argTypes: {
+		children: { control: { type: null } },
+		renderSelectedValue: { control: { type: null } },
+		value: { control: { type: null } },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: {
+			canvas: { sourceState: 'shown' },
+			source: { excludeDecorators: true },
+		},
+	},
+	decorators: [
+		( Story ) => (
+			<div
+				style={ {
+					minHeight: '150px',
+				} }
+			>
+				<Story />
+			</div>
+		),
+	],
+};
+export default meta;
+
+const Template: StoryFn< typeof CustomSelect > = ( props ) => {
+	return <CustomSelect { ...props } />;
+};
+
+const ControlledTemplate: StoryFn< typeof CustomSelect > = ( props ) => {
+	const [ value, setValue ] = useState< string | string[] >();
+	return (
+		<CustomSelect
+			{ ...props }
+			onChange={ ( nextValue ) => {
+				setValue( nextValue );
+				props.onChange?.( nextValue );
+			} }
+			value={ value }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	label: 'Label',
+	children: (
+		<>
+			<CustomSelectItem value="Small">
+				<span style={ { fontSize: '75%' } }>Small</span>
+			</CustomSelectItem>
+			<CustomSelectItem value="Something bigger">
+				<span style={ { fontSize: '200%' } }>Something bigger</span>
+			</CustomSelectItem>
+		</>
+	),
+};
+
+/**
+ * Multiple selection can be enabled by using an array for the `value` and
+ * `defaultValue` props. The argument of the `onChange` function will also
+ * change accordingly.
+ */
+export const MultiSelect = Template.bind( {} );
+MultiSelect.args = {
+	defaultValue: [ 'lavender', 'tangerine' ],
+	label: 'Select Colors',
+	renderSelectedValue: ( currentValue: string | string[] ) => {
+		if ( ! Array.isArray( currentValue ) ) {
+			return currentValue;
+		}
+		if ( currentValue.length === 0 ) return 'No colors selected';
+		if ( currentValue.length === 1 ) return currentValue[ 0 ];
+		return `${ currentValue.length } colors selected`;
+	},
+	children: (
+		<>
+			{ [
+				'amber',
+				'aquamarine',
+				'flamingo pink',
+				'lavender',
+				'maroon',
+				'tangerine',
+			].map( ( item ) => (
+				<CustomSelectItem key={ item } value={ item }>
+					{ item }
+				</CustomSelectItem>
+			) ) }
+		</>
+	),
+};
+
+const renderControlledValue = ( gravatar: string | string[] ) => {
+	const avatar = `https://gravatar.com/avatar?d=${ gravatar }`;
+	return (
+		<div style={ { display: 'flex', alignItems: 'center' } }>
+			<img
+				style={ { maxHeight: '75px', marginRight: '10px' } }
+				key={ avatar }
+				src={ avatar }
+				alt=""
+				aria-hidden="true"
+			/>
+			<span>{ gravatar }</span>
+		</div>
+	);
+};
+
+export const Controlled = ControlledTemplate.bind( {} );
+Controlled.args = {
+	label: 'Default Gravatars',
+	renderSelectedValue: renderControlledValue,
+	children: (
+		<>
+			{ [ 'mystery-person', 'identicon', 'wavatar', 'retro' ].map(
+				( option ) => (
+					<CustomSelectItem key={ option } value={ option }>
+						{ renderControlledValue( option ) }
+					</CustomSelectItem>
+				)
+			) }
+		</>
+	),
+};

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

@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * Internal dependencies
+ */
+import { COLORS } from '../utils';
+import { space } from '../utils/space';
+import type { CustomSelectProps } from './types';
+
+export const CustomSelectLabel = styled( Ariakit.SelectLabel )`
+	font-size: 11px;
+	font-weight: 500;
+	line-height: 1.4;
+	text-transform: uppercase;
+	margin-bottom: ${ space( 2 ) };
+`;
+
+const inputHeights = {
+	default: 40,
+	small: 24,
+};
+
+export const CustomSelectButton = styled( Ariakit.Select, {
+	// Do not forward `hasCustomRenderProp` to the underlying Ariakit.Select component
+	shouldForwardProp: ( prop ) => prop !== 'hasCustomRenderProp',
+} )( ( {
+	size,
+	hasCustomRenderProp,
+}: {
+	size: NonNullable< CustomSelectProps[ 'size' ] >;
+	hasCustomRenderProp: boolean;
+} ) => {
+	const isSmallSize = size === 'small' && ! hasCustomRenderProp;
+	const heightProperty = hasCustomRenderProp ? 'minHeight' : 'height';
+
+	return {
+		display: 'flex',
+		justifyContent: 'space-between',
+		alignItems: 'center',
+		backgroundColor: COLORS.white,
+		border: `1px solid ${ COLORS.gray[ 600 ] }`,
+		borderRadius: space( 0.5 ),
+		cursor: 'pointer',
+		width: '100%',
+		[ heightProperty ]: `${ inputHeights[ size ] }px`,
+		padding: isSmallSize ? space( 2 ) : space( 4 ),
+		fontSize: isSmallSize ? '11px' : '13px',
+		'&[data-focus-visible]': {
+			outlineStyle: 'solid',
+		},
+		'&[aria-expanded="true"]': {
+			outlineStyle: `1.5px solid ${ COLORS.theme.accent }`,
+		},
+	};
+} );
+
+export const CustomSelectPopover = styled( Ariakit.SelectPopover )`
+	border-radius: ${ space( 0.5 ) };
+	background: ${ COLORS.white };
+	border: 1px solid ${ COLORS.gray[ 900 ] };
+`;
+
+export const CustomSelectItem = styled( Ariakit.SelectItem )`
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: ${ space( 2 ) };
+	&[data-active-item] {
+		background-color: ${ COLORS.gray[ 300 ] };
+	}
+`;

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

@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type * as Ariakit from '@ariakit/react';
+
+export type CustomSelectContext =
+	| {
+			/**
+			 * The store object returned by Ariakit's `useSelectStore` hook.
+			 */
+			store: Ariakit.SelectStore;
+	  }
+	| undefined;
+
+export type CustomSelectProps = {
+	/**
+	 * The child elements. This should be composed of CustomSelectItem components.
+	 */
+	children: React.ReactNode;
+	/**
+	 * An optional default value for the control. If left `undefined`, the first
+	 * non-disabled item will be used.
+	 */
+	defaultValue?: string | string[];
+	/**
+	 * Label for the control.
+	 */
+	label: string;
+	/**
+	 * A function that receives the new value of the input.
+	 */
+	onChange?: ( newValue: string | string[] ) => void;
+	/**
+	 * Can be used to render select UI with custom styled values.
+	 */
+	renderSelectedValue?: (
+		selectedValue: string | string[]
+	) => React.ReactNode;
+	/**
+	 * The size of the control.
+	 *
+	 * @default 'default'
+	 */
+	size?: 'default' | 'small';
+	/**
+	 * Can be used to externally control the value of the control.
+	 */
+	value?: string | string[];
+};
+
+export type CustomSelectItemProps = {
+	/**
+	 * The value of the select item. This will be used as the children if
+	 * children are left `undefined`.
+	 */
+	value: string;
+	/**
+	 * The children to display for each select item. The `value` will be
+	 * used if left `undefined`.
+	 */
+	children?: React.ReactNode;
+};

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

@@ -32,12 +32,24 @@ const TimeZone = () => {
 			? timezone.abbr
 			: `UTC${ offsetSymbol }${ timezone.offset }`;
 
+	// Replace underscore with space in strings like `America/Costa_Rica`.
+	const prettyTimezoneString = timezone.string.replace( '_', ' ' );
+
 	const timezoneDetail =
 		'UTC' === timezone.string
 			? __( 'Coordinated Universal Time' )
-			: `(${ zoneAbbr }) ${ timezone.string.replace( '_', ' ' ) }`;
-
-	return (
+			: `(${ zoneAbbr }) ${ prettyTimezoneString }`;
+
+	// When the prettyTimezoneString is empty, there is no additional timezone
+	// detail information to show in a Tooltip.
+	const hasNoAdditionalTimezoneDetail =
+		prettyTimezoneString.trim().length === 0;
+
+	return hasNoAdditionalTimezoneDetail ? (
+		<StyledComponent className="components-datetime__timezone">
+			{ zoneAbbr }
+		</StyledComponent>
+	) : (
 		<Tooltip placement="top" text={ timezoneDetail }>
 			<StyledComponent className="components-datetime__timezone">
 				{ zoneAbbr }

package/src/dimension-control/index.tsx

@@ -42,6 +42,7 @@ import type { SelectControlSingleSelectionProps } from '../select-control/types'
  */
 export function DimensionControl( props: DimensionControlProps ) {
 	const {
+		__next40pxDefaultSize = false,
 		label,
 		value,
 		sizes = sizesTable,
@@ -85,6 +86,7 @@ export function DimensionControl( props: DimensionControlProps ) {
 
 	return (
 		<SelectControl
+			__next40pxDefaultSize={ __next40pxDefaultSize }
 			className={ classnames(
 				className,
 				'block-editor-dimension-control'

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

@@ -764,7 +764,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z"
+                d="M11 12.5V17.5H12.5V12.5H17.5V11H12.5V6H11V11H6V12.5H11Z"
               />
             </svg>
             Margin
@@ -1057,7 +1057,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z"
+                d="M11 12.5V17.5H12.5V12.5H17.5V11H12.5V6H11V11H6V12.5H11Z"
               />
             </svg>
             Margin

package/src/dimension-control/types.ts

@@ -45,4 +45,10 @@ export type DimensionControlProps = {
 	 * @default ''
 	 */
 	className?: string;
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 };

package/src/dropdown-menu-v2-ariakit/README.md

@@ -284,9 +284,9 @@ Event handler called when the checked radio menu item changes.
 
 - Required: no
 
-### `DropdownMenuGroup`
+### `DropdownMenuItemLabel`
 
-Used to group menu items.
+Used to render the menu item's label.
 
 #### Props
 
@@ -294,13 +294,27 @@ The component accepts the following props:
 
 ##### `children`: `React.ReactNode`
 
-The contents of the group.
+The label contents.
+
+- Required: yes
+
+### `DropdownMenuItemHelpText`
+
+Used to render the menu item's help text.
+
+#### Props
+
+The component accepts the following props:
+
+##### `children`: `React.ReactNode`
+
+The help text contents.
 
 - Required: yes
 
-### `DropdownMenuGroupLabel`
+### `DropdownMenuGroup`
 
-Used to render a group label.
+Used to group menu items.
 
 #### Props
 

package/src/dropdown-menu-v2-ariakit/index.tsx

@@ -30,7 +30,6 @@ import type {
 	DropdownMenuContext as DropdownMenuContextType,
 	DropdownMenuProps,
 	DropdownMenuGroupProps,
-	DropdownMenuGroupLabelProps,
 	DropdownMenuItemProps,
 	DropdownMenuCheckboxItemProps,
 	DropdownMenuRadioItemProps,
@@ -55,16 +54,23 @@ export const DropdownMenuItem = forwardRef<
 		<Styled.DropdownMenuItem
 			ref={ ref }
 			{ ...props }
+			accessibleWhenDisabled
 			hideOnClick={ hideOnClick }
 			store={ dropdownMenuContext?.store }
 		>
-			{ prefix && (
-				<Styled.ItemPrefixWrapper>{ prefix }</Styled.ItemPrefixWrapper>
-			) }
-			{ children }
-			{ suffix && (
-				<Styled.ItemSuffixWrapper>{ suffix }</Styled.ItemSuffixWrapper>
-			) }
+			<Styled.ItemPrefixWrapper>{ prefix }</Styled.ItemPrefixWrapper>
+
+			<Styled.DropdownMenuItemContentWrapper>
+				<Styled.DropdownMenuItemChildrenWrapper>
+					{ children }
+				</Styled.DropdownMenuItemChildrenWrapper>
+
+				{ suffix && (
+					<Styled.ItemSuffixWrapper>
+						{ suffix }
+					</Styled.ItemSuffixWrapper>
+				) }
+			</Styled.DropdownMenuItemContentWrapper>
 		</Styled.DropdownMenuItem>
 	);
 } );
@@ -82,20 +88,30 @@ export const DropdownMenuCheckboxItem = forwardRef<
 		<Styled.DropdownMenuCheckboxItem
 			ref={ ref }
 			{ ...props }
+			accessibleWhenDisabled
 			hideOnClick={ hideOnClick }
 			store={ dropdownMenuContext?.store }
 		>
 			<Ariakit.MenuItemCheck
 				store={ dropdownMenuContext?.store }
 				render={ <Styled.ItemPrefixWrapper /> }
+				// Override some ariakit inline styles
+				style={ { width: 'auto', height: 'auto' } }
 			>
 				<Icon icon={ check } size={ 24 } />
 			</Ariakit.MenuItemCheck>
 
-			{ children }
-			{ suffix && (
-				<Styled.ItemSuffixWrapper>{ suffix }</Styled.ItemSuffixWrapper>
-			) }
+			<Styled.DropdownMenuItemContentWrapper>
+				<Styled.DropdownMenuItemChildrenWrapper>
+					{ children }
+				</Styled.DropdownMenuItemChildrenWrapper>
+
+				{ suffix && (
+					<Styled.ItemSuffixWrapper>
+						{ suffix }
+					</Styled.ItemSuffixWrapper>
+				) }
+			</Styled.DropdownMenuItemContentWrapper>
 		</Styled.DropdownMenuCheckboxItem>
 	);
 } );
@@ -119,17 +135,30 @@ export const DropdownMenuRadioItem = forwardRef<
 		<Styled.DropdownMenuRadioItem
 			ref={ ref }
 			{ ...props }
+			accessibleWhenDisabled
 			hideOnClick={ hideOnClick }
 			store={ dropdownMenuContext?.store }
 		>
 			<Ariakit.MenuItemCheck
 				store={ dropdownMenuContext?.store }
 				render={ <Styled.ItemPrefixWrapper /> }
+				// Override some ariakit inline styles
+				style={ { width: 'auto', height: 'auto' } }
 			>
 				<Icon icon={ radioCheck } size={ 24 } />
 			</Ariakit.MenuItemCheck>
-			{ children }
-			{ suffix }
+
+			<Styled.DropdownMenuItemContentWrapper>
+				<Styled.DropdownMenuItemChildrenWrapper>
+					{ children }
+				</Styled.DropdownMenuItemChildrenWrapper>
+
+				{ suffix && (
+					<Styled.ItemSuffixWrapper>
+						{ suffix }
+					</Styled.ItemSuffixWrapper>
+				) }
+			</Styled.DropdownMenuItemContentWrapper>
 		</Styled.DropdownMenuRadioItem>
 	);
 } );
@@ -148,20 +177,6 @@ export const DropdownMenuGroup = forwardRef<
 	);
 } );
 
-export const DropdownMenuGroupLabel = forwardRef<
-	HTMLDivElement,
-	WordPressComponentProps< DropdownMenuGroupLabelProps, 'div', false >
->( function DropdownMenuGroupLabel( props, ref ) {
-	const dropdownMenuContext = useContext( DropdownMenuContext );
-	return (
-		<Styled.DropdownMenuGroupLabel
-			ref={ ref }
-			{ ...props }
-			store={ dropdownMenuContext?.store }
-		/>
-	);
-} );
-
 const UnconnectedDropdownMenu = (
 	props: WordPressComponentProps< DropdownMenuProps, 'div', false >,
 	ref: React.ForwardedRef< HTMLDivElement >
@@ -280,12 +295,16 @@ const UnconnectedDropdownMenu = (
 					dropdownMenuStore.parent
 						? cloneElement( trigger, {
 								// Add submenu arrow, unless a `suffix` is explicitly specified
-								suffix: trigger.props.suffix ?? (
-									<Styled.SubmenuChevronIcon
-										aria-hidden="true"
-										icon={ chevronRightSmall }
-										size={ 24 }
-									/>
+								suffix: (
+									<>
+										{ trigger.props.suffix }
+										<Styled.SubmenuChevronIcon
+											aria-hidden="true"
+											icon={ chevronRightSmall }
+											size={ 24 }
+											preserveAspectRatio="xMidYMid slice"
+										/>
+									</>
 								),
 						  } )
 						: trigger
@@ -297,8 +316,12 @@ const UnconnectedDropdownMenu = (
 				{ ...otherProps }
 				modal={ modal }
 				store={ dropdownMenuStore }
-				gutter={ gutter ?? ( dropdownMenuStore.parent ? 16 : 8 ) }
-				shift={ shift ?? ( dropdownMenuStore.parent ? -8 : 0 ) }
+				// Root menu has an 8px distance from its trigger,
+				// otherwise 0 (which causes the submenu to slightly overlap)
+				gutter={ gutter ?? ( dropdownMenuStore.parent ? 0 : 8 ) }
+				// Align nested menu by the same (but opposite) amount
+				// as the menu container's padding.
+				shift={ shift ?? ( dropdownMenuStore.parent ? -4 : 0 ) }
 				hideOnHoverOutside={ false }
 				data-side={ appliedPlacementSide }
 				variant={ variant }
@@ -332,3 +355,29 @@ export const DropdownMenuSeparator = forwardRef<
 		/>
 	);
 } );
+
+export const DropdownMenuItemLabel = forwardRef<
+	HTMLSpanElement,
+	WordPressComponentProps< { children: React.ReactNode }, 'span', true >
+>( function DropdownMenuItemLabel( props, ref ) {
+	return (
+		<Styled.DropdownMenuItemLabel
+			numberOfLines={ 1 }
+			ref={ ref }
+			{ ...props }
+		/>
+	);
+} );
+
+export const DropdownMenuItemHelpText = forwardRef<
+	HTMLSpanElement,
+	WordPressComponentProps< { children: React.ReactNode }, 'span', true >
+>( function DropdownMenuItemHelpText( props, ref ) {
+	return (
+		<Styled.DropdownMenuItemHelpText
+			numberOfLines={ 2 }
+			ref={ ref }
+			{ ...props }
+		/>
+	);
+} );