ActionsMenuButton

ActionsMenuButton renderiza un ícono de puntos verticales (moreVertical) que, al hacer clic, abre un popover flotante con una lista de botones. Cada elemento del menú puede tener su propia etiqueta, ícono, estilo y manejador de clic. Úsalo para menús de acciones a nivel de fila en tablas, listas o tarjetas.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | menuItems | MenuItem[] | Sí | — | Array de elementos a mostrar en el popover. Ver la definición de MenuItem a continuación. | | onItemSelect | (actionName: string) => void | No | — | Manejador global llamado con el name del elemento cuando se selecciona uno que no tiene su propio onClick. | | buttonStyles | React.CSSProperties | No | — | Estilos en línea aplicados al botón ícono disparador. | | popoverStyles | React.CSSProperties | No | — | Estilos en línea aplicados al contenedor del popover. |

MenuItem

Cada objeto en el array menuItems tiene la siguiente forma:

| Campo | Tipo | Requerido | Descripción | |-------|------|-----------|-------------| | name | string | Sí | Clave única que identifica el elemento. Se pasa a los manejadores de clic. | | label | string | Sí | Texto legible que se muestra en el menú. | | icon | string | No | Identificador del ícono que se muestra antes de la etiqueta. | | style | React.CSSProperties | No | Estilos en línea aplicados al botón de este elemento específico. | | onClick | (actionName: string) => void | No | Manejador de clic por elemento. Tiene prioridad sobre onItemSelect. |

Uso

Básico

import ActionsMenuButton from '@/components/buttons/ActionsMenuButton';

export default function Example() {
  return (
    <ActionsMenuButton
      menuItems={[
        { name: 'edit', label: 'Editar', icon: 'edit' },
        { name: 'delete', label: 'Eliminar', icon: 'trash' },
      ]}
      onItemSelect={(name) => console.log('Seleccionado:', name)}
    />
  );
}

Con manejadores por elemento

import ActionsMenuButton from '@/components/buttons/ActionsMenuButton';

export default function Example({ id }: { id: string }) {
  return (
    <ActionsMenuButton
      menuItems={[
        {
          name: 'edit',
          label: 'Editar',
          icon: 'edit',
          onClick: () => console.log('Editar', id),
        },
        {
          name: 'delete',
          label: 'Eliminar',
          icon: 'trash',
          style: { color: 'red' },
          onClick: () => console.log('Eliminar', id),
        },
      ]}
    />
  );
}