Merge branch 'main' into conico/img-preload

Author: conico974

.changeset/quiet-icons-deny.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Fix ToggeableLinkItem display

.github/CONTRIBUTING.md

@@ -54,10 +54,9 @@ After forking this repository, you'll want to [create a branch](https://docs.git
 #### 3. Install dependencies and run the project locally
 
 ##### Prerequisites:
-- Node.js (Version: >= 22.3)
-  - Use `nvm` for easy Node management
-- [Bun](https://bun.sh/) (Version: >=1.2.15)
-  - We use a text-based lockfile which isn't supported below 1.2.15
+
+- [Node.js](https://nodejs.org/en) (see "engines" in `package.json`)
+- [Bun](https://bun.sh/) (see "packageManager" in `package.json`)
 
 ##### Setup steps:
 

package.json

@@ -1,6 +1,9 @@
 {
     "name": "gitbook",
     "version": "0.1.0",
+    "engines": {
+        "node": "^22.3.0"
+    },
     "devDependencies": {
         "@biomejs/biome": "^1.9.4",
         "@changesets/cli": "^2.29.7",

packages/gitbook/e2e/internal.spec.ts

@@ -228,6 +228,58 @@ const testCases: TestsCase[] = [
                     );
                 },
             },
+            {
+                name: 'Expandable TOC navigation',
+                url: '',
+                run: async (page) => {
+                    await waitForCookiesDialog(page);
+
+                    // Verify "Navigation" link is not visible initially
+                    const navigationLink = page.getByRole('link', { name: 'Navigation' });
+                    await expect(navigationLink).not.toBeVisible();
+
+                    // Find and click the chevron element that is next to "Editor" in the TOC
+                    // It is a span inside the link
+                    const editorChevron = page
+                        .getByRole('link', { name: 'Editor' })
+                        .locator('span');
+                    await editorChevron.click();
+
+                    // Verify "Navigation" link becomes visible after expansion
+                    await expect(navigationLink).toBeVisible();
+                },
+            },
+            {
+                name: 'Expandable nested TOC navigation',
+                url: '',
+                screenshot: false,
+                run: async (page) => {
+                    await waitForCookiesDialog(page);
+
+                    // Verify "Spaces" link is not visible initially
+                    const navigationLink = page.getByRole('link', { name: 'Spaces' });
+                    await expect(navigationLink).not.toBeVisible();
+
+                    // Find and click the chevron element that is next to "Editor" in the TOC
+                    // It is a span inside the link
+                    const editorChevron = page
+                        .getByRole('link', { name: 'Editor' })
+                        .locator('span');
+                    await editorChevron.click();
+
+                    // At this stage the link should still not be visible
+                    await expect(navigationLink).not.toBeVisible();
+
+                    // Then we click 'Content Structure' chevron to expand further
+                    const contentStructureChevron = page
+                        .getByRole('link', { name: 'Content Structure' })
+                        .locator('span');
+                    await contentStructureChevron.click();
+
+                    // Verify "Spaces" link becomes visible after expansion
+                    await expect(navigationLink).toBeVisible();
+                },
+            },
             ...searchTestCases,
             {
                 name: 'Not found',

packages/gitbook/src/components/DocumentView/Tabs/DynamicTabs.tsx

@@ -2,12 +2,7 @@
 
 import React, { memo, useCallback, useMemo, type ComponentPropsWithRef } from 'react';
 
-import {
-    NavigationStatusContext,
-    useHash,
-    useIsMounted,
-    useListOverflow,
-} from '@/components/hooks';
+import { useHash, useIsMounted, useListOverflow } from '@/components/hooks';
 import { DropdownMenu, DropdownMenuItem } from '@/components/primitives';
 import { useLanguage } from '@/intl/client';
 import { tString } from '@/intl/translate';
@@ -74,7 +69,6 @@ export function DynamicTabs(props: {
 }) {
     const { id, tabs, className } = props;
     const router = useRouter();
-    const { onNavigationClick } = React.useContext(NavigationStatusContext);
 
     const hash = useHash();
     const [tabsState, setTabsState] = useTabsState();
@@ -106,8 +100,7 @@ export function DynamicTabs(props: {
 
             const href = `#${tab.id}`;
             if (window.location.hash !== href) {
-                router.replace(href);
-                onNavigationClick(href);
+                router.replace(href, { scroll: false });
             }
 
             setTabsState((prev) => {
@@ -128,7 +121,7 @@ export function DynamicTabs(props: {
                 };
             });
         },
-        [onNavigationClick, router, setTabsState, tabs, id]
+        [router, setTabsState, tabs, id]
     );
 
     // When the hash changes, we try to select the tab containing the targetted element.
@@ -184,7 +177,10 @@ const TabPanel = memo(function TabPanel(props: {
             role="tabpanel"
             id={tab.id}
             aria-labelledby={getTabButtonId(tab.id)}
-            className={tcls('p-4', isActive ? null : 'hidden')}
+            className={tcls(
+                'scroll-mt-[calc(var(--content-scroll-margin)+var(--spacing)*12)] p-4',
+                isActive ? null : 'hidden'
+            )}
         >
             {tab.body}
         </div>

packages/gitbook/src/components/TableOfContents/ToggleableLinkItem.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Icon } from '@gitbook/icons';
-import { motion } from 'motion/react';
+import { AnimatePresence, motion } from 'motion/react';
 import React, { useRef } from 'react';
 
 import { tcls } from '@/lib/tailwind';
@@ -180,14 +180,10 @@ function Toggler(props: {
 const show = {
     opacity: 1,
     height: 'auto',
-    display: 'inherit',
 };
 const hide = {
     opacity: 0,
     height: 0,
-    transitionEnd: {
-        display: 'none',
-    },
 };
 
 function Descendants(props: {
@@ -196,12 +192,17 @@ function Descendants(props: {
 }) {
     const { isVisible, children } = props;
     return (
-        <motion.div
-            animate={isVisible ? show : hide}
-            initial={isVisible ? show : hide}
-            style={{ overflow: 'hidden' }}
-        >
-            {children}
-        </motion.div>
+        <AnimatePresence>
+            {isVisible ? (
+                <motion.div
+                    initial={hide}
+                    animate={show}
+                    exit={hide}
+                    className="flex flex-col overflow-hidden"
+                >
+                    {children}
+                </motion.div>
+            ) : null}
+        </AnimatePresence>
     );
 }

packages/gitbook/src/components/hooks/usePrevious.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+/**
+ * Returns the value of the previous render.
+ */
+export function usePrevious<T>(value: T): T | undefined {
+    const ref = React.useRef<T | undefined>(undefined);
+    React.useLayoutEffect(() => {
+        ref.current = value;
+    });
+    return ref.current;
+}

packages/gitbook/src/components/hooks/useScrollPage.ts

@@ -4,6 +4,7 @@ import { usePathname } from 'next/navigation';
 import React from 'react';
 
 import { useHash } from './useHash';
+import { usePrevious } from './usePrevious';
 
 /**
  * Scroll the page to an anchor point or
@@ -12,8 +13,17 @@ import { useHash } from './useHash';
  */
 export function useScrollPage() {
     const hash = useHash();
+    const previousHash = usePrevious(hash);
     const pathname = usePathname();
+    const previousPathname = usePrevious(pathname);
     React.useLayoutEffect(() => {
+        // If there is no change in pathname or hash, do nothing
+        if (previousHash === hash && previousPathname === pathname) {
+            return;
+        }
+
+        // If there is a hash
+        // - Triggered by a change of hash or pathname
         if (hash) {
             const element = document.getElementById(hash);
             if (element) {
@@ -22,16 +32,12 @@ export function useScrollPage() {
                     behavior: 'smooth',
                 });
             }
-        } else {
+            return;
+        }
+
+        // If there was a hash but not anymore, scroll to top
+        if (previousHash && !hash) {
             window.scrollTo(0, 0);
         }
-        return () => {
-            if (hash) {
-                const element = document.getElementById(hash);
-                if (element) {
-                    element.style.scrollMarginTop = '';
-                }
-            }
-        };
-    }, [hash, pathname]);
+    }, [hash, previousHash, pathname, previousPathname]);
 }