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

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

@@ -18,6 +18,13 @@ This component is generated automatically by its parent
 
 ## Props
 
+### `dropdownMenuProps`: `{}`
+
+The dropdown menu props to configure the 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-header/component.tsx

@@ -39,7 +39,7 @@ const DefaultControlsGroup = ( {
 	const resetSuffix = <ResetLabel aria-hidden>{ __( 'Reset' ) }</ResetLabel>;
 
 	return (
-		<MenuGroup label={ __( 'Defaults' ) }>
+		<>
 			{ items.map( ( [ label, hasValue ] ) => {
 				if ( hasValue ) {
 					return (
@@ -73,6 +73,7 @@ const DefaultControlsGroup = ( {
 				return (
 					<MenuItem
 						key={ label }
+						icon={ check }
 						className={ itemClassName }
 						role="menuitemcheckbox"
 						isSelected
@@ -82,7 +83,7 @@ const DefaultControlsGroup = ( {
 					</MenuItem>
 				);
 			} ) }
-		</MenuGroup>
+		</>
 	);
 };
 
@@ -95,7 +96,7 @@ const OptionalControlsGroup = ( {
 	}
 
 	return (
-		<MenuGroup label={ __( 'Tools' ) }>
+		<>
 			{ items.map( ( [ label, isSelected ] ) => {
 				const itemLabel = isSelected
 					? sprintf(
@@ -143,7 +144,7 @@ const OptionalControlsGroup = ( {
 					</MenuItem>
 				);
 			} ) }
-		</MenuGroup>
+		</>
 	);
 };
 
@@ -162,6 +163,7 @@ const ToolsPanelHeader = (
 		menuItems,
 		resetAll,
 		toggleItem,
+		dropdownMenuProps,
 		...headerProps
 	} = useToolsPanelHeader( props );
 
@@ -192,6 +194,7 @@ const ToolsPanelHeader = (
 			</Heading>
 			{ hasMenuItems && (
 				<DropdownMenu
+					{ ...dropdownMenuProps }
 					icon={ dropDownMenuIcon }
 					label={ dropDownMenuLabelText }
 					menuProps={ { className: dropdownMenuClassName } }
@@ -202,15 +205,19 @@ const ToolsPanelHeader = (
 				>
 					{ () => (
 						<>
-							<DefaultControlsGroup
-								items={ defaultItems }
-								toggleItem={ toggleItem }
-								itemClassName={ defaultControlsItemClassName }
-							/>
-							<OptionalControlsGroup
-								items={ optionalItems }
-								toggleItem={ toggleItem }
-							/>
+							<MenuGroup label={ labelText }>
+								<DefaultControlsGroup
+									items={ defaultItems }
+									toggleItem={ toggleItem }
+									itemClassName={
+										defaultControlsItemClassName
+									}
+								/>
+								<OptionalControlsGroup
+									items={ optionalItems }
+									toggleItem={ toggleItem }
+								/>
+							</MenuGroup>
 							<MenuGroup>
 								<MenuItem
 									aria-disabled={ ! canResetAll }

package/src/tools-panel/types.ts

@@ -7,6 +7,7 @@ import type { ReactNode } from 'react';
  * Internal dependencies
  */
 import type { HeadingSize } from '../heading/types';
+import type { DropdownMenu } from '../dropdown-menu';
 
 export type ResetAllFilter = ( attributes?: any ) => any;
 type ResetAll = ( filters?: ResetAllFilter[] ) => void;
@@ -16,6 +17,10 @@ export type ToolsPanelProps = {
 	 * The child elements.
 	 */
 	children: ReactNode;
+	/**
+	 * The dropdown menu props to configure the panel's `DropdownMenu`.
+	 */
+	dropdownMenuProps?: React.ComponentProps< typeof DropdownMenu >;
 	/**
 	 * Flags that the items in this ToolsPanel will be contained within an inner
 	 * wrapper element allowing the panel to lay them out accordingly.
@@ -69,6 +74,10 @@ export type ToolsPanelProps = {
 };
 
 export type ToolsPanelHeaderProps = {
+	/**
+	 * The dropdown menu props to configure the panel's `DropdownMenu`.
+	 */
+	dropdownMenuProps?: React.ComponentProps< typeof DropdownMenu >;
 	/**
 	 * The heading level of the panel's header.
 	 *

package/src/tooltip/README.md

@@ -16,6 +16,10 @@ const MyTooltip = () => (
 );
 ```
 
+### Nested tooltips
+
+In case one or more `Tooltip` components are rendered inside another `Tooltip` component, only the tooltip associated to the outermost `Tooltip` component will be rendered in the browser and shown to the user appropriately. The rest of the nested `Tooltip` components will simply no-op and pass-through their anchor.
+
 ## Props
 
 The component accepts the following props:

package/src/tooltip/index.tsx

@@ -8,22 +8,37 @@ import * as Ariakit from '@ariakit/react';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { Children } from '@wordpress/element';
+import { Children, cloneElement } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
-import type { TooltipProps } from './types';
+import type { TooltipProps, TooltipInternalContext } from './types';
 import Shortcut from '../shortcut';
 import { positionToPlacement } from '../popover/utils';
+import {
+	contextConnect,
+	useContextSystem,
+	ContextSystemProvider,
+} from '../context';
+import type { WordPressComponentProps } from '../context';
 
 /**
  * Time over anchor to wait before showing tooltip
  */
 export const TOOLTIP_DELAY = 700;
 
-function Tooltip( props: TooltipProps ) {
+const CONTEXT_VALUE = {
+	Tooltip: {
+		isNestedInTooltip: true,
+	},
+};
+
+function UnconnectedTooltip(
+	props: WordPressComponentProps< TooltipProps, 'div', false >,
+	ref: React.ForwardedRef< any >
+) {
 	const {
 		children,
 		delay = TOOLTIP_DELAY,
@@ -32,7 +47,15 @@ function Tooltip( props: TooltipProps ) {
 		position,
 		shortcut,
 		text,
-	} = props;
+
+		// From Internal Context system
+		isNestedInTooltip,
+
+		...restProps
+	} = useContextSystem< typeof props & TooltipInternalContext >(
+		props,
+		'Tooltip'
+	);
 
 	const baseId = useInstanceId( Tooltip, 'tooltip' );
 	const describedById = text || shortcut ? baseId : undefined;
@@ -43,7 +66,7 @@ function Tooltip( props: TooltipProps ) {
 		if ( 'development' === process.env.NODE_ENV ) {
 			// eslint-disable-next-line no-console
 			console.error(
-				'Tooltip should be called with only a single child element.'
+				'wp-components.Tooltip should be called with only a single child element.'
 			);
 		}
 	}
@@ -64,24 +87,37 @@ function Tooltip( props: TooltipProps ) {
 	}
 	computedPlacement = computedPlacement || 'bottom';
 
-	const tooltipStore = Ariakit.useTooltipStore( {
+	// Removing the `Ariakit` namespace from the hook name allows ESLint to
+	// properly identify the hook, and apply the correct linting rules.
+	const useAriakitTooltipStore = Ariakit.useTooltipStore;
+	const tooltipStore = useAriakitTooltipStore( {
 		placement: computedPlacement,
-		timeout: delay,
+		showTimeout: delay,
 	} );
 
+	if ( isNestedInTooltip ) {
+		return isOnlyChild
+			? cloneElement( children, {
+					...restProps,
+					ref,
+			  } )
+			: children;
+	}
+
 	return (
-		<>
+		<ContextSystemProvider value={ CONTEXT_VALUE }>
 			<Ariakit.TooltipAnchor
 				onClick={ hideOnClick ? tooltipStore.hide : undefined }
 				store={ tooltipStore }
 				render={ isOnlyChild ? children : undefined }
+				ref={ ref }
 			>
 				{ isOnlyChild ? undefined : children }
 			</Ariakit.TooltipAnchor>
 			{ isOnlyChild && ( text || shortcut ) && (
 				<Ariakit.Tooltip
+					{ ...restProps }
 					unmountOnHide
-					className="components-tooltip"
 					gutter={ 4 }
 					id={ describedById }
 					overflowPadding={ 0.5 }
@@ -98,8 +134,10 @@ function Tooltip( props: TooltipProps ) {
 					) }
 				</Ariakit.Tooltip>
 			) }
-		</>
+		</ContextSystemProvider>
 	);
 }
 
+export const Tooltip = contextConnect( UnconnectedTooltip, 'Tooltip' );
+
 export default Tooltip;

package/src/tooltip/stories/index.story.tsx

@@ -30,7 +30,7 @@ const meta: Meta< typeof Tooltip > = {
 				'bottom right',
 			],
 		},
-		shortcut: { control: { type: 'text' } },
+		shortcut: { control: { type: 'object' } },
 	},
 	parameters: {
 		controls: { expanded: true },
@@ -57,3 +57,20 @@ KeyboardShortcut.args = {
 		ariaLabel: shortcutAriaLabel.primaryShift( ',' ),
 	},
 };
+
+/**
+ * In case one or more `Tooltip` components are rendered inside another
+ * `Tooltip` component, only the tooltip associated to the outermost `Tooltip`
+ * component will be rendered in the browser and shown to the user
+ * appropriately. The rest of the nested `Tooltip` components will simply no-op
+ * and pass-through their anchor.
+ */
+export const Nested: StoryFn< typeof Tooltip > = Template.bind( {} );
+Nested.args = {
+	children: (
+		<Tooltip text="Nested tooltip text (that will never show)">
+			<Button variant="primary">Tooltip Anchor</Button>
+		</Tooltip>
+	),
+	text: 'Outer tooltip text',
+};