Panel: Improve scroll view handling when expanding

packages/block-editor/src/components/panel-color-settings/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { create, act } from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import { noop } from 'lodash';
 
 /**
@@ -11,120 +11,106 @@ import PanelColorSettings from '../';
 
 describe( 'PanelColorSettings', () => {
 	it( 'should not render anything if there are no colors to choose', async () => {
-		let root;
-
-		await act( async () => {
-			root = create(
-				<PanelColorSettings
-					title="Test Title"
-					colors={ [] }
-					disableCustomColors={ true }
-					colorSettings={ [
-						{
-							value: '#000',
-							onChange: noop,
-							label: 'border color',
-						},
-						{
-							value: '#111',
-							onChange: noop,
-							label: 'background color',
-						},
-					] }
-				/>
-			);
-		} );
-
-		expect( root.toJSON() ).toBe( null );
+		const { container } = render(
+			<PanelColorSettings
+				title="Test Title"
+				colors={ [] }
+				disableCustomColors={ true }
+				colorSettings={ [
+					{
+						value: '#000',
+						onChange: noop,
+						label: 'border color',
+					},
+					{
+						value: '#111',
+						onChange: noop,
+						label: 'background color',
+					},
+				] }
+			/>
+		);
+		expect( container.innerHTML ).toBe( '' );
 	} );
 
 	it( 'should render a color panel if at least one setting supports custom colors', async () => {
-		let root;
-		await act( async () => {
-			root = create(
-				<PanelColorSettings
-					title="Test Title"
-					colors={ [] }
-					disableCustomColors={ true }
-					colorSettings={ [
-						{
-							value: '#000',
-							onChange: noop,
-							label: 'border color',
-						},
-						{
-							value: '#111',
-							onChange: noop,
-							label: 'background color',
-							disableCustomColors: false,
-						},
-					] }
-				/>
-			);
-		} );
-		expect( root ).not.toBe( null );
+		const { container } = render(
+			<PanelColorSettings
+				title="Test Title"
+				colors={ [] }
+				disableCustomColors={ true }
+				colorSettings={ [
+					{
+						value: '#000',
+						onChange: noop,
+						label: 'border color',
+					},
+					{
+						value: '#111',
+						onChange: noop,
+						label: 'background color',
+						disableCustomColors: false,
+					},
+				] }
+			/>
+		);
+		expect( container.innerHTML ).not.toBe( '' );
 	} );
 
 	it( 'should render a color panel if at least one setting specifies some colors to choose', async () => {
-		let root;
-		await act( async () => {
-			root = create(
-				<PanelColorSettings
-					title="Test Title"
-					colors={ [] }
-					disableCustomColors={ true }
-					colorSettings={ [
-						{
-							value: '#000',
-							onChange: noop,
-							label: 'border color',
-							colors: [
-								{
-									slug: 'red',
-									name: 'Red',
-									color: '#ff0000',
-								},
-							],
-						},
-						{
-							value: '#111',
-							onChange: noop,
-							label: 'background color',
-						},
-					] }
-				/>
-			);
-		} );
-		expect( root ).not.toBe( null );
+		const { container } = render(
+			<PanelColorSettings
+				title="Test Title"
+				colors={ [] }
+				disableCustomColors={ true }
+				colorSettings={ [
+					{
+						value: '#000',
+						onChange: noop,
+						label: 'border color',
+						colors: [
+							{
+								slug: 'red',
+								name: 'Red',
+								color: '#ff0000',
+							},
+						],
+					},
+					{
+						value: '#111',
+						onChange: noop,
+						label: 'background color',
+					},
+				] }
+			/>
+		);
+		expect( container.innerHTML ).not.toBe( '' );
 	} );
 
 	it( 'should not render anything if none of the setting panels has colors to choose', async () => {
-		let root;
-		await act( async () => {
-			root = create(
-				<PanelColorSettings
-					title="Test Title"
-					colors={ [] }
-					disableCustomColors={ false }
-					colorSettings={ [
-						{
-							value: '#000',
-							onChange: noop,
-							label: 'border color',
-							colors: [],
-							disableCustomColors: true,
-						},
-						{
-							value: '#111',
-							onChange: noop,
-							label: 'background color',
-							colors: [],
-							disableCustomColors: true,
-						},
-					] }
-				/>
-			);
-		} );
-		expect( root ).not.toBe( null );
+		const { container } = render(
+			<PanelColorSettings
+				title="Test Title"
+				colors={ [] }
+				disableCustomColors={ false }
+				colorSettings={ [
+					{
+						value: '#000',
+						onChange: noop,
+						label: 'border color',
+						colors: [],
+						disableCustomColors: true,
+					},
+					{
+						value: '#111',
+						onChange: noop,
+						label: 'background color',
+						colors: [],
+						disableCustomColors: true,
+					},
+				] }
+			/>
+		);
+		expect( container.innerHTML ).not.toBe( '' );
 	} );
 } );

packages/block-library/src/more/test/__snapshots__/edit.js.snap

@@ -3,14 +3,14 @@
 exports[`core/more/edit should match snapshot when noTeaser is false 1`] = `
 <React.Fragment>
   <InspectorControls>
-    <ForwardRef(PanelBody)>
+    <PanelBody>
       <ToggleControl
         checked={false}
         help={[Function]}
         label="Hide the excerpt on the full content page"
         onChange={[Function]}
       />
-    </ForwardRef(PanelBody)>
+    </PanelBody>
   </InspectorControls>
   <div
     className="wp-block-more"
@@ -33,14 +33,14 @@ exports[`core/more/edit should match snapshot when noTeaser is false 1`] = `
 exports[`core/more/edit should match snapshot when noTeaser is true 1`] = `
 <React.Fragment>
   <InspectorControls>
-    <ForwardRef(PanelBody)>
+    <PanelBody>
       <ToggleControl
         checked={true}
         help={[Function]}
         label="Hide the excerpt on the full content page"
         onChange={[Function]}
       />
-    </ForwardRef(PanelBody)>
+    </PanelBody>
   </InspectorControls>
   <div
     className="wp-block-more"

packages/components/package.json

@@ -52,6 +52,7 @@
 		"moment": "^2.22.1",
 		"re-resizable": "^6.4.0",
 		"react-dates": "^17.1.1",
+		"react-merge-refs": "^1.0.0",
 		"react-resize-aware": "^3.0.1",
 		"react-spring": "^8.0.20",
 		"react-use-gesture": "^7.0.15",