@wordpress/components 27.3.0 → 27.4.0

package/src/dimension-control/test/__snapshots__/index.test.js.snap

@@ -47,6 +47,17 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   min-height: 0;
 }
 
+.emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) {
+  z-index: 1;
+}
+
+.emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) .emotion-25 {
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
 .emotion-8 {
   display: block;
   max-height: 100%;
@@ -61,6 +72,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
 }
@@ -165,7 +177,10 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
 
 .emotion-24.emotion-24.emotion-24 {
   box-sizing: border-box;
+  border-color: var(--wp-components-color-gray-600, #949494);
   border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
   bottom: 0;
   left: 0;
   margin: 0;
@@ -174,9 +189,6 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   position: absolute;
   right: 0;
   top: 0;
-  border-color: var(--wp-components-color-gray-600, #949494);
-  border-style: solid;
-  border-width: 1px;
   padding-left: 2px;
 }
 
@@ -318,6 +330,17 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   min-height: 0;
 }
 
+.emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) {
+  z-index: 1;
+}
+
+.emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) .emotion-25 {
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
 .emotion-8 {
   display: block;
   max-height: 100%;
@@ -332,6 +355,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
 }
@@ -436,7 +460,10 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
 
 .emotion-24.emotion-24.emotion-24 {
   box-sizing: border-box;
+  border-color: var(--wp-components-color-gray-600, #949494);
   border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
   bottom: 0;
   left: 0;
   margin: 0;
@@ -445,9 +472,6 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   position: absolute;
   right: 0;
   top: 0;
-  border-color: var(--wp-components-color-gray-600, #949494);
-  border-style: solid;
-  border-width: 1px;
   padding-left: 2px;
 }
 
@@ -599,6 +623,17 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   min-height: 0;
 }
 
+.emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) {
+  z-index: 1;
+}
+
+.emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) .emotion-25 {
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
 .emotion-8 {
   display: block;
   max-height: 100%;
@@ -613,6 +648,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
 }
@@ -717,7 +753,10 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
 
 .emotion-24.emotion-24.emotion-24 {
   box-sizing: border-box;
+  border-color: var(--wp-components-color-gray-600, #949494);
   border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
   bottom: 0;
   left: 0;
   margin: 0;
@@ -726,9 +765,6 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   position: absolute;
   right: 0;
   top: 0;
-  border-color: var(--wp-components-color-gray-600, #949494);
-  border-style: solid;
-  border-width: 1px;
   padding-left: 2px;
 }
 
@@ -892,6 +928,17 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   min-height: 0;
 }
 
+.emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) {
+  z-index: 1;
+}
+
+.emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) .emotion-25 {
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
 .emotion-8 {
   display: block;
   max-height: 100%;
@@ -906,6 +953,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
 }
@@ -1010,7 +1058,10 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
 
 .emotion-24.emotion-24.emotion-24 {
   box-sizing: border-box;
+  border-color: var(--wp-components-color-gray-600, #949494);
   border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
   bottom: 0;
   left: 0;
   margin: 0;
@@ -1019,9 +1070,6 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   position: absolute;
   right: 0;
   top: 0;
-  border-color: var(--wp-components-color-gray-600, #949494);
-  border-style: solid;
-  border-width: 1px;
   padding-left: 2px;
 }
 

package/src/external-link/index.tsx

@@ -9,13 +9,10 @@ import type { ForwardedRef } from 'react';
  */
 import { __ } from '@wordpress/i18n';
 import { forwardRef } from '@wordpress/element';
-import { external } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { VisuallyHidden } from '../visually-hidden';
-import { StyledIcon } from './styles/external-link-styles';
 import type { ExternalLinkProps } from './types';
 import type { WordPressComponentProps } from '../context';
 
@@ -66,17 +63,18 @@ function UnforwardedExternalLink(
 			rel={ optimizedRel }
 			ref={ ref }
 		>
-			{ children }
-			<VisuallyHidden as="span">
-				{
+			<span className="components-external-link__contents">
+				{ children }
+			</span>
+			<span
+				className="components-external-link__icon"
+				aria-label={
 					/* translators: accessibility text */
 					__( '(opens in a new tab)' )
 				}
-			</VisuallyHidden>
-			<StyledIcon
-				icon={ external }
-				className="components-external-link__icon"
-			/>
+			>
+				&#8599;
+			</span>
 		</a>
 		/* eslint-enable react/jsx-no-target-blank */
 	);

package/src/external-link/style.scss

@@ -0,0 +1,12 @@
+.components-external-link {
+	text-decoration: none;
+}
+
+.components-external-link__contents {
+	text-decoration: underline;
+}
+
+.components-external-link__icon {
+	margin-left: 0.5ch;
+	font-weight: 400;
+}

package/src/form-toggle/index.tsx

@@ -2,6 +2,12 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -31,7 +37,8 @@ export const noop = () => {};
  * ```
  */
 export function FormToggle(
-	props: WordPressComponentProps< FormToggleProps, 'input', false >
+	props: WordPressComponentProps< FormToggleProps, 'input', false >,
+	ref: ForwardedRef< HTMLInputElement >
 ) {
 	const {
 		className,
@@ -56,6 +63,7 @@ export function FormToggle(
 				onChange={ onChange }
 				disabled={ disabled }
 				{ ...additionalProps }
+				ref={ ref }
 			/>
 			<span className="components-form-toggle__track"></span>
 			<span className="components-form-toggle__thumb"></span>
@@ -63,4 +71,4 @@ export function FormToggle(
 	);
 }
 
-export default FormToggle;
+export default forwardRef( FormToggle );

package/src/form-toggle/stories/index.story.tsx

@@ -11,7 +11,7 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { FormToggle } from '..';
+import FormToggle from '..';
 
 const meta: Meta< typeof FormToggle > = {
 	component: FormToggle,

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

@@ -5,6 +5,7 @@ exports[`props should render correctly 1`] = `
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: pretty;
   color: #1e1e1e;
   font-size: calc(1.95 * 13px);
   font-weight: 600;
@@ -25,6 +26,7 @@ Snapshot Diff:
 - Received styles
 + Base styles
 
+@@ -1,10 +1,10 @@
   Array [
     Object {
       "color": "#1e1e1e",
@@ -34,8 +36,8 @@ Snapshot Diff:
       "font-weight": "600",
       "line-height": "1.4",
       "margin": "0",
+      "text-wrap": "pretty",
     },
-  ]
 `;
 
 exports[`props should render level as a string 1`] = `
@@ -43,6 +45,7 @@ Snapshot Diff:
 - Received styles
 + Base styles
 
+@@ -1,10 +1,10 @@
   Array [
     Object {
       "color": "#1e1e1e",
@@ -52,6 +55,6 @@ Snapshot Diff:
       "font-weight": "600",
       "line-height": "1.4",
       "margin": "0",
+      "text-wrap": "pretty",
     },
-  ]
 `;

package/src/input-control/backdrop.tsx

@@ -7,18 +7,13 @@ import { memo } from '@wordpress/element';
  */
 import { BackdropUI } from './styles/input-control-styles';
 
-function Backdrop( {
-	disabled = false,
-	isBorderless = false,
-	isFocused = false,
-} ) {
+function Backdrop( { disabled = false, isBorderless = false } ) {
 	return (
 		<BackdropUI
 			aria-hidden="true"
 			className="components-input-control__backdrop"
 			disabled={ disabled }
 			isBorderless={ isBorderless }
-			isFocused={ isFocused }
 		/>
 	);
 }

package/src/input-control/index.tsx

@@ -8,7 +8,7 @@ import type { ForwardedRef } from 'react';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { useState, forwardRef } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -57,8 +57,6 @@ export function UnforwardedInputControl(
 		...restProps
 	} = useDeprecated36pxDefaultSizeProp< InputControlProps >( props );
 
-	const [ isFocused, setIsFocused ] = useState( false );
-
 	const id = useUniqueId( idProp );
 	const classes = classNames( 'components-input-control', className );
 
@@ -87,7 +85,6 @@ export function UnforwardedInputControl(
 				gap={ 3 }
 				hideLabelFromVision={ hideLabelFromVision }
 				id={ id }
-				isFocused={ isFocused }
 				justify="left"
 				label={ label }
 				labelPosition={ labelPosition }
@@ -103,14 +100,12 @@ export function UnforwardedInputControl(
 					className="components-input-control__input"
 					disabled={ disabled }
 					id={ id }
-					isFocused={ isFocused }
 					isPressEnterToChange={ isPressEnterToChange }
 					onKeyDown={ onKeyDown }
 					onValidate={ onValidate }
 					paddingInlineStart={ prefix ? space( 2 ) : undefined }
 					paddingInlineEnd={ suffix ? space( 2 ) : undefined }
 					ref={ ref }
-					setIsFocused={ setIsFocused }
 					size={ size }
 					stateReducer={ stateReducer }
 					{ ...draftHookProps }

package/src/input-control/input-base.tsx

@@ -78,7 +78,6 @@ export function InputBase(
 		labelPosition,
 		id: idProp,
 		isBorderless = false,
-		isFocused = false,
 		label,
 		prefix,
 		size = 'default',
@@ -109,8 +108,6 @@ export function InputBase(
 			{ ...getUIFlexProps( labelPosition ) }
 			className={ className }
 			gap={ 2 }
-			isFocused={ isFocused }
-			labelPosition={ labelPosition }
 			ref={ ref }
 		>
 			<Label
@@ -141,11 +138,7 @@ export function InputBase(
 						</Suffix>
 					) }
 				</ContextSystemProvider>
-				<Backdrop
-					disabled={ disabled }
-					isBorderless={ isBorderless }
-					isFocused={ isFocused }
-				/>
+				<Backdrop disabled={ disabled } isBorderless={ isBorderless } />
 			</Container>
 		</Root>
 	);

package/src/input-control/input-field.tsx

@@ -35,18 +35,15 @@ function InputField(
 		dragThreshold = 10,
 		id,
 		isDragEnabled = false,
-		isFocused,
 		isPressEnterToChange = false,
 		onBlur = noop,
 		onChange = noop,
 		onDrag = noop,
 		onDragEnd = noop,
 		onDragStart = noop,
-		onFocus = noop,
 		onKeyDown = noop,
 		onValidate = noop,
 		size = 'default',
-		setIsFocused,
 		stateReducer = ( state: any ) => state,
 		value: valueProp,
 		type,
@@ -85,7 +82,6 @@ function InputField(
 
 	const handleOnBlur = ( event: FocusEvent< HTMLInputElement > ) => {
 		onBlur( event );
-		setIsFocused?.( false );
 
 		/**
 		 * If isPressEnterToChange is set, this commits the value to
@@ -97,11 +93,6 @@ function InputField(
 		}
 	};
 
-	const handleOnFocus = ( event: FocusEvent< HTMLInputElement > ) => {
-		onFocus( event );
-		setIsFocused?.( true );
-	};
-
 	const handleOnChange = ( event: ChangeEvent< HTMLInputElement > ) => {
 		const nextValue = event.target.value;
 		change( nextValue, event );
@@ -222,7 +213,6 @@ function InputField(
 			id={ id }
 			onBlur={ handleOnBlur }
 			onChange={ handleOnChange }
-			onFocus={ handleOnFocus }
 			onKeyDown={ withIgnoreIMEEvents( handleOnKeyDown ) }
 			onMouseDown={ handleOnMouseDown }
 			ref={ ref }

package/src/input-control/styles/input-control-styles.tsx

@@ -23,23 +23,76 @@ type ContainerProps = {
 	labelPosition?: LabelPosition;
 };
 
-type RootProps = {
-	isFocused?: boolean;
-	labelPosition?: LabelPosition;
+export const Prefix = styled.span`
+	box-sizing: border-box;
+	display: block;
+`;
+
+export const Suffix = styled.span`
+	align-items: center;
+	align-self: stretch;
+	box-sizing: border-box;
+	display: flex;
+`;
+
+type BackdropProps = {
+	disabled?: boolean;
+	isBorderless?: boolean;
 };
 
-const rootFocusedStyles = ( { isFocused }: RootProps ) => {
-	if ( ! isFocused ) return '';
+const backdropBorderColor = ( {
+	disabled,
+	isBorderless,
+}: BackdropProps ): CSSProperties[ 'borderColor' ] => {
+	if ( isBorderless ) {
+		return 'transparent';
+	}
 
-	return css( { zIndex: 1 } );
+	if ( disabled ) {
+		return COLORS.ui.borderDisabled;
+	}
+
+	return COLORS.ui.border;
 };
 
-export const Root = styled( Flex )< RootProps >`
+export const BackdropUI = styled.div< BackdropProps >`
+	&&& {
+		box-sizing: border-box;
+		border-color: ${ backdropBorderColor };
+		border-radius: inherit;
+		border-style: solid;
+		border-width: 1px;
+		bottom: 0;
+		left: 0;
+		margin: 0;
+		padding: 0;
+		pointer-events: none;
+		position: absolute;
+		right: 0;
+		top: 0;
+
+		${ rtl( { paddingLeft: 2 } ) }
+	}
+`;
+
+export const Root = styled( Flex )`
 	box-sizing: border-box;
 	position: relative;
 	border-radius: 2px;
 	padding-top: 0;
-	${ rootFocusedStyles }
+
+	// Focus within, excluding cases where auxiliary controls in prefix or suffix have focus.
+	&:focus-within:not( :has( :is( ${ Prefix }, ${ Suffix } ):focus-within ) ) {
+		z-index: 1;
+
+		${ BackdropUI } {
+			border-color: ${ COLORS.ui.borderFocus };
+			box-shadow: ${ CONFIG.controlBoxShadowFocus };
+			// Windows High Contrast mode will show this outline, but not the box-shadow.
+			outline: 2px solid transparent;
+			outline-offset: -2px;
+		}
+	}
 `;
 
 const containerDisabledStyles = ( { disabled }: ContainerProps ) => {
@@ -260,72 +313,3 @@ export const Label = (
 export const LabelWrapper = styled( FlexItem )`
 	max-width: calc( 100% - 10px );
 `;
-
-type BackdropProps = {
-	disabled?: boolean;
-	isBorderless?: boolean;
-	isFocused?: boolean;
-};
-
-const backdropFocusedStyles = ( {
-	disabled,
-	isBorderless,
-	isFocused,
-}: BackdropProps ): SerializedStyles => {
-	let borderColor = isBorderless ? 'transparent' : COLORS.ui.border;
-
-	let boxShadow;
-	let outline;
-	let outlineOffset;
-
-	if ( isFocused ) {
-		borderColor = COLORS.ui.borderFocus;
-		boxShadow = CONFIG.controlBoxShadowFocus;
-		// Windows High Contrast mode will show this outline, but not the box-shadow.
-		outline = `2px solid transparent`;
-		outlineOffset = `-2px`;
-	}
-
-	if ( disabled ) {
-		borderColor = isBorderless ? 'transparent' : COLORS.ui.borderDisabled;
-	}
-
-	return css( {
-		boxShadow,
-		borderColor,
-		borderStyle: 'solid',
-		borderWidth: 1,
-		outline,
-		outlineOffset,
-	} );
-};
-
-export const BackdropUI = styled.div< BackdropProps >`
-	&&& {
-		box-sizing: border-box;
-		border-radius: inherit;
-		bottom: 0;
-		left: 0;
-		margin: 0;
-		padding: 0;
-		pointer-events: none;
-		position: absolute;
-		right: 0;
-		top: 0;
-
-		${ backdropFocusedStyles }
-		${ rtl( { paddingLeft: 2 } ) }
-	}
-`;
-
-export const Prefix = styled.span`
-	box-sizing: border-box;
-	display: block;
-`;
-
-export const Suffix = styled.span`
-	align-items: center;
-	align-self: stretch;
-	box-sizing: border-box;
-	display: flex;
-`;

package/src/input-control/types.ts

@@ -46,14 +46,6 @@ interface BaseProps {
 	 * @default false
 	 */
 	hideLabelFromVision?: boolean;
-	/**
-	 * Whether the component should be in a focused state.
-	 * Used to coordinate focus states when the actual focused element and the component handling
-	 * visual focus are separate.
-	 *
-	 * @default false
-	 */
-	isFocused: boolean;
 	/**
 	 * The position of the label.
 	 *
@@ -111,7 +103,6 @@ export interface InputFieldProps
 	) => void;
 	paddingInlineStart?: CSSProperties[ 'paddingInlineStart' ];
 	paddingInlineEnd?: CSSProperties[ 'paddingInlineEnd' ];
-	setIsFocused: ( isFocused: boolean ) => void;
 	stateReducer?: StateReducer;
 	/**
 	 * The current value of the input.
@@ -187,7 +178,7 @@ export interface InputBaseProps extends BaseProps, FlexProps {
 export interface InputControlProps
 	extends Omit<
 			InputBaseProps,
-			'children' | 'isBorderless' | 'isFocused' | keyof FlexProps
+			'children' | 'isBorderless' | keyof FlexProps
 		>,
 		Pick< BaseControlProps, 'help' >,
 		/**
@@ -197,15 +188,13 @@ export interface InputControlProps
 		 * be the only prefix prop. Otherwise it tries to do a union of the two prefix properties and you end up
 		 * with an unresolvable type.
 		 *
-		 * `isFocused`, `setIsFocused`, `paddingInlineStart`, and `paddingInlineEnd` are managed internally by
+		 * `paddingInlineStart`, and `paddingInlineEnd` are managed internally by
 		 * the InputControl, but the rest of the props for InputField are passed through.
 		 */
 		Omit<
 			WordPressComponentProps< InputFieldProps, 'input', false >,
 			| 'stateReducer'
 			| 'prefix'
-			| 'isFocused'
-			| 'setIsFocused'
 			| 'paddingInlineStart'
 			| 'paddingInlineEnd'
 		> {

package/src/mobile/bottom-sheet-select-control/index.native.js

@@ -16,6 +16,10 @@ import { BottomSheet } from '@wordpress/components';
  */
 import styles from './style.scss';
 
+const EMPTY_OPTION = {
+	label: '',
+};
+
 const BottomSheetSelectControl = ( {
 	label,
 	icon,
@@ -34,9 +38,9 @@ const BottomSheetSelectControl = ( {
 		};
 	};
 
-	const selectedOption = items.find(
-		( option ) => option.value === selectedValue
-	);
+	const selectedOption =
+		items.find( ( option ) => option.value === selectedValue ) ??
+		EMPTY_OPTION;
 
 	const goBack = () => {
 		setShowSubSheet( false );

package/src/navigation/README.md

@@ -1,5 +1,9 @@
 # Navigation
 
+<div class="callout callout-alert">
+This component is deprecated. Consider using `Navigator` instead.
+</div>
+
 <div class="callout callout-alert">
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>