From 0915035d90e69a066b131872e0865dee3444f6ab Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Mon, 20 Sep 2021 18:27:07 +0200
Subject: [PATCH] `Scrollable`: refactor away from the `createComponent`
 function (#34922)

---
 packages/components/src/scrollable/README.md  |  2 +-
 .../components/src/scrollable/component.js    | 23 ++++++++++++-------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/scrollable/README.md b/packages/components/src/scrollable/README.md
index 6e78dd5544f961..f0876f7773ae7b 100644
--- a/packages/components/src/scrollable/README.md
+++ b/packages/components/src/scrollable/README.md
@@ -9,7 +9,7 @@ This feature is still experimental. “Experimental” means this is an early im
 ## Usage
 
 ```jsx
-import {__experimentalScrollable as Scrollable } from '@wordpress/components/ui';
+import {__experimentalScrollable as Scrollable } from '@wordpress/components';
 
 function Example() {
 	return (
diff --git a/packages/components/src/scrollable/component.js b/packages/components/src/scrollable/component.js
index d89d42d85f5dd6..34e73e284d9ed8 100644
--- a/packages/components/src/scrollable/component.js
+++ b/packages/components/src/scrollable/component.js
@@ -1,15 +1,26 @@
 /**
  * Internal dependencies
  */
-import { createComponent } from '../ui/utils';
+import { contextConnect } from '../ui/context';
+import { View } from '../view';
 import { useScrollable } from './hook';
 
+/**
+ * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
+ * @param {import('react').Ref<any>}                                                        forwardedRef
+ */
+function Scrollable( props, forwardedRef ) {
+	const scrollableProps = useScrollable( props );
+
+	return <View { ...scrollableProps } ref={ forwardedRef } />;
+}
+
 /**
  * `Scrollable` is a layout component that content in a scrollable container.
  *
  * @example
  * ```jsx
- * import { __experimentalScrollable as Scrollable } from `@wordpress/components/ui`;
+ * import { __experimentalScrollable as Scrollable } from `@wordpress/components`;
  *
  * function Example() {
  * 	return (
@@ -21,10 +32,6 @@ import { useScrollable } from './hook';
  * ```
  */
 
-const Scrollable = createComponent( {
-	as: 'div',
-	useHook: useScrollable,
-	name: 'Scrollable',
-} );
+const ConnectedScrollable = contextConnect( Scrollable, 'Scrollable' );
 
-export default Scrollable;
+export default ConnectedScrollable;