@wordpress/components 27.4.0 → 27.6.0

package/src/theme/color-algorithms.ts

@@ -76,7 +76,9 @@ function warnContrastIssues( issues: ReturnType< typeof checkContrasts > ) {
 }
 
 function generateAccentDependentColors( accent?: string ) {
-	if ( ! accent ) return {};
+	if ( ! accent ) {
+		return {};
+	}
 
 	return {
 		accent,
@@ -87,7 +89,9 @@ function generateAccentDependentColors( accent?: string ) {
 }
 
 function generateBackgroundDependentColors( background?: string ) {
-	if ( ! background ) return {};
+	if ( ! background ) {
+		return {};
+	}
 
 	const foreground = getForegroundForColor( background );
 

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

@@ -107,8 +107,6 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   padding: 0 12px;
   position: relative;
   text-align: center;
-  -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
-  transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -123,9 +121,10 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   color: #fff;
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-12 {
-    transition-duration: 0ms;
+    -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+    transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   }
 }
 
@@ -190,8 +189,6 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   padding: 0 12px;
   position: relative;
   text-align: center;
-  -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
-  transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -205,9 +202,10 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   padding-right: 0;
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-18 {
-    transition-duration: 0ms;
+    -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+    transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   }
 }
 
@@ -280,7 +278,6 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             <div
               class="emotion-15"
               role="presentation"
-              style="opacity: 1;"
             />
           </div>
         </div>
@@ -436,8 +433,6 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   padding: 0 12px;
   position: relative;
   text-align: center;
-  -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
-  transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -446,9 +441,10 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   z-index: 2;
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-12 {
-    transition-duration: 0ms;
+    -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+    transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   }
 }
 
@@ -656,8 +652,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   padding: 0 12px;
   position: relative;
   text-align: center;
-  -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
-  transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -672,9 +666,10 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   color: #fff;
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-12 {
-    transition-duration: 0ms;
+    -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+    transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   }
 }
 
@@ -739,8 +734,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   padding: 0 12px;
   position: relative;
   text-align: center;
-  -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
-  transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -754,9 +747,10 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   padding-right: 0;
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-18 {
-    transition-duration: 0ms;
+    -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+    transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   }
 }
 
@@ -829,7 +823,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
             <div
               class="emotion-15"
               role="presentation"
-              style="opacity: 1;"
             />
           </div>
         </div>
@@ -979,8 +972,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   padding: 0 12px;
   position: relative;
   text-align: center;
-  -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
-  transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -989,9 +980,10 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   z-index: 2;
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-12 {
-    transition-duration: 0ms;
+    -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+    transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   }
 }
 

package/src/toggle-group-control/toggle-group-control-option-base/component.tsx

@@ -147,7 +147,9 @@ function ToggleGroupControlOptionBase(
 								{ ...commonProps }
 								onFocus={ ( event ) => {
 									onFocusProp?.( event );
-									if ( event.defaultPrevented ) return;
+									if ( event.defaultPrevented ) {
+										return;
+									}
 									toggleGroupControlContext.setValue( value );
 								} }
 							/>

package/src/toggle-group-control/toggle-group-control-option-base/styles.ts

@@ -7,7 +7,7 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import { CONFIG, COLORS, reduceMotion } from '../../utils';
+import { CONFIG, COLORS } from '../../utils';
 import type {
 	ToggleGroupControlProps,
 	ToggleGroupControlOptionBaseProps,
@@ -50,11 +50,12 @@ export const buttonView = ( {
 	padding: 0 12px;
 	position: relative;
 	text-align: center;
-	transition:
-		background ${ CONFIG.transitionDurationFast } linear,
-		color ${ CONFIG.transitionDurationFast } linear,
-		font-weight 60ms linear;
-	${ reduceMotion( 'transition' ) }
+	@media not ( prefers-reduced-motion ) {
+		transition:
+			background ${ CONFIG.transitionDurationFast } linear,
+			color ${ CONFIG.transitionDurationFast } linear,
+			font-weight 60ms linear;
+	}
 	user-select: none;
 	width: 100%;
 	z-index: 2;

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

@@ -84,22 +84,10 @@
 		// This needs specificity.
 		&.has-icon.has-icon {
 			// Reduce the default padding when a button only has an icon.
-			padding-left: $grid-unit-15;
-			padding-right: $grid-unit-15;
+			padding-left: $grid-unit-10;
+			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/tree-grid/roving-tab-index-item.tsx

@@ -41,7 +41,9 @@ export const RovingTabIndexItem = forwardRef(
 			return children( allProps );
 		}
 
-		if ( ! Component ) return null;
+		if ( ! Component ) {
+			return null;
+		}
 
 		return <Component { ...allProps }>{ children }</Component>;
 	}

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
@@ -170,8 +170,12 @@ function UnforwardedUnitControl(
 			// Unless the meta key was pressed (to avoid interfering with
 			// shortcuts, e.g. pastes), moves focus to the unit select if a key
 			// matches the first character of a unit.
-			if ( ! event.metaKey && reFirstCharacterOfUnits.test( event.key ) )
+			if (
+				! event.metaKey &&
+				reFirstCharacterOfUnits.test( event.key )
+			) {
 				refInputSuffix.current?.focus();
+			}
 		};
 	}
 

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/colors.js

@@ -29,7 +29,9 @@ export function rgba( hexValue = '', alpha = 1 ) {
  * @return {HTMLDivElement | undefined} The HTML element for color computation.
  */
 function getColorComputationNode() {
-	if ( typeof document === 'undefined' ) return;
+	if ( typeof document === 'undefined' ) {
+		return;
+	}
 
 	if ( ! colorComputationNode ) {
 		// Create a temporary element for style computation.
@@ -49,7 +51,9 @@ function getColorComputationNode() {
  * @return {boolean} Whether the value is a valid color.
  */
 function isColor( value ) {
-	if ( typeof value !== 'string' ) return false;
+	if ( typeof value !== 'string' ) {
+		return false;
+	}
 	const test = colord( value );
 
 	return test.isValid();
@@ -64,16 +68,26 @@ function isColor( value ) {
  * @return {string} The computed background color.
  */
 function _getComputedBackgroundColor( backgroundColor ) {
-	if ( typeof backgroundColor !== 'string' ) return '';
+	if ( typeof backgroundColor !== 'string' ) {
+		return '';
+	}
 
-	if ( isColor( backgroundColor ) ) return backgroundColor;
+	if ( isColor( backgroundColor ) ) {
+		return backgroundColor;
+	}
 
-	if ( ! backgroundColor.includes( 'var(' ) ) return '';
-	if ( typeof document === 'undefined' ) return '';
+	if ( ! backgroundColor.includes( 'var(' ) ) {
+		return '';
+	}
+	if ( typeof document === 'undefined' ) {
+		return '';
+	}
 
 	// Attempts to gracefully handle CSS variables color values.
 	const el = getColorComputationNode();
-	if ( ! el ) return '';
+	if ( ! el ) {
+		return '';
+	}
 
 	el.style.background = backgroundColor;
 	// Grab the style.

package/src/utils/font-size.ts

@@ -51,7 +51,9 @@ export function getFontSize(
 
 	if ( typeof size !== 'number' ) {
 		const parsed = parseFloat( size );
-		if ( Number.isNaN( parsed ) ) return size;
+		if ( Number.isNaN( parsed ) ) {
+			return size;
+		}
 		size = parsed;
 	}
 

package/src/utils/get-valid-children.ts

@@ -18,7 +18,9 @@ import { Children, isValidElement } from '@wordpress/element';
 export function getValidChildren(
 	children: ReactNode
 ): Array< ReactChild | ReactFragment | ReactPortal > {
-	if ( typeof children === 'string' ) return [ children ];
+	if ( typeof children === 'string' ) {
+		return [ children ];
+	}
 
 	return Children.toArray( children ).filter( ( child ) =>
 		isValidElement( child )

package/src/utils/input/base.js

@@ -6,16 +6,17 @@ import { css } from '@emotion/react';
 /**
  * Internal dependencies
  */
-import { reduceMotion } from '../reduce-motion';
 import { COLORS } from '../colors-values';
 import { CONFIG } from '../';
 
 export const inputStyleNeutral = css`
 	box-shadow: 0 0 0 transparent;
-	transition: box-shadow 0.1s linear;
 	border-radius: ${ CONFIG.radiusBlockUi };
 	border: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };
-	${ reduceMotion( 'transition' ) }
+
+	@media not ( prefers-reduced-motion ) {
+		transition: box-shadow 0.1s linear;
+	}
 `;
 
 export const inputStyleFocus = css`

package/src/utils/strings.ts

@@ -4,66 +4,18 @@
 import removeAccents from 'remove-accents';
 import { paramCase } from 'change-case';
 
+/**
+ * All unicode characters that we consider "dash-like":
+ * - `\u007e`: ~ (tilde)
+ * - `\u00ad`: ­ (soft hyphen)
+ * - `\u2053`: ⁓ (swung dash)
+ * - `\u207b`: ⁻ (superscript minus)
+ * - `\u208b`: ₋ (subscript minus)
+ * - `\u2212`: − (minus sign)
+ * - `\\p{Pd}`: any other Unicode dash character
+ */
 const ALL_UNICODE_DASH_CHARACTERS = new RegExp(
-	`[${ [
-		// - (hyphen-minus)
-		'\u002d',
-		// ~ (tilde)
-		'\u007e',
-		// ­ (soft hyphen)
-		'\u00ad',
-		// ֊ (armenian hyphen)
-		'\u058a',
-		// ־ (hebrew punctuation maqaf)
-		'\u05be',
-		// ᐀ (canadian syllabics hyphen)
-		'\u1400',
-		// ᠆ (mongolian todo soft hyphen)
-		'\u1806',
-		// ‐ (hyphen)
-		'\u2010',
-		// non-breaking hyphen)
-		'\u2011',
-		// ‒ (figure dash)
-		'\u2012',
-		// – (en dash)
-		'\u2013',
-		// — (em dash)
-		'\u2014',
-		// ― (horizontal bar)
-		'\u2015',
-		// ⁓ (swung dash)
-		'\u2053',
-		// superscript minus)
-		'\u207b',
-		// subscript minus)
-		'\u208b',
-		// − (minus sign)
-		'\u2212',
-		// ⸗ (double oblique hyphen)
-		'\u2e17',
-		// ⸺ (two-em dash)
-		'\u2e3a',
-		// ⸻ (three-em dash)
-		'\u2e3b',
-		// 〜 (wave dash)
-		'\u301c',
-		// 〰 (wavy dash)
-		'\u3030',
-		// ゠ (katakana-hiragana double hyphen)
-		'\u30a0',
-		// ︱ (presentation form for vertical em dash)
-		'\ufe31',
-		// ︲ (presentation form for vertical en dash)
-		'\ufe32',
-		// ﹘ (small em dash)
-		'\ufe58',
-		// ﹣ (small hyphen-minus)
-		'\ufe63',
-		// － (fullwidth hyphen-minus)
-		'\uff0d',
-	].join( '' ) }]`,
-	'g'
+	/[\u007e\u00ad\u2053\u207b\u208b\u2212\p{Pd}]/gu
 );
 
 export const normalizeTextString = ( value: string ): string => {