@wordpress/interface 9.36.0 → 9.38.0

package/build-style/style.css

@@ -107,6 +107,7 @@
   color: #1e1e1e;
   height: 100%;
   overflow: auto;
+  width: 100vw;
 }
 @media (min-width: 782px) {
   .interface-complementary-area {
@@ -259,7 +260,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 @media (min-width: 782px) {
   .has-footer .interface-interface-skeleton__body {
-    padding-bottom: 25px;
+    padding-bottom: calc(var(--wpds-dimension-size-md, 32px) + 1px);
   }
 }
 
@@ -348,7 +349,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   z-index: 30;
   display: flex;
   background: #fff;
-  height: 24px;
+  height: var(--wpds-dimension-size-md, 32px);
   align-items: center;
   font-size: 13px;
   padding: 0 18px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interface",
-	"version": "9.36.0",
+	"version": "9.38.0",
 	"description": "Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -39,7 +39,7 @@
 			"require": "./build/index.cjs"
 		},
 		"./package.json": "./package.json",
-		"./build-style/": "./build-style/"
+		"./build-style/*": "./build-style/*"
 	},
 	"sideEffects": [
 		"build-style/**",
@@ -52,19 +52,19 @@
 		"build-module/store/index.mjs"
 	],
 	"dependencies": {
-		"@wordpress/a11y": "^4.51.0",
-		"@wordpress/admin-ui": "^2.6.0",
-		"@wordpress/base-styles": "^11.0.0",
-		"@wordpress/components": "^37.0.0",
-		"@wordpress/compose": "^8.4.0",
-		"@wordpress/data": "^10.51.0",
-		"@wordpress/deprecated": "^4.51.0",
-		"@wordpress/element": "^8.3.0",
-		"@wordpress/i18n": "^6.24.0",
-		"@wordpress/icons": "^15.2.0",
-		"@wordpress/plugins": "^7.51.0",
-		"@wordpress/preferences": "^4.51.0",
-		"@wordpress/viewport": "^6.51.0",
+		"@wordpress/a11y": "^4.53.0",
+		"@wordpress/admin-ui": "^2.8.0",
+		"@wordpress/base-styles": "^12.1.0",
+		"@wordpress/components": "^39.0.0",
+		"@wordpress/compose": "^8.6.0",
+		"@wordpress/data": "^10.53.0",
+		"@wordpress/deprecated": "^4.53.0",
+		"@wordpress/element": "^8.5.0",
+		"@wordpress/i18n": "^6.26.0",
+		"@wordpress/icons": "^15.4.0",
+		"@wordpress/plugins": "^7.53.0",
+		"@wordpress/preferences": "^4.53.0",
+		"@wordpress/viewport": "^6.53.0",
 		"clsx": "^2.1.1"
 	},
 	"devDependencies": {
@@ -78,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e9a74f9c14095a34398ecd4d1f7a908e55051205"
+	"gitHead": "989764d42ff93e33684aaf0b96a5b7f3d9bbff52"
 }

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

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { MenuGroup, Button, Slot, Fill } from '@wordpress/components';
 import { Children } from '@wordpress/element';
 

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,10 +25,6 @@ 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 ComplementaryAreaToggle from '../complementary-area-toggle';
@@ -42,13 +37,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 +76,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 +97,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 +184,7 @@ function ComplementaryArea( {
 	icon: iconProp,
 	isPinnable = true,
 	panelClassName,
+	render,
 	scope,
 	name,
 	title,
@@ -302,6 +310,7 @@ function ComplementaryArea( {
 				className={ clsx( 'interface-complementary-area', className ) }
 				scope={ scope }
 				id={ identifier.replace( '/', ':' ) }
+				render={ render }
 			>
 				<ComplementaryAreaHeader
 					className={ headerClassName }
@@ -336,7 +345,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,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { check } from '@wordpress/icons';
 import { MenuItem } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import ComplementaryAreaToggle from '../complementary-area-toggle';
 import ActionItem from '../action-item';
 

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', () => {