@wordpress/components 29.0.0 → 29.1.0

package/src/select-control/README.md

@@ -92,6 +92,7 @@ const MySelectControl = () => {
 				{ label: 'Small', value: '25%' },
 			] }
 			onChange={ ( newSize ) => setSize( newSize ) }
+			__next40pxDefaultSize
 			__nextHasNoMarginBottom
 		/>
 	);
@@ -114,6 +115,7 @@ Render a user interface to select multiple users from a list.
 		{ value: 'b', label: 'User B' },
 		{ value: 'c', label: 'User c' },
 	] }
+	__next40pxDefaultSize
 	__nextHasNoMarginBottom
 />
 ```
@@ -129,6 +131,7 @@ const [ item, setItem ] = useState( '' );
     label={ __( 'My dinosaur' ) }
     value={ item } // e.g: value = 'a'
     onChange={ ( selection ) => { setItem( selection ) } }
+    __next40pxDefaultSize
     __nextHasNoMarginBottom
 >
 	<optgroup label="Theropods">

package/src/select-control/index.tsx

@@ -18,6 +18,7 @@ import type { WordPressComponentProps } from '../context';
 import type { SelectControlProps } from './types';
 import SelectControlChevronDown from './chevron-down';
 import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 function useUniqueId( idProp?: string ) {
 	const instanceId = useInstanceId( SelectControl );
@@ -65,6 +66,7 @@ function UnforwardedSelectControl< V extends string >(
 		variant = 'default',
 		__next40pxDefaultSize = false,
 		__nextHasNoMarginBottom = false,
+		__shouldNotWarnDeprecated36pxSize,
 		...restProps
 	} = useDeprecated36pxDefaultSizeProp( props );
 	const id = useUniqueId( idProp );
@@ -94,6 +96,13 @@ function UnforwardedSelectControl< V extends string >(
 
 	const classes = clsx( 'components-select-control', className );
 
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'SelectControl',
+		__next40pxDefaultSize,
+		size,
+		__shouldNotWarnDeprecated36pxSize,
+	} );
+
 	return (
 		<BaseControl
 			help={ help }
@@ -154,6 +163,7 @@ function UnforwardedSelectControl< V extends string >(
  *
  *   return (
  *     <SelectControl
+ *       __next40pxDefaultSize
  *       __nextHasNoMarginBottom
  *       label="Size"
  *       value={ size }

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

@@ -65,6 +65,7 @@ const SelectControlWithState: StoryFn< typeof SelectControl > = ( props ) => {
 
 export const Default = SelectControlWithState.bind( {} );
 Default.args = {
+	__next40pxDefaultSize: true,
 	__nextHasNoMarginBottom: true,
 	label: 'Label',
 	options: [
@@ -87,6 +88,7 @@ WithLabelAndHelpText.args = {
  */
 export const WithCustomChildren = SelectControlWithState.bind( {} );
 WithCustomChildren.args = {
+	__next40pxDefaultSize: true,
 	__nextHasNoMarginBottom: true,
 	label: 'Label',
 	children: (

package/src/select-control/test/select-control.tsx

@@ -12,7 +12,13 @@ import _SelectControl from '..';
 const SelectControl = (
 	props: React.ComponentProps< typeof _SelectControl >
 ) => {
-	return <_SelectControl { ...props } __nextHasNoMarginBottom />;
+	return (
+		<_SelectControl
+			{ ...props }
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+		/>
+	);
 };
 
 describe( 'SelectControl', () => {

package/src/select-control/types.ts

@@ -13,6 +13,7 @@ type SelectControlBaseProps< V extends string > = Pick<
 	InputBaseProps,
 	| '__next36pxDefaultSize'
 	| '__next40pxDefaultSize'
+	| '__shouldNotWarnDeprecated36pxSize'
 	| 'disabled'
 	| 'hideLabelFromVision'
 	| 'label'

package/src/slot-fill/context.ts

@@ -1,20 +1,22 @@
 /**
  * WordPress dependencies
  */
+import { observableMap } from '@wordpress/compose';
 import { createContext } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
 import type { BaseSlotFillContext } from './types';
 
 const initialValue: BaseSlotFillContext = {
+	slots: observableMap(),
+	fills: observableMap(),
 	registerSlot: () => {},
 	unregisterSlot: () => {},
 	registerFill: () => {},
 	unregisterFill: () => {},
-	getSlot: () => undefined,
-	getFills: () => [],
-	subscribe: () => () => {},
+	updateFill: () => {},
 };
 export const SlotFillContext = createContext( initialValue );
 

package/src/slot-fill/fill.ts

@@ -7,31 +7,26 @@ import { useContext, useLayoutEffect, useRef } from '@wordpress/element';
  * Internal dependencies
  */
 import SlotFillContext from './context';
-import useSlot from './use-slot';
 import type { FillComponentProps } from './types';
 
 export default function Fill( { name, children }: FillComponentProps ) {
 	const registry = useContext( SlotFillContext );
-	const slot = useSlot( name );
+	const instanceRef = useRef( {} );
+	const childrenRef = useRef( children );
 
-	const ref = useRef( {
-		name,
-		children,
-	} );
+	useLayoutEffect( () => {
+		childrenRef.current = children;
+	}, [ children ] );
 
 	useLayoutEffect( () => {
-		const refValue = ref.current;
-		refValue.name = name;
-		registry.registerFill( name, refValue );
-		return () => registry.unregisterFill( name, refValue );
+		const instance = instanceRef.current;
+		registry.registerFill( name, instance, childrenRef.current );
+		return () => registry.unregisterFill( name, instance );
 	}, [ registry, name ] );
 
 	useLayoutEffect( () => {
-		ref.current.children = children;
-		if ( slot ) {
-			slot.rerender();
-		}
-	}, [ slot, children ] );
+		registry.updateFill( name, instanceRef.current, childrenRef.current );
+	} );
 
 	return null;
 }

package/src/slot-fill/provider.tsx

@@ -8,103 +8,102 @@ import { useState } from '@wordpress/element';
  */
 import SlotFillContext from './context';
 import type {
-	FillComponentProps,
+	FillInstance,
+	FillChildren,
+	BaseSlotInstance,
 	BaseSlotFillContext,
 	SlotFillProviderProps,
 	SlotKey,
-	Rerenderable,
 } from './types';
+import { observableMap } from '@wordpress/compose';
 
 function createSlotRegistry(): BaseSlotFillContext {
-	const slots: Record< SlotKey, Rerenderable > = {};
-	const fills: Record< SlotKey, FillComponentProps[] > = {};
-	let listeners: Array< () => void > = [];
-
-	function registerSlot( name: SlotKey, slot: Rerenderable ) {
-		const previousSlot = slots[ name ];
-		slots[ name ] = slot;
-		triggerListeners();
-
-		// Sometimes the fills are registered after the initial render of slot
-		// But before the registerSlot call, we need to rerender the slot.
-		forceUpdateSlot( name );
-
-		// If a new instance of a slot is being mounted while another with the
-		// same name exists, force its update _after_ the new slot has been
-		// 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.rerender();
-		}
-	}
-
-	function registerFill( name: SlotKey, instance: FillComponentProps ) {
-		fills[ name ] = [ ...( fills[ name ] || [] ), instance ];
-		forceUpdateSlot( name );
+	const slots = observableMap< SlotKey, BaseSlotInstance >();
+	const fills = observableMap<
+		SlotKey,
+		{ instance: FillInstance; children: FillChildren }[]
+	>();
+
+	function registerSlot( name: SlotKey, instance: BaseSlotInstance ) {
+		slots.set( name, instance );
 	}
 
-	function unregisterSlot( name: SlotKey, instance: Rerenderable ) {
+	function unregisterSlot( name: SlotKey, instance: BaseSlotInstance ) {
 		// 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[ name ] !== instance ) {
+		if ( slots.get( name ) !== instance ) {
 			return;
 		}
 
-		delete slots[ name ];
-		triggerListeners();
+		slots.delete( name );
 	}
 
-	function unregisterFill( name: SlotKey, instance: FillComponentProps ) {
-		fills[ name ] =
-			fills[ name ]?.filter( ( fill ) => fill !== instance ) ?? [];
-		forceUpdateSlot( name );
+	function registerFill(
+		name: SlotKey,
+		instance: FillInstance,
+		children: FillChildren
+	) {
+		fills.set( name, [
+			...( fills.get( name ) || [] ),
+			{ instance, children },
+		] );
 	}
 
-	function getSlot( name: SlotKey ): Rerenderable | undefined {
-		return slots[ name ];
+	function unregisterFill( name: SlotKey, instance: FillInstance ) {
+		const fillsForName = fills.get( name );
+		if ( ! fillsForName ) {
+			return;
+		}
+
+		fills.set(
+			name,
+			fillsForName.filter( ( fill ) => fill.instance !== instance )
+		);
 	}
 
-	function getFills(
+	function updateFill(
 		name: SlotKey,
-		slotInstance: Rerenderable
-	): FillComponentProps[] {
-		// Fills should only be returned for the current instance of the slot
-		// in which they occupy.
-		if ( slots[ name ] !== slotInstance ) {
-			return [];
+		instance: FillInstance,
+		children: FillChildren
+	) {
+		const fillsForName = fills.get( name );
+		if ( ! fillsForName ) {
+			return;
 		}
-		return fills[ name ];
-	}
-
-	function forceUpdateSlot( name: SlotKey ) {
-		const slot = getSlot( name );
 
-		if ( slot ) {
-			slot.rerender();
+		const fillForInstance = fillsForName.find(
+			( f ) => f.instance === instance
+		);
+		if ( ! fillForInstance ) {
+			return;
 		}
-	}
 
-	function triggerListeners() {
-		listeners.forEach( ( listener ) => listener() );
-	}
-
-	function subscribe( listener: () => void ) {
-		listeners.push( listener );
+		if ( fillForInstance.children === children ) {
+			return;
+		}
 
-		return () => {
-			listeners = listeners.filter( ( l ) => l !== listener );
-		};
+		fills.set(
+			name,
+			fillsForName.map( ( f ) => {
+				if ( f.instance === instance ) {
+					// Replace with new record with updated `children`.
+					return { instance, children };
+				}
+
+				return f;
+			} )
+		);
 	}
 
 	return {
+		slots,
+		fills,
 		registerSlot,
 		unregisterSlot,
 		registerFill,
 		unregisterFill,
-		getSlot,
-		getFills,
-		subscribe,
+		updateFill,
 	};
 }
 

package/src/slot-fill/slot.tsx

@@ -6,10 +6,10 @@ import type { ReactElement, ReactNode, Key } from 'react';
 /**
  * WordPress dependencies
  */
+import { useObservableValue } from '@wordpress/compose';
 import {
 	useContext,
-	useEffect,
-	useReducer,
+	useLayoutEffect,
 	useRef,
 	Children,
 	cloneElement,
@@ -32,41 +32,48 @@ function isFunction( maybeFunc: any ): maybeFunc is Function {
 	return typeof maybeFunc === 'function';
 }
 
+function addKeysToChildren( children: ReactNode ) {
+	return Children.map( children, ( child, childIndex ) => {
+		if ( ! child || typeof child === 'string' ) {
+			return child;
+		}
+		let childKey: Key = childIndex;
+		if ( typeof child === 'object' && 'key' in child && child?.key ) {
+			childKey = child.key;
+		}
+
+		return cloneElement( child as ReactElement, {
+			key: childKey,
+		} );
+	} );
+}
+
 function Slot( props: Omit< SlotComponentProps, 'bubblesVirtually' > ) {
 	const registry = useContext( SlotFillContext );
-	const [ , rerender ] = useReducer( () => [], [] );
-	const ref = useRef( { rerender } );
+	const instanceRef = useRef( {} );
 
 	const { name, children, fillProps = {} } = props;
 
-	useEffect( () => {
-		const refValue = ref.current;
-		registry.registerSlot( name, refValue );
-		return () => registry.unregisterSlot( name, refValue );
+	useLayoutEffect( () => {
+		const instance = instanceRef.current;
+		registry.registerSlot( name, instance );
+		return () => registry.unregisterSlot( name, instance );
 	}, [ registry, name ] );
 
-	const fills: ReactNode[] = ( registry.getFills( name, ref.current ) ?? [] )
+	let fills = useObservableValue( registry.fills, name ) ?? [];
+	const currentSlot = useObservableValue( registry.slots, name );
+
+	// Fills should only be rendered in the currently registered instance of the slot.
+	if ( currentSlot !== instanceRef.current ) {
+		fills = [];
+	}
+
+	const renderedFills = fills
 		.map( ( fill ) => {
 			const fillChildren = isFunction( fill.children )
 				? fill.children( fillProps )
 				: fill.children;
-			return Children.map( fillChildren, ( child, childIndex ) => {
-				if ( ! child || typeof child === 'string' ) {
-					return child;
-				}
-				let childKey: Key = childIndex;
-				if (
-					typeof child === 'object' &&
-					'key' in child &&
-					child?.key
-				) {
-					childKey = child.key;
-				}
-
-				return cloneElement( child as ReactElement, {
-					key: childKey,
-				} );
-			} );
+			return addKeysToChildren( fillChildren );
 		} )
 		.filter(
 			// In some cases fills are rendered only when some conditions apply.
@@ -75,7 +82,13 @@ function Slot( props: Omit< SlotComponentProps, 'bubblesVirtually' > ) {
 			( element ) => ! isEmptyElement( element )
 		);
 
-	return <>{ isFunction( children ) ? children( fills ) : fills }</>;
+	return (
+		<>
+			{ isFunction( children )
+				? children( renderedFills )
+				: renderedFills }
+		</>
+	);
 }
 
 export default Slot;

package/src/slot-fill/types.ts

@@ -84,6 +84,10 @@ export type SlotComponentProps =
 			style?: never;
 	  } );
 
+export type FillChildren =
+	| ReactNode
+	| ( ( fillProps: FillProps ) => ReactNode );
+
 export type FillComponentProps = {
 	/**
 	 * The name of the slot to fill into.
@@ -93,7 +97,7 @@ export type FillComponentProps = {
 	/**
 	 * Children elements or render function.
 	 */
-	children?: ReactNode | ( ( fillProps: FillProps ) => ReactNode );
+	children?: FillChildren;
 };
 
 export type SlotFillProviderProps = {
@@ -109,8 +113,8 @@ export type SlotFillProviderProps = {
 };
 
 export type SlotRef = RefObject< HTMLElement >;
-export type Rerenderable = { rerender: () => void };
 export type FillInstance = {};
+export type BaseSlotInstance = {};
 
 export type SlotFillBubblesVirtuallyContext = {
 	slots: ObservableMap< SlotKey, { ref: SlotRef; fillProps: FillProps } >;
@@ -128,14 +132,22 @@ export type SlotFillBubblesVirtuallyContext = {
 };
 
 export type BaseSlotFillContext = {
-	registerSlot: ( name: SlotKey, slot: Rerenderable ) => void;
-	unregisterSlot: ( name: SlotKey, slot: Rerenderable ) => void;
-	registerFill: ( name: SlotKey, instance: FillComponentProps ) => void;
-	unregisterFill: ( name: SlotKey, instance: FillComponentProps ) => void;
-	getSlot: ( name: SlotKey ) => Rerenderable | undefined;
-	getFills: (
+	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,
-		slotInstance: Rerenderable
-	) => FillComponentProps[];
-	subscribe: ( listener: () => void ) => () => void;
+		instance: FillInstance,
+		children: FillChildren
+	) => void;
 };

package/src/style.scss

@@ -10,6 +10,7 @@
 // Components
 @import "./animate/style.scss";
 @import "./autocomplete/style.scss";
+@import "./badge/styles.scss";
 @import "./button-group/style.scss";
 @import "./button/style.scss";
 @import "./checkbox-control/style.scss";

package/src/tab-panel/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import * as Ariakit from '@ariakit/react';
-import { useStoreState } from '@ariakit/react';
 import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
@@ -125,7 +124,7 @@ const UnforwardedTabPanel = (
 	} );
 
 	const selectedTabName = extractTabName(
-		useStoreState( tabStore, 'selectedId' )
+		Ariakit.useStoreState( tabStore, 'selectedId' )
 	);
 
 	const setTabStoreSelectedId = useCallback(

package/src/tab-panel/stories/index.story.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import type { Meta, StoryFn } from '@storybook/react';
+import { fn } from '@storybook/test';
 
 /**
  * WordPress dependencies
@@ -22,6 +23,9 @@ const meta: Meta< typeof TabPanel > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},
+	args: {
+		onSelect: fn(),
+	},
 };
 export default meta;