Merged in refactor/LOY-495-hook-for-sidepeek-scrolling (pull request #3297)

refactor(LOY-495): create useSidePeekScrollToTop hook

* refactor(LOY-495): create useSidePeekScrollToTop hook

* fix(LOY-495):  Read ref fresh each time


Approved-by: Emma Zettervall

apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/PreviousStaysSidePeek/index.tsx

@@ -1,9 +1,8 @@
 "use client"
 
-import { useState } from "react"
 import { useIntl } from "react-intl"
 
-import { useScrollToTop } from "@scandic-hotels/common/hooks/useScrollToTop"
+import { useSidePeekScrollToTop } from "@scandic-hotels/common/hooks/useSidePeekScrollToTop"
 import { BackToTopButton } from "@scandic-hotels/design-system/BackToTopButton"
 import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 import SidePeekSelfControlled from "@scandic-hotels/design-system/SidePeekSelfControlled"
@@ -32,24 +31,8 @@ export function PreviousStaysSidePeek({
   const intl = useIntl()
   const lang = useLang()
 
-  const [scrollContainer, setScrollContainer] = useState<HTMLElement | null>(
+  const { scrollContainerRef, showBackToTop, scrollToTop } =
-    null
+    useSidePeekScrollToTop()
-  )
-
-  const scrollContainerRef = (node: HTMLDivElement | null) => {
-    const parent = node?.parentElement
-    // SidePeekSelfControlled renders children twice: in the modal & in an sr-only SEO wrapper.
-    // We filter out the SEO wrapper to get the actual scrollable container.
-    if (parent && !parent.classList.contains("sr-only")) {
-      setScrollContainer(parent)
-    }
-  }
-
-  const { showBackToTop, scrollToTop } = useScrollToTop({
-    threshold: 200,
-    element: scrollContainer,
-    refScrollable: true,
-  })
 
   const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
     trpc.user.stays.previous.useInfiniteQuery(

packages/common/hooks/useScrollToTop.ts

@@ -29,11 +29,12 @@ export function useScrollToTop({
     const scrollTarget = refScrollable && targetElement ? targetElement : window
 
     function handleScroll() {
+      const currentElement = element ?? elementRef?.current
       let position = window.scrollY
-      if (targetElement) {
+      if (currentElement) {
         position = refScrollable
-          ? targetElement.scrollTop
+          ? currentElement.scrollTop
-          : targetElement.getBoundingClientRect().top * -1
+          : currentElement.getBoundingClientRect().top * -1
       }
       setShowBackToTop(position > threshold)
     }
@@ -47,8 +48,9 @@ export function useScrollToTop({
     if (targetElement) {
       if (refScrollable) {
         targetElement.scrollTo({ top: 0, behavior: "smooth" })
+      } else {
+        window.scrollTo({ top: targetElement.offsetTop, behavior: "smooth" })
       }
-      window.scrollTo({ top: targetElement.offsetTop, behavior: "smooth" })
     } else {
       window.scrollTo({ top: 0, behavior: "smooth" })
     }

packages/common/hooks/useSidePeekScrollToTop.ts

@@ -0,0 +1,53 @@
+import { useState } from "react"
+
+import { useScrollToTop } from "./useScrollToTop"
+
+interface UseSidePeekScrollToTopProps {
+  threshold?: number
+}
+
+/**
+ * Hook for managing scroll-to-top functionality within a SidePeekSelfControlled component.
+ * Automatically finds the scrollable dialog container from the SidePeek DOM structure.
+ *
+ * @example
+ * ```tsx
+ * const { scrollContainerRef, showBackToTop, scrollToTop } = useSidePeekScrollToTop()
+ *
+ * return (
+ *   <SidePeekSelfControlled>
+ *     <div ref={scrollContainerRef}>
+ *       {content}
+ *       {showBackToTop && <BackToTopButton onPress={scrollToTop} />}
+ *     </div>
+ *   </SidePeekSelfControlled>
+ * )
+ * ```
+ */
+export function useSidePeekScrollToTop({
+  threshold = 200,
+}: UseSidePeekScrollToTopProps = {}) {
+  const [scrollContainer, setScrollContainer] = useState<HTMLElement | null>(
+    null
+  )
+
+  const scrollContainerRef = (node: HTMLDivElement | null) => {
+    // SidePeekSelfControlled renders children twice: in the modal & in an sr-only SEO wrapper.
+    // We filter out the SEO wrapper to get the actual scrollable container.
+    // DOM structure: Dialog (scrollable) -> aside -> sidePeekContent -> our content div
+    const sidePeekContent = node?.parentElement
+    const aside = sidePeekContent?.parentElement
+    const dialog = aside?.parentElement
+    if (dialog && !sidePeekContent?.classList.contains("sr-only")) {
+      setScrollContainer(dialog)
+    }
+  }
+
+  const { showBackToTop, scrollToTop } = useScrollToTop({
+    threshold,
+    element: scrollContainer,
+    refScrollable: true,
+  })
+
+  return { scrollContainerRef, showBackToTop, scrollToTop }
+}