Context menu

Atajo avanzado sobre una fila o celda. Siempre duplicado en un menú visible.

Primitiva disponible en la biblioteca, sin uso directo en la app actual. Menú de click derecho sobre una fila o celda. Es un atajo avanzado: todo lo que tiene tiene que estar también en un menú visible. Los ítems son los de Dropdown menu.

Instalación

shadcn

npx shadcn@latest add https://design.moodinary.com/r/context-menu.json

import

import { ContextMenu, ContextMenuContent, ContextMenuTrigger } from "@moodinary/ui/components/context-menu";

Ejemplos

Acciones del día sobre la celda de un equipo.

Click derecho (o Shift+F10) sobre esta celda de 4.º A · martes

Código

cell.tsx

import {
	ContextMenu,
	ContextMenuContent,
	ContextMenuTrigger,
} from "@moodinary/ui/components/context-menu";
import {
	DropdownMenuItem,
	DropdownMenuSeparator,
	DropdownMenuShortcut,
} from "@moodinary/ui/components/dropdown-menu";

export default function ContextMenuCell() {
	return (
		<ContextMenu>
			<ContextMenuTrigger
				aria-label="Celda de 4.º A, martes. Click derecho o Shift+F10 para ver opciones"
				className="grid min-h-24 w-full max-w-md place-items-center rounded-[10px] border border-line-2 border-dashed bg-bg-soft px-4 text-center text-[13px] text-ink-2 focus-visible:outline-2 focus-visible:outline-org"
				tabIndex={0}
			>
				Click derecho (o Shift+F10) sobre esta celda de 4.º A · martes
			</ContextMenuTrigger>
			<ContextMenuContent>
				<DropdownMenuItem>Ver respuestas del día</DropdownMenuItem>
				<DropdownMenuItem>Crear acción para este día</DropdownMenuItem>
				<DropdownMenuItem>Agregar evento</DropdownMenuItem>
				<DropdownMenuSeparator />
				<DropdownMenuItem>
					Copiar valor
					<DropdownMenuShortcut>⌘C</DropdownMenuShortcut>
				</DropdownMenuItem>
			</ContextMenuContent>
		</ContextMenu>
	);
}

Props

ContextMenuContent

Prop	Tipo	Default	Descripción
className	string	-	Ancho por defecto 210 px.

ContextMenuTrigger

Prop	Tipo	Default	Descripción
className	string	-	El área que responde al click derecho.

Cuándo sí y cuándo no

Hacé

Duplicá cada acción en un menú ⋯ o botón visible.
Usá ítems de Dropdown menu para que se vean igual.
Mantenelo corto y ligado a lo que se clickeó.

Evitá

No pongas acciones que solo existen acá.
No lo uses en el formulario público.
No reemplaces el menú del navegador en texto editable.

Abre con Shift+F10 o la tecla de menú.
Flechas navegan y Esc cierra.