forlogic-core 1.8.11 → 1.8.12

package/README.md

@@ -652,6 +652,272 @@ import { TrainingMultiSelect } from './components/TrainingMultiSelect';
 }
 ```
 
+#### ⚠️ MultiSelect dentro de Dialog
+
+**Problema Comum:**
+
+Quando o `MultiSelect` é usado dentro de um `Dialog`, o popover pode ser cortado ou ter problemas de scroll.
+
+**Solução:**
+
+Use a prop `popoverContainer` para portalizar o popover para dentro do próprio `DialogContent`:
+
+```typescript
+import { useState, useRef, useCallback } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogTrigger, Button, MultiSelect } from 'forlogic-core';
+
+function MyComponent() {
+  const [selected, setSelected] = useState<string[]>([]);
+  const [open, setOpen] = useState(false);
+  const dialogContentRef = useRef<HTMLDivElement>(null);
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+
+  // useCallback para capturar a ref do DialogContent
+  const setDialogContentRef = useCallback((node: HTMLDivElement | null) => {
+    dialogContentRef.current = node;
+    setPortalContainer(node);
+  }, []);
+
+  const options = [
+    { id: '1', name: 'React' },
+    { id: '2', name: 'Vue' },
+    { id: '3', name: 'Angular' },
+    // ... mais opções
+  ];
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button>Abrir MultiSelect em Dialog</Button>
+      </DialogTrigger>
+      <DialogContent ref={setDialogContentRef} className="max-h-[90vh] overflow-visible">
+        <DialogHeader>
+          <DialogTitle>Selecione Frameworks</DialogTitle>
+          <DialogDescription>
+            O Popover é portalizado para o próprio Dialog.Content e o conteúdo rola em um wrapper interno,
+            evitando corte e permitindo scroll desde a primeira abertura.
+          </DialogDescription>
+        </DialogHeader>
+        {/* Wrapper interno com scroll - permite que DialogContent tenha overflow-visible */}
+        <div className="mt-4 max-h-[60vh] overflow-auto pr-1">
+          <MultiSelect
+            options={options}
+            value={selected}
+            onChange={setSelected}
+            getOptionValue={(opt) => opt.id}
+            getOptionLabel={(opt) => opt.name}
+            placeholder="Selecione frameworks..."
+            label="Frameworks"
+            popoverContainer={portalContainer}
+            disabled={!portalContainer}
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+```
+
+**Pontos-chave:**
+
+1. **useCallback + useState**: Captura a ref do `DialogContent` e guarda no state `portalContainer`
+2. **overflow-visible**: Permite que o popover seja visível fora do dialog
+3. **Wrapper interno com scroll**: Um `div` interno com `overflow-auto` para scroll do conteúdo
+4. **popoverContainer**: Passa o container para o `MultiSelect` para portalizar o popover
+5. **disabled={!portalContainer}**: Desabilita até o container estar disponível (evita erros na primeira renderização)
+
+---
+
+#### 🔧 MultiSelect em BaseForm/createCrudPage
+
+**Situação:**
+
+Quando você usa `createCrudPage` ou `BaseForm` diretamente, o Dialog é criado automaticamente e você não tem acesso direto à ref do `DialogContent`.
+
+**Solução Automática:**
+
+O `BaseForm` agora passa **automaticamente** a prop `popoverContainer` para **todos** os componentes custom. Você não precisa fazer nada especial!
+
+**Como usar:**
+
+```typescript
+// 1. Criar componente custom que aceita popoverContainer
+interface TrainingMultiSelectProps {
+  value: string[];
+  onChange: (value: string[]) => void;
+  disabled?: boolean;
+  error?: string;
+  popoverContainer?: HTMLElement | null; // ✅ Recebe automaticamente do BaseForm
+}
+
+export function TrainingMultiSelect({ 
+  value, 
+  onChange, 
+  disabled, 
+  error,
+  popoverContainer // ✅ Prop passada automaticamente pelo BaseForm
+}: TrainingMultiSelectProps) {
+  const { data: trainings = [], isLoading } = useQuery({
+    queryKey: ['trainings'],
+    queryFn: async () => {
+      const { data } = await supabase.schema('common').from('trainings').select('*');
+      return data || [];
+    }
+  });
+
+  return (
+    <MultiSelect
+      data={trainings}
+      value={value}
+      onChange={onChange}
+      getId={(item) => item.id}
+      getLabel={(item) => item.title}
+      placeholder="Selecione treinamentos"
+      searchPlaceholder="Buscar..."
+      emptyMessage="Nenhum treinamento encontrado"
+      disabled={disabled}
+      error={error}
+      isLoading={isLoading}
+      popoverContainer={popoverContainer} // ✅ Repassa para o MultiSelect
+    />
+  );
+}
+
+// 2. Usar no campo do formulário - NENHUMA CONFIGURAÇÃO EXTRA!
+const formFields: FormSection[] = [
+  {
+    id: 'basic',
+    title: 'Informações',
+    fields: [
+      {
+        name: 'training_ids',
+        label: 'Treinamentos',
+        type: 'custom' as const,
+        component: TrainingMultiSelect, // ✅ Receberá popoverContainer automaticamente
+        required: true
+      }
+    ]
+  }
+];
+```
+
+**Importante:**
+
+- O `BaseForm` passa `popoverContainer` para **todos** os componentes custom
+- Se seu componente não precisa, pode simplesmente ignorar a prop
+- Componentes que usam `MultiSelect`, `Select`, `Popover` ou outros overlays devem repassar essa prop
+- **Não** é necessário configurar nada no `componentProps` - é automático!
+
+**Exemplo com componentProps (se precisar passar outras props):**
+
+```typescript
+{
+  name: 'training_ids',
+  label: 'Treinamentos',
+  type: 'custom' as const,
+  component: TrainingMultiSelect,
+  componentProps: {
+    maxDisplayedBadges: 3, // Props customizadas
+    enableSearch: true
+    // popoverContainer é passado automaticamente, não precisa incluir aqui
+  },
+  required: true
+}
+```
+
+**Checklist:**
+
+- ✅ Componente custom aceita `popoverContainer?: HTMLElement | null`
+- ✅ `popoverContainer` é repassado para `MultiSelect`, `Popover`, etc.
+- ✅ Usar `type: 'custom'` no field config
+- ✅ Não incluir `popoverContainer` em `componentProps` (é automático)
+
+---
+
+#### 🔧 AppSidebar Redimensionável
+
+**Comportamento Padrão:**
+
+Por padrão, a `AppSidebar` tem largura fixa e **não** é redimensionável:
+
+```typescript
+import { AppSidebar } from 'forlogic-core';
+
+// Sidebar padrão (largura fixa, apenas collapse/expand com pin)
+<AppSidebar config={sidebarConfig} />
+```
+
+**Habilitando Redimensionamento:**
+
+Para habilitar o redimensionamento via drag na borda direita, use a prop `resizable={true}`:
+
+```typescript
+import { AppSidebar } from 'forlogic-core';
+
+// Sidebar redimensionável com limites customizados
+<AppSidebar 
+  config={sidebarConfig}
+  resizable={true}
+  minWidth={280}  // Opcional (padrão: 224px/14rem)
+  maxWidth={500}  // Opcional (padrão: 384px/24rem)
+/>
+```
+
+**Exemplo com Custom Content:**
+
+```typescript
+import { AppLayout, AppSidebar } from 'forlogic-core';
+import { FolderTree } from './components/FolderTree';
+
+function DocsPage() {
+  return (
+    <AppLayout 
+      sidebar={
+        <AppSidebar 
+          customContent={<FolderTree folders={folders} />}
+          resizable={true}
+          minWidth={280}
+          maxWidth={500}
+        />
+      }
+    >
+      <div className="p-6">
+        {/* Conteúdo da página */}
+      </div>
+    </AppLayout>
+  );
+}
+```
+
+**Props de Redimensionamento:**
+
+| Prop       | Tipo      | Padrão   | Descrição                                  |
+| ---------- | --------- | -------- | ------------------------------------------ |
+| `resizable` | `boolean` | `false`  | Habilita/desabilita redimensionamento      |
+| `minWidth`  | `number`  | `224`    | Largura mínima em pixels (14rem)           |
+| `maxWidth`  | `number`  | `384`    | Largura máxima em pixels (24rem)           |
+
+**Recursos:**
+
+- ✅ Drag-to-resize com mouse na borda direita
+- ✅ Persistência automática da largura (localStorage)
+- ✅ Limites min/max configuráveis
+- ✅ Feedback visual durante drag (hover e cursor)
+- ✅ Funciona independente do pin/hover da sidebar
+- ✅ Storage key: `app-sidebar-width`
+
+**Quando Usar:**
+
+- 📄 Páginas com conteúdo lateral extenso (documentação, navegação de arquivos)
+- 📊 Dashboards com painéis laterais customizáveis
+- 🗂️ Interfaces com árvores de navegação profundas
+- ⚙️ Configurações onde o usuário prefere mais espaço para a sidebar
+
+**Quando NÃO Usar:**
+
+- ❌ Sidebars com navegação simples/curta (usa largura fixa padrão)
+- ❌ Aplicações mobile-first (redimensionamento só funciona em desktop)
+
 ---
 
 ### 🎨 Campos Customizados no BaseForm

package/dist/README.md

@@ -652,6 +652,272 @@ import { TrainingMultiSelect } from './components/TrainingMultiSelect';
 }
 ```
 
+#### ⚠️ MultiSelect dentro de Dialog
+
+**Problema Comum:**
+
+Quando o `MultiSelect` é usado dentro de um `Dialog`, o popover pode ser cortado ou ter problemas de scroll.
+
+**Solução:**
+
+Use a prop `popoverContainer` para portalizar o popover para dentro do próprio `DialogContent`:
+
+```typescript
+import { useState, useRef, useCallback } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogTrigger, Button, MultiSelect } from 'forlogic-core';
+
+function MyComponent() {
+  const [selected, setSelected] = useState<string[]>([]);
+  const [open, setOpen] = useState(false);
+  const dialogContentRef = useRef<HTMLDivElement>(null);
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+
+  // useCallback para capturar a ref do DialogContent
+  const setDialogContentRef = useCallback((node: HTMLDivElement | null) => {
+    dialogContentRef.current = node;
+    setPortalContainer(node);
+  }, []);
+
+  const options = [
+    { id: '1', name: 'React' },
+    { id: '2', name: 'Vue' },
+    { id: '3', name: 'Angular' },
+    // ... mais opções
+  ];
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button>Abrir MultiSelect em Dialog</Button>
+      </DialogTrigger>
+      <DialogContent ref={setDialogContentRef} className="max-h-[90vh] overflow-visible">
+        <DialogHeader>
+          <DialogTitle>Selecione Frameworks</DialogTitle>
+          <DialogDescription>
+            O Popover é portalizado para o próprio Dialog.Content e o conteúdo rola em um wrapper interno,
+            evitando corte e permitindo scroll desde a primeira abertura.
+          </DialogDescription>
+        </DialogHeader>
+        {/* Wrapper interno com scroll - permite que DialogContent tenha overflow-visible */}
+        <div className="mt-4 max-h-[60vh] overflow-auto pr-1">
+          <MultiSelect
+            options={options}
+            value={selected}
+            onChange={setSelected}
+            getOptionValue={(opt) => opt.id}
+            getOptionLabel={(opt) => opt.name}
+            placeholder="Selecione frameworks..."
+            label="Frameworks"
+            popoverContainer={portalContainer}
+            disabled={!portalContainer}
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+```
+
+**Pontos-chave:**
+
+1. **useCallback + useState**: Captura a ref do `DialogContent` e guarda no state `portalContainer`
+2. **overflow-visible**: Permite que o popover seja visível fora do dialog
+3. **Wrapper interno com scroll**: Um `div` interno com `overflow-auto` para scroll do conteúdo
+4. **popoverContainer**: Passa o container para o `MultiSelect` para portalizar o popover
+5. **disabled={!portalContainer}**: Desabilita até o container estar disponível (evita erros na primeira renderização)
+
+---
+
+#### 🔧 MultiSelect em BaseForm/createCrudPage
+
+**Situação:**
+
+Quando você usa `createCrudPage` ou `BaseForm` diretamente, o Dialog é criado automaticamente e você não tem acesso direto à ref do `DialogContent`.
+
+**Solução Automática:**
+
+O `BaseForm` agora passa **automaticamente** a prop `popoverContainer` para **todos** os componentes custom. Você não precisa fazer nada especial!
+
+**Como usar:**
+
+```typescript
+// 1. Criar componente custom que aceita popoverContainer
+interface TrainingMultiSelectProps {
+  value: string[];
+  onChange: (value: string[]) => void;
+  disabled?: boolean;
+  error?: string;
+  popoverContainer?: HTMLElement | null; // ✅ Recebe automaticamente do BaseForm
+}
+
+export function TrainingMultiSelect({ 
+  value, 
+  onChange, 
+  disabled, 
+  error,
+  popoverContainer // ✅ Prop passada automaticamente pelo BaseForm
+}: TrainingMultiSelectProps) {
+  const { data: trainings = [], isLoading } = useQuery({
+    queryKey: ['trainings'],
+    queryFn: async () => {
+      const { data } = await supabase.schema('common').from('trainings').select('*');
+      return data || [];
+    }
+  });
+
+  return (
+    <MultiSelect
+      data={trainings}
+      value={value}
+      onChange={onChange}
+      getId={(item) => item.id}
+      getLabel={(item) => item.title}
+      placeholder="Selecione treinamentos"
+      searchPlaceholder="Buscar..."
+      emptyMessage="Nenhum treinamento encontrado"
+      disabled={disabled}
+      error={error}
+      isLoading={isLoading}
+      popoverContainer={popoverContainer} // ✅ Repassa para o MultiSelect
+    />
+  );
+}
+
+// 2. Usar no campo do formulário - NENHUMA CONFIGURAÇÃO EXTRA!
+const formFields: FormSection[] = [
+  {
+    id: 'basic',
+    title: 'Informações',
+    fields: [
+      {
+        name: 'training_ids',
+        label: 'Treinamentos',
+        type: 'custom' as const,
+        component: TrainingMultiSelect, // ✅ Receberá popoverContainer automaticamente
+        required: true
+      }
+    ]
+  }
+];
+```
+
+**Importante:**
+
+- O `BaseForm` passa `popoverContainer` para **todos** os componentes custom
+- Se seu componente não precisa, pode simplesmente ignorar a prop
+- Componentes que usam `MultiSelect`, `Select`, `Popover` ou outros overlays devem repassar essa prop
+- **Não** é necessário configurar nada no `componentProps` - é automático!
+
+**Exemplo com componentProps (se precisar passar outras props):**
+
+```typescript
+{
+  name: 'training_ids',
+  label: 'Treinamentos',
+  type: 'custom' as const,
+  component: TrainingMultiSelect,
+  componentProps: {
+    maxDisplayedBadges: 3, // Props customizadas
+    enableSearch: true
+    // popoverContainer é passado automaticamente, não precisa incluir aqui
+  },
+  required: true
+}
+```
+
+**Checklist:**
+
+- ✅ Componente custom aceita `popoverContainer?: HTMLElement | null`
+- ✅ `popoverContainer` é repassado para `MultiSelect`, `Popover`, etc.
+- ✅ Usar `type: 'custom'` no field config
+- ✅ Não incluir `popoverContainer` em `componentProps` (é automático)
+
+---
+
+#### 🔧 AppSidebar Redimensionável
+
+**Comportamento Padrão:**
+
+Por padrão, a `AppSidebar` tem largura fixa e **não** é redimensionável:
+
+```typescript
+import { AppSidebar } from 'forlogic-core';
+
+// Sidebar padrão (largura fixa, apenas collapse/expand com pin)
+<AppSidebar config={sidebarConfig} />
+```
+
+**Habilitando Redimensionamento:**
+
+Para habilitar o redimensionamento via drag na borda direita, use a prop `resizable={true}`:
+
+```typescript
+import { AppSidebar } from 'forlogic-core';
+
+// Sidebar redimensionável com limites customizados
+<AppSidebar 
+  config={sidebarConfig}
+  resizable={true}
+  minWidth={280}  // Opcional (padrão: 224px/14rem)
+  maxWidth={500}  // Opcional (padrão: 384px/24rem)
+/>
+```
+
+**Exemplo com Custom Content:**
+
+```typescript
+import { AppLayout, AppSidebar } from 'forlogic-core';
+import { FolderTree } from './components/FolderTree';
+
+function DocsPage() {
+  return (
+    <AppLayout 
+      sidebar={
+        <AppSidebar 
+          customContent={<FolderTree folders={folders} />}
+          resizable={true}
+          minWidth={280}
+          maxWidth={500}
+        />
+      }
+    >
+      <div className="p-6">
+        {/* Conteúdo da página */}
+      </div>
+    </AppLayout>
+  );
+}
+```
+
+**Props de Redimensionamento:**
+
+| Prop       | Tipo      | Padrão   | Descrição                                  |
+| ---------- | --------- | -------- | ------------------------------------------ |
+| `resizable` | `boolean` | `false`  | Habilita/desabilita redimensionamento      |
+| `minWidth`  | `number`  | `224`    | Largura mínima em pixels (14rem)           |
+| `maxWidth`  | `number`  | `384`    | Largura máxima em pixels (24rem)           |
+
+**Recursos:**
+
+- ✅ Drag-to-resize com mouse na borda direita
+- ✅ Persistência automática da largura (localStorage)
+- ✅ Limites min/max configuráveis
+- ✅ Feedback visual durante drag (hover e cursor)
+- ✅ Funciona independente do pin/hover da sidebar
+- ✅ Storage key: `app-sidebar-width`
+
+**Quando Usar:**
+
+- 📄 Páginas com conteúdo lateral extenso (documentação, navegação de arquivos)
+- 📊 Dashboards com painéis laterais customizáveis
+- 🗂️ Interfaces com árvores de navegação profundas
+- ⚙️ Configurações onde o usuário prefere mais espaço para a sidebar
+
+**Quando NÃO Usar:**
+
+- ❌ Sidebars com navegação simples/curta (usa largura fixa padrão)
+- ❌ Aplicações mobile-first (redimensionamento só funciona em desktop)
+
 ---
 
 ### 🎨 Campos Customizados no BaseForm