UI: Support props in tag items

.changeset/early-cups-melt.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Support `props` in tag items

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

@@ -10,6 +10,7 @@ import {
   useState,
   useRef,
   type ButtonHTMLAttributes,
+  useCallback,
 } from 'react';
 import { useI18n } from '@/contexts/i18n';
 import { cn } from '@/utils/cn';
@@ -256,21 +257,18 @@ function CommandItem({
   active?: string;
   onActiveChange: (value: string) => void;
 }) {
-  const ref = useRef<HTMLButtonElement>(null);
-
-  useEffect(() => {
-    const element = ref.current;
-
-    if (active === value && element) {
-      element.scrollIntoView({
-        block: 'nearest',
-      });
-    }
-  }, [active, value]);
-
   return (
     <button
-      ref={ref}
+      ref={useCallback(
+        (element: HTMLButtonElement | null) => {
+          if (active === value && element) {
+            element.scrollIntoView({
+              block: 'nearest',
+            });
+          }
+        },
+        [active, value],
+      )}
       type="button"
       aria-selected={active === value}
       onPointerMove={() => onActiveChange(value)}

packages/ui/src/components/dialog/tag-list.tsx

@@ -5,6 +5,8 @@ import { cn } from '@/utils/cn';
 export interface TagItem {
   name: string;
   value: string | undefined;
+
+  props?: HTMLAttributes<HTMLButtonElement>;
 }
 
 export interface TagsListProps extends HTMLAttributes<HTMLDivElement> {
@@ -40,9 +42,13 @@ export function TagsList({
     >
       {items.map((item) => (
         <button
-          type="button"
           key={item.value}
-          className={cn(itemVariants({ active: tag === item.value }))}
+          type="button"
+          data-active={tag === item.value}
+          className={cn(
+            itemVariants({ active: tag === item.value }),
+            item.props?.className,
+          )}
           onClick={() => {
             if (tag === item.value && allowClear) {
               onTagChange(undefined);
@@ -51,6 +57,7 @@ export function TagsList({
             }
           }}
           tabIndex={-1}
+          {...item.props}
         >
           {item.name}
         </button>