@wordpress/components 27.4.0 → 27.6.0

package/src/popover/overlay-middlewares.tsx

@@ -17,7 +17,9 @@ export function overlayMiddlewares() {
 				const { firstElementChild } = elements.floating ?? {};
 
 				// Only HTMLElement instances have the `style` property.
-				if ( ! ( firstElementChild instanceof HTMLElement ) ) return;
+				if ( ! ( firstElementChild instanceof HTMLElement ) ) {
+					return;
+				}
 
 				// Reduce the height of the popover to the available space.
 				Object.assign( firstElementChild.style, {

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

@@ -7,8 +7,6 @@ import type { StoryFn, Meta } from '@storybook/react';
  * WordPress dependencies
  */
 import { useState, useRef, useEffect } from '@wordpress/element';
-// @ts-expect-error The `@wordpress/block-editor` is not typed
-import { __unstableIframe as Iframe } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies

package/src/query-controls/author-select.tsx

@@ -13,7 +13,9 @@ export default function AuthorSelect( {
 	selectedAuthorId,
 	onChange: onChangeProp,
 }: AuthorSelectProps ) {
-	if ( ! authorList ) return null;
+	if ( ! authorList ) {
+		return null;
+	}
 	const termsTree = buildTermsTree( authorList );
 	return (
 		<TreeSelect

package/src/radio-control/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ChangeEvent } from 'react';
 
 /**
@@ -71,7 +71,7 @@ export function RadioControl(
 			id={ id }
 			hideLabelFromVision={ hideLabelFromVision }
 			help={ help }
-			className={ classnames( className, 'components-radio-control' ) }
+			className={ clsx( className, 'components-radio-control' ) }
 		>
 			<VStack spacing={ 1 }>
 				{ options.map( ( option, index ) => (

package/src/range-control/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ChangeEvent, FocusEvent, ForwardedRef } from 'react';
 
 /**
@@ -116,9 +116,9 @@ function UnforwardedRangeControl(
 		: ( ( value - min ) / ( max - min ) ) * 100;
 	const fillValueOffset = `${ clamp( fillValue, 0, 100 ) }%`;
 
-	const classes = classnames( 'components-range-control', className );
+	const classes = clsx( 'components-range-control', className );
 
-	const wrapperClasses = classnames(
+	const wrapperClasses = clsx(
 		'components-range-control__wrapper',
 		!! marks && 'is-marked'
 	);

package/src/range-control/mark.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -22,12 +22,12 @@ export default function RangeMark(
 		...otherProps
 	} = props;
 
-	const classes = classnames(
+	const classes = clsx(
 		'components-range-control__mark',
 		isFilled && 'is-filled',
 		className
 	);
-	const labelClasses = classnames(
+	const labelClasses = clsx(
 		'components-range-control__mark-label',
 		isFilled && 'is-filled'
 	);

package/src/range-control/rail.tsx

@@ -92,7 +92,7 @@ function useMarks( {
 	if ( ! Array.isArray( marks ) ) {
 		marks = [];
 		const count = 1 + Math.round( range / step );
-		while ( count > marks.push( { value: step * marks.length + min } ) );
+		while ( count > marks.push( { value: step * marks.length + min } ) ) {}
 	}
 
 	const placedMarks: RangeMarkProps[] = [];

package/src/range-control/styles/range-control-styles.ts

@@ -8,7 +8,7 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import NumberControl from '../../number-control';
-import { COLORS, reduceMotion, rtl } from '../../utils';
+import { COLORS, rtl } from '../../utils';
 import { space } from '../../utils/space';
 
 import type {
@@ -287,13 +287,15 @@ export const Tooltip = styled.span< TooltipProps >`
 	pointer-events: none;
 	position: absolute;
 	text-align: center;
-	transition: opacity 120ms ease;
 	user-select: none;
 	line-height: 1.4;
 
+	@media not ( prefers-reduced-motion ) {
+		transition: opacity 120ms ease;
+	}
+
 	${ tooltipShow };
 	${ tooltipPosition };
-	${ reduceMotion( 'transition' ) };
 	${ rtl(
 		{ transform: 'translateX(-50%)' },
 		{ transform: 'translateX(50%)' }

package/src/range-control/tooltip.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -31,7 +31,7 @@ export default function SimpleTooltip(
 		...restProps
 	} = props;
 	const position = useTooltipPosition( { inputRef, tooltipPosition } );
-	const classes = classnames( 'components-simple-tooltip', className );
+	const classes = clsx( 'components-simple-tooltip', className );
 	const styles = {
 		...style,
 		zIndex,

package/src/resizable-box/index.tsx

@@ -6,7 +6,7 @@ import { forwardRef } from '@wordpress/element';
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { Resizable } from 're-resizable';
 import type { ResizableProps } from 're-resizable';
 import type { ReactNode, ForwardedRef } from 'react';
@@ -21,45 +21,45 @@ const SIDE_HANDLE_CLASS_NAME = 'components-resizable-box__side-handle';
 const CORNER_HANDLE_CLASS_NAME = 'components-resizable-box__corner-handle';
 
 const HANDLE_CLASSES = {
-	top: classnames(
+	top: clsx(
 		HANDLE_CLASS_NAME,
 		SIDE_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-top'
 	),
-	right: classnames(
+	right: clsx(
 		HANDLE_CLASS_NAME,
 		SIDE_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-right'
 	),
-	bottom: classnames(
+	bottom: clsx(
 		HANDLE_CLASS_NAME,
 		SIDE_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-bottom'
 	),
-	left: classnames(
+	left: clsx(
 		HANDLE_CLASS_NAME,
 		SIDE_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-left'
 	),
-	topLeft: classnames(
+	topLeft: clsx(
 		HANDLE_CLASS_NAME,
 		CORNER_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-top',
 		'components-resizable-box__handle-left'
 	),
-	topRight: classnames(
+	topRight: clsx(
 		HANDLE_CLASS_NAME,
 		CORNER_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-top',
 		'components-resizable-box__handle-right'
 	),
-	bottomRight: classnames(
+	bottomRight: clsx(
 		HANDLE_CLASS_NAME,
 		CORNER_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-bottom',
 		'components-resizable-box__handle-right'
 	),
-	bottomLeft: classnames(
+	bottomLeft: clsx(
 		HANDLE_CLASS_NAME,
 		CORNER_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-bottom',
@@ -107,7 +107,7 @@ function UnforwardedResizableBox(
 ): JSX.Element {
 	return (
 		<Resizable
-			className={ classnames(
+			className={ clsx(
 				'components-resizable-box__container',
 				showHandle && 'has-show-handle',
 				className

package/src/resizable-box/resize-tooltip/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { Ref, ForwardedRef } from 'react';
 
 /**
@@ -55,9 +55,11 @@ function ResizeTooltip(
 		position,
 	} );
 
-	if ( ! isVisible ) return null;
+	if ( ! isVisible ) {
+		return null;
+	}
 
-	const classes = classnames( 'components-resize-tooltip', className );
+	const classes = clsx( 'components-resize-tooltip', className );
 
 	return (
 		<Root aria-hidden="true" className={ classes } ref={ ref } { ...props }>

package/src/resizable-box/resize-tooltip/label.tsx

@@ -41,7 +41,9 @@ function Label(
 	const isBottom = position === POSITIONS.bottom;
 	const isCorner = position === POSITIONS.corner;
 
-	if ( ! showLabel ) return null;
+	if ( ! showLabel ) {
+		return null;
+	}
 
 	let style: React.CSSProperties = {
 		opacity: showLabel ? 1 : undefined,

package/src/resizable-box/resize-tooltip/utils.ts

@@ -90,7 +90,9 @@ export function useResizeLabel( {
 			 * If axis is controlled, we will avoid resetting the moveX and moveY values.
 			 * This will allow for the preferred axis values to persist in the label.
 			 */
-			if ( isAxisControlled ) return;
+			if ( isAxisControlled ) {
+				return;
+			}
 			setMoveX( false );
 			setMoveY( false );
 		};
@@ -109,12 +111,16 @@ export function useResizeLabel( {
 		 */
 		const isRendered = width !== null || height !== null;
 
-		if ( ! isRendered ) return;
+		if ( ! isRendered ) {
+			return;
+		}
 
 		const didWidthChange = width !== widthRef.current;
 		const didHeightChange = height !== heightRef.current;
 
-		if ( ! didWidthChange && ! didHeightChange ) return;
+		if ( ! didWidthChange && ! didHeightChange ) {
+			return;
+		}
 
 		/*
 		 * After the initial render, the useResizeAware will set the first
@@ -194,7 +200,9 @@ function getSizeLabel( {
 	showPx = false,
 	width,
 }: GetSizeLabelArgs ): string | undefined {
-	if ( ! moveX && ! moveY ) return undefined;
+	if ( ! moveX && ! moveY ) {
+		return undefined;
+	}
 
 	/*
 	 * Corner position...

package/src/responsive-wrapper/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -49,7 +49,7 @@ function ResponsiveWrapper( {
 		<TagName className="components-responsive-wrapper">
 			<div>
 				{ cloneElement( children, {
-					className: classnames(
+					className: clsx(
 						'components-responsive-wrapper__content',
 						children.props.className
 					),

package/src/search-control/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -97,10 +97,7 @@ function UnforwardedSearchControl(
 				ref={ useMergeRefs( [ searchRef, forwardedRef ] ) }
 				type="search"
 				size={ size }
-				className={ classnames(
-					'components-search-control',
-					className
-				) }
+				className={ clsx( 'components-search-control', className ) }
 				onChange={ ( nextValue?: string ) =>
 					onChange( nextValue ?? '' )
 				}

package/src/select-control/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -55,7 +55,9 @@ function UnforwardedSelectControl(
 	const helpId = help ? `${ id }__help` : undefined;
 
 	// Disable reason: A select with an onchange throws a warning.
-	if ( ! options?.length && ! children ) return null;
+	if ( ! options?.length && ! children ) {
+		return null;
+	}
 
 	const handleOnChange = (
 		event: React.ChangeEvent< HTMLSelectElement >
@@ -72,7 +74,7 @@ function UnforwardedSelectControl(
 		props.onChange?.( event.target.value, { event } );
 	};
 
-	const classes = classNames( 'components-select-control', className );
+	const classes = clsx( 'components-select-control', className );
 
 	return (
 		<BaseControl

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

@@ -24,7 +24,9 @@ interface SelectProps
 }
 
 const disabledStyles = ( { disabled }: SelectProps ) => {
-	if ( ! disabled ) return '';
+	if ( ! disabled ) {
+		return '';
+	}
 
 	return css( {
 		color: COLORS.ui.textDisabled,

package/src/slot-fill/bubbles-virtually/slot-fill-context.ts

@@ -3,11 +3,12 @@
  */
 import { createContext } from '@wordpress/element';
 import warning from '@wordpress/warning';
+import { observableMap } from '@wordpress/compose';
+
 /**
  * Internal dependencies
  */
 import type { SlotFillBubblesVirtuallyContext } from '../types';
-import { observableMap } from './observable-map';
 
 const initialContextValue: SlotFillBubblesVirtuallyContext = {
 	slots: observableMap(),

package/src/slot-fill/bubbles-virtually/slot-fill-provider.tsx

@@ -3,6 +3,7 @@
  */
 import { useMemo } from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
+import { observableMap } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -12,7 +13,6 @@ import type {
 	SlotFillProviderProps,
 	SlotFillBubblesVirtuallyContext,
 } from '../types';
-import { observableMap } from './observable-map';
 
 function createSlotRegistry(): SlotFillBubblesVirtuallyContext {
 	const slots: SlotFillBubblesVirtuallyContext[ 'slots' ] = observableMap();

package/src/slot-fill/bubbles-virtually/use-slot-fills.ts

@@ -2,13 +2,13 @@
  * WordPress dependencies
  */
 import { useContext } from '@wordpress/element';
+import { useObservableValue } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import SlotFillContext from './slot-fill-context';
 import type { SlotKey } from '../types';
-import { useObservableValue } from './observable-map';
 
 export default function useSlotFills( name: SlotKey ) {
 	const registry = useContext( SlotFillContext );

package/src/slot-fill/bubbles-virtually/use-slot.ts

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useMemo, useContext } from '@wordpress/element';
+import { useObservableValue } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -13,7 +14,6 @@ import type {
 	FillProps,
 	SlotKey,
 } from '../types';
-import { useObservableValue } from './observable-map';
 
 export default function useSlot( name: SlotKey ) {
 	const registry = useContext( SlotFillContext );

package/src/slot-fill/types.ts

@@ -4,9 +4,9 @@
 import type { Component, MutableRefObject, ReactNode, RefObject } from 'react';
 
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
-import type { ObservableMap } from './bubbles-virtually/observable-map';
+import type { ObservableMap } from '@wordpress/compose';
 
 export type DistributiveOmit< T, K extends keyof any > = T extends any
 	? Omit< T, K >

package/src/snackbar/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { ForwardedRef, KeyboardEvent, MouseEvent } from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -113,7 +113,7 @@ function UnforwardedSnackbar(
 		return () => clearTimeout( timeoutHandle );
 	}, [ explicitDismiss ] );
 
-	const classes = classnames( className, 'components-snackbar', {
+	const classes = clsx( className, 'components-snackbar', {
 		'components-snackbar-explicit-dismiss': !! explicitDismiss,
 	} );
 	if ( actions && actions.length > 1 ) {
@@ -125,12 +125,9 @@ function UnforwardedSnackbar(
 		actions = [ actions[ 0 ] ];
 	}
 
-	const snackbarContentClassnames = classnames(
-		'components-snackbar__content',
-		{
-			'components-snackbar__content-with-icon': !! icon,
-		}
-	);
+	const snackbarContentClassnames = clsx( 'components-snackbar__content', {
+		'components-snackbar__content-with-icon': !! icon,
+	} );
 
 	return (
 		<div

package/src/snackbar/list.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -68,7 +68,7 @@ export function SnackbarList( {
 }: WordPressComponentProps< SnackbarListProps, 'div' > ) {
 	const listRef = useRef< HTMLDivElement | null >( null );
 	const isReducedMotion = useReducedMotion();
-	className = classnames( 'components-snackbar-list', className );
+	className = clsx( 'components-snackbar-list', className );
 	const removeNotice =
 		( notice: SnackbarListProps[ 'notices' ][ number ] ) => () =>
 			onRemove?.( notice.id );

package/src/spinner/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -21,7 +21,7 @@ export function UnforwardedSpinner(
 ) {
 	return (
 		<StyledSpinner
-			className={ classNames( 'components-spinner', className ) }
+			className={ clsx( 'components-spinner', className ) }
 			viewBox="0 0 100 100"
 			width="16"
 			height="16"

package/src/surface/test/__snapshots__/index.tsx.snap

@@ -8,8 +8,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-surface css-pt58n0-View-Surface-getBorders-primary e19lxcc00"
-+     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+-     class="components-surface css-1bmtyqd-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-1u146xf-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Surface"
     >
@@ -25,8 +25,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-surface css-1vckp4o-View-Surface-getBorders-primary e19lxcc00"
-+     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+-     class="components-surface css-iin9ud-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-1u146xf-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Surface"
     >
@@ -42,8 +42,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-surface css-sw9dzi-View-Surface-getBorders-primary e19lxcc00"
-+     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+-     class="components-surface css-4j30ez-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-1u146xf-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Surface"
     >
@@ -59,8 +59,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-surface css-123k66h-View-Surface-getBorders-primary e19lxcc00"
-+     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+-     class="components-surface css-1v7smm4-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-1u146xf-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Surface"
     >
@@ -94,8 +94,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-surface css-1m2pafr-View-Surface-getBorders-secondary e19lxcc00"
-+     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+-     class="components-surface css-1afnk4j-PolymorphicDiv-Surface-getBorders-secondary e19lxcc00"
++     class="components-surface css-1u146xf-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Surface"
     >

package/src/tab-panel/index.tsx

@@ -3,7 +3,7 @@
  */
 // eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -202,7 +202,7 @@ const UnforwardedTabPanel = (
 						<Ariakit.Tab
 							key={ tab.name }
 							id={ prependInstanceId( tab.name ) }
-							className={ classnames(
+							className={ clsx(
 								'components-tab-panel__tabs-item',
 								tab.className,
 								{

package/src/text/get-line-height.ts

@@ -14,9 +14,13 @@ export function getLineHeight(
 	adjustLineHeightForInnerControls: Props[ 'adjustLineHeightForInnerControls' ],
 	lineHeight: CSSProperties[ 'lineHeight' ]
 ) {
-	if ( lineHeight ) return lineHeight;
+	if ( lineHeight ) {
+		return lineHeight;
+	}
 
-	if ( ! adjustLineHeightForInnerControls ) return;
+	if ( ! adjustLineHeightForInnerControls ) {
+		return;
+	}
 
 	let value = `calc(${ CONFIG.controlHeight } + ${ space( 2 ) })`;
 

package/src/text/utils.ts

@@ -99,8 +99,12 @@ export function createHighlighterText( {
 	unhighlightClassName = '',
 	unhighlightStyle,
 }: Options ) {
-	if ( ! children ) return null;
-	if ( typeof children !== 'string' ) return children;
+	if ( ! children ) {
+		return null;
+	}
+	if ( typeof children !== 'string' ) {
+		return children;
+	}
 
 	const textToHighlight = children;
 

package/src/text-control/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { ChangeEvent, ForwardedRef } from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -48,7 +48,7 @@ function UnforwardedTextControl(
 			className={ className }
 		>
 			<input
-				className={ classnames( 'components-text-control__input', {
+				className={ clsx( 'components-text-control__input', {
 					'is-next-40px-default-size': __next40pxDefaultSize,
 				} ) }
 				type={ type }