@wordpress/components 28.8.6 → 28.10.0

package/src/toggle-group-control/toggle-group-control/as-radio-group.tsx

@@ -9,7 +9,7 @@ import { useStoreState } from '@ariakit/react';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { forwardRef, useMemo } from '@wordpress/element';
+import { forwardRef, useEffect, useMemo } from '@wordpress/element';
 import { isRTL } from '@wordpress/i18n';
 
 /**
@@ -33,6 +33,7 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 		size,
 		value: valueProp,
 		id: idProp,
+		setSelectedElement,
 		...otherProps
 	}: WordPressComponentProps<
 		ToggleGroupControlMainControlProps,
@@ -72,18 +73,35 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 	const selectedValue = useStoreState( radio, 'value' );
 	const setValue = radio.setValue;
 
+	// Ensures that the active id is also reset after the value is "reset" by the consumer.
+	useEffect( () => {
+		if ( selectedValue === '' ) {
+			radio.setActiveId( undefined );
+		}
+	}, [ radio, selectedValue ] );
+
 	const groupContextValue = useMemo(
-		() =>
-			( {
-				activeItemIsNotFirstItem: () =>
-					radio.getState().activeId !== radio.first(),
-				baseId,
-				isBlock: ! isAdaptiveWidth,
-				size,
-				value: selectedValue,
-				setValue,
-			} ) as ToggleGroupControlContextProps,
-		[ baseId, isAdaptiveWidth, radio, size, selectedValue, setValue ]
+		(): ToggleGroupControlContextProps => ( {
+			activeItemIsNotFirstItem: () =>
+				radio.getState().activeId !== radio.first(),
+			baseId,
+			isBlock: ! isAdaptiveWidth,
+			size,
+			// @ts-expect-error - This is wrong and we should fix it.
+			value: selectedValue,
+			// @ts-expect-error - This is wrong and we should fix it.
+			setValue,
+			setSelectedElement,
+		} ),
+		[
+			baseId,
+			isAdaptiveWidth,
+			radio,
+			selectedValue,
+			setSelectedElement,
+			setValue,
+			size,
+		]
 	);
 
 	return (

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

@@ -2,13 +2,11 @@
  * External dependencies
  */
 import type { ForwardedRef } from 'react';
-import { LayoutGroup } from 'framer-motion';
 
 /**
  * WordPress dependencies
  */
-import { useInstanceId } from '@wordpress/compose';
-import { useMemo } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -22,6 +20,9 @@ import { VisualLabelWrapper } from './styles';
 import * as styles from './styles';
 import { ToggleGroupControlAsRadioGroup } from './as-radio-group';
 import { ToggleGroupControlAsButtonGroup } from './as-button-group';
+import { useTrackElementOffsetRect } from '../../utils/element-rect';
+import { useMergeRefs } from '@wordpress/compose';
+import { useAnimatedOffsetRect } from '../../utils/hooks/use-animated-offset-rect';
 
 function UnconnectedToggleGroupControl(
 	props: WordPressComponentProps< ToggleGroupControlProps, 'div', false >,
@@ -44,10 +45,21 @@ function UnconnectedToggleGroupControl(
 		...otherProps
 	} = useContextSystem( props, 'ToggleGroupControl' );
 
-	const baseId = useInstanceId( ToggleGroupControl, 'toggle-group-control' );
 	const normalizedSize =
 		__next40pxDefaultSize && size === 'default' ? '__unstable-large' : size;
 
+	const [ selectedElement, setSelectedElement ] = useState< HTMLElement >();
+	const [ controlElement, setControlElement ] = useState< HTMLElement >();
+	const refs = useMergeRefs( [ setControlElement, forwardedRef ] );
+	const selectedRect = useTrackElementOffsetRect(
+		value ? selectedElement : undefined
+	);
+	useAnimatedOffsetRect( controlElement, selectedRect, {
+		prefix: 'selected',
+		dataAttribute: 'indicator-animated',
+		transitionEndFilter: ( event ) => event.pseudoElement === '::before',
+	} );
+
 	const cx = useCx();
 
 	const classes = useMemo(
@@ -81,15 +93,16 @@ function UnconnectedToggleGroupControl(
 			) }
 			<MainControl
 				{ ...otherProps }
+				setSelectedElement={ setSelectedElement }
 				className={ classes }
 				isAdaptiveWidth={ isAdaptiveWidth }
 				label={ label }
 				onChange={ onChange }
-				ref={ forwardedRef }
+				ref={ refs }
 				size={ normalizedSize }
 				value={ value }
 			>
-				<LayoutGroup id={ baseId }>{ children }</LayoutGroup>
+				{ children }
 			</MainControl>
 		</BaseControl>
 	);

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

@@ -26,6 +26,47 @@ export const toggleGroupControl = ( {
 
 	${ toggleGroupControlSize( size ) }
 	${ ! isDeselectable && enclosingBorders( isBlock ) }
+
+	@media not ( prefers-reduced-motion ) {
+		&[data-indicator-animated]::before {
+			transition-property: transform, border-radius;
+			transition-duration: 0.2s;
+			transition-timing-function: ease-out;
+		}
+	}
+
+	&::before {
+		content: '';
+		position: absolute;
+		pointer-events: none;
+		background: ${ COLORS.gray[ 900 ] };
+
+		// Windows High Contrast mode will show this outline, but not the box-shadow.
+		outline: 2px solid transparent;
+		outline-offset: -3px;
+
+		/* Using a large value to avoid antialiasing rounding issues
+			when scaling in the transform, see: https://stackoverflow.com/a/52159123 */
+		--antialiasing-factor: 100;
+		/* Adjusting the border radius to match the scaling in the x axis. */
+		border-radius: calc(
+				${ CONFIG.radiusXSmall } /
+					(
+						var( --selected-width, 0 ) /
+							var( --antialiasing-factor )
+					)
+			) / ${ CONFIG.radiusXSmall };
+		left: -1px; // Correcting for border.
+		width: calc( var( --antialiasing-factor ) * 1px );
+		height: calc( var( --selected-height, 0 ) * 1px );
+		transform-origin: left top;
+		transform: translateX( calc( var( --selected-left, 0 ) * 1px ) )
+			scaleX(
+				calc(
+					var( --selected-width, 0 ) / var( --antialiasing-factor )
+				)
+			);
+	}
 `;
 
 const enclosingBorders = ( isBlock: ToggleGroupControlProps[ 'isBlock' ] ) => {

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

@@ -3,13 +3,12 @@
  */
 import type { ForwardedRef } from 'react';
 import * as Ariakit from '@ariakit/react';
-import { motion } from 'framer-motion';
 
 /**
  * WordPress dependencies
  */
-import { useReducedMotion, useInstanceId } from '@wordpress/compose';
-import { useMemo } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+import { useLayoutEffect, useMemo, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -27,12 +26,6 @@ import Tooltip from '../../tooltip';
 
 const { ButtonContentView, LabelView } = styles;
 
-const REDUCED_MOTION_TRANSITION_CONFIG = {
-	duration: 0,
-};
-
-const LAYOUT_ID = 'toggle-group-backdrop-shared-layout-id';
-
 const WithToolTip = ( { showTooltip, text, children }: WithToolTipProps ) => {
 	if ( showTooltip && text ) {
 		return (
@@ -58,7 +51,6 @@ function ToggleGroupControlOptionBase(
 	>,
 	forwardedRef: ForwardedRef< any >
 ) {
-	const shouldReduceMotion = useReducedMotion();
 	const toggleGroupControlContext = useToggleGroupControlContext();
 
 	const id = useInstanceId(
@@ -106,7 +98,6 @@ function ToggleGroupControlOptionBase(
 			),
 		[ cx, isDeselectable, isIcon, isPressed, size, className ]
 	);
-	const backdropClasses = useMemo( () => cx( styles.backdropView ), [ cx ] );
 
 	const buttonOnClick = () => {
 		if ( isDeselectable && isPressed ) {
@@ -123,8 +114,15 @@ function ToggleGroupControlOptionBase(
 		ref: forwardedRef,
 	};
 
+	const labelRef = useRef< HTMLDivElement | null >( null );
+	useLayoutEffect( () => {
+		if ( isPressed && labelRef.current ) {
+			toggleGroupControlContext.setSelectedElement( labelRef.current );
+		}
+	}, [ isPressed, toggleGroupControlContext ] );
+
 	return (
-		<LabelView className={ labelViewClasses }>
+		<LabelView ref={ labelRef } className={ labelViewClasses }>
 			<WithToolTip
 				showTooltip={ showTooltip }
 				text={ otherButtonProps[ 'aria-label' ] }
@@ -143,10 +141,14 @@ function ToggleGroupControlOptionBase(
 					<Ariakit.Radio
 						disabled={ disabled }
 						onFocusVisible={ () => {
+							const selectedValueIsEmpty =
+								toggleGroupControlContext.value === null ||
+								toggleGroupControlContext.value === '';
+
 							// Conditions ensure that the first visible focus to a radio group
 							// without a selected option will not automatically select the option.
 							if (
-								toggleGroupControlContext.value !== null ||
+								! selectedValueIsEmpty ||
 								toggleGroupControlContext.activeItemIsNotFirstItem?.()
 							) {
 								toggleGroupControlContext.setValue( value );
@@ -159,21 +161,6 @@ function ToggleGroupControlOptionBase(
 					</Ariakit.Radio>
 				) }
 			</WithToolTip>
-			{ /* Animated backdrop using framer motion's shared layout animation */ }
-			{ isPressed ? (
-				<motion.div layout layoutRoot>
-					<motion.div
-						className={ backdropClasses }
-						transition={
-							shouldReduceMotion
-								? REDUCED_MOTION_TRANSITION_CONFIG
-								: undefined
-						}
-						role="presentation"
-						layoutId={ LAYOUT_ID }
-					/>
-				</motion.div>
-			) : null }
 		</LabelView>
 	);
 }

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

@@ -119,14 +119,3 @@ const isIconStyles = ( {
 		padding-right: 0;
 	`;
 };
-
-export const backdropView = css`
-	background: ${ COLORS.gray[ 900 ] };
-	border-radius: ${ CONFIG.radiusXSmall };
-	position: absolute;
-	inset: 0;
-	z-index: 1;
-	// Windows High Contrast mode will show this outline, but not the box-shadow.
-	outline: 2px solid transparent;
-	outline-offset: -3px;
-`;

package/src/toggle-group-control/types.ts

@@ -138,9 +138,11 @@ export type ToggleGroupControlContextProps = {
 	size: ToggleGroupControlProps[ 'size' ];
 	value: ToggleGroupControlProps[ 'value' ];
 	setValue: ( newValue: string | number | undefined ) => void;
+	setSelectedElement: ( element: HTMLElement | undefined ) => void;
 };
 
 export type ToggleGroupControlMainControlProps = Pick<
 	ToggleGroupControlProps,
 	'children' | 'isAdaptiveWidth' | 'label' | 'size' | 'onChange' | 'value'
->;
+> &
+	Pick< ToggleGroupControlContextProps, 'setSelectedElement' >;

package/src/tools-panel/tools-panel/README.md

@@ -60,7 +60,7 @@ import styled from '@emotion/styled';
  * WordPress dependencies
  */
 import {
-	__experimentalBoxControl as BoxControl,
+	BoxControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUnitControl as UnitControl,
@@ -91,8 +91,8 @@ export function DimensionPanel() {
 	return (
 		<ToolsPanel label={ __( 'Dimensions' ) } resetAll={ resetAll }>
 			<PanelDescription>
-				Select dimensions or spacing related settings from the
-				menu for additional controls.
+				Select dimensions or spacing related settings from the menu for
+				additional controls.
 			</PanelDescription>
 			<SingleColumnItem
 				hasValue={ () => !! height }
@@ -154,8 +154,8 @@ export function DimensionPanel() {
 Flags that the items in this ToolsPanel will be contained within an inner
 wrapper element allowing the panel to lay them out accordingly.
 
-- Required: No
-- Default: `false`
+-   Required: No
+-   Default: `false`
 
 ### `dropdownMenuProps`: `{}`
 
@@ -176,7 +176,7 @@ The heading level of the panel's header.
 Text to be displayed within the panel's header and as the `aria-label` for the
 panel's dropdown menu.
 
-- Required: Yes
+-   Required: Yes
 
 ### `panelId`: `string | null`
 
@@ -185,13 +185,13 @@ to restrict panel items. When a `panelId` is set, items can only register
 themselves if the `panelId` is explicitly `null` or the item's `panelId` matches
 exactly.
 
-- Required: No
+-   Required: No
 
 ### `resetAll`: `( filters?: ResetAllFilter[] ) => void`
 
 A function to call when the `Reset all` menu option is selected. As an argument, it receives an array containing the `resetAllFilter` callbacks of all the valid registered `ToolsPanelItems`.
 
-- Required: Yes
+-   Required: Yes
 
 ### `shouldRenderPlaceholderItems`: `boolean`
 
@@ -201,5 +201,5 @@ placeholder content (instead of `null`) when they are toggled off and hidden.
 Note that placeholder items won't apply the `className` that would be
 normally applied to a visible `ToolsPanelItem` via the `className` prop.
 
-- Required: No
-- Default: `false`
+-   Required: No
+-   Default: `false`

package/src/utils/element-rect.ts

@@ -3,16 +3,16 @@
  * WordPress dependencies
  */
 import { useLayoutEffect, useRef, useState } from '@wordpress/element';
-import { useResizeObserver } from '@wordpress/compose';
-/**
- * Internal dependencies
- */
-import { useEvent } from './hooks/use-event';
+import { useEvent, useResizeObserver } from '@wordpress/compose';
 
 /**
  * The position and dimensions of an element, relative to its offset parent.
  */
 export type ElementOffsetRect = {
+	/**
+	 * The element the rect belongs to.
+	 */
+	element: HTMLElement | undefined;
 	/**
 	 * The distance from the top edge of the offset parent to the top edge of
 	 * the element.
@@ -47,6 +47,7 @@ export type ElementOffsetRect = {
  * An `ElementOffsetRect` object with all values set to zero.
  */
 export const NULL_ELEMENT_OFFSET_RECT = {
+	element: undefined,
 	top: 0,
 	right: 0,
 	bottom: 0,
@@ -79,9 +80,11 @@ export function getElementOffsetRect(
 	if ( rect.width === 0 || rect.height === 0 ) {
 		return;
 	}
+	const offsetParent = element.offsetParent;
 	const offsetParentRect =
-		element.offsetParent?.getBoundingClientRect() ??
-		NULL_ELEMENT_OFFSET_RECT;
+		offsetParent?.getBoundingClientRect() ?? NULL_ELEMENT_OFFSET_RECT;
+	const offsetParentScrollX = offsetParent?.scrollLeft ?? 0;
+	const offsetParentScrollY = offsetParent?.scrollTop ?? 0;
 
 	// Computed widths and heights have subpixel precision, and are not affected
 	// by distortions.
@@ -94,13 +97,22 @@ export function getElementOffsetRect(
 	const scaleY = computedHeight / rect.height;
 
 	return {
+		element,
 		// To obtain the adjusted values for the position:
 		// 1. Compute the element's position relative to the offset parent.
 		// 2. Correct for the scale factor.
-		top: ( rect.top - offsetParentRect?.top ) * scaleY,
-		right: ( offsetParentRect?.right - rect.right ) * scaleX,
-		bottom: ( offsetParentRect?.bottom - rect.bottom ) * scaleY,
-		left: ( rect.left - offsetParentRect?.left ) * scaleX,
+		// 3. Adjust for the scroll position of the offset parent.
+		top:
+			( rect.top - offsetParentRect?.top ) * scaleY + offsetParentScrollY,
+		right:
+			( offsetParentRect?.right - rect.right ) * scaleX -
+			offsetParentScrollX,
+		bottom:
+			( offsetParentRect?.bottom - rect.bottom ) * scaleY -
+			offsetParentScrollY,
+		left:
+			( rect.left - offsetParentRect?.left ) * scaleX +
+			offsetParentScrollX,
 		// Computed dimensions don't need any adjustments.
 		width: computedWidth,
 		height: computedHeight,
@@ -113,6 +125,9 @@ const POLL_RATE = 100;
  * Tracks the position and dimensions of an element, relative to its offset
  * parent. The element can be changed dynamically.
  *
+ * When no element is provided (`null` or `undefined`), the hook will return
+ * a "null" rect, in which all values are `0` and `element` is `undefined`.
+ *
  * **Note:** sometimes, the measurement will fail (see `getElementOffsetRect`'s
  * documentation for more details). When that happens, this hook will attempt
  * to measure again after a frame, and if that fails, it will poll every 100
@@ -149,10 +164,12 @@ export function useTrackElementOffsetRect(
 		}
 	} );
 
-	useLayoutEffect(
-		() => setElement( targetElement ),
-		[ setElement, targetElement ]
-	);
+	useLayoutEffect( () => {
+		setElement( targetElement );
+		if ( ! targetElement ) {
+			setIndicatorPosition( NULL_ELEMENT_OFFSET_RECT );
+		}
+	}, [ setElement, targetElement ] );
 
 	return indicatorPosition;
 }

package/src/utils/hooks/use-animated-offset-rect.ts

@@ -0,0 +1,107 @@
+/* eslint-disable jsdoc/require-param */
+
+/**
+ * WordPress dependencies
+ */
+import { useEvent } from '@wordpress/compose';
+import { useLayoutEffect } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import type { ElementOffsetRect } from '../element-rect';
+import { useOnValueUpdate } from './use-on-value-update';
+
+/**
+ * A utility used to animate something in a container component based on the "offset
+ * rect" (position relative to the container and size) of a subelement. For example,
+ * this is useful to render an indicator for the selected option of a component, and
+ * to animate it when the selected option changes.
+ *
+ * Takes in a container element and the up-to-date "offset rect" of the target
+ * subelement, obtained with `useTrackElementOffsetRect`. Then it does the following:
+ *
+ * - Adds CSS variables with rect information to the container, so that the indicator
+ *   can be rendered and animated with them. These are kept up-to-date, enabling CSS
+ *   transitions on change.
+ * - Sets an attribute (`data-subelement-animated` by default) when the tracked
+ *   element changes, so that the target (e.g. the indicator) can be animated to its
+ *   new size and position.
+ * - Removes the attribute when the animation is done.
+ *
+ * The need for the attribute is due to the fact that the rect might update in
+ * situations other than when the tracked element changes, e.g. the tracked element
+ * might be resized. In such cases, there is no need to animate the indicator, and
+ * the change in size or position of the indicator needs to be reflected immediately.
+ */
+export function useAnimatedOffsetRect(
+	/**
+	 * The container element.
+	 */
+	container: HTMLElement | undefined,
+	/**
+	 * The rect of the tracked element.
+	 */
+	rect: ElementOffsetRect,
+	{
+		prefix = 'subelement',
+		dataAttribute = `${ prefix }-animated`,
+		transitionEndFilter = () => true,
+	}: {
+		/**
+		 * The prefix used for the CSS variables, e.g. if `prefix` is `selected`, the
+		 * CSS variables will be `--selected-top`, `--selected-left`, etc.
+		 * @default 'subelement'
+		 */
+		prefix?: string;
+		/**
+		 * The name of the data attribute used to indicate that the animation is in
+		 * progress. The `data-` prefix is added automatically.
+		 *
+		 * For example, if `dataAttribute` is `indicator-animated`, the attribute will
+		 * be `data-indicator-animated`.
+		 * @default `${ prefix }-animated`
+		 */
+		dataAttribute?: string;
+		/**
+		 * A function that is called with the transition event and returns a boolean
+		 * indicating whether the animation should be stopped. The default is a function
+		 * that always returns `true`.
+		 *
+		 * For example, if the animated element is the `::before` pseudo-element, the
+		 * function can be written as `( event ) => event.pseudoElement === '::before'`.
+		 * @default () => true
+		 */
+		transitionEndFilter?: ( event: TransitionEvent ) => boolean;
+	} = {}
+) {
+	const setProperties = useEvent( () => {
+		( Object.keys( rect ) as Array< keyof typeof rect > ).forEach(
+			( property ) =>
+				property !== 'element' &&
+				container?.style.setProperty(
+					`--${ prefix }-${ property }`,
+					String( rect[ property ] )
+				)
+		);
+	} );
+	useLayoutEffect( () => {
+		setProperties();
+	}, [ rect, setProperties ] );
+	useOnValueUpdate( rect.element, ( { previousValue } ) => {
+		// Only enable the animation when moving from one element to another.
+		if ( rect.element && previousValue ) {
+			container?.setAttribute( `data-${ dataAttribute }`, '' );
+		}
+	} );
+	useLayoutEffect( () => {
+		function onTransitionEnd( event: TransitionEvent ) {
+			if ( transitionEndFilter( event ) ) {
+				container?.removeAttribute( `data-${ dataAttribute }` );
+			}
+		}
+		container?.addEventListener( 'transitionend', onTransitionEnd );
+		return () =>
+			container?.removeEventListener( 'transitionend', onTransitionEnd );
+	}, [ dataAttribute, container, transitionEndFilter ] );
+}
+/* eslint-enable jsdoc/require-param */

package/src/utils/hooks/use-on-value-update.ts

@@ -2,11 +2,8 @@
 /**
  * WordPress dependencies
  */
-import { useRef, useEffect } from '@wordpress/element';
-/**
- * Internal dependencies
- */
-import { useEvent } from './use-event';
+import { useEvent } from '@wordpress/compose';
+import { useRef, useLayoutEffect } from '@wordpress/element';
 
 /**
  * Context object for the `onUpdate` callback of `useOnValueUpdate`.
@@ -30,7 +27,7 @@ export function useOnValueUpdate< T >(
 ) {
 	const previousValueRef = useRef( value );
 	const updateCallbackEvent = useEvent( onUpdate );
-	useEffect( () => {
+	useLayoutEffect( () => {
 		if ( previousValueRef.current !== value ) {
 			updateCallbackEvent( {
 				previousValue: previousValueRef.current,