@wordpress/components 21.2.0 → 22.0.0

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

@@ -0,0 +1,103 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	useMergeRefs,
+	useInstanceId,
+	usePrevious,
+	useResizeObserver,
+} from '@wordpress/compose';
+import { forwardRef, useRef, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { View } from '../../view';
+import ToggleGroupControlBackdrop from './toggle-group-control-backdrop';
+import ToggleGroupControlContext from '../context';
+import { useUpdateEffect } from '../../utils/hooks';
+import type { WordPressComponentProps } from '../../ui/context';
+import type { ToggleGroupControlMainControlProps } from '../types';
+
+function UnforwardedToggleGroupControlAsButtonGroup(
+	{
+		children,
+		isAdaptiveWidth,
+		label,
+		onChange,
+		size,
+		value,
+		...otherProps
+	}: WordPressComponentProps<
+		ToggleGroupControlMainControlProps,
+		'div',
+		false
+	>,
+	forwardedRef: ForwardedRef< HTMLDivElement >
+) {
+	const containerRef = useRef();
+	const [ resizeListener, sizes ] = useResizeObserver();
+	const baseId = useInstanceId(
+		ToggleGroupControlAsButtonGroup,
+		'toggle-group-control-as-button-group'
+	).toString();
+	const [ selectedValue, setSelectedValue ] = useState( value );
+	const groupContext = {
+		baseId,
+		state: selectedValue,
+		setState: setSelectedValue,
+	};
+	const previousValue = usePrevious( value );
+
+	// Propagate groupContext.state change.
+	useUpdateEffect( () => {
+		// Avoid calling onChange if groupContext state changed
+		// from incoming value.
+		if ( previousValue !== groupContext.state ) {
+			onChange( groupContext.state );
+		}
+	}, [ groupContext.state ] );
+
+	// Sync incoming value with groupContext.state.
+	useUpdateEffect( () => {
+		if ( value !== groupContext.state ) {
+			groupContext.setState( value );
+		}
+	}, [ value ] );
+
+	return (
+		<ToggleGroupControlContext.Provider
+			value={ {
+				...groupContext,
+				isBlock: ! isAdaptiveWidth,
+				isDeselectable: true,
+				size,
+			} }
+		>
+			<View
+				aria-label={ label }
+				{ ...otherProps }
+				ref={ useMergeRefs( [ containerRef, forwardedRef ] ) }
+				role="group"
+			>
+				{ resizeListener }
+				<ToggleGroupControlBackdrop
+					state={ groupContext.state }
+					containerRef={ containerRef }
+					containerWidth={ sizes.width }
+					isAdaptiveWidth={ isAdaptiveWidth }
+				/>
+				{ children }
+			</View>
+		</ToggleGroupControlContext.Provider>
+	);
+}
+
+export const ToggleGroupControlAsButtonGroup = forwardRef(
+	UnforwardedToggleGroupControlAsButtonGroup
+);

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

@@ -0,0 +1,99 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { RadioGroup, useRadioState } from 'reakit';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	useMergeRefs,
+	useInstanceId,
+	usePrevious,
+	useResizeObserver,
+} from '@wordpress/compose';
+import { forwardRef, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { View } from '../../view';
+import ToggleGroupControlBackdrop from './toggle-group-control-backdrop';
+import ToggleGroupControlContext from '../context';
+import { useUpdateEffect } from '../../utils/hooks';
+import type { WordPressComponentProps } from '../../ui/context';
+import type { ToggleGroupControlMainControlProps } from '../types';
+
+function UnforwardedToggleGroupControlAsRadioGroup(
+	{
+		children,
+		isAdaptiveWidth,
+		label,
+		onChange,
+		size,
+		value,
+		...otherProps
+	}: WordPressComponentProps<
+		ToggleGroupControlMainControlProps,
+		'div',
+		false
+	>,
+	forwardedRef: ForwardedRef< HTMLDivElement >
+) {
+	const containerRef = useRef();
+	const [ resizeListener, sizes ] = useResizeObserver();
+	const baseId = useInstanceId(
+		ToggleGroupControlAsRadioGroup,
+		'toggle-group-control-as-radio-group'
+	).toString();
+	const radio = useRadioState( {
+		baseId,
+		state: value,
+	} );
+	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 ] );
+
+	// Sync incoming value with radio.state.
+	useUpdateEffect( () => {
+		if ( value !== radio.state ) {
+			radio.setState( value );
+		}
+	}, [ value ] );
+
+	return (
+		<ToggleGroupControlContext.Provider
+			value={ { ...radio, isBlock: ! isAdaptiveWidth, size } }
+		>
+			<RadioGroup
+				{ ...radio }
+				aria-label={ label }
+				as={ View }
+				{ ...otherProps }
+				ref={ useMergeRefs( [ containerRef, forwardedRef ] ) }
+			>
+				{ resizeListener }
+				<ToggleGroupControlBackdrop
+					state={ radio.state }
+					containerRef={ containerRef }
+					containerWidth={ sizes.width }
+					isAdaptiveWidth={ isAdaptiveWidth }
+				/>
+				{ children }
+			</RadioGroup>
+		</ToggleGroupControlContext.Provider>
+	);
+}
+
+export const ToggleGroupControlAsRadioGroup = forwardRef(
+	UnforwardedToggleGroupControlAsRadioGroup
+);

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

@@ -2,20 +2,11 @@
  * External dependencies
  */
 import type { ForwardedRef } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { RadioGroup, useRadioState } from 'reakit';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useRef, useMemo } from '@wordpress/element';
-import {
-	useMergeRefs,
-	useInstanceId,
-	usePrevious,
-	useResizeObserver,
-} from '@wordpress/compose';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -25,19 +16,18 @@ import {
 	useContextSystem,
 	WordPressComponentProps,
 } from '../../ui/context';
-import { useUpdateEffect, useCx } from '../../utils/hooks';
-import { View } from '../../view';
+import { useCx } from '../../utils/hooks';
 import BaseControl from '../../base-control';
 import type { ToggleGroupControlProps } from '../types';
-import ToggleGroupControlBackdrop from './toggle-group-control-backdrop';
-import ToggleGroupControlContext from '../context';
 import { VisualLabelWrapper } from './styles';
 import * as styles from './styles';
+import { ToggleGroupControlAsRadioGroup } from './as-radio-group';
+import { ToggleGroupControlAsButtonGroup } from './as-button-group';
 
 const noop = () => {};
 
 function UnconnectedToggleGroupControl(
-	props: WordPressComponentProps< ToggleGroupControlProps, 'input', false >,
+	props: WordPressComponentProps< ToggleGroupControlProps, 'div', false >,
 	forwardedRef: ForwardedRef< any >
 ) {
 	const {
@@ -45,7 +35,7 @@ function UnconnectedToggleGroupControl(
 		className,
 		isAdaptiveWidth = false,
 		isBlock = false,
-		__experimentalIsBorderless = false,
+		isDeselectable = false,
 		label,
 		hideLabelFromVision = false,
 		help,
@@ -56,77 +46,42 @@ function UnconnectedToggleGroupControl(
 		...otherProps
 	} = useContextSystem( props, 'ToggleGroupControl' );
 	const cx = useCx();
-	const containerRef = useRef();
-	const [ resizeListener, sizes ] = useResizeObserver();
-	const baseId = useInstanceId(
-		ToggleGroupControl,
-		'toggle-group-control'
-	).toString();
-	const radio = useRadioState( {
-		baseId,
-		state: value,
-	} );
-	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 ] );
-
-	// Sync incoming value with radio.state.
-	useUpdateEffect( () => {
-		if ( value !== radio.state ) {
-			radio.setState( value );
-		}
-	}, [ value ] );
 
 	const classes = useMemo(
 		() =>
 			cx(
-				styles.ToggleGroupControl( { size } ),
-				! __experimentalIsBorderless && styles.border,
+				styles.ToggleGroupControl( { isDeselectable, size } ),
 				isBlock && styles.block,
 				className
 			),
-		[ className, cx, isBlock, __experimentalIsBorderless, size ]
+		[ className, cx, isBlock, isDeselectable, size ]
 	);
+
+	const MainControl = isDeselectable
+		? ToggleGroupControlAsButtonGroup
+		: ToggleGroupControlAsRadioGroup;
+
 	return (
 		<BaseControl
 			help={ help }
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 		>
-			<ToggleGroupControlContext.Provider
-				value={ { ...radio, isBlock: ! isAdaptiveWidth, size } }
-			>
-				{ ! hideLabelFromVision && (
-					<VisualLabelWrapper>
-						<BaseControl.VisualLabel>
-							{ label }
-						</BaseControl.VisualLabel>
-					</VisualLabelWrapper>
-				) }
-				<RadioGroup
-					{ ...radio }
-					aria-label={ label }
-					as={ View }
-					className={ classes }
-					{ ...otherProps }
-					ref={ useMergeRefs( [ containerRef, forwardedRef ] ) }
-				>
-					{ resizeListener }
-					<ToggleGroupControlBackdrop
-						{ ...radio }
-						containerRef={ containerRef }
-						containerWidth={ sizes.width }
-						isAdaptiveWidth={ isAdaptiveWidth }
-					/>
-					{ children }
-				</RadioGroup>
-			</ToggleGroupControlContext.Provider>
+			{ ! hideLabelFromVision && (
+				<VisualLabelWrapper>
+					<BaseControl.VisualLabel>{ label }</BaseControl.VisualLabel>
+				</VisualLabelWrapper>
+			) }
+			<MainControl
+				{ ...otherProps }
+				children={ children }
+				className={ classes }
+				isAdaptiveWidth={ isAdaptiveWidth }
+				label={ label }
+				onChange={ onChange }
+				ref={ forwardedRef }
+				size={ size }
+				value={ value }
+			/>
 		</BaseControl>
 	);
 }

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

@@ -11,13 +11,14 @@ import { CONFIG, COLORS, reduceMotion } from '../../utils';
 import type { ToggleGroupControlProps } from '../types';
 
 export const ToggleGroupControl = ( {
+	isDeselectable,
 	size,
 }: {
+	isDeselectable?: boolean;
 	size: NonNullable< ToggleGroupControlProps[ 'size' ] >;
 } ) => css`
 	background: ${ COLORS.ui.background };
 	border: 1px solid transparent;
-	border-radius: ${ CONFIG.controlBorderRadius };
 	display: inline-flex;
 	min-width: 0;
 	padding: 2px;
@@ -26,21 +27,23 @@ export const ToggleGroupControl = ( {
 	${ reduceMotion( 'transition' ) }
 
 	${ toggleGroupControlSize( size ) }
-
-	&:focus-within {
-		border-color: ${ COLORS.ui.borderFocus };
-		box-shadow: ${ CONFIG.controlBoxShadowFocus };
-		outline: none;
-		z-index: 1;
-	}
+	${ ! isDeselectable && enclosingBorder }
 `;
 
-export const border = css`
+const enclosingBorder = css`
 	border-color: ${ COLORS.ui.border };
+	border-radius: ${ CONFIG.controlBorderRadius };
 
 	&:hover {
 		border-color: ${ COLORS.ui.borderHover };
 	}
+
+	&:focus-within {
+		border-color: ${ COLORS.ui.borderFocus };
+		box-shadow: ${ CONFIG.controlBoxShadowFocus };
+		outline: none;
+		z-index: 1;
+	}
 `;
 
 export const toggleGroupControlSize = (
@@ -64,7 +67,6 @@ export const block = css`
 export const BackdropView = styled.div`
 	background: ${ COLORS.gray[ 900 ] };
 	border-radius: ${ CONFIG.controlBorderRadius };
-	box-shadow: ${ CONFIG.toggleGroupControlBackdropBoxShadow };
 	left: 0;
 	position: absolute;
 	top: 2px;

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

@@ -58,46 +58,70 @@ function ToggleGroupControlOptionBase(
 		'ToggleGroupControlOptionBase'
 	);
 	const {
-		className,
 		isBlock = false,
+		isDeselectable = false,
+		size = 'default',
+		...otherContextProps /* context props for Ariakit Radio */
+	} = toggleGroupControlContext;
+	const {
+		className,
 		isIcon = false,
 		value,
 		children,
-		size = 'default',
 		showTooltip = false,
-		...radioProps
-	} = {
-		...toggleGroupControlContext,
-		...buttonProps,
-	};
+		...otherButtonProps
+	} = buttonProps;
 
-	const isActive = radioProps.state === value;
+	const isPressed = otherContextProps.state === value;
 	const cx = useCx();
 	const labelViewClasses = cx( isBlock && styles.labelBlock );
 	const classes = cx(
-		styles.buttonView,
-		isIcon && styles.isIcon( { size } ),
-		className,
-		isActive && styles.buttonActive
+		styles.buttonView( { isDeselectable, isIcon, isPressed, size } ),
+		className
 	);
 
+	const buttonOnClick = () => {
+		if ( isDeselectable && isPressed ) {
+			otherContextProps.setState( undefined );
+		} else {
+			otherContextProps.setState( value );
+		}
+	};
+
+	const commonProps = {
+		...otherButtonProps,
+		className: classes,
+		'data-value': value,
+		ref: forwardedRef,
+	};
+
 	return (
-		<LabelView className={ labelViewClasses } data-active={ isActive }>
+		<LabelView className={ labelViewClasses }>
 			<WithToolTip
 				showTooltip={ showTooltip }
-				text={ radioProps[ 'aria-label' ] }
+				text={ otherButtonProps[ 'aria-label' ] }
 			>
-				<Radio
-					{ ...radioProps }
-					as="button"
-					aria-label={ radioProps[ 'aria-label' ] }
-					className={ classes }
-					data-value={ value }
-					ref={ forwardedRef }
-					value={ value }
-				>
-					<ButtonContentView>{ children }</ButtonContentView>
-				</Radio>
+				{ isDeselectable ? (
+					<button
+						{ ...commonProps }
+						aria-pressed={ isPressed }
+						type="button"
+						onClick={ buttonOnClick }
+					>
+						<ButtonContentView>{ children }</ButtonContentView>
+					</button>
+				) : (
+					<Radio
+						{ ...commonProps }
+						{
+							...otherContextProps /* these are only for Ariakit Radio */
+						}
+						as="button"
+						value={ value }
+					>
+						<ButtonContentView>{ children }</ButtonContentView>
+					</Radio>
+				) }
 			</WithToolTip>
 		</LabelView>
 	);

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

@@ -8,7 +8,10 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import { CONFIG, COLORS, reduceMotion } from '../../utils';
-import type { ToggleGroupControlProps } from '../types';
+import type {
+	ToggleGroupControlProps,
+	ToggleGroupControlOptionBaseProps,
+} from '../types';
 
 export const LabelView = styled.div`
 	display: inline-flex;
@@ -21,7 +24,15 @@ export const labelBlock = css`
 	flex: 1;
 `;
 
-export const buttonView = css`
+export const buttonView = ( {
+	isDeselectable,
+	isIcon,
+	isPressed,
+	size,
+}: Pick< ToggleGroupControlProps, 'isDeselectable' | 'size' > &
+	Pick< ToggleGroupControlOptionBaseProps, 'isIcon' > & {
+		isPressed?: boolean;
+	} ) => css`
 	align-items: center;
 	appearance: none;
 	background: transparent;
@@ -53,22 +64,39 @@ export const buttonView = css`
 	&:active {
 		background: ${ CONFIG.toggleGroupControlBackgroundColor };
 	}
+
+	${ isDeselectable && deselectable }
+	${ isIcon && isIconStyles( { size } ) }
+	${ isPressed && pressed }
+`;
+
+const pressed = css`
+	color: ${ COLORS.white };
+
+	&:active {
+		background: transparent;
+	}
+`;
+
+const deselectable = css`
+	color: ${ COLORS.gray[ 900 ] };
+
+	&:focus {
+		box-shadow: inset 0 0 0 1px ${ COLORS.white },
+			0 0 0 ${ CONFIG.borderWidthFocus } ${ COLORS.ui.theme };
+		outline: 2px solid transparent;
+	}
 `;
 
 export const ButtonContentView = styled.div`
+	display: flex;
 	font-size: ${ CONFIG.fontSize };
 	line-height: 1;
 `;
 
-export const separatorActive = css`
-	background: transparent;
-`;
-
-export const isIcon = ( {
-	size,
-}: {
-	size: NonNullable< ToggleGroupControlProps[ 'size' ] >;
-} ) => {
+const isIconStyles = ( {
+	size = 'default',
+}: Pick< ToggleGroupControlProps, 'size' > ) => {
 	const iconButtonSizes = {
 		default: '30px',
 		'__unstable-large': '34px',
@@ -81,11 +109,3 @@ export const isIcon = ( {
 		padding-right: 0;
 	`;
 };
-
-export const buttonActive = css`
-	color: ${ COLORS.white };
-
-	&:active {
-		background: transparent;
-	}
-`;