@wordpress/components 25.8.2 → 25.9.0

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

@@ -22,8 +22,9 @@ import {
 	getSizeConfig,
 } from './styles/input-control-styles';
 import type { InputBaseProps, LabelPosition } from './types';
-import type { WordPressComponentProps } from '../ui/context';
-import { ContextSystemProvider } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { ContextSystemProvider } from '../context';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 
 function useUniqueId( idProp?: string ) {
 	const instanceId = useInstanceId( InputBase );
@@ -60,8 +61,11 @@ function getUIFlexProps( labelPosition?: LabelPosition ) {
 }
 
 export function InputBase(
-	{
-		__next36pxDefaultSize,
+	props: WordPressComponentProps< InputBaseProps, 'div' >,
+	ref: ForwardedRef< HTMLDivElement >
+) {
+	const {
+		__next40pxDefaultSize,
 		__unstableInputWidth,
 		children,
 		className,
@@ -74,16 +78,19 @@ export function InputBase(
 		prefix,
 		size = 'default',
 		suffix,
-		...props
-	}: WordPressComponentProps< InputBaseProps, 'div' >,
-	ref: ForwardedRef< HTMLDivElement >
-) {
+		...restProps
+	} = useDeprecated36pxDefaultSizeProp(
+		props,
+		'wp.components.InputBase',
+		'6.4'
+	);
+
 	const id = useUniqueId( idProp );
 	const hideLabel = hideLabelFromVision || ! label;
 
 	const { paddingLeft, paddingRight } = getSizeConfig( {
 		inputSize: size,
-		__next36pxDefaultSize,
+		__next40pxDefaultSize,
 	} );
 	const prefixSuffixContextValue = useMemo( () => {
 		return {
@@ -95,7 +102,7 @@ export function InputBase(
 	return (
 		// @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions.
 		<Root
-			{ ...props }
+			{ ...restProps }
 			{ ...getUIFlexProps( labelPosition ) }
 			className={ className }
 			gap={ 2 }

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

@@ -19,7 +19,7 @@ import { forwardRef, useRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import { useDragCursor } from './utils';
 import { Input } from './styles/input-control-styles';
 import { useInputControlStateReducer } from './reducer/reducer';

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

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

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

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

package/src/input-control/label.tsx

@@ -6,7 +6,7 @@ import {
 	Label as BaseLabel,
 	LabelWrapper,
 } from './styles/input-control-styles';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import type { InputControlLabelProps } from './types';
 
 export default function Label( {

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

@@ -9,12 +9,12 @@ import type { CSSProperties, ReactNode } from 'react';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
 import { Flex, FlexItem } from '../../flex';
 import { Text } from '../../text';
 import { baseLabelTypography, COLORS, CONFIG, rtl } from '../../utils';
 import type { LabelPosition, Size } from '../types';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
 
 type ContainerProps = {
 	disabled?: boolean;
@@ -80,7 +80,7 @@ export const Container = styled.div< ContainerProps >`
 `;
 
 type InputProps = {
-	__next36pxDefaultSize?: boolean;
+	__next40pxDefaultSize?: boolean;
 	disabled?: boolean;
 	inputSize?: Size;
 	isDragging?: boolean;
@@ -120,14 +120,14 @@ const fontSizeStyles = ( { inputSize: size }: InputProps ) => {
 
 export const getSizeConfig = ( {
 	inputSize: size,
-	__next36pxDefaultSize,
+	__next40pxDefaultSize,
 }: InputProps ) => {
 	// Paddings may be overridden by the custom paddings props.
 	const sizes = {
 		default: {
-			height: 36,
+			height: 40,
 			lineHeight: 1,
-			minHeight: 36,
+			minHeight: 40,
 			paddingLeft: space( 4 ),
 			paddingRight: space( 4 ),
 		},
@@ -147,7 +147,7 @@ export const getSizeConfig = ( {
 		},
 	};
 
-	if ( ! __next36pxDefaultSize ) {
+	if ( ! __next40pxDefaultSize ) {
 		sizes.default = {
 			height: 30,
 			lineHeight: 1,

package/src/input-control/test/index.js

@@ -14,8 +14,6 @@ import { useState } from '@wordpress/element';
  */
 import BaseInputControl from '../';
 
-const setupUser = () => userEvent.setup();
-
 const getInput = () => screen.getByTestId( 'input' );
 
 describe( 'InputControl', () => {
@@ -70,7 +68,7 @@ describe( 'InputControl', () => {
 
 	describe( 'Ensurance of focus for number inputs', () => {
 		it( 'should focus its input on mousedown events', async () => {
-			const user = setupUser();
+			const user = await userEvent.setup();
 			const spy = jest.fn();
 			render( <InputControl type="number" onFocus={ spy } /> );
 			const target = getInput();
@@ -87,7 +85,7 @@ describe( 'InputControl', () => {
 
 	describe( 'Value', () => {
 		it( 'should update value onChange', async () => {
-			const user = setupUser();
+			const user = await userEvent.setup();
 			const spy = jest.fn();
 			render(
 				<InputControl value="Hello" onChange={ ( v ) => spy( v ) } />
@@ -102,7 +100,7 @@ describe( 'InputControl', () => {
 		} );
 
 		it( 'should work as a controlled component given normal, falsy or nullish values', async () => {
-			const user = setupUser();
+			const user = await userEvent.setup();
 			const spy = jest.fn();
 			const heldKeySet = new Set();
 			const Example = () => {
@@ -173,7 +171,7 @@ describe( 'InputControl', () => {
 		} );
 
 		it( 'should not commit value until blurred when isPressEnterToChange is true', async () => {
-			const user = setupUser();
+			const user = await userEvent.setup();
 			const spy = jest.fn();
 			render(
 				<InputControl
@@ -193,7 +191,7 @@ describe( 'InputControl', () => {
 		} );
 
 		it( 'should commit value when blurred if value is invalid', async () => {
-			const user = setupUser();
+			const user = await userEvent.setup();
 			const spyChange = jest.fn();
 			render(
 				<InputControl

package/src/input-control/types.ts

@@ -13,7 +13,7 @@ import type { useDrag } from '@use-gesture/react';
  * Internal dependencies
  */
 import type { StateReducer } from './reducer/state';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import type { FlexProps } from '../flex/types';
 import type { BaseControlProps } from '../base-control/types';
 
@@ -27,11 +27,18 @@ export type Size = 'default' | 'small' | '__unstable-large';
 
 interface BaseProps {
 	/**
-	 * Start opting into the larger default height that will become the default size in a future version.
+	 * Deprecated. Use `__next40pxDefaultSize` instead.
 	 *
 	 * @default false
+	 * @deprecated
 	 */
 	__next36pxDefaultSize?: boolean;
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 	__unstableInputWidth?: CSSProperties[ 'width' ];
 	/**
 	 * If true, the label will only be visible to screen readers.
@@ -66,7 +73,8 @@ export type InputChangeCallback< P = {} > = (
 	extra: { event: SyntheticEvent } & P
 ) => void;
 
-export interface InputFieldProps extends BaseProps {
+export interface InputFieldProps
+	extends Omit< BaseProps, '__next36pxDefaultSize' > {
 	/**
 	 * Determines the drag axis.
 	 *

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

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

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

@@ -11,8 +11,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../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,8 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { useItemGroup } from './hook';
 import { ItemGroupContext, useItemGroupContext } from '../context';
 import { View } from '../../view';

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

@@ -1,8 +1,8 @@
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 
 /**
  * Internal dependencies

package/src/keyboard-shortcuts/README.md

@@ -11,8 +11,8 @@ It uses the [Mousetrap](https://craig.is/killing/mice) library to implement keyb
 Render `<KeyboardShortcuts />` with a `shortcuts` prop object:
 
 ```jsx
+import { useState } from 'react';
 import { KeyboardShortcuts } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyKeyboardShortcuts = () => {
 	const [ isAllSelected, setIsAllSelected ] = useState( false );

package/src/menu-item/README.md

@@ -5,8 +5,8 @@ MenuItem is a component which renders a button intended to be used in combinatio
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { MenuItem } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyMenuItem = () => {
 	const [ isActive, setIsActive ] = useState( true );
@@ -29,7 +29,7 @@ MenuItem supports the following props. Any additional props are passed through t
 
 ### `children`
 
--   Type: `WPElement`
+-   Type: `Element`
 -   Required: No
 
 Element to render as child of button.
@@ -89,7 +89,7 @@ If shortcut is a string, it is expecting the display text. If shortcut is an obj
 
 ### `suffix`
 
--   Type: `WPElement`
+-   Type: `Element`
 -   Required: No
 
 Allows for markup other than icons or shortcuts to be added to the menu item.

package/src/menu-item/index.tsx

@@ -15,7 +15,7 @@ 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 { WordPressComponentProps } from '../context';
 import type { MenuItemProps } from './types';
 
 function UnforwardedMenuItem(

package/src/menu-items-choice/README.md

@@ -54,8 +54,8 @@ Designs with a `MenuItemsChoice` option selected by default make a strong sugges
 ### Usage
 
 ```jsx
+import { useState } from 'react';
 import { MenuGroup, MenuItemsChoice } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyMenuItemsChoice = () => {
 	const [ mode, setMode ] = useState( 'visual' );

package/src/mobile/bottom-sheet/sub-sheet/README.md

@@ -8,13 +8,13 @@ BottomSheetSubSheet allows for adding controls inside the React Native bottom sh
 /**
  * External dependencies
  */
+import { useState } from 'react';
 import { SafeAreaView, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
 import { Icon, chevronRight } from '@wordpress/icons';
 import { BottomSheet } from '@wordpress/components';
 

package/src/mobile/html-text-input/index.native.js

@@ -81,7 +81,10 @@ export class HTMLTextInput extends Component {
 			title,
 		} = this.props;
 		const titleStyle = [
-			styles.htmlViewTitle,
+			getStylesFromColorScheme(
+				styles.htmlViewTitle,
+				styles.htmlViewTitleDark
+			),
 			style?.text && { color: style.text },
 		];
 		const htmlStyle = [

package/src/mobile/html-text-input/style.scss

@@ -37,3 +37,7 @@ $textColorDark: $white;
 .scrollView {
 	flex: 1;
 }
+
+.htmlViewTitleDark {
+	color: $textColorDark;
+}

package/src/mobile/html-text-input/test/__snapshots__/index.native.js.snap

@@ -14,7 +14,9 @@ exports[`HTMLTextInput HTMLTextInput renders and matches snapshot 1`] = `
         placeholderTextColor="white"
         style={
           [
-            undefined,
+            {
+              "color": "white",
+            },
             undefined,
           ]
         }

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

@@ -36,7 +36,7 @@ const AnimatedScrollView = Animated.createAnimatedComponent( ScrollView );
  * @param {Object}   props.scrollViewStyle              Additional style for the ScrollView component.
  * @param {boolean}  props.shouldPreventAutomaticScroll Whether to prevent scrolling when there's a Keyboard offset set.
  * @param {Object}   props...                           Other props to pass to the FlatList component.
- * @return {WPComponent} KeyboardAwareFlatList component.
+ * @return {Component} KeyboardAwareFlatList component.
  */
 export const KeyboardAwareFlatList = ( {
 	extraScrollHeight,

package/src/modal/README.md

@@ -120,8 +120,8 @@ The modal is used to create an accessible modal over an application.
 The following example shows you how to properly implement a modal. For the modal to properly work it's important you implement the close logic for the modal properly.
 
 ```jsx
+import { useState } from 'react';
 import { Button, Modal } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyModal = () => {
 	const [ isOpen, setOpen ] = useState( false );
@@ -221,6 +221,14 @@ This property when set to `true` will render a full screen modal.
 -   Required: No
 -   Default: `false`
 
+#### `size`: `'small' | 'medium' | 'large' | 'fill'`
+
+If this property is added it will cause the modal to render at a preset width, or expand to fill the screen. This prop will be ignored if `isFullScreen` is set to `true`.
+
+-   Required: No
+
+Note: `Modal`'s width can also be controlled by adjusting the width of the modal's contents via CSS.
+
 #### `onRequestClose`: ``
 
 This function is called to indicate that the modal should be closed.

package/src/modal/aria-helper.ts

@@ -6,8 +6,7 @@ const LIVE_REGION_ARIA_ROLES = new Set( [
 	'timer',
 ] );
 
-let hiddenElements: Element[] = [],
-	isHidden = false;
+const hiddenElementsByDepth: Element[][] = [];
 
 /**
  * Hides all elements in the body element from screen-readers except
@@ -19,31 +18,28 @@ let hiddenElements: Element[] = [],
  * we should consider removing these helper functions in favor of
  * `aria-modal="true"`.
  *
- * @param {HTMLDivElement} unhiddenElement The element that should not be hidden.
+ * @param modalElement The element that should not be hidden.
  */
-export function hideApp( unhiddenElement?: HTMLDivElement ) {
-	if ( isHidden ) {
-		return;
-	}
+export function modalize( modalElement?: HTMLDivElement ) {
 	const elements = Array.from( document.body.children );
-	elements.forEach( ( element ) => {
-		if ( element === unhiddenElement ) {
-			return;
-		}
+	const hiddenElements: Element[] = [];
+	hiddenElementsByDepth.push( hiddenElements );
+	for ( const element of elements ) {
+		if ( element === modalElement ) continue;
+
 		if ( elementShouldBeHidden( element ) ) {
 			element.setAttribute( 'aria-hidden', 'true' );
 			hiddenElements.push( element );
 		}
-	} );
-	isHidden = true;
+	}
 }
 
 /**
  * Determines if the passed element should not be hidden from screen readers.
  *
- * @param {HTMLElement} element The element that should be checked.
+ * @param element The element that should be checked.
  *
- * @return {boolean} Whether the element should not be hidden from screen-readers.
+ * @return Whether the element should not be hidden from screen-readers.
  */
 export function elementShouldBeHidden( element: Element ) {
 	const role = element.getAttribute( 'role' );
@@ -56,16 +52,12 @@ export function elementShouldBeHidden( element: Element ) {
 }
 
 /**
- * Makes all elements in the body that have been hidden by `hideApp`
- * visible again to screen-readers.
+ * Accessibly reveals the elements hidden by the latest modal.
  */
-export function showApp() {
-	if ( ! isHidden ) {
-		return;
-	}
-	hiddenElements.forEach( ( element ) => {
+export function unmodalize() {
+	const hiddenElements = hiddenElementsByDepth.pop();
+	if ( ! hiddenElements ) return;
+
+	for ( const element of hiddenElements )
 		element.removeAttribute( 'aria-hidden' );
-	} );
-	hiddenElements = [];
-	isHidden = false;
 }

package/src/modal/index.tsx

@@ -66,6 +66,7 @@ function UnforwardedModal(
 		contentLabel,
 		onKeyDown,
 		isFullScreen = false,
+		size,
 		headerActions = null,
 		__experimentalHideHeader = false,
 	} = props;
@@ -97,6 +98,13 @@ function UnforwardedModal(
 	const [ hasScrolledContent, setHasScrolledContent ] = useState( false );
 	const [ hasScrollableContent, setHasScrollableContent ] = useState( false );
 
+	let sizeClass;
+	if ( isFullScreen || size === 'fill' ) {
+		sizeClass = 'is-full-screen';
+	} else if ( size ) {
+		sizeClass = `has-size-${ size }`;
+	}
+
 	// Determines whether the Modal content is scrollable and updates the state.
 	const isContentScrollable = useCallback( () => {
 		if ( ! contentRef.current ) {
@@ -112,11 +120,15 @@ function UnforwardedModal(
 		}
 	}, [ contentRef ] );
 
+	useEffect( () => {
+		ariaHelper.modalize( ref.current );
+		return () => ariaHelper.unmodalize();
+	}, [] );
+
 	useEffect( () => {
 		openModalCount++;
 
 		if ( openModalCount === 1 ) {
-			ariaHelper.hideApp( ref.current );
 			document.body.classList.add( bodyOpenClassName );
 		}
 
@@ -125,7 +137,6 @@ function UnforwardedModal(
 
 			if ( openModalCount === 0 ) {
 				document.body.classList.remove( bodyOpenClassName );
-				ariaHelper.showApp();
 			}
 		};
 	}, [ bodyOpenClassName ] );
@@ -226,10 +237,8 @@ function UnforwardedModal(
 				<div
 					className={ classnames(
 						'components-modal__frame',
-						className,
-						{
-							'is-full-screen': isFullScreen,
-						}
+						sizeClass,
+						className
 					) }
 					style={ style }
 					ref={ useMergeRefs( [

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

@@ -61,11 +61,7 @@ const Template: StoryFn< typeof Modal > = ( { onRequestClose, ...args } ) => {
 				Open Modal
 			</Button>
 			{ isOpen && (
-				<Modal
-					onRequestClose={ closeModal }
-					style={ { maxWidth: '600px' } }
-					{ ...args }
-				>
+				<Modal onRequestClose={ closeModal } { ...args }>
 					<p>
 						Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 						sed do eiusmod tempor incididunt ut labore et magna
@@ -101,6 +97,12 @@ Default.parameters = {
 	},
 };
 
+export const WithsizeSmall: StoryFn< typeof Modal > = Template.bind( {} );
+WithsizeSmall.args = {
+	size: 'small',
+};
+WithsizeSmall.storyName = 'With size: small';
+
 const LikeButton = () => {
 	const [ isLiked, setIsLiked ] = useState( false );
 	return (

package/src/modal/style.scss

@@ -50,6 +50,26 @@
 				max-width: none;
 			}
 		}
+
+		&.has-size-small,
+		&.has-size-medium,
+		&.has-size-large {
+			width: 100%;
+		}
+
+		// The following widths were selected to align with existing baselines
+		// found elsewhere in the editor.
+		// See https://github.com/WordPress/gutenberg/pull/54471#issuecomment-1723818809
+		&.has-size-small {
+			max-width: $modal-width-small;
+		}
+		&.has-size-medium {
+			max-width: $modal-width-medium;
+		}
+		&.has-size-large {
+			max-width: $modal-width-large;
+		}
+
 	}
 
 	@include break-large() {

package/src/modal/test/index.tsx

@@ -167,8 +167,7 @@ describe( 'Modal', () => {
 		expect( onRequestClose ).not.toHaveBeenCalled();
 	} );
 
-	// TODO enable once nested modals hide outer modals.
-	it.skip( 'should accessibly hide and show siblings including outer modals', async () => {
+	it( 'should accessibly hide and show siblings including outer modals', async () => {
 		const user = userEvent.setup();
 
 		const AriaDemo = () => {

package/src/modal/types.ts

@@ -96,6 +96,15 @@ export type ModalProps = {
 	 * @default false
 	 */
 	isFullScreen?: boolean;
+	/**
+	 * If this property is added it will cause the modal to render at a preset
+	 * width, or expand to fill the screen. This prop will be ignored if
+	 * `isFullScreen` is set to `true`.
+	 *
+	 * Note: `Modal`'s width can also be controlled by adjusting the width of the
+	 * modal's contents, or via CSS using the `style` prop.
+	 */
+	size?: 'small' | 'medium' | 'large' | 'fill';
 	/**
 	 *  Handle the key down on the modal frame `div`.
 	 */