@wordpress/components 27.5.0 → 28.0.0

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/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -87,10 +87,7 @@ export function DimensionControl( props: DimensionControlProps ) {
 	return (
 		<SelectControl
 			__next40pxDefaultSize={ __next40pxDefaultSize }
-			className={ classnames(
-				className,
-				'block-editor-dimension-control'
-			) }
+			className={ clsx( className, 'block-editor-dimension-control' ) }
 			label={ selectLabel }
 			hideLabelFromVision={ false }
 			value={ value }

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));
@@ -330,10 +326,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));
@@ -623,10 +615,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));
@@ -928,10 +916,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));

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/drop-zone/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -181,7 +181,7 @@ export function DropZoneComponent( {
 			setIsDraggingOverElement( false );
 		},
 	} );
-	const classes = classnames( 'components-drop-zone', className, {
+	const classes = clsx( 'components-drop-zone', className, {
 		'is-active':
 			( isDraggingOverDocument || isDraggingOverElement ) &&
 			( ( type === 'file' && onFilesDrop ) ||

package/src/dropdown/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -142,7 +142,7 @@ const UnconnectedDropdown = (
 					}
 					variant={ variant }
 					{ ...popoverProps }
-					className={ classnames(
+					className={ clsx(
 						'components-dropdown__content',
 						popoverProps?.className,
 						contentClassName

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

@@ -1,12 +1,11 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 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 = {
@@ -23,10 +24,7 @@ function mergeProps( defaultProps = {}, props = {} ) {
 	};
 
 	if ( props.className && defaultProps.className ) {
-		mergedProps.className = classnames(
-			props.className,
-			defaultProps.className
-		);
+		mergedProps.className = clsx( props.className, defaultProps.className );
 	}
 
 	return mergedProps;
@@ -72,17 +70,14 @@ function DropdownMenu( {
 
 	return (
 		<Dropdown
-			className={ classnames( 'components-dropdown-menu', className ) }
+			className={ clsx( 'components-dropdown-menu', className ) }
 			popoverProps={ mergedPopoverProps }
 			renderToggle={ ( { isOpen, onToggle } ) => {
 				const mergedToggleProps = mergeProps(
 					{
-						className: classnames(
-							'components-dropdown-menu__toggle',
-							{
-								'is-opened': isOpen,
-							}
-						),
+						className: clsx( 'components-dropdown-menu__toggle', {
+							'is-opened': isOpen,
+						} ),
 					},
 					toggleProps
 				);

package/src/dropdown-menu/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -30,10 +30,7 @@ function mergeProps<
 	};
 
 	if ( props.className && defaultProps.className ) {
-		mergedProps.className = classnames(
-			props.className,
-			defaultProps.className
-		);
+		mergedProps.className = clsx( props.className, defaultProps.className );
 	}
 
 	return mergedProps;
@@ -113,12 +110,9 @@ function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
 
 				const mergedToggleProps = mergeProps(
 					{
-						className: classnames(
-							'components-dropdown-menu__toggle',
-							{
-								'is-opened': isOpen,
-							}
-						),
+						className: clsx( 'components-dropdown-menu__toggle', {
+							'is-opened': isOpen,
+						} ),
 					},
 					restToggleProps
 				);
@@ -157,10 +151,9 @@ function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
 				const mergedMenuProps = mergeProps(
 					{
 						'aria-label': label,
-						className: classnames(
-							'components-dropdown-menu__menu',
-							{ 'no-icons': noIcons }
-						),
+						className: clsx( 'components-dropdown-menu__menu', {
+							'no-icons': noIcons,
+						} ),
 					},
 					menuProps
 				);
@@ -182,7 +175,7 @@ function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
 											control.onClick();
 										}
 									} }
-									className={ classnames(
+									className={ clsx(
 										'components-dropdown-menu__menu-item',
 										{
 											'has-separator':