@wordpress/components 32.0.1-next.ba3aee3a2.0 → 32.0.2-next.v.0

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();
+	} );
 } );

package/src/slot-fill/types.ts

@@ -112,42 +112,26 @@ export type SlotFillProviderProps = {
 	passthrough?: boolean;
 };
 
+export type SlotFillInstance = {};
 export type SlotRef = RefObject< HTMLElement >;
-export type FillInstance = {};
-export type BaseSlotInstance = {};
-
-export type SlotFillBubblesVirtuallyContext = {
-	slots: ObservableMap< SlotKey, { ref: SlotRef; fillProps: FillProps } >;
-	fills: ObservableMap< SlotKey, FillInstance[] >;
-	registerSlot: ( name: SlotKey, ref: SlotRef, fillProps: FillProps ) => void;
-	unregisterSlot: ( name: SlotKey, ref: SlotRef ) => void;
-	updateSlot: ( name: SlotKey, ref: SlotRef, fillProps: FillProps ) => void;
-	registerFill: ( name: SlotKey, instance: FillInstance ) => void;
-	unregisterFill: ( name: SlotKey, instance: FillInstance ) => void;
+export type SlotRecord = { instance: SlotFillInstance } & (
+	| { type: 'children' }
+	| { type: 'portal'; ref: SlotRef; fillProps: FillProps }
+);
+export type FillRecord = { instance: SlotFillInstance; children: FillChildren };
+
+export type SlotFillRegistry = {
+	slots: ObservableMap< SlotKey, SlotRecord >;
+	fills: ObservableMap< SlotKey, FillRecord[] >;
+	registerSlot: ( name: SlotKey, slot: SlotRecord ) => void;
+	unregisterSlot: ( name: SlotKey, instance: SlotFillInstance ) => void;
+	updateSlot: ( name: SlotKey, slot: SlotRecord ) => void;
+	registerFill: ( name: SlotKey, fill: FillRecord ) => void;
+	unregisterFill: ( name: SlotKey, instance: SlotFillInstance ) => void;
+	updateFill: ( name: SlotKey, fill: FillRecord ) => void;
 
 	/**
 	 * This helps the provider know if it's using the default context value or not.
 	 */
 	isDefault?: boolean;
 };
-
-export type BaseSlotFillContext = {
-	slots: ObservableMap< SlotKey, BaseSlotInstance >;
-	fills: ObservableMap<
-		SlotKey,
-		{ instance: FillInstance; children: FillChildren }[]
-	>;
-	registerSlot: ( name: SlotKey, slot: BaseSlotInstance ) => void;
-	unregisterSlot: ( name: SlotKey, slot: BaseSlotInstance ) => void;
-	registerFill: (
-		name: SlotKey,
-		instance: FillInstance,
-		children: FillChildren
-	) => void;
-	unregisterFill: ( name: SlotKey, instance: FillInstance ) => void;
-	updateFill: (
-		name: SlotKey,
-		instance: FillInstance,
-		children: FillChildren
-	) => void;
-};

package/src/snackbar/index.tsx

@@ -206,5 +206,6 @@ function UnforwardedSnackbar(
  * ```
  */
 export const Snackbar = forwardRef( UnforwardedSnackbar );
+Snackbar.displayName = 'Snackbar';
 
 export default Snackbar;

package/src/snackbar/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/snackbar/stories/list.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/spacer/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/spinner/index.tsx

@@ -59,4 +59,5 @@ export function UnforwardedSpinner(
  * ```
  */
 export const Spinner = forwardRef( UnforwardedSpinner );
+Spinner.displayName = 'Spinner';
 export default Spinner;

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

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

package/src/surface/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/tab-panel/index.tsx

@@ -246,4 +246,5 @@ const UnforwardedTabPanel = (
 };
 
 export const TabPanel = forwardRef( UnforwardedTabPanel );
+TabPanel.displayName = 'TabPanel';
 export default TabPanel;

package/src/tab-panel/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/tabs/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';
 
 /**
@@ -65,7 +65,9 @@ const Template: StoryFn< typeof Tabs > = ( props ) => {
 					Instead, the [Tab] key will move focus to the first
 					focusable element within the panel.
 				</p>
-				<Button variant="primary">I&apos;m a button!</Button>
+				<Button __next40pxDefaultSize variant="primary">
+					I&apos;m a button!
+				</Button>
 			</Tabs.TabPanel>
 		</Tabs>
 	);
@@ -118,6 +120,7 @@ export const SizeAndOverflowPlayground: StoryFn< typeof Tabs > = ( props ) => {
 				</ul>
 			</div>
 			<Button
+				__next40pxDefaultSize
 				style={ { marginBottom: '1rem' } }
 				variant="primary"
 				onClick={ () => setFullWidth( ! fullWidth ) }
@@ -332,6 +335,7 @@ const CloseButtonTemplate: StoryFn< typeof Tabs > = ( props ) => {
 								<Tabs.Tab tabId="tab3">Tab 3</Tabs.Tab>
 							</Tabs.TabList>
 							<Button
+								__next40pxDefaultSize
 								variant="tertiary"
 								style={ {
 									marginLeft: 'auto',
@@ -354,7 +358,11 @@ const CloseButtonTemplate: StoryFn< typeof Tabs > = ( props ) => {
 					</Tabs>
 				</div>
 			) : (
-				<Button variant="tertiary" onClick={ () => setIsOpen( true ) }>
+				<Button
+					__next40pxDefaultSize
+					variant="tertiary"
+					onClick={ () => setIsOpen( true ) }
+				>
 					Open Tabs
 				</Button>
 			) }

package/src/text/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/text-control/index.tsx

@@ -92,5 +92,6 @@ function UnforwardedTextControl(
  * ```
  */
 export const TextControl = forwardRef( UnforwardedTextControl );
+TextControl.displayName = 'TextControl';
 
 export default TextControl;

package/src/text-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
@@ -40,6 +40,7 @@ const DefaultTemplate: StoryFn< typeof TextControl > = ( {
 
 	return (
 		<TextControl
+			__next40pxDefaultSize
 			{ ...args }
 			value={ value }
 			onChange={ ( v ) => {

package/src/text-highlight/index.tsx

@@ -42,4 +42,6 @@ export const TextHighlight = ( props: TextHighlightProps ) => {
 	} );
 };
 
+TextHighlight.displayName = 'TextHighlight';
+
 export default TextHighlight;

package/src/text-highlight/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/textarea-control/index.tsx

@@ -86,5 +86,6 @@ function UnforwardedTextareaControl(
  * ```
  */
 export const TextareaControl = forwardRef( UnforwardedTextareaControl );
+TextareaControl.displayName = 'TextareaControl';
 
 export default TextareaControl;

package/src/textarea-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/theme/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
@@ -29,7 +29,9 @@ export default meta;
 
 const Template: StoryFn< typeof Theme > = ( args ) => (
 	<Theme { ...args }>
-		<Button variant="primary">Hello</Button>
+		<Button __next40pxDefaultSize variant="primary">
+			Hello
+		</Button>
 	</Theme>
 );
 
@@ -38,10 +40,12 @@ Default.args = {};
 
 export const Nested: StoryFn< typeof Theme > = ( args ) => (
 	<Theme accent="crimson">
-		<Button variant="primary">Outer theme (hardcoded)</Button>
+		<Button __next40pxDefaultSize variant="primary">
+			Outer theme (hardcoded)
+		</Button>
 
 		<Theme { ...args }>
-			<Button variant="primary">
+			<Button __next40pxDefaultSize variant="primary">
 				Inner theme (set via Storybook controls)
 			</Button>
 		</Theme>

package/src/tip/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/toggle-control/index.tsx

@@ -110,5 +110,6 @@ function UnforwardedToggleControl(
  * ```
  */
 export const ToggleControl = forwardRef( UnforwardedToggleControl );
+ToggleControl.displayName = 'ToggleControl';
 
 export default ToggleControl;

package/src/toggle-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/toggle-group-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/toggle-group-control/toggle-group-control/as-button-group.tsx

@@ -93,3 +93,4 @@ function UnforwardedToggleGroupControlAsButtonGroup(
 export const ToggleGroupControlAsButtonGroup = forwardRef(
 	UnforwardedToggleGroupControlAsButtonGroup
 );
+ToggleGroupControlAsButtonGroup.displayName = 'ToggleGroupControlAsButtonGroup';

package/src/toggle-group-control/toggle-group-control/as-radio-group.tsx

@@ -122,3 +122,4 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 export const ToggleGroupControlAsRadioGroup = forwardRef(
 	UnforwardedToggleGroupControlAsRadioGroup
 );
+ToggleGroupControlAsRadioGroup.displayName = 'ToggleGroupControlAsRadioGroup';

package/src/toggle-group-control/toggle-group-control-option/component.tsx

@@ -64,5 +64,6 @@ function UnforwardedToggleGroupControlOption(
 export const ToggleGroupControlOption = forwardRef(
 	UnforwardedToggleGroupControlOption
 );
+ToggleGroupControlOption.displayName = 'ToggleGroupControlOption';
 
 export default ToggleGroupControlOption;

package/src/toggle-group-control/toggle-group-control-option-icon/component.tsx

@@ -71,5 +71,6 @@ function UnforwardedToggleGroupControlOptionIcon(
 export const ToggleGroupControlOptionIcon = forwardRef(
 	UnforwardedToggleGroupControlOptionIcon
 );
+ToggleGroupControlOptionIcon.displayName = 'ToggleGroupControlOptionIcon';
 
 export default ToggleGroupControlOptionIcon;

package/src/toolbar/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/toolbar/toolbar/index.tsx

@@ -102,4 +102,5 @@ function UnforwardedToolbar(
  * ```
  */
 export const Toolbar = forwardRef( UnforwardedToolbar );
+Toolbar.displayName = 'Toolbar';
 export default Toolbar;

package/src/toolbar/toolbar/toolbar-container.tsx

@@ -40,4 +40,5 @@ function UnforwardedToolbarContainer(
 }
 
 export const ToolbarContainer = forwardRef( UnforwardedToolbarContainer );
+ToolbarContainer.displayName = 'ToolbarContainer';
 export default ToolbarContainer;

package/src/toolbar/toolbar-button/index.tsx

@@ -132,4 +132,5 @@ function UnforwardedToolbarButton(
  * ```
  */
 export const ToolbarButton = forwardRef( UnforwardedToolbarButton );
+ToolbarButton.displayName = 'ToolbarButton';
 export default ToolbarButton;

package/src/toolbar/toolbar-dropdown-menu/index.tsx

@@ -45,4 +45,5 @@ function UnforwardedToolbarDropdownMenu(
 }
 
 export const ToolbarDropdownMenu = forwardRef( UnforwardedToolbarDropdownMenu );
+ToolbarDropdownMenu.displayName = 'ToolbarDropdownMenu';
 export default ToolbarDropdownMenu;

package/src/toolbar/toolbar-item/index.tsx

@@ -58,4 +58,5 @@ function UnforwardedToolbarItem(
 }
 
 export const ToolbarItem = forwardRef( UnforwardedToolbarItem );
+ToolbarItem.displayName = 'ToolbarItem';
 export default ToolbarItem;