[v4] select tab with active hash and scroll to right heading (#3803)

* aa

* aa

* prettify

Author: dimaMachina

.changeset/neat-seas-beg.md

@@ -0,0 +1,5 @@
+---
+"nextra": patch
+---
+
+select tab with active hash and scroll to right heading

packages/nextra-theme-blog/CHANGELOG.md

@@ -355,8 +355,8 @@
     by
 
   ```js
-  import "nextra-theme-docs/style.css"; // for docs theme
-  import "nextra-theme-blog/style.css"; // for blog theme
+  import 'nextra-theme-docs/style.css' // for docs theme
+  import 'nextra-theme-blog/style.css' // for blog theme
   ```
 
 - Updated dependencies [2c8a8ab]
@@ -1408,19 +1408,19 @@
   and `nextra-theme-docs`
 
   ```js
-  import { Card, Cards } from "nextra/components";
+  import { Card, Cards } from 'nextra/components'
   ```
 
   ```js
-  import { Tab, Tabs } from "nextra/components";
+  import { Tab, Tabs } from 'nextra/components'
   ```
 
   ```js
-  import { Steps } from "nextra/components";
+  import { Steps } from 'nextra/components'
   ```
 
   ```js
-  import { FileTree } from "nextra/components";
+  import { FileTree } from 'nextra/components'
   ```
 
 ### Patch Changes

packages/nextra-theme-docs/CHANGELOG.md

@@ -4,7 +4,8 @@
 
 ### Minor Changes
 
-- 6d22c8f: export a `style-prefixed.css` file with Tailwind CSS v4 prefixed layers for projects using Tailwind CSS v3
+- 6d22c8f: export a `style-prefixed.css` file with Tailwind CSS v4 prefixed
+  layers for projects using Tailwind CSS v3
 
   - `@layer utilities` -> `@layer v4-utilities`
   - `@layer base` -> `@layer v4-base`
@@ -398,8 +399,8 @@
     by
 
   ```js
-  import "nextra-theme-docs/style.css"; // for docs theme
-  import "nextra-theme-blog/style.css"; // for blog theme
+  import 'nextra-theme-docs/style.css' // for docs theme
+  import 'nextra-theme-blog/style.css' // for blog theme
   ```
 
 - Updated dependencies [2c8a8ab]
@@ -1898,19 +1899,19 @@
   and `nextra-theme-docs`
 
   ```js
-  import { Card, Cards } from "nextra/components";
+  import { Card, Cards } from 'nextra/components'
   ```
 
   ```js
-  import { Tab, Tabs } from "nextra/components";
+  import { Tab, Tabs } from 'nextra/components'
   ```
 
   ```js
-  import { Steps } from "nextra/components";
+  import { Steps } from 'nextra/components'
   ```
 
   ```js
-  import { FileTree } from "nextra/components";
+  import { FileTree } from 'nextra/components'
   ```
 
 ### Patch Changes
@@ -2486,14 +2487,14 @@
 - 582ad96: feat: bump `rehype-pretty-code` version, support `showLineNumbers`
 - da998e6: move react components to `components` folder and replace exports:
   ```ts
-  import Bleed from "nextra-theme-docs/bleed";
-  import Callout from "nextra-theme-docs/callout";
-  import Collapse from "nextra-theme-docs/collapse";
-  import { Tab, Tabs } from "nextra-theme-docs/tabs";
+  import Bleed from 'nextra-theme-docs/bleed'
+  import Callout from 'nextra-theme-docs/callout'
+  import Collapse from 'nextra-theme-docs/collapse'
+  import { Tab, Tabs } from 'nextra-theme-docs/tabs'
   ```
   by
   ```ts
-  import { Bleed, Callout, Collapse, Tab, Tabs } from "nextra-theme-docs";
+  import { Bleed, Callout, Collapse, Tab, Tabs } from 'nextra-theme-docs'
   ```
 - e6771ca: move `withLayout` logic directly in nextra loader
 - 8ad9507: fix unable expanding folder items in sidebar
@@ -2813,14 +2814,14 @@
 - 48e0ac2: export `useConfig` and `useTheme`
 - da998e6: move react components to `components` folder and replace exports:
   ```ts
-  import Bleed from "nextra-theme-docs/bleed";
-  import Callout from "nextra-theme-docs/callout";
-  import Collapse from "nextra-theme-docs/collapse";
-  import { Tab, Tabs } from "nextra-theme-docs/tabs";
+  import Bleed from 'nextra-theme-docs/bleed'
+  import Callout from 'nextra-theme-docs/callout'
+  import Collapse from 'nextra-theme-docs/collapse'
+  import { Tab, Tabs } from 'nextra-theme-docs/tabs'
   ```
   by
   ```ts
-  import { Bleed, Callout, Collapse, Tab, Tabs } from "nextra-theme-docs";
+  import { Bleed, Callout, Collapse, Tab, Tabs } from 'nextra-theme-docs'
   ```
 - 43409ad: fix: mdx theme is missing
 

packages/nextra/CHANGELOG.md

@@ -294,8 +294,8 @@
     by
 
   ```js
-  import "nextra-theme-docs/style.css"; // for docs theme
-  import "nextra-theme-blog/style.css"; // for blog theme
+  import 'nextra-theme-docs/style.css' // for docs theme
+  import 'nextra-theme-blog/style.css' // for blog theme
   ```
 
 ## 4.0.0-app-router.8
@@ -1232,7 +1232,7 @@
   while importing
 
   ```js
-  import filterRouteLocale from "nextra/filter-route-locale";
+  import filterRouteLocale from 'nextra/filter-route-locale'
   ```
 
 - 4dd720ad: remove `font-weight: 500;` from styles of code blocks since it gives
@@ -1278,19 +1278,19 @@
   and `nextra-theme-docs`
 
   ```js
-  import { Card, Cards } from "nextra/components";
+  import { Card, Cards } from 'nextra/components'
   ```
 
   ```js
-  import { Tab, Tabs } from "nextra/components";
+  import { Tab, Tabs } from 'nextra/components'
   ```
 
   ```js
-  import { Steps } from "nextra/components";
+  import { Steps } from 'nextra/components'
   ```
 
   ```js
-  import { FileTree } from "nextra/components";
+  import { FileTree } from 'nextra/components'
   ```
 
 ### Patch Changes

packages/nextra/src/client/components/tabs/index.client.tsx

@@ -15,7 +15,8 @@ import type {
 } from '@headlessui/react'
 import cn from 'clsx'
 import type { FC, ReactElement, ReactNode } from 'react'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import { useHash } from './use-hash.js'
 
 type TabItem = string | ReactElement
 
@@ -47,13 +48,37 @@ export const Tabs: FC<
   tabClassName
 }) => {
   const [selectedIndex, setSelectedIndex] = useState(defaultIndex)
+  const hash = useHash()
+  const tabPanelsRef = useRef<HTMLDivElement>(null!)
 
   useEffect(() => {
     if (_selectedIndex !== undefined) {
       setSelectedIndex(_selectedIndex)
     }
   }, [_selectedIndex])
 
+  useEffect(() => {
+    if (!hash) return
+
+    const tabPanel = tabPanelsRef.current.querySelector(
+      `[role=tabpanel]:has([id="${hash}"])`
+    )
+    if (!tabPanel) return
+
+    for (const [index, el] of Object.entries(tabPanelsRef.current.children)) {
+      if (el === tabPanel) {
+        setSelectedIndex(Number(index))
+        // Execute on next tick after `selectedIndex` update
+        setTimeout(() => {
+          const link = tabPanel.querySelector<HTMLAnchorElement>(
+            `a[href="#${hash}"]`
+          )
+          link?.click()
+        }, 0)
+      }
+    }
+  }, [hash])
+
   useEffect(() => {
     if (!storageKey) {
       // Do not listen storage events if there is no storage key
@@ -116,7 +141,7 @@ export const Tabs: FC<
               const { selected, disabled, hover, focus } = args
               return cn(
                 focus && 'x:nextra-focus x:ring-inset',
-                'x:whitespace-nowrap',
+                'x:whitespace-nowrap x:cursor-pointer',
                 'x:rounded-t x:p-2 x:font-medium x:leading-5 x:transition-colors',
                 'x:-mb-0.5 x:select-none x:border-b-2',
                 selected
@@ -141,7 +166,7 @@ export const Tabs: FC<
           </HeadlessTab>
         ))}
       </TabList>
-      <TabPanels>{children}</TabPanels>
+      <TabPanels ref={tabPanelsRef}>{children}</TabPanels>
     </TabGroup>
   )
 }

packages/nextra/src/client/components/tabs/use-hash.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react'
+
+export function useHash() {
+  const [hash, setHash] = useState('')
+
+  useEffect(() => {
+    function handleHashChange() {
+      setHash(location.hash.replace('#', ''))
+    }
+    handleHashChange()
+
+    window.addEventListener('hashchange', handleHashChange)
+    return () => {
+      window.removeEventListener('hashchange', handleHashChange)
+    }
+  }, [])
+
+  return hash
+}

packages/nextra/src/server/__tests__/compile.test.ts

@@ -430,23 +430,6 @@ import Last from './three.mdx'
       }"
     `)
   })
-  it('should not attach headings with parent Tab or Tabs.Tab', async () => {
-    const rawJs = await compileMdx(
-      `
-<Tab>
- ## foo
-</Tab>
-
-<Tabs.Tab>
-  ## bar
-  ## baz [#custom-id]
-</Tabs.Tab>
-`,
-      { mdxOptions }
-    )
-    expect(rawJs).toMatch('export const toc = useTOC()')
-    expect(rawJs).not.toMatch('id=')
-  })
 })
 
 describe('Link', () => {

packages/nextra/src/server/remark-plugins/remark-headings.ts

@@ -17,8 +17,6 @@ export const getFlattenedValue = (node: Parent): string =>
     )
     .join('')
 
-const SKIP_FOR_PARENT_NAMES = new Set(['Tab', 'Tabs.Tab'])
-
 export const remarkHeadings: Plugin<
   [{ exportName?: string; isRemoteContent?: boolean }],
   Root
@@ -39,23 +37,19 @@ export const remarkHeadings: Plugin<
         // verify .md/.mdx exports and attach named `toc` export
         'mdxjsEsm'
       ],
-      (node, _index, parent) => {
+      (node, _index) => {
         if (node.type === 'heading') {
           if (node.depth === 1) {
             return
           }
 
           node.data ||= {}
           const headingProps: HProperties = (node.data.hProperties ||= {})
-          if (SKIP_FOR_PARENT_NAMES.has((parent as any).name)) {
-            delete headingProps.id
-          } else {
-            const value = getFlattenedValue(node)
-            const id = slugger.slug(headingProps.id || value)
-            // Attach flattened/custom #id to heading node
-            headingProps.id = id
-            headings.push({ depth: node.depth, value, id })
-          }
+          const value = getFlattenedValue(node)
+          const id = slugger.slug(headingProps.id || value)
+          // Attach flattened/custom #id to heading node
+          headingProps.id = id
+          headings.push({ depth: node.depth, value, id })
           return
         }