@wordpress/components 27.6.0 → 28.0.1

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

@@ -3,7 +3,6 @@
  */
 import { createContext, useMemo } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { Icon, chevronDown } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -14,13 +13,12 @@ import type {
 	CustomSelectContext as CustomSelectContextType,
 	CustomSelectStore,
 	CustomSelectButtonProps,
+	CustomSelectButtonSize,
 	_CustomSelectProps,
 } from './types';
-import {
-	contextConnectWithoutRef,
-	useContextSystem,
-	type WordPressComponentProps,
-} from '../context';
+import type { WordPressComponentProps } from '../context';
+import InputBase from '../input-control/input-base';
+import SelectControlChevronDown from '../select-control/chevron-down';
 
 export const CustomSelectContext =
 	createContext< CustomSelectContextType >( undefined );
@@ -46,23 +44,19 @@ function defaultRenderSelectedValue(
 	return value;
 }
 
-const UnconnectedCustomSelectButton = (
-	props: Omit<
-		WordPressComponentProps<
-			CustomSelectButtonProps & CustomSelectStore,
-			'button',
-			false
-		>,
-		'onChange'
-	>
-) => {
-	const {
-		renderSelectedValue,
-		size = 'default',
-		store,
-		...restProps
-	} = useContextSystem( props, 'CustomSelectControlButton' );
-
+const CustomSelectButton = ( {
+	renderSelectedValue,
+	size = 'default',
+	store,
+	...restProps
+}: Omit<
+	WordPressComponentProps<
+		CustomSelectButtonProps & CustomSelectButtonSize & CustomSelectStore,
+		'button',
+		false
+	>,
+	'onChange'
+> ) => {
 	const { value: currentValue } = store.useState();
 
 	const computedRenderSelectedValue = useMemo(
@@ -81,21 +75,18 @@ const UnconnectedCustomSelectButton = (
 			showOnKeyDown={ false }
 		>
 			<div>{ computedRenderSelectedValue( currentValue ) }</div>
-			<Icon icon={ chevronDown } size={ 18 } />
 		</Styled.Select>
 	);
 };
 
-const CustomSelectButton = contextConnectWithoutRef(
-	UnconnectedCustomSelectButton,
-	'CustomSelectControlButton'
-);
-
-function _CustomSelect( props: _CustomSelectProps & CustomSelectStore ) {
+function _CustomSelect(
+	props: _CustomSelectProps & CustomSelectStore & CustomSelectButtonSize
+) {
 	const {
 		children,
 		hideLabelFromVision = false,
 		label,
+		size,
 		store,
 		...restProps
 	} = props;
@@ -109,12 +100,22 @@ function _CustomSelect( props: _CustomSelectProps & CustomSelectStore ) {
 					{ label }
 				</Styled.SelectLabel>
 			) }
-			<CustomSelectButton { ...restProps } store={ store } />
-			<Styled.SelectPopover gutter={ 12 } store={ store } sameWidth>
-				<CustomSelectContext.Provider value={ { store } }>
-					{ children }
-				</CustomSelectContext.Provider>
-			</Styled.SelectPopover>
+			<InputBase
+				__next40pxDefaultSize
+				size={ size }
+				suffix={ <SelectControlChevronDown /> }
+			>
+				<CustomSelectButton
+					{ ...restProps }
+					size={ size }
+					store={ store }
+				/>
+				<Styled.SelectPopover gutter={ 12 } store={ store } sameWidth>
+					<CustomSelectContext.Provider value={ { store } }>
+						{ children }
+					</CustomSelectContext.Provider>
+				</Styled.SelectPopover>
+			</InputBase>
 		</>
 	);
 }

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

@@ -3,10 +3,7 @@
  */
 // eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
-/**
- * WordPress dependencies
- */
-import { useMemo } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -14,12 +11,12 @@ import _CustomSelect from '../custom-select';
 import CustomSelectItem from '../item';
 import type { LegacyCustomSelectProps } from '../types';
 import * as Styled from '../styles';
-import { ContextSystemProvider } from '../../context';
 
 function CustomSelectControl( props: LegacyCustomSelectProps ) {
 	const {
 		__experimentalShowSelectedHint,
 		__next40pxDefaultSize = false,
+		describedBy,
 		options,
 		onChange,
 		size = 'default',
@@ -94,39 +91,33 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 		);
 	};
 
-	// translate legacy button sizing
-	const contextSystemValue = useMemo( () => {
-		let selectedSize;
-
+	const translatedSize = ( () => {
 		if (
 			( __next40pxDefaultSize && size === 'default' ) ||
 			size === '__unstable-large'
 		) {
-			selectedSize = 'default';
-		} else if ( ! __next40pxDefaultSize && size === 'default' ) {
-			selectedSize = 'compact';
-		} else {
-			selectedSize = size;
+			return 'default';
 		}
-
-		return {
-			CustomSelectControlButton: { _overrides: { size: selectedSize } },
-		};
-	}, [ __next40pxDefaultSize, size ] );
-
-	const translatedProps = {
-		'aria-describedby': props.describedBy,
-		children,
-		renderSelectedValue: __experimentalShowSelectedHint
-			? renderSelectedValueHint
-			: undefined,
-		...restProps,
-	};
+		if ( ! __next40pxDefaultSize && size === 'default' ) {
+			return 'compact';
+		}
+		return size;
+	} )();
 
 	return (
-		<ContextSystemProvider value={ contextSystemValue }>
-			<_CustomSelect { ...translatedProps } store={ store } />
-		</ContextSystemProvider>
+		<_CustomSelect
+			aria-describedby={ describedBy }
+			renderSelectedValue={
+				__experimentalShowSelectedHint
+					? renderSelectedValueHint
+					: undefined
+			}
+			size={ translatedSize }
+			store={ store }
+			{ ...restProps }
+		>
+			{ children }
+		</_CustomSelect>
 	);
 }
 

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

@@ -26,7 +26,6 @@ const meta: Meta< typeof CustomSelectControlV2 > = {
 	},
 	tags: [ 'status-wip' ],
 	parameters: {
-		badges: [ 'wip' ],
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
 		docs: {

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

@@ -21,8 +21,8 @@ const meta: Meta< typeof CustomSelectControl > = {
 		onChange: { control: { type: null } },
 		value: { control: { type: null } },
 	},
+	tags: [ 'status-wip' ],
 	parameters: {
-		badges: [ 'wip' ],
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
 		docs: {

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

@@ -10,7 +10,7 @@ import styled from '@emotion/styled';
  */
 import { COLORS, CONFIG } from '../utils';
 import { space } from '../utils/space';
-import type { CustomSelectButtonProps } from './types';
+import type { CustomSelectButtonSize } from './types';
 
 const ITEM_PADDING = space( 2 );
 
@@ -46,7 +46,7 @@ export const Select = styled( Ariakit.Select, {
 	size,
 	hasCustomRenderProp,
 }: {
-	size: NonNullable< CustomSelectButtonProps[ 'size' ] >;
+	size: NonNullable< CustomSelectButtonSize[ 'size' ] >;
 	hasCustomRenderProp: boolean;
 } ) => {
 	const heightProperty = hasCustomRenderProp ? 'minHeight' : 'height';
@@ -79,17 +79,15 @@ export const Select = styled( Ariakit.Select, {
 		align-items: center;
 		justify-content: space-between;
 		background-color: ${ COLORS.theme.background };
-		border: 1px solid ${ COLORS.ui.border };
-		border-radius: 2px;
+		border: none;
 		cursor: pointer;
 		font-size: ${ CONFIG.fontSize };
 		width: 100%;
+
 		&[data-focus-visible] {
-			outline-style: solid;
-		}
-		&[aria-expanded='true'] {
-			outline: 1.5px solid ${ COLORS.theme.accent };
+			outline: none; // handled by InputBase component
 		}
+
 		${ getSize() }
 	`;
 } );
@@ -98,6 +96,10 @@ export const SelectPopover = styled( Ariakit.SelectPopover )`
 	border-radius: 2px;
 	background: ${ COLORS.theme.background };
 	border: 1px solid ${ COLORS.theme.foreground };
+
+	&[data-focus-visible] {
+		outline: none; // outline will be on the trigger, rather than the popover
+	}
 `;
 
 export const SelectItem = styled( Ariakit.SelectItem )`

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

@@ -14,6 +14,19 @@ export type CustomSelectStore = {
 
 export type CustomSelectContext = CustomSelectStore | undefined;
 
+type CustomSelectSize< Size = 'compact' | 'default' > = {
+	/**
+	 * The size of the control.
+	 *
+	 * @default 'default'
+	 */
+	size?: Size;
+};
+
+export type CustomSelectButtonSize = CustomSelectSize<
+	'compact' | 'default' | 'small'
+>;
+
 export type CustomSelectButtonProps = {
 	/**
 	 * An optional default value for the control when used in uncontrolled mode.
@@ -30,19 +43,13 @@ export type CustomSelectButtonProps = {
 	renderSelectedValue?: (
 		selectedValue: string | string[]
 	) => React.ReactNode;
-	/**
-	 * The size of the control.
-	 *
-	 * @default 'default'
-	 */
-	size?: 'compact' | 'default' | 'small';
 	/**
 	 * The value of the control when used in uncontrolled mode.
 	 */
 	value?: string | string[];
 };
 
-export type _CustomSelectProps = {
+export type _CustomSelectProps = CustomSelectButtonProps & {
 	/**
 	 * The child elements. This should be composed of `CustomSelectItem` components.
 	 */
@@ -60,14 +67,8 @@ export type _CustomSelectProps = {
 };
 
 export type CustomSelectProps = _CustomSelectProps &
-	Omit< CustomSelectButtonProps, 'size' > & {
-		/**
-		 * The size of the control.
-		 *
-		 * @default 'default'
-		 */
-		size?: Exclude< CustomSelectButtonProps[ 'size' ], 'small' >;
-	};
+	CustomSelectButtonProps &
+	CustomSelectSize;
 
 /**
  * The legacy object structure for the options array.

package/src/dashicon/index.native.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Icon } from '@wordpress/components';
+import { Icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies

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

@@ -13,7 +13,7 @@ import sizes from '../sizes';
  */
 import { desktop, tablet, mobile } from '@wordpress/icons';
 
-export default {
+const meta: Meta< typeof DimensionControl > = {
 	component: DimensionControl,
 	title: 'Components (Experimental)/DimensionControl',
 	argTypes: {
@@ -34,7 +34,8 @@ export default {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},
-} as Meta< typeof DimensionControl >;
+};
+export default meta;
 
 const Template: StoryFn< typeof DimensionControl > = ( args ) => (
 	<DimensionControl { ...args } />

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

@@ -47,10 +47,6 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   min-height: 0;
 }
 
-.emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) {
-  z-index: 1;
-}
-
 .emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) .emotion-25 {
   border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
@@ -72,6 +68,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
   text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
@@ -330,10 +327,6 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   min-height: 0;
 }
 
-.emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) {
-  z-index: 1;
-}
-
 .emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) .emotion-25 {
   border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
@@ -355,6 +348,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
   text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
@@ -623,10 +617,6 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   min-height: 0;
 }
 
-.emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) {
-  z-index: 1;
-}
-
 .emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) .emotion-25 {
   border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
@@ -648,6 +638,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
   text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
@@ -928,10 +919,6 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   min-height: 0;
 }
 
-.emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) {
-  z-index: 1;
-}
-
 .emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) .emotion-25 {
   border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
@@ -953,6 +940,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
   text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;

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

@@ -25,10 +25,7 @@ describe( 'DimensionControl', () => {
 	describe( 'rendering', () => {
 		it( 'renders with defaults', () => {
 			const { container } = render(
-				<DimensionControl
-					instanceId={ instanceId }
-					label={ 'Padding' }
-				/>
+				<DimensionControl instanceId={ instanceId } label="Padding" />
 			);
 			expect( container ).toMatchSnapshot();
 		} );
@@ -37,7 +34,7 @@ describe( 'DimensionControl', () => {
 			const { container } = render(
 				<DimensionControl
 					instanceId={ instanceId }
-					label={ 'Margin' }
+					label="Margin"
 					icon={ plus }
 				/>
 			);
@@ -48,9 +45,9 @@ describe( 'DimensionControl', () => {
 			const { container } = render(
 				<DimensionControl
 					instanceId={ instanceId }
-					label={ 'Margin' }
+					label="Margin"
 					icon={ plus }
-					iconLabel={ 'Tablet Devices' }
+					iconLabel="Tablet Devices"
 				/>
 			);
 			expect( container ).toMatchSnapshot();
@@ -78,7 +75,7 @@ describe( 'DimensionControl', () => {
 			const { container } = render(
 				<DimensionControl
 					instanceId={ instanceId }
-					label={ 'Custom Dimension' }
+					label="Custom Dimension"
 					sizes={ customSizes }
 				/>
 			);
@@ -93,7 +90,7 @@ describe( 'DimensionControl', () => {
 			render(
 				<DimensionControl
 					instanceId={ instanceId }
-					label={ 'Padding' }
+					label="Padding"
 					onChange={ onChangeHandler }
 				/>
 			);
@@ -115,7 +112,7 @@ describe( 'DimensionControl', () => {
 			render(
 				<DimensionControl
 					instanceId={ instanceId }
-					label={ 'Padding' }
+					label="Padding"
 					onChange={ onChangeHandler }
 				/>
 			);

package/src/draggable/test/index.native.js

@@ -10,9 +10,9 @@ import { State } from 'react-native-gesture-handler';
 import Animated from 'react-native-reanimated';
 
 /**
- * WordPress dependencies
+ * Internal dependencies
  */
-import { Draggable, DraggableTrigger } from '@wordpress/components';
+import Draggable, { DraggableTrigger } from '../../draggable';
 
 // Touch event type constants have been extracted from original source code, as they are not exported in the package.
 // Reference: https://github.com/software-mansion/react-native-gesture-handler/blob/90895e5f38616a6be256fceec6c6a391cd9ad7c7/src/TouchEventType.ts

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

@@ -66,7 +66,9 @@ WithMorePadding.args = {
 	...Default.args,
 	renderContent: () => (
 		<DropdownContentWrapper paddingSize="medium">
-			Content wrapped with <code>{ `paddingSize="medium"` }</code>.
+			{ /* eslint-disable react/no-unescaped-entities */ }
+			Content wrapped with <code>paddingSize="medium"</code>.
+			{ /* eslint-enable react/no-unescaped-entities */ }
 		</DropdownContentWrapper>
 	),
 };
@@ -81,7 +83,9 @@ WithNoPadding.args = {
 	...Default.args,
 	renderContent: () => (
 		<DropdownContentWrapper paddingSize="none">
-			Content wrapped with <code>{ `paddingSize="none"` }</code>.
+			{ /* eslint-disable react/no-unescaped-entities */ }
+			Content wrapped with <code>paddingSize="none"</code>.
+			{ /* eslint-enable react/no-unescaped-entities */ }
 		</DropdownContentWrapper>
 	),
 };

package/src/dropdown-menu/index.native.js

@@ -6,7 +6,6 @@ import { Platform } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { BottomSheet, PanelBody } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { menu } from '@wordpress/icons';
 
@@ -15,6 +14,8 @@ import { menu } from '@wordpress/icons';
  */
 import Button from '../button';
 import Dropdown from '../dropdown';
+import BottomSheet from '../mobile/bottom-sheet';
+import PanelBody from '../panel/body';
 
 function mergeProps( defaultProps = {}, props = {} ) {
 	const mergedProps = {

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

@@ -59,7 +59,6 @@ const meta: Meta< typeof DropdownMenu > = {
 	tags: [ 'status-private' ],
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
-		badges: [ 'private' ],
 		controls: { expanded: true },
 		docs: {
 			canvas: { sourceState: 'shown' },
@@ -111,7 +110,7 @@ export const Default: StoryFn< typeof DropdownMenu > = ( props ) => (
 			>
 				<DropdownMenuItemLabel>With prefix</DropdownMenuItemLabel>
 			</DropdownMenuItem>
-			<DropdownMenuItem suffix={ '⌘S' }>With suffix</DropdownMenuItem>
+			<DropdownMenuItem suffix="⌘S">With suffix</DropdownMenuItem>
 			<DropdownMenuItem
 				disabled
 				prefix={ <Icon icon={ formatCapitalize } size={ 24 } /> }

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

@@ -54,9 +54,14 @@ describe( 'DropdownMenu', () => {
 
 		expect( toggleButton ).toHaveAttribute( 'aria-expanded', 'true' );
 
-		expect(
-			screen.getByRole( 'menu', { name: toggleButton.textContent ?? '' } )
-		).toHaveFocus();
+		await waitFor( () =>
+			expect(
+				screen.getByRole( 'menu', {
+					name: toggleButton.textContent ?? '',
+				} )
+			).toHaveFocus()
+		);
+
 		expect( screen.getByRole( 'separator' ) ).toHaveAttribute(
 			'aria-orientation',
 			'horizontal'

package/src/focal-point-picker/focal-point.tsx

@@ -6,7 +6,6 @@ import { PointerCircle } from './styles/focal-point-style';
 /**
  * External dependencies
  */
-import clsx from 'clsx';
 import type { FocalPointProps } from './types';
 import type { WordPressComponentProps } from '../context';
 
@@ -15,9 +14,13 @@ export default function FocalPoint( {
 	top = '50%',
 	...props
 }: WordPressComponentProps< FocalPointProps, 'div' > ) {
-	const classes = clsx( 'components-focal-point-picker__icon_container' );
-
 	const style = { left, top };
 
-	return <PointerCircle { ...props } className={ classes } style={ style } />;
+	return (
+		<PointerCircle
+			{ ...props }
+			className="components-focal-point-picker__icon_container"
+			style={ style }
+		/>
+	);
 }

package/src/focal-point-picker/index.native.js

@@ -12,7 +12,6 @@ import {
 	setFocalPointPickerTooltipShown,
 } from '@wordpress/react-native-bridge';
 import { __ } from '@wordpress/i18n';
-import { Image, UnitControl } from '@wordpress/components';
 import { useRef, useState, useMemo, useEffect } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
@@ -24,6 +23,8 @@ import Tooltip from './tooltip';
 import styles from './style.scss';
 import { isVideoType } from './utils';
 import { clamp } from '../utils/math';
+import Image from '../mobile/image';
+import UnitControl from '../unit-control';
 
 const MIN_POSITION_VALUE = 0;
 const MAX_POSITION_VALUE = 100;

package/src/focal-point-picker/styles/focal-point-style.ts

@@ -3,11 +3,6 @@
  */
 import styled from '@emotion/styled';
 
-/**
- * Internal dependencies
- */
-import { reduceMotion } from '../../utils';
-
 export const PointerCircle = styled.div`
 	background-color: transparent;
 	cursor: grab;
@@ -23,9 +18,10 @@ export const PointerCircle = styled.div`
 	border-radius: 50%;
 	backdrop-filter: blur( 16px ) saturate( 180% );
 	box-shadow: rgb( 0 0 0 / 10% ) 0px 0px 8px;
-	transition: transform 100ms linear;
 
-	${ reduceMotion( 'transition' ) }
+	@media not ( prefers-reduced-motion ) {
+		transition: transform 100ms linear;
+	}
 
 	${ ( { isDragging }: { isDragging: boolean } ) =>
 		isDragging &&