@wordpress/components 24.0.0 → 25.0.0

package/src/dropdown-menu-v2/types.ts

@@ -0,0 +1,250 @@
+/**
+ * External dependencies
+ */
+import type * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+export type DropdownMenuProps = {
+	/**
+	 * The open state of the dropdown menu when it is initially rendered. Use when
+	 * you do not need to control its open state.
+	 *
+	 */
+	defaultOpen?: DropdownMenuPrimitive.DropdownMenuProps[ 'defaultOpen' ];
+	/**
+	 * The controlled open state of the dropdown menu. Must be used in conjunction
+	 * with `onOpenChange`.
+	 */
+	open?: DropdownMenuPrimitive.DropdownMenuProps[ 'open' ];
+	/**
+	 * Event handler called when the open state of the dropdown menu changes.
+	 */
+	onOpenChange?: DropdownMenuPrimitive.DropdownMenuProps[ 'onOpenChange' ];
+	/**
+	 * The modality of the dropdown menu. When set to true, interaction with
+	 * outside elements will be disabled and only menu content will be visible to
+	 * screen readers.
+	 *
+	 * @default true
+	 */
+	modal?: DropdownMenuPrimitive.DropdownMenuProps[ 'modal' ];
+	/**
+	 * The preferred side of the trigger to render against when open.
+	 * Will be reversed when collisions occur and avoidCollisions is enabled.
+	 *
+	 * @default 'bottom'
+	 */
+	side?: DropdownMenuPrimitive.DropdownMenuContentProps[ 'side' ];
+	/**
+	 * The distance in pixels from the trigger.
+	 *
+	 * @default 0
+	 */
+	sideOffset?: DropdownMenuPrimitive.DropdownMenuContentProps[ 'sideOffset' ];
+	/**
+	 * The preferred alignment against the trigger.
+	 * May change when collisions occur.
+	 *
+	 * @default 'center'
+	 */
+	align?: DropdownMenuPrimitive.DropdownMenuContentProps[ 'align' ];
+	/**
+	 * An offset in pixels from the "start" or "end" alignment options.
+	 *
+	 * @default 0
+	 */
+	alignOffset?: DropdownMenuPrimitive.DropdownMenuContentProps[ 'alignOffset' ];
+	/**
+	 * The trigger button.
+	 */
+	trigger: React.ReactNode;
+	/**
+	 * The contents of the dropdown
+	 */
+	children: React.ReactNode;
+};
+
+export type DropdownSubMenuTriggerProps = {
+	/**
+	 * The contents of the item.
+	 */
+	children: React.ReactNode;
+	/**
+	 * The contents of the item's prefix.
+	 */
+	prefix?: React.ReactNode;
+	/**
+	 * The contents of the item's suffix.
+	 *
+	 * @default The standard chevron icon for a submenu trigger.
+	 */
+	suffix?: React.ReactNode;
+};
+
+export type DropdownSubMenuProps = {
+	/**
+	 * The open state of the submenu when it is initially rendered. Use when you
+	 * do not need to control its open state.
+	 */
+	defaultOpen?: DropdownMenuPrimitive.DropdownMenuSubProps[ 'defaultOpen' ];
+	/**
+	 * The controlled open state of the submenu. Must be used in conjunction with
+	 * `onOpenChange`.
+	 */
+	open?: DropdownMenuPrimitive.DropdownMenuSubProps[ 'open' ];
+	/**
+	 * Event handler called when the open state of the submenu changes.
+	 */
+	onOpenChange?: DropdownMenuPrimitive.DropdownMenuSubProps[ 'onOpenChange' ];
+	/**
+	 * When `true`, prevents the user from interacting with the item.
+	 */
+	disabled?: DropdownMenuPrimitive.DropdownMenuSubTriggerProps[ 'disabled' ];
+	/**
+	 * Optional text used for typeahead purposes for the trigger. By default the typeahead
+	 * behavior will use the `.textContent` of the trigger. Use this when the content
+	 * is complex, or you have non-textual content inside.
+	 */
+	textValue?: DropdownMenuPrimitive.DropdownMenuSubTriggerProps[ 'textValue' ];
+	/**
+	 * The contents rendered inside the trigger. The trigger should be
+	 * an instance of the `DropdownSubMenuTriggerProps` component.
+	 */
+	trigger: React.ReactNode;
+	/**
+	 * The contents of the dropdown sub menu
+	 */
+	children: React.ReactNode;
+};
+
+export type DropdownMenuItemProps = {
+	/**
+	 * When true, prevents the user from interacting with the item.
+	 *
+	 * @default false
+	 */
+	disabled?: DropdownMenuPrimitive.DropdownMenuItemProps[ 'disabled' ];
+	/**
+	 * Event handler called when the user selects an item (via mouse or keyboard).
+	 * Calling `event.preventDefault` in this handler will prevent the dropdown
+	 * menu from closing when selecting that item.
+	 */
+	onSelect?: DropdownMenuPrimitive.DropdownMenuItemProps[ 'onSelect' ];
+	/**
+	 * Optional text used for typeahead purposes. By default the typeahead
+	 * behavior will use the `.textContent` of the item. Use this when the content
+	 * is complex, or you have non-textual content inside.
+	 */
+	textValue?: DropdownMenuPrimitive.DropdownMenuItemProps[ 'textValue' ];
+	/**
+	 * The contents of the item
+	 */
+	children: React.ReactNode;
+	/**
+	 * The contents of the item's prefix
+	 */
+	prefix?: React.ReactNode;
+	/**
+	 * The contents of the item's suffix
+	 */
+	suffix?: React.ReactNode;
+};
+
+export type DropdownMenuCheckboxItemProps = {
+	/**
+	 * The controlled checked state of the item.
+	 * Must be used in conjunction with `onCheckedChange`.
+	 *
+	 * @default false
+	 */
+	checked?: DropdownMenuPrimitive.DropdownMenuCheckboxItemProps[ 'checked' ];
+	/**
+	 * Event handler called when the checked state changes.
+	 */
+	onCheckedChange?: DropdownMenuPrimitive.DropdownMenuCheckboxItemProps[ 'onCheckedChange' ];
+	/**
+	 * When `true`, prevents the user from interacting with the item.
+	 */
+	disabled?: DropdownMenuPrimitive.DropdownMenuCheckboxItemProps[ 'disabled' ];
+	/**
+	 * Event handler called when the user selects an item (via mouse or keyboard).
+	 * Calling `event.preventDefault` in this handler will prevent the dropdown
+	 * 	menu from closing when selecting that item.
+	 */
+	onSelect?: DropdownMenuPrimitive.DropdownMenuCheckboxItemProps[ 'onSelect' ];
+	/**
+	 * Optional text used for typeahead purposes. By default the typeahead
+	 * behavior will use the `.textContent` of the item. Use this when the content
+	 * is complex, or you have non-textual content inside.
+	 */
+	textValue?: DropdownMenuPrimitive.DropdownMenuCheckboxItemProps[ 'textValue' ];
+	/**
+	 * The contents of the checkbox item
+	 */
+	children: React.ReactNode;
+	/**
+	 * The contents of the checkbox item's suffix
+	 */
+	suffix?: React.ReactNode;
+};
+
+export type DropdownMenuRadioGroupProps = {
+	/**
+	 * The value of the selected item in the group.
+	 */
+	value?: DropdownMenuPrimitive.DropdownMenuRadioGroupProps[ 'value' ];
+	/**
+	 * Event handler called when the value changes.
+	 */
+	onValueChange?: DropdownMenuPrimitive.DropdownMenuRadioGroupProps[ 'onValueChange' ];
+	/**
+	 * The contents of the radio group
+	 */
+	children: React.ReactNode;
+};
+
+export type DropdownMenuRadioItemProps = {
+	/**
+	 * The unique value of the item.
+	 */
+	value: DropdownMenuPrimitive.DropdownMenuRadioItemProps[ 'value' ];
+	/**
+	 * When `true`, prevents the user from interacting with the item.
+	 */
+	disabled?: DropdownMenuPrimitive.DropdownMenuRadioItemProps[ 'disabled' ];
+	/**
+	 * Event handler called when the user selects an item (via mouse or keyboard).
+	 * Calling `event.preventDefault` in this handler will prevent the dropdown
+	 * menu from closing when selecting that item.
+	 */
+	onSelect?: DropdownMenuPrimitive.DropdownMenuRadioItemProps[ 'onSelect' ];
+	/**
+	 * Optional text used for typeahead purposes. By default the typeahead
+	 * behavior will use the `.textContent` of the item. Use this when the content
+	 * is complex, or you have non-textual content inside.
+	 */
+	textValue?: DropdownMenuPrimitive.DropdownMenuRadioItemProps[ 'textValue' ];
+	/**
+	 * The contents of the radio item
+	 */
+	children: React.ReactNode;
+	/**
+	 * The contents of the radio item's suffix
+	 */
+	suffix?: React.ReactNode;
+};
+
+export type DropdownMenuLabelProps = {
+	/**
+	 * The contents of the label
+	 */
+	children: React.ReactNode;
+};
+
+export type DropdownMenuGroupProps = {
+	/**
+	 * The contents of the group
+	 */
+	children: React.ReactNode;
+};
+
+export type DropdownMenuSeparatorProps = {};

package/src/index.native.js

@@ -94,7 +94,6 @@ export { default as HTMLTextInput } from './mobile/html-text-input';
 export { default as KeyboardAvoidingView } from './mobile/keyboard-avoiding-view';
 export { default as KeyboardAwareFlatList } from './mobile/keyboard-aware-flat-list';
 export { default as Picker } from './mobile/picker';
-export { default as ReadableContentView } from './mobile/readable-content-view';
 export { default as CycleSelectControl } from './mobile/cycle-select-control';
 export { default as Gradient } from './mobile/gradient';
 export { default as ColorSettings } from './mobile/color-settings';

package/src/input-control/styles/input-control-styles.tsx

@@ -270,9 +270,14 @@ const backdropFocusedStyles = ( {
 	let borderColor = isFocused ? COLORS.ui.borderFocus : COLORS.ui.border;
 
 	let boxShadow;
+	let outline;
+	let outlineOffset;
 
 	if ( isFocused ) {
 		boxShadow = `0 0 0 1px ${ COLORS.ui.borderFocus } inset`;
+		// Windows High Contrast mode will show this outline, but not the box-shadow.
+		outline = `2px solid transparent`;
+		outlineOffset = `-2px`;
 	}
 
 	if ( disabled ) {
@@ -284,6 +289,8 @@ const backdropFocusedStyles = ( {
 		borderColor,
 		borderStyle: 'solid',
 		borderWidth: 1,
+		outline,
+		outlineOffset,
 	} );
 };
 

package/src/mobile/bottom-sheet/cell.native.js

@@ -92,6 +92,7 @@ class BottomSheetCell extends Component {
 			accessibilityHint,
 			accessibilityRole,
 			disabled = false,
+			disabledStyle = styles.cellDisabled,
 			activeOpacity,
 			onPress,
 			onLongPress,
@@ -223,11 +224,22 @@ class BottomSheetCell extends Component {
 				styles.cellValue,
 				styles.cellTextDark
 			);
-			const finalStyle = {
+			const textInputStyle = {
 				...cellValueStyle,
 				...valueStyle,
 				...styleRTL,
 			};
+			const placeholderTextColor = disabled
+				? this.props.getStylesFromColorScheme(
+						styles.placeholderColorDisabled,
+						styles.placeholderColorDisabledDark
+				  ).color
+				: styles.placeholderColor.color;
+			const textStyle = {
+				...( disabled && styles.cellDisabled ),
+				...cellValueStyle,
+				...valueStyle,
+			};
 
 			// To be able to show the `middle` ellipsizeMode on editable cells
 			// we show the TextInput just when the user wants to edit the value,
@@ -238,10 +250,10 @@ class BottomSheetCell extends Component {
 				<TextInput
 					ref={ ( c ) => ( this._valueTextInput = c ) }
 					numberOfLines={ 1 }
-					style={ finalStyle }
+					style={ textInputStyle }
 					value={ value }
 					placeholder={ valuePlaceholder }
-					placeholderTextColor={ '#87a6bc' }
+					placeholderTextColor={ placeholderTextColor }
 					onChangeText={ onChangeValue }
 					editable={ isValueEditable }
 					pointerEvents={
@@ -251,11 +263,12 @@ class BottomSheetCell extends Component {
 					onBlur={ finishEditing }
 					onSubmitEditing={ onSubmit }
 					keyboardType={ this.typeToKeyboardType( type, step ) }
+					disabled={ disabled }
 					{ ...valueProps }
 				/>
 			) : (
 				<Text
-					style={ { ...cellValueStyle, ...valueStyle } }
+					style={ textStyle }
 					numberOfLines={ 1 }
 					ellipsizeMode={ 'middle' }
 				>
@@ -418,7 +431,15 @@ class BottomSheetCell extends Component {
 						/>
 					) }
 					{ showValue && getValueComponent() }
-					{ children }
+					<View
+						style={ [
+							disabled && disabledStyle,
+							styles.cellRowContainer,
+						] }
+						pointerEvents={ disabled ? 'none' : 'auto' }
+					>
+						{ children }
+					</View>
 				</View>
 				{ help && (
 					<Text style={ [ cellHelpStyle, styles.placeholderColor ] }>

package/src/mobile/bottom-sheet/range-cell.native.js

@@ -218,6 +218,7 @@ class BottomSheetRangeCell extends Component {
 						activeOpacity={ 1 }
 						accessible={ false }
 						valueStyle={ styles.valueStyle }
+						disabled={ disabled }
 					>
 						<View style={ containerStyle }>
 							{ preview }
@@ -225,7 +226,7 @@ class BottomSheetRangeCell extends Component {
 								testID={ `Slider ${ cellProps.label }` }
 								value={ sliderValue }
 								defaultValue={ defaultValue }
-								disabled={ disabled }
+								disabled={ disabled && ! isIOS }
 								step={ step }
 								minimumValue={ minimumValue }
 								maximumValue={ maximumValue }

package/src/mobile/bottom-sheet/stepper-cell/index.native.js

@@ -144,6 +144,7 @@ class BottomSheetStepperCell extends Component {
 			openUnitPicker,
 			decimalNum,
 			cellContainerStyle,
+			disabled,
 		} = this.props;
 		const { inputValue } = this.state;
 		const isMinValue = value === min;
@@ -215,6 +216,7 @@ class BottomSheetStepperCell extends Component {
 						labelStyle={ labelStyle }
 						leftAlign={ true }
 						separatorType={ separatorType }
+						disabled={ disabled }
 					>
 						<View style={ preview && containerStyle }>
 							{ preview }

package/src/mobile/bottom-sheet/styles.native.scss

@@ -284,7 +284,15 @@
 
 // used in both light and dark modes
 .placeholderColor {
-	color: #87a6bc;
+	color: $gray;
+}
+
+.placeholderColorDisabled {
+	color: lighten($gray, 20%);
+}
+
+.placeholderColorDisabledDark {
+	color: lighten($gray-dark, 10%);
 }
 
 .applyButton {
@@ -317,3 +325,7 @@
 .cellSubLabelTextDark {
 	color: $sub-heading-dark;
 }
+
+.cellDisabled {
+	opacity: 0.3;
+}

package/src/mobile/bottom-sheet/switch-cell.native.js

@@ -12,8 +12,10 @@ import { __, _x, sprintf } from '@wordpress/i18n';
  */
 import Cell from './cell';
 
+const EMPTY_STYLE = {};
+
 export default function BottomSheetSwitchCell( props ) {
-	const { value, onValueChange, ...cellProps } = props;
+	const { value, onValueChange, disabled, ...cellProps } = props;
 
 	const onPress = () => {
 		onValueChange( ! value );
@@ -60,8 +62,14 @@ export default function BottomSheetSwitchCell( props ) {
 			onPress={ onPress }
 			editable={ false }
 			value={ '' }
+			disabled={ disabled }
+			disabledStyle={ EMPTY_STYLE }
 		>
-			<Switch value={ value } onValueChange={ onValueChange } />
+			<Switch
+				value={ value }
+				onValueChange={ onValueChange }
+				disabled={ disabled }
+			/>
 		</Cell>
 	);
 }

package/src/mobile/bottom-sheet-select-control/index.native.js

@@ -22,6 +22,7 @@ const BottomSheetSelectControl = ( {
 	options: items,
 	onChange,
 	value: selectedValue,
+	disabled,
 } ) => {
 	const [ showSubSheet, setShowSubSheet ] = useState( false );
 	const navigation = useNavigation();
@@ -68,6 +69,7 @@ const BottomSheetSelectControl = ( {
 						__( 'Navigates to select %s' ),
 						label
 					) }
+					disabled={ disabled }
 				>
 					<Icon icon={ chevronRight }></Icon>
 				</BottomSheet.Cell>

package/src/mobile/bottom-sheet-text-control/index.native.js

@@ -29,6 +29,7 @@ const BottomSheetTextControl = ( {
 	icon,
 	footerNote,
 	cellPlaceholder,
+	disabled,
 } ) => {
 	const [ showSubSheet, setShowSubSheet ] = useState( false );
 	const navigation = useNavigation();
@@ -62,6 +63,7 @@ const BottomSheetTextControl = ( {
 					onPress={ openSubSheet }
 					value={ initialValue || '' }
 					placeholder={ cellPlaceholder || placeholder || '' }
+					disabled={ disabled }
 				>
 					<Icon icon={ chevronRight }></Icon>
 				</BottomSheet.Cell>

package/src/modal/index.tsx

@@ -252,12 +252,7 @@ function UnforwardedModal(
 								) }
 							</div>
 						) }
-						<div
-							ref={ childrenContainerRef }
-							className="components-modal__children-container"
-						>
-							{ children }
-						</div>
+						<div ref={ childrenContainerRef }>{ children }</div>
 					</div>
 				</div>
 			</StyleProvider>

package/src/private-apis.ts

@@ -9,6 +9,18 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
 import { default as CustomSelectControl } from './custom-select-control';
 import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';
 import { createPrivateSlotFill } from './slot-fill';
+import {
+	DropdownMenu as DropdownMenuV2,
+	DropdownMenuCheckboxItem as DropdownMenuCheckboxItemV2,
+	DropdownMenuGroup as DropdownMenuGroupV2,
+	DropdownMenuItem as DropdownMenuItemV2,
+	DropdownMenuLabel as DropdownMenuLabelV2,
+	DropdownMenuRadioGroup as DropdownMenuRadioGroupV2,
+	DropdownMenuRadioItem as DropdownMenuRadioItemV2,
+	DropdownMenuSeparator as DropdownMenuSeparatorV2,
+	DropdownSubMenu as DropdownSubMenuV2,
+	DropdownSubMenuTrigger as DropdownSubMenuTriggerV2,
+} from './dropdown-menu-v2';
 
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
@@ -21,4 +33,14 @@ lock( privateApis, {
 	CustomSelectControl,
 	__experimentalPopoverLegacyPositionToPlacement,
 	createPrivateSlotFill,
+	DropdownMenuV2,
+	DropdownMenuCheckboxItemV2,
+	DropdownMenuGroupV2,
+	DropdownMenuItemV2,
+	DropdownMenuLabelV2,
+	DropdownMenuRadioGroupV2,
+	DropdownMenuRadioItemV2,
+	DropdownMenuSeparatorV2,
+	DropdownSubMenuV2,
+	DropdownSubMenuTriggerV2,
 } );

package/src/range-control/index.native.js

@@ -25,6 +25,7 @@ const RangeControl = memo(
 		max,
 		type,
 		separatorType,
+		disabled,
 		...props
 	} ) => {
 		if ( type === 'stepper' ) {
@@ -36,6 +37,7 @@ const RangeControl = memo(
 					onChange={ onChange }
 					separatorType={ separatorType }
 					value={ value }
+					disabled={ disabled }
 				/>
 			);
 		}
@@ -61,6 +63,7 @@ const RangeControl = memo(
 				allowReset={ allowReset }
 				defaultValue={ initialSliderValue }
 				separatorType={ separatorType }
+				disabled={ disabled }
 				{ ...props }
 			/>
 		);

package/src/search-control/style.scss

@@ -41,10 +41,12 @@
 .components-search-control__icon {
 	position: absolute;
 	top: 0;
+	width: $icon-size;
 	right: ( $grid-unit-60 - $icon-size ) * 0.5;
 	bottom: 0;
 	display: flex;
 	align-items: center;
+	justify-content: center;
 
 	> svg {
 		margin: $grid-unit-10 0;

package/src/snackbar/list.tsx

@@ -73,7 +73,6 @@ export function SnackbarList( {
 
 					return (
 						<motion.div
-							layout={ ! isReducedMotion } // See https://www.framer.com/docs/animation/#layout-animations
 							initial={ 'init' }
 							animate={ 'open' }
 							exit={ 'exit' }

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

@@ -67,8 +67,9 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 .emotion-8:focus-within {
   border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
   box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  outline: none;
   z-index: 1;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
 }
 
 .emotion-10 {
@@ -81,6 +82,8 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   -webkit-transition: -webkit-transform 160ms ease;
   transition: transform 160ms ease;
   z-index: 1;
+  outline: 2px solid transparent;
+  outline-offset: -3px;
 }
 
 @media ( prefers-reduced-motion: reduce ) {
@@ -402,8 +405,9 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 .emotion-8:focus-within {
   border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
   box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  outline: none;
   z-index: 1;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
 }
 
 .emotion-10 {

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

@@ -46,8 +46,10 @@ const enclosingBorders = ( isBlock: ToggleGroupControlProps[ 'isBlock' ] ) => {
 		&:focus-within {
 			border-color: ${ COLORS.ui.borderFocus };
 			box-shadow: ${ CONFIG.controlBoxShadowFocus };
-			outline: none;
 			z-index: 1;
+			// Windows High Contrast mode will show this outline, but not the box-shadow.
+			outline: 2px solid transparent;
+			outline-offset: -2px;
 		}
 	`;
 };
@@ -80,6 +82,9 @@ export const BackdropView = styled.div`
 	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`

package/src/toolbar/stories/index.tsx

@@ -82,34 +82,31 @@ Default.args = {
 			</ToolbarGroup>
 			<ToolbarGroup>
 				<ToolbarItem>
-					{
-						// @ts-expect-error TODO: Remove when DropdownMenu is typed
-						( toggleProps ) => {
-							return (
-								<DropdownMenu
-									hasArrowIndicator
-									icon={ alignLeft }
-									label="Align"
-									controls={ [
-										{
-											icon: alignLeft,
-											title: 'Align left',
-											isActive: true,
-										},
-										{
-											icon: alignCenter,
-											title: 'Align center',
-										},
-										{
-											icon: alignRight,
-											title: 'Align right',
-										},
-									] }
-									toggleProps={ toggleProps }
-								/>
-							);
-						}
-					}
+					{ /* There is an issue here with TS not recognizing the
+					 * `RenderProp` being passed.
+					 * @ts-expect-error */ }
+					{ ( toggleProps ) => (
+						<DropdownMenu
+							icon={ alignLeft }
+							label="Align"
+							controls={ [
+								{
+									icon: alignLeft,
+									title: 'Align left',
+									isActive: true,
+								},
+								{
+									icon: alignCenter,
+									title: 'Align center',
+								},
+								{
+									icon: alignRight,
+									title: 'Align right',
+								},
+							] }
+							toggleProps={ toggleProps }
+						/>
+					) }
 				</ToolbarItem>
 			</ToolbarGroup>
 			<ToolbarGroup>