diff --git a/packages/components/src/scrollable/README.md b/packages/components/src/scrollable/README.md index 6e78dd5544f96..f0876f7773ae7 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 d89d42d85f5dd..34e73e284d9ed 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} props + * @param {import('react').Ref} forwardedRef + */ +function Scrollable( props, forwardedRef ) { + const scrollableProps = useScrollable( props ); + + return ; +} + /** * `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;