@wordpress/components 27.4.0 → 27.5.0

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/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/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/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;

package/tsconfig.json

@@ -12,8 +12,7 @@
 		],
 		// TODO: Remove `skipLibCheck` after resolving duplicate declaration of the `process` variable
 		// between `@types/webpack-env` (from @storybook packages) and `gutenberg-env`.
-		"skipLibCheck": true,
-		"strictNullChecks": true
+		"skipLibCheck": true
 	},
 	"references": [
 		{ "path": "../a11y" },