@wordpress/components 25.14.0 → 25.15.1-next.79a6196f.0

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

@@ -47,9 +47,9 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   display: -ms-inline-flexbox;
   display: inline-flex;
   min-width: 0;
-  padding: 2px;
   position: relative;
   min-height: 36px;
+  padding: 2px;
 }
 
 .emotion-8:hover {
@@ -116,7 +116,8 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   width: 100%;
   z-index: 2;
   color: #1e1e1e;
-  width: 30px;
+  height: 30px;
+  aspect-ratio: 1;
   padding-left: 0;
   padding-right: 0;
   color: #fff;
@@ -198,7 +199,8 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   width: 100%;
   z-index: 2;
   color: #1e1e1e;
-  width: 30px;
+  height: 30px;
+  aspect-ratio: 1;
   padding-left: 0;
   padding-right: 0;
 }
@@ -249,7 +251,6 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             aria-label="Uppercase"
             class="emotion-12 components-toggle-group-control-option-base"
             data-active-item=""
-            data-command=""
             data-value="uppercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
@@ -288,7 +289,6 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             aria-checked="false"
             aria-label="Lowercase"
             class="emotion-18 components-toggle-group-control-option-base"
-            data-command=""
             data-value="lowercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
@@ -374,9 +374,9 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   display: -ms-inline-flexbox;
   display: inline-flex;
   min-width: 0;
-  padding: 2px;
   position: relative;
   min-height: 36px;
+  padding: 2px;
 }
 
 .emotion-8:hover {
@@ -498,7 +498,6 @@ exports[`ToggleGroupControl controlled should render correctly with text options
             aria-checked="false"
             aria-label="R"
             class="emotion-12 components-toggle-group-control-option-base"
-            data-command=""
             data-value="rigas"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
@@ -521,7 +520,6 @@ exports[`ToggleGroupControl controlled should render correctly with text options
             aria-checked="false"
             aria-label="J"
             class="emotion-12 components-toggle-group-control-option-base"
-            data-command=""
             data-value="jack"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
@@ -596,9 +594,9 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   display: -ms-inline-flexbox;
   display: inline-flex;
   min-width: 0;
-  padding: 2px;
   position: relative;
   min-height: 36px;
+  padding: 2px;
 }
 
 .emotion-8:hover {
@@ -665,7 +663,8 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   width: 100%;
   z-index: 2;
   color: #1e1e1e;
-  width: 30px;
+  height: 30px;
+  aspect-ratio: 1;
   padding-left: 0;
   padding-right: 0;
   color: #fff;
@@ -747,7 +746,8 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   width: 100%;
   z-index: 2;
   color: #1e1e1e;
-  width: 30px;
+  height: 30px;
+  aspect-ratio: 1;
   padding-left: 0;
   padding-right: 0;
 }
@@ -798,7 +798,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
             aria-label="Uppercase"
             class="emotion-12 components-toggle-group-control-option-base"
             data-active-item=""
-            data-command=""
             data-value="uppercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
@@ -837,7 +836,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
             aria-checked="false"
             aria-label="Lowercase"
             class="emotion-18 components-toggle-group-control-option-base"
-            data-command=""
             data-value="lowercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
@@ -917,9 +915,9 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   display: -ms-inline-flexbox;
   display: inline-flex;
   min-width: 0;
-  padding: 2px;
   position: relative;
   min-height: 36px;
+  padding: 2px;
 }
 
 .emotion-8:hover {
@@ -1041,7 +1039,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
             aria-checked="false"
             aria-label="R"
             class="emotion-12 components-toggle-group-control-option-base"
-            data-command=""
             data-value="rigas"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
@@ -1064,7 +1061,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
             aria-checked="false"
             aria-label="J"
             class="emotion-12 components-toggle-group-control-option-base"
-            data-command=""
             data-value="jack"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { press, click, hover, sleep } from '@ariakit/test';
 
 /**
  * WordPress dependencies
@@ -19,8 +19,13 @@ import {
 	ToggleGroupControlOption,
 	ToggleGroupControlOptionIcon,
 } from '../index';
+import { TOOLTIP_DELAY } from '../../tooltip';
 import type { ToggleGroupControlProps } from '../types';
-import cleanupTooltip from '../../tooltip/test/utils';
+
+const hoverOutside = async () => {
+	await hover( document.body );
+	await hover( document.body, { clientX: 10, clientY: 10 } );
+};
 
 const ControlledToggleGroupControl = ( {
 	value: valueProp,
@@ -113,7 +118,6 @@ describe.each( [
 		} );
 	} );
 	it( 'should call onChange with proper value', async () => {
-		const user = userEvent.setup();
 		const mockOnChange = jest.fn();
 
 		render(
@@ -126,13 +130,12 @@ describe.each( [
 			</Component>
 		);
 
-		await user.click( screen.getByRole( 'radio', { name: 'R' } ) );
+		await click( screen.getByRole( 'radio', { name: 'R' } ) );
 
 		expect( mockOnChange ).toHaveBeenCalledWith( 'rigas' );
 	} );
 
 	it( 'should render tooltip where `showTooltip` === `true`', async () => {
-		const user = userEvent.setup();
 		render(
 			<Component label="Test Toggle Group Control">
 				{ optionsWithTooltip }
@@ -143,19 +146,26 @@ describe.each( [
 			'Click for Delicious Gnocchi'
 		);
 
-		await user.hover( firstRadio );
+		await hover( firstRadio );
 
-		const tooltip = await screen.findByText(
-			'Click for Delicious Gnocchi'
-		);
+		const tooltip = await screen.findByRole( 'tooltip', {
+			name: 'Click for Delicious Gnocchi',
+		} );
 
 		await waitFor( () => expect( tooltip ).toBeVisible() );
 
-		await cleanupTooltip( user );
+		// hover outside of radio
+		await hoverOutside();
+
+		// Tooltip should hide
+		expect(
+			screen.queryByRole( 'tooltip', {
+				name: 'Click for Delicious Gnocchi',
+			} )
+		).not.toBeInTheDocument();
 	} );
 
 	it( 'should not render tooltip', async () => {
-		const user = userEvent.setup();
 		render(
 			<Component label="Test Toggle Group Control">
 				{ optionsWithTooltip }
@@ -166,19 +176,24 @@ describe.each( [
 			'Click for Sumptuous Caponata'
 		);
 
-		await user.hover( secondRadio );
+		await hover( secondRadio );
 
-		await waitFor( () =>
-			expect(
-				screen.queryByText( 'Click for Sumptuous Caponata' )
-			).not.toBeInTheDocument()
-		);
+		// Tooltip shouldn't show
+		expect(
+			screen.queryByText( 'Click for Sumptuous Caponata' )
+		).not.toBeInTheDocument();
+
+		// Advance time by default delay
+		await sleep( TOOLTIP_DELAY );
+
+		// Tooltip shouldn't show.
+		expect(
+			screen.queryByText( 'Click for Sumptuous Caponata' )
+		).not.toBeInTheDocument();
 	} );
 
 	if ( mode === 'controlled' ) {
 		it( 'should reset values correctly', async () => {
-			const user = userEvent.setup();
-
 			render(
 				<Component label="Test Toggle Group Control">
 					{ options }
@@ -188,25 +203,23 @@ describe.each( [
 			const rigasOption = screen.getByRole( 'radio', { name: 'R' } );
 			const jackOption = screen.getByRole( 'radio', { name: 'J' } );
 
-			await user.click( rigasOption );
+			await click( rigasOption );
 
 			expect( jackOption ).not.toBeChecked();
 			expect( rigasOption ).toBeChecked();
 
-			await user.keyboard( '[ArrowRight]' );
+			await press.ArrowRight();
 
 			expect( rigasOption ).not.toBeChecked();
 			expect( jackOption ).toBeChecked();
 
-			await user.click( screen.getByRole( 'button', { name: 'Reset' } ) );
+			await click( screen.getByRole( 'button', { name: 'Reset' } ) );
 
 			expect( rigasOption ).not.toBeChecked();
 			expect( jackOption ).not.toBeChecked();
 		} );
 
 		it( 'should update correctly when triggered by external updates', async () => {
-			const user = userEvent.setup();
-
 			render(
 				<Component
 					value="rigas"
@@ -225,19 +238,19 @@ describe.each( [
 				screen.getByRole( 'radio', { name: 'J' } )
 			).not.toBeChecked();
 
-			await user.click( screen.getByRole( 'button', { name: 'Jack' } ) );
+			await click( screen.getByRole( 'button', { name: 'Jack' } ) );
 			expect( screen.getByRole( 'radio', { name: 'J' } ) ).toBeChecked();
 			expect(
 				screen.getByRole( 'radio', { name: 'R' } )
 			).not.toBeChecked();
 
-			await user.click( screen.getByRole( 'button', { name: 'Rigas' } ) );
+			await click( screen.getByRole( 'button', { name: 'Rigas' } ) );
 			expect( screen.getByRole( 'radio', { name: 'R' } ) ).toBeChecked();
 			expect(
 				screen.getByRole( 'radio', { name: 'J' } )
 			).not.toBeChecked();
 
-			await user.click( screen.getByRole( 'button', { name: 'Reset' } ) );
+			await click( screen.getByRole( 'button', { name: 'Reset' } ) );
 			expect(
 				screen.getByRole( 'radio', { name: 'R' } )
 			).not.toBeChecked();
@@ -251,7 +264,6 @@ describe.each( [
 		describe( 'isDeselectable = false', () => {
 			it( 'should not be deselectable', async () => {
 				const mockOnChange = jest.fn();
-				const user = userEvent.setup();
 
 				render(
 					<Component
@@ -267,31 +279,35 @@ describe.each( [
 					name: 'R',
 					checked: true,
 				} );
-				await user.click( rigas );
+				await click( rigas );
 				expect( mockOnChange ).toHaveBeenCalledTimes( 0 );
 			} );
 
 			it( 'should not tab to next radio option', async () => {
-				const user = userEvent.setup();
-
 				render(
-					<Component value="rigas" label="Test">
-						{ options }
-					</Component>
+					<>
+						<Component value="rigas" label="Test">
+							{ options }
+						</Component>
+						<button>After ToggleGroupControl</button>
+					</>
 				);
 
 				const rigas = screen.getByRole( 'radio', {
 					name: 'R',
 				} );
 
-				await user.tab();
+				await press.Tab();
 				expect( rigas ).toHaveFocus();
 
-				await user.tab();
+				await press.Tab();
 
+				// When in controlled mode, there is an additional "Reset" button.
 				const expectedFocusTarget =
 					mode === 'uncontrolled'
-						? rigas.ownerDocument.body
+						? screen.getByRole( 'button', {
+								name: 'After ToggleGroupControl',
+						  } )
 						: screen.getByRole( 'button', { name: 'Reset' } );
 
 				expect( expectedFocusTarget ).toHaveFocus();
@@ -301,7 +317,6 @@ describe.each( [
 		describe( 'isDeselectable = true', () => {
 			it( 'should be deselectable', async () => {
 				const mockOnChange = jest.fn();
-				const user = userEvent.setup();
 
 				render(
 					<Component
@@ -314,7 +329,7 @@ describe.each( [
 					</Component>
 				);
 
-				await user.click(
+				await click(
 					screen.getByRole( 'button', {
 						name: 'R',
 						pressed: true,
@@ -323,7 +338,7 @@ describe.each( [
 				expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
 				expect( mockOnChange ).toHaveBeenLastCalledWith( undefined );
 
-				await user.click(
+				await click(
 					screen.getByRole( 'button', {
 						name: 'R',
 						pressed: false,
@@ -334,15 +349,13 @@ describe.each( [
 			} );
 
 			it( 'should tab to the next option button', async () => {
-				const user = userEvent.setup();
-
 				render(
 					<Component isDeselectable value="rigas" label="Test">
 						{ options }
 					</Component>
 				);
 
-				await user.tab();
+				await press.Tab();
 				expect(
 					screen.getByRole( 'button', {
 						name: 'R',
@@ -350,7 +363,7 @@ describe.each( [
 					} )
 				).toHaveFocus();
 
-				await user.tab();
+				await press.Tab();
 				expect(
 					screen.getByRole( 'button', {
 						name: 'J',
@@ -359,7 +372,7 @@ describe.each( [
 				).toHaveFocus();
 
 				// Focus should not move with arrow keys
-				await user.keyboard( '{ArrowLeft}' );
+				await press.ArrowLeft();
 				expect(
 					screen.getByRole( 'button', {
 						name: 'J',

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

@@ -47,6 +47,8 @@ function UnconnectedToggleGroupControl(
 	} = useContextSystem( props, 'ToggleGroupControl' );
 
 	const baseId = useInstanceId( ToggleGroupControl, 'toggle-group-control' );
+	const normalizedSize =
+		__next40pxDefaultSize && size === 'default' ? '__unstable-large' : size;
 
 	const cx = useCx();
 
@@ -56,13 +58,12 @@ function UnconnectedToggleGroupControl(
 				styles.toggleGroupControl( {
 					isBlock,
 					isDeselectable,
-					size,
-					__next40pxDefaultSize,
+					size: normalizedSize,
 				} ),
 				isBlock && styles.block,
 				className
 			),
-		[ className, cx, isBlock, isDeselectable, size, __next40pxDefaultSize ]
+		[ className, cx, isBlock, isDeselectable, normalizedSize ]
 	);
 
 	const MainControl = isDeselectable
@@ -86,7 +87,7 @@ function UnconnectedToggleGroupControl(
 				label={ label }
 				onChange={ onChange }
 				ref={ forwardedRef }
-				size={ size }
+				size={ normalizedSize }
 				value={ value }
 			>
 				<LayoutGroup id={ baseId }>{ children }</LayoutGroup>

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

@@ -14,11 +14,7 @@ export const toggleGroupControl = ( {
 	isBlock,
 	isDeselectable,
 	size,
-	__next40pxDefaultSize,
-}: Pick<
-	ToggleGroupControlProps,
-	'isBlock' | 'isDeselectable' | '__next40pxDefaultSize'
-> & {
+}: Pick< ToggleGroupControlProps, 'isBlock' | 'isDeselectable' > & {
 	size: NonNullable< ToggleGroupControlProps[ 'size' ] >;
 } ) => css`
 	background: ${ COLORS.ui.background };
@@ -26,10 +22,9 @@ export const toggleGroupControl = ( {
 	border-radius: ${ CONFIG.controlBorderRadius };
 	display: inline-flex;
 	min-width: 0;
-	padding: 2px;
 	position: relative;
 
-	${ toggleGroupControlSize( size, __next40pxDefaultSize ) }
+	${ toggleGroupControlSize( size ) }
 	${ ! isDeselectable && enclosingBorders( isBlock ) }
 `;
 
@@ -57,21 +52,20 @@ const enclosingBorders = ( isBlock: ToggleGroupControlProps[ 'isBlock' ] ) => {
 };
 
 export const toggleGroupControlSize = (
-	size: NonNullable< ToggleGroupControlProps[ 'size' ] >,
-	__next40pxDefaultSize: ToggleGroupControlProps[ '__next40pxDefaultSize' ]
+	size: NonNullable< ToggleGroupControlProps[ 'size' ] >
 ) => {
-	const heights = {
-		default: '40px',
-		'__unstable-large': '40px',
+	const styles = {
+		default: css`
+			min-height: 36px;
+			padding: 2px;
+		`,
+		'__unstable-large': css`
+			min-height: 40px;
+			padding: 3px;
+		`,
 	};
 
-	if ( ! __next40pxDefaultSize ) {
-		heights.default = '36px';
-	}
-
-	return css`
-		min-height: ${ heights[ size ] };
-	`;
+	return styles[ size ];
 };
 
 export const block = css`

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

@@ -102,12 +102,13 @@ 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;
 	`;

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
 

package/src/toolbar/toolbar/README.md

@@ -4,12 +4,6 @@ Toolbar can be used to group related options. To emphasize groups of related ico
 
 ![Toolbar component above an image block](https://wordpress.org/gutenberg/files/2019/01/s_96EC471FE9C9D91A996770229947AAB54A03351BDE98F444FD3C1BF0CED365EA_1541782974545_ButtonGroup.png)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage

package/src/tools-panel/test/index.tsx

@@ -455,8 +455,8 @@ describe( 'ToolsPanel', () => {
 
 			const menuGroups = screen.getAllByRole( 'group' );
 
-			// Groups should be: default controls, optional controls & reset all.
-			expect( menuGroups.length ).toEqual( 3 );
+			// There are now only two groups controls & reset all.
+			expect( menuGroups.length ).toEqual( 2 );
 		} );
 
 		it( 'should not render contents of items when in placeholder state', () => {
@@ -517,15 +517,11 @@ describe( 'ToolsPanel', () => {
 
 			await openDropdownMenu();
 
-			// The linked control should initially appear in the optional controls
-			// menu group. There should be three menu groups: default controls,
-			// optional controls, and the group to reset all options.
 			let menuGroups = screen.getAllByRole( 'group' );
-			expect( menuGroups.length ).toEqual( 3 );
 
-			// The linked control should be in the second group, of optional controls.
+			// The linked control should be in the first group of controls.
 			expect(
-				within( menuGroups[ 1 ] ).getByText( 'Linked' )
+				within( menuGroups[ 0 ] ).getByText( 'Linked' )
 			).toBeInTheDocument();
 
 			// Simulate the main control having a value set which should
@@ -540,22 +536,18 @@ describe( 'ToolsPanel', () => {
 			linkedItem = screen.getByText( 'Linked control' );
 			expect( linkedItem ).toBeInTheDocument();
 
-			// The linked control should now appear in the default controls
-			// menu group and have been removed from the optional group.
+			// The linked control should still appear in the controls
+			// menu group but as a default control.
 			menuGroups = screen.getAllByRole( 'group' );
 
-			// There should now only be two groups. The default controls and
-			// and the group for the reset all option.
-			expect( menuGroups.length ).toEqual( 2 );
-
-			// The new default control item for the Linked control should be
-			// within the first menu group.
+			// The new default control item for the Linked control should still
+			// be within the first menu group.
 			const defaultItem = within( menuGroups[ 0 ] ).getByText( 'Linked' );
 			expect( defaultItem ).toBeInTheDocument();
 
 			// Optional controls have an additional aria-label. This can be used
-			// to confirm the conditional default control has been removed from
-			// the optional menu item group.
+			// to confirm the conditional default control is now being treated
+			// as default control.
 			expect(
 				screen.queryByRole( 'menuitemcheckbox', {
 					name: 'Show Linked',
@@ -599,7 +591,7 @@ describe( 'ToolsPanel', () => {
 			let conditionalItem = screen.queryByText( 'Conditional control' );
 			expect( conditionalItem ).not.toBeInTheDocument();
 
-			// The conditional control should not yet appear in the default controls
+			// The conditional control should not yet appear in the controls
 			// menu group.
 			await openDropdownMenu();
 			let menuGroups = screen.getAllByRole( 'group' );
@@ -619,7 +611,7 @@ describe( 'ToolsPanel', () => {
 			conditionalItem = screen.getByText( 'Conditional control' );
 			expect( conditionalItem ).toBeInTheDocument();
 
-			// The conditional control should now appear in the default controls
+			// The conditional control should now appear in the controls
 			// menu group.
 			menuGroups = screen.getAllByRole( 'group' );
 

package/src/tools-panel/tools-panel/README.md

@@ -157,6 +157,13 @@ wrapper element allowing the panel to lay them out accordingly.
 - Required: No
 - Default: `false`
 
+### `dropdownMenuProps`: `{}`
+
+The popover props to configure panel's `DropdownMenu`.
+
+-   Type: `DropdownMenuProps`
+-   Required: No
+
 ### `headingLevel`: `1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'`
 
 The heading level of the panel's header.

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

@@ -25,6 +25,7 @@ const UnconnectedToolsPanel = (
 		resetAllItems,
 		toggleItem,
 		headingLevel,
+		dropdownMenuProps,
 		...toolsPanelProps
 	} = useToolsPanel( props );
 
@@ -36,6 +37,7 @@ const UnconnectedToolsPanel = (
 					resetAll={ resetAllItems }
 					toggleItem={ toggleItem }
 					headingLevel={ headingLevel }
+					dropdownMenuProps={ dropdownMenuProps }
 				/>
 				{ children }
 			</ToolsPanelContext.Provider>