@wordpress/components 25.6.1 → 25.8.0

package/src/combobox-control/index.tsx

@@ -36,16 +36,18 @@ import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props'
 
 const noop = () => {};
 
+interface DetectOutsideComponentProps {
+	onFocusOutside: ( event: React.FocusEvent ) => void;
+	children?: React.ReactNode;
+}
+
 const DetectOutside = withFocusOutside(
-	class extends Component {
-		// @ts-expect-error - TODO: Should be resolved when `withFocusOutside` is refactored to TypeScript
-		handleFocusOutside( event ) {
-			// @ts-expect-error - TODO: Should be resolved when `withFocusOutside` is refactored to TypeScript
+	class extends Component< DetectOutsideComponentProps > {
+		handleFocusOutside( event: React.FocusEvent ) {
 			this.props.onFocusOutside( event );
 		}
 
 		render() {
-			// @ts-expect-error - TODO: Should be resolved when `withFocusOutside` is refactored to TypeScript
 			return this.props.children;
 		}
 	}

package/src/combobox-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
@@ -22,7 +22,7 @@ const countries = [
 	{ name: 'American Samoa', code: 'AS' },
 ];
 
-const meta: ComponentMeta< typeof ComboboxControl > = {
+const meta: Meta< typeof ComboboxControl > = {
 	title: 'Components/ComboboxControl',
 	component: ComboboxControl,
 	argTypes: {
@@ -43,7 +43,7 @@ const mapCountryOption = ( country: ( typeof countries )[ number ] ) => ( {
 
 const countryOptions = countries.map( mapCountryOption );
 
-const Template: ComponentStory< typeof ComboboxControl > = ( {
+const Template: StoryFn< typeof ComboboxControl > = ( {
 	onChange,
 	...args
 } ) => {

package/src/composite/{index.js → index.ts}

@@ -17,3 +17,6 @@ export {
 	CompositeItem,
 	useCompositeState,
 } from 'reakit';
+
+/* eslint-disable-next-line no-restricted-imports */
+export type { CompositeStateReturn as CompositeState } from 'reakit';

package/src/confirm-dialog/stories/index.story.js

@@ -87,22 +87,22 @@ const _defaultSnippet = `() => {
 
   return (
     <>
-    <ConfirmDialog
-      isOpen={ isOpen }
-      onConfirm={ handleConfirm }
-      onCancel={ handleCancel }
-    >
-      Would you like to privately publish the post now?
-    </ConfirmDialog>
+      <ConfirmDialog
+        isOpen={ isOpen }
+        onConfirm={ handleConfirm }
+        onCancel={ handleCancel }
+      >
+        Would you like to privately publish the post now?
+      </ConfirmDialog>
 
-    <Heading level={ 1 }>{ confirmVal }</Heading>
+      <Heading level={ 1 }>{ confirmVal }</Heading>
 
-    <Button variant="primary" onClick={ () => setIsOpen( true ) }>
-      Open ConfirmDialog
-    </Button>
+      <Button variant="primary" onClick={ () => setIsOpen( true ) }>
+        Open ConfirmDialog
+      </Button>
     </>
-    );
-  };`;
+  );
+};`;
 _default.args = {};
 _default.parameters = {
 	docs: {
@@ -110,7 +110,6 @@ _default.parameters = {
 			code: _defaultSnippet,
 			language: 'jsx',
 			type: 'auto',
-			format: 'true',
 		},
 	},
 };

package/src/confirm-dialog/test/index.js

@@ -1,13 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	render,
-	screen,
-	fireEvent,
-	waitForElementToBeRemoved,
-	waitFor,
-} from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -137,6 +131,7 @@ describe( 'Confirm', () => {
 			} );
 
 			it( 'should not render if dialog is closed by clicking the overlay, and the `onCancel` callback should be called', async () => {
+				const user = userEvent.setup();
 				const onCancel = jest.fn().mockName( 'onCancel()' );
 
 				render(
@@ -147,11 +142,9 @@ describe( 'Confirm', () => {
 
 				const confirmDialog = screen.getByRole( 'dialog' );
 
-				//The overlay click is handled by detecting an onBlur from the modal frame.
-				// TODO: replace with `@testing-library/user-event`
-				fireEvent.blur( confirmDialog );
-
-				await waitForElementToBeRemoved( confirmDialog );
+				// Disable reason: Semantic queries can’t reach the overlay.
+				// eslint-disable-next-line testing-library/no-node-access
+				await user.click( confirmDialog.parentElement );
 
 				expect( confirmDialog ).not.toBeInTheDocument();
 				expect( onCancel ).toHaveBeenCalled();
@@ -315,6 +308,7 @@ describe( 'Confirm', () => {
 		} );
 
 		it( 'should call the `onCancel` callback if the overlay is clicked', async () => {
+			const user = userEvent.setup();
 			const onCancel = jest.fn().mockName( 'onCancel()' );
 
 			render(
@@ -329,13 +323,11 @@ describe( 'Confirm', () => {
 
 			const confirmDialog = screen.getByRole( 'dialog' );
 
-			//The overlay click is handled by detecting an onBlur from the modal frame.
-			// TODO: replace with `@testing-library/user-event`
-			fireEvent.blur( confirmDialog );
+			// Disable reason: Semantic queries can’t reach the overlay.
+			// eslint-disable-next-line testing-library/no-node-access
+			await user.click( confirmDialog.parentElement );
 
-			// Wait for a DOM side effect here, so that the `queueBlurCheck` in the
-			// `useFocusOutside` hook properly executes its timeout task.
-			await waitFor( () => expect( onCancel ).toHaveBeenCalled() );
+			expect( onCancel ).toHaveBeenCalled();
 		} );
 
 		it( 'should call the `onCancel` callback if the `Escape` key is pressed', async () => {

package/src/custom-gradient-picker/gradient-bar/control-points.tsx

@@ -93,7 +93,7 @@ function GradientColorPickerDropdown( {
 			( {
 				placement: 'bottom',
 				offset: 8,
-			} as const ),
+			} ) as const,
 		[]
 	);
 

package/src/custom-gradient-picker/gradient-bar/test/utils.ts

@@ -13,7 +13,7 @@ describe( 'getHorizontalRelativeGradientPosition', () => {
 				( {
 					x: 0,
 					width: 1000,
-				} as DOMRect )
+				} ) as DOMRect
 		);
 
 		const containerElement = document.createElement( 'div' );
@@ -31,7 +31,7 @@ describe( 'getHorizontalRelativeGradientPosition', () => {
 				( {
 					x: 50,
 					width: 1000,
-				} as DOMRect )
+				} ) as DOMRect
 		);
 
 		const containerElement = document.createElement( 'div' );
@@ -49,7 +49,7 @@ describe( 'getHorizontalRelativeGradientPosition', () => {
 				( {
 					x: 0,
 					width: 1000,
-				} as DOMRect )
+				} ) as DOMRect
 		);
 
 		const containerElement = document.createElement( 'div' );
@@ -68,7 +68,7 @@ describe( 'getHorizontalRelativeGradientPosition', () => {
 				( {
 					x: 50,
 					width: 1000,
-				} as DOMRect )
+				} ) as DOMRect
 		);
 		const containerElement = document.createElement( 'div' );
 
@@ -86,7 +86,7 @@ describe( 'getHorizontalRelativeGradientPosition', () => {
 				( {
 					x: 50,
 					width: 1000,
-				} as DOMRect )
+				} ) as DOMRect
 		);
 
 		const containerElement = document.createElement( 'div' );

package/src/custom-gradient-picker/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,7 +12,7 @@ import { useState } from '@wordpress/element';
  */
 import CustomGradientPicker from '../';
 
-const meta: ComponentMeta< typeof CustomGradientPicker > = {
+const meta: Meta< typeof CustomGradientPicker > = {
 	title: 'Components/CustomGradientPicker',
 	component: CustomGradientPicker,
 	parameters: {
@@ -23,7 +23,7 @@ const meta: ComponentMeta< typeof CustomGradientPicker > = {
 };
 export default meta;
 
-const CustomGradientPickerWithState: ComponentStory<
+const CustomGradientPickerWithState: StoryFn<
 	typeof CustomGradientPicker
 > = ( { onChange, ...props } ) => {
 	const [ gradient, setGradient ] = useState< string >();

package/src/date-time/stories/date-time.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, useEffect } from '@wordpress/element';
 import DateTimePicker from '../date-time';
 import { daysFromNow, isWeekend } from './utils';
 
-const meta: ComponentMeta< typeof DateTimePicker > = {
+const meta: Meta< typeof DateTimePicker > = {
 	title: 'Components/DateTimePicker',
 	component: DateTimePicker,
 	argTypes: {
@@ -28,7 +28,7 @@ const meta: ComponentMeta< typeof DateTimePicker > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof DateTimePicker > = ( {
+const Template: StoryFn< typeof DateTimePicker > = ( {
 	currentDate,
 	onChange,
 	...args
@@ -49,12 +49,9 @@ const Template: ComponentStory< typeof DateTimePicker > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof DateTimePicker > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof DateTimePicker > = Template.bind( {} );
 
-export const WithEvents: ComponentStory< typeof DateTimePicker > =
-	Template.bind( {} );
+export const WithEvents: StoryFn< typeof DateTimePicker > = Template.bind( {} );
 WithEvents.args = {
 	currentDate: new Date(),
 	events: [
@@ -65,8 +62,9 @@ WithEvents.args = {
 	],
 };
 
-export const WithInvalidDates: ComponentStory< typeof DateTimePicker > =
-	Template.bind( {} );
+export const WithInvalidDates: StoryFn< typeof DateTimePicker > = Template.bind(
+	{}
+);
 WithInvalidDates.args = {
 	currentDate: new Date(),
 	isInvalidDate: isWeekend,

package/src/date-time/stories/date.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, useEffect } from '@wordpress/element';
 import DatePicker from '../date';
 import { daysFromNow, isWeekend } from './utils';
 
-const meta: ComponentMeta< typeof DatePicker > = {
+const meta: Meta< typeof DatePicker > = {
 	title: 'Components/DatePicker',
 	component: DatePicker,
 	argTypes: {
@@ -28,7 +28,7 @@ const meta: ComponentMeta< typeof DatePicker > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof DatePicker > = ( {
+const Template: StoryFn< typeof DatePicker > = ( {
 	currentDate,
 	onChange,
 	...args
@@ -49,11 +49,9 @@ const Template: ComponentStory< typeof DatePicker > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof DatePicker > = Template.bind( {} );
+export const Default: StoryFn< typeof DatePicker > = Template.bind( {} );
 
-export const WithEvents: ComponentStory< typeof DatePicker > = Template.bind(
-	{}
-);
+export const WithEvents: StoryFn< typeof DatePicker > = Template.bind( {} );
 WithEvents.args = {
 	currentDate: new Date(),
 	events: [
@@ -64,8 +62,9 @@ WithEvents.args = {
 	],
 };
 
-export const WithInvalidDates: ComponentStory< typeof DatePicker > =
-	Template.bind( {} );
+export const WithInvalidDates: StoryFn< typeof DatePicker > = Template.bind(
+	{}
+);
 WithInvalidDates.args = {
 	currentDate: new Date(),
 	isInvalidDate: isWeekend,

package/src/date-time/stories/time.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, useEffect } from '@wordpress/element';
  */
 import TimePicker from '../time';
 
-const meta: ComponentMeta< typeof TimePicker > = {
+const meta: Meta< typeof TimePicker > = {
 	title: 'Components/TimePicker',
 	component: TimePicker,
 	argTypes: {
@@ -27,7 +27,7 @@ const meta: ComponentMeta< typeof TimePicker > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof TimePicker > = ( {
+const Template: StoryFn< typeof TimePicker > = ( {
 	currentTime,
 	onChange,
 	...args
@@ -48,4 +48,4 @@ const Template: ComponentStory< typeof TimePicker > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof TimePicker > = Template.bind( {} );
+export const Default: StoryFn< typeof TimePicker > = Template.bind( {} );

package/src/date-time/time/timezone.tsx

@@ -38,7 +38,7 @@ const TimeZone = () => {
 			: `(${ zoneAbbr }) ${ timezone.string.replace( '_', ' ' ) }`;
 
 	return (
-		<Tooltip position="top center" text={ timezoneDetail }>
+		<Tooltip placement="top" text={ timezoneDetail }>
 			<StyledComponent className="components-datetime__timezone">
 				{ zoneAbbr }
 			</StyledComponent>

package/src/dimension-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';
 /**
  * Internal dependencies
  */
@@ -34,9 +34,9 @@ export default {
 			docs: { canvas: { sourceState: 'shown' } },
 		},
 	},
-} as ComponentMeta< typeof DimensionControl >;
+} as Meta< typeof DimensionControl >;
 
-const Template: ComponentStory< typeof DimensionControl > = ( args ) => (
+const Template: StoryFn< typeof DimensionControl > = ( args ) => (
 	<DimensionControl { ...args } />
 );
 

package/src/disabled/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
@@ -17,7 +17,7 @@ import TextControl from '../../text-control/';
 import TextareaControl from '../../textarea-control/';
 import { VStack } from '../../v-stack/';
 
-const meta: ComponentMeta< typeof Disabled > = {
+const meta: Meta< typeof Disabled > = {
 	title: 'Components/Disabled',
 	component: Disabled,
 	argTypes: {
@@ -66,7 +66,7 @@ const Form = () => {
 	);
 };
 
-export const Default: ComponentStory< typeof Disabled > = ( args ) => {
+export const Default: StoryFn< typeof Disabled > = ( args ) => {
 	return (
 		<Disabled { ...args }>
 			<Form />
@@ -77,7 +77,7 @@ Default.args = {
 	isDisabled: true,
 };
 
-export const ContentEditable: ComponentStory< typeof Disabled > = ( args ) => {
+export const ContentEditable: StoryFn< typeof Disabled > = ( args ) => {
 	return (
 		<Disabled { ...args }>
 			<div contentEditable tabIndex={ 0 }>

package/src/divider/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
@@ -10,7 +10,7 @@ import { Text } from '../../text';
 import { Divider } from '..';
 import { Flex } from '../../flex';
 
-const meta: ComponentMeta< typeof Divider > = {
+const meta: Meta< typeof Divider > = {
 	component: Divider,
 	title: 'Components (Experimental)/Divider',
 	argTypes: {
@@ -31,7 +31,7 @@ const meta: ComponentMeta< typeof Divider > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Divider > = ( args ) => (
+const Template: StoryFn< typeof Divider > = ( args ) => (
 	<div>
 		<Text>Some text before the divider</Text>
 		<Divider { ...args } />
@@ -39,19 +39,19 @@ const Template: ComponentStory< typeof Divider > = ( args ) => (
 	</div>
 );
 
-export const Horizontal: ComponentStory< typeof Divider > = Template.bind( {} );
+export const Horizontal: StoryFn< typeof Divider > = Template.bind( {} );
 Horizontal.args = {
 	margin: '2',
 };
 
-export const Vertical: ComponentStory< typeof Divider > = Template.bind( {} );
+export const Vertical: StoryFn< typeof Divider > = Template.bind( {} );
 Vertical.args = {
 	...Horizontal.args,
 	orientation: 'vertical',
 };
 
 // Inside a `flex` container, the divider will need to be `stretch` aligned in order to be visible.
-export const InFlexContainer: ComponentStory< typeof Divider > = ( args ) => {
+export const InFlexContainer: StoryFn< typeof Divider > = ( args ) => {
 	return (
 		<Flex align="stretch">
 			<Text>

package/src/draggable/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 { DragEvent } from 'react';
 
 /**
@@ -16,7 +16,7 @@ import { Icon, more } from '@wordpress/icons';
  */
 import Draggable from '..';
 
-const meta: ComponentMeta< typeof Draggable > = {
+const meta: Meta< typeof Draggable > = {
 	component: Draggable,
 	title: 'Components/Draggable',
 	argTypes: {
@@ -31,7 +31,7 @@ const meta: ComponentMeta< typeof Draggable > = {
 };
 export default meta;
 
-const DefaultTemplate: ComponentStory< typeof Draggable > = ( args ) => {
+const DefaultTemplate: StoryFn< typeof Draggable > = ( args ) => {
 	const [ isDragging, setDragging ] = useState( false );
 	const instanceId = useInstanceId( DefaultTemplate );
 
@@ -100,9 +100,7 @@ const DefaultTemplate: ComponentStory< typeof Draggable > = ( args ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof Draggable > = DefaultTemplate.bind(
-	{}
-);
+export const Default: StoryFn< typeof Draggable > = DefaultTemplate.bind( {} );
 Default.args = {};
 
 /**
@@ -112,7 +110,7 @@ Default.args = {};
  * For example, when the element's parent sets a `z-index` value that would cause the dragged
  * element to be rendered behind other elements.
  */
-export const AppendElementToOwnerDocument: ComponentStory< typeof Draggable > =
+export const AppendElementToOwnerDocument: StoryFn< typeof Draggable > =
 	DefaultTemplate.bind( {} );
 AppendElementToOwnerDocument.args = {
 	appendToOwnerDocument: true,

package/src/drop-zone/stories/index.story.tsx

@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 /**
  * Internal dependencies
  */
 import DropZone from '..';
 
-const meta: ComponentMeta< typeof DropZone > = {
+const meta: Meta< typeof DropZone > = {
 	component: DropZone,
 	title: 'Components/DropZone',
 	parameters: {
@@ -18,7 +18,7 @@ const meta: ComponentMeta< typeof DropZone > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof DropZone > = ( props ) => {
+const Template: StoryFn< typeof DropZone > = ( props ) => {
 	return (
 		<div style={ { background: 'lightgray', padding: 16 } }>
 			Drop something here

package/src/dropdown/README.md

@@ -44,6 +44,12 @@ If you want to target the dropdown menu for styling purposes, you need to provid
 
 -   Required: No
 
+### `defaultOpen`: `boolean`
+
+The open state of the dropdown when initially rendered. Use when you do not need to control its open state. It will be overridden by the `open` prop if it is specified on the component's first render.
+
+-   Required: No
+
 ### `expandOnMobile`: `boolean`
 
 Opt-in prop to show popovers fullscreen on mobile.
@@ -74,11 +80,15 @@ A callback invoked when the popover should be closed.
 
 -   Required: No
 
-### `onToggle`: `( willOpen: boolean ) => void`
+### `open`: `boolean`
 
-A callback invoked when the state of the popover changes from open to closed and vice versa.
+The controlled open state of the dropdown. Must be used in conjunction with `onToggle`.
+
+-   Required: No
+
+### `onToggle`: `( willOpen: boolean ) => void`
 
-The callback receives a boolean as a parameter. If `true`, the popover will open. If `false`, the popover will close.
+A callback invoked when the state of the dropdown changes from open to closed and vice versa.
 
 -   Required: No