@wordpress/components 27.4.0 → 27.5.0

package/src/panel/body.tsx

@@ -109,7 +109,9 @@ const PanelBodyTitle = forwardRef(
 		}: WordPressComponentProps< PanelBodyTitleProps, 'button' >,
 		ref: React.ForwardedRef< any >
 	) => {
-		if ( ! title ) return null;
+		if ( ! title ) {
+			return null;
+		}
 
 		return (
 			<h2 className="components-panel__body-title">

package/src/panel/style.scss

@@ -32,6 +32,7 @@
 
 .components-panel__header {
 	display: flex;
+	flex-shrink: 0;
 	justify-content: space-between;
 	align-items: center;
 	padding: 0 $grid-unit-20;

package/src/placeholder/style.scss

@@ -3,7 +3,7 @@
 	font-size: $default-font-size;
 	box-sizing: border-box;
 	position: relative;
-	padding: 1em;
+	padding: $grid-unit-30;
 	width: 100%;
 	text-align: left;
 	margin: 0;
@@ -11,6 +11,7 @@
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
+	gap: $grid-unit-20;
 
 	// Some editor styles unset this.
 	-moz-font-smoothing: subpixel-antialiased;
@@ -38,15 +39,14 @@
 }
 
 .components-placeholder__label {
-	display: flex;
 	font-weight: 600;
-	margin-bottom: $grid-unit-20;
 	align-items: center;
+	display: flex;
 
 	> svg,
 	.dashicon,
 	.block-editor-block-icon {
-		margin-right: $grid-unit-15;
+		margin-right: $grid-unit-05;
 		fill: currentColor;
 		// Optimizate for high contrast modes.
 		// See also https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/.
@@ -67,6 +67,8 @@
 	flex-direction: row;
 	width: 100%;
 	flex-wrap: wrap;
+	gap: $grid-unit-15;
+	justify-content: flex-start;
 
 	p {
 		font-family: $default-font;
@@ -85,24 +87,11 @@
 	flex: 1 1 auto;
 }
 
-.components-placeholder__instructions {
-	margin-bottom: 1em;
-}
-
 .components-placeholder__error {
-	margin-top: 1em;
 	width: 100%;
+	gap: $grid-unit-10;
 }
 
-.components-placeholder__fieldset .components-button {
-	margin-right: $grid-unit-15;
-	margin-bottom: $grid-unit-15; // If buttons wrap we need vertical space between.
-
-	&:last-child {
-		margin-bottom: 0;
-		margin-right: 0;
-	}
-}
 
 // Any `<Button />` component with `variant="link"` prop will need extra spacing if placed
 // immediately after a button which is *not* an `variant="link"` style button. This is because
@@ -119,14 +108,6 @@
 
 // Element queries to show different layouts at various sizes.
 .components-placeholder {
-	// Medium and large sizes.
-	&.is-large {
-		.components-placeholder__label {
-			font-size: 18pt;
-			font-weight: normal;
-		}
-	}
-
 	// Medium and small sizes.
 	&.is-medium,
 	&.is-small {
@@ -139,16 +120,15 @@
 			flex-direction: column;
 		}
 
-		.components-placeholder__fieldset .components-button {
-			margin-right: auto;
+		.components-placeholder__fieldset > *,
+		.components-button {
+			width: 100%;
+			justify-content: center;
 		}
 	}
 
-	// Small sizes.
 	&.is-small {
-		.components-button {
-			padding: 0 $grid-unit-10 2px;
-		}
+		padding: $grid-unit-20;
 	}
 }
 
@@ -179,8 +159,6 @@
 	}
 
 	.components-placeholder__fieldset {
-		width: auto;
-
 		// Unset intrinsic margins.
 		margin-left: 0;
 		margin-right: 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/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

@@ -55,7 +55,9 @@ function UnforwardedSelectControl(
 	const helpId = help ? `${ id }__help` : undefined;
 
 	// Disable reason: A select with an onchange throws a warning.
-	if ( ! options?.length && ! children ) return null;
+	if ( ! options?.length && ! children ) {
+		return null;
+	}
 
 	const handleOnChange = (
 		event: React.ChangeEvent< HTMLSelectElement >

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

@@ -3,11 +3,12 @@
  */
 import { createContext } from '@wordpress/element';
 import warning from '@wordpress/warning';
+import { observableMap } from '@wordpress/compose';
+
 /**
  * Internal dependencies
  */
 import type { SlotFillBubblesVirtuallyContext } from '../types';
-import { observableMap } from './observable-map';
 
 const initialContextValue: SlotFillBubblesVirtuallyContext = {
 	slots: observableMap(),

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

@@ -3,6 +3,7 @@
  */
 import { useMemo } from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
+import { observableMap } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -12,7 +13,6 @@ import type {
 	SlotFillProviderProps,
 	SlotFillBubblesVirtuallyContext,
 } from '../types';
-import { observableMap } from './observable-map';
 
 function createSlotRegistry(): SlotFillBubblesVirtuallyContext {
 	const slots: SlotFillBubblesVirtuallyContext[ 'slots' ] = observableMap();

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

@@ -2,13 +2,13 @@
  * WordPress dependencies
  */
 import { useContext } from '@wordpress/element';
+import { useObservableValue } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import SlotFillContext from './slot-fill-context';
 import type { SlotKey } from '../types';
-import { useObservableValue } from './observable-map';
 
 export default function useSlotFills( name: SlotKey ) {
 	const registry = useContext( SlotFillContext );

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

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useMemo, useContext } from '@wordpress/element';
+import { useObservableValue } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -13,7 +14,6 @@ import type {
 	FillProps,
 	SlotKey,
 } from '../types';
-import { useObservableValue } from './observable-map';
 
 export default function useSlot( name: SlotKey ) {
 	const registry = useContext( SlotFillContext );

package/src/slot-fill/types.ts

@@ -4,9 +4,9 @@
 import type { Component, MutableRefObject, ReactNode, RefObject } from 'react';
 
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
-import type { ObservableMap } from './bubbles-virtually/observable-map';
+import type { ObservableMap } from '@wordpress/compose';
 
 export type DistributiveOmit< T, K extends keyof any > = T extends any
 	? Omit< T, K >

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/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/utils.ts

@@ -99,8 +99,12 @@ export function createHighlighterText( {
 	unhighlightClassName = '',
 	unhighlightStyle,
 }: Options ) {
-	if ( ! children ) return null;
-	if ( typeof children !== 'string' ) return children;
+	if ( ! children ) {
+		return null;
+	}
+	if ( typeof children !== 'string' ) {
+		return children;
+	}
 
 	const textToHighlight = children;
 

package/src/theme/color-algorithms.ts

@@ -76,7 +76,9 @@ function warnContrastIssues( issues: ReturnType< typeof checkContrasts > ) {
 }
 
 function generateAccentDependentColors( accent?: string ) {
-	if ( ! accent ) return {};
+	if ( ! accent ) {
+		return {};
+	}
 
 	return {
 		accent,
@@ -87,7 +89,9 @@ function generateAccentDependentColors( accent?: string ) {
 }
 
 function generateBackgroundDependentColors( background?: string ) {
-	if ( ! background ) return {};
+	if ( ! background ) {
+		return {};
+	}
 
 	const foreground = getForegroundForColor( background );
 

package/src/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -107,8 +107,6 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   padding: 0 12px;
   position: relative;
   text-align: center;
-  -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
-  transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -123,9 +121,10 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   color: #fff;
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-12 {
-    transition-duration: 0ms;
+    -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+    transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   }
 }
 
@@ -190,8 +189,6 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   padding: 0 12px;
   position: relative;
   text-align: center;
-  -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
-  transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -205,9 +202,10 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   padding-right: 0;
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-18 {
-    transition-duration: 0ms;
+    -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+    transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   }
 }
 
@@ -436,8 +434,6 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   padding: 0 12px;
   position: relative;
   text-align: center;
-  -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
-  transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -446,9 +442,10 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   z-index: 2;
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-12 {
-    transition-duration: 0ms;
+    -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+    transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   }
 }
 
@@ -656,8 +653,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   padding: 0 12px;
   position: relative;
   text-align: center;
-  -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
-  transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -672,9 +667,10 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   color: #fff;
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-12 {
-    transition-duration: 0ms;
+    -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+    transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   }
 }
 
@@ -739,8 +735,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   padding: 0 12px;
   position: relative;
   text-align: center;
-  -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
-  transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -754,9 +748,10 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   padding-right: 0;
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-18 {
-    transition-duration: 0ms;
+    -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+    transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   }
 }
 
@@ -979,8 +974,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   padding: 0 12px;
   position: relative;
   text-align: center;
-  -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
-  transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -989,9 +982,10 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   z-index: 2;
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-12 {
-    transition-duration: 0ms;
+    -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+    transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   }
 }
 

package/src/toggle-group-control/toggle-group-control-option-base/component.tsx

@@ -147,7 +147,9 @@ function ToggleGroupControlOptionBase(
 								{ ...commonProps }
 								onFocus={ ( event ) => {
 									onFocusProp?.( event );
-									if ( event.defaultPrevented ) return;
+									if ( event.defaultPrevented ) {
+										return;
+									}
 									toggleGroupControlContext.setValue( value );
 								} }
 							/>

package/src/toggle-group-control/toggle-group-control-option-base/styles.ts

@@ -7,7 +7,7 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import { CONFIG, COLORS, reduceMotion } from '../../utils';
+import { CONFIG, COLORS } from '../../utils';
 import type {
 	ToggleGroupControlProps,
 	ToggleGroupControlOptionBaseProps,
@@ -50,11 +50,12 @@ export const buttonView = ( {
 	padding: 0 12px;
 	position: relative;
 	text-align: center;
-	transition:
-		background ${ CONFIG.transitionDurationFast } linear,
-		color ${ CONFIG.transitionDurationFast } linear,
-		font-weight 60ms linear;
-	${ reduceMotion( 'transition' ) }
+	@media not ( prefers-reduced-motion ) {
+		transition:
+			background ${ CONFIG.transitionDurationFast } linear,
+			color ${ CONFIG.transitionDurationFast } linear,
+			font-weight 60ms linear;
+	}
 	user-select: none;
 	width: 100%;
 	z-index: 2;