UI: Support custom children of trigger on InlineTOC component

fuma-nama · Dec 19, 2024 · ece734f · ece734f
1 parent aa4db55
commit ece734f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 13 deletions.
diff --git a/.changeset/rare-panthers-joke.md b/.changeset/rare-panthers-joke.md
@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Support custom children of trigger on `InlineTOC` component
diff --git a/packages/ui/src/components/inline-toc.tsx b/packages/ui/src/components/inline-toc.tsx
@@ -7,34 +7,35 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from './ui/collapsible';
+import { ComponentProps } from 'react';
+import { cn } from '@/utils/cn';
 
-export interface InlineTocProps {
+export interface InlineTocProps extends ComponentProps<typeof Collapsible> {
   items: TOCItemType[];
-  defaultOpen?: boolean;
 }
 
-export function InlineTOC({
-  items,
-  defaultOpen,
-}: InlineTocProps): React.ReactElement {
+export function InlineTOC({ items, ...props }: InlineTocProps) {
   return (
     <Collapsible
-      defaultOpen={defaultOpen}
-      className="not-prose rounded-lg border bg-fd-card text-fd-card-foreground"
+      {...props}
+      className={cn(
+        'not-prose rounded-lg border bg-fd-card text-fd-card-foreground',
+        props.className,
+      )}
     >
-      <CollapsibleTrigger className="inline-flex w-full items-center justify-between p-4 font-medium [&[data-state=open]>svg]:rotate-180">
-        Table of Contents
-        <ChevronDown className="size-4 transition-transform duration-200" />
+      <CollapsibleTrigger className="group inline-flex w-full items-center justify-between px-4 py-2.5 font-medium">
+        {props.children ?? 'Table of Contents'}
+        <ChevronDown className="size-4 transition-transform duration-200 group-data-[state=open]:rotate-180" />
       </CollapsibleTrigger>
       <CollapsibleContent>
         <div className="flex flex-col p-4 pt-0 text-sm text-fd-muted-foreground">
           {items.map((item) => (
             <a
               key={item.url}
               href={item.url}
-              className="border-l py-1.5 hover:text-fd-accent-foreground"
+              className="border-s py-1.5 hover:text-fd-accent-foreground"
               style={{
-                paddingLeft: 12 * Math.max(item.depth - 1, 0),
+                paddingInlineStart: 12 * Math.max(item.depth - 1, 0),
               }}
             >
               {item.title}