@wordpress/components 21.2.0 → 22.0.0

package/src/toggle-group-control/types.ts

@@ -9,7 +9,6 @@ import type { RadioStateReturn } from 'reakit';
  * Internal dependencies
  */
 import type { BaseControlProps } from '../base-control/types';
-import type { FormElementProps } from '../utils/types';
 
 export type ToggleGroupControlOptionBaseProps = {
 	children: ReactNode;
@@ -72,69 +71,74 @@ export type WithToolTipProps = {
 	showTooltip?: boolean;
 };
 
-export type ToggleGroupControlProps = Omit<
-	FormElementProps< any >,
-	'defaultValue'
-> &
-	Pick< BaseControlProps, 'help' | '__nextHasNoMarginBottom' > & {
-		/**
-		 * Label for the form element.
-		 */
-		label: string;
-		/**
-		 * If true, the label will only be visible to screen readers.
-		 *
-		 * @default false
-		 */
-		hideLabelFromVision?: boolean;
-		/**
-		 * Determines if segments should be rendered with equal widths.
-		 *
-		 * @default false
-		 */
-		isAdaptiveWidth?: boolean;
-		/**
-		 * Renders `ToggleGroupControl` as a (CSS) block element.
-		 *
-		 * @default false
-		 */
-		isBlock?: boolean;
-		/**
-		 * Borderless style that may be preferred in some contexts.
-		 *
-		 * @default false
-		 */
-		__experimentalIsBorderless?: boolean;
-		/**
-		 * Callback when a segment is selected.
-		 */
-		onChange?: ( value: ReactText | undefined ) => void;
-		/**
-		 * The value of `ToggleGroupControl`
-		 */
-		value?: ReactText;
-		/**
-		 * The options to render in the `ToggleGroupControl`, using either the `ToggleGroupControlOption` or
-		 * `ToggleGroupControlOptionIcon` components.
-		 */
-		children: ReactNode;
-		/**
-		 * The size variant of the control.
-		 *
-		 * @default 'default'
-		 */
-		size?: 'default' | '__unstable-large';
-	};
+export type ToggleGroupControlProps = Pick<
+	BaseControlProps,
+	'help' | '__nextHasNoMarginBottom'
+> & {
+	/**
+	 * Label for the control.
+	 */
+	label: string;
+	/**
+	 * If true, the label will only be visible to screen readers.
+	 *
+	 * @default false
+	 */
+	hideLabelFromVision?: boolean;
+	/**
+	 * Determines if segments should be rendered with equal widths.
+	 *
+	 * @default false
+	 */
+	isAdaptiveWidth?: boolean;
+	/**
+	 * Renders `ToggleGroupControl` as a (CSS) block element.
+	 *
+	 * @default false
+	 */
+	isBlock?: boolean;
+	/**
+	 * Whether an option can be deselected by clicking it again.
+	 *
+	 * @default false
+	 */
+	isDeselectable?: boolean;
+	/**
+	 * Callback when a segment is selected.
+	 */
+	onChange?: ( value: ReactText | undefined ) => void;
+	/**
+	 * The selected value.
+	 */
+	value?: ReactText;
+	/**
+	 * The options to render in the `ToggleGroupControl`, using either the `ToggleGroupControlOption` or
+	 * `ToggleGroupControlOptionIcon` components.
+	 */
+	children: ReactNode;
+	/**
+	 * The size variant of the control.
+	 *
+	 * @default 'default'
+	 */
+	size?: 'default' | '__unstable-large';
+};
 
-export type ToggleGroupControlContextProps = RadioStateReturn &
-	Pick< ToggleGroupControlProps, 'size' > & {
-		/**
-		 * Renders `ToggleGroupControl` as a (CSS) block element.
-		 *
-		 * @default false
-		 */
-		isBlock?: boolean;
-	};
+type ToggleGroupControlAsRadioContext = {
+	isDeselectable?: false;
+} & RadioStateReturn;
+
+type ToggleGroupControlAsButtonContext = { isDeselectable: true } & Pick<
+	RadioStateReturn,
+	'state' | 'setState'
+>;
+
+export type ToggleGroupControlContextProps = Pick<
+	ToggleGroupControlProps,
+	'isBlock' | 'size'
+> & {
+	baseId: string;
+} & ( ToggleGroupControlAsRadioContext | ToggleGroupControlAsButtonContext );
 
 export type ToggleGroupControlBackdropProps = {
 	containerRef: MutableRefObject< HTMLElement | undefined >;
@@ -142,3 +146,11 @@ export type ToggleGroupControlBackdropProps = {
 	isAdaptiveWidth?: boolean;
 	state?: any;
 };
+
+export type ToggleGroupControlMainControlProps = Pick<
+	ToggleGroupControlProps,
+	'children' | 'isAdaptiveWidth' | 'label' | 'size'
+> & {
+	onChange: ( value: ReactText | undefined ) => void;
+	value?: ReactText;
+};

package/src/toolbar/test/index.js

@@ -21,10 +21,10 @@ describe( 'Toolbar', () => {
 
 			expect(
 				screen.getByLabelText( 'control1', { selector: 'button' } )
-			).toBeTruthy();
+			).toBeInTheDocument();
 			expect(
 				screen.getByLabelText( 'control2', { selector: 'button' } )
-			).toBeTruthy();
+			).toBeInTheDocument();
 		} );
 	} );
 } );

package/src/toolbar-dropdown-menu/index.js

@@ -26,7 +26,7 @@ function ToolbarDropdownMenu( props, ref ) {
 				<DropdownMenu
 					{ ...props }
 					popoverProps={ {
-						isAlternate: true,
+						variant: 'toolbar',
 						...props.popoverProps,
 					} }
 					toggleProps={ toolbarItemProps }

package/src/toolbar-group/test/index.js

@@ -13,13 +13,13 @@ describe( 'ToolbarGroup', () => {
 		it( 'should render an empty node, when controls are not passed', () => {
 			const { container } = render( <ToolbarGroup /> );
 
-			expect( container.innerHTML ).toBe( '' );
+			expect( container ).toBeEmptyDOMElement();
 		} );
 
 		it( 'should render an empty node, when controls are empty', () => {
 			const { container } = render( <ToolbarGroup controls={ [] } /> );
 
-			expect( container.innerHTML ).toBe( '' );
+			expect( container ).toBeEmptyDOMElement();
 		} );
 
 		it( 'should render a list of controls with buttons', () => {
@@ -36,10 +36,8 @@ describe( 'ToolbarGroup', () => {
 			render( <ToolbarGroup controls={ controls } /> );
 
 			const toolbarButton = screen.getByLabelText( 'WordPress' );
-			expect( toolbarButton.getAttribute( 'aria-pressed' ) ).toBe(
-				'false'
-			);
-			expect( toolbarButton.getAttribute( 'type' ) ).toBe( 'button' );
+			expect( toolbarButton ).toHaveAttribute( 'aria-pressed', 'false' );
+			expect( toolbarButton ).toHaveAttribute( 'type', 'button' );
 		} );
 
 		it( 'should render a list of controls with buttons and active control', () => {
@@ -56,10 +54,8 @@ describe( 'ToolbarGroup', () => {
 			render( <ToolbarGroup controls={ controls } /> );
 
 			const toolbarButton = screen.getByLabelText( 'WordPress' );
-			expect( toolbarButton.getAttribute( 'aria-pressed' ) ).toBe(
-				'true'
-			);
-			expect( toolbarButton.getAttribute( 'type' ) ).toBe( 'button' );
+			expect( toolbarButton ).toHaveAttribute( 'aria-pressed', 'true' );
+			expect( toolbarButton ).toHaveAttribute( 'type', 'button' );
 		} );
 
 		it( 'should render a nested list of controls with separator between', () => {

package/src/tools-panel/stories/index.js

@@ -497,7 +497,6 @@ export const WithConditionallyRenderedControl = () => {
 export { ToolsPanelWithItemGroupSlot } from './tools-panel-with-item-group-slot';
 
 const PanelWrapperView = styled.div`
-	max-width: 280px;
 	font-size: 13px;
 
 	.components-dropdown-menu__menu {

package/src/tools-panel/stories/tools-panel-with-item-group-slot.js

@@ -203,7 +203,6 @@ export const ToolsPanelWithItemGroupSlot = () => {
 };
 
 const PanelWrapperView = styled.div`
-	max-width: 280px;
 	font-size: 13px;
 
 	.components-dropdown-menu__menu {

package/src/tools-panel/test/index.js

@@ -295,7 +295,7 @@ describe( 'ToolsPanel', () => {
 			expect( control ).toBeInTheDocument();
 
 			// Test the aria live announcement.
-			const announcement = await screen.getByText( 'Alt is now visible' );
+			const announcement = screen.getByText( 'Alt is now visible' );
 			expect( announcement ).toHaveAttribute( 'aria-live', 'assertive' );
 		} );
 
@@ -308,7 +308,7 @@ describe( 'ToolsPanel', () => {
 			expect( control ).not.toBeInTheDocument();
 
 			// Test the aria live announcement.
-			const announcement = await screen.getByText(
+			const announcement = screen.getByText(
 				'Example hidden and reset to default'
 			);
 			expect( announcement ).toHaveAttribute( 'aria-live', 'assertive' );
@@ -337,9 +337,7 @@ describe( 'ToolsPanel', () => {
 			expect( resetControl ).toBeInTheDocument();
 
 			// Test the aria live announcement.
-			const announcement = await screen.getByText(
-				'Example reset to default'
-			);
+			const announcement = screen.getByText( 'Example reset to default' );
 			expect( announcement ).toHaveAttribute( 'aria-live', 'assertive' );
 		} );
 
@@ -1057,7 +1055,7 @@ describe( 'ToolsPanel', () => {
 			await selectMenuItem( 'Reset all' );
 
 			// Test the aria live announcement.
-			const announcement = await screen.getByText( 'All options reset' );
+			const announcement = screen.getByText( 'All options reset' );
 			expect( announcement ).toHaveAttribute( 'aria-live', 'assertive' );
 
 			const disabledResetAllItem = await screen.findByRole( 'menuitem', {

package/src/tools-panel/tools-panel/hook.ts

@@ -139,7 +139,7 @@ export function useToolsPanel(
 			} );
 			return items;
 		} );
-	}, [ generateMenuItems, panelItems, setMenuItems ] );
+	}, [ panelItems, setMenuItems ] );
 
 	// Force a menu item to be checked.
 	// This is intended for use with default panel items. They are displayed
@@ -255,13 +255,7 @@ export function useToolsPanel(
 			shouldReset: true,
 		} );
 		setMenuItems( resetMenuItems );
-	}, [
-		generateMenuItems,
-		isResetting.current,
-		panelItems,
-		resetAll,
-		setMenuItems,
-	] );
+	}, [ panelItems, resetAll, setMenuItems ] );
 
 	// Assist ItemGroup styling when there are potentially hidden placeholder
 	// items by identifying first & last items that are toggled on for display.
@@ -300,7 +294,6 @@ export function useToolsPanel(
 			deregisterPanelItem,
 			firstDisplayedItem,
 			flagItemCustomization,
-			isResetting.current,
 			lastDisplayedItem,
 			menuItems,
 			panelId,

package/src/tools-panel/tools-panel-item/hook.ts

@@ -42,8 +42,11 @@ export function useToolsPanelItem(
 		__experimentalLastVisibleItemClass,
 	} = useToolsPanelContext();
 
-	const hasValueCallback = useCallback( hasValue, [ panelId ] );
-	const resetAllFilterCallback = useCallback( resetAllFilter, [ panelId ] );
+	const hasValueCallback = useCallback( hasValue, [ panelId, hasValue ] );
+	const resetAllFilterCallback = useCallback( resetAllFilter, [
+		panelId,
+		resetAllFilter,
+	] );
 	const previousPanelId = usePrevious( currentPanelId );
 
 	const hasMatchingPanel =
@@ -79,6 +82,8 @@ export function useToolsPanelItem(
 		panelId,
 		previousPanelId,
 		resetAllFilterCallback,
+		registerPanelItem,
+		deregisterPanelItem,
 	] );
 
 	const isValueSet = hasValue();
@@ -90,7 +95,13 @@ export function useToolsPanelItem(
 		if ( isShownByDefault && isValueSet && ! wasValueSet ) {
 			flagItemCustomization( label );
 		}
-	}, [ isValueSet, wasValueSet, isShownByDefault, label ] );
+	}, [
+		isValueSet,
+		wasValueSet,
+		isShownByDefault,
+		label,
+		flagItemCustomization,
+	] );
 
 	// Note: `label` is used as a key when building menu item state in
 	// `ToolsPanel`.
@@ -118,6 +129,8 @@ export function useToolsPanelItem(
 		isResetting,
 		isValueSet,
 		wasMenuItemChecked,
+		onSelect,
+		onDeselect,
 	] );
 
 	// The item is shown if it is a default control regardless of whether it
@@ -153,6 +166,7 @@ export function useToolsPanelItem(
 		lastDisplayedItem,
 		__experimentalFirstVisibleItemClass,
 		__experimentalLastVisibleItemClass,
+		label,
 	] );
 
 	return {

package/src/tooltip/index.js

@@ -228,6 +228,9 @@ function Tooltip( props ) {
 		document.removeEventListener( 'mouseup', cancelIsMouseDown );
 	};
 
+	// Ignore reason: updating the deps array here could cause unexpected changes in behavior.
+	// Deferring until a more detailed investigation/refactor can be performed.
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useEffect( () => clearOnUnmount, [] );
 
 	if ( Children.count( children ) !== 1 ) {

package/src/tooltip/index.native.js

@@ -62,6 +62,9 @@ const useKeyboardVisibility = () => {
 			showListener.remove();
 			hideListener.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
 	}, [] );
 
 	return keyboardVisible;
@@ -102,6 +105,9 @@ const Tooltip = ( {
 			} );
 		}
 		return () => onHandleScreenTouch( 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
 	}, [ visible ] );
 
 	// Manage visibility animation.
@@ -115,6 +121,9 @@ const Tooltip = ( {
 			setAnimating( true );
 			startAnimation();
 		}
+		// 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
 	}, [ visible ] );
 
 	// Manage tooltip visibility and position in relation to keyboard.
@@ -133,6 +142,9 @@ const Tooltip = ( {
 			setAnimating( true );
 			setVisible( 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
 	}, [ visible, keyboardVisible ] );
 
 	// Manage tooltip position during keyboard frame changes.
@@ -261,6 +273,9 @@ const TooltipSlot = ( { children, ...rest } ) => {
 		setHandleScreenTouch( null );
 	};
 	// Memoize context value to avoid unnecessary rerenders of the Provider's children
+	// 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 value = useMemo( () => ( { onHandleScreenTouch } ) );
 
 	return (

package/src/tooltip/test/index.native.js

@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import { act } from 'react-test-renderer';
-import { fireEvent, render } from 'test/helpers';
+import { fireEvent, render, act } from 'test/helpers';
 import { Keyboard, Text } from 'react-native';
 
 /**

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

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

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

@@ -1,25 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`RovingTabIndexItem allows another component to be specified as the rendered component using the \`as\` prop 1`] = `
-<button
-  onFocus={[Function]}
-/>
+<div>
+  <button />
+</div>
 `;
 
 exports[`RovingTabIndexItem allows children to be declared using a child render function as an alternative to \`as\` 1`] = `
-<button
-  className="my-button"
-  onFocus={[Function]}
->
-  Click Me!
-</button>
+<div>
+  <button
+    class="my-button"
+  >
+    Click Me!
+  </button>
+</div>
 `;
 
 exports[`RovingTabIndexItem forwards props to the \`as\` component 1`] = `
-<button
-  className="my-button"
-  onFocus={[Function]}
->
-  Click Me!
-</button>
+<div>
+  <button
+    class="my-button"
+  >
+    Click Me!
+  </button>
+</div>
 `;

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

@@ -2,6 +2,8 @@
 
 exports[`RovingTabIndex does not render any elements other than its children 1`] = `
 <div>
-  child element
+  <div>
+    child element
+  </div>
 </div>
 `;

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

@@ -1,32 +1,40 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TreeGridRow forwards other props to the rendered tr element 1`] = `
-<table>
-  <tr
-    aria-level="1"
-    aria-posinset="1"
-    aria-setsize="1"
-    className="my-row"
-    role="row"
-  >
-    <td>
-      Test
-    </td>
-  </tr>
-</table>
+<div>
+  <table>
+    <tbody>
+      <tr
+        aria-level="1"
+        aria-posinset="1"
+        aria-setsize="1"
+        class="my-row"
+        role="row"
+      >
+        <td>
+          Test
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 `;
 
 exports[`TreeGridRow renders a tr with support for level, positionInSet and setSize props 1`] = `
-<table>
-  <tr
-    aria-level="1"
-    aria-posinset="1"
-    aria-setsize="1"
-    role="row"
-  >
-    <td>
-      Test
-    </td>
-  </tr>
-</table>
+<div>
+  <table>
+    <tbody>
+      <tr
+        aria-level="1"
+        aria-posinset="1"
+        aria-setsize="1"
+        role="row"
+      >
+        <td>
+          Test
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 `;

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import TestRenderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -21,7 +21,7 @@ const TestButton = forwardRef( ( { ...props }, ref ) => (
 describe( 'TreeGridCell', () => {
 	it( 'requires TreeGrid to be declared as a parent component somewhere in the component hierarchy', () => {
 		expect( () =>
-			TestRenderer.create(
+			render(
 				<TreeGridCell>
 					{ ( props ) => (
 						<TestButton className="my-button" { ...props }>
@@ -35,7 +35,7 @@ describe( 'TreeGridCell', () => {
 	} );
 
 	it( 'uses a child render function to render children', () => {
-		const renderer = TestRenderer.create(
+		const { container } = render(
 			<TreeGrid>
 				<tr>
 					<TreeGridCell>
@@ -49,6 +49,6 @@ describe( 'TreeGridCell', () => {
 			</TreeGrid>
 		);
 
-		expect( renderer.toJSON() ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );