forlogic-core 1.8.1 → 1.8.3

package/README.md

@@ -1,14 +1,14 @@
-# 🧱 Projeto atual
+# 🧱 forlogic-core - Guia de Desenvolvimento
 
-**Schema padrão:** `common`
-
-> **Nota sobre schemas:** Temos o schema padrão, mas módulos podem usar schemas diferentes quando necessário para organização ou isolamento de dados. Por exemplo, o módulo de treinamentos usa o schema `trainings`. Você pode especificar o schema no service usando `schemaName: 'nome_do_schema'`.
+> **IMPORTANTE**: Este README é genérico para todos os projetos. Para configurações específicas do projeto (como schema padrão), consulte o arquivo **KNOWLEDGE.md**.
 
 ---
 
 ## 🤖 REGRAS CRÍTICAS
 
-### ⚠️ TOP 3 ERROS
+> **📋 Schema Padrão**: Veja no arquivo **KNOWLEDGE.md** qual é o schema padrão deste projeto específico.
+
+### ⚠️ TOP 4 ERROS MAIS COMUNS
 
 1. **ESQUECER SCHEMA**
 
@@ -16,31 +16,42 @@
 // ❌ ERRADO
 .from('table')
 
-// ✅ CORRETO
-.schema('schema').from('table')
+// ✅ CORRETO (verifique o schema padrão no KNOWLEDGE.md)
+.schema('SEU_SCHEMA').from('table')
 ```
 
 2. **RLS COM SINTAXE INCORRETA**
 
 ```sql
--- ❌ ERRADO
-CREATE POLICY "Users view own" ON schema.table
-FOR SELECT USING (id_user = auth.uid());
+-- ❌ ERRADO: Usar WITH CHECK em SELECT
+CREATE POLICY "Users view own" ON seu_schema.table
+FOR SELECT WITH CHECK (auth.uid() = id_user);
 
--- ✅ CORRETO
-CREATE POLICY "Users view own" ON schema.table
+-- ✅ CORRETO: USING para SELECT
+CREATE POLICY "Users view own" ON seu_schema.table
 FOR SELECT USING (
   ((SELECT auth.jwt()) ->> 'alias'::text) = alias
 );
 ```
 
-3. **NÃO CRIAR ÍNDICES AUTOMATICAMENTE**
+3. **CRIAR POLÍTICAS DELETE**
+
+```sql
+-- ❌ PROIBIDO: Política DELETE
+CREATE POLICY "table_delete" ON seu_schema.table
+FOR DELETE USING (...);
+
+-- ✅ CORRETO: Use soft delete com UPDATE
+ALTER TABLE seu_schema.table ADD COLUMN deleted_at TIMESTAMP WITH TIME ZONE;
+```
+
+4. **CRIAR ÍNDICES AUTOMATICAMENTE**
 
 ```sql
 -- ❌ PROIBIDO criar índices sem aprovação
-CREATE INDEX idx_table_user ON schema.table(id_user);
+CREATE INDEX idx_table_user ON seu_schema.table(id_user);
 
--- ✅ Apenas quando solicitado explicitamente
+-- ✅ Apenas quando solicitado explicitamente e aprovado
 ```
 
 ---
@@ -126,9 +137,13 @@ CREATE INDEX idx_deliverable_status ON deliverables(id_subprocess, is_completed)
 
 ```markdown
 - [ ] A migration NÃO contém NENHUM `CREATE INDEX`?
-- [ ] Se contém, o usuário solicitou EXPLICITAMENTE?
-- [ ] Se contém, foi feita análise de performance (EXPLAIN ANALYZE)?
-- [ ] Se contém, o usuário APROVOU adicionar à migration?
+- [ ] A migration NÃO contém políticas DELETE?
+- [ ] Se contém índice, o usuário solicitou EXPLICITAMENTE?
+- [ ] Se contém índice, foi feita análise de performance (EXPLAIN ANALYZE)?
+- [ ] Se contém índice, o usuário APROVOU adicionar à migration?
+- [ ] Estou usando soft delete ao invés de DELETE físico?
+- [ ] Especifiquei o schema correto em todas as tabelas?
+- [ ] Usei sintaxe correta nas políticas RLS (USING vs WITH CHECK)?
 ```
 
 ### 🔧 Processo Correto Para Criar Índices
@@ -208,7 +223,7 @@ import { Button } from 'forlogic-core'
 // Formulários
 Button, Input, Textarea, Label, Select, SelectContent,
 SelectItem, SelectTrigger, SelectValue, Checkbox, RadioGroup,
-RadioGroupItem, Switch, CreatableCombobox
+RadioGroupItem, Switch, CreatableCombobox, EntitySelect, MultiSelect
 
 // Layout
 Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle
@@ -462,6 +477,183 @@ export function DepartmentSelect(props: DepartmentSelectProps) {
 
 ---
 
+#### MultiSelect - Seleção Múltipla Genérica
+
+**Quando usar?**
+
+Use o `MultiSelect` para permitir seleção múltipla de itens com busca inteligente e exibição em badges:
+
+- ✅ Seleção de múltiplos processos, colaboradores, treinamentos, etc
+- ✅ Busca com normalização (remove acentos, case-insensitive)
+- ✅ Badges interativos para remover seleções
+- ✅ Estados de loading e erro inclusos
+- ✅ Limite de badges exibidos com contador (+N)
+
+**Uso Básico:**
+
+```typescript
+import { MultiSelect } from 'forlogic-core';
+import { useTrainings } from './trainingService';
+
+function MyForm() {
+  const { data: trainings = [], isLoading, error } = useTrainings();
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+
+  return (
+    <MultiSelect
+      value={selectedIds}
+      onChange={setSelectedIds}
+      options={trainings}
+      isLoading={isLoading}
+      error={error}
+      getOptionValue={(training) => training.id}
+      getOptionLabel={(training) => training.title}
+      placeholder="Selecione treinamentos..."
+      label="Treinamentos"
+      icon={GraduationCap}
+    />
+  );
+}
+```
+
+**Props do MultiSelect:**
+
+| Prop | Tipo | Obrigatório | Descrição |
+| ---- | ---- | ----------- | --------- |
+| `options` | `T[]` | ✅ | Array de itens disponíveis |
+| `value` | `string[]` | ❌ | Array de IDs selecionados |
+| `onChange` | `(value: string[]) => void` | ❌ | Callback quando seleção muda |
+| `getOptionValue` | `(option: T) => string` | ❌ | Extrai valor único (default: `opt.value`) |
+| `getOptionLabel` | `(option: T) => string` | ❌ | Extrai label exibido (default: `opt.label`) |
+| `placeholder` | `string` | ❌ | Placeholder quando nada selecionado |
+| `label` | `string` | ❌ | Label do campo |
+| `icon` | `LucideIcon` | ❌ | Ícone exibido no trigger |
+| `emptyMessage` | `string` | ❌ | Mensagem quando não há itens |
+| `searchPlaceholder` | `string` | ❌ | Placeholder da busca |
+| `disabled` | `boolean` | ❌ | Desabilita o componente |
+| `required` | `boolean` | ❌ | Adiciona asterisco vermelho ao label |
+| `isLoading` | `boolean` | ❌ | Exibe skeleton durante carregamento |
+| `error` | `string \| boolean` | ❌ | Mensagem de erro |
+| `className` | `string` | ❌ | Classes CSS adicionais |
+| `sortOptions` | `boolean` | ❌ | Ordena alfabeticamente (default: true) |
+| `maxDisplayedBadges` | `number` | ❌ | Limite de badges visíveis |
+| `onOpen` | `() => void` | ❌ | Callback ao abrir popover |
+| `onClose` | `() => void` | ❌ | Callback ao fechar popover |
+
+**Exemplo com Objetos Customizados:**
+
+```typescript
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  department: string;
+}
+
+<MultiSelect<User>
+  options={users}
+  value={selectedUserIds}
+  onChange={setSelectedUserIds}
+  getOptionValue={(user) => user.id}
+  getOptionLabel={(user) => `${user.name} - ${user.department}`}
+  placeholder="Selecione colaboradores..."
+  label="Colaboradores"
+  icon={Users}
+  required
+/>
+```
+
+**Limite de Badges Exibidos:**
+
+```typescript
+<MultiSelect
+  options={items}
+  value={selected}
+  onChange={setSelected}
+  maxDisplayedBadges={3}  // Exibe: [Badge 1] [Badge 2] [Badge 3] [+5]
+  placeholder="Selecione itens..."
+/>
+```
+
+**Integração com React Hook Form:**
+
+```typescript
+import { useForm } from 'react-hook-form';
+import { MultiSelect } from 'forlogic-core';
+
+function MyForm() {
+  const { control } = useForm();
+  const { data: categories = [] } = useCategories();
+
+  return (
+    <FormField
+      control={control}
+      name="category_ids"
+      render={({ field }) => (
+        <FormItem>
+          <FormControl>
+            <MultiSelect
+              value={field.value}
+              onChange={field.onChange}
+              options={categories}
+              getOptionValue={(c) => c.id}
+              getOptionLabel={(c) => c.name}
+              placeholder="Selecione categorias..."
+              label="Categorias"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
+```
+
+**Usando em Formulários CRUD:**
+
+Para usar o `MultiSelect` em formulários CRUD gerados automaticamente, crie um wrapper e use `type: 'custom'`:
+
+```typescript
+// 1. Criar wrapper do MultiSelect
+// src/components/TrainingMultiSelect.tsx
+import { MultiSelect } from 'forlogic-core';
+import { useTrainings } from '@/trainings/trainingService';
+import { GraduationCap } from 'lucide-react';
+
+export function TrainingMultiSelect({ value, onChange, disabled, error }: any) {
+  const { data: trainings = [], isLoading } = useTrainings();
+
+  return (
+    <MultiSelect
+      value={value || []}
+      onChange={onChange}
+      options={trainings}
+      isLoading={isLoading}
+      error={error}
+      getOptionValue={(t) => t.id}
+      getOptionLabel={(t) => t.title}
+      disabled={disabled}
+      placeholder="Selecione treinamentos..."
+      icon={GraduationCap}
+    />
+  );
+}
+
+// 2. Usar na configuração do formulário com type: 'custom'
+import { TrainingMultiSelect } from './components/TrainingMultiSelect';
+
+{
+  name: 'training_ids',
+  label: 'Treinamentos',
+  type: 'custom' as const,
+  component: TrainingMultiSelect,
+  required: true
+}
+```
+
+---
+
 ### 🎨 Campos Customizados no BaseForm
 
 O `BaseForm` suporta campos totalmente customizados através do tipo `'custom'`, permitindo usar **qualquer componente React** como campo de formulário.
@@ -3810,11 +4002,42 @@ const config = useMemo((): CrudPageConfig<Process> => ({
 
 Quando `enableBulkActions: true`, as seguintes ações ficam disponíveis automaticamente:
 
-- ✅ **Deletar em lote**: Deleta múltiplos itens selecionados (usa a mesma função do delete individual)
 - ✅ **Checkbox "Selecionar Todos"**: No header da tabela para selecionar/deselecionar todos os itens da página
 - ✅ **Indicador Visual**: Linhas/cards selecionados têm background destacado
 - ✅ **Barra de Ações**: Aparece no topo quando há itens selecionados
 
+**⚠️ IMPORTANTE - Botão "Remover" Padrão:**
+
+- ❌ **Se você definir `bulkActions` customizadas**, o botão "Remover" padrão **NÃO** será adicionado automaticamente
+- ✅ **Se você NÃO definir `bulkActions`**, um botão "Remover" padrão será adicionado automaticamente
+
+```typescript
+// ❌ Duplicação: Botão padrão + custom "Remover"
+bulkActions: [
+  {
+    label: 'Remover',  // ← Vai aparecer 2x (padrão + este)
+    icon: Trash2,
+    variant: 'destructive',
+    action: async (items) => { /* ... */ }
+  }
+]
+
+// ✅ Correto: Apenas o padrão
+enableBulkActions: true,
+// Não definir bulkActions → Usa botão "Remover" padrão
+
+// ✅ Correto: Apenas ações customizadas (sem padrão)
+bulkActions: [
+  {
+    label: 'Remover',
+    icon: Trash2,
+    variant: 'destructive',
+    action: async (items) => { /* ... */ }
+  }
+]
+```
+
+
 ### **Ações Customizadas**
 
 Você pode adicionar ações customizadas além do delete padrão:

package/dist/README.md

@@ -1,14 +1,14 @@
-# 🧱 Projeto atual
+# 🧱 forlogic-core - Guia de Desenvolvimento
 
-**Schema padrão:** `common`
-
-> **Nota sobre schemas:** Temos o schema padrão, mas módulos podem usar schemas diferentes quando necessário para organização ou isolamento de dados. Por exemplo, o módulo de treinamentos usa o schema `trainings`. Você pode especificar o schema no service usando `schemaName: 'nome_do_schema'`.
+> **IMPORTANTE**: Este README é genérico para todos os projetos. Para configurações específicas do projeto (como schema padrão), consulte o arquivo **KNOWLEDGE.md**.
 
 ---
 
 ## 🤖 REGRAS CRÍTICAS
 
-### ⚠️ TOP 3 ERROS
+> **📋 Schema Padrão**: Veja no arquivo **KNOWLEDGE.md** qual é o schema padrão deste projeto específico.
+
+### ⚠️ TOP 4 ERROS MAIS COMUNS
 
 1. **ESQUECER SCHEMA**
 
@@ -16,31 +16,42 @@
 // ❌ ERRADO
 .from('table')
 
-// ✅ CORRETO
-.schema('schema').from('table')
+// ✅ CORRETO (verifique o schema padrão no KNOWLEDGE.md)
+.schema('SEU_SCHEMA').from('table')
 ```
 
 2. **RLS COM SINTAXE INCORRETA**
 
 ```sql
--- ❌ ERRADO
-CREATE POLICY "Users view own" ON schema.table
-FOR SELECT USING (id_user = auth.uid());
+-- ❌ ERRADO: Usar WITH CHECK em SELECT
+CREATE POLICY "Users view own" ON seu_schema.table
+FOR SELECT WITH CHECK (auth.uid() = id_user);
 
--- ✅ CORRETO
-CREATE POLICY "Users view own" ON schema.table
+-- ✅ CORRETO: USING para SELECT
+CREATE POLICY "Users view own" ON seu_schema.table
 FOR SELECT USING (
   ((SELECT auth.jwt()) ->> 'alias'::text) = alias
 );
 ```
 
-3. **NÃO CRIAR ÍNDICES AUTOMATICAMENTE**
+3. **CRIAR POLÍTICAS DELETE**
+
+```sql
+-- ❌ PROIBIDO: Política DELETE
+CREATE POLICY "table_delete" ON seu_schema.table
+FOR DELETE USING (...);
+
+-- ✅ CORRETO: Use soft delete com UPDATE
+ALTER TABLE seu_schema.table ADD COLUMN deleted_at TIMESTAMP WITH TIME ZONE;
+```
+
+4. **CRIAR ÍNDICES AUTOMATICAMENTE**
 
 ```sql
 -- ❌ PROIBIDO criar índices sem aprovação
-CREATE INDEX idx_table_user ON schema.table(id_user);
+CREATE INDEX idx_table_user ON seu_schema.table(id_user);
 
--- ✅ Apenas quando solicitado explicitamente
+-- ✅ Apenas quando solicitado explicitamente e aprovado
 ```
 
 ---
@@ -126,9 +137,13 @@ CREATE INDEX idx_deliverable_status ON deliverables(id_subprocess, is_completed)
 
 ```markdown
 - [ ] A migration NÃO contém NENHUM `CREATE INDEX`?
-- [ ] Se contém, o usuário solicitou EXPLICITAMENTE?
-- [ ] Se contém, foi feita análise de performance (EXPLAIN ANALYZE)?
-- [ ] Se contém, o usuário APROVOU adicionar à migration?
+- [ ] A migration NÃO contém políticas DELETE?
+- [ ] Se contém índice, o usuário solicitou EXPLICITAMENTE?
+- [ ] Se contém índice, foi feita análise de performance (EXPLAIN ANALYZE)?
+- [ ] Se contém índice, o usuário APROVOU adicionar à migration?
+- [ ] Estou usando soft delete ao invés de DELETE físico?
+- [ ] Especifiquei o schema correto em todas as tabelas?
+- [ ] Usei sintaxe correta nas políticas RLS (USING vs WITH CHECK)?
 ```
 
 ### 🔧 Processo Correto Para Criar Índices
@@ -208,7 +223,7 @@ import { Button } from 'forlogic-core'
 // Formulários
 Button, Input, Textarea, Label, Select, SelectContent,
 SelectItem, SelectTrigger, SelectValue, Checkbox, RadioGroup,
-RadioGroupItem, Switch, CreatableCombobox
+RadioGroupItem, Switch, CreatableCombobox, EntitySelect, MultiSelect
 
 // Layout
 Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle
@@ -462,6 +477,183 @@ export function DepartmentSelect(props: DepartmentSelectProps) {
 
 ---
 
+#### MultiSelect - Seleção Múltipla Genérica
+
+**Quando usar?**
+
+Use o `MultiSelect` para permitir seleção múltipla de itens com busca inteligente e exibição em badges:
+
+- ✅ Seleção de múltiplos processos, colaboradores, treinamentos, etc
+- ✅ Busca com normalização (remove acentos, case-insensitive)
+- ✅ Badges interativos para remover seleções
+- ✅ Estados de loading e erro inclusos
+- ✅ Limite de badges exibidos com contador (+N)
+
+**Uso Básico:**
+
+```typescript
+import { MultiSelect } from 'forlogic-core';
+import { useTrainings } from './trainingService';
+
+function MyForm() {
+  const { data: trainings = [], isLoading, error } = useTrainings();
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+
+  return (
+    <MultiSelect
+      value={selectedIds}
+      onChange={setSelectedIds}
+      options={trainings}
+      isLoading={isLoading}
+      error={error}
+      getOptionValue={(training) => training.id}
+      getOptionLabel={(training) => training.title}
+      placeholder="Selecione treinamentos..."
+      label="Treinamentos"
+      icon={GraduationCap}
+    />
+  );
+}
+```
+
+**Props do MultiSelect:**
+
+| Prop | Tipo | Obrigatório | Descrição |
+| ---- | ---- | ----------- | --------- |
+| `options` | `T[]` | ✅ | Array de itens disponíveis |
+| `value` | `string[]` | ❌ | Array de IDs selecionados |
+| `onChange` | `(value: string[]) => void` | ❌ | Callback quando seleção muda |
+| `getOptionValue` | `(option: T) => string` | ❌ | Extrai valor único (default: `opt.value`) |
+| `getOptionLabel` | `(option: T) => string` | ❌ | Extrai label exibido (default: `opt.label`) |
+| `placeholder` | `string` | ❌ | Placeholder quando nada selecionado |
+| `label` | `string` | ❌ | Label do campo |
+| `icon` | `LucideIcon` | ❌ | Ícone exibido no trigger |
+| `emptyMessage` | `string` | ❌ | Mensagem quando não há itens |
+| `searchPlaceholder` | `string` | ❌ | Placeholder da busca |
+| `disabled` | `boolean` | ❌ | Desabilita o componente |
+| `required` | `boolean` | ❌ | Adiciona asterisco vermelho ao label |
+| `isLoading` | `boolean` | ❌ | Exibe skeleton durante carregamento |
+| `error` | `string \| boolean` | ❌ | Mensagem de erro |
+| `className` | `string` | ❌ | Classes CSS adicionais |
+| `sortOptions` | `boolean` | ❌ | Ordena alfabeticamente (default: true) |
+| `maxDisplayedBadges` | `number` | ❌ | Limite de badges visíveis |
+| `onOpen` | `() => void` | ❌ | Callback ao abrir popover |
+| `onClose` | `() => void` | ❌ | Callback ao fechar popover |
+
+**Exemplo com Objetos Customizados:**
+
+```typescript
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  department: string;
+}
+
+<MultiSelect<User>
+  options={users}
+  value={selectedUserIds}
+  onChange={setSelectedUserIds}
+  getOptionValue={(user) => user.id}
+  getOptionLabel={(user) => `${user.name} - ${user.department}`}
+  placeholder="Selecione colaboradores..."
+  label="Colaboradores"
+  icon={Users}
+  required
+/>
+```
+
+**Limite de Badges Exibidos:**
+
+```typescript
+<MultiSelect
+  options={items}
+  value={selected}
+  onChange={setSelected}
+  maxDisplayedBadges={3}  // Exibe: [Badge 1] [Badge 2] [Badge 3] [+5]
+  placeholder="Selecione itens..."
+/>
+```
+
+**Integração com React Hook Form:**
+
+```typescript
+import { useForm } from 'react-hook-form';
+import { MultiSelect } from 'forlogic-core';
+
+function MyForm() {
+  const { control } = useForm();
+  const { data: categories = [] } = useCategories();
+
+  return (
+    <FormField
+      control={control}
+      name="category_ids"
+      render={({ field }) => (
+        <FormItem>
+          <FormControl>
+            <MultiSelect
+              value={field.value}
+              onChange={field.onChange}
+              options={categories}
+              getOptionValue={(c) => c.id}
+              getOptionLabel={(c) => c.name}
+              placeholder="Selecione categorias..."
+              label="Categorias"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
+```
+
+**Usando em Formulários CRUD:**
+
+Para usar o `MultiSelect` em formulários CRUD gerados automaticamente, crie um wrapper e use `type: 'custom'`:
+
+```typescript
+// 1. Criar wrapper do MultiSelect
+// src/components/TrainingMultiSelect.tsx
+import { MultiSelect } from 'forlogic-core';
+import { useTrainings } from '@/trainings/trainingService';
+import { GraduationCap } from 'lucide-react';
+
+export function TrainingMultiSelect({ value, onChange, disabled, error }: any) {
+  const { data: trainings = [], isLoading } = useTrainings();
+
+  return (
+    <MultiSelect
+      value={value || []}
+      onChange={onChange}
+      options={trainings}
+      isLoading={isLoading}
+      error={error}
+      getOptionValue={(t) => t.id}
+      getOptionLabel={(t) => t.title}
+      disabled={disabled}
+      placeholder="Selecione treinamentos..."
+      icon={GraduationCap}
+    />
+  );
+}
+
+// 2. Usar na configuração do formulário com type: 'custom'
+import { TrainingMultiSelect } from './components/TrainingMultiSelect';
+
+{
+  name: 'training_ids',
+  label: 'Treinamentos',
+  type: 'custom' as const,
+  component: TrainingMultiSelect,
+  required: true
+}
+```
+
+---
+
 ### 🎨 Campos Customizados no BaseForm
 
 O `BaseForm` suporta campos totalmente customizados através do tipo `'custom'`, permitindo usar **qualquer componente React** como campo de formulário.
@@ -3810,11 +4002,42 @@ const config = useMemo((): CrudPageConfig<Process> => ({
 
 Quando `enableBulkActions: true`, as seguintes ações ficam disponíveis automaticamente:
 
-- ✅ **Deletar em lote**: Deleta múltiplos itens selecionados (usa a mesma função do delete individual)
 - ✅ **Checkbox "Selecionar Todos"**: No header da tabela para selecionar/deselecionar todos os itens da página
 - ✅ **Indicador Visual**: Linhas/cards selecionados têm background destacado
 - ✅ **Barra de Ações**: Aparece no topo quando há itens selecionados
 
+**⚠️ IMPORTANTE - Botão "Remover" Padrão:**
+
+- ❌ **Se você definir `bulkActions` customizadas**, o botão "Remover" padrão **NÃO** será adicionado automaticamente
+- ✅ **Se você NÃO definir `bulkActions`**, um botão "Remover" padrão será adicionado automaticamente
+
+```typescript
+// ❌ Duplicação: Botão padrão + custom "Remover"
+bulkActions: [
+  {
+    label: 'Remover',  // ← Vai aparecer 2x (padrão + este)
+    icon: Trash2,
+    variant: 'destructive',
+    action: async (items) => { /* ... */ }
+  }
+]
+
+// ✅ Correto: Apenas o padrão
+enableBulkActions: true,
+// Não definir bulkActions → Usa botão "Remover" padrão
+
+// ✅ Correto: Apenas ações customizadas (sem padrão)
+bulkActions: [
+  {
+    label: 'Remover',
+    icon: Trash2,
+    variant: 'destructive',
+    action: async (items) => { /* ... */ }
+  }
+]
+```
+
+
 ### **Ações Customizadas**
 
 Você pode adicionar ações customizadas além do delete padrão: