Merge branch 'main' into feat/new-colours

components/src/components/atoms/ScrollBox/ScrollBox.tsx

@@ -72,13 +72,15 @@ const IntersectElement = styled.div(
 )
 
 type Props = {
+  hideDividers?: boolean | { top?: boolean; bottom?: boolean }
   topTriggerPx?: number
   bottomTriggerPx?: number
   onReachedTop?: () => void
   onReachedBottom?: () => void
 } & React.HTMLAttributes<HTMLDivElement>
 
 export const ScrollBox = ({
+  hideDividers = false,
   topTriggerPx = 16,
   bottomTriggerPx = 16,
   onReachedTop,
@@ -90,6 +92,11 @@ export const ScrollBox = ({
   const topRef = React.useRef<HTMLDivElement>(null)
   const bottomRef = React.useRef<HTMLDivElement>(null)
 
+  const hideTop =
+    typeof hideDividers === 'boolean' ? hideDividers : !!hideDividers?.top
+  const hideBottom =
+    typeof hideDividers === 'boolean' ? hideDividers : !!hideDividers?.bottom
+
   const funcRef = React.useRef<{
     onReachedTop?: () => void
     onReachedBottom?: () => void
@@ -110,8 +117,10 @@ export const ScrollBox = ({
         iref[1] = entry.time
       }
     }
-    intersectingTop[1] !== -1 && setShowTop(!intersectingTop[0])
-    intersectingBottom[1] !== -1 && setShowBottom(!intersectingBottom[0])
+    intersectingTop[1] !== -1 && !hideTop && setShowTop(!intersectingTop[0])
+    intersectingBottom[1] !== -1 &&
+      !hideBottom &&
+      setShowBottom(!intersectingBottom[0])
     intersectingTop[0] && funcRef.current.onReachedTop?.()
     intersectingBottom[0] && funcRef.current.onReachedBottom?.()
   }
@@ -133,6 +142,7 @@ export const ScrollBox = ({
     return () => {
       observer.disconnect()
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [bottomTriggerPx, topTriggerPx])
 
   React.useEffect(() => {