Dropdown Menu

"use client";

import { Menu as BaseMenu } from "@base-ui/react/menu";
import type { ComponentProps } from "react";

type ClassName<State> = string | ((state: State) => string | undefined) | undefined;

function cx(...classes: (string | false | null | undefined)[]) {
  return classes.filter(Boolean).join(" ");
}

/** Prepends base classes while keeping Base UI's state-function form of className working. */
function withBase<State>(base: string, className: ClassName<State>) {
  return typeof className === "function" ? (state: State) => cx(base, className(state)) : cx(base, className);
}

/** Groups the menu parts and holds its open state. Pass `open`/`onOpenChange` to control it. */
export const DropdownMenu = BaseMenu.Root;

/** A button that opens the menu. Unstyled; pass `className`, or `render={<Button />}` to reuse your button. */
export const DropdownMenuTrigger = BaseMenu.Trigger;

/** Groups related items. Put a DropdownMenuLabel inside to name the group. */
export const DropdownMenuGroup = BaseMenu.Group;

type PositionerProps = BaseMenu.Positioner.Props;

export interface DropdownMenuContentProps extends BaseMenu.Popup.Props {
  /** Side of the trigger to place the menu on. Flips when there is not enough room. */
  side?: PositionerProps["side"];
  /** Alignment against the trigger on the chosen side. */
  align?: PositionerProps["align"];
  /** Gap between the trigger and the menu, in pixels. */
  sideOffset?: PositionerProps["sideOffset"];
  /** Shift along the trigger edge, in pixels. */
  alignOffset?: PositionerProps["alignOffset"];
  /** Classes for the positioner wrapper, for example to change the z-index. */
  positionerClassName?: string;
  /** Element to portal into. Defaults to `document.body`. */
  container?: BaseMenu.Portal.Props["container"];
}

/** The menu panel, rendered in a portal and positioned against the trigger. */
export function DropdownMenuContent({
  side = "bottom",
  align = "start",
  sideOffset = 6,
  alignOffset = 0,
  positionerClassName,
  container,
  className,
  ...props
}: DropdownMenuContentProps) {
  return (
    <BaseMenu.Portal container={container}>
      <BaseMenu.Positioner
        side={side}
        align={align}
        sideOffset={sideOffset}
        alignOffset={alignOffset}
        className={cx("z-50 outline-none", positionerClassName)}
      >
        <BaseMenu.Popup
          className={withBase(
            cx(
              // 12px panel radius minus 6px padding gives the items their concentric 6px radius.
              "max-h-(--available-height) min-w-52 origin-(--transform-origin) overflow-y-auto overscroll-contain rounded-xl p-1.5 outline-none",
              "border border-zinc-950/10 bg-white text-zinc-950 shadow-[0_12px_32px_-8px_rgb(0_0_0/0.18)]",
              "dark:border-white/15 dark:bg-black dark:text-white dark:shadow-[0_16px_48px_-12px_rgb(0_0_0/1),inset_0_1px_0_rgb(255_255_255/0.08)]",
              // Enter: 160ms from 96% at the trigger. Exit: 110ms, fades with a smaller scale.
              "transition-[opacity,scale] duration-160 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none",
              "data-[starting-style]:opacity-0 motion-safe:data-[starting-style]:scale-96",
              "data-[ending-style]:opacity-0 data-[ending-style]:duration-110 data-[ending-style]:ease-out motion-safe:data-[ending-style]:scale-98",
            ),
            className,
          )}
          {...props}
        />
      </BaseMenu.Positioner>
    </BaseMenu.Portal>
  );
}

export interface DropdownMenuItemProps extends BaseMenu.Item.Props {
  /** Styles the item for actions that delete or cannot be undone. */
  destructive?: boolean;
}

/**
 * An action in the menu. Use `onClick` to handle it; `disabled` keeps it visible but skips it.
 * The highlight follows the pointer and arrow keys instantly; menus are used too often to animate it.
 */
export function DropdownMenuItem({ destructive = false, className, ...props }: DropdownMenuItemProps) {
  return (
    <BaseMenu.Item
      data-destructive={destructive || undefined}
      className={withBase(
        cx(
          "flex h-8 cursor-default items-center gap-2.5 rounded-md px-2 text-sm outline-none select-none",
          "[&_svg]:size-4 [&_svg]:shrink-0",
          "data-[disabled]:pointer-events-none data-[disabled]:opacity-45",
          destructive
            ? cx(
                "text-red-600 [&_svg]:text-red-600/80 data-[highlighted]:bg-red-500/[0.08] data-[highlighted]:text-red-700",
                "dark:text-red-400 dark:[&_svg]:text-red-400/80 dark:data-[highlighted]:bg-red-500/[0.12] dark:data-[highlighted]:text-red-300",
              )
            : cx(
                "text-zinc-700 [&_svg]:text-zinc-500 data-[highlighted]:bg-zinc-950/[0.05] data-[highlighted]:text-zinc-950 data-[highlighted]:[&_svg]:text-zinc-950",
                "dark:text-zinc-300 dark:[&_svg]:text-zinc-500 dark:data-[highlighted]:bg-white/[0.08] dark:data-[highlighted]:text-white dark:data-[highlighted]:[&_svg]:text-white",
              ),
        ),
        className,
      )}
      {...props}
    />
  );
}

/** Names a DropdownMenuGroup. Must be rendered inside the group it labels. */
export function DropdownMenuLabel({ className, ...props }: BaseMenu.GroupLabel.Props) {
  return (
    <BaseMenu.GroupLabel
      className={withBase("px-2 pt-2 pb-1 text-xs font-medium text-zinc-500 select-none", className)}
      {...props}
    />
  );
}

/** A divider between groups of items. */
export function DropdownMenuSeparator({ className, ...props }: ComponentProps<typeof BaseMenu.Separator>) {
  return (
    <BaseMenu.Separator
      className={withBase("-mx-1.5 my-1.5 h-px bg-zinc-950/[0.07] dark:bg-white/[0.08]", className)}
      {...props}
    />
  );
}

/** A keyboard shortcut hint shown at the end of an item. */
export function DropdownMenuShortcut({ className, ...props }: ComponentProps<"span">) {
  return (
    <span
      className={cx(
        "ml-auto pl-6 font-mono text-xs text-zinc-400 tabular-nums dark:text-zinc-500",
        "in-data-[highlighted]:text-zinc-500 dark:in-data-[highlighted]:text-zinc-400",
        className,
      )}
      {...props}
    />
  );
}