Dropdown

1"use client";
2 
3import {
4  useRef,
5  useState,
6  useEffect,
7  useCallback,
8  useMemo,
9  createContext,
10  useContext,
11  forwardRef,
12  cloneElement,
13  type ReactNode,
14  type ReactElement,
15  type HTMLAttributes,
16  type ComponentPropsWithoutRef,
17} from "react";
18import { motion, AnimatePresence } from "framer-motion";
19import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
20import { cn } from "@/lib/utils";
21import { spring, exitFallbackMs } from "@/lib/springs";
22import { useProximityHover } from "@/hooks/use-proximity-hover";
23import { shapeMap } from "@/lib/shape-context";
24import { Elevated } from "@/lib/elevated";
25import {
26  DropdownContext,
27  useDropdown,
28  useDropdownMaybe,
29  type DropdownContextValue,
30  type MenuItemRenderOptions,
31} from "@/registry/default/menu-item";
32 
33// Dropdown opts out of the global pill/rounded shape context — popover surfaces
34// look cleaner with the smaller "rounded" radii regardless of how the rest of
35// the UI is shaped (the heavy pill bubbling distorts perceived padding at this
36// scale and produces the corner-shadow asymmetry).
37const shape = shapeMap.rounded;
38 
39// ---------------------------------------------------------------------------
40// Panel context — shared by the inline Dropdown and the popup DropdownContent.
41//
42// The context object itself lives in menu-item.tsx so MenuItem resolves
43// whichever dropdown provider actually wraps it, even when dropdowns built
44// on different primitives render side by side. Re-exported here so the
45// public dropdown API is unchanged.
46// ---------------------------------------------------------------------------
47 
48export { useDropdown, useDropdownMaybe };
49export type { DropdownContextValue, MenuItemRenderOptions };
50 
51// ---------------------------------------------------------------------------
52// Dropdown (inline panel)
53//
54// An always-rendered panel — no trigger, positioning, or dismissal. Because it
55// sits statically in the page it does NOT claim popup menu semantics: the
56// container is a plain role="group" (pass `aria-label` to name it). The real
57// role="menu" lives on the popup DropdownContent below, which Radix wires to
58// a trigger. Consumers who hand-roll a trigger around the inline panel get
59// grouping semantics rather than a falsely-announced popup menu.
60// ---------------------------------------------------------------------------
61 
62interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
63  children: ReactNode;
64  checkedIndex?: number;
65}
66 
67// … truncated