@wordpress/components 23.6.0 → 23.7.0

package/src/sandbox/index.native.js

@@ -22,85 +22,85 @@ import { usePreferredColorScheme } from '@wordpress/compose';
  */
 import sandboxStyles from './style.scss';
 
-const observeAndResizeJS = function () {
-	// Hermes requires a special directive to preserve the original source code
-	// when using `Function.prototype.toString()` below.
-	// https://github.com/facebook/hermes/issues/114#issuecomment-887106990
-	'show source';
-	const { MutationObserver } = window;
-
-	if ( ! MutationObserver || ! document.body || ! window.parent ) {
-		return;
-	}
+const observeAndResizeJS = `
+	(function() {
+		const { MutationObserver } = window;
 
-	function sendResize() {
-		const clientBoundingRect = document.body.getBoundingClientRect();
-
-		// The function postMessage is exposed by the react-native-webview library
-		// to communicate between React Native and the WebView, in this case,
-		// we use it for notifying resize changes.
-		window.ReactNativeWebView.postMessage(
-			JSON.stringify( {
-				action: 'resize',
-				width: clientBoundingRect.width,
-				height: clientBoundingRect.height,
-			} )
-		);
-	}
+		if ( ! MutationObserver || ! document.body || ! window.parent ) {
+			return;
+		}
 
-	const observer = new MutationObserver( sendResize );
-	observer.observe( document.body, {
-		attributes: true,
-		attributeOldValue: false,
-		characterData: true,
-		characterDataOldValue: false,
-		childList: true,
-		subtree: true,
-	} );
+		function sendResize() {
+			const clientBoundingRect = document.body.getBoundingClientRect();
+
+			// The function postMessage is exposed by the react-native-webview library
+			// to communicate between React Native and the WebView, in this case,
+			// we use it for notifying resize changes.
+			window.ReactNativeWebView.postMessage(
+				JSON.stringify( {
+					action: 'resize',
+					width: clientBoundingRect.width,
+					height: clientBoundingRect.height,
+				} )
+			);
+		}
 
-	window.addEventListener( 'load', sendResize, true );
-
-	// Hack: Remove viewport unit styles, as these are relative
-	// the iframe root and interfere with our mechanism for
-	// determining the unconstrained page bounds.
-	function removeViewportStyles( ruleOrNode ) {
-		if ( ruleOrNode.style ) {
-			[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function (
-				style
-			) {
-				if (
-					/^\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] )
+		const observer = new MutationObserver( sendResize );
+		observer.observe( document.body, {
+			attributes: true,
+			attributeOldValue: false,
+			characterData: true,
+			characterDataOldValue: false,
+			childList: true,
+			subtree: true,
+		} );
+
+		window.addEventListener( 'load', sendResize, true );
+
+		// Hack: Remove viewport unit styles, as these are relative
+		// the iframe root and interfere with our mechanism for
+		// determining the unconstrained page bounds.
+		function removeViewportStyles( ruleOrNode ) {
+			if ( ruleOrNode.style ) {
+				[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function (
+					style
 				) {
-					ruleOrNode.style[ style ] = '';
-				}
-			} );
+					if (
+						/^\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] )
+					) {
+						ruleOrNode.style[ style ] = '';
+					}
+				} );
+			}
 		}
-	}
 
-	Array.prototype.forEach.call(
-		document.querySelectorAll( '[style]' ),
-		removeViewportStyles
-	);
-	Array.prototype.forEach.call(
-		document.styleSheets,
-		function ( stylesheet ) {
-			Array.prototype.forEach.call(
-				stylesheet.cssRules || stylesheet.rules,
-				removeViewportStyles
-			);
-		}
-	);
+		Array.prototype.forEach.call(
+			document.querySelectorAll( '[style]' ),
+			removeViewportStyles
+		);
+		Array.prototype.forEach.call(
+			document.styleSheets,
+			function ( stylesheet ) {
+				Array.prototype.forEach.call(
+					stylesheet.cssRules || stylesheet.rules,
+					removeViewportStyles
+				);
+			}
+		);
 
-	document.body.style.position = 'absolute';
-	document.body.style.width = '100%';
-	document.body.setAttribute( 'data-resizable-iframe-connected', '' );
+		document.body.style.position = 'absolute';
+		document.body.style.width = '100%';
+		document.body.setAttribute( 'data-resizable-iframe-connected', '' );
 
-	sendResize();
+		sendResize();
 
-	// Resize events can change the width of elements with 100% width, but we don't
-	// get an DOM mutations for that, so do the resize when the window is resized, too.
-	window.addEventListener( 'resize', sendResize, true );
-};
+		// Resize events can change the width of elements with 100% width, but we don't
+		// get an DOM mutations for that, so do the resize when the window is resized, too.
+		window.addEventListener( 'resize', sendResize, true );
+		window.addEventListener( 'orientationchange', sendResize, true );
+		widow.addEventListener( 'click', sendResize, true );
+	})();
+`;
 
 const style = `
 	body {
@@ -230,14 +230,6 @@ function Sandbox( {
 					className={ type }
 				>
 					<div dangerouslySetInnerHTML={ { __html: html } } />
-					<script
-						type="text/javascript"
-						dangerouslySetInnerHTML={ {
-							__html:
-								customJS ||
-								`(${ observeAndResizeJS.toString() })();`,
-						} }
-					/>
 					{ scripts.map( ( src ) => (
 						<script key={ src } src={ src } />
 					) ) }
@@ -322,6 +314,7 @@ function Sandbox( {
 				sandboxStyles[ 'sandbox-webview__container' ],
 				containerStyle,
 			] }
+			injectedJavaScript={ customJS || observeAndResizeJS }
 			key={ key }
 			ref={ ref }
 			source={ { baseUrl: providerUrl, html: contentHtml } }

package/src/slot-fill/test/slot.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -92,9 +93,9 @@ describe( 'Slot', () => {
 		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'calls the functions passed as the Slot’s fillProps in the Fill', () => {
+	it( 'calls the functions passed as the Slot’s fillProps in the Fill', async () => {
 		const onClose = jest.fn();
-
+		const user = userEvent.setup();
 		render(
 			<Provider>
 				<Slot name="chicken" fillProps={ { onClose } } />
@@ -108,7 +109,7 @@ describe( 'Slot', () => {
 			</Provider>
 		);
 
-		fireEvent.click( screen.getByText( 'Click me' ) );
+		await user.click( screen.getByText( 'Click me' ) );
 
 		expect( onClose ).toHaveBeenCalledTimes( 1 );
 	} );
@@ -149,7 +150,8 @@ describe( 'Slot', () => {
 		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should re-render Slot when not bubbling virtually', () => {
+	it( 'should re-render Slot when not bubbling virtually', async () => {
+		const user = userEvent.setup();
 		const { container } = render(
 			<Provider>
 				<div>
@@ -161,7 +163,7 @@ describe( 'Slot', () => {
 
 		expect( container ).toMatchSnapshot();
 
-		fireEvent.click( screen.getByRole( 'button' ) );
+		await user.click( screen.getByRole( 'button' ) );
 
 		expect( container ).toMatchSnapshot();
 	} );

package/src/style.scss

@@ -11,7 +11,6 @@
 @import "./palette-edit/style.scss";
 @import "./color-indicator/style.scss";
 @import "./combobox-control/style.scss";
-@import "./color-list-picker/style.scss";
 @import "./color-palette/style.scss";
 @import "./custom-gradient-picker/style.scss";
 @import "./custom-select-control/style.scss";
@@ -21,6 +20,7 @@
 @import "./dropdown/style.scss";
 @import "./dropdown-menu/style.scss";
 @import "./duotone-picker/style.scss";
+@import "./duotone-picker/color-list-picker/style.scss";
 @import "./form-toggle/style.scss";
 @import "./form-token-field/style.scss";
 @import "./guide/style.scss";

package/src/tab-panel/index.tsx

@@ -6,7 +6,12 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState, useEffect, useCallback } from '@wordpress/element';
+import {
+	useState,
+	useEffect,
+	useLayoutEffect,
+	useCallback,
+} from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 
 /**
@@ -104,7 +109,7 @@ export function TabPanel( {
 	const selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;
 
 	// Handle selecting the initial tab.
-	useEffect( () => {
+	useLayoutEffect( () => {
 		// If there's a selected tab, don't override it.
 		if ( selectedTab ) {
 			return;

package/src/tools-panel/test/index.tsx

@@ -954,6 +954,92 @@ describe( 'ToolsPanel', () => {
 			expect( items[ 1 ] ).toHaveTextContent( 'Item 2' );
 		} );
 
+		it( 'should maintain menu item order', async () => {
+			const InconsistentItems = () => (
+				<ToolsPanelItems>
+					<ToolsPanelItem
+						label="Item 1"
+						hasValue={ () => false }
+						isShownByDefault
+					>
+						<div>Item 1</div>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						label="Item 2"
+						hasValue={ () => false }
+						isShownByDefault
+					>
+						<div>Item 2</div>
+					</ToolsPanelItem>
+				</ToolsPanelItems>
+			);
+
+			const { rerender } = render(
+				<SlotFillProvider>
+					<InconsistentItems key="order-test-step-1" />
+					<ToolsPanelItems>
+						<ToolsPanelItem
+							label="Item 3"
+							hasValue={ () => false }
+							isShownByDefault
+						>
+							<div>Item 3</div>
+						</ToolsPanelItem>
+					</ToolsPanelItems>
+					<ToolsPanel { ...defaultProps }>
+						<Slot />
+					</ToolsPanel>
+				</SlotFillProvider>
+			);
+
+			// Open dropdown menu.
+			const user = userEvent.setup();
+			let menuButton = getMenuButton();
+			await user.click( menuButton );
+
+			// Confirm all the existing menu items are present and in the
+			// expected order.
+			let menuItems = await screen.findAllByRole( 'menuitemcheckbox' );
+
+			expect( menuItems.length ).toEqual( 3 );
+			expect( menuItems[ 0 ] ).toHaveTextContent( 'Item 1' );
+			expect( menuItems[ 1 ] ).toHaveTextContent( 'Item 2' );
+			expect( menuItems[ 2 ] ).toHaveTextContent( 'Item 3' );
+
+			// Close the dropdown menu.
+			await user.click( menuButton );
+
+			rerender(
+				<SlotFillProvider>
+					<InconsistentItems key="order-test-step-2" />
+					<ToolsPanelItems>
+						<ToolsPanelItem
+							label="Item 3"
+							hasValue={ () => false }
+							isShownByDefault
+						>
+							<div>Item 3</div>
+						</ToolsPanelItem>
+					</ToolsPanelItems>
+					<ToolsPanel { ...defaultProps }>
+						<Slot />
+					</ToolsPanel>
+				</SlotFillProvider>
+			);
+
+			// Reopen dropdown menu.
+			menuButton = getMenuButton();
+			await user.click( menuButton );
+
+			// Confirm the menu item order has been maintained.
+			menuItems = await screen.findAllByRole( 'menuitemcheckbox' );
+
+			expect( menuItems.length ).toEqual( 3 );
+			expect( menuItems[ 0 ] ).toHaveTextContent( 'Item 1' );
+			expect( menuItems[ 1 ] ).toHaveTextContent( 'Item 2' );
+			expect( menuItems[ 2 ] ).toHaveTextContent( 'Item 3' );
+		} );
+
 		it( 'should not trigger callback when fill has not updated yet when panel has', () => {
 			// Fill provided controls can update independently to the panel.
 			// A `panelId` prop was added to both panels and items

package/src/tools-panel/tools-panel/hook.ts

@@ -30,7 +30,9 @@ const generateMenuItems = ( {
 	panelItems,
 	shouldReset,
 	currentMenuItems,
+	menuItemOrder,
 }: ToolsPanelMenuItemsConfig ) => {
+	const newMenuItems: ToolsPanelMenuItems = { default: {}, optional: {} };
 	const menuItems: ToolsPanelMenuItems = { default: {}, optional: {} };
 
 	panelItems.forEach( ( { hasValue, isShownByDefault, label } ) => {
@@ -42,7 +44,31 @@ const generateMenuItems = ( {
 		const existingItemValue = currentMenuItems?.[ group ]?.[ label ];
 		const value = existingItemValue ? existingItemValue : hasValue();
 
-		menuItems[ group ][ label ] = shouldReset ? false : value;
+		newMenuItems[ group ][ label ] = shouldReset ? false : value;
+	} );
+
+	// Loop the known, previously registered items first to maintain menu order.
+	menuItemOrder.forEach( ( key ) => {
+		if ( newMenuItems.default.hasOwnProperty( key ) ) {
+			menuItems.default[ key ] = newMenuItems.default[ key ];
+		}
+
+		if ( newMenuItems.optional.hasOwnProperty( key ) ) {
+			menuItems.optional[ key ] = newMenuItems.optional[ key ];
+		}
+	} );
+
+	// Loop newMenuItems object adding any that aren't in the known items order.
+	Object.keys( newMenuItems.default ).forEach( ( key ) => {
+		if ( ! menuItems.default.hasOwnProperty( key ) ) {
+			menuItems.default[ key ] = newMenuItems.default[ key ];
+		}
+	} );
+
+	Object.keys( newMenuItems.optional ).forEach( ( key ) => {
+		if ( ! menuItems.optional.hasOwnProperty( key ) ) {
+			menuItems.optional[ key ] = newMenuItems.optional[ key ];
+		}
 	} );
 
 	return menuItems;
@@ -82,12 +108,14 @@ export function useToolsPanel(
 
 	// Allow panel items to register themselves.
 	const [ panelItems, setPanelItems ] = useState< ToolsPanelItem[] >( [] );
+	const [ menuItemOrder, setMenuItemOrder ] = useState< string[] >( [] );
 	const [ resetAllFilters, setResetAllFilters ] = useState<
 		ResetAllFilter[]
 	>( [] );
 
 	const registerPanelItem = useCallback(
 		( item: ToolsPanelItem ) => {
+			// Add item to panel items.
 			setPanelItems( ( items ) => {
 				const newItems = [ ...items ];
 				// If an item with this label has already been registered, remove it
@@ -101,8 +129,18 @@ export function useToolsPanel(
 				}
 				return [ ...newItems, item ];
 			} );
+
+			// Track the initial order of item registration. This is used for
+			// maintaining menu item order later.
+			setMenuItemOrder( ( items ) => {
+				if ( items.includes( item.label ) ) {
+					return items;
+				}
+
+				return [ ...items, item.label ];
+			} );
 		},
-		[ setPanelItems ]
+		[ setPanelItems, setMenuItemOrder ]
 	);
 
 	// Panels need to deregister on unmount to avoid orphans in menu state.
@@ -160,10 +198,11 @@ export function useToolsPanel(
 				panelItems,
 				shouldReset: false,
 				currentMenuItems: prevState,
+				menuItemOrder,
 			} );
 			return items;
 		} );
-	}, [ panelItems, setMenuItems ] );
+	}, [ panelItems, setMenuItems, menuItemOrder ] );
 
 	// Force a menu item to be checked.
 	// This is intended for use with default panel items. They are displayed
@@ -267,10 +306,11 @@ export function useToolsPanel(
 		// Turn off display of all non-default items.
 		const resetMenuItems = generateMenuItems( {
 			panelItems,
+			menuItemOrder,
 			shouldReset: true,
 		} );
 		setMenuItems( resetMenuItems );
-	}, [ panelItems, resetAllFilters, resetAll, setMenuItems ] );
+	}, [ panelItems, resetAllFilters, resetAll, setMenuItems, menuItemOrder ] );
 
 	// Assist ItemGroup styling when there are potentially hidden placeholder
 	// items by identifying first & last items that are toggled on for display.

package/src/tools-panel/types.ts

@@ -187,4 +187,5 @@ export type ToolsPanelMenuItemsConfig = {
 	panelItems: ToolsPanelItem[];
 	shouldReset: boolean;
 	currentMenuItems?: ToolsPanelMenuItems;
+	menuItemOrder: string[];
 };