componente · @solu30/ui-kit/feedback

DropdownMenu

Menú que se despliega desde un disparador, con ítems, separadores e ítems de tilde.

77 sitios de import en 8 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

TheCharterPanel
carlosmartinpavon
cmp-packages
dietaly
gestorsalon
luigi
raquetea
zentrya

El componente, montado

Cargando el espécimen…

Éste es el conjunto completo. Abajo, los mismos casos por separado, cada uno con su código.

Cómo se usa

import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@solu30/ui-kit/feedback'

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="ghost" size="sm">
      Acciones
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Ver la ficha</DropdownMenuItem>
    <DropdownMenuItem>Descargar el contrato</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Anatomía

Las partes que componen DropdownMenu se importan del mismo subpath. Sueltas no significan nada: se montan siempre dentro de su padre.

DropdownMenu
├── DropdownMenuCheckboxItem
├── DropdownMenuContent
├── DropdownMenuGroup
├── DropdownMenuItem
├── DropdownMenuLabel
├── DropdownMenuSeparator
└── DropdownMenuTrigger

Props

4 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
open	opcional	`boolean`	—
onOpenChange	opcional	`(open: boolean) => void`	—
modal	opcional	`boolean`	Pass modal={false} when nested inside a Sheet/Dialog to avoid double scroll-lock.
children	sí	`ReactNode`	—

Acciones

Para un menú de acciones que se ejecutan y cierran el menú al tocarlas — editar, duplicar, eliminar sobre una fila o una tarjeta.

Cargando el espécimen…

export function DropdownMenuAcciones() {
  const [lastAction, setLastAction] = useState<string | null>(null)

  return (
    <>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <TriggerButton>Pedido #482 ⋮</TriggerButton>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
          <DropdownMenuLabel>Acciones</DropdownMenuLabel>
          <DropdownMenuItem onClick={() => setLastAction('Editar pedido')}>Editar pedido</DropdownMenuItem>
          <DropdownMenuItem onClick={() => setLastAction('Duplicar pedido')}>Duplicar pedido</DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem onClick={() => setLastAction('Eliminar pedido')}>Eliminar pedido</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
      {lastAction && <p className="text-[11px] text-content/50">última acción: {lastAction}</p>}
    </>
  )
}

De specimens/feedback.tsx · DropdownMenuAcciones: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

Casilleros

Cuando el menú controla filtros o preferencias que el usuario alterna sin cerrar el menú en cada click — el ítem con casillero en vez del ítem simple.

Cargando el espécimen…

export function DropdownMenuCheckboxes() {
  const [showLowStock, setShowLowStock] = useState(true)
  const [showExpired, setShowExpired] = useState(false)

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <TriggerButton>Filtrar stock ⋮</TriggerButton>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuLabel>Mostrar</DropdownMenuLabel>
        <DropdownMenuCheckboxItem checked={showLowStock} onCheckedChange={setShowLowStock}>
          Stock bajo
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem checked={showExpired} onCheckedChange={setShowExpired}>
          Vencidos
        </DropdownMenuCheckboxItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

De specimens/feedback.tsx · DropdownMenuCheckboxes: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

Ejemplo del paquete

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <IconButton icon={MoreVertical} tooltip="Acciones" />
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end">
    <DropdownMenuLabel>Reserva</DropdownMenuLabel>
    <DropdownMenuItem onClick={editar}>Editar</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem onClick={borrar} className="text-ui-error-text">Borrar</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.