@thibezer/ui-components-kit 2.14.0 → 2.15.0

package/CHANGELOG.md

@@ -1,16 +1,28 @@
 # Changelog
 
+## 2.15.0 — 2026-11-05
+
+### `<ui-tabela>`: células interativas (botão, checkbox, campo editável) sem perder foco nem texto
+
+- **Rolagem virtual preserva as linhas visíveis:** novo modo `renderBody('rolagem')` (usado pelo scroll e pela rolagem programática). Linhas com o mesmo item, a mesma posição e as mesmas colunas ficam intactas; só as que entram na janela são criadas. O campo em edição mantém o nó, o foco e o texto digitado, e o `render` roda só para as linhas novas.
+- **Foco devolvido após renderização completa** (trocar `dados`, filtrar, ordenar): o foco volta ao mesmo controle da mesma linha (achada pelo objeto, pelo `data-id` ou pela posição), com texto digitado, checkbox marcado e seleção de texto de `input`/`textarea`/`select` nativos, se o dado não mudou nesse meio-tempo (senão o dado novo prevalece). A tabela nunca grava nos dados. Novo micro-módulo `tabela-foco.ts`.
+- **Cliques em controles não selecionam a linha:** além de `button`, `input`, `select`, `textarea`, `a` e `summary`, agora também `label`, `contenteditable` e elementos com `role` de controle (`checkbox`, `switch`, `radio`, `textbox`, `combobox`, `slider`, `spinbutton`, `menuitem`, `tab`, `link`), como `<ui-checkbox>` e `<ui-switch>`.
+- **`render(valor, item, indice, indiceDados)`:** novo 4º argumento com a posição do item em `dados` (estável ao ordenar e filtrar). `indice` continua sendo a posição exibida.
+- **Leitor de tela:** a região de anúncio do filtro só é escrita quando o texto muda (antes era reescrita a cada quadro de rolagem com filtro ativo).
+- **Atributos:** mudar `aria-label`, `texto-erro` ou `texto-carregando` não recria mais as linhas.
+- Testes de regressão em `ui-tabela-robustez.test.ts`; README com o contrato de células interativas.
+
 ## 2.14.0 — 2026-11-05
 
-### `<ui-canvas-cad>` & `gerencigeo-canvas`: auditoria, seleção avançada, navegação e HUD de coordenadas
-
-- **Seleção aditiva e subtrativa:** Suporte a `Shift` (adicionar à seleção) e `Ctrl`/`Cmd` (remover/subtrair da seleção) tanto no clique em feições quanto na caixa de seleção por arraste (caixa vermelha estilizada para operação subtrativa).
-- **Escape na Edição de Vértices:** Pressionar `Escape` com nó selecionado desmarca o nó; pressionar `Escape` sem nó selecionado cancela a edição e reverte a feição para a geometria original (`cancelar()`).
-- **Navegação com Barra de Espaço (`Hand Tool`):** Segurar a barra de espaço permite pan fluido com botão esquerdo do mouse (ideal para notebooks e trackpads), respeitando campos digitáveis.
-- **HUD de Coordenadas em Tempo Real:** Rodapé do canvas exibindo coordenadas UTM (Fuso, Hemisfério, Este e Norte formatados no padrão brasileiro) e coordenadas geográficas (Lat/Lon decimais), com suporte ao atributo `sem-hud-coordenadas`.
-- **Desempenho & GC:** Otimização de Garbage Collection em `feature_snap.ts` eliminando alocações de arrays e tuplas intermediárias durante o hot-path do cursor; cancelamento de timers concorrentes no hover de feições.
-- Testes abrangentes em `tests/canvas-melhorias-auditoria.test.ts`.
-
+### `<ui-canvas-cad>` & `gerencigeo-canvas`: auditoria, seleção avançada, navegação e HUD de coordenadas
+
+- **Seleção aditiva e subtrativa:** Suporte a `Shift` (adicionar à seleção) e `Ctrl`/`Cmd` (remover/subtrair da seleção) tanto no clique em feições quanto na caixa de seleção por arraste (caixa vermelha estilizada para operação subtrativa).
+- **Escape na Edição de Vértices:** Pressionar `Escape` com nó selecionado desmarca o nó; pressionar `Escape` sem nó selecionado cancela a edição e reverte a feição para a geometria original (`cancelar()`).
+- **Navegação com Barra de Espaço (`Hand Tool`):** Segurar a barra de espaço permite pan fluido com botão esquerdo do mouse (ideal para notebooks e trackpads), respeitando campos digitáveis.
+- **HUD de Coordenadas em Tempo Real:** Rodapé do canvas exibindo coordenadas UTM (Fuso, Hemisfério, Este e Norte formatados no padrão brasileiro) e coordenadas geográficas (Lat/Lon decimais), com suporte ao atributo `sem-hud-coordenadas`.
+- **Desempenho & GC:** Otimização de Garbage Collection em `feature_snap.ts` eliminando alocações de arrays e tuplas intermediárias durante o hot-path do cursor; cancelamento de timers concorrentes no hover de feições.
+- Testes abrangentes em `tests/canvas-melhorias-auditoria.test.ts`.
+
 ## 2.13.0 — 2026-11-05
 
 ### `<ui-canvas-cad>`: atributo `qualidade` (`alta` | `media` | `baixa`)

package/README.md

@@ -505,7 +505,9 @@ const ok = await tabela.carregarDoEndpoint('/api/v1/vertices'); // true em suces
 | `ui-fetch-erro` | `{ url, erro, origem, status? }` | Falha. `origem`: `rede`, `http` (com `status`), `json` ou `render` |
 | `ui-fetch-cancelado` | `{ url }` | Requisição abortada ou substituída (fecha o par do `ui-fetch-start`) |
 
-Boas práticas: trate `dados` como imutável (atribua sempre um array novo), mantenha `chave-id` única e não nula, memorize `colunas` (atribuí-las de novo refaz a tabela) e coloque controles interativos das células com `data-prevent-select` se não quiser que o clique selecione a linha. `render` devolvendo `string` vira texto (não HTML); devolva um `HTMLElement` novo por chamada.
+Boas práticas: trate `dados` como imutável (atribua sempre um array novo), mantenha `chave-id` única e não nula, memorize `colunas` (atribuí-las de novo refaz a tabela) e coloque controles interativos das células com `data-prevent-select` se não quiser que o clique selecione a linha (`button`, `input`, `select`, `textarea`, `a`, `label`, `contenteditable` e elementos com `role` de controle, como o `<ui-checkbox>` e o `<ui-switch>`, já são ignorados). `render` devolvendo `string` vira texto (não HTML); devolva um `HTMLElement` novo por chamada.
+
+**Células interativas (`render`)**: `render(valor, item, indice, indiceDados)` pode devolver botão, checkbox ou campo editável. `indice` é a posição **exibida** (muda ao ordenar e filtrar); para editar ou remover use `item` ou `indiceDados`, a posição do item em `dados`. Com virtualização, a rolagem mantém as linhas que continuam visíveis (o campo em edição conserva foco e texto) e só renderiza as que entram. Trocar `dados`, filtrar ou ordenar recria as linhas e roda o `render` de novo: o foco volta ao mesmo controle da mesma linha, com o texto digitado (ou o checkbox marcado) e a seleção de texto, desde que o dado do item não tenha mudado nesse meio-tempo (senão o dado novo prevalece). A tabela nunca grava nos dados: grave o valor em `item` no seu handler (`input`/`change`). Vale para `input`, `textarea` e `select` nativos; componentes próprios (`<ui-campo-texto>` etc.) mantêm o foco, mas não o texto não gravado. `dados` guarda uma cópia do array (entradas nulas são descartadas): para refletir um `push`, atribua um array novo.
 
 ---
 

package/dist/components/ui-tabela/tabela-corpo.d.ts

@@ -1,4 +1,5 @@
 import { TabelaColuna } from './tipos';
+export type ModoRenderCorpo = 'completo' | 'rolagem';
 export interface ContextoCorpoTabela {
     tbodyElement: HTMLTableSectionElement | null;
     tableElement: HTMLTableElement | null;
@@ -15,6 +16,10 @@ export interface ContextoCorpoTabela {
     filtroAtivo?: boolean;
     textoVazio?: string;
     textoSemResultados?: string;
+    /** `completo` recria as linhas; `rolagem` preserva as que seguem na janela virtual. */
+    modo?: ModoRenderCorpo;
+    /** Posição do item em `dados` (4º argumento do `render`); sem ela vale a posição exibida. */
+    indiceOriginal?: (item: Record<string, any>) => number;
     isItemSelecionado: (item: Record<string, any>, index: number) => boolean;
     onLinhaClique: (item: Record<string, any>, index: number) => void;
     formatWidth: (largura?: string | number) => string;

package/dist/components/ui-tabela/tabela-foco.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Foco dentro das células da <ui-tabela>.
+ * Responsabilidade única: guardar qual controle de qual linha tinha o foco antes de recriar o corpo e
+ * devolvê-lo ao controle equivalente depois (a linha é achada pelo objeto, pelo `data-id` ou pela posição).
+ */
+/** Controle focado dentro de uma célula (não a própria linha). */
+export interface FocoCelula {
+    item: Record<string, any> | undefined;
+    dataId: string | null;
+    indiceLinha: number;
+    indiceColuna: number;
+    /** Posição do elemento entre os descendentes da célula (a mesma estrutura é recriada pelo `render`). */
+    ordinal: number;
+    selecaoInicio: number | null;
+    selecaoFim: number | null;
+    /** Valor que o usuário digitou/marcou e ainda não foi gravado nos dados (undefined = sem edição pendente). */
+    digitado?: string | boolean;
+    /** Valor com que o controle foi renderizado: serve para saber se os dados mudaram por baixo da edição. */
+    valorInicial?: string | boolean;
+}
+/** Quem renderizou cada linha: permite achar o item de uma `<tr>` depois que o corpo é reconstruído. */
+export declare const itemDaLinha: WeakMap<Element, Record<string, any>>;
+/** Guarda o valor inicial dos campos nativos da célula recém-renderizada. */
+export declare function registrarValoresRenderizados(celula: Element): void;
+/** Registra o controle focado dentro do corpo, ou `null` se o foco está fora das células. */
+export declare function capturarFocoCelula(tbody: HTMLTableSectionElement): FocoCelula | null;
+/** Devolve o foco ao controle equivalente após recriar o corpo. Sem equivalente, não faz nada. */
+export declare function restaurarFocoCelula(tbody: HTMLTableSectionElement, foco: FocoCelula | null): void;

package/dist/components/ui-tabela/tabela-orquestrador-dados.d.ts

@@ -4,6 +4,7 @@ export declare function normalizarTexto(t: string): string;
 export declare class TabelaOrquestradorDados {
     private dadosOriginais;
     private dadosExibicao;
+    private indicePorItem;
     private colunaOrdenada;
     private direcaoOrdenacao;
     private ultimoFiltro;
@@ -19,6 +20,8 @@ export declare class TabelaOrquestradorDados {
     setColunasFiltro(ids: string[]): void;
     getDadosOriginais(): Record<string, any>[];
     setDadosOriginais(dados: Record<string, any>[]): void;
+    /** Posição do item em `dados` (-1 se não pertence). Índice por objeto montado sob demanda, uma vez por troca de dados. */
+    indiceOriginal(item: Record<string, any>): number;
     getDadosExibicao(): Record<string, any>[];
     getColunaOrdenada(): string | null;
     setColunaOrdenada(id: string | null): void;

package/dist/components/ui-tabela/tabela-renderizador.d.ts

@@ -1,4 +1,5 @@
 import { TabelaColuna } from './tipos';
+import { ModoRenderCorpo } from './tabela-corpo';
 import { ListenerBag } from '../../core/listener-bag';
 import { EstruturaDOMElementos } from './tabela-dom';
 import { TabelaOrquestradorDados } from './tabela-orquestrador-dados';
@@ -20,6 +21,8 @@ export interface ContextoOrquestradorRender {
     virtualizar: boolean;
     rowHeight: number;
     indiceAtivo: number | null;
+    /** `rolagem` preserva as linhas que seguem visíveis na janela virtual (padrão: `completo`). */
+    modoCorpo?: ModoRenderCorpo;
     textoVazio?: string;
     textoSemResultados?: string;
     onSetIsResizing: (resizing: boolean) => void;

package/dist/components/ui-tabela/tipos.d.ts

@@ -17,7 +17,13 @@ export interface TabelaColuna<T = any> {
     comparador?: (a: any, b: any, itemA: T, itemB: T) => number;
     /** Texto pesquisável da célula (o filtro padrão olha o valor bruto); útil quando `render` formata o valor. */
     textoFiltro?: (valor: any, item: T) => string;
-    render?: (valor: any, item: T, index: number) => HTMLElement | string;
+    /**
+     * Conteúdo da célula: `HTMLElement` (botão, checkbox, campo...) ou texto (nunca HTML).
+     * `index` é a posição **exibida** (muda ao ordenar e filtrar); `indiceDados` é a posição do item em `dados`
+     * (estável). Para editar ou remover, prefira `item` ou `indiceDados` a `index`.
+     * Na rolagem com virtualização, linhas que continuam visíveis não são renderizadas de novo.
+     */
+    render?: (valor: any, item: T, index: number, indiceDados: number) => HTMLElement | string;
 }
 export interface UISortDetail {
     idColuna: string | null;

package/dist/components/ui-tabela/ui-tabela.d.ts

@@ -1,4 +1,5 @@
 import { DensidadeTabela, TabelaColuna, TabelaFetcher, UISortDetail, UIColumnResizeDetail, UIRowScrollOptions, UISelecaoRemovidaDetail, UIFetchErroDetail } from './tipos';
+import { ModoRenderCorpo } from './tabela-corpo';
 import { SafeHTMLElement } from '../../core/ssr-safe';
 export type { DensidadeTabela, TabelaColuna, TabelaFetcher, UISortDetail, UIColumnResizeDetail, UIRowScrollOptions, UISelecaoRemovidaDetail, UIFetchErroDetail };
 export declare class UITabela extends SafeHTMLElement {
@@ -119,7 +120,11 @@ export declare class UITabela extends SafeHTMLElement {
     private handleTecladoCorpo;
     private obterContextoRenderizador;
     private renderHeader;
-    renderBody(): void;
+    /**
+     * Renderiza o corpo. `completo` (padrão) recria as linhas e roda o `render` das colunas de novo;
+     * `rolagem` só ajusta a janela virtual e mantém as linhas que continuam visíveis (foco e texto digitado intactos).
+     */
+    renderBody(modo?: ModoRenderCorpo): void;
     /**
      * Rola até um item e opcionalmente o seleciona. Aceita ID (pela `chave-id`, depois `id`, `_id`,
      * `codigo`, `key`), predicado ou índice. Um número é procurado primeiro como ID; use