chore: bump rspress to v2.0.0-beta.12

.changeset/sour-wombats-hunt.md

@@ -0,0 +1,5 @@
+---
+"@alauda/doom": patch
+---
+
+fix: style regression of `VersionsNav`

.changeset/tiny-ghosts-sell.md

@@ -0,0 +1,5 @@
+---
+"@alauda/doom": patch
+---
+
+chore: bump `rspress` to `v2.0.0-beta.12`

package.json

@@ -58,17 +58,17 @@
   },
   "dependencies": {
     "@cspell/eslint-plugin": "^8.19.4 || ^9.0.2",
-    "@eslint-react/eslint-plugin": "^1.51.2",
+    "@eslint-react/eslint-plugin": "^1.51.3",
     "@inquirer/prompts": "^7.5.3",
     "@openapi-contrib/openapi-schema-to-json-schema": "^5.1.0",
     "@playwright/browser-chromium": "^1.52.0",
     "@rsbuild/plugin-react": "^1.3.2",
     "@rsbuild/plugin-sass": "^1.3.2",
     "@rsbuild/plugin-svgr": "^1.2.0",
     "@rsbuild/plugin-yaml": "^1.0.2",
-    "@rspress/core": "2.0.0-beta.11",
-    "@rspress/plugin-algolia": "2.0.0-beta.11",
-    "@rspress/plugin-llms": "^2.0.0-beta.11",
+    "@rspress/core": "https://pkg.pr.new/@rspress/core@6b02230",
+    "@rspress/plugin-algolia": "https://pkg.pr.new/@rspress/plugin-algolia@6b02230",
+    "@rspress/plugin-llms": "https://pkg.pr.new/@rspress/plugin-llms@6b02230",
     "@shikijs/transformers": "^3.6.0",
     "@total-typescript/ts-reset": "^0.6.1",
     "chokidar": "^4.0.3",
@@ -83,7 +83,7 @@
     "mdast-util-mdx": "^3.0.0",
     "mdast-util-mdx-jsx": "^3.2.0",
     "mermaid": "^11.6.0",
-    "openai": "^5.1.1",
+    "openai": "^5.3.0",
     "openapi-types": "^12.1.3",
     "p-ratelimit": "^1.0.1",
     "pdf-lib": "^1.17.1",
@@ -102,7 +102,7 @@
     "tinyglobby": "^0.2.14",
     "type-fest": "^4.41.0",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.33.1",
+    "typescript-eslint": "^8.34.0",
     "x-fetch": "^0.2.6",
     "yaml": "^2.8.0",
     "yoctocolors": "^2.1.1"
@@ -112,12 +112,12 @@
     "@changesets/cli": "^2.29.4",
     "@eslint/js": "^9.28.0",
     "@swc-node/register": "^1.10.10",
-    "@swc/core": "1.11.31",
+    "@swc/core": "1.12.0",
     "@types/cli-progress": "^3.11.6",
     "@types/ejs": "^3.1.5",
-    "@types/node": "^22.15.30",
+    "@types/node": "^22.15.31",
     "@types/picomatch": "^4.0.0",
-    "@types/react": "^19.1.6",
+    "@types/react": "^19.1.7",
     "@types/react-dom": "^19.1.6",
     "@types/swagger2openapi": "^7.0.4",
     "@unts/patch-package": "^8.1.1",

src/global/VersionsNav/Down.tsx

@@ -1,4 +1,4 @@
-export const SvgDown = () => (
+export const Down = () => (
   <svg width="1em" height="1em" viewBox="0 0 32 32">
     <path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z" />
   </svg>

src/global/VersionsNav/NavMenuGroup.tsx

@@ -1,15 +1,15 @@
 import { Tag } from '@rspress/core/theme'
 import {
   isExternalUrl,
-  withoutBase,
+  matchNavbar,
   type NavItem,
   type NavItemWithChildren,
   type NavItemWithLink,
   type NavItemWithLinkAndChildren,
 } from '@rspress/shared'
-import { useCallback, useState, type ReactNode } from 'react'
+import { useRef, useState, type ReactNode } from 'react'
 
-import { SvgDown } from './Down.js'
+import { Down } from './Down.js'
 import {
   NavMenuSingleItem,
   type NavMenuSingleItemProps,
@@ -23,7 +23,7 @@ export interface NavMenuGroupItem {
   tag?: string
   // Design for i18n highlight.
   activeValue?: string
-  // Currrnt pathname.
+  // Current pathname.
   pathname?: string
   // Base path.
   base?: string
@@ -35,32 +35,32 @@ function ActiveGroupItem({ item }: { item: NavItemWithLink }) {
   return (
     <div
       key={item.link}
-      className="rounded-2xl my-1 flex"
+      className="rp-rounded-2xl rp-my-1 rp-flex"
       style={{
         padding: '0.4rem 1.5rem 0.4rem 0.75rem',
       }}
     >
       {item.tag && <Tag tag={item.tag} />}
-      <span className="text-brand">{item.text}</span>
+      <span className="rp-text-brand">{item.text}</span>
     </div>
   )
 }
 
 function NormalGroupItem({ item }: { item: NavItemWithLink }) {
   return (
-    <div key={item.link} className="font-medium my-1">
+    <div key={item.link} className="rp-font-medium rp-my-1">
       <a
         href={item.link}
         target={isExternalUrl(item.link) ? '_blank' : undefined}
         rel="noopener noreferrer"
       >
         <div
-          className="rounded-2xl hover:bg-mute"
+          className="rp-rounded-2xl hover:rp-bg-mute"
           style={{
             padding: '0.4rem 1.5rem 0.4rem 0.75rem',
           }}
         >
-          <div className="flex">
+          <div className="rp-flex">
             {item.tag && <Tag tag={item.tag} />}
             <span>{item.text}</span>
           </div>
@@ -71,21 +71,41 @@ function NormalGroupItem({ item }: { item: NavItemWithLink }) {
 }
 
 export function NavMenuGroup(item: NavMenuGroupItem) {
-  const { activeValue, items: groupItems, base = '', pathname = '' } = item
+  const {
+    activeValue,
+    items: groupItems,
+    base = '',
+    link = '',
+    pathname = '',
+  } = item
   const [isOpen, setIsOpen] = useState(false)
+  const closeTimerRef = useRef<number>(null)
 
-  const onOpen = useCallback(() => {
-    setIsOpen(true)
-  }, [])
+  const clearCloseTimer = () => {
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current)
+      closeTimerRef.current = null
+    }
+  }
+
+  /**
+   * Handle mouse leave event for the dropdown menu
+   * Closes the menu after a 150ms delay to allow diagonal mouse movement
+   * to the dropdown content area
+   */
+  const handleMouseLeave = () => {
+    closeTimerRef.current = window.setTimeout(() => {
+      setIsOpen(false)
+    }, 150)
+  }
 
-  const onClose = useCallback(() => {
-    setIsOpen(false)
-  }, [])
+  const handleMouseEnter = () => {
+    clearCloseTimer()
+    setIsOpen(true)
+  }
 
   const renderLinkItem = (item: NavItemWithLink) => {
-    const isLinkActive = new RegExp(item.activeMatch || item.link).test(
-      withoutBase(pathname, base),
-    )
+    const isLinkActive = matchNavbar(item, pathname, base)
     if (activeValue === item.text || (!activeValue && isLinkActive)) {
       return <ActiveGroupItem key={item.link} item={item} />
     }
@@ -100,7 +120,7 @@ export function NavMenuGroup(item: NavMenuGroupItem) {
         {'link' in item ? (
           renderLinkItem(item)
         ) : (
-          <p className="font-bold text-gray-400 my-1 not:first:border">
+          <p className="rp-font-bold rp-text-gray-400 rp-my-1 not:first:rp-border">
             {item.text}
           </p>
         )}
@@ -109,49 +129,47 @@ export function NavMenuGroup(item: NavMenuGroupItem) {
     )
   }
 
-  const hasMultiItems = groupItems.length > 1
-
-  const Content = hasMultiItems || item.link ? 'button' : 'span'
-
-  const content = (
-    <Content
-      onMouseEnter={hasMultiItems ? onOpen : undefined}
-      className={`${Content === 'button' ? 'rspress-nav-menu-group-button ' : ''}flex-center items-center font-medium text-sm text-text-1${hasMultiItems ? ' hover:text-text-2 transition-colors duration-200' : ''}`}
+  return (
+    <div
+      className="rp-relative rp-flex rp-items-center rp-justify-center rp-h-14"
+      onMouseLeave={handleMouseLeave}
     >
-      {item.link ? (
-        <NavMenuSingleItem
-          {...(item as NavMenuSingleItemProps)}
-          rightIcon={<SvgWrapper icon={SvgDown} />}
-        />
-      ) : (
-        <>
-          <span
-            className="text-sm font-medium flex"
-            style={hasMultiItems ? { marginRight: '2px' } : undefined}
-          >
-            <Tag tag={item.tag} />
-            {item.text}
-          </span>
-          {hasMultiItems && <SvgWrapper icon={SvgDown} />}
-        </>
-      )}
-    </Content>
-  )
-
-  return hasMultiItems ? (
-    <div className="relative flex-center h-14" onMouseLeave={onClose}>
-      {content}
       <div
-        className="rspress-nav-menu-group-content absolute mx-0.8 transition-opacity duration-300"
+        onMouseEnter={handleMouseEnter}
+        className="rspress-nav-menu-group-button rp-flex rp-justify-center rp-items-center rp-font-medium rp-text-sm rp-text-text-1 hover:rp-text-text-2 rp-transition-colors rp-duration-200 rp-cursor-pointer"
+      >
+        {link ? (
+          <NavMenuSingleItem
+            {...(item as NavMenuSingleItemProps)}
+            rightIcon={<SvgWrapper icon={Down} />}
+          />
+        ) : (
+          <>
+            <span
+              className="rp-text-sm rp-font-medium rp-flex"
+              style={{
+                marginRight: '2px',
+              }}
+            >
+              <Tag tag={item.tag} />
+              {item.text}
+            </span>
+            <SvgWrapper icon={Down} />
+          </>
+        )}
+      </div>
+      <div
+        className="rspress-nav-menu-group-content rp-absolute rp-mx-0.8 rp-transition-opacity rp-duration-300"
         style={{
           opacity: isOpen ? 1 : 0,
           visibility: isOpen ? 'visible' : 'hidden',
           right: 0,
           top: '52px',
         }}
+        onMouseEnter={clearCloseTimer}
       >
         <div
-          className="p-3 pr-2 w-full h-full max-h-100vh whitespace-nowrap"
+          className="rp-p-3 rp-pr-2 rp-w-full rp-h-full rp-max-h-100vh rp-whitespace-nowrap"
           style={{
             boxShadow: 'var(--rp-shadow-3)',
             zIndex: 100,
@@ -169,7 +187,5 @@ export function NavMenuGroup(item: NavMenuGroupItem) {
         </div>
       </div>
     </div>
-  ) : (
-    content
   )
 }

src/global/VersionsNav/NavMenuSingleItem.tsx

@@ -46,8 +46,8 @@ export function NavMenuSingleItem({
     >
       <div
         className={`rspress-nav-menu-item ${styles.singleItem} ${
-          isActive ? styles.activeItem : ''
-        } text-sm font-medium ${compact ? 'mx-0.5' : 'mx-1.5'} px-3 py-2 flex items-center`}
+          isActive ? `${styles.activeItem} rspress-nav-menu-item-active` : ''
+        } rp-text-sm rp-font-medium ${compact ? 'rp-mx-0.5' : 'rp-mx-1.5'} rp-px-3 rp-py-2 rp-flex rp-items-center`}
       >
         <Tag tag={tag} />
         {text}