@wordpress/components 27.5.0 → 28.0.0

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

@@ -31,7 +31,6 @@ const meta: Meta< typeof Tabs > = {
 	tags: [ 'status-private' ],
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
-		badges: [ 'private' ],
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},
@@ -69,6 +68,20 @@ const Template: StoryFn< typeof Tabs > = ( props ) => {
 
 export const Default = Template.bind( {} );
 
+const VerticalTemplate: StoryFn< typeof Tabs > = ( props ) => {
+	return (
+		<Tabs orientation="vertical" { ...props }>
+			<Tabs.TabList style={ { maxWidth: '10rem' } }>
+				<Tabs.Tab tabId="tab1">Tab 1</Tabs.Tab>
+				<Tabs.Tab tabId="tab2">Tab 2</Tabs.Tab>
+				<Tabs.Tab tabId="tab3">Tab 3</Tabs.Tab>
+			</Tabs.TabList>
+		</Tabs>
+	);
+};
+
+export const Vertical = VerticalTemplate.bind( {} );
+
 const DisabledTabTemplate: StoryFn< typeof Tabs > = ( props ) => {
 	return (
 		<Tabs { ...props }>
@@ -203,7 +216,7 @@ const CloseButtonTemplate: StoryFn< typeof Tabs > = ( props ) => {
 								<Tabs.Tab tabId="tab3">Tab 3</Tabs.Tab>
 							</Tabs.TabList>
 							<Button
-								variant={ 'tertiary' }
+								variant="tertiary"
 								style={ {
 									marginLeft: 'auto',
 									alignSelf: 'center',
@@ -225,10 +238,7 @@ const CloseButtonTemplate: StoryFn< typeof Tabs > = ( props ) => {
 					</Tabs>
 				</div>
 			) : (
-				<Button
-					variant={ 'tertiary' }
-					onClick={ () => setIsOpen( true ) }
-				>
+				<Button variant="tertiary" onClick={ () => setIsOpen( true ) }>
 					Open Tabs
 				</Button>
 			) }
@@ -269,31 +279,29 @@ const ControlledModeTemplate: StoryFn< typeof Tabs > = ( props ) => {
 					<p>Selected tab: Tab 3</p>
 				</Tabs.TabPanel>
 			</Tabs>
-			{
-				<div style={ { marginTop: '200px' } }>
-					<p>Select a tab:</p>
-					<DropdownMenu
-						controls={ [
-							{
-								onClick: () => setSelectedTabId( 'tab1' ),
-								title: 'Tab 1',
-								isActive: selectedTabId === 'tab1',
-							},
-							{
-								onClick: () => setSelectedTabId( 'tab2' ),
-								title: 'Tab 2',
-								isActive: selectedTabId === 'tab2',
-							},
-							{
-								onClick: () => setSelectedTabId( 'tab3' ),
-								title: 'Tab 3',
-								isActive: selectedTabId === 'tab3',
-							},
-						] }
-						label="Choose a tab. The power is yours."
-					/>
-				</div>
-			}
+			<div style={ { marginTop: '200px' } }>
+				<p>Select a tab:</p>
+				<DropdownMenu
+					controls={ [
+						{
+							onClick: () => setSelectedTabId( 'tab1' ),
+							title: 'Tab 1',
+							isActive: selectedTabId === 'tab1',
+						},
+						{
+							onClick: () => setSelectedTabId( 'tab2' ),
+							title: 'Tab 2',
+							isActive: selectedTabId === 'tab2',
+						},
+						{
+							onClick: () => setSelectedTabId( 'tab3' ),
+							title: 'Tab 3',
+							isActive: selectedTabId === 'tab3',
+						},
+					] }
+					label="Choose a tab. The power is yours."
+				/>
+			</div>
 		</>
 	);
 };

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { ChangeEvent, ForwardedRef } from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -48,7 +48,7 @@ function UnforwardedTextControl(
 			className={ className }
 		>
 			<input
-				className={ classnames( 'components-text-control__input', {
+				className={ clsx( 'components-text-control__input', {
 					'is-next-40px-default-size': __next40pxDefaultSize,
 				} ) }
 				type={ type }

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

@@ -13,14 +13,13 @@ import { HStack } from '../../h-stack';
 
 const meta: Meta< typeof Theme > = {
 	component: Theme,
-	title: 'Components (Experimental)/Theme',
+	title: 'Components/Theme',
 	argTypes: {
 		accent: { control: { type: 'color' } },
 		background: { control: { type: 'color' } },
 	},
 	tags: [ 'status-private' ],
 	parameters: {
-		badges: [ 'private' ],
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},

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

@@ -278,7 +278,6 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             <div
               class="emotion-15"
               role="presentation"
-              style="opacity: 1;"
             />
           </div>
         </div>
@@ -824,7 +823,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
             <div
               class="emotion-15"
               role="presentation"
-              style="opacity: 1;"
             />
           </div>
         </div>

package/src/toolbar/toolbar/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -60,7 +60,7 @@ function UnforwardedToolbar(
 		);
 	}
 	// `ToolbarGroup` already uses components-toolbar for compatibility reasons.
-	const finalClassName = classnames(
+	const finalClassName = clsx(
 		'components-accessible-toolbar',
 		className,
 		variant && `is-${ variant }`

package/src/toolbar/toolbar/style.scss

@@ -88,18 +88,6 @@
 			padding-right: $grid-unit-10;
 			min-width: $block-toolbar-height;
 		}
-
-		// @todo We should extract the tabs styles to the tabs component itself
-		&.components-tab-button {
-			font-weight: 500;
-
-			span {
-				display: inline-block;
-				padding-left: 0;
-				padding-right: 0;
-				position: relative;
-			}
-		}
 	}
 }
 

package/src/toolbar/toolbar-button/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef, MouseEvent as ReactMouseEvent } from 'react';
 
 /**
@@ -55,7 +55,7 @@ function UnforwardedToolbarButton(
 							props.onClick( event );
 						}
 					} }
-					className={ classnames(
+					className={ clsx(
 						'components-toolbar__control',
 						className
 					) }
@@ -76,7 +76,7 @@ function UnforwardedToolbarButton(
 	// Button.
 	return (
 		<ToolbarItem
-			className={ classnames( 'components-toolbar-button', className ) }
+			className={ clsx( 'components-toolbar-button', className ) }
 			{ ...extraProps }
 			{ ...props }
 			ref={ ref }

package/src/toolbar/toolbar-group/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -67,7 +67,7 @@ function ToolbarGroup( {
 		return null;
 	}
 
-	const finalClassName = classnames(
+	const finalClassName = clsx(
 		// Unfortunately, there's legacy code referencing to `.components-toolbar`
 		// So we can't get rid of it
 		accessibleToolbarState

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/hook.ts

@@ -205,18 +205,21 @@ export function useToolsPanel(
 		} );
 	}, [ panelItems, setMenuItems, menuItemOrder ] );
 
-	// Force a menu item to be checked.
-	// This is intended for use with default panel items. They are displayed
-	// separately to optional items and have different display states,
-	// we need to update that when their value is customized.
+	// Updates the status of the panel’s menu items. For default items the
+	// value represents whether it differs from the default and for optional
+	// items whether the item is shown.
 	const flagItemCustomization = useCallback(
-		( label: string, group: ToolsPanelMenuItemKey = 'default' ) => {
+		(
+			value: boolean,
+			label: string,
+			group: ToolsPanelMenuItemKey = 'default'
+		) => {
 			setMenuItems( ( items ) => {
 				const newState = {
 					...items,
 					[ group ]: {
 						...items[ group ],
-						[ label ]: true,
+						[ label ]: value,
 					},
 				};
 				return newState;

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/tools-panel/tools-panel-item/hook.ts

@@ -125,17 +125,21 @@ export function useToolsPanelItem(
 	const isRegistered = menuItems?.[ menuGroup ]?.[ label ] !== undefined;
 
 	const isValueSet = hasValue();
-	const wasValueSet = usePrevious( isValueSet );
-	const newValueSet = isValueSet && ! wasValueSet;
-
-	// Notify the panel when an item's value has been set.
+	// Notify the panel when an item's value has changed except for optional
+	// items without value because the item should not cause itself to hide.
 	useEffect( () => {
-		if ( ! newValueSet ) {
+		if ( ! isShownByDefault && ! isValueSet ) {
 			return;
 		}
 
-		flagItemCustomization( label, menuGroup );
-	}, [ newValueSet, menuGroup, label, flagItemCustomization ] );
+		flagItemCustomization( isValueSet, label, menuGroup );
+	}, [
+		isValueSet,
+		menuGroup,
+		label,
+		flagItemCustomization,
+		isShownByDefault,
+	] );
 
 	// Determine if the panel item's corresponding menu is being toggled and
 	// trigger appropriate callback if it is.
@@ -151,7 +155,7 @@ export function useToolsPanelItem(
 			onSelect?.();
 		}
 
-		if ( ! isMenuItemChecked && wasMenuItemChecked ) {
+		if ( ! isMenuItemChecked && isValueSet && wasMenuItemChecked ) {
 			onDeselect?.();
 		}
 	}, [

package/src/tools-panel/types.ts

@@ -176,6 +176,7 @@ export type ToolsPanelContext = {
 	registerResetAllFilter: ( filter: ResetAllFilter ) => void;
 	deregisterResetAllFilter: ( filter: ResetAllFilter ) => void;
 	flagItemCustomization: (
+		value: boolean,
 		label: string,
 		group?: ToolsPanelMenuItemKey
 	) => void;

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/truncate/hook.ts

@@ -57,7 +57,7 @@ export default function useTruncate(
 		// breaks even when it contains 'unbreakable' content such as long URLs.
 		// See https://github.com/WordPress/gutenberg/issues/60860.
 		const truncateLines = css`
-			word-break: break-all;
+			${ numberOfLines === 1 ? 'word-break: break-all;' : '' }
 			-webkit-box-orient: vertical;
 			-webkit-line-clamp: ${ numberOfLines };
 			display: -webkit-box;

package/src/unit-control/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { KeyboardEvent, ForwardedRef, SyntheticEvent } from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -108,7 +108,7 @@ function UnforwardedUnitControl(
 		}
 	}, [ parsedUnit, setUnit ] );
 
-	const classes = classnames(
+	const classes = clsx(
 		'components-unit-control',
 		// This class is added for legacy purposes to maintain it on the outer
 		// wrapper. See: https://github.com/WordPress/gutenberg/pull/45139