docs: DX and performance improvements in API reference (#9430)

- Improve scroll behavior between active sections
- Improve lag when clicking on a sidebar item
- Refactor internal working of the `SidebarProvider` to find active items faster.
- Use Next.js's `useRouter` hook for changing the hash (since they added the option to disable scroll)
- Change `isBrowser` from a hook to a provider since it's widely used across applications.
- Other general improvements and fixes.

Closes DOCS-952

www/packages/docs-ui/src/components/Bannerv2/index.tsx

@@ -13,7 +13,7 @@ export type Bannerv2Props = {
 
 export const Bannerv2 = ({ className }: Bannerv2Props) => {
   const [show, setShow] = useState(false)
-  const isBrowser = useIsBrowser()
+  const { isBrowser } = useIsBrowser()
 
   useEffect(() => {
     if (!isBrowser) {

www/packages/docs-ui/src/components/ChildDocs/index.tsx

@@ -22,7 +22,7 @@ export const ChildDocs = ({
   hideTitle = false,
   childLevel = 1,
 }: ChildDocsProps) => {
-  const { currentItems, getActiveItem } = useSidebar()
+  const { currentItems, activeItem } = useSidebar()
   const filterType = useMemo(() => {
     return showItems !== undefined
       ? "show"
@@ -75,7 +75,7 @@ export const ChildDocs = ({
           ? Object.assign({}, currentItems)
           : undefined
         : {
-            default: [...(getActiveItem()?.children || [])],
+            default: [...(activeItem?.children || [])],
           }
     if (filterType === "all" || !targetItems) {
       return targetItems
@@ -85,7 +85,7 @@ export const ChildDocs = ({
       ...targetItems,
       default: filterItems(targetItems.default),
     }
-  }, [currentItems, type, getActiveItem, filterItems])
+  }, [currentItems, type, activeItem, filterItems])
 
   const filterNonInteractiveItems = (
     items: SidebarItem[] | undefined

www/packages/docs-ui/src/components/MainNav/Breadcrumb/index.tsx

@@ -7,7 +7,7 @@ import Link from "next/link"
 import { SidebarItemLink } from "types"
 
 export const MainNavBreadcrumbs = () => {
-  const { currentItems, getActiveItem } = useSidebar()
+  const { currentItems, activeItem } = useSidebar()
   const {
     activeItem: mainNavActiveItem,
     breadcrumbOptions: { showCategories },
@@ -63,7 +63,6 @@ export const MainNavBreadcrumbs = () => {
       )
     }
 
-    const activeItem = getActiveItem()
     if (activeItem && !mainNavActiveItem?.path.endsWith(activeItem.path)) {
       if (
         activeItem.parentItem &&
@@ -83,7 +82,7 @@ export const MainNavBreadcrumbs = () => {
     }
 
     return tempBreadcrumbItems
-  }, [currentItems, getActiveItem])
+  }, [currentItems, activeItem])
 
   return (
     <div

www/packages/docs-ui/src/components/RootProviders/index.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import React from "react"
+import {
+  BrowserProvider,
+  ColorModeProvider,
+  MobileProvider,
+  ModalProvider,
+} from "../../providers"
+
+type RootProvidersProps = {
+  children: React.ReactNode
+}
+
+export const RootProviders = ({ children }: RootProvidersProps) => {
+  return (
+    <BrowserProvider>
+      <MobileProvider>
+        <ColorModeProvider>
+          <ModalProvider>{children}</ModalProvider>
+        </ColorModeProvider>
+      </MobileProvider>
+    </BrowserProvider>
+  )
+}

www/packages/docs-ui/src/components/Sidebar/Item/Link/index.tsx

@@ -76,6 +76,12 @@ export const SidebarItemLink = ({
     newTopCalculator,
   ])
 
+  useEffect(() => {
+    if (active && isMobile) {
+      setSidebarOpen(false)
+    }
+  }, [active, isMobile])
+
   const hasChildren = useMemo(() => {
     return !item.isChildSidebar && (item.children?.length || 0) > 0
   }, [item.children])
@@ -108,14 +114,6 @@ export const SidebarItemLink = ({
             "flex justify-between items-center gap-[6px]",
             className
           )}
-          scroll={true}
-          onClick={() => {
-            if (isMobile) {
-              setSidebarOpen(false)
-            }
-          }}
-          replace={!item.isPathHref}
-          shallow={!item.isPathHref}
           {...item.linkProps}
         >
           <span

www/packages/docs-ui/src/components/Toc/index.tsx

@@ -16,7 +16,7 @@ import { TocMenu } from "./Menu"
 export const Toc = () => {
   const [items, setItems] = useState<ToCItemUi[]>([])
   const [showMenu, setShowMenu] = useState(false)
-  const isBrowser = useIsBrowser()
+  const { isBrowser } = useIsBrowser()
   const { items: headingItems, activeItemId } = useActiveOnScroll({})
   const [maxHeight, setMaxHeight] = useState(0)
   const { scrollableElement } = useScrollController()

www/packages/docs-ui/src/components/TypeList/Items/index.tsx

@@ -42,7 +42,7 @@ const TypeListItem = ({
   sectionTitle,
   referenceType = "method",
 }: TypeListItemProps) => {
-  const isBrowser = useIsBrowser()
+  const { isBrowser } = useIsBrowser()
   const pathname = usePathname()
   const {
     config: { baseUrl, basePath },

www/packages/docs-ui/src/components/index.ts

@@ -53,6 +53,7 @@ export * from "./Notification/Item/Layout/Default"
 export * from "./Pagination"
 export * from "./Prerequisites"
 export * from "./Rating"
+export * from "./RootProviders"
 export * from "./Search"
 export * from "./Search/EmptyQueryBoundary"
 export * from "./Search/Hits"