@actionexec/dashboards 0.17.0 → 0.18.0

package/README.md

@@ -56,6 +56,7 @@ datas ajustavel e download em PDF.
 | `token` | `string` | — | Token Bearer do demonstrativo (obrigatorio) |
 | `palette` | `string[]` | paleta Action | Paleta de 15 cores, no formato do dashboard — para quem embute os dois lado a lado |
 | `showDownload` | `boolean` | `true` | Exibe o botao de download do PDF |
+| `layout` | `'auto' \| 'table' \| 'periods'` | `'auto'` | Como o documento se desenha: a folha de colunas (`table`), um periodo por vez com seletor (`periods`), ou a escolha pela largura do container raiz (`auto`: `periods` abaixo de 600 px, `table` acima; sem `ResizeObserver` fica em `table`) |
 | `className` | `string` | — | Classe CSS adicional no container raiz |
 
 Todos os valores sao computados no servidor: o componente nao agrega, nao
@@ -63,8 +64,25 @@ formata numero e nao avalia formula. E o que garante que o documento exibido aqu
 seja identico ao do construtor da plataforma e ao PDF baixado.
 
 A folha vive num viewport com scroll nos dois eixos (a barra horizontal fica na
-borda visivel, nao no fundo da tabela) e uma faixa de periodos no topo. Secoes
-com recuo se recolhem na tela; o PDF continua com o documento inteiro.
+borda visivel, nao no fundo da tabela) e uma faixa de periodos no topo, que marca
+a coluna mais a vista. Secoes com recuo se recolhem na tela; o PDF continua com o
+documento inteiro.
+
+**Abaixo de 600 px** (`layout="auto"` num celular, ou `layout="periods"`) a folha
+da lugar a um periodo por vez: seletor com setas de 40 px e um `<select>` nativo
+com todas as colunas (a de total por ultimo, quando o documento a tem), e uma
+lista de duas colunas com o rotulo e o valor do periodo escolhido. Embaixo do
+valor vai a variacao contra o periodo anterior (o percentual da analise
+horizontal quando o documento a pede; senao, o valor anterior), que o toggle
+"Comparar com o anterior" liga e desliga. Recolher e expandir secoes e o mesmo
+estado nos dois modos: girar o celular nao desfaz o que o leitor abriu. O
+container raiz recebe `stmt--table` ou `stmt--periods` conforme o modo em vigor.
+O PDF nao muda com o modo.
+
+Na folha em pane estreito (`layout="table"` abaixo de 600 px), a barra de
+controles quebra linha, a legenda "Base" ganha uma linha propria e a coluna de
+rotulos se limita a 40% do viewport da folha, quebrando o nome da conta. Quem
+embute nao precisa mais de override proprio para isso.
 
 ### `ApiError`
 

package/dist/Statement.d.ts

@@ -1,3 +1,5 @@
+/** Como o documento se desenha; ver `StatementProps.layout`. */
+export type StatementLayoutMode = 'auto' | 'table' | 'periods';
 export interface StatementProps {
     /** Token Bearer de acesso ao demonstrativo. */
     token: string;
@@ -11,7 +13,17 @@ export interface StatementProps {
     palette?: string[];
     /** Botao de download do PDF. Default true. */
     showDownload?: boolean;
+    /**
+     * Como o documento se desenha. `'table'` e a folha: linhas por colunas de
+     * periodo, com a faixa de atalhos no topo. `'periods'` mostra um periodo por
+     * vez, numa lista de duas colunas com seletor: e o que cabe num celular,
+     * onde uma folha de 22 colunas nao cabe. `'auto'` (default) mede a largura
+     * do container raiz e usa `'periods'` abaixo de 600px; sem ResizeObserver
+     * (SSR, testes) fica em `'table'`. Recolher e expandir secoes e o MESMO
+     * estado nos dois modos, e o PDF nao muda com o modo.
+     */
+    layout?: StatementLayoutMode;
     /** Classe CSS adicional no container raiz. */
     className?: string;
 }
-export declare function Statement({ token, palette, showDownload, className }: StatementProps): import("react/jsx-runtime").JSX.Element;
+export declare function Statement({ token, palette, showDownload, layout, className, }: StatementProps): import("react/jsx-runtime").JSX.Element;

package/dist/hooks/useCollapse.d.ts

@@ -0,0 +1,22 @@
+import type { StatementComputedLine } from '../types/statement';
+export interface CollapseState {
+    /** Ids das linhas que o leitor pode recolher: as que têm filhas. */
+    collapsible: ReadonlySet<string>;
+    /** Ids recolhidos agora. */
+    collapsed: ReadonlySet<string>;
+    /** Ids escondidos porque algum ancestral está recolhido. */
+    hidden: ReadonlySet<string>;
+    /** Contas que cada seção guarda: a pista que a linha fechada mostra. */
+    accountCounts: ReadonlyMap<string, number>;
+    /** Há seção para recolher? Decide se os botões da barra aparecem. */
+    hasSections: boolean;
+    toggle: (id: string) => void;
+    /**
+     * Volta ao resumo de abertura, e não a "tudo recolhido": fechar também as
+     * seções que contêm outras esconderia os subtotais que o resumo existe
+     * para mostrar.
+     */
+    collapseToSummary: () => void;
+    expandAll: () => void;
+}
+export declare function useCollapse(lines: readonly StatementComputedLine[]): CollapseState;

package/dist/hooks/useCurrentPeriod.d.ts

@@ -0,0 +1,9 @@
+import type { RefObject } from 'react';
+/**
+ * Chave do período mais visível em `scrollRef`, ou null.
+ *
+ * `keys` dita a ordem de desempate e, mudando, reanexa o observador: as
+ * colunas são outras e os `th` também. Passe a lista memoizada; uma nova a
+ * cada render religaria o observador a cada render.
+ */
+export declare function useCurrentPeriod(scrollRef: RefObject<HTMLElement | null>, keys: readonly string[]): string | null;

package/dist/hooks/useNarrowPane.d.ts

@@ -0,0 +1,9 @@
+/** Abaixo disto o documento troca a folha pelo modo período. */
+export declare const NARROW_PANE_PX = 600;
+export interface UseNarrowPaneResult {
+    /** Ref callback para o elemento medido. */
+    ref: (element: HTMLDivElement | null) => void;
+    /** True quando `enabled` e a largura medida é menor que o limiar. */
+    narrow: boolean;
+}
+export declare function useNarrowPane(enabled: boolean, threshold?: number): UseNarrowPaneResult;

package/dist/index.d.ts

@@ -3,5 +3,5 @@ export { Dashboard } from './Dashboard';
 export type { DashboardProps } from './Dashboard';
 export type { DashboardGeometry } from './utils/grid';
 export { Statement } from './Statement';
-export type { StatementProps } from './Statement';
+export type { StatementProps, StatementLayoutMode } from './Statement';
 export { ApiError } from './api/fetcher';