Dropdown Menu

1'use client';
2
3import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
4import * as React from 'react';
5import { cn } from '../lib/cn';
6import { FloatingPortal, useFloating } from '../lib/floating';
7import { floatingVariants, reveal, springs, tap } from '../lib/motion';
8import { useLayer } from '../lib/overlay';
9import { useControllableState } from '../lib/use-controllable-state';
10
11type IconProps = React.SVGProps<SVGSVGElement> & {
12  size?: number | string;
13};
14
15function ChevronDownIcon({ size = 24, strokeWidth = 1.5, ...props }: IconProps) {
16  return (
17    <svg
18      xmlns="http://www.w3.org/2000/svg"
19      width={size}
20      height={size}
21      viewBox="0 0 24 24"
22      fill="none"
23      stroke="currentColor"
24      strokeWidth={strokeWidth}
25      strokeLinecap="round"
26      strokeLinejoin="round"
27      aria-hidden="true"
28      {...props}
29    >
30      <path d="m6 9 6 6 6-6" />
31    </svg>
32  );
33}
34
35function CheckIcon({ size = 24, strokeWidth = 1.5, ...props }: IconProps) {
36  return (
37    <svg
38      xmlns="http://www.w3.org/2000/svg"
39      width={size}
40      height={size}
41      viewBox="0 0 24 24"
42      fill="none"
43      stroke="currentColor"
44      strokeWidth={strokeWidth}
45      strokeLinecap="round"
46      strokeLinejoin="round"
47      aria-hidden="true"
48      {...props}
49    >
50      <path d="M20 6 9 17l-5-5" />
51    </svg>
52  );
53}
54
55function DotIcon({ size = 24, ...props }: IconProps) {
56  return (
57    <svg
58      xmlns="http://www.w3.org/2000/svg"
59      width={size}
60      height={size}
61      viewBox="0 0 24 24"
62      fill="currentColor"
63      aria-hidden="true"
64      {...props}
65    >
66      <circle cx="12" cy="12" r="4" />
67    </svg>
68  );
69}
70
71type FocusEdge = 'first' | 'last';
72
73interface DropdownContextValue {
74  isOpen: boolean;
75  toggleMenu: () => void;
76  closeMenu: (options?: { restoreFocus?: boolean }) => void;
77  openMenu: (focus?: FocusEdge) => void;
78  initialFocusRef: React.RefObject<FocusEdge>;
79  triggerRef: React.RefObject<HTMLButtonElement | null>;
80  contentRef: React.RefObject<HTMLDivElement | null>;
81  triggerId: string;
82  contentId: string;
83}
84
85interface DropdownMenuProps {
86  children: React.ReactNode;
87  className?: string;
88  defaultOpen?: boolean;
89  open?: boolean;
90  onOpenChange?: (open: boolean) => void;
91}
92
93interface DropdownMenuTriggerProps {
94  children: React.ReactNode;
95  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
96  className?: string;
97  asChild?: boolean;
98}
99
100interface DropdownMenuContentProps {
101  children: React.ReactNode;
102  className?: string;
103  align?: 'start' | 'center' | 'end';
104  sideOffset?: number;
105}
106
107type DropdownMenuItemRole = 'menuitem' | 'menuitemcheckbox' | 'menuitemradio';
108
109interface DropdownMenuItemProps {
110  children: React.ReactNode;
111  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
112  className?: string;
113  disabled?: boolean;
114  onSelect?: () => void;
115  variant?: 'default' | 'destructive';
116  asChild?: boolean;
117  role?: DropdownMenuItemRole;
118  checked?: boolean;
119  closeOnSelect?: boolean;
120}
121
122interface DropdownMenuCheckableItemProps extends Omit<
123  DropdownMenuItemProps,
124  'role' | 'checked' | 'asChild'
125> {
126  checked?: boolean;
127  onCheckedChange?: (checked: boolean) => void;
128}
129
130const DROPDOWN_ICON_VARIANTS = {
131  open: { rotate: 180 },
132  closed: { rotate: 0 },
133} as const;
134
135const DROPDOWN_ICON_STYLE = { willChange: 'transform' } as const;
136const DROPDOWN_CONTENT_STYLE = { willChange: 'opacity, transform, filter' } as const;
137
138const TYPEAHEAD_RESET_MS = 500;
139
140const ORIGIN_CLASSES = {
141  bottom: { start: 'origin-top-left', center: 'origin-top', end: 'origin-top-right' },
142  top: { start: 'origin-bottom-left', center: 'origin-bottom', end: 'origin-bottom-right' },
143} as const;
144
145const DropdownContext = React.createContext<DropdownContextValue | null>(null);
146
147const useDropdownContext = (): DropdownContextValue => {
148  const context = React.use(DropdownContext);
149  if (!context) throw new Error('Dropdown components must be used within DropdownMenu');
150  return context;
151};
152
153function useClickOutside(
154  ref: React.RefObject<HTMLElement | null>,
155  triggerRef: React.RefObject<HTMLElement | null>,
156  handler: () => void,
157  enabled: boolean,
158  isInsideUpperLayer: (target: EventTarget | null) => boolean,
159) {
160  React.useEffect(() => {
161    if (!enabled) return;
162    const handlePointerDownOutside = (event: PointerEvent) => {
163      if (
164        ref.current?.contains(event.target as Node) ||
165        triggerRef.current?.contains(event.target as Node) ||
166        isInsideUpperLayer(event.target)
167      ) {
168        return;
169      }
170      handler();
171    };
172    document.addEventListener('pointerdown', handlePointerDownOutside);
173    return () => document.removeEventListener('pointerdown', handlePointerDownOutside);
174  }, [ref, triggerRef, handler, enabled, isInsideUpperLayer]);
175}
176
177function getMenuItems(container: HTMLElement | null): HTMLElement[] {
178  if (!container) return [];
179  return Array.from(
180    container.querySelectorAll<HTMLElement>(
181      '[role="menuitem"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"])',
182    ),
183  );
184}
185
186function focusEdge(container: HTMLElement | null, edge: FocusEdge) {
187  const items = getMenuItems(container);
188  (edge === 'last' ? items[items.length - 1] : items[0])?.focus();
189}
190
191function useTypeahead() {
192  const bufferRef = React.useRef('');
193  const timerRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
194
195  React.useEffect(() => () => clearTimeout(timerRef.current), []);
196
197  const isTyping = React.useCallback(() => bufferRef.current !== '', []);
198
199  const search = React.useCallback((key: string, items: HTMLElement[], current: number) => {
200    clearTimeout(timerRef.current);
201    timerRef.current = setTimeout(() => {
202      bufferRef.current = '';
203    }, TYPEAHEAD_RESET_MS);
204    const buffer = bufferRef.current + key.toLowerCase();
205    bufferRef.current = buffer;
206    const repeated = Array.from(buffer).every((char) => char === buffer[0]);
207    const query = repeated ? buffer.charAt(0) : buffer;
208    const start = repeated ? current + 1 : Math.max(current, 0);
209    const ordered = [...items.slice(start), ...items.slice(0, start)];
210    return ordered.find((item) => item.textContent?.trim().toLowerCase().startsWith(query));
211  }, []);
212
213  return React.useMemo(() => ({ search, isTyping }), [search, isTyping]);
214}
215
216const DropdownMenuRoot = ({
217  children,
218  className,
219  defaultOpen = false,
220  open: controlledOpen,
221  onOpenChange,
222}: DropdownMenuProps): React.JSX.Element => {
223  const [isOpen, setOpen] = useControllableState({
224    value: controlledOpen,
225    defaultValue: defaultOpen,
226    onChange: onOpenChange,
227  });
228  const triggerRef = React.useRef<HTMLButtonElement>(null);
229  const contentRef = React.useRef<HTMLDivElement>(null);
230  const initialFocusRef = React.useRef<FocusEdge>('first');
231
232  const openMenu = React.useCallback(
233    (focus: FocusEdge = 'first') => {
234      initialFocusRef.current = focus;
235      setOpen(true);
236    },
237    [setOpen],
238  );
239
240  const closeMenu = React.useCallback(
241    (options?: { restoreFocus?: boolean }) => {
242      setOpen(false);
243      if (options?.restoreFocus !== false) {
244        triggerRef.current?.focus();
245      }
246    },
247    [setOpen],
248  );
249
250  const toggleMenu = React.useCallback(() => {
251    initialFocusRef.current = 'first';
252    setOpen(!isOpen);
253  }, [setOpen, isOpen]);
254
255  const id = React.useId();
256  const triggerId = `dropdown-trigger-${id}`;
257  const contentId = `dropdown-content-${id}`;
258
259  const contextValue = React.useMemo(
260    () => ({
261      isOpen,
262      openMenu,
263      closeMenu,
264      toggleMenu,
265      initialFocusRef,
266      triggerRef,
267      contentRef,
268      triggerId,
269      contentId,
270    }),
271    [isOpen, openMenu, closeMenu, toggleMenu, triggerId, contentId],
272  );
273
274  return (
275    <DropdownContext value={contextValue}>
276      <div className={cn('relative inline-block text-left', className)}>{children}</div>
277    </DropdownContext>
278  );
279};
280
281const DropdownMenuTrigger = ({
282  children,
283  onClick,
284  className,
285  asChild = false,
286}: DropdownMenuTriggerProps): React.JSX.Element => {
287  const { isOpen, toggleMenu, openMenu, triggerRef, contentRef, triggerId, contentId } =
288    useDropdownContext();
289  const shouldReduceMotion = useReducedMotion();
290
291  const handleClick = React.useCallback(
292    (e: React.MouseEvent<HTMLButtonElement>) => {
293      toggleMenu();
294      onClick?.(e);
295    },
296    [toggleMenu, onClick],
297  );
298
299  const handleKeyDown = React.useCallback(
300    (e: React.KeyboardEvent<HTMLButtonElement>) => {
301      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
302        e.preventDefault();
303        const edge = e.key === 'ArrowUp' ? 'last' : 'first';
304        if (isOpen) focusEdge(contentRef.current, edge);
305        else openMenu(edge);
306      }
307    },
308    [isOpen, openMenu, contentRef],
309  );
310
311  const triggerA11yProps = {
312    'aria-expanded': isOpen,
313    'aria-haspopup': 'menu' as const,
314    'aria-controls': isOpen ? contentId : undefined,
315    id: triggerId,
316  };
317
318  if (asChild && React.isValidElement(children)) {
319    const childProps = children.props as {
320      onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
321      onKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
322    };
323
324    return React.cloneElement(children, {
325      ref: triggerRef,
326      onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
327        childProps.onClick?.(e);
328        handleClick(e);
329      },
330      onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => {
331        childProps.onKeyDown?.(e);
332        handleKeyDown(e);
333      },
334      ...triggerA11yProps,
335    } as React.HTMLAttributes<HTMLElement>);
336  }
337
338  return (
339    <motion.button
340      ref={triggerRef}
341      type="button"
342      onClick={handleClick}
343      onKeyDown={handleKeyDown}
344      whileTap={!shouldReduceMotion ? tap : undefined}
345      transition={springs.snappy}
346      className={cn(
347        'inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium',
348        'text-foreground border-border border',
349        'hover:bg-muted transition-colors',
350        'ring-offset-background focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
351        className,
352      )}
353      {...triggerA11yProps}
354    >
355      {children}
356      <motion.span
357        aria-hidden="true"
358        variants={DROPDOWN_ICON_VARIANTS}
359        animate={isOpen ? 'open' : 'closed'}
360        transition={springs.snappy}
361        style={DROPDOWN_ICON_STYLE}
362      >
363        <ChevronDownIcon className="h-4 w-4 opacity-50" size={16} />
364      </motion.span>
365    </motion.button>
366  );
367};
368
369const DropdownMenuContent = ({
370  children,
371  className,
372  align = 'start',
373  sideOffset = 6,
374}: DropdownMenuContentProps): React.JSX.Element | null => {
375  const { isOpen, closeMenu, contentId, triggerId, triggerRef, contentRef, initialFocusRef } =
376    useDropdownContext();
377  const layer = useLayer(isOpen, false, contentRef);
378  const typeahead = useTypeahead();
379  const shouldReduceMotion = useReducedMotion();
380  const { style: floatingStyle, side } = useFloating({
381    open: isOpen,
382    anchorRef: triggerRef,
383    floatingRef: contentRef,
384    side: 'bottom',
385    align,
386    sideOffset,
387  });
388  const verticalSide = side === 'top' ? 'top' : 'bottom';
389
390  const closeWithoutFocus = React.useCallback(
391    () => closeMenu({ restoreFocus: false }),
392    [closeMenu],
393  );
394
395  useClickOutside(contentRef, triggerRef, closeWithoutFocus, isOpen, layer.isInsideUpperLayer);
396
397  React.useEffect(() => {
398    if (!isOpen) return;
399    const frame = requestAnimationFrame(() => {
400      focusEdge(contentRef.current, initialFocusRef.current);
401    });
402    return () => cancelAnimationFrame(frame);
403  }, [isOpen, contentRef, initialFocusRef]);
404
405  const handleKeyDown = React.useCallback(
406    (e: React.KeyboardEvent<HTMLDivElement>) => {
407      if (e.key === 'Escape') {
408        if (!layer.isTopmost()) return;
409        e.preventDefault();
410        closeMenu();
411        return;
412      }
413      if (e.key === 'Tab') {
414        closeMenu();
415        return;
416      }
417
418      const items = getMenuItems(contentRef.current);
419      if (items.length === 0) return;
420
421      const currentIndex = items.indexOf(document.activeElement as HTMLElement);
422
423      let nextIndex: number | null = null;
424      if (e.key === 'ArrowDown') {
425        nextIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % items.length;
426      } else if (e.key === 'ArrowUp') {
427        nextIndex =
428          currentIndex < 0 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
429      } else if (e.key === 'Home') {
430        nextIndex = 0;
431      } else if (e.key === 'End') {
432        nextIndex = items.length - 1;
433      } else if (
434        e.key.length === 1 &&
435        !e.altKey &&
436        !e.ctrlKey &&
437        !e.metaKey &&
438        (e.key !== ' ' || typeahead.isTyping())
439      ) {
440        e.preventDefault();
441        e.stopPropagation();
442        typeahead.search(e.key, items, currentIndex)?.focus();
443        return;
444      }
445
446      if (nextIndex !== null) {
447        e.preventDefault();
448        items[nextIndex]?.focus();
449      }
450    },
451    [closeMenu, contentRef, layer, typeahead],
452  );
453
454  const style = React.useMemo(
455    () => ({
456      ...floatingStyle,
457      ...(isOpen ? null : { visibility: undefined }),
458      ...DROPDOWN_CONTENT_STYLE,
459    }),
460    [floatingStyle, isOpen],
461  );
462
463  return (
464    <FloatingPortal>
465      <AnimatePresence>
466        {isOpen && (
467          <motion.div
468            ref={contentRef}
469            id={contentId}
470            role="menu"
471            tabIndex={-1}
472            aria-labelledby={triggerId}
473            onKeyDownCapture={handleKeyDown}
474            variants={shouldReduceMotion ? reveal : floatingVariants[verticalSide]}
475            initial="hidden"
476            animate="visible"
477            exit="exit"
478            style={style}
479            className={cn(
480              'bg-popover text-popover-foreground border-border z-500 max-h-(--available-height) min-w-48 overflow-y-auto overscroll-contain rounded-md border shadow-md outline-none',
481              ORIGIN_CLASSES[verticalSide][align],
482              className,
483            )}
484          >
485            <div className="flex flex-col gap-0.5 p-1">{children}</div>
486          </motion.div>
487        )}
488      </AnimatePresence>
489    </FloatingPortal>
490  );
491};
492
493const itemClassName = (disabled: boolean, variant: 'default' | 'destructive') =>
494  cn(
495    'relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none',
496    'transition-colors duration-150',
497    'focus-visible:bg-muted focus:bg-muted pointer-coarse:py-2.5',
498    disabled && 'pointer-events-none opacity-40',
499    variant === 'destructive' && 'text-destructive focus:text-destructive',
500  );
501
502const DropdownMenuItem = ({
503  children,
504  onClick,
505  className,
506  disabled = false,
507  variant = 'default',
508  onSelect,
509  asChild = false,
510  role = 'menuitem',
511  checked,
512  closeOnSelect = role === 'menuitem',
513}: DropdownMenuItemProps): React.JSX.Element => {
514  const { closeMenu } = useDropdownContext();
515  const checkable = role !== 'menuitem';
516  const ariaChecked = checkable ? Boolean(checked) : undefined;
517
518  const handleClick = React.useCallback(
519    (e: React.MouseEvent<HTMLDivElement>) => {
520      if (disabled) return;
521      e.stopPropagation();
522      onClick?.(e);
523      onSelect?.();
524      if (closeOnSelect) closeMenu();
525    },
526    [disabled, onClick, onSelect, closeMenu, closeOnSelect],
527  );
528
529  const handleKeyDown = React.useCallback(
530    (e: React.KeyboardEvent<HTMLDivElement>) => {
531      if (disabled) return;
532      if (e.key !== 'Enter' && e.key !== ' ') return;
533      e.stopPropagation();
534      const target = e.currentTarget as HTMLElement;
535      if (target instanceof HTMLAnchorElement && target.hasAttribute('href')) {
536        if (e.key === ' ') {
537          e.preventDefault();
538          target.click();
539        }
540        return;
541      }
542      e.preventDefault();
543      onClick?.(e as unknown as React.MouseEvent<HTMLDivElement>);
544      onSelect?.();
545      if (closeOnSelect) closeMenu();
546    },
547    [disabled, onClick, onSelect, closeMenu, closeOnSelect],
548  );
549
550  const handlePointerMove = React.useCallback(
551    (e: React.PointerEvent<HTMLElement>) => {
552      if (disabled || e.pointerType === 'touch') return;
553      if (document.activeElement !== e.currentTarget) e.currentTarget.focus();
554    },
555    [disabled],
556  );
557
558  const handlePointerLeave = React.useCallback((e: React.PointerEvent<HTMLElement>) => {
559    if (document.activeElement !== e.currentTarget) return;
560    e.currentTarget.closest<HTMLElement>('[role="menu"]')?.focus();
561  }, []);
562
563  if (asChild && React.isValidElement(children)) {
564    const childProps = children.props as Record<string, unknown>;
565    const childOnClick = childProps.onClick as
566      | ((e: React.MouseEvent<HTMLDivElement>) => void)
567      | undefined;
568    const childOnKeyDown = childProps.onKeyDown as
569      | ((e: React.KeyboardEvent<HTMLDivElement>) => void)
570      | undefined;
571    const childOnPointerMove = childProps.onPointerMove as
572      | ((e: React.PointerEvent<HTMLElement>) => void)
573      | undefined;
574    const childOnPointerLeave = childProps.onPointerLeave as
575      | ((e: React.PointerEvent<HTMLElement>) => void)
576      | undefined;
577
578    return React.cloneElement(children, {
579      onClick: (e: React.MouseEvent<HTMLDivElement>) => {
580        childOnClick?.(e);
581        handleClick(e);
582      },
583      onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => {
584        childOnKeyDown?.(e);
585        handleKeyDown(e);
586      },
587      onPointerMove: (e: React.PointerEvent<HTMLElement>) => {
588        childOnPointerMove?.(e);
589        handlePointerMove(e);
590      },
591      onPointerLeave: (e: React.PointerEvent<HTMLElement>) => {
592        childOnPointerLeave?.(e);
593        handlePointerLeave(e);
594      },
595      role,
596      tabIndex: -1,
597      'aria-disabled': disabled || undefined,
598      'aria-checked': ariaChecked,
599      className: cn(
600        itemClassName(disabled, variant),
601        className,
602        childProps.className as string | undefined,
603      ),
604      style: childProps.style as React.CSSProperties | undefined,
605    } as React.ComponentProps<'div'>);
606  }
607
608  return (
609    <div
610      role={role}
611      tabIndex={-1}
612      aria-disabled={disabled || undefined}
613      aria-checked={ariaChecked}
614      onClick={handleClick}
615      onKeyDown={handleKeyDown}
616      onPointerMove={handlePointerMove}
617      onPointerLeave={handlePointerLeave}
618      className={cn(itemClassName(disabled, variant), className)}
619    >
620      {children}
621    </div>
622  );
623};
624
625const DropdownMenuCheckboxItem = ({
626  checked = false,
627  onCheckedChange,
628  onSelect,
629  children,
630  className,
631  ...props
632}: DropdownMenuCheckableItemProps) => (
633  <DropdownMenuItem
634    {...props}
635    role="menuitemcheckbox"
636    checked={checked}
637    className={cn('pl-8', className)}
638    onSelect={() => {
639      onCheckedChange?.(!checked);
640      onSelect?.();
641    }}
642  >
643    <span className="absolute left-2 flex size-4 items-center justify-center">
644      {checked && <CheckIcon size={14} />}
645    </span>
646    {children}
647  </DropdownMenuItem>
648);
649
650const DropdownMenuRadioItem = ({
651  checked = false,
652  onCheckedChange,
653  onSelect,
654  children,
655  className,
656  closeOnSelect = true,
657  ...props
658}: DropdownMenuCheckableItemProps) => (
659  <DropdownMenuItem
660    {...props}
661    role="menuitemradio"
662    checked={checked}
663    closeOnSelect={closeOnSelect}
664    className={cn('pl-8', className)}
665    onSelect={() => {
666      if (!checked) onCheckedChange?.(true);
667      onSelect?.();
668    }}
669  >
670    <span className="absolute left-2 flex size-4 items-center justify-center">
671      {checked && <DotIcon size={14} />}
672    </span>
673    {children}
674  </DropdownMenuItem>
675);
676
677const DropdownLabel = ({
678  children,
679  className,
680}: {
681  children: React.ReactNode;
682  className?: string;
683}) => {
684  return (
685    <div
686      role="presentation"
687      className={cn(
688        'text-muted-foreground px-2 py-2 text-xs font-semibold tracking-wider uppercase',
689        className,
690      )}
691    >
692      {children}
693    </div>
694  );
695};
696
697const DropdownSeparator = ({ className }: { className?: string }) => {
698  return (
699    <div
700      role="separator"
701      aria-orientation="horizontal"
702      className={cn('bg-border/50 my-1 h-px', className)}
703    />
704  );
705};
706
707const DropdownMenu = Object.assign(DropdownMenuRoot, {
708  Trigger: DropdownMenuTrigger,
709  Content: DropdownMenuContent,
710  Item: DropdownMenuItem,
711  CheckboxItem: DropdownMenuCheckboxItem,
712  RadioItem: DropdownMenuRadioItem,
713  Label: DropdownLabel,
714  Separator: DropdownSeparator,
715});
716
717export { DropdownMenu };
718export type {
719  DropdownMenuCheckableItemProps,
720  DropdownMenuContentProps,
721  DropdownMenuItemProps,
722  DropdownMenuProps,
723  DropdownMenuTriggerProps,
724};