@wordpress/components 25.9.0 → 25.10.0

package/src/confirm-dialog/stories/{index.story.js → index.story.tsx}

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
 /**
  * WordPress dependencies
  */
@@ -7,47 +12,41 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import Button from '../../button';
-import { ConfirmDialog } from '..';
+import { ConfirmDialog } from '../component';
 
-const meta = {
+const meta: Meta< typeof ConfirmDialog > = {
 	component: ConfirmDialog,
 	title: 'Components (Experimental)/ConfirmDialog',
 	argTypes: {
-		children: {
-			control: { type: 'text' },
-		},
-		confirmButtonText: {
-			control: { type: 'text' },
-		},
-		cancelButtonText: {
-			control: { type: 'text' },
-		},
 		isOpen: {
 			control: { type: null },
 		},
-		onConfirm: { action: 'onConfirm' },
-		onCancel: { action: 'onCancel' },
-	},
-	args: {
-		children: 'Would you like to privately publish the post now?',
 	},
 	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: {
+			expanded: true,
+		},
 		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 
 export default meta;
 
-const Template = ( { onConfirm, onCancel, ...args } ) => {
+const Template: StoryFn< typeof ConfirmDialog > = ( {
+	onConfirm,
+	onCancel,
+	...args
+} ) => {
 	const [ isOpen, setIsOpen ] = useState( false );
 
-	const handleConfirm = ( ...confirmArgs ) => {
-		onConfirm( ...confirmArgs );
+	const handleConfirm: typeof onConfirm = ( confirmArgs ) => {
+		onConfirm( confirmArgs );
 		setIsOpen( false );
 	};
 
-	const handleCancel = ( ...cancelArgs ) => {
-		onCancel( ...cancelArgs );
+	const handleCancel: typeof onCancel = ( cancelArgs ) => {
+		onCancel?.( cancelArgs );
 		setIsOpen( false );
 	};
 
@@ -70,7 +69,7 @@ const Template = ( { onConfirm, onCancel, ...args } ) => {
 };
 
 // Simplest usage: just declare the component with the required `onConfirm` prop. Note: the `onCancel` prop is optional here, unless you'd like to render the component in Controlled mode (see below)
-export const _default = Template.bind( {} );
+export const Default = Template.bind( {} );
 const _defaultSnippet = `() => {
   const [ isOpen, setIsOpen ] = useState( false );
   const [ confirmVal, setConfirmVal ] = useState('');
@@ -103,8 +102,10 @@ const _defaultSnippet = `() => {
     </>
   );
 };`;
-_default.args = {};
-_default.parameters = {
+Default.args = {
+	children: 'Would you like to privately publish the post now?',
+};
+Default.parameters = {
 	docs: {
 		source: {
 			code: _defaultSnippet,
@@ -117,6 +118,7 @@ _default.parameters = {
 // To customize button text, pass the `cancelButtonText` and/or `confirmButtonText` props.
 export const WithCustomButtonLabels = Template.bind( {} );
 WithCustomButtonLabels.args = {
+	...Default.args,
 	cancelButtonText: 'No thanks',
 	confirmButtonText: 'Yes please!',
 };

package/src/confirm-dialog/test/{index.js → index.tsx}

@@ -113,7 +113,7 @@ describe( 'Confirm', () => {
 				expect( onCancel ).toHaveBeenCalled();
 			} );
 
-			it( 'should be dismissable even if an `onCancel` callback is not provided', async () => {
+			it( 'should be dismissible even if an `onCancel` callback is not provided', async () => {
 				const user = userEvent.setup();
 
 				render(
@@ -144,7 +144,7 @@ describe( 'Confirm', () => {
 
 				// Disable reason: Semantic queries can’t reach the overlay.
 				// eslint-disable-next-line testing-library/no-node-access
-				await user.click( confirmDialog.parentElement );
+				await user.click( confirmDialog.parentElement! );
 
 				expect( confirmDialog ).not.toBeInTheDocument();
 				expect( onCancel ).toHaveBeenCalled();
@@ -325,7 +325,7 @@ describe( 'Confirm', () => {
 
 			// Disable reason: Semantic queries can’t reach the overlay.
 			// eslint-disable-next-line testing-library/no-node-access
-			await user.click( confirmDialog.parentElement );
+			await user.click( confirmDialog.parentElement! );
 
 			expect( onCancel ).toHaveBeenCalled();
 		} );

package/src/confirm-dialog/types.ts

@@ -13,21 +13,41 @@ export type DialogInputEvent =
 	| KeyboardEvent< HTMLDivElement >
 	| MouseEvent< HTMLButtonElement >;
 
-type BaseProps = {
+export type ConfirmDialogProps = {
+	/**
+	 * The actual message for the dialog. It's passed as children and any valid `ReactNode` is accepted.
+	 */
 	children: ReactNode;
+	/**
+	 * The callback that's called when the user confirms.
+	 * A confirmation can happen when the `OK` button is clicked or when `Enter` is pressed.
+	 */
 	onConfirm: ( event: DialogInputEvent ) => void;
+	/**
+	 * The optional custom text to display as the confirmation button's label.
+	 */
 	confirmButtonText?: string;
+	/**
+	 * The optional custom text to display as the cancellation button's label.
+	 */
 	cancelButtonText?: string;
-};
-
-type ControlledProps = BaseProps & {
-	onCancel: ( event: DialogInputEvent ) => void;
-	isOpen: boolean;
-};
-
-type UncontrolledProps = BaseProps & {
+	/**
+	 * The callback that's called when the user cancels. A cancellation can happen
+	 * when the `Cancel` button is clicked, when the `ESC` key is pressed, or when
+	 * a click outside of the dialog focus is detected (i.e. in the overlay).
+	 *
+	 * It's not required if `isOpen` is not set (uncontrolled mode), as the component
+	 * will take care of closing itself, but you can still pass a callback if something
+	 * must be done upon cancelling (the component will still close itself in this case).
+	 *
+	 * If `isOpen` is set (controlled mode), then it's required, and you need to set
+	 * the state that defines `isOpen` to `false` as part of this callback if you want the
+	 * dialog to close when the user cancels.
+	 */
 	onCancel?: ( event: DialogInputEvent ) => void;
-	isOpen?: never;
+	/**
+	 * Defines if the dialog is open (displayed) or closed (not rendered/displayed).
+	 * It also implicitly toggles the controlled mode if set or the uncontrolled mode if it's not set.
+	 */
+	isOpen?: boolean;
 };
-
-export type OwnProps = ControlledProps | UncontrolledProps;

package/src/custom-gradient-picker/gradient-bar/control-points.tsx

@@ -42,6 +42,7 @@ import type {
 	InsertPointProps,
 } from '../types';
 import type { CustomColorPickerDropdownProps } from '../../color-palette/types';
+import DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';
 
 function ControlPointButton( {
 	isOpen,
@@ -93,6 +94,10 @@ function GradientColorPickerDropdown( {
 			( {
 				placement: 'bottom',
 				offset: 8,
+				// 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,
 			} ) as const,
 		[]
 	);
@@ -271,7 +276,7 @@ function ControlPoints( {
 								/>
 							) }
 							renderContent={ ( { onClose } ) => (
-								<>
+								<DropdownContentWrapper paddingSize="none">
 									<ColorPicker
 										enableAlpha={ ! disableAlpha }
 										color={ point.color }
@@ -311,7 +316,7 @@ function ControlPoints( {
 												</Button>
 											</HStack>
 										) }
-								</>
+								</DropdownContentWrapper>
 							) }
 							style={ {
 								left: `${ point.position }%`,
@@ -360,29 +365,31 @@ function InsertPoint( {
 				/>
 			) }
 			renderContent={ () => (
-				<ColorPicker
-					enableAlpha={ ! disableAlpha }
-					onChange={ ( color ) => {
-						if ( ! alreadyInsertedPoint ) {
-							onChange(
-								addControlPoint(
-									controlPoints,
-									insertPosition,
-									colord( color ).toRgbString()
-								)
-							);
-							setAlreadyInsertedPoint( true );
-						} else {
-							onChange(
-								updateControlPointColorByPosition(
-									controlPoints,
-									insertPosition,
-									colord( color ).toRgbString()
-								)
-							);
-						}
-					} }
-				/>
+				<DropdownContentWrapper paddingSize="none">
+					<ColorPicker
+						enableAlpha={ ! disableAlpha }
+						onChange={ ( color ) => {
+							if ( ! alreadyInsertedPoint ) {
+								onChange(
+									addControlPoint(
+										controlPoints,
+										insertPosition,
+										colord( color ).toRgbString()
+									)
+								);
+								setAlreadyInsertedPoint( true );
+							} else {
+								onChange(
+									updateControlPointColorByPosition(
+										controlPoints,
+										insertPosition,
+										colord( color ).toRgbString()
+									)
+								);
+							}
+						} }
+					/>
+				</DropdownContentWrapper>
 			) }
 			style={
 				insertPosition !== null

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/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(