@wordpress/components 28.8.3 → 28.9.0

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

@@ -60,6 +60,55 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   outline-offset: -2px;
 }
 
+@media not ( prefers-reduced-motion ) {
+  .emotion-8[data-indicator-animated]::before {
+    transition-property: transform,border-radius;
+    transition-duration: 0.2s;
+    transition-timing-function: ease-out;
+  }
+}
+
+.emotion-8::before {
+  content: '';
+  position: absolute;
+  pointer-events: none;
+  background: #1e1e1e;
+  outline: 2px solid transparent;
+  outline-offset: -3px;
+  --antialiasing-factor: 100;
+  border-radius: calc(
+  				1px /
+  					(
+  						var( --selected-width, 0 ) /
+  							var( --antialiasing-factor )
+  					)
+  			)/1px;
+  left: -1px;
+  width: calc( var( --antialiasing-factor ) * 1px );
+  height: calc( var( --selected-height, 0 ) * 1px );
+  transform-origin: left top;
+  -webkit-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
+  -moz-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
+  -ms-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
+  transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
+}
+
 .emotion-10 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -150,17 +199,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   line-height: 1;
 }
 
-.emotion-15 {
-  background: #1e1e1e;
-  border-radius: 1px;
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  outline: 2px solid transparent;
-  outline-offset: -3px;
-}
-
-.emotion-18 {
+.emotion-17 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -204,22 +243,22 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
 }
 
 @media not ( prefers-reduced-motion ) {
-  .emotion-18 {
+  .emotion-17 {
     -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
     transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   }
 }
 
-.emotion-18::-moz-focus-inner {
+.emotion-17::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-18[disabled] {
+.emotion-17[disabled] {
   opacity: 0.4;
   cursor: default;
 }
 
-.emotion-18:active {
+.emotion-17:active {
   background: #fff;
 }
 
@@ -280,12 +319,6 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
               </svg>
             </div>
           </button>
-          <div>
-            <div
-              class="emotion-15"
-              role="presentation"
-            />
-          </div>
         </div>
         <div
           class="emotion-10 emotion-11"
@@ -293,7 +326,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
           <button
             aria-checked="false"
             aria-label="Lowercase"
-            class="emotion-18 components-toggle-group-control-option-base"
+            class="emotion-17 components-toggle-group-control-option-base"
             data-value="lowercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
@@ -392,6 +425,55 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   outline-offset: -2px;
 }
 
+@media not ( prefers-reduced-motion ) {
+  .emotion-8[data-indicator-animated]::before {
+    transition-property: transform,border-radius;
+    transition-duration: 0.2s;
+    transition-timing-function: ease-out;
+  }
+}
+
+.emotion-8::before {
+  content: '';
+  position: absolute;
+  pointer-events: none;
+  background: #1e1e1e;
+  outline: 2px solid transparent;
+  outline-offset: -3px;
+  --antialiasing-factor: 100;
+  border-radius: calc(
+  				1px /
+  					(
+  						var( --selected-width, 0 ) /
+  							var( --antialiasing-factor )
+  					)
+  			)/1px;
+  left: -1px;
+  width: calc( var( --antialiasing-factor ) * 1px );
+  height: calc( var( --selected-height, 0 ) * 1px );
+  transform-origin: left top;
+  -webkit-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
+  -moz-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
+  -ms-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
+  transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
+}
+
 .emotion-10 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -612,6 +694,55 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   outline-offset: -2px;
 }
 
+@media not ( prefers-reduced-motion ) {
+  .emotion-8[data-indicator-animated]::before {
+    transition-property: transform,border-radius;
+    transition-duration: 0.2s;
+    transition-timing-function: ease-out;
+  }
+}
+
+.emotion-8::before {
+  content: '';
+  position: absolute;
+  pointer-events: none;
+  background: #1e1e1e;
+  outline: 2px solid transparent;
+  outline-offset: -3px;
+  --antialiasing-factor: 100;
+  border-radius: calc(
+  				1px /
+  					(
+  						var( --selected-width, 0 ) /
+  							var( --antialiasing-factor )
+  					)
+  			)/1px;
+  left: -1px;
+  width: calc( var( --antialiasing-factor ) * 1px );
+  height: calc( var( --selected-height, 0 ) * 1px );
+  transform-origin: left top;
+  -webkit-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
+  -moz-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
+  -ms-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
+  transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
+}
+
 .emotion-10 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -702,17 +833,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   line-height: 1;
 }
 
-.emotion-15 {
-  background: #1e1e1e;
-  border-radius: 1px;
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  outline: 2px solid transparent;
-  outline-offset: -3px;
-}
-
-.emotion-18 {
+.emotion-17 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -756,22 +877,22 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
 }
 
 @media not ( prefers-reduced-motion ) {
-  .emotion-18 {
+  .emotion-17 {
     -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
     transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   }
 }
 
-.emotion-18::-moz-focus-inner {
+.emotion-17::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-18[disabled] {
+.emotion-17[disabled] {
   opacity: 0.4;
   cursor: default;
 }
 
-.emotion-18:active {
+.emotion-17:active {
   background: #fff;
 }
 
@@ -832,12 +953,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
               </svg>
             </div>
           </button>
-          <div>
-            <div
-              class="emotion-15"
-              role="presentation"
-            />
-          </div>
         </div>
         <div
           class="emotion-10 emotion-11"
@@ -845,7 +960,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
           <button
             aria-checked="false"
             aria-label="Lowercase"
-            class="emotion-18 components-toggle-group-control-option-base"
+            class="emotion-17 components-toggle-group-control-option-base"
             data-value="lowercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
@@ -938,6 +1053,55 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   outline-offset: -2px;
 }
 
+@media not ( prefers-reduced-motion ) {
+  .emotion-8[data-indicator-animated]::before {
+    transition-property: transform,border-radius;
+    transition-duration: 0.2s;
+    transition-timing-function: ease-out;
+  }
+}
+
+.emotion-8::before {
+  content: '';
+  position: absolute;
+  pointer-events: none;
+  background: #1e1e1e;
+  outline: 2px solid transparent;
+  outline-offset: -3px;
+  --antialiasing-factor: 100;
+  border-radius: calc(
+  				1px /
+  					(
+  						var( --selected-width, 0 ) /
+  							var( --antialiasing-factor )
+  					)
+  			)/1px;
+  left: -1px;
+  width: calc( var( --antialiasing-factor ) * 1px );
+  height: calc( var( --selected-height, 0 ) * 1px );
+  transform-origin: left top;
+  -webkit-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
+  -moz-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
+  -ms-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
+  transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
+}
+
 .emotion-10 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;

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

@@ -26,6 +26,7 @@ function UnforwardedToggleGroupControlAsButtonGroup(
 		size,
 		value: valueProp,
 		id: idProp,
+		setSelectedElement,
 		...otherProps
 	}: WordPressComponentProps<
 		ToggleGroupControlMainControlProps,
@@ -54,16 +55,23 @@ function UnforwardedToggleGroupControlAsButtonGroup(
 	} );
 
 	const groupContextValue = useMemo(
-		() =>
-			( {
-				baseId,
-				value: selectedValue,
-				setValue: setSelectedValue,
-				isBlock: ! isAdaptiveWidth,
-				isDeselectable: true,
-				size,
-			} ) as ToggleGroupControlContextProps,
-		[ baseId, selectedValue, setSelectedValue, isAdaptiveWidth, size ]
+		(): ToggleGroupControlContextProps => ( {
+			baseId,
+			value: selectedValue,
+			setValue: setSelectedValue,
+			isBlock: ! isAdaptiveWidth,
+			isDeselectable: true,
+			size,
+			setSelectedElement,
+		} ),
+		[
+			baseId,
+			selectedValue,
+			setSelectedValue,
+			isAdaptiveWidth,
+			size,
+			setSelectedElement,
+		]
 	);
 
 	return (

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

@@ -10,6 +10,7 @@ import { useStoreState } from '@ariakit/react';
  */
 import { useInstanceId } from '@wordpress/compose';
 import { forwardRef, useMemo } from '@wordpress/element';
+import { isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -32,6 +33,7 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 		size,
 		value: valueProp,
 		id: idProp,
+		setSelectedElement,
 		...otherProps
 	}: WordPressComponentProps<
 		ToggleGroupControlMainControlProps,
@@ -65,21 +67,31 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 		defaultValue,
 		value,
 		setValue: wrappedOnChangeProp,
+		rtl: isRTL(),
 	} );
 
 	const selectedValue = useStoreState( radio, 'value' );
 	const setValue = radio.setValue;
 
 	const groupContextValue = useMemo(
-		() =>
-			( {
-				baseId,
-				isBlock: ! isAdaptiveWidth,
-				size,
-				value: selectedValue,
-				setValue,
-			} ) as ToggleGroupControlContextProps,
-		[ baseId, isAdaptiveWidth, size, selectedValue, setValue ]
+		(): ToggleGroupControlContextProps => ( {
+			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,
+			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 { useLayoutEffect, useMemo, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -22,6 +20,104 @@ import { VisualLabelWrapper } from './styles';
 import * as styles from './styles';
 import { ToggleGroupControlAsRadioGroup } from './as-radio-group';
 import { ToggleGroupControlAsButtonGroup } from './as-button-group';
+import type { ElementOffsetRect } from '../../utils/element-rect';
+import { useTrackElementOffsetRect } from '../../utils/element-rect';
+import { useOnValueUpdate } from '../../utils/hooks/use-on-value-update';
+import { useEvent, useMergeRefs } from '@wordpress/compose';
+
+/**
+ * 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.
+ */
+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 ] );
+}
 
 function UnconnectedToggleGroupControl(
 	props: WordPressComponentProps< ToggleGroupControlProps, 'div', false >,
@@ -44,10 +140,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 +188,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' ] ) => {