@wordpress/components 27.2.0 → 27.4.0

package/src/snackbar/index.tsx

@@ -168,7 +168,7 @@ function UnforwardedSnackbar(
 				{ explicitDismiss && (
 					<span
 						role="button"
-						aria-label="Dismiss this notice"
+						aria-label={ __( 'Dismiss this notice' ) }
 						tabIndex={ 0 }
 						className="components-snackbar__dismiss-button"
 						onClick={ dismissMe }

package/src/style.scss

@@ -27,6 +27,7 @@
 @import "./dropdown-menu/style.scss";
 @import "./duotone-picker/style.scss";
 @import "./duotone-picker/color-list-picker/style.scss";
+@import "./external-link/style.scss";
 @import "./form-toggle/style.scss";
 @import "./form-token-field/style.scss";
 @import "./guide/style.scss";

package/src/tabs/index.tsx

@@ -153,6 +153,14 @@ function Tabs( {
 		}
 	}, [ isControlled, selectedTab, selectedTabId, setSelectedId ] );
 
+	useEffect( () => {
+		// If there is no active tab, fallback to place focus on the first enabled tab
+		// so there is always an active element
+		if ( selectedTabId === null && ! activeId && firstEnabledTab?.id ) {
+			setActiveId( firstEnabledTab.id );
+		}
+	}, [ selectedTabId, activeId, firstEnabledTab?.id, setActiveId ] );
+
 	useEffect( () => {
 		if ( ! isControlled ) {
 			return;

package/src/tabs/test/index.tsx

@@ -242,6 +242,44 @@ describe( 'Tabs', () => {
 			await press.Tab();
 			expect( alphaButton ).toHaveFocus();
 		} );
+
+		it( 'should focus on the first enabled tab when pressing the Tab key if no tab is selected', async () => {
+			const TABS_WITH_ALPHA_DISABLED = TABS.map( ( tabObj ) =>
+				tabObj.tabId === 'alpha'
+					? {
+							...tabObj,
+							tab: {
+								...tabObj.tab,
+								disabled: true,
+							},
+					  }
+					: tabObj
+			);
+
+			render(
+				<ControlledTabs
+					tabs={ TABS_WITH_ALPHA_DISABLED }
+					selectedTabId={ null }
+				/>
+			);
+
+			await sleep();
+			await press.Tab();
+			expect(
+				await screen.findByRole( 'tab', { name: 'Beta' } )
+			).toHaveFocus();
+
+			await press.ArrowRight();
+			expect(
+				await screen.findByRole( 'tab', { name: 'Gamma' } )
+			).toHaveFocus();
+
+			await press.Tab();
+			await press.ShiftTab();
+			expect(
+				await screen.findByRole( 'tab', { name: 'Gamma' } )
+			).toHaveFocus();
+		} );
 	} );
 
 	describe( 'Tab Attributes', () => {

package/src/text/styles.ts

@@ -12,6 +12,7 @@ export const Text = css`
 	color: ${ COLORS.gray[ 900 ] };
 	line-height: ${ CONFIG.fontLineHeightBase };
 	margin: 0;
+	text-wrap: pretty;
 `;
 
 export const block = css`

package/src/text/test/__snapshots__/index.tsx.snap

@@ -5,13 +5,14 @@ Snapshot Diff:
 - Received styles
 + Base styles
 
-@@ -3,7 +3,8 @@
+@@ -3,8 +3,9 @@
       "color": "#1e1e1e",
       "font-size": "calc((13 / 13) * 13px)",
       "font-weight": "normal",
       "line-height": "1.4",
       "margin": "0",
 +     "text-align": "center",
+      "text-wrap": "pretty",
     },
   ]
 `;
@@ -21,6 +22,7 @@ exports[`Text should render highlighted words with highlightCaseSensitive 1`] =
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
 }
@@ -52,6 +54,7 @@ exports[`Text snapshot tests should render correctly 1`] = `
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
 }

package/src/text-control/style.scss

@@ -14,6 +14,8 @@
 .components-text-control__input[type="number"] {
 	width: 100%;
 	height: $grid-unit-40;
+	// Override input style margin in WP forms.css.
+	margin: 0;
 	@include input-control;
 
 	&.is-next-40px-default-size {

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/toggle-group-control-option-base/component.tsx

@@ -5,12 +5,12 @@ import type { ForwardedRef } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
 // eslint-disable-next-line no-restricted-imports
-import { motion, useReducedMotion } from 'framer-motion';
+import { motion } from 'framer-motion';
 
 /**
  * WordPress dependencies
  */
-import { useInstanceId } from '@wordpress/compose';
+import { useReducedMotion, useInstanceId } from '@wordpress/compose';
 import { useMemo } from '@wordpress/element';
 
 /**

package/src/toolbar/toolbar/style.scss

@@ -89,7 +89,7 @@
 			min-width: $block-toolbar-height;
 		}
 
-		// @todo: We should extract the tabs styles to the tabs component itself
+		// @todo We should extract the tabs styles to the tabs component itself
 		&.components-tab-button {
 			font-weight: 500;
 

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