@wordpress/components 23.8.0 → 24.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/popover/index.tsx

@@ -109,10 +109,6 @@ const AnimatedWrapper = forwardRef(
 		}: HTMLMotionProps< 'div' > & AnimatedWrapperProps,
 		forwardedRef: ForwardedRef< any >
 	) => {
-		// When animating, animate only once (i.e. when the popover is opened), and
-		// do not animate on subsequent prop changes (as it conflicts with
-		// floating-ui's positioning updates).
-		const [ hasAnimatedOnce, setHasAnimatedOnce ] = useState( false );
 		const shouldReduceMotion = useReducedMotion();
 
 		const { style: motionInlineStyles, ...otherMotionProps } = useMemo(
@@ -120,11 +116,6 @@ const AnimatedWrapper = forwardRef(
 			[ placement ]
 		);
 
-		const onAnimationComplete = useCallback(
-			() => setHasAnimatedOnce( true ),
-			[]
-		);
-
 		const computedAnimationProps: HTMLMotionProps< 'div' > =
 			shouldAnimate && ! shouldReduceMotion
 				? {
@@ -133,10 +124,6 @@ const AnimatedWrapper = forwardRef(
 							...receivedInlineStyles,
 						},
 						...otherMotionProps,
-						onAnimationComplete,
-						animate: hasAnimatedOnce
-							? false
-							: otherMotionProps.animate,
 				  }
 				: {
 						animate: false,
@@ -160,8 +147,8 @@ const UnforwardedPopover = (
 		WordPressComponentProps< PopoverProps, 'div', false >,
 		// To avoid overlaps between the standard HTML attributes and the props
 		// expected by `framer-motion`, omit all framer motion props from popover
-		// props (except for `animate`, which is re-defined in `PopoverProps`).
-		keyof Omit< MotionProps, 'animate' >
+		// props (except for `animate` and `children`, which are re-defined in `PopoverProps`).
+		keyof Omit< MotionProps, 'animate' | 'children' >
 	>,
 	forwardedRef: ForwardedRef< any >
 ) => {

package/src/private-apis.ts

@@ -8,6 +8,7 @@ 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';
 
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
@@ -19,4 +20,5 @@ export const privateApis = {};
 lock( privateApis, {
 	CustomSelectControl,
 	__experimentalPopoverLegacyPositionToPlacement,
+	createPrivateSlotFill,
 } );

package/src/sandbox/index.native.js

@@ -185,6 +185,9 @@ const Sandbox = forwardRef( function Sandbox(
 		type,
 		url,
 		onWindowEvents = {},
+		viewportProps = '',
+		onLoadEnd = () => {},
+		testID,
 	},
 	ref
 ) {
@@ -213,13 +216,19 @@ const Sandbox = forwardRef( function Sandbox(
 		// we can use this in the future to inject custom styles or scripts.
 		// Scripts go into the body rather than the head, to support embedded content such as Instagram
 		// that expect the scripts to be part of the body.
+
+		// Avoid comma issues with props.viewportProps.
+		const addViewportProps = viewportProps
+			.trim()
+			.replace( /(^[^,])/, ', $1' );
+
 		const htmlDoc = (
 			<html lang={ lang }>
 				<head>
 					<title>{ title }</title>
 					<meta
 						name="viewport"
-						content="width=device-width, initial-scale=1"
+						content={ `width=device-width, initial-scale=1${ addViewportProps }` }
 					></meta>
 					<style dangerouslySetInnerHTML={ { __html: style } } />
 					{ styles.map( ( rules, i ) => (
@@ -365,6 +374,8 @@ const Sandbox = forwardRef( function Sandbox(
 			showsHorizontalScrollIndicator={ false }
 			showsVerticalScrollIndicator={ false }
 			mediaPlaybackRequiresUserAction={ false }
+			onLoadEnd={ onLoadEnd }
+			testID={ testID }
 		/>
 	);
 } );

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 ) {
@@ -44,13 +44,14 @@ export function Provider( { children, ...props } ) {
 	);
 }
 
-export function createSlotFill( name ) {
-	const FillComponent = ( props ) => <Fill name={ name } { ...props } />;
-	FillComponent.displayName = name + 'Fill';
+export function createSlotFill( key ) {
+	const baseName = typeof key === 'symbol' ? key.description : key;
+	const FillComponent = ( props ) => <Fill name={ key } { ...props } />;
+	FillComponent.displayName = `${ baseName }Fill`;
 
-	const SlotComponent = ( props ) => <Slot name={ name } { ...props } />;
-	SlotComponent.displayName = name + 'Slot';
-	SlotComponent.__unstableName = name;
+	const SlotComponent = ( props ) => <Slot name={ key } { ...props } />;
+	SlotComponent.displayName = `${ baseName }Slot`;
+	SlotComponent.__unstableName = key;
 
 	return {
 		Fill: FillComponent,
@@ -58,4 +59,9 @@ export function createSlotFill( name ) {
 	};
 }
 
-export { useSlot };
+export const createPrivateSlotFill = ( name ) => {
+	const privateKey = Symbol( name );
+	const privateSlotFill = createSlotFill( privateKey );
+
+	return { privateKey, ...privateSlotFill };
+};

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/style.scss

@@ -64,7 +64,8 @@
 		}
 
 		&:hover {
-			color: $components-color-accent;
+			text-decoration: none;
+			color: $white;
 		}
 	}
 }

package/src/spinner/styles.ts

@@ -26,6 +26,8 @@ export const StyledSpinner = styled.svg`
 	position: relative;
 	color: ${ COLORS.ui.theme };
 	overflow: visible;
+	opacity: 1;
+	background-color: transparent;
 `;
 
 const commonPathProps = css`

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";