@wordpress/components 32.0.1-next.v.0 → 32.1.0

package/src/resizable-box/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies

package/src/responsive-wrapper/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * Internal dependencies

package/src/sandbox/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 
 /**

package/src/scroll-lock/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 import type { ReactNode } from 'react';
 
 /**
@@ -81,7 +81,11 @@ export const Default: StoryFn< typeof ScrollLock > = () => {
 						this &quot;scroll bleed&quot; from happening.
 					</div>
 					<ToggleContainer>
-						<Button variant="primary" onClick={ toggleLock }>
+						<Button
+							__next40pxDefaultSize
+							variant="primary"
+							onClick={ toggleLock }
+						>
 							Toggle Scroll Lock
 						</Button>
 						{ isScrollLocked && <ScrollLock /> }

package/src/scrollable/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies

package/src/search-control/index.tsx

@@ -137,5 +137,6 @@ function UnforwardedSearchControl(
  * ```
  */
 export const SearchControl = forwardRef( UnforwardedSearchControl );
+SearchControl.displayName = 'SearchControl';
 
 export default SearchControl;

package/src/search-control/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies

package/src/select-control/index.tsx

@@ -180,4 +180,7 @@ export const SelectControl = forwardRef( UnforwardedSelectControl ) as <
 	> & { ref?: React.Ref< HTMLSelectElement > }
 ) => React.JSX.Element | null;
 
+// @ts-expect-error TS says: "Property 'displayName' does not exist on type ..."
+SelectControl.displayName = 'SelectControl';
+
 export default SelectControl;

package/src/select-control/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 
 /**
@@ -42,6 +42,7 @@ const SelectControlWithState: StoryFn< typeof SelectControl > = ( props ) => {
 	if ( props.multiple ) {
 		return (
 			<SelectControl
+				__next40pxDefaultSize
 				{ ...props }
 				multiple
 				value={ selection }
@@ -55,6 +56,7 @@ const SelectControlWithState: StoryFn< typeof SelectControl > = ( props ) => {
 
 	return (
 		<SelectControl
+			__next40pxDefaultSize
 			{ ...props }
 			multiple={ false }
 			value={ selection?.[ 0 ] }

package/src/shortcut/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * Internal dependencies

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

@@ -18,7 +18,7 @@ import { useMergeRefs } from '@wordpress/compose';
  * Internal dependencies
  */
 import { View } from '../../view';
-import SlotFillContext from './slot-fill-context';
+import SlotFillContext from '../context';
 import type { WordPressComponentProps } from '../../context';
 import type { SlotComponentProps } from '../types';
 
@@ -40,25 +40,32 @@ function Slot(
 	} = props;
 
 	const registry = useContext( SlotFillContext );
-
+	const instanceRef = useRef( {} );
 	const ref = useRef< HTMLElement >( null );
 
-	// We don't want to unregister and register the slot whenever
-	// `fillProps` change, which would cause the fill to be re-mounted. Instead,
-	// we can just update the slot (see hook below).
-	// For more context, see https://github.com/WordPress/gutenberg/pull/44403#discussion_r994415973
 	const fillPropsRef = useRef( fillProps );
 	useLayoutEffect( () => {
 		fillPropsRef.current = fillProps;
 	}, [ fillProps ] );
 
 	useLayoutEffect( () => {
-		registry.registerSlot( name, ref, fillPropsRef.current );
-		return () => registry.unregisterSlot( name, ref );
+		const instance = instanceRef.current;
+		registry.registerSlot( name, {
+			type: 'portal',
+			instance,
+			ref,
+			fillProps: fillPropsRef.current,
+		} );
+		return () => registry.unregisterSlot( name, instance );
 	}, [ registry, name ] );
 
 	useLayoutEffect( () => {
-		registry.updateSlot( name, ref, fillPropsRef.current );
+		registry.updateSlot( name, {
+			type: 'portal',
+			instance: instanceRef.current,
+			ref,
+			fillProps: fillPropsRef.current,
+		} );
 	} );
 
 	return (

package/src/slot-fill/bubbles-virtually/use-slot-fills.ts

@@ -1,16 +1,42 @@
 /**
  * WordPress dependencies
  */
-import { useContext } from '@wordpress/element';
-import { useObservableValue } from '@wordpress/compose';
+import { useContext, useMemo, useSyncExternalStore } from '@wordpress/element';
+import type { ObservableMap } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import SlotFillContext from './slot-fill-context';
+import SlotFillContext from '../context';
 import type { SlotKey } from '../types';
 
+function useObservableValueWithSelector< K, V, S >(
+	map: ObservableMap< K, V >,
+	name: K,
+	selector: ( v: V | undefined ) => S
+) {
+	const subscribe = useMemo(
+		() => ( listener: () => void ) => map.subscribe( name, listener ),
+		[ map, name ]
+	);
+	const getValue = () => selector( map.get( name ) );
+	return useSyncExternalStore( subscribe, getValue, getValue );
+}
+
+function getLength< T >( array: T[] | undefined ) {
+	return array?.length;
+}
+
 export default function useSlotFills( name: SlotKey ) {
 	const registry = useContext( SlotFillContext );
-	return useObservableValue( registry.fills, name );
+	const length = useObservableValueWithSelector(
+		registry.fills,
+		name,
+		getLength
+	);
+	// callers expect an opaque array with length `length`, so create that array
+	const fills = useMemo( () => {
+		return length !== undefined ? Array.from( { length } ) : undefined;
+	}, [ length ] );
+	return fills;
 }

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

@@ -7,11 +7,15 @@ import { useObservableValue } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import SlotFillContext from './slot-fill-context';
-import type { SlotKey } from '../types';
+import SlotFillContext from '../context';
+import type { SlotKey, SlotRef } from '../types';
 
 export default function useSlot( name: SlotKey ) {
 	const registry = useContext( SlotFillContext );
 	const slot = useObservableValue( registry.slots, name );
-	return { ...slot };
+	let ref: SlotRef | undefined;
+	if ( slot && slot.type === 'portal' ) {
+		ref = slot.ref;
+	}
+	return { ref };
 }

package/src/slot-fill/context.ts

@@ -3,22 +3,33 @@
  */
 import { observableMap } from '@wordpress/compose';
 import { createContext } from '@wordpress/element';
+import warning from '@wordpress/warning';
 
 /**
  * Internal dependencies
  */
-import type { BaseSlotFillContext } from './types';
+import type { SlotFillRegistry } from './types';
 
-const initialValue: BaseSlotFillContext = {
+const initialValue: SlotFillRegistry = {
 	slots: observableMap(),
 	fills: observableMap(),
-	registerSlot: () => {},
+	registerSlot: () => {
+		warning(
+			'Components must be wrapped within `SlotFillProvider`. ' +
+				'See https://developer.wordpress.org/block-editor/components/slot-fill/'
+		);
+	},
 	unregisterSlot: () => {},
+	updateSlot: () => {},
 	registerFill: () => {},
 	unregisterFill: () => {},
 	updateFill: () => {},
+
+	// This helps the provider know if it's using the default context value or not.
+	isDefault: true,
 };
-export const SlotFillContext = createContext( initialValue );
+
+const SlotFillContext = createContext( initialValue );
 SlotFillContext.displayName = 'SlotFillContext';
 
 export default SlotFillContext;

package/src/slot-fill/fill.tsx

@@ -0,0 +1,74 @@
+/**
+ * WordPress dependencies
+ */
+import { useObservableValue } from '@wordpress/compose';
+import {
+	useContext,
+	useLayoutEffect,
+	useRef,
+	createPortal,
+} from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import SlotFillContext from './context';
+import type { FillComponentProps } from './types';
+import StyleProvider from '../style-provider';
+
+export default function Fill( { name, children }: FillComponentProps ) {
+	const registry = useContext( SlotFillContext );
+	const instanceRef = useRef( {} );
+	const childrenRef = useRef( children );
+
+	useLayoutEffect( () => {
+		childrenRef.current = children;
+	}, [ children ] );
+
+	useLayoutEffect( () => {
+		const instance = instanceRef.current;
+		registry.registerFill( name, {
+			instance,
+			children: childrenRef.current,
+		} );
+		return () => registry.unregisterFill( name, instance );
+	}, [ registry, name ] );
+
+	useLayoutEffect( () => {
+		registry.updateFill( name, {
+			instance: instanceRef.current,
+			children: childrenRef.current,
+		} );
+	} );
+
+	const slot = useObservableValue( registry.slots, name );
+
+	if ( ! slot ) {
+		return null;
+	}
+
+	if ( slot.type === 'children' ) {
+		return null;
+	}
+
+	const portalEl = slot.ref.current;
+	if ( ! portalEl ) {
+		return null;
+	}
+
+	const wrappedChildren =
+		typeof children === 'function'
+			? children( slot.fillProps ?? {} )
+			: children;
+
+	// When using a `Fill`, the `children` will be rendered in the document of the
+	// `Slot`. This means that we need to wrap the `children` in a `StyleProvider`
+	// to make sure we're referencing the right document/iframe (instead of the
+	// context of the `Fill`'s parent).
+	return createPortal(
+		<StyleProvider document={ portalEl.ownerDocument }>
+			{ wrappedChildren }
+		</StyleProvider>,
+		portalEl
+	);
+}

package/src/slot-fill/index.tsx

@@ -11,13 +11,11 @@ import { forwardRef, useContext } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import BaseFill from './fill';
+import Fill from './fill';
 import BaseSlot from './slot';
-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 SlotFillContext from './bubbles-virtually/slot-fill-context';
+import SlotFillContext from './context';
 import type { WordPressComponentProps } from '../context';
 
 export { default as useSlot } from './bubbles-virtually/use-slot';
@@ -30,30 +28,22 @@ import type {
 	SlotKey,
 } from './types';
 
-export function Fill( props: FillComponentProps ) {
-	// We're adding both Fills here so they can register themselves before
-	// their respective slot has been registered. Only the Fill that has a slot
-	// will render. The other one will return null.
-	return (
-		<>
-			<BaseFill { ...props } />
-			<BubblesVirtuallyFill { ...props } />
-		</>
-	);
-}
+export { Fill };
 
-export function UnforwardedSlot(
-	props: SlotComponentProps &
-		Omit< WordPressComponentProps< {}, 'div' >, 'className' >,
-	ref: ForwardedRef< any >
-) {
-	const { bubblesVirtually, ...restProps } = props;
-	if ( bubblesVirtually ) {
-		return <BubblesVirtuallySlot { ...restProps } ref={ ref } />;
+export const Slot = forwardRef(
+	(
+		props: SlotComponentProps &
+			Omit< WordPressComponentProps< {}, 'div' >, 'className' >,
+		ref: ForwardedRef< any >
+	) => {
+		const { bubblesVirtually, ...restProps } = props;
+		if ( bubblesVirtually ) {
+			return <BubblesVirtuallySlot { ...restProps } ref={ ref } />;
+		}
+		return <BaseSlot { ...restProps } />;
 	}
-	return <BaseSlot { ...restProps } />;
-}
-export const Slot = forwardRef( UnforwardedSlot );
+);
+Slot.displayName = 'Slot';
 
 export function Provider( {
 	children,
@@ -63,13 +53,7 @@ export function Provider( {
 	if ( ! parent.isDefault && passthrough ) {
 		return <>{ children }</>;
 	}
-	return (
-		<SlotFillProvider>
-			<BubblesVirtuallySlotFillProvider>
-				{ children }
-			</BubblesVirtuallySlotFillProvider>
-		</SlotFillProvider>
-	);
+	return <SlotFillProvider>{ children }</SlotFillProvider>;
 }
 Provider.displayName = 'SlotFillProvider';
 

package/src/slot-fill/provider.tsx

@@ -1,56 +1,73 @@
 /**
  * WordPress dependencies
  */
+import { observableMap } from '@wordpress/compose';
 import { useState } from '@wordpress/element';
+import { isShallowEqual } from '@wordpress/is-shallow-equal';
 
 /**
  * Internal dependencies
  */
 import SlotFillContext from './context';
 import type {
-	FillInstance,
-	FillChildren,
-	BaseSlotInstance,
-	BaseSlotFillContext,
+	SlotRecord,
+	FillRecord,
+	SlotFillInstance,
+	SlotFillRegistry,
 	SlotFillProviderProps,
 	SlotKey,
 } from './types';
-import { observableMap } from '@wordpress/compose';
 
-function createSlotRegistry(): BaseSlotFillContext {
-	const slots = observableMap< SlotKey, BaseSlotInstance >();
-	const fills = observableMap<
-		SlotKey,
-		{ instance: FillInstance; children: FillChildren }[]
-	>();
+function createSlotRegistry(): SlotFillRegistry {
+	const slots = observableMap< SlotKey, SlotRecord >();
+	const fills = observableMap< SlotKey, FillRecord[] >();
 
-	function registerSlot( name: SlotKey, instance: BaseSlotInstance ) {
-		slots.set( name, instance );
+	function registerSlot( name: SlotKey, slot: SlotRecord ) {
+		slots.set( name, slot );
 	}
 
-	function unregisterSlot( name: SlotKey, instance: BaseSlotInstance ) {
+	function unregisterSlot( name: SlotKey, instance: SlotFillInstance ) {
 		// If a previous instance of a Slot by this name unmounts, do nothing,
 		// as the slot and its fills should only be removed for the current
 		// known instance.
-		if ( slots.get( name ) !== instance ) {
+		const currentSlot = slots.get( name );
+		if ( ! currentSlot || currentSlot.instance !== instance ) {
 			return;
 		}
 
 		slots.delete( name );
 	}
 
-	function registerFill(
-		name: SlotKey,
-		instance: FillInstance,
-		children: FillChildren
-	) {
-		fills.set( name, [
-			...( fills.get( name ) || [] ),
-			{ instance, children },
-		] );
+	function updateSlot( name: SlotKey, slot: SlotRecord ) {
+		if ( slot.type !== 'portal' ) {
+			return;
+		}
+
+		const slotForName = slots.get( name );
+		if ( ! slotForName ) {
+			return;
+		}
+
+		if ( slotForName.type !== 'portal' ) {
+			return;
+		}
+
+		if ( slotForName.instance !== slot.instance ) {
+			return;
+		}
+
+		if ( isShallowEqual( slotForName.fillProps, slot.fillProps ) ) {
+			return;
+		}
+
+		slots.set( name, slot );
+	}
+
+	function registerFill( name: SlotKey, fill: FillRecord ) {
+		fills.set( name, [ ...( fills.get( name ) || [] ), fill ] );
 	}
 
-	function unregisterFill( name: SlotKey, instance: FillInstance ) {
+	function unregisterFill( name: SlotKey, instance: SlotFillInstance ) {
 		const fillsForName = fills.get( name );
 		if ( ! fillsForName ) {
 			return;
@@ -62,33 +79,29 @@ function createSlotRegistry(): BaseSlotFillContext {
 		);
 	}
 
-	function updateFill(
-		name: SlotKey,
-		instance: FillInstance,
-		children: FillChildren
-	) {
+	function updateFill( name: SlotKey, fill: FillRecord ) {
 		const fillsForName = fills.get( name );
 		if ( ! fillsForName ) {
 			return;
 		}
 
 		const fillForInstance = fillsForName.find(
-			( f ) => f.instance === instance
+			( f ) => f.instance === fill.instance
 		);
 		if ( ! fillForInstance ) {
 			return;
 		}
 
-		if ( fillForInstance.children === children ) {
+		if ( fillForInstance.children === fill.children ) {
 			return;
 		}
 
 		fills.set(
 			name,
 			fillsForName.map( ( f ) => {
-				if ( f.instance === instance ) {
-					// Replace with new record with updated `children`.
-					return { instance, children };
+				if ( f.instance === fill.instance ) {
+					// Replace with the new fill record with updated `children`.
+					return fill;
 				}
 
 				return f;
@@ -101,6 +114,7 @@ function createSlotRegistry(): BaseSlotFillContext {
 		fills,
 		registerSlot,
 		unregisterSlot,
+		updateSlot,
 		registerFill,
 		unregisterFill,
 		updateFill,

package/src/slot-fill/slot.tsx

@@ -49,14 +49,14 @@ function addKeysToChildren( children: ReactNode ) {
 }
 
 function Slot( props: Omit< SlotComponentProps, 'bubblesVirtually' > ) {
+	const { name, children, fillProps = {} } = props;
+
 	const registry = useContext( SlotFillContext );
 	const instanceRef = useRef( {} );
 
-	const { name, children, fillProps = {} } = props;
-
 	useLayoutEffect( () => {
 		const instance = instanceRef.current;
-		registry.registerSlot( name, instance );
+		registry.registerSlot( name, { type: 'children', instance } );
 		return () => registry.unregisterSlot( name, instance );
 	}, [ registry, name ] );
 
@@ -64,7 +64,7 @@ function Slot( props: Omit< SlotComponentProps, 'bubblesVirtually' > ) {
 	const currentSlot = useObservableValue( registry.slots, name );
 
 	// Fills should only be rendered in the currently registered instance of the slot.
-	if ( currentSlot !== instanceRef.current ) {
+	if ( ! currentSlot || currentSlot.instance !== instanceRef.current ) {
 		fills = [];
 	}
 

package/src/slot-fill/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies

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

@@ -86,6 +86,20 @@ exports[`Slot bubblesVirtually true should unmount two slots with the same name
 </div>
 `;
 
+exports[`Slot should not infinite loop with useSlotFills 1`] = `
+<div>
+  <div>
+    <div>
+      fills:
+      1
+    </div>
+    <div>
+      fill content
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Slot should re-render Slot when not bubbling virtually 1`] = `
 <div>
   <div>

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

@@ -7,7 +7,7 @@ import userEvent from '@testing-library/user-event';
 /**
  * Internal dependencies
  */
-import { Slot, Fill, Provider } from '../';
+import { Slot, Fill, Provider, useSlotFills } from '../';
 
 /**
  * WordPress dependencies
@@ -381,4 +381,27 @@ describe( 'Slot', () => {
 			} );
 		}
 	);
+
+	it( 'should not infinite loop with useSlotFills', () => {
+		function App() {
+			// if `useSlotFills` triggers a state update every time the `Fill` is rerendered with
+			// new `children`, it will cause infinite rerender loop. This test checks we don't do that.
+			const fills = useSlotFills( 'editor' );
+			return (
+				<div>
+					<div>fills:{ fills?.length ?? 'none' }</div>
+					<Slot name="editor" />
+					<Fill name="editor">
+						<div>fill content</div>
+					</Fill>
+				</div>
+			);
+		}
+		const { container } = render(
+			<Provider>
+				<App />
+			</Provider>
+		);
+		expect( container ).toMatchSnapshot();
+	} );
 } );