[components] Refactor scroll components

packages/@sanity/components/src/scroll/ScrollContainer.tsx

@@ -1,33 +1,6 @@
-import React, {createElement, forwardRef, useCallback, useEffect, useContext, useRef} from 'react'
-
-type ScrollEventHandler = (event: Event) => void
-interface ScrollContextValue {
-  onScroll?: ScrollEventHandler
-}
-
-export const Context = React.createContext<ScrollContextValue>({})
-
-export function ScrollMonitor({
-  onScroll,
-  children
-}: {
-  onScroll: ScrollEventHandler
-  children?: React.ReactNode
-}) {
-  const parentContext = React.useContext(Context)
-  const handleScroll = React.useCallback(
-    (event: Event) => {
-      onScroll(event)
-
-      if (parentContext.onScroll) {
-        parentContext.onScroll(event)
-      }
-    },
-    [parentContext, onScroll]
-  )
-
-  return <Context.Provider value={{onScroll: handleScroll}}>{children}</Context.Provider>
-}
+import React, {createElement, forwardRef, useCallback, useEffect, useRef} from 'react'
+import {useScroll} from './hooks'
+import {ScrollEventHandler} from './types'
 
 interface ScrollContainerProps {
   as?: React.ElementType | keyof JSX.IntrinsicElements
@@ -44,7 +17,7 @@ export const ScrollContainer = forwardRef(
   (props: ScrollContainerProps & Omit<React.HTMLProps<HTMLElement>, 'onScroll'>, ref) => {
     const {as = 'div', onScroll, ...restProps} = props
     const rootRef = useRef<HTMLElement | null>(null)
-    const parentContext = useContext(Context)
+    const parentContext = useScroll()
 
     const handleScroll = useCallback(
       (event: Event) => {

packages/@sanity/components/src/scroll/hooks.ts

@@ -0,0 +1,6 @@
+import {useContext} from 'react'
+import {ScrollContext} from './scrollContext'
+
+export function useScroll() {
+  return useContext(ScrollContext)
+}

packages/@sanity/components/src/scroll/index.ts

@@ -1 +1,4 @@
+export * from './hooks'
 export * from './ScrollContainer'
+export * from './scrollMonitor'
+export * from './types'

packages/@sanity/components/src/scroll/scrollContext.ts

@@ -0,0 +1,4 @@
+import {createContext} from 'react'
+import {ScrollContextValue} from './types'
+
+export const ScrollContext = createContext<ScrollContextValue>({})

packages/@sanity/components/src/scroll/scrollMonitor.tsx

@@ -0,0 +1,28 @@
+import React, {useCallback} from 'react'
+import {useScroll} from './hooks'
+import {ScrollContext} from './scrollContext'
+import {ScrollEventHandler} from './types'
+
+interface ScrollMonitorProps {
+  onScroll: ScrollEventHandler
+  children?: React.ReactNode
+}
+
+export function ScrollMonitor({onScroll, children}: ScrollMonitorProps) {
+  const parentContext = useScroll()
+
+  const handleScroll = useCallback(
+    (event: Event) => {
+      onScroll(event)
+
+      if (parentContext.onScroll) {
+        parentContext.onScroll(event)
+      }
+    },
+    [parentContext, onScroll]
+  )
+
+  return (
+    <ScrollContext.Provider value={{onScroll: handleScroll}}>{children}</ScrollContext.Provider>
+  )
+}

packages/@sanity/components/src/scroll/types.ts

@@ -0,0 +1,5 @@
+export type ScrollEventHandler = (event: Event) => void
+
+export interface ScrollContextValue {
+  onScroll?: ScrollEventHandler
+}