docs: fix sidebar navigation in API reference (#11179)

www/apps/api-reference/components/Tags/Section/Schema/index.tsx

@@ -30,10 +30,8 @@ export type TagSectionSchemaProps = {
 }
 
 const TagSectionSchema = ({ schema, tagName }: TagSectionSchemaProps) => {
-  const paramsRef = useRef<HTMLDivElement>(null)
   const { addItems, setActivePath, activePath } = useSidebar()
   const { displayedArea } = useArea()
-  const tagSlugName = useMemo(() => getSectionId([tagName]), [tagName])
   const formattedName = useMemo(
     () => singular(tagName).replaceAll(" ", ""),
     [tagName]
@@ -129,7 +127,7 @@ const TagSectionSchema = ({ schema, tagName }: TagSectionSchemaProps) => {
         root={root}
         threshold={0.1}
       >
-        <SectionContainer ref={paramsRef}>
+        <SectionContainer>
           <DividedLayout
             mainContent={
               <div>

www/apps/api-reference/components/Tags/Section/index.tsx

@@ -23,7 +23,7 @@ import clsx from "clsx"
 import { Feedback, Loading, Link } from "docs-ui"
 import { usePathname, useRouter } from "next/navigation"
 import { PathsObject, SchemaObject, TagObject } from "@/types/openapi"
-import { TagSectionSchemaProps } from "./Schema"
+import TagSectionSchema from "./Schema"
 import checkElementInViewport from "../../../utils/check-element-in-viewport"
 import TagPaths from "../Paths"
 import useSWR from "swr"
@@ -37,10 +37,6 @@ const Section = dynamic<SectionProps>(
   async () => import("../../Section")
 ) as React.FC<SectionProps>
 
-const TagSectionSchema = dynamic<TagSectionSchemaProps>(
-  async () => import("./Schema")
-) as React.FC<TagSectionSchemaProps>
-
 const MDXContentClient = dynamic<MDXContentClientProps>(
   async () => import("../../MDXContent/Client"),
   {
@@ -117,21 +113,22 @@ const TagSectionComponent = ({ tag }: TagSectionProps) => {
       rootMargin={`112px 0px 112px 0px`}
       root={root}
       onChange={(inView) => {
-        if (inView) {
-          if (!loadData) {
-            setLoadData(true)
+        if (!inView) {
+          return
+        }
+        if (!loadData) {
+          setLoadData(true)
+        }
+        // ensure that the hash link doesn't change if it links to an inner path
+        const currentHashArr = location.hash.replace("#", "").split("_")
+        if (currentHashArr.length < 2 || currentHashArr[0] !== slugTagName) {
+          if (location.hash !== slugTagName) {
+            router.push(`#${slugTagName}`, {
+              scroll: false,
+            })
           }
-          // ensure that the hash link doesn't change if it links to an inner path
-          const currentHashArr = location.hash.replace("#", "").split("_")
-          if (currentHashArr.length < 2 || currentHashArr[0] !== slugTagName) {
-            if (location.hash !== slugTagName) {
-              router.push(`#${slugTagName}`, {
-                scroll: false,
-              })
-            }
-            if (activePath !== slugTagName) {
-              setActivePath(slugTagName)
-            }
+          if (activePath !== slugTagName) {
+            setActivePath(slugTagName)
           }
         }
       }}

www/packages/docs-ui/src/hooks/use-active-on-scroll/index.tsx

@@ -98,6 +98,18 @@ export const useActiveOnScroll = ({
     if (!enable) {
       return
     }
+    const rootBoundingRectElm =
+      root && "getBoundingClientRect" in root
+        ? root.getBoundingClientRect()
+        : root?.body.getBoundingClientRect()
+
+    if (
+      rootBoundingRectElm === undefined ||
+      (rootBoundingRectElm.top < 0 && rootBoundingRectElm.bottom < 0)
+    ) {
+      setActiveItemId("")
+      return
+    }
     const headings = getHeadingsInElm()
     let selectedHeadingByHash: HTMLHeadingElement | undefined = undefined
     const hash = location.hash.replace("#", "")
@@ -129,17 +141,19 @@ export const useActiveOnScroll = ({
       }
     })
 
-    const negativeDistanceToHalfway = Math.abs(
-      halfway + closestNegativeDistance
-    )
-    const positiveDistanceToHalfway = Math.abs(
-      halfway - closestPositiveDistance
-    )
+    const negativeDistanceToHalfway = closestNegativeDistance
+      ? Math.abs(halfway + closestNegativeDistance)
+      : 0
+    const positiveDistanceToHalfway = closestPositiveDistance
+      ? Math.abs(halfway - closestPositiveDistance)
+      : 0
 
     const chosenClosest =
-      negativeDistanceToHalfway > positiveDistanceToHalfway
-        ? closestNegativeHeading
-        : closestPositiveHeading
+      !negativeDistanceToHalfway && !positiveDistanceToHalfway
+        ? undefined
+        : negativeDistanceToHalfway > positiveDistanceToHalfway
+          ? closestNegativeHeading
+          : closestPositiveHeading
 
     setActiveItemId(
       chosenClosest
@@ -152,7 +166,7 @@ export const useActiveOnScroll = ({
               : ""
             : ""
     )
-  }, [getHeadingsInElm, items, enable])
+  }, [getHeadingsInElm, items, enable, root])
 
   useEffect(() => {
     if (!scrollableElement || !enable) {

www/packages/docs-ui/src/hooks/use-scroll-utils/index.tsx

@@ -106,6 +106,7 @@ function useScrollControllerContextValue({
       // 56 is the height of the navbar
       // might need a better way to determine it.
       top: top - parentOffsetTop - 56,
+      behavior: "instant",
     })
   }