@wordpress/components 28.13.1-next.082ed6819.0 → 29.0.1-next.a9f418477.0

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

@@ -13,7 +13,7 @@ const meta: Meta< typeof ResponsiveWrapper > = {
 	title: 'Components/Layout/ResponsiveWrapper',
 	id: 'components-responsivewrapper',
 	argTypes: {
-		children: { control: { type: null } },
+		children: { control: false },
 	},
 	parameters: {
 		controls: { expanded: true },

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

@@ -13,7 +13,7 @@ const meta: Meta< typeof SandBox > = {
 	title: 'Components/Utilities/SandBox',
 	id: 'components-sandbox',
 	argTypes: {
-		onFocus: { control: { type: null } },
+		onFocus: { control: false },
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

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

@@ -22,7 +22,7 @@ const meta: Meta< typeof Scrollable > = {
 			control: { type: 'text' },
 		},
 		children: {
-			control: { type: null },
+			control: false,
 		},
 	},
 	parameters: {
@@ -70,6 +70,7 @@ const Template: StoryFn< typeof Scrollable > = ( { ...args } ) => {
 					} }
 					type="text"
 					value="Focus me"
+					readOnly
 				/>
 			</View>
 		</Scrollable>

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

@@ -19,7 +19,7 @@ const meta: Meta< typeof SearchControl > = {
 	component: SearchControl,
 	argTypes: {
 		onChange: { action: 'onChange' },
-		value: { control: { type: null } },
+		value: { control: false },
 	},
 	parameters: {
 		controls: { expanded: true },

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

@@ -23,7 +23,7 @@ const meta: Meta< typeof SelectControl > = {
 		label: { control: { type: 'text' } },
 		prefix: { control: { type: 'text' } },
 		suffix: { control: { type: 'text' } },
-		value: { control: { type: null } },
+		value: { control: false },
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

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

@@ -4,7 +4,6 @@
 import { useObservableValue } from '@wordpress/compose';
 import {
 	useContext,
-	useReducer,
 	useRef,
 	useEffect,
 	createPortal,
@@ -20,18 +19,15 @@ import type { FillComponentProps } from '../types';
 export default function Fill( { name, children }: FillComponentProps ) {
 	const registry = useContext( SlotFillContext );
 	const slot = useObservableValue( registry.slots, name );
-	const [ , rerender ] = useReducer( () => [], [] );
-	const ref = useRef( { rerender } );
+	const instanceRef = useRef( {} );
 
+	// We register fills so we can keep track of their existence.
+	// Slots can use the `useSlotFills` hook to know if there're already fills
+	// registered so they can choose to render themselves or not.
 	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.
-		const refValue = ref.current;
-		registry.registerFill( name, refValue );
-		return () => {
-			registry.unregisterFill( name, refValue );
-		};
+		const instance = instanceRef.current;
+		registry.registerFill( name, instance );
+		return () => registry.unregisterFill( name, instance );
 	}, [ registry, name ] );
 
 	if ( ! slot || ! slot.ref.current ) {

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

@@ -23,13 +23,7 @@ function createSlotRegistry(): SlotFillBubblesVirtuallyContext {
 		ref,
 		fillProps
 	) => {
-		const slot = slots.get( name );
-
-		slots.set( name, {
-			...slot,
-			ref: ref || slot?.ref,
-			fillProps: fillProps || slot?.fillProps || {},
-		} );
+		slots.set( name, { ref, fillProps } );
 	};
 
 	const unregisterSlot: SlotFillBubblesVirtuallyContext[ 'unregisterSlot' ] =
@@ -66,12 +60,7 @@ function createSlotRegistry(): SlotFillBubblesVirtuallyContext {
 			return;
 		}
 
-		slot.fillProps = fillProps;
-		const slotFills = fills.get( name );
-		if ( slotFills ) {
-			// Force update fills.
-			slotFills.forEach( ( fill ) => fill.rerender() );
-		}
+		slots.set( name, { ref, fillProps } );
 	};
 
 	const registerFill: SlotFillBubblesVirtuallyContext[ 'registerFill' ] = (

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

@@ -39,8 +39,7 @@ function Slot(
 		...restProps
 	} = props;
 
-	const { registerSlot, unregisterSlot, ...registry } =
-		useContext( SlotFillContext );
+	const registry = useContext( SlotFillContext );
 
 	const ref = useRef< HTMLElement >( null );
 
@@ -54,11 +53,9 @@ function Slot(
 	}, [ fillProps ] );
 
 	useLayoutEffect( () => {
-		registerSlot( name, ref, fillPropsRef.current );
-		return () => {
-			unregisterSlot( name, ref );
-		};
-	}, [ registerSlot, unregisterSlot, name ] );
+		registry.registerSlot( name, ref, fillPropsRef.current );
+		return () => registry.unregisterSlot( name, ref );
+	}, [ registry, name ] );
 
 	useLayoutEffect( () => {
 		registry.updateSlot( name, ref, fillPropsRef.current );

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

@@ -20,9 +20,9 @@ const meta: Meta< typeof Slot > = {
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { Fill, SlotFillProvider },
 	argTypes: {
-		name: { control: { type: null } },
+		name: { control: false },
 		as: { control: { type: 'text' } },
-		fillProps: { control: { type: null } },
+		fillProps: { control: false },
 	},
 	parameters: {
 		controls: { expanded: true },

package/src/slot-fill/types.ts

@@ -110,15 +110,16 @@ export type SlotFillProviderProps = {
 
 export type SlotRef = RefObject< HTMLElement >;
 export type Rerenderable = { rerender: () => void };
+export type FillInstance = {};
 
 export type SlotFillBubblesVirtuallyContext = {
 	slots: ObservableMap< SlotKey, { ref: SlotRef; fillProps: FillProps } >;
-	fills: ObservableMap< SlotKey, Rerenderable[] >;
+	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, ref: Rerenderable ) => void;
-	unregisterFill: ( name: SlotKey, ref: Rerenderable ) => void;
+	registerFill: ( name: SlotKey, instance: FillInstance ) => void;
+	unregisterFill: ( name: SlotKey, instance: FillInstance ) => void;
 
 	/**
 	 * This helps the provider know if it's using the default context value or not.

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

@@ -19,17 +19,17 @@ const meta: Meta< typeof Snackbar > = {
 	id: 'components-snackbar',
 	component: Snackbar,
 	argTypes: {
-		as: { control: { type: null } },
+		as: { control: false },
 		onRemove: {
 			action: 'onRemove',
-			control: { type: null },
+			control: false,
 		},
 		onDismiss: {
 			action: 'onDismiss',
-			control: { type: null },
+			control: false,
 		},
 		listRef: {
-			control: { type: null },
+			control: false,
 		},
 	},
 	parameters: {

package/src/snackbar/stories/list.story.tsx

@@ -18,10 +18,10 @@ const meta: Meta< typeof SnackbarList > = {
 	id: 'components-snackbarlist',
 	component: SnackbarList,
 	argTypes: {
-		as: { control: { type: null } },
+		as: { control: false },
 		onRemove: {
 			action: 'onRemove',
-			control: { type: null },
+			control: false,
 		},
 	},
 	parameters: {

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

@@ -13,7 +13,7 @@ const meta: Meta< typeof Surface > = {
 	component: Surface,
 	title: 'Components (Experimental)/Surface',
 	argTypes: {
-		children: { control: { type: null } },
+		children: { control: false },
 		as: { control: { type: 'text' } },
 	},
 	parameters: {

package/src/tabs/tab.tsx

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import * as Ariakit from '@ariakit/react';
-
 /**
  * WordPress dependencies
  */
@@ -29,18 +24,6 @@ export const Tab = forwardRef<
 >( function Tab( { children, tabId, disabled, render, ...otherProps }, ref ) {
 	const { store, instanceId } = useTabsContext() ?? {};
 
-	// If the active item is not connected, the tablist may end up in a state
-	// where none of the tabs are tabbable. In this case, we force all tabs to
-	// be tabbable, so that as soon as an item received focus, it becomes active
-	// and Tablist goes back to working as expected.
-	// eslint-disable-next-line @wordpress/no-unused-vars-before-return
-	const tabbable = Ariakit.useStoreState( store, ( state ) => {
-		return (
-			state?.activeId !== null &&
-			! store?.item( state?.activeId )?.element?.isConnected
-		);
-	} );
-
 	if ( ! store ) {
 		warning( '`Tabs.Tab` must be wrapped in a `Tabs` component.' );
 		return null;
@@ -55,7 +38,6 @@ export const Tab = forwardRef<
 			id={ instancedTabId }
 			disabled={ disabled }
 			render={ render }
-			tabbable={ tabbable }
 			{ ...otherProps }
 		>
 			<StyledTabChildren>{ children }</StyledTabChildren>