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

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

@@ -1,6 +1,6 @@
 # ToolbarButton
 
-ToolbarButton can be used to add actions to a toolbar, usually 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).
+ToolbarButton can be used to add actions to a toolbar, usually 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).
 
 It has similar features to the [Button](/packages/components/src/button/README.md) component. Using `ToolbarButton` will ensure the correct styling for a button in a toolbar, and also that keyboard interactions in a toolbar are consistent with the [WAI-ARIA toolbar pattern](https://www.w3.org/TR/wai-aria-practices/#toolbar).
 
@@ -27,7 +27,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-dropdown-menu/README.md

@@ -1,6 +1,6 @@
 # ToolbarDropdownMenu
 
-ToolbarDropdownMenu can be used to add actions to a toolbar, usually 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).
+ToolbarDropdownMenu can be used to add actions to a toolbar, usually 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).
 
 It has similar features to the [DropdownMenu](/packages/components/src/dropdown-menu/README.md) component. Using `ToolbarDropdownMenu` will ensure that keyboard interactions in a toolbar are consistent with the [WAI-ARIA toolbar pattern](https://www.w3.org/TR/wai-aria-practices/#toolbar).
 
@@ -54,7 +54,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.
+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.
 
 ```jsx
 import { BlockControls } from '@wordpress/block-editor';

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

package/src/tree-select/index.tsx

@@ -81,11 +81,7 @@ export function TreeSelect( props: TreeSelectProps ) {
 		selectedId,
 		tree = [],
 		...restProps
-	} = useDeprecated36pxDefaultSizeProp(
-		props,
-		'wp.components.TreeSelect',
-		'6.4'
-	);
+	} = useDeprecated36pxDefaultSizeProp( props );
 
 	const options = useMemo( () => {
 		return [

package/src/unit-control/index.tsx

@@ -56,11 +56,7 @@ function UnforwardedUnitControl(
 		value: valueProp,
 		onFocus: onFocusProp,
 		...props
-	} = useDeprecated36pxDefaultSizeProp(
-		unitControlProps,
-		'wp.components.UnitControl',
-		'6.4'
-	);
+	} = useDeprecated36pxDefaultSizeProp( unitControlProps );
 
 	if ( 'unit' in unitControlProps ) {
 		deprecated( 'UnitControl unit prop', {

package/src/utils/colors-values.js

@@ -1,8 +1,6 @@
 /**
  * Internal dependencies
  */
-import { rgba } from './colors';
-
 const white = '#fff';
 
 // Matches the grays in @wordpress/base-styles
@@ -29,41 +27,65 @@ const ALERT = {
 	green: '#4ab866',
 };
 
-// Matches the Modern admin scheme in @wordpress/base-styles
-const ADMIN = {
-	theme: 'var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))',
-	themeDark10:
-		'var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))',
+// Should match packages/components/src/utils/theme-variables.scss
+const THEME = {
+	accent: `var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))`,
+	accentDarker10: `var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))`,
+	accentDarker20: `var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6))`,
+	/** Used when placing text on the accent color. */
+	accentInverted: `var(--wp-components-color-accent-inverted, ${ white })`,
+
+	background: `var(--wp-components-color-background, ${ white })`,
+
+	foreground: `var(--wp-components-color-foreground, ${ GRAY[ 900 ] })`,
+	/** Used when placing text on the foreground color. */
+	foregroundInverted: `var(--wp-components-color-foreground-inverted, ${ white })`,
+
+	gray: {
+		/** @deprecated Use `COLORS.theme.foreground` instead. */
+		900: `var(--wp-components-color-foreground, ${ GRAY[ 900 ] })`,
+		800: `var(--wp-components-color-gray-800, ${ GRAY[ 800 ] })`,
+		700: `var(--wp-components-color-gray-700, ${ GRAY[ 700 ] })`,
+		600: `var(--wp-components-color-gray-600, ${ GRAY[ 600 ] })`,
+		400: `var(--wp-components-color-gray-400, ${ GRAY[ 400 ] })`,
+		300: `var(--wp-components-color-gray-300, ${ GRAY[ 300 ] })`,
+		200: `var(--wp-components-color-gray-200, ${ GRAY[ 200 ] })`,
+		100: `var(--wp-components-color-gray-100, ${ GRAY[ 100 ] })`,
+	},
 };
 
 const UI = {
-	background: white,
-	backgroundDisabled: GRAY[ 100 ],
-	border: GRAY[ 600 ],
-	borderHover: GRAY[ 700 ],
-	borderFocus: ADMIN.theme,
-	borderDisabled: GRAY[ 400 ],
-	textDisabled: GRAY[ 600 ],
-	textDark: white,
+	background: THEME.background,
+	backgroundDisabled: THEME.gray[ 100 ],
+	border: THEME.gray[ 600 ],
+	borderHover: THEME.gray[ 700 ],
+	borderFocus: THEME.accent,
+	borderDisabled: THEME.gray[ 400 ],
+	textDisabled: THEME.gray[ 600 ],
 
 	// Matches @wordpress/base-styles
-	darkGrayPlaceholder: rgba( GRAY[ 900 ], 0.62 ),
-	lightGrayPlaceholder: rgba( white, 0.65 ),
-};
-
-const THEME = {
-	accent: ADMIN.theme,
-	accentDarker10: ADMIN.themeDark10,
+	darkGrayPlaceholder: `color-mix(in srgb, ${ THEME.foreground }, transparent 38%)`,
+	lightGrayPlaceholder: `color-mix(in srgb, ${ THEME.background }, transparent 35%)`,
 };
 
 export const COLORS = Object.freeze( {
 	/**
 	 * The main gray color object.
+	 *
+	 * @deprecated Use semantic aliases in `COLORS.ui` or theme-ready variables in `COLORS.theme.gray`.
 	 */
-	gray: GRAY,
+	gray: GRAY, // TODO: Stop exporting this when everything is migrated to `theme` or `ui`
 	white,
 	alert: ALERT,
+	/**
+	 * Theme-ready variables with fallbacks.
+	 *
+	 * Prefer semantic aliases in `COLORS.ui` when applicable.
+	 */
 	theme: THEME,
+	/**
+	 * Semantic aliases (prefer these over raw variables when applicable).
+	 */
 	ui: UI,
 } );
 

package/src/utils/hooks/use-update-effect.js

@@ -6,7 +6,7 @@ import { useRef, useEffect } from '@wordpress/element';
 /**
  * A `React.useEffect` that will not run on the first render.
  * Source:
- * https://github.com/reakit/reakit/blob/HEAD/packages/reakit-utils/src/useUpdateEffect.ts
+ * https://github.com/ariakit/ariakit/blob/reakit/packages/reakit-utils/src/useUpdateEffect.ts
  *
  * @param {import('react').EffectCallback} effect
  * @param {import('react').DependencyList} deps

package/src/utils/use-deprecated-props.ts

@@ -1,28 +1,11 @@
-/**
- * WordPress dependencies
- */
-import deprecated from '@wordpress/deprecated';
-
 export function useDeprecated36pxDefaultSizeProp<
 	P extends Record< string, any > & {
 		__next36pxDefaultSize?: boolean;
 		__next40pxDefaultSize?: boolean;
 	},
->(
-	props: P,
-	/** The component identifier in dot notation, e.g. `wp.components.ComponentName`. */
-	componentIdentifier: string,
-	/** Version in which the prop was deprecated. */
-	since: string = '6.3'
-) {
+>( props: P ) {
 	const { __next36pxDefaultSize, __next40pxDefaultSize, ...otherProps } =
 		props;
-	if ( typeof __next36pxDefaultSize !== 'undefined' ) {
-		deprecated( '`__next36pxDefaultSize` prop in ' + componentIdentifier, {
-			alternative: '`__next40pxDefaultSize`',
-			since,
-		} );
-	}
 
 	return {
 		...otherProps,