feat: search container use scroll-area

Author: json-q

components/layouts/page-header/doc-search.tsx

@@ -1,6 +1,6 @@
 'use client';
 import Link from 'next/link';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import debounce from 'lodash.debounce';
 import { File, Heading, Search } from 'lucide-react';
 import { EnrichedDocumentSearchResultSetUnitResultUnit } from 'flexsearch';
@@ -14,13 +14,19 @@ import {
   DialogTrigger,
 } from '~/components/ui/dialog';
 import { Input } from '~/components/ui/input';
+import { ScrollArea } from '~/components/ui/scroll-area';
 import searchDoc, { IndexItem } from './search';
 
 export default function DocSearch() {
+  const [open, setOpen] = useState(false);
   const [searchList, setSearchList] = useState<
     EnrichedDocumentSearchResultSetUnitResultUnit<IndexItem>[]
   >([]);
 
+  useEffect(() => {
+    if (!open) setSearchList([]);
+  }, [open]);
+
   const onSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
     const result = searchDoc(e.target.value);
 
@@ -39,7 +45,7 @@ export default function DocSearch() {
   };
 
   return (
-    <Dialog>
+    <Dialog onOpenChange={setOpen}>
       <DialogTrigger asChild>
         <div className="hidden md:block">
           <Button
@@ -77,7 +83,7 @@ export default function DocSearch() {
           </div>
         )}
         {searchList.length > 0 && (
-          <div className="max-h-[300px] overflow-y-auto overflow-x-hidden px-2 py-1 text-foreground md:max-h-[calc(100vh-300px)]">
+          <ScrollArea className="max-h-[300px] overflow-y-auto overflow-x-hidden px-2 py-1 text-foreground md:max-h-[calc(100vh-300px)]">
             {searchList.map((item) => {
               if (item.doc.type == 'heading') {
                 return (
@@ -98,7 +104,7 @@ export default function DocSearch() {
                 </Line>
               );
             })}
-          </div>
+          </ScrollArea>
         )}
       </DialogContent>
     </Dialog>

components/ui/scroll-area.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+
+import { cn } from '~/lib/utils';
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn('relative overflow-hidden', className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

package.json

@@ -22,6 +22,7 @@
     "@radix-ui/react-avatar": "^1.1.3",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-scroll-area": "^1.2.3",
     "@radix-ui/react-slot": "^1.1.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",