# Sheet

Folha que desliza da borda da tela, com gesto de arrastar.

Compõe com `SheetTrigger`, `SheetContent`, `SheetTitle`, `SheetDescription`,
`SheetHandle` e `SheetClose`.

`side` decide de onde ela entra, e o gesto de fechar segue o lado. E a peça de
navegação no celular e o painel de ações onde o polegar alcança. O tipo é
`SheetSide`, e são três lados: `bottom` (o padrão), `left` e `right`. Não há
`top`, porque folha que desce do alto disputa com a barra de status do celular e
com todo cabeçalho fixo.

A tarja de fundo clareia junto com o dedo: puxar pela metade mostra metade do que
esta atrás.

## No React Native

Traduz: o `@rivocode/ui-native` exporta `Sheet` - só o comportamento de baixo, que já era o modo estreito do web; sobe deslizando, e sem transição quando o sistema pede para reduzir movimento; com campo dentro, a folha sobe junto com o teclado. A API não é a mesma do web (no nativo tudo é controlado), e a [tabela de paridade](/react-native) diz o que muda peça a peça.

## Importação

```tsx
import { Sheet } from '@rivocode/ui'
```

## Exemplos

### Folha de baixo

```tsx
import { Button, Sheet, SheetClose, SheetContent, SheetDescription, SheetHandle, SheetTitle, SheetTrigger } from '@rivocode/ui'

export function BottomSheet() {
  return (
    <div className="min-h-80">
      <Sheet side="bottom" defaultOpen>
        <SheetTrigger render={<Button variant="secondary" />}>Ações da nota</SheetTrigger>
        <SheetContent>
          <SheetHandle />
          <SheetTitle>Nota 4813</SheetTitle>
          <SheetDescription>Clínica São Lucas, vencimento em 05/08.</SheetDescription>
          <div className="mt-6 flex flex-col gap-2">
            <Button variant="secondary">Baixar PDF</Button>
            <SheetClose render={<Button variant="ghost" />}>Cancelar</SheetClose>
          </div>
        </SheetContent>
      </Sheet>
    </div>
  )
}
```

### Lateral

```tsx
import { Button, Sheet, SheetClose, SheetContent, SheetDescription, SheetHandle, SheetTitle, SheetTrigger } from '@rivocode/ui'

export function SideSheet() {
  return (
    <Sheet side="left">
      <SheetTrigger render={<Button variant="secondary" />}>Abrir menu</SheetTrigger>
      <SheetContent>
        <SheetTitle>Navegação</SheetTitle>
        <SheetDescription>Escolha para onde ir.</SheetDescription>
      </SheetContent>
    </Sheet>
  )
}
```

## Props

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `actionsRef` | `RefObject<DrawerRootActions \| null>` |  | 0.4.0 | A ref to imperative actions. |
| `defaultOpen` | `boolean` |  | 0.4.0 | Whether the drawer is initially open. |
| `defaultSnapPoint` | `DrawerSnapPoint \| null` |  | 0.4.0 | The initial snap point value when uncontrolled. |
| `defaultTriggerId` | `string \| null` |  | 0.4.0 | ID of the trigger that the drawer is associated with. |
| `disablePointerDismissal` | `boolean` |  | 0.4.0 | Whether to prevent the drawer from closing on outside presses. |
| `handle` | `DrawerHandle<unknown>` |  | 0.4.0 | A handle to associate the drawer with a trigger. |
| `modal` | `"trap-focus" \| boolean` |  | 0.4.0 | Determines if the drawer enters a modal state when open. |
| `onOpenChange` | `((open: boolean, eventDetails: DrawerRootChangeEventDetails) => void)` |  | 0.4.0 | Event handler called when the drawer is opened or closed. |
| `onOpenChangeComplete` | `((open: boolean) => void)` |  | 0.4.0 | Event handler called after any animations complete when the drawer is opened or closed. |
| `onSnapPointChange` | `((snapPoint: DrawerSnapPoint \| null, eventDetails: DrawerRootSnapPointChangeEventDetails) => void)` |  | 0.4.0 | Callback fired when the snap point changes. |
| `open` | `boolean` |  | 0.4.0 | Whether the drawer is currently open. |
| `side` | `SheetSide` |  | 0.4.0 | De onde a folha entra. |
| `snapPoint` | `DrawerSnapPoint \| null` |  | 0.4.0 | The currently active snap point. |
| `snapPoints` | `DrawerSnapPoint[]` |  | 0.4.0 | Snap points used to position the drawer. |
| `snapToSequentialPoints` | `boolean` |  | 0.4.0 | Disables velocity-based snap skipping so drag distance determines the next snap point. |
| `triggerId` | `string \| null` |  | 0.4.0 | ID of the trigger that the drawer is associated with. |

## Partes

O componente se monta com as peças abaixo. Todas vêm de `@rivocode/ui`.

### SheetClose

Fecha a folha de dentro dela. Use `render` para emprestar o comportamento ao
botão que já existe no rodapé, em vez de somar mais um.

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `nativeButton` | `boolean` |  | 0.4.0 | Whether the component renders a native `<button>` element when replacing it via the `render` prop. |
| `render` | `ComponentRenderFn<HTMLProps, DrawerCloseState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | 0.4.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

### SheetContent

O painel, com a tarja de fundo e o portal por dentro.

Monta em portal no container do `RivoProvider`, então o tema vale ali dentro.
Não recebe `side`: o lado mora na raiz, porque o gesto de fechar tem que
concordar com a direção de onde a folha entrou.

A tarja é irmã do painel dentro do portal, então nem `className` nem variante de
descendente alcançam ela. Para vestir as duas, use `classNames` com as partes
`backdrop` e `viewport`.

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `classNames` | `Partial<Record<"backdrop" \| "viewport", string>>` |  | 0.5.0 | Classe por parte: `backdrop`, `viewport`. |
| `finalFocus` | `boolean \| RefObject<HTMLElement \| null> \| ((closeType: InteractionType) => void \| boolean \| HTMLElement \| null)` |  | 0.4.0 | Determines the element to focus when the drawer is closed. |
| `initialFocus` | `boolean \| RefObject<HTMLElement \| null> \| ((openType: InteractionType) => void \| boolean \| HTMLElement \| null)` |  | 0.4.0 | Determines the element to focus when the drawer is opened. |
| `render` | `ComponentRenderFn<HTMLProps, DrawerPopupState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | 0.4.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

### SheetDescription

A linha de contexto embaixo do título, ligada ao painel por `aria-describedby`.

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `render` | `ComponentRenderFn<HTMLProps, DrawerDescriptionState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | 0.4.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

### SheetHandle

A barrinha de pegar, só na folha de baixo.

É o único aviso de que dá para arrastar. Sem ela o gesto continua existindo e
ninguém descobre, e aí a única saída visível é o clique fora, que na folha de
baixo fica no meio do conteúdo que a pessoa veio ler.

Sai escondida do leitor de tela: quem navega por teclado fecha com Esc, e uma
barra decorativa anunciada só atrapalha.

### SheetTitle

O título da folha, e o nome dela para o leitor de tela.

Folha sem título é um painel que se abre sem dizer o que é: quem usa leitor de
tela ouve só "diálogo". Quando o desenho não comporta título visível, o
`aria-label` no `SheetContent` faz o papel.

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `render` | `ComponentRenderFn<HTMLProps, DrawerTitleState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | 0.4.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

### SheetTrigger

O que abre a folha. Use `render` para emprestar o gatilho a um `Button`, em vez
de aninhar um botão dentro de outro.

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `handle` | `DrawerHandle<Payload>` |  | 0.4.0 | A handle to associate the trigger with a drawer. |
| `nativeButton` | `boolean` |  | 0.4.0 | Whether the component renders a native `<button>` element when replacing it via the `render` prop. |
| `payload` | `Payload` |  | 0.4.0 | A payload to pass to the drawer when it is opened. |
| `render` | `ComponentRenderFn<HTMLProps, DrawerTriggerState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | 0.4.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

## Ver também

- [AlertDialog](/componentes/alert-dialog.md)
- [ContextMenu](/componentes/context-menu.md)
- [Dialog](/componentes/dialog.md)
- [Popconfirm](/componentes/popconfirm.md)
- [Popover](/componentes/popover.md)
- [PreviewCard](/componentes/preview-card.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)