UI: hide toc popover when no items

.changeset/bright-squids-invite.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Hide toc popover when no items

packages/ui/src/components/dialog/search.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { FileText, Hash, Loader2, SearchIcon, Text } from 'lucide-react';
-import type { SortedResult } from 'fumadocs-core/server';
 import { useRouter } from 'next/navigation';
 import {
   useMemo,
@@ -23,9 +22,14 @@ import {
   DialogOverlay,
   DialogTitle,
 } from '@radix-ui/react-dialog';
+import type { SortedResult } from 'fumadocs-core/server';
 
 export type SearchLink = [name: string, href: string];
 
+type ReactSortedResult = SortedResult & {
+  content: ReactNode;
+};
+
 export interface SharedProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -39,7 +43,7 @@ export interface SharedProps {
 type SearchDialogProps = SharedProps &
   SearchValueProps &
   Omit<SearchResultProps, 'items'> & {
-    results: SortedResult[] | 'empty';
+    results: ReactSortedResult[] | 'empty';
 
     footer?: ReactNode;
   };
@@ -63,7 +67,7 @@ export function SearchDialog({
   ...props
 }: SearchDialogProps) {
   const { text } = useI18n();
-  const defaultItems = useMemo<SortedResult[]>(
+  const defaultItems = useMemo<ReactSortedResult[]>(
     () =>
       links.map(([name, link]) => ({
         type: 'page',

packages/ui/src/layouts/docs.tsx

@@ -98,7 +98,7 @@ export function DocsLayout({
           id="nd-docs-layout"
           {...props.containerProps}
           className={cn(
-            'flex flex-1 flex-row md:[--fd-sidebar-width:260px] xl:[--fd-toc-width:260px] [&_#nd-toc]:max-xl:hidden [&_#nd-tocnav]:xl:hidden max-xl:[&_article]:mx-0',
+            'flex flex-1 flex-row md:[--fd-sidebar-width:260px] xl:[--fd-toc-width:260px] [&_#nd-toc]:max-xl:hidden [&_#nd-tocnav]:xl:hidden',
             !navReplace && navEnabled
               ? '[--fd-nav-height:3.5rem] md:[--fd-nav-height:0px]'
               : null,

packages/ui/src/layouts/docs/sidebar.tsx

@@ -228,7 +228,7 @@ export function SidebarSeparator(props: HTMLAttributes<HTMLParagraphElement>) {
     <p
       {...props}
       className={cn(
-        'mb-2 mt-8 px-3 text-sm font-medium first:mt-0 md:px-2',
+        'mb-2 mt-8 px-3 text-sm first:mt-0 md:px-2',
         props.className,
       )}
     >
@@ -341,7 +341,7 @@ export function SidebarFolderLink(props: LinkProps) {
 export function SidebarFolderContent(props: CollapsibleContentProps) {
   return (
     <CollapsibleContent {...props}>
-      <div className="ms-3 border-s py-1.5 ps-1.5 md:ms-2 md:ps-2">
+      <div className="ms-3 border-s py-1.5 ps-1.5 md:ms-2">
         {props.children}
       </div>
     </CollapsibleContent>

packages/ui/src/page.tsx

@@ -115,23 +115,30 @@ export function DocsPage({
   toc = [],
   full = false,
   tableOfContentPopover: {
-    enabled: tocPopoverEnabled = true,
+    enabled: tocPopoverEnabled,
     component: tocPopoverReplace,
     ...tocPopoverOptions
   } = {},
   tableOfContent: {
-    // disable TOC on full mode, you can still enable it with `enabled` option.
     enabled: tocEnabled,
     component: tocReplace,
     ...tocOptions
   } = {},
   ...props
 }: DocsPageProps): ReactNode {
-  tocEnabled ??=
-    !full &&
-    (toc.length > 0 ||
-      tocOptions.footer !== undefined ||
-      tocOptions.header !== undefined);
+  const isTocRequired =
+    toc.length > 0 ||
+    tocOptions.footer !== undefined ||
+    tocOptions.header !== undefined;
+
+  // disable TOC on full mode, you can still enable it with `enabled` option.
+  tocEnabled ??= !full && isTocRequired;
+
+  tocPopoverEnabled ??=
+    toc.length > 0 ||
+    tocPopoverOptions.header !== undefined ||
+    tocPopoverOptions.footer !== undefined;
+
   const fullWidth = full && !tocEnabled;
 
   return (
@@ -173,7 +180,7 @@ export function DocsPage({
         <article
           {...props.article}
           className={cn(
-            'mx-auto flex w-full flex-1 flex-col gap-6 px-4 pt-8 md:pt-12 lg:px-8',
+            'mx-auto flex w-full flex-1 flex-col gap-6 px-4 pt-8 max-xl:mx-0 md:pt-12 lg:px-8',
             fullWidth ? 'max-w-[1120px]' : 'max-w-[860px]',
             props.article?.className,
           )}

packages/ui/src/tailwind-plugin.ts

@@ -133,6 +133,7 @@ export const docsUi = plugin.withOptions<DocsUIOptions>(
           '--fd-layout-width': layoutWidth,
           '--fd-banner-height': '0px',
           '--fd-nav-height': '0px',
+          '--fd-tocnav-height': '0px',
 
           '--fd-diff-remove-color': 'rgba(200,10,100,0.12)',
           '--fd-diff-remove-symbol-color': 'rgb(230,10,100)',

packages/ui/src/theme/colors.ts

@@ -105,7 +105,7 @@ const neutral: Preset = {
     ring: '0 0% 63.9%',
   },
   dark: {
-    background: '0 0% 8.9%',
+    background: '0 0% 8.6%',
     foreground: '0 0% 92%',
     muted: '0 0% 12.9%',
     'muted-foreground': '0 0% 60.9%',