@wordpress/components 28.12.0 → 28.13.0

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

@@ -18,7 +18,8 @@ const ICONS = { starEmpty, starFilled, styles, wordpress };
 
 const meta: Meta< typeof RangeControl > = {
 	component: RangeControl,
-	title: 'Components/RangeControl',
+	title: 'Components/Selection & Input/Common/RangeControl',
+	id: 'components-rangecontrol',
 	argTypes: {
 		afterIcon: {
 			control: { type: 'select' },
@@ -71,6 +72,7 @@ const Template: StoryFn< typeof RangeControl > = ( { onChange, ...args } ) => {
 export const Default: StoryFn< typeof RangeControl > = Template.bind( {} );
 Default.args = {
 	__nextHasNoMarginBottom: true,
+	__next40pxDefaultSize: true,
 	help: 'Please select how transparent you would like this.',
 	initialPosition: 50,
 	label: 'Opacity',
@@ -106,6 +108,7 @@ export const WithAnyStep: StoryFn< typeof RangeControl > = ( {
 };
 WithAnyStep.args = {
 	__nextHasNoMarginBottom: true,
+	__next40pxDefaultSize: true,
 	label: 'Brightness',
 	step: 'any',
 };
@@ -170,6 +173,7 @@ export const WithIntegerStepAndMarks: StoryFn< typeof RangeControl > =
 
 WithIntegerStepAndMarks.args = {
 	__nextHasNoMarginBottom: true,
+	__next40pxDefaultSize: true,
 	label: 'Integer Step',
 	marks: marksBase,
 	max: 10,
@@ -187,6 +191,7 @@ export const WithDecimalStepAndMarks: StoryFn< typeof RangeControl > =
 
 WithDecimalStepAndMarks.args = {
 	__nextHasNoMarginBottom: true,
+	__next40pxDefaultSize: true,
 	marks: [
 		...marksBase,
 		{ value: 3.5, label: '3.5' },
@@ -207,6 +212,7 @@ export const WithNegativeMinimumAndMarks: StoryFn< typeof RangeControl > =
 
 WithNegativeMinimumAndMarks.args = {
 	__nextHasNoMarginBottom: true,
+	__next40pxDefaultSize: true,
 	marks: marksWithNegatives,
 	max: 10,
 	min: -10,
@@ -223,6 +229,7 @@ export const WithNegativeRangeAndMarks: StoryFn< typeof RangeControl > =
 
 WithNegativeRangeAndMarks.args = {
 	__nextHasNoMarginBottom: true,
+	__next40pxDefaultSize: true,
 	marks: marksWithNegatives,
 	max: -1,
 	min: -10,
@@ -239,6 +246,7 @@ export const WithAnyStepAndMarks: StoryFn< typeof RangeControl > =
 
 WithAnyStepAndMarks.args = {
 	__nextHasNoMarginBottom: true,
+	__next40pxDefaultSize: true,
 	marks: marksBase,
 	max: 10,
 	min: 0,

package/src/range-control/test/index.tsx

@@ -18,7 +18,13 @@ const fireChangeEvent = ( input: HTMLInputElement, value?: number | string ) =>
 const RangeControl = (
 	props: React.ComponentProps< typeof _RangeControl >
 ) => {
-	return <_RangeControl { ...props } __nextHasNoMarginBottom />;
+	return (
+		<_RangeControl
+			{ ...props }
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+		/>
+	);
 };
 
 describe( 'RangeControl', () => {

package/src/range-control/types.ts

@@ -233,6 +233,13 @@ export type RangeControlProps = Pick<
 		 * @default true
 		 */
 		withInputField?: boolean;
+		/**
+		 * Do not throw a warning for the deprecated 36px default size.
+		 * For internal components of other components that already throw the warning.
+		 *
+		 * @ignore
+		 */
+		__shouldNotWarnDeprecated36pxSize?: boolean;
 	};
 
 export type RailProps = MarksProps & {

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

@@ -10,7 +10,8 @@ import ResponsiveWrapper from '..';
 
 const meta: Meta< typeof ResponsiveWrapper > = {
 	component: ResponsiveWrapper,
-	title: 'Components/ResponsiveWrapper',
+	title: 'Components/Layout/ResponsiveWrapper',
+	id: 'components-responsivewrapper',
 	argTypes: {
 		children: { control: { type: null } },
 	},

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

@@ -14,7 +14,8 @@ import { useState } from '@wordpress/element';
 import SearchControl from '..';
 
 const meta: Meta< typeof SearchControl > = {
-	title: 'Components/SearchControl',
+	title: 'Components/Selection & Input/Common/SearchControl',
+	id: 'components-searchcontrol',
 	component: SearchControl,
 	argTypes: {
 		onChange: { action: 'onChange' },

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

@@ -15,7 +15,8 @@ import SelectControl from '../';
 import { InputControlPrefixWrapper } from '../../input-control/input-prefix-wrapper';
 
 const meta: Meta< typeof SelectControl > = {
-	title: 'Components/SelectControl',
+	title: 'Components/Selection & Input/Common/SelectControl',
+	id: 'components-selectcontrol',
 	component: SelectControl,
 	argTypes: {
 		help: { control: { type: 'text' } },

package/src/slot-fill/README.md

@@ -1,18 +1,18 @@
-# Slot Fill
+# Slot/Fill
 
-Slot and Fill are a pair of components which enable developers to render elsewhere in a React element tree, a pattern often referred to as "portal" rendering. It is a pattern for component extensibility, where a single Slot may be occupied by an indeterminate number of Fills elsewhere in the application.
+`Slot` and `Fill` are a pair of components which enable developers to render React UI elsewhere in a React element tree, a pattern often referred to as "portal" rendering. It is a pattern for component extensibility, where a single `Slot` may be occupied by multiple `Fill`s rendered in different parts of the application.
 
-Slot Fill is heavily inspired by the [`react-slot-fill` library](https://github.com/camwest/react-slot-fill), but uses React's own portal rendering API.
+Slot/Fill was originally inspired by the [`react-slot-fill` library](https://github.com/camwest/react-slot-fill).
 
 ## Usage
 
-At the root of your application, you must render a `SlotFillProvider` which coordinates Slot and Fill rendering.
+At the root of your application, you must render a `SlotFillProvider` which coordinates `Slot` and `Fill` rendering.
 
-Then, render a Slot component anywhere in your application, giving it a name.
+Then, render a `Slot` component anywhere in your application, giving it a `name`. The `name` is either a `string` or a symbol. Symbol names are useful for slots that are supposed to be private, accessible only to clients that have access to the symbol value.
 
-Any Fill will automatically occupy this Slot space, even if rendered elsewhere in the application.
+Any `Fill` will render its UI in this `Slot` space, even if rendered elsewhere in the application.
 
-You can either use the Fill component directly, or a wrapper component type as in the below example to abstract the slot name from consumer awareness.
+You can either use the `Fill` component directly, or create a wrapper component (as in the following example) to hide the slot name from the consumer.
 
 ```jsx
 import {
@@ -43,7 +43,7 @@ const MySlotFillProvider = () => {
 };
 ```
 
-There is also `createSlotFill` helper method which was created to simplify the process of matching the corresponding `Slot` and `Fill` components:
+There is also the `createSlotFill` helper method which was created to simplify the process of matching the corresponding `Slot` and `Fill` components:
 
 ```jsx
 const { Fill, Slot } = createSlotFill( 'Toolbar' );
@@ -59,18 +59,27 @@ const Toolbar = () => (
 
 ## Props
 
-The `SlotFillProvider` component does not accept any props.
+The `SlotFillProvider` component does not accept any props (except `children`).
 
 Both `Slot` and `Fill` accept a `name` string prop, where a `Slot` with a given `name` will render the `children` of any associated `Fill`s.
 
-`Slot` accepts a `bubblesVirtually` prop which changes the event bubbling behaviour:
+`Slot` accepts a `bubblesVirtually` prop which changes the method how the `Fill` children are rendered. With `bubblesVirtually`, the `Fill` is rendered using a React portal. That affects the event bubbling and React context propagation behaviour:
 
--   By default, events will bubble to their parents on the DOM hierarchy (native event bubbling)
--   If `bubblesVirtually` is set to true, events will bubble to their virtual parent in the React elements hierarchy instead.
+### `bubblesVirtually=false`
 
-`Slot` with `bubblesVirtually` set to true also accept optional `className` and `style` props to add to the slot container.
+-   events will bubble to their parents on the DOM hierarchy (native event bubbling)
+-   the React elements inside the `Fill` will be rendered with React context of the `Slot`
+-   renders the `Fill` elements directly, inside a `Fragment`, with no wrapper DOM element
 
-`Slot` **without** `bubblesVirtually` accepts an optional `children` function prop, which takes `fills` as a param. It allows you to perform additional processing and wrap `fills` conditionally.
+### `bubblesVirtually=true`
+
+-   events will bubble to their virtual (React) parent in the React elements hierarchy
+-   the React elements inside the `Fill` will keep the React context of the `Fill` and its parents
+-   renders a wrapper DOM element inside which the `Fill` elements are rendered (used as an argument for React `createPortal`)
+
+`Slot` with `bubblesVirtually=true` renders a wrapper DOM element (a `div` by default) and accepts additional props that customize this element, like `className` or `style`. You can also replace the `div` with another element by passing an `as` prop.
+
+`Slot` **without** `bubblesVirtually` accepts an optional `children` prop, which is a function that receives `fills` array as a param. It allows you to perform additional processing: render a placeholder when there are no fills, or render a wrapper only when there are fills.
 
 _Example_:
 
@@ -90,7 +99,9 @@ const Toolbar = ( { isMobile } ) => (
 );
 ```
 
-Props can also be passed from a `Slot` to a `Fill` by using the prop `fillProps` on the `Slot`:
+Additional information (props) can also be passed from a `Slot` to a `Fill` by a combination of:
+1. Adding a `fillProps` prop to the `Slot`.
+2. Passing a function as `children` to the `Fill`. This function will receive the `fillProps` as an argument.
 
 ```jsx
 const { Fill, Slot } = createSlotFill( 'Toolbar' );

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

@@ -1,50 +1,40 @@
 /**
  * WordPress dependencies
  */
-import { useRef, useState, useEffect, createPortal } from '@wordpress/element';
+import { useObservableValue } from '@wordpress/compose';
+import {
+	useContext,
+	useReducer,
+	useRef,
+	useEffect,
+	createPortal,
+} from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import useSlot from './use-slot';
+import SlotFillContext from './slot-fill-context';
 import StyleProvider from '../../style-provider';
 import type { FillComponentProps } from '../types';
 
-function useForceUpdate() {
-	const [ , setState ] = useState( {} );
-	const mountedRef = useRef( true );
-
-	useEffect( () => {
-		mountedRef.current = true;
-		return () => {
-			mountedRef.current = false;
-		};
-	}, [] );
-
-	return () => {
-		if ( mountedRef.current ) {
-			setState( {} );
-		}
-	};
-}
-
-export default function Fill( props: FillComponentProps ) {
-	const { name, children } = props;
-	const { registerFill, unregisterFill, ...slot } = useSlot( name );
-	const rerender = useForceUpdate();
+export default function Fill( { name, children }: FillComponentProps ) {
+	const registry = useContext( SlotFillContext );
+	const slot = useObservableValue( registry.slots, name );
+	const [ , rerender ] = useReducer( () => [], [] );
 	const ref = useRef( { rerender } );
 
 	useEffect( () => {
 		// We register fills so we can keep track of their existence.
 		// Some Slot implementations need to know if there're already fills
 		// registered so they can choose to render themselves or not.
-		registerFill( ref );
+		const refValue = ref.current;
+		registry.registerFill( name, refValue );
 		return () => {
-			unregisterFill( ref );
+			registry.unregisterFill( name, refValue );
 		};
-	}, [ registerFill, unregisterFill ] );
+	}, [ registry, name ] );
 
-	if ( ! slot.ref || ! slot.ref.current ) {
+	if ( ! slot || ! slot.ref.current ) {
 		return null;
 	}
 

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

@@ -34,15 +34,23 @@ function createSlotRegistry(): SlotFillBubblesVirtuallyContext {
 
 	const unregisterSlot: SlotFillBubblesVirtuallyContext[ 'unregisterSlot' ] =
 		( name, ref ) => {
+			const slot = slots.get( name );
+			if ( ! slot ) {
+				return;
+			}
+
 			// Make sure we're not unregistering a slot registered by another element
 			// See https://github.com/WordPress/gutenberg/pull/19242#issuecomment-590295412
-			if ( slots.get( name )?.ref === ref ) {
-				slots.delete( name );
+			if ( slot.ref !== ref ) {
+				return;
 			}
+
+			slots.delete( name );
 		};
 
 	const updateSlot: SlotFillBubblesVirtuallyContext[ 'updateSlot' ] = (
 		name,
+		ref,
 		fillProps
 	) => {
 		const slot = slots.get( name );
@@ -50,6 +58,10 @@ function createSlotRegistry(): SlotFillBubblesVirtuallyContext {
 			return;
 		}
 
+		if ( slot.ref !== ref ) {
+			return;
+		}
+
 		if ( isShallowEqual( slot.fillProps, fillProps ) ) {
 			return;
 		}
@@ -58,7 +70,7 @@ function createSlotRegistry(): SlotFillBubblesVirtuallyContext {
 		const slotFills = fills.get( name );
 		if ( slotFills ) {
 			// Force update fills.
-			slotFills.forEach( ( fill ) => fill.current.rerender() );
+			slotFills.forEach( ( fill ) => fill.rerender() );
 		}
 	};
 
@@ -69,20 +81,18 @@ function createSlotRegistry(): SlotFillBubblesVirtuallyContext {
 		fills.set( name, [ ...( fills.get( name ) || [] ), ref ] );
 	};
 
-	const unregisterFill: SlotFillBubblesVirtuallyContext[ 'registerFill' ] = (
-		name,
-		ref
-	) => {
-		const fillsForName = fills.get( name );
-		if ( ! fillsForName ) {
-			return;
-		}
+	const unregisterFill: SlotFillBubblesVirtuallyContext[ 'unregisterFill' ] =
+		( name, ref ) => {
+			const fillsForName = fills.get( name );
+			if ( ! fillsForName ) {
+				return;
+			}
 
-		fills.set(
-			name,
-			fillsForName.filter( ( fillRef ) => fillRef !== ref )
-		);
-	};
+			fills.set(
+				name,
+				fillsForName.filter( ( fillRef ) => fillRef !== ref )
+			);
+		};
 
 	return {
 		slots,

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

@@ -35,29 +35,33 @@ function Slot(
 		as,
 		// `children` is not allowed. However, if it is passed,
 		// it will be displayed as is, so remove `children`.
-		// @ts-ignore
 		children,
 		...restProps
 	} = props;
 
 	const { registerSlot, unregisterSlot, ...registry } =
 		useContext( SlotFillContext );
+
 	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( () => {
-		registerSlot( name, ref, fillProps );
+		registerSlot( name, ref, fillPropsRef.current );
 		return () => {
 			unregisterSlot( name, ref );
 		};
-		// 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
 	}, [ registerSlot, unregisterSlot, name ] );
-	// fillProps may be an update that interacts with the layout, so we
-	// useLayoutEffect.
+
 	useLayoutEffect( () => {
-		registry.updateSlot( name, fillProps );
+		registry.updateSlot( name, ref, fillPropsRef.current );
 	} );
 
 	return (

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

@@ -1,40 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { useMemo, useContext } from '@wordpress/element';
+import { useContext } from '@wordpress/element';
 import { useObservableValue } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import SlotFillContext from './slot-fill-context';
-import type {
-	SlotFillBubblesVirtuallyFillRef,
-	SlotFillBubblesVirtuallySlotRef,
-	FillProps,
-	SlotKey,
-} from '../types';
+import type { SlotKey } from '../types';
 
 export default function useSlot( name: SlotKey ) {
 	const registry = useContext( SlotFillContext );
 	const slot = useObservableValue( registry.slots, name );
-
-	const api = useMemo(
-		() => ( {
-			updateSlot: ( fillProps: FillProps ) =>
-				registry.updateSlot( name, fillProps ),
-			unregisterSlot: ( ref: SlotFillBubblesVirtuallySlotRef ) =>
-				registry.unregisterSlot( name, ref ),
-			registerFill: ( ref: SlotFillBubblesVirtuallyFillRef ) =>
-				registry.registerFill( name, ref ),
-			unregisterFill: ( ref: SlotFillBubblesVirtuallyFillRef ) =>
-				registry.unregisterFill( name, ref ),
-		} ),
-		[ name, registry ]
-	);
-
-	return {
-		...slot,
-		...api,
-	};
+	return { ...slot };
 }

package/src/slot-fill/fill.ts

@@ -11,7 +11,7 @@ import useSlot from './use-slot';
 import type { FillComponentProps } from './types';
 
 export default function Fill( { name, children }: FillComponentProps ) {
-	const { registerFill, unregisterFill } = useContext( SlotFillContext );
+	const registry = useContext( SlotFillContext );
 	const slot = useSlot( name );
 
 	const ref = useRef( {
@@ -21,32 +21,17 @@ export default function Fill( { name, children }: FillComponentProps ) {
 
 	useLayoutEffect( () => {
 		const refValue = ref.current;
-		registerFill( name, refValue );
-		return () => unregisterFill( name, refValue );
-		// The useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
-		// We'll leave them as-is until a more detailed investigation/refactor can be performed.
-	}, [] );
+		refValue.name = name;
+		registry.registerFill( name, refValue );
+		return () => registry.unregisterFill( name, refValue );
+	}, [ registry, name ] );
 
 	useLayoutEffect( () => {
 		ref.current.children = children;
 		if ( slot ) {
-			slot.forceUpdate();
+			slot.rerender();
 		}
-		// The useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
-		// We'll leave them as-is until a more detailed investigation/refactor can be performed.
-	}, [ children ] );
-
-	useLayoutEffect( () => {
-		if ( name === ref.current.name ) {
-			// Ignore initial effect.
-			return;
-		}
-		unregisterFill( ref.current.name, ref.current );
-		ref.current.name = name;
-		registerFill( name, ref.current );
-		// The useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
-		// We'll leave them as-is until a more detailed investigation/refactor can be performed.
-	}, [ name ] );
+	}, [ slot, children ] );
 
 	return null;
 }

package/src/slot-fill/index.tsx

@@ -84,17 +84,15 @@ export function createSlotFill( key: SlotKey ) {
 		props: DistributiveOmit< SlotComponentProps, 'name' >
 	) => <Slot name={ key } { ...props } />;
 	SlotComponent.displayName = `${ baseName }Slot`;
+	/**
+	 * @deprecated 6.8.0
+	 * Please use `slotFill.name` instead of `slotFill.Slot.__unstableName`.
+	 */
 	SlotComponent.__unstableName = key;
 
 	return {
+		name: key,
 		Fill: FillComponent,
 		Slot: SlotComponent,
 	};
 }
-
-export const createPrivateSlotFill = ( name: string ) => {
-	const privateKey = Symbol( name );
-	const privateSlotFill = createSlotFill( privateKey );
-
-	return { privateKey, ...privateSlotFill };
-};

package/src/slot-fill/provider.tsx

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import type { Component } from '@wordpress/element';
 import { useState } from '@wordpress/element';
 
 /**
@@ -11,20 +10,17 @@ import SlotFillContext from './context';
 import type {
 	FillComponentProps,
 	BaseSlotFillContext,
-	BaseSlotComponentProps,
 	SlotFillProviderProps,
 	SlotKey,
+	Rerenderable,
 } from './types';
 
 function createSlotRegistry(): BaseSlotFillContext {
-	const slots: Record< SlotKey, Component< BaseSlotComponentProps > > = {};
+	const slots: Record< SlotKey, Rerenderable > = {};
 	const fills: Record< SlotKey, FillComponentProps[] > = {};
 	let listeners: Array< () => void > = [];
 
-	function registerSlot(
-		name: SlotKey,
-		slot: Component< BaseSlotComponentProps >
-	) {
+	function registerSlot( name: SlotKey, slot: Rerenderable ) {
 		const previousSlot = slots[ name ];
 		slots[ name ] = slot;
 		triggerListeners();
@@ -38,7 +34,7 @@ function createSlotRegistry(): BaseSlotFillContext {
 		// assigned into the instance, such that its own rendering of children
 		// will be empty (the new Slot will subsume all fills for this name).
 		if ( previousSlot ) {
-			previousSlot.forceUpdate();
+			previousSlot.rerender();
 		}
 	}
 
@@ -47,10 +43,7 @@ function createSlotRegistry(): BaseSlotFillContext {
 		forceUpdateSlot( name );
 	}
 
-	function unregisterSlot(
-		name: SlotKey,
-		instance: Component< BaseSlotComponentProps >
-	) {
+	function unregisterSlot( name: SlotKey, instance: Rerenderable ) {
 		// 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.
@@ -68,15 +61,13 @@ function createSlotRegistry(): BaseSlotFillContext {
 		forceUpdateSlot( name );
 	}
 
-	function getSlot(
-		name: SlotKey
-	): Component< BaseSlotComponentProps > | undefined {
+	function getSlot( name: SlotKey ): Rerenderable | undefined {
 		return slots[ name ];
 	}
 
 	function getFills(
 		name: SlotKey,
-		slotInstance: Component< BaseSlotComponentProps >
+		slotInstance: Rerenderable
 	): FillComponentProps[] {
 		// Fills should only be returned for the current instance of the slot
 		// in which they occupy.
@@ -90,7 +81,7 @@ function createSlotRegistry(): BaseSlotFillContext {
 		const slot = getSlot( name );
 
 		if ( slot ) {
-			slot.forceUpdate();
+			slot.rerender();
 		}
 	}