@wordpress/components 25.1.0 → 25.1.1

package/src/dropdown-menu/types.ts

@@ -141,3 +141,11 @@ export type DropdownMenuProps = {
 	 */
 	controls?: DropdownOption[] | DropdownOption[][];
 };
+
+export type DropdownMenuInternalContext = {
+	/**
+	 * This variant can be used to change the appearance of the component in
+	 * specific contexts, ie. when rendered inside the `Toolbar` component.
+	 */
+	variant?: 'toolbar';
+};

package/src/dropdown-menu-v2/index.tsx

@@ -35,7 +35,7 @@ import type {
 	DropdownMenuRadioItemProps,
 	DropdownMenuSeparatorProps,
 	DropdownSubMenuTriggerProps,
-	DropdownMenuContext,
+	DropdownMenuInternalContext,
 	DropdownMenuPrivateContext as DropdownMenuPrivateContextType,
 } from './types';
 
@@ -70,7 +70,7 @@ const UnconnectedDropdownMenu = ( props: DropdownMenuProps ) => {
 		variant,
 	} = useContextSystem<
 		// Adding `className` to the context type to avoid a TS error
-		DropdownMenuProps & DropdownMenuContext & { className?: string }
+		DropdownMenuProps & DropdownMenuInternalContext & { className?: string }
 	>( props, 'DropdownMenu' );
 
 	// Render the portal in the default slot used by the legacy Popover component.

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

@@ -11,7 +11,7 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { COLORS, font, rtl, CONFIG } from '../utils';
 import { space } from '../ui/utils/space';
 import Icon from '../icon';
-import type { DropdownMenuContext } from './types';
+import type { DropdownMenuInternalContext } from './types';
 
 const ANIMATION_PARAMS = {
 	SLIDE_AMOUNT: '2px',
@@ -62,7 +62,9 @@ const slideLeftAndFade = keyframes( {
 	'100%': { opacity: 1, transform: 'translateX(0)' },
 } );
 
-const baseContent = ( variant: DropdownMenuContext[ 'variant' ] ) => css`
+const baseContent = (
+	variant: DropdownMenuInternalContext[ 'variant' ]
+) => css`
 	min-width: 220px;
 	background-color: ${ COLORS.ui.background };
 	border-radius: ${ CONFIG.radiusBlockUi };
@@ -200,12 +202,12 @@ const baseItem = css`
 `;
 
 export const Content = styled( DropdownMenu.Content )<
-	Pick< DropdownMenuContext, 'variant' >
+	Pick< DropdownMenuInternalContext, 'variant' >
 >`
 	${ ( props ) => baseContent( props.variant ) }
 `;
 export const SubContent = styled( DropdownMenu.SubContent )<
-	Pick< DropdownMenuContext, 'variant' >
+	Pick< DropdownMenuInternalContext, 'variant' >
 >`
 	${ ( props ) => baseContent( props.variant ) }
 `;
@@ -246,7 +248,7 @@ export const Label = styled( DropdownMenu.Label )`
 `;
 
 export const Separator = styled( DropdownMenu.Separator )<
-	Pick< DropdownMenuContext, 'variant' >
+	Pick< DropdownMenuInternalContext, 'variant' >
 >`
 	height: ${ CONFIG.borderWidth };
 	/* TODO: doesn't match border color from variables */

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

@@ -249,7 +249,7 @@ export type DropdownMenuGroupProps = {
 
 export type DropdownMenuSeparatorProps = {};
 
-export type DropdownMenuContext = {
+export type DropdownMenuInternalContext = {
 	/**
 	 * This variant can be used to change the appearance of the component in
 	 * specific contexts, ie. when rendered inside the `Toolbar` component.
@@ -258,7 +258,7 @@ export type DropdownMenuContext = {
 };
 
 export type DropdownMenuPrivateContext = Pick<
-	DropdownMenuContext,
+	DropdownMenuInternalContext,
 	'variant'
 > & {
 	portalContainer: HTMLElement | null;

package/src/item-group/styles.ts

@@ -15,15 +15,23 @@ export const unstyledButton = css`
 	background: none;
 	text-align: start;
 
+	svg,
+	path {
+		fill: currentColor;
+	}
+
 	&:hover {
 		color: ${ COLORS.ui.theme };
 	}
 
 	&:focus {
-		background-color: transparent;
-		color: ${ COLORS.ui.theme };
-		border-color: ${ COLORS.ui.theme };
-		outline: 3px solid transparent;
+		box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
+			var(
+				--wp-components-color-accent,
+				var( --wp-admin-theme-color, ${ COLORS.ui.theme } )
+			);
+		// Windows high contrast mode.
+		outline: 2px solid transparent;
 	}
 `;
 

package/src/mobile/bottom-sheet/bottom-sheet-navigation/test/navigation-container.native.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Text } from 'react-native';
-import { render, fireEvent, waitFor, act } from 'test/helpers';
+import { render, fireEvent, act } from 'test/helpers';
 import { useNavigation } from '@react-navigation/native';
 
 /**
@@ -49,8 +49,8 @@ it( 'animates height transitioning from non-full-screen to full-screen', async (
 	);
 
 	// Await navigation screen to allow async state updates to complete
-	const navigationScreen = await waitFor( () =>
-		screen.getByTestId( 'navigation-screen-test-screen-1' )
+	const navigationScreen = await screen.findByTestId(
+		'navigation-screen-test-screen-1'
 	);
 	// Trigger non-full-screen layout event
 	act( () => {
@@ -65,11 +65,9 @@ it( 'animates height transitioning from non-full-screen to full-screen', async (
 		jest.advanceTimersByTime( 10 );
 	} );
 	// Navigate to screen 2
-	fireEvent.press(
-		await waitFor( () => screen.getByText( /test-screen-1/ ) )
-	);
+	fireEvent.press( await screen.findByText( /test-screen-1/ ) );
 	// Await navigation screen to allow async state updates to complete
-	await waitFor( () => screen.getByText( /test-screen-2/ ) );
+	await screen.findByText( /test-screen-2/ );
 
 	expect( performLayoutAnimation ).toHaveBeenCalledTimes( 1 );
 } );
@@ -87,8 +85,8 @@ it( 'animates height transitioning from full-screen to non-full-screen', async (
 	);
 
 	// Await navigation screen to allow async state updates to complete
-	const navigationScreen = await waitFor( () =>
-		screen.getByTestId( 'navigation-screen-test-screen-1' )
+	const navigationScreen = await screen.findByTestId(
+		'navigation-screen-test-screen-1'
 	);
 	// Trigger non-full-screen layout event
 	act( () => {
@@ -103,16 +101,11 @@ it( 'animates height transitioning from full-screen to non-full-screen', async (
 		jest.advanceTimersByTime( 10 );
 	} );
 	// Navigate to screen 2
-	fireEvent.press(
-		await waitFor( () => screen.getByText( /test-screen-1/ ) )
-	);
+	fireEvent.press( await screen.findByText( /test-screen-1/ ) );
 	// Navigate to screen 1
-	fireEvent.press(
-		// Use custom waitFor due to https://github.com/callstack/react-native-testing-library/issues/379
-		await waitFor( () => screen.getByText( /test-screen-2/ ) )
-	);
+	fireEvent.press( await screen.findByText( /test-screen-2/ ) );
 	// Await navigation screen to allow async state updates to complete
-	await waitFor( () => screen.getByText( /test-screen-1/ ) );
+	await screen.findByText( /test-screen-1/ );
 
 	expect( performLayoutAnimation ).toHaveBeenCalledTimes( 2 );
 } );
@@ -135,8 +128,8 @@ it( 'does not animate height transitioning from full-screen to full-screen', asy
 	);
 
 	// Await navigation screen to allow async state updates to complete
-	const navigationScreen = await waitFor( () =>
-		screen.getByTestId( 'navigation-screen-test-screen-1' )
+	const navigationScreen = await screen.findByTestId(
+		'navigation-screen-test-screen-1'
 	);
 	// Trigger non-full-screen layout event
 	act( () => {
@@ -151,19 +144,13 @@ it( 'does not animate height transitioning from full-screen to full-screen', asy
 		jest.advanceTimersByTime( 10 );
 	} );
 	// Navigate to screen 2
-	fireEvent.press(
-		await waitFor( () => screen.getByText( /test-screen-1/ ) )
-	);
+	fireEvent.press( await screen.findByText( /test-screen-1/ ) );
 	// Navigate to screen 3
-	fireEvent.press(
-		await waitFor( () => screen.getByText( /test-screen-2/ ) )
-	);
+	fireEvent.press( await screen.findByText( /test-screen-2/ ) );
 	// Navigate to screen 2
-	fireEvent.press(
-		await waitFor( () => screen.getByText( /test-screen-3/ ) )
-	);
+	fireEvent.press( await screen.findByText( /test-screen-3/ ) );
 	// Await navigation screen to allow async state updates to complete
-	await waitFor( () => screen.getByText( /test-screen-2/ ) );
+	await screen.findByText( /test-screen-2/ );
 
 	expect( performLayoutAnimation ).toHaveBeenCalledTimes( 1 );
 } );

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

@@ -257,7 +257,7 @@ class BottomSheetCell extends Component {
 					placeholder={ valuePlaceholder }
 					placeholderTextColor={ placeholderTextColor }
 					onChangeText={ onChangeValue }
-					editable={ isValueEditable }
+					editable={ isValueEditable && ! disabled }
 					pointerEvents={
 						this.state.isEditingValue ? 'auto' : 'none'
 					}

package/src/mobile/html-text-input/test/__snapshots__/index.native.js.snap

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HTMLTextInput HTMLTextInput renders and matches snapshot 1`] = `
+<View
+  onLayout={[Function]}
+>
+  <RCTScrollView>
+    <View>
+      <TextInput
+        accessibilityLabel="html-view-title"
+        autoCorrect={false}
+        numberOfLines={1}
+        placeholder="Add title"
+        placeholderTextColor="white"
+        style={
+          [
+            undefined,
+            undefined,
+          ]
+        }
+        textAlignVertical="center"
+      />
+      <TextInput
+        accessibilityLabel="html-view-content"
+        autoCorrect={false}
+        multiline={true}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        placeholder="Start writing…"
+        placeholderTextColor="white"
+        rejectResponderTermination={false}
+        scrollEnabled={false}
+        style={
+          [
+            {
+              "color": "white",
+            },
+            undefined,
+          ]
+        }
+        textAlignVertical="top"
+      />
+    </View>
+  </RCTScrollView>
+</View>
+`;

package/src/mobile/html-text-input/test/index.native.js

@@ -23,13 +23,13 @@ const getStylesFromColorScheme = () => {
 };
 
 describe( 'HTMLTextInput', () => {
-	it( 'HTMLTextInput renders', () => {
+	it( 'HTMLTextInput renders and matches snapshot', () => {
 		const screen = render(
 			<HTMLTextInput
 				getStylesFromColorScheme={ getStylesFromColorScheme }
 			/>
 		);
-		expect( screen.container ).toBeTruthy();
+		expect( screen.toJSON() ).toMatchSnapshot();
 	} );
 
 	it( 'HTMLTextInput updates state on HTML text change', () => {

package/src/mobile/image/index.native.js

@@ -178,7 +178,7 @@ const ImageComponent = ( {
 			imageData &&
 			containerSize && {
 				height:
-					imageData?.width > containerSize?.width
+					imageData?.width > containerSize?.width && ! imageWidth
 						? containerSize?.width / imageData?.aspectRatio
 						: undefined,
 			},

package/src/mobile/link-settings/test/link-settings-navigation.native.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Keyboard, Platform } from 'react-native';
-import { render, fireEvent, waitFor } from 'test/helpers';
+import { render, fireEvent } from 'test/helpers';
 
 /**
  * Internal dependencies
@@ -40,13 +40,8 @@ describe( 'Android', () => {
 	it( 'improves back animation performance by dismissing keyboard beforehand', async () => {
 		const screen = render( subject );
 		fireEvent.press( screen.getByText( 'Link to' ) );
-		fireEvent.press(
-			screen.getByLabelText( 'Link to, Search or type URL' )
-		);
 		// Await back button to allow async state updates to complete
-		const backButton = await waitFor( () =>
-			screen.getByLabelText( 'Go back' )
-		);
+		const backButton = await screen.findByLabelText( 'Go back' );
 		Keyboard.dismiss.mockClear();
 		fireEvent.press( backButton );
 
@@ -57,9 +52,7 @@ describe( 'Android', () => {
 		const screen = render( subject );
 		fireEvent.press( screen.getByText( 'Link to' ) );
 		// Await back button to allow async state updates to complete
-		const backButton = await waitFor( () =>
-			screen.getByLabelText( 'Apply' )
-		);
+		const backButton = await screen.findByLabelText( 'Apply' );
 		Keyboard.dismiss.mockClear();
 		fireEvent.press( backButton );
 
@@ -81,9 +74,7 @@ describe( 'iOS', () => {
 		const screen = render( subject );
 		fireEvent.press( screen.getByText( 'Link to' ) );
 		// Await back button to allow async state updates to complete
-		const backButton = await waitFor( () =>
-			screen.getByLabelText( 'Go back' )
-		);
+		const backButton = await screen.findByLabelText( 'Go back' );
 		Keyboard.dismiss.mockClear();
 		fireEvent.press( backButton );
 
@@ -94,9 +85,7 @@ describe( 'iOS', () => {
 		const screen = render( subject );
 		fireEvent.press( screen.getByText( 'Link to' ) );
 		// Await back button to allow async state updates to complete
-		const backButton = await waitFor( () =>
-			screen.getByLabelText( 'Apply' )
-		);
+		const backButton = await screen.findByLabelText( 'Apply' );
 		Keyboard.dismiss.mockClear();
 		fireEvent.press( backButton );
 

package/src/modal/style.scss

@@ -20,7 +20,7 @@
 	width: 100%;
 	background: $white;
 	box-shadow: $shadow-modal;
-	border-radius: $grid-unit-10 $grid-unit-10 0 0;
+	border-radius: $grid-unit-05 $grid-unit-05 0 0;
 	overflow: hidden;
 	// Have the content element fill the vertical space yet not overflow.
 	display: flex;
@@ -31,7 +31,7 @@
 
 	// Show a centered modal on bigger screens.
 	@include break-small() {
-		border-radius: $grid-unit-10;
+		border-radius: $grid-unit-05;
 		margin: auto;
 		width: auto;
 		min-width: $modal-min-width;

package/src/popover/index.tsx

@@ -52,6 +52,7 @@ import Button from '../button';
 import ScrollLock from '../scroll-lock';
 import { Slot, Fill, useSlot } from '../slot-fill';
 import {
+	computePopoverPosition,
 	getFrameOffset,
 	getFrameScale,
 	positionToPlacement,
@@ -499,8 +500,8 @@ const UnforwardedPopover = (
 							// to use `translateX` and `translateY` because those values would
 							// be overridden by the return value of the
 							// `placementToMotionAnimationProps` function in `AnimatedWrapper`
-							x: Math.round( x ?? 0 ) || undefined,
-							y: Math.round( y ?? 0 ) || undefined,
+							x: computePopoverPosition( x ),
+							y: computePopoverPosition( y ),
 					  }
 			}
 		>

package/src/popover/stories/index.tsx

@@ -128,19 +128,6 @@ Default.args = {
 	),
 };
 
-export const Toolbar: ComponentStory< typeof Popover > = Template.bind( {} );
-Toolbar.args = {
-	children: (
-		<div style={ { width: '280px', whiteSpace: 'normal' } }>
-			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-			eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-			ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-			aliquip ex ea commodo consequat.
-		</div>
-	),
-	variant: 'toolbar',
-};
-
 export const Unstyled: ComponentStory< typeof Popover > = Template.bind( {} );
 Unstyled.args = {
 	children: (

package/src/popover/test/index.tsx

@@ -12,7 +12,11 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { positionToPlacement, placementToMotionAnimationProps } from '../utils';
+import {
+	computePopoverPosition,
+	positionToPlacement,
+	placementToMotionAnimationProps,
+} from '../utils';
 import Popover from '..';
 import type { PopoverProps } from '../types';
 
@@ -248,4 +252,21 @@ describe( 'Popover', () => {
 			);
 		} );
 	} );
+
+	describe( 'computePopoverPosition', () => {
+		it.each( [
+			[ 14, 14 ], // valid integers shouldn't be changes
+			[ 14.02, 14 ], // floating numbers are parsed to integers
+			[ 0, 0 ], // zero remains zero
+			[ null, undefined ],
+			[ NaN, undefined ],
+		] )(
+			'converts `%s` to `%s`',
+			( inputCoordinate, expectedCoordinated ) => {
+				expect( computePopoverPosition( inputCoordinate ) ).toEqual(
+					expectedCoordinated
+				);
+			}
+		);
+	} );
 } );

package/src/popover/utils.ts

@@ -318,3 +318,15 @@ export const getReferenceElement = ( {
 	// Convert any `undefined` value to `null`.
 	return referenceElement ?? null;
 };
+
+/**
+ * Computes the final coordinate that needs to be applied to the floating
+ * element when applying transform inline styles, defaulting to `undefined`
+ * if the provided value is `null` or `NaN`.
+ *
+ * @param c input coordinate (usually as returned from floating-ui)
+ * @return The coordinate's value to be used for inline styles. An `undefined`
+ *         return value means "no style set" for this coordinate.
+ */
+export const computePopoverPosition = ( c: number | null ) =>
+	c === null || Number.isNaN( c ) ? undefined : Math.round( c );

package/src/search-control/README.md

@@ -15,6 +15,7 @@ SearchControl components let users display a search control.
 Render a user interface to input the name of an additional css class.
 
 ```jsx
+import { __ } from '@wordpress/i18n';
 import { SearchControl } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 
@@ -23,6 +24,7 @@ function MySearchControl( { className, setState } ) {
 
     return (
         <SearchControl
+            label={ __( 'Search posts' ) }
             value={ searchInput }
             onChange={ setSearchInput }
         />
@@ -39,6 +41,9 @@ Props not included in this set will be applied to the input element.
 
 If this property is added, a label will be generated using label property as the content.
 
+A label should always be provided as an accessibility best practice, even when a placeholder is defined
+and `hideLabelFromVision` is `true`.
+
 -   Type: `String`
 -   Required: Yes
 
@@ -77,9 +82,10 @@ If this property is added, a help text will be generated using help property as
 
 -   Type: `String|WPElement`
 -   Required: No
+
 ### hideLabelFromVision
 
-If true, the label will only be visible to screen readers.
+If true, the label will not be visible, but will be read by screen readers. Defaults to `true`.
 
 -   Type: `Boolean`
 -   Required: No

package/src/toolbar/stories/index.tsx

@@ -82,9 +82,6 @@ Default.args = {
 			</ToolbarGroup>
 			<ToolbarGroup>
 				<ToolbarItem>
-					{ /* There is an issue here with TS not recognizing the
-					 * `RenderProp` being passed.
-					 * @ts-expect-error */ }
 					{ ( toggleProps ) => (
 						<DropdownMenu
 							icon={ alignLeft }

package/src/toolbar/toolbar/index.tsx

@@ -21,14 +21,11 @@ import {
 	ContextSystemProvider,
 } from '../../ui/context';
 
-// TODO:
-// - (optional) make the legacy `DropdownMenu` read the context variable
-// - swap the legacy `DropdownMenu` with the new version of the component
-//   once it's stable
 const CONTEXT_SYSTEM_VALUE = {
 	DropdownMenu: {
-		// Note: the legacy `DropdownMenu` component is not yet reactive to this
-		// context variant. See https://github.com/WordPress/gutenberg/pull/51097.
+		variant: 'toolbar',
+	},
+	Dropdown: {
 		variant: 'toolbar',
 	},
 };

package/src/toolbar/toolbar/toolbar-container.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useToolbarState, Toolbar } from 'reakit/Toolbar';
+import { useToolbarStore, Toolbar } from '@ariakit/react/toolbar';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -21,22 +21,18 @@ function UnforwardedToolbarContainer(
 	{ label, ...props }: WordPressComponentProps< ToolbarProps, 'div', false >,
 	ref: ForwardedRef< any >
 ) {
-	// https://reakit.io/docs/basic-concepts/#state-hooks
-	// Passing baseId for server side rendering (which includes snapshots)
-	// If an id prop is passed to Toolbar, toolbar items will use it as a base for their ids
-	const toolbarState = useToolbarState( {
-		loop: true,
-		baseId: props.id,
+	const toolbarStore = useToolbarStore( {
+		focusLoop: true,
 		rtl: isRTL(),
 	} );
 
 	return (
 		// This will provide state for `ToolbarButton`'s
-		<ToolbarContext.Provider value={ toolbarState }>
+		<ToolbarContext.Provider value={ toolbarStore }>
 			<Toolbar
 				ref={ ref }
 				aria-label={ label }
-				{ ...toolbarState }
+				store={ toolbarStore }
 				{ ...props }
 			/>
 		</ToolbarContext.Provider>

package/src/toolbar/toolbar-context/index.ts

@@ -1,15 +1,13 @@
 /**
  * External dependencies
  */
-import type { ToolbarStateReturn } from 'reakit/Toolbar';
+import type { ToolbarStore } from '@ariakit/react/toolbar';
 
 /**
  * WordPress dependencies
  */
 import { createContext } from '@wordpress/element';
 
-const ToolbarContext = createContext< ToolbarStateReturn | undefined >(
-	undefined
-);
+const ToolbarContext = createContext< ToolbarStore | undefined >( undefined );
 
 export default ToolbarContext;

package/src/toolbar/toolbar-dropdown-menu/index.js

@@ -28,7 +28,6 @@ function ToolbarDropdownMenu( props, ref ) {
 				<DropdownMenu
 					{ ...props }
 					popoverProps={ {
-						variant: 'toolbar',
 						...props.popoverProps,
 					} }
 					toggleProps={ toolbarItemProps }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { ToolbarItem as BaseToolbarItem } from 'reakit/Toolbar';
+import { ToolbarItem as BaseToolbarItem } from '@ariakit/react/toolbar';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -14,18 +14,16 @@ import warning from '@wordpress/warning';
  * Internal dependencies
  */
 import ToolbarContext from '../toolbar-context';
+import type { ToolbarItemProps } from './types';
 
 function ToolbarItem(
-	{
-		children,
-		as: Component,
-		...props
-	}: React.ComponentPropsWithoutRef< typeof BaseToolbarItem >,
+	{ children, as: Component, ...props }: ToolbarItemProps,
 	ref: ForwardedRef< any >
 ) {
-	const accessibleToolbarState = useContext( ToolbarContext );
+	const accessibleToolbarStore = useContext( ToolbarContext );
+	const isRenderProp = typeof children === 'function';
 
-	if ( typeof children !== 'function' && ! Component ) {
+	if ( ! isRenderProp && ! Component ) {
 		warning(
 			'`ToolbarItem` is a generic headless component. You must pass either a `children` prop as a function or an `as` prop as a component. ' +
 				'See https://developer.wordpress.org/block-editor/components/toolbar-item/'
@@ -35,24 +33,24 @@ function ToolbarItem(
 
 	const allProps = { ...props, ref, 'data-toolbar-item': true };
 
-	if ( ! accessibleToolbarState ) {
+	if ( ! accessibleToolbarStore ) {
 		if ( Component ) {
 			return <Component { ...allProps }>{ children }</Component>;
 		}
-		if ( typeof children !== 'function' ) {
+		if ( ! isRenderProp ) {
 			return null;
 		}
 		return children( allProps );
 	}
 
+	const render = isRenderProp ? children : Component && <Component />;
+
 	return (
 		<BaseToolbarItem
-			{ ...accessibleToolbarState }
 			{ ...allProps }
-			as={ Component }
-		>
-			{ children }
-		</BaseToolbarItem>
+			store={ accessibleToolbarStore }
+			render={ render }
+		/>
 	);
 }