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

package/src/tooltip/index.tsx

@@ -8,21 +8,27 @@ import * as Ariakit from '@ariakit/react';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { Children, cloneElement } from '@wordpress/element';
+import {
+	Children,
+	useContext,
+	createContext,
+	forwardRef,
+} from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
-import type { TooltipProps, TooltipInternalContext } from './types';
+import type {
+	TooltipProps,
+	TooltipInternalContext as TooltipInternalContextType,
+} from './types';
 import Shortcut from '../shortcut';
 import { positionToPlacement } from '../popover/utils';
-import {
-	contextConnect,
-	useContextSystem,
-	ContextSystemProvider,
-} from '../context';
-import type { WordPressComponentProps } from '../context';
+
+const TooltipInternalContext = createContext< TooltipInternalContextType >( {
+	isNestedInTooltip: false,
+} );
 
 /**
  * Time over anchor to wait before showing tooltip
@@ -30,13 +36,11 @@ import type { WordPressComponentProps } from '../context';
 export const TOOLTIP_DELAY = 700;
 
 const CONTEXT_VALUE = {
-	Tooltip: {
-		isNestedInTooltip: true,
-	},
+	isNestedInTooltip: true,
 };
 
-function UnconnectedTooltip(
-	props: WordPressComponentProps< TooltipProps, 'div', false >,
+function UnforwardedTooltip(
+	props: TooltipProps,
 	ref: React.ForwardedRef< any >
 ) {
 	const {
@@ -48,14 +52,10 @@ function UnconnectedTooltip(
 		shortcut,
 		text,
 
-		// From Internal Context system
-		isNestedInTooltip,
-
 		...restProps
-	} = useContextSystem< typeof props & TooltipInternalContext >(
-		props,
-		'Tooltip'
-	);
+	} = props;
+
+	const { isNestedInTooltip } = useContext( TooltipInternalContext );
 
 	const baseId = useInstanceId( Tooltip, 'tooltip' );
 	const describedById = text || shortcut ? baseId : undefined;
@@ -96,16 +96,15 @@ function UnconnectedTooltip(
 	} );
 
 	if ( isNestedInTooltip ) {
-		return isOnlyChild
-			? cloneElement( children, {
-					...restProps,
-					ref,
-			  } )
-			: children;
+		return isOnlyChild ? (
+			<Ariakit.Role { ...restProps } render={ children } />
+		) : (
+			children
+		);
 	}
 
 	return (
-		<ContextSystemProvider value={ CONTEXT_VALUE }>
+		<TooltipInternalContext.Provider value={ CONTEXT_VALUE }>
 			<Ariakit.TooltipAnchor
 				onClick={ hideOnClick ? tooltipStore.hide : undefined }
 				store={ tooltipStore }
@@ -117,6 +116,7 @@ function UnconnectedTooltip(
 			{ isOnlyChild && ( text || shortcut ) && (
 				<Ariakit.Tooltip
 					{ ...restProps }
+					className="components-tooltip"
 					unmountOnHide
 					gutter={ 4 }
 					id={ describedById }
@@ -134,10 +134,10 @@ function UnconnectedTooltip(
 					) }
 				</Ariakit.Tooltip>
 			) }
-		</ContextSystemProvider>
+		</TooltipInternalContext.Provider>
 	);
 }
 
-export const Tooltip = contextConnect( UnconnectedTooltip, 'Tooltip' );
+export const Tooltip = forwardRef( UnforwardedTooltip );
 
 export default Tooltip;

package/src/tooltip/test/index.tsx

@@ -12,12 +12,11 @@ import { shortcutAriaLabel } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
-import Button from '../../button';
 import Modal from '../../modal';
 import Tooltip, { TOOLTIP_DELAY } from '..';
 
 const props = {
-	children: <Button>Tooltip anchor</Button>,
+	children: <button>Tooltip anchor</button>,
 	text: 'tooltip text',
 };
 
@@ -56,8 +55,8 @@ describe( 'Tooltip', () => {
 			render(
 				// @ts-expect-error Tooltip cannot have more than one child element
 				<Tooltip { ...props }>
-					<Button>First button</Button>
-					<Button>Second button</Button>
+					<button>First button</button>
+					<button>Second button</button>
 				</Tooltip>
 			);
 
@@ -102,6 +101,17 @@ describe( 'Tooltip', () => {
 				screen.queryByRole( 'button', { description: 'tooltip text' } )
 			).not.toBeInTheDocument();
 		} );
+
+		it( 'should not leak Tooltip props to the tooltip anchor', () => {
+			render(
+				<Tooltip data-foo>
+					<button>Anchor</button>
+				</Tooltip>
+			);
+			expect(
+				screen.getByRole( 'button', { name: 'Anchor' } )
+			).not.toHaveAttribute( 'data-foo' );
+		} );
 	} );
 
 	describe( 'keyboard focus', () => {
@@ -142,9 +152,7 @@ describe( 'Tooltip', () => {
 			render(
 				<>
 					<Tooltip { ...props }>
-						<Button disabled __experimentalIsFocusable>
-							Tooltip anchor
-						</Button>
+						<button aria-disabled="true">Tooltip anchor</button>
 					</Tooltip>
 					<button>Focus me</button>
 				</>
@@ -196,9 +204,7 @@ describe( 'Tooltip', () => {
 			render(
 				<>
 					<Tooltip { ...props }>
-						<Button disabled __experimentalIsFocusable>
-							Tooltip anchor
-						</Button>
+						<button aria-disabled="true">Tooltip anchor</button>
 					</Tooltip>
 					<button>Focus me</button>
 				</>
@@ -310,12 +316,12 @@ describe( 'Tooltip', () => {
 
 			render(
 				<Tooltip { ...props }>
-					<Button
+					<button
 						onMouseEnter={ onMouseEnterMock }
 						onMouseLeave={ onMouseLeaveMock }
 					>
 						Tooltip anchor
-					</Button>
+					</button>
 				</Tooltip>
 			);
 
@@ -443,7 +449,7 @@ describe( 'Tooltip', () => {
 				<Tooltip text="Outer tooltip">
 					<Tooltip text="Middle tooltip">
 						<Tooltip text="Inner tooltip">
-							<Button>Tooltip anchor</Button>
+							<button>Tooltip anchor</button>
 						</Tooltip>
 					</Tooltip>
 				</Tooltip>
@@ -481,5 +487,18 @@ describe( 'Tooltip', () => {
 				).not.toBeInTheDocument()
 			);
 		} );
+
+		it( 'should not leak Tooltip component classname to the anchor element', () => {
+			render(
+				<Tooltip>
+					<Tooltip>
+						<button>Anchor</button>
+					</Tooltip>
+				</Tooltip>
+			);
+			expect(
+				screen.getByRole( 'button', { name: 'Anchor' } )
+			).not.toHaveClass( 'components-tooltip' );
+		} );
 	} );
 } );

package/src/tooltip/types.ts

@@ -61,5 +61,5 @@ export type TooltipProps = {
 };
 
 export type TooltipInternalContext = {
-	isNestedInTooltip?: boolean;
+	isNestedInTooltip: boolean;
 };