@wordpress/components 25.6.1 → 26.0.1-next.5a1d1283.0

package/src/slot-fill/index.js

@@ -2,7 +2,7 @@
 /**
  * WordPress dependencies
  */
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -13,6 +13,7 @@ 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';
 export { default as useSlot } from './bubbles-virtually/use-slot';
 export { default as useSlotFills } from './bubbles-virtually/use-slot-fills';
 
@@ -35,6 +36,10 @@ export const Slot = forwardRef( ( { bubblesVirtually, ...props }, ref ) => {
 } );
 
 export function Provider( { children, ...props } ) {
+	const parent = useContext( SlotFillContext );
+	if ( ! parent.isDefault ) {
+		return children;
+	}
 	return (
 		<SlotFillProvider { ...props }>
 			<BubblesVirtuallySlotFillProvider>

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

@@ -11,6 +11,8 @@ import { Slot, Fill, Provider as SlotFillProvider } from '../';
 export default {
 	title: 'Components/SlotFill',
 	component: Slot,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { Fill, SlotFillProvider },
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },

package/src/slot-fill/test/__snapshots__/slot.js.snap

@@ -42,12 +42,16 @@ exports[`Slot bubblesVirtually true should subsume another slot by the same name
   <div
     data-position="first"
   >
-    <div />
+    <div
+      class="emotion-0 emotion-1"
+    />
   </div>
   <div
     data-position="second"
   >
-    <div>
+    <div
+      class="emotion-0 emotion-1"
+    >
       Content
     </div>
   </div>
@@ -62,7 +66,9 @@ exports[`Slot bubblesVirtually true should subsume another slot by the same name
   <div
     data-position="second"
   >
-    <div>
+    <div
+      class="emotion-0 emotion-1"
+    >
       Content
     </div>
   </div>
@@ -187,7 +193,9 @@ exports[`Slot should render in expected order when fills unmounted 1`] = `
 exports[`Slot should warn without a Provider 1`] = `
 <div>
   <div>
-    <div />
+    <div
+      class="emotion-0 emotion-1"
+    />
   </div>
 </div>
 `;

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

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import Snackbar from '..';
 
-const meta: ComponentMeta< typeof Snackbar > = {
+const meta: Meta< typeof Snackbar > = {
 	title: 'Components/Snackbar',
 	component: Snackbar,
 	argTypes: {
@@ -34,23 +34,22 @@ const meta: ComponentMeta< typeof Snackbar > = {
 };
 export default meta;
 
-const DefaultTemplate: ComponentStory< typeof Snackbar > = ( {
+const DefaultTemplate: StoryFn< typeof Snackbar > = ( {
 	children,
 	...props
 } ) => {
 	return <Snackbar { ...props }>{ children }</Snackbar>;
 };
 
-export const Default: ComponentStory< typeof Snackbar > = DefaultTemplate.bind(
-	{}
-);
+export const Default: StoryFn< typeof Snackbar > = DefaultTemplate.bind( {} );
 Default.args = {
 	children:
 		'Use Snackbars to communicate low priority, non-interruptive messages to the user.',
 };
 
-export const WithActions: ComponentStory< typeof Snackbar > =
-	DefaultTemplate.bind( {} );
+export const WithActions: StoryFn< typeof Snackbar > = DefaultTemplate.bind(
+	{}
+);
 WithActions.args = {
 	actions: [
 		{
@@ -61,9 +60,7 @@ WithActions.args = {
 	children: 'Use Snackbars with an action link to an external page.',
 };
 
-export const WithIcon: ComponentStory< typeof Snackbar > = DefaultTemplate.bind(
-	{}
-);
+export const WithIcon: StoryFn< typeof Snackbar > = DefaultTemplate.bind( {} );
 WithIcon.args = {
 	children: 'Add an icon to make your snackbar stand out',
 	icon: (
@@ -73,7 +70,7 @@ WithIcon.args = {
 	),
 };
 
-export const WithExplicitDismiss: ComponentStory< typeof Snackbar > =
+export const WithExplicitDismiss: StoryFn< typeof Snackbar > =
 	DefaultTemplate.bind( {} );
 WithExplicitDismiss.args = {
 	children:
@@ -81,7 +78,7 @@ WithExplicitDismiss.args = {
 	explicitDismiss: true,
 };
 
-export const WithActionAndExplicitDismiss: ComponentStory< typeof Snackbar > =
+export const WithActionAndExplicitDismiss: StoryFn< typeof Snackbar > =
 	DefaultTemplate.bind( {} );
 WithActionAndExplicitDismiss.args = {
 	actions: [

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import SnackbarList from '../list';
 
-const meta: ComponentMeta< typeof SnackbarList > = {
+const meta: Meta< typeof SnackbarList > = {
 	title: 'Components/SnackbarList',
 	component: SnackbarList,
 	argTypes: {
@@ -32,7 +32,7 @@ const meta: ComponentMeta< typeof SnackbarList > = {
 };
 export default meta;
 
-export const Default: ComponentStory< typeof SnackbarList > = ( {
+export const Default: StoryFn< typeof SnackbarList > = ( {
 	children,
 	notices: noticesProp,
 	...props

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -29,7 +29,7 @@ const controls = [
 	{}
 );
 
-const meta: ComponentMeta< typeof Spacer > = {
+const meta: Meta< typeof Spacer > = {
 	component: Spacer,
 	title: 'Components (Experimental)/Spacer',
 	argTypes: {
@@ -54,7 +54,7 @@ const BlackBox = () => (
 	/>
 );
 
-const Template: ComponentStory< typeof Spacer > = ( { onChange, ...args } ) => {
+const Template: StoryFn< typeof Spacer > = ( { onChange, ...args } ) => {
 	return (
 		<>
 			<BlackBox />
@@ -64,7 +64,7 @@ const Template: ComponentStory< typeof Spacer > = ( { onChange, ...args } ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof Spacer > = Template.bind( {} );
+export const Default: StoryFn< typeof Spacer > = Template.bind( {} );
 Default.args = {
 	children: 'This is the spacer',
 };

package/src/spinner/index.tsx

@@ -50,7 +50,6 @@ export function UnforwardedSpinner(
 /**
  * `Spinner` is a component used to notify users that their action is being processed.
  *
- * @example
  * ```js
  *   import { Spinner } from '@wordpress/components';
  *

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { StoryFn, Meta } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -9,7 +9,7 @@ import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import Spinner from '../';
 import { space } from '../../ui/utils/space';
 
-const meta: ComponentMeta< typeof Spinner > = {
+const meta: Meta< typeof Spinner > = {
 	title: 'Components/Spinner',
 	component: Spinner,
 	parameters: {
@@ -21,12 +21,12 @@ const meta: ComponentMeta< typeof Spinner > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Spinner > = ( args ) => {
+const Template: StoryFn< typeof Spinner > = ( args ) => {
 	return <Spinner { ...args } />;
 };
 
-export const Default: ComponentStory< typeof Spinner > = Template.bind( {} );
+export const Default: StoryFn< typeof Spinner > = Template.bind( {} );
 
 // The Spinner can be resized to any size, but the stroke width will remain unchanged.
-export const CustomSize: ComponentStory< typeof Spinner > = Template.bind( {} );
+export const CustomSize: StoryFn< typeof Spinner > = Template.bind( {} );
 CustomSize.args = { style: { width: space( 20 ), height: space( 20 ) } };

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -9,7 +9,7 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Surface } from '..';
 import { Text } from '../../text';
 
-const meta: ComponentMeta< typeof Surface > = {
+const meta: Meta< typeof Surface > = {
 	component: Surface,
 	title: 'Components (Experimental)/Surface',
 	argTypes: {
@@ -25,7 +25,7 @@ const meta: ComponentMeta< typeof Surface > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Surface > = ( args ) => {
+const Template: StoryFn< typeof Surface > = ( args ) => {
 	return (
 		<Surface
 			{ ...args }
@@ -36,5 +36,5 @@ const Template: ComponentStory< typeof Surface > = ( args ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof Surface > = Template.bind( {} );
+export const Default: StoryFn< typeof Surface > = Template.bind( {} );
 Default.args = {};

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -12,10 +12,8 @@ import { link, more, wordpress } from '@wordpress/icons';
  * Internal dependencies
  */
 import TabPanel from '..';
-import Popover from '../../popover';
-import { Provider as SlotFillProvider } from '../../slot-fill';
 
-const meta: ComponentMeta< typeof TabPanel > = {
+const meta: Meta< typeof TabPanel > = {
 	title: 'Components/TabPanel',
 	component: TabPanel,
 	parameters: {
@@ -26,7 +24,7 @@ const meta: ComponentMeta< typeof TabPanel > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof TabPanel > = ( props ) => {
+const Template: StoryFn< typeof TabPanel > = ( props ) => {
 	return <TabPanel { ...props } />;
 };
 
@@ -65,14 +63,8 @@ DisabledTab.args = {
 	],
 };
 
-const SlotFillTemplate: ComponentStory< typeof TabPanel > = ( props ) => {
-	return (
-		<SlotFillProvider>
-			<TabPanel { ...props } />
-			{ /* @ts-expect-error The 'Slot' component hasn't been typed yet. */ }
-			<Popover.Slot />
-		</SlotFillProvider>
-	);
+const SlotFillTemplate: StoryFn< typeof TabPanel > = ( props ) => {
+	return <TabPanel { ...props } />;
 };
 
 export const WithTabIconsAndTooltips = SlotFillTemplate.bind( {} );

package/src/tab-panel/test/index.tsx

@@ -13,8 +13,6 @@ import { wordpress, category, media } from '@wordpress/icons';
  * Internal dependencies
  */
 import TabPanel from '..';
-import Popover from '../../popover';
-import { Provider as SlotFillProvider } from '../../slot-fill';
 
 const TABS = [
 	{
@@ -107,17 +105,10 @@ describe.each( [
 			];
 
 			render(
-				// In order for the tooltip to display properly, there needs to be
-				// `Popover.Slot` in which the `Popover` renders outside of the
-				// `TabPanel` component, otherwise the tooltip renders inline.
-				<SlotFillProvider>
-					<Component
-						tabs={ TABS_WITH_ICON }
-						children={ panelRenderFunction }
-					/>
-					{ /* @ts-expect-error The 'Slot' component hasn't been typed yet. */ }
-					<Popover.Slot />
-				</SlotFillProvider>
+				<Component
+					tabs={ TABS_WITH_ICON }
+					children={ panelRenderFunction }
+				/>
 			);
 
 			const allTabs = screen.getAllByRole( 'tab' );
@@ -152,18 +143,11 @@ describe.each( [
 			];
 
 			render(
-				// In order for the tooltip to display properly, there needs to be
-				// `Popover.Slot` in which the `Popover` renders outside of the
-				// `TabPanel` component, otherwise the tooltip renders inline.
-				<SlotFillProvider>
-					<Component
-						tabs={ TABS_WITH_ICON }
-						children={ panelRenderFunction }
-						onSelect={ mockOnSelect }
-					/>
-					{ /* @ts-expect-error The 'Slot' component hasn't been typed yet. */ }
-					<Popover.Slot />
-				</SlotFillProvider>
+				<Component
+					tabs={ TABS_WITH_ICON }
+					children={ panelRenderFunction }
+					onSelect={ mockOnSelect }
+				/>
 			);
 
 			expect( await getSelectedTab() ).not.toHaveTextContent( 'Alpha' );

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import TextControl from '..';
 
-const meta: ComponentMeta< typeof TextControl > = {
+const meta: Meta< typeof TextControl > = {
 	component: TextControl,
 	title: 'Components/TextControl',
 	argTypes: {
@@ -31,7 +31,7 @@ const meta: ComponentMeta< typeof TextControl > = {
 };
 export default meta;
 
-const DefaultTemplate: ComponentStory< typeof TextControl > = ( {
+const DefaultTemplate: StoryFn< typeof TextControl > = ( {
 	onChange,
 	...args
 } ) => {
@@ -49,11 +49,12 @@ const DefaultTemplate: ComponentStory< typeof TextControl > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof TextControl > =
-	DefaultTemplate.bind( {} );
+export const Default: StoryFn< typeof TextControl > = DefaultTemplate.bind(
+	{}
+);
 Default.args = {};
 
-export const WithLabelAndHelpText: ComponentStory< typeof TextControl > =
+export const WithLabelAndHelpText: StoryFn< typeof TextControl > =
 	DefaultTemplate.bind( {} );
 WithLabelAndHelpText.args = {
 	...Default.args,

package/src/text-highlight/stories/index.story.tsx

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import TextHighlight from '..';
 
-const meta: ComponentMeta< typeof TextHighlight > = {
+const meta: Meta< typeof TextHighlight > = {
 	component: TextHighlight,
 	title: 'Components/TextHighlight',
 	parameters: {
@@ -20,13 +20,11 @@ const meta: ComponentMeta< typeof TextHighlight > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof TextHighlight > = ( args ) => {
+const Template: StoryFn< typeof TextHighlight > = ( args ) => {
 	return <TextHighlight { ...args } />;
 };
 
-export const Default: ComponentStory< typeof TextHighlight > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof TextHighlight > = Template.bind( {} );
 Default.args = {
 	text: 'We call the new editor Gutenberg. The entire editing experience has been rebuilt for media rich pages and posts.',
 	highlight: 'Gutenberg',

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import TextareaControl from '..';
 
-const meta: ComponentMeta< typeof TextareaControl > = {
+const meta: Meta< typeof TextareaControl > = {
 	component: TextareaControl,
 	title: 'Components/TextareaControl',
 	argTypes: {
@@ -31,7 +31,7 @@ const meta: ComponentMeta< typeof TextareaControl > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof TextareaControl > = ( {
+const Template: StoryFn< typeof TextareaControl > = ( {
 	onChange,
 	...args
 } ) => {
@@ -49,9 +49,7 @@ const Template: ComponentStory< typeof TextareaControl > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof TextareaControl > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof TextareaControl > = Template.bind( {} );
 Default.args = {
 	label: 'Text',
 	help: 'Enter some text',

package/src/theme/index.tsx

@@ -18,7 +18,6 @@ import { useCx } from '../utils';
  * Multiple `Theme` components can be nested in order to override specific theme variables.
  *
  *
- * @example
  * ```jsx
  * const Example = () => {
  *   return (

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -11,7 +11,7 @@ import Button from '../../button';
 import { generateThemeVariables, checkContrasts } from '../color-algorithms';
 import { HStack } from '../../h-stack';
 
-const meta: ComponentMeta< typeof Theme > = {
+const meta: Meta< typeof Theme > = {
 	component: Theme,
 	title: 'Components (Experimental)/Theme',
 	argTypes: {
@@ -25,7 +25,7 @@ const meta: ComponentMeta< typeof Theme > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Theme > = ( args ) => (
+const Template: StoryFn< typeof Theme > = ( args ) => (
 	<Theme { ...args }>
 		<Button variant="primary">Hello</Button>
 	</Theme>
@@ -34,7 +34,7 @@ const Template: ComponentStory< typeof Theme > = ( args ) => (
 export const Default = Template.bind( {} );
 Default.args = {};
 
-export const Nested: ComponentStory< typeof Theme > = ( args ) => (
+export const Nested: StoryFn< typeof Theme > = ( args ) => (
 	<Theme accent="tomato">
 		<Button variant="primary">Outer theme (hardcoded)</Button>
 
@@ -52,7 +52,7 @@ Nested.args = {
 /**
  * The rest of the required colors are generated based on the given accent and background colors.
  */
-export const ColorScheme: ComponentStory< typeof Theme > = ( {
+export const ColorScheme: StoryFn< typeof Theme > = ( {
 	accent,
 	background,
 } ) => {

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

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import Tip from '..';
 
-const meta: ComponentMeta< typeof Tip > = {
+const meta: Meta< typeof Tip > = {
 	component: Tip,
 	title: 'Components/Tip',
 	argTypes: {
@@ -23,11 +23,11 @@ const meta: ComponentMeta< typeof Tip > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Tip > = ( args ) => {
+const Template: StoryFn< typeof Tip > = ( args ) => {
 	return <Tip { ...args } />;
 };
 
-export const Default: ComponentStory< typeof Tip > = Template.bind( {} );
+export const Default: StoryFn< typeof Tip > = Template.bind( {} );
 Default.args = {
 	children: 'An example tip',
 };

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import ToggleControl from '..';
 
-const meta: ComponentMeta< typeof ToggleControl > = {
+const meta: Meta< typeof ToggleControl > = {
 	title: 'Components/ToggleControl',
 	component: ToggleControl,
 	argTypes: {
@@ -29,7 +29,7 @@ const meta: ComponentMeta< typeof ToggleControl > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof ToggleControl > = ( {
+const Template: StoryFn< typeof ToggleControl > = ( {
 	onChange,
 	...props
 } ) => {