@wordpress/components 19.2.1-next.33ec3857e2.0 → 19.4.0

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

@@ -1,7 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { useEffect, useMemo, useRef, useState } from '@wordpress/element';
+import {
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -42,6 +48,10 @@ const generateMenuItems = ( {
 	return menuItems;
 };
 
+const isMenuItemTypeEmpty = (
+	obj?: ToolsPanelMenuItems[ ToolsPanelMenuItemKey ]
+) => obj && Object.keys( obj ).length === 0;
+
 export function useToolsPanel(
 	props: WordPressComponentProps< ToolsPanelProps, 'div' >
 ) {
@@ -51,6 +61,8 @@ export function useToolsPanel(
 		panelId,
 		hasInnerWrapper,
 		shouldRenderPlaceholderItems,
+		__experimentalFirstVisibleItemClass,
+		__experimentalLastVisibleItemClass,
 		...otherProps
 	} = useContextSystem( props, 'ToolsPanel' );
 
@@ -70,40 +82,46 @@ export function useToolsPanel(
 	// Allow panel items to register themselves.
 	const [ panelItems, setPanelItems ] = useState< ToolsPanelItem[] >( [] );
 
-	const registerPanelItem = ( item: ToolsPanelItem ) => {
-		setPanelItems( ( items ) => {
-			const newItems = [ ...items ];
-			// If an item with this label is already registered, remove it first.
-			// This can happen when an item is moved between the default and optional
-			// groups.
-			const existingIndex = newItems.findIndex(
-				( oldItem ) => oldItem.label === item.label
-			);
-			if ( existingIndex !== -1 ) {
-				newItems.splice( existingIndex, 1 );
-			}
-			return [ ...newItems, item ];
-		} );
-	};
+	const registerPanelItem = useCallback(
+		( item: ToolsPanelItem ) => {
+			setPanelItems( ( items ) => {
+				const newItems = [ ...items ];
+				// If an item with this label has already been registered, remove it
+				// first. This can happen when an item is moved between the default
+				// and optional groups.
+				const existingIndex = newItems.findIndex(
+					( oldItem ) => oldItem.label === item.label
+				);
+				if ( existingIndex !== -1 ) {
+					newItems.splice( existingIndex, 1 );
+				}
+				return [ ...newItems, item ];
+			} );
+		},
+		[ setPanelItems ]
+	);
 
 	// Panels need to deregister on unmount to avoid orphans in menu state.
 	// This is an issue when panel items are being injected via SlotFills.
-	const deregisterPanelItem = ( label: string ) => {
-		// When switching selections between components injecting matching
-		// controls, e.g. both panels have a "padding" control, the
-		// deregistration of the first panel doesn't occur until after the
-		// registration of the next.
-		setPanelItems( ( items ) => {
-			const newItems = [ ...items ];
-			const index = newItems.findIndex(
-				( item ) => item.label === label
-			);
-			if ( index !== -1 ) {
-				newItems.splice( index, 1 );
-			}
-			return newItems;
-		} );
-	};
+	const deregisterPanelItem = useCallback(
+		( label: string ) => {
+			// When switching selections between components injecting matching
+			// controls, e.g. both panels have a "padding" control, the
+			// deregistration of the first panel doesn't occur until after the
+			// registration of the next.
+			setPanelItems( ( items ) => {
+				const newItems = [ ...items ];
+				const index = newItems.findIndex(
+					( item ) => item.label === label
+				);
+				if ( index !== -1 ) {
+					newItems.splice( index, 1 );
+				}
+				return newItems;
+			} );
+		},
+		[ setPanelItems ]
+	);
 
 	// Manage and share display state of menu items representing child controls.
 	const [ menuItems, setMenuItems ] = useState< ToolsPanelMenuItems >( {
@@ -121,27 +139,27 @@ export function useToolsPanel(
 			} );
 			return items;
 		} );
-	}, [ panelItems ] );
+	}, [ generateMenuItems, panelItems, setMenuItems ] );
 
 	// Force a menu item to be checked.
 	// This is intended for use with default panel items. They are displayed
 	// separately to optional items and have different display states,
 	// we need to update that when their value is customized.
-	const flagItemCustomization = (
-		label: string,
-		group: ToolsPanelMenuItemKey = 'default'
-	) => {
-		setMenuItems( ( items ) => {
-			const newState = {
-				...items,
-				[ group ]: {
-					...items[ group ],
-					[ label ]: true,
-				},
-			};
-			return newState;
-		} );
-	};
+	const flagItemCustomization = useCallback(
+		( label: string, group: ToolsPanelMenuItemKey = 'default' ) => {
+			setMenuItems( ( items ) => {
+				const newState = {
+					...items,
+					[ group ]: {
+						...items[ group ],
+						[ label ]: true,
+					},
+				};
+				return newState;
+			} );
+		},
+		[ setMenuItems ]
+	);
 
 	// Whether all optional menu items are hidden or not must be tracked
 	// in order to later determine if the panel display is empty and handle
@@ -153,73 +171,79 @@ export function useToolsPanel(
 	] = useState( false );
 
 	useEffect( () => {
-		if ( menuItems.optional ) {
-			const optionalItems = Object.entries( menuItems.optional );
-			const allControlsHidden =
-				optionalItems.length > 0 &&
-				! optionalItems.some( ( [ , isSelected ] ) => isSelected );
+		if (
+			isMenuItemTypeEmpty( menuItems?.default ) &&
+			! isMenuItemTypeEmpty( menuItems?.optional )
+		) {
+			const allControlsHidden = ! Object.entries(
+				menuItems.optional
+			).some( ( [ , isSelected ] ) => isSelected );
 			setAreAllOptionalControlsHidden( allControlsHidden );
 		}
-	}, [ menuItems.optional ] );
+	}, [ menuItems, setAreAllOptionalControlsHidden ] );
 
 	const cx = useCx();
 	const classes = useMemo( () => {
-		const hasDefaultMenuItems =
-			menuItems?.default && !! Object.keys( menuItems?.default ).length;
 		const wrapperStyle =
 			hasInnerWrapper &&
 			styles.ToolsPanelWithInnerWrapper( DEFAULT_COLUMNS );
 		const emptyStyle =
-			! hasDefaultMenuItems &&
+			isMenuItemTypeEmpty( menuItems?.default ) &&
 			areAllOptionalControlsHidden &&
 			styles.ToolsPanelHiddenInnerWrapper;
 
 		return cx( styles.ToolsPanel, wrapperStyle, emptyStyle, className );
 	}, [
+		areAllOptionalControlsHidden,
 		className,
+		cx,
 		hasInnerWrapper,
 		menuItems,
-		areAllOptionalControlsHidden,
 	] );
 
 	// Toggle the checked state of a menu item which is then used to determine
 	// display of the item within the panel.
-	const toggleItem = ( label: string ) => {
-		const currentItem = panelItems.find( ( item ) => item.label === label );
-
-		if ( ! currentItem ) {
-			return;
-		}
-
-		const menuGroup = currentItem.isShownByDefault ? 'default' : 'optional';
+	const toggleItem = useCallback(
+		( label: string ) => {
+			const currentItem = panelItems.find(
+				( item ) => item.label === label
+			);
 
-		const newMenuItems = {
-			...menuItems,
-			[ menuGroup ]: {
-				...menuItems[ menuGroup ],
-				[ label ]: ! menuItems[ menuGroup ][ label ],
-			},
-		};
+			if ( ! currentItem ) {
+				return;
+			}
 
-		setMenuItems( newMenuItems );
-	};
+			const menuGroup = currentItem.isShownByDefault
+				? 'default'
+				: 'optional';
 
-	const getResetAllFilters = () => {
-		const filters: Array< () => void > = [];
+			const newMenuItems = {
+				...menuItems,
+				[ menuGroup ]: {
+					...menuItems[ menuGroup ],
+					[ label ]: ! menuItems[ menuGroup ][ label ],
+				},
+			};
 
-		panelItems.forEach( ( item ) => {
-			if ( item.resetAllFilter ) {
-				filters.push( item.resetAllFilter );
-			}
-		} );
-		return filters;
-	};
+			setMenuItems( newMenuItems );
+		},
+		[ menuItems, panelItems, setMenuItems ]
+	);
 
 	// Resets display of children and executes resetAll callback if available.
-	const resetAllItems = () => {
+	const resetAllItems = useCallback( () => {
 		if ( typeof resetAll === 'function' ) {
 			isResetting.current = true;
-			resetAll( getResetAllFilters() );
+
+			// Collect available reset filters from panel items.
+			const filters: Array< () => void > = [];
+			panelItems.forEach( ( item ) => {
+				if ( item.resetAllFilter ) {
+					filters.push( item.resetAllFilter );
+				}
+			} );
+
+			resetAll( filters );
 		}
 
 		// Turn off display of all non-default items.
@@ -228,20 +252,63 @@ export function useToolsPanel(
 			shouldReset: true,
 		} );
 		setMenuItems( resetMenuItems );
-	};
+	}, [
+		generateMenuItems,
+		isResetting.current,
+		panelItems,
+		resetAll,
+		setMenuItems,
+	] );
 
-	const panelContext = {
-		panelId,
-		menuItems,
-		registerPanelItem,
-		deregisterPanelItem,
-		flagItemCustomization,
-		areAllOptionalControlsHidden,
-		hasMenuItems: !! panelItems.length,
-		isResetting: isResetting.current,
-		shouldRenderPlaceholderItems,
+	// Assist ItemGroup styling when there are potentially hidden placeholder
+	// items by identifying first & last items that are toggled on for display.
+	const getFirstVisibleItemLabel = ( items: ToolsPanelItem[] ) => {
+		const optionalItems = menuItems.optional || {};
+		const firstItem = items.find(
+			( item ) => item.isShownByDefault || !! optionalItems[ item.label ]
+		);
+
+		return firstItem?.label;
 	};
 
+	const firstDisplayedItem = getFirstVisibleItemLabel( panelItems );
+	const lastDisplayedItem = getFirstVisibleItemLabel(
+		[ ...panelItems ].reverse()
+	);
+
+	const panelContext = useMemo(
+		() => ( {
+			areAllOptionalControlsHidden,
+			deregisterPanelItem,
+			firstDisplayedItem,
+			flagItemCustomization,
+			hasMenuItems: !! panelItems.length,
+			isResetting: isResetting.current,
+			lastDisplayedItem,
+			menuItems,
+			panelId,
+			registerPanelItem,
+			shouldRenderPlaceholderItems,
+			__experimentalFirstVisibleItemClass,
+			__experimentalLastVisibleItemClass,
+		} ),
+		[
+			areAllOptionalControlsHidden,
+			deregisterPanelItem,
+			firstDisplayedItem,
+			flagItemCustomization,
+			isResetting.current,
+			lastDisplayedItem,
+			menuItems,
+			panelId,
+			panelItems,
+			registerPanelItem,
+			shouldRenderPlaceholderItems,
+			__experimentalFirstVisibleItemClass,
+			__experimentalLastVisibleItemClass,
+		]
+	);
+
 	return {
 		...otherProps,
 		panelContext,

package/src/tools-panel/tools-panel-header/component.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { Ref } from 'react';
 
 /**

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

@@ -23,15 +23,15 @@ export function useToolsPanelHeader(
 	const cx = useCx();
 	const classes = useMemo( () => {
 		return cx( styles.ToolsPanelHeader, className );
-	}, [ className ] );
+	}, [ className, cx ] );
 
 	const dropdownMenuClassName = useMemo( () => {
 		return cx( styles.DropdownMenu );
-	}, [] );
+	}, [ cx ] );
 
 	const headingClassName = useMemo( () => {
 		return cx( styles.ToolsPanelHeading );
-	}, [] );
+	}, [ cx ] );
 
 	const {
 		menuItems,

package/src/tools-panel/tools-panel-item/component.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { Ref } from 'react';
 
 /**

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

@@ -36,15 +36,23 @@ export function useToolsPanelItem(
 		flagItemCustomization,
 		isResetting,
 		shouldRenderPlaceholderItems: shouldRenderPlaceholder,
+		firstDisplayedItem,
+		lastDisplayedItem,
+		__experimentalFirstVisibleItemClass,
+		__experimentalLastVisibleItemClass,
 	} = useToolsPanelContext();
 
 	const hasValueCallback = useCallback( hasValue, [ panelId ] );
 	const resetAllFilterCallback = useCallback( resetAllFilter, [ panelId ] );
+	const previousPanelId = usePrevious( currentPanelId );
+
+	const hasMatchingPanel =
+		currentPanelId === panelId || currentPanelId === null;
 
 	// Registering the panel item allows the panel to include it in its
 	// automatically generated menu and determine its initial checked status.
 	useEffect( () => {
-		if ( currentPanelId === panelId ) {
+		if ( hasMatchingPanel && previousPanelId !== null ) {
 			registerPanelItem( {
 				hasValue: hasValueCallback,
 				isShownByDefault,
@@ -55,16 +63,21 @@ export function useToolsPanelItem(
 		}
 
 		return () => {
-			if ( currentPanelId === panelId ) {
+			if (
+				( previousPanelId === null && !! currentPanelId ) ||
+				currentPanelId === panelId
+			) {
 				deregisterPanelItem( label );
 			}
 		};
 	}, [
 		currentPanelId,
-		panelId,
+		hasMatchingPanel,
 		isShownByDefault,
 		label,
 		hasValueCallback,
+		panelId,
+		previousPanelId,
 		resetAllFilterCallback,
 	] );
 
@@ -88,7 +101,7 @@ export function useToolsPanelItem(
 	// Determine if the panel item's corresponding menu is being toggled and
 	// trigger appropriate callback if it is.
 	useEffect( () => {
-		if ( isResetting || currentPanelId !== panelId ) {
+		if ( isResetting || ! hasMatchingPanel ) {
 			return;
 		}
 
@@ -100,11 +113,10 @@ export function useToolsPanelItem(
 			onDeselect?.();
 		}
 	}, [
-		currentPanelId,
+		hasMatchingPanel,
 		isMenuItemChecked,
 		isResetting,
 		isValueSet,
-		panelId,
 		wasMenuItemChecked,
 	] );
 
@@ -121,8 +133,27 @@ export function useToolsPanelItem(
 			shouldRenderPlaceholder &&
 			! isShown &&
 			styles.ToolsPanelItemPlaceholder;
-		return cx( styles.ToolsPanelItem, placeholderStyle, className );
-	}, [ isShown, shouldRenderPlaceholder, className ] );
+		const firstItemStyle =
+			firstDisplayedItem === label && __experimentalFirstVisibleItemClass;
+		const lastItemStyle =
+			lastDisplayedItem === label && __experimentalLastVisibleItemClass;
+		return cx(
+			styles.ToolsPanelItem,
+			placeholderStyle,
+			className,
+			firstItemStyle,
+			lastItemStyle
+		);
+	}, [
+		isShown,
+		shouldRenderPlaceholder,
+		className,
+		cx,
+		firstDisplayedItem,
+		lastDisplayedItem,
+		__experimentalFirstVisibleItemClass,
+		__experimentalLastVisibleItemClass,
+	] );
 
 	return {
 		...otherProps,

package/src/tools-panel/types.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { ReactNode } from 'react';
 
 type ResetAllFilter = () => void;
@@ -38,6 +37,16 @@ export type ToolsPanelProps = {
 	 * placeholder content instead of null when they are toggled off and hidden.
 	 */
 	shouldRenderPlaceholderItems: boolean;
+	/**
+	 * Experimental prop allowing for a custom CSS class to be applied to the
+	 * first visible `ToolsPanelItem` within the `ToolsPanel`.
+	 */
+	__experimentalFirstVisibleItemClass?: string;
+	/**
+	 * Experimental prop allowing for a custom CSS class to be applied to the
+	 * last visible `ToolsPanelItem` within the `ToolsPanel`.
+	 */
+	__experimentalLastVisibleItemClass?: string;
 };
 
 export type ToolsPanelHeaderProps = {
@@ -131,6 +140,10 @@ export type ToolsPanelContext = {
 	isResetting: boolean;
 	shouldRenderPlaceholderItems: boolean;
 	areAllOptionalControlsHidden: boolean;
+	firstDisplayedItem?: string;
+	lastDisplayedItem?: string;
+	__experimentalFirstVisibleItemClass?: string;
+	__experimentalLastVisibleItemClass?: string;
 };
 
 export type ToolsPanelControlsGroupProps = {

package/src/tooltip/test/index.native.js

@@ -54,7 +54,9 @@ it( 'displays the message', () => {
 	expect( screen.getByText( 'A helpful message' ) ).toBeTruthy();
 } );
 
-it( 'dismisses when the screen is tapped', () => {
+// Skipped until `pointerEvents: 'box-none'` no longer erroneously prevents
+// triggering `onTouch*` on the element: https://git.io/JSHZt
+it.skip( 'dismisses when the screen is tapped', () => {
 	const screen = render(
 		<TooltipSlot>
 			<Tooltip visible={ true } text="A helpful message">