@wordpress/components 26.0.1-next.5a1d1283.0 → 26.0.1

package/src/toggle-group-control/toggle-group-control/as-radio-group.tsx

@@ -3,37 +3,35 @@
  */
 import type { ForwardedRef } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { RadioGroup, useRadioState } from 'reakit';
+import * as Ariakit from '@ariakit/react';
 
 /**
  * WordPress dependencies
  */
-import {
-	useMergeRefs,
-	useInstanceId,
-	usePrevious,
-	useResizeObserver,
-} from '@wordpress/compose';
-import { forwardRef, useRef } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+import { forwardRef, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { View } from '../../view';
-import ToggleGroupControlBackdrop from './toggle-group-control-backdrop';
+import type { WordPressComponentProps } from '../../context';
 import ToggleGroupControlContext from '../context';
-import { useUpdateEffect } from '../../utils/hooks';
-import type { WordPressComponentProps } from '../../ui/context';
-import type { ToggleGroupControlMainControlProps } from '../types';
+import { useComputeControlledOrUncontrolledValue } from './utils';
+import type {
+	ToggleGroupControlMainControlProps,
+	ToggleGroupControlContextProps,
+} from '../types';
 
 function UnforwardedToggleGroupControlAsRadioGroup(
 	{
 		children,
 		isAdaptiveWidth,
 		label,
-		onChange,
+		onChange: onChangeProp,
 		size,
-		value,
+		value: valueProp,
+		id: idProp,
 		...otherProps
 	}: WordPressComponentProps<
 		ToggleGroupControlMainControlProps,
@@ -42,54 +40,60 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 	>,
 	forwardedRef: ForwardedRef< HTMLDivElement >
 ) {
-	const containerRef = useRef();
-	const [ resizeListener, sizes ] = useResizeObserver();
-	const baseId = useInstanceId(
+	const generatedId = useInstanceId(
 		ToggleGroupControlAsRadioGroup,
 		'toggle-group-control-as-radio-group'
-	).toString();
-	const radio = useRadioState( {
-		baseId,
-		state: value,
+	);
+	const baseId = idProp || generatedId;
+
+	// Use a heuristic to understand if the component is being used in controlled
+	// or uncontrolled mode, and consequently:
+	// - when controlled, convert `undefined` values to `''` (ie. "no value")
+	// - use the `value` prop as the `defaultValue` when uncontrolled
+	const { value, defaultValue } =
+		useComputeControlledOrUncontrolledValue( valueProp );
+
+	// `useRadioStore`'s `setValue` prop can be called with `null`, while
+	// the component's `onChange` prop only expects `undefined`
+	const wrappedOnChangeProp = onChangeProp
+		? ( v: string | number | null ) => {
+				onChangeProp( v ?? undefined );
+		  }
+		: undefined;
+
+	const radio = Ariakit.useRadioStore( {
+		defaultValue,
+		value,
+		setValue: wrappedOnChangeProp,
 	} );
-	const previousValue = usePrevious( value );
 
-	// Propagate radio.state change.
-	useUpdateEffect( () => {
-		// Avoid calling onChange if radio state changed
-		// from incoming value.
-		if ( previousValue !== radio.state ) {
-			onChange( radio.state );
-		}
-	}, [ radio.state ] );
+	const selectedValue = radio.useState( 'value' );
+	const setValue = radio.setValue;
 
-	// Sync incoming value with radio.state.
-	useUpdateEffect( () => {
-		if ( value !== radio.state ) {
-			radio.setState( value );
-		}
-	}, [ value ] );
+	const groupContextValue = useMemo(
+		() =>
+			( {
+				baseId,
+				isBlock: ! isAdaptiveWidth,
+				size,
+				value: selectedValue,
+				setValue,
+			} ) as ToggleGroupControlContextProps,
+		[ baseId, isAdaptiveWidth, size, selectedValue, setValue ]
+	);
 
 	return (
-		<ToggleGroupControlContext.Provider
-			value={ { ...radio, isBlock: ! isAdaptiveWidth, size } }
-		>
-			<RadioGroup
-				{ ...radio }
+		<ToggleGroupControlContext.Provider value={ groupContextValue }>
+			<Ariakit.RadioGroup
+				store={ radio }
 				aria-label={ label }
-				as={ View }
+				render={ <View /> }
 				{ ...otherProps }
-				ref={ useMergeRefs( [ containerRef, forwardedRef ] ) }
+				id={ baseId }
+				ref={ forwardedRef }
 			>
-				{ resizeListener }
-				<ToggleGroupControlBackdrop
-					state={ radio.state }
-					containerRef={ containerRef }
-					containerWidth={ sizes.width }
-					isAdaptiveWidth={ isAdaptiveWidth }
-				/>
 				{ children }
-			</RadioGroup>
+			</Ariakit.RadioGroup>
 		</ToggleGroupControlContext.Provider>
 	);
 }

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

@@ -2,17 +2,21 @@
  * External dependencies
  */
 import type { ForwardedRef } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { LayoutGroup } from 'framer-motion';
+
 /**
  * WordPress dependencies
  */
+import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect, useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect, useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks';
 import BaseControl from '../../base-control';
 import type { ToggleGroupControlProps } from '../types';
@@ -21,14 +25,13 @@ import * as styles from './styles';
 import { ToggleGroupControlAsRadioGroup } from './as-radio-group';
 import { ToggleGroupControlAsButtonGroup } from './as-button-group';
 
-const noop = () => {};
-
 function UnconnectedToggleGroupControl(
 	props: WordPressComponentProps< ToggleGroupControlProps, 'div', false >,
 	forwardedRef: ForwardedRef< any >
 ) {
 	const {
 		__nextHasNoMarginBottom = false,
+		__next40pxDefaultSize = false,
 		className,
 		isAdaptiveWidth = false,
 		isBlock = false,
@@ -36,22 +39,31 @@ function UnconnectedToggleGroupControl(
 		label,
 		hideLabelFromVision = false,
 		help,
-		onChange = noop,
+		onChange,
 		size = 'default',
 		value,
 		children,
 		...otherProps
 	} = useContextSystem( props, 'ToggleGroupControl' );
+
+	const baseId = useInstanceId( ToggleGroupControl, 'toggle-group-control' );
+	const normalizedSize =
+		__next40pxDefaultSize && size === 'default' ? '__unstable-large' : size;
+
 	const cx = useCx();
 
 	const classes = useMemo(
 		() =>
 			cx(
-				styles.ToggleGroupControl( { isBlock, isDeselectable, size } ),
+				styles.toggleGroupControl( {
+					isBlock,
+					isDeselectable,
+					size: normalizedSize,
+				} ),
 				isBlock && styles.block,
 				className
 			),
-		[ className, cx, isBlock, isDeselectable, size ]
+		[ className, cx, isBlock, isDeselectable, normalizedSize ]
 	);
 
 	const MainControl = isDeselectable
@@ -70,15 +82,16 @@ function UnconnectedToggleGroupControl(
 			) }
 			<MainControl
 				{ ...otherProps }
-				children={ children }
 				className={ classes }
 				isAdaptiveWidth={ isAdaptiveWidth }
 				label={ label }
 				onChange={ onChange }
 				ref={ forwardedRef }
-				size={ size }
+				size={ normalizedSize }
 				value={ value }
-			/>
+			>
+				<LayoutGroup id={ baseId }>{ children }</LayoutGroup>
+			</MainControl>
 		</BaseControl>
 	);
 }

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

@@ -7,10 +7,10 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import { CONFIG, COLORS, reduceMotion } from '../../utils';
+import { CONFIG, COLORS } from '../../utils';
 import type { ToggleGroupControlProps } from '../types';
 
-export const ToggleGroupControl = ( {
+export const toggleGroupControl = ( {
 	isBlock,
 	isDeselectable,
 	size,
@@ -22,10 +22,7 @@ export const ToggleGroupControl = ( {
 	border-radius: ${ CONFIG.controlBorderRadius };
 	display: inline-flex;
 	min-width: 0;
-	padding: 2px;
 	position: relative;
-	transition: transform ${ CONFIG.transitionDurationFastest } linear;
-	${ reduceMotion( 'transition' ) }
 
 	${ toggleGroupControlSize( size ) }
 	${ ! isDeselectable && enclosingBorders( isBlock ) }
@@ -57,14 +54,18 @@ const enclosingBorders = ( isBlock: ToggleGroupControlProps[ 'isBlock' ] ) => {
 export const toggleGroupControlSize = (
 	size: NonNullable< ToggleGroupControlProps[ 'size' ] >
 ) => {
-	const heights = {
-		default: '36px',
-		'__unstable-large': '40px',
+	const styles = {
+		default: css`
+			min-height: 36px;
+			padding: 2px;
+		`,
+		'__unstable-large': css`
+			min-height: 40px;
+			padding: 3px;
+		`,
 	};
 
-	return css`
-		min-height: ${ heights[ size ] };
-	`;
+	return styles[ size ];
 };
 
 export const block = css`
@@ -72,21 +73,6 @@ export const block = css`
 	width: 100%;
 `;
 
-export const BackdropView = styled.div`
-	background: ${ COLORS.gray[ 900 ] };
-	border-radius: ${ CONFIG.controlBorderRadius };
-	left: 0;
-	position: absolute;
-	top: 2px;
-	bottom: 2px;
-	transition: transform ${ CONFIG.transitionDurationFast } ease;
-	${ reduceMotion( 'transition' ) }
-	z-index: 1;
-	// Windows High Contrast mode will show this outline, but not the box-shadow.
-	outline: 2px solid transparent;
-	outline-offset: -3px;
-`;
-
 export const VisualLabelWrapper = styled.div`
 	// Makes the inline label be the correct height, equivalent to setting line-height: 0
 	display: flex;

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

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { usePrevious } from '@wordpress/compose';
+import { useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { ToggleGroupControlProps } from '../types';
+
+type ValueProp = ToggleGroupControlProps[ 'value' ];
+
+/**
+ * Used to determine, via an internal heuristics, whether an `undefined` value
+ * received for the `value` prop should be interpreted as the component being
+ * used in uncontrolled mode, or as an "empty" value for controlled mode.
+ *
+ * @param valueProp The received `value`
+ */
+export function useComputeControlledOrUncontrolledValue(
+	valueProp: ValueProp
+): { value: ValueProp; defaultValue: ValueProp } {
+	const isInitialRender = useRef( true );
+	const prevValueProp = usePrevious( valueProp );
+	const prevIsControlled = useRef( false );
+
+	useEffect( () => {
+		if ( isInitialRender.current ) {
+			isInitialRender.current = false;
+		}
+	}, [] );
+
+	// Assume the component is being used in controlled mode on the first re-render
+	// that has a different `valueProp` from the previous render.
+	const isControlled =
+		prevIsControlled.current ||
+		( ! isInitialRender.current && prevValueProp !== valueProp );
+	useEffect( () => {
+		prevIsControlled.current = isControlled;
+	}, [ isControlled ] );
+
+	if ( isControlled ) {
+		// When in controlled mode, use `''` instead of `undefined`
+		return { value: valueProp ?? '', defaultValue: undefined };
+	}
+
+	// When in uncontrolled mode, the `value` should be intended as the initial value
+	return { value: undefined, defaultValue: valueProp };
+}

package/src/toggle-group-control/toggle-group-control-option/README.md

@@ -4,7 +4,7 @@
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>
 
-`ToggleGroupControlOption` is a form component and is meant to be used as a child of [`ToggleGroupControl`]((/packages/components/src/toggle-group-control/toggle-group-control/README.md)).
+`ToggleGroupControlOption` is a form component and is meant to be used as a child of [`ToggleGroupControl`](/packages/components/src/toggle-group-control/toggle-group-control/README.md).
 
 
 ## Usage

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

@@ -11,7 +11,7 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
 import type { ToggleGroupControlOptionProps } from '../types';
 import { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';
 

package/src/toggle-group-control/toggle-group-control-option-base/README.md

@@ -4,7 +4,7 @@
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>
 
-`ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal, generic component for any children of [`ToggleGroupControl`](<(/packages/components/src/toggle-group-control/toggle-group-control/README.md)>).
+`ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal, generic component for any children of [`ToggleGroupControl`](/packages/components/src/toggle-group-control/toggle-group-control/README.md).
 
 ## Props
 

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

@@ -3,18 +3,21 @@
  */
 import type { ForwardedRef } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { Radio } from 'reakit';
+import * as Ariakit from '@ariakit/react';
+// eslint-disable-next-line no-restricted-imports
+import { motion, useReducedMotion } from 'framer-motion';
 
 /**
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect, useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect, useContextSystem } from '../../context';
 import type {
 	ToggleGroupControlOptionBaseProps,
 	WithToolTipProps,
@@ -26,10 +29,16 @@ 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 (
-			<Tooltip text={ text } position="top center">
+			<Tooltip text={ text } placement="top">
 				{ children }
 			</Tooltip>
 		);
@@ -38,56 +47,78 @@ const WithToolTip = ( { showTooltip, text, children }: WithToolTipProps ) => {
 };
 
 function ToggleGroupControlOptionBase(
-	props: WordPressComponentProps<
-		ToggleGroupControlOptionBaseProps,
-		'button',
-		false
+	props: Omit<
+		WordPressComponentProps<
+			ToggleGroupControlOptionBaseProps,
+			'button',
+			false
+		>,
+		// the element's id is generated internally
+		'id'
 	>,
 	forwardedRef: ForwardedRef< any >
 ) {
+	const shouldReduceMotion = useReducedMotion();
 	const toggleGroupControlContext = useToggleGroupControlContext();
+
 	const id = useInstanceId(
 		ToggleGroupControlOptionBase,
 		toggleGroupControlContext.baseId || 'toggle-group-control-option-base'
-	) as string;
+	);
+
 	const buttonProps = useContextSystem(
 		{ ...props, id },
 		'ToggleGroupControlOptionBase'
 	);
+
 	const {
 		isBlock = false,
 		isDeselectable = false,
 		size = 'default',
-		...otherContextProps /* context props for Ariakit Radio */
 	} = toggleGroupControlContext;
+
 	const {
 		className,
 		isIcon = false,
 		value,
 		children,
 		showTooltip = false,
+		onFocus: onFocusProp,
 		...otherButtonProps
 	} = buttonProps;
 
-	const isPressed = otherContextProps.state === value;
+	const isPressed = toggleGroupControlContext.value === value;
 	const cx = useCx();
-	const labelViewClasses = cx( isBlock && styles.labelBlock );
-	const classes = cx(
-		styles.buttonView( { isDeselectable, isIcon, isPressed, size } ),
-		className
+	const labelViewClasses = useMemo(
+		() => cx( isBlock && styles.labelBlock ),
+		[ cx, isBlock ]
 	);
+	const itemClasses = useMemo(
+		() =>
+			cx(
+				styles.buttonView( {
+					isDeselectable,
+					isIcon,
+					isPressed,
+					size,
+				} ),
+				className
+			),
+		[ cx, isDeselectable, isIcon, isPressed, size, className ]
+	);
+	const backdropClasses = useMemo( () => cx( styles.backdropView ), [ cx ] );
 
 	const buttonOnClick = () => {
 		if ( isDeselectable && isPressed ) {
-			otherContextProps.setState( undefined );
+			toggleGroupControlContext.setValue( undefined );
 		} else {
-			otherContextProps.setState( value );
+			toggleGroupControlContext.setValue( value );
 		}
 	};
 
 	const commonProps = {
 		...otherButtonProps,
-		className: classes,
+		className: itemClasses,
 		'data-value': value,
 		ref: forwardedRef,
 	};
@@ -101,6 +132,7 @@ function ToggleGroupControlOptionBase(
 				{ isDeselectable ? (
 					<button
 						{ ...commonProps }
+						onFocus={ onFocusProp }
 						aria-pressed={ isPressed }
 						type="button"
 						onClick={ buttonOnClick }
@@ -108,18 +140,37 @@ function ToggleGroupControlOptionBase(
 						<ButtonContentView>{ children }</ButtonContentView>
 					</button>
 				) : (
-					<Radio
-						{ ...commonProps }
-						{
-							...otherContextProps /* these are only for Ariakit Radio */
+					<Ariakit.Radio
+						render={
+							<button
+								type="button"
+								{ ...commonProps }
+								onFocus={ ( event ) => {
+									onFocusProp?.( event );
+									if ( event.defaultPrevented ) return;
+									toggleGroupControlContext.setValue( value );
+								} }
+							/>
 						}
-						as="button"
 						value={ value }
 					>
 						<ButtonContentView>{ children }</ButtonContentView>
-					</Radio>
+					</Ariakit.Radio>
 				) }
 			</WithToolTip>
+			{ /* Animated backdrop using framer motion's shared layout animation */ }
+			{ isPressed ? (
+				<motion.div
+					className={ backdropClasses }
+					transition={
+						shouldReduceMotion
+							? REDUCED_MOTION_TRANSITION_CONFIG
+							: undefined
+					}
+					role="presentation"
+					layoutId={ LAYOUT_ID }
+				/>
+			) : null }
 		</LabelView>
 	);
 }

package/src/toggle-group-control/toggle-group-control-option-base/styles.ts

@@ -50,8 +50,10 @@ export const buttonView = ( {
 	padding: 0 12px;
 	position: relative;
 	text-align: center;
-	transition: background ${ CONFIG.transitionDurationFast } linear,
-		color ${ CONFIG.transitionDurationFast } linear, font-weight 60ms linear;
+	transition:
+		background ${ CONFIG.transitionDurationFast } linear,
+		color ${ CONFIG.transitionDurationFast } linear,
+		font-weight 60ms linear;
 	${ reduceMotion( 'transition' ) }
 	user-select: none;
 	width: 100%;
@@ -82,7 +84,8 @@ const deselectable = css`
 	color: ${ COLORS.gray[ 900 ] };
 
 	&:focus {
-		box-shadow: inset 0 0 0 1px ${ COLORS.white },
+		box-shadow:
+			inset 0 0 0 1px ${ COLORS.white },
 			0 0 0 ${ CONFIG.borderWidthFocus } ${ COLORS.theme.accent };
 		outline: 2px solid transparent;
 	}
@@ -99,13 +102,25 @@ const isIconStyles = ( {
 }: Pick< ToggleGroupControlProps, 'size' > ) => {
 	const iconButtonSizes = {
 		default: '30px',
-		'__unstable-large': '34px',
+		'__unstable-large': '32px',
 	};
 
 	return css`
 		color: ${ COLORS.gray[ 900 ] };
-		width: ${ iconButtonSizes[ size ] };
+		height: ${ iconButtonSizes[ size ] };
+		aspect-ratio: 1;
 		padding-left: 0;
 		padding-right: 0;
 	`;
 };
+
+export const backdropView = css`
+	background: ${ COLORS.gray[ 900 ] };
+	border-radius: ${ CONFIG.controlBorderRadius };
+	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/toggle-group-control-option-icon/README.md

@@ -4,7 +4,7 @@
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>
 
-`ToggleGroupControlOptionIcon` is a form component which is meant to be used as a child of [`ToggleGroupControl`] and displays an icon(<(/packages/components/src/toggle-group-control/toggle-group-control/README.md)>).
+`ToggleGroupControlOptionIcon` is a form component which is meant to be used as a child of [`ToggleGroupControl`](/packages/components/src/toggle-group-control/toggle-group-control/README.md) and displays an icon.
 
 ## Usage
 
@@ -41,7 +41,7 @@ The value of the `ToggleGroupControlOption`.
 
 -   Required: Yes
 
-### `icon`: `WPComponent`
+### `icon`: `Component`
 
 Icon displayed as the content of the option. Usually one of the icons from the `@wordpress/icons` package, or a custom React `<svg>` icon.
 

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

@@ -11,7 +11,7 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
 import type { ToggleGroupControlOptionIconProps } from '../types';
 import { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';
 import Icon from '../../icon';