fix: sidebar type=file with data-context

.changeset/open-zebras-report.md

@@ -0,0 +1,5 @@
+---
+'@rspress/theme-default': minor
+---
+
+fix: sidebar top level item didn't add data-context correctly

e2e/fixtures/auto-nav-sidebar/doc/api/_meta.json

@@ -2,7 +2,8 @@
   {
     "type": "file",
     "name": "index",
-    "label": "API Overview"
+    "label": "API Overview",
+    "context": "api-overview"
   },
   {
     "type": "dir",

e2e/tests/auto-nav-sidebar-dir-convension.test.ts

@@ -103,7 +103,11 @@ test.describe('Auto nav and sidebar dir convention', async () => {
         ),
       sidebarGroupItems,
     );
-    expect(contexts3.join(',')).toEqual(['context-index-in-meta'].join(','));
+    // added container `div.rspress-sidebar-item` to ( depth=0 & type=file )'s sidebar item
+    // so have to modify this test result
+    expect(contexts3.join(',')).toEqual(
+      ['', 'context-index-in-meta'].join(','),
+    );
   });
 
   test('/api/config/index.html /api/config/index /api/config should be the same page', async ({

e2e/tests/auto-nav-sidebar.test.ts

@@ -203,6 +203,12 @@ test.describe('Auto nav and sidebar test', async () => {
       ['config', null, 'client-api', null].join(','),
     );
 
+    // Find sidebar elements with data-context="api-overview"
+    const overviewItems = await page.$$('[data-context="api-overview"]');
+
+    // Assert that there is at least one api-overview marker and the content is correct
+    expect(overviewItems.length).toEqual(1);
+
     const sidebarGroupCollapses = await page.$$('.rspress-sidebar-collapse');
     const c2 = await page.evaluate(
       sidebars =>
@@ -215,8 +221,10 @@ test.describe('Auto nav and sidebar test', async () => {
 
     const sidebarGroupItems = await page.$$('.rspress-sidebar-item');
     const c3 = await getDataContextFromElements(sidebarGroupItems);
-    expect(c3?.[2]).toEqual('front-matter');
-    expect(c3?.[3]).toEqual('config-build');
+    // added the `depth=0 type=file` sidebar item with div.rspress-sidebar-item container
+    // so modify this to update test case
+    expect(c3?.[3]).toEqual('front-matter');
+    expect(c3?.[4]).toEqual('config-build');
 
     // custom link should work
     const customLinkItems = await page.$$(

e2e/tests/i18n.test.ts

@@ -161,7 +161,7 @@ test.describe('i18n test', async () => {
     await page.goto(`http://localhost:${appPort}/guide/basic/quick-start`, {
       waitUntil: 'networkidle',
     });
-    const customLinkZh = await page.$('nav > a');
+    const customLinkZh = await page.$('nav > div.rspress-sidebar-item > a');
     const hrefZh = await page.evaluate(
       customLinkZh => customLinkZh?.getAttribute('href'),
       customLinkZh,
@@ -171,7 +171,7 @@ test.describe('i18n test', async () => {
     await page.goto(`http://localhost:${appPort}/en/guide/basic/quick-start`, {
       waitUntil: 'networkidle',
     });
-    const customLinkEn = await page.$('nav > a');
+    const customLinkEn = await page.$('nav > div.rspress-sidebar-item > a');
     const hrefEn = await page.evaluate(
       customLinkEn => customLinkEn?.getAttribute('href'),
       customLinkEn,

e2e/utils/getSideBar.ts

@@ -16,7 +16,7 @@ export async function getSidebar(page: Page) {
   // take the sidebar, properly a section or a tag
   const sidebar = await page.$$(
     `.rspress-sidebar .rspress-scrollbar > nav > section,
-     .rspress-sidebar .rspress-scrollbar > nav > a`,
+     .rspress-sidebar .rspress-scrollbar > nav > div.rspress-sidebar-item > a`,
   );
   return sidebar;
 }

packages/theme-default/src/components/Sidebar/SidebarGroup.tsx

@@ -180,18 +180,13 @@ export function SidebarGroup(props: SidebarItemProps) {
               />
             ) : (
               // eslint-disable-next-line react/no-array-index-key
-              <div
-                className="rspress-sidebar-item"
+              <SidebarItemComp
+                {...props}
                 key={index}
-                data-context={item.context}
-              >
-                <SidebarItemComp
-                  {...props}
-                  item={item}
-                  depth={depth + 1}
-                  id={`${id}-${index}`}
-                />
-              </div>
+                item={item}
+                depth={depth + 1}
+                id={`${id}-${index}`}
+              />
             ),
           )}
         </div>

packages/theme-default/src/components/Sidebar/SidebarItem.tsx

@@ -33,26 +33,63 @@ export function SidebarItem(props: SidebarItemProps) {
     );
   }
 
+  // add the div.rspress-sidebar-item in an unified place
   return (
-    <Link href={normalizeHref(item.link)} className={styles.menuLink}>
-      <div
-        ref={ref}
-        className={`${
-          active
-            ? `${styles.menuItemActive} rspress-sidebar-item-active`
-            : styles.menuItem
-        } rp-mt-0.5 rp-py-2 rp-px-3 rp-font-medium rp-flex`}
-        style={{
-          // The first level menu item will have the same font size as the sidebar group
-          fontSize: depth === 0 ? '14px' : '13px',
-          marginLeft: depth === 0 ? 0 : '18px',
-          borderRadius: '0 var(--rp-radius) var(--rp-radius) 0',
-          ...(depth === 0 ? highlightTitleStyle : {}),
-        }}
+    <LinkContextContainer
+      context={item.context}
+      className={props.contextContainerClassName}
+    >
+      <Link
+        // {...(depth === 0 ? { 'data-context': item.context } : {})}
+        href={normalizeHref(item.link)}
+        className={styles.menuLink}
       >
-        <Tag tag={item.tag} />
-        <span>{renderInlineMarkdown(item.text)}</span>
-      </div>
-    </Link>
+        <div
+          ref={ref}
+          className={`${
+            active
+              ? `${styles.menuItemActive} rspress-sidebar-item-active`
+              : styles.menuItem
+          } rp-mt-0.5 rp-py-2 rp-px-3 rp-font-medium rp-flex`}
+          style={{
+            // The first level menu item will have the same font size as the sidebar group
+            fontSize: depth === 0 ? '14px' : '13px',
+            marginLeft: depth === 0 ? 0 : '18px',
+            borderRadius: '0 var(--rp-radius) var(--rp-radius) 0',
+            ...(depth === 0 ? highlightTitleStyle : {}),
+          }}
+        >
+          <Tag tag={item.tag} />
+          <span>{renderInlineMarkdown(item.text)}</span>
+        </div>
+      </Link>
+    </LinkContextContainer>
+  );
+}
+
+/**
+ * A container component for sidebar link items that conditionally wraps its children
+ * with a <div> element, adding contextual data and custom class names as needed.
+ *
+ * This design helps maintain sidebar structure stability and minimizes disruption to historical tests
+ * and user code.
+ *
+ * @param props - The component props.
+ * @param props.context - Optional context string to be added as a `data-context` attribute.
+ * @param props.className - Optional additional class name(s) for the container div.
+ * @param props.children - The content to be rendered inside the container.
+ */
+function LinkContextContainer(
+  props: React.PropsWithChildren<{ context?: string; className?: string }>,
+) {
+  return (
+    <div
+      className={['rspress-sidebar-item', props.className]
+        .filter(Boolean)
+        .join(' ')}
+      {...(props.context ? { 'data-context': props.context } : {})}
+    >
+      {props.children}
+    </div>
   );
 }

packages/theme-default/src/components/Sidebar/index.tsx

@@ -34,6 +34,7 @@ export interface SidebarItemProps {
       (NormalizedSidebarGroup | ISidebarItem | ISidebarDivider)[]
     >
   >;
+  contextContainerClassName?: string;
 }
 
 interface Props {
@@ -218,21 +219,16 @@ function SidebarListItem(props: {
 
   if (isSideBarCustomLink(item)) {
     return (
-      <div
-        className="rspress-sidebar-item rspress-sidebar-custom-link"
+      <SidebarItem
+        id={String(index)}
+        item={item}
+        depth={0}
         key={index}
-        data-context={item.context}
-      >
-        <SidebarItem
-          id={String(index)}
-          item={item}
-          depth={0}
-          key={index}
-          collapsed={(item as NormalizedSidebarGroup).collapsed ?? true}
-          setSidebarData={setSidebarData}
-          activeMatcher={activeMatcher}
-        />
-      </div>
+        collapsed={(item as NormalizedSidebarGroup).collapsed ?? true}
+        setSidebarData={setSidebarData}
+        activeMatcher={activeMatcher}
+        contextContainerClassName="rspress-sidebar-custom-link"
+      />
     );
   }