Navigation menu

1"use client";
2 
3import { DirectionProvider } from "@base-ui/react/direction-provider";
4import { mergeProps } from "@base-ui/react/merge-props";
5import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
6import { cva } from "class-variance-authority";
7import * as React from "react";
8 
9import { cn } from "@/lib/utils";
10import { ChevronDownIcon } from "lucide-react";
11 
12type NavigationMenuLifecycleHandler<EventType extends Event = Event> = {
13  bivarianceHack(event: EventType): void;
14}["bivarianceHack"];
15 
16type NavigationMenuOutsideEvent = CustomEvent<{ originalEvent: Event }>;
17 
18type NavigationMenuDismissHandlers = {
19  onEscapeKeyDown?: NavigationMenuLifecycleHandler<KeyboardEvent>;
20  onFocusOutside?: NavigationMenuLifecycleHandler<NavigationMenuOutsideEvent>;
21  onInteractOutside?: NavigationMenuLifecycleHandler<NavigationMenuOutsideEvent>;
22  onPointerDownOutside?: NavigationMenuLifecycleHandler<NavigationMenuOutsideEvent>;
23};
24 
25type NavigationMenuItemRecord = {
26  element: HTMLLIElement;
27  forceMount: boolean;
28};
29 
30type NavigationMenuAdapterContextValue = {
31  align: NavigationMenuPrimitive.Positioner.Props["align"];
32  contentForceMount: boolean;
33  contentHandlersRef: React.MutableRefObject<Map<HTMLElement, NavigationMenuDismissHandlers>>;
34  orientation: "horizontal" | "vertical";
35  portalContainer: HTMLLIElement | null;
36  registerItem: (value: string, element: HTMLLIElement | null, forceMount: boolean) => void;
37  rootElement: HTMLElement | null;
38  value: string;
39  viewport: boolean;
40};
41 
42const NavigationMenuAdapterContext = React.createContext<NavigationMenuAdapterContextValue | null>(
43  null,
44);
45 
46type NavigationMenuProps = Omit<
47  NavigationMenuPrimitive.Root.Props<string>,
48  "defaultValue" | "onValueChange" | "value"
49> &
50  Pick<NavigationMenuPrimitive.Positioner.Props, "align"> & {
51    asChild?: boolean;
52    children?: React.ReactNode;
53    defaultValue?: string;
54    delayDuration?: number;
55    dir?: "ltr" | "rtl";
56    onValueChange?: (value: string) => void;
57    skipDelayDuration?: number;
58    value?: string;
59    viewport?: boolean;
60  };
61 
62type NavigationMenuContentProps = Omit<
63  React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Content>,
64  "keepMounted"
65> &
66  NavigationMenuDismissHandlers & {
67    asChild?: boolean;
68    children?: React.ReactNode;
69    forceMount?: boolean;
70    keepMounted?: boolean;
71  };
72 
73type NavigationMenuViewportProps = React.ComponentPropsWithRef<"div"> & {
74  asChild?: boolean;
75// … truncated