@wordpress/components 28.8.4 → 28.9.0

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(
@@ -107,7 +99,6 @@ function ToggleGroupControlOptionBase(
 			),
 		[ cx, isDeselectable, isIcon, isPressed, size, className ]
 	);
-	const backdropClasses = useMemo( () => cx( styles.backdropView ), [ cx ] );
 
 	const buttonOnClick = () => {
 		if ( isDeselectable && isPressed ) {
@@ -124,8 +115,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' ] }
@@ -163,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

@@ -137,9 +137,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-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,