Sheet

Painel deslizante para detalhes e edição sem sair da tela.

O Sheet (do HeroUI Pro) abre um painel pela borda da tela para mostrar detalhes ou editar um objeto: a tentativa de um Pedido, o Preview da Jornada, uma rota. No celular ele sobe pela base e pode ser arrastado para fechar. Para uma tarefa curta use Modal.

import { Sheet } from "@rastreio-x/ui";

Padrão

Sheet.Trigger envolve o botão que abre. O conteúdo fica em Sheet.Backdrop > Sheet.Content > Sheet.Dialog. Sheet.Close envolve um botão que fecha.

Posições

placement define a borda de entrada: right (padrão do Admin em desktop), left, bottom e top. Sheet.Handle aparece na borda do arrasto.

Com formulário

Edição em painel lateral, com os botões de salvar e cancelar no rodapé.

Controlado

Com isOpen e onOpenChange você abre o painel por qualquer evento. Devolva o foco ao botão que o abriu ao fechar.

Estado: fechado

Sem fechar por fora

isDismissable={false} impede fechar ao clicar fora ou arrastar. Use quando houver trabalho que não pode ser perdido.

Anatomia

Sheet
├── Sheet.Backdrop
├── Sheet.Body
├── Sheet.Close
├── Sheet.CloseTrigger
├── Sheet.Content
├── Sheet.Dialog
├── Sheet.Footer
├── Sheet.Handle
├── Sheet.Header
├── Sheet.Heading
├── Sheet.NestedRoot
└── Sheet.Trigger

Sheet.Trigger e Sheet.Close: envolvem o botão que abre e o que fecha.
Sheet.Backdrop: o fundo (opaque, blur ou transparent).
Sheet.Content e Sheet.Dialog: o painel e a superfície do diálogo.
Sheet.Header e Sheet.Heading: o cabeçalho com o título.
Sheet.Body e Sheet.Footer: o conteúdo com rolagem e as ações.
Sheet.Handle e Sheet.CloseTrigger: a alça de arrasto e o botão de fechar.

Propriedades

Raiz (Sheet):

Sheet
Prop	Tipo	Padrão	Descrição
`activeSnapPoint`	`string \| number \| null`	-	Ponto de ancoragem ativo (controlado).
`children`	`React.ReactNode`	-	Conteúdo do componente.
`closeThreshold`	`number`	-	Fração do arrasto, de 0 a 1, a partir da qual a gaveta fecha.
`container`	`HTMLElement \| null`	-	Elemento que recebe a gaveta no lugar do `body`.
`defaultOpen`	`boolean`	-	Abre o elemento na primeira renderização (não controlado).
`disablePreventScroll`	`boolean`	-	Permite rolar a página por trás enquanto a gaveta está aberta.
`fadeFromIndex`	`number`	-	Índice do ponto de ancoragem a partir do qual o fundo escurece.
`isDetached`	`boolean`	`false`	Afasta a camada da borda da tela, com cantos arredondados.
`isDismissable`	`boolean`	`true`	Permite fechar clicando fora ou arrastando.
`isFixed`	`boolean`	-	Gaveta fixa: não se move quando o teclado virtual aparece.
`isHandleOnly`	`boolean`	-	Só a alça arrasta a gaveta; o conteúdo não.
`isModal`	`boolean`	-	Gaveta modal: bloqueia a interação com o resto da página.
`isNested`	`boolean`	-	Marca a gaveta como aninhada dentro de outra.
`isOpen`	`boolean`	-	Controla se o elemento está aberto (controlado).
`noBodyStyles`	`boolean`	-	Não aplica estilos ao `body` enquanto a gaveta está aberta.
`onActiveSnapPointChange`	`((snapPoint: number \| string \| null) => void)`	-	Chamada quando o ponto de ancoragem ativo muda.
`onClose`	`(() => void)`	-	Chamada quando o elemento fecha.
`onOpenChange`	`((open: boolean) => void)`	-	Chamada quando o elemento abre ou fecha.
`onRelease`	`((event: React.PointerEvent<HTMLDivElement>, open: boolean) => void)`	-	Chamada ao soltar o arrasto, com o evento e se a gaveta ficou aberta.
`placement`	`SheetPlacement`	`"bottom"`	Borda de onde a gaveta desliza: `bottom` (padrão), `top`, `left` ou `right`.
`preventScrollRestoration`	`boolean`	-	Não restaura a posição de rolagem ao fechar.
`repositionInputs`	`boolean`	-	Reposiciona os campos para não ficarem sob o teclado virtual.
`scrollLockTimeout`	`number`	-	Tempo, em ms, de trava da rolagem depois do arrasto.
`setBackgroundColorOnScale`	`boolean`	-	Define a cor de fundo do `body` ao reduzir o fundo (efeito de escala).
`shouldAutoFocus`	`boolean`	-	Foca o conteúdo ao abrir.
`shouldScaleBackground`	`boolean`	-	Reduz levemente o fundo da página ao abrir (efeito de profundidade).
`snapPoints`	`(string \| number)[]`	-	Pontos de ancoragem da gaveta, em fração da altura (0 a 1) ou em pixels.
`snapToSequentialPoint`	`boolean`	-	Ao soltar, vai para o ponto de ancoragem vizinho em vez de saltar pela velocidade.

Fundo (Sheet.Backdrop):

Sheet.Backdrop
Prop	Tipo	Padrão	Descrição
`children`	`ChildrenOrFunction<ModalRenderProps>`	-	Conteúdo do componente.
`className`	`ClassNameOrFunction<ModalRenderProps>`	`'react-aria-ModalOverlay'`	Classes CSS aplicadas ao elemento.
`defaultOpen`	`boolean`	-	Abre o elemento na primeira renderização (não controlado).
`isDismissable`	`boolean`	`false`	Permite fechar clicando fora ou arrastando.
`isEntering`	`boolean`	-	Indica que a animação de entrada está em andamento.
`isExiting`	`boolean`	-	Indica que a animação de saída está em andamento.
`isKeyboardDismissDisabled`	`boolean`	`false`	Impede que a tecla Esc feche a camada.
`render`	`DOMRenderFunction<'div', ModalRenderProps>`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`shouldCloseOnInteractOutside`	`((element: Element) => boolean)`	-	Decide se uma interação fora da camada a fecha.
`style`	`StyleOrFunction<ModalRenderProps>`	-	Estilos em linha aplicados ao elemento.
`UNSTABLE_portalContainer`	`Element`	`document.body`	Elemento que recebe o portal da camada. Interface instável.
`variant`	`'blur' \| 'opaque' \| 'transparent'`	-	Fundo atrás da camada: `blur` (desfocado), `opaque` ou `transparent`.

Animações

CSS
indicativo

O painel desliza pela borda com transição CSS e responde ao arrasto no celular (a alça pode alternar pontos de parada). O fundo faz fade. Com prefers-reduced-motion, a folha global da fachada reduz as transições a 0,01 ms e o painel aparece sem deslizar.

Acessibilidade

Diálogo modal (React Aria): foco preso no painel, Esc fecha, o resto da página fica inerte.
Sheet.Heading nomeia o diálogo por aria-labelledby.
Sheet.CloseTrigger é um botão focável com nome acessível.
Devolva o foco ao elemento que abriu o painel ao fechar (a linha de uma lista, por exemplo).
Gestos de arrasto têm sempre alternativa por botão.

Boas práticas

Faça

Painel lateral para ver ou editar um objeto, com título que o nomeia e ação clara no rodapé.

Evite

Empilhar painéis, ou esconder ações essenciais fora do rodapé.

Desktop: placement="right"; celular: o painel sobe pela base.
Um painel por vez; evite Sheet aninhado.
Rodapé com cancelar e a ação principal; nunca só um "X".
Para tarefas de um passo, use Modal.

Relacionados

Modal para tarefas curtas e centradas.
AlertDialog para confirmar antes de fechar com perda.
DataGrid cujas linhas costumam abrir um Sheet.