@wordpress/interface 9.37.0 → 10.0.0

package/src/components/action-item/index.js

@@ -1,75 +1,54 @@
-/**
- * WordPress dependencies
- */
-import { MenuGroup, Button, Slot, Fill } from '@wordpress/components';
+import { MenuGroup, MenuItem, Slot, Fill } from '@wordpress/components';
 import { Children } from '@wordpress/element';
 
-const noop = () => {};
-
 function ActionItemSlot( {
 	name,
 	as: Component = MenuGroup,
 	fillProps = {},
-	bubblesVirtually,
+	children,
 	...props
 } ) {
 	return (
-		<Slot
-			name={ name }
-			bubblesVirtually={ bubblesVirtually }
-			fillProps={ fillProps }
-		>
+		<Slot name={ name } fillProps={ fillProps }>
 			{ ( fills ) => {
-				if ( ! Children.toArray( fills ).length ) {
+				// Each fill renders an array of its own, so flatten them into a
+				// single list before handing them over.
+				const items = Children.toArray( fills );
+
+				if ( ! items.length ) {
 					return null;
 				}
 
-				// Special handling exists for backward compatibility.
-				// It ensures that menu items created by plugin authors aren't
-				// duplicated with automatically injected menu items coming
-				// from pinnable plugin sidebars.
-				// @see https://github.com/WordPress/gutenberg/issues/14457
-				const initializedByPlugins = [];
-				Children.forEach(
-					fills,
-					( {
-						props: { __unstableExplicitMenuItem, __unstableTarget },
-					} ) => {
-						if ( __unstableTarget && __unstableExplicitMenuItem ) {
-							initializedByPlugins.push( __unstableTarget );
-						}
-					}
-				);
-				const children = Children.map( fills, ( child ) => {
-					if (
-						! child.props.__unstableExplicitMenuItem &&
-						initializedByPlugins.includes(
-							child.props.__unstableTarget
-						)
-					) {
-						return null;
-					}
-					return child;
-				} );
+				if ( typeof children === 'function' ) {
+					return children( items );
+				}
 
-				return <Component { ...props }>{ children }</Component>;
+				return <Component { ...props }>{ items }</Component>;
 			} }
 		</Slot>
 	);
 }
 
-function ActionItem( { name, as: Component = Button, onClick, ...props } ) {
+function ActionItem( { name, as, onClick, ...props } ) {
 	return (
 		<Fill name={ name }>
-			{ ( { onClick: fpOnClick } ) => {
+			{ ( { as: slotAs = MenuItem, onClick: slotOnClick } ) => {
+				// The slot provides the component to render the item with, so
+				// that it fits the menu it ends up in, and an onClick handler,
+				// for example one that closes that menu. The `as` prop
+				// replaces the component. The `onClick` prop does not replace
+				// the handler: both run.
+				const Component = as ?? slotAs;
+				const handlers = [ onClick, slotOnClick ].filter( Boolean );
+
 				return (
 					<Component
 						onClick={
-							onClick || fpOnClick
-								? ( ...args ) => {
-										( onClick || noop )( ...args );
-										( fpOnClick || noop )( ...args );
-								  }
+							handlers.length
+								? ( ...args ) =>
+										handlers.forEach( ( handler ) =>
+											handler( ...args )
+										)
 								: undefined
 						}
 						{ ...props }

package/src/components/complementary-area/index.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import {
 	Button,
 	Panel,
@@ -17,7 +10,13 @@ import {
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { check, starEmpty, starFilled } from '@wordpress/icons';
-import { useEffect, useRef, useState } from '@wordpress/element';
+import {
+	cloneElement,
+	isValidElement,
+	useEffect,
+	useRef,
+	useState,
+} from '@wordpress/element';
 import { store as viewportStore } from '@wordpress/viewport';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
@@ -26,12 +25,11 @@ import {
 	usePrevious,
 } from '@wordpress/compose';
 import { usePluginContext } from '@wordpress/plugins';
-
-/**
- * Internal dependencies
- */
 import ComplementaryAreaHeader from '../complementary-area-header';
-import ComplementaryAreaMoreMenuItem from '../complementary-area-more-menu-item';
+import {
+	DefaultComplementaryAreaMoreMenuItem,
+	useHasComplementaryAreaMenuItem,
+} from '../complementary-area-more-menu-item';
 import ComplementaryAreaToggle from '../complementary-area-toggle';
 import PinnedItems from '../pinned-items';
 import { store as interfaceStore } from '../../store';
@@ -42,13 +40,38 @@ function ComplementaryAreaSlot( { scope, ...props } ) {
 	return <Slot name={ `ComplementaryArea/${ scope }` } { ...props } />;
 }
 
-const SIDEBAR_WIDTH = 280;
 const variants = {
-	open: { width: SIDEBAR_WIDTH },
-	closed: { width: 0 },
-	mobileOpen: { width: '100vw' },
+	// `auto` leaves the width to the area's own stylesheet, so it stays in one
+	// place. framer-motion measures the element to animate, then restores
+	// `auto`.
+	open: { width: 'auto' },
+	// Resolved with the `custom` value passed to `AnimatePresence`, which is
+	// the only way an already removed element can be given a fresh transition.
+	closed: ( transition ) => ( { width: 0, transition } ),
 };
 
+/**
+ * Renders the complementary area container, replacing the default `div` with
+ * the element given via the `render` prop.
+ *
+ * `className` and `style` are composed rather than overwritten, since the
+ * container is also the scroll container for the sidebar.
+ *
+ * @param {Object} [render] Replacement element.
+ * @param {Object} props    Props for the container.
+ */
+function renderContainer( render, props ) {
+	if ( isValidElement( render ) ) {
+		return cloneElement( render, {
+			...props,
+			className: clsx( render.props.className, props.className ),
+			style: { ...render.props.style, ...props.style },
+		} );
+	}
+
+	return <div { ...props } />;
+}
+
 function ComplementaryAreaFill( {
 	activeArea,
 	isActive,
@@ -56,27 +79,20 @@ function ComplementaryAreaFill( {
 	children,
 	className,
 	id,
+	render,
 } ) {
 	const disableMotion = useReducedMotion();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	// This is used to delay the exit animation to the next tick.
-	// The reason this is done is to allow us to apply the right transition properties
-	// When we switch from an open sidebar to another open sidebar.
-	// we don't want to animate in this case.
+	// Swapping one open area straight for another should not animate.
 	const previousActiveArea = usePrevious( activeArea );
-	const previousIsActive = usePrevious( isActive );
-	const [ , setState ] = useState( {} );
-	useEffect( () => {
-		setState( {} );
-	}, [ isActive ] );
+	const isSwitchingAreas =
+		!! previousActiveArea &&
+		!! activeArea &&
+		activeArea !== previousActiveArea;
 	const transition = {
 		type: 'tween',
 		duration:
-			disableMotion ||
-			isMobileViewport ||
-			( !! previousActiveArea &&
-				!! activeArea &&
-				activeArea !== previousActiveArea )
+			disableMotion || isMobileViewport || isSwitchingAreas
 				? 0
 				: ANIMATION_DURATION,
 		ease: [ 0.6, 0, 0.4, 1 ],
@@ -84,27 +100,21 @@ function ComplementaryAreaFill( {
 
 	return (
 		<Fill name={ `ComplementaryArea/${ scope }` }>
-			<AnimatePresence initial={ false }>
-				{ ( previousIsActive || isActive ) && (
+			<AnimatePresence initial={ false } custom={ transition }>
+				{ isActive && (
 					<motion.div
 						variants={ variants }
 						initial="closed"
-						animate={ isMobileViewport ? 'mobileOpen' : 'open' }
+						animate="open"
 						exit="closed"
 						transition={ transition }
 						className="interface-complementary-area__fill"
 					>
-						<div
-							id={ id }
-							className={ className }
-							style={ {
-								width: isMobileViewport
-									? '100vw'
-									: SIDEBAR_WIDTH,
-							} }
-						>
-							{ children }
-						</div>
+						{ renderContainer( render, {
+							id,
+							className,
+							children,
+						} ) }
 					</motion.div>
 				) }
 			</AnimatePresence>
@@ -177,6 +187,7 @@ function ComplementaryArea( {
 	icon: iconProp,
 	isPinnable = true,
 	panelClassName,
+	render,
 	scope,
 	name,
 	title,
@@ -224,6 +235,7 @@ function ComplementaryArea( {
 		[ identifier, scope ]
 	);
 
+	const hasMenuItem = useHasComplementaryAreaMenuItem( scope, name );
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 
 	useAdjustComplementaryListener(
@@ -286,15 +298,15 @@ function ComplementaryArea( {
 					) }
 				</PinnedItems>
 			) }
-			{ name && isPinnable && (
-				<ComplementaryAreaMoreMenuItem
+			{ name && isPinnable && ! hasMenuItem && (
+				<DefaultComplementaryAreaMoreMenuItem
 					target={ name }
 					scope={ scope }
 					icon={ icon }
 					identifier={ identifier }
 				>
 					{ title }
-				</ComplementaryAreaMoreMenuItem>
+				</DefaultComplementaryAreaMoreMenuItem>
 			) }
 			<ComplementaryAreaFill
 				activeArea={ activeArea }
@@ -302,6 +314,7 @@ function ComplementaryArea( {
 				className={ clsx( 'interface-complementary-area', className ) }
 				scope={ scope }
 				id={ identifier.replace( '/', ':' ) }
+				render={ render }
 			>
 				<ComplementaryAreaHeader
 					className={ headerClassName }
@@ -336,7 +349,6 @@ function ComplementaryArea( {
 										)
 									}
 									isPressed={ isPinned }
-									aria-expanded={ isPinned }
 									size="compact"
 								/>
 							) }

package/src/components/complementary-area/style.scss

@@ -7,6 +7,7 @@
 	color: $gray-900;
 	height: 100%;
 	overflow: auto;
+	width: 100vw;
 
 	@include break-medium() {
 		width: $sidebar-width;

package/src/components/complementary-area-header/index.js

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { closeSmall } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import ComplementaryAreaToggle from '../complementary-area-toggle';
 
 const ComplementaryAreaHeader = ( {

package/src/components/complementary-area-more-menu-item/index.js

@@ -1,45 +1,33 @@
-/**
- * WordPress dependencies
- */
+import { observableMap, useObservableValue } from '@wordpress/compose';
+import { useLayoutEffect } from '@wordpress/element';
 import { check } from '@wordpress/icons';
-import { MenuItem } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import ComplementaryAreaToggle from '../complementary-area-toggle';
 import ActionItem from '../action-item';
 
-const PluginsMenuItem = ( {
-	// Menu item is marked with unstable prop for backward compatibility.
-	// They are removed so they don't leak to DOM elements.
-	// @see https://github.com/WordPress/gutenberg/issues/14457
-	__unstableExplicitMenuItem,
-	__unstableTarget,
-	...restProps
-} ) => <MenuItem { ...restProps } />;
+// How many more menu items are rendered for a complementary area, by
+// `scope/target`.
+const menuItems = observableMap();
 
-export default function ComplementaryAreaMoreMenuItem( {
+export function useHasComplementaryAreaMenuItem( scope, target ) {
+	return !! useObservableValue( menuItems, `${ scope }/${ target }` );
+}
+
+// The more menu item `ComplementaryArea` injects for every pinnable area. It is
+// left out while a plugin renders one of its own for the same area.
+// @see https://github.com/WordPress/gutenberg/issues/14457
+export function DefaultComplementaryAreaMoreMenuItem( {
 	scope,
 	target,
-	__unstableExplicitMenuItem,
 	...props
 } ) {
 	return (
 		<ComplementaryAreaToggle
-			as={ ( toggleProps ) => {
-				return (
-					<ActionItem
-						__unstableExplicitMenuItem={
-							__unstableExplicitMenuItem
-						}
-						__unstableTarget={ `${ scope }/${ target }` }
-						as={ PluginsMenuItem }
-						name={ `${ scope }/plugin-more-menu` }
-						{ ...toggleProps }
-					/>
-				);
-			} }
+			as={ ( toggleProps ) => (
+				<ActionItem
+					name={ `${ scope }/plugin-more-menu` }
+					{ ...toggleProps }
+				/>
+			) }
 			role="menuitemcheckbox"
 			selectedIcon={ check }
 			name={ target }
@@ -48,3 +36,35 @@ export default function ComplementaryAreaMoreMenuItem( {
 		/>
 	);
 }
+
+export default function ComplementaryAreaMoreMenuItem( {
+	scope,
+	target,
+	// Accepted so they don't leak to DOM elements. Registering the menu item is
+	// what keeps `ComplementaryArea` from injecting a second one.
+	__unstableExplicitMenuItem,
+	__unstableTarget,
+	...props
+} ) {
+	useLayoutEffect( () => {
+		const key = `${ scope }/${ target }`;
+		menuItems.set( key, ( menuItems.get( key ) ?? 0 ) + 1 );
+
+		return () => {
+			const count = menuItems.get( key ) - 1;
+			if ( count ) {
+				menuItems.set( key, count );
+			} else {
+				menuItems.delete( key );
+			}
+		};
+	}, [ scope, target ] );
+
+	return (
+		<DefaultComplementaryAreaMoreMenuItem
+			scope={ scope }
+			target={ target }
+			{ ...props }
+		/>
+	);
+}

package/src/components/complementary-area-toggle/index.js

@@ -1,13 +1,6 @@
-/**
- * WordPress dependencies
- */
 import { Button } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { usePluginContext } from '@wordpress/plugins';
-
-/**
- * Internal dependencies
- */
 import { store as interfaceStore } from '../../store';
 
 /**

package/src/components/fullscreen-mode/index.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useEffect } from '@wordpress/element';
 
 const FullscreenMode = ( { isActive } ) => {

package/src/components/fullscreen-mode/test/index.js

@@ -1,10 +1,4 @@
-/**
- * External dependencies
- */
 import { render } from '@testing-library/react';
-/**
- * Internal dependencies
- */
 import FullscreenMode from '..';
 
 describe( 'FullscreenMode', () => {

package/src/components/interface-skeleton/index.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { NavigableRegion } from '@wordpress/admin-ui';
 import { forwardRef, useEffect } from '@wordpress/element';
 import {
@@ -13,11 +6,7 @@ import {
 	__unstableAnimatePresence as AnimatePresence,
 } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
-import {
-	useReducedMotion,
-	useViewportMatch,
-	useResizeObserver,
-} from '@wordpress/compose';
+import { useReducedMotion, useViewportMatch } from '@wordpress/compose';
 
 const ANIMATION_DURATION = 0.25;
 const commonTransition = {
@@ -82,8 +71,6 @@ function InterfaceSkeleton(
 	},
 	ref
 ) {
-	const [ secondarySidebarResizeListener, secondarySidebarSize ] =
-		useResizeObserver();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const disableMotion = useReducedMotion();
 	const defaultTransition = {
@@ -168,20 +155,23 @@ function InterfaceSkeleton(
 								initial="closed"
 								animate="open"
 								exit="closed"
+								// `auto` leaves the open width to the panel, so a
+								// sidebar that is already open on page load is
+								// at its full width on the first paint instead
+								// of animating there. framer-motion measures
+								// the element to animate, then restores `auto`.
 								variants={ {
-									open: { width: secondarySidebarSize.width },
+									open: { width: 'auto' },
 									closed: { width: 0 },
 								} }
 								transition={ defaultTransition }
 							>
 								<motion.div
 									style={ {
-										position: 'absolute',
 										width: isMobileViewport
 											? '100vw'
-											: 'fit-content',
+											: 'max-content',
 										height: '100%',
-										left: 0,
 									} }
 									variants={ {
 										open: { x: 0 },
@@ -189,7 +179,6 @@ function InterfaceSkeleton(
 									} }
 									transition={ defaultTransition }
 								>
-									{ secondarySidebarResizeListener }
 									{ secondarySidebar }
 								</motion.div>
 							</NavigableRegion>

package/src/components/interface-skeleton/style.scss

@@ -75,7 +75,7 @@ html.interface-interface-skeleton__html-container {
 	// Footer overlap prevention
 	.has-footer & {
 		@include break-medium() {
-			padding-bottom: $button-size-small + $border-width;
+			padding-bottom: calc(var(--wpds-dimension-size-md) + #{$border-width});
 		}
 	}
 }
@@ -174,7 +174,7 @@ html.interface-interface-skeleton__html-container {
 		z-index: z-index(".edit-post-layout__footer");
 		display: flex;
 		background: $white;
-		height: $button-size-small;
+		height: var(--wpds-dimension-size-md);
 		align-items: center;
 		font-size: $default-font-size;
 		padding: 0 ($grid-unit-15 + 6px);

package/src/components/pinned-items/index.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { Slot, Fill } from '@wordpress/components';
 
 function PinnedItems( { scope, ...props } ) {

package/src/store/actions.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import deprecated from '@wordpress/deprecated';
 import { store as preferencesStore } from '@wordpress/preferences';
-
-/**
- * Internal dependencies
- */
 import {
 	normalizeComplementaryAreaScope,
 	normalizeComplementaryAreaName,

package/src/store/deprecated.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import deprecated from '@wordpress/deprecated';
 
 export function normalizeComplementaryAreaScope( scope ) {

package/src/store/index.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { createReduxStore, register } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import * as actions from './actions';
 import * as selectors from './selectors';
 import reducer from './reducer';

package/src/store/reducer.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { combineReducers } from '@wordpress/data';
 
 export function complementaryAreas( state = {}, action ) {

package/src/store/selectors.js

@@ -1,13 +1,6 @@
-/**
- * WordPress dependencies
- */
 import { createRegistrySelector } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import { store as preferencesStore } from '@wordpress/preferences';
-
-/**
- * Internal dependencies
- */
 import {
 	normalizeComplementaryAreaScope,
 	normalizeComplementaryAreaName,

package/src/store/test/actions.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { createRegistry } from '@wordpress/data';
 import { store as preferencesStore } from '@wordpress/preferences';
-
-/**
- * Internal dependencies
- */
 import { store as interfaceStore } from '../';
 
 function createRegistryWithStores() {

package/src/store/test/reducer.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { activeModal } from '../reducer';
 
 describe( 'state', () => {

package/src/store/test/selectors.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { isModalActive } from '../selectors';
 
 describe( 'selectors', () => {