Context Menu

1"use client";
2 
3import "./context-menu.css";
4import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
5import type React from "react";
6import { cn } from "tailwind-variants";
7 
8import { ContextMenuContext, useContextMenuContext } from "./context-menu.context";
9import { contextMenuVariants, type ContextMenuVariants } from "./context-menu.variants";
10 
11export type ContextMenuProps = ContextMenuVariants &
12  React.ComponentProps<typeof BaseContextMenu.Root>;
13 
14export const ContextMenuRoot = ({ children, size, ...props }: ContextMenuProps) => {
15  const slots = contextMenuVariants({ size });
16 
17  return (
18    <ContextMenuContext.Provider value={{ slots }}>
19      <BaseContextMenu.Root {...props}>{children}</BaseContextMenu.Root>
20    </ContextMenuContext.Provider>
21  );
22};
23 
24export type ContextMenuTriggerProps = React.ComponentProps<typeof BaseContextMenu.Trigger>;
25 
26export const ContextMenuTrigger = ({ className, ...props }: ContextMenuTriggerProps) => {
27  const { slots } = useContextMenuContext();
28  return <BaseContextMenu.Trigger className={cn(slots.trigger(), className)} {...props} />;
29};
30 
31export type ContextMenuPortalProps = React.ComponentProps<typeof BaseContextMenu.Portal>;
32 
33export const ContextMenuPortal = (props: ContextMenuPortalProps) => {
34  return <BaseContextMenu.Portal {...props} />;
35};
36 
37export type ContextMenuPositionerProps = React.ComponentProps<typeof BaseContextMenu.Positioner>;
38 
39export const ContextMenuPositioner = ({ className, ...props }: ContextMenuPositionerProps) => {
40  const { slots } = useContextMenuContext();
41  return <BaseContextMenu.Positioner className={cn(slots.positioner(), className)} {...props} />;
42};
43 
44export type ContextMenuPopupProps = React.ComponentProps<typeof BaseContextMenu.Popup>;
45 
46export const ContextMenuPopup = ({ className, ...props }: ContextMenuPopupProps) => {
47  const { slots } = useContextMenuContext();
48  return <BaseContextMenu.Popup className={cn(slots.popup(), className)} {...props} />;
49};
50 
51export type ContextMenuItemProps = React.ComponentProps<typeof BaseContextMenu.Item>;
52 
53export const ContextMenuItem = ({ className, ...props }: ContextMenuItemProps) => {
54  const { slots } = useContextMenuContext();
55  return <BaseContextMenu.Item className={cn(slots.item(), className)} {...props} />;
56};
57 
58export type ContextMenuSeparatorProps = React.ComponentProps<typeof BaseContextMenu.Separator>;
59 
60export const ContextMenuSeparator = ({ className, ...props }: ContextMenuSeparatorProps) => {
61// … truncated