feat: enhance dropdown components by integrating useClickOutside hook for improved user experience and accessibility in NewWorkshopDropdown and WorkshopTabs

src/app/sessions/NewWorkshopDropdown.tsx

@@ -1,21 +1,23 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import Link from 'next/link';
 import { Button } from '@/components/ui';
 import { WORKSHOPS } from '@/lib/workshops';
+import { useClickOutside } from '@/hooks/useClickOutside';
 
 export function NewWorkshopDropdown() {
   const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  useClickOutside(containerRef, () => setOpen(false), open);
 
   return (
-    <div className="relative">
+    <div ref={containerRef} className="relative">
       <Button
         type="button"
         variant="outline"
         size="sm"
         onClick={() => setOpen(!open)}
-        onBlur={() => setTimeout(() => setOpen(false), 150)}
         className="gap-1.5"
       >
         Nouvel atelier

src/app/sessions/WorkshopTabs.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useTransition } from 'react';
+import { useState, useTransition, useRef } from 'react';
 import Link from 'next/link';
 import { useSearchParams, useRouter } from 'next/navigation';
 import {
@@ -25,6 +25,7 @@ import {
   getWorkshop,
   getSessionPath,
 } from '@/lib/workshops';
+import { useClickOutside } from '@/hooks/useClickOutside';
 
 const TYPE_TABS = [
   { value: 'all' as const, icon: '📋', label: 'Tous' },
@@ -429,13 +430,14 @@ function TypeFilterDropdown({
   const current = TYPE_TABS.find((t) => t.value === activeTab) ?? TYPE_TABS[0];
   const isTypeSelected = activeTab !== 'all' && activeTab !== 'byPerson';
   const totalCount = typeTabs.reduce((s, t) => s + (counts[t.value] ?? 0), 0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  useClickOutside(containerRef, () => onOpenChange(false), open);
 
   return (
-    <div className="relative">
+    <div ref={containerRef} className="relative">
       <button
         type="button"
         onClick={() => onOpenChange(!open)}
-        onBlur={() => setTimeout(() => onOpenChange(false), 150)}
         className={`
           flex items-center gap-2 px-3 py-2 rounded-lg font-medium text-sm transition-colors
           ${isTypeSelected ? 'bg-primary text-primary-foreground' : 'text-muted hover:bg-card-hover hover:text-foreground'}

src/components/collaboration/ShareModal.tsx

@@ -7,6 +7,7 @@ import { Input } from '@/components/ui/Input';
 import { Button } from '@/components/ui/Button';
 import { Badge } from '@/components/ui/Badge';
 import { Avatar } from '@/components/ui/Avatar';
+import { Select } from '@/components/ui/Select';
 import { getTeamMembersForShare, type TeamWithMembers } from '@/lib/share-utils';
 import type { ShareRole } from '@prisma/client';
 
@@ -41,8 +42,10 @@ interface ShareModalProps {
   helpText?: React.ReactNode;
 }
 
-const SELECT_STYLE =
+const ROLE_OPTIONS = [
-  'appearance-none rounded-lg border border-border bg-card px-3 py-2.5 pr-10 text-sm text-foreground transition-colors hover:bg-card-hover focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20';
+  { value: 'EDITOR', label: 'Éditeur' },
+  { value: 'VIEWER', label: 'Lecteur' },
+] as const;
 
 export function ShareModal({
   isOpen,
@@ -151,10 +154,12 @@ export function ShareModal({
                   className="flex-1"
                   required
                 />
-                <select value={role} onChange={(e) => setRole(e.target.value as ShareRole)} className={SELECT_STYLE}>
+                <Select
-                  <option value="EDITOR">Éditeur</option>
+                  value={role}
-                  <option value="VIEWER">Lecteur</option>
+                  onChange={(e) => setRole(e.target.value as ShareRole)}
-                </select>
+                  options={[...ROLE_OPTIONS]}
+                  wrapperClassName="w-auto shrink-0 min-w-[7rem]"
+                />
               </div>
             )}
 
@@ -171,30 +176,25 @@ export function ShareModal({
                   </p>
                 ) : (
                   <div className="flex gap-2">
-                    <div className="relative flex-1">
+                    <Select
-                      <select
                       value={selectedMemberId}
                       onChange={(e) => setSelectedMemberId(e.target.value)}
-                        className={`w-full ${SELECT_STYLE}`}
+                      options={[
+                        { value: '', label: 'Sélectionner un membre', disabled: true },
+                        ...teamMembers.map((m) => ({
+                          value: m.id,
+                          label: m.name ? `${m.name} (${m.email})` : m.email,
+                        })),
+                      ]}
+                      wrapperClassName="flex-1 min-w-0"
                       required
-                      >
+                    />
-                        <option value="">Sélectionner un membre</option>
+                    <Select
-                        {teamMembers.map((m) => (
+                      value={role}
-                          <option key={m.id} value={m.id}>
+                      onChange={(e) => setRole(e.target.value as ShareRole)}
-                            {m.name || m.email} {m.name && `(${m.email})`}
+                      options={[...ROLE_OPTIONS]}
-                          </option>
+                      wrapperClassName="w-auto shrink-0 min-w-[7rem]"
-                        ))}
+                    />
-                      </select>
-                      <div className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
-                        <svg className="h-4 w-4 text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                        </svg>
-                      </div>
-                    </div>
-                    <select value={role} onChange={(e) => setRole(e.target.value as ShareRole)} className={SELECT_STYLE}>
-                      <option value="EDITOR">Éditeur</option>
-                      <option value="VIEWER">Lecteur</option>
-                    </select>
                   </div>
                 )}
               </div>
@@ -211,39 +211,27 @@ export function ShareModal({
                     .
                   </p>
                 ) : (
-                  <>
+                  <div className="flex gap-2">
-                    <div className="relative">
+                    <Select
-                      <select
                       value={teamId}
                       onChange={(e) => setTeamId(e.target.value)}
-                        className={`w-full ${SELECT_STYLE}`}
+                      options={[
+                        { value: '', label: 'Sélectionner une équipe', disabled: true },
+                        ...userTeams.map((team) => ({
+                          value: team.id,
+                          label: `${team.name}${team.userRole === 'ADMIN' ? ' (Admin)' : ''}`,
+                        })),
+                      ]}
+                      wrapperClassName="flex-1 min-w-0"
                       required
-                      >
+                    />
-                        <option value="">Sélectionner une équipe</option>
+                    <Select
-                        {userTeams.map((team) => (
+                      value={role}
-                          <option key={team.id} value={team.id}>
+                      onChange={(e) => setRole(e.target.value as ShareRole)}
-                            {team.name} {team.userRole === 'ADMIN' && '(Admin)'}
+                      options={[...ROLE_OPTIONS]}
-                          </option>
+                      wrapperClassName="w-auto shrink-0 min-w-[7rem]"
-                        ))}
+                    />
-                      </select>
-                      <div className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
-                        <svg className="h-4 w-4 text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                        </svg>
                   </div>
-                    </div>
-                    <div className="relative">
-                      <select value={role} onChange={(e) => setRole(e.target.value as ShareRole)} className={`w-full ${SELECT_STYLE}`}>
-                        <option value="EDITOR">Éditeur</option>
-                        <option value="VIEWER">Lecteur</option>
-                      </select>
-                      <div className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
-                        <svg className="h-4 w-4 text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                        </svg>
-                      </div>
-                    </div>
-                  </>
                 )}
               </div>
             )}

src/components/layout/Header.tsx

@@ -4,15 +4,20 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useSession, signOut } from 'next-auth/react';
 import { useTheme } from '@/contexts/ThemeContext';
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import { Avatar, RocketIcon } from '@/components/ui';
 import { WORKSHOPS } from '@/lib/workshops';
+import { useClickOutside } from '@/hooks/useClickOutside';
 
 export function Header() {
   const { theme, toggleTheme } = useTheme();
   const { data: session, status } = useSession();
   const [menuOpen, setMenuOpen] = useState(false);
   const [workshopsOpen, setWorkshopsOpen] = useState(false);
+  const workshopsDropdownRef = useRef<HTMLDivElement>(null);
+  const userMenuRef = useRef<HTMLDivElement>(null);
+  useClickOutside(workshopsDropdownRef, () => setWorkshopsOpen(false), workshopsOpen);
+  useClickOutside(userMenuRef, () => setMenuOpen(false), menuOpen);
   const pathname = usePathname();
 
   const isActiveLink = (path: string) => pathname.startsWith(path);
@@ -61,10 +66,9 @@ export function Header() {
               </Link>
 
               {/* New Workshop Dropdown */}
-              <div className="relative">
+              <div className="relative" ref={workshopsDropdownRef}>
                 <button
                   onClick={() => setWorkshopsOpen(!workshopsOpen)}
-                  onBlur={() => setTimeout(() => setWorkshopsOpen(false), 150)}
                   className={`flex items-center gap-1 text-sm font-medium transition-colors ${
                     WORKSHOPS.some((w) => isActiveLink(w.path))
                       ? 'text-primary'
@@ -120,7 +124,7 @@ export function Header() {
           {status === 'loading' ? (
             <div className="h-9 w-20 animate-pulse rounded-lg bg-card-hover" />
           ) : status === 'authenticated' && session?.user ? (
-            <div className="relative">
+            <div ref={userMenuRef} className="relative">
               <button
                 onClick={() => setMenuOpen(!menuOpen)}
                 className="flex h-9 items-center gap-2 rounded-lg border border-border bg-card pl-1.5 pr-3 transition-colors hover:bg-card-hover"
@@ -145,8 +149,6 @@ export function Header() {
               </button>
 
               {menuOpen && (
-                <>
-                  <div className="fixed inset-0 z-10" onClick={() => setMenuOpen(false)} />
                 <div className="absolute right-0 z-20 mt-2 w-48 rounded-lg border border-border bg-card py-1 shadow-lg">
                     <div className="border-b border-border px-4 py-2">
                       <p className="text-xs text-muted">Connecté en tant que</p>
@@ -175,7 +177,6 @@ export function Header() {
                       Se déconnecter
                     </button>
                   </div>
-                </>
               )}
             </div>
           ) : (

src/components/swot/ActionPanel.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useTransition } from 'react';
 import type { SwotItem, Action, ActionLink, SwotCategory } from '@prisma/client';
-import { Button, Badge, Modal, ModalFooter, Input, Textarea } from '@/components/ui';
+import { Button, Badge, Modal, ModalFooter, Input, Textarea, Select } from '@/components/ui';
 import { createAction, updateAction, deleteAction } from '@/actions/swot';
 
 type ActionWithLinks = Action & {
@@ -40,11 +40,11 @@ const categoryShort: Record<SwotCategory, string> = {
 };
 
 const priorityLabels = ['Basse', 'Moyenne', 'Haute'];
-const statusLabels: Record<string, string> = {
+const statusOptions = [
-  todo: 'À faire',
+  { value: 'todo', label: '📋 À faire' },
-  in_progress: 'En cours',
+  { value: 'in_progress', label: '⏳ En cours' },
-  done: 'Terminé',
+  { value: 'done', label: '✅ Terminé' },
-};
+];
 
 export function ActionPanel({
   sessionId,
@@ -279,16 +279,15 @@ export function ActionPanel({
                 >
                   {priorityLabels[action.priority]}
                 </Badge>
-                <select
+                <Select
                   value={action.status}
                   onChange={(e) => handleStatusChange(action, e.target.value)}
-                  className="rounded border border-border bg-card px-2 py-1 text-xs text-foreground"
+                  options={statusOptions}
+                  size="xs"
+                  wrapperClassName="!w-auto shrink-0"
+                  className="!w-auto"
                   disabled={isPending}
-                >
+                />
-                  <option value="todo">{statusLabels.todo}</option>
-                  <option value="in_progress">{statusLabels.in_progress}</option>
-                  <option value="done">{statusLabels.done}</option>
-                </select>
               </div>
             </div>
           ))}

src/components/ui/Select.tsx

@@ -1,24 +1,63 @@
 import { forwardRef, SelectHTMLAttributes } from 'react';
 
-interface SelectOption {
+export interface SelectOption {
   value: string;
   label: string;
   disabled?: boolean;
 }
 
-interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'children'> {
+const SIZE_STYLES = {
+  xs: 'px-2 py-1 pr-7 text-xs',
+  sm: 'px-2 py-2 pr-8 text-sm',
+  md: 'px-4 py-2.5 pr-10 text-sm',
+  lg: 'px-4 py-2.5 pr-10 text-base',
+} as const;
+
+const ICON_SIZES = {
+  xs: 'h-3 w-3',
+  sm: 'h-4 w-4',
+  md: 'h-5 w-5',
+  lg: 'h-5 w-5',
+} as const;
+
+const ICON_POSITION = {
+  xs: 'right-2',
+  sm: 'right-2',
+  md: 'right-3',
+  lg: 'right-3',
+} as const;
+
+interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'children' | 'size'> {
   label?: string;
   error?: string;
   options: SelectOption[];
   placeholder?: string;
+  size?: keyof typeof SIZE_STYLES;
+  wrapperClassName?: string;
 }
 
 export const Select = forwardRef<HTMLSelectElement, SelectProps>(
-  ({ className = '', label, error, id, options, placeholder, ...props }, ref) => {
+  (
+    {
+      className = '',
+      label,
+      error,
+      id,
+      options,
+      placeholder,
+      size = 'md',
+      wrapperClassName = '',
+      ...props
+    },
+    ref
+  ) => {
     const selectId = id || props.name;
+    const sizeStyles = SIZE_STYLES[size];
+    const iconSize = ICON_SIZES[size];
+    const iconPosition = ICON_POSITION[size];
 
     return (
-      <div className="w-full">
+      <div className={wrapperClassName || 'w-full'}>
         {label && (
           <label htmlFor={selectId} className="mb-2 block text-sm font-medium text-foreground">
             {label}
@@ -29,11 +68,13 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
             ref={ref}
             id={selectId}
             className={`
-              w-full appearance-none rounded-lg border bg-input px-4 py-2.5 pr-10 text-foreground
+              w-full appearance-none rounded-lg border bg-input text-foreground
               placeholder:text-muted-foreground
               focus:outline-none focus:ring-2 focus:ring-primary/20
               disabled:cursor-not-allowed disabled:opacity-50
-              ${error ? 'border-destructive focus:border-destructive' : 'border-input-border focus:border-primary'}
+              border-input-border focus:border-primary
+              ${sizeStyles}
+              ${error ? 'border-destructive focus:border-destructive' : ''}
               ${className}
             `}
             {...props}
@@ -49,14 +90,8 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
               </option>
             ))}
           </select>
-          {/* Custom arrow icon */}
+          <div className={`pointer-events-none absolute ${iconPosition} top-1/2 -translate-y-1/2 text-muted-foreground`}>
-          <div className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
+            <svg className={iconSize} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <svg
-              className="h-5 w-5 text-muted-foreground"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
             </svg>
           </div>
@@ -68,4 +103,3 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
 );
 
 Select.displayName = 'Select';
-

src/components/ui/index.ts

@@ -14,6 +14,7 @@ export { ParticipantInput } from './ParticipantInput';
 export { Modal, ModalFooter } from './Modal';
 export { RocketIcon } from './RocketIcon';
 export { Select } from './Select';
+export type { SelectOption } from './Select';
 export { Textarea } from './Textarea';
 export { ToggleGroup } from './ToggleGroup';
 export type { ToggleOption } from './ToggleGroup';

src/components/weather/WeatherCard.tsx

@@ -4,6 +4,7 @@ import { useState, useTransition, useEffect } from 'react';
 import { createOrUpdateWeatherEntry } from '@/actions/weather';
 import { Avatar } from '@/components/ui/Avatar';
 import { Textarea } from '@/components/ui/Textarea';
+import { Select } from '@/components/ui/Select';
 
 const WEATHER_EMOJIS = [
   { emoji: '', label: 'Aucun' },
@@ -140,29 +141,14 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit }: Weathe
       {/* Performance */}
       <td className="w-24 px-2 py-3">
         {canEditThis ? (
-          <div className="relative mx-auto w-fit">
+          <Select
-            <select
             value={performanceEmoji || ''}
             onChange={(e) => handleEmojiChange('performance', e.target.value || null)}
-              className="w-16 appearance-none rounded-lg border border-border bg-card px-2 py-2.5 pr-8 text-center text-lg text-foreground transition-colors hover:bg-card-hover focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+            options={WEATHER_EMOJIS.map(({ emoji }) => ({ value: emoji, label: emoji }))}
-            >
+            size="sm"
-              {WEATHER_EMOJIS.map(({ emoji }) => (
+            wrapperClassName="!w-fit mx-auto"
-                <option key={emoji || 'none'} value={emoji}>
+            className="!w-16 min-w-16 text-center text-lg py-2.5"
-                  {emoji}
+          />
-                </option>
-              ))}
-            </select>
-            <div className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2">
-              <svg
-                className="h-3 w-3 text-muted"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-              </svg>
-            </div>
-          </div>
         ) : (
           <div className="text-2xl text-center">{performanceEmoji || '-'}</div>
         )}
@@ -171,29 +157,14 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit }: Weathe
       {/* Moral */}
       <td className="w-24 px-2 py-3">
         {canEditThis ? (
-          <div className="relative mx-auto w-fit">
+          <Select
-            <select
             value={moralEmoji || ''}
             onChange={(e) => handleEmojiChange('moral', e.target.value || null)}
-              className="w-16 appearance-none rounded-lg border border-border bg-card px-2 py-2.5 pr-8 text-center text-lg text-foreground transition-colors hover:bg-card-hover focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+            options={WEATHER_EMOJIS.map(({ emoji }) => ({ value: emoji, label: emoji }))}
-            >
+            size="sm"
-              {WEATHER_EMOJIS.map(({ emoji }) => (
+            wrapperClassName="!w-fit mx-auto"
-                <option key={emoji || 'none'} value={emoji}>
+            className="!w-16 min-w-16 text-center text-lg py-2.5"
-                  {emoji}
+          />
-                </option>
-              ))}
-            </select>
-            <div className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2">
-              <svg
-                className="h-3 w-3 text-muted"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-              </svg>
-            </div>
-          </div>
         ) : (
           <div className="text-2xl text-center">{moralEmoji || '-'}</div>
         )}
@@ -202,29 +173,14 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit }: Weathe
       {/* Flux */}
       <td className="w-24 px-2 py-3">
         {canEditThis ? (
-          <div className="relative mx-auto w-fit">
+          <Select
-            <select
             value={fluxEmoji || ''}
             onChange={(e) => handleEmojiChange('flux', e.target.value || null)}
-              className="w-16 appearance-none rounded-lg border border-border bg-card px-2 py-2.5 pr-8 text-center text-lg text-foreground transition-colors hover:bg-card-hover focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+            options={WEATHER_EMOJIS.map(({ emoji }) => ({ value: emoji, label: emoji }))}
-            >
+            size="sm"
-              {WEATHER_EMOJIS.map(({ emoji }) => (
+            wrapperClassName="!w-fit mx-auto"
-                <option key={emoji || 'none'} value={emoji}>
+            className="!w-16 min-w-16 text-center text-lg py-2.5"
-                  {emoji}
+          />
-                </option>
-              ))}
-            </select>
-            <div className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2">
-              <svg
-                className="h-3 w-3 text-muted"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-              </svg>
-            </div>
-          </div>
         ) : (
           <div className="text-2xl text-center">{fluxEmoji || '-'}</div>
         )}
@@ -233,29 +189,14 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit }: Weathe
       {/* Création de valeur */}
       <td className="w-24 px-2 py-3">
         {canEditThis ? (
-          <div className="relative mx-auto w-fit">
+          <Select
-            <select
             value={valueCreationEmoji || ''}
             onChange={(e) => handleEmojiChange('valueCreation', e.target.value || null)}
-              className="w-16 appearance-none rounded-lg border border-border bg-card px-2 py-2.5 pr-8 text-center text-lg text-foreground transition-colors hover:bg-card-hover focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+            options={WEATHER_EMOJIS.map(({ emoji }) => ({ value: emoji, label: emoji }))}
-            >
+            size="sm"
-              {WEATHER_EMOJIS.map(({ emoji }) => (
+            wrapperClassName="!w-fit mx-auto"
-                <option key={emoji || 'none'} value={emoji}>
+            className="!w-16 min-w-16 text-center text-lg py-2.5"
-                  {emoji}
+          />
-                </option>
-              ))}
-            </select>
-            <div className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2">
-              <svg
-                className="h-3 w-3 text-muted"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-              </svg>
-            </div>
-          </div>
         ) : (
           <div className="text-2xl text-center">{valueCreationEmoji || '-'}</div>
         )}

src/hooks/useClickOutside.ts

@@ -0,0 +1,24 @@
+import { useEffect, RefObject } from 'react';
+
+/**
+ * Calls callback when a mousedown occurs outside the ref element.
+ * Uses mousedown (not click) so it fires before blur and gives consistent behavior.
+ */
+export function useClickOutside<T extends HTMLElement>(
+  ref: RefObject<T | null>,
+  handler: () => void,
+  enabled = true
+) {
+  useEffect(() => {
+    if (!enabled) return;
+
+    const handleMouseDown = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        handler();
+      }
+    };
+
+    document.addEventListener('mousedown', handleMouseDown);
+    return () => document.removeEventListener('mousedown', handleMouseDown);
+  }, [ref, handler, enabled]);
+}