Shadcn Context Menu for React and Tailwind

"use client";

import {
  Menu as ArkMenu,
  useMenu as useArkMenu,
  useMenuContext as useArkMenuContext,
  useMenuItemContext as useArkMenuItemContext,
} from "@ark-ui/react/menu";
import type React from "react";
import { cn } from "@/lib/utils";
import {
  Menu,
  MenuArrow,
  MenuCheckboxItem,
  MenuContent,
  MenuGroup,
  MenuGroupLabel,
  MenuItem,
  MenuQuickItem,
  MenuRadioGroup,
  MenuRadioItem,
  MenuSeparator,
  MenuShortcut,
  MenuSub,
  MenuSubContent,
  MenuSubTrigger,
} from "@/components/ui/menu";

export const useContextMenu = useArkMenu;
export const useContextMenuContext = useArkMenuContext;
export const useContextMenuItemContext = useArkMenuItemContext;

export const ContextMenuContext: typeof ArkMenu.Context = ArkMenu.Context;
export const ContextMenuItemContext: typeof ArkMenu.ItemContext =
  ArkMenu.ItemContext;

export const ContextMenu = (props: React.ComponentProps<typeof Menu>) => {
  const { positioning = { placement: "bottom-start" }, ...rest } = props;

  return <Menu data-slot="context-menu" positioning={positioning} {...rest} />;
};

export const ContextMenuRootProvider = (
  props: React.ComponentProps<typeof ArkMenu.RootProvider>
) => {
  const { lazyMount = true, unmountOnExit = true, ...rest } = props;

  return (
    <ArkMenu.RootProvider
      data-slot="context-menu"
      lazyMount={lazyMount}
      unmountOnExit={unmountOnExit}
      {...rest}
    />
  );
};

export const ContextMenuTrigger = (
  props: React.ComponentProps<typeof ArkMenu.ContextTrigger>
) => {
  const { children, className, ...rest } = props;
  const child =
    Array.isArray(children) && children.length === 1 ? children[0] : children;

  return (
    <ArkMenu.ContextTrigger
      className={cn("cursor-default", className)}
      data-slot="context-menu-trigger"
      {...rest}
    >
      {child}
    </ArkMenu.ContextTrigger>
  );
};

export const ContextMenuContent = (
  props: React.ComponentProps<typeof MenuContent>
) => <MenuContent data-slot="context-menu-content" {...props} />;

export const ContextMenuGroup = (
  props: React.ComponentProps<typeof MenuGroup>
) => <MenuGroup data-slot="context-menu-group" {...props} />;

export const ContextMenuGroupLabel = (
  props: React.ComponentProps<typeof MenuGroupLabel>
) => <MenuGroupLabel data-slot="context-menu-group-label" {...props} />;

export const ContextMenuSeparator = (
  props: React.ComponentProps<typeof MenuSeparator>
) => <MenuSeparator data-slot="context-menu-separator" {...props} />;

export const ContextMenuItem = (
  props: React.ComponentProps<typeof MenuItem>
) => <MenuItem data-slot="context-menu-item" {...props} />;

export const ContextMenuQuickItem = (
  props: React.ComponentProps<typeof MenuQuickItem>
) => <MenuQuickItem data-slot="context-menu-quick-item" {...props} />;

export const ContextMenuCheckboxItem = (
  props: React.ComponentProps<typeof MenuCheckboxItem>
) => <MenuCheckboxItem data-slot="context-menu-checkbox-item" {...props} />;

export const ContextMenuRadioGroup = (
  props: React.ComponentProps<typeof MenuRadioGroup>
) => <MenuRadioGroup data-slot="context-menu-radio-group" {...props} />;

export const ContextMenuRadioItem = (
  props: React.ComponentProps<typeof MenuRadioItem>
) => <MenuRadioItem data-slot="context-menu-radio-item" {...props} />;

export const ContextMenuSub = (props: React.ComponentProps<typeof MenuSub>) => (
  <MenuSub data-slot="context-menu-sub" {...props} />
);

export const ContextMenuSubContent = (
  props: React.ComponentProps<typeof MenuSubContent>
) => <MenuSubContent data-slot="context-menu-sub-content" {...props} />;

export const ContextMenuSubTrigger = (
  props: React.ComponentProps<typeof MenuSubTrigger>
) => <MenuSubTrigger data-slot="context-menu-sub-trigger" {...props} />;

export const ContextMenuShortcut = (
  props: React.ComponentProps<typeof MenuShortcut>
) => <MenuShortcut data-slot="context-menu-shortcut" {...props} />;

export const ContextMenuArrow = (
  props: React.ComponentProps<typeof MenuArrow>
) => <MenuArrow data-slot="context-menu-arrow" {...props} />;