@wordpress/components 27.3.0 → 27.5.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/drop-zone/index.tsx

@@ -25,6 +25,71 @@ import {
 import type { DropType, DropZoneProps } from './types';
 import type { WordPressComponentProps } from '../context';
 
+const backdrop = {
+	hidden: { opacity: 0 },
+	show: {
+		opacity: 1,
+		transition: {
+			type: 'tween',
+			duration: 0.2,
+			delay: 0,
+			delayChildren: 0.1,
+		},
+	},
+	exit: {
+		opacity: 0,
+		transition: {
+			duration: 0.2,
+			delayChildren: 0,
+		},
+	},
+};
+
+const foreground = {
+	hidden: { opacity: 0, scale: 0.9 },
+	show: {
+		opacity: 1,
+		scale: 1,
+		transition: {
+			duration: 0.1,
+		},
+	},
+	exit: { opacity: 0, scale: 0.9 },
+};
+
+function DropIndicator( { label }: { label?: string } ) {
+	const disableMotion = useReducedMotion();
+	const children = (
+		<motion.div
+			variants={ backdrop }
+			initial={ disableMotion ? 'show' : 'hidden' }
+			animate="show"
+			exit={ disableMotion ? 'show' : 'exit' }
+			className="components-drop-zone__content"
+			// Without this, when this div is shown,
+			// Safari calls a onDropZoneLeave causing a loop because of this bug
+			// https://bugs.webkit.org/show_bug.cgi?id=66547
+			style={ { pointerEvents: 'none' } }
+		>
+			<motion.div variants={ foreground }>
+				<Icon
+					icon={ upload }
+					className="components-drop-zone__content-icon"
+				/>
+				<span className="components-drop-zone__content-text">
+					{ label ? label : __( 'Drop files to upload' ) }
+				</span>
+			</motion.div>
+		</motion.div>
+	);
+
+	if ( disableMotion ) {
+		return children;
+	}
+
+	return <AnimatePresence>{ children }</AnimatePresence>;
+}
+
 /**
  * `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.
  *
@@ -116,67 +181,6 @@ export function DropZoneComponent( {
 			setIsDraggingOverElement( false );
 		},
 	} );
-	const disableMotion = useReducedMotion();
-
-	let children;
-	const backdrop = {
-		hidden: { opacity: 0 },
-		show: {
-			opacity: 1,
-			transition: {
-				type: 'tween',
-				duration: 0.2,
-				delay: 0,
-				delayChildren: 0.1,
-			},
-		},
-		exit: {
-			opacity: 0,
-			transition: {
-				duration: 0.2,
-				delayChildren: 0,
-			},
-		},
-	};
-
-	const foreground = {
-		hidden: { opacity: 0, scale: 0.9 },
-		show: {
-			opacity: 1,
-			scale: 1,
-			transition: {
-				duration: 0.1,
-			},
-		},
-		exit: { opacity: 0, scale: 0.9 },
-	};
-
-	if ( isDraggingOverElement ) {
-		children = (
-			<motion.div
-				variants={ backdrop }
-				initial={ disableMotion ? 'show' : 'hidden' }
-				animate="show"
-				exit={ disableMotion ? 'show' : 'exit' }
-				className="components-drop-zone__content"
-				// Without this, when this div is shown,
-				// Safari calls a onDropZoneLeave causing a loop because of this bug
-				// https://bugs.webkit.org/show_bug.cgi?id=66547
-				style={ { pointerEvents: 'none' } }
-			>
-				<motion.div variants={ foreground }>
-					<Icon
-						icon={ upload }
-						className="components-drop-zone__content-icon"
-					/>
-					<span className="components-drop-zone__content-text">
-						{ label ? label : __( 'Drop files to upload' ) }
-					</span>
-				</motion.div>
-			</motion.div>
-		);
-	}
-
 	const classes = classnames( 'components-drop-zone', className, {
 		'is-active':
 			( isDraggingOverDocument || isDraggingOverElement ) &&
@@ -190,11 +194,7 @@ export function DropZoneComponent( {
 
 	return (
 		<div { ...restProps } ref={ ref } className={ classes }>
-			{ disableMotion ? (
-				children
-			) : (
-				<AnimatePresence>{ children }</AnimatePresence>
-			) }
+			{ isDraggingOverElement && <DropIndicator label={ label } /> }
 		</div>
 	);
 }

package/src/dropdown/styles.ts

@@ -11,7 +11,9 @@ import { space } from '../utils/space';
 import type { DropdownContentWrapperProps } from './types';
 
 const padding = ( { paddingSize = 'small' }: DropdownContentWrapperProps ) => {
-	if ( paddingSize === 'none' ) return;
+	if ( paddingSize === 'none' ) {
+		return;
+	}
 
 	const paddingValues = {
 		small: space( 2 ),

package/src/duotone-picker/utils.ts

@@ -31,7 +31,9 @@ export function getDefaultColors(
 	palette: DuotonePickerProps[ 'colorPalette' ]
 ) {
 	// A default dark and light color are required.
-	if ( ! palette || palette.length < 2 ) return [ '#000', '#fff' ];
+	if ( ! palette || palette.length < 2 ) {
+		return [ '#000', '#fff' ];
+	}
 
 	return palette
 		.map( ( { color } ) => ( {

package/src/elevation/hook.ts

@@ -15,7 +15,7 @@ import { useMemo } from '@wordpress/element';
 import type { WordPressComponentProps } from '../context';
 import { useContextSystem } from '../context';
 import * as styles from './styles';
-import { CONFIG, reduceMotion } from '../utils';
+import { CONFIG } from '../utils';
 import { useCx } from '../utils/hooks/use-cx';
 import { isValueDefined } from '../utils/values';
 import type { ElevationProps } from './types';
@@ -76,9 +76,12 @@ export function useElevation(
 				left: offset,
 				right: offset,
 				top: offset,
-				transition,
 			},
-			reduceMotion( 'transition' )
+			css`
+				@media not ( prefers-reduced-motion ) {
+					transition: ${ transition };
+				}
+			`
 		);
 
 		if ( isValueDefined( hoverValue ) ) {

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

@@ -15,13 +15,12 @@ exports[`props should render active 1`] = `
   left: 0;
   right: 0;
   top: 0;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-0 {
-    transition-duration: 0ms;
+    -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+    transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
   }
 }
 
@@ -57,13 +56,12 @@ exports[`props should render correctly 1`] = `
   left: 0;
   right: 0;
   top: 0;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-0 {
-    transition-duration: 0ms;
+    -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+    transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
   }
 }
 
@@ -91,13 +89,12 @@ exports[`props should render hover 1`] = `
   left: 0;
   right: 0;
   top: 0;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-0 {
-    transition-duration: 0ms;
+    -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+    transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
   }
 }
 
@@ -129,13 +126,12 @@ exports[`props should render isInteractive 1`] = `
   left: 0;
   right: 0;
   top: 0;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-0 {
-    transition-duration: 0ms;
+    -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+    transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
   }
 }
 
@@ -171,13 +167,12 @@ exports[`props should render offset 1`] = `
   left: -2px;
   right: -2px;
   top: -2px;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-0 {
-    transition-duration: 0ms;
+    -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+    transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
   }
 }
 
@@ -213,13 +208,12 @@ exports[`props should render value 1`] = `
   left: 0;
   right: 0;
   top: 0;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-0 {
-    transition-duration: 0ms;
+    -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+    transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
   }
 }
 

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

@@ -7,25 +7,25 @@ Snapshot Diff:
 
 @@ -1,22 +1,18 @@
   <div
-    class="components-flex css-j6raph-View-Flex-base-ItemsRow e19lxcc00"
+    class="components-flex css-1hwd9hm-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
 -   data-testid="flex"
 +   data-testid="base-flex"
     data-wp-c16t="true"
     data-wp-component="Flex"
   >
     <div
-      class="components-flex-item css-mw3lhz-View-Item-sx-Base e19lxcc00"
+      class="components-flex-item css-eno349-PolymorphicDiv-Item-sx-Base e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="FlexItem"
     >
       Item
     </div>
 -   <div
--     class="css-1mm2cvy-View e19lxcc00"
+-     class="css-161q9d5-PolymorphicDiv e19lxcc00"
 -   />
 -   <div />
     <div
-      class="components-flex-item components-flex-block css-14wzr73-View-Item-sx-Base-block e19lxcc00"
+      class="components-flex-item components-flex-block css-10m3u8l-PolymorphicDiv-Item-sx-Base-block e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="FlexBlock"
     >

package/src/focal-point-picker/controls.tsx

@@ -38,7 +38,9 @@ export default function FocalPointPickerControls( {
 		value: Parameters< UnitControlOnChangeCallback >[ 0 ],
 		axis: FocalPointAxis
 	) => {
-		if ( value === undefined ) return;
+		if ( value === undefined ) {
+			return;
+		}
 
 		const num = parseInt( value, 10 );
 

package/src/focal-point-picker/index.tsx

@@ -111,7 +111,9 @@ export function FocalPointPicker( {
 
 			// `value` can technically be undefined if getValueWithinDragArea() is
 			// called before dragAreaRef is set, but this shouldn't happen in reality.
-			if ( ! value ) return;
+			if ( ! value ) {
+				return;
+			}
 
 			onDragStart?.( value, event );
 			setPoint( value );
@@ -120,7 +122,9 @@ export function FocalPointPicker( {
 			// Prevents text-selection when dragging.
 			event.preventDefault();
 			const value = getValueWithinDragArea( event );
-			if ( ! value ) return;
+			if ( ! value ) {
+				return;
+			}
 			onDrag?.( value, event );
 			setPoint( value );
 		},
@@ -136,7 +140,9 @@ export function FocalPointPicker( {
 	const dragAreaRef = useRef< HTMLDivElement >( null );
 	const [ bounds, setBounds ] = useState( INITIAL_BOUNDS );
 	const refUpdateBounds = useRef( () => {
-		if ( ! dragAreaRef.current ) return;
+		if ( ! dragAreaRef.current ) {
+			return;
+		}
 
 		const { clientWidth: width, clientHeight: height } =
 			dragAreaRef.current;
@@ -150,7 +156,9 @@ export function FocalPointPicker( {
 
 	useEffect( () => {
 		const updateBounds = refUpdateBounds.current;
-		if ( ! dragAreaRef.current ) return;
+		if ( ! dragAreaRef.current ) {
+			return;
+		}
 
 		const { defaultView } = dragAreaRef.current.ownerDocument;
 		defaultView?.addEventListener( 'resize', updateBounds );
@@ -171,7 +179,9 @@ export function FocalPointPicker( {
 		clientY: number;
 		shiftKey: boolean;
 	} ) => {
-		if ( ! dragAreaRef.current ) return;
+		if ( ! dragAreaRef.current ) {
+			return;
+		}
 
 		const { top, left } = dragAreaRef.current.getBoundingClientRect();
 		let nextX = ( clientX - left ) / bounds.width;
@@ -203,8 +213,9 @@ export function FocalPointPicker( {
 			! [ 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight' ].includes(
 				code
 			)
-		)
+		) {
 			return;
+		}
 
 		event.preventDefault();
 		const value = { x, y };
@@ -253,7 +264,9 @@ export function FocalPointPicker( {
 					onKeyDown={ arrowKeyStep }
 					onMouseDown={ startDrag }
 					onBlur={ () => {
-						if ( isDragging ) endDrag();
+						if ( isDragging ) {
+							endDrag();
+						}
 					} }
 					ref={ dragAreaRef }
 					role="button"

package/src/focal-point-picker/styles/focal-point-picker-style.ts

@@ -9,7 +9,7 @@ import styled from '@emotion/styled';
  */
 import { Flex } from '../../flex';
 import UnitControl from '../../unit-control';
-import { COLORS, CONFIG, reduceMotion } from '../../utils';
+import { COLORS, CONFIG } from '../../utils';
 import type { FocalPointPickerControlsProps } from '../types';
 import { INITIAL_BOUNDS } from '../utils';
 
@@ -106,10 +106,11 @@ export const GridView = styled.div`
 	position: absolute;
 	top: 50%;
 	transform: translate3d( -50%, -50%, 0 );
-	transition: opacity 100ms linear;
 	z-index: 1;
 
-	${ reduceMotion( 'transition' ) }
+	@media not ( prefers-reduced-motion ) {
+		transition: opacity 100ms linear;
+	}
 
 	opacity: ${ ( { showOverlay }: { showOverlay?: boolean } ) =>
 		showOverlay ? 1 : 0 };