@wordpress/components 21.0.1 → 21.1.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/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/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';
 
 /**

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';
 

package/src/popover/stories/e2e/index.tsx

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Popover from '../..';
+
+export default {
+	title: 'Components/Popover',
+	component: Popover,
+};
+
+export const Default = () => {
+	const [ isVisible, setIsVisible ] = useState( false );
+
+	return (
+		<button onClick={ () => setIsVisible( ( state ) => ! state ) }>
+			Toggle Popover!
+			{ isVisible && <Popover>Popover is toggled!</Popover> }
+		</button>
+	);
+};

package/src/range-control/README.md

@@ -16,15 +16,14 @@ A RangeControl for volume
 
 ### Anatomy
 
-![](https://make.wordpress.org/design/files/2018/12/rangecontrol-anatomy.png)
-
 A RangeControl can contain the following elements:
 
-1. **Track**: The track shows the range available for user selection. For left-to-right (LTR) languages, the smallest value appears on the far left, and the largest value on the far right. For right-to-left (RTL) languages this orientation is reversed, with the smallest value on the far right and the largest value on the far left.
-2. **Thumb**: The thumb slides along the track, displaying the selected value through its position.
-3. **Value entry field**: The value entry field displays the currently selected, specific numerical value.
-4. **Icon** (optional): An icon can be displayed before or after the slider.
-5. **Tick mark** (optional): Tick marks represent predetermined values to which the user can move the slider.
+1. **Rail**: The rail represents the entire surface area of the slider, from the minimum value selectable by the user to the maximum value selectable by the user. For left-to-right (LTR) languages, the minimum value appears on the far left, and the maximum value on the far right. For right-to-left (RTL) languages this orientation is reversed, with the minimum value on the far right and the maximum value on the far left.
+2. **Track**: The track represents the portion of the rail from the minimum value to the currently selected value.
+3. **Thumb**: The thumb slides along the track, displaying the selected value through its position.
+4. **Value entry field**: The value entry field displays the currently selected, specific numerical value.
+5. **Icon** (optional): An icon can be displayed before or after the slider.
+6. **Tick mark** (optional): Tick marks represent predetermined values to which the user can move the slider.
 
 ### Types
 

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

@@ -7,39 +7,19 @@ import { forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import { InputRange as BaseInputRange } from './styles/range-control-styles';
-import { useDebouncedHoverInteraction } from './utils';
 
 import type { InputRangeProps } from './types';
 import type { WordPressComponentProps } from '../ui/context';
 
-const noop = () => {};
-
 function InputRange(
 	props: WordPressComponentProps< InputRangeProps, 'input' >,
 	ref: React.ForwardedRef< HTMLInputElement >
 ) {
-	const {
-		describedBy,
-		label,
-		onHideTooltip = noop,
-		onMouseLeave = noop,
-		onMouseMove = noop,
-		onShowTooltip = noop,
-		value,
-		...otherProps
-	} = props;
-
-	const hoverInteractions = useDebouncedHoverInteraction( {
-		onHide: onHideTooltip,
-		onMouseLeave,
-		onMouseMove,
-		onShow: onShowTooltip,
-	} );
+	const { describedBy, label, value, ...otherProps } = props;
 
 	return (
 		<BaseInputRange
 			{ ...otherProps }
-			{ ...hoverInteractions }
 			aria-describedby={ describedBy }
 			aria-label={ label }
 			aria-hidden={ false }

package/src/range-control/stories/index.tsx

@@ -35,7 +35,7 @@ const meta: ComponentMeta< typeof RangeControl > = {
 		icon: { control: { type: null } },
 		marks: { control: { type: 'object' } },
 		onBlur: { control: { type: null } },
-		onChange: { action: 'onChange' },
+		onChange: { control: { type: null } },
 		onFocus: { control: { type: null } },
 		onMouseLeave: { control: { type: null } },
 		onMouseMove: { control: { type: null } },
@@ -46,6 +46,7 @@ const meta: ComponentMeta< typeof RangeControl > = {
 		value: { control: { type: null } },
 	},
 	parameters: {
+		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
 		docs: { source: { state: 'open' } },
 	},

package/src/range-control/tooltip.tsx

@@ -59,7 +59,7 @@ function useTooltipPosition( { inputRef, tooltipPosition }: TooltipProps ) {
 		if ( inputRef && inputRef.current ) {
 			setPosition( tooltipPosition );
 		}
-	}, [ tooltipPosition ] );
+	}, [ tooltipPosition, inputRef ] );
 
 	useEffect( () => {
 		setTooltipPosition();

package/src/range-control/types.ts

@@ -236,10 +236,8 @@ export type RailProps = MarksProps & {
 export type InputRangeProps = {
 	describedBy?: string;
 	label?: string;
-	onHideTooltip?: () => void;
 	onMouseLeave?: MouseEventHandler< HTMLInputElement >;
 	onMouseMove?: MouseEventHandler< HTMLInputElement >;
-	onShowTooltip?: () => void;
 	value?: number | '';
 };
 

package/src/range-control/utils.ts

@@ -1,12 +1,7 @@
-/**
- * External dependencies
- */
-import type { MouseEventHandler } from 'react';
-
 /**
  * WordPress dependencies
  */
-import { useCallback, useRef, useEffect, useState } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -14,12 +9,7 @@ import { useCallback, useRef, useEffect, useState } from '@wordpress/element';
 import { useControlledState } from '../utils/hooks';
 import { clamp } from '../utils/math';
 
-import type {
-	UseControlledRangeValueArgs,
-	UseDebouncedHoverInteractionArgs,
-} from './types';
-
-const noop = () => {};
+import type { UseControlledRangeValueArgs } from './types';
 
 /**
  * A float supported clamp function for a specific value.
@@ -64,72 +54,10 @@ export function useControlledRangeValue(
 				setInternalState( floatClamp( nextValue, min, max ) );
 			}
 		},
-		[ min, max ]
+		[ min, max, setInternalState ]
 	);
 
 	// `state` can't be an empty string because we specified a fallback value of
 	// `null` in `useControlledState`
 	return [ state as Exclude< typeof state, '' >, setState ] as const;
 }
-
-/**
- * Hook to encapsulate the debouncing "hover" to better handle the showing
- * and hiding of the Tooltip.
- *
- * @param  settings
- * @return Bound properties for use on a React.Node.
- */
-export function useDebouncedHoverInteraction(
-	settings: UseDebouncedHoverInteractionArgs
-) {
-	const {
-		onHide = noop,
-		onMouseLeave = noop as MouseEventHandler,
-		onMouseMove = noop as MouseEventHandler,
-		onShow = noop,
-		timeout = 300,
-	} = settings;
-
-	const [ show, setShow ] = useState( false );
-	const timeoutRef = useRef< number | undefined >();
-
-	const setDebouncedTimeout = useCallback(
-		( callback ) => {
-			window.clearTimeout( timeoutRef.current );
-
-			timeoutRef.current = window.setTimeout( callback, timeout );
-		},
-		[ timeout ]
-	);
-
-	const handleOnMouseMove = useCallback( ( event ) => {
-		onMouseMove( event );
-
-		setDebouncedTimeout( () => {
-			if ( ! show ) {
-				setShow( true );
-				onShow();
-			}
-		} );
-	}, [] );
-
-	const handleOnMouseLeave = useCallback( ( event ) => {
-		onMouseLeave( event );
-
-		setDebouncedTimeout( () => {
-			setShow( false );
-			onHide();
-		} );
-	}, [] );
-
-	useEffect( () => {
-		return () => {
-			window.clearTimeout( timeoutRef.current );
-		};
-	} );
-
-	return {
-		onMouseMove: handleOnMouseMove,
-		onMouseLeave: handleOnMouseLeave,
-	};
-}

package/src/tree-grid/index.js

@@ -36,12 +36,13 @@ function getRowFocusables( rowElement ) {
  * Renders both a table and tbody element, used to create a tree hierarchy.
  *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/components/src/tree-grid/README.md
- * @param {Object}    props               Component props.
- * @param {WPElement} props.children      Children to be rendered.
- * @param {Function}  props.onExpandRow   Callback to fire when row is expanded.
- * @param {Function}  props.onCollapseRow Callback to fire when row is collapsed.
- * @param {Function}  props.onFocusRow    Callback to fire when moving focus to a different row.
- * @param {Object}    ref                 A ref to the underlying DOM table element.
+ * @param {Object}    props                      Component props.
+ * @param {WPElement} props.children             Children to be rendered.
+ * @param {Function}  props.onExpandRow          Callback to fire when row is expanded.
+ * @param {Function}  props.onCollapseRow        Callback to fire when row is collapsed.
+ * @param {Function}  props.onFocusRow           Callback to fire when moving focus to a different row.
+ * @param {string}    props.applicationAriaLabel Label to use for the application role.
+ * @param {Object}    ref                        A ref to the underlying DOM table element.
  */
 function TreeGrid(
 	{
@@ -49,6 +50,7 @@ function TreeGrid(
 		onExpandRow = () => {},
 		onCollapseRow = () => {},
 		onFocusRow = () => {},
+		applicationAriaLabel,
 		...props
 	},
 	ref
@@ -286,14 +288,21 @@ function TreeGrid(
 	/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
 	return (
 		<RovingTabIndexContainer>
-			<table
-				{ ...props }
-				role="treegrid"
-				onKeyDown={ onKeyDown }
-				ref={ ref }
-			>
-				<tbody>{ children }</tbody>
-			</table>
+			{
+				// Prevent browser mode from triggering in NVDA by wrapping List View
+				// in a role=application wrapper.
+				// see: https://github.com/WordPress/gutenberg/issues/43729
+			 }
+			<div role="application" aria-label={ applicationAriaLabel }>
+				<table
+					{ ...props }
+					role="treegrid"
+					onKeyDown={ onKeyDown }
+					ref={ ref }
+				>
+					<tbody>{ children }</tbody>
+				</table>
+			</div>
 		</RovingTabIndexContainer>
 	);
 	/* eslint-enable jsx-a11y/no-noninteractive-element-to-interactive-role */

package/src/tree-grid/test/__snapshots__/cell.js.snap

@@ -1,23 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TreeGridCell uses a child render function to render children 1`] = `
-<table
-  onKeyDown={[Function]}
-  role="treegrid"
+<div
+  role="application"
 >
-  <tbody>
-    <tr>
-      <td
-        role="gridcell"
-      >
-        <button
-          className="my-button"
-          onFocus={[Function]}
+  <table
+    onKeyDown={[Function]}
+    role="treegrid"
+  >
+    <tbody>
+      <tr>
+        <td
+          role="gridcell"
         >
-          Click Me!
-        </button>
-      </td>
-    </tr>
-  </tbody>
-</table>
+          <button
+            className="my-button"
+            onFocus={[Function]}
+          >
+            Click Me!
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 `;

package/src/tree-grid/test/__snapshots__/index.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TreeGrid simple rendering renders a table, tbody and any child elements 1`] = `"<table role=\\"treegrid\\"><tbody><tr role=\\"row\\" aria-level=\\"1\\" aria-posinset=\\"1\\" aria-setsize=\\"1\\"><td role=\\"gridcell\\">Test</td></tr></tbody></table>"`;
+exports[`TreeGrid simple rendering renders a table, tbody and any child elements 1`] = `"<div role=\\"application\\"><table role=\\"treegrid\\"><tbody><tr role=\\"row\\" aria-level=\\"1\\" aria-posinset=\\"1\\" aria-setsize=\\"1\\"><td role=\\"gridcell\\">Test</td></tr></tbody></table></div>"`;