@wordpress/components 25.10.0 → 25.11.1-next.f8d8eceb.0

package/src/dropdown-menu-v2-ariakit/types.ts

@@ -0,0 +1,186 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type * as Ariakit from '@ariakit/react';
+import type { Placement } from '@floating-ui/react-dom';
+
+export interface DropdownMenuContext {
+	/**
+	 * The ariakit store shared across all DropdownMenu subcomponents.
+	 */
+	store: Ariakit.MenuStore;
+	/**
+	 * The variant used by the underlying menu popover.
+	 */
+	variant?: 'toolbar';
+}
+
+export interface DropdownMenuProps {
+	/**
+	 * The trigger button.
+	 */
+	trigger: React.ReactElement;
+	/**
+	 * The contents of the dropdown.
+	 */
+	children?: React.ReactNode;
+	/**
+	 * The open state of the dropdown menu when it is initially rendered. Use when
+	 * not wanting to control its open state.
+	 *
+	 * @default false
+	 */
+	defaultOpen?: boolean;
+	/**
+	 * The controlled open state of the dropdown menu. Must be used in conjunction
+	 * with `onOpenChange`.
+	 */
+	open?: boolean;
+	/**
+	 * Event handler called when the open state of the dropdown menu changes.
+	 */
+	onOpenChange?: ( open: boolean ) => void;
+	/**
+	 * The modality of the dropdown menu. When set to true, interaction with
+	 * outside elements will be disabled and only menu content will be visible to
+	 * screen readers.
+	 *
+	 * @default true
+	 */
+	modal?: boolean;
+	/**
+	 * The placement of the dropdown menu popover.
+	 *
+	 * @default 'bottom-start' for root-level menus, 'right-start' for nested menus
+	 */
+	placement?: Placement;
+	/**
+	 * The distance between the popover and the anchor element.
+	 *
+	 * @default 8 for root-level menus, 16 for nested menus
+	 */
+	gutter?: number;
+	/**
+	 * The skidding of the popover along the anchor element. Can be set to
+	 * negative values to make the popover shift to the opposite side.
+	 *
+	 * @default 0 for root-level menus, -8 for nested menus
+	 */
+	shift?: number;
+	/**
+	 * Determines whether the menu popover will be hidden when the user presses
+	 * the Escape key.
+	 *
+	 * @default true
+	 */
+	hideOnEscape?:
+		| boolean
+		| ( (
+				event: KeyboardEvent | React.KeyboardEvent< Element >
+		  ) => boolean );
+}
+
+export interface DropdownMenuGroupProps {
+	/**
+	 * The contents of the dropdown menu group.
+	 */
+	children: React.ReactNode;
+}
+
+export interface DropdownMenuGroupLabelProps {
+	/**
+	 * The contents of the dropdown menu group label.
+	 */
+	children: React.ReactNode;
+}
+
+export interface DropdownMenuItemProps {
+	/**
+	 * The contents of the menu item.
+	 */
+	children: React.ReactNode;
+	/**
+	 * The contents of the menu item's prefix.
+	 */
+	prefix?: React.ReactNode;
+	/**
+	 * The contents of the menu item's suffix.
+	 */
+	suffix?: React.ReactNode;
+	/**
+	 * Whether to hide the parent menu when the item is clicked.
+	 *
+	 * @default true
+	 */
+	hideOnClick?: boolean;
+	/**
+	 * Determines if the element is disabled.
+	 */
+	disabled?: boolean;
+}
+
+export interface DropdownMenuCheckboxItemProps
+	extends Omit< DropdownMenuItemProps, 'prefix' | 'hideOnClick' > {
+	/**
+	 * Whether to hide the dropdown menu when the item is clicked.
+	 *
+	 * @default false
+	 */
+	hideOnClick?: boolean;
+	/**
+	 * The checkbox menu item's name.
+	 */
+	name: string;
+	/**
+	 * The checkbox item's value, useful when using multiple checkbox menu items
+	 * associated to the same `name`.
+	 */
+	value?: string;
+	/**
+	 * The controlled checked state of the checkbox menu item.
+	 */
+	checked?: boolean;
+	/**
+	 * The checked state of the checkbox menu item when it is initially rendered.
+	 * Use when not wanting to control its checked state.
+	 */
+	defaultChecked?: boolean;
+	/**
+	 * Event handler called when the checked state of the checkbox menu item changes.
+	 */
+	onChange?: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+}
+
+export interface DropdownMenuRadioItemProps
+	extends Omit< DropdownMenuItemProps, 'prefix' | 'hideOnClick' > {
+	/**
+	 * Whether to hide the dropdown menu when the item is clicked.
+	 *
+	 * @default false
+	 */
+	hideOnClick?: boolean;
+	/**
+	 * The radio item's name.
+	 */
+	name: string;
+	/**
+	 * The radio item's value.
+	 */
+	value: string | number;
+	/**
+	 * The controlled checked state of the radio menu item.
+	 */
+	checked?: boolean;
+	/**
+	 * The checked state of the radio menu item when it is initially rendered.
+	 * Use when not wanting to control its checked state.
+	 */
+	defaultChecked?: boolean;
+	/**
+	 * Event handler called when the checked radio menu item changes.
+	 */
+	onChange?: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+}
+
+export interface DropdownMenuSeparatorProps {}

package/src/input-control/styles/input-control-styles.tsx

@@ -149,9 +149,9 @@ export const getSizeConfig = ( {
 
 	if ( ! __next40pxDefaultSize ) {
 		sizes.default = {
-			height: 30,
+			height: 32,
 			lineHeight: 1,
-			minHeight: 30,
+			minHeight: 32,
 			paddingLeft: space( 2 ),
 			paddingRight: space( 2 ),
 		};

package/src/mobile/global-styles-context/utils.native.js

@@ -9,7 +9,7 @@ import { Dimensions } from 'react-native';
  */
 import {
 	getPxFromCssUnit,
-	useSetting,
+	useSettings,
 	useMultipleOriginColorsAndGradients,
 } from '@wordpress/block-editor';
 
@@ -357,7 +357,7 @@ export function useMobileGlobalStylesColors( type = 'colors' ) {
 	// Default editor colors/gradients if it's not a block-based theme.
 	const colorPalette =
 		type === 'colors' ? 'color.palette' : 'color.gradients';
-	const editorDefaultPalette = useSetting( colorPalette );
+	const [ editorDefaultPalette ] = useSettings( colorPalette );
 
 	return availableThemeColors.length >= 1
 		? availableThemeColors

package/src/private-apis.ts

@@ -29,6 +29,15 @@ import {
 	DropdownSubMenu as DropdownSubMenuV2,
 	DropdownSubMenuTrigger as DropdownSubMenuTriggerV2,
 } from './dropdown-menu-v2';
+import {
+	DropdownMenu as DropdownMenuV2Ariakit,
+	DropdownMenuGroup as DropdownMenuGroupV2Ariakit,
+	DropdownMenuGroupLabel as DropdownMenuGroupLabelV2Ariakit,
+	DropdownMenuItem as DropdownMenuItemV2Ariakit,
+	DropdownMenuCheckboxItem as DropdownMenuCheckboxItemV2Ariakit,
+	DropdownMenuRadioItem as DropdownMenuRadioItemV2Ariakit,
+	DropdownMenuSeparator as DropdownMenuSeparatorV2Ariakit,
+} from './dropdown-menu-v2-ariakit';
 import { ComponentsContext } from './context/context-system-provider';
 import Theme from './theme';
 import Tabs from './tabs';
@@ -63,4 +72,11 @@ lock( privateApis, {
 	ProgressBar,
 	Tabs,
 	Theme,
+	DropdownMenuV2Ariakit,
+	DropdownMenuGroupV2Ariakit,
+	DropdownMenuGroupLabelV2Ariakit,
+	DropdownMenuItemV2Ariakit,
+	DropdownMenuCheckboxItemV2Ariakit,
+	DropdownMenuRadioItemV2Ariakit,
+	DropdownMenuSeparatorV2Ariakit,
 } );

package/src/select-control/styles/select-control-styles.ts

@@ -85,8 +85,8 @@ const sizeStyles = ( {
 
 	if ( ! __next40pxDefaultSize ) {
 		sizes.default = {
-			height: 30,
-			minHeight: 30,
+			height: 32,
+			minHeight: 32,
 			paddingTop: 0,
 			paddingBottom: 0,
 		};

package/src/tabs/index.tsx

@@ -8,7 +8,7 @@ import * as Ariakit from '@ariakit/react';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { useEffect, useLayoutEffect, useRef } from '@wordpress/element';
+import { useLayoutEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -104,7 +104,7 @@ function Tabs( {
 	] );
 
 	// Handle the currently selected tab becoming disabled.
-	useEffect( () => {
+	useLayoutEffect( () => {
 		if ( ! selectedTab?.dimmed ) {
 			return;
 		}
@@ -136,7 +136,7 @@ function Tabs( {
 	] );
 
 	// Clear `selectedId` if the active tab is removed from the DOM in controlled mode.
-	useEffect( () => {
+	useLayoutEffect( () => {
 		if ( ! isControlled ) {
 			return;
 		}

package/src/tabs/test/index.tsx

@@ -471,10 +471,13 @@ describe( 'Tabs', () => {
 
 			// Because all other tabs should have `tabindex=-1`, pressing Tab
 			// should NOT move the focus to the next tab, which is Beta.
+			// Instead, focus should go to the currently selected tabpanel (alpha).
 			await user.keyboard( '[Tab]' );
 			expect(
-				await screen.findByRole( 'tab', { name: 'Beta' } )
-			).not.toHaveFocus();
+				await screen.findByRole( 'tabpanel', {
+					name: 'Alpha',
+				} )
+			).toHaveFocus();
 		} );
 
 		it( 'switches to manual tab activation when the `selectOnMove` prop is set to `false`', async () => {
@@ -497,6 +500,9 @@ describe( 'Tabs', () => {
 			// Click on Alpha and make sure it is selected.
 			// onSelect shouldn't fire since the selected tab didn't change.
 			await user.click( screen.getByRole( 'tab', { name: 'Alpha' } ) );
+			expect(
+				await screen.findByRole( 'tab', { name: 'Alpha' } )
+			).toHaveFocus();
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
 			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
 
@@ -505,10 +511,10 @@ describe( 'Tabs', () => {
 			// or enter key. onSelect shouldn't fire since the selected tab
 			// didn't change.
 			await user.keyboard( '[ArrowRight]' );
-			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
 			expect(
 				await screen.findByRole( 'tab', { name: 'Beta' } )
 			).toHaveFocus();
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
 
 			await user.keyboard( '[Enter]' );
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
@@ -519,6 +525,9 @@ describe( 'Tabs', () => {
 			// spacebar or enter key. onSelect shouldn't fire since the selected
 			// tab didn't change.
 			await user.keyboard( '[ArrowRight]' );
+			expect(
+				await screen.findByRole( 'tab', { name: 'Gamma' } )
+			).toHaveFocus();
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
 			expect(
 				screen.getByRole( 'tab', { name: 'Gamma' } )

package/src/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -256,6 +256,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             id="toggle-group-control-as-radio-group-8-20"
             role="radio"
             type="button"
+            value="uppercase"
           >
             <div
               class="emotion-13 emotion-14"
@@ -294,6 +295,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             id="toggle-group-control-as-radio-group-8-21"
             role="radio"
             type="button"
+            value="lowercase"
           >
             <div
               class="emotion-13 emotion-14"
@@ -503,6 +505,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
             id="toggle-group-control-as-radio-group-7-18"
             role="radio"
             type="button"
+            value="rigas"
           >
             <div
               class="emotion-13 emotion-14"
@@ -525,6 +528,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
             id="toggle-group-control-as-radio-group-7-19"
             role="radio"
             type="button"
+            value="jack"
           >
             <div
               class="emotion-13 emotion-14"
@@ -801,6 +805,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
             id="toggle-group-control-as-radio-group-1-2"
             role="radio"
             type="button"
+            value="uppercase"
           >
             <div
               class="emotion-13 emotion-14"
@@ -839,6 +844,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
             id="toggle-group-control-as-radio-group-1-3"
             role="radio"
             type="button"
+            value="lowercase"
           >
             <div
               class="emotion-13 emotion-14"
@@ -1042,6 +1048,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
             id="toggle-group-control-as-radio-group-0-0"
             role="radio"
             type="button"
+            value="rigas"
           >
             <div
               class="emotion-13 emotion-14"
@@ -1064,6 +1071,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
             id="toggle-group-control-as-radio-group-0-1"
             role="radio"
             type="button"
+            value="jack"
           >
             <div
               class="emotion-13 emotion-14"

package/src/tooltip/index.tsx

@@ -69,8 +69,6 @@ function Tooltip( props: TooltipProps ) {
 		timeout: delay,
 	} );
 
-	const isTooltipOpen = tooltipStore.useState( 'open' );
-
 	return (
 		<>
 			<Ariakit.TooltipAnchor
@@ -80,8 +78,9 @@ function Tooltip( props: TooltipProps ) {
 			>
 				{ isOnlyChild ? undefined : children }
 			</Ariakit.TooltipAnchor>
-			{ isOnlyChild && ( text || shortcut ) && isTooltipOpen && (
+			{ isOnlyChild && ( text || shortcut ) && (
 				<Ariakit.Tooltip
+					unmountOnHide
 					className="components-tooltip"
 					gutter={ 4 }
 					id={ describedById }