@wordpress/components 25.7.0 → 25.8.0

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

@@ -12,7 +12,7 @@ import type { CSSProperties, ReactNode } from 'react';
 import type { WordPressComponentProps } from '../../ui/context';
 import { Flex, FlexItem } from '../../flex';
 import { Text } from '../../text';
-import { baseLabelTypography, COLORS, rtl } from '../../utils';
+import { baseLabelTypography, COLORS, CONFIG, rtl } from '../../utils';
 import type { LabelPosition, Size } from '../types';
 import { space } from '../../ui/utils/space';
 
@@ -275,7 +275,7 @@ const backdropFocusedStyles = ( {
 	let outlineOffset;
 
 	if ( isFocused ) {
-		boxShadow = `0 0 0 1px ${ COLORS.ui.borderFocus } inset`;
+		boxShadow = CONFIG.controlBoxShadowFocus;
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline = `2px solid transparent`;
 		outlineOffset = `-2px`;

package/src/isolated-event-container/test/{index.js → index.tsx}

@@ -7,7 +7,7 @@ import userEvent from '@testing-library/user-event';
 /**
  * Internal dependencies
  */
-import IsolatedEventContainer from '../';
+import IsolatedEventContainer from '..';
 
 describe( 'IsolatedEventContainer', () => {
 	it( 'should pass props to container', async () => {

package/src/mobile/bottom-sheet/index.native.js

@@ -527,6 +527,7 @@ class BottomSheet extends Component {
 					panResponder.panHandlers.onMoveShouldSetResponderCapture
 				}
 				onAccessibilityEscape={ this.onCloseBottomSheet }
+				testID="bottom-sheet"
 				{ ...rest }
 			>
 				<KeyboardAvoidingView

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

@@ -92,13 +92,12 @@ export const useGlobalStyles = () => {
 	return globalStyles;
 };
 
-export const withGlobalStyles = ( WrappedComponent ) => ( props ) =>
-	(
-		<GlobalStylesContext.Consumer>
-			{ ( globalStyles ) => (
-				<WrappedComponent { ...props } globalStyles={ globalStyles } />
-			) }
-		</GlobalStylesContext.Consumer>
-	);
+export const withGlobalStyles = ( WrappedComponent ) => ( props ) => (
+	<GlobalStylesContext.Consumer>
+		{ ( globalStyles ) => (
+			<WrappedComponent { ...props } globalStyles={ globalStyles } />
+		) }
+	</GlobalStylesContext.Consumer>
+);
 
 export default GlobalStylesContext;

package/src/modal/test/index.tsx

@@ -116,6 +116,113 @@ describe( 'Modal', () => {
 		expect( opener ).toHaveFocus();
 	} );
 
+	it( 'should request closing of any non nested modal when opened', async () => {
+		const user = userEvent.setup();
+		const onRequestClose = jest.fn();
+
+		const DismissAdjacent = () => {
+			const [ isShown, setIsShown ] = useState( false );
+			return (
+				<>
+					<Modal onRequestClose={ onRequestClose }>
+						<button onClick={ () => setIsShown( true ) }>💥</button>
+					</Modal>
+					{ isShown && (
+						<Modal onRequestClose={ () => setIsShown( false ) }>
+							<p>Adjacent modal content</p>
+						</Modal>
+					) }
+				</>
+			);
+		};
+		render( <DismissAdjacent /> );
+
+		await user.click( screen.getByRole( 'button', { name: '💥' } ) );
+		expect( onRequestClose ).toHaveBeenCalled();
+	} );
+
+	it( 'should support nested modals', async () => {
+		const user = userEvent.setup();
+		const onRequestClose = jest.fn();
+
+		const NestSupport = () => {
+			const [ isShown, setIsShown ] = useState( false );
+			return (
+				<>
+					<Modal onRequestClose={ onRequestClose }>
+						<button onClick={ () => setIsShown( true ) }>🪆</button>
+						{ isShown && (
+							<Modal onRequestClose={ () => setIsShown( false ) }>
+								<p>Nested modal content</p>
+							</Modal>
+						) }
+					</Modal>
+				</>
+			);
+		};
+		render( <NestSupport /> );
+
+		await user.click( screen.getByRole( 'button', { name: '🪆' } ) );
+		expect( onRequestClose ).not.toHaveBeenCalled();
+	} );
+
+	// TODO enable once nested modals hide outer modals.
+	it.skip( 'should accessibly hide and show siblings including outer modals', async () => {
+		const user = userEvent.setup();
+
+		const AriaDemo = () => {
+			const [ isOuterShown, setIsOuterShown ] = useState( false );
+			const [ isInnerShown, setIsInnerShown ] = useState( false );
+			return (
+				<>
+					<button onClick={ () => setIsOuterShown( true ) }>
+						Start
+					</button>
+					{ isOuterShown && (
+						<Modal
+							onRequestClose={ () => setIsOuterShown( false ) }
+						>
+							<button onClick={ () => setIsInnerShown( true ) }>
+								Nest
+							</button>
+							{ isInnerShown && (
+								<Modal
+									onRequestClose={ () =>
+										setIsInnerShown( false )
+									}
+								>
+									<p>Nested modal content</p>
+								</Modal>
+							) }
+						</Modal>
+					) }
+				</>
+			);
+		};
+		const { container } = render( <AriaDemo /> );
+
+		// Opens outer modal > hides container.
+		await user.click( screen.getByRole( 'button', { name: 'Start' } ) );
+		expect( container ).toHaveAttribute( 'aria-hidden', 'true' );
+
+		// Disable reason: No semantic query can reach the overlay.
+		// eslint-disable-next-line testing-library/no-node-access
+		const outer = screen.getByRole( 'dialog' ).parentElement!;
+
+		// Opens inner modal > hides outer modal.
+		await user.click( screen.getByRole( 'button', { name: 'Nest' } ) );
+		expect( outer ).toHaveAttribute( 'aria-hidden', 'true' );
+
+		// Closes inner modal > Unhides outer modal and container stays hidden.
+		await user.keyboard( '[Escape]' );
+		expect( outer ).not.toHaveAttribute( 'aria-hidden' );
+		expect( container ).toHaveAttribute( 'aria-hidden', 'true' );
+
+		// Closes outer modal > Unhides container.
+		await user.keyboard( '[Escape]' );
+		expect( container ).not.toHaveAttribute( 'aria-hidden' );
+	} );
+
 	it( 'should render `headerActions` React nodes', async () => {
 		render(
 			<Modal

package/src/navigation/use-navigation-tree-nodes.tsx

@@ -4,7 +4,7 @@
 import { useState } from '@wordpress/element';
 
 export function useNavigationTreeNodes<
-	TNode extends { children?: React.ReactNode; [ key: string ]: unknown }
+	TNode extends { children?: React.ReactNode; [ key: string ]: unknown },
 >() {
 	const [ nodes, setNodes ] = useState<
 		Record< string, Omit< TNode, 'children' > >

package/src/notice/index.tsx

@@ -16,8 +16,8 @@ import { close } from '@wordpress/icons';
  */
 import Button from '../button';
 import type { NoticeAction, NoticeProps } from './types';
-import type { SyntheticEvent } from 'react';
 import type { DeprecatedButtonProps } from '../button/types';
+import { VisuallyHidden } from '../visually-hidden';
 
 const noop = () => {};
 
@@ -45,10 +45,23 @@ function getDefaultPoliteness( status: NoticeProps[ 'status' ] ) {
 		case 'warning':
 		case 'info':
 			return 'polite';
+		// The default will also catch the 'error' status.
+		default:
+			return 'assertive';
+	}
+}
 
+function getStatusLabel( status: NoticeProps[ 'status' ] ) {
+	switch ( status ) {
+		case 'warning':
+			return __( 'Warning notice' );
+		case 'info':
+			return __( 'Information notice' );
 		case 'error':
+			return __( 'Error notice' );
+		// The default will also catch the 'success' status.
 		default:
-			return 'assertive';
+			return __( 'Notice' );
 	}
 }
 
@@ -93,14 +106,14 @@ function Notice( {
 		children = <RawHTML>{ children }</RawHTML>;
 	}
 
-	const onDismissNotice = ( event: SyntheticEvent ) => {
-		event?.preventDefault?.();
+	const onDismissNotice = () => {
 		onDismiss();
 		onRemove();
 	};
 
 	return (
 		<div className={ classes }>
+			<VisuallyHidden>{ getStatusLabel( status ) }</VisuallyHidden>
 			<div className="components-notice__content">
 				{ children }
 				<div className="components-notice__actions">
@@ -154,9 +167,8 @@ function Notice( {
 				<Button
 					className="components-notice__dismiss"
 					icon={ close }
-					label={ __( 'Dismiss this notice' ) }
+					label={ __( 'Close' ) }
 					onClick={ onDismissNotice }
-					showTooltip={ false }
 				/>
 			) }
 		</div>

package/src/notice/style.scss

@@ -9,7 +9,6 @@
 	align-items: center;
 
 	&.is-dismissible {
-		padding-right: 36px;
 		position: relative;
 	}
 

package/src/notice/test/__snapshots__/index.tsx.snap

@@ -5,6 +5,14 @@ exports[`Notice should match snapshot 1`] = `
   <div
     class="components-notice is-success is-dismissible"
   >
+    <div
+      class="components-visually-hidden emotion-0 emotion-1"
+      data-wp-c16t="true"
+      data-wp-component="VisuallyHidden"
+      style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"
+    >
+      Notice
+    </div>
     <div
       class="components-notice__content"
     >
@@ -33,7 +41,7 @@ exports[`Notice should match snapshot 1`] = `
       </div>
     </div>
     <button
-      aria-label="Dismiss this notice"
+      aria-label="Close"
       class="components-button components-notice__dismiss has-icon"
       type="button"
     >

package/src/palette-edit/styles.js

@@ -41,7 +41,8 @@ export const NameInputControl = styled( InputControl )`
 `;
 
 export const PaletteItem = styled( View )`
-	padding: 3px 0 3px ${ space( 3 ) };
+	padding-block: 3px;
+	padding-inline-start: ${ space( 3 ) };
 	border: 1px solid ${ CONFIG.surfaceBorderColor };
 	border-bottom-color: transparent;
 	&:first-of-type {

package/src/placeholder/index.tsx

@@ -75,6 +75,7 @@ export function Placeholder(
 	const fieldsetClasses = classnames( 'components-placeholder__fieldset', {
 		'is-column-layout': isColumnLayout,
 	} );
+
 	return (
 		<div { ...additionalProps } className={ classes }>
 			{ withIllustration ? PlaceholderIllustration : null }

package/src/placeholder/style.scss

@@ -3,7 +3,6 @@
 	box-sizing: border-box;
 	position: relative;
 	padding: 1em;
-	min-height: 200px;
 	width: 100%;
 	text-align: left;
 	margin: 0;
@@ -17,7 +16,7 @@
 	@supports (position: sticky) {
 		display: flex;
 		flex-direction: column;
-		justify-content: center;
+		justify-content: top;
 		align-items: flex-start;
 	}
 
@@ -180,7 +179,6 @@
 	color: inherit;
 	display: flex;
 	box-shadow: none;
-	min-width: 100px;
 
 	// Blur the background so layered dashed placeholders are still visually separate.
 	// Make the background transparent to not interfere with the background overlay in placeholder-style() pseudo element
@@ -225,7 +223,7 @@
 
 	// By painting the borders here, we enable them to be replaced by the Border control.
 	@include placeholder-style();
-	overflow: hidden;
+	overflow: auto;
 }
 
 // Position the spinner.

package/src/popover/index.tsx

@@ -40,7 +40,6 @@ import {
 import { close } from '@wordpress/icons';
 import deprecated from '@wordpress/deprecated';
 import { Path, SVG } from '@wordpress/primitives';
-import { getScrollContainer } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -52,13 +51,11 @@ import {
 	computePopoverPosition,
 	positionToPlacement,
 	placementToMotionAnimationProps,
-	getReferenceOwnerDocument,
 	getReferenceElement,
 } from './utils';
 import type { WordPressComponentProps } from '../ui/context';
 import type {
 	PopoverProps,
-	AnimatedWrapperProps,
 	PopoverAnchorRefReference,
 	PopoverAnchorRefTopBottom,
 } from './types';
@@ -94,47 +91,6 @@ const ArrowTriangle = () => (
 	</SVG>
 );
 
-const AnimatedWrapper = forwardRef(
-	(
-		{
-			style: receivedInlineStyles,
-			placement,
-			shouldAnimate = false,
-			...props
-		}: HTMLMotionProps< 'div' > & AnimatedWrapperProps,
-		forwardedRef: ForwardedRef< any >
-	) => {
-		const shouldReduceMotion = useReducedMotion();
-
-		const { style: motionInlineStyles, ...otherMotionProps } = useMemo(
-			() => placementToMotionAnimationProps( placement ),
-			[ placement ]
-		);
-
-		const computedAnimationProps: HTMLMotionProps< 'div' > =
-			shouldAnimate && ! shouldReduceMotion
-				? {
-						style: {
-							...motionInlineStyles,
-							...receivedInlineStyles,
-						},
-						...otherMotionProps,
-				  }
-				: {
-						animate: false,
-						style: receivedInlineStyles,
-				  };
-
-		return (
-			<motion.div
-				{ ...computedAnimationProps }
-				{ ...props }
-				ref={ forwardedRef }
-			/>
-		);
-	}
-);
-
 const slotNameContext = createContext< string | undefined >( undefined );
 
 const fallbackContainerClassname = 'components-popover__fallback-container';
@@ -241,9 +197,6 @@ const UnforwardedPopover = (
 
 	const [ fallbackReferenceElement, setFallbackReferenceElement ] =
 		useState< HTMLSpanElement | null >( null );
-	const [ referenceOwnerDocument, setReferenceOwnerDocument ] = useState<
-		Document | undefined
-	>();
 
 	const anchorRefFallback: RefCallback< HTMLSpanElement > = useCallback(
 		( node ) => {
@@ -357,15 +310,6 @@ const UnforwardedPopover = (
 		?.current;
 
 	useLayoutEffect( () => {
-		const resultingReferenceOwnerDoc = getReferenceOwnerDocument( {
-			anchor,
-			anchorRef,
-			anchorRect,
-			getAnchorRect,
-			fallbackReferenceElement,
-			fallbackDocument: document,
-		} );
-
 		const resultingReferenceElement = getReferenceElement( {
 			anchor,
 			anchorRef,
@@ -375,8 +319,6 @@ const UnforwardedPopover = (
 		} );
 
 		refs.setReference( resultingReferenceElement );
-
-		setReferenceOwnerDocument( resultingReferenceOwnerDoc );
 	}, [
 		anchor,
 		anchorRef,
@@ -390,51 +332,61 @@ const UnforwardedPopover = (
 		refs,
 	] );
 
-	// If the reference element is in a different ownerDocument (e.g. iFrame),
-	// we need to manually update the floating's position as the reference's owner
-	// document scrolls.
-	useLayoutEffect( () => {
-		if (
-			! referenceOwnerDocument ||
-			! referenceOwnerDocument.defaultView
-		) {
-			return;
-		}
-
-		const { defaultView } = referenceOwnerDocument;
-		const { frameElement } = defaultView;
-
-		const scrollContainer = frameElement
-			? getScrollContainer( frameElement )
-			: null;
-
-		defaultView.addEventListener( 'resize', update );
-		scrollContainer?.addEventListener( 'scroll', update );
-
-		return () => {
-			defaultView.removeEventListener( 'resize', update );
-			scrollContainer?.removeEventListener( 'scroll', update );
-		};
-	}, [ referenceOwnerDocument, update ] );
-
 	const mergedFloatingRef = useMergeRefs( [
 		refs.setFloating,
 		dialogRef,
 		forwardedRef,
 	] );
 
-	// Disable reason: We care to capture the _bubbled_ events from inputs
-	// within popover as inferring close intent.
+	const style = isExpanded
+		? undefined
+		: {
+				position: strategy,
+				top: 0,
+				left: 0,
+				// `x` and `y` are framer-motion specific props and are shorthands
+				// for `translateX` and `translateY`. Currently it is not possible
+				// to use `translateX` and `translateY` because those values would
+				// be overridden by the return value of the
+				// `placementToMotionAnimationProps` function.
+				x: computePopoverPosition( x ),
+				y: computePopoverPosition( y ),
+		  };
+
+	const shouldReduceMotion = useReducedMotion();
+	const shouldAnimate = animate && ! isExpanded && ! shouldReduceMotion;
+
+	const [ animationFinished, setAnimationFinished ] = useState( false );
+
+	const { style: motionInlineStyles, ...otherMotionProps } = useMemo(
+		() => placementToMotionAnimationProps( computedPlacement ),
+		[ computedPlacement ]
+	);
+
+	const animationProps: HTMLMotionProps< 'div' > = shouldAnimate
+		? {
+				style: {
+					...motionInlineStyles,
+					...style,
+				},
+				onAnimationComplete: () => setAnimationFinished( true ),
+				...otherMotionProps,
+		  }
+		: {
+				animate: false,
+				style,
+		  };
+
+	// When Floating UI has finished positioning and Framer Motion has finished animating
+	// the popover, add the `is-positioned` class to signal that all transitions have finished.
+	const isPositioned =
+		( ! shouldAnimate || animationFinished ) && x !== null && y !== null;
 
 	let content = (
-		// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
-		<AnimatedWrapper
-			shouldAnimate={ animate && ! isExpanded }
-			placement={ computedPlacement }
+		<motion.div
 			className={ classnames( 'components-popover', className, {
 				'is-expanded': isExpanded,
-				'is-positioned': x !== null && y !== null,
+				'is-positioned': isPositioned,
 				// Use the 'alternate' classname for 'toolbar' variant for back compat.
 				[ `is-${
 					computedVariant === 'toolbar'
@@ -442,26 +394,11 @@ const UnforwardedPopover = (
 						: computedVariant
 				}` ]: computedVariant,
 			} ) }
+			{ ...animationProps }
 			{ ...contentProps }
 			ref={ mergedFloatingRef }
 			{ ...dialogProps }
 			tabIndex={ -1 }
-			style={
-				isExpanded
-					? undefined
-					: {
-							position: strategy,
-							top: 0,
-							left: 0,
-							// `x` and `y` are framer-motion specific props and are shorthands
-							// for `translateX` and `translateY`. Currently it is not possible
-							// to use `translateX` and `translateY` because those values would
-							// be overridden by the return value of the
-							// `placementToMotionAnimationProps` function in `AnimatedWrapper`
-							x: computePopoverPosition( x ),
-							y: computePopoverPosition( y ),
-					  }
-			}
 		>
 			{ /* Prevents scroll on the document */ }
 			{ isExpanded && <ScrollLock /> }
@@ -501,7 +438,7 @@ const UnforwardedPopover = (
 					<ArrowTriangle />
 				</div>
 			) }
-		</AnimatedWrapper>
+		</motion.div>
 	);
 
 	const shouldRenderWithinSlot = slot.ref && ! inline;

package/src/popover/test/index.tsx

@@ -23,17 +23,17 @@ import { PopoverInsideIframeRenderedInExternalSlot } from './utils';
 
 type PositionToPlacementTuple = [
 	NonNullable< PopoverProps[ 'position' ] >,
-	NonNullable< PopoverProps[ 'placement' ] >
+	NonNullable< PopoverProps[ 'placement' ] >,
 ];
 type PlacementToAnimationOriginTuple = [
 	NonNullable< PopoverProps[ 'placement' ] >,
 	number,
-	number
+	number,
 ];
 type PlacementToInitialTranslationTuple = [
 	NonNullable< PopoverProps[ 'placement' ] >,
 	'translateY' | 'translateX',
-	CSSProperties[ 'translate' ]
+	CSSProperties[ 'translate' ],
 ];
 
 // There's no matching `placement` for 'middle center' positions,

package/src/popover/types.ts

@@ -14,11 +14,6 @@ type DomRectWithOwnerDocument = DOMRect & {
 
 type PopoverPlacement = Placement | 'overlay';
 
-export type AnimatedWrapperProps = {
-	placement: PopoverPlacement;
-	shouldAnimate?: boolean;
-};
-
 export type PopoverAnchorRefReference = MutableRefObject<
 	Element | null | undefined
 >;