@wordpress/components 25.5.0 → 25.6.1

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

@@ -13,7 +13,6 @@ import { InputControlSuffixWrapper } from '../input-suffix-wrapper';
 const meta: ComponentMeta< typeof InputControl > = {
 	title: 'Components (Experimental)/InputControl',
 	component: InputControl,
-	subcomponents: { InputControlPrefixWrapper, InputControlSuffixWrapper },
 	argTypes: {
 		__unstableInputWidth: { control: { type: 'text' } },
 		__unstableStateReducer: { control: { type: null } },
@@ -25,7 +24,7 @@ const meta: ComponentMeta< typeof InputControl > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

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

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { css, SerializedStyles } from '@emotion/react';
+import type { SerializedStyles } from '@emotion/react';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import type { CSSProperties, ReactNode } from 'react';
 

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

@@ -8,7 +8,8 @@ import type { ForwardedRef } from 'react';
  */
 import type { ItemProps } from '../types';
 import { useItem } from './hook';
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { contextConnect } from '../../ui/context';
 import { View } from '../../view';
 
 function UnconnectedItem(

package/src/item-group/item/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 * as styles from '../styles';
 import { useItemGroupContext } from '../context';
 import { useCx } from '../../utils/hooks/use-cx';

package/src/item-group/item-group/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 { useItemGroup } from './hook';
 import { ItemGroupContext, useItemGroupContext } from '../context';
 import { View } from '../../view';

package/src/item-group/item-group/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';
 
 /**
  * Internal dependencies

package/src/item-group/stories/{index.tsx → index.story.tsx}

@@ -14,14 +14,13 @@ type ItemProps = React.ComponentPropsWithoutRef< typeof Item >;
 const meta: ComponentMeta< typeof ItemGroup > = {
 	component: ItemGroup,
 	title: 'Components (Experimental)/ItemGroup',
-	subcomponents: { Item },
 	argTypes: {
 		as: { control: { type: null } },
 		children: { control: { type: null } },
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

package/src/item-group/styles.ts

@@ -25,7 +25,7 @@ export const unstyledButton = ( as: 'a' | 'button' ) => {
 		}
 
 		&:hover {
-			color: ${ COLORS.ui.theme };
+			color: ${ COLORS.theme.accent };
 		}
 
 		&:focus {
@@ -37,7 +37,7 @@ export const unstyledButton = ( as: 'a' | 'button' ) => {
 			box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
 				var(
 					--wp-components-color-accent,
-					var( --wp-admin-theme-color, ${ COLORS.ui.theme } )
+					var( --wp-admin-theme-color, ${ COLORS.theme.accent } )
 				);
 			// Windows high contrast mode.
 			outline: 2px solid transparent;

package/src/keyboard-shortcuts/stories/{index.tsx → index.story.tsx}

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

package/src/menu-group/stories/index.story.tsx

@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import MenuGroup from '..';
+import MenuItem from '../../menu-item';
+import MenuItemsChoice from '../../menu-items-choice';
+
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+const meta: ComponentMeta< typeof MenuGroup > = {
+	title: 'Components/MenuGroup',
+	component: MenuGroup,
+	argTypes: {
+		children: { control: { type: null } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof MenuGroup > = ( args ) => {
+	return (
+		<MenuGroup { ...args }>
+			<MenuItem>Menu Item 1</MenuItem>
+			<MenuItem>Menu Item 2</MenuItem>
+		</MenuGroup>
+	);
+};
+
+export const Default: ComponentStory< typeof MenuGroup > = Template.bind( {} );
+
+const MultiGroupsTemplate: ComponentStory< typeof MenuGroup > = ( args ) => {
+	const [ mode, setMode ] = useState( 'visual' );
+	const choices = [
+		{
+			value: 'visual',
+			label: 'Visual editor',
+		},
+		{
+			value: 'text',
+			label: 'Code editor',
+		},
+	];
+
+	return (
+		<>
+			<MenuGroup label={ 'View' }>
+				<MenuItem>Top Toolbar</MenuItem>
+				<MenuItem>Spotlight Mode</MenuItem>
+				<MenuItem>Distraction Free</MenuItem>
+			</MenuGroup>
+			<MenuGroup { ...args }>
+				<MenuItemsChoice
+					choices={ choices }
+					value={ mode }
+					onSelect={ ( newMode: string ) => setMode( newMode ) }
+					onHover={ () => {} }
+				/>
+			</MenuGroup>
+		</>
+	);
+};
+
+/**
+ * When other menu items exist above or below a MenuGroup, the group
+ * should have a divider line between it and the adjacent item.
+ */
+export const WithSeperator = MultiGroupsTemplate.bind( {} );
+WithSeperator.args = {
+	...Default.args,
+	hideSeparator: false,
+	label: 'Editor',
+};

package/src/menu-item/{index.js → index.tsx}

@@ -1,7 +1,7 @@
-// @ts-nocheck
 /**
  * External dependencies
  */
+import type { ForwardedRef } from 'react';
 import classnames from 'classnames';
 
 /**
@@ -15,8 +15,13 @@ import { cloneElement, forwardRef } from '@wordpress/element';
 import Shortcut from '../shortcut';
 import Button from '../button';
 import Icon from '../icon';
+import type { WordPressComponentProps } from '../ui/context';
+import type { MenuItemProps } from './types';
 
-export function MenuItem( props, ref ) {
+export function MenuItem(
+	props: WordPressComponentProps< MenuItemProps, 'button', false >,
+	ref: ForwardedRef< HTMLButtonElement >
+) {
 	let {
 		children,
 		info,
@@ -78,4 +83,26 @@ export function MenuItem( props, ref ) {
 	);
 }
 
+/**
+ * MenuItem is a component which renders a button intended to be used in combination with the `DropdownMenu` component.
+ *
+ * ```jsx
+ * import { MenuItem } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyMenuItem = () => {
+ * 	const [ isActive, setIsActive ] = useState( true );
+ *
+ * 	return (
+ * 		<MenuItem
+ * 			icon={ isActive ? 'yes' : 'no' }
+ * 			isSelected={ isActive }
+ * 			onClick={ () => setIsActive( ( state ) => ! state ) }
+ * 		>
+ * 			Toggle
+ * 		</MenuItem>
+ * 	);
+ * };
+ * ```
+ */
 export default forwardRef( MenuItem );

package/src/menu-item/types.ts

@@ -0,0 +1,60 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { ButtonAsButtonProps } from '../button/types';
+
+export type MenuItemProps = ButtonAsButtonProps & {
+	/**
+	 * A CSS `class` to give to the container element.
+	 */
+	className?: string;
+	/**
+	 * The children elements.
+	 */
+	children?: ReactNode;
+	/**
+	 * Text to use as description for button text.
+	 */
+	info?: string;
+	/**
+	 * The icon to render. Supported values are: Dashicons (specified as
+	 * strings), functions, Component instances and `null`.
+	 *
+	 * @default null
+	 */
+	icon?: JSX.Element | null;
+	/**
+	 * Determines where to display the provided `icon`.
+	 */
+	iconPosition?: ButtonAsButtonProps[ 'iconPosition' ];
+	/**
+	 * Whether or not the menu item is currently selected.
+	 */
+	isSelected?: boolean;
+	/**
+	 * If shortcut is a string, it is expecting the display text. If shortcut is an object,
+	 * it will accept the properties of `display` (string) and `ariaLabel` (string).
+	 */
+	shortcut?: string | { display: string; ariaLabel: string };
+	/**
+	 * If you need to have selectable menu items use menuitemradio for single select,
+	 * and menuitemcheckbox for multiselect.
+	 *
+	 * @default 'menuitem'
+	 */
+	role?: string;
+	/**
+	 * Allows for markup other than icons or shortcuts to be added to the menu item.
+	 *
+	 */
+	suffix?: ReactNode;
+	/**
+	 * Human-readable label for item.
+	 */
+	label?: string;
+};

package/src/menu-items-choice/index.tsx

@@ -59,7 +59,7 @@ function MenuItemsChoice( {
 						key={ item.value }
 						role="menuitemradio"
 						disabled={ item.disabled }
-						icon={ isSelected && check }
+						icon={ isSelected ? check : null }
 						info={ item.info }
 						isSelected={ isSelected }
 						shortcut={ item.shortcut }

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

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

package/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js

@@ -59,6 +59,7 @@ const options = {
 	headerShown: false,
 	gestureEnabled: false,
 	cardStyleInterpolator: fadeConfig,
+	keyboardHandlingEnabled: false,
 };
 
 const HEIGHT_ANIMATION_DURATION = 300;

package/src/mobile/keyboard-aware-flat-list/index.ios.js

@@ -154,7 +154,7 @@ export const KeyboardAwareFlatList = ( {
 			scrollEventThrottle={ 16 }
 			style={ style }
 		>
-			<FlatList { ...props } />
+			<FlatList { ...props } scrollEnabled={ false } />
 		</AnimatedScrollView>
 	);
 };

package/src/mobile/link-picker/index.native.js

@@ -57,10 +57,8 @@ export const LinkPicker = ( {
 	onLinkPicked,
 	onCancel: cancel,
 } ) => {
-	const [ { value, clipboardUrl }, setValue ] = useState( {
-		value: initialValue,
-		clipboardUrl: '',
-	} );
+	const [ value, setValue ] = useState( initialValue );
+	const [ clipboardUrl, setClipboardUrl ] = useState( '' );
 	const directEntry = createDirectEntry( value );
 
 	// The title of a direct entry is displayed as the raw input value, but if we
@@ -74,7 +72,8 @@ export const LinkPicker = ( {
 	};
 
 	const clear = () => {
-		setValue( { value: '', clipboardUrl } );
+		setValue( '' );
+		setClipboardUrl( '' );
 	};
 
 	const omniCellStyle = usePreferredColorSchemeStyle(
@@ -89,11 +88,8 @@ export const LinkPicker = ( {
 
 	useEffect( () => {
 		getURLFromClipboard()
-			.then( ( url ) => setValue( { value, clipboardUrl: url } ) )
-			.catch( () => setValue( { value, clipboardUrl: '' } ) );
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+			.then( setClipboardUrl )
+			.catch( () => setClipboardUrl( '' ) );
 	}, [] );
 
 	// TODO: Localize the accessibility label.
@@ -115,9 +111,7 @@ export const LinkPicker = ( {
 					autoCapitalize="none"
 					autoCorrect={ false }
 					keyboardType="url"
-					onChangeValue={ ( newValue ) => {
-						setValue( { value: newValue, clipboardUrl } );
-					} }
+					onChangeValue={ setValue }
 					onSubmit={ onSubmit }
 					/* eslint-disable-next-line jsx-a11y/no-autofocus */
 					autoFocus

package/src/mobile/link-picker/test/performance/index.native.js

@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import { act, measurePerformance } from 'test/helpers';
+import Clipboard from '@react-native-clipboard/clipboard';
+
+/**
+ * Internal dependencies
+ */
+import { LinkPicker } from '../../index';
+
+describe( 'LinkPicker', () => {
+	const onLinkPicked = jest.fn();
+	const onCancel = jest.fn();
+	const clipboardResult = Promise.resolve( '' );
+	Clipboard.getString.mockReturnValue( clipboardResult );
+
+	it( 'performance is stable when clipboard results do not change', async () => {
+		const scenario = async () => {
+			// Given the clipboard result is an empty string, there are no
+			// user-facing changes to query. Thus, we must await the promise
+			// itself.
+			await act( () => clipboardResult );
+		};
+
+		await measurePerformance(
+			<LinkPicker
+				onLinkPicked={ onLinkPicked }
+				onCancel={ onCancel }
+				value=""
+			/>,
+			{ scenario }
+		);
+	} );
+} );

package/src/mobile/link-settings/test/edit.native.js

@@ -138,7 +138,6 @@ describe.each( [
 					)
 				);
 				if ( type === 'core/image' ) {
-					// Wait for side effects produced by Clipboard and link suggestions
 					fireEvent.press( subject.getByLabelText( /Custom URL/ ) );
 				}
 				await subject.findByLabelText( 'Apply' );

package/src/modal/README.md

@@ -194,6 +194,13 @@ If this property is true, it will focus the first tabbable element rendered in t
 -   Required: No
 -   Default: `true`
 
+#### headerActions
+
+An optional React node intended to contain additional actions or other elements related to the modal, for example, buttons. Content is rendered in the top right corner of the modal and to the left of the close button, if visible.
+
+-   Required: No
+-   Default: `null`
+
 #### `isDismissible`: `boolean`
 
 If this property is set to false, the modal will not display a close icon and cannot be dismissed.

package/src/modal/index.tsx

@@ -66,6 +66,7 @@ function UnforwardedModal(
 		contentLabel,
 		onKeyDown,
 		isFullScreen = false,
+		headerActions = null,
 		__experimentalHideHeader = false,
 	} = props;
 
@@ -170,13 +171,32 @@ function UnforwardedModal(
 		[ hasScrolledContent ]
 	);
 
-	const onOverlayPress: React.PointerEventHandler< HTMLDivElement > = (
-		event
-	) => {
-		if ( event.target === event.currentTarget ) {
-			event.preventDefault();
-			onRequestClose( event );
-		}
+	let pressTarget: EventTarget | null = null;
+	const overlayPressHandlers: {
+		onPointerDown: React.PointerEventHandler< HTMLDivElement >;
+		onPointerUp: React.PointerEventHandler< HTMLDivElement >;
+	} = {
+		onPointerDown: ( event ) => {
+			if ( event.isPrimary && event.target === event.currentTarget ) {
+				pressTarget = event.target;
+				// Avoids loss of focus yet also leaves `useFocusOutside`
+				// practically useless with its only potential trigger being
+				// programmatic focus movement. TODO opt for either removing
+				// the hook or enhancing it such that this isn't needed.
+				event.preventDefault();
+			}
+		},
+		// Closes the modal with two exceptions. 1. Opening the context menu on
+		// the overlay. 2. Pressing on the overlay then dragging the pointer
+		// over the modal and releasing. Due to the modal being a child of the
+		// overlay, such a gesture is a `click` on the overlay and cannot be
+		// excepted by a `click` handler. Thus the tactic of handling
+		// `pointerup` and comparing its target to that of the `pointerdown`.
+		onPointerUp: ( { target, button } ) => {
+			const isSameTarget = target === pressTarget;
+			pressTarget = null;
+			if ( button === 0 && isSameTarget ) onRequestClose();
+		},
 	};
 
 	return createPortal(
@@ -188,13 +208,7 @@ function UnforwardedModal(
 				overlayClassName
 			) }
 			onKeyDown={ handleEscapeKeyDown }
-			// Avoids loss of focus from clicking the overlay and also obviates
-			// `useFocusOutside` aside from cases of focus programmatically
-			// moving outside. TODO ideally both the hook and this handler
-			// won't be needed and one can be removed.
-			onPointerDown={
-				shouldCloseOnClickOutside ? onOverlayPress : undefined
-			}
+			{ ...( shouldCloseOnClickOutside ? overlayPressHandlers : {} ) }
 		>
 			<StyleProvider document={ document }>
 				<div
@@ -257,6 +271,7 @@ function UnforwardedModal(
 										</h1>
 									) }
 								</div>
+								{ headerActions }
 								{ isDismissible && (
 									<Button
 										onClick={ onRequestClose }

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

@@ -7,6 +7,7 @@ import type { ComponentStory, ComponentMeta } from '@storybook/react';
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
+import { starEmpty, starFilled } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -35,6 +36,9 @@ const meta: ComponentMeta< typeof Modal > = {
 		onRequestClose: {
 			action: 'onRequestClose',
 		},
+		isDismissible: {
+			control: { type: 'boolean' },
+		},
 	},
 	parameters: {
 		controls: { expanded: true },
@@ -98,3 +102,26 @@ Default.parameters = {
 		},
 	},
 };
+
+const LikeButton = () => {
+	const [ isLiked, setIsLiked ] = useState( false );
+	return (
+		<Button
+			icon={ isLiked ? starFilled : starEmpty }
+			label="Like"
+			onClick={ () => setIsLiked( ! isLiked ) }
+		/>
+	);
+};
+
+export const WithHeaderActions: ComponentStory< typeof Modal > = Template.bind(
+	{}
+);
+WithHeaderActions.args = {
+	...Default.args,
+	headerActions: <LikeButton />,
+	isDismissible: false,
+};
+WithHeaderActions.parameters = {
+	...Default.parameters,
+};

package/src/modal/test/index.tsx

@@ -115,4 +115,18 @@ describe( 'Modal', () => {
 		await user.click( modalFrame.parentElement! );
 		expect( opener ).toHaveFocus();
 	} );
+
+	it( 'should render `headerActions` React nodes', async () => {
+		render(
+			<Modal
+				headerActions={ <button>A sweet button</button> }
+				onRequestClose={ noop }
+			>
+				<p>Modal content</p>
+			</Modal>
+		);
+		expect(
+			screen.getByText( 'A sweet button', { selector: 'button' } )
+		).toBeInTheDocument();
+	} );
 } );

package/src/modal/types.ts

@@ -69,6 +69,14 @@ export type ModalProps = {
 	 * @default true
 	 */
 	focusOnMount?: Parameters< typeof useFocusOnMount >[ 0 ];
+	/**
+	 * Elements that are injected into the modal header to the left of the close button (if rendered).
+	 * Hidden if `__experimentalHideHeader` is `true`.
+	 *
+	 * @default null
+	 */
+	headerActions?: ReactNode;
+
 	/**
 	 * If this property is added, an icon will be added before the title.
 	 */

package/src/navigable-container/stories/{navigable-menu.tsx → navigable-menu.story.tsx}

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

package/src/navigable-container/stories/{tabbable-container.tsx → tabbable-container.story.tsx}

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