@wordpress/components 21.0.2 → 21.1.2-next.4d3b314fd5.0

package/src/color-palette/test/index.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { mount, shallow } from 'enzyme';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -17,102 +18,147 @@ describe( 'ColorPalette', () => {
 	const currentColor = '#f00';
 	const onChange = jest.fn();
 
-	const wrapper = mount(
-		<ColorPalette
-			colors={ colors }
-			value={ currentColor }
-			onChange={ onChange }
-		/>
-	);
-	const buttons = wrapper.find( 'Option button' );
-
 	beforeEach( () => {
 		onChange.mockClear();
 	} );
 
 	test( 'should render a dynamic toolbar of colors', () => {
-		expect( wrapper ).toMatchSnapshot();
+		const { container } = render(
+			<ColorPalette
+				colors={ colors }
+				value={ currentColor }
+				onChange={ onChange }
+			/>
+		);
+
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render three color button options', () => {
-		expect( buttons ).toHaveLength( 3 );
+		render(
+			<ColorPalette
+				colors={ colors }
+				value={ currentColor }
+				onChange={ onChange }
+			/>
+		);
+
+		expect(
+			screen.getAllByRole( 'button', { name: /^Color:/ } )
+		).toHaveLength( 3 );
 	} );
 
-	test( 'should call onClick on an active button with undefined', () => {
-		const activeButton = buttons.findWhere( ( button ) =>
-			button.hasClass( 'is-pressed' )
+	test( 'should call onClick on an active button with undefined', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		render(
+			<ColorPalette
+				colors={ colors }
+				value={ currentColor }
+				onChange={ onChange }
+			/>
+		);
+
+		await user.click(
+			screen.getByRole( 'button', { name: /^Color:/, pressed: true } )
 		);
-		activeButton.simulate( 'click' );
 
 		expect( onChange ).toHaveBeenCalledTimes( 1 );
 		expect( onChange ).toHaveBeenCalledWith( undefined );
 	} );
 
-	test( 'should call onClick on an inactive button', () => {
-		const inactiveButton = buttons
-			.findWhere( ( button ) => ! button.hasClass( 'is-pressed' ) )
-			.first();
-		inactiveButton.simulate( 'click' );
+	test( 'should call onClick on an inactive button', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		render(
+			<ColorPalette
+				colors={ colors }
+				value={ currentColor }
+				onChange={ onChange }
+			/>
+		);
+
+		await user.click(
+			screen.getAllByRole( 'button', {
+				name: /^Color:/,
+				pressed: false,
+			} )[ 0 ]
+		);
 
 		expect( onChange ).toHaveBeenCalledTimes( 1 );
+		expect( onChange ).toHaveBeenCalledWith( '#fff' );
 	} );
 
-	test( 'should call onClick with undefined, when the clearButton onClick is triggered', () => {
-		const clearButton = wrapper.find( 'ButtonAction button' );
+	test( 'should call onClick with undefined, when the clearButton onClick is triggered', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 
-		expect( clearButton ).toHaveLength( 1 );
+		render(
+			<ColorPalette
+				colors={ colors }
+				value={ currentColor }
+				onChange={ onChange }
+			/>
+		);
 
-		clearButton.simulate( 'click' );
+		await user.click( screen.getByRole( 'button', { name: 'Clear' } ) );
 
 		expect( onChange ).toHaveBeenCalledTimes( 1 );
 		expect( onChange ).toHaveBeenCalledWith( undefined );
 	} );
 
 	test( 'should allow disabling custom color picker', () => {
-		expect(
-			shallow(
-				<ColorPalette
-					colors={ colors }
-					disableCustomColors={ true }
-					value={ currentColor }
-					onChange={ onChange }
-				/>
-			)
-		).toMatchSnapshot();
-	} );
+		const { container } = render(
+			<ColorPalette
+				colors={ colors }
+				disableCustomColors
+				value={ currentColor }
+				onChange={ onChange }
+			/>
+		);
 
-	describe( 'Dropdown', () => {
-		const dropdown = wrapper.find( 'Dropdown' );
+		expect( container ).toMatchSnapshot();
+	} );
 
-		test( 'should render it correctly', () => {
-			expect( dropdown ).toMatchSnapshot();
+	test( 'should render dropdown and its content', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
 		} );
 
-		describe( '.renderToggle', () => {
-			const isOpen = true;
-			const onToggle = jest.fn();
-
-			const renderedToggleButton = mount(
-				dropdown.props().renderToggle( { isOpen, onToggle } )
-			);
-
-			test( 'should render dropdown content', () => {
-				expect( renderedToggleButton ).toMatchSnapshot();
-			} );
+		render(
+			<ColorPalette
+				colors={ colors }
+				value={ currentColor }
+				onChange={ onChange }
+			/>
+		);
 
-			test( 'should call onToggle on click.', () => {
-				renderedToggleButton.find( 'button' ).simulate( 'click' );
+		await user.click(
+			screen.getByRole( 'button', {
+				name: /^Custom color picker/,
+				expanded: false,
+			} )
+		);
 
-				expect( onToggle ).toHaveBeenCalledTimes( 1 );
-			} );
+		const dropdownButton = screen.getByRole( 'button', {
+			name: /^Custom color picker/,
+			expanded: true,
 		} );
 
-		describe( '.renderContent', () => {
-			const renderedContent = shallow( dropdown.props().renderContent() );
+		expect( dropdownButton ).toBeVisible();
 
-			test( 'should render dropdown content', () => {
-				expect( renderedContent ).toMatchSnapshot();
-			} );
-		} );
+		expect(
+			within( dropdownButton ).getByText( colors[ 0 ].name )
+		).toBeVisible();
+		expect(
+			within( dropdownButton ).getByText(
+				colors[ 0 ].color.replace( '#', '' )
+			)
+		).toBeVisible();
 	} );
 } );

package/src/draggable/index.js

@@ -1,13 +1,9 @@
 /**
  * WordPress dependencies
  */
+import { throttle } from '@wordpress/compose';
 import { useEffect, useRef } from '@wordpress/element';
 
-/**
- * External dependencies
- */
-import { throttle } from 'lodash';
-
 const dragImageClass = 'components-draggable__invisible-drag-image';
 const cloneWrapperClass = 'components-draggable__clone';
 const clonePadding = 0;
@@ -180,6 +176,7 @@ export default function Draggable( {
 
 		// Aim for 60fps (16 ms per frame) for now. We can potentially use requestAnimationFrame (raf) instead,
 		// note that browsers may throttle raf below 60fps in certain conditions.
+		// @ts-ignore
 		const throttledDragOver = throttle( over, 16 );
 
 		ownerDocument.addEventListener( 'dragover', throttledDragOver );

package/src/drop-zone/index.tsx

@@ -119,7 +119,6 @@ export function DropZoneComponent( {
 	const disableMotion = useReducedMotion();
 
 	let children;
-
 	const backdrop = {
 		hidden: { scaleY: 0, opacity: 0 },
 		show: {
@@ -156,6 +155,10 @@ export function DropZoneComponent( {
 				animate="show"
 				exit={ disableMotion ? 'show' : 'exit' }
 				className="components-drop-zone__content"
+				// Without this, when this div is shown,
+				// Safari calls a onDropZoneLeave causing a loop because of this bug
+				// https://bugs.webkit.org/show_bug.cgi?id=66547
+				style={ { pointerEvents: 'none' } }
 			>
 				<motion.div variants={ foreground }>
 					<Icon

package/src/font-size-picker/stories/e2e/index.js

@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import FontSizePicker from '../..';
+
+export default {
+	title: 'Components/FontSizePicker',
+	component: FontSizePicker,
+};
+
+const FontSizePickerWithState = ( { initialValue, ...props } ) => {
+	const [ fontSize, setFontSize ] = useState( initialValue );
+	return (
+		<FontSizePicker
+			{ ...props }
+			value={ fontSize }
+			onChange={ setFontSize }
+		/>
+	);
+};
+
+export const Default = FontSizePickerWithState.bind( {} );
+Default.args = {
+	fontSizes: [
+		{
+			name: 'Small',
+			slug: 'small',
+			size: 12,
+		},
+		{
+			name: 'Normal',
+			slug: 'normal',
+			size: 16,
+		},
+		{
+			name: 'Big',
+			slug: 'big',
+			size: 26,
+		},
+	],
+	initialValue: 16,
+};

package/src/higher-order/with-filters/index.js

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import { debounce, without } from 'lodash';
+import { without } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
 import { addAction, applyFilters, removeAction } from '@wordpress/hooks';
-import { createHigherOrderComponent } from '@wordpress/compose';
+import { createHigherOrderComponent, debounce } from '@wordpress/compose';
 
 const ANIMATION_FRAME_PERIOD = 16;
 

package/src/index.js

@@ -16,7 +16,7 @@ export {
 	default as Animate,
 	getAnimateClassName as __unstableGetAnimateClassName,
 } from './animate';
-export { __unstableMotion } from './animation';
+export { __unstableMotion, __unstableAnimatePresence } from './animation';
 export { default as AnglePickerControl } from './angle-picker-control';
 export {
 	default as Autocomplete,

package/src/menu-item/README.md

@@ -79,3 +79,10 @@ If shortcut is a string, it is expecting the display text. If shortcut is an obj
 -   Default: `'menuitem'`
 
 [Aria Spec](https://www.w3.org/TR/wai-aria-1.1/#aria-checked). If you need to have selectable menu items use menuitemradio for single select, and menuitemcheckbox for multiselect.
+
+### `suffix`
+
+-   Type: `WPElement`
+-   Required: No
+
+Allows for markup other than icons or shortcuts to be added to the menu item.

package/src/menu-item/index.js

@@ -26,6 +26,7 @@ export function MenuItem( props, ref ) {
 		shortcut,
 		isSelected,
 		role = 'menuitem',
+		suffix,
 		...buttonProps
 	} = props;
 
@@ -63,11 +64,16 @@ export function MenuItem( props, ref ) {
 			{ ...buttonProps }
 		>
 			<span className="components-menu-item__item">{ children }</span>
-			<Shortcut
-				className="components-menu-item__shortcut"
-				shortcut={ shortcut }
-			/>
-			{ icon && iconPosition === 'right' && <Icon icon={ icon } /> }
+			{ ! suffix && (
+				<Shortcut
+					className="components-menu-item__shortcut"
+					shortcut={ shortcut }
+				/>
+			) }
+			{ ! suffix && icon && iconPosition === 'right' && (
+				<Icon icon={ icon } />
+			) }
+			{ suffix }
 		</Button>
 	);
 }

package/src/menu-item/style.scss

@@ -8,6 +8,7 @@
 			// Ensure unchecked items have clearance for consistency
 			// with checked items containing an icon or shortcut.
 			padding-right: $grid-unit-60;
+			box-sizing: initial;
 		}
 	}
 

package/src/menu-item/test/index.js

@@ -107,4 +107,40 @@ describe( 'MenuItem', () => {
 		expect( checkboxMenuItem ).toBeChecked();
 		expect( checkboxMenuItem ).toHaveAttribute( 'aria-checked', 'true' );
 	} );
+
+	it( 'should not render shortcut or right icon if suffix provided', () => {
+		render(
+			<MenuItem
+				icon={ <span>Icon</span> }
+				iconPosition="right"
+				role="menuitemcheckbox"
+				shortcut="Shortcut"
+				suffix="Suffix"
+			>
+				My item
+			</MenuItem>
+		);
+
+		expect( screen.getByText( 'Suffix' ) ).toBeInTheDocument();
+		expect( screen.queryByText( 'Shortcut' ) ).not.toBeInTheDocument();
+		expect( screen.queryByText( 'Icon' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'should render left icon despite suffix being provided', () => {
+		render(
+			<MenuItem
+				icon={ <span>Icon</span> }
+				iconPosition="left"
+				role="menuitemcheckbox"
+				shortcut="Shortcut"
+				suffix="Suffix"
+			>
+				My item
+			</MenuItem>
+		);
+
+		expect( screen.getByText( 'Icon' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Suffix' ) ).toBeInTheDocument();
+		expect( screen.queryByText( 'Shortcut' ) ).not.toBeInTheDocument();
+	} );
 } );

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

@@ -112,6 +112,9 @@ function BottomSheetNavigationContainer( {
 				}
 			}
 		},
+		// 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
 		[ currentHeight ]
 	);
 
@@ -133,6 +136,9 @@ function BottomSheetNavigationContainer( {
 				/>
 			);
 		} );
+		// 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
 	}, [ children ] );
 
 	return useMemo( () => {
@@ -158,6 +164,9 @@ function BottomSheetNavigationContainer( {
 				</BottomSheetNavigationProvider>
 			</View>
 		);
+		// 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
 	}, [ currentHeight, _theme ] );
 }
 

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

@@ -7,13 +7,12 @@ import {
 	useFocusEffect,
 } from '@react-navigation/native';
 import { View, ScrollView, TouchableHighlight } from 'react-native';
-import { debounce } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { BottomSheetContext } from '@wordpress/components';
-
+import { debounce } from '@wordpress/compose';
 import { useRef, useCallback, useContext, useMemo } from '@wordpress/element';
 
 /**
@@ -42,6 +41,9 @@ const BottomSheetNavigationScreen = ( {
 
 	const { setHeight } = useContext( BottomSheetNavigationContext );
 
+	// 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
 	const setHeightDebounce = useCallback( debounce( setHeight, 10 ), [
 		setHeight,
 	] );
@@ -71,6 +73,8 @@ const BottomSheetNavigationScreen = ( {
 			 *
 			 * Related: https://github.com/WordPress/gutenberg/pull/36328#discussion_r768897546
 			 */
+			// see https://github.com/WordPress/gutenberg/pull/41166
+			// eslint-disable-next-line react-hooks/exhaustive-deps
 		}, [] )
 	);
 
@@ -84,6 +88,9 @@ const BottomSheetNavigationScreen = ( {
 				setHeight( heightRef.current.maxHeight );
 			}
 			return () => {};
+			// 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
 		}, [ setHeight ] )
 	);
 
@@ -128,6 +135,9 @@ const BottomSheetNavigationScreen = ( {
 				</TouchableHighlight>
 			</ScrollView>
 		);
+		// 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
 	}, [
 		children,
 		isFocused,

package/src/mobile/bottom-sheet/sub-sheet/index.native.js

@@ -23,6 +23,9 @@ const BottomSheetSubSheet = ( {
 		if ( showSheet ) {
 			setIsFullScreen( isFullScreen );
 		}
+		// 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
 	}, [ showSheet, isFullScreen ] );
 
 	return (

package/src/mobile/color-settings/index.native.js

@@ -34,6 +34,9 @@ const ColorSettingsMemo = memo(
 		useEffect( () => {
 			shouldEnableBottomSheetMaxHeight( true );
 			onHandleClosingBottomSheet( null );
+			// 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
 		}, [] );
 		return (
 			<BottomSheet.NavigationContainer>

package/src/mobile/color-settings/picker-screen.native.js

@@ -43,6 +43,9 @@ const PickerScreen = () => {
 				onHandleHardwareButtonPress={ onHandleHardwareButtonPress }
 			/>
 		);
+		// 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
 	}, [
 		setColor,
 		currentValue,

package/src/mobile/image/index.native.js

@@ -82,6 +82,9 @@ const ImageComponent = ( {
 			} );
 		}
 		return () => ( isCurrent = false );
+		// 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
 	}, [ url ] );
 
 	const onContainerLayout = ( event ) => {

package/src/mobile/keyboard-avoiding-view/index.ios.js

@@ -69,6 +69,9 @@ export const KeyboardAvoidingView = ( {
 			keyboardShowSubscription.remove();
 			keyboardHideSubscription.remove();
 		};
+		// 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
 	}, [] );
 
 	function onSafeAreaInsetsUpdate( { safeAreaInsets } ) {

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

@@ -91,6 +91,9 @@ export const LinkPicker = ( {
 		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
 	}, [] );
 
 	// TODO: Localize the accessibility label.

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

@@ -2,12 +2,12 @@
  * External dependencies
  */
 import { ActivityIndicator, FlatList, View } from 'react-native';
-import { debounce } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { BottomSheet, BottomSheetConsumer } from '@wordpress/components';
+import { debounce } from '@wordpress/compose';
 import { useState, useEffect, useRef } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 
@@ -86,6 +86,9 @@ export default function LinkPickerResults( {
 		setHasAllSuggestions( false );
 		setLinks( [ directEntry ] );
 		fetchMoreSuggestions( { query, links: [ directEntry ] } );
+		// 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
 	}, [ query ] );
 
 	const onEndReached = () => fetchMoreSuggestions( { query, links } );

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

@@ -53,6 +53,9 @@ const LinkPickerScreen = ( { returnScreenName } ) => {
 				onCancel={ onCancel }
 			/>
 		);
+		// 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
 	}, [ inputValue ] );
 };
 

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

@@ -101,6 +101,9 @@ function LinkSettings( {
 		if ( onHandleClosingBottomSheet ) {
 			onHandleClosingBottomSheet( onCloseSettingsSheet );
 		}
+		// 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
 	}, [ urlInputValue, labelInputValue, linkRelInputValue ] );
 
 	useEffect( () => {
@@ -112,6 +115,9 @@ function LinkSettings( {
 		if ( url !== urlInputValue ) {
 			setUrlInputValue( url || '' );
 		}
+		// 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
 	}, [ url ] );
 
 	useEffect( () => {
@@ -135,6 +141,9 @@ function LinkSettings( {
 		if ( prevEditorSidebarOpened && ! editorSidebarOpened ) {
 			onSetAttributes();
 		}
+		// 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
 	}, [ editorSidebarOpened, isVisible ] );
 
 	useEffect( () => {
@@ -147,6 +156,9 @@ function LinkSettings( {
 				url: prependHTTP( urlValue ),
 			} );
 		}
+		// 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
 	}, [ urlValue ] );
 
 	const onChangeURL = useCallback(
@@ -176,6 +188,9 @@ function LinkSettings( {
 				rel: linkRelInputValue,
 			} );
 		}
+		// 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
 	}, [ urlInputValue, labelInputValue, linkRelInputValue, setAttributes ] );
 
 	const onCloseSettingsSheet = useCallback( () => {
@@ -208,6 +223,9 @@ function LinkSettings( {
 				rel: updatedRel,
 			} );
 		},
+		// 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
 		[ linkRelInputValue ]
 	);