@wordpress/components 25.5.0 → 25.6.1

package/src/dimension-control/stories/{index.tsx → index.story.tsx}

@@ -31,7 +31,7 @@ export default {
 		},
 		parameters: {
 			controls: { expanded: true },
-			docs: { source: { state: 'open' } },
+			docs: { canvas: { sourceState: 'shown' } },
 		},
 	},
 } as ComponentMeta< typeof DimensionControl >;

package/src/disabled/stories/{index.tsx → index.story.tsx}

@@ -28,7 +28,7 @@ const meta: ComponentMeta< typeof Disabled > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 

package/src/divider/component.tsx

@@ -8,11 +8,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import {
-	contextConnect,
-	useContextSystem,
-	WordPressComponentProps,
-} from '../ui/context';
+import type { WordPressComponentProps } from '../ui/context';
+import { contextConnect, useContextSystem } from '../ui/context';
 import { DividerView } from './styles';
 import type { DividerProps } from './types';
 

package/src/divider/stories/{index.tsx → index.story.tsx}

@@ -26,7 +26,7 @@ const meta: ComponentMeta< typeof Divider > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

package/src/drop-zone/stories/{index.tsx → index.story.tsx}

@@ -13,7 +13,7 @@ const meta: ComponentMeta< typeof DropZone > = {
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

package/src/dropdown/dropdown-content-wrapper.tsx

@@ -6,11 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import {
-	WordPressComponentProps,
-	contextConnect,
-	useContextSystem,
-} from '../ui/context';
+import type { WordPressComponentProps } from '../ui/context';
+import { contextConnect, useContextSystem } from '../ui/context';
 import { DropdownContentWrapperDiv } from './styles';
 import type { DropdownContentWrapperProps } from './types';
 

package/src/dropdown/stories/{index.tsx → index.story.tsx}

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, Story } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -13,7 +13,6 @@ import { DropdownContentWrapper } from '../dropdown-content-wrapper';
 const meta: ComponentMeta< typeof Dropdown > = {
 	title: 'Components/Dropdown',
 	component: Dropdown,
-	subcomponents: { DropdownContentWrapper },
 	argTypes: {
 		focusOnMount: {
 			options: [ 'firstElement', true, false ],
@@ -33,7 +32,7 @@ const meta: ComponentMeta< typeof Dropdown > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Dropdown > = ( args ) => {
+const Template: Story< typeof Dropdown > = ( args ) => {
 	return (
 		<div style={ { height: 150 } }>
 			<Dropdown { ...args } />
@@ -41,7 +40,7 @@ const Template: ComponentStory< typeof Dropdown > = ( args ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof Dropdown > = Template.bind( {} );
+export const Default: Story< typeof Dropdown > = Template.bind( {} );
 Default.args = {
 	renderToggle: ( { isOpen, onToggle } ) => (
 		<Button onClick={ onToggle } aria-expanded={ isOpen } variant="primary">
@@ -55,9 +54,7 @@ Default.args = {
  * To apply more padding to the dropdown content, use the provided `<DropdownContentWrapper>`
  * convenience wrapper. A `paddingSize` of `"medium"` is suitable for relatively larger dropdowns (default is `"small"`).
  */
-export const WithMorePadding: ComponentStory< typeof Dropdown > = Template.bind(
-	{}
-);
+export const WithMorePadding: Story< typeof Dropdown > = Template.bind( {} );
 WithMorePadding.args = {
 	...Default.args,
 	renderContent: () => (
@@ -72,9 +69,7 @@ WithMorePadding.args = {
  * with a `paddingSize` of `"none"`. This can also serve as a clean foundation to add arbitrary
  * paddings, for example when child components already have padding on their own.
  */
-export const WithNoPadding: ComponentStory< typeof Dropdown > = Template.bind(
-	{}
-);
+export const WithNoPadding: Story< typeof Dropdown > = Template.bind( {} );
 WithNoPadding.args = {
 	...Default.args,
 	renderContent: () => (

package/src/dropdown-menu/stories/{index.tsx → index.story.tsx}

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, Story } from '@storybook/react';
 /**
  * Internal dependencies
  */
@@ -26,7 +26,7 @@ const meta: ComponentMeta< typeof DropdownMenu > = {
 	component: DropdownMenu,
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 	argTypes: {
 		icon: {
@@ -38,7 +38,7 @@ const meta: ComponentMeta< typeof DropdownMenu > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof DropdownMenu > = ( props ) => (
+const Template: Story< typeof DropdownMenu > = ( props ) => (
 	<div style={ { height: 150 } }>
 		<DropdownMenu { ...props } />
 	</div>

package/src/dropdown-menu-v2/stories/{index.tsx → index.story.tsx}

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, Story } from '@storybook/react';
 import styled from '@emotion/styled';
 
 /**
@@ -36,20 +36,9 @@ import { menu, wordpress } from '@wordpress/icons';
 import Icon from '../../icon';
 import { ContextSystemProvider } from '../../ui/context';
 
-const meta: ComponentMeta< typeof DropdownMenu > = {
+const meta: Meta< typeof DropdownMenu > = {
 	title: 'Components (Experimental)/DropdownMenu v2',
 	component: DropdownMenu,
-	subcomponents: {
-		DropdownMenuItem,
-		DropdownSubMenu,
-		DropdownSubMenuTrigger,
-		DropdownMenuSeparator,
-		DropdownMenuCheckboxItem,
-		DropdownMenuGroup,
-		DropdownMenuLabel,
-		DropdownMenuRadioGroup,
-		DropdownMenuRadioItem,
-	},
 	argTypes: {
 		children: { control: { type: null } },
 		trigger: { control: { type: null } },
@@ -57,7 +46,10 @@ const meta: ComponentMeta< typeof DropdownMenu > = {
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
-		docs: { source: { state: 'open', excludeDecorators: true } },
+		docs: {
+			canvas: { sourceState: 'shown' },
+			source: { excludeDecorators: true },
+		},
 	},
 	decorators: [
 		// Layout wrapper
@@ -130,7 +122,7 @@ const RadioItemsGroup = () => {
 	);
 };
 
-const Template: ComponentStory< typeof DropdownMenu > = ( props ) => (
+const Template: Story< typeof DropdownMenu > = ( props ) => (
 	<SlotFillProvider>
 		<DropdownMenu { ...props } />
 		{ /* @ts-expect-error Slot is not currently typed on Popover */ }
@@ -205,9 +197,7 @@ const toolbarVariantContextValue = {
 		variant: 'toolbar',
 	},
 };
-export const ToolbarVariant: ComponentStory< typeof DropdownMenu > = (
-	props
-) => (
+export const ToolbarVariant: Story< typeof DropdownMenu > = ( props ) => (
 	<ContextSystemProvider value={ toolbarVariantContextValue }>
 		<DropdownMenu { ...props } />
 	</ContextSystemProvider>

package/src/duotone-picker/stories/{duotone-picker.tsx → duotone-picker.story.tsx}

@@ -23,7 +23,7 @@ const meta: ComponentMeta< typeof DuotonePicker > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

package/src/duotone-picker/stories/{duotone-swatch.tsx → duotone-swatch.story.tsx}

@@ -13,7 +13,7 @@ const meta: ComponentMeta< typeof DuotoneSwatch > = {
 	component: DuotoneSwatch,
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

package/src/elevation/component.tsx

@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../ui/context';
+import { contextConnect } from '../ui/context';
 import { View } from '../view';
 import { useElevation } from './hook';
 import type { ElevationProps } from './types';

package/src/elevation/hook.ts

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { css, SerializedStyles } from '@emotion/react';
+import type { SerializedStyles } from '@emotion/react';
+import { css } from '@emotion/react';
 
 /**
  * WordPress dependencies
@@ -11,7 +12,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../ui/context';
+import { useContextSystem } from '../ui/context';
 import * as styles from './styles';
 import { CONFIG, reduceMotion } from '../utils';
 import { useCx } from '../utils/hooks/use-cx';

package/src/elevation/stories/{index.tsx → index.story.tsx}

@@ -19,7 +19,7 @@ const meta: ComponentMeta< typeof Elevation > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

package/src/external-link/stories/{index.tsx → index.story.tsx}

@@ -18,7 +18,7 @@ const meta: ComponentMeta< typeof ExternalLink > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

package/src/flex/flex/component.tsx

@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { contextConnect } from '../../ui/context';
 import { useFlex } from './hook';
 import { FlexContext } from './../context';
 import { View } from '../../view';

package/src/flex/flex/hook.ts

@@ -12,7 +12,8 @@ import deprecated from '@wordpress/deprecated';
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { useContextSystem } from '../../ui/context';
 import { useResponsiveValue } from '../../ui/utils/use-responsive-value';
 import { space } from '../../ui/utils/space';
 import * as styles from '../styles';

package/src/flex/flex-block/component.tsx

@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { contextConnect } from '../../ui/context';
 import { View } from '../../view';
 import type { FlexBlockProps } from '../types';
 import { useFlexBlock } from './hook';

package/src/flex/flex-block/hook.ts

@@ -1,7 +1,8 @@
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { useContextSystem } from '../../ui/context';
 import { useFlexItem } from '../flex-item';
 import type { FlexBlockProps } from '../types';
 

package/src/flex/flex-item/component.tsx

@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { contextConnect } from '../../ui/context';
 import { View } from '../../view';
 import { useFlexItem } from './hook';
 import type { FlexItemProps } from '../types';

package/src/flex/flex-item/hook.ts

@@ -1,12 +1,14 @@
 /**
  * External dependencies
  */
-import { css, SerializedStyles } from '@emotion/react';
+import type { SerializedStyles } from '@emotion/react';
+import { css } from '@emotion/react';
 
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { useContextSystem } from '../../ui/context';
 import { useFlexContext } from '../context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';

package/src/flex/stories/{index.tsx → index.story.tsx}

@@ -12,7 +12,6 @@ import { View } from '../../view';
 const meta: ComponentMeta< typeof Flex > = {
 	component: Flex,
 	title: 'Components/Flex',
-	subcomponents: { FlexBlock, FlexItem },
 	argTypes: {
 		align: { control: { type: 'text' } },
 		as: { control: { type: 'text' } },
@@ -30,7 +29,7 @@ const meta: ComponentMeta< typeof Flex > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

package/src/focal-point-picker/stories/{index.tsx → index.story.tsx}

@@ -22,7 +22,7 @@ const meta: ComponentMeta< typeof FocalPointPicker > = {
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

package/src/font-size-picker/stories/{index.tsx → index.story.tsx}

@@ -22,7 +22,7 @@ const meta: ComponentMeta< typeof FontSizePicker > = {
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

package/src/form-file-upload/stories/{index.tsx → index.story.tsx}

@@ -23,7 +23,7 @@ const meta: ComponentMeta< typeof FormFileUpload > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

package/src/form-toggle/stories/{index.tsx → index.story.tsx}

@@ -25,7 +25,7 @@ const meta: ComponentMeta< typeof FormToggle > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

package/src/form-token-field/stories/{index.tsx → index.story.tsx}

@@ -28,7 +28,7 @@ const meta: ComponentMeta< typeof FormTokenField > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

package/src/gradient-picker/stories/{index.tsx → index.story.tsx}

@@ -17,7 +17,7 @@ const meta: ComponentMeta< typeof GradientPicker > = {
 	component: GradientPicker,
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 		actions: { argTypesRegex: '^on.*' },
 	},
 	argTypes: {

package/src/grid/component.tsx

@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../ui/context';
+import { contextConnect } from '../ui/context';
 import { View } from '../view';
 import useGrid from './hook';
 import type { GridProps } from './types';

package/src/grid/hook.ts

@@ -11,7 +11,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../ui/context';
+import { useContextSystem } from '../ui/context';
 import { getAlignmentProps } from './utils';
 import { useResponsiveValue } from '../ui/utils/use-responsive-value';
 import CONFIG from '../utils/config-values';

package/src/grid/stories/{index.tsx → index.story.tsx}

@@ -34,7 +34,7 @@ const meta: ComponentMeta< typeof Grid > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

package/src/h-stack/component.tsx

@@ -1,7 +1,8 @@
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../ui/context';
+import { contextConnect } from '../ui/context';
 import { View } from '../view';
 import { useHStack } from './hook';
 import type { Props } from './types';

package/src/h-stack/hook.tsx

@@ -6,11 +6,8 @@ import type { ReactElement } from 'react';
 /**
  * Internal dependencies
  */
-import {
-	hasConnectNamespace,
-	useContextSystem,
-	WordPressComponentProps,
-} from '../ui/context';
+import type { WordPressComponentProps } from '../ui/context';
+import { hasConnectNamespace, useContextSystem } from '../ui/context';
 import { FlexItem, useFlex } from '../flex';
 import { getAlignmentProps } from './utils';
 import { getValidChildren } from '../ui/utils/get-valid-children';

package/src/h-stack/stories/{index.tsx → index.story.tsx}

@@ -71,7 +71,7 @@ const meta: ComponentMeta< typeof HStack > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

package/src/heading/component.tsx

@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../ui/context';
+import { contextConnect } from '../ui/context';
 import { View } from '../view';
 import { useHeading } from './hook';
 import type { HeadingProps } from './types';

package/src/heading/hook.ts

@@ -1,7 +1,8 @@
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../ui/context';
+import { useContextSystem } from '../ui/context';
 import { useText } from '../text';
 import { getHeadingFontSize } from '../ui/utils/font-size';
 import { CONFIG, COLORS } from '../utils';

package/src/heading/stories/{index.tsx → index.story.tsx}

@@ -28,7 +28,7 @@ const meta: ComponentMeta< typeof Heading > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

package/src/icon/stories/{index.tsx → index.story.tsx}

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, Story } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -20,21 +20,19 @@ const meta: ComponentMeta< typeof Icon > = {
 	component: Icon,
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
 
-const Template: ComponentStory< typeof Icon > = ( args ) => (
-	<Icon { ...args } />
-);
+const Template: Story< typeof Icon > = ( args ) => <Icon { ...args } />;
 
 export const Default = Template.bind( {} );
 Default.args = {
 	icon: wordpress,
 };
 
-export const FillColor: ComponentStory< typeof Icon > = ( args ) => {
+export const FillColor: Story< typeof Icon > = ( args ) => {
 	return (
 		<div
 			style={ {
@@ -86,7 +84,7 @@ WithAnSVG.args = {
  * as long as you are in a context where the Dashicons stylesheet is loaded. To simulate that here,
  * use the Global CSS Injector in the Storybook toolbar at the top and select the "WordPress" preset.
  */
-export const WithADashicon: ComponentStory< typeof Icon > = ( args ) => {
+export const WithADashicon: Story< typeof Icon > = ( args ) => {
 	return (
 		<VStack>
 			<Icon { ...args } />

package/src/input-control/input-base.tsx

@@ -22,7 +22,8 @@ import {
 	getSizeConfig,
 } from './styles/input-control-styles';
 import type { InputBaseProps, LabelPosition } from './types';
-import { ContextSystemProvider, WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../ui/context';
+import { ContextSystemProvider } from '../ui/context';
 
 function useUniqueId( idProp?: string ) {
 	const instanceId = useInstanceId( InputBase );

package/src/input-control/input-prefix-wrapper.tsx

@@ -7,11 +7,8 @@ import type { ForwardedRef } from 'react';
  * Internal dependencies
  */
 import { Spacer } from '../spacer';
-import {
-	WordPressComponentProps,
-	contextConnect,
-	useContextSystem,
-} from '../ui/context';
+import type { WordPressComponentProps } from '../ui/context';
+import { contextConnect, useContextSystem } from '../ui/context';
 import type { InputControlPrefixWrapperProps } from './types';
 
 function UnconnectedInputControlPrefixWrapper(

package/src/input-control/input-suffix-wrapper.tsx

@@ -7,11 +7,8 @@ import type { ForwardedRef } from 'react';
  * Internal dependencies
  */
 import { Spacer } from '../spacer';
-import {
-	WordPressComponentProps,
-	contextConnect,
-	useContextSystem,
-} from '../ui/context';
+import type { WordPressComponentProps } from '../ui/context';
+import { contextConnect, useContextSystem } from '../ui/context';
 import type { InputControlSuffixWrapperProps } from './types';
 
 function UnconnectedInputControlSuffixWrapper(

package/src/input-control/reducer/reducer.ts

@@ -11,12 +11,8 @@ import { useReducer, useLayoutEffect, useRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import {
-	InputState,
-	StateReducer,
-	initialInputControlState,
-	initialStateReducer,
-} from './state';
+import type { InputState, StateReducer } from './state';
+import { initialInputControlState, initialStateReducer } from './state';
 import * as actions from './actions';
 import type { InputChangeCallback } from '../types';