From 8d7697959dbb21f6a239aa2c6b2c84d39df8493e Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Wed, 19 Jul 2023 13:41:14 +0900
Subject: [PATCH] Don't use resize observer

---
 package-lock.json                  |  1 -
 package.json                       |  1 -
 src/components/keyboard/index.tsx  | 21 ++-------------------
 src/components/keyboard/style.scss |  7 +++----
 src/components/piano/style.scss    |  1 -
 src/constants.ts                   |  2 --
 6 files changed, 5 insertions(+), 28 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b448360..0b42888 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,6 @@
 				"@types/wordpress__components": "^23.0.1",
 				"@types/wordpress__dom-ready": "2.9.0",
 				"@types/wordpress__i18n": "^3.11.0",
-				"@wordpress/compose": "6.14.0",
 				"@wordpress/e2e-test-utils": "10.8.0",
 				"@wordpress/env": "^8.3.0",
 				"@wordpress/icons": "^9.28.0",
diff --git a/package.json b/package.json
index 9ab02cd..04c1a08 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,6 @@
 		"@types/wordpress__components": "^23.0.1",
 		"@types/wordpress__dom-ready": "2.9.0",
 		"@types/wordpress__i18n": "^3.11.0",
-		"@wordpress/compose": "6.14.0",
 		"@wordpress/e2e-test-utils": "10.8.0",
 		"@wordpress/env": "^8.3.0",
 		"@wordpress/icons": "^9.28.0",
diff --git a/src/components/keyboard/index.tsx b/src/components/keyboard/index.tsx
index fefcd5d..5c7237b 100644
--- a/src/components/keyboard/index.tsx
+++ b/src/components/keyboard/index.tsx
@@ -7,15 +7,10 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import {
-	// @ts-ignore: has no exported member
-	useResizeObserver,
-} from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import { KEYBOARD_WIDTH, KEYBOARD_PADDING } from '../../constants';
 import { KEYBOARD_LAYOUTS } from '../../keyboard-layout';
 import type { Key } from '../../constants';
 
@@ -26,9 +21,6 @@ type Props = {
 };
 
 const Keyboard = ( { activeKeys, keyLayout, onKeyClick }: Props ) => {
-	// Hooks to control the display of horizontal scroll bars.
-	const [ resizeListener, keysInnerSizes ] = useResizeObserver();
-
 	const keys =
 		KEYBOARD_LAYOUTS.find( ( { value } ) => value === keyLayout )?.keys ||
 		KEYBOARD_LAYOUTS[ 0 ].keys;
@@ -39,17 +31,8 @@ const Keyboard = ( { activeKeys, keyLayout, onKeyClick }: Props ) => {
 	};
 
 	return (
-		<div
-			className={ classnames( 'piano-block-keyboard', {
-				'is-scroll':
-					keysInnerSizes?.width && keysInnerSizes.width < KEYBOARD_WIDTH + KEYBOARD_PADDING * 2,
-			} ) }
-		>
-			{ resizeListener }
-			<div
-				className="piano-block-keyboard__inner"
-				style={ { width: `${ KEYBOARD_WIDTH }px`, padding: `0 ${ KEYBOARD_PADDING }px` } }
-			>
+		<div className="piano-block-keyboard">
+			<div className="piano-block-keyboard__inner">
 				{ keys.map( ( key, index ) => (
 					<button
 						key={ index }
diff --git a/src/components/keyboard/style.scss b/src/components/keyboard/style.scss
index 6b96c62..1f82600 100644
--- a/src/components/keyboard/style.scss
+++ b/src/components/keyboard/style.scss
@@ -1,15 +1,14 @@
 .piano-block-keyboard {
 	position: relative;
 	padding: 16px 0;
-
-	&.is-scroll {
-		overflow-x: scroll;
-	}
+	overflow-x: auto;
 
 	.piano-block-keyboard__inner {
 		box-sizing: border-box;
 		display: flex;
+		width: 850px;
 		height: 205px;
+		padding: 0 16px;
 		margin: 0 auto;
 	}
 
diff --git a/src/components/piano/style.scss b/src/components/piano/style.scss
index 3a37195..5f234f8 100644
--- a/src/components/piano/style.scss
+++ b/src/components/piano/style.scss
@@ -1,4 +1,3 @@
 .piano-block-container {
 	padding-top: 16px;
-	overflow: hidden;
 }
diff --git a/src/constants.ts b/src/constants.ts
index b2221cb..4501c82 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -27,8 +27,6 @@ export const MIN_VOLUME = -10 as const;
 export const MAX_VOLUME = 5 as const;
 export const DEFAULT_INSTRUMENT = 'acoustic-piano' as const;
 export const DEFAULT_OSCILLATOR_TYPE = 'sine' as const;
-export const KEYBOARD_WIDTH = 850 as const;
-export const KEYBOARD_PADDING = 16 as const;
 
 export const DEFAULT_SETTINGS = {
 	volume: 0,