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

package/src/toggle-group-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
@@ -23,8 +23,10 @@ import type {
 	ToggleGroupControlProps,
 } from '../types';
 
-const meta: ComponentMeta< typeof ToggleGroupControl > = {
+const meta: Meta< typeof ToggleGroupControl > = {
 	component: ToggleGroupControl,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { ToggleGroupControlOption, ToggleGroupControlOptionIcon },
 	title: 'Components (Experimental)/ToggleGroupControl',
 	argTypes: {
 		help: { control: { type: 'text' } },
@@ -38,7 +40,7 @@ const meta: ComponentMeta< typeof ToggleGroupControl > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof ToggleGroupControl > = ( {
+const Template: StoryFn< typeof ToggleGroupControl > = ( {
 	onChange,
 	...props
 } ) => {
@@ -72,8 +74,9 @@ const mapPropsToOptionIconComponent = ( {
 	<ToggleGroupControlOptionIcon value={ value } key={ value } { ...props } />
 );
 
-export const Default: ComponentStory< typeof ToggleGroupControl > =
-	Template.bind( {} );
+export const Default: StoryFn< typeof ToggleGroupControl > = Template.bind(
+	{}
+);
 Default.args = {
 	children: [
 		{ value: 'left', label: 'Left' },
@@ -90,8 +93,9 @@ Default.args = {
  * The `aria-label` will be used in the tooltip if provided. Otherwise, the
  * `label` will be used.
  */
-export const WithTooltip: ComponentStory< typeof ToggleGroupControl > =
-	Template.bind( {} );
+export const WithTooltip: StoryFn< typeof ToggleGroupControl > = Template.bind(
+	{}
+);
 WithTooltip.args = {
 	...Default.args,
 	children: [
@@ -114,8 +118,9 @@ WithTooltip.args = {
  * The `ToggleGroupControlOptionIcon` component can be used for icon options. A `label` is required
  * on each option for accessibility, which will be shown in a tooltip.
  */
-export const WithIcons: ComponentStory< typeof ToggleGroupControl > =
-	Template.bind( {} );
+export const WithIcons: StoryFn< typeof ToggleGroupControl > = Template.bind(
+	{}
+);
 WithIcons.args = {
 	...Default.args,
 	children: [
@@ -128,8 +133,9 @@ WithIcons.args = {
 /**
  * When the `isDeselectable` prop is true, the option can be deselected by clicking on it again.
  */
-export const Deselectable: ComponentStory< typeof ToggleGroupControl > =
-	Template.bind( {} );
+export const Deselectable: StoryFn< typeof ToggleGroupControl > = Template.bind(
+	{}
+);
 Deselectable.args = {
 	...WithIcons.args,
 	isDeselectable: true,

package/src/toolbar/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
@@ -37,9 +37,19 @@ import {
 } from '..';
 import DropdownMenu from '../../dropdown-menu';
 
-const meta: ComponentMeta< typeof Toolbar > = {
+const meta: Meta< typeof Toolbar > = {
 	title: 'Components/Toolbar',
 	component: Toolbar,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		ToolbarButton,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		ToolbarGroup,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		ToolbarItem,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		ToolbarDropdownMenu,
+	},
 	argTypes: {
 		children: { control: { type: null } },
 	},
@@ -59,7 +69,7 @@ function InlineImageIcon() {
 	);
 }
 
-const Template: ComponentStory< typeof Toolbar > = ( props ) => (
+const Template: StoryFn< typeof Toolbar > = ( props ) => (
 	<div style={ { height: 280 } }>
 		<Toolbar { ...props } />
 	</div>

package/src/tools-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';
 import styled from '@emotion/styled';
 
 /**
@@ -25,9 +25,11 @@ import Panel from '../../panel';
 import UnitControl from '../../unit-control';
 import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
 
-const meta: ComponentMeta< typeof ToolsPanel > = {
+const meta: Meta< typeof ToolsPanel > = {
 	title: 'Components (Experimental)/ToolsPanel',
 	component: ToolsPanel,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { ToolsPanelItem },
 	argTypes: {
 		as: { control: { type: null } },
 		children: { control: { type: null } },
@@ -44,7 +46,7 @@ const meta: ComponentMeta< typeof ToolsPanel > = {
 };
 export default meta;
 
-export const Default: ComponentStory< typeof ToolsPanel > = ( {
+export const Default: StoryFn< typeof ToolsPanel > = ( {
 	resetAll: resetAllProp,
 	...props
 } ) => {
@@ -136,7 +138,7 @@ Default.args = {
 	label: 'Tools Panel (default example)',
 };
 
-export const WithNonToolsPanelItems: ComponentStory< typeof ToolsPanel > = ( {
+export const WithNonToolsPanelItems: StoryFn< typeof ToolsPanel > = ( {
 	resetAll: resetAllProp,
 	...props
 } ) => {
@@ -191,9 +193,10 @@ WithNonToolsPanelItems.args = {
 	label: 'ToolsPanel (with non-menu items)',
 };
 
-export const WithOptionalItemsPlusIcon: ComponentStory<
-	typeof ToolsPanel
-> = ( { resetAll: resetAllProp, ...props } ) => {
+export const WithOptionalItemsPlusIcon: StoryFn< typeof ToolsPanel > = ( {
+	resetAll: resetAllProp,
+	...props
+} ) => {
 	const [
 		isFirstToolsPanelItemShownByDefault,
 		setIsFirstToolsPanelItemShownByDefault,
@@ -294,7 +297,7 @@ WithOptionalItemsPlusIcon.args = {
 
 const { Fill: ToolsPanelItems, Slot } = createSlotFill( 'ToolsPanelSlot' );
 
-export const WithSlotFillItems: ComponentStory< typeof ToolsPanel > = ( {
+export const WithSlotFillItems: StoryFn< typeof ToolsPanel > = ( {
 	resetAll: resetAllProp,
 	panelId,
 	...props
@@ -392,9 +395,11 @@ WithSlotFillItems.args = {
 	panelId: 'unique-tools-panel-id',
 };
 
-export const WithConditionalDefaultControl: ComponentStory<
-	typeof ToolsPanel
-> = ( { resetAll: resetAllProp, panelId, ...props } ) => {
+export const WithConditionalDefaultControl: StoryFn< typeof ToolsPanel > = ( {
+	resetAll: resetAllProp,
+	panelId,
+	...props
+} ) => {
 	const [ attributes, setAttributes ] = useState< {
 		height?: string;
 		scale?: React.ReactText;
@@ -488,7 +493,7 @@ WithConditionalDefaultControl.args = {
 	panelId: 'unique-tools-panel-id',
 };
 
-export const WithConditionallyRenderedControl: ComponentStory<
+export const WithConditionallyRenderedControl: StoryFn<
 	typeof ToolsPanel
 > = ( { resetAll: resetAllProp, panelId, ...props } ) => {
 	const [ attributes, setAttributes ] = useState< {

package/src/tools-panel/tools-panel/component.tsx

@@ -48,7 +48,6 @@ const UnconnectedToolsPanel = (
  * by a header. The header includes a dropdown menu which is automatically
  * generated from the panel's inner `ToolsPanelItems`.
  *
- * @example
  * ```jsx
  * import { __ } from '@wordpress/i18n';
  * import {

package/src/tools-panel/tools-panel-header/component.tsx

@@ -214,6 +214,9 @@ const ToolsPanelHeader = (
 							<MenuGroup>
 								<MenuItem
 									aria-disabled={ ! canResetAll }
+									// @ts-expect-error - TODO: If this "tertiary" style is something we really want to allow on MenuItem,
+									// we should rename it and explicitly allow it as an official API. All the other Button variants
+									// don't make sense in a MenuItem context, and should be disallowed.
 									variant={ 'tertiary' }
 									onClick={ () => {
 										if ( canResetAll ) {

package/src/tree-grid/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
@@ -15,9 +15,11 @@ import TreeGrid, { TreeGridRow, TreeGridCell } from '..';
 import { Button } from '../../button';
 import InputControl from '../../input-control';
 
-const meta: ComponentMeta< typeof TreeGrid > = {
+const meta: Meta< typeof TreeGrid > = {
 	title: 'Components (Experimental)/TreeGrid',
 	component: TreeGrid,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { TreeGridRow, TreeGridCell },
 	argTypes: {
 		children: { control: { type: null } },
 	},
@@ -133,7 +135,7 @@ const Rows = ( {
 	);
 };
 
-const Template: ComponentStory< typeof TreeGrid > = ( args ) => (
+const Template: StoryFn< typeof TreeGrid > = ( args ) => (
 	<TreeGrid { ...args } />
 );
 

package/src/tree-select/index.tsx

@@ -27,7 +27,6 @@ function getSelectOptions(
 /**
  * TreeSelect component is used to generate select input fields.
  *
- * @example
  * ```jsx
  * import { TreeSelect } from '@wordpress/components';
  * import { useState } from '@wordpress/element';

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { ComponentProps } from 'react';
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import TreeSelect from '../';
 
-const meta: ComponentMeta< typeof TreeSelect > = {
+const meta: Meta< typeof TreeSelect > = {
 	title: 'Components/TreeSelect',
 	component: TreeSelect,
 	argTypes: {
@@ -33,7 +33,7 @@ const meta: ComponentMeta< typeof TreeSelect > = {
 
 export default meta;
 
-const TreeSelectWithState: ComponentStory< typeof TreeSelect > = ( props ) => {
+const TreeSelectWithState: StoryFn< typeof TreeSelect > = ( props ) => {
 	const [ selection, setSelection ] =
 		useState< ComponentProps< typeof TreeSelect >[ 'selectedId' ] >();
 

package/src/truncate/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 { Truncate } from '..';
 
-const meta: ComponentMeta< typeof Truncate > = {
+const meta: Meta< typeof Truncate > = {
 	component: Truncate,
 	title: 'Components (Experimental)/Truncate',
 	argTypes: {
@@ -27,19 +27,17 @@ export default meta;
 const defaultText =
 	'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis dictum tortor, eu tincidunt justo scelerisque tincidunt. Duis semper dui id augue malesuada, ut feugiat nisi aliquam. Vestibulum venenatis diam sem, finibus dictum massa semper in. Nulla facilisi. Nunc vulputate faucibus diam, in lobortis arcu ornare vel. In dignissim nunc sed facilisis finibus. Etiam imperdiet mattis arcu, sed rutrum sapien blandit gravida. Aenean sollicitudin neque eget enim blandit, sit amet rutrum leo vehicula. Nunc malesuada ultricies eros ut faucibus. Aliquam erat volutpat. Nulla nec feugiat risus. Vivamus iaculis dui aliquet ante ultricies feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus nec pretium velit, sit amet consectetur ante. Praesent porttitor ex eget fermentum mattis.';
 
-const Template: ComponentStory< typeof Truncate > = ( args ) => {
+const Template: StoryFn< typeof Truncate > = ( args ) => {
 	return <Truncate { ...args } />;
 };
 
-export const Default: ComponentStory< typeof Truncate > = Template.bind( {} );
+export const Default: StoryFn< typeof Truncate > = Template.bind( {} );
 Default.args = {
 	numberOfLines: 2,
 	children: defaultText,
 };
 
-export const CharacterCount: ComponentStory< typeof Truncate > = Template.bind(
-	{}
-);
+export const CharacterCount: StoryFn< typeof Truncate > = Template.bind( {} );
 CharacterCount.args = {
 	limit: 23,
 	children: defaultText,

package/src/unit-control/index.tsx

@@ -223,7 +223,6 @@ function UnforwardedUnitControl(
  * `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).
  *
  *
- * @example
  * ```jsx
  * import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
  * import { useState } from '@wordpress/element';

package/src/unit-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
@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 import { UnitControl } from '../';
 import { CSS_UNITS } from '../utils';
 
-const meta: ComponentMeta< typeof UnitControl > = {
+const meta: Meta< typeof UnitControl > = {
 	component: UnitControl,
 	title: 'Components (Experimental)/UnitControl',
 	argTypes: {
@@ -35,7 +35,7 @@ const meta: ComponentMeta< typeof UnitControl > = {
 };
 export default meta;
 
-const DefaultTemplate: ComponentStory< typeof UnitControl > = ( {
+const DefaultTemplate: StoryFn< typeof UnitControl > = ( {
 	onChange,
 	...args
 } ) => {
@@ -53,8 +53,9 @@ const DefaultTemplate: ComponentStory< typeof UnitControl > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof UnitControl > =
-	DefaultTemplate.bind( {} );
+export const Default: StoryFn< typeof UnitControl > = DefaultTemplate.bind(
+	{}
+);
 Default.args = {
 	label: 'Label',
 };
@@ -64,7 +65,7 @@ Default.args = {
  * will not fire while a new value is typed in the input field (you can verify this
  * behavior by inspecting the console's output).
  */
-export const PressEnterToChange: ComponentStory< typeof UnitControl > =
+export const PressEnterToChange: StoryFn< typeof UnitControl > =
 	DefaultTemplate.bind( {} );
 PressEnterToChange.args = {
 	...Default.args,
@@ -75,7 +76,7 @@ PressEnterToChange.args = {
  * Most of `NumberControl`'s props can be passed to `UnitControl`, and they will
  * affect its numeric input field.
  */
-export const TweakingTheNumberInput: ComponentStory< typeof UnitControl > =
+export const TweakingTheNumberInput: StoryFn< typeof UnitControl > =
 	DefaultTemplate.bind( {} );
 TweakingTheNumberInput.args = {
 	...Default.args,
@@ -88,7 +89,7 @@ TweakingTheNumberInput.args = {
 /**
  * When only one unit is available, the unit selection dropdown becomes static text.
  */
-export const WithSingleUnit: ComponentStory< typeof UnitControl > =
+export const WithSingleUnit: StoryFn< typeof UnitControl > =
 	DefaultTemplate.bind( {} );
 WithSingleUnit.args = {
 	...Default.args,
@@ -100,7 +101,7 @@ WithSingleUnit.args = {
  * if the `isResetValueOnUnitChange` is set to `true`, the input's quantity is
  * reset to the new unit's default value.
  */
-export const WithCustomUnits: ComponentStory< typeof UnitControl > = ( {
+export const WithCustomUnits: StoryFn< typeof UnitControl > = ( {
 	onChange,
 	...args
 } ) => {

package/src/utils/hooks/use-cx.ts

@@ -25,7 +25,7 @@ const isSerializedStyles = ( o: any ): o is SerializedStyles =>
  * `cx` normally knows how to handle. It also hooks into the Emotion
  * Cache, allowing `css` calls to work inside iframes.
  *
- * @example
+ * ```jsx
  * import { css } from '@emotion/react';
  *
  * const styles = css`
@@ -39,6 +39,7 @@ const isSerializedStyles = ( o: any ): o is SerializedStyles =>
  *
  * 	return <span className={classes} {...props} />;
  * }
+ * ```
  */
 export const useCx = () => {
 	const cache = useEmotionCache();

package/src/v-stack/stories/e2e/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,13 +9,13 @@ import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import { View } from '../../../view';
 import { VStack } from '../..';
 
-const meta: ComponentMeta< typeof VStack > = {
+const meta: Meta< typeof VStack > = {
 	component: VStack,
 	title: 'Components (Experimental)/VStack',
 };
 export default meta;
 
-const Template: ComponentStory< typeof VStack > = ( props ) => {
+const Template: StoryFn< typeof VStack > = ( props ) => {
 	return (
 		<VStack
 			{ ...props }
@@ -30,7 +30,7 @@ const Template: ComponentStory< typeof VStack > = ( props ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof VStack > = Template.bind( {} );
+export const Default: StoryFn< typeof VStack > = Template.bind( {} );
 Default.args = {
 	spacing: 3,
 };

package/src/v-stack/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
@@ -23,7 +23,7 @@ const ALIGNMENTS = {
 	stretch: 'stretch',
 };
 
-const meta: ComponentMeta< typeof VStack > = {
+const meta: Meta< typeof VStack > = {
 	component: VStack,
 	title: 'Components (Experimental)/VStack',
 	argTypes: {
@@ -44,7 +44,7 @@ const meta: ComponentMeta< typeof VStack > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof VStack > = ( props ) => {
+const Template: StoryFn< typeof VStack > = ( props ) => {
 	return (
 		<VStack
 			{ ...props }

package/src/view/component.tsx

@@ -14,7 +14,6 @@ import type { ViewProps } from './types';
  * `View` is a core component that renders everything in the library.
  * It is the principle component in the entire library.
  *
- * @example
  * ```jsx
  * import { View } from `@wordpress/components`;
  *

package/src/view/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 { View } from '..';
 
-const meta: ComponentMeta< typeof View > = {
+const meta: Meta< typeof View > = {
 	component: View,
 	title: 'Components (Experimental)/View',
 	argTypes: {
@@ -22,11 +22,11 @@ const meta: ComponentMeta< typeof View > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof View > = ( args ) => {
+const Template: StoryFn< typeof View > = ( args ) => {
 	return <View { ...args } />;
 };
 
-export const Default: ComponentStory< typeof View > = Template.bind( {} );
+export const Default: StoryFn< typeof View > = Template.bind( {} );
 Default.args = {
 	children: 'An example tip',
 };

package/src/visually-hidden/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 { VisuallyHidden } from '..';
 
-const meta: ComponentMeta< typeof VisuallyHidden > = {
+const meta: Meta< typeof VisuallyHidden > = {
 	component: VisuallyHidden,
 	title: 'Components/VisuallyHidden',
 	argTypes: {
@@ -24,7 +24,7 @@ const meta: ComponentMeta< typeof VisuallyHidden > = {
 };
 export default meta;
 
-export const Default: ComponentStory< typeof VisuallyHidden > = ( args ) => (
+export const Default: StoryFn< typeof VisuallyHidden > = ( args ) => (
 	<>
 		<VisuallyHidden as="span" { ...args }>
 			This should not show.
@@ -39,7 +39,7 @@ export const Default: ComponentStory< typeof VisuallyHidden > = ( args ) => (
 	</>
 );
 
-export const WithForwardedProps: ComponentStory< typeof VisuallyHidden > = (
+export const WithForwardedProps: StoryFn< typeof VisuallyHidden > = (
 	args
 ) => (
 	<>
@@ -52,9 +52,9 @@ export const WithForwardedProps: ComponentStory< typeof VisuallyHidden > = (
 	</>
 );
 
-export const WithAdditionalClassNames: ComponentStory<
-	typeof VisuallyHidden
-> = ( args ) => (
+export const WithAdditionalClassNames: StoryFn< typeof VisuallyHidden > = (
+	args
+) => (
 	<>
 		Additional class names passed to VisuallyHidden extend the component
 		class name.{ ' ' }

package/src/z-stack/stories/index.story.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { CSSProperties } from 'react';
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -11,7 +11,7 @@ import { Elevation } from '../../elevation';
 import { View } from '../../view';
 import { ZStack } from '..';
 
-const meta: ComponentMeta< typeof ZStack > = {
+const meta: Meta< typeof ZStack > = {
 	component: ZStack,
 	title: 'Components (Experimental)/ZStack',
 	argTypes: {
@@ -52,7 +52,7 @@ const Avatar = ( {
 	);
 };
 
-const Template: ComponentStory< typeof ZStack > = ( args ) => {
+const Template: StoryFn< typeof ZStack > = ( args ) => {
 	return (
 		<ZStack { ...args }>
 			<Avatar backgroundColor="#444" />
@@ -63,7 +63,7 @@ const Template: ComponentStory< typeof ZStack > = ( args ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof ZStack > = Template.bind( {} );
+export const Default: StoryFn< typeof ZStack > = Template.bind( {} );
 Default.args = {
 	offset: 20,
 };