@wordpress/components 28.9.0 → 28.10.0

package/src/tabs/tablist.tsx

@@ -19,11 +19,43 @@ import { useTabsContext } from './context';
 import { TabListWrapper } from './styles';
 import type { WordPressComponentProps } from '../context';
 import clsx from 'clsx';
+import type { ElementOffsetRect } from '../utils/element-rect';
 import { useTrackElementOffsetRect } from '../utils/element-rect';
-import { useOnValueUpdate } from '../utils/hooks/use-on-value-update';
 import { useTrackOverflow } from './use-track-overflow';
+import { useAnimatedOffsetRect } from '../utils/hooks/use-animated-offset-rect';
 
-const SCROLL_MARGIN = 24;
+const DEFAULT_SCROLL_MARGIN = 24;
+
+/**
+ * Scrolls a given parent element so that a given rect is visible.
+ *
+ * The scroll is updated initially and whenever the rect changes.
+ */
+function useScrollRectIntoView(
+	parent: HTMLElement | undefined,
+	rect: ElementOffsetRect,
+	{ margin = DEFAULT_SCROLL_MARGIN } = {}
+) {
+	useLayoutEffect( () => {
+		if ( ! parent || ! rect ) {
+			return;
+		}
+
+		const { scrollLeft: parentScroll } = parent;
+		const parentWidth = parent.getBoundingClientRect().width;
+		const { left: childLeft, width: childWidth } = rect;
+
+		const parentRightEdge = parentScroll + parentWidth;
+		const childRightEdge = childLeft + childWidth;
+		const rightOverflow = childRightEdge + margin - parentRightEdge;
+		const leftOverflow = parentScroll - ( childLeft - margin );
+		if ( leftOverflow > 0 ) {
+			parent.scrollLeft = parentScroll - leftOverflow;
+		} else if ( rightOverflow > 0 ) {
+			parent.scrollLeft = parentScroll + rightOverflow;
+		}
+	}, [ margin, parent, rect ] );
+}
 
 export const TabList = forwardRef<
 	HTMLDivElement,
@@ -35,44 +67,27 @@ export const TabList = forwardRef<
 	const activeId = useStoreState( store, 'activeId' );
 	const selectOnMove = useStoreState( store, 'selectOnMove' );
 	const items = useStoreState( store, 'items' );
-	const [ parent, setParent ] = useState< HTMLElement | null >();
+	const [ parent, setParent ] = useState< HTMLElement >();
 	const refs = useMergeRefs( [ ref, setParent ] );
+	const selectedRect = useTrackElementOffsetRect(
+		store?.item( selectedId )?.element
+	);
+
+	// Track overflow to show scroll hints.
 	const overflow = useTrackOverflow( parent, {
 		first: items?.at( 0 )?.element,
 		last: items?.at( -1 )?.element,
 	} );
 
-	const selectedTabPosition = useTrackElementOffsetRect(
-		store?.item( selectedId )?.element
-	);
-
-	const [ animationEnabled, setAnimationEnabled ] = useState( false );
-	useOnValueUpdate( selectedId, ( { previousValue } ) => {
-		if ( previousValue ) {
-			setAnimationEnabled( true );
-		}
+	// Size, position, and animate the indicator.
+	useAnimatedOffsetRect( parent, selectedRect, {
+		prefix: 'selected',
+		dataAttribute: 'indicator-animated',
+		transitionEndFilter: ( event ) => event.pseudoElement === '::before',
 	} );
 
 	// Make sure selected tab is scrolled into view.
-	useLayoutEffect( () => {
-		if ( ! parent || ! selectedTabPosition ) {
-			return;
-		}
-
-		const { scrollLeft: parentScroll } = parent;
-		const parentWidth = parent.getBoundingClientRect().width;
-		const { left: childLeft, width: childWidth } = selectedTabPosition;
-
-		const parentRightEdge = parentScroll + parentWidth;
-		const childRightEdge = childLeft + childWidth;
-		const rightOverflow = childRightEdge + SCROLL_MARGIN - parentRightEdge;
-		const leftOverflow = parentScroll - ( childLeft - SCROLL_MARGIN );
-		if ( leftOverflow > 0 ) {
-			parent.scrollLeft = parentScroll - leftOverflow;
-		} else if ( rightOverflow > 0 ) {
-			parent.scrollLeft = parentScroll + rightOverflow;
-		}
-	}, [ parent, selectedTabPosition ] );
+	useScrollRectIntoView( parent, selectedRect );
 
 	const onBlur = () => {
 		if ( ! selectOnMove ) {
@@ -97,30 +112,14 @@ export const TabList = forwardRef<
 		<Ariakit.TabList
 			ref={ refs }
 			store={ store }
-			render={
-				<TabListWrapper
-					onTransitionEnd={ ( event ) => {
-						if ( event.pseudoElement === '::before' ) {
-							setAnimationEnabled( false );
-						}
-					} }
-				/>
-			}
+			render={ <TabListWrapper /> }
 			onBlur={ onBlur }
 			tabIndex={ -1 }
+			data-select-on-move={ selectOnMove ? 'true' : 'false' }
 			{ ...otherProps }
-			style={ {
-				'--indicator-top': selectedTabPosition.top,
-				'--indicator-right': selectedTabPosition.right,
-				'--indicator-left': selectedTabPosition.left,
-				'--indicator-width': selectedTabPosition.width,
-				'--indicator-height': selectedTabPosition.height,
-				...otherProps.style,
-			} }
 			className={ clsx(
 				overflow.first && 'is-overflowing-first',
 				overflow.last && 'is-overflowing-last',
-				animationEnabled && 'is-animation-enabled',
 				otherProps.className
 			) }
 		>

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

@@ -283,7 +283,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
         class="components-toggle-group-control emotion-8 emotion-9"
         data-wp-c16t="true"
         data-wp-component="ToggleGroupControl"
-        id="toggle-group-control-as-radio-group-11"
+        id="toggle-group-control-as-radio-group-12"
         role="radiogroup"
       >
         <div
@@ -297,7 +297,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             data-value="uppercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-11-30"
+            id="toggle-group-control-as-radio-group-12-32"
             role="radio"
             type="button"
             value="uppercase"
@@ -330,7 +330,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             data-value="lowercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-11-31"
+            id="toggle-group-control-as-radio-group-12-33"
             role="radio"
             type="button"
             value="lowercase"
@@ -575,7 +575,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
         class="components-toggle-group-control emotion-8 emotion-9"
         data-wp-c16t="true"
         data-wp-component="ToggleGroupControl"
-        id="toggle-group-control-as-radio-group-10"
+        id="toggle-group-control-as-radio-group-11"
         role="radiogroup"
       >
         <div
@@ -588,7 +588,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
             data-value="rigas"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-10-28"
+            id="toggle-group-control-as-radio-group-11-30"
             role="radio"
             type="button"
             value="rigas"
@@ -610,7 +610,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
             data-value="jack"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-10-29"
+            id="toggle-group-control-as-radio-group-11-31"
             role="radio"
             type="button"
             value="jack"

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

@@ -162,6 +162,45 @@ describe.each( [
 		expect( mockOnChange ).toHaveBeenCalledWith( 'rigas' );
 	} );
 
+	it( 'should not set a value on focus', async () => {
+		render(
+			<Component label="Test Toggle Group Control">{ options }</Component>
+		);
+
+		const radio = screen.getByRole( 'radio', { name: 'R' } );
+		expect( radio ).not.toBeChecked();
+
+		await press.Tab();
+		expect( radio ).toHaveFocus();
+		expect( radio ).not.toBeChecked();
+	} );
+
+	if ( mode === 'controlled' ) {
+		it( 'should not set a value on focus, after the value is reset', async () => {
+			render(
+				<Component label="Test Toggle Group Control" value="jack">
+					{ options }
+				</Component>
+			);
+
+			expect( screen.getByRole( 'radio', { name: 'J' } ) ).toBeChecked();
+
+			await click( screen.getByRole( 'button', { name: 'Reset' } ) );
+
+			expect(
+				screen.getByRole( 'radio', { name: 'J' } )
+			).not.toBeChecked();
+
+			await press.ShiftTab();
+			expect(
+				screen.getByRole( 'radio', { name: 'R' } )
+			).not.toBeChecked();
+			expect(
+				screen.getByRole( 'radio', { name: 'J' } )
+			).not.toBeChecked();
+		} );
+	}
+
 	it( 'should render tooltip where `showTooltip` === `true`', async () => {
 		render(
 			<Component label="Test Toggle Group Control">

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';
 
 /**
@@ -73,8 +73,17 @@ 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(
 		(): ToggleGroupControlContextProps => ( {
+			activeItemIsNotFirstItem: () =>
+				radio.getState().activeId !== radio.first(),
 			baseId,
 			isBlock: ! isAdaptiveWidth,
 			size,
@@ -87,6 +96,7 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 		[
 			baseId,
 			isAdaptiveWidth,
+			radio,
 			selectedValue,
 			setSelectedElement,
 			setValue,

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

@@ -6,7 +6,7 @@ import type { ForwardedRef } from 'react';
 /**
  * WordPress dependencies
  */
-import { useLayoutEffect, useMemo, useState } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,104 +20,9 @@ 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 ] );
-}
+import { useMergeRefs } from '@wordpress/compose';
+import { useAnimatedOffsetRect } from '../../utils/hooks/use-animated-offset-rect';
 
 function UnconnectedToggleGroupControl(
 	props: WordPressComponentProps< ToggleGroupControlProps, 'div', false >,

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

@@ -75,7 +75,6 @@ function ToggleGroupControlOptionBase(
 		value,
 		children,
 		showTooltip = false,
-		onFocus: onFocusProp,
 		disabled,
 		...otherButtonProps
 	} = buttonProps;
@@ -132,7 +131,6 @@ function ToggleGroupControlOptionBase(
 					<button
 						{ ...commonProps }
 						disabled={ disabled }
-						onFocus={ onFocusProp }
 						aria-pressed={ isPressed }
 						type="button"
 						onClick={ buttonOnClick }
@@ -142,19 +140,21 @@ function ToggleGroupControlOptionBase(
 				) : (
 					<Ariakit.Radio
 						disabled={ disabled }
-						render={
-							<button
-								type="button"
-								{ ...commonProps }
-								onFocus={ ( event ) => {
-									onFocusProp?.( event );
-									if ( event.defaultPrevented ) {
-										return;
-									}
-									toggleGroupControlContext.setValue( value );
-								} }
-							/>
-						}
+						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 (
+								! selectedValueIsEmpty ||
+								toggleGroupControlContext.activeItemIsNotFirstItem?.()
+							) {
+								toggleGroupControlContext.setValue( value );
+							}
+						} }
+						render={ <button type="button" { ...commonProps } /> }
 						value={ value }
 					>
 						<ButtonContentView>{ children }</ButtonContentView>

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

@@ -131,6 +131,7 @@ export type ToggleGroupControlProps = Pick<
 };
 
 export type ToggleGroupControlContextProps = {
+	activeItemIsNotFirstItem?: () => boolean;
 	isDeselectable?: boolean;
 	baseId: string;
 	isBlock: ToggleGroupControlProps[ 'isBlock' ];

package/src/tooltip/index.tsx

@@ -107,9 +107,16 @@ function UnforwardedTooltip(
 	// TODO: this is a temporary workaround to minimize the effects of the
 	// Ariakit upgrade. Ariakit doesn't pass the `aria-describedby` prop to
 	// the tooltip anchor anymore since 0.4.0, so we need to add it manually.
+	// The `aria-describedby` attribute is added only if the anchor doesn't have
+	// one already, and if the tooltip text is not the same as the anchor's
+	// `aria-label`
 	// See: https://github.com/WordPress/gutenberg/pull/64066
+	// See: https://github.com/WordPress/gutenberg/pull/65989
 	function addDescribedById( element: React.ReactElement ) {
-		return describedById && mounted
+		return describedById &&
+			mounted &&
+			element.props[ 'aria-describedby' ] === undefined &&
+			element.props[ 'aria-label' ] !== text
 			? cloneElement( element, { 'aria-describedby': describedById } )
 			: element;
 	}

package/src/tooltip/test/index.tsx

@@ -516,4 +516,82 @@ describe( 'Tooltip', () => {
 			).not.toHaveClass( 'components-tooltip' );
 		} );
 	} );
+
+	describe( 'aria-describedby', () => {
+		it( "should not override the anchor's aria-describedby attribute if specified", async () => {
+			render(
+				<>
+					<Tooltip { ...props }>
+						<button aria-describedby="tooltip-test-description">
+							Tooltip anchor
+						</button>
+					</Tooltip>
+					{ /* eslint-disable-next-line no-restricted-syntax */ }
+					<p id="tooltip-test-description">Tooltip description</p>
+					<button>focus trap outside</button>
+				</>
+			);
+
+			expect(
+				screen.getByRole( 'button', { name: 'Tooltip anchor' } )
+			).toHaveAccessibleDescription( 'Tooltip description' );
+
+			// Focus the anchor, tooltip should show
+			await press.Tab();
+			expect(
+				screen.getByRole( 'button', { name: 'Tooltip anchor' } )
+			).toHaveFocus();
+			await waitExpectTooltipToShow();
+
+			// The anchors should retain its previous accessible description,
+			// since the tooltip shouldn't override it.
+			expect(
+				screen.getByRole( 'button', { name: 'Tooltip anchor' } )
+			).toHaveAccessibleDescription( 'Tooltip description' );
+
+			// Focus the other button, tooltip should hide
+			await press.Tab();
+			expect(
+				screen.getByRole( 'button', { name: 'focus trap outside' } )
+			).toHaveFocus();
+			await waitExpectTooltipToHide();
+		} );
+
+		it( "should not add the aria-describedby attribute to the anchor if the tooltip text matches the anchor's aria-label", async () => {
+			render(
+				<>
+					<Tooltip { ...props }>
+						<button aria-label={ props.text }>
+							Tooltip anchor
+						</button>
+					</Tooltip>
+					<button>focus trap outside</button>
+				</>
+			);
+
+			expect(
+				screen.getByRole( 'button', { name: props.text } )
+			).not.toHaveAccessibleDescription();
+
+			// Focus the anchor, tooltip should show
+			await press.Tab();
+			expect(
+				screen.getByRole( 'button', { name: props.text } )
+			).toHaveFocus();
+			await waitExpectTooltipToShow();
+
+			// The anchor shouldn't have an aria-describedby prop
+			// because its aria-label matches the tooltip text.
+			expect(
+				screen.getByRole( 'button', { name: props.text } )
+			).not.toHaveAccessibleDescription();
+
+			// Focus the other button, tooltip should hide
+			await press.Tab();
+			expect(
+				screen.getByRole( 'button', { name: 'focus trap outside' } )
+			).toHaveFocus();
+			await waitExpectTooltipToHide();
+		} );
+	} );
 } );

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 */