@wordpress/components 26.0.1-next.5a1d1283.0 → 26.0.2

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

@@ -0,0 +1,92 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	DropdownMenuProps,
+	DropdownOption,
+} from '../../dropdown-menu/types';
+
+/**
+ * WordPress dependencies
+ */
+import type { Props as IconProps } from '../../icon';
+
+export type ToolbarGroupControls = DropdownOption & {
+	/**
+	 * An optional subscript associated to the control.
+	 */
+	subscript?: string;
+};
+
+type ToolbarGroupPropsBase = {
+	/**
+	 * The controls to render in this toolbar.
+	 */
+	controls?: ToolbarGroupControls[] | ToolbarGroupControls[][];
+
+	/**
+	 * Class to set on the container div.
+	 */
+	className?: string;
+
+	/**
+	 * Any other things to render inside the toolbar besides the controls.
+	 */
+	children?: ReactNode;
+
+	/**
+	 * The Dashicon icon slug to be shown for the option.
+	 */
+	icon?: IconProps[ 'icon' ];
+};
+
+export type ToolbarGroupProps = ToolbarGroupPropsBase &
+	(
+		| {
+				/**
+				 * When true, turns `ToolbarGroup` into a dropdown menu.
+				 */
+				isCollapsed?: false;
+				/**
+				 * Any other things to render inside the toolbar besides the controls.
+				 */
+				children?: ReactNode;
+				title?: never;
+		  }
+		| {
+				/**
+				 * When true, turns `ToolbarGroup` into a dropdown menu.
+				 */
+				isCollapsed: true;
+				/**
+				 * Any other things to render inside the toolbar besides the controls.
+				 */
+				children?: ToolbarGroupCollapsedProps[ 'children' ];
+				/**
+				 * ARIA label for dropdown menu if is collapsed.
+				 */
+				title: string;
+		  }
+	);
+
+export type ToolbarGroupCollapsedProps = DropdownMenuProps;
+
+export type ToolbarGroupContainerProps = {
+	/**
+	 * Children to be rendered inside the toolbar.
+	 */
+	children?: ReactNode;
+	/**
+	 * Class to set on the container div.
+	 */
+	className?: string;
+	/**
+	 * Props to be passed.
+	 */
+	props?: any;
+};

package/src/toolbar/toolbar-item/README.md

@@ -1,6 +1,6 @@
 # ToolbarItem
 
-A ToolbarItem is a generic headless component that can be used to make any custom component a [Toolbar](/packages/components/src/toolbar/README.md) item. It should be inside a [Toolbar](/packages/components/src/toolbar/README.md) or [ToolbarGroup](/packages/components/src/toolbar-group/README.md) when used to create general interfaces. If you're using it to add controls to your custom block, you should consider using [BlockControls](/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md).
+A ToolbarItem is a generic headless component that can be used to make any custom component a [Toolbar](/packages/components/src/toolbar/README.md) item. It should be inside a [Toolbar](/packages/components/src/toolbar/README.md) or [ToolbarGroup](/packages/components/src/toolbar-group/README.md) when used to create general interfaces. If you're using it to add controls to your custom block, you should consider using [BlockControls](/docs/getting-started/fundamentals/block-in-the-editor.md).
 
 ## Usage
 
@@ -49,7 +49,7 @@ function MyToolbar() {
 
 ### Inside BlockControls
 
-If you're working on a custom block and you want to add controls to the block toolbar, you should use [BlockControls](/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md) instead. Optionally wrapping it with [ToolbarGroup](/packages/components/src/toolbar-group/README.md).
+If you're working on a custom block and you want to add controls to the block toolbar, you should use [BlockControls](/docs/getting-started/fundamentals/block-in-the-editor.md) instead. Optionally wrapping it with [ToolbarGroup](/packages/components/src/toolbar-group/README.md).
 
 ```jsx
 import { BlockControls } from '@wordpress/block-editor';

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

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { ToolbarItem as BaseToolbarItem } from '@ariakit/react/toolbar';
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -43,10 +44,12 @@ function ToolbarItem(
 		return children( allProps );
 	}
 
-	const render = isRenderProp ? children : Component && <Component />;
+	const render = isRenderProp
+		? children
+		: Component && <Component>{ children }</Component>;
 
 	return (
-		<BaseToolbarItem
+		<Ariakit.ToolbarItem
 			{ ...allProps }
 			store={ accessibleToolbarStore }
 			render={ render }

package/src/tools-panel/styles.ts

@@ -14,7 +14,7 @@ import {
 } from '../base-control/styles/base-control-styles';
 import { LabelWrapper } from '../input-control/styles/input-control-styles';
 import { COLORS, CONFIG, rtl } from '../utils';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 
 const toolsPanelGrid = {
 	columns: ( columns: number ) => css`

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.
@@ -191,5 +198,8 @@ A function to call when the `Reset all` menu option is selected. As an argument,
 Advises the `ToolsPanel` that all of its `ToolsPanelItem` children should render
 placeholder content (instead of `null`) when they are toggled off and hidden.
 
+Note that placeholder items won't apply the `className` that would be
+normally applied to a visible `ToolsPanelItem` via the `className` prop.
+
 - Required: No
 - Default: `false`

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

@@ -10,8 +10,8 @@ import ToolsPanelHeader from '../tools-panel-header';
 import { ToolsPanelContext } from '../context';
 import { useToolsPanel } from './hook';
 import { Grid } from '../../grid';
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import type { ToolsPanelProps } from '../types';
 
 const UnconnectedToolsPanel = (
@@ -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>

package/src/tools-panel/tools-panel/hook.ts

@@ -13,8 +13,8 @@ import {
  * Internal dependencies
  */
 import * as styles from '../styles';
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks/use-cx';
 import type {
 	ToolsPanelItem,

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

@@ -19,8 +19,8 @@ import MenuItem from '../../menu-item';
 import { HStack } from '../../h-stack';
 import { Heading } from '../../heading';
 import { useToolsPanelHeader } from './hook';
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { ResetLabel } from '../styles';
 import type {
 	ToolsPanelControlsGroupProps,
@@ -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/tools-panel-header/hook.ts

@@ -8,8 +8,8 @@ import { useMemo } from '@wordpress/element';
  */
 import * as styles from '../styles';
 import { useToolsPanelContext } from '../context';
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { ToolsPanelHeaderProps } from '../types';
 

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

@@ -8,8 +8,8 @@ import type { ForwardedRef } from 'react';
  */
 import { useToolsPanelItem } from './hook';
 import { View } from '../../view';
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import type { ToolsPanelItemProps } from '../types';
 
 // This wraps controls to be conditionally displayed within a tools panel. It

package/src/tools-panel/tools-panel-item/hook.ts

@@ -2,15 +2,20 @@
  * WordPress dependencies
  */
 import { usePrevious } from '@wordpress/compose';
-import { useCallback, useEffect, useMemo } from '@wordpress/element';
+import {
+	useCallback,
+	useEffect,
+	useLayoutEffect,
+	useMemo,
+} from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import * as styles from '../styles';
 import { useToolsPanelContext } from '../context';
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { ToolsPanelItemProps } from '../types';
 
@@ -47,11 +52,14 @@ export function useToolsPanelItem(
 		__experimentalLastVisibleItemClass,
 	} = useToolsPanelContext();
 
-	const hasValueCallback = useCallback( hasValue, [ panelId, hasValue ] );
-	const resetAllFilterCallback = useCallback( resetAllFilter, [
-		panelId,
-		resetAllFilter,
-	] );
+	// hasValue is a new function on every render, so do not add it as a
+	// dependency to the useCallback hook! If needed, we should use a ref.
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	const hasValueCallback = useCallback( hasValue, [ panelId ] );
+	// resetAllFilter is a new function on every render, so do not add it as a
+	// dependency to the useCallback hook! If needed, we should use a ref.
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	const resetAllFilterCallback = useCallback( resetAllFilter, [ panelId ] );
 	const previousPanelId = usePrevious( currentPanelId );
 
 	const hasMatchingPanel =
@@ -59,7 +67,11 @@ export function useToolsPanelItem(
 
 	// Registering the panel item allows the panel to include it in its
 	// automatically generated menu and determine its initial checked status.
-	useEffect( () => {
+	//
+	// This is performed in a layout effect to ensure that the panel item
+	// is registered before it is rendered preventing a rendering glitch.
+	// See: https://github.com/WordPress/gutenberg/issues/56470
+	useLayoutEffect( () => {
 		if ( hasMatchingPanel && previousPanelId !== null ) {
 			registerPanelItem( {
 				hasValue: hasValueCallback,
@@ -117,27 +129,13 @@ export function useToolsPanelItem(
 	const newValueSet = isValueSet && ! wasValueSet;
 
 	// Notify the panel when an item's value has been set.
-	//
-	// 1. For default controls, this is so "reset" appears beside its menu item.
-	// 2. For optional controls, when the panel ID is `null`, it allows the
-	// panel to ensure the item is toggled on for display in the menu, given the
-	// value has been set external to the control.
 	useEffect( () => {
 		if ( ! newValueSet ) {
 			return;
 		}
 
-		if ( isShownByDefault || currentPanelId === null ) {
-			flagItemCustomization( label, menuGroup );
-		}
-	}, [
-		currentPanelId,
-		newValueSet,
-		isShownByDefault,
-		menuGroup,
-		label,
-		flagItemCustomization,
-	] );
+		flagItemCustomization( label, menuGroup );
+	}, [ newValueSet, menuGroup, label, flagItemCustomization ] );
 
 	// Determine if the panel item's corresponding menu is being toggled and
 	// trigger appropriate callback if it is.
@@ -176,18 +174,16 @@ export function useToolsPanelItem(
 
 	const cx = useCx();
 	const classes = useMemo( () => {
-		const placeholderStyle =
-			shouldRenderPlaceholder &&
-			! isShown &&
-			styles.ToolsPanelItemPlaceholder;
+		const shouldApplyPlaceholderStyles =
+			shouldRenderPlaceholder && ! isShown;
 		const firstItemStyle =
 			firstDisplayedItem === label && __experimentalFirstVisibleItemClass;
 		const lastItemStyle =
 			lastDisplayedItem === label && __experimentalLastVisibleItemClass;
 		return cx(
 			styles.ToolsPanelItem,
-			placeholderStyle,
-			className,
+			shouldApplyPlaceholderStyles && styles.ToolsPanelItemPlaceholder,
+			! shouldApplyPlaceholderStyles && className,
 			firstItemStyle,
 			lastItemStyle
 		);

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.
@@ -50,6 +55,8 @@ export type ToolsPanelProps = {
 	/**
 	 * Advises the `ToolsPanel` that its child `ToolsPanelItem`s should render
 	 * placeholder content instead of null when they are toggled off and hidden.
+	 * Note that placeholder items won't apply the `className` that would be
+	 * normally applied to a visible `ToolsPanelItem` via the `className` prop.
 	 *
 	 * @default false
 	 */
@@ -67,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

@@ -1,8 +1,6 @@
-# Tooltip
+# ToolTip
 
-Tooltip is a React component to render floating help text relative to a node when it receives focus or when the user places the mouse cursor atop it. If the tooltip exceeds the bounds of the page in the direction it opens, its position will be flipped automatically.
-
-Accessibility note: the tooltip text is hidden from screen readers and assistive technologies that understand ARIA. To make it accessible, use an `aria-label` attribute on the same element the tooltip is applied to, preferably using the same text used for the tooltip.
+Tooltip is a React component to render floating help text relative to a node when it receives focus or it is hovered upon by a mouse. If the tooltip exceeds the bounds of the page in the direction it opens, its position will be flipped automatically.
 
 ## Usage
 
@@ -18,53 +16,62 @@ 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:
 
-### position
+#### `children`: `React.ReactElement`
 
-The direction in which the tooltip should open relative to its parent node. Specify y- and x-axis as a space-separated string. Supports `"top"`, `"bottom"` y axis, and `"left"`, `"center"`, `"right"` x axis.
+The element to which the tooltip should anchor.
 
--   Type: `String`
--   Required: No
--   Default: `"bottom"`
+**NOTE:** Accepts only one child element.
 
-### children
+-   Required: Yes
 
-The element to which the tooltip should anchor.
+#### `delay`: `number`
 
-**NOTE:** You must pass only a single child. Tooltip renders itself as a clone of `children` with a [`Popover`](/packages/components/src/popover/README.md) added as an additional child.
+The amount of time in milliseconds to wait before showing the tooltip.
 
--   Type: `Element`
--   Required: Yes
+-   Required: No
+-   Default: `700`
 
-### text
+#### `hideOnClick`: `boolean`
 
-The tooltip text to show on focus or hover.
+Option to hide the tooltip when the anchor is clicked.
 
--   Type: `String`
 -   Required: No
+-   Default: `true`
+
+#### `placement`: `'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'`
+
+Used to specify the tooltip's placement with respect to its anchor.
+
+-   Required: No
+-   Default: `'bottom'`
+
+#### `position`: `string`
+
+_Note: use the `placement` prop instead when possible._
 
-### shortcut (web only)
+Legacy way to specify the popover's position with respect to its anchor. Specify y- and x-axis as a space-separated string. Supports `'top'`, `'middle'`, `'bottom'` y axis, and `'left'`, `'center'`, `'right'` x axis.
 
--   Type: `string` or `object`
 -   Required: No
+-   Default: `'bottom'`
 
-If shortcut is a string, it is expecting the display text. If shortcut is an object, it will accept the properties of `display` (string) and `ariaLabel` (string).
+#### `shortcut`: `string` | `object`
 
-### delay (web only)
+An option for adding accessible keyboard shortcuts.
 
-Time in milliseconds to wait before showing tooltip after the tooltip's visibility is toggled. This prop is currently only available for the web platforms.
+If shortcut is a string, it is expecting the display text. If shortcut is an object, it will accept the properties of `display`: `string` and `ariaLabel`: `string`.
 
--   Type: `Number`
 -   Required: No
--   Default: 700
 
-### visible (native only)
+#### `text`: `string`
 
-Whether the tooltip should be displayed on initial render. This prop is currently only available for the native mobile app built with React Native.
+The text shown in the tooltip when anchor element is focused or hovered.
 
--   Type: `Boolean`
 -   Required: No
--   Default: `false`