@wordpress/components 27.6.0 → 28.0.0

package/src/tabs/styles.ts

@@ -10,15 +10,49 @@ import * as Ariakit from '@ariakit/react';
  */
 import { COLORS } from '../utils';
 import { space } from '../utils/space';
-import { reduceMotion } from '../utils/reduce-motion';
 
 export const TabListWrapper = styled.div`
+	position: relative;
 	display: flex;
 	align-items: stretch;
 	flex-direction: row;
 	&[aria-orientation='vertical'] {
 		flex-direction: column;
 	}
+	@media not ( prefers-reduced-motion: reduce ) {
+		&.is-animation-enabled::after {
+			transition-property: left, top, width, height;
+			transition-duration: 0.2s;
+			transition-timing-function: ease-out;
+		}
+	}
+	&::after {
+		content: '';
+		position: absolute;
+		pointer-events: none;
+
+		// Windows high contrast mode.
+		outline: 2px solid transparent;
+		outline-offset: -1px;
+	}
+	&:not( [aria-orientation='vertical'] )::after {
+		left: var( --indicator-left );
+		bottom: 0;
+		width: var( --indicator-width );
+		height: 0;
+		border-bottom: var( --wp-admin-border-width-focus ) solid
+			${ COLORS.theme.accent };
+	}
+	&[aria-orientation='vertical']::after {
+		/* Temporarily hidden, context: https://github.com/WordPress/gutenberg/pull/60560#issuecomment-2126670072 */
+		opacity: 0;
+
+		right: 0;
+		top: var( --indicator-top );
+		height: var( --indicator-height );
+		border-right: var( --wp-admin-border-width-focus ) solid
+			${ COLORS.theme.accent };
+	}
 `;
 
 export const Tab = styled( Ariakit.Tab )`
@@ -51,34 +85,6 @@ export const Tab = styled( Ariakit.Tab )`
 			outline: none;
 		}
 
-		// Tab indicator
-		&::after {
-			content: '';
-			position: absolute;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			pointer-events: none;
-
-			// Draw the indicator.
-			background: ${ COLORS.theme.accent };
-			height: calc( 0 * var( --wp-admin-border-width-focus ) );
-			border-radius: 0;
-
-			// Animation
-			transition: all 0.1s linear;
-			${ reduceMotion( 'transition' ) };
-		}
-
-		// Active.
-		&[aria-selected='true']::after {
-			height: calc( 1 * var( --wp-admin-border-width-focus ) );
-
-			// Windows high contrast mode.
-			outline: 2px solid transparent;
-			outline-offset: -1px;
-		}
-
 		// Focus.
 		&::before {
 			content: '';
@@ -90,17 +96,20 @@ export const Tab = styled( Ariakit.Tab )`
 			pointer-events: none;
 
 			// Draw the indicator.
-			box-shadow: 0 0 0 0 transparent;
+			box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
+				${ COLORS.theme.accent };
 			border-radius: 2px;
 
 			// Animation
-			transition: all 0.1s linear;
-			${ reduceMotion( 'transition' ) };
+			opacity: 0;
+
+			@media not ( prefers-reduced-motion ) {
+				transition: opacity 0.1s linear;
+			}
 		}
 
 		&:focus-visible::before {
-			box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
-				${ COLORS.theme.accent };
+			opacity: 1;
 
 			// Windows high contrast mode.
 			outline: 2px solid transparent;

package/src/tabs/tablist.tsx

@@ -8,7 +8,13 @@ import * as Ariakit from '@ariakit/react';
  * WordPress dependencies
  */
 import warning from '@wordpress/warning';
-import { forwardRef } from '@wordpress/element';
+import {
+	forwardRef,
+	useEffect,
+	useLayoutEffect,
+	useRef,
+	useState,
+} from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -17,19 +23,121 @@ import type { TabListProps } from './types';
 import { useTabsContext } from './context';
 import { TabListWrapper } from './styles';
 import type { WordPressComponentProps } from '../context';
+import clsx from 'clsx';
+
+function useTrackElementOffset(
+	targetElement?: HTMLElement | null,
+	onUpdate?: () => void
+) {
+	const [ indicatorPosition, setIndicatorPosition ] = useState( {
+		left: 0,
+		top: 0,
+		width: 0,
+		height: 0,
+	} );
+
+	// TODO: replace with useEventCallback or similar when officially available.
+	const updateCallbackRef = useRef( onUpdate );
+	useLayoutEffect( () => {
+		updateCallbackRef.current = onUpdate;
+	} );
+
+	const observedElementRef = useRef< HTMLElement >();
+	const resizeObserverRef = useRef< ResizeObserver >();
+	useEffect( () => {
+		if ( targetElement === observedElementRef.current ) {
+			return;
+		}
+
+		observedElementRef.current = targetElement ?? undefined;
+
+		function updateIndicator( element: HTMLElement ) {
+			setIndicatorPosition( {
+				left: element.offsetLeft,
+				top: element.offsetTop,
+				width: element.offsetWidth,
+				height: element.offsetHeight,
+			} );
+			updateCallbackRef.current?.();
+		}
+
+		// Set up a ResizeObserver.
+		if ( ! resizeObserverRef.current ) {
+			resizeObserverRef.current = new ResizeObserver( () => {
+				if ( observedElementRef.current ) {
+					updateIndicator( observedElementRef.current );
+				}
+			} );
+		}
+		const { current: resizeObserver } = resizeObserverRef;
+
+		// Observe new element.
+		if ( targetElement ) {
+			updateIndicator( targetElement );
+			resizeObserver.observe( targetElement );
+		}
+
+		return () => {
+			// Unobserve previous element.
+			if ( observedElementRef.current ) {
+				resizeObserver.unobserve( observedElementRef.current );
+			}
+		};
+	}, [ targetElement ] );
+
+	return indicatorPosition;
+}
+
+type ValueUpdateContext< T > = {
+	previousValue: T;
+};
+
+function useOnValueUpdate< T >(
+	value: T,
+	onUpdate: ( context: ValueUpdateContext< T > ) => void
+) {
+	const previousValueRef = useRef( value );
+
+	// TODO: replace with useEventCallback or similar when officially available.
+	const updateCallbackRef = useRef( onUpdate );
+	useLayoutEffect( () => {
+		updateCallbackRef.current = onUpdate;
+	} );
+
+	useEffect( () => {
+		if ( previousValueRef.current !== value ) {
+			updateCallbackRef.current( {
+				previousValue: previousValueRef.current,
+			} );
+			previousValueRef.current = value;
+		}
+	}, [ value ] );
+}
 
 export const TabList = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< TabListProps, 'div', false >
 >( function TabList( { children, ...otherProps }, ref ) {
 	const context = useTabsContext();
+
+	const selectedId = context?.store.useState( 'selectedId' );
+	const indicatorPosition = useTrackElementOffset(
+		context?.store.item( selectedId )?.element
+	);
+
+	const [ animationEnabled, setAnimationEnabled ] = useState( false );
+	useOnValueUpdate(
+		selectedId,
+		( { previousValue } ) => previousValue && setAnimationEnabled( true )
+	);
+
 	if ( ! context ) {
 		warning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );
 		return null;
 	}
 	const { store } = context;
 
-	const { selectedId, activeId, selectOnMove } = store.useState();
+	const { activeId, selectOnMove } = store.useState();
 	const { setActiveId } = store;
 
 	const onBlur = () => {
@@ -50,9 +158,28 @@ export const TabList = forwardRef<
 		<Ariakit.TabList
 			ref={ ref }
 			store={ store }
-			render={ <TabListWrapper /> }
+			render={
+				<TabListWrapper
+					onTransitionEnd={ ( event ) => {
+						if ( event.pseudoElement === '::after' ) {
+							setAnimationEnabled( false );
+						}
+					} }
+				/>
+			}
 			onBlur={ onBlur }
 			{ ...otherProps }
+			style={ {
+				'--indicator-left': `${ indicatorPosition.left }px`,
+				'--indicator-top': `${ indicatorPosition.top }px`,
+				'--indicator-width': `${ indicatorPosition.width }px`,
+				'--indicator-height': `${ indicatorPosition.height }px`,
+				...otherProps.style,
+			} }
+			className={ clsx(
+				animationEnabled ? 'is-animation-enabled' : '',
+				otherProps.className
+			) }
 		>
 			{ children }
 		</Ariakit.TabList>

package/src/theme/stories/index.story.tsx

@@ -20,7 +20,6 @@ const meta: Meta< typeof Theme > = {
 	},
 	tags: [ 'status-private' ],
 	parameters: {
-		badges: [ 'private' ],
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},

package/src/tools-panel/stories/index.story.tsx

@@ -367,7 +367,7 @@ export const WithSlotFillItems: StoryFn< typeof ToolsPanel > = ( {
 					label="Item for alternate panel"
 					onDeselect={ () => undefined }
 					resetAllFilter={ () => undefined }
-					panelId={ 'intended-for-another-panel-via-shared-slot' }
+					panelId="intended-for-another-panel-via-shared-slot"
 				>
 					<p>
 						This panel item will not be displayed in the demo as its

package/src/tools-panel/tools-panel-header/component.tsx

@@ -224,7 +224,7 @@ const ToolsPanelHeader = (
 									// @ts-expect-error - TODO: If this "tertiary" style is something we really want to allow on MenuItem,
 									// we should rename it and explicitly allow it as an official API. All the other Button variants
 									// don't make sense in a MenuItem context, and should be disallowed.
-									variant={ 'tertiary' }
+									variant="tertiary"
 									onClick={ () => {
 										if ( canResetAll ) {
 											resetAll();

package/src/tooltip/index.tsx

@@ -87,10 +87,7 @@ function UnforwardedTooltip(
 	}
 	computedPlacement = computedPlacement || 'bottom';
 
-	// Removing the `Ariakit` namespace from the hook name allows ESLint to
-	// properly identify the hook, and apply the correct linting rules.
-	const useAriakitTooltipStore = Ariakit.useTooltipStore;
-	const tooltipStore = useAriakitTooltipStore( {
+	const tooltipStore = Ariakit.useTooltipStore( {
 		placement: computedPlacement,
 		showTimeout: delay,
 	} );

package/src/tooltip/test/index.native.js

@@ -4,15 +4,11 @@
 import { fireEvent, render, act } from 'test/helpers';
 import { Keyboard, Text } from 'react-native';
 
-/**
- * WordPress dependencies
- */
-import { SlotFillProvider } from '@wordpress/components';
-
 /**
  * Internal dependencies
  */
 import Tooltip from '../index';
+import { Provider as SlotFillProvider } from '../../slot-fill';
 
 // Minimal tree to render tooltip.
 const TooltipSlot = ( { children } ) => (

package/src/unit-control/test/index.tsx

@@ -138,7 +138,7 @@ describe( 'UnitControl', () => {
 			const user = userEvent.setup();
 			const onChangeSpy = jest.fn();
 
-			render( <UnitControl value={ '50px' } onChange={ onChangeSpy } /> );
+			render( <UnitControl value="50px" onChange={ onChangeSpy } /> );
 
 			const input = getInput();
 			await user.clear( input );
@@ -159,7 +159,7 @@ describe( 'UnitControl', () => {
 			const user = userEvent.setup();
 			const onChangeSpy = jest.fn();
 
-			render( <UnitControl value={ '50px' } onChange={ onChangeSpy } /> );
+			render( <UnitControl value="50px" onChange={ onChangeSpy } /> );
 
 			const input = getInput();
 			await user.type( input, '{ArrowUp}' );
@@ -175,7 +175,7 @@ describe( 'UnitControl', () => {
 			const user = userEvent.setup();
 			const onChangeSpy = jest.fn();
 
-			render( <UnitControl value={ '50px' } onChange={ onChangeSpy } /> );
+			render( <UnitControl value="50px" onChange={ onChangeSpy } /> );
 
 			const input = getInput();
 			await user.type( input, '{Shift>}{ArrowUp}{/Shift}' );
@@ -253,7 +253,7 @@ describe( 'UnitControl', () => {
 
 			render(
 				<UnitControl
-					value={ '33%' }
+					value="33%"
 					onChange={ onChangeSpy }
 					onBlur={ onBlurSpy }
 				/>
@@ -282,7 +282,7 @@ describe( 'UnitControl', () => {
 
 			render(
 				<UnitControl
-					value={ '15px' }
+					value="15px"
 					onChange={ onChangeSpy }
 					isPressEnterToChange
 				/>
@@ -348,7 +348,7 @@ describe( 'UnitControl', () => {
 
 			render(
 				<UnitControl
-					value={ '14rem' }
+					value="14rem"
 					onChange={ onChangeSpy }
 					onUnitChange={ onUnitChangeSpy }
 				/>
@@ -468,7 +468,7 @@ describe( 'UnitControl', () => {
 
 			render(
 				<UnitControl
-					value={ '50%' }
+					value="50%"
 					units={ [ { value: '%', label: '%' } ] }
 					onChange={ onChangeSpy }
 				/>
@@ -570,19 +570,19 @@ describe( 'UnitControl', () => {
 
 	describe( 'Unit Parser', () => {
 		it( 'should update unit after initial render and with new unit prop', async () => {
-			const { rerender } = render( <UnitControl value={ '10%' } /> );
+			const { rerender } = render( <UnitControl value="10%" /> );
 
 			const select = getSelect();
 
 			expect( select.value ).toBe( '%' );
 
-			rerender( <UnitControl value={ '20vh' } /> );
+			rerender( <UnitControl value="20vh" /> );
 
 			expect( select.value ).toBe( 'vh' );
 		} );
 
 		it( 'should fallback to default unit if parsed unit is invalid', () => {
-			render( <UnitControl value={ '10null' } /> );
+			render( <UnitControl value="10null" /> );
 
 			expect( getSelect().value ).toBe( 'px' );
 		} );
@@ -590,7 +590,7 @@ describe( 'UnitControl', () => {
 		it( 'should display valid CSS unit when not explicitly included in units list', () => {
 			render(
 				<UnitControl
-					value={ '10%' }
+					value="10%"
 					units={ [
 						{ value: 'px', label: 'px' },
 						{ value: 'em', label: 'em' },
@@ -616,7 +616,7 @@ describe( 'UnitControl', () => {
 
 				render(
 					<UnitControl
-						value={ '10%' }
+						value="10%"
 						onChange={ onChangeSpy }
 						onUnitChange={ onUnitChangeSpy }
 					/>

package/src/utils/style-mixins.js

@@ -1,6 +1,5 @@
 export { boxSizingReset } from './box-sizing';
 export { rgba } from './colors';
-export { reduceMotion } from './reduce-motion';
 export { rtl } from './rtl';
 export { font } from './font';
 export { breakpoint } from './breakpoint';

package/tsconfig.json

@@ -9,10 +9,7 @@
 			"gutenberg-test-env",
 			"jest",
 			"@testing-library/jest-dom"
-		],
-		// TODO: Remove `skipLibCheck` after resolving duplicate declaration of the `process` variable
-		// between `@types/webpack-env` (from @storybook packages) and `gutenberg-env`.
-		"skipLibCheck": true
+		]
 	},
 	"references": [
 		{ "path": "../a11y" },