@wordpress/components 27.4.0 → 27.5.0

package/src/checkbox-control/test/__snapshots__/index.tsx.snap

@@ -5,32 +5,33 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -8,13 +8,27 @@
-        <span
-          class="components-checkbox-control__input-container"
-        >
-          <input
-            class="components-checkbox-control__input"
--           id="inspector-checkbox-control-6"
-+           id="inspector-checkbox-control-7"
-            type="checkbox"
-            value="1"
-+         />
-+         <svg
-+           aria-hidden="true"
-+           class="components-checkbox-control__indeterminate"
-+           focusable="false"
-+           height="24"
-+           role="presentation"
-+           viewBox="0 0 24 24"
-+           width="24"
-+           xmlns="http://www.w3.org/2000/svg"
-+         >
-+           <path
-+             d="M7 11.5h10V13H7z"
-            />
-+         </svg>
-        </span>
+@@ -13,14 +13,28 @@
+          <span
+            class="components-checkbox-control__input-container"
+          >
+            <input
+              class="components-checkbox-control__input"
+-             id="inspector-checkbox-control-6"
++             id="inspector-checkbox-control-7"
+              type="checkbox"
+              value="1"
++           />
++           <svg
++             aria-hidden="true"
++             class="components-checkbox-control__indeterminate"
++             focusable="false"
++             height="24"
++             role="presentation"
++             viewBox="0 0 24 24"
++             width="24"
++             xmlns="http://www.w3.org/2000/svg"
++           >
++             <path
++               d="M7 11.5h10V13H7z"
+              />
++           </svg>
+          </span>
+        </div>
       </div>
     </div>
   </div>

package/src/checkbox-control/test/index.tsx

@@ -86,6 +86,11 @@ describe( 'CheckboxControl', () => {
 				containerIndeterminate
 			);
 		} );
+
+		it( 'should associate the `help` text accessibly', () => {
+			render( <CheckboxControl help="Help text" /> );
+			expect( getInput() ).toHaveAccessibleDescription( 'Help text' );
+		} );
 	} );
 
 	describe( 'Value', () => {

package/src/color-picker/hex-input.tsx

@@ -21,7 +21,9 @@ import type { HexInputProps } from './types';
 
 export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 	const handleChange = ( nextValue: string | undefined ) => {
-		if ( ! nextValue ) return;
+		if ( ! nextValue ) {
+			return;
+		}
 		const hexValue = nextValue.startsWith( '#' )
 			? nextValue
 			: '#' + nextValue;

package/src/color-picker/hue-picker.native.js

@@ -72,8 +72,12 @@ export default class HuePicker extends Component {
 	}
 
 	normalizeValue( value ) {
-		if ( value < 0 ) return 0;
-		if ( value > 1 ) return 1;
+		if ( value < 0 ) {
+			return 0;
+		}
+		if ( value > 1 ) {
+			return 1;
+		}
 		return value;
 	}
 

package/src/color-picker/index.native.js

@@ -82,9 +82,15 @@ function ColorPicker( {
 	const currentColor = combineToHex();
 
 	const updateColor = ( { hue: h, saturation: s, value: v } ) => {
-		if ( h !== undefined ) setHue( h );
-		if ( s !== undefined ) setSaturation( s );
-		if ( v !== undefined ) setValue( v );
+		if ( h !== undefined ) {
+			setHue( h );
+		}
+		if ( s !== undefined ) {
+			setSaturation( s );
+		}
+		if ( v !== undefined ) {
+			setValue( v );
+		}
 		setColor( combineToHex( h, s, v ) );
 	};
 

package/src/color-picker/saturation-picker.native.js

@@ -56,8 +56,12 @@ export default class SaturationValuePicker extends Component {
 	}
 
 	normalizeValue( value ) {
-		if ( value < 0 ) return 0;
-		if ( value > 1 ) return 1;
+		if ( value < 0 ) {
+			return 0;
+		}
+		if ( value > 1 ) {
+			return 1;
+		}
 		return value;
 	}
 

package/src/color-picker/use-deprecated-props.ts

@@ -25,11 +25,17 @@ function isLegacyProps( props: any ): props is LegacyProps {
 function getColorFromLegacyProps(
 	color: LegacyProps[ 'color' ]
 ): string | undefined {
-	if ( color === undefined ) return;
+	if ( color === undefined ) {
+		return;
+	}
 
-	if ( typeof color === 'string' ) return color;
+	if ( typeof color === 'string' ) {
+		return color;
+	}
 
-	if ( color.hex ) return color.hex;
+	if ( color.hex ) {
+		return color.hex;
+	}
 
 	return undefined;
 }

package/src/context/context-connect.ts

@@ -116,7 +116,9 @@ function _contextConnect<
 export function getConnectNamespace(
 	Component: ReactChild | undefined | {}
 ): string[] {
-	if ( ! Component ) return [];
+	if ( ! Component ) {
+		return [];
+	}
 
 	let namespaces = [];
 
@@ -145,7 +147,9 @@ export function hasConnectNamespace(
 	Component: ReactNode,
 	match: string[] | string
 ): boolean {
-	if ( ! Component ) return false;
+	if ( ! Component ) {
+		return false;
+	}
 
 	if ( typeof match === 'string' ) {
 		return getConnectNamespace( Component ).includes( match );

package/src/custom-select-control-v2/README.md

@@ -1,9 +1,5 @@
 # CustomSelectControlV2
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
 Used to render a customizable select control component.
 
 ## Development guidelines

package/src/custom-select-control-v2/legacy-component/index.tsx

@@ -30,7 +30,9 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 	// Forward props + store from v2 implementation
 	const store = Ariakit.useSelectStore( {
 		async setValue( nextValue ) {
-			if ( ! onChange ) return;
+			if ( ! onChange ) {
+				return;
+			}
 
 			// Executes the logic in a microtask after the popup is closed.
 			// This is simply to ensure the isOpen state matches that in Downshift.

package/src/custom-select-control-v2/stories/default.story.tsx

@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 import CustomSelectControlV2 from '..';
 
 const meta: Meta< typeof CustomSelectControlV2 > = {
-	title: 'Components (Experimental)/CustomSelectControl v2/Default',
+	title: 'Components/CustomSelectControl v2/Default',
 	component: CustomSelectControlV2,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170

package/src/custom-select-control-v2/stories/legacy.story.tsx

@@ -15,7 +15,7 @@ import CustomSelectControl from '../legacy-component';
 import * as V1Story from '../../custom-select-control/stories/index.story';
 
 const meta: Meta< typeof CustomSelectControl > = {
-	title: 'Components (Experimental)/CustomSelectControl v2/Legacy',
+	title: 'Components/CustomSelectControl v2/Legacy',
 	component: CustomSelectControl,
 	argTypes: {
 		onChange: { control: { type: null } },

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