@wordpress/components 25.0.0 → 25.1.1

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,
@@ -74,7 +75,7 @@ import { overlayMiddlewares } from './overlay-middlewares';
  *
  * @type {string}
  */
-const SLOT_NAME = 'Popover';
+export const SLOT_NAME = 'Popover';
 
 // An SVG displaying a triangle facing down, filled with a solid
 // color and bordered in such a way to create an arrow-like effect.
@@ -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/private-apis.ts

@@ -21,6 +21,7 @@ import {
 	DropdownSubMenu as DropdownSubMenuV2,
 	DropdownSubMenuTrigger as DropdownSubMenuTriggerV2,
 } from './dropdown-menu-v2';
+import { ComponentsContext } from './ui/context/context-system-provider';
 
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
@@ -33,6 +34,7 @@ lock( privateApis, {
 	CustomSelectControl,
 	__experimentalPopoverLegacyPositionToPlacement,
 	createPrivateSlotFill,
+	ComponentsContext,
 	DropdownMenuV2,
 	DropdownMenuCheckboxItemV2,
 	DropdownMenuGroupV2,

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/slot-fill/README.md

@@ -70,7 +70,7 @@ Both `Slot` and `Fill` accept a `name` string prop, where a `Slot` with a given
 
 `Slot` with `bubblesVirtually` set to true also accept an optional `className` to add to the slot container.
 
-`Slot` also accepts optional `children` function prop, which takes `fills` as a param. It allows to perform additional processing and wrap `fills` conditionally.
+`Slot` accepts an optional `children` function prop, which takes `fills` as a param. It allows you to perform additional processing and wrap `fills` conditionally.
 
 _Example_:
 
@@ -89,3 +89,28 @@ const Toolbar = ( { isMobile } ) => (
 	</div>
 );
 ```
+
+Props can also be passed from a `Slot` to a `Fill` by using the prop `fillProps` on the `Slot`:
+
+```jsx
+const { Fill, Slot } = createSlotFill( 'Toolbar' );
+
+const ToolbarItem = () => (
+	<Fill>
+		{ ( { hideToolbar } ) => {
+			<Button onClick={ hideToolbar }>Hide</Button>;
+		} }
+	</Fill>
+);
+
+const Toolbar = () => 
+	const hideToolbar() => {
+		console.log( 'Hide toolbar' );
+	}
+	return (
+		<div className="toolbar">
+			<Slot fillProps={ { hideToolbar } } />
+		</div>
+	);
+);
+```

package/src/snackbar/list.tsx

@@ -73,6 +73,7 @@ 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/tab-panel/index.tsx

@@ -2,11 +2,13 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
  */
 import {
+	forwardRef,
 	useState,
 	useEffect,
 	useLayoutEffect,
@@ -76,16 +78,19 @@ const TabButton = ( {
  * );
  * ```
  */
-export function TabPanel( {
-	className,
-	children,
-	tabs,
-	selectOnMove = true,
-	initialTabName,
-	orientation = 'horizontal',
-	activeClass = 'is-active',
-	onSelect,
-}: WordPressComponentProps< TabPanelProps, 'div', false > ) {
+const UnforwardedTabPanel = (
+	{
+		className,
+		children,
+		tabs,
+		selectOnMove = true,
+		initialTabName,
+		orientation = 'horizontal',
+		activeClass = 'is-active',
+		onSelect,
+	}: WordPressComponentProps< TabPanelProps, 'div', false >,
+	ref: ForwardedRef< any >
+) => {
 	const instanceId = useInstanceId( TabPanel, 'tab-panel' );
 	const [ selected, setSelected ] = useState< string >();
 
@@ -151,7 +156,7 @@ export function TabPanel( {
 	}, [ tabs, selectedTab?.disabled, handleTabSelection ] );
 
 	return (
-		<div className={ className }>
+		<div className={ className } ref={ ref }>
 			<NavigableMenu
 				role="tablist"
 				orientation={ orientation }
@@ -196,6 +201,7 @@ export function TabPanel( {
 			) }
 		</div>
 	);
-}
+};
 
+export const TabPanel = forwardRef( UnforwardedTabPanel );
 export default TabPanel;

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

@@ -16,7 +16,19 @@ import deprecated from '@wordpress/deprecated';
 import ToolbarGroup from '../toolbar-group';
 import ToolbarContainer from './toolbar-container';
 import type { ToolbarProps } from './types';
-import type { WordPressComponentProps } from '../../ui/context';
+import {
+	WordPressComponentProps,
+	ContextSystemProvider,
+} from '../../ui/context';
+
+const CONTEXT_SYSTEM_VALUE = {
+	DropdownMenu: {
+		variant: 'toolbar',
+	},
+	Dropdown: {
+		variant: 'toolbar',
+	},
+};
 
 function UnforwardedToolbar(
 	{
@@ -40,12 +52,14 @@ function UnforwardedToolbar(
 		className
 	);
 	return (
-		<ToolbarContainer
-			className={ finalClassName }
-			label={ label }
-			ref={ ref }
-			{ ...props }
-		/>
+		<ContextSystemProvider value={ CONTEXT_SYSTEM_VALUE }>
+			<ToolbarContainer
+				className={ finalClassName }
+				label={ label }
+				ref={ ref }
+				{ ...props }
+			/>
+		</ContextSystemProvider>
 	);
 }
 

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 }
+		/>
 	);
 }
 

package/src/toolbar/toolbar-item/types.ts

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import type {
+	ReactElement,
+	ReactNode,
+	ElementType,
+	HTMLAttributes,
+	RefAttributes,
+} from 'react';
+
+export type ToolbarItemProps = Omit< HTMLAttributes< any >, 'children' > & {
+	/**
+	 * Component type that will be used to render the toolbar item.
+	 */
+	as?: ElementType;
+	/**
+	 * A function that receives the props that should be spread onto the element
+	 * that will be rendered as a toolbar item. If the `as` prop is not provided,
+	 * this prop will accept a ReactNode instead.
+	 */
+	children?:
+		| ReactNode
+		| ( (
+				props: HTMLAttributes< any > & RefAttributes< any >
+		  ) => ReactElement | null );
+};

package/src/tooltip/test/index.native.js

@@ -53,9 +53,7 @@ it( 'displays the message', () => {
 	expect( screen.getByText( 'A helpful message' ) ).toBeTruthy();
 } );
 
-// Skipped until `pointerEvents: 'box-none'` no longer erroneously prevents
-// triggering `onTouch*` on the element: https://github.com/callstack/react-native-testing-library/issues/897
-it.skip( 'dismisses when the screen is tapped', () => {
+it( 'dismisses when the screen is tapped', () => {
 	const screen = render(
 		<TooltipSlot>
 			<Tooltip visible={ true } text="A helpful message">

package/src/ui/context/index.ts

@@ -4,6 +4,7 @@ export {
 } from './context-system-provider';
 export {
 	contextConnect,
+	contextConnectWithoutRef,
 	hasConnectNamespace,
 	getConnectNamespace,
 } from './context-connect';