@wordpress/components 23.9.0 → 25.0.0

package/src/palette-edit/index.tsx

@@ -1,12 +1,19 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import { paramCase as kebabCase } from 'change-case';
 
 /**
  * WordPress dependencies
  */
-import { useState, useRef, useEffect, useCallback } from '@wordpress/element';
+import {
+	useState,
+	useRef,
+	useEffect,
+	useCallback,
+	useMemo,
+} from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { lineSolid, moreVertical, plus } from '@wordpress/icons';
 import {
@@ -106,15 +113,26 @@ function ColorPickerPopover< T extends Color | Gradient >( {
 	isGradient,
 	element,
 	onChange,
+	popoverProps: receivedPopoverProps,
 	onClose = () => {},
 }: ColorPickerPopoverProps< T > ) {
+	const popoverProps: ColorPickerPopoverProps< T >[ 'popoverProps' ] =
+		useMemo(
+			() => ( {
+				shift: true,
+				offset: 20,
+				placement: 'left-start',
+				...receivedPopoverProps,
+				className: classnames(
+					'components-palette-edit__popover',
+					receivedPopoverProps?.className
+				),
+			} ),
+			[ receivedPopoverProps ]
+		);
+
 	return (
-		<Popover
-			placement="left-start"
-			offset={ 20 }
-			className="components-palette-edit__popover"
-			onClose={ onClose }
-		>
+		<Popover { ...popoverProps } onClose={ onClose }>
 			{ ! isGradient && (
 				<ColorPicker
 					color={ element.color }
@@ -154,17 +172,31 @@ function Option< T extends Color | Gradient >( {
 	onStartEditing,
 	onRemove,
 	onStopEditing,
+	popoverProps: receivedPopoverProps,
 	slugPrefix,
 	isGradient,
 }: OptionProps< T > ) {
 	const focusOutsideProps = useFocusOutside( onStopEditing );
 	const value = isGradient ? element.gradient : element.color;
 
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	const popoverProps = useMemo(
+		() => ( {
+			...receivedPopoverProps,
+			// Use the custom palette color item as the popover anchor.
+			anchor: popoverAnchor,
+		} ),
+		[ popoverAnchor, receivedPopoverProps ]
+	);
+
 	return (
 		<PaletteItem
 			className={ isEditing ? 'is-selected' : undefined }
 			as="div"
 			onClick={ onStartEditing }
+			ref={ setPopoverAnchor }
 			{ ...( isEditing
 				? { ...focusOutsideProps }
 				: {
@@ -218,6 +250,7 @@ function Option< T extends Color | Gradient >( {
 					isGradient={ isGradient }
 					onChange={ onChange }
 					element={ element }
+					popoverProps={ popoverProps }
 				/>
 			) }
 		</PaletteItem>
@@ -244,6 +277,7 @@ function PaletteEditListView< T extends Color | Gradient >( {
 	canOnlyChangeValues,
 	slugPrefix,
 	isGradient,
+	popoverProps,
 }: PaletteEditListViewProps< T > ) {
 	// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.
 	const elementsReference = useRef< typeof elements >();
@@ -317,6 +351,7 @@ function PaletteEditListView< T extends Color | Gradient >( {
 							}
 						} }
 						slugPrefix={ slugPrefix }
+						popoverProps={ popoverProps }
 					/>
 				) ) }
 			</ItemGroup>
@@ -356,6 +391,7 @@ export function PaletteEdit( {
 	canOnlyChangeValues,
 	canReset,
 	slugPrefix = '',
+	popoverProps,
 }: PaletteEditProps ) {
 	const isGradient = !! gradients;
 	const elements = isGradient ? gradients : colors;
@@ -541,6 +577,7 @@ export function PaletteEdit( {
 							setEditingElement={ setEditingElement }
 							slugPrefix={ slugPrefix }
 							isGradient={ isGradient }
+							popoverProps={ popoverProps }
 						/>
 					) }
 					{ ! isEditing && editingElement !== null && (
@@ -568,6 +605,7 @@ export function PaletteEdit( {
 								);
 							} }
 							element={ elements[ editingElement ?? -1 ] }
+							popoverProps={ popoverProps }
 						/>
 					) }
 					{ ! isEditing &&

package/src/palette-edit/stories/index.tsx

@@ -59,6 +59,10 @@ Default.args = {
 	],
 	paletteLabel: 'Colors',
 	emptyMessage: 'Colors are empty',
+	popoverProps: {
+		placement: 'bottom-start',
+		offset: 8,
+	},
 };
 
 export const Gradients = Template.bind( {} );

package/src/palette-edit/types.ts

@@ -6,6 +6,7 @@ import type { Key, MouseEventHandler } from 'react';
 /**
  * Internal dependencies
  */
+import type Popover from '../popover';
 import type { HeadingSize } from '../heading/types';
 
 export type Color = {
@@ -58,6 +59,13 @@ export type BasePaletteEdit = {
 	 * @default ''
 	 */
 	slugPrefix?: string;
+	/**
+	 * Props to pass through to the underlying Popover component.
+	 */
+	popoverProps?: Omit<
+		React.ComponentPropsWithoutRef< typeof Popover >,
+		'children'
+	>;
 };
 
 type PaletteEditColors = {
@@ -94,6 +102,7 @@ export type ColorPickerPopoverProps< T extends Color | Gradient > = {
 	onChange: ( newElement: T ) => void;
 	isGradient?: T extends Gradient ? true : false;
 	onClose?: () => void;
+	popoverProps?: PaletteEditProps[ 'popoverProps' ];
 };
 
 export type NameInputProps = {
@@ -112,6 +121,7 @@ export type OptionProps< T extends Color | Gradient > = {
 	onRemove: MouseEventHandler< HTMLButtonElement >;
 	onStartEditing: () => void;
 	onStopEditing: () => void;
+	popoverProps?: PaletteEditProps[ 'popoverProps' ];
 	slugPrefix: string;
 };
 
@@ -121,6 +131,7 @@ export type PaletteEditListViewProps< T extends Color | Gradient > = {
 	isGradient: T extends Gradient ? true : false;
 	canOnlyChangeValues: PaletteEditProps[ 'canOnlyChangeValues' ];
 	editingElement?: EditingElement;
+	popoverProps?: PaletteEditProps[ 'popoverProps' ];
 	setEditingElement: ( newEditingElement?: EditingElement ) => void;
 	slugPrefix: string;
 };

package/src/private-apis.ts

@@ -9,6 +9,18 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
 import { default as CustomSelectControl } from './custom-select-control';
 import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';
 import { createPrivateSlotFill } from './slot-fill';
+import {
+	DropdownMenu as DropdownMenuV2,
+	DropdownMenuCheckboxItem as DropdownMenuCheckboxItemV2,
+	DropdownMenuGroup as DropdownMenuGroupV2,
+	DropdownMenuItem as DropdownMenuItemV2,
+	DropdownMenuLabel as DropdownMenuLabelV2,
+	DropdownMenuRadioGroup as DropdownMenuRadioGroupV2,
+	DropdownMenuRadioItem as DropdownMenuRadioItemV2,
+	DropdownMenuSeparator as DropdownMenuSeparatorV2,
+	DropdownSubMenu as DropdownSubMenuV2,
+	DropdownSubMenuTrigger as DropdownSubMenuTriggerV2,
+} from './dropdown-menu-v2';
 
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
@@ -21,4 +33,14 @@ lock( privateApis, {
 	CustomSelectControl,
 	__experimentalPopoverLegacyPositionToPlacement,
 	createPrivateSlotFill,
+	DropdownMenuV2,
+	DropdownMenuCheckboxItemV2,
+	DropdownMenuGroupV2,
+	DropdownMenuItemV2,
+	DropdownMenuLabelV2,
+	DropdownMenuRadioGroupV2,
+	DropdownMenuRadioItemV2,
+	DropdownMenuSeparatorV2,
+	DropdownSubMenuV2,
+	DropdownSubMenuTriggerV2,
 } );

package/src/range-control/index.native.js

@@ -25,6 +25,7 @@ const RangeControl = memo(
 		max,
 		type,
 		separatorType,
+		disabled,
 		...props
 	} ) => {
 		if ( type === 'stepper' ) {
@@ -36,6 +37,7 @@ const RangeControl = memo(
 					onChange={ onChange }
 					separatorType={ separatorType }
 					value={ value }
+					disabled={ disabled }
 				/>
 			);
 		}
@@ -61,6 +63,7 @@ const RangeControl = memo(
 				allowReset={ allowReset }
 				defaultValue={ initialSliderValue }
 				separatorType={ separatorType }
+				disabled={ disabled }
 				{ ...props }
 			/>
 		);

package/src/sandbox/index.native.js

@@ -186,6 +186,8 @@ const Sandbox = forwardRef( function Sandbox(
 		url,
 		onWindowEvents = {},
 		viewportProps = '',
+		onLoadEnd = () => {},
+		testID,
 	},
 	ref
 ) {
@@ -372,6 +374,8 @@ const Sandbox = forwardRef( function Sandbox(
 			showsHorizontalScrollIndicator={ false }
 			showsVerticalScrollIndicator={ false }
 			mediaPlaybackRequiresUserAction={ false }
+			onLoadEnd={ onLoadEnd }
+			testID={ testID }
 		/>
 	);
 } );

package/src/search-control/style.scss

@@ -41,10 +41,12 @@
 .components-search-control__icon {
 	position: absolute;
 	top: 0;
+	width: $icon-size;
 	right: ( $grid-unit-60 - $icon-size ) * 0.5;
 	bottom: 0;
 	display: flex;
 	align-items: center;
+	justify-content: center;
 
 	> svg {
 		margin: $grid-unit-10 0;

package/src/slot-fill/bubbles-virtually/fill.js

@@ -30,7 +30,8 @@ function useForceUpdate() {
 
 export default function Fill( { name, children } ) {
 	const { registerFill, unregisterFill, ...slot } = useSlot( name );
-	const ref = useRef( { rerender: useForceUpdate() } );
+	const rerender = useForceUpdate();
+	const ref = useRef( { rerender } );
 
 	useEffect( () => {
 		// We register fills so we can keep track of their existence.

package/src/slot-fill/bubbles-virtually/slot-fill-provider.js

@@ -8,7 +8,7 @@ import { proxyMap } from 'valtio/utils';
 /**
  * WordPress dependencies
  */
-import { useMemo, useCallback, useRef } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
@@ -16,13 +16,13 @@ import isShallowEqual from '@wordpress/is-shallow-equal';
  */
 import SlotFillContext from './slot-fill-context';
 
-function useSlotRegistry() {
-	const slots = useRef( proxyMap() );
-	const fills = useRef( proxyMap() );
+function createSlotRegistry() {
+	const slots = proxyMap();
+	const fills = proxyMap();
 
-	const registerSlot = useCallback( ( name, ref, fillProps ) => {
-		const slot = slots.current.get( name ) || {};
-		slots.current.set(
+	function registerSlot( name, ref, fillProps ) {
+		const slot = slots.get( name ) || {};
+		slots.set(
 			name,
 			valRef( {
 				...slot,
@@ -30,77 +30,63 @@ function useSlotRegistry() {
 				fillProps: fillProps || slot.fillProps || {},
 			} )
 		);
-	}, [] );
+	}
 
-	const unregisterSlot = useCallback( ( name, ref ) => {
+	function unregisterSlot( name, ref ) {
 		// Make sure we're not unregistering a slot registered by another element
 		// See https://github.com/WordPress/gutenberg/pull/19242#issuecomment-590295412
-		if ( slots.current.get( name )?.ref === ref ) {
-			slots.current.delete( name );
+		if ( slots.get( name )?.ref === ref ) {
+			slots.delete( name );
 		}
-	}, [] );
+	}
 
-	const updateSlot = useCallback( ( name, fillProps ) => {
-		const slot = slots.current.get( name );
+	function updateSlot( name, fillProps ) {
+		const slot = slots.get( name );
 		if ( ! slot ) {
 			return;
 		}
 
-		if ( ! isShallowEqual( slot.fillProps, fillProps ) ) {
-			slot.fillProps = fillProps;
-			const slotFills = fills.current.get( name );
-			if ( slotFills ) {
-				// Force update fills.
-				slotFills.map( ( fill ) => fill.current.rerender() );
-			}
+		if ( isShallowEqual( slot.fillProps, fillProps ) ) {
+			return;
 		}
-	}, [] );
 
-	const registerFill = useCallback( ( name, ref ) => {
-		fills.current.set(
-			name,
-			valRef( [ ...( fills.current.get( name ) || [] ), ref ] )
-		);
-	}, [] );
+		slot.fillProps = fillProps;
+		const slotFills = fills.get( name );
+		if ( slotFills ) {
+			// Force update fills.
+			slotFills.map( ( fill ) => fill.current.rerender() );
+		}
+	}
+
+	function registerFill( name, ref ) {
+		fills.set( name, valRef( [ ...( fills.get( name ) || [] ), ref ] ) );
+	}
 
-	const unregisterFill = useCallback( ( name, ref ) => {
-		if ( fills.current.get( name ) ) {
-			fills.current.set(
-				name,
-				valRef(
-					fills.current
-						.get( name )
-						.filter( ( fillRef ) => fillRef !== ref )
-				)
-			);
+	function unregisterFill( name, ref ) {
+		const fillsForName = fills.get( name );
+		if ( ! fillsForName ) {
+			return;
 		}
-	}, [] );
 
-	// Memoizing the return value so it can be directly passed to Provider value
-	const registry = useMemo(
-		() => ( {
-			slots: slots.current,
-			fills: fills.current,
-			registerSlot,
-			updateSlot,
-			unregisterSlot,
-			registerFill,
-			unregisterFill,
-		} ),
-		[
-			registerSlot,
-			updateSlot,
-			unregisterSlot,
-			registerFill,
-			unregisterFill,
-		]
-	);
+		fills.set(
+			name,
+			valRef( fillsForName.filter( ( fillRef ) => fillRef !== ref ) )
+		);
+	}
 
-	return registry;
+	return {
+		slots,
+		fills,
+		registerSlot,
+		updateSlot,
+		unregisterSlot,
+		registerFill,
+		unregisterFill,
+	};
 }
 
 export default function SlotFillProvider( { children } ) {
-	const registry = useSlotRegistry();
+	const [ registry ] = useState( createSlotRegistry );
 	return (
 		<SlotFillContext.Provider value={ registry }>
 			{ children }

package/src/slot-fill/bubbles-virtually/use-slot.js

@@ -7,7 +7,7 @@ import { useSnapshot } from 'valtio';
 /**
  * WordPress dependencies
  */
-import { useCallback, useContext } from '@wordpress/element';
+import { useMemo, useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -15,52 +15,25 @@ import { useCallback, useContext } from '@wordpress/element';
 import SlotFillContext from './slot-fill-context';
 
 export default function useSlot( name ) {
-	const {
-		updateSlot: registryUpdateSlot,
-		unregisterSlot: registryUnregisterSlot,
-		registerFill: registryRegisterFill,
-		unregisterFill: registryUnregisterFill,
-		...registry
-	} = useContext( SlotFillContext );
+	const registry = useContext( SlotFillContext );
 	const slots = useSnapshot( registry.slots, { sync: true } );
-	// The important bit here is that this call ensures
-	// the hook only causes a re-render if the slot
-	// with the given name change, not any other slot.
+	// The important bit here is that the `useSnapshot` call ensures that the
+	// hook only causes a re-render if the slot with the given name changes,
+	// not any other slot.
 	const slot = slots.get( name );
 
-	const updateSlot = useCallback(
-		( fillProps ) => {
-			registryUpdateSlot( name, fillProps );
-		},
-		[ name, registryUpdateSlot ]
-	);
-
-	const unregisterSlot = useCallback(
-		( slotRef ) => {
-			registryUnregisterSlot( name, slotRef );
-		},
-		[ name, registryUnregisterSlot ]
-	);
-
-	const registerFill = useCallback(
-		( fillRef ) => {
-			registryRegisterFill( name, fillRef );
-		},
-		[ name, registryRegisterFill ]
-	);
-
-	const unregisterFill = useCallback(
-		( fillRef ) => {
-			registryUnregisterFill( name, fillRef );
-		},
-		[ name, registryUnregisterFill ]
+	const api = useMemo(
+		() => ( {
+			updateSlot: ( fillProps ) => registry.updateSlot( name, fillProps ),
+			unregisterSlot: ( ref ) => registry.unregisterSlot( name, ref ),
+			registerFill: ( ref ) => registry.registerFill( name, ref ),
+			unregisterFill: ( ref ) => registry.unregisterFill( name, ref ),
+		} ),
+		[ name, registry ]
 	);
 
 	return {
 		...slot,
-		updateSlot,
-		unregisterSlot,
-		registerFill,
-		unregisterFill,
+		...api,
 	};
 }

package/src/slot-fill/fill.js

@@ -3,7 +3,7 @@
 /**
  * WordPress dependencies
  */
-import { createPortal, useLayoutEffect, useRef } from '@wordpress/element';
+import { useContext, useLayoutEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -11,7 +11,8 @@ import { createPortal, useLayoutEffect, useRef } from '@wordpress/element';
 import SlotFillContext from './context';
 import useSlot from './use-slot';
 
-function FillComponent( { name, children, registerFill, unregisterFill } ) {
+export default function Fill( { name, children } ) {
+	const { registerFill, unregisterFill } = useContext( SlotFillContext );
 	const slot = useSlot( name );
 
 	const ref = useRef( {
@@ -51,28 +52,5 @@ function FillComponent( { name, children, registerFill, unregisterFill } ) {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ name ] );
 
-	if ( ! slot || ! slot.node ) {
-		return null;
-	}
-
-	// If a function is passed as a child, provide it with the fillProps.
-	if ( typeof children === 'function' ) {
-		children = children( slot.props.fillProps );
-	}
-
-	return createPortal( children, slot.node );
+	return null;
 }
-
-const Fill = ( props ) => (
-	<SlotFillContext.Consumer>
-		{ ( { registerFill, unregisterFill } ) => (
-			<FillComponent
-				{ ...props }
-				registerFill={ registerFill }
-				unregisterFill={ unregisterFill }
-			/>
-		) }
-	</SlotFillContext.Consumer>
-);
-
-export default Fill;

package/src/slot-fill/index.js

@@ -13,7 +13,7 @@ import BubblesVirtuallyFill from './bubbles-virtually/fill';
 import BubblesVirtuallySlot from './bubbles-virtually/slot';
 import BubblesVirtuallySlotFillProvider from './bubbles-virtually/slot-fill-provider';
 import SlotFillProvider from './provider';
-import useSlot from './bubbles-virtually/use-slot';
+export { default as useSlot } from './bubbles-virtually/use-slot';
 export { default as useSlotFills } from './bubbles-virtually/use-slot-fills';
 
 export function Fill( props ) {
@@ -65,5 +65,3 @@ export const createPrivateSlotFill = ( name ) => {
 
 	return { privateKey, ...privateSlotFill };
 };
-
-export { useSlot };

package/src/slot-fill/provider.js

@@ -19,7 +19,6 @@ export default class SlotFillProvider extends Component {
 		this.unregisterFill = this.unregisterFill.bind( this );
 		this.getSlot = this.getSlot.bind( this );
 		this.getFills = this.getFills.bind( this );
-		this.hasFills = this.hasFills.bind( this );
 		this.subscribe = this.subscribe.bind( this );
 
 		this.slots = {};
@@ -32,7 +31,6 @@ export default class SlotFillProvider extends Component {
 			unregisterFill: this.unregisterFill,
 			getSlot: this.getSlot,
 			getFills: this.getFills,
-			hasFills: this.hasFills,
 			subscribe: this.subscribe,
 		};
 	}
@@ -91,10 +89,6 @@ export default class SlotFillProvider extends Component {
 		return this.fills[ name ];
 	}
 
-	hasFills( name ) {
-		return this.fills[ name ] && !! this.fills[ name ].length;
-	}
-
 	forceUpdateSlot( name ) {
 		const slot = this.getSlot( name );
 

package/src/slot-fill/slot.js

@@ -29,7 +29,6 @@ class SlotComponent extends Component {
 		super( ...arguments );
 
 		this.isUnmounted = false;
-		this.bindNode = this.bindNode.bind( this );
 	}
 
 	componentDidMount() {
@@ -53,10 +52,6 @@ class SlotComponent extends Component {
 		}
 	}
 
-	bindNode( node ) {
-		this.node = node;
-	}
-
 	forceUpdate() {
 		if ( this.isUnmounted ) {
 			return;

package/src/snackbar/list.tsx

@@ -73,7 +73,6 @@ export function SnackbarList( {
 
 					return (
 						<motion.div
-							layout={ ! isReducedMotion } // See https://www.framer.com/docs/animation/#layout-animations
 							initial={ 'init' }
 							animate={ 'open' }
 							exit={ 'exit' }

package/src/style.scss

@@ -1,3 +1,9 @@
+// Include the default WP Components color variables.
+// TODO: Remove this once all admin-scheme variables are accounted for in the wp-components fallback values.
+:root {
+	@include admin-scheme(#3858e9);
+}
+
 // Variables
 @import "./utils/theme-variables.scss";
 

package/src/tab-panel/index.tsx

@@ -101,7 +101,7 @@ export function TabPanel( {
 	// to show the `tab-panel` associated with the clicked tab.
 	const activateTabAutomatically = (
 		_childIndex: number,
-		child: HTMLButtonElement
+		child: HTMLElement
 	) => {
 		child.click();
 	};

package/src/theme/color-algorithms.ts

@@ -48,7 +48,7 @@ export function checkContrasts(
 	outputs: ThemeOutputValues[ 'colors' ]
 ) {
 	const background = inputs.background || COLORS.white;
-	const accent = inputs.accent || '#007cba';
+	const accent = inputs.accent || '#3858e9';
 	const foreground = outputs.foreground || COLORS.gray[ 900 ];
 	const gray = outputs.gray || COLORS.gray;
 

package/src/theme/stories/index.tsx

@@ -103,7 +103,7 @@ export const ColorScheme: ComponentStory< typeof Theme > = ( {
 	);
 };
 ColorScheme.args = {
-	accent: '#007cba',
+	accent: '#3858e9',
 	background: '#fff',
 };
 ColorScheme.argTypes = {

package/src/theme/test/color-algorithms.ts

@@ -53,9 +53,9 @@ describe( 'Theme color algorithms', () => {
 				'wp.components.Theme: The background color ("#000") does not have sufficient contrast against the accent color ("#111").'
 			);
 
-			generateThemeVariables( { background: '#eee' } );
+			generateThemeVariables( { background: '#1a1a1a' } );
 			expect( console ).toHaveWarnedWith(
-				'wp.components.Theme: The background color ("#eee") does not have sufficient contrast against the accent color ("#007cba").'
+				'wp.components.Theme: The background color ("#1a1a1a") does not have sufficient contrast against the accent color ("#3858e9").'
 			);
 		} );