@wordpress/components 27.5.0 → 27.6.0

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';
 
 /**
@@ -59,7 +59,7 @@ function ResizeTooltip(
 		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/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
@@ -74,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/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/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-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 }

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

@@ -13,7 +13,7 @@ import { HStack } from '../../h-stack';
 
 const meta: Meta< typeof Theme > = {
 	component: Theme,
-	title: 'Components (Experimental)/Theme',
+	title: 'Components/Theme',
 	argTypes: {
 		accent: { control: { type: 'color' } },
 		background: { control: { type: 'color' } },

package/src/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -278,7 +278,6 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             <div
               class="emotion-15"
               role="presentation"
-              style="opacity: 1;"
             />
           </div>
         </div>
@@ -824,7 +823,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
             <div
               class="emotion-15"
               role="presentation"
-              style="opacity: 1;"
             />
           </div>
         </div>

package/src/toolbar/toolbar/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -60,7 +60,7 @@ function UnforwardedToolbar(
 		);
 	}
 	// `ToolbarGroup` already uses components-toolbar for compatibility reasons.
-	const finalClassName = classnames(
+	const finalClassName = clsx(
 		'components-accessible-toolbar',
 		className,
 		variant && `is-${ variant }`

package/src/toolbar/toolbar/style.scss

@@ -88,18 +88,6 @@
 			padding-right: $grid-unit-10;
 			min-width: $block-toolbar-height;
 		}
-
-		// @todo We should extract the tabs styles to the tabs component itself
-		&.components-tab-button {
-			font-weight: 500;
-
-			span {
-				display: inline-block;
-				padding-left: 0;
-				padding-right: 0;
-				position: relative;
-			}
-		}
 	}
 }
 

package/src/toolbar/toolbar-button/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef, MouseEvent as ReactMouseEvent } from 'react';
 
 /**
@@ -55,7 +55,7 @@ function UnforwardedToolbarButton(
 							props.onClick( event );
 						}
 					} }
-					className={ classnames(
+					className={ clsx(
 						'components-toolbar__control',
 						className
 					) }
@@ -76,7 +76,7 @@ function UnforwardedToolbarButton(
 	// Button.
 	return (
 		<ToolbarItem
-			className={ classnames( 'components-toolbar-button', className ) }
+			className={ clsx( 'components-toolbar-button', className ) }
 			{ ...extraProps }
 			{ ...props }
 			ref={ ref }

package/src/toolbar/toolbar-group/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -67,7 +67,7 @@ function ToolbarGroup( {
 		return null;
 	}
 
-	const finalClassName = classnames(
+	const finalClassName = clsx(
 		// Unfortunately, there's legacy code referencing to `.components-toolbar`
 		// So we can't get rid of it
 		accessibleToolbarState

package/src/tools-panel/tools-panel/hook.ts

@@ -205,18 +205,21 @@ export function useToolsPanel(
 		} );
 	}, [ panelItems, setMenuItems, menuItemOrder ] );
 
-	// Force a menu item to be checked.
-	// This is intended for use with default panel items. They are displayed
-	// separately to optional items and have different display states,
-	// we need to update that when their value is customized.
+	// Updates the status of the panel’s menu items. For default items the
+	// value represents whether it differs from the default and for optional
+	// items whether the item is shown.
 	const flagItemCustomization = useCallback(
-		( label: string, group: ToolsPanelMenuItemKey = 'default' ) => {
+		(
+			value: boolean,
+			label: string,
+			group: ToolsPanelMenuItemKey = 'default'
+		) => {
 			setMenuItems( ( items ) => {
 				const newState = {
 					...items,
 					[ group ]: {
 						...items[ group ],
-						[ label ]: true,
+						[ label ]: value,
 					},
 				};
 				return newState;

package/src/tools-panel/tools-panel-item/hook.ts

@@ -125,17 +125,21 @@ export function useToolsPanelItem(
 	const isRegistered = menuItems?.[ menuGroup ]?.[ label ] !== undefined;
 
 	const isValueSet = hasValue();
-	const wasValueSet = usePrevious( isValueSet );
-	const newValueSet = isValueSet && ! wasValueSet;
-
-	// Notify the panel when an item's value has been set.
+	// Notify the panel when an item's value has changed except for optional
+	// items without value because the item should not cause itself to hide.
 	useEffect( () => {
-		if ( ! newValueSet ) {
+		if ( ! isShownByDefault && ! isValueSet ) {
 			return;
 		}
 
-		flagItemCustomization( label, menuGroup );
-	}, [ newValueSet, menuGroup, label, flagItemCustomization ] );
+		flagItemCustomization( isValueSet, label, menuGroup );
+	}, [
+		isValueSet,
+		menuGroup,
+		label,
+		flagItemCustomization,
+		isShownByDefault,
+	] );
 
 	// Determine if the panel item's corresponding menu is being toggled and
 	// trigger appropriate callback if it is.
@@ -151,7 +155,7 @@ export function useToolsPanelItem(
 			onSelect?.();
 		}
 
-		if ( ! isMenuItemChecked && wasMenuItemChecked ) {
+		if ( ! isMenuItemChecked && isValueSet && wasMenuItemChecked ) {
 			onDeselect?.();
 		}
 	}, [

package/src/tools-panel/types.ts

@@ -176,6 +176,7 @@ export type ToolsPanelContext = {
 	registerResetAllFilter: ( filter: ResetAllFilter ) => void;
 	deregisterResetAllFilter: ( filter: ResetAllFilter ) => void;
 	flagItemCustomization: (
+		value: boolean,
 		label: string,
 		group?: ToolsPanelMenuItemKey
 	) => void;

package/src/truncate/hook.ts

@@ -57,7 +57,7 @@ export default function useTruncate(
 		// breaks even when it contains 'unbreakable' content such as long URLs.
 		// See https://github.com/WordPress/gutenberg/issues/60860.
 		const truncateLines = css`
-			word-break: break-all;
+			${ numberOfLines === 1 ? 'word-break: break-all;' : '' }
 			-webkit-box-orient: vertical;
 			-webkit-line-clamp: ${ numberOfLines };
 			display: -webkit-box;

package/src/unit-control/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { KeyboardEvent, ForwardedRef, SyntheticEvent } from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -108,7 +108,7 @@ function UnforwardedUnitControl(
 		}
 	}, [ parsedUnit, setUnit ] );
 
-	const classes = classnames(
+	const classes = clsx(
 		'components-unit-control',
 		// This class is added for legacy purposes to maintain it on the outer
 		// wrapper. See: https://github.com/WordPress/gutenberg/pull/45139

package/src/unit-control/unit-select-control.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ChangeEvent, ForwardedRef } from 'react';
 
 /**
@@ -47,7 +47,7 @@ function UnitSelectControl(
 		onChange?.( unitValue, { event, data } );
 	};
 
-	const classes = classnames( 'components-unit-control__select', className );
+	const classes = clsx( 'components-unit-control__select', className );
 
 	return (
 		<UnitSelect

package/src/utils/theme-variables.scss

@@ -4,6 +4,10 @@
 // `--wp-admin-theme-color`. If the `--wp-admin-theme-color` variable is not
 // defined, fallback to the default theme color (WP blueberry).
 $components-color-accent: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+
+// Define accent color transparent variants.
+$components-color-accent-transparent-40: rgba(var(--wp-components-color-accent--rgb, var(--wp-admin-theme-color--rgb)), 0.04);
+
 $components-color-accent-darker-10: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
 $components-color-accent-darker-20: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));