@proef/common-ui 2.2.2 → 2.2.3

package/dist/esm/v1/components/tables/PaginatedTable/PaginatedTable.js

@@ -16,6 +16,7 @@ function PaginatedTable({
   horizontalScrollbarBelow = true,
   skeleton = true,
   fadeRight = true,
+  resizableColumns = true,
   ...resto
 }) {
   const [tamanhoProprio, setTamanhoProprio] = useState(pageSize ?? pageSizeOptions?.[0] ?? 50);
@@ -34,6 +35,7 @@ function PaginatedTable({
       horizontalScrollbarBelow,
       skeleton,
       fadeRight,
+      resizableColumns,
       paginacaoNoTopo: {
         total,
         page,

package/dist/esm/v1/components/tables/PaginatedTable/PaginatedTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginatedTable.js","sources":["../../../../../../src/v1/components/tables/PaginatedTable/PaginatedTable.tsx"],"sourcesContent":["import React, { useState } from 'react'\r\nimport { TableBase, type TableProps } from '../Table/Table'\r\n\r\nexport interface PaginatedTableProps<T> extends TableProps<T> {\r\n  /**\r\n   * Total de linhas no servidor, quando é ele que pagina (`page` e\r\n   * `onPageChange`). É o número da contagem e dá o número de páginas.\r\n   */\r\n  total?: number\r\n  /**\r\n   * Página atual (a contar de 1), quando é o servidor que pagina: a app pede a\r\n   * página e dá-a em `data`. Sem isto, a tabela pagina-se a si mesma com todas\r\n   * as linhas de `data`.\r\n   */\r\n  page?: number\r\n  onPageChange?: (page: number) => void\r\n  /** Tamanhos de página à escolha (ex: `[60, 120, 250, 500]`). Sem isto não há escolha. */\r\n  pageSizeOptions?: number[]\r\n  /**\r\n   * A pessoa escolheu outro tamanho de página. Quando é o servidor que pagina,\r\n   * a app volta à página 1 (ficar na 7.ª com 500 por página caía fora da lista).\r\n   * Sem isto, a tabela guarda a escolha ela própria.\r\n   */\r\n  onPageSizeChange?: (pageSize: number) => void\r\n}\r\n\r\n/**\r\n * A [Table](?path=/docs/v1-components-tables-table--docs) para listas de página inteira: a paginação fica EM CIMA, numa\r\n * barra com a contagem de linhas, o tamanho de página e os números de página,\r\n * em vez de no fundo.\r\n *\r\n * Funciona de duas maneiras:\r\n *  - **O servidor pagina** (`page`, `onPageChange`, `total`): `data` é a\r\n *    página atual. Com filtros, ordenação ou agrupamento no cabeçalho, a tabela\r\n *    passa a paginar o conjunto completo (`allData`) e a barra mostra as\r\n *    páginas dela.\r\n *  - **Todas as linhas de uma vez** (só `data`): a tabela pagina-se a si mesma.\r\n *\r\n * Por omissão ocupa a altura do pai (`fillHeight`), com as barras de scroll\r\n * por cima das linhas, linhas-esqueleto a carregar e a aresta direita\r\n * esbatida. Qualquer uma pode ser desligada.\r\n */\r\nexport default function PaginatedTable<T>({\r\n  total,\r\n  page,\r\n  onPageChange,\r\n  pageSizeOptions,\r\n  onPageSizeChange,\r\n  pageSize,\r\n  data,\r\n  allData,\r\n  alwaysClient,\r\n  fillHeight = true,\r\n  overlayScrollbars = true,\r\n  horizontalScrollbarBelow = true,\r\n  skeleton = true,\r\n  fadeRight = true,\r\n  ...resto\r\n}: PaginatedTableProps<T>) {\r\n  const [tamanhoProprio, setTamanhoProprio] = useState(pageSize ?? pageSizeOptions?.[0] ?? 50)\r\n  const tamanho = onPageSizeChange ? (pageSize ?? pageSizeOptions?.[0] ?? 50) : tamanhoProprio\r\n  // Sem paginação do servidor, todas as linhas são o conjunto completo e a tabela pagina-as.\r\n  const peloServidor = !!onPageChange && page !== undefined\r\n  return (\r\n    <TableBase\r\n      {...resto}\r\n      data={data}\r\n      allData={peloServidor ? allData : (allData ?? data)}\r\n      alwaysClient={peloServidor ? alwaysClient : true}\r\n      pageSize={tamanho}\r\n      fillHeight={fillHeight}\r\n      overlayScrollbars={overlayScrollbars}\r\n      horizontalScrollbarBelow={horizontalScrollbarBelow}\r\n      skeleton={skeleton}\r\n      fadeRight={fadeRight}\r\n      paginacaoNoTopo={{\r\n        total,\r\n        page,\r\n        onPageChange,\r\n        pageSizeOptions,\r\n        onPageSizeChange: onPageSizeChange ?? (pageSizeOptions ? setTamanhoProprio : undefined),\r\n      }}\r\n    />\r\n  )\r\n}\r\n"],"names":[],"mappings":";;;AA0CA,SAAwB,eAAkB;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,oBAAoB;AAAA,EACpB,2BAA2B;AAAA,EAC3B,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,GAAG;AACL,GAA2B;AACzB,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,YAAY,kBAAkB,CAAC,KAAK,EAAE;AAC3F,QAAM,UAAU,mBAAoB,YAAY,kBAAkB,CAAC,KAAK,KAAM;AAE9E,QAAM,eAAe,CAAC,CAAC,gBAAgB,SAAS;AAChD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,SAAS,eAAe,UAAW,WAAW;AAAA,MAC9C,cAAc,eAAe,eAAe;AAAA,MAC5C,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,iBAAiB;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,kBAAkB,qBAAqB,kBAAkB,oBAAoB;AAAA,MAAA;AAAA,IAC/E;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"PaginatedTable.js","sources":["../../../../../../src/v1/components/tables/PaginatedTable/PaginatedTable.tsx"],"sourcesContent":["import React, { useState } from 'react'\r\nimport { TableBase, type TableProps } from '../Table/Table'\r\n\r\nexport interface PaginatedTableProps<T> extends TableProps<T> {\r\n  /**\r\n   * Total de linhas no servidor, quando é ele que pagina (`page` e\r\n   * `onPageChange`). É o número da contagem e dá o número de páginas.\r\n   */\r\n  total?: number\r\n  /**\r\n   * Página atual (a contar de 1), quando é o servidor que pagina: a app pede a\r\n   * página e dá-a em `data`. Sem isto, a tabela pagina-se a si mesma com todas\r\n   * as linhas de `data`.\r\n   */\r\n  page?: number\r\n  onPageChange?: (page: number) => void\r\n  /** Tamanhos de página à escolha (ex: `[60, 120, 250, 500]`). Sem isto não há escolha. */\r\n  pageSizeOptions?: number[]\r\n  /**\r\n   * A pessoa escolheu outro tamanho de página. Quando é o servidor que pagina,\r\n   * a app volta à página 1 (ficar na 7.ª com 500 por página caía fora da lista).\r\n   * Sem isto, a tabela guarda a escolha ela própria.\r\n   */\r\n  onPageSizeChange?: (pageSize: number) => void\r\n}\r\n\r\n/**\r\n * A [Table](?path=/docs/v1-components-tables-table--docs) para listas de página inteira: a paginação fica EM CIMA, numa\r\n * barra com a contagem de linhas, o tamanho de página e os números de página,\r\n * em vez de no fundo.\r\n *\r\n * Funciona de duas maneiras:\r\n *  - **O servidor pagina** (`page`, `onPageChange`, `total`): `data` é a\r\n *    página atual. Com filtros, ordenação ou agrupamento no cabeçalho, a tabela\r\n *    passa a paginar o conjunto completo (`allData`) e a barra mostra as\r\n *    páginas dela.\r\n *  - **Todas as linhas de uma vez** (só `data`): a tabela pagina-se a si mesma.\r\n *\r\n * Por omissão ocupa a altura do pai (`fillHeight`), com as barras de scroll\r\n * por cima das linhas, linhas-esqueleto a carregar e a aresta direita\r\n * esbatida, e as colunas redimensionáveis. Qualquer uma pode ser desligada.\r\n */\r\nexport default function PaginatedTable<T>({\r\n  total,\r\n  page,\r\n  onPageChange,\r\n  pageSizeOptions,\r\n  onPageSizeChange,\r\n  pageSize,\r\n  data,\r\n  allData,\r\n  alwaysClient,\r\n  fillHeight = true,\r\n  overlayScrollbars = true,\r\n  horizontalScrollbarBelow = true,\r\n  skeleton = true,\r\n  fadeRight = true,\r\n  resizableColumns = true,\r\n  ...resto\r\n}: PaginatedTableProps<T>) {\r\n  const [tamanhoProprio, setTamanhoProprio] = useState(pageSize ?? pageSizeOptions?.[0] ?? 50)\r\n  const tamanho = onPageSizeChange ? (pageSize ?? pageSizeOptions?.[0] ?? 50) : tamanhoProprio\r\n  // Sem paginação do servidor, todas as linhas são o conjunto completo e a tabela pagina-as.\r\n  const peloServidor = !!onPageChange && page !== undefined\r\n  return (\r\n    <TableBase\r\n      {...resto}\r\n      data={data}\r\n      allData={peloServidor ? allData : (allData ?? data)}\r\n      alwaysClient={peloServidor ? alwaysClient : true}\r\n      pageSize={tamanho}\r\n      fillHeight={fillHeight}\r\n      overlayScrollbars={overlayScrollbars}\r\n      horizontalScrollbarBelow={horizontalScrollbarBelow}\r\n      skeleton={skeleton}\r\n      fadeRight={fadeRight}\r\n      resizableColumns={resizableColumns}\r\n      paginacaoNoTopo={{\r\n        total,\r\n        page,\r\n        onPageChange,\r\n        pageSizeOptions,\r\n        onPageSizeChange: onPageSizeChange ?? (pageSizeOptions ? setTamanhoProprio : undefined),\r\n      }}\r\n    />\r\n  )\r\n}\r\n"],"names":[],"mappings":";;;AA0CA,SAAwB,eAAkB;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,oBAAoB;AAAA,EACpB,2BAA2B;AAAA,EAC3B,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,GAAG;AACL,GAA2B;AACzB,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,YAAY,kBAAkB,CAAC,KAAK,EAAE;AAC3F,QAAM,UAAU,mBAAoB,YAAY,kBAAkB,CAAC,KAAK,KAAM;AAE9E,QAAM,eAAe,CAAC,CAAC,gBAAgB,SAAS;AAChD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,SAAS,eAAe,UAAW,WAAW;AAAA,MAC9C,cAAc,eAAe,eAAe;AAAA,MAC5C,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,iBAAiB;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,kBAAkB,qBAAqB,kBAAkB,oBAAoB;AAAA,MAAA;AAAA,IAC/E;AAAA,EAAA;AAGN;"}

package/dist/esm/v1/components/tables/Table/Table.js

@@ -53,6 +53,7 @@ function TableBase({
   headerRowClassName: classeCabecalho = "bg-slate-50",
   scrollbarOnEdge: barraNaBorda = true,
   bordered: comCaixa = false,
+  resizableColumns: redimensionavel = false,
   horizontalScrollbarBelow: barraHorizontalFora = false,
   skeleton: esqueletoAoCarregar = false,
   fadeRight: esbaterDireita = false,
@@ -886,6 +887,41 @@ function TableBase({
     ro.observe(c);
     return () => ro.disconnect();
   }, [preencheAltura, paginatedData]);
+  const redimensionar = useRef(null);
+  const MIN_LARGURA = 48;
+  const pegaRedimensionar = (chave) => redimensionavel && larguras ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "separator",
+      "aria-orientation": "vertical",
+      title: L.resizeColumn,
+      onPointerDown: (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        e.currentTarget.setPointerCapture?.(e.pointerId);
+        const th = e.currentTarget.parentElement;
+        redimensionar.current = { chave, x: e.clientX, largura: th.getBoundingClientRect().width };
+      },
+      onPointerMove: (e) => {
+        const r = redimensionar.current;
+        if (!r) return;
+        const nova = Math.max(MIN_LARGURA, Math.round(r.largura + e.clientX - r.x));
+        setLarguras((l) => l ? { ...l, [r.chave]: nova } : l);
+      },
+      onPointerUp: () => {
+        redimensionar.current = null;
+      },
+      onPointerCancel: () => {
+        redimensionar.current = null;
+      },
+      onClick: (e) => e.stopPropagation(),
+      onDoubleClick: (e) => {
+        e.stopPropagation();
+        setLarguras(null);
+      },
+      className: "absolute right-0 top-0 z-[5] h-full w-1.5 cursor-col-resize touch-none bg-transparent transition-colors hover:bg-primary/40"
+    }
+  ) : null;
   const grupoColunas = largurasVista ? /* @__PURE__ */ jsx("colgroup", { children: chavesVista.map((k) => /* @__PURE__ */ jsx("col", { style: { width: largurasVista[k] } }, k)) }) : null;
   const estiloTabela = largurasVista ? { tableLayout: "fixed", width: chavesVista.reduce((a, k) => a + (largurasVista[k] ?? 0), 0), minWidth: "100%" } : { width: "max-content" };
   const cabecalho = (fixoNoTopo) => /* @__PURE__ */ jsx("thead", { className: fixoNoTopo ? "sticky top-0 z-20" : void 0, children: /* @__PURE__ */ jsxs("tr", { ref: cabecalhoRef, className: `text-micro font-black uppercase text-slate-400 tracking-[0.15em] ${!bordasSeparadas ? "border-b-2 border-slate-200 bg-slate-50" : fundoNosTitulos ? "[&>th]:border-b-2 [&>th]:border-slate-200" : "shadow-[inset_0_-2px_0_0_var(--color-slate-200)]"}`, children: [
@@ -904,7 +940,7 @@ function TableBase({
         {
           style: cabecaFixa(i + (selectable ? 1 : 0)).style,
           onPointerDown: arrastavel ? (e) => premirTitulo(e, col.key) : void 0,
-          className: `px-4 py-3 ${col.headerClassName ?? ""} ${cabecaFixa(i + (selectable ? 1 : 0)).className} ${arrastavel ? "cursor-grab" : ""} ${realce(col.key, true)} ${transicaoRealce}`,
+          className: `px-4 py-3 ${cabecaFixa(i + (selectable ? 1 : 0)).style ? "" : "relative"} ${col.headerClassName ?? ""} ${cabecaFixa(i + (selectable ? 1 : 0)).className} ${arrastavel ? "cursor-grab" : ""} ${realce(col.key, true)} ${transicaoRealce}`,
           "data-col": col.key,
           children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 group/hdr whitespace-nowrap select-none", children: [
@@ -913,12 +949,16 @@ function TableBase({
                 {
                   onClick: () => {
                     if (!allData) onDataNeeded?.();
-                    if (sortCol === col.key) setSortDir((d) => d === "asc" ? "desc" : "asc");
+                    if (sortCol === col.key && sortDir === "desc") {
+                      setSortCol(defaultSortCol ?? null);
+                      setSortDir(defaultSortDir ?? "asc");
+                    } else if (sortCol === col.key) setSortDir("desc");
                     else {
                       setSortCol(col.key);
                       setSortDir("asc");
                     }
                   },
+                  title: isSortActive && sortDir === "desc" ? L.resetSort : void 0,
                   className: `flex items-center gap-0.5 transition-colors hover:text-slate-700 ${isSortActive ? "text-proef-blue" : ""}`,
                   children: [
                     /* @__PURE__ */ jsx("span", { children: col.label }),
@@ -972,8 +1012,13 @@ function TableBase({
                     ordenadaPor: sortCol === col.key ? sortDir : null,
                     aCarregar: !allData && !!isAllDataLoading,
                     onOrdenar: (dir) => {
-                      setSortCol(col.key);
-                      setSortDir(dir);
+                      if (sortCol === col.key && sortDir === dir) {
+                        setSortCol(defaultSortCol ?? null);
+                        setSortDir(defaultSortDir ?? "asc");
+                      } else {
+                        setSortCol(col.key);
+                        setSortDir(dir);
+                      }
                     },
                     onAplicar: (vals) => {
                       aplicarValores(col.key, vals);
@@ -1055,7 +1100,8 @@ function TableBase({
                 ] }, sf.key);
               })
             ] }),
-            col.headerExtra && /* @__PURE__ */ jsx("div", { className: "mt-0.5 normal-case font-normal tracking-normal", children: col.headerExtra(filteredData) })
+            col.headerExtra && /* @__PURE__ */ jsx("div", { className: "mt-0.5 normal-case font-normal tracking-normal", children: col.headerExtra(filteredData) }),
+            pegaRedimensionar(col.key)
           ]
         },
         col.key