UI: Fix sidebar legacy behaviours

.changeset/open-chicken-switch.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Fix sidebar legacy behaviours

packages/ui/src/components/layout/search-toggle.tsx

@@ -1,20 +1,23 @@
 'use client';
-import { type ButtonHTMLAttributes } from 'react';
+import type { ComponentProps } from 'react';
 import { Search } from 'lucide-react';
 import { useSearchContext } from '@/contexts/search';
 import { useI18n } from '@/contexts/i18n';
 import { cn } from '@/utils/cn';
 import { type ButtonProps, buttonVariants } from '@/components/ui/button';
 
+interface SearchToggleProps
+  extends Omit<ComponentProps<'button'>, 'color'>,
+    ButtonProps {
+  hideIfDisabled?: boolean;
+}
+
 export function SearchToggle({
   hideIfDisabled,
   size = 'icon',
   color = 'ghost',
   ...props
-}: ButtonHTMLAttributes<HTMLButtonElement> &
-  ButtonProps & {
-    hideIfDisabled?: boolean;
-  }) {
+}: SearchToggleProps) {
   const { setOpenSearch, enabled } = useSearchContext();
   if (hideIfDisabled && !enabled) return null;
 
@@ -42,7 +45,7 @@ export function SearchToggle({
 export function LargeSearchToggle({
   hideIfDisabled,
   ...props
-}: ButtonHTMLAttributes<HTMLButtonElement> & {
+}: ComponentProps<'button'> & {
   hideIfDisabled?: boolean;
 }) {
   const { enabled, hotKey, setOpenSearch } = useSearchContext();

packages/ui/src/layouts/docs.tsx

@@ -12,7 +12,7 @@ import {
   SidebarPageTree,
   SidebarViewport,
 } from '@/components/layout/sidebar';
-import { slot, slots } from '@/layouts/shared';
+import { omit, slot, slots } from '@/layouts/shared';
 import {
   BaseLinkItem,
   type IconItemType,
@@ -31,10 +31,6 @@ import {
 } from '@/layouts/docs-client';
 import { TreeContextProvider } from '@/contexts/tree';
 import { ThemeToggle } from '@/components/layout/theme-toggle';
-import {
-  LargeSearchToggle,
-  SearchToggle,
-} from '@/components/layout/search-toggle';
 import {
   getSidebarTabsFromOptions,
   layoutVariables,
@@ -47,6 +43,10 @@ import {
   StylesProvider,
 } from '@/contexts/layout';
 import Link from 'fumadocs-core/link';
+import {
+  LargeSearchToggle,
+  SearchToggle,
+} from '@/components/layout/search-toggle';
 
 export interface DocsLayoutProps extends BaseLayoutProps {
   tree: PageTree.Root;
@@ -64,17 +64,17 @@ export interface DocsLayoutProps extends BaseLayoutProps {
 
 export function DocsLayout({
   nav: { transparentMode, ...nav } = {},
+  sidebar = {},
   searchToggle,
   disableThemeSwitch = false,
   themeSwitch = { enabled: !disableThemeSwitch },
-  sidebar: { tabs: tabOptions, ...sidebar } = {},
   i18n = false,
   children,
   ...props
 }: DocsLayoutProps): ReactNode {
   const tabs = useMemo(
-    () => getSidebarTabsFromOptions(tabOptions, props.tree) ?? [],
-    [tabOptions, props.tree],
+    () => getSidebarTabsFromOptions(sidebar.tabs, props.tree) ?? [],
+    [sidebar.tabs, props.tree],
   );
   const links = getLinks(props.links ?? [], props.githubUrl);
 
@@ -125,7 +125,7 @@ export function DocsLayout({
           {slot(
             sidebar,
             <DocsLayoutSidebar
-              {...sidebar}
+              {...omit(sidebar, 'enabled', 'component', 'tabs')}
               links={links}
               nav={
                 <>

packages/ui/src/layouts/shared.tsx

@@ -127,3 +127,14 @@ export function slots<Comp extends Record<string, ReactNode>>(
 
   return def;
 }
+
+export function omit<T extends Record<string, unknown>, Keys extends keyof T>(
+  obj: T,
+  ...keys: Keys[]
+): Omit<T, Keys> {
+  const clone = { ...obj };
+  for (const key of keys) {
+    delete clone[key];
+  }
+  return clone;
+}