@wordpress/components 27.3.0 → 27.5.0

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

@@ -1,12 +1,13 @@
 /**
  * External dependencies
  */
-import type { ChangeEvent } from 'react';
+import type { ChangeEvent, ForwardedRef } from 'react';
 import { css } from '@emotion/react';
 
 /**
  * WordPress dependencies
  */
+import { forwardRef } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 
 /**
@@ -41,15 +42,18 @@ import { space } from '../utils/space';
  * };
  * ```
  */
-export function ToggleControl( {
-	__nextHasNoMarginBottom,
-	label,
-	checked,
-	help,
-	className,
-	onChange,
-	disabled,
-}: WordPressComponentProps< ToggleControlProps, 'input', false > ) {
+export function ToggleControl(
+	{
+		__nextHasNoMarginBottom,
+		label,
+		checked,
+		help,
+		className,
+		onChange,
+		disabled,
+	}: WordPressComponentProps< ToggleControlProps, 'input', false >,
+	ref: ForwardedRef< HTMLInputElement >
+) {
 	function onChangeToggle( event: ChangeEvent< HTMLInputElement > ) {
 		onChange( event.target.checked );
 	}
@@ -94,6 +98,7 @@ export function ToggleControl( {
 					onChange={ onChangeToggle }
 					aria-describedby={ describedBy }
 					disabled={ disabled }
+					ref={ ref }
 				/>
 				<FlexBlock
 					as="label"
@@ -107,4 +112,4 @@ export function ToggleControl( {
 	);
 }
 
-export default ToggleControl;
+export default forwardRef( ToggleControl );

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;
   }
 }
 
@@ -436,8 +434,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 +442,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 +653,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 +667,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 +735,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 +748,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;
   }
 }
 
@@ -979,8 +974,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 +982,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/style.scss

@@ -84,8 +84,8 @@
 		// 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;
 		}
 

package/src/toolbar/toolbar-group/style.scss

@@ -56,12 +56,7 @@
 
 div.components-toolbar {
 	& > div {
-		// IE11 does not support `position: sticky`, or Flex very well, so use block.
-		display: block;
-		@supports (position: sticky) {
-			display: flex;
-		}
-
+		display: flex;
 		margin: 0;
 	}
 

package/src/tooltip/test/index.tsx

@@ -42,14 +42,6 @@ const hoverOutside = async () => {
 };
 
 describe( 'Tooltip', () => {
-	// Wait enough time to make sure that tooltips don't show immediately, ignoring
-	// the showTimeout delay. For more context, see:
-	// - https://github.com/WordPress/gutenberg/pull/57345#discussion_r1435167187
-	// - https://ariakit.org/reference/tooltip-provider#skiptimeout
-	afterEach( async () => {
-		await sleep( 300 );
-	} );
-
 	describe( 'basic behavior', () => {
 		it( 'should not render the tooltip if multiple children are passed', async () => {
 			render(
@@ -312,6 +304,11 @@ describe( 'Tooltip', () => {
 			// Hover outside of the anchor, tooltip should hide
 			await hoverOutside();
 			await waitExpectTooltipToHide();
+
+			// Prevent this test from interfering with the next one.
+			// "Tooltips appear instantly if another tooltip has just been hidden."
+			// See: https://github.com/WordPress/gutenberg/pull/57345#discussion_r1435495655
+			await sleep( 3000 );
 		} );
 
 		it( 'should not show tooltip if the mouse leaves the tooltip anchor before set delay', async () => {

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

@@ -53,7 +53,11 @@ export default function useTruncate(
 		!! childrenAsText && ellipsizeMode === TRUNCATE_TYPE.auto;
 
 	const classes = useMemo( () => {
+		// The `word-break: break-all` property first makes sure a text line
+		// 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;
 			-webkit-box-orient: vertical;
 			-webkit-line-clamp: ${ numberOfLines };
 			display: -webkit-box;

package/src/unit-control/index.tsx

@@ -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/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/reduce-motion.js

@@ -3,6 +3,10 @@
  *
  * @param {'transition' | 'animation' | string} [prop='transition'] CSS Property name
  * @return {string} Generated CSS code for the reduced style
+ *
+ * @deprecated Write your own media query instead,
+ * e.g. `@media not ( prefers-reduced-motion ) { ...some animation... }` or
+ * `@media ( prefers-reduced-motion ) { ...reduced animation... }`.
  */
 export function reduceMotion( prop = 'transition' ) {
 	let style;

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 => {

package/src/utils/test/strings.js

@@ -106,5 +106,67 @@ describe( 'normalizeTextString', () => {
 		expect( normalizeTextString( 'foo⸻bar' ) ).toBe( 'foo-bar' );
 		expect( normalizeTextString( 'foo゠bar' ) ).toBe( 'foo-bar' );
 		expect( normalizeTextString( 'foo－bar' ) ).toBe( 'foo-bar' );
+
+		const dashCharacters = [
+			// - (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',
+		];
+		expect( normalizeTextString( dashCharacters.join( '' ) ) ).toBe(
+			'-'.repeat( dashCharacters.length )
+		);
 	} );
 } );

package/src/utils/use-responsive-value.ts

@@ -60,8 +60,9 @@ export function useResponsiveValue< T >(
 	const index = useBreakpointIndex( options );
 
 	// Allow calling the function with a "normal" value without having to check on the outside.
-	if ( ! Array.isArray( values ) && typeof values !== 'function' )
+	if ( ! Array.isArray( values ) && typeof values !== 'function' ) {
 		return values;
+	}
 
 	const array = values || [];
 

package/src/view/component.tsx

@@ -2,13 +2,25 @@
  * External dependencies
  */
 import styled from '@emotion/styled';
-import type { RefAttributes } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import type { WordPressComponent } from '../context/wordpress-component';
-import type { ViewProps } from './types';
+import type { WordPressComponentProps } from '../context';
+
+const PolymorphicDiv = styled.div``;
+
+function UnforwardedView< T extends React.ElementType = 'div' >(
+	{ as, ...restProps }: WordPressComponentProps< {}, T >,
+	ref: React.ForwardedRef< any >
+) {
+	return <PolymorphicDiv as={ as } ref={ ref } { ...restProps } />;
+}
 
 /**
  * `View` is a core component that renders everything in the library.
@@ -26,13 +38,8 @@ import type { ViewProps } from './types';
  * }
  * ```
  */
-export const View: WordPressComponent<
-	'div',
-	ViewProps & RefAttributes< any >,
-	true
-> = styled.div``;
-
-View.selector = '.components-view';
-View.displayName = 'View';
+export const View = Object.assign( forwardRef( UnforwardedView ), {
+	selector: '.components-view',
+} );
 
 export default View;