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

package/src/progress-bar/index.tsx

@@ -60,5 +60,6 @@ function UnforwardedProgressBar(
  * ```
  */
 export const ProgressBar = forwardRef( UnforwardedProgressBar );
+ProgressBar.displayName = 'ProgressBar';
 
 export default ProgressBar;

package/src/progress-bar/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/query-controls/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/radio-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/radio-group/index.tsx

@@ -74,4 +74,5 @@ function UnforwardedRadioGroup(
  * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.
  */
 export const RadioGroup = forwardRef( UnforwardedRadioGroup );
+RadioGroup.displayName = 'RadioGroup';
 export default RadioGroup;

package/src/radio-group/radio.tsx

@@ -43,6 +43,8 @@ function UnforwardedRadio(
 			ref={ ref }
 			value={ value }
 			render={
+				// Disable: the parent component already takes care of the `__next40pxDefaultSize` prop.
+				// eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop
 				<Button
 					variant={ isChecked ? 'primary' : 'secondary' }
 					{ ...props }
@@ -58,4 +60,5 @@ function UnforwardedRadio(
  * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.
  */
 export const Radio = forwardRef( UnforwardedRadio );
+Radio.displayName = 'Radio';
 export default Radio;

package/src/radio-group/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/range-control/index.tsx

@@ -405,5 +405,6 @@ function UnforwardedRangeControl(
  * ```
  */
 export const RangeControl = forwardRef( UnforwardedRangeControl );
+RangeControl.displayName = 'RangeControl';
 
 export default RangeControl;

package/src/range-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';
 
 /**
@@ -66,6 +66,7 @@ const Template: StoryFn< typeof RangeControl > = ( { onChange, ...args } ) => {
 
 	return (
 		<RangeControl
+			__next40pxDefaultSize
 			{ ...args }
 			value={ value }
 			onChange={ ( v ) => {
@@ -100,6 +101,7 @@ export const WithAnyStep: StoryFn< typeof RangeControl > = ( {
 	return (
 		<>
 			<RangeControl
+				__next40pxDefaultSize
 				{ ...args }
 				value={ value }
 				onChange={ ( v ) => {
@@ -130,6 +132,7 @@ const MarkTemplate: StoryFn< typeof RangeControl > = ( {
 		<>
 			<h2>{ label }</h2>
 			<RangeControl
+				__next40pxDefaultSize
 				{ ...args }
 				label="Automatic marks"
 				marks
@@ -140,6 +143,7 @@ const MarkTemplate: StoryFn< typeof RangeControl > = ( {
 				value={ automaticValue }
 			/>
 			<RangeControl
+				__next40pxDefaultSize
 				{ ...args }
 				label="Custom marks"
 				onChange={ ( v ) => {

package/src/resizable-box/index.tsx

@@ -134,5 +134,6 @@ function UnforwardedResizableBox(
 }
 
 export const ResizableBox = forwardRef( UnforwardedResizableBox );
+ResizableBox.displayName = 'ResizableBox';
 
 export default ResizableBox;

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