@wordpress/components 20.0.2-next.957ca95e4c.0 → 21.0.1

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

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { shallow, mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
@@ -23,28 +24,28 @@ describe( 'DimensionControl', () => {
 
 	describe( 'rendering', () => {
 		it( 'renders with defaults', () => {
-			const wrapper = shallow(
+			const { container } = render(
 				<DimensionControl
 					instanceId={ instanceId }
 					label={ 'Padding' }
 				/>
 			);
-			expect( wrapper ).toMatchSnapshot();
+			expect( container ).toMatchSnapshot();
 		} );
 
 		it( 'renders with icon and default icon label', () => {
-			const wrapper = shallow(
+			const { container } = render(
 				<DimensionControl
 					instanceId={ instanceId }
 					label={ 'Margin' }
 					icon={ plus }
 				/>
 			);
-			expect( wrapper ).toMatchSnapshot();
+			expect( container ).toMatchSnapshot();
 		} );
 
 		it( 'renders with icon and custom icon label', () => {
-			const wrapper = shallow(
+			const { container } = render(
 				<DimensionControl
 					instanceId={ instanceId }
 					label={ 'Margin' }
@@ -52,7 +53,7 @@ describe( 'DimensionControl', () => {
 					iconLabel={ 'Tablet Devices' }
 				/>
 			);
-			expect( wrapper ).toMatchSnapshot();
+			expect( container ).toMatchSnapshot();
 		} );
 
 		it( 'renders with custom sizes', () => {
@@ -74,20 +75,24 @@ describe( 'DimensionControl', () => {
 				},
 			];
 
-			const wrapper = shallow(
+			const { container } = render(
 				<DimensionControl
 					instanceId={ instanceId }
 					label={ 'Custom Dimension' }
 					sizes={ customSizes }
 				/>
 			);
-			expect( wrapper ).toMatchSnapshot();
+			expect( container ).toMatchSnapshot();
 		} );
 	} );
 
 	describe( 'callbacks', () => {
-		it( 'should call onChange handler with correct args on size change', () => {
-			const wrapper = mount(
+		it( 'should call onChange handler with correct args on size change', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			render(
 				<DimensionControl
 					instanceId={ instanceId }
 					label={ 'Padding' }
@@ -95,31 +100,23 @@ describe( 'DimensionControl', () => {
 				/>
 			);
 
-			wrapper
-				.find( 'select' )
-				.at( 0 )
-				.simulate( 'change', {
-					target: {
-						value: 'small',
-					},
-				} );
-
-			wrapper
-				.find( 'select' )
-				.at( 0 )
-				.simulate( 'change', {
-					target: {
-						value: 'medium',
-					},
-				} );
+			await user.selectOptions( screen.getByRole( 'combobox' ), 'small' );
+			await user.selectOptions(
+				screen.getByRole( 'combobox' ),
+				'medium'
+			);
 
 			expect( onChangeHandler ).toHaveBeenCalledTimes( 2 );
 			expect( onChangeHandler.mock.calls[ 0 ][ 0 ] ).toEqual( 'small' );
 			expect( onChangeHandler.mock.calls[ 1 ][ 0 ] ).toEqual( 'medium' );
 		} );
 
-		it( 'should call onChange handler with undefined value when no size is provided on change', () => {
-			const wrapper = mount(
+		it( 'should call onChange handler with undefined value when no size is provided on change', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			render(
 				<DimensionControl
 					instanceId={ instanceId }
 					label={ 'Padding' }
@@ -127,14 +124,8 @@ describe( 'DimensionControl', () => {
 				/>
 			);
 
-			wrapper
-				.find( 'select' )
-				.at( 0 )
-				.simulate( 'change', {
-					target: {
-						value: '', // This happens when you select the "default" <option />
-					},
-				} );
+			// Select the "default" <option />
+			await user.selectOptions( screen.getByRole( 'combobox' ), '' );
 
 			expect( onChangeHandler ).toHaveBeenNthCalledWith( 1, undefined );
 		} );

package/src/disabled/index.tsx

@@ -1,24 +1,34 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import type { HTMLProps } from 'react';
 
 /**
  * WordPress dependencies
  */
 import { useDisabled } from '@wordpress/compose';
-import { createContext } from '@wordpress/element';
+import { createContext, forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { StyledWrapper } from './styles/disabled-styles';
+import { disabledStyles } from './styles/disabled-styles';
 import type { DisabledProps } from './types';
 import type { WordPressComponentProps } from '../ui/context';
+import { useCx } from '../utils';
 
 const Context = createContext< boolean >( false );
 const { Consumer, Provider } = Context;
 
+// Extracting this ContentWrapper component in order to make it more explicit
+// the same 'ContentWrapper' component is needed so that React can reconcile
+// the dom correctly when switching between disabled/non-disabled (instead
+// of thrashing the previous DOM and therefore losing the form fields values).
+const ContentWrapper = forwardRef<
+	HTMLDivElement,
+	HTMLProps< HTMLDivElement >
+>( ( props, ref ) => <div { ...props } ref={ ref } /> );
+
 /**
  * `Disabled` is a component which disables descendant tabbable elements and prevents pointer interaction.
  *
@@ -54,22 +64,30 @@ function Disabled( {
 	children,
 	isDisabled = true,
 	...props
-}: Omit< WordPressComponentProps< DisabledProps, 'div' >, 'ref' > ) {
+}: WordPressComponentProps< DisabledProps, 'div' > ) {
 	const ref = useDisabled();
-
+	const cx = useCx();
 	if ( ! isDisabled ) {
-		return <Provider value={ false }>{ children }</Provider>;
+		return (
+			<Provider value={ false }>
+				<ContentWrapper>{ children }</ContentWrapper>
+			</Provider>
+		);
 	}
 
 	return (
 		<Provider value={ true }>
-			<StyledWrapper
+			<ContentWrapper
 				ref={ ref }
-				className={ classnames( className, 'components-disabled' ) }
+				className={ cx(
+					disabledStyles,
+					className,
+					'components-disabled'
+				) }
 				{ ...props }
 			>
 				{ children }
-			</StyledWrapper>
+			</ContentWrapper>
 		</Provider>
 	);
 }

package/src/disabled/styles/disabled-styles.tsx

@@ -1,9 +1,9 @@
 /**
  * External dependencies
  */
-import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 
-export const StyledWrapper = styled.div`
+export const disabledStyles = css`
 	position: relative;
 	pointer-events: none;
 

package/src/disabled/test/index.tsx

@@ -7,6 +7,7 @@ import { render, screen, waitFor } from '@testing-library/react';
  * Internal dependencies
  */
 import Disabled from '../';
+import userEvent from '@testing-library/user-event';
 
 jest.mock( '@wordpress/dom', () => {
 	const focus = jest.requireActual( '../../../../dom/src' ).focus;
@@ -134,6 +135,43 @@ describe( 'Disabled', () => {
 		);
 	} );
 
+	it( 'should preserve input values when toggling the isDisabled prop', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		const MaybeDisable = ( { isDisabled = true } ) => (
+			<Disabled isDisabled={ isDisabled }>
+				<Form />
+			</Disabled>
+		);
+
+		const getInput = () => screen.getByRole( 'textbox' );
+		const getContentEditable = () => screen.getByTitle( 'edit my content' );
+
+		const { rerender } = render( <MaybeDisable isDisabled={ false } /> );
+
+		await user.type( getInput(), 'This is input.' );
+		expect( getInput() ).toHaveValue( 'This is input.' );
+
+		await user.type( getContentEditable(), 'This is contentEditable.' );
+		expect( getContentEditable() ).toHaveTextContent(
+			'This is contentEditable.'
+		);
+
+		rerender( <MaybeDisable isDisabled={ true } /> );
+		expect( getInput() ).toHaveValue( 'This is input.' );
+		expect( getContentEditable() ).toHaveTextContent(
+			'This is contentEditable.'
+		);
+
+		rerender( <MaybeDisable isDisabled={ false } /> );
+		expect( getInput() ).toHaveValue( 'This is input.' );
+		expect( getContentEditable() ).toHaveTextContent(
+			'This is contentEditable.'
+		);
+	} );
+
 	describe( 'Consumer', () => {
 		function DisabledStatus() {
 			return (

package/src/drop-zone/README.md

@@ -1,6 +1,6 @@
 # DropZone
 
-`DropZone` is a Component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.
+`DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.
 
 ## Usage
 
@@ -30,7 +30,7 @@ The component accepts the following props:
 
 ### className
 
-A CSS `class` to be _appended_ after the default `components-drop-zone` class.
+A CSS `class` to give to the wrapper element.
 
 -   Type: `String`
 -   Default: `undefined`
@@ -52,7 +52,7 @@ The function is called when dropping a file into the `DropZone`. It receives an
 
 ### onHTMLDrop
 
-The function is called when dropping a file into the `DropZone`. It receives the HTML being dropped as an argument.
+The function is called when dropping HTML into the `DropZone`. It receives the HTML being dropped as an argument.
 
 -   Type: `Function`
 -   Required: No

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

@@ -22,21 +22,51 @@ import {
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
 } from '../animation';
+import type { DropType, DropZoneProps } from './types';
+import type { WordPressComponentProps } from '../ui/context';
 
-export default function DropZoneComponent( {
+/**
+ * `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.
+ *
+ * ```jsx
+ * import { DropZone } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyDropZone = () => {
+ *   const [ hasDropped, setHasDropped ] = useState( false );
+ *
+ *   return (
+ *     <div>
+ *       { hasDropped ? 'Dropped!' : 'Drop something here' }
+ *       <DropZone
+ *         onFilesDrop={ () => setHasDropped( true ) }
+ *         onHTMLDrop={ () => setHasDropped( true ) }
+ *         onDrop={ () => setHasDropped( true ) }
+ *       />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function DropZoneComponent( {
 	className,
 	label,
 	onFilesDrop,
 	onHTMLDrop,
 	onDrop,
-} ) {
-	const [ isDraggingOverDocument, setIsDraggingOverDocument ] = useState();
-	const [ isDraggingOverElement, setIsDraggingOverElement ] = useState();
-	const [ type, setType ] = useState();
+	...restProps
+}: WordPressComponentProps< DropZoneProps, 'div', false > ) {
+	const [ isDraggingOverDocument, setIsDraggingOverDocument ] =
+		useState< boolean >();
+	const [ isDraggingOverElement, setIsDraggingOverElement ] =
+		useState< boolean >();
+	const [ type, setType ] = useState< DropType >();
 	const ref = useDropZone( {
 		onDrop( event ) {
-			const files = getFilesFromDataTransfer( event.dataTransfer );
-			const html = event.dataTransfer.getData( 'text/html' );
+			const files = event.dataTransfer
+				? getFilesFromDataTransfer( event.dataTransfer )
+				: [];
+			const html = event.dataTransfer?.getData( 'text/html' );
 
 			/**
 			 * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
@@ -53,19 +83,22 @@ export default function DropZoneComponent( {
 		onDragStart( event ) {
 			setIsDraggingOverDocument( true );
 
-			let _type = 'default';
+			let _type: DropType = 'default';
 
 			/**
 			 * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
 			 * The order of the checks is important to recognise the HTML drop.
 			 */
-			if ( event.dataTransfer.types.includes( 'text/html' ) ) {
+			if ( event.dataTransfer?.types.includes( 'text/html' ) ) {
 				_type = 'html';
 			} else if (
 				// Check for the types because sometimes the files themselves
 				// are only available on drop.
-				event.dataTransfer.types.includes( 'Files' ) ||
-				getFilesFromDataTransfer( event.dataTransfer ).length > 0
+				event.dataTransfer?.types.includes( 'Files' ) ||
+				( event.dataTransfer
+					? getFilesFromDataTransfer( event.dataTransfer )
+					: []
+				).length > 0
 			) {
 				_type = 'file';
 			}
@@ -74,7 +107,7 @@ export default function DropZoneComponent( {
 		},
 		onDragEnd() {
 			setIsDraggingOverDocument( false );
-			setType();
+			setType( undefined );
 		},
 		onDragEnter() {
 			setIsDraggingOverElement( true );
@@ -149,7 +182,7 @@ export default function DropZoneComponent( {
 	} );
 
 	return (
-		<div ref={ ref } className={ classes }>
+		<div { ...restProps } ref={ ref } className={ classes }>
 			{ disableMotion ? (
 				children
 			) : (
@@ -158,3 +191,5 @@ export default function DropZoneComponent( {
 		</div>
 	);
 }
+
+export default DropZoneComponent;

package/src/drop-zone/{provider.js → provider.ts}

@@ -3,7 +3,11 @@
  */
 import deprecated from '@wordpress/deprecated';
 
-export default function DropZoneProvider( { children } ) {
+export default function DropZoneProvider( {
+	children,
+}: {
+	children: React.ReactNode;
+} ) {
 	deprecated( 'wp.components.DropZoneProvider', {
 		since: '5.8',
 		hint: 'wp.component.DropZone no longer needs a provider. wp.components.DropZoneProvider is safe to remove from your code.',

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

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+/**
+ * Internal dependencies
+ */
+import DropZone from '..';
+
+const meta: ComponentMeta< typeof DropZone > = {
+	component: DropZone,
+	title: 'Components/DropZone',
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof DropZone > = ( props ) => {
+	return (
+		<div style={ { background: 'lightgray', padding: 16 } }>
+			Drop something here
+			<DropZone { ...props } />
+		</div>
+	);
+};
+
+export const Default = Template.bind( {} );

package/src/drop-zone/types.ts

@@ -0,0 +1,29 @@
+export type DropType = 'file' | 'html' | 'default';
+
+export type DropZoneProps = {
+	/**
+	 * A CSS `class` to give to the wrapper element.
+	 */
+	className?: string;
+	/**
+	 * A string to be shown within the drop zone area.
+	 *
+	 * @default `__( 'Drop files to upload' )`
+	 */
+	label?: string;
+	/**
+	 * The function is generic drop handler called if the `onFilesDrop` or `onHTMLDrop` are not called.
+	 * It receives the drop `event` object as an argument.
+	 */
+	onDrop?: ( event: DragEvent ) => void;
+	/**
+	 * The function is called when dropping a file into the `DropZone`.
+	 * It receives an array of dropped files as an argument.
+	 */
+	onFilesDrop?: ( files: File[] ) => void;
+	/**
+	 * The function is called when dropping HTML into the `DropZone`.
+	 * It receives the HTML being dropped as an argument.
+	 */
+	onHTMLDrop?: ( html: string ) => void;
+};

package/src/dropdown/README.md

@@ -1,6 +1,6 @@
 # Dropdown
 
-Dropdown is a React component to render a button that opens a floating content modal when clicked. 
+Dropdown is a React component to render a button that opens a floating content modal when clicked.
 
 This component takes care of updating the state of the dropdown menu (opened/closed), handles closing the menu when clicking outside and uses render props to render the button and the content.
 
@@ -91,11 +91,13 @@ Set this to customize the text that is shown in the dropdown's header when it is
 
 ### focusOnMount
 
-By default, the _first tabbable element_ in the popover will receive focus when it mounts. This is the same as setting `focusOnMount` to `"firstElement"`. If you want to focus the container instead, you can set `focusOnMount` to `"container"`.
+By default, the _first tabbable element_ in the popover will receive focus when it mounts. This is the same as setting this prop to `"firstElement"`.
 
-Set this prop to `false` to disable focus switching entirely. This should only be set when an appropriately accessible substitute behavior exists.
+Specifying a `true` value will focus the container instead.
 
--   Type: `String` or `Boolean`
+Specifying a `false` value disables the focus handling entirely (this should only be done when an appropriately accessible substitute behavior exists).
+
+-   Type: `'firstElement' | boolean`
 -   Required: No
 -   Default: `"firstElement"`
 

package/src/dropdown/index.js

@@ -8,6 +8,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useRef, useEffect, useState } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -42,6 +43,10 @@ export default function Dropdown( props ) {
 		onToggle,
 		style,
 	} = props;
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ fallbackPopoverAnchor, setFallbackPopoverAnchor ] =
+		useState( null );
 	const containerRef = useRef();
 	const [ isOpen, setIsOpen ] = useObservableState( false, onToggle );
 
@@ -83,7 +88,10 @@ export default function Dropdown( props ) {
 	}
 
 	const args = { isOpen, onToggle: toggle, onClose: close };
-	const hasAnchorRef =
+	const popoverPropsHaveAnchor =
+		!! popoverProps?.anchor ||
+		// Note: `anchorRef`, `getAnchorRect` and `anchorRect` are deprecated and
+		// be removed from `Popover` from WordPress 6.3
 		!! popoverProps?.anchorRef ||
 		!! popoverProps?.getAnchorRect ||
 		!! popoverProps?.anchorRect;
@@ -91,7 +99,7 @@ export default function Dropdown( props ) {
 	return (
 		<div
 			className={ classnames( 'components-dropdown', className ) }
-			ref={ containerRef }
+			ref={ useMergeRefs( [ setFallbackPopoverAnchor, containerRef ] ) }
 			// Some UAs focus the closest focusable parent when the toggle is
 			// clicked. Making this div focusable ensures such UAs will focus
 			// it and `closeIfFocusOutside` can tell if the toggle was clicked.
@@ -110,7 +118,11 @@ export default function Dropdown( props ) {
 					// This value is used to ensure that the dropdowns
 					// align with the editor header by default.
 					offset={ 13 }
-					anchorRef={ ! hasAnchorRef ? containerRef : undefined }
+					anchor={
+						! popoverPropsHaveAnchor
+							? fallbackPopoverAnchor
+							: undefined
+					}
 					{ ...popoverProps }
 					className={ classnames(
 						'components-dropdown__content',

package/src/dropdown/stories/index.js

@@ -14,7 +14,7 @@ export default {
 		focusOnMount: {
 			control: {
 				type: 'radio',
-				options: [ 'firstElement', 'container', false ],
+				options: [ 'firstElement', true, false ],
 			},
 		},
 		headerTitle: { control: { type: 'text' } },

package/src/flex/flex/hook.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css, SerializedStyles } from '@emotion/react';
+import { css } from '@emotion/react';
 
 /**
  * WordPress dependencies
@@ -16,7 +16,7 @@ import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import { useResponsiveValue } from '../../ui/utils/use-responsive-value';
 import { space } from '../../ui/utils/space';
 import * as styles from '../styles';
-import { useCx, rtl } from '../../utils';
+import { useCx } from '../../utils';
 import type { FlexProps } from '../types';
 
 function useDeprecatedProps(
@@ -61,72 +61,24 @@ export function useFlex( props: WordPressComponentProps< FlexProps, 'div' > ) {
 		typeof direction === 'string' && direction.includes( 'reverse' );
 
 	const cx = useCx();
-	const rtlWatchResult = rtl.watch();
 
 	const classes = useMemo( () => {
-		const sx: {
-			Base?: SerializedStyles;
-			Items?: SerializedStyles;
-			WrapItems?: SerializedStyles;
-		} = {};
-
-		sx.Base = css( {
+		const base = css( {
 			alignItems: isColumn ? 'normal' : align,
 			flexDirection: direction,
 			flexWrap: wrap ? 'wrap' : undefined,
+			gap: space( gap ),
 			justifyContent: justify,
 			height: isColumn && expanded ? '100%' : undefined,
 			width: ! isColumn && expanded ? '100%' : undefined,
-			marginBottom: wrap ? `calc(${ space( gap ) } * -1)` : undefined,
 		} );
 
-		/**
-		 * Workaround to optimize DOM rendering.
-		 * We'll enhance alignment with naive parent flex assumptions.
-		 *
-		 * Trade-off:
-		 * Far less DOM less. However, UI rendering is not as reliable.
-		 */
-		sx.Items = css`
-			> * + *:not( marquee ) {
-				margin-top: ${ isColumn ? space( gap ) : undefined };
-				${ rtl( {
-					marginLeft:
-						! isColumn && ! isReverse ? space( gap ) : undefined,
-					marginRight:
-						! isColumn && isReverse ? space( gap ) : undefined,
-				} )() }
-			}
-		`;
-
-		sx.WrapItems = css`
-			> *:not( marquee ) {
-				margin-bottom: ${ space( gap ) };
-				${ rtl( {
-					marginLeft:
-						! isColumn && isReverse ? space( gap ) : undefined,
-					marginRight:
-						! isColumn && ! isReverse ? space( gap ) : undefined,
-				} )() }
-			}
-
-			> *:last-child:not( marquee ) {
-				${ rtl( {
-					marginLeft: ! isColumn && isReverse ? 0 : undefined,
-					marginRight: ! isColumn && ! isReverse ? 0 : undefined,
-				} )() }
-			}
-		`;
-
 		return cx(
 			styles.Flex,
-			sx.Base,
-			wrap ? sx.WrapItems : sx.Items,
+			base,
 			isColumn ? styles.ItemsColumn : styles.ItemsRow,
 			className
 		);
-		// rtlWatchResult is needed to refresh styles when the writing direction changes
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [
 		align,
 		className,
@@ -138,7 +90,6 @@ export function useFlex( props: WordPressComponentProps< FlexProps, 'div' > ) {
 		isReverse,
 		justify,
 		wrap,
-		rtlWatchResult,
 	] );
 
 	return { ...otherProps, className: classes, isColumn };