@wordpress/components 25.9.1 → 25.11.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/font-size-picker/utils.ts

@@ -19,7 +19,8 @@ import { parseQuantityAndUnitFromRawValue } from '../unit-control';
 export function isSimpleCssValue(
 	value: NonNullable< FontSizePickerProps[ 'value' ] >
 ) {
-	const sizeRegex = /^[\d\.]+(px|em|rem|vw|vh|%)?$/i;
+	const sizeRegex =
+		/^[\d\.]+(px|em|rem|vw|vh|%|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)?$/i;
 	return sizeRegex.test( String( value ) );
 }
 

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

@@ -12,7 +12,6 @@ const meta: Meta< typeof Heading > = {
 	component: Heading,
 	title: 'Components (Experimental)/Heading',
 	argTypes: {
-		adjustLineHeightForInnerControls: { control: { type: 'text' } },
 		as: { control: { type: 'text' } },
 		color: { control: { type: 'color' } },
 		display: { control: { type: 'text' } },
@@ -20,9 +19,8 @@ const meta: Meta< typeof Heading > = {
 		lineHeight: { control: { type: 'text' } },
 		optimizeReadabilityFor: { control: { type: 'color' } },
 		variant: {
-			control: { type: 'radio' },
-			options: [ 'undefined', 'muted' ],
-			mapping: { undefined, muted: 'muted' },
+			control: { type: 'select' },
+			options: [ undefined, 'muted' ],
 		},
 		weight: { control: { type: 'text' } },
 	},

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/modal/index.tsx

@@ -2,7 +2,12 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import type { ForwardedRef, KeyboardEvent, UIEvent } from 'react';
+import type {
+	ForwardedRef,
+	KeyboardEvent,
+	MutableRefObject,
+	UIEvent,
+} from 'react';
 
 /**
  * WordPress dependencies
@@ -15,12 +20,13 @@ import {
 	useState,
 	forwardRef,
 	useLayoutEffect,
+	createContext,
+	useContext,
 } from '@wordpress/element';
 import {
 	useInstanceId,
 	useFocusReturn,
 	useFocusOnMount,
-	__experimentalUseFocusOutside as useFocusOutside,
 	useConstrainedTabbing,
 	useMergeRefs,
 } from '@wordpress/compose';
@@ -36,8 +42,13 @@ import Button from '../button';
 import StyleProvider from '../style-provider';
 import type { ModalProps } from './types';
 
-// Used to count the number of open modals.
-let openModalCount = 0;
+// Used to track and dismiss the prior modal when another opens unless nested.
+const level0Dismissers: MutableRefObject<
+	ModalProps[ 'onRequestClose' ] | undefined
+>[] = [];
+const ModalContext = createContext( level0Dismissers );
+
+let isBodyOpenClassActive = false;
 
 function UnforwardedModal(
 	props: ModalProps,
@@ -91,7 +102,6 @@ function UnforwardedModal(
 	);
 	const constrainedTabbingRef = useConstrainedTabbing();
 	const focusReturnRef = useFocusReturn();
-	const focusOutsideProps = useFocusOutside( onRequestClose );
 	const contentRef = useRef< HTMLDivElement >( null );
 	const childrenContainerRef = useRef< HTMLDivElement >( null );
 
@@ -120,26 +130,52 @@ function UnforwardedModal(
 		}
 	}, [ contentRef ] );
 
+	// Accessibly isolates/unisolates the modal.
 	useEffect( () => {
 		ariaHelper.modalize( ref.current );
 		return () => ariaHelper.unmodalize();
 	}, [] );
 
+	// Keeps a fresh ref for the subsequent effect.
+	const refOnRequestClose = useRef< ModalProps[ 'onRequestClose' ] >();
 	useEffect( () => {
-		openModalCount++;
+		refOnRequestClose.current = onRequestClose;
+	}, [ onRequestClose ] );
 
-		if ( openModalCount === 1 ) {
-			document.body.classList.add( bodyOpenClassName );
-		}
+	// The list of `onRequestClose` callbacks of open (non-nested) Modals. Only
+	// one should remain open at a time and the list enables closing prior ones.
+	const dismissers = useContext( ModalContext );
+	// Used for the tracking and dismissing any nested modals.
+	const nestedDismissers = useRef< typeof level0Dismissers >( [] );
 
+	// Updates the stack tracking open modals at this level and calls
+	// onRequestClose for any prior and/or nested modals as applicable.
+	useEffect( () => {
+		dismissers.push( refOnRequestClose );
+		const [ first, second ] = dismissers;
+		if ( second ) first?.current?.();
+
+		const nested = nestedDismissers.current;
 		return () => {
-			openModalCount--;
+			nested[ 0 ]?.current?.();
+			dismissers.shift();
+		};
+	}, [ dismissers ] );
 
-			if ( openModalCount === 0 ) {
+	const isLevel0 = dismissers === level0Dismissers;
+	// Adds/removes the value of bodyOpenClassName to body element.
+	useEffect( () => {
+		if ( ! isBodyOpenClassActive ) {
+			isBodyOpenClassActive = true;
+			document.body.classList.add( bodyOpenClassName );
+		}
+		return () => {
+			if ( isLevel0 && dismissers.length === 0 ) {
 				document.body.classList.remove( bodyOpenClassName );
+				isBodyOpenClassActive = false;
 			}
 		};
-	}, [ bodyOpenClassName ] );
+	}, [ bodyOpenClassName, dismissers, isLevel0 ] );
 
 	// Calls the isContentScrollable callback when the Modal children container resizes.
 	useLayoutEffect( () => {
@@ -200,12 +236,9 @@ function UnforwardedModal(
 		onPointerUp: React.PointerEventHandler< HTMLDivElement >;
 	} = {
 		onPointerDown: ( event ) => {
-			if ( event.isPrimary && event.target === event.currentTarget ) {
+			if ( event.target === event.currentTarget ) {
 				pressTarget = event.target;
-				// Avoids loss of focus yet also leaves `useFocusOutside`
-				// practically useless with its only potential trigger being
-				// programmatic focus movement. TODO opt for either removing
-				// the hook or enhancing it such that this isn't needed.
+				// Avoids focus changing so that focus return works as expected.
 				event.preventDefault();
 			}
 		},
@@ -222,7 +255,7 @@ function UnforwardedModal(
 		},
 	};
 
-	return createPortal(
+	const modal = (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
 			ref={ useMergeRefs( [ ref, forwardedRef ] ) }
@@ -253,9 +286,6 @@ function UnforwardedModal(
 					aria-labelledby={ contentLabel ? undefined : headingId }
 					aria-describedby={ aria.describedby }
 					tabIndex={ -1 }
-					{ ...( shouldCloseOnClickOutside
-						? focusOutsideProps
-						: {} ) }
 					onKeyDown={ onKeyDown }
 				>
 					<div
@@ -320,7 +350,13 @@ function UnforwardedModal(
 					</div>
 				</div>
 			</StyleProvider>
-		</div>,
+		</div>
+	);
+
+	return createPortal(
+		<ModalContext.Provider value={ nestedDismissers.current }>
+			{ modal }
+		</ModalContext.Provider>,
 		document.body
 	);
 }

package/src/modal/test/index.tsx

@@ -167,6 +167,35 @@ describe( 'Modal', () => {
 		expect( onRequestClose ).not.toHaveBeenCalled();
 	} );
 
+	it( 'should request closing of nested modal when outer modal unmounts', async () => {
+		const user = userEvent.setup();
+		const onRequestClose = jest.fn();
+
+		const RequestCloseOfNested = () => {
+			const [ isShown, setIsShown ] = useState( true );
+			return (
+				<>
+					{ isShown && (
+						<Modal
+							onKeyDown={ ( { key } ) => {
+								if ( key === 'o' ) setIsShown( false );
+							} }
+							onRequestClose={ noop }
+						>
+							<Modal onRequestClose={ onRequestClose }>
+								<p>Nested modal content</p>
+							</Modal>
+						</Modal>
+					) }
+				</>
+			);
+		};
+		render( <RequestCloseOfNested /> );
+
+		await user.keyboard( 'o' );
+		expect( onRequestClose ).toHaveBeenCalled();
+	} );
+
 	it( 'should accessibly hide and show siblings including outer modals', async () => {
 		const user = userEvent.setup();
 

package/src/notice/style.scss

@@ -4,7 +4,6 @@
 	font-size: $default-font-size;
 	background-color: $white;
 	border-left: 4px solid $components-color-accent;
-	margin: 5px 15px 2px;
 	padding: 8px 12px;
 	align-items: center;
 

package/src/palette-edit/index.tsx

@@ -121,6 +121,10 @@ function ColorPickerPopover< T extends Color | Gradient >( {
 			() => ( {
 				shift: true,
 				offset: 20,
+				// Disabling resize as it would otherwise cause the popover to show
+				// scrollbars while dragging the color picker's handle close to the
+				// popover edge.
+				resize: false,
 				placement: 'left-start',
 				...receivedPopoverProps,
 				className: classnames(

package/src/popover/index.tsx

@@ -53,6 +53,11 @@ import {
 	placementToMotionAnimationProps,
 	getReferenceElement,
 } from './utils';
+import {
+	contextConnect,
+	useContextSystem,
+	ContextSystemProvider,
+} from '../context';
 import type { WordPressComponentProps } from '../context';
 import type {
 	PopoverProps,
@@ -108,7 +113,7 @@ const getPopoverFallbackContainer = () => {
 	return container;
 };
 
-const UnforwardedPopover = (
+const UnconnectedPopover = (
 	props: Omit<
 		WordPressComponentProps< PopoverProps, 'div', false >,
 		// To avoid overlaps between the standard HTML attributes and the props
@@ -148,7 +153,7 @@ const UnforwardedPopover = (
 
 		// Rest
 		...contentProps
-	} = props;
+	} = useContextSystem( props, 'Popover' );
 
 	let computedFlipProp = flip;
 	let computedResizeProp = resize;
@@ -383,63 +388,100 @@ const UnforwardedPopover = (
 	const isPositioned =
 		( ! shouldAnimate || animationFinished ) && x !== null && y !== null;
 
+	// In case a `ColorPicker` component is rendered as a child of `Popover`,
+	// the `Popover` component can be notified of when the user is dragging
+	// parts of the `ColorPicker` UI (this is possible because the `ColorPicker`
+	// component exposes the `onPickerDragStart` and `onPickerDragEnd` props
+	// via internal context).
+	// While the user is performing a pointer drag, the `Popover` will render
+	// a transparent backdrop element that will serve as a "pointer events trap",
+	// making sure that no pointer events reach any potential `iframe` element
+	// underneath (like, for example, the editor canvas in the WordPress editor).
+	const [ showBackdrop, setShowBackdrop ] = useState( false );
+	const contextValue = useMemo(
+		() => ( {
+			ColorPicker: {
+				onPickerDragStart() {
+					setShowBackdrop( true );
+				},
+				onPickerDragEnd() {
+					setShowBackdrop( false );
+				},
+			},
+		} ),
+		[]
+	);
+
 	let content = (
-		<motion.div
-			className={ classnames( 'components-popover', className, {
-				'is-expanded': isExpanded,
-				'is-positioned': isPositioned,
-				// Use the 'alternate' classname for 'toolbar' variant for back compat.
-				[ `is-${
-					computedVariant === 'toolbar'
-						? 'alternate'
-						: computedVariant
-				}` ]: computedVariant,
-			} ) }
-			{ ...animationProps }
-			{ ...contentProps }
-			ref={ mergedFloatingRef }
-			{ ...dialogProps }
-			tabIndex={ -1 }
-		>
-			{ /* Prevents scroll on the document */ }
-			{ isExpanded && <ScrollLock /> }
-			{ isExpanded && (
-				<div className="components-popover__header">
-					<span className="components-popover__header-title">
-						{ headerTitle }
-					</span>
-					<Button
-						className="components-popover__close"
-						icon={ close }
-						onClick={ onClose }
-					/>
-				</div>
-			) }
-			<div className="components-popover__content">{ children }</div>
-			{ hasArrow && (
+		<>
+			{ showBackdrop && (
 				<div
-					ref={ arrowCallbackRef }
-					className={ [
-						'components-popover__arrow',
-						`is-${ computedPlacement.split( '-' )[ 0 ] }`,
-					].join( ' ' ) }
-					style={ {
-						left:
-							typeof arrowData?.x !== 'undefined' &&
-							Number.isFinite( arrowData.x )
-								? `${ arrowData.x }px`
-								: '',
-						top:
-							typeof arrowData?.y !== 'undefined' &&
-							Number.isFinite( arrowData.y )
-								? `${ arrowData.y }px`
-								: '',
-					} }
-				>
-					<ArrowTriangle />
-				</div>
+					className="components-popover-pointer-events-trap"
+					aria-hidden="true"
+					onClick={ () => setShowBackdrop( false ) }
+				/>
 			) }
-		</motion.div>
+			<motion.div
+				className={ classnames( 'components-popover', className, {
+					'is-expanded': isExpanded,
+					'is-positioned': isPositioned,
+					// Use the 'alternate' classname for 'toolbar' variant for back compat.
+					[ `is-${
+						computedVariant === 'toolbar'
+							? 'alternate'
+							: computedVariant
+					}` ]: computedVariant,
+				} ) }
+				{ ...animationProps }
+				{ ...contentProps }
+				ref={ mergedFloatingRef }
+				{ ...dialogProps }
+				tabIndex={ -1 }
+			>
+				{ /* Prevents scroll on the document */ }
+				{ isExpanded && <ScrollLock /> }
+				{ isExpanded && (
+					<div className="components-popover__header">
+						<span className="components-popover__header-title">
+							{ headerTitle }
+						</span>
+						<Button
+							className="components-popover__close"
+							icon={ close }
+							onClick={ onClose }
+						/>
+					</div>
+				) }
+				<div className="components-popover__content">
+					<ContextSystemProvider value={ contextValue }>
+						{ children }
+					</ContextSystemProvider>
+				</div>
+				{ hasArrow && (
+					<div
+						ref={ arrowCallbackRef }
+						className={ [
+							'components-popover__arrow',
+							`is-${ computedPlacement.split( '-' )[ 0 ] }`,
+						].join( ' ' ) }
+						style={ {
+							left:
+								typeof arrowData?.x !== 'undefined' &&
+								Number.isFinite( arrowData.x )
+									? `${ arrowData.x }px`
+									: '',
+							top:
+								typeof arrowData?.y !== 'undefined' &&
+								Number.isFinite( arrowData.y )
+									? `${ arrowData.y }px`
+									: '',
+						} }
+					>
+						<ArrowTriangle />
+					</div>
+				) }
+			</motion.div>
+		</>
 	);
 
 	const shouldRenderWithinSlot = slot.ref && ! inline;
@@ -489,7 +531,7 @@ const UnforwardedPopover = (
  * ```
  *
  */
-export const Popover = forwardRef( UnforwardedPopover );
+export const Popover = contextConnect( UnconnectedPopover, 'Popover' );
 
 function PopoverSlot(
 	{ name = SLOT_NAME }: { name?: string },

package/src/popover/style.scss

@@ -133,3 +133,12 @@ $shadow-popover-border-top-only-alternate: 0 #{-$border-width} 0 $gray-900;
 		stroke: $gray-900;
 	}
 }
+
+.components-popover-pointer-events-trap {
+	// Same z-index as popover, but rendered before the popover element
+	// in DOM order = it will display just under the popover
+	z-index: z-index(".components-popover");
+	position: fixed;
+	inset: 0;
+	background-color: transparent;
+}