chore: update Dropdown component

src/components/dropdown/Dropdown.tsx

@@ -1,111 +1,109 @@
-'use client';
+import React, { ReactNode, useState, useRef } from 'react';
 
-import { ReactNode, useRef, useEffect, useState } from 'react';
 import { cn } from '@/lib/helper';
 
-interface DropdownProps {
+export interface DropdownProps {
   trigger: ReactNode;
   children: ReactNode;
-  position?:
+  className?: {
-    | 'top'
+    wrapper?: string;
-    | 'bottom'
+    trigger?: string;
-    | 'left'
+    content?: string;
-    | 'right'
+  };
-    | 'top-start'
-    | 'top-end'
-    | 'bottom-start'
-    | 'bottom-end'
-    | 'left-start'
-    | 'left-end'
-    | 'right-start'
-    | 'right-end';
   align?: 'start' | 'center' | 'end';
+  direction?: 'top' | 'bottom' | 'left' | 'right';
   hover?: boolean;
-  className?: string;
+  defaultOpen?: boolean;
-  contentClassName?: string;
+  open?: boolean;
+  close?: boolean;
+  controlled?: boolean;
 }
 
 const Dropdown = ({
   trigger,
   children,
-  position = 'bottom',
-  align = 'start',
-  hover = false,
   className,
-  contentClassName,
+  align,
+  direction,
+  hover,
+  defaultOpen = false,
+  open,
+  close,
+  controlled = false,
 }: DropdownProps) => {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(defaultOpen);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
-  // Handle click outside to close dropdown
+  const toggleDropdown = () => {
-  useEffect(() => {
+    if (!controlled) {
-    const handleClickOutside = (event: MouseEvent) => {
+      const newState = !isOpen;
-      if (
+      setIsOpen(newState);
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false);
     }
   };
 
-    if (isOpen) {
+  const getWrapperClasses = () => {
-      document.addEventListener('mousedown', handleClickOutside);
+    const openState = controlled ? open : isOpen;
-    }
 
-    return () => {
+    return cn(
-      document.removeEventListener('mousedown', handleClickOutside);
+      'dropdown',
-    };
+      {
-  }, [isOpen]);
+        'dropdown-start': align === 'start',
-
+        'dropdown-center': align === 'center',
-  // Build position classes
+        'dropdown-end': align === 'end',
-  const getPositionClasses = () => {
+        'dropdown-top': direction === 'top',
-    const classes: string[] = [];
+        'dropdown-bottom': direction === 'bottom',
-
+        'dropdown-left': direction === 'left',
-    // Handle combined positions like 'top-start'
+        'dropdown-right': direction === 'right',
-    if (position.includes('-')) {
+        'dropdown-hover': hover,
-      const [pos, al] = position.split('-');
+        'dropdown-open': openState && !close,
-      classes.push(`dropdown-${pos}`);
+        'dropdown-close': close,
-      classes.push(`dropdown-${al}`);
+      },
-    } else {
+      className?.wrapper
-      classes.push(`dropdown-${position}`);
+    );
-      if (align !== 'start') {
-        classes.push(`dropdown-${align}`);
-      }
-    }
-
-    return classes.join(' ');
   };
 
-  const handleToggle = (e: React.MouseEvent) => {
+  const getTriggerClasses = () => {
-    e.preventDefault();
+    return cn(className?.trigger);
-    e.stopPropagation();
-    // alert('clicked');
-    setIsOpen(!isOpen);
   };
 
+  const getContentClasses = () => {
+    return cn(
+      'dropdown-content z-[9999] shadow-sm bg-base-100 rounded-box',
+      className?.content
+    );
+  };
+
+  if (controlled) {
+    return (
+      <div className={getWrapperClasses()}>
+        {trigger}
+        {open && !close && (
+          <div tabIndex={-1} className={getContentClasses()}>
+            {children}
+          </div>
+        )}
+      </div>
+    );
+  }
+
   return (
+    <div ref={dropdownRef} className={getWrapperClasses()}>
       <div
-      ref={dropdownRef}
+        tabIndex={0}
-      className={cn(
+        role='button'
-        'dropdown',
+        className={getTriggerClasses()}
-        getPositionClasses(),
+        onClick={toggleDropdown}
-        hover && 'dropdown-hover',
+        onKeyDown={(e) => {
-        isOpen && 'dropdown-open',
+          if (e.key === 'Enter' || e.key === ' ') {
-        className
+            e.preventDefault();
-      )}
+            toggleDropdown();
+          }
+        }}
       >
-      {/* Trigger Button */}
-      <div onClick={handleToggle} className='cursor-pointer'>
         {trigger}
       </div>
-
+      {!close && (
-      {/* Dropdown Content - Only render when open */}
+        <div tabIndex={-1} className={getContentClasses()}>
-      {isOpen && (
-        <div
-          tabIndex={-1}
-          className={cn('dropdown-content z-[10]', contentClassName)}
-          onClick={() => setIsOpen(false)} // Close on item click
-        >
           {children}
         </div>
       )}