Menubar

1"use client";
2 
3import * as React from "react";
4import { DirectionProvider } from "@base-ui/react/direction-provider";
5import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar";
6 
7import { cn } from "@/lib/utils";
8import {
9  DropdownMenu,
10  DropdownMenuCheckboxItem,
11  DropdownMenuContent,
12  DropdownMenuGroup,
13  DropdownMenuItem,
14  DropdownMenuLabel,
15  DropdownMenuPortal,
16  DropdownMenuRadioGroup,
17  DropdownMenuRadioItem,
18  DropdownMenuSeparator,
19  DropdownMenuShortcut,
20  DropdownMenuSub,
21  DropdownMenuSubContent,
22  DropdownMenuSubTrigger,
23  DropdownMenuTrigger,
24} from "@/components/ui/dropdown-menu";
25 
26type MenubarValueContextValue = {
27  setValue: (value: string) => void;
28  value: string;
29  valueRef: React.MutableRefObject<string>;
30};
31 
32const MenubarValueContext = React.createContext<MenubarValueContextValue | null>(null);
33 
34type MenubarMenuContextValue = {
35  defaultTriggerId: string;
36  setTriggerId: React.Dispatch<React.SetStateAction<string>>;
37};
38 
39const MenubarMenuContext = React.createContext<MenubarMenuContextValue | null>(null);
40 
41type CSSPropertiesWithVariables = React.CSSProperties & {
42  [name: `--${string}`]: string | number | undefined;
43};
44type MenubarContentStyle = React.ComponentProps<typeof DropdownMenuContent>["style"];
45 
46const menubarCssVariables: CSSPropertiesWithVariables = {
47  "--radix-menubar-content-available-height": "var(--available-height)",
48  "--radix-menubar-content-available-width": "var(--available-width)",
49  "--radix-menubar-content-transform-origin": "var(--transform-origin)",
50  "--radix-menubar-trigger-height": "var(--anchor-height)",
51  "--radix-menubar-trigger-width": "var(--anchor-width)",
52};
53 
54function mergeContentStyle(style: MenubarContentStyle): MenubarContentStyle {
55  if (typeof style === "function") {
56    return (state) => ({ ...menubarCssVariables, ...style(state) });
57  }
58 
59  return { ...menubarCssVariables, ...style };
60}
61 
62function getAsChildElement(children: React.ReactNode, componentName: string) {
63  const child = React.Children.toArray(children).find(React.isValidElement);
64 
65  if (!child) {
66    throw new Error(`${componentName} with asChild requires a valid React element child.`);
67  }
68 
69  return child as React.ReactElement<{
70    [key: string]: unknown;
71    children?: React.ReactNode;
72  }>;
73}
74 
75function useMenubarValueContext() {
76  const context = React.useContext(MenubarValueContext);
77 
78  if (!context) {
79    throw new Error("MenubarMenu must be used within Menubar");
80  }
81  return context;
82}
83 
84// … truncated