@wordpress/components 27.3.0 → 27.5.0

package/src/popover/index.tsx

@@ -226,8 +226,9 @@ const UnforwardedPopover = (
 					const { firstElementChild } = refs.floating.current ?? {};
 
 					// Only HTMLElement instances have the `style` property.
-					if ( ! ( firstElementChild instanceof HTMLElement ) )
+					if ( ! ( firstElementChild instanceof HTMLElement ) ) {
 						return;
+					}
 
 					// Reduce the height of the popover to the available space.
 					Object.assign( firstElementChild.style, {

package/src/popover/overlay-middlewares.tsx

@@ -17,7 +17,9 @@ export function overlayMiddlewares() {
 				const { firstElementChild } = elements.floating ?? {};
 
 				// Only HTMLElement instances have the `style` property.
-				if ( ! ( firstElementChild instanceof HTMLElement ) ) return;
+				if ( ! ( firstElementChild instanceof HTMLElement ) ) {
+					return;
+				}
 
 				// Reduce the height of the popover to the available space.
 				Object.assign( firstElementChild.style, {

package/src/popover/stories/index.story.tsx

@@ -7,8 +7,6 @@ import type { StoryFn, Meta } from '@storybook/react';
  * WordPress dependencies
  */
 import { useState, useRef, useEffect } from '@wordpress/element';
-// @ts-expect-error The `@wordpress/block-editor` is not typed
-import { __unstableIframe as Iframe } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies

package/src/progress-bar/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ForwardedRef } from 'react';
+import type { CSSProperties, ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -26,8 +26,14 @@ function UnforwardedProgressBar(
 	return (
 		<ProgressBarStyled.Track className={ className }>
 			<ProgressBarStyled.Indicator
+				style={
+					{
+						'--indicator-width': ! isIndeterminate
+							? `${ value }%`
+							: undefined,
+					} as CSSProperties
+				}
 				isIndeterminate={ isIndeterminate }
-				value={ value }
 			/>
 			<ProgressBarStyled.ProgressElement
 				max={ 100 }

package/src/progress-bar/styles.ts

@@ -42,7 +42,6 @@ export const Track = styled.div`
 
 export const Indicator = styled.div< {
 	isIndeterminate: boolean;
-	value?: number;
 } >`
 	display: inline-block;
 	position: absolute;
@@ -60,7 +59,7 @@ export const Indicator = styled.div< {
 	outline: 2px solid transparent;
 	outline-offset: -2px;
 
-	${ ( { isIndeterminate, value } ) =>
+	${ ( { isIndeterminate } ) =>
 		isIndeterminate
 			? css( {
 					animationDuration: '1.5s',
@@ -70,7 +69,7 @@ export const Indicator = styled.div< {
 					width: `${ INDETERMINATE_TRACK_WIDTH }%`,
 			  } )
 			: css( {
-					width: `${ value }%`,
+					width: 'var(--indicator-width)',
 					transition: 'width 0.4s ease-in-out',
 			  } ) };
 `;

package/src/progress-bar/test/index.tsx

@@ -43,6 +43,9 @@ describe( 'ProgressBar', () => {
 		expect( indicator ).toHaveStyle( {
 			width: `${ INDETERMINATE_TRACK_WIDTH }%`,
 		} );
+		expect( indicator ).not.toHaveStyle( {
+			'--indicator-width': expect.any( String ),
+		} );
 	} );
 
 	it( 'should use `value`% as width for determinate progress bar', () => {
@@ -56,7 +59,7 @@ describe( 'ProgressBar', () => {
 		const indicator = container.firstChild?.firstChild;
 
 		expect( indicator ).toHaveStyle( {
-			width: '55%',
+			'--indicator-width': '55%',
 		} );
 	} );
 

package/src/query-controls/author-select.tsx

@@ -13,7 +13,9 @@ export default function AuthorSelect( {
 	selectedAuthorId,
 	onChange: onChangeProp,
 }: AuthorSelectProps ) {
-	if ( ! authorList ) return null;
+	if ( ! authorList ) {
+		return null;
+	}
 	const termsTree = buildTermsTree( authorList );
 	return (
 		<TreeSelect

package/src/range-control/rail.tsx

@@ -92,7 +92,7 @@ function useMarks( {
 	if ( ! Array.isArray( marks ) ) {
 		marks = [];
 		const count = 1 + Math.round( range / step );
-		while ( count > marks.push( { value: step * marks.length + min } ) );
+		while ( count > marks.push( { value: step * marks.length + min } ) ) {}
 	}
 
 	const placedMarks: RangeMarkProps[] = [];

package/src/range-control/styles/range-control-styles.ts

@@ -8,7 +8,7 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import NumberControl from '../../number-control';
-import { COLORS, reduceMotion, rtl } from '../../utils';
+import { COLORS, rtl } from '../../utils';
 import { space } from '../../utils/space';
 
 import type {
@@ -287,13 +287,15 @@ export const Tooltip = styled.span< TooltipProps >`
 	pointer-events: none;
 	position: absolute;
 	text-align: center;
-	transition: opacity 120ms ease;
 	user-select: none;
 	line-height: 1.4;
 
+	@media not ( prefers-reduced-motion ) {
+		transition: opacity 120ms ease;
+	}
+
 	${ tooltipShow };
 	${ tooltipPosition };
-	${ reduceMotion( 'transition' ) };
 	${ rtl(
 		{ transform: 'translateX(-50%)' },
 		{ transform: 'translateX(50%)' }

package/src/resizable-box/resize-tooltip/index.tsx

@@ -55,7 +55,9 @@ function ResizeTooltip(
 		position,
 	} );
 
-	if ( ! isVisible ) return null;
+	if ( ! isVisible ) {
+		return null;
+	}
 
 	const classes = classnames( 'components-resize-tooltip', className );
 

package/src/resizable-box/resize-tooltip/label.tsx

@@ -41,7 +41,9 @@ function Label(
 	const isBottom = position === POSITIONS.bottom;
 	const isCorner = position === POSITIONS.corner;
 
-	if ( ! showLabel ) return null;
+	if ( ! showLabel ) {
+		return null;
+	}
 
 	let style: React.CSSProperties = {
 		opacity: showLabel ? 1 : undefined,

package/src/resizable-box/resize-tooltip/utils.ts

@@ -90,7 +90,9 @@ export function useResizeLabel( {
 			 * If axis is controlled, we will avoid resetting the moveX and moveY values.
 			 * This will allow for the preferred axis values to persist in the label.
 			 */
-			if ( isAxisControlled ) return;
+			if ( isAxisControlled ) {
+				return;
+			}
 			setMoveX( false );
 			setMoveY( false );
 		};
@@ -109,12 +111,16 @@ export function useResizeLabel( {
 		 */
 		const isRendered = width !== null || height !== null;
 
-		if ( ! isRendered ) return;
+		if ( ! isRendered ) {
+			return;
+		}
 
 		const didWidthChange = width !== widthRef.current;
 		const didHeightChange = height !== heightRef.current;
 
-		if ( ! didWidthChange && ! didHeightChange ) return;
+		if ( ! didWidthChange && ! didHeightChange ) {
+			return;
+		}
 
 		/*
 		 * After the initial render, the useResizeAware will set the first
@@ -194,7 +200,9 @@ function getSizeLabel( {
 	showPx = false,
 	width,
 }: GetSizeLabelArgs ): string | undefined {
-	if ( ! moveX && ! moveY ) return undefined;
+	if ( ! moveX && ! moveY ) {
+		return undefined;
+	}
 
 	/*
 	 * Corner position...

package/src/select-control/index.tsx

@@ -7,7 +7,7 @@ import classNames from 'classnames';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { useState, forwardRef } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,8 +20,6 @@ import type { SelectControlProps } from './types';
 import SelectControlChevronDown from './chevron-down';
 import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 
-const noop = () => {};
-
 function useUniqueId( idProp?: string ) {
 	const instanceId = useInstanceId( SelectControl );
 	const id = `inspector-select-control-${ instanceId }`;
@@ -41,9 +39,7 @@ function UnforwardedSelectControl(
 		id: idProp,
 		label,
 		multiple = false,
-		onBlur = noop,
 		onChange,
-		onFocus = noop,
 		options = [],
 		size = 'default',
 		value: valueProp,
@@ -55,22 +51,13 @@ function UnforwardedSelectControl(
 		__nextHasNoMarginBottom = false,
 		...restProps
 	} = useDeprecated36pxDefaultSizeProp( props );
-	const [ isFocused, setIsFocused ] = useState( false );
 	const id = useUniqueId( idProp );
 	const helpId = help ? `${ id }__help` : undefined;
 
 	// Disable reason: A select with an onchange throws a warning.
-	if ( ! options?.length && ! children ) return null;
-
-	const handleOnBlur = ( event: React.FocusEvent< HTMLSelectElement > ) => {
-		onBlur( event );
-		setIsFocused( false );
-	};
-
-	const handleOnFocus = ( event: React.FocusEvent< HTMLSelectElement > ) => {
-		onFocus( event );
-		setIsFocused( true );
-	};
+	if ( ! options?.length && ! children ) {
+		return null;
+	}
 
 	const handleOnChange = (
 		event: React.ChangeEvent< HTMLSelectElement >
@@ -100,7 +87,6 @@ function UnforwardedSelectControl(
 				disabled={ disabled }
 				hideLabelFromVision={ hideLabelFromVision }
 				id={ id }
-				isFocused={ isFocused }
 				label={ label }
 				size={ size }
 				suffix={
@@ -118,9 +104,7 @@ function UnforwardedSelectControl(
 					disabled={ disabled }
 					id={ id }
 					multiple={ multiple }
-					onBlur={ handleOnBlur }
 					onChange={ handleOnChange }
-					onFocus={ handleOnFocus }
 					ref={ ref }
 					selectSize={ size }
 					value={ valueProp }

package/src/select-control/styles/select-control-styles.ts

@@ -24,7 +24,9 @@ interface SelectProps
 }
 
 const disabledStyles = ( { disabled }: SelectProps ) => {
-	if ( ! disabled ) return '';
+	if ( ! disabled ) {
+		return '';
+	}
 
 	return css( {
 		color: COLORS.ui.textDisabled,

package/src/slot-fill/bubbles-virtually/slot-fill-context.ts

@@ -1,20 +1,18 @@
-/**
- * External dependencies
- */
-import { proxyMap } from 'valtio/utils';
 /**
  * WordPress dependencies
  */
 import { createContext } from '@wordpress/element';
 import warning from '@wordpress/warning';
+import { observableMap } from '@wordpress/compose';
+
 /**
  * Internal dependencies
  */
 import type { SlotFillBubblesVirtuallyContext } from '../types';
 
 const initialContextValue: SlotFillBubblesVirtuallyContext = {
-	slots: proxyMap(),
-	fills: proxyMap(),
+	slots: observableMap(),
+	fills: observableMap(),
 	registerSlot: () => {
 		warning(
 			'Components must be wrapped within `SlotFillProvider`. ' +

package/src/slot-fill/bubbles-virtually/slot-fill-provider.tsx

@@ -1,14 +1,9 @@
-/**
- * External dependencies
- */
-import { ref as valRef } from 'valtio';
-import { proxyMap } from 'valtio/utils';
-
 /**
  * WordPress dependencies
  */
 import { useMemo } from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
+import { observableMap } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -20,8 +15,8 @@ import type {
 } from '../types';
 
 function createSlotRegistry(): SlotFillBubblesVirtuallyContext {
-	const slots: SlotFillBubblesVirtuallyContext[ 'slots' ] = proxyMap();
-	const fills: SlotFillBubblesVirtuallyContext[ 'fills' ] = proxyMap();
+	const slots: SlotFillBubblesVirtuallyContext[ 'slots' ] = observableMap();
+	const fills: SlotFillBubblesVirtuallyContext[ 'fills' ] = observableMap();
 
 	const registerSlot: SlotFillBubblesVirtuallyContext[ 'registerSlot' ] = (
 		name,
@@ -30,14 +25,11 @@ function createSlotRegistry(): SlotFillBubblesVirtuallyContext {
 	) => {
 		const slot = slots.get( name );
 
-		slots.set(
-			name,
-			valRef( {
-				...slot,
-				ref: ref || slot?.ref,
-				fillProps: fillProps || slot?.fillProps || {},
-			} )
-		);
+		slots.set( name, {
+			...slot,
+			ref: ref || slot?.ref,
+			fillProps: fillProps || slot?.fillProps || {},
+		} );
 	};
 
 	const unregisterSlot: SlotFillBubblesVirtuallyContext[ 'unregisterSlot' ] =
@@ -74,7 +66,7 @@ function createSlotRegistry(): SlotFillBubblesVirtuallyContext {
 		name,
 		ref
 	) => {
-		fills.set( name, valRef( [ ...( fills.get( name ) || [] ), ref ] ) );
+		fills.set( name, [ ...( fills.get( name ) || [] ), ref ] );
 	};
 
 	const unregisterFill: SlotFillBubblesVirtuallyContext[ 'registerFill' ] = (
@@ -88,7 +80,7 @@ function createSlotRegistry(): SlotFillBubblesVirtuallyContext {
 
 		fills.set(
 			name,
-			valRef( fillsForName.filter( ( fillRef ) => fillRef !== ref ) )
+			fillsForName.filter( ( fillRef ) => fillRef !== ref )
 		);
 	};
 

package/src/slot-fill/bubbles-virtually/use-slot-fills.ts

@@ -1,12 +1,8 @@
-/**
- * External dependencies
- */
-import { useSnapshot } from 'valtio';
-
 /**
  * WordPress dependencies
  */
 import { useContext } from '@wordpress/element';
+import { useObservableValue } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -16,9 +12,5 @@ import type { SlotKey } from '../types';
 
 export default function useSlotFills( name: SlotKey ) {
 	const registry = useContext( SlotFillContext );
-	const fills = useSnapshot( registry.fills, { sync: true } );
-	// The important bit here is that this call ensures that the hook
-	// only causes a re-render if the "fills" of a given slot name
-	// change, not any fills.
-	return fills.get( name );
+	return useObservableValue( registry.fills, name );
 }

package/src/slot-fill/bubbles-virtually/use-slot.ts

@@ -1,12 +1,8 @@
-/**
- * External dependencies
- */
-import { useSnapshot } from 'valtio';
-
 /**
  * WordPress dependencies
  */
 import { useMemo, useContext } from '@wordpress/element';
+import { useObservableValue } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -21,11 +17,7 @@ import type {
 
 export default function useSlot( name: SlotKey ) {
 	const registry = useContext( SlotFillContext );
-	const slots = useSnapshot( registry.slots, { sync: true } );
-	// The important bit here is that the `useSnapshot` call ensures that the
-	// hook only causes a re-render if the slot with the given name changes,
-	// not any other slot.
-	const slot = slots.get( name );
+	const slot = useObservableValue( registry.slots, name );
 
 	const api = useMemo(
 		() => ( {

package/src/slot-fill/types.ts

@@ -3,6 +3,11 @@
  */
 import type { Component, MutableRefObject, ReactNode, RefObject } from 'react';
 
+/**
+ * WordPress dependencies
+ */
+import type { ObservableMap } from '@wordpress/compose';
+
 export type DistributiveOmit< T, K extends keyof any > = T extends any
 	? Omit< T, K >
 	: never;
@@ -109,14 +114,14 @@ export type SlotFillBubblesVirtuallyFillRef = MutableRefObject< {
 } >;
 
 export type SlotFillBubblesVirtuallyContext = {
-	slots: Map<
+	slots: ObservableMap<
 		SlotKey,
 		{
 			ref: SlotFillBubblesVirtuallySlotRef;
 			fillProps: FillProps;
 		}
 	>;
-	fills: Map< SlotKey, SlotFillBubblesVirtuallyFillRef[] >;
+	fills: ObservableMap< SlotKey, SlotFillBubblesVirtuallyFillRef[] >;
 	registerSlot: (
 		name: SlotKey,
 		ref: SlotFillBubblesVirtuallySlotRef,

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/surface/test/__snapshots__/index.tsx.snap

@@ -8,8 +8,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-surface css-pt58n0-View-Surface-getBorders-primary e19lxcc00"
-+     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+-     class="components-surface css-1bmtyqd-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-1u146xf-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Surface"
     >
@@ -25,8 +25,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-surface css-1vckp4o-View-Surface-getBorders-primary e19lxcc00"
-+     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+-     class="components-surface css-iin9ud-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-1u146xf-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Surface"
     >
@@ -42,8 +42,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-surface css-sw9dzi-View-Surface-getBorders-primary e19lxcc00"
-+     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+-     class="components-surface css-4j30ez-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-1u146xf-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Surface"
     >
@@ -59,8 +59,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-surface css-123k66h-View-Surface-getBorders-primary e19lxcc00"
-+     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+-     class="components-surface css-1v7smm4-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-1u146xf-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Surface"
     >
@@ -94,8 +94,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-surface css-1m2pafr-View-Surface-getBorders-secondary e19lxcc00"
-+     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+-     class="components-surface css-1afnk4j-PolymorphicDiv-Surface-getBorders-secondary e19lxcc00"
++     class="components-surface css-1u146xf-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Surface"
     >

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/get-line-height.ts

@@ -14,9 +14,13 @@ export function getLineHeight(
 	adjustLineHeightForInnerControls: Props[ 'adjustLineHeightForInnerControls' ],
 	lineHeight: CSSProperties[ 'lineHeight' ]
 ) {
-	if ( lineHeight ) return lineHeight;
+	if ( lineHeight ) {
+		return lineHeight;
+	}
 
-	if ( ! adjustLineHeightForInnerControls ) return;
+	if ( ! adjustLineHeightForInnerControls ) {
+		return;
+	}
 
 	let value = `calc(${ CONFIG.controlHeight } + ${ space( 2 ) })`;
 

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