@wordpress/components 27.4.0 → 27.6.0

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

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" },