@wordpress/components 28.8.6 → 28.10.0

package/src/tabs/tablist.tsx

@@ -8,7 +8,8 @@ import { useStoreState } from '@ariakit/react';
  * WordPress dependencies
  */
 import warning from '@wordpress/warning';
-import { forwardRef, useState } from '@wordpress/element';
+import { forwardRef, useLayoutEffect, useState } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -18,35 +19,75 @@ 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 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,
 	WordPressComponentProps< TabListProps, 'div', false >
 >( function TabList( { children, ...otherProps }, ref ) {
-	const context = useTabsContext();
+	const { store } = useTabsContext() ?? {};
 
-	const tabStoreState = useStoreState( context?.store );
-	const selectedId = tabStoreState?.selectedId;
-	const indicatorPosition = useTrackElementOffsetRect(
-		context?.store.item( selectedId )?.element
+	const selectedId = useStoreState( store, 'selectedId' );
+	const activeId = useStoreState( store, 'activeId' );
+	const selectOnMove = useStoreState( store, 'selectOnMove' );
+	const items = useStoreState( store, 'items' );
+	const [ parent, setParent ] = useState< HTMLElement >();
+	const refs = useMergeRefs( [ ref, setParent ] );
+	const selectedRect = useTrackElementOffsetRect(
+		store?.item( selectedId )?.element
 	);
 
-	const [ animationEnabled, setAnimationEnabled ] = useState( false );
-	useOnValueUpdate(
-		selectedId,
-		( { previousValue } ) => previousValue && setAnimationEnabled( true )
-	);
+	// Track overflow to show scroll hints.
+	const overflow = useTrackOverflow( parent, {
+		first: items?.at( 0 )?.element,
+		last: items?.at( -1 )?.element,
+	} );
 
-	if ( ! context || ! tabStoreState ) {
-		warning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );
-		return null;
-	}
+	// Size, position, and animate the indicator.
+	useAnimatedOffsetRect( parent, selectedRect, {
+		prefix: 'selected',
+		dataAttribute: 'indicator-animated',
+		transitionEndFilter: ( event ) => event.pseudoElement === '::before',
+	} );
 
-	const { store } = context;
-	const { activeId, selectOnMove } = tabStoreState;
-	const { setActiveId } = store;
+	// Make sure selected tab is scrolled into view.
+	useScrollRectIntoView( parent, selectedRect );
 
 	const onBlur = () => {
 		if ( ! selectOnMove ) {
@@ -58,35 +99,27 @@ export const TabList = forwardRef<
 		// that the selected tab will receive keyboard focus when tabbing back into
 		// the tablist.
 		if ( selectedId !== activeId ) {
-			setActiveId( selectedId );
+			store?.setActiveId( selectedId );
 		}
 	};
 
+	if ( ! store ) {
+		warning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );
+		return null;
+	}
+
 	return (
 		<Ariakit.TabList
-			ref={ ref }
+			ref={ refs }
 			store={ store }
-			render={
-				<TabListWrapper
-					onTransitionEnd={ ( event ) => {
-						if ( event.pseudoElement === '::after' ) {
-							setAnimationEnabled( false );
-						}
-					} }
-				/>
-			}
+			render={ <TabListWrapper /> }
 			onBlur={ onBlur }
+			tabIndex={ -1 }
+			data-select-on-move={ selectOnMove ? 'true' : 'false' }
 			{ ...otherProps }
-			style={ {
-				'--indicator-top': indicatorPosition.top,
-				'--indicator-right': indicatorPosition.right,
-				'--indicator-left': indicatorPosition.left,
-				'--indicator-width': indicatorPosition.width,
-				'--indicator-height': indicatorPosition.height,
-				...otherProps.style,
-			} }
 			className={ clsx(
-				animationEnabled ? 'is-animation-enabled' : '',
+				overflow.first && 'is-overflowing-first',
+				overflow.last && 'is-overflowing-last',
 				otherProps.className
 			) }
 		>

package/src/tabs/use-track-overflow.ts

@@ -0,0 +1,76 @@
+/* eslint-disable jsdoc/require-param */
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+import { useEvent } from '@wordpress/compose';
+
+/**
+ * Tracks if an element contains overflow and on which end by tracking the
+ * first and last child elements with an `IntersectionObserver` in relation
+ * to the parent element.
+ *
+ * Note that the returned value will only indicate whether the first or last
+ * element is currently "going out of bounds" but not whether it happens on
+ * the X or Y axis.
+ */
+export function useTrackOverflow(
+	parent: HTMLElement | undefined | null,
+	children: {
+		first: HTMLElement | undefined | null;
+		last: HTMLElement | undefined | null;
+	}
+) {
+	const [ first, setFirst ] = useState( false );
+	const [ last, setLast ] = useState( false );
+	const [ observer, setObserver ] = useState< IntersectionObserver >();
+
+	const callback: IntersectionObserverCallback = useEvent( ( entries ) => {
+		for ( const entry of entries ) {
+			if ( entry.target === children.first ) {
+				setFirst( ! entry.isIntersecting );
+			}
+			if ( entry.target === children.last ) {
+				setLast( ! entry.isIntersecting );
+			}
+		}
+	} );
+
+	useEffect( () => {
+		if ( ! parent || ! window.IntersectionObserver ) {
+			return;
+		}
+		const newObserver = new IntersectionObserver( callback, {
+			root: parent,
+			threshold: 0.9,
+		} );
+		setObserver( newObserver );
+
+		return () => newObserver.disconnect();
+	}, [ callback, parent ] );
+
+	useEffect( () => {
+		if ( ! observer ) {
+			return;
+		}
+
+		if ( children.first ) {
+			observer.observe( children.first );
+		}
+		if ( children.last ) {
+			observer.observe( children.last );
+		}
+
+		return () => {
+			if ( children.first ) {
+				observer.unobserve( children.first );
+			}
+			if ( children.last ) {
+				observer.unobserve( children.last );
+			}
+		};
+	}, [ children.first, children.last, observer ] );
+
+	return { first, last };
+}
+/* eslint-enable jsdoc/require-param */

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/test/index.tsx

@@ -175,6 +175,32 @@ describe.each( [
 		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-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 (