@wordpress/components 27.5.0 → 28.0.0

package/src/mobile/media-edit/index.native.js

@@ -3,12 +3,16 @@
  */
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Picker } from '@wordpress/components';
 import {
 	requestMediaEditor,
 	mediaSources,
 } from '@wordpress/react-native-bridge';
 
+/**
+ * Internal dependencies
+ */
+import Picker from '../picker';
+
 export const MEDIA_TYPE_IMAGE = 'image';
 
 export const MEDIA_EDITOR = 'MEDIA_EDITOR';

package/src/mobile/picker/index.android.js

@@ -9,13 +9,14 @@ import { View } from 'react-native';
 import { __ } from '@wordpress/i18n';
 import { Component, Fragment } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { PanelBody, TextControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import BottomSheet from '../bottom-sheet';
 import styles from './styles.scss';
+import PanelBody from '../../panel/body';
+import TextControl from '../../text-control';
 
 function Separator() {
 	const separatorStyle = usePreferredColorSchemeStyle(
@@ -61,7 +62,7 @@ export default class Picker extends Component {
 					icon={ option.icon }
 					leftAlign={ leftAlign }
 					label={ option.label }
-					separatorType={ 'none' }
+					separatorType="none"
 					onPress={ () => this.onCellPress( option.value ) }
 					disabled={ option.disabled }
 					style={
@@ -93,7 +94,7 @@ export default class Picker extends Component {
 						<TextControl
 							label={ __( 'Cancel' ) }
 							onPress={ this.onClose }
-							separatorType={ 'none' }
+							separatorType="none"
 						/>
 					) }
 				</PanelBody>

package/src/mobile/picker/index.ios.js

@@ -9,13 +9,13 @@ import { ActionSheetIOS } from 'react-native';
 import { __ } from '@wordpress/i18n';
 import { Component, forwardRef, useContext } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { BottomSheetContext } from '@wordpress/components';
 import { usePreferredColorScheme } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import styles from './styles.scss';
+import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context';
 
 class Picker extends Component {
 	presentPicker() {

package/src/mobile/segmented-control/index.native.js

@@ -173,7 +173,7 @@ const SegmentedControls = ( {
 							accessibilityState={ {
 								selected: activeSegmentIndex === index,
 							} }
-							accessibilityRole={ 'button' }
+							accessibilityRole="button"
 							accessibilityLabel={ segment }
 							accessibilityHint={ `${ index + 1 } on ${
 								segments.length

package/src/mobile/utils/use-unit-converter-to-mobile.native.js

@@ -6,18 +6,7 @@ import { Dimensions } from 'react-native';
 /**
  * WordPress dependencies
  */
-import {
-	useContext,
-	useEffect,
-	useState,
-	useMemo,
-	useCallback,
-} from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import GlobalStylesContext from '../global-styles-context';
+import { useEffect, useState, useMemo, useCallback } from '@wordpress/element';
 
 const getValueAndUnit = ( value, unit ) => {
 	const regex = /(\d+\.?\d*)(.*)/;
@@ -63,8 +52,7 @@ const convertUnitToMobile = ( containerSize, globalStyles, value, unit ) => {
 	}
 };
 
-const useConvertUnitToMobile = ( value, unit ) => {
-	const { globalStyles: styles } = useContext( GlobalStylesContext );
+const useConvertUnitToMobile = ( value, unit, styles ) => {
 	const [ windowSizes, setWindowSizes ] = useState(
 		Dimensions.get( 'window' )
 	);

package/src/modal/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type {
 	ForwardedRef,
 	KeyboardEvent,
@@ -255,7 +255,7 @@ function UnforwardedModal(
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
 			ref={ useMergeRefs( [ ref, forwardedRef ] ) }
-			className={ classnames(
+			className={ clsx(
 				'components-modal__screen-overlay',
 				overlayClassName
 			) }
@@ -264,7 +264,7 @@ function UnforwardedModal(
 		>
 			<StyleProvider document={ document }>
 				<div
-					className={ classnames(
+					className={ clsx(
 						'components-modal__frame',
 						sizeClass,
 						className
@@ -285,7 +285,7 @@ function UnforwardedModal(
 					onKeyDown={ onKeyDown }
 				>
 					<div
-						className={ classnames( 'components-modal__content', {
+						className={ clsx( 'components-modal__content', {
 							'hide-header': __experimentalHideHeader,
 							'is-scrollable': hasScrollableContent,
 							'has-scrolled-content': hasScrolledContent,

package/src/navigation/back-button/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
@@ -29,10 +29,7 @@ function UnforwardedNavigationBackButton(
 ) {
 	const { setActiveMenu, navigationTree } = useNavigationContext();
 
-	const classes = classnames(
-		'components-navigation__back-button',
-		className
-	);
+	const classes = clsx( 'components-navigation__back-button', className );
 
 	const parentMenuTitle =
 		parentMenu !== undefined

package/src/navigation/group/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -48,7 +48,7 @@ export function NavigationGroup( {
 	}
 
 	const groupTitleId = `components-navigation__group-title-${ groupId }`;
-	const classes = classnames( 'components-navigation__group', className );
+	const classes = clsx( 'components-navigation__group', className );
 
 	return (
 		<NavigationGroupContext.Provider value={ context }>

package/src/navigation/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -116,7 +116,7 @@ export function Navigation( {
 		navigationTree,
 	};
 
-	const classes = classnames( 'components-navigation', className );
+	const classes = clsx( 'components-navigation', className );
 	const animateClassName = getAnimateClassName( {
 		type: 'slide-in',
 		origin: slideOrigin,
@@ -128,7 +128,7 @@ export function Navigation( {
 				key={ menu }
 				className={
 					animateClassName
-						? classnames( {
+						? clsx( {
 								[ animateClassName ]:
 									isMounted.current && slideOrigin,
 						  } )

package/src/navigation/item/base.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -32,7 +32,7 @@ export default function NavigationItemBase( props: NavigationItemBaseProps ) {
 		return null;
 	}
 
-	const classes = classnames( 'components-navigation__item', className );
+	const classes = clsx( 'components-navigation__item', className );
 
 	return (
 		<ItemBaseUI className={ classes } { ...restProps }>

package/src/navigation/item/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -60,7 +60,7 @@ export function NavigationItem( props: NavigationItemProps ) {
 
 	const isActive = item && activeItem === item;
 
-	const classes = classnames( className, {
+	const classes = clsx( className, {
 		'is-active': isActive,
 	} );
 

package/src/navigation/menu/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -66,7 +66,7 @@ export function NavigationMenu( props: NavigationMenuProps ) {
 		: setUncontrolledSearch;
 
 	const menuTitleId = `components-navigation__menu-title-${ menu }`;
-	const classes = classnames( 'components-navigation__menu', className );
+	const classes = clsx( 'components-navigation__menu', className );
 
 	return (
 		<NavigationMenuContext.Provider value={ context }>

package/src/notice/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -93,14 +93,9 @@ function Notice( {
 }: NoticeProps ) {
 	useSpokenMessage( spokenMessage, politeness );
 
-	const classes = classnames(
-		className,
-		'components-notice',
-		'is-' + status,
-		{
-			'is-dismissible': isDismissible,
-		}
-	);
+	const classes = clsx( className, 'components-notice', 'is-' + status, {
+		'is-dismissible': isDismissible,
+	} );
 
 	if ( __unstableHTML && typeof children === 'string' ) {
 		children = <RawHTML>{ children }</RawHTML>;
@@ -151,7 +146,7 @@ function Notice( {
 									href={ url }
 									variant={ computedVariant }
 									onClick={ url ? undefined : onClick }
-									className={ classnames(
+									className={ clsx(
 										'components-notice__action',
 										buttonCustomClasses
 									) }

package/src/notice/list.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -48,7 +48,7 @@ function NoticeList( {
 		( id: NoticeListProps[ 'notices' ][ number ][ 'id' ] ) => () =>
 			onRemove( id );
 
-	className = classnames( 'components-notice-list', className );
+	className = clsx( 'components-notice-list', className );
 
 	return (
 		<div className={ className }>

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

@@ -109,7 +109,7 @@ export const NoticeListSubcomponent: StoryFn< typeof NoticeList > = () => {
 	return (
 		<>
 			<NoticeList notices={ notices } onRemove={ removeNotice } />
-			<Button variant={ 'primary' } onClick={ resetNotices }>
+			<Button variant="primary" onClick={ resetNotices }>
 				Reset Notices
 			</Button>
 		</>

package/src/number-control/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef, KeyboardEvent, MouseEvent } from 'react';
 
 /**
@@ -82,7 +82,7 @@ function UnforwardedNumberControl(
 	};
 
 	const autoComplete = typeProp === 'number' ? 'off' : undefined;
-	const classes = classNames( 'components-number-control', className );
+	const classes = clsx( 'components-number-control', className );
 	const cx = useCx();
 	const spinButtonClasses = cx( size === 'small' && styles.smallSpinButtons );
 

package/src/palette-edit/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -37,13 +37,13 @@ import {
 	PaletteActionsContainer,
 	PaletteEditStyles,
 	PaletteHeading,
-	PaletteHStackHeader,
 	IndicatorStyled,
 	PaletteItem,
 	NameContainer,
 	NameInputControl,
 	DoneButton,
 	RemoveButton,
+	PaletteEditContents,
 } from './styles';
 import { NavigableMenu } from '../navigable-container';
 import { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';
@@ -130,7 +130,7 @@ function ColorPickerPopover< T extends Color | Gradient >( {
 				resize: false,
 				placement: 'left-start',
 				...receivedPopoverProps,
-				className: classnames(
+				className: clsx(
 					'components-palette-edit__popover',
 					receivedPopoverProps?.className
 				),
@@ -410,7 +410,7 @@ export function PaletteEdit( {
 
 	return (
 		<PaletteEditStyles>
-			<PaletteHStackHeader>
+			<HStack>
 				<PaletteHeading level={ paletteLabelHeadingLevel }>
 					{ paletteLabel }
 				</PaletteHeading>
@@ -542,9 +542,9 @@ export function PaletteEdit( {
 							</DropdownMenu>
 						) }
 				</PaletteActionsContainer>
-			</PaletteHStackHeader>
+			</HStack>
 			{ hasElements && (
-				<>
+				<PaletteEditContents>
 					{ isEditing && (
 						<PaletteEditListView< ( typeof elements )[ number ] >
 							canOnlyChangeValues={ canOnlyChangeValues }
@@ -602,9 +602,11 @@ export function PaletteEdit( {
 								disableCustomColors
 							/>
 						) ) }
-				</>
+				</PaletteEditContents>
+			) }
+			{ ! hasElements && emptyMessage && (
+				<PaletteEditContents>{ emptyMessage }</PaletteEditContents>
 			) }
-			{ ! hasElements && emptyMessage }
 		</PaletteEditStyles>
 	);
 }

package/src/palette-edit/styles.ts

@@ -9,7 +9,6 @@ import { css } from '@emotion/react';
  */
 import Button from '../button';
 import { Heading } from '../heading';
-import { HStack } from '../h-stack';
 import { space } from '../utils/space';
 import { COLORS, CONFIG, font } from '../utils';
 import { View } from '../view';
@@ -131,8 +130,8 @@ export const PaletteActionsContainer = styled( View )`
 	display: flex;
 `;
 
-export const PaletteHStackHeader = styled( HStack )`
-	margin-bottom: ${ space( 2 ) };
+export const PaletteEditContents = styled( View )`
+	margin-top: ${ space( 2 ) };
 `;
 
 export const PaletteEditStyles = styled( View )`

package/src/palette-edit/test/index.tsx

@@ -154,7 +154,7 @@ describe( 'PaletteEdit', () => {
 		render(
 			<PaletteEdit
 				{ ...defaultProps }
-				emptyMessage={ 'Test empty message' }
+				emptyMessage="Test empty message"
 			/>
 		);
 
@@ -170,11 +170,13 @@ describe( 'PaletteEdit', () => {
 			} )
 		);
 
-		expect(
-			screen.getByRole( 'button', {
-				name: 'Remove all colors',
-			} )
-		).toBeVisible();
+		await waitFor( () => {
+			expect(
+				screen.getByRole( 'button', {
+					name: 'Remove all colors',
+				} )
+			).toBeVisible();
+		} );
 	} );
 
 	it( 'shows a reset option when the `canReset` prop is enabled', async () => {
@@ -187,11 +189,13 @@ describe( 'PaletteEdit', () => {
 				name: 'Color options',
 			} )
 		);
-		expect(
-			screen.getByRole( 'button', {
-				name: 'Reset colors',
-			} )
-		).toBeVisible();
+		await waitFor( () => {
+			expect(
+				screen.getByRole( 'button', {
+					name: 'Reset colors',
+				} )
+			).toBeVisible();
+		} );
 	} );
 
 	it( 'does not show a reset colors option when `canReset` is disabled', async () => {

package/src/panel/actions.native.js

@@ -6,7 +6,6 @@ import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { TextControl } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { useMemo } from '@wordpress/element';
 
@@ -15,6 +14,7 @@ import { useMemo } from '@wordpress/element';
  */
 import styles from './actions.scss';
 import BottomSeparatorCover from './bottom-separator-cover';
+import TextControl from '../text-control';
 
 function PanelActions( { actions, getStylesFromColorScheme } ) {
 	const mappedActions = useMemo( () => {

package/src/panel/body.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -79,7 +79,7 @@ export function UnforwardedPanelBody(
 		}
 	}, [ isOpened, scrollBehavior ] );
 
-	const classes = classnames( 'components-panel__body', className, {
+	const classes = clsx( 'components-panel__body', className, {
 		'is-opened': isOpened,
 	} );
 

package/src/panel/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -18,7 +18,7 @@ function UnforwardedPanel(
 	{ header, className, children }: PanelProps,
 	ref: React.ForwardedRef< HTMLDivElement >
 ) {
-	const classNames = classnames( className, 'components-panel' );
+	const classNames = clsx( className, 'components-panel' );
 	return (
 		<div className={ classNames } ref={ ref }>
 			{ header && <PanelHeader label={ header } /> }

package/src/panel/row.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -20,7 +20,7 @@ function UnforwardedPanelRow(
 ) {
 	return (
 		<div
-			className={ classnames( 'components-panel__row', className ) }
+			className={ clsx( 'components-panel__row', className ) }
 			ref={ ref }
 		>
 			{ children }

package/src/placeholder/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -68,14 +68,14 @@ export function Placeholder(
 		};
 	}
 
-	const classes = classnames(
+	const classes = clsx(
 		'components-placeholder',
 		className,
 		modifierClassNames,
 		withIllustration ? 'has-illustration' : null
 	);
 
-	const fieldsetClasses = classnames( 'components-placeholder__fieldset', {
+	const fieldsetClasses = clsx( 'components-placeholder__fieldset', {
 		'is-column-layout': isColumnLayout,
 	} );
 

package/src/placeholder/style.scss

@@ -67,7 +67,7 @@
 	flex-direction: row;
 	width: 100%;
 	flex-wrap: wrap;
-	gap: $grid-unit-15;
+	gap: $grid-unit-20;
 	justify-content: flex-start;
 
 	p {
@@ -83,7 +83,6 @@
 
 .components-placeholder__input[type="url"] {
 	@include input-control;
-	margin: 0 8px 0 0;
 	flex: 1 1 auto;
 }
 

package/src/popover/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { ForwardedRef, SyntheticEvent, RefCallback } from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import {
 	useFloating,
 	flip as flipMiddleware,
@@ -78,7 +78,7 @@ export const SLOT_NAME = 'Popover';
 const ArrowTriangle = () => (
 	<SVG
 		xmlns="http://www.w3.org/2000/svg"
-		viewBox={ `0 0 100 100` }
+		viewBox="0 0 100 100"
 		className="components-popover__triangle"
 		role="presentation"
 	>
@@ -390,7 +390,7 @@ const UnforwardedPopover = (
 
 	let content = (
 		<motion.div
-			className={ classnames( className, {
+			className={ clsx( className, {
 				'is-expanded': isExpanded,
 				'is-positioned': isPositioned,
 				// Use the 'alternate' classname for 'toolbar' variant for back compat.

package/src/private-apis.ts

@@ -15,7 +15,6 @@ import {
 } from './composite/v2';
 import { default as CustomSelectControl } from './custom-select-control';
 import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';
-import { default as ProgressBar } from './progress-bar';
 import { createPrivateSlotFill } from './slot-fill';
 import {
 	DropdownMenu as DropdownMenuV2,
@@ -44,7 +43,6 @@ lock( privateApis, {
 	__experimentalPopoverLegacyPositionToPlacement,
 	createPrivateSlotFill,
 	ComponentsContext,
-	ProgressBar,
 	Tabs,
 	Theme,
 	DropdownMenuV2,